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, clean dark-mode-capable game-reference layout, right-floated
 * infoboxes) is loosely inspired by that genre of game wiki, per operator
 * request, but implemented from scratch against Vector 2022's own
 * documented CSS custom properties (see
 * skins/Vector/resources/skins.vector.styles/CSSCustomProperties.less in
 * MediaWiki core) — not by copying anyone else's stylesheet.
 *
 * 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 Vector 2022's default Wikipedia-blue "progressive"
   token family to the amber already used across EDFM's editorial templates
   (see Template:EDFM style/styles.css). This single override cascades to
   links, active tab underlines, button focus rings, etc. site-wide. */
: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;
}

html.skin-theme-clientpref-night {
	--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;
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--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;
	}
}

/* --- 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: var( --color-progressive );
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8em;
}

/* --- Persistent left sidebar (added 2026-08-07, layout request: "look a bit
   like runescape.wiki" -- specifically their classic always-visible left
   nav + header, not their colours/art). Vector 2022's own default behaviour
   collapses the sidebar to a single column (hidden behind the hamburger
   toggle) whenever a page has a short table of contents and the visitor
   hasn't manually pinned the menu -- most of our pages are short right now,
   so that was the *default* experience, not an edge case. This restores the
   two-column grid Vector already uses for the "pinned" state, applied
   unconditionally at desktop widths, so the sidebar reads as permanent
   navigation the way runescape.wiki's does.
   Values mirror Vector's own variables.less (@width-column-desktop = 196px
   / 16px browser default = 12.25rem; @min-width-breakpoint-desktop = 1120px)
   -- not guessed, read directly from the installed skin's source so this
   stays visually consistent with Vector's own spacing. Scoped to desktop
   widths only; mobile's separate collapsed layout is untouched. */
@media ( min-width: 1120px ) {
	.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner,
	.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner {
		grid-template-columns: 12.25rem minmax( 0, 1fr );
		grid-template-areas:
			'siteNotice siteNotice'
			'columnStart pageContent'
			'footer footer';
	}
	.vector-feature-main-menu-pinned-disabled .vector-column-start {
		display: block;
	}
	/* The pin/unpin toggle becomes a no-op once the sidebar is always
	   shown at this width -- hide it rather than leave a button that
	   looks interactive but does nothing. The TOC and page-tools pin
	   toggles are untouched (only the main-menu one is targeted). */
	#vector-main-menu-pinned-container .vector-pinnable-header-toggle-button {
		display: none;
	}
}

/* --- Header: a light, permanent accent band under the header bar, closer to
   a "branded masthead" feel than Vector's default plain white header. Kept
   restrained -- no background image, no gradient, just a bottom border in
   the site accent colour. */
.vector-header-container {
	border-bottom: 3px solid var( --color-progressive );
}

/* --- 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 var( --border-color-progressive, #a15a00 );
	background: var( --background-color-interactive-subtle, #f8f4ee );
	font-size: 0.9em;
}
.edfm-infobox-title {
	background: var( --color-progressive );
	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 var( --border-color-base, #a2a9b1 );
}
.edfm-infobox-row {
	display: flex;
	border-bottom: 1px solid var( --border-color-subtle, #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;
	}
}