MediaWiki:Common.less/infobox.less

De RuneScape Wiki
Ir para: navegação, pesquisa
// <pre>
/* ====================
       new infoboxes
   ==================== */
// @TODO: change .rsw-infobox back to .infobox when everything is updated

@infobox-background: @white;
@infobox-header-color: #246c97; // @jelly-bean;
@infobox-header-border: .5em solid @infobox-background;
@infobox-subheader-color: @fountain-blue;
@infobox-cell-border: 1px solid @mystic;
@infobox-corner-radius: 30px;

.rsw-infobox {
    background: @infobox-background;
    font-size: .85em;
    width: 300px; // fixed size so image always fills entire width
    margin: .5em 0 1em 1em;
    border-collapse: collapse;
    box-shadow: @box-shadow;
    float: right;
    border-radius: @infobox-corner-radius 0 0 0;

    .infobox-header {
        color: @white;
        font-size: 1.15em;
        line-height: 1.4em;
        background: @infobox-header-color;
        padding: .5em 0;
        border-radius: @infobox-corner-radius 0 0 0;
        position: relative;
        
        .icon {
        	position: absolute;
        	top: 0.3em;
        	right: 0.5em;
        	filter: drop-shadow(0 0 5px lighten(@infobox-header-color, 20%) );
        }
    }

    .infobox-subheader {
        background: @infobox-subheader-color;
        color: @white;
        line-height: 2em;
        border-top: @infobox-header-border;
        border-bottom: @infobox-header-border;

        a {
        	color: @white;
        }
	.header-ataque-sub {
            text-align: center;
        }
    }

    // usually first row
    .infobox-image {
    	text-align: center;
    	padding-top: .6em;

        // for things like inventory icon in infobox item
        &.bordered-image {
            border: @infobox-cell-border;
            padding: .4em;
        }
        
        &.fill-image {
            border-top: @infobox-cell-border;
            border-bottom: @infobox-cell-border;
            padding: 0;
        }

        // keep infobox images from sticking together
        a.image + a.image {
            margin-left: .1em;
        }

        img {
            max-width: 300px;
            height: auto;
        }

    }

    // usually last row
    .infobox-map {
       text-align: center;

        img {
            max-width: 300px;
            height: auto;
            margin: .5em 0;
        }

    }

    // browsers get your shit together https://caniuse.com/#feat=css-not-sel-list
    th:not(.infobox-header):not(.infobox-subheader):not(.info-right-left-border):not(.info-right-border-0):not(.info-right-border-1) {
        text-align: right;
        vertical-align: top;
        border-left: @infobox-cell-border;
        border-right: .175em solid @infobox-subheader-color;
        padding: 0.2em 0.5em;
    }

    td {

        &:not(.infobox-image):not(.infobox-map):not(.info-right-left-border):not(.info-right-border-0):not(.info-right-border-1) {
        	border-right: @infobox-cell-border;
            padding: 0.25em 0.5em;
            line-height: 1.6em;
        }

        // for full width td's at the bottom like infobox item examine
        &[colspan="2"] {
        	border-left: @infobox-cell-border;
        	border-right: @infobox-cell-border;
        	padding-bottom: .6em;
    	}
    	
    	// for lists like the ones on [[Grand Tree mine]] and [[Robot of Sherwood]]
    	// inside <td> for specificity
    	ul {
    		margin: 0 0 0 1.25em;
    	}

    }

    .infobox-cell-hidden {
        display: none;
    }

    .infobox-template-links {
        text-align: center;
    }

}

/* used in [[Module:Infobox]] to contain switch infoboxes  */
/* we're trying to remove all instances of infobox-wrapper */
.infobox-wrapper {
	display: table;
	float: right;
}

/* =============================
      infobox-specific styles
   ============================= */

/* ----------------------
       Infobox item
  ---------------------- */

.infobox-objeto {

    // for HiDPI screens; otherwise inventory icons appear blurry
    .infobox-image {
    	image-rendering: -moz-crisp-edges; // firefox doesn't support unprefixed
    	image-rendering: pixelated; // chrome only supports this value
    	image-rendering: crisp-edges; // this is what should be used; only safari supports it
    }

}

/* ----------------------
       Infobox missão
  ---------------------- */
