MediaWiki:Common.less/mainpage.less

De RuneScape Wiki
Ir para: navegação, pesquisa
// <pre>
/* ===================
        PÁGINA PRINCIPAL
   =================== */

// @TODO: switch to grid for layout with flexbox fallback

/* ===================
        variables
   =================== */

@mp-text-light: fade( @white, 90% );
@mp-border-color: @mystic;
@mp-gutter-width: .9rem;

@social-discord:   #7289da;
@social-facebook:  #4262a9;
@social-parceiros: @steel-blue;

/* ===================
          mixins
   =================== */

// background-image support for high DPI screens
// (not currently used)
.bg-image(@filename; @width: 400; @2xwidth: @width*2;) {
    background-image: filepath( escape('@{filename}'), '@{width}' );

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        background-image: filepath( escape('@{filename}'), '@{2xwidth}' );
    }

}

// skill training colors
.skill-color(@color) {

    // icon
    a:first-child {
        background: desaturate( lighten( @color, 15% ), 20% );
    }

    // skill name
    &:hover a:last-child {
        background: @color;
    }

}

/* ==========================
      page-specific styles
   ========================== */

body.page-RuneScape_Wiki {

    // limit max width for readability
    // don't use #mw-content-text because it includes the editform
    .mw-parser-output {
        max-width: 75em;
        margin: 0 auto;
    }

    // not when editing
    &.action-view {

        .catlinks,
        #contentSub,
        // hide pagetitle in favor of .mainpage-header
        #firstHeading,
        // anything listed in the sitenotice should already be on the main page
        #siteNotice {
            display: none;
        }

    }

}

/* ====================
      general styles
   ==================== */

.mainpage-header {
    display: flex;
    margin: 2.6em 1.75em 1.5em;

    .header-intro {
        flex: 2;

        h1 {
            font-size: 2.5em;
            border: none;
            margin: 0 0 .15em;

            // keep entire header on one line
            body.wgl-readermode & {
            	font-size: 2.25em;
            }

        }

        p {
            font-size: 1.1em;
            line-height: 1.7em;
        }

    }

    .header-stats {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -1em;

        ul {
            list-style: none;
        }

    }

    .announcement {
        margin: .5em 0 1.5em;

        a {
            background: @black-haze;
            border: 1px solid @mystic;
            color: @shuttle-gray;
            font-size: .9em;
            line-height: 1.25em;
            padding: .25em .75em;
            border-radius: 10em;
            transition: .25s ease;

            display: inline-flex; // vertically center the pill
            align-items: center;

            &:hover {
                text-decoration: none;
                box-shadow: @box-shadow;
            }

        }

        .announcement-pill {
            background: @lima;
            color: @white;
            font-size: .85em;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 10em;
            padding: .1em .6em;
            margin: 0 .5em 0 -0.5em;
        }

        .arrow.dark {
            margin-left: .5em;
            filter: invert(50%);
        }

    }

}

// main sections
.mainpage-body {
    display: flex;
    flex-flow: row wrap;

    h2 a {
        color: @base-heading-color; // from [[MediaWiki:Common.less/elementos.less]]
    }

    .tile {
        padding-left: 1.75em;
        padding-right: 1.75em;
        max-width: 100%;
    }

    .tile-row {
        width: 100%;
        margin-bottom: @mp-gutter-width;
    }

}

// left column
.mainpage-left {
    flex: 2;
    display: flex;
    flex-flow: column wrap;
    margin-right: @mp-gutter-width;

    > * {
        margin: 0 0 @mp-gutter-width;
    }

}

// right column
.mainpage-right {
    flex: 1;
    display: flex;
    flex-flow: column wrap;

    > * {
        margin: 0 0 @mp-gutter-width;
    }

}

/* ====================
        components
   ==================== */

.arrow {
    background: url('filepath://White-chevron.svg') no-repeat;
    display: inline-block;
    height: .7rem;
    width: .45rem;
    vertical-align: middle;

    &.dark {
        filter: invert(80%);
    }

}

/* =============================
      section-specific styles
   ============================= */
   
/* --------------------
      destaques
   -------------------- */
   
.mainpage-destaques.tile {
    background: linear-gradient(to left, fade( @bay-of-many, 0% ), fade( @bay-of-many, 50% ) 70px, @bay-of-many 250px), filepath('Destaques.jpg') right / auto 100% no-repeat @bay-of-many;
    margin-bottom: @mp-gutter-width;
    padding-right: 8vw;
    width: 100%;

    @media only screen and (max-width: 66rem) {
        background: linear-gradient(to left, fade( @bay-of-many, 0% ), fade( @bay-of-many, 50% ) 70px, @bay-of-many 250px), filepath('Destaques.jpg') right / auto 100% no-repeat @bay-of-many;
    }

}

.mainpage-destaques2.tile {
    background: @steel-blue;
    margin-bottom: @mp-gutter-width;
    width: 100%;

    @media only screen and (max-width: 66rem) {
        background: @steel-blue;
    }

}
/* --------------------
      notícias recentes
   -------------------- */

