MediaWiki:Common.css

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;
}

/* --- 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;
	}
}