MediaWiki:Common.css: Difference between revisions

/* EDFM site-wide styling.
 * Original CSS written for this project — no code or assets copied from
 * runescape.wiki, Elite Dangerous, or any other site/game. Visual
 * direction (classic always-visible left sidebar, bordered header,
 * right-floated infoboxes, permanent dark theme, orange/cyan "high-tech
 * instrument panel" accents) is inspired by that genre, per operator
 * request, but implemented from scratch: no copied HUD elements, no
 * Frontier logo/branding, no proprietary fonts (the monospace stack
 * below lists common system/open fonts with a generic `monospace`
 * fallback — no font files are shipped or embedded), no glow/scanline
 * animation effects, no fake cockpit widgets.
 *
 * SKIN NOTE (2026-08-07): the site uses Vector "legacy" (2011), not
 * Vector 2022 — see the "Why Vector legacy" note in
 * docs/content-style-guide.md (Vector 2022 hard-restricts its pinned
 * sidebar to logged-in users; legacy has no such restriction).
 *
 * COLOUR NOTE (2026-08-07): permanent dark theme with an Elite-Dangerous-
 * evoking orange-on-near-black palette, cyan as a secondary/status
 * accent. Vector legacy has no light/dark toggle at all, so this is the
 * site's one and only colour scheme, not a preference.
 *
 * Keep this file simple. If it grows much further, split it into
 * per-purpose TemplateStyles sheets instead of one large Common.css.
 */

/* --- Fonts: a "technical readout" monospace stack for UI chrome (nav,
   headings, table/infobox headers) -- common system/open fonts only,
   nothing shipped or embedded, generic monospace as the final fallback.
   Body/article paragraph text stays in a normal readable sans-serif on
   purpose (see .mw-body below) -- long-form reading in monospace would
   hurt readability, which stays a hard requirement even with a more
   technical visual language elsewhere. */
:root {
	--edfm-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
	--edfm-orange: #ff8c1a;
	--edfm-orange-hover: #ffab5c;
	--edfm-orange-active: #ffc98f;
	--edfm-cyan: #3ecbd6;
	--color-progressive: #ff8c1a;
	--color-progressive--hover: #ffab5c;
	--color-progressive--active: #ffc98f;
	--color-progressive--focus: #ff8c1a;
	--background-color-progressive: #ff8c1a;
	--background-color-progressive--hover: #ffab5c;
	--background-color-progressive--active: #ffc98f;
	--border-color-progressive: #ff8c1a;
	--border-color-progressive--hover: #ffab5c;
	--border-color-progressive--active: #ffc98f;
}

/* --- Base page colours ------------------------------------------------ */
html, body {
	background-color: #0d0f11;
	color: #d7dade;
}
body.mediawiki {
	color: #d7dade;
}
h1, h2, h3, h4, h5, h6 {
	color: #f2f4f6;
	border-color: #2b2f33;
}
/* !important justified here: MediaWiki core's mediawiki.skinning module
   sets heading colour with equal-specificity plain-tag selectors and
   kept winning in testing despite this stylesheet loading later --
   rather than keep chasing exact cascade/bundling order, force it. This
   is a correctness/contrast fix, not decorative. */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-heading1, .mw-heading2, .mw-heading3, .mw-heading4, .mw-heading5, .mw-heading6,
h1, h2, h3, h4, h5, h6 {
	color: #f2f4f6 !important;
	border-color: #2b2f33 !important;
	font-family: var( --edfm-mono );
	letter-spacing: 0.01em;
}
/* A restrained "instrument label" bracket treatment on major section
   headings only (h2) -- plain characters via ::before/::after, no
   images, no glow, no animation. */
