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;
}