MediaWiki:Common.css: Difference between revisions

Revision as of 17:49, 12 July 2026

/* Dark theme, inlined into every page's <head> via a BeforePageDisplay
 * hook in LocalSettings.php (see ops/wiki/scripts/apply_wiki_skin.sh —
 * MediaWiki:Common.css alone doesn't reliably apply on this install, a
 * ResourceLoader quirk only caught by rendering with a real headless
 * browser). Matches guide.westeros.live's Georgia serif / gold-parchment
 * look. Palette source of truth: web/guide-site/index.html — keep both
 * in sync if the guide site's colors ever change.
 *
 * All colors are CSS custom properties below — change a value here and
 * re-dispatch {"action": "apply_skin"} to repaint the whole wiki. No need
 * to touch any of the selector rules further down.
 */

:root {
  color-scheme: dark;
  --wiki-bg: #14110f;       /* page background */
  --wiki-panel: #1c1815;    /* header/TOC/table/input chrome background */
  --wiki-ink: #f5f0e6;      /* body text — bright, for readability against --wiki-bg */
  --wiki-muted: #c2b394;    /* de-emphasized text (footer, edit-section links) */
  --wiki-gold: #d4af5a;     /* headings, links */
  --wiki-gold-hover: #f5f0e6; /* link hover — swaps to --wiki-ink for contrast */
  --wiki-rule: #4a3f33;     /* borders/dividers */
}

body,
.skin-vector,
.mw-page-container {
  background: var(--wiki-bg) !important;
  color: var(--wiki-ink) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
}

#content,
.vector-body,
.mw-body,
.vector-menu-content,
.vector-page-toolbar,
.vector-sitenotice-container {
  background: var(--wiki-bg) !important;
  color: var(--wiki-ink) !important;
  border-color: var(--wiki-rule) !important;
}

.mw-body {
  border: 1px solid var(--wiki-rule) !important;
}

.vector-header-container,
.vector-header,
.vector-pinnable-header,
.vector-menu-heading,
#p-logo-text,
.vector-sticky-pinned-container {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
}

h1, h2, h3, h4, h5, h6,
.mw-first-heading,
.vector-menu-heading-label {
  color: var(--wiki-gold) !important;
  border-color: var(--wiki-rule) !important;
}

a, a:visited {
  color: var(--wiki-gold) !important;
}
a:hover {
  color: var(--wiki-gold-hover) !important;
}

.mw-editsection a { color: var(--wiki-muted) !important; }

pre, code, .mw-code {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
  border: 1px solid var(--wiki-rule) !important;
}

table, .wikitable {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
  border-color: var(--wiki-rule) !important;
}
.wikitable > tr > th,
.wikitable > * > tr > th {
  background: var(--wiki-panel) !important;
  color: var(--wiki-gold) !important;
  border-color: var(--wiki-rule) !important;
}
.wikitable > tr > td,
.wikitable > * > tr > td {
  border-color: var(--wiki-rule) !important;
}

input, textarea, select, .cdx-text-input__input {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
  border-color: var(--wiki-rule) !important;
}

.vector-menu-tabs,
.vector-menu-dropdown,
.vector-dropdown-content {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
}

.mw-footer, #footer {
  background: var(--wiki-bg) !important;
  color: var(--wiki-muted) !important;
  border-color: var(--wiki-rule) !important;
}

/* Table of contents (Vector 2022) + any other pinnable/Codex chrome —
 * attribute-wildcard so new sub-elements in these components are covered
 * without having to enumerate every exact class name. */
[class*="vector-toc"],
[class*="vector-pinnable"],
[class*="vector-pinned-container"],
[class*="vector-dropdown"] {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
  border-color: var(--wiki-rule) !important;
}
[class*="vector-toc"] a,
[class*="vector-pinnable"] a {
  color: var(--wiki-ink) !important;
}
[class*="vector-toc"] a:hover,
[class*="vector-pinnable"] a:hover {
  color: var(--wiki-gold) !important;
}

button, .cdx-button, .mw-ui-button, [class*="cdx-"] {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
  border-color: var(--wiki-rule) !important;
}

/* UI icons (hamburger, search, ellipsis "more", user/login, fullscreen,
 * etc.) are served as background-image SVGs with a hardcoded fill="#000"
 * baked into the image itself (confirmed by fetching the actual SVG from
 * load.php) — a plain `color` override has zero effect on them, since
 * that only works for mask-image-based icon techniques, not this one.
 * Invert turns solid black (opaque) pixels white while leaving
 * transparent regions transparent, which is exactly what these
 * single-color glyphs need. Scoped to .vector-icon/.mw-ui-icon (Vector's
 * own icon classes) — NOT any broader "icon" wildcard — so it can't
 * accidentally invert something that's already correctly colored, like
 * the real westeros.live site logo (.mw-logo-icon) or the plain <img>
 * "Powered by MediaWiki" footer badge, neither of which carry these
 * classes. */
.vector-icon,
.mw-ui-icon {
  filter: invert(1) !important;
}

/* Higher-specificity re-declarations: some Codex/Vector component CSS is
 * loaded after this stylesheet with equal specificity + !important, which
 * wins on source order alone — `html body` prefixes beat that regardless
 * of load order. */
