MediaWiki:Citizen.css

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');

/* ==========================================================================
   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: '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.skin-theme-clientpref-night,
html.skin-theme-clientpref-os:not(.skin-theme-clientpref-day) {
	--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. CITIZEN SKIN — LIGHT MODE MAPPING
   ========================================================================== */

html.skin-theme-clientpref-day,
html.skin-theme-clientpref-os:not(.skin-theme-clientpref-night) {
	--background-color-base: var(--gb-light-bg0);
	--background-color-neutral: var(--gb-light-bg0-soft);
	--background-color-neutral-subtle: var(--gb-light-bg1);
	--background-color-interactive: var(--gb-light-bg1);
	--background-color-interactive-subtle: var(--gb-light-bg0-soft);

	--color-base: var(--gb-light-fg1);
	--color-base--subtle: var(--gb-light-fg3);
	--color-emphasized: var(--gb-light-fg0);
	--color-subtle: var(--gb-light-fg4);
	--color-disabled: var(--gb-light-bg4);

	--color-link: var(--gb-faded-blue);
	--color-link--hover: var(--gb-faded-aqua);
	--color-link--visited: var(--gb-faded-purple);
	--color-link-red: var(--gb-faded-red);

	--border-color-base: var(--gb-light-bg3);
	--border-color-subtle: var(--gb-light-bg2);

	--background-color-progressive: var(--gb-neutral-blue);
	--color-progressive: var(--gb-faded-blue);
	--background-color-destructive: var(--gb-neutral-red);
	--color-destructive: var(--gb-faded-red);
	--background-color-warning: var(--gb-neutral-yellow);
	--background-color-success: var(--gb-neutral-green);

	--color-content-added: var(--gb-faded-green);
	--color-content-removed: var(--gb-faded-red);

	color-scheme: light;
}

/* ==========================================================================
   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(--border-color-base);
	padding-bottom: 0.2em;
}

.mw-body h2 {
	font-size: 1.8em;
	border-bottom: 1px solid var(--border-color-subtle);
}

.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;
}

html.skin-theme-clientpref-day pre,
html.skin-theme-clientpref-day .mw-highlight {
	background-color: var(--gb-light-bg0-hard);
	color: var(--gb-light-fg1);
}

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;
}

html.skin-theme-clientpref-day code {
	color: var(--gb-faded-orange);
}

/* 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)
   ========================================================================== */

html.skin-theme-clientpref-night ::-webkit-scrollbar,
html.skin-theme-clientpref-os:not(.skin-theme-clientpref-day) ::-webkit-scrollbar {
	width: 12px;
}
html.skin-theme-clientpref-night ::-webkit-scrollbar-track,
html.skin-theme-clientpref-os:not(.skin-theme-clientpref-day) ::-webkit-scrollbar-track {
	background: var(--gb-dark-bg0);
}
html.skin-theme-clientpref-night ::-webkit-scrollbar-thumb,
html.skin-theme-clientpref-os:not(.skin-theme-clientpref-day) ::-webkit-scrollbar-thumb {
	background: var(--gb-dark-bg3);
	border-radius: 6px;
}