MediaWiki:Common.less/infobox.less

@infobox-background: @gallery;
@infobox-header-color: @boulder;
@infobox-header-border: .5em solid @infobox-background;
@infobox-subheader-color: @boulder;
@infobox-cell-border: 1px solid @silver;

.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;

    .infobox-header {
        color: @white;
        font-size: 1.15em;
        line-height: 1.4em;
        background: @infobox-header-color;
        border-bottom: @infobox-header-border;
        padding: .5em 0;
    }
    
    .infobox-title {
    	color: @river-bed;
    	font-size: 1.15em;
        line-height: 1.4em;
        font-weight: bold;
    }

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

        a {
        	color: @white;
        }
    }

    // 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;
        }
        
        // keep infobox images from sticking together
        a.image + a.image {
            margin-left: .1em;
        }

        img {
            max-width: 100%;
            height: auto;
        }
    }
    
    tr:last-of-type {
    	border-bottom: @infobox-cell-border;
    }

    // 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) {
        	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) {
        	border: @infobox-cell-border;
        	padding-bottom: .6em;
    	}
    	
    	// for lists inside <td> for specificity
    	ul {
    		margin: 0 0 0 1.25em;
    	}
    }
	
	.infobox-imgbg {
		background-color: rgba(0,0,0,0.2);
	}
}