MediaWiki:Vector-2022.css

/* The Austrian Economics Wiki — site theme.
 *
 * Source of truth for the wiki page [[MediaWiki:Vector-2022.css]]. Never edit
 * that page in the browser; edit this file, commit, and run
 * scripts/apply_theme.sh on the server.
 *
 * Why Vector-2022.css and not Common.css: [[MediaWiki:Common.css]] is 13 KB of
 * styling imported with the 2014 corpus (infoboxes, navboxes, hatnotes). It is
 * part of the restore and must survive untouched. ResourceLoader loads the
 * per-skin sheet after Common.css, so everything here wins on ties and the
 * whole theme reverts by blanking one page.
 *
 * The palette is lifted from freecapitalists.org (assets/site.css): warm
 * parchment paper, near-black ink, maroon accent. Both sites are system-font
 * only, so nothing here loads a webfont.
 */

/* ==========================================================================
   1. Palette
   ========================================================================== */

/* Light. `html:root` rather than `:root` so these sit at the same specificity
   as Vector's own night-mode block and the mapping below can outrank it. */
html:root {
	--fc-paper: #f5f0e6;         /* page surround */
	--fc-paper-raised: #fffaf0;  /* the content sheet */
	--fc-paper-sunk: #f0e9db;    /* hovered rows, quiet boxes */
	--fc-neutral: #e7dcc8;       /* table headers, pressed buttons */
	--fc-ink: #1d1b18;
	--fc-ink-strong: #100f0d;
	--fc-muted: #686057;
	--fc-faint: #857b70;
	--fc-rule-soft: #ded3c0;
	--fc-rule: #cfc3b1;
	--fc-rule-strong: #a9947f;
	--fc-accent: #762d3b;
	--fc-accent-strong: #5d1f2c;
	--fc-accent-soft: #e9d7d8;
	--fc-on-accent: #fffaf3;
	--fc-visited: #6b4a52;
	/* Redlinks stay a separate hue from the maroon body link, or "this page
	   does not exist" stops reading as different from "this one does". */
	--fc-redlink: #b3421f;
	--fc-redlink-visited: #8d3a22;
	--fc-shadow: rgba(45, 35, 28, 0.16);
}

/* Dark, for the reader who picks it explicitly. */
html.skin-theme-clientpref-night:root {
	--fc-paper: #171614;
	--fc-paper-raised: #211f1c;
	--fc-paper-sunk: #2a2724;
	--fc-neutral: #322e2a;
	--fc-ink: #f0e9de;
	--fc-ink-strong: #fdf8f0;
	--fc-muted: #b8aea1;
	--fc-faint: #948a7d;
	--fc-rule-soft: #3b3630;
	--fc-rule: #50483f;
	--fc-rule-strong: #76695c;
	--fc-accent: #c97986;
	--fc-accent-strong: #e49aa6;
	--fc-accent-soft: #3b262b;
	--fc-on-accent: #1a1613;
	--fc-visited: #b58f9c;
	--fc-redlink: #e08a63;
	--fc-redlink-visited: #c07a58;
	--fc-shadow: rgba(0, 0, 0, 0.45);
}

/* Dark, for the reader on "Automatic" whose OS asks for it. Same values; the
   duplication is unavoidable because custom properties cannot be aliased
   across a media query boundary. */
@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os:root {
		--fc-paper: #171614;
		--fc-paper-raised: #211f1c;
		--fc-paper-sunk: #2a2724;
		--fc-neutral: #322e2a;
		--fc-ink: #f0e9de;
		--fc-ink-strong: #fdf8f0;
		--fc-muted: #b8aea1;
		--fc-faint: #948a7d;
		--fc-rule-soft: #3b3630;
		--fc-rule: #50483f;
		--fc-rule-strong: #76695c;
		--fc-accent: #c97986;
		--fc-accent-strong: #e49aa6;
		--fc-accent-soft: #3b262b;
		--fc-on-accent: #1a1613;
		--fc-visited: #b58f9c;
		--fc-redlink: #e08a63;
		--fc-redlink-visited: #c07a58;
		--fc-shadow: rgba(0, 0, 0, 0.45);
	}
}