.mainpage-noticias-recentes {
	
	.tile {
        flex: 1;
        padding-left: 0;
        padding-right: 0;
        margin-right: @mp-gutter-width;

        &:last-child {
            margin-right: 0;
        }

    }

     .tile-halves {
        flex: 1;
        align-content: flex-start;
        margin-right: @mp-gutter-width;

        // zoom on hover
        &:hover .tile-top img {
            transform: scale(1.04);
        }

        &:last-child {
            margin-right: 0;
        }

    }

    body.wgl-readermode & .tile-image {
        max-height: 10.5em;
    }

    .tile-bottom.link-button a {
        text-align: left;
        padding: 1rem 1.5rem .75rem;
    } 

    h2 {
        margin: -0.5em 0 .3em;
    }

    p:not(.byline) {
        font-size: .9em;
        line-height: 1.75em;
        color: @river-bed;
    }

    .jagex-promotion .byline {
        color: @medium-purple;
    }

}

/* --------------------
      destaques da rsw
   -------------------- */

.mainpage-destaque {
	
	.tile {
        flex: 1;
        padding-left: 0;
        padding-right: 0;
        margin-right: @mp-gutter-width;

        &:last-child {
            margin-right: 0;
        }

    }

     .tile-halves {
        flex: 1;
        align-content: flex-start;
        margin-right: @mp-gutter-width;

        // zoom on hover
        &:hover .tile-top img {
            transform: scale(1.04);
        }

        &:last-child {
            margin-right: 0;
        }

    }

    body.wgl-readermode & .tile-image {
    }

    .tile-bottom.link-button a {
        text-align: center;
        padding: 1rem 1.5rem .75rem;
    } 

    h2 {
        margin: -0.5em 0 .3em;
    }

    p:not(.byline) {
        font-size: .9em;
        line-height: 1.75em;
        color: @river-bed;
    }

    .jagex-promotion .byline {
        color: @medium-purple;
    }

}

/* --------------------
      wiki contents
   -------------------- */
@mp-contents-height: 4.5rem;

.mainpage-atalhos {

    .tile-halves {
        flex: 1;
        margin-right: @mp-gutter-width;

        // zoom on hover
        &:hover .tile-top img {
            transform: scale(1.04);
        }

        &:last-child {
            margin-right: 0;
        }

    }

    .tile-top {
        height: @mp-contents-height;
        position: relative; // needed for ribbon

        h2 a {
            display: block;
            text-align: center;
            text-decoration: none;
            line-height: @mp-contents-height;
            padding-left: .45rem; // to make up for arrow width
        }

    }

    h2 {
        margin: 0;
        padding: 0;
    }

}

/* --------------------
      treinamento de habilidades
   -------------------- */

.mainpage-habilidades {

    ul {
        columns: 3;
        margin: 1em .7em .7em 1em;
        
        // Bug: 1px from item in the next column appears in previous column when hovering
        // Solution: Known issue on <https://caniuse.com/#feat=multicolumn>, fixed
        // by forcing the browser to trigger GPU acceleration and recalculate
        transform: translateZ(0);
    }

    // skill row
    li {
        display: flex;
        margin-bottom: .4em;

        a {

            // skill icon
            &:first-child {
                border-radius: 3px;
                padding: 4px;
                width: 25px;
                height: 25px;
            }

            // skill text
            &:last-child {
                flex: 1;
                display: flex;
                align-items: center;
                color: @base-text-color; // from [[MediaWiki:Common.less/elements.less]]
                font-weight: bold;
                padding-left: .7em;
                text-decoration: none;
            }

        }

        &:hover a {

            &:first-child {
                border-radius: 3px 0 0 3px;
            }

            &:last-child {
                color: @mp-text-light;
                border-radius: 0 3px 3px 0;
            }

        }

    }

}

