MediaWiki:Citizen.css

/* cmp.wiki palette for the Citizen skin (wiki lane, 2026-10-30).
   Fonts (Unbounded, Inter, JetBrains Mono) and the shared header come from /shared/header.css, loaded on every page. */
:root {
	--font-family-citizen-base: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-family-citizen-monospace: "JetBrains Mono", ui-monospace, monospace;
	/* teal accent #5ef2e8 = oklch(87.97% 0.1261 188.85); darker on the day theme so links stay readable */
	--color-progressive-oklch__h: 188.85;
	--color-progressive-oklch__c: 0.1261;
	--color-progressive-oklch__l: 52%;
}
:root.skin-theme-clientpref-night {
	--color-progressive-oklch__l: 87.97%;
	--color-surface-0-oklch__l: 13.4%;
	--color-surface-0-oklch__c: 0.005;
	--color-base: #e9e6df;
	--color-emphasized: #ffffff;
	--color-subtle: #a6acb4;
	--border-color-base: #222830;
}
@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		--color-progressive-oklch__l: 87.97%;
		--color-surface-0-oklch__l: 13.4%;
		--color-surface-0-oklch__c: 0.005;
		--color-base: #e9e6df;
		--color-emphasized: #ffffff;
		--color-subtle: #a6acb4;
		--border-color-base: #222830;
	}
}
/* display type for titles and section headings */
#firstHeading,
.mw-parser-output .mw-heading2 h2,
.mw-parser-output > h2 {
	font-family: "Unbounded", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}
/* orange for the secondary accent */
.mw-parser-output .cmpw-accent { color: #ff8a3d; }

/* shared site header (design lane): pinned on top of every page, Citizen's own header starts below it */
/* header.css (loaded after the site CSS) sets position: relative, hence the higher specificity */
body .cmp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
body { padding-top: var(--cmp-header-h, 60px); }
/* Citizen's own header is a bottom bar below 1120 px and a left rail from 1120 px: only the rail starts under our bar */
@media (min-width: 1120px) {
	.citizen-header { top: var(--cmp-header-h, 60px); }
}
/* the header markup arrives through the site notice slot; keep that slot from adding its own spacing */
#siteNotice:has(> .cmp-header) { margin: 0; padding: 0; }

/* ---------- tables below 720 px (phones): every table scrolls sideways inside its own box instead of squashing its
   columns, header cells stay on one line, and the page itself never scrolls sideways. Covers wikitables and Cargo's
   query tables (cargoTable, and cargoDynamicTable, which Citizen leaves out of its overflow wrapper). ---------- */
.cmpw-phone-only { display: none; }
@media screen and (max-width: 720px) {
	.mw-parser-output table.wikitable,
	.mw-parser-output table.cargoTable,
	.mw-parser-output table.cargoDynamicTable {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.mw-parser-output table.wikitable > * > tr > th,
	.mw-parser-output table.cargoTable > * > tr > th,
	.mw-parser-output table.cargoDynamicTable > * > tr > th {
		white-space: nowrap;
	}
	.mw-parser-output table.wikitable > * > tr > td,
	.mw-parser-output table.cargoTable > * > tr > td {
		min-width: 9em;
	}
	.mw-parser-output .dataTables_wrapper { max-width: 100%; }
	.cmpw-phone-only { display: block; margin: 0.5em 0; color: var( --color-subtle, #a6acb4 ); font-size: 0.9em; }
	/* All recipes: Recipe, Variant, Decode tok/s, Status on phones (columns 1, 5, 9, 14) */
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(6),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(2),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(3),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(4),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(7),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(8),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(10),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(11),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(12),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(13),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(15),
	.cmpw-list--recipes table.cargoDynamicTable tr > :nth-child(16),
	/* All platforms: Platform, Variant, Gen2, ReBAR / BAR1, P2P, Status on phones (columns 1, 5, 8, 9, 10, 11) */
	.cmpw-list--platforms table.cargoDynamicTable tr > :nth-child(2),
	.cmpw-list--platforms table.cargoDynamicTable tr > :nth-child(3),
	.cmpw-list--platforms table.cargoDynamicTable tr > :nth-child(4),
	.cmpw-list--platforms table.cargoDynamicTable tr > :nth-child(6),
	.cmpw-list--platforms table.cargoDynamicTable tr > :nth-child(7),
	.cmpw-list--platforms table.cargoDynamicTable tr > :nth-child(12) {
		display: none;
	}
	/* the trimmed list tables fit a phone: their header cells may wrap (never below 4.5em), the name column keeps 8em */
	.mw-parser-output .cmpw-list table.cargoDynamicTable > * > tr > th { white-space: normal; min-width: 4.5em; }
	.mw-parser-output .cmpw-list table.cargoDynamicTable > * > tr > td:first-child { min-width: 8em; }
}