MediaWiki:Citizen.css
MediaWiki interface page
More actions
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.
/* ============================================================================
MediaWiki:Citizen.css — Fable Wiki dark/gold palette + fixed background.
Loaded automatically by Citizen skin for all logged-in & anonymous users.
============================================================================ */
/* ----------------------------------------------------------------------------
1. Palette tokens (overrides Citizen's Codex tokens for dark theme).
To re-skin the wiki, change ONLY these custom properties. Every other
rule in this file consumes them.
---------------------------------------------------------------------------- */
:root,
html.skin-theme-clientpref-night {
/* core charcoals */
--fable-bg-0: #06050a; /* deepest — site background */
--fable-bg-1: #0d0c12; /* content panel base */
--fable-bg-2: #14121a; /* card / infobox base */
--fable-bg-3: #1e1b26; /* hover surfaces */
--fable-text: #e8e3d6; /* warm off-white body text */
--fable-text-muted: #a59f8f;
--fable-text-soft: #6f6a5d;
/* warm metallic gold (the Fable accent) */
--fable-gold: #d4af37;
--fable-gold-bright: #f4d572;
--fable-gold-deep: #a07b1a;
--fable-gold-dim: rgba(212, 175, 55, 0.5);
--fable-gold-faint: rgba(212, 175, 55, 0.15);
/* content panel opacity over the fixed background */
--fable-panel-bg: rgba(13, 12, 18, 0.92);
--fable-panel-border: rgba(212, 175, 55, 0.18);
/* override Citizen's tokens with our palette */
--color-base: var(--fable-text);
--color-emphasized: var(--fable-gold-bright);
--color-subtle: var(--fable-text-muted);
--color-placeholder: var(--fable-text-soft);
--color-link: var(--fable-gold);
--color-link--hover: var(--fable-gold-bright);
--color-link--active: var(--fable-gold-bright);
--color-link-red: #c97a5a;
--color-link-visited: #c4a85f;
--color-link-external: var(--fable-gold-bright);
--color-progressive: var(--fable-gold);
--color-progressive--hover: var(--fable-gold-bright);
--color-progressive--active: var(--fable-gold-bright);
--color-progressive--focus: var(--fable-gold-bright);
--background-color-base: var(--fable-bg-1);
--background-color-base-fixed: var(--fable-bg-0);
--background-color-neutral: var(--fable-bg-2);
--background-color-neutral-subtle: var(--fable-bg-2);
--background-color-subtle: var(--fable-bg-2);
--background-color-inverted: var(--fable-text);
--background-color-interactive: var(--fable-bg-3);
--background-color-interactive--hover: rgba(212, 175, 55, 0.08);
--background-color-interactive--active: rgba(212, 175, 55, 0.16);
--background-color-interactive-subtle: var(--fable-bg-2);
--background-color-progressive-subtle: var(--fable-gold-faint);
--border-color-base: rgba(212, 175, 55, 0.18);
--border-color-subtle: rgba(212, 175, 55, 0.10);
--border-color-muted: rgba(212, 175, 55, 0.05);
--border-color-emphasized: var(--fable-gold);
--accent-color-base: var(--fable-gold);
}
/* ----------------------------------------------------------------------------
2. Fixed-position background image behind everything.
Swap the URL below to change the site background image. The image lives
at /w/resources/assets/fable-bg.jpg.
---------------------------------------------------------------------------- */
html,
body {
background-color: var(--fable-bg-0);
}
body {
background-image:
linear-gradient( to bottom, rgba(6, 5, 10, 0.45) 0%, rgba(6, 5, 10, 0.65) 60%, rgba(6, 5, 10, 0.82) 100% ),
url( /w/resources/assets/fable-bg.jpg );
background-attachment: fixed, fixed;
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
color: var(--fable-text);
}
/* ----------------------------------------------------------------------------
3. Content panel — semi-transparent dark card the article sits on.
---------------------------------------------------------------------------- */
.mw-page-container {
background-color: var(--fable-panel-bg);
border-left: 1px solid var(--fable-panel-border);
border-right: 1px solid var(--fable-panel-border);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
}
/* Header bar sits on top of the panel; keep it slightly darker for contrast.
NOTE: do NOT put backdrop-filter on .citizen-header directly — it creates
a stacking context and traps the position:fixed user-menu dropdown card
inside the header bounds (the card appears at top:0 of the header, not
the viewport, so it looks like "nothing happens"). Citizen's own backdrop
blur lives on .citizen-header::after, which doesn't have this problem. */
.citizen-header,
.citizen-header__inner {
background-color: rgba(6, 5, 10, 0.85) !important;
border-bottom: 1px solid var(--fable-gold-faint);
}
/* ----------------------------------------------------------------------------
4. Typography — gold headings, decorative underline on h1/h2.
---------------------------------------------------------------------------- */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
#firstHeading {
color: var(--fable-gold-bright);
font-family: Cinzel, "Trajan Pro", Georgia, "Times New Roman", serif;
font-weight: 600;
letter-spacing: 0.02em;
}
.mw-body h1,
#firstHeading {
border-bottom: 1px solid var(--fable-gold-dim);
padding-bottom: 0.25em;
}
.mw-body h2 {
border-bottom: 1px solid var(--fable-gold-faint);
padding-bottom: 0.2em;
}
/* Decorative gold rule the wiki uses as a section divider when needed */
hr {
border: none;
height: 1px;
background: linear-gradient( to right,
transparent 0%,
var(--fable-gold-dim) 20%,
var(--fable-gold) 50%,
var(--fable-gold-dim) 80%,
transparent 100%
);
margin: 1.5em 0;
}
/* ----------------------------------------------------------------------------
5. Links — gold with bright hover, gentle underline.
---------------------------------------------------------------------------- */
.mw-body a,
.mw-body a:visited {
color: var(--fable-gold);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.mw-body a:hover,
.mw-body a:focus {
color: var(--fable-gold-bright);
border-bottom-color: var(--fable-gold-bright);
}
.mw-body a.new {
color: #c97a5a;
}
.mw-body a.external::after {
color: var(--fable-gold-dim);
}
/* ----------------------------------------------------------------------------
6. Table of contents — sticky right rail, gold accents.
Citizen already places the TOC in the right rail; we just restyle.
---------------------------------------------------------------------------- */
.citizen-toc,
.toc {
background-color: var(--fable-bg-2);
border: 1px solid var(--fable-gold-faint);
border-radius: 4px;
padding: 0.75em 1em;
}
.citizen-toc__header,
.toctitle {
color: var(--fable-gold-bright);
font-family: Cinzel, Georgia, serif;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.85em;
border-bottom: 1px solid var(--fable-gold-faint);
padding-bottom: 0.3em;
margin-bottom: 0.4em;
}
.citizen-toc a,
.toc a {
color: var(--fable-text-muted);
border-bottom: none;
}
.citizen-toc a:hover,
.toc a:hover {
color: var(--fable-gold);
}
/* ----------------------------------------------------------------------------
7. Tables — themable for in-article content.
---------------------------------------------------------------------------- */
.mw-body table.wikitable {
background-color: var(--fable-bg-2);
color: var(--fable-text);
border: 1px solid var(--fable-gold-faint);
}
.mw-body table.wikitable > tr > th,
.mw-body table.wikitable > * > tr > th {
background-color: var(--fable-bg-3);
color: var(--fable-gold-bright);
border: 1px solid var(--fable-gold-faint);
font-family: Cinzel, Georgia, serif;
}
.mw-body table.wikitable > tr > td,
.mw-body table.wikitable > * > tr > td {
border: 1px solid var(--fable-gold-faint);
}
/* ----------------------------------------------------------------------------
8. Search box, buttons, form chrome.
---------------------------------------------------------------------------- */
.citizen-search__input,
.cdx-text-input__input,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea {
background-color: var(--fable-bg-2) !important;
color: var(--fable-text) !important;
border-color: var(--fable-gold-faint) !important;
}
.citizen-search__input:focus,
.cdx-text-input__input:focus {
border-color: var(--fable-gold) !important;
box-shadow: 0 0 0 2px var(--fable-gold-faint) !important;
}
/* Primary button = gold */
.mw-ui-button.mw-ui-progressive,
.cdx-button--action-progressive,
.cdx-button--weight-primary {
background-color: var(--fable-gold) !important;
border-color: var(--fable-gold-deep) !important;
color: #1a1410 !important;
}
.mw-ui-button.mw-ui-progressive:hover,
.cdx-button--action-progressive:hover {
background-color: var(--fable-gold-bright) !important;
}
/* ----------------------------------------------------------------------------
9. Sidebar / drawer.
---------------------------------------------------------------------------- */
.citizen-drawer,
.citizen-drawer__menu,
.citizen-pageTools {
background-color: rgba(6, 5, 10, 0.95);
border-color: var(--fable-gold-faint);
}
/* ----------------------------------------------------------------------------
10. Footer.
---------------------------------------------------------------------------- */
.citizen-footer {
background-color: rgba(6, 5, 10, 0.7);
border-top: 1px solid var(--fable-gold-faint);
color: var(--fable-text-muted);
}
.citizen-footer a {
color: var(--fable-gold);
}
/* ----------------------------------------------------------------------------
11. Code & syntax highlight blocks.
---------------------------------------------------------------------------- */
.mw-body pre,
.mw-body code {
background-color: rgba(6, 5, 10, 0.85);
border: 1px solid var(--fable-gold-faint);
color: var(--fable-text);
}
/* ----------------------------------------------------------------------------
12. Selection highlight.
---------------------------------------------------------------------------- */
::selection {
background-color: var(--fable-gold-dim);
color: var(--fable-bg-0);
}
/* ----------------------------------------------------------------------------
13. Mobile — keep the fixed background, soften the panel border.
---------------------------------------------------------------------------- */
@media ( max-width: 720px ) {
body {
/* On mobile, fixed-attachment is glitchy on iOS — use scroll fallback */
background-attachment: scroll, scroll;
}
.mw-page-container {
border-left: none;
border-right: none;
}
}
/* ----------------------------------------------------------------------------
14. Hide the Citizen preferences (gear icon) dropdown from the header.
Hides both the trigger button and its dropdown card; also targets the
sticky-header clone so it doesn't reappear once you scroll.
---------------------------------------------------------------------------- */
.citizen-preferences-dropdown,
#citizen-preferences-details,
#citizen-preferences-dropdown__card {
display: none !important;
}