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: 96px; }
@media (min-width: 980px) {
	body { padding-top: var(--cmp-header-h, 60px); }
	.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,
	.mw-parser-output table.cargoDynamicTable > * > 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, Cards, Decode tok/s, Status on phones (columns 1, 5, 6, 9, 14) */
	.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;
	}
	.cmpw-list table.cargoDynamicTable > * > tr > td:first-child { min-width: 11em; }
}