MediaWiki:Common.css: Difference between revisions
Apply westeros dark theme (automated) |
Apply westeros dark theme (automated) |
||
| Line 185: | Line 185: | ||
.vector-main-menu-dropdown .vector-dropdown-content { | .vector-main-menu-dropdown .vector-dropdown-content { | ||
display: block !important; | display: block !important; | ||
visibility: visible !important; | |||
opacity: 1 !important; | |||
position: fixed !important; | position: fixed !important; | ||
top: 66px; | top: 66px; | ||
| Line 196: | Line 198: | ||
border-right: 1px solid var(--wiki-rule); | border-right: 1px solid var(--wiki-rule); | ||
z-index: 100; | z-index: 100; | ||
pointer-events: auto !important; | |||
} | } | ||
#vector-main-menu-unpinned-container { | #vector-main-menu-unpinned-container { | ||
Revision as of 22:53, 11 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;
}
/* 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;
top: 66px;
left: 0;
width: 220px;
height: calc(100vh - 66px);
overflow-y: auto;
padding: 1rem 0.75rem;
box-sizing: border-box;
background: var(--wiki-panel) !important;
border-right: 1px solid var(--wiki-rule);
z-index: 100;
pointer-events: auto !important;
}
#vector-main-menu-unpinned-container {
display: block !important;
}
.vector-pinnable-header-toggle-button {
display: none !important;
}
.mw-page-container {
margin-left: 220px !important;
}
}