MediaWiki:Citizen.css - Revision history

Ukernelperson: Blanked the page

2026-08-08T12:07:40Z

Blanked the page

Show changes

Ukernelperson at 12:05, 8 August 2026

2026-08-08T12:05:49Z

Show changes

Ukernelperson at 11:52, 8 August 2026

2026-08-08T11:52:42Z

← Older revision		Revision as of 11:52, 8 August 2026
Line 181:		Line 181:
	.citizen-sidebar {		.citizen-sidebar {
	background-color: var(--background-color-neutral);		background-color: var(--background-color-neutral);
	border-color: var(--border-color-base);		border-color: color-mix(in srgb, var(--border-color-base) 40%, transparent);
	}		}

Line 343:		Line 343:

	body {		body {
	/* subtle depth behind the glass panels */		/* subtle depth behind the glass panels — this gradient is deliberately
			large and soft so it reads as one continuous surface rather than a
			flat backdrop behind separate boxes */
	background-color: var(--gb-dark-bg0-hard);		background-color: var(--gb-dark-bg0-hard);
	background-image:		background-image:
	radial-gradient(~~circle~~ at 15% 20%, color-mix(in srgb, var(--gb-neutral-blue) 12%, transparent) 0%, transparent 45%),		radial-gradient(ellipse 80% 60% at 15% 0%, color-mix(in srgb, var(--gb-neutral-blue) 14%, transparent) 0%, transparent 55%),
	radial-gradient(~~circle~~ at 85% 80%, color-mix(in srgb, var(--gb-bright-yellow) 8%, transparent) 0%, transparent 45%);		radial-gradient(ellipse 70% 60% at 100% 100%, color-mix(in srgb, var(--gb-bright-yellow) 10%, transparent) 0%, transparent 55%),
			radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--gb-bright-orange) 5%, transparent) 0%, transparent 60%);
	background-attachment: fixed;		background-attachment: fixed;
	}		}

			/* Header, sidebar, footer, and cards all pull from the SAME gradient ramp
			(bg0-hard -> bg0-soft -> bg1) at low opacity, so adjoining panels share
			tone instead of butting up against each other as separate flat blocks.
			Borders are faded to near-invisible so the blur/gradient does the work
			of separating regions instead of a hard line. */
	.citizen-header,		.citizen-header,
	.citizen-header-container,		.citizen-header-container,
Line 357:		Line 365:
	.citizen-footer,		.citizen-footer,
	.citizen-page-header {		.citizen-page-header {
	background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 70%, transparent);		background-image: linear-gradient(
			180deg,
			color-mix(in srgb, var(--gb-dark-bg0-hard) 55%, transparent) 0%,
			color-mix(in srgb, var(--gb-dark-bg0-soft) 60%, transparent) 50%,
			color-mix(in srgb, var(--gb-dark-bg1) 55%, transparent) 100%
			);
	backdrop-filter: blur(14px) saturate(140%);		backdrop-filter: blur(14px) saturate(140%);
	-webkit-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);		border-color: color-mix(in srgb, var(--gb-dark-bg3) 25%, transparent);
	}		}

Line 371:		Line 384:
	#toc,		#toc,
	.toc {		.toc {
	background-~~color~~: color-mix(in srgb, var(--gb-dark-bg1) 55%, transparent);		background-image: linear-gradient(
			145deg,
			color-mix(in srgb, var(--gb-dark-bg1) 45%, transparent) 0%,
			color-mix(in srgb, var(--gb-dark-bg0-soft) 50%, transparent) 100%
			);
	backdrop-filter: blur(10px) saturate(130%);		backdrop-filter: blur(10px) saturate(130%);
	-webkit-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);		border: 1px solid color-mix(in srgb, var(--gb-dark-bg3) 25%, transparent);
	}		}