/* ==========================================================================
   2. Codex token mapping
   --------------------------------------------------------------------------
   Vector 2022 paints itself almost entirely out of these custom properties, so
   remapping them restyles the skin without chasing individual selectors.

   All three selectors carry the mapping. Vector declares its night palette at
   `html.skin-theme-clientpref-night` (0,1,1); a bare `:root` (0,1,0) would lose
   to it, so each variant is spelled out at (0,2,1).
   ========================================================================== */

html:root,
html.skin-theme-clientpref-night:root,
html.skin-theme-clientpref-os:root {
	/* Surfaces */
	--background-color-base: var( --fc-paper-raised );
	--background-color-base-fixed: var( --fc-paper-raised );
	--background-color-neutral-subtle: var( --fc-paper );
	--background-color-neutral: var( --fc-neutral );
	--background-color-interactive-subtle: var( --fc-paper-sunk );
	--background-color-interactive: var( --fc-neutral );
	--background-color-disabled-subtle: var( --fc-paper-sunk );
	--background-color-disabled: var( --fc-neutral );
	--background-color-inverted: var( --fc-ink );
	--background-color-button-quiet--hover: var( --fc-paper-sunk );
	--background-color-button-quiet--active: var( --fc-neutral );
	--background-color-progressive: var( --fc-accent );
	--background-color-progressive--hover: var( --fc-accent-strong );
	--background-color-progressive--active: var( --fc-accent-strong );
	--background-color-progressive--focus: var( --fc-accent );
	--background-color-progressive-subtle: var( --fc-accent-soft );
	--background-color-input-binary--checked: var( --fc-accent );

	/* Text */
	--color-base: var( --fc-ink );
	--color-base--hover: var( --fc-accent );
	--color-base--subtle: var( --fc-muted );
	--color-emphasized: var( --fc-ink-strong );
	--color-subtle: var( --fc-muted );
	--color-placeholder: var( --fc-faint );
	--color-disabled: var( --fc-rule-strong );
	--color-inverted: var( --fc-on-accent );
	--color-inverted-fixed: var( --fc-on-accent );

	/* Links */
	--color-progressive: var( --fc-accent );
	--color-progressive--hover: var( --fc-accent-strong );
	--color-progressive--active: var( --fc-accent-strong );
	--color-progressive--focus: var( --fc-accent );
	--color-visited: var( --fc-visited );
	--color-link-red: var( --fc-redlink );
	--color-link-red--hover: var( --fc-redlink-visited );
	--color-link-red--active: var( --fc-redlink-visited );
	--color-link-red--visited: var( --fc-redlink-visited );
	--color-destructive: var( --fc-redlink );
	--color-destructive--hover: var( --fc-redlink-visited );
	--color-destructive--active: var( --fc-redlink-visited );
	--color-destructive--visited: var( --fc-redlink-visited );

	/* Borders */
	--border-color-base: var( --fc-rule-strong );
	--border-color-subtle: var( --fc-rule );
	--border-color-muted: var( --fc-rule-soft );
	--border-color-divider: var( --fc-rule );
	--border-color-interactive: var( --fc-rule-strong );
	--border-color-input--hover: var( --fc-rule-strong );
	--border-color-inverted: var( --fc-paper-raised );
	--border-color-disabled: var( --fc-rule );
	--border-color-progressive: var( --fc-accent );
	--border-color-progressive--hover: var( --fc-accent-strong );
	--border-color-progressive--active: var( --fc-accent-strong );
	--border-color-progressive--focus: var( --fc-accent );
	--border-color-input-binary--checked: var( --fc-accent );

	/* Focus and shadow */
	--outline-color-progressive--focus: var( --fc-accent );
	--box-shadow-color-base: var( --fc-shadow );
	--box-shadow-color-progressive--focus: var( --fc-accent );
	--box-shadow-color-progressive-selected: var( --fc-accent );
	--box-shadow-color-progressive-selected--hover: var( --fc-accent-strong );
	--box-shadow-color-progressive-selected--active: var( --fc-accent-strong );
}

/* Belt and braces. Vector resolves these from the tokens above, but the two
   surfaces that define the whole look are worth stating outright so a future
   skin refactor cannot quietly drop the page back to white. */