html body button,
html body .cdx-button,
html body [class*="vector-toc"],
html body [class*="vector-pinnable"],
html body [class*="vector-pinned-container"] {
  background: var(--wiki-panel) !important;
  color: var(--wiki-ink) !important;
  border-color: var(--wiki-rule) !important;
}

/* Kills fade/scroll-shadow pseudo-elements Vector draws around pinnable
 * chrome (TOC, sticky sidebar) — some hardcode a white linear-gradient
 * directly in their ::after, invisible to any class-name-based selector
 * and only found by inspecting computed styles directly. */
[class*="vector-toc"]::before,
[class*="vector-toc"]::after,
[class*="vector-pinnable"]::before,
[class*="vector-pinnable"]::after,
[class*="vector-sticky"]::before,
[class*="vector-sticky"]::after {
  background: none !important;
  background-image: none !important;
}
.vector-sticky-pinned-container {
  background: var(--wiki-panel) !important;
}

/* Always show the main menu (Explore: Events/Houses/Nations/Towns/Players)
 * as a permanent left column for every visitor, instead of the collapsed
 * hamburger dropdown Vector 2022 uses by default. Vector's own "move to
 * sidebar" pin is a per-visitor, cookie/localStorage-based preference —
 * unsuitable here since the user wants it on for everyone, always, with no
 * dependency on a visitor's own browser state. This bypasses that pin
 * mechanism entirely with plain CSS: the dropdown's content is always
 * rendered, positioned as a fixed column, regardless of the checkbox/pin
 * state underneath. */
@media (min-width: 1000px) {
  #vector-main-menu-dropdown-checkbox {
    display: none !important;
  }
  .vector-main-menu-dropdown .vector-dropdown-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    /* A small gutter from the viewport edge on all sides — flush against
     * the raw browser edge (0/0) read as visually "slapped on," not an
     * intentional panel; matching the content box's own bordered-card
     * look (border on all sides, not just border-right) ties it together.
     * !important on top/left/width is required here: Vector's own core
     * CSS positions this dropdown via an ID-based selector
     * (#vector-main-menu-dropdown .vector-dropdown-content), which beats
     * a two-class selector on specificity alone regardless of source
     * order — confirmed live these values were silently never applying
     * (computed style kept showing Vector's own natural popup position,
     * not ours) until marked !important, same as the other properties
     * on this rule already are. */
    top: 16px !important;
    left: 16px !important;
    width: 200px !important;
    height: calc(100vh - 32px) !important;
    overflow-y: auto;
    padding: 1rem 0.75rem;
    box-sizing: border-box;
    background: var(--wiki-panel) !important;
    border: 1px solid var(--wiki-rule) !important;
    z-index: 100;
    pointer-events: auto !important;
  }
  #vector-main-menu-unpinned-container {
    display: block !important;
  }
  .vector-pinnable-header-toggle-button {
    display: none !important;
  }
  /* left gutter (16) + sidebar width (200) + a normal column-gap (24) —
   * matching Vector's own --column-gap value elsewhere, instead of the
   * much larger, purely incidental gap the first version of this left
   * behind (sidebar margin-left plus leftover centering slack). */
  .mw-page-container {
    margin-left: 240px !important;
  }
  /* Vector centers its fixed-width content column (.mw-body sets
   * justify-content:center) in whatever space is left after the sidebar —
   * with the sidebar taken out of grid flow above, that left Vector
   * centering a large dead gap before the content box even starts, and
   * what looked like the content's own internal padding was actually just
   * leftover centering whitespace, not real padding — so it disappeared
   * along with the gap. Left-align instead of centering, and give the
   * content real, explicit padding so it doesn't depend on how much
   * incidental whitespace centering happens to leave. */
  .mw-body {
    justify-content: flex-start !important;
    /* #firstHeading lives in .vector-page-titlebar, a SIBLING of
     * .mw-body-content — both children of this grid container — so
     * padding has to go here, not on .mw-body-content alone, or the
     * heading stays flush against the edge while only the body text
     * gets breathing room (confirmed live: padding on .mw-body-content
     * had zero effect on #firstHeading's position). */
    padding: 0 2rem !important;
    box-sizing: border-box !important;
  }
}

/* Real mobile fix (confirmed live via Playwright at 375-414px and iPhone
 * 12 emulation): Vector 2022 hardcodes .vector-header{min-width:500px} —
 * a genuine desktop-only assumption unrelated to $wgVectorResponsive
 * (that flag only affects the legacy Vector skin and the viewport meta
 * tag; actual mobile-optimized layout normally comes from the separate
 * MobileFrontend extension, not installed here). Below 500px viewport
 * width this forces real horizontal page overflow and pushes the
 * hamburger menu button off-screen entirely (confirmed: negative
 * getBoundingClientRect().left). Overriding it directly is the practical
 * fix without pulling in a whole extra extension. */
@media (max-width: 999px) {
  .vector-header,
  .mw-page-container,
  .mw-page-container-inner,
  body,
  html {
    min-width: 0 !important;
  }
  .vector-header {
    width: 100% !important;
  }
}