Line 385:		Line 402:
	}		}

	/* ~~Fixed/sticky UI (mobile~~ bottom toolbar: settings + personal menu icons~~, etc.~~)		/* Mobile bottom toolbar (settings + personal menu icons) must NOT use
	must NOT use backdrop-filter — on Android Chrome, blurred fixed elements		backdrop-filter — on Android Chrome, blurred fixed elements repaint per
	~~repaint per~~ scroll frame and leave a ghosted duplicate behind. ~~Give them a~~		scroll frame and leave a ghosted duplicate behind. Solid-ish background
	~~solid~~-ish background instead, ~~and force their own compositing layer so~~ the		instead. (No transform/translateZ here — that breaks position:sticky on
	~~browser stops re-rasterizing them on every scroll tick~~. */		the sidebar, which is why the sidebar broke last time.) */
	.citizen-personal-menu,		.citizen-personal-menu,
	.citizen-page-tools,		.citizen-page-tools,
	~~.citizen-drawer,~~		#p-personal {
	#p-personal,
	~~.citizen-body-header,~~
	~~.citizen-footer-fixed,~~
	~~[class="citizen"][class="fixed"],~~
	~~[class="citizen"][class="sticky"]~~ {
	backdrop-filter: none !important;		backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;		-webkit-backdrop-filter: none !important;
	background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 92%, transparent);		background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 92%, transparent);
	~~transform: translateZ(0);~~
	~~will-change: transform;~~
	}		}

Line 435:		Line 445:
	}		}

	~~pre,~~		/* Code blocks stay solid (no blur) on purpose — a blurred element with its
	~~.mw-highlight {~~		own internal horizontal scroll (overflow-x: auto) is the same class of
	~~background-color: color-mix~~(~~in srgb, var(--gb-dark-bg0-hard) 80%, transparent~~);		mobile-compositor bug that caused ghosting earlier, but manifests as
	~~backdrop~~-~~filter~~: ~~blur(6px~~);		broken/unresponsive horizontal scrolling instead. A solid terminal-like
	-~~webkit~~-~~backdrop-filter: blur(6px);~~		background also just reads better for code anyway. // Dropdowns / popovers benefit most from a strong blur since they float over content */
	}

	/* Dropdowns / popovers benefit most from a strong blur since they float over content */
	.citizen-dropdown-content,		.citizen-dropdown-content,
	.cdx-menu,		.cdx-menu,

Ukernelperson at 06:27, 7 August 2026

2026-08-07T06:27:36Z

@@ Line 11: / Line 11: @@
 @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Space+Mono:wght@400;700&display=swap');
 /* ==========================================================================
@@ Line 80: / Line 93: @@
 	/* Fonts */
-	--gb-font-gothic: 'UnifrakturMaguntia', 'Old English Text MT', 'Pfeffer Mediaeval', serif;
+	--gb-font-gothic: 'Sorgath', 'UnifrakturMaguntia', 'Old English Text MT', 'Pfeffer Mediaeval', serif;
 	--gb-font-mono:   'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
@@ Line 368: / Line 381: @@
 .cdx-text-input__input,
 .cdx-search-input__input {
-	background-color: color-mix(in srgb, var(--gb-dark-bg1) 65%, transparent);
+	background-color: color-mix(in srgb, var(--gb-dark-bg1) 85%, transparent);
 	border-color: color-mix(in srgb, var(--gb-dark-bg3) 70%, transparent);
+}

Ukernelperson at 06:21, 7 August 2026

2026-08-07T06:21:30Z

Show changes

Ukernelperson at 06:16, 7 August 2026

2026-08-07T06:16:27Z

Show changes

Ukernelperson at 06:04, 7 August 2026

2026-08-07T06:04:54Z

← Older revision		Revision as of 06:04, 7 August 2026
Line 1:		Line 1:
	/* 1. Import ~~Decorative and Monospace Fonts from Google Fonts~~ */		/* Import Space Mono for code sections */
	@import url('https://googleapis.com');		@import url('https://googleapis.com');

