Alex: Created page with "/* ==================== infoboxes ==================== */ .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: var(--infobox-text-color);..."

2024-10-16T23:11:31Z

Created page with "==================== infoboxes ====================: .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: var(--infobox-text-color);..."

New page

/* ====================
infoboxes
==================== */

.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: var(--infobox-text-color);
font-size: 1.15em;
line-height: 1.4em;
background: @infobox-header-color;
padding: .5em 0;

a {
color: inherit;
font-size: 1.15em;
font-weight: bold;
}
}

.infobox-subheader {
background: @infobox-subheader-color;
color: var(--infobox-text-color);
line-height: 2em;

a {
color: inherit;
}

&+.infobox-subheader {
border-left: 2px solid @BODY_LIGHT;
}
}

.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: 2px solid @infobox-subheader-color;
padding: 0.25em 0.5em;
}

td {
padding: 0.25em 0.5em;
line-height: 1.6em;

&.infobox-nested {
padding: 0.25em 0;
line-height: 1em;
}
}

// same vertical aligning as <th>s; so headers aren't needed to be nowrap'ed
th ~ td {
vertical-align: top;
}

.infobox-padding {
height: 0.5em;
padding: 0;
border: 0;
}

.infobox-nested {
text-align: center;

&+.infobox-nested {
border-left: 2px solid @infobox-subheader-color;
}
}

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

.infobox-full-width-content {
max-width: 300px;
text-align: center;
overflow: hidden;
padding: 0;
}

.infobox-caption {
font-weight: bold;
}

select {
max-width: 300px;
}
}

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

.infobox-item {
.infobox-image {
.pixelate()
}
}

.infobox.skill-info {
float: none;
margin: 1em 0;
}

.infobox-bonuses {
clear: left;
float: none;
word-break: break-word;
font-size: 100%;
margin: 1em 0;

.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: 250px;
}
}

// (dirty trick) Hide a silly bug in switch infoboxes:
// switching between versions where there is a Quantity box followed by text will cause the text to be duplicated on switch
// This currently only occurs where the text consists of "? (edit)" links, so hiding consecutive edit links works to hide this
// This should ideally be fixed for real though, instead of just hiding it.
.skill-info a[href$="?action=edit"] + a[href$="?action=edit"] {
display: none;
}

// Infobox Room door layout
.poh-room {
background-color: var(--infobox-room-poh-color);
margin: auto;
width: 100px;

img {
display: block;
}
}

.poh-room-row {
display: flex;
}

.poh-room-text {
margin: auto;
width: 92px;
}

// switch infobox buttons
.infobox-buttons {
text-align: center;
max-width: 300px;
display: none;
}

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

/* infobox bonuses switch buttons */
.switch-infobox {
.switch-infobox-triggers,
.loading-button {
clear: left;
}
}

/* Infobox Pure max hit items */
.infobox-pure .max-hit-list {
a {
display: inline-block;
min-width: 32px;
min-height: 32px;
text-align: center;
}
}

// Hides advanced data. Class gets replaced by .advanced-data-display
// if the showAdvancedData gadget is enabled.
.advanced-data {
display: none;
}

// [[Template:Multi Infobox]] styles
.multi-infobox {
@multi-infobox-padding: 5px;
float: right;
margin: 0 0 calc(1em - @multi-infobox-padding) calc(1em - @multi-infobox-padding);

.tabber {
margin: 0;

.tabbernav {
text-align: center;
margin: 0;

a {
padding: 0.5em 0.8em;
}
}

.tabbertab {
padding: @multi-infobox-padding;
display: flex;
justify-content: center;
}
}

.infobox {
margin: 0;
}
}

/*
The following styles were used as a temporary fix for TabberNeue.
We're currently using old Tabber because TabberNeue breaks if a tab
dynamically changes size, such as multi-infobox.
*/
// .multi-infobox {
// margin: 0 0 5px 5px;
// float: right;
//
// .tabber__tabs {
// font-size: 95%;
// justify-content: center;
// padding: 0;
// }
//
// .tabber__tab {
// padding: 0.25em 0.6em;
// }
//
// .tabber__section {
// padding: 0;
// }
//
// .tabber__panel {
// padding: 5px;
// display: flex;
// justify-content: center;
// }
//
// .tabber__panel[aria-hidden='true'] {
// display: none;
// }
//
// .infobox {
// margin: 0;
// }
// }

MediaWiki:Vector.less/infobox.less - Revision history