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 at every width (wiki lane): header cells on one line, words never split, wide tables scroll inside
   their own box (Citizen wraps wikitables in .citizen-overflow-content; Cargo's DataTables output is made its own
   scroller below), and the page itself never scrolls sideways ---------- */
.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 > *,
.mw-parser-output table.cargoTable > * > tr > *,
.mw-parser-output table.cargoDynamicTable > * > tr > * {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}
/* DataTables writes table-layout: fixed and overflow-wrap: break-word inline, which splits words */
.mw-parser-output table.cargoDynamicTable {
	display: block;
	width: 100% !important;
	max-width: 100%;
	overflow-x: auto;
	table-layout: auto !important;
	overflow-wrap: normal !important;
}
/* one-line cells for long free text: ellipsis, full value in the tooltip (title) and on the page */
.cmpw-clip {
	display: inline-block;
	max-width: 14em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
/* the list tables (All recipes, All platforms, the list on Unlocks): one line per value, the name column may wrap
   once; rows stay one or two lines high */
.mw-parser-output table.cmpw-listtable { font-size: 0.9em; }
.mw-parser-output table.cmpw-listtable > * > tr > td { white-space: nowrap; padding-left: 0.5em; padding-right: 0.5em; }
.mw-parser-output table.cmpw-listtable > * > tr > td:first-child { white-space: normal; min-width: 12em; max-width: 19em; }
.mw-parser-output table.cmpw-listtable > * > tr > th { padding-left: 0.5em; }
.mw-parser-output table.cmpw-listtable .cmpw-clip { max-width: 11em; }
/* list pages use the full width Citizen allows instead of its 1080px reading measure */
body.page-All_recipes,
body.page-All_platforms,
body.page-Unlocks {
	--width-layout: 1680px;
}

.cmpw-phone-only { display: none; }
@media screen and (max-width: 720px) {
	.mw-parser-output table.wikitable,
	.mw-parser-output table.cargoTable {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.mw-parser-output table.wikitable > * > tr > td,
	.mw-parser-output table.cargoTable > * > tr > td {
		min-width: 9em;
	}
	/* the list tables keep their key columns and fit a phone; header cells may wrap there */
	.mw-parser-output table.cmpw-listtable > * > tr > td,
	.mw-parser-output table.cmpw-listtable > * > tr > td:first-child { min-width: 0; }
	.mw-parser-output table.cmpw-listtable > * > tr > td:first-child { min-width: 7em; white-space: normal; }
	.mw-parser-output table.cmpw-listtable > * > tr > th { white-space: normal; }
	/* All recipes: Recipe, Cards, Decode tok/s, Status (columns 1, 5, 7, 10) */
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(2),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(3),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(4),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(6),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(8),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(9),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(11),
	.cmpw-list--recipes table.cmpw-listtable tr > :nth-child(12),
	/* All platforms: Platform, Variant, Gen2, ReBAR / BAR1, P2P, Status (columns 1, 2, 4, 5, 6, 8) */
	.cmpw-list--platforms table.cmpw-listtable tr > :nth-child(3),
	.cmpw-list--platforms table.cmpw-listtable tr > :nth-child(7),
	.cmpw-list--platforms table.cmpw-listtable tr > :nth-child(9),
	/* Unlocks list: Unlock, Unlocks, Variant, Status (columns 1, 2, 3, 5) */
	.cmpw-list--unlocks table.cmpw-listtable tr > :nth-child(4) {
		display: none;
	}
	.mw-parser-output table.cmpw-listtable .cmpw-clip { max-width: 8em; }
	/* PageForms' "Add a ..." boxes (size=50) stay inside the column */
	.mw-parser-output .pfFormInput,
	.mw-parser-output .pfFormInputWrapper,
	.mw-parser-output .pfFormInputWrapper .oo-ui-widget,
	.mw-parser-output .pfFormInputWrapper input { max-width: 100%; box-sizing: border-box; }
	.cmpw-phone-only { display: block; margin: 0.5em 0; color: var( --color-subtle, #a6acb4 ); font-size: 0.9em; }
}