Line 5:		Line 5:
	.skin-theme-clientpref-night,		.skin-theme-clientpref-night,
	html.skin-citizen-dark {		html.skin-citizen-dark {
	/* ~~Background & Container Tones~~ */		/* --- Core Gruvbox Material Dark Palette --- */
	~~background: linear-gradient(145deg, #1f2e22 0%, #2a3d2e 60%, #364f3b 100%) !important;~~		--color-surface-0: #1d2021 !important; /* Pure Gruvbox Dark Hard canvas */
	~~background-attachment: fixed !important;~~		--color-surface-1: #282828 !important; /* Soft dark container boxes */
	--color-surface-0: ~~transparent~~ !important;		--color-surface-2: #3c3836 !important; /* Hover highlights / list bars */
	--color-surface-1: #~~231c18~~ !important;		--color-surface-3: #504945 !important; /* Form inputs and clean borders */
	--color-surface-2: #~~2d241f~~ !important;
	--color-surface-3: #~~382d27~~ !important;

	/* ~~Accents & Typography~~ */		/* --- Iconic Retro Text Values --- */
	--color-~~primary~~: #~~76a035~~ !important;		--color-base: #d4be98 !important; /* Warm Material Cream primary text */
	--color-~~primary~~-variant: #~~8cb943~~ !important;		--color-base-variant: #a89984 !important; /* Muted Sand secondary text */
	--color-~~base~~: #~~f4f0e6~~ !important;
	--color-~~base~~-variant: #~~c2bbae~~ !important;		/* --- Desaturated Earth Accents --- */
			--color-primary: #a9b665 !important; /* Gruvbox Moss Green for links & primary UI */
			--color-primary-variant: #89b482 !important; /* Muted Aqua Green for active headers */

			/* --- Uniform Modern Curves --- */
	--border-radius-base: 12px !important;		--border-radius-base: 12px !important;
			--border-radius-large: 16px !important;

	/* ~~2. Map Fonts into Citizen's Native Font Variables */~~		/* --- Map Monospace Variable --- */
	--~~font~~-~~family~~-~~serif: 'Grenze Gotisch', serif !important;~~
	--~~font-family-sans-serif: 'Grenze Gotisch', serif !important;~~
	--font-family-monospace: 'Space Mono', monospace !important;		--font-family-monospace: 'Space Mono', monospace !important;
	}		}

	/* ~~Apply the decorative font to all UI layout elements, buttons, and headings~~ */		/* Force solid container layers without chaotic background gradients */
	~~body,~~
	.mw-body,		.mw-body,
	#mw-~~header~~,		.mw-page-container,
	.skin-citizen-sidebar,		.skin-citizen-sidebar,
	.mw-portlet,		.mw-portlet {
	~~.oo~~-ui-~~widget {~~		background-color: var(--color-surface-1) !important;
	~~font~~-~~family~~: var(--~~font~~-~~family~~-~~serif~~) !important;		border-radius: var(--border-radius-base) !important;
	~~letter~~-~~spacing~~: 0.~~03em~~; /* ~~Slightly increases readability for decorative text~~ */		border: 1px solid var(--color-surface-3) !important;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
			}

			/* Structure the header tracking strip cleanly */
			#mw-header {
			background-color: var(--color-surface-0) !important;
			border-bottom: 1px solid var(--color-surface-2) !important;
	}		}

	/* ~~Apply Space Mono explicitly to all technical~~ code blocks ~~and preformatted tags~~ */		/* Target and style code blocks with clear Gruvbox syntax highlights */
	code,		code,
	pre,		pre,
