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
* Gruvbox-themed skin for the Citizen skin
* - Palette: original Gruvbox (dark + light, hard/medium/soft contrast bg0 used)
* - Headings: gothic (blackletter) display font
* - Code/monospace: Space Mono
*
* Import fonts first (Google Fonts). If your wiki blocks external font
* requests, self-host these instead and swap the @import for @font-face.
*/
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Space+Mono:wght@400;700&display=swap');
/* Sorgath is not on Google Fonts / a free CDN — it must be self-hosted.
Upload the font file to your wiki (e.g. via Special:Upload) or another
host you control, then point src at that URL. Until you fill this in,
the stack below falls back to UnifrakturMaguntia. */
@font-face {
font-family: 'Sorgath';
src: url('https://your-wiki-domain.example/path/to/Sorgath.woff2') format('woff2'),
url('https://your-wiki-domain.example/path/to/Sorgath.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
1. GRUVBOX PALETTE (original, unmodified hex values from morhetz/gruvbox)
========================================================================== */
:root {
/* Dark mode - background */
--gb-dark-bg0-hard: #1d2021;
--gb-dark-bg0: #282828;
--gb-dark-bg0-soft: #32302f;
--gb-dark-bg1: #3c3836;
--gb-dark-bg2: #504945;
--gb-dark-bg3: #665c54;
--gb-dark-bg4: #7c6f64;
/* Dark mode - foreground */
--gb-dark-fg0: #fbf1c7;
--gb-dark-fg1: #ebdbb2;
--gb-dark-fg2: #d5c4a1;
--gb-dark-fg3: #bdae93;
--gb-dark-fg4: #a89984;
/* Light mode - background */
--gb-light-bg0-hard: #f9f5d7;
--gb-light-bg0: #fbf1c7;
--gb-light-bg0-soft: #f2e5bc;
--gb-light-bg1: #ebdbb2;
--gb-light-bg2: #d5c4a1;
--gb-light-bg3: #bdae93;
--gb-light-bg4: #a89984;
/* Light mode - foreground */
--gb-light-fg0: #282828;
--gb-light-fg1: #3c3836;
--gb-light-fg2: #504945;
--gb-light-fg3: #665c54;
--gb-light-fg4: #7c6f64;
/* Neutral accents (same value both modes, per original palette) */
--gb-neutral-red: #cc241d;
--gb-neutral-green: #98971a;
--gb-neutral-yellow: #d79921;
--gb-neutral-blue: #458588;
--gb-neutral-purple: #b16286;
--gb-neutral-aqua: #689d6a;
--gb-neutral-orange: #d65d0e;
--gb-neutral-gray: #928374;
/* Bright accents (dark mode) */
--gb-bright-red: #fb4934;
--gb-bright-green: #b8bb26;
--gb-bright-yellow: #fabd2f;
--gb-bright-blue: #83a598;
--gb-bright-purple: #d3869b;
--gb-bright-aqua: #8ec07c;
--gb-bright-orange: #fe8019;
--gb-bright-gray: #928374;
/* Faded accents (light mode) */
--gb-faded-red: #9d0006;
--gb-faded-green: #79740e;
--gb-faded-yellow: #b57614;
--gb-faded-blue: #076678;
--gb-faded-purple: #8f3f71;
--gb-faded-aqua: #427b58;
--gb-faded-orange: #af3a03;
--gb-faded-gray: #7c6f64;
/* Fonts */
--gb-font-gothic: 'Sorgath', 'UnifrakturMaguntia', 'Old English Text MT', 'Pfeffer Mediaeval', serif;
--gb-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ==========================================================================
2. CITIZEN SKIN — DARK MODE MAPPING
========================================================================== */
html,
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-os {
--background-color-base: var(--gb-dark-bg0);
--background-color-neutral: var(--gb-dark-bg0-soft);
--background-color-neutral-subtle: var(--gb-dark-bg1);
--background-color-interactive: var(--gb-dark-bg1);
--background-color-interactive-subtle: var(--gb-dark-bg0-soft);
--color-base: var(--gb-dark-fg1);
--color-base--subtle: var(--gb-dark-fg3);
--color-emphasized: var(--gb-dark-fg0);
--color-subtle: var(--gb-dark-fg4);
--color-disabled: var(--gb-dark-bg4);
--color-link: var(--gb-bright-blue);
--color-link--hover: var(--gb-bright-aqua);
--color-link--visited: var(--gb-bright-purple);
--color-link-red: var(--gb-bright-red);
--border-color-base: var(--gb-dark-bg3);
--border-color-subtle: var(--gb-dark-bg2);
--background-color-progressive: var(--gb-neutral-blue);
--color-progressive: var(--gb-bright-blue);
--background-color-destructive: var(--gb-neutral-red);
--color-destructive: var(--gb-bright-red);
--background-color-warning: var(--gb-neutral-yellow);
--background-color-success: var(--gb-neutral-green);
--color-content-added: var(--gb-bright-green);
--color-content-removed: var(--gb-bright-red);
color-scheme: dark;
}
/* ==========================================================================
3. LIGHT MODE — DISABLED (dark mode is forced site-wide, see §2)
The light-mode variable block has been removed on purpose. The theme
toggle is also hidden below so visitors can't flip back to light.
========================================================================== */
.citizen-theme-toggle,
#citizen-theme-toggle-form,
[data-mw-loader-name*="theme.toggle"] {
display: none !important;
}
/* ==========================================================================
4. BASE APPLICATION
========================================================================== */
body,
.citizen-page,
#mw-content-text {
background-color: var(--background-color-base);
color: var(--color-base);
}
a {
color: var(--color-link);
}
a:visited {
color: var(--color-link--visited);
}
a:hover {
color: var(--color-link--hover);
}
a.new {
color: var(--color-link-red);
}
/* Header / sidebar / footer surfaces */
.citizen-header,
.citizen-header-container,
#mw-panel,
.citizen-footer,
.citizen-sidebar {
background-color: var(--background-color-neutral);
border-color: var(--border-color-base);
}
/* Cards, boxes, infoboxes */
.citizen-card,
.mw-message-box,
.infobox,
table.wikitable {
background-color: var(--background-color-neutral-subtle);
border-color: var(--border-color-subtle);
color: var(--color-base);
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var(--background-color-interactive);
color: var(--color-emphasized);
}
/* Buttons */
.cdx-button,
.citizen-button {
background-color: var(--background-color-interactive);
border-color: var(--border-color-base);
color: var(--color-base);
}
.cdx-button--action-progressive,
.citizen-button--primary {
background-color: var(--background-color-progressive);
color: var(--gb-dark-fg0);
}
.cdx-button--action-destructive {
background-color: var(--background-color-destructive);
color: var(--gb-dark-fg0);
}
/* diff colors */
.diff-addedline {
background-color: color-mix(in srgb, var(--color-content-added) 20%, transparent);
}
.diff-deletedline {
background-color: color-mix(in srgb, var(--color-content-removed) 20%, transparent);
}
/* ==========================================================================
5. TYPOGRAPHY — GOTHIC HEADINGS
========================================================================== */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.citizen-page-header .mw-page-title,
.citizen-sitename {
font-family: var(--gb-font-gothic);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--color-emphasized);
}
.mw-body h1,
.citizen-page-header .mw-page-title {
font-size: 2.4em;
border-bottom: 2px solid var(--gb-bright-yellow);
padding-bottom: 0.2em;
}
.mw-body h2 {
font-size: 1.8em;
border-bottom: 1px solid var(--gb-neutral-yellow);
}
/* Text selection - a Gruvbox signature */
::selection {
background-color: var(--gb-bright-yellow);
color: var(--gb-dark-bg0-hard);
}
/* Blockquotes get a yellow rail */
.mw-body blockquote {
border-left: 3px solid var(--gb-bright-yellow);
padding-left: 1em;
color: var(--color-base--subtle);
}
/* Active nav / tab state picks up yellow instead of the default blue */
.citizen-menu__item--active > a,
.vector-tab-noicon.selected a,
li.selected a {
color: var(--gb-bright-yellow);
font-weight: 700;
}
.mw-body h3 { font-size: 1.4em; }
.mw-body h4 { font-size: 1.15em; }
/* ==========================================================================
6. TYPOGRAPHY — SPACE MONO FOR CODE
========================================================================== */
code,
pre,
kbd,
samp,
tt,
.mw-code,
.cdx-text-input__input.cdx-mono,
textarea#wpTextbox1 {
font-family: var(--gb-font-mono);
}
pre,
.mw-highlight {
background-color: var(--gb-dark-bg0-hard);
color: var(--gb-dark-fg1);
border: 1px solid var(--border-color-base);
border-radius: 4px;
padding: 0.75em 1em;
overflow-x: auto;
}
code {
background-color: var(--background-color-interactive-subtle);
color: var(--gb-bright-orange);
padding: 0.1em 0.35em;
border-radius: 3px;
font-size: 0.9em;
}
/* Syntax highlighting accents (if SyntaxHighlight/Pygments classes are present) */
.mw-highlight .k { color: var(--gb-bright-red); } /* keyword */
.mw-highlight .s,
.mw-highlight .s2 { color: var(--gb-bright-green); } /* string */
.mw-highlight .c,
.mw-highlight .c1 { color: var(--gb-dark-fg4); font-style: italic; } /* comment */
.mw-highlight .nf { color: var(--gb-bright-blue); } /* function name */
.mw-highlight .mi,
.mw-highlight .mf { color: var(--gb-bright-purple); } /* numbers */
.mw-highlight .o { color: var(--gb-bright-orange); } /* operator */
/* ==========================================================================
7. SCROLLBAR (dark mode nicety)
========================================================================== */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--gb-dark-bg0);
}
::-webkit-scrollbar-thumb {
background: var(--gb-dark-bg3);
border-radius: 6px;
}
/* ==========================================================================
8. BLUR & TRANSPARENCY (glassmorphism)
========================================================================== */
body {
/* subtle depth behind the glass panels */
background-color: var(--gb-dark-bg0-hard);
background-image:
radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--gb-neutral-blue) 12%, transparent) 0%, transparent 45%),
radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--gb-bright-yellow) 8%, transparent) 0%, transparent 45%);
background-attachment: fixed;
}
.citizen-header,
.citizen-header-container,
#mw-panel,
.citizen-sidebar,
.citizen-footer,
.citizen-page-header {
background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 70%, transparent);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-color: color-mix(in srgb, var(--gb-dark-bg3) 60%, transparent);
}
.citizen-card,
.mw-message-box,
.infobox,
table.wikitable,
.cdx-card,
.citizen-page-toc,
#toc,
.toc {
background-color: color-mix(in srgb, var(--gb-dark-bg1) 55%, transparent);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
border: 1px solid color-mix(in srgb, var(--gb-dark-bg3) 50%, transparent);
}
.cdx-button,
.citizen-button,
.cdx-text-input__input,
.cdx-search-input__input {
background-color: color-mix(in srgb, var(--gb-dark-bg1) 85%, transparent);
border-color: color-mix(in srgb, var(--gb-dark-bg3) 70%, transparent);
}
/* Fixed/sticky UI (mobile bottom toolbar: settings + personal menu icons, etc.)
must NOT use backdrop-filter — on Android Chrome, blurred fixed elements
repaint per scroll frame and leave a ghosted duplicate behind. Give them a
solid-ish background instead, and force their own compositing layer so the
browser stops re-rasterizing them on every scroll tick. */
.citizen-personal-menu,
.citizen-page-tools,
.citizen-drawer,
#p-personal,
.citizen-body-header,
.citizen-footer-fixed,
[class*="citizen"][class*="fixed"],
[class*="citizen"][class*="sticky"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 92%, transparent);
transform: translateZ(0);
will-change: transform;
}
@media (pointer: coarse) {
/* Touch devices: blur-on-scroll ghosting is a widespread mobile Chrome/
WebView bug, not just this skin. Kill backdrop-filter everywhere on
touch and fall back to a mostly-opaque background so the frosted look
degrades gracefully instead of smearing. */
.citizen-header,
.citizen-header-container,
#mw-panel,
.citizen-sidebar,
.citizen-footer,
.citizen-page-header,
.citizen-card,
.mw-message-box,
.infobox,
table.wikitable,
.cdx-card,
.citizen-page-toc,
#toc,
.toc,
.citizen-dropdown-content,
.cdx-menu,
.citizen-typeahead-search__content,
pre,
.mw-highlight {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 95%, transparent);
}
}
pre,
.mw-highlight {
background-color: color-mix(in srgb, var(--gb-dark-bg0-hard) 80%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Dropdowns / popovers benefit most from a strong blur since they float over content */
.citizen-dropdown-content,
.cdx-menu,
.citizen-typeahead-search__content {
background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 75%, transparent);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid color-mix(in srgb, var(--gb-dark-bg3) 60%, transparent);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}