.infobox-missao {
	background-color: @white;
	box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);
	border-radius:0 @infobox-corner-radius 0 @infobox-corner-radius; // top-right, bottom-left
	
	.header {
		color: @white;
		background-color: #246c97; //#3462AD; 
		border-radius: 0 @infobox-corner-radius 0 0; // top-right
		padding: 0 10px;
	}
	
	> tbody {
		
		> tr > th {
			color: @white;
			background-color: #438ab5; //#246c97;
			text-align: right;
			padding: 0 10px;
			vertical-align: top;
			width: 100px;
		}
		
		> tr:last-child > th {
			border-radius: 0 0 0 @infobox-corner-radius;  // bottom-left
		}
		
	}
	
}

/* ----------------------
       Infobox bônus
  ---------------------- */
.infobox-bonus {
	background: @infobox-background;
	font-size: .85em;
	margin: .5em 1em 1em 0;
    box-shadow: @box-shadow;
	border-collapse: collapse;
    border-radius: 0 @infobox-corner-radius 0 0;
    clear: left;
	
	.infobox-header {
        color: @white;
        font-size: 1.15em;
        line-height: 1.4em;
        background: @infobox-header-color;
        padding: .5em 0;
        border-radius: 0 @infobox-corner-radius 0 0;
        border: none;
    }
	
	tr {
		border: 1px solid #e4eaee;
		
		// header
		&:first-child {
			border: none;
		}
	}
	
	th {
		background: lighten(@mystic, 5%);
        line-height: 2em;
		padding: 0;
		border-left: @infobox-cell-border;
        border-right: @infobox-cell-border;
		
	}
	
}


/* ========================
       legacy infoboxes
   ======================== */
   @border_color_1: #cbd9f4;
@background_color_2: grey;
@background_color_3: darkred;
@background_color_4: indianred;
@background_color_5: #4c4c4c;
@background_color_6: #3d789c;
@background_color_7: #74a5c2;
@text_color_1: white;
/* Usado em Predefinição:Monstro */
.infobox-panel {

	ul {
		margin-left: 1em;
		margin: 0 0 0 14px;
	}
	.clear-th {
		width: 100%;
		text-align: center;
    }
    /* Usado em Predefinição:Monstro (Combate e Extermínio) */
    .header-darkgrey {
        font-variant:small-caps; 
        background-color:@background_color_5; 
        color:@text_color_1;
    }
    /* Usado em Predefinição:Monstro (EXP EQUIP. e Designado por) */
	.header-lightgrey {
        font-variant:small-caps; 
        background-color:@background_color_2; 
        color:@text_color_1;
    }
    /* Usado em Predefinição:Monstro (Ofensivo) */
    .header-darkred {
        font-variant:small-caps; 
        background-color:@background_color_3; 
        color:@text_color_1;
    }
    /* Usado em Predefinição:Monstro (Dano máximo, Estilo, Velocidade, Níveis de Combate e Precisão) */
	.header-lightred {
        font-variant:small-caps; 
        background-color:@background_color_4; 
        color:@text_color_1;
    }
    /* Usado em Predefinição:Monstro (Defensivo) */
    .header-darkblue {
        font-variant:small-caps; 
        background-color:@background_color_6; 
        color:@text_color_1;
    }
    /* Usado em Predefinição:Monstro (Armadura, Fraqueza, Afinidades e Imunidades) */
	.header-lightblue {
        font-variant:small-caps; 
        background-color:@background_color_7; 
        color:@text_color_1;
    }
    /* Usado em Predefinição:Monstro (usado nas células com dados bem na direita) */
    .info-right-border-0 {
        text-align:center;
        border-right-color:@border_color_1;
        border-right-style:solid; 
        border-right-width:0px;
    }
    /* Usado em Predefinição:Monstro (usado em quase todas as células com dados) */
    .info-right-border-1 {
        text-align:center;
        border-right-color:@border_color_1;
        border-right-style:solid; 
        border-right-width:1px;
    }
    /* Usado em Predefinição:Monstro (usado nas células com dados bem da esquerda) */
    .info-right-left-border {
        text-align:center;
        border-right-color:@border_color_1;
        border-right-style:solid; 
        border-right-width:1px;
        border-left-width:0px;
    }
    .sub {
		padding: 0;
		border: 0;
		background-color: #f7f7f7;
		text-align: center;
	}
}
// @TODO: remove this when infoboxes are converted