MediaWiki:Citizen.css

/**
 * MediaWiki:Citizen.css
 * Gruvbox dark palette applied directly to the Citizen skin.
 * - Headings: gothic font (Sorgath, self-hosted — see @font-face below)
 * - Code: Space Mono
 * No blur, no transparency, no transform tricks — solid colors only,
 * for reliable cross-browser behavior.
 */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Space+Mono:wght@400;700&display=swap');

/* Sorgath must be self-hosted (not on Google Fonts). Fill in your uploaded
   URL below; until then this silently falls back to UnifrakturMaguntia. */
@font-face {
	font-family: 'Sorgath';
	src: url('https://your-font-host.example/Sorgath.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1. GRUVBOX PALETTE (original, unmodified hex values)
   ========================================================================== */

:root {
	--gb-bg0-hard: #1d2021;
	--gb-bg0:      #282828;
	--gb-bg0-soft: #32302f;
	--gb-bg1:      #3c3836;
	--gb-bg2:      #504945;
	--gb-bg3:      #665c54;
	--gb-bg4:      #7c6f64;

	--gb-fg0: #fbf1c7;
	--gb-fg1: #ebdbb2;
	--gb-fg2: #d5c4a1;
	--gb-fg3: #bdae93;
	--gb-fg4: #a89984;

	--gb-red:    #fb4934;
	--gb-green:  #b8bb26;
	--gb-yellow: #fabd2f;
	--gb-blue:   #83a598;
	--gb-purple: #d3869b;
	--gb-aqua:   #8ec07c;
	--gb-orange: #fe8019;
	--gb-gray:   #928374;

	--gb-font-gothic: 'Sorgath', 'UnifrakturMaguntia', 'Old English Text MT', serif;
	--gb-font-mono:   'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   2. CITIZEN SKIN VARIABLES — mapped directly to Gruvbox, always dark
   ========================================================================== */

html {
	--background-color-base: var(--gb-bg0);
	--background-color-neutral: var(--gb-bg0-soft);
	--background-color-neutral-subtle: var(--gb-bg1);
	--background-color-interactive: var(--gb-bg1);
	--background-color-interactive-subtle: var(--gb-bg0-soft);

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

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

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

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

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

	color-scheme: dark;
}

/* Hide the light/dark toggle since this theme is dark-only */
.citizen-theme-toggle,
#citizen-theme-toggle-form {
	display: none !important;
}

/* ==========================================================================
   3. 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); }

.citizen-header,
.citizen-header-container,
#mw-panel,
.citizen-footer,
.citizen-sidebar {
	background-color: var(--background-color-neutral);
	border-color: var(--border-color-base);
}

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

.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-fg0);
}
.cdx-button--action-destructive {
	background-color: var(--background-color-destructive);
	color: var(--gb-fg0);
}

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

/* ==========================================================================
   4. TYPOGRAPHY — GOTHIC HEADINGS + YELLOW ACCENTS
   ========================================================================== */

.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-yellow);
	padding-bottom: 0.2em;
}

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

.mw-body h3 { font-size: 1.4em; }
.mw-body h4 { font-size: 1.15em; }

::selection {
	background-color: var(--gb-yellow);
	color: var(--gb-bg0-hard);
}

.mw-body blockquote {
	border-left: 3px solid var(--gb-yellow);
	padding-left: 1em;
	color: var(--color-base--subtle);
}

.citizen-menu__item--active > a,
li.selected a {
	color: var(--gb-yellow);
	font-weight: 700;
}

/* ==========================================================================
   5. TYPOGRAPHY — SPACE MONO FOR CODE
   ========================================================================== */

code,
pre,
kbd,
samp,
tt,
.mw-code,
textarea#wpTextbox1 {
	font-family: var(--gb-font-mono);
}

pre,
.mw-highlight {
	background-color: var(--gb-bg0-hard);
	color: var(--gb-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-orange);
	padding: 0.1em 0.35em;
	border-radius: 3px;
	font-size: 0.9em;
}

.mw-highlight .k  { color: var(--gb-red); }
.mw-highlight .s,
.mw-highlight .s2 { color: var(--gb-green); }
.mw-highlight .c,
.mw-highlight .c1 { color: var(--gb-fg4); font-style: italic; }
.mw-highlight .nf { color: var(--gb-blue); }
.mw-highlight .mi,
.mw-highlight .mf { color: var(--gb-purple); }
.mw-highlight .o  { color: var(--gb-orange); }

/* ==========================================================================
   6. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track {
	background: var(--gb-bg0);
}
::-webkit-scrollbar-thumb {
	background: var(--gb-bg3);
	border-radius: 6px;
}