|
|
| (12 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Dark theme, inlined into every page's <head> via a BeforePageDisplay | | /* Intentionally empty — the site theme is inlined into every page by a |
| * hook in LocalSettings.php (see ops/wiki/scripts/apply_wiki_skin.sh —
| | BeforePageDisplay hook (ops/wiki/scripts/apply_wiki_skin.sh). Editing |
| * MediaWiki:Common.css alone doesn't reliably apply on this install, a
| | this page has no effect on the theme. */ |
| * 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;
| |
| }
| |
| /* 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;
| |
| }
| |
| }
| |