.mw-body h2::before {
	content: '// ';
	color: var( --edfm-orange );
	font-weight: 400;
}
#firstHeading {
	color: #f2f4f6 !important;
	font-family: var( --edfm-mono );
}
hr {
	background-color: #2b2f33;
	border-color: #2b2f33;
}
a { color: var( --edfm-orange ); transition: color 0.1s ease; }
a:visited { color: #d9974f; }
a:hover { color: var( --edfm-orange-hover ); }
a.new, .new a { color: #e07a7a; }
a.external { color: var( --edfm-orange ); }

/* --- Content/body panel ------------------------------------------------ */
.mw-body,
.parsoid-body {
	background-color: #131619;
	color: #d7dade;
	border-color: #2b2f33;
	font-family: sans-serif; /* readable body text -- not monospace */
}
#content {
	background-color: #131619;
}

/* --- Header / masthead -------------------------------------------------- */
#mw-page-base {
	background-color: #0d0f11;
	background-image: none;
}
#mw-head-base {
	background-color: #0d0f11;
}
#p-personal,
.vector-header-container {
	border-bottom: 3px solid var( --edfm-orange );
}
#mw-head-base {
	border-bottom: 3px solid var( --edfm-orange );
}
#p-personal a {
	color: var( --edfm-orange );
	font-family: var( --edfm-mono );
}
#left-navigation li a {
	background-color: transparent;
	color: #d7dade;
	font-family: var( --edfm-mono );
	letter-spacing: 0.01em;
}
#left-navigation li.selected a {
	background-color: #131619;
	color: #f2f4f6;
}
.vector-search-box-inner input,
#searchInput {
	background-color: #16191c;
	color: #eef1f4;
	border: 1px solid #33383e;
	font-family: var( --edfm-mono );
}
#searchInput::placeholder {
	color: #767c84;
}

/* --- Sidebar ------------------------------------------------------------ */
#mw-panel {
	background-color: #0d0f11;
}
#mw-panel .portal .body,
#mw-panel .portal ul {
	border-color: #23272b;
}
#mw-panel .portal a {
	color: #d7dade;
}
#mw-panel .portal a:hover {
	color: var( --edfm-orange );
}
.vector-menu-heading {
	color: var( --edfm-orange );
	font-weight: 700;
	font-family: var( --edfm-mono );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.78em;
}

/* --- Tables (wikitables, and Special: pages' tables) ------------------- */
table.wikitable,
table.mw-datatable {
	background-color: #16191c;
	color: #d7dade;
	border-color: #33383e;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
	background-color: #1e2226;
	color: #f2f4f6;
	border-color: #33383e;
	font-family: var( --edfm-mono );
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.85em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
	border-color: #2b2f33;
}

/* --- Footer -------------------------------------------------------------- */
.mw-footer,
.mw-footer li,
#footer-info,
#footer-info li {
	color: #9aa0a6 !important;
	border-color: #23272b;
}
.mw-footer a {
	color: var( --edfm-orange ) !important;
}
#footer-icons img {
	background: #eef1f4;
	border-radius: 2px;
}

/* --- Misc MediaWiki UI chrome that ships with light backgrounds by
   default: category box at the bottom of articles, image thumbnails,
   collapsible table-of-contents box. */
.catlinks,
#toc,
.toc {
	background-color: #16191c !important;
	border-color: #2b2f33 !important;
	color: #d7dade;
}
div.thumbinner {
	background-color: #16191c;
	border-color: #2b2f33;
}
.thumbimage {
	background-color: #131619;
	border-color: #2b2f33;
}

/* --- Code / preformatted text (syntaxhighlight uses its own Pygments
   theme, set via $wgPygmentsStyle in LocalSettings.php; this covers
   plain <pre>/<code> that isn't Pygments-highlighted). */
pre, code, .mw-code {
	background-color: #16191c;
	color: #d7dade;
	border-color: #33383e;
	font-family: var( --edfm-mono );
}