.skill-agilidade,
.skill-corpo-a-corpo {
    .skill-color( #932419 ); // red
}

.skill-a-distancia {
    .skill-color( #4c6215 ); // green
}

.skill-magia {
    .skill-color( #304791 ); // blurple
}

.skill-pesca,
.skill-arco-e-flecha {
    .skill-color( #1a6671 ); // bluish
}

.skill-culinaria,
.skill-divinacao,
.skill-roubo {
    .skill-color( #713684 ); // purple
}

.skill-agricultura,
.skill-corte-de-lenha {
    .skill-color( #306f25 ); // dark green
}

.skill-mineracao,
.skill-evocacao {
    .skill-color( #315f8d ); // dark blue
}

.skill-invencao,
.skill-metalurgia {
    .skill-color( #b69213 ); // gold
}

.skill-arqueologia {
	.skill-color( #784212 ); // brown
}
/* --------------------
        portal
   -------------------- */

.mainpage-portal {


}

/* --------------------
          social
   -------------------- */

.mainpage-social {
    border: none;
    box-shadow: @box-shadow-dark;

    .tile-top {
        display: flex;
        align-items: center;
        padding: 1em 1.75em;

        a {
            flex: 1;
            position: relative;
            text-decoration: none;

            &:hover .arrow {
                transform: translateX(50%);
            }

        }

    }

    .tile-bottom {
        border: none;
        padding: 1em 1.75em;

        p {
            color: @white;
            font-weight: bold;
            font-size: .9em;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: .03em;
            margin: 0;
        }

    }

    .social-icon {
        margin-right: .75em;
        width: 60px;
        text-align: center;
    }

    .social-header {
        color: @white;
        font-weight: bold;
        font-size: 1.15em;
        margin: .5em 0 -0.15em;

        // title gets too close to arrow
        body.wgl-readermode & {
        	font-size: 1.05em;
        }

    }

    .social-tagline {
        color: @mp-text-light;
        margin-bottom: .5em;
    }

    .arrow {
        position: absolute;
        top: ~"calc(50% - .5em)"; // center arrow on its point
        right: 0;
        height: 1em;
        width: .7em;
        background-size: .7em 1em;
        transition: .3s ease-out;
    }

	.social(@color) {
		@color-dark: saturate( darken( @color, 4% ), 4% );
		@color-darker: saturate( darken( @color, 8% ), 2% );
		
		.tile-top {
            background: @color;
            
            &:hover {
		        background: @color-darker;
		    }
        }

        .tile-bottom {
            background: @color-dark;
        }
        
	}
	
	// Discord
    &.mainpage-discord  {
		.social(@social-discord);
    }

    // Facebook
    &.mainpage-facebook  {
		.social(@social-facebook);
    }

    // Parceiros
    &.mainpage-parceiros  {
		.social(@steel-blue);
    }

}

/* --------------------
           poll
   -------------------- */
.mainpage-poll .ajaxpoll {
    padding: 0;
    width: 100%;
    border: none;
    box-shadow: none;
}

/* --------------------
      missões recentes
   -------------------- */

.mainpage-missoes {

    img {
        margin: .7em 0 1.15em;
        .filter( drop-shadow(0 .15em .25em rgba(0,0,0,.15)) );
    }

    // caption
    .tile-top p:not(.byline) {
        font-size: .9em;
        line-height: 1.8em;
    }

}

/* --------------------
        wiki news
   -------------------- */

.mainpage-wikinews {

    .news-date {
        font-weight: bold;
        margin-bottom: .3em;
    }

    p:not(.news-date) {
        margin-left: 1em;
    }

}

/* --------------------
      popular pages
   -------------------- */

.popular-pages ul {
    display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: .6em;
    margin: 1em 0 .7em 0;
}

// skill row
.mp-popular-page-light {
	display: flex;
	align-items: center;
	list-style: none;
    background-color: #438ab5;

    a {
    	flex: 1;
    	display: block;
        color: white;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        padding: .7em 1em;
    }

    &:hover {
        filter: brightness(115%);
        transition: 0.2s;
    }

}

@media screen and (max-width: 1000px) {

	.popular-pages  ul {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* ==========================
          media queries
   ========================== */

@media only screen and (max-width: 65.999rem) {

    .mainpage-noticias-recentes {

        .tile-halves {

            // hide third recent update
            &:last-child {
                display: none;
            }

            // remove margin for the (now) last tile
            &:nth-last-child(2) {
                margin-right: 0;
            }

        }

        .tile-top {
            height: 18vw;
        }

    }

    // switch to two rows of three tiles
    .mainpage-atalhos {

        .tile-halves {

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
                margin-bottom: @mp-gutter-width;
            }

            // remove margin for the (now) last tile on first row
            &:nth-child(3) {
                margin-right: 0;
            }

        }

        // this forces the tiles into a new row
        .line-break {
            width: 100%;
        }

    }

    .mainpage-habilidades {

        ul {
            columns: 2 9em;
        }

        // remove one skill to make columns even
        .skill-roubo {
            display: none;
        }

    }

    // hide other things
    .mainpage-header .header-stats,
    .mainpage-anteriormente {
        display: none;
    }

}

@media only screen and (min-width: 66rem) and (max-width: 81.999rem) {

    .mainpage-atalhos .tile-halves {

		// hide last contents tile
        &:last-child {
            display: none;
        }

        // remove margin for the (now) last tile
        &:nth-last-child(2) {
            margin-right: 0;
        }

    }

    .mainpage-header .header-stats,
    .mainpage-atalhos .line-break {
        display: none;
    }

}

@media only screen and (min-width: 82rem) {

    .mainpage-header .header-intro {
        margin-right: 2em;
    }

    .mainpage-atalhos .line-break {
        display: none;
    }

    // lazy fix  - don't know why last tile wraps around to new line
    body.wgl-readermode .mainpage-atalhos .tile-halves {

	    // hide last contents tile
        &:last-child {
            display: none;
        }

        // remove margin for the (now) last tile
        &:nth-last-child(2) {
            margin-right: 0;
        }

    }

}

// </pre>