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 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. Below
   800px this needs a genuinely different stacked layout, not just the
   sidebar -- verified via screenshot that patching only the sidebar left
   the header tabs/search/login visually overlapping and unreadable.
   This is not a fancy collapsible hamburger menu -- just a plain stacked
   mobile layout: logo/login on top, then search, then tabs, then sidebar,
   then content. Readable and tappable, which is the actual requirement;
   not a polished mobile redesign. */
@media ( max-width: 800px ) {
	#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;
		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;
	}
	.mw-body,
	#mw-head-base,
	#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 #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;
	}
}