body {
	background-color: var( --fc-paper );
	color: var( --fc-ink );
}

.mw-page-container,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
	background-color: var( --fc-paper-raised );
}

/* Codex's neutral-weight button ships a literal #f8f9fa that the token remap
   above does not reach. Quiet and progressive buttons already follow the
   tokens, so they are excluded. */
.cdx-button:not( [ class*='--weight-quiet' ] ):not( [ class*='--weight-primary' ] ) {
	background-color: var( --fc-paper-sunk );
	border-color: var( --fc-rule-strong );
	color: var( --fc-ink );
}

/* The "Powered by MediaWiki" badge. Vector sets its plate with an id selector
   and a literal, which outranks the rule above. */
#footer-icons a {
	background-color: var( --fc-paper-sunk );
}

/* ==========================================================================
   3. Typography
   --------------------------------------------------------------------------
   freecapitalists.org: Georgia for display, Segoe UI / Arial for running text.
   No webfonts on either site.
   ========================================================================== */

body,
.mw-body-content,
.vector-body,
input,
select,
textarea,
button {
	font-family: "Segoe UI", Arial, sans-serif;
}

/* Vector already serifs h1/h2 via Linux Libertine; this pins the family to
   Georgia and carries it down to h3/h4, which ship as bold sans. */
#firstHeading,
.vector-page-titlebar h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-family: Georgia, "Times New Roman", serif;
}

/* The reference site sets display headings in normal weight with tight
   tracking. Left at h1/h2 — h3 and below carry structural meaning on a wiki
   and need to stay bold. */
#firstHeading,
.vector-page-titlebar h1,
.mw-body-content h1,
.mw-body-content h2 {
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   4. Reconciling the 2014 MediaWiki:Common.css
   --------------------------------------------------------------------------
   The imported sheet hardcodes a grey-and-blue Wikipedia palette from 2013
   (#f9f9f9 infoboxes, #f1f5fc sideboxes, #ccccff navbox titles, #aaa borders,
   and a flat `color: black` that is unreadable in night mode). Selectors below
   mirror the originals exactly, so equal specificity plus later load order is
   enough — Common.css itself is never edited.
   ========================================================================== */

.infobox {
	background-color: var( --fc-paper-sunk );
	border-color: var( --fc-rule );
	color: var( --fc-ink );
}

.infobox td,
.infobox th,
.infobox.bordered td,
.infobox.bordered th,
.infobox.geography td,
.infobox.geography th {
	border-color: var( --fc-rule );
}

.sidebox,
.tablebox {
	background: var( --fc-paper-sunk );
	border-color: var( --fc-rule );
}

table.navbox {
	border-color: var( --fc-rule );
}

.navbox,
.navbox-subgroup {
	background: var( --fc-paper-raised );
}

.navbox-list {
	border-color: var( --fc-paper-raised ); /* must match the navbox background */
}

.navbox-title,
table.navbox th {
	background: var( --fc-accent-soft );
	color: var( --fc-ink );
}

.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
	background: var( --fc-neutral );
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background: var( --fc-paper-sunk );
}

.navbox-even {
	background: var( --fc-paper-sunk );
}

div.NavFrame {
	border-color: var( --fc-rule );
}

div.NavFrame div.NavHead {
	background: var( --fc-paper-sunk );
	color: var( --fc-ink );
}

div.NavPic {
	background-color: var( --fc-paper-raised );
}

/* Reference list. The original picks `snow` on `whitesmoke` with darkslategray
   text — three named colours that are all wrong on parchment and unreadable
   in night mode. */
.references {
	background-color: var( --fc-paper-raised );
	border-color: var( --fc-rule );
	color: var( --fc-ink );
}

/* The pale blue flash when you follow a footnote back and forth. */
ol.references > li:target,
sup.reference:target,
ol.references li:target,
span.citation:target {
	background-color: var( --fc-accent-soft );
}

.quote {
	color: var( --fc-muted );
}

/* Message and header/footer boxes. */
.messagebox,
.template-documentation,
.headertemplate,
.headertemplate-journal,
.footertemplate {
	background-color: var( --fc-paper-sunk );
	border-color: var( --fc-rule );
}

