MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Vector legacy / MonoBook */
#p-logo a {
background-image: url("https://www.warcraftforever.wiki/static/logo/WfWikiLogo-350.png") !important;
background-size: 175px auto !important;
}
/* Vector 2022 */
.mw-logo-icon {
background-image: url("https://www.warcraftforever.wiki/static/logo/WfWikiLogo-175.png") !important;
background-size: contain !important;
}
.mw-logo-wordmark {
display: none !important;
}
.mainpage-box { background: #1e1e1e; border: 1px solid #333; border-radius: 6px; padding: 16px; margin-bottom: 16px; } .mainpage-columns { display: flex; gap: 16px; flex-wrap: wrap; } .mainpage-column { flex: 1; min-width: 280px; }
body,
#content,
#mw-panel,
.mw-body {
transition: background-color 0.25s ease, color 0.25s ease;
}
/* ===== Gradient backdrop (2026-09-28) =====
The whole site's background is ONE fixed layer, body::before, sized to
the viewport and sitting behind everything (z-index:-1). Not
background-attachment:fixed - iOS Safari ignores that. Every wrapping
layer (body, #mw-mf-page-center, #bodyContent, #mw-content-text) is
forced transparent so no flat colour covers the gradient; the article
column (#content/.mw-body) is a translucent panel over it (below).
body MUST stay transparent: a z-index:-1 child paints above the canvas
but below body's own background, so any body background hides it.
html keeps a flat colour only as the iOS overscroll / pre-paint fallback.
Vector.css adds the tan sidebar stripe as body::after. */
html {
background-color: #14616f !important;
}
body,
#mw-mf-page-center,
#bodyContent,
#mw-content-text {
background: transparent !important;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
height: 100lvh; /* large viewport: still covers when the iOS URL bar collapses */
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse at top, rgba(245, 234, 214, 0.10) 0%, rgba(245, 234, 214, 0) 60%),
linear-gradient(180deg, #1c7a8a 0%, #14616f 55%, #0e4750 100%);
}
body.wf-dark-mode::before {
background: linear-gradient(180deg, #0C3B61 0%, #082944 100%);
}
/* Article column: translucent light panel over the gradient (both skins). */
#content,
.mw-body {
background: rgba(245, 234, 214, 0.07) !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
body.wf-dark-mode { background: transparent !important; color: #e0e0e0 !important; } body.wf-dark-mode #mw-panel { background: transparent !important; color: #e0e0e0 !important; } body.wf-dark-mode #content, body.wf-dark-mode .mw-body { background: rgba(255, 255, 255, 0.04) !important; color: #e0e0e0 !important; } body.wf-dark-mode a { color: #8ab4f8 !important; }
/* Same iOS Safari unstyled-<html>-overscroll fix as MediaWiki:Minerva.css,
for dark mode. html:has() targets the ancestor <html> from the
body.wf-dark-mode class since the toggle only adds the class to body. */
html:has(body.wf-dark-mode) {
background-color: #0C3B61 !important;
}
/* The Contents/TOC box (#toc/.toc) has its own explicit light-mode
background+border set in MediaWiki:Vector.css with !important, so it
needs its own dark-mode override too or it stays light-mode teal. */
body.wf-dark-mode #toc,
body.wf-dark-mode .toc {
background-color: #082944 !important;
background-image: linear-gradient(180deg, #0C3B61 0%, #082944 100%) !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode #toc a,
body.wf-dark-mode .toc a {
color: #8ab4f8 !important;
}
body.wf-dark-mode #toc .tochidden,
body.wf-dark-mode #toc .toctitle {
color: #e0e0e0 !important;
}
/* Infobox, category links bar, and footer all have their own explicit
light-mode tan/teal styling in MediaWiki:Vector.css with no dark-mode
override - same gap as the TOC/tabs/sidebar fixes above. */
body.wf-dark-mode .infobox {
background-color: #082944 !important;
background-image: linear-gradient(180deg, #0C3B61 0%, #082944 100%) !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode #catlinks {
background-color: #082944 !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode #footer {
background-color: #082944 !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode #footer a {
color: #8ab4f8 !important;
}
/* Main page grid cards - match the TOC box's dark-mode blue (#082944)
while leaving the light-mode teal (#0e4750) untouched. */
body.wf-dark-mode .mainpage-card {
background-color: #082944 !important;
background-image: linear-gradient(180deg, #0C3B61 0%, #082944 100%) !important;
border-color: #1a1a1a !important;
}
/* Minerva (mobile skin) dark-mode equivalents. #toc/.toc already match
since that rule above is skin-agnostic and Minerva shares the same
#toc markup as desktop. */
body.wf-dark-mode .header-container,
body.wf-dark-mode .minerva-header {
background-color: #1a1a1a !important;
}
body.wf-dark-mode #bodyContent,
body.wf-dark-mode #mw-content-text {
color: #e0e0e0 !important;
}
body.wf-dark-mode #bodyContent a,
body.wf-dark-mode #mw-content-text a {
color: #8ab4f8 !important;
}
body.wf-dark-mode .page-actions-menu,
body.wf-dark-mode #p-views {
background-color: #082944 !important;
}
body.wf-dark-mode .page-actions-menu .minerva-icon {
background-color: #e0e0e0 !important;
}
body.wf-dark-mode .cdx-typeahead-search,
body.wf-dark-mode .cdx-search-input,
body.wf-dark-mode .cdx-text-input,
body.wf-dark-mode .cdx-text-input__input {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode .cdx-text-input__icon.cdx-text-input__start-icon,
body.wf-dark-mode .cdx-text-input__start-icon {
background-color: #e0e0e0 !important;
}
/* The sidebar link boxes (.vector-menu-content) have their own explicit
light-mode background set in MediaWiki:Vector.css, separate from
#mw-panel, so dark mode needs to override it directly or it stays tan. */
body.wf-dark-mode .vector-menu-portal .vector-menu-content {
background-color: transparent !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode #mw-head {
background: #1a1a1a !important;
}
body.wf-dark-mode .vector-menu-heading,
body.wf-dark-mode .vector-menu-content-list a,
body.wf-dark-mode #p-personal a {
color: #e0e0e0 !important;
}
body.wf-dark-mode #p-search {
background: #082944 !important;
}
body.wf-dark-mode .vector-search-box-inner,
body.wf-dark-mode #searchInput {
background: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
body.wf-dark-mode .searchButton {
background-color: #333 !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
/* The magnifying glass is a background-image (search.svg), not a
colorable glyph. ::after doesn't work here since .searchButton is an
<input>, a replaced element - pseudo-elements never render on those.
Instead, swap in a recolored inline SVG as the background-image
directly; it layers on top of the button's own background-color
(#333, set separately above) without touching it. */
body.wf-dark-mode .searchButton[name='go'] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23e0e0e0' stroke-width='2'/%3E%3Cline x1='13' y1='13' x2='18' y2='18' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 1.23076923em !important;
}
body.wf-dark-mode li.selected a,
body.wf-dark-mode li.icon a {
color: #ffffff !important;
}
/* Top tab bar (Page/Discussion on the left, Read/Edit/History/More on the
right) has its own explicit teal/cream styling in MediaWiki:Vector.css
with no dark-mode override, so it stayed light-mode colored. */
body.wf-dark-mode #left-navigation,
body.wf-dark-mode #right-navigation,
body.wf-dark-mode .vector-menu-tabs-legacy {
background-color: #082944 !important;
}
body.wf-dark-mode .vector-menu-tabs-legacy li a,
body.wf-dark-mode #p-cactions .vector-menu-content-list li a,
body.wf-dark-mode #p-views .vector-menu-content-list li a {
background-color: #082944 !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode .vector-menu-tabs-legacy li.selected a {
background-color: #145a8c !important;
color: #ffffff !important;
}
.mainpage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 16px 0;
}
.mainpage-card {
position: relative;
border-radius: 6px;
overflow: hidden;
background-color: #0e4750;
background-image: linear-gradient(180deg, #14616f 0%, #0e4750 100%);
border: 1px solid #14616f;
text-align: center;
min-height: 100px;
transition: border-color 0.2s ease;
}
.mainpage-card img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
}
.mainpage-card .card-title {
padding: 12px;
font-weight: bold;
font-size: 1.1em;
color: #e8d9b5;
}
.mainpage-card a {
color: #e8d9b5;
text-decoration: none;
}
.mainpage-card:hover {
border-color: #e8d9b5;
}
@media (max-width: 600px) {
.mainpage-grid {
grid-template-columns: 1fr;
}
}
.wow-tooltip {
background-color: #041421;
border: 1px solid #ffffff33;
border-radius: 4px;
padding: 10px 14px;
max-width: 320px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #ffffff;
box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.wow-tooltip-name { font-weight: bold; font-size: 15px; margin-bottom: 2px; }
.wow-quality-poor { color: #9d9d9d; }
.wow-quality-common { color: #ffffff; }
.wow-quality-uncommon { color: #1eff00; }
.wow-quality-rare { color: #0070dd; }
.wow-quality-epic { color: #a335ee; }
.wow-quality-legendary { color: #ff8000; }
.wow-quality-artifact { color: #e6cc80; }
.wow-quality-heirloom { color: #00ccff; }
.wow-tooltip-track { color: #ff8000; font-weight: bold; margin-bottom: 4px; }
.wow-tooltip-line { margin: 1px 0; }
.wow-tooltip-orange { color: #ff8000; }
.wow-tooltip-green { color: #1eff00; }
.wow-tooltip-flavor { color: #ffd100; font-style: italic; margin-top: 4px; }
.wow-tooltip-dropped { color: #ffffff; margin-top: 4px; }
.wow-tooltip-icon img { border: 1px solid #000; border-radius: 4px; }
table.cargoTable.cargoTable,
table.cargoTable.cargoTable tr,
table.cargoTable.cargoTable td {
background-color: #041421;
color: #ffffff;
transition: background-color 0.15s ease;
}
table.cargoTable.cargoTable th {
background-color: #0a2332;
color: #ffd100;
}
table.cargoTable.cargoTable tr:hover,
table.cargoTable.cargoTable tr:hover td {
background-color: #0a2332;
}
#wf-countdown .wf-countdown-stats { display:flex; gap:20px; }
#wf-countdown .wf-stat { display:flex; flex-direction:column; align-items:center; line-height:1.1; }
#wf-countdown .wf-label { font-size:0.5em; font-weight:normal; text-transform:uppercase; letter-spacing:0.5px; opacity:0.75; margin-top:2px; }
/* Main page cinematic trailer ({{#ev:youtube|...|640|...}}) renders with
hard inline pixel styles (width:640px on the figure, height:360px on
the wrapper), which overflows any viewport narrower than 640px - i.e.
basically every phone. Override with !important below that width and
use aspect-ratio (640:360 = 16:9) so it scales proportionally instead
of squishing. Desktop (>=640px) is untouched. */
@media (max-width: 640px) {
.embedvideo.frame {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.embedvideo-wrapper {
height: auto !important;
aspect-ratio: 16 / 9;
}
}
/* Worn Equipment page ("Equipment Slots" section): each slot entry's
icon now lives in its own row below the heading + italic "see also"
line, inline with just the description paragraph - not spanning the
whole heading block like the old float-based layout did. The icon and
paragraph are wrapped in wikitext as
<div class="equipment-slot-note"><span class="equipment-slot-icon">[[File:...|frameless|48x48px|link=]]</span><div class="equipment-slot-text">...</div></div>
so this is a plain flex row, no float/sibling-selector trickery and
no page-scoping needed since the classes are unique to this markup. */
.equipment-slot-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 20px;
}
.equipment-slot-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8d9b5;
border: 1px solid #14616f;
border-radius: 4px;
}
.equipment-slot-icon img {
max-width: 100%;
max-height: 100%;
}
.equipment-slot-text {
flex: 1;
}
/* Dark-mode icon box: swap the light tan/teal box for the same
dark blue/near-black pairing used by the other boxed elements above
(TOC, infobox, mainpage-card, etc.) */
body.wf-dark-mode .equipment-slot-icon {
background-color: #082944;
border-color: #1a1a1a;
}
/* Race icon box on the Races hub page: same flex-row layout as
.equipment-slot-icon above (Worn Equipment page), reused here per
explicit request, but bordered to match the race icon's border inside
Template:Infobox Race (.race-infobox img, set in Vector.css/Minerva.css:
3px solid #0e4750, dark-mode #1a1a1a) instead of equipment-slot-icon's
own 1px border. */
.race-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8d9b5;
border: 3px solid #0e4750;
border-radius: 4px;
overflow: hidden;
}
.race-icon img {
max-width: 100%;
max-height: 100%;
}
body.wf-dark-mode .race-icon {
background-color: #082944;
border-color: #1a1a1a;
}
/* Footer disclaimer line injected by Common.js - explicitly inherit the
same color already used for #footer's other text (cream #f5ead6 in
light mode via Vector.css, #e0e0e0 in dark mode via the wf-dark-mode
rule above) rather than relying on unstated default inheritance. */
#footer-info-blizzard-disclaimer {
color: inherit;
}
/* footer-info-lastmod ("This page was last modified on...") ships with
its own muted gray from the core skin CSS, separate from #footer's
cream text color set above - same class of gap as the disclaimer line,
explicit override needed to make it match the rest of the footer text. */
#footer-info-lastmod {
color: inherit;
}
/* Class infobox (Template:Infobox Class) dark-mode variant, matching the
ToC box's own dark-mode colors above. */
body.wf-dark-mode .class-infobox {
background-color: #082944 !important;
background-image: linear-gradient(180deg, #0C3B61 0%, #082944 100%) !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .class-infobox th,
body.wf-dark-mode .class-infobox td {
background-color: transparent !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .class-infobox a {
color: #8ab4f8 !important;
}
/* Beta notice banner - Main Page only. Deliberately styled distinct from
the wiki's dark teal theme (light cream/black) since this is meant to
read as an attention-grabbing notice box, not blend into site chrome. */
.beta-notice-banner {
background-color: #e8d9b5;
border: 2px solid #1a1a1a;
border-radius: 6px;
padding: 14px 20px;
margin: 0 0 16px;
text-align: center;
color: #14616f;
}
.beta-notice-banner b {
color: #000000;
}
.embedvideo.frame {
border: 3px solid #e8d9b5 !important;
}
body.wf-dark-mode .class-infobox img {
border-color: #1a1a1a !important;
}
/* Race infobox (Template:Infobox Race) dark-mode variant, matching the
Class infobox's own dark-mode colors above. */
body.wf-dark-mode .race-infobox {
background-color: #082944 !important;
background-image: linear-gradient(180deg, #0C3B61 0%, #082944 100%) !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .race-infobox th,
body.wf-dark-mode .race-infobox td {
background-color: transparent !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .race-infobox a {
color: #8ab4f8 !important;
}
body.wf-dark-mode .race-infobox img {
border-color: #1a1a1a !important;
}
/* Races Overview navbox (Template:Races Overview): structural layout
only - box sizing/flex, no colors. Skin-specific colors (background/
border) for the table, section bars, and card slots live in Vector.css
and Minerva.css instead, same split used for .race-infobox/
.class-infobox above, since Vector.css never reaches mobile. Dark-mode
overrides for all of it are centralized here, same as those two. */
.races-overview {
table-layout: fixed;
}
.races-overview th,
.races-overview td {
text-align: center;
}
.races-overview-title {
font-size: 125%;
padding: 6px;
}
.races-overview-section {
font-weight: bold;
font-size: 110%;
padding: 6px;
}
.races-overview-card {
text-align: center;
vertical-align: middle;
min-height: 110px;
padding: 8px;
border-radius: 4px;
}
.races-overview-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6px;
border-radius: 4px;
overflow: hidden;
}
.races-overview-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.races-overview-name {
font-weight: bold;
text-align: center;
padding: 4px 6px;
margin: 0 -8px -8px -8px;
border-radius: 0 0 4px 4px;
}
/* Floated 420px box (matching the reference layout: title bar, faction
section bar, row of 4 card slots) overflows/crowds a phone screen -
same overflow class of problem as the Main Page countdown video fix.
Drop the float and go full-width under 480px. */
@media (max-width: 480px) {
.races-overview {
float: none !important;
width: 100% !important;
margin: 0 0 16px !important;
}
}
/* Races Overview dark-mode variant, matching the race/class infobox
dark-mode colors above. */
body.wf-dark-mode .races-overview {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .races-overview th,
body.wf-dark-mode .races-overview td {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .races-overview-section {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode .races-overview-card {
background-color: #082944 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .races-overview-card a {
color: #8ab4f8 !important;
}
body.wf-dark-mode .races-overview a {
color: #8ab4f8 !important;
}
/* Special:CreateAccount "username available" styling - overrides the
default cdx-message--warning yellow/triangle only for this specific
instance (flagged by Common.js adding .wf-username-available), so the
real cdx-message--warning warnings (weak password, taken username,
etc.) elsewhere on the wiki are untouched. */
.wf-username-available.cdx-message--warning {
background-color: #d5f5db;
border-color: #14866d;
color: #0b4a3a;
}
.wf-username-available.cdx-message--warning .cdx-message__icon {
background-color: #14866d;
mask-image: none;
-webkit-mask-image: none;
position: relative;
}
.wf-username-available.cdx-message--warning .cdx-message__icon::after {
content: "\2713";
color: #fff;
font-weight: bold;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Classes Overview navbox (Template:Classes Overview): structural layout
only - box sizing/flex, no colors. Skin-specific colors (background/
border) for the table and card slots live in Vector.css and Minerva.css
instead, same split used for .races-overview above. Dark-mode overrides
for all of it are centralized here, same as .races-overview. No
.classes-overview-section rule (unlike .races-overview) since classes
aren't faction-split - just a title bar and one grid of cards.
margin-bottom: 0 overrides a default 1em bottom margin tables get
elsewhere in the site CSS - with that default in place, the float's
effective exclusion zone (border box + margin) extended past its visible
border and still narrowed the next heading's width even once the heading
had cleared the border itself. */
.classes-overview {
table-layout: fixed;
margin-bottom: 0;
}
.classes-overview th,
.classes-overview td {
text-align: center;
}
.classes-overview-title {
font-size: 125%;
padding: 6px;
}
.classes-overview-card {
text-align: center;
vertical-align: middle;
padding: 4px;
border-radius: 4px;
}
.classes-overview-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 4px;
border-radius: 4px;
overflow: hidden;
}
.classes-overview-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.classes-overview-name {
font-weight: bold;
text-align: center;
padding: 3px 4px;
margin: 0 -4px -4px -4px;
border-radius: 0 0 4px 4px;
}
/* Same overflow/crowding problem on a phone screen as .races-overview -
drop the float and go full-width under 480px. */
@media (max-width: 480px) {
.classes-overview {
float: none !important;
width: 100% !important;
margin: 0 0 16px !important;
}
}
/* Classes Overview dark-mode variant, matching .races-overview. */
body.wf-dark-mode .classes-overview {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .classes-overview th,
body.wf-dark-mode .classes-overview td {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .classes-overview-card {
background-color: #082944 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .classes-overview-card a {
color: #8ab4f8 !important;
}
body.wf-dark-mode .classes-overview a {
color: #8ab4f8 !important;
}
/* A-Z jump bar on Category:Items only (unique class, only used in that
page's wikitext - see Category:Items source). Plain server-side
MediaWiki category pagination via the `from=` URL param (jumps
straight to the page of the category listing starting at that
letter), not client-side filtering - simpler and correct since
Category:Items has 15k+ entries split across 200-per-page listings
that already group by first letter server-side. "#" (first, before A)
resets to the bare category URL, i.e. the very start of the list
(quote/number-prefixed item names sort before "A"). Links use
[{{fullurl:...}} text] since [[Category:Items|...]] would self-link
to this same page (rendered as inert bold text, not a real link) and
[[ ]] wikilinks can't carry a query string at all - fullurl bracket
links always get MediaWiki's "external" link class/icon even when
they point back into the wiki, so that's suppressed below. */
.wf-catitems-az {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
margin: 0 0 14px;
padding: 8px 10px;
background-color: #e8d9b5;
border: 1px solid #14616f;
border-radius: 4px;
}
.wf-catitems-az a.external {
display: inline-block;
min-width: 22px;
padding: 3px 6px;
text-align: center;
color: #14616f;
background-color: #ffffff;
border: 1px solid #14616f;
border-radius: 3px;
text-decoration: none;
font-size: 0.85em;
font-weight: bold;
background-image: none !important;
}
.wf-catitems-az a.external:hover {
background-color: #0e4750;
color: #e8d9b5;
}
body.wf-dark-mode .wf-catitems-az {
background-color: #082944 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .wf-catitems-az a.external {
background-color: #0C3B61 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .wf-catitems-az a.external:hover {
background-color: #145a8c !important;
color: #ffffff !important;
}
/* Best-in-slot tables (Template:BiS Table / BiS Row / BiS Table end,
tag badges from Module:BiS). Unlike .races-overview, light-mode colors
live here too rather than in Vector.css + Minerva.css, so the one set of
rules reaches both skins. Dark-mode variants follow the light block.
.wf-bis-scroll is the horizontal-scroll wrapper: on narrow screens the
table keeps its min-width and scrolls inside it instead of squashing
or widening the page. display:table is forced because Minerva's base
skin sets table { display: block; } (same issue as .races-overview). */
.wf-bis {
margin: 0.5em 0 1.5em;
}
.wf-bis-banner {
background-color: #f5ead6;
color: #5a3b00;
border-left: 4px solid #c98a1a;
border-radius: 4px;
padding: 6px 10px;
margin-bottom: 8px;
font-weight: bold;
}
.wf-bis-meta {
margin: 2px 0;
}
.wf-bis-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
margin-top: 8px;
}
table.wf-bis-table {
display: table !important;
width: 100%;
min-width: 540px;
border-collapse: collapse;
margin: 0;
background-color: #14616f;
color: #f5ead6;
border: 3px solid #0a353c;
}
table.wf-bis-table caption.wf-bis-caption {
background-color: #0a353c;
color: #e8d9b5;
font-weight: bold;
font-size: 110%;
padding: 6px 10px;
text-align: left;
}
table.wf-bis-table th,
table.wf-bis-table td {
border: 1px solid #0a353c;
padding: 6px 10px;
vertical-align: top;
text-align: left;
}
table.wf-bis-table th {
background-color: #0e4750;
color: #e8d9b5;
}
table.wf-bis-table th.wf-bis-col-slot,
table.wf-bis-table th.wf-bis-slot {
width: 90px;
white-space: nowrap;
text-align: center;
}
/* Underline the slot name only (the icon under it is an image, so the
line isn't drawn under it) */
table.wf-bis-table th.wf-bis-slot {
text-decoration: underline;
text-underline-offset: 3px;
}
table.wf-bis-table td.wf-bis-cell {
background-color: #14616f;
color: #f5ead6;
width: 45%;
}
table.wf-bis-table .wf-bis-item {
font-weight: bold;
}
table.wf-bis-table .wf-bis-item a {
color: #e8d9b5;
}
/* Core's red for missing pages is unreadable on teal */
table.wf-bis-table .wf-bis-item a.new {
color: #ffc9bc;
}
table.wf-bis-table .wf-bis-source {
font-size: 88%;
opacity: 0.85;
}
table.wf-bis-table .wf-bis-same {
font-style: italic;
opacity: 0.7;
}
.wf-bis-tags {
margin-top: 4px;
}
.wf-bis-tag {
display: inline-block;
font-size: 75%;
font-weight: bold;
line-height: 1.5;
padding: 0 7px;
margin: 0 4px 2px 0;
border-radius: 999px;
border: 1px solid;
white-space: nowrap;
}
.wf-bis-tag-quest { background-color: #dbe9ff; color: #1a3f7a; border-color: #9fbbe8; }
.wf-bis-tag-crafted { background-color: #dcf2dc; color: #1d5a2a; border-color: #9ccf9f; }
.wf-bis-tag-drop { background-color: #ece0fb; color: #4b2a7a; border-color: #c2a6e8; }
.wf-bis-tag-unverified { background-color: #fdecc8; color: #6b4400; border-color: #e8b860; }
.wf-bis-tag-other { background-color: #e8d9b5; color: #0e4750; border-color: #0e4750; }
.wf-bis-credit {
font-size: 85%;
opacity: 0.85;
margin-top: 6px;
}
/* BiS dark-mode variant: #082944 boxes / #1a1a1a bars and borders,
matching .races-overview. Links stay on the site-wide dark #8ab4f8
(body.wf-dark-mode #mw-content-text a wins by ID specificity anyway). */
body.wf-dark-mode .wf-bis-banner {
background-color: #082944 !important;
color: #ffdc8f !important;
border-left-color: #e0a030 !important;
}
body.wf-dark-mode table.wf-bis-table {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode table.wf-bis-table caption.wf-bis-caption {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode table.wf-bis-table th,
body.wf-dark-mode table.wf-bis-table td {
border-color: #1a1a1a !important;
}
body.wf-dark-mode table.wf-bis-table th {
background-color: #0C3B61 !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode table.wf-bis-table td.wf-bis-cell {
background-color: #082944 !important;
color: #e0e0e0 !important;
}
body.wf-dark-mode .wf-bis-tag-quest { background-color: #1d3a66 !important; color: #b9d2ff !important; border-color: #3d6db5 !important; }
body.wf-dark-mode .wf-bis-tag-crafted { background-color: #1f4a2c !important; color: #b6e6bd !important; border-color: #3f8a52 !important; }
body.wf-dark-mode .wf-bis-tag-drop { background-color: #3d2a5c !important; color: #dcc8fb !important; border-color: #7a5ab5 !important; }
body.wf-dark-mode .wf-bis-tag-unverified { background-color: #5a4212 !important; color: #ffdc8f !important; border-color: #b58a2a !important; }
body.wf-dark-mode .wf-bis-tag-other { background-color: #1a1a1a !important; color: #e0e0e0 !important; border-color: #0C3B61 !important; }
/* Faction logos in the BiS header cells: sized to the text line so the
header row keeps its height; img-level align because MediaWiki wraps
the file in nested spans. */
table.wf-bis-table th.wf-bis-col-faction {
white-space: nowrap;
vertical-align: middle;
}
table.wf-bis-table .wf-bis-faction-logo img {
vertical-align: middle;
margin: -2px 4px 0 0;
}
/* BiS level tabs: strip built by Common.js from .wf-bis-tabs panels.
Flex is on the strip <div>, never on a td/th. Strip scrolls sideways
on narrow screens instead of wrapping. */
.wf-bis-tabstrip {
display: flex;
gap: 4px;
overflow-x: auto;
margin-top: 0.5em;
border-bottom: 3px solid #0a353c;
}
.wf-bis-tab {
font: inherit;
font-weight: bold;
background-color: #0e4750;
color: #e8d9b5;
border: 1px solid #0a353c;
border-bottom: none;
border-radius: 4px 4px 0 0;
padding: 4px 12px;
cursor: pointer;
white-space: nowrap;
}
.wf-bis-tab:hover {
background-color: #14616f;
}
.wf-bis-tab.wf-bis-tab-active {
background-color: #0a353c;
color: #ffffff;
}
.wf-bis-tab:focus-visible {
outline: 2px solid #e8d9b5;
outline-offset: -2px;
}
.wf-bis-tabs .wf-bis[hidden] {
display: none;
}
.wf-bis-empty {
background-color: #14616f;
color: #f5ead6;
border: 3px solid #0a353c;
padding: 12px;
font-style: italic;
}
body.wf-dark-mode .wf-bis-tabstrip {
border-bottom-color: #1a1a1a !important;
}
body.wf-dark-mode .wf-bis-tab {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
body.wf-dark-mode .wf-bis-tab:hover {
background-color: #0C3B61 !important;
}
body.wf-dark-mode .wf-bis-tab.wf-bis-tab-active {
background-color: #1a1a1a !important;
color: #ffffff !important;
}
body.wf-dark-mode .wf-bis-tab:focus-visible {
outline-color: #8ab4f8 !important;
}
body.wf-dark-mode .wf-bis-empty {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
}
/* BiS Vendor tag badge (Module:BiS "Vendor"): red-ish, light + dark. */
.wf-bis-tag-vendor { background-color: #fde0dc; color: #7a1f14; border-color: #e8a298; }
body.wf-dark-mode .wf-bis-tag-vendor { background-color: #5c1f1a !important; color: #ffc4bb !important; border-color: #b5463a !important; }
/* Equipment-slot icons in the BiS slot column (Template:BiS Row maps the
slot name to File:Slot-*.png): 40px block under the slot name. No colors,
so no dark-mode variant needed. */
table.wf-bis-table .wf-bis-slot-icon {
margin-top: 4px;
line-height: 0;
}
/* Item icons in BiS cells (Template:BiS Row -> Module:BiS icon()): 40px
icon left of the item name, with name/source/tags stacked beside it.
Flex sits on the inner .wf-bis-entry div, never on the td. */
table.wf-bis-table .wf-bis-entry {
display: flex;
align-items: flex-start;
gap: 10px;
}
table.wf-bis-table .wf-bis-item-icon {
flex: 0 0 auto;
line-height: 0;
/* Line up with the slot icon in the same row: that sits one slot-name
line (1.6em) plus a 4px gap below the top of its cell. */
margin-top: calc(1.6em + 4px);
}
table.wf-bis-table .wf-bis-item-icon img {
box-sizing: border-box;
width: 40px;
height: 40px;
border: 1px solid #0a353c;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(232, 217, 181, 0.35);
}
table.wf-bis-table .wf-bis-entry-text {
flex: 1 1 auto;
min-width: 0;
}
body.wf-dark-mode table.wf-bis-table .wf-bis-item-icon img {
border-color: #1a1a1a !important;
box-shadow: 0 0 0 1px rgba(224, 224, 224, 0.25) !important;
}
/* Item page Sources box (Template:Item sources) */
.wf-item-sources { clear: both; width: 100%; box-sizing: border-box; margin: 1em 0; border: 2px solid #e8d9b5; border-radius: 4px; overflow: hidden; }
.wf-item-sources-title { background: #e8d9b5; color: #1a1a1a; font-weight: bold; font-size: 1.1em; padding: 6px 12px; }
.wf-item-sources-section { padding: 8px 12px; }
.wf-item-sources-section + .wf-item-sources-section { border-top: 1px solid #e8d9b5; }
.wf-item-sources-heading { font-weight: bold; margin-bottom: 4px; }
.wf-item-sources table.wf-item-sources-table { width: 100%; border-collapse: collapse; }
.wf-item-sources table.wf-item-sources-table th, .wf-item-sources table.wf-item-sources-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(0,0,0,0.12); }
body.wf-dark-mode .wf-item-sources { border-color: #082944; background: #0C3B61; }
body.wf-dark-mode .wf-item-sources-title { background: #082944; color: #e8d9b5; }
body.wf-dark-mode .wf-item-sources-section + .wf-item-sources-section { border-top-color: #082944; }
body.wf-dark-mode .wf-item-sources table.wf-item-sources-table th, body.wf-dark-mode .wf-item-sources table.wf-item-sources-table td { border-bottom-color: rgba(255,255,255,0.15); }
body.wf-dark-mode .wf-item-sources table.wf-item-sources-table, body.wf-dark-mode .wf-item-sources table.wf-item-sources-table th, body.wf-dark-mode .wf-item-sources table.wf-item-sources-table td { background: transparent !important; }
/* Dungeons and Raids list pages: underline each subheading (h3) */
body.page-Dungeons .mw-parser-output h3,
body.page-Raids .mw-parser-output h3 {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Dungeon page tables (class "wf-dungeon-table", alongside cargoTable):
cell dividers and outer border match the infoboxes (.race-infobox /
.dungeon-infobox) instead of the default light-grey wikitable lines.
Light #0e4750, dark #1a1a1a. Lives here (not Vector/Minerva) so it
reaches both skins. */
table.wikitable.cargoTable.wf-dungeon-table {
border: 3px solid #0e4750 !important;
}
table.wikitable.cargoTable.wf-dungeon-table > * > tr > th,
table.wikitable.cargoTable.wf-dungeon-table > * > tr > td {
border-color: #0e4750 !important;
}
body.wf-dark-mode table.wikitable.cargoTable.wf-dungeon-table,
body.wf-dark-mode table.wikitable.cargoTable.wf-dungeon-table > * > tr > th,
body.wf-dark-mode table.wikitable.cargoTable.wf-dungeon-table > * > tr > td {
border-color: #1a1a1a !important;
}
/* ===== Talent trees on class pages (Template:Talent Tree / Template:Talent) =====
Dark in-game style panels, same in light and dark mode. Grid cell 58x62px, icon 44px. */
.wf-talents { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0.8em 0 0.4em; align-items: flex-start; }
.wf-talent-tree { background: #14110f; border: 2px solid #e8d9b5; border-radius: 6px; color: #e8e2d2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.wf-talent-tree-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #2a2118; border-bottom: 1px solid #6b5a3a; border-radius: 4px 4px 0 0; }
.wf-talent-tree-icon { line-height: 0; }
.wf-talent-tree-icon img { width: 26px; height: 26px; border: 1px solid #000; border-radius: 3px; }
.wf-talent-tree-name { font-weight: bold; color: #ffd100; font-size: 1.05em; }
.wf-talent-tree-count { margin-left: auto; color: #a89f8a; font-size: 0.85em; }
.wf-talent-grid { display: grid; grid-template-columns: repeat(4, 58px); grid-template-rows: repeat(7, 62px); padding: 14px 12px 4px; }
.wf-talent { position: relative; width: 58px; height: 62px; outline: none; }
.wf-talent-r1 { grid-row: 1; } .wf-talent-r2 { grid-row: 2; } .wf-talent-r3 { grid-row: 3; } .wf-talent-r4 { grid-row: 4; }
.wf-talent-r5 { grid-row: 5; } .wf-talent-r6 { grid-row: 6; } .wf-talent-r7 { grid-row: 7; }
.wf-talent-c1 { grid-column: 1; } .wf-talent-c2 { grid-column: 2; } .wf-talent-c3 { grid-column: 3; } .wf-talent-c4 { grid-column: 4; }
.wf-talent-icon { position: absolute; top: 0; left: 7px; width: 44px; height: 44px; line-height: 0; border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 0 1px #8a7a55; overflow: hidden; cursor: help; z-index: 2; box-sizing: border-box; }
.wf-talent-icon img { width: 42px; height: 42px; display: block; }
.wf-talent:hover .wf-talent-icon, .wf-talent:focus .wf-talent-icon { box-shadow: 0 0 0 2px #ffd100; }
.wf-talent-max { position: absolute; top: 33px; left: 39px; min-width: 14px; padding: 0 3px; box-sizing: border-box; text-align: center; font-size: 11px; line-height: 15px; font-weight: bold; color: #ffd100; background: #000; border: 1px solid #6b5a3a; border-radius: 3px; z-index: 3; }
/* Requirement links. The arrow sits in the gap above (or beside) the talent that needs the other one. */
.wf-talent-arrow { position: absolute; color: #c8a94a; background: currentColor; z-index: 1; }
.wf-talent-arrow::after { content: ""; position: absolute; border: 6px solid transparent; }
.wf-talent-arrow-down1, .wf-talent-arrow-down2, .wf-talent-arrow-down3, .wf-talent-arrow-down4, .wf-talent-arrow-down5, .wf-talent-arrow-down6 { left: 27px; width: 4px; }
.wf-talent-arrow-down1 { top: -18px; height: 12px; } .wf-talent-arrow-down2 { top: -80px; height: 74px; } .wf-talent-arrow-down3 { top: -142px; height: 136px; }
.wf-talent-arrow-down4 { top: -204px; height: 198px; } .wf-talent-arrow-down5 { top: -266px; height: 260px; } .wf-talent-arrow-down6 { top: -328px; height: 322px; }
.wf-talent-arrow-down1::after, .wf-talent-arrow-down2::after, .wf-talent-arrow-down3::after, .wf-talent-arrow-down4::after, .wf-talent-arrow-down5::after, .wf-talent-arrow-down6::after { bottom: -6px; left: -4px; border-top-color: currentColor; border-bottom-width: 0; }
.wf-talent-arrow-right { top: 20px; left: -7px; width: 8px; height: 4px; }
.wf-talent-arrow-right::after { right: -6px; top: -4px; border-left-color: currentColor; border-right-width: 0; }
.wf-talent-arrow-left { top: 20px; left: 57px; width: 8px; height: 4px; }
.wf-talent-arrow-left::after { left: -6px; top: -4px; border-right-color: currentColor; border-left-width: 0; }
/* Tooltip */
.wf-talent-tip { display: none; position: absolute; top: 50px; left: -4px; width: 248px; box-sizing: border-box; z-index: 60; padding: 8px 10px; background: rgba(8, 10, 22, 0.97); border: 1px solid #a0a0a0; border-radius: 5px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 1.4; color: #fff; text-align: left; }
/* Keep the tooltip inside its own tree whichever column the talent is in (works on phones too). */
.wf-talent-c2 .wf-talent-tip { left: -62px; }
.wf-talent-c3 .wf-talent-tip { left: auto; right: -62px; }
.wf-talent-c4 .wf-talent-tip { left: auto; right: -4px; }
.wf-talent:hover > .wf-talent-tip, .wf-talent:focus > .wf-talent-tip { display: block; }
.wf-talent:hover, .wf-talent:focus { z-index: 61; }
.wf-talent-tip-name { font-size: 15px; font-weight: bold; color: #fff; }
.wf-talent-tip-rank { color: #fff; }
.wf-talent-tip-info { color: #fff; }
.wf-talent-tip-req { color: #ff4040; }
.wf-talent-tip-desc { color: #ffd100; margin-top: 2px; }
.wf-talents-note { text-align: center; font-size: 0.85em; font-style: italic; opacity: 0.85; margin-bottom: 1em; }
/* ===== end talent trees ===== */
/* ===== Talent calculator (script in MediaWiki:Common.js adds .wf-talents-live) ===== */
.wf-talent-calc-bar { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 10px; background: #14110f; border: 2px solid #e8d9b5; border-radius: 6px; color: #e8e2d2; font-size: 0.92em; box-sizing: border-box; }
.wf-talent-calc-points { font-weight: bold; color: #ffd100; }
.wf-talent-calc-level { color: #e8e2d2; }
.wf-talent-calc-buttons { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.wf-talent-calc-btn { background: #2a2118; color: #e8e2d2; border: 1px solid #8a7a55; border-radius: 4px; padding: 2px 10px; font: inherit; cursor: pointer; }
.wf-talent-calc-btn:hover, .wf-talent-calc-btn:focus { border-color: #ffd100; color: #ffd100; }
.wf-talent-calc-btn-active { background: #5a1c1c; border-color: #ff4040; color: #fff; }
.wf-talents-live .wf-talent-grid { -webkit-user-select: none; user-select: none; }
.wf-talents-live .wf-talent-icon { cursor: pointer; }
.wf-talents-live .wf-talent-max { left: auto; right: 0; }
.wf-talents-live .wf-talent-off .wf-talent-icon img { filter: grayscale(1) brightness(0.55); }
.wf-talents-live .wf-talent-off .wf-talent-max { color: #8f8f8f; border-color: #444; }
.wf-talents-live .wf-talent-avail .wf-talent-icon, .wf-talents-live .wf-talent-on .wf-talent-icon { box-shadow: 0 0 0 1px #35c435; }
.wf-talents-live .wf-talent-avail .wf-talent-max, .wf-talents-live .wf-talent-on .wf-talent-max { color: #40ff40; border-color: #2b7a2b; }
.wf-talents-live .wf-talent-maxed .wf-talent-icon { box-shadow: 0 0 0 1px #ffd100; }
.wf-talents-live .wf-talent:hover .wf-talent-icon, .wf-talents-live .wf-talent:focus .wf-talent-icon { box-shadow: 0 0 0 2px #ffd100; }
.wf-talent-arrow-off { color: #5c5c5c; }
.wf-talent-tip-next { color: #fff; margin-top: 6px; }
.wf-talent-tip-hint { margin-top: 4px; }
.wf-talent-tip-learn { color: #40ff40; }
.wf-talent-tip-unlearn { color: #ff4040; }
/* ===== end talent calculator ===== */
/* Race + class pages (2026-10-04, first trialled on Dwarf): race/class
infobox + ToC box in the dark teal of the Vector page tabs (Edit / Edit source / View
history: #0e4750, see Vector.css "Individual tabs"), fading top-to-bottom
into the palette's darker #0a353c. Borders, cell dividers and the
race-icon frame are darker still (#06252a) so the edges stay visible
against both ends of the fade. Tan text #e8d9b5 is ~7.4:1 at the top,
~9.5:1 at the bottom. Light mode only; dark mode is the next block.
.race-infobox / .class-infobox only exist on race / class pages
(Template:Infobox Race / Infobox Class), so they need no page scoping;
the ToC is limited to pages that contain one via :has(), so new race or
class pages pick this up automatically. Both skins. Specificity beats the
.race-infobox / .class-infobox / #toc rules in Vector.css and Minerva.css
even though those load after this file. */
body:not(.wf-dark-mode) .race-infobox,
body:not(.wf-dark-mode) .class-infobox,
body:not(.wf-dark-mode):has(.race-infobox, .class-infobox) #toc,
body:not(.wf-dark-mode):has(.race-infobox, .class-infobox) .toc {
background-color: #0e4750 !important;
background-image: linear-gradient(180deg, #0e4750 0%, #0a353c 100%) !important;
border-color: #06252a !important;
}
body:not(.wf-dark-mode) .race-infobox th,
body:not(.wf-dark-mode) .race-infobox td,
body:not(.wf-dark-mode) .race-infobox img,
body:not(.wf-dark-mode) .class-infobox th,
body:not(.wf-dark-mode) .class-infobox td,
body:not(.wf-dark-mode) .class-infobox img {
border-color: #06252a !important;
}
/* Race + class pages, dark mode: same idea as the light block above. The boxes start
at the dark-mode tab colour (#082944, see "Top tab bar" dark rules near the
top of this file) and fade to a darker navy #051c30, with near-black
#020d17 borders/dividers/icon frame so edges stay visible against both ends
and the #0C3B61 page. Text #e0e0e0 is 11.3-13.1:1, links #8ab4f8 7.1-8.2:1.
Placed after the generic body.wf-dark-mode .race-infobox / .class-infobox /
#toc rules,
which it overrides (same or higher specificity, later in the file). */
body.wf-dark-mode .race-infobox,
body.wf-dark-mode .class-infobox,
body.wf-dark-mode:has(.race-infobox, .class-infobox) #toc,
body.wf-dark-mode:has(.race-infobox, .class-infobox) .toc {
background-color: #082944 !important;
background-image: linear-gradient(180deg, #082944 0%, #051c30 100%) !important;
border-color: #020d17 !important;
}
body.wf-dark-mode .race-infobox th,
body.wf-dark-mode .race-infobox td,
body.wf-dark-mode .race-infobox img,
body.wf-dark-mode .class-infobox th,
body.wf-dark-mode .class-infobox td,
body.wf-dark-mode .class-infobox img {
border-color: #020d17 !important;
}
/* Grey type tag in page titles, e.g. "Dwarf (Race)": the page's DISPLAYTITLE
wraps the tag in <span class="wf-title-tag">. Mid grey #a0a0a0 is ~1.9-2.7:1
on the teal behind the title and ~4.4:1 in dark mode (picked darker than
the first try, #c8c8c8, by request). In
Common.css so it reaches both Vector (#firstHeading) and Minerva
(.pre-content h1); the span sets its own colour, so the h1 colour rules
don't override it. */
.wf-title-tag {
color: #a0a0a0;
}
/* Faction logos on the Alliance / Horde pages (2026-10-04):
[[File:Faction-X.png|thumb|class=wf-faction-logo]]. The source files are
only 64x64 and MediaWiki won't upscale a thumb, so the image is scaled 3x
(192px) here. The standard thumb frame (1px #c8ccd1 border) is kept; its
grey frame fill and the white backing behind the image are made
transparent. !important because core's thumb rules are more specific.
Both skins, both modes. */
figure.wf-faction-logo,
figure.wf-faction-logo > a,
figure.wf-faction-logo .mw-file-element {
background-color: transparent !important;
}
figure.wf-faction-logo .mw-file-element {
width: 192px !important;
height: 192px !important;
}
/* Faction logo frame lines (outer frame, caption edge, image edge) in the
palette's darkest shades instead of core's light grey #c8ccd1, so the frame
reads darker than the page background: #06252a in light mode (same as the
race/class infobox borders), #020d17 in dark mode. Desktop only in effect:
Minerva draws no thumb frame. */
figure.wf-faction-logo,
figure.wf-faction-logo > figcaption,
figure.wf-faction-logo .mw-file-element {
border-color: #06252a !important;
}
body.wf-dark-mode figure.wf-faction-logo,
body.wf-dark-mode figure.wf-faction-logo > figcaption,
body.wf-dark-mode figure.wf-faction-logo .mw-file-element {
border-color: #020d17 !important;
}
/* Faction logo frame lines at 3px (double frame: outer frame + the line
around the image, with core's 3px gap between them). Per side, because
core leaves the figure's bottom edge to the caption strip below it. */
figure.wf-faction-logo {
border-width: 3px 3px 0 3px !important;
}
figure.wf-faction-logo > figcaption {
border-width: 0 3px 3px 3px !important;
}
figure.wf-faction-logo .mw-file-element {
border-width: 3px !important;
}
/* Faction logo frame: fill the 3px gap between the outer frame and the line
around the image with a blue darker than the page background (the tab
shades: #0e4750 light, #082944 dark), leaving the logo's own background
transparent. The ring around the image covers core's 3px image margin
(top/left/right/bottom); the empty caption strip's 3px padding below it
gets the same fill. Desktop (Vector) only, like the frame lines. */
body.skin-vector figure.wf-faction-logo .mw-file-element {
box-shadow: 0 0 0 3px #0e4750;
}
body.skin-vector figure.wf-faction-logo > figcaption {
background-color: #0e4750 !important;
}
body.skin-vector.wf-dark-mode figure.wf-faction-logo .mw-file-element {
box-shadow: 0 0 0 3px #082944;
}
body.skin-vector.wf-dark-mode figure.wf-faction-logo > figcaption {
background-color: #082944 !important;
}
/* Coin icons in an infobox's money row (Template:Quest info wraps them in
.wf-coins): no frame. .race-infobox img (Vector.css, Minerva.css with
!important) gives every infobox image a 3px border meant for the race/class
icon, and the light/dark rules above only change its colour. */
.race-infobox .wf-coins img {
border: none !important;
}
/* ===== Patch Notes page + Main Page "Latest patch" teaser =====
Template:Patch Notes (.wf-patch-header), Template:Dev note (.wf-devnote),
Template:Latest patch (.wf-latest-patch, on top of .mainpage-card).
Lives here (not Vector/Minerva) so it reaches both skins. Only these
boxes get backgrounds; no wrapper layers are touched. */
.wf-latest-patch {
text-align: left;
padding: 4px 16px 12px;
margin: 16px 0;
color: #f5ead6;
}
.wf-latest-patch .card-title {
padding: 8px 0 4px;
}
.wf-latest-patch ul {
margin: 4px 0 8px 1.4em;
}
.wf-latest-patch-more {
font-weight: bold;
}
.wf-patch-header {
background-color: #14616f;
color: #f5ead6;
border: 1px solid #0a353c;
border-left: 4px solid #e8d9b5;
border-radius: 4px;
padding: 8px 12px;
margin: 0.5em 0 1em;
}
.wf-patch-disclaimer {
font-size: 0.9em;
font-style: italic;
margin-top: 4px;
}
.wf-devnote {
background-color: rgba(232, 217, 181, 0.12);
border-left: 3px solid #e8d9b5;
border-radius: 0 4px 4px 0;
padding: 4px 10px;
margin: 4px 0 6px;
font-size: 0.95em;
}
body.wf-dark-mode .wf-latest-patch {
color: #e0e0e0 !important;
}
body.wf-dark-mode .wf-patch-header {
background-color: #082944 !important;
color: #e0e0e0 !important;
border-color: #1a1a1a !important;
border-left-color: #8ab4f8 !important;
}
body.wf-dark-mode .wf-devnote {
background-color: rgba(8, 41, 68, 0.6) !important;
border-left-color: #8ab4f8 !important;
}