Line 45:		Line 52:
	.syntaxhighlight {		.syntaxhighlight {
	font-family: var(--font-family-monospace) !important;		font-family: var(--font-family-monospace) !important;
	font-size: 0.9em !important; ~~/* Balances Space Mono's natural height */~~		font-size: 0.9em !important;
	background-color: var(--color-surface-2) !important;		background-color: var(--color-surface-2) !important;
			color: #e78a4e !important; /* Gruvbox Material Terracotta Orange for syntax */
	padding: 0.2em 0.4em !important;		padding: 0.2em 0.4em !important;
	border-radius: 6px !important;		border-radius: 6px !important;
			border: 1px solid var(--color-surface-3) !important;
	}		}

	/* ~~Container Polish~~ */		/* Ensure active hyperlinks use the soft Gruvbox green */
	~~.mw-body,~~		a {
	~~.mw-page-container,~~		color: var(--color-primary) !important;
	~~.skin-citizen-sidebar,~~		}
	~~.mw-portlet~~ {		a:visited {
	~~background-~~color: var(--color-~~surface-1~~) !important;		color: #d3869b !important; /* Gruvbox Purple/Burgundy for visited entries */
	~~border-radius~~: ~~var(--border-radius-base) !important;~~
	~~border~~: ~~1px solid~~ #~~332923 !important;~~
	~~box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25)~~ !important;
	}		}

	~~.mw-body { padding: 2em !important; }~~
	~~#mw-header { background-color: #1a1512 !important; border-bottom: 1px solid #231c18 !important; }~~

Ukernelperson at 06:03, 7 August 2026

2026-08-07T06:03:13Z

← Older revision		Revision as of 06:03, 7 August 2026
Line 1:		Line 1:
	/* ~~Inject higher root authority to completely force variable changes~~ */		/* 1. Import Decorative and Monospace Fonts from Google Fonts */
			@import url('https://googleapis.com');

	:root,		:root,
	.skin-theme-clientpref-night,		.skin-theme-clientpref-night,
	html.skin-citizen-dark {		html.skin-citizen-dark {
	/* ~~1. Main~~ Background~~: A lively linear gradient instead of a dark solid color~~ */		/* Background & Container Tones */
	background: linear-gradient(~~135deg~~, #~~1b351e~~ 0%, #~~345c3a 50~~%, #~~4a7c4e~~ 100%) !important;		background: linear-gradient(145deg, #1f2e22 0%, #2a3d2e 60%, #364f3b 100%) !important;
	background-attachment: fixed !important;		background-attachment: fixed !important;
			--color-surface-0: transparent !important;
			--color-surface-1: #231c18 !important;
			--color-surface-2: #2d241f !important;
			--color-surface-3: #382d27 !important;

	/* ~~2. Text Boxes~~ & ~~Containers: Translucent, warm earthy mud brown~~ */		/* Accents & Typography */
	--color-~~surface-1~~: ~~rgba(77, 59, 45, 0.55)~~ !important;		--color-primary: #76a035 !important;
			--color-primary-variant: #8cb943 !important;
	~~/* 3. Dropdowns & Hover states~~: ~~Opaque sand/clay brown */~~		--color-base: #f4f0e6 !important;
	--color-~~surface~~-2: ~~rgba(105, 83, 65, 0.75)~~ !important;		--color-base-variant: #c2bbae !important;
	--~~color~~-~~surface~~-3: ~~rgba(128, 102, 80, 0.85)~~ !important;		--border-radius-base: 12px !important;

	/* 4. ~~Layout Accents~~: ~~A sunlit~~, ~~lively moss green */~~		/* 2. Map Fonts into Citizen's Native Font Variables */
	--~~color~~-~~primary~~: ~~#8eba59~~ !important;		--font-family-serif: 'Grenze Gotisch', serif !important;
	--~~color~~-~~primary~~-~~variant~~: ~~#a3d16b~~ !important;		--font-family-sans-serif: 'Grenze Gotisch', serif !important;
			--font-family-monospace: 'Space Mono', monospace !important;
			}

	/* 5. ~~Typography: Off~~-~~white linen color to keep text ultra~~-~~readable */~~		/* Apply the decorative font to all UI layout elements, buttons, and headings */
	--~~color~~-~~base: #f7f4eb~~ !important;		body,
	-~~-color-base-variant~~: ~~#d6cfbe !important~~;		.mw-body,
			#mw-header,
			.skin-citizen-sidebar,
			.mw-portlet,
			.oo-ui-widget {
			font-family: var(--font-family-serif) !important;
			letter-spacing: 0.03em; /* Slightly increases readability for decorative text */
			}

	/* ~~6. Rounded Corners: Smooth out~~ all ~~native Citizen panels globally~~ */		/* Apply Space Mono explicitly to all technical code blocks and preformatted tags */
	--~~border~~-~~radius~~-~~base~~: ~~14px~~ !important;		code,
	--border-radius~~-large~~: ~~18px~~ !important;		pre,
			.mw-code,
			kbd,
			samp,
			.syntaxhighlight {
			font-family: var(--font-family-monospace) !important;
			font-size: 0.9em !important; /* Balances Space Mono's natural height */
			background-color: var(--color-surface-2) !important;
			padding: 0.2em 0.4em !important;
			border-radius: 6px !important;
	}		}

	/* ~~Force transparency, glass blur, and rounded corners onto the main body containers~~ */		/* Container Polish */
	.mw-page-container,		.mw-body,
			.mw-page-container,
	.skin-citizen-sidebar,		.skin-citizen-sidebar,
	~~.ext-visualEditor-theme-citizen,~~		.mw-portlet {
	.mw-portlet,
	~~.oo-ui-panelLayout,~~
	~~.mw-body~~ {
	background-color: var(--color-surface-1) !important;		background-color: var(--color-surface-1) !important;
	~~backdrop-filter: blur(14px) webkit-backdrop-filter(14px) !important;~~

	~~/* Smooth, rounded box edges to remove sharp corners */~~
	border-radius: var(--border-radius-base) !important;		border-radius: var(--border-radius-base) !important;
			border: 1px solid #332923 !important;
	~~/* Subtly separate the brown boxes from the green background gradient */~~		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
	border: 1px solid ~~rgba(255, 255, 255, 0.1)~~ !important;
	box-shadow: 0 ~~8px 32px 0~~ rgba(0, 0, 0, 0.2) ~~!important;~~
	}

	~~/* Make sure the main content block inherits the rounded corners properly */~~
	~~.mw-body {~~
	~~padding: 1.5em~~ !important;
	}		}

	~~/* Brighten the header layout bar with glassmorphism */~~		.mw-body { padding: 2em !important; }
	#mw-header {		#mw-header { background-color: #1a1512 !important; border-bottom: 1px solid #231c18 !important; }
	background-color: ~~rgba(27, 53, 30, 0.6) !important;~~
	~~backdrop-filter: blur(10px) webkit-backdrop-filter(10px)~~ !important;
	border-bottom: 1px solid ~~rgba(255, 255, 255, 0.08)~~ !important;
	}

