MediaWiki:Common.less/infobox.less
Jump to navigation
Jump to search
@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);
}
}