/* --- Mobile: Vector legacy has NO built-in responsive breakpoint at all
   (unlike Vector 2022) -- its entire header region (#mw-head, tabs, search,
   personal tools/login) is built with absolute positioning and floats that
   all assume a fixed-width sidebar reserving 10-11em on the left, AND the
   page's actual DOM order is content-then-navigation-then-footer (the
   absolute positioning was doing double duty: both moving the header
   visually to the top AND compensating for that DOM order). Simply
   removing the positioning stacks things in DOM order, which reads oddly
   on a phone (article text, then the nav/sidebar, then the footer).
   Confirmed the actual DOM structure directly (not guessed): <body>'s
   real children are #mw-page-base, #mw-head-base, #content, #mw-navigation
   (which itself contains #mw-head then #mw-panel, already in the right
   relative order), #footer. Since all four major regions are direct
   children of <body>, flexbox `order` on <body> can reorder them properly
   without needing to touch the DOM itself.
   Result: header/search/tabs, then sidebar nav, then content, then
   footer -- a plain stacked mobile layout, not a collapsible hamburger
   menu, but a correct and readable order. */
@media ( max-width: 800px ) {
	body {
		display: flex;
		flex-direction: column;
	}
	/* #mw-head-base ships with `margin-top: -5em` in Vector legacy's own CSS
	   -- a trick to sit it behind the absolutely-positioned header. Now that
	   the header is a normal flex sibling, that negative margin drags
	   everything after it upward. Neutralize both decorative strips. */
	#mw-page-base,
	#mw-head-base {
		order: 0;
		height: 0;
		margin: 0;
		min-height: 0;
	}
	#mw-navigation {
		order: 1;
	}
	#content {
		order: 2;
	}
	.mw-footer {
		order: 3;
	}

	#mw-head {
		position: static;
		width: auto;
	}
	#left-navigation,
	#right-navigation {
		float: none;
		margin: 0;
		width: auto;
		clear: both;
	}
	#left-navigation {
		margin-top: 0;
	}
	#p-personal {
		position: static;
		text-align: right;
		padding: 0.5em 1em;
		margin: 0;
		right: auto;
		top: auto;
	}
	#p-personal ul {
		padding-left: 0;
	}
	.vector-search-box {
		float: none;
		margin: 0.5em 1em;
		display: block;
	}
	.vector-search-box-inner {
		width: auto;
		max-width: none;
	}
	#mw-panel {
		position: static;
		width: auto;
		padding: 0.5em 1em;
		float: none;
		border-top: 1px solid #2b2f33;
		border-bottom: 1px solid #2b2f33;
	}
	.mw-body,
	#mw-data-after-content,
	.mw-footer {
		margin-left: 0;
	}
	.mw-body {
		margin-top: 0;
		border-width: 0;
		padding: 1em;
	}
}

/* --- Generic infobox: a right-floated, bordered reference box, the kind of
   structural element most game-reference wikis use for at-a-glance specs.
   A clipped top-right corner + monospace title give it a restrained
   "instrument panel" feel without glow, gradients, or game-specific
   chrome. See Template:Infobox for usage. */
.edfm-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1.2em 1.2em;
	border: 1px solid var( --edfm-orange );
	background: #16191c;
	color: #d7dade;
	font-size: 0.9em;
}
.edfm-infobox-title {
	background: var( --edfm-orange );
	color: #14171a;
	font-weight: 700;
	font-family: var( --edfm-mono );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.4em 0.6em;
	clip-path: polygon( 0 0, calc( 100% - 14px ) 0, 100% 14px, 100% 100%, 0 100% );
}
.edfm-infobox-image {
	text-align: center;
	padding: 0.6em;
	border-bottom: 1px solid #2b2f33;
}
.edfm-infobox-row {
	display: flex;
	border-bottom: 1px solid #23272b;
	padding: 0.35em 0.6em;
}
.edfm-infobox-row:last-child {
	border-bottom: none;
}
.edfm-infobox-label {
	font-weight: 700;
	font-family: var( --edfm-mono );
	font-size: 0.85em;
	width: 40%;
	flex-shrink: 0;
	color: var( --edfm-cyan );
}
.edfm-infobox-value {
	width: 60%;
}
@media ( max-width: 640px ) {
	.edfm-infobox {
		float: none;
		width: auto;
		margin: 1em 0;
	}
}