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.
/* ================================================================
   DEAD AIR — Great Alarm theme v0.1α (on Citizen)
   Manila broadcast card · ink · signal red · stencil caps
   ================================================================ */

/* ---- Day: the broadcast card ---- */
:root {
	--color-surface-0: #e9e2cf;
	--color-surface-1: #e1d9c2;
	--color-surface-1--hover: #e6dfca;
	--color-surface-1--active: #dbd2b8;
	--color-surface-2: #d9d0b6;
	--color-surface-2--hover: #ded6bf;
	--color-surface-2--active: #d3c9ab;
	--color-surface-3: #d1c7ab;
	--color-surface-4: #c9bfa0;
	--color-emphasized: #211f1a;
	--color-base: #3d3a30;
	--color-subtle: #6d675a;
	--color-placeholder: #8a8371;
	--color-disabled: #a29a85;
	--color-progressive: #8a2a20;
	--color-progressive--hover: #a03227;
	--color-progressive--active: #6f221a;
	--color-destructive: #c8352b;
	--color-destructive--hover: #d94a3f;
	--color-destructive--active: #a82c23;
	--border-color-base: #c5bda6;
	--border-color-subtle: #d4ccb5;
}

/* ---- Night: the after-midnight rebroadcast ---- */
html.skin-theme-clientpref-night {
	--color-surface-0: #191713;
	--color-surface-1: #201d18;
	--color-surface-1--hover: #26221c;
	--color-surface-1--active: #1b1814;
	--color-surface-2: #27231c;
	--color-surface-2--hover: #2d2820;
	--color-surface-2--active: #211d17;
	--color-surface-3: #2e2921;
	--color-surface-4: #353026;
	--color-emphasized: #ede6d3;
	--color-base: #cfc7b2;
	--color-subtle: #948c78;
	--color-placeholder: #7a7263;
	--color-disabled: #5f594c;
	--color-progressive: #e06a55;
	--color-progressive--hover: #ea7f6b;
	--color-progressive--active: #c95a46;
	--color-destructive: #e05545;
	--color-destructive--hover: #ea6a5b;
	--color-destructive--active: #c9463a;
	--border-color-base: #3a352b;
	--border-color-subtle: #2e2a22;
}

@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		--color-surface-0: #191713;
		--color-surface-1: #201d18;
		--color-surface-1--hover: #26221c;
		--color-surface-1--active: #1b1814;
		--color-surface-2: #27231c;
		--color-surface-2--hover: #2d2820;
		--color-surface-2--active: #211d17;
		--color-surface-3: #2e2921;
		--color-surface-4: #353026;
		--color-emphasized: #ede6d3;
		--color-base: #cfc7b2;
		--color-subtle: #948c78;
		--color-placeholder: #7a7263;
		--color-disabled: #5f594c;
		--color-progressive: #e06a55;
		--color-progressive--hover: #ea7f6b;
		--color-progressive--active: #c95a46;
		--color-destructive: #e05545;
		--color-destructive--hover: #ea6a5b;
		--color-destructive--active: #c9463a;
		--border-color-base: #3a352b;
		--border-color-subtle: #2e2a22;
	}
}

/* ---- Broadcast-card typography ---- */
.mw-body h1.firstHeading {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 800;
	border-bottom: 3px double var( --color-emphasized );
	padding-bottom: 0.3em;
}

.mw-body h2 {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mw-body blockquote {
	border-left: 4px solid var( --color-destructive );
	font-style: italic;
	color: var( --color-subtle );
}

/* mono service voice: categories, footer, taglines */
.catlinks,
.citizen-footer,
#siteSub {
	font-family: Menlo, Consolas, "Liberation Mono", monospace;
	letter-spacing: 0.04em;
}

.citizen-footer__desc,
.citizen-footer__tagline {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.8em;
}

/* ---- Masthead: signal-red rule under the header ---- */
.citizen-header {
	border-bottom: 3px solid var( --color-destructive );
}

/* ---- Nav drawer: mono stencil voice ---- */
.citizen-drawer__menu .mw-list-item a {
	font-family: Menlo, Consolas, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85em;
}