From RuneScape Classic Wiki
// <pre>
/* ====================
infoboxes
==================== */
@infobox-background: @white;
@infobox-header-color: #444444;
@infobox-border-color: #eeeeee;
@infobox-subheader-color: #eeeeee;
.infobox {
background: @infobox-background;
border: 1px solid @infobox-border-color;
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;
table-layout: fixed;
word-break: break-word;
.infobox-header {
color: @white;
font-size: 1.15em;
line-height: 1.4em;
background: @infobox-header-color;
padding: .5em 0;
a {
color: @white;
font-size: 1.15em;
font-weight: bold;
}
}
.infobox-subheader {
background: @infobox-subheader-color;
line-height: 2em;
a {
color: @white;
}
&+.infobox-subheader {
border-left: 0.175em solid @infobox-header-color;
}
}
.infobox-image {
text-align: center;
// for inventory icon in infobox item
&.inventory-image {
height: 32px; // functions as min-height
}
// keep infobox images from sticking together
a.image + a.image {
margin-left: .1em;
}
img {
max-width: 300px;
height: auto;
}
}
// browsers get your shit together https://caniuse.com/#feat=css-not-sel-list
th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
text-align: right;
vertical-align: top;
border-right: .175em solid @infobox-header-color;
padding: 0.2em 0.5em;
}
th {
white-space: nowrap;
}
td {
padding: 0.25em 0.5em;
line-height: 1.6em;
&.infobox-nested {
padding: 0.25em 0;
line-height: 1em;
}
}
.infobox-padding {
height: 0.5em;
padding: 0;
border: 0;
}
.infobox-nested {
text-align: center;
&+.infobox-nested {
border-left: 0.175em solid @infobox-header-color;
}
}
.infobox-cell-hidden {
display: none;
}
.infobox-template-links {
text-align: center;
}
.infobox-full-width-content {
max-width: 300px;
text-align: center;
overflow: hidden;
padding: 0;
}
.infobox-caption {
font-weight: bold;
}
&.skill-info {
float: none;
margin: 0;
}
}
/* =============================
infobox-specific styles
============================= */
.infobox-bonuses {
clear: left;
float: none;
word-break: break-word;
font-size: 100%;
.infobox-subheader {
background-color: @infobox-header-color;
color: @white;
}
.infobox-bonuses-image {
width: 125px;
text-align: center;
vertical-align: middle;
border: 1px solid @infobox-border-color;
}
.infobox-bonuses-image-caption {
font-size: 0.85em;
}
.infobox-subheader {
width: 300px;
}
a {
font-weight: bold;
}
}
// [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: 300px;
display: none;
.button {
margin: 0 3px;
}
}
.infobox-switch-resources {
display: none;
}
/* infobox bonuses switch buttons */
.switch-infobox {
.switch-infobox-triggers,
.loading-button {
clear: left;
}
}
// Hides advanced data. Class gets replaced by .advanced-data-display
// if the showAdvancedData gadget is enabled.
.advanced-data {
display: none;
}