MediaWiki:Mobile.less/tile.less

// <pre>
// standard tile class
// mainpage.less relies on this; check before changing anything

@tile-border-color: @mystic;
@tile-background-color: @white;
@byline-color: @gray-chateau;

/* ------------------
          tile
   ------------------ */

.tile {
    background: @tile-background-color;
    border: 1px solid @tile-border-color;
    box-shadow: @box-shadow;
    padding: 1.5em 2em 1em;

    h2 {
        font-weight: 600;
        border: none;
        margin-top: .4em;
	}
	
    // reduce spacing when byline and heading appear together
    // (which should be the only way bylines appear)
    .byline + h2 {
        margin-top: -0.5em;
	}

}

.byline {
	font-size: .9em;
	color: @byline-color;

    a {
    	color: @byline-color;
    }

}

/* ------------------
         halves
   ------------------ */

.tile-halves {
    border: 1px solid @tile-border-color;
    background: @tile-background-color;
    box-shadow: @box-shadow;

    .byline + h2 {
        margin-top: -0.5em;
	}

}

// goes inside tile-halves
.tile-top {
    padding: 1.3rem 1.5rem 2rem;

    &.tile-image {
        background-color: @gray-chateau;
        padding: 0;
    }

}

// goes inside tile-halves
.tile-bottom {
    background: @tile-background-color;
    border-top: 1px solid @tile-border-color;
    padding: 1rem 1.5rem 2rem;

    &.read-more {
        background: @black-haze;
        padding: 0;
        transition: .3s ease-out;

        a {
            display: block;
            color: @byline-color;
            font-weight: bold;
            text-align: right;
            padding: 1em 1.75em;
            text-decoration: none;

        }

        &:hover {
            background: saturate( darken( @black-haze, 2.5% ), 2% );
        }

        .arrow {
            filter: invert(43%) sepia(50%) hue-rotate(175deg); // match @gray-chateau
            margin-left: .4em;
            transition: .3s ease-out;
        }

    }

}