MediaWiki:Citizen.css

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

/* ---- Stencil icons for the nav (mask = alpha of inline SVG) ---- */
.citizen-drawer__menu .mw-list-item a::before,
#p-navigation .mw-list-item a::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.6em;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: var( --da-icon ) center / contain no-repeat;
	mask: var( --da-icon ) center / contain no-repeat;
}

/* home: alarm triangle with clapper dot */
#n-Main-Page a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 20 2 20 Z' fill='none' stroke='black' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='15' r='2' fill='black'/%3E%3C/svg%3E"); }
/* policy: clipboard rules */
#n-Policy a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
/* about: broadcast i */
#n-About a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='8' r='1.6' fill='black'/%3E%3Cpath d='M12 11.5v6' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E"); }
/* recent signals: seismograph pulse */
#n-Recent-Signals a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13h4l3-8 4 15 3-10 2 3h4' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }
/* random door: a door, ajar */
#n-Random-Door a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='3' width='12' height='18' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='15' cy='12.5' r='1.5' fill='black'/%3E%3C/svg%3E"); }
/* adventure: compass rose */
#n-Adventure a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 4.5 14 12 12 19.5 10 12 Z' fill='black'/%3E%3C/svg%3E"); }
/* funding: collection coin */
#n-Funding a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12 6.5v11M9 9c0-1.2 1.3-2 3-2s3 .8 3 2-1.2 1.8-3 2-3 .9-3 2 1.3 2 3 2 3-.8 3-2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E"); }
/* request credentials: the key */
#n-Request-Narrator-Credentials a { --da-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='12' r='4.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12.5 12H21M18 12v3.5M15 12v2.5' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }

/* the one red item: the call to action */
#n-Request-Narrator-Credentials a,
#n-Request-Narrator-Credentials a::before {
	color: var( --color-destructive );
	background-color: var( --color-destructive );
}
#n-Request-Narrator-Credentials a {
	background-color: transparent;
	font-weight: 700;
}