table.prettytable {
	background-color: var( --fc-paper-raised );
	border-color: var( --fc-rule );
}

table.prettytable th {
	background-color: var( --fc-neutral );
}

/* ==========================================================================
   5. Main Page
   --------------------------------------------------------------------------
   The 2014 portal carried its blue palette in inline `style=` attributes,
   which no stylesheet can override and night mode cannot read. The wikitext
   now names these classes instead — scripts/main-page.wiki is the source of
   truth for it, and apply_theme.sh pushes the two together.
   ========================================================================== */

.fc-mp-intro {
	background-color: var( --fc-paper-sunk );
	border: 1px solid var( --fc-rule-strong );
}

.fc-mp-title {
	font-family: Georgia, "Times New Roman", serif;
}

.fc-mp-rule {
	height: 1px;
	border: 0;
	background-color: var( --fc-rule-strong );
	color: var( --fc-rule-strong );
}

.fc-mp-aside {
	border-left: 1px solid var( --fc-rule-strong );
}

.fc-mp-panel {
	background-color: var( --fc-paper );
	border: 1px solid var( --fc-rule );
}

/* Inner tables sit on the panel and must not repaint it. */
.fc-mp-panel-body {
	background-color: transparent;
}

.fc-mp-head {
	background-color: var( --fc-accent-soft );
	border: 1px solid var( --fc-rule );
	color: var( --fc-ink );
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
}

/* Boxes whose whole point is a loud fixed colour keep it, but the text on them
   is pinned dark — inheriting --fc-ink would put cream on saffron at night. */
.noticebox,
.infobox.standard-talk,
.messagebox.standard-talk,
.quality0,
.quality1,
.quality2,
.quality3,
.quality4 {
	color: #1d1b18;
}

/* ==========================================================================
   6. Archive nav bar
   --------------------------------------------------------------------------
   The primary nav of freecapitalists.org, reproduced on the wiki so the
   reference layer always points back at the texts. The markup is
   scripts/sitenotice.wiki, pushed to [[MediaWiki:Sitenotice]]; Vector 2022
   renders that message at the top of .mw-body, above the page title.

   The links are wikitext external links because raw HTML is off, so each one
   arrives as <a class="external text"> carrying Vector's little outbound
   icon. Suppressing it is the only reason this section needs selectors as
   specific as it does — .mw-parser-output a.external is (0,2,1) and this
   sheet loads after Common.css and the skin, so an equal-specificity rule
   wins on order.
   ========================================================================== */

#siteNotice {
	margin: 0 0 1.15rem;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Vector wraps the message in these; both carry margins that would show as a
   gap between the bar's border and the rules above and below it. */
#siteNotice .mw-dismissable-notice-body,
#siteNotice #localNotice,
#siteNotice .mw-parser-output > p {
	margin: 0;
}

.fc-archivebar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
	padding: 0.5rem 0.85rem;
	background-color: var( --fc-paper-sunk );
	border: 1px solid var( --fc-rule );
	border-radius: 2px;
}

.fc-archivebar__brand {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	white-space: nowrap;
}

.fc-archivebar__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.15rem;
	font-weight: 650;
}

/* The icon is a background-image plus right padding on a.external. Both have
   to go, or every label carries a blank 13px gutter where the glyph was. */
.fc-archivebar a.external,
.fc-archivebar a.external:visited {
	background-image: none;
	padding-right: 0;
	text-decoration: none;
	color: var( --fc-accent );
}

.fc-archivebar a.external:hover,
.fc-archivebar a.external:focus {
	color: var( --fc-accent-strong );
	text-decoration: underline;
}

/* Narrow screens: the two halves stack, and the brand stops being a title
   sitting opposite a menu, so it needs a rule of its own to stay readable. */
@media screen and ( max-width: 40em ) {
	.fc-archivebar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}

	.fc-archivebar__brand {
		padding-bottom: 0.35rem;
		border-bottom: 1px solid var( --fc-rule );
		width: 100%;
	}
}

/* The printed page is not a place to navigate to another website. */
@media print {
	#siteNotice {
		display: none;
	}
}