MediaWiki:Common.css

Current answers. Practical procedures. Reliable reference.
Revision as of 05:06, 7 August 2026 by Sythan ✓ (talk | contribs) (Permanent dark theme)
Jump to navigation Jump to search

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.
/* EDFM site-wide styling.
 * Original CSS written for this project — no code or assets copied from
 * runescape.wiki or any other site. Visual direction (warm gold/amber
 * accent, classic always-visible left sidebar, bordered header, right-
 * floated infoboxes) is loosely inspired by that genre of game wiki, per
 * operator request, but implemented from scratch.
 *
 * SKIN NOTE (2026-08-07): the site uses Vector "legacy" (2011), not
 * Vector 2022, specifically because of this layout request. Vector 2022's
 * left sidebar can only ever be "pinned" (persistently visible) for
 * logged-in users — its own FeatureManager hard-codes a REQUIREMENT_
 * LOGGED_IN check for the pinned-menu feature (skins/Vector/includes/
 * FeatureManagement/FeatureManagerFactory.php), so no LocalSettings
 * config or CSS override can make it persistent for anonymous visitors;
 * the actual menu content isn't even server-rendered into the sidebar
 * DOM location for them, so there's nothing for CSS to reveal. This was
 * verified the hard way (screenshot testing 3 different approaches)
 * before switching skins — see docs/content-style-guide.md for the full
 * account. Vector legacy has no such restriction (no pin/unpin system at
 * all -- the sidebar is unconditionally always rendered), which is
 * exactly the classic layout that was asked for, at the cost of legacy's
 * weaker built-in mobile responsiveness -- patched below.
 *
 * DARK MODE NOTE (2026-08-07): permanent dark theme, per operator
 * request. Vector legacy has no light/dark toggle at all (that's a
 * Vector-2022-only feature) so this is just the site's one and only
 * colour scheme, not a preference -- no toggle exists or is planned.
 *
 * Keep this file simple. If it grows much further, split it into
 * per-purpose TemplateStyles sheets instead of one large Common.css.
 */

/* --- Accent colour tokens (kept for anything that reads the CSS custom
   properties, harmless elsewhere). Dark-mode-appropriate amber/gold --
   lighter than the light-mode amber this project started with, for
   contrast against dark backgrounds. */
:root {
	--color-progressive: #e3a53d;
	--color-progressive--hover: #edbf6b;
	--color-progressive--active: #f3d08c;
	--color-progressive--focus: #e3a53d;
	--background-color-progressive: #e3a53d;
	--background-color-progressive--hover: #edbf6b;
	--background-color-progressive--active: #f3d08c;
	--border-color-progressive: #e3a53d;
	--border-color-progressive--hover: #edbf6b;
	--border-color-progressive--active: #f3d08c;
}

/* --- Base page colours ------------------------------------------------ */
html, body {
	background-color: #14171a;
	color: #d7dade;
}
body.mediawiki {
	color: #d7dade;
}
h1, h2, h3, h4, h5, h6 {
	color: #f0f2f4;
	border-color: #33383e;
}
#firstHeading {
	color: #f0f2f4;
}
hr {
	background-color: #33383e;
	border-color: #33383e;
}
a { color: #e3a53d; }
a:visited { color: #c9a26a; }
a:hover { color: #edbf6b; }
a.new, .new a { color: #e07a7a; }
a.external { color: #e3a53d; }

/* --- Content/body panel ------------------------------------------------ */
.mw-body,
.parsoid-body {
	background-color: #1a1d21;
	color: #d7dade;
	border-color: #33383e;
}
#content {
	background-color: #1a1d21;
}

/* --- Header / masthead -------------------------------------------------- */
#mw-page-base {
	background-color: #14171a;
	background-image: none;
}
#mw-head-base {
	background-color: #14171a;
}
#p-personal,
.vector-header-container {
	border-bottom: 3px solid #e3a53d;
}
#mw-head-base {
	border-bottom: 3px solid #e3a53d;
}
#p-personal a {
	color: #e3a53d;
}
#left-navigation .selected a,
#left-navigation li a {
	background-color: transparent;
	color: #d7dade;
}
#left-navigation li.selected a {
	background-color: #1a1d21;
	color: #f0f2f4;
}
.vector-search-box-inner input,
#searchInput {
	background-color: #20242a;
	color: #eef1f4;
	border: 1px solid #3a4046;
}
#searchInput::placeholder {
	color: #8a9099;
}

/* --- Sidebar ------------------------------------------------------------ */
#mw-panel {
	background-color: #14171a;
}
#mw-panel .portal .body,
#mw-panel .portal ul {
	border-color: #2a2f35;
}
#mw-panel .portal a {
	color: #d7dade;
}
#mw-panel .portal a:hover {
	color: #e3a53d;
}
.vector-menu-heading {
	color: #e3a53d;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8em;
}

/* --- Tables (wikitables, and Special: pages' tables) ------------------- */
table.wikitable,
table.mw-datatable {
	background-color: #1c2024;
	color: #d7dade;
	border-color: #3a4046;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
	background-color: #262b31;
	color: #eef1f4;
	border-color: #3a4046;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
	border-color: #33383e;
}

/* --- Footer -------------------------------------------------------------- */
.mw-footer {
	color: #9aa0a6;
	border-color: #2a2f35;
}
.mw-footer a {
	color: #e3a53d;
}
#footer-icons img {
	background: #eef1f4;
	border-radius: 2px;
}

/* --- Code / preformatted text (syntaxhighlight uses its own Pygments
   theme, set separately via $wgPygmentsStyle in LocalSettings.php; this
   covers plain <pre>/<code> that isn't Pygments-highlighted). */
pre, code, .mw-code {
	background-color: #20242a;
	color: #d7dade;
	border-color: #3a4046;
}

/* --- 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 #33383e;
		border-bottom: 1px solid #33383e;
	}
	.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.
   Deliberately plain -- no glow, no gradients, no 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 #e3a53d;
	background: #1c2024;
	color: #d7dade;
	font-size: 0.9em;
}
.edfm-infobox-title {
	background: #e3a53d;
	color: #14171a;
	font-weight: 700;
	text-align: center;
	padding: 0.4em 0.6em;
}
.edfm-infobox-image {
	text-align: center;
	padding: 0.6em;
	border-bottom: 1px solid #33383e;
}
.edfm-infobox-row {
	display: flex;
	border-bottom: 1px solid #2a2f35;
	padding: 0.35em 0.6em;
}
.edfm-infobox-row:last-child {
	border-bottom: none;
}
.edfm-infobox-label {
	font-weight: 700;
	width: 40%;
	flex-shrink: 0;
}
.edfm-infobox-value {
	width: 60%;
}
@media ( max-width: 640px ) {
	.edfm-infobox {
		float: none;
		width: auto;
		margin: 1em 0;
	}
}
Retrieved from "https://edfieldmanual.com/index.php?title=MediaWiki:Common.css&oldid=85"