MediaWiki:Common.css

Current answers. Practical procedures. Reliable reference.
Revision as of 02:28, 7 August 2026 by Sythan ✓ (talk | contribs) (Fix: also override display:none on the actual main-menu-landmark nav element (previous fix only restored grid space, not content visibility))
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, 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';
	}
	/* This is the rule that actually matters: Vector's own compiled CSS
	   has `.vector-feature-main-menu-pinned-disabled
	   .vector-main-menu-container .vector-main-menu-landmark { display:
	   none }` -- the grid-column fix above reserves the LAYOUT space, but
	   without this override the actual nav content sitting in that space
	   is still individually hidden. Confirmed by reading the real
	   compiled CSS (load.php output), not just the .less source -- the
	   first attempt at this fix missed this rule entirely and visibly
	   did nothing but the header border. */
	.vector-feature-main-menu-pinned-disabled .vector-main-menu-container .vector-main-menu-landmark {
		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;
	}
}
Retrieved from "https://edfieldmanual.com/index.php?title=MediaWiki:Common.css&oldid=78"