Ukernelperson at 05:58, 7 August 2026

2026-08-07T05:58:49Z

← Older revision		Revision as of 05:58, 7 August 2026
Line 1:		Line 1:
	/* ~~Custom Earth & Swamp Palette with Frosted Glass Effects~~ */		/* Inject higher root authority to completely force variable changes */
	:root,		:root,
	.skin-theme-clientpref-night,		.skin-theme-clientpref-night,
	html.skin-citizen-dark {		html.skin-citizen-dark {
	/* 1. ~~Canvas~~ Background - ~~Deep~~, ~~rich swamp water green~~ */		/* 1. Main Background: A lively linear gradient instead of a dark solid color */
	--color-surface-0~~: #1b241c~~ !important;		background: linear-gradient(135deg, #1b351e 0%, #345c3a 50%, #4a7c4e 100%) !important;
			background-attachment: fixed !important;

			/* 2. Text Boxes & Containers: Translucent, warm earthy mud brown */
			--color-surface-1: rgba(77, 59, 45, 0.55) !important;

	/* 2. ~~Main Containers - Semi-transparent Earthy Mud Brown~~ */		/* 3. Dropdowns & Hover states: Opaque sand/clay brown */
	--color-surface-1: rgba(54, 43, 36, 0.65) !important;		--color-surface-2: rgba(105, 83, 65, 0.75) !important;
			--color-surface-3: rgba(128, 102, 80, 0.85) !important;
	~~/* 3. Elevated Menus/Popups - Slightly more opaque Mud Brown */~~
	--color-surface-2: rgba(74, 59, 49, 0.8) !important;		/* 4. Layout Accents: A sunlit, lively moss green */
			--color-primary: #8eba59 !important;
	/* 4. ~~Active Inputs & Borders~~ - ~~Weathered Clay~~ / ~~Dark Tan~~ */		--color-primary-variant: #a3d16b !important;
	--color-~~surface~~-3: ~~rgba(100, 83, 71, 0.9)~~ !important;
			/* 5. Typography: Off-white linen color to keep text ultra-readable */
			--color-base: #f7f4eb !important;
			--color-base-variant: #d6cfbe !important;

	/* 5. ~~Interface Accents - Vibrant Moss/Foliage Green~~ */		/* 6. Rounded Corners: Smooth out all native Citizen panels globally */
	--~~color-primary: #6b8e23 !important;~~		--border-radius-base: 14px !important;
	~~--color-primary-variant: #556b2f !important;~~		--border-radius-large: 18px !important;

	~~/* Text overrides to preserve readability over dark wood tones */~~
	--~~color~~-base: ~~#e6dfd3~~ !important; ~~/* Soft Cream Primary Text */~~
	--~~color~~-~~base~~-~~variant~~: ~~#b5ad9e~~ !important; ~~/* Muted Sand Secondary Text */~~
	}		}

	/* Force ~~modern browsers to render a frosted~~ blur ~~behind~~ the ~~content panels~~ */		/* Force transparency, glass blur, and rounded corners onto the main body containers */
	.mw-page-container,		.mw-page-container,
	.skin-citizen-sidebar,		.skin-citizen-sidebar,
	.ext-visualEditor-theme-citizen,		.ext-visualEditor-theme-citizen,
	.mw-portlet,		.mw-portlet,
	.oo-ui-panelLayout {		.oo-ui-panelLayout,
			.mw-body {
	background-color: var(--color-surface-1) !important;		background-color: var(--color-surface-1) !important;
	backdrop-filter: blur(~~12px~~) webkit-backdrop-filter(~~12px~~) !important;		backdrop-filter: blur(14px) webkit-backdrop-filter(14px) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
			/* Smooth, rounded box edges to remove sharp corners */
			border-radius: var(--border-radius-base) !important;

			/* Subtly separate the brown boxes from the green background gradient */
			border: 1px solid rgba(255, 255, 255, 0.1) !important;
			box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
			}

			/* Make sure the main content block inherits the rounded corners properly */
			.mw-body {
			padding: 1.5em !important;
	}		}

	/* ~~Keep headers readable and cleanly blurred over~~ the ~~swamp backdrop~~ */		/* Brighten the header layout bar with glassmorphism */
	#mw-header {		#mw-header {
	background-color: rgba(27, 36, 28, 0.75) !important;		background-color: rgba(27, 53, 30, 0.6) !important;
	backdrop-filter: blur(10px) webkit-backdrop-filter(10px) !important;		backdrop-filter: blur(10px) webkit-backdrop-filter(10px) !important;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	}		}

Ukernelperson at 05:50, 7 August 2026

2026-08-07T05:50:42Z

@@ Line 1: / Line 1: @@
-/* Using :root forces the variables to load at the highest authority level */
+/* Custom Earth & Swamp Palette with Frosted Glass Effects */
 :root,
 .skin-theme-clientpref-night,
 html.skin-citizen-dark {
-     --color-surface-0: #1c1c1c !important;
+    /* 1. Canvas Background - Deep, rich swamp water green */
-     --color-surface-1: #242424 !important;
+     --color-surface-0: #1b241c !important;
-     --color-surface-2: #2b2b2b !important;
-     --color-surface-3: #323232 !important;
+    /* 2. Main Containers - Semi-transparent Earthy Mud Brown */
-     --color-primary: #78a06f !important;
+     --color-surface-1: rgba(54, 43, 36, 0.65) !important;
-     --color-primary-variant: #5f875f !important;
+}