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: @jelly-bean;
@infobox-header-border: .5em solid @infobox-background;
@infobox-subheader-color: @fountain-blue;
@infobox-cell-border: 1px solid @mystic;

.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;
    
    .rsw-infobox-switch-buttons {
    	.button {
    		margin: 1px;
    	}
    }

    .infobox-header {
        color: @white;
        font-size: 1.15em;
        line-height: 1.4em;
        background: @infobox-header-color;
        padding: .5em 0;
    }

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

        a {
        	color: @white;
        }
    }
    
    fieldset#rs-qc-form {
    	margin-bottom: 5px;
    }

    // usually first row
    .infobox-image {
    	text-align: center;

        // for things like inventory icon in infobox item
        &.bordered-image {
            border: @infobox-cell-border;
            border-bottom: none;
            padding: .4em;
        }
        
        // for noted item images
        &.noted-image div {
        	width: 100%;
        	height: 100%;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        }
        &.noted-image div > :first-child {
        	margin-right: 10px;
        }
        &.noted-image div > :last-child {
			display: inline-block;
			width: 31px;
			height: 30px;
			background-image: url("filepath://Cupom.png");
			position: relative;
			
			img {
				height: auto;
				width: auto;
				max-width: 20px;
				max-height: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

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

        img {
            max-width: 100%;
            height: auto;
        }

    }

    // usually last row
    .infobox-map {
        border-left: @infobox-cell-border;
        border-right: @infobox-cell-border;
    	text-align: center;

        img {
            max-width: 100%;
            height: auto;
            margin: .5em 0;
        }
        
        a.mw-kartographer-container,
        div.mw-kartographer-container {
        	margin: .5em auto;
        }

    }

    // browsers get your shit together https://caniuse.com/#feat=css-not-sel-list
    th:not(.infobox-header):not(.infobox-subheader) {
        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) {
        	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"]:not(.infobox-image):not(.infobox-map) {
        	border: @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;
    }
    
	.advanced-data {
	    display: none;
	}
}

/* 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-item {

	// shit's broke
    //.GEChartBox .smallChart {
    //    height: 165px !important; // inline
    //}

}

/* ----------------------
      Infobox monster 
   ---------------------- */

.rsw-infobox.infobox-monster {
    text-align: center;
    table-layout: fixed; // keep all columns the same width

    th:not(.infobox-header):not(.infobox-subheader):last-child {
    	border-right: @infobox-cell-border;
    }

    td:not(.infobox-image):not(.infobox-map) {
    	border-left: @infobox-cell-border;
    }

    th {
        &.combat-subheader {
            text-align: center;
        }

        &.offensive-header {
            background-color: @mocaccino;
            color: @white;
            text-align: center;
        }

        &.offensive-subheader {
            background-color: #ecccc6;
            color: @mocaccino;
            text-align: center;
    
            a {
                color: @mocaccino;
            }
            
            &:not(:last-child) {
                border-right: 0.175em solid @mocaccino;
            }
        }
    
        &.defensive-header {
            background-color: @steel-blue;
            color: @white;
            text-align: center;
        }
    
        &.defensive-subheader {
            background-color: #c1deed;
            color: @base-text-color;
            text-align: center;
    
            a {
                color: @base-text-color;
            }
    
        }
    
        &.slayer-header {
            background: @tundora;
            color: @white;
            text-align: center;
        }
        
        &.slayer-subheader {
        	background-color: @silver;
        	color: @tundora;
        	text-align: center;
        	
        	&:not(:last-child) {
        		border-right: 0.175em solid @tundora;
        	}
        }
    }
    
    .infobox-monster-susceptibility-cell {
    	img[alt="Undead Slayer.png"],
    	img[alt="Demon Slayer (perk).png"],
    	img[alt="Dragon Slayer (perk).png"] {
    		filter: drop-shadow(0px 0px 1px black);
    	}
    }
}

/* ------------------------
       infobox thieving
   ------------------------ */

.infobox-thieving {

	.thvloot-cell {
		padding: 0;

		.wikitable {
		    margin: -0.5px;
		    width: calc(~'100% + 1px');
		}

	}

}

/* ------------------------
       infobox familiar
   ------------------------ */
   
.rsw-infobox#infobox-familiar {
	th {
		&:last-child:not([colspan="4"]) {
			border-right: 1px solid @mystic;
		}
	}
	
	td {
		
		&.infobox-template-links {
			border: 1px solid @mystic !important;
			padding-bottom: .6em;
		}
		
		&:first-child {
			border-left: 1px solid @mystic !important;
		}
		
		&:last-child {
			border-right: 1px solid @mystic !important;
		}
		
		&:not(.infobox-image):not(.infobox-map) {
			border: none;
		}
		
		&[colspan="2"]:not(.infobox-image):not(.infobox-map) {
			border: none;
			padding: 0.25em 0.5em;
		}
	}
}

/* =============================
        miscellaneous stuff
   ============================= */
// document your shit
// i don't know what half this stuff does or where it is

// [view] and [talk] links
.infobox-bottom-links {
    clear: right;
    float: right;
    font-size: xx-small;
    margin-top: -1.5em;
}

// switch infobox buttons
.infobox-buttons {
    text-align: center;
    max-width: 250px;
    display: none;
    margin: 0 auto;

    .button {
        margin: 0 3px;
    }

}

.infobox-switch-resources {
    display:none;
}

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

/* infobox bonuses switch buttons */
.switch-infobox {

    .switch-infobox-triggers,
    .loading-button {
        clear: left;
    }
    
    .switch-infobox-triggers {
    	padding-bottom: 0.25em;
    	
    	.trigger.button {
    		margin: 1px;
    	}
    }

}

.infobox .nestedinfo td table {
    min-width: 263px;
    margin: -1px;
    width: ~"calc(100% + 2px)" !important;
}

.infobox .nestedinfo td {
	width:100%;
	padding:0;
}

/* ========================
       legacy infoboxes
   ======================== */
// @TODO: remove this when infoboxes are converted

.infobox {
    border: 1px solid darken( @default-page, 33.5% );
    background-color: darken( @default-page, 2.5% );
    color: inherit !important;
    margin: 0 0 0.5em 0.2em !important;
    padding: 0.2em;
    float: right;
    clear: right;

    td,
    th {
        vertical-align: top;
    }

    caption {
        font-size: larger;
        padding-bottom: 10px !important;
        margin-left: 0 !important;
        color: inherit !important;
    }

    &.bordered {
        border-collapse: collapse;

        td,
        th {
            border: 1px solid darken( @default-page, 33.5%);
        }

        .borderless {
            td,
            th {
                border: 0;
            }
        }
    }

    // fix awkward margins for lists in infoboxes
    ul {
        margin: 0.3em 0 0 1.6em;
    }

    // fix for nested collapsible wikitables in infoboxes
    // @todo fix monster infoboxes so we don't need this
    .wikitable.mw-collapsible {
        margin: -1px;
        width: ~"calc(100% + 2px)" !important;
    }

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

    // remove effect of any spaces when there's [[File]] [[File]] to let margins do all the work
    .infobox-image {
        text-align: center;
        word-spacing: -4px;

        img {
            height: inherit;
            max-width: 250px;
        }
    }

    // let red links have normal spacing
    td .new {
        word-spacing: 0;
    }

    // make gemw input box smaller
    input#QtyCalc {
        width: 50px !important;
    }

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

}

// </pre>