MediaWiki:Common.css: Difference between revisions

/* 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.
 *
 * Keep this file simple. If it grows much further, split it into
 * per-purpose TemplateStyles sheets instead of one large Common.css.
 */

/* --- Accent colour: shift the default Wikipedia-blue "progressive" token
   family to the amber already used across EDFM's editorial templates (see
   Template:EDFM style/styles.css). Cascades to links, active-tab
   underlines, button focus rings, etc. site-wide, in both skins. */
:root {
	--color-progressive: #a15a00;
	--color-progressive--hover: #7a4500;
	--color-progressive--active: #5c3400;
	--color-progressive--focus: #a15a00;
	--background-color-progressive: #a15a00;
	--background-color-progressive--hover: #7a4500;
	--background-color-progressive--active: #5c3400;
	--border-color-progressive: #a15a00;
	--border-color-progressive--hover: #7a4500;
	--border-color-progressive--active: #5c3400;
}
a { color: #a15a00; }
a:visited { color: #8a5a2e; }
a:hover { color: #7a4500; }

/* --- Sidebar section headings: bolder, wider letter-spacing, accent-tinted
   -- a clean "reference manual nav" feel instead of Vector's plain grey. */
.vector-menu-heading {
	color: #a15a00;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8em;
}

/* --- Header: a permanent accent band under the header/tabs area, closer to
   a "branded masthead" feel than a plain white header. Kept restrained --
   no background image, no gradient, just a bottom border. */
#p-personal,
.vector-header-container {
	border-bottom: 3px solid #a15a00;
}
#mw-head-base {
	border-bottom: 3px solid #a15a00;
}

/* --- Mobile: Vector legacy has no built-in responsive breakpoint (unlike
   Vector 2022) -- its sidebar is absolutely positioned at a fixed width
   unconditionally, which crams everything at narrow widths. Below 800px,
   drop the sidebar back into normal document flow (full-width, stacked
   above the content) instead of leaving it cramped and tiny. Not a fancy
   collapsible hamburger menu -- just genuinely readable/tappable, which is
   the actual requirement. */
@media ( max-width: 800px ) {
	#mw-panel {
		position: static;
		width: auto;
		padding: 0.5em 1em;
	}
	.mw-body,
	#mw-head-base,
	#left-navigation,
	#mw-data-after-content,
	.mw-footer {
		margin-left: 0;
	}
	#p-personal {
		position: static;
		text-align: right;
		padding: 0.25em 1em;
	}
	#p-personal ul {
		padding-left: 0;
	}
}

/* --- 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 #a15a00;
	background: #f8f4ee;
	font-size: 0.9em;
}
.edfm-infobox-title {
	background: #a15a00;
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 0.4em 0.6em;
}
.edfm-infobox-image {
	text-align: center;
	padding: 0.6em;
	border-bottom: 1px solid #a2a9b1;
}
.edfm-infobox-row {
	display: flex;
	border-bottom: 1px solid #eaecf0;
	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;
	}
}