Jump to content

MediaWiki:Vector-2022.css

From The Austrian Economics Wiki, the global repository of classical-liberal thought
Revision as of 06:01, 23 July 2026 by DavidVeksler (talk | contribs) (Site theme, from scripts/theme.css)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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 );
}

/* ==========================================================================
   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 );
}
Retrieved from "https://wiki.freecapitalists.org/index.php?title=MediaWiki:Vector-2022.css&oldid=24005"