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.

/* RuneBR look: the same style as the landing page (site/index.html at playrunebr.com). Neutral
   dark grey, system font, blue links, a blue primary button and thin grey borders. Everyone is in
   Vector's night mode (LocalSettings.php sets it as the default); the values below replace its
   colours. Pages that never load site CSS (login, preferences) keep Vector's own dark palette. */

html.skin-theme-clientpref-night {
	--background-color-base: #1b1b1b;
	--background-color-neutral: #2c2c2c;
	--background-color-neutral-subtle: #242424;
	--background-color-interactive: #2c2c2c;
	--background-color-interactive-subtle: #242424;
	--background-color-progressive: #2f6fd6;
	--background-color-progressive--hover: #3b7be2;
	--background-color-progressive--active: #2861bd;
	--background-color-progressive--focus: #2f6fd6;
	--background-color-progressive-subtle: #1f2a3d;
	--color-base: #e6e6e6;
	--color-emphasized: #f5f5f5;
	--color-subtle: #9a9a9a;
	--color-base--subtle: #9a9a9a;
	--color-progressive: #8ab4f8;
	--color-progressive--hover: #a8c7fa;
	--color-progressive--active: #6f9ef0;
	--color-visited: #b39ddb;
	--border-color-base: #3a3a3a;
	--border-color-subtle: #3a3a3a;
	--border-color-muted: #303030;
	--border-color-interactive: #555;
	--border-color-progressive: #2f6fd6;
	--border-color-progressive--focus: #8ab4f8;
	--box-shadow-color-progressive--focus: #8ab4f8;
}

/* The palette is the look, so the day/night switch in the Appearance menu is hidden. */
#skin-client-prefs-skin-theme {
	display: none;
}

/* The landing page's type: system font everywhere, headings bold rather than serif. */
body,
.mw-logo-wordmark,
.mw-body h1.firstHeading,
.mw-body-content h1,
.mw-body-content h2 {
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Vector inverts the logo in night mode (skin-invert); the wordmark is already light text. */
html.skin-theme-clientpref-night .mw-logo-container.skin-invert {
	filter: none;
}
.mw-logo-wordmark {
	color: #e6e6e6;
	font-size: 1.25em;
	font-weight: 700;
	white-space: nowrap;
}
.mw-body h1.firstHeading,
.mw-body-content h1,
.mw-body-content h2 {
	font-weight: 700;
}

/* ---- Main Page: laid out like the landing page ------------------------------------------------ */
.page-Main_Page #firstHeading {
	display: none;
}
.page-Main_Page .mw-body-content h2 {
	font-size: 1.1rem;
	border-bottom: 0;
	border-top: 1px solid #3a3a3a;
	padding-top: 16px;
	margin: 20px 0 8px;
}

.rbr-head {
	margin: 8px 0 24px;
}
.rbr-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: #e6e6e6;
}
.rbr-tagline {
	color: #9a9a9a;
	margin: 4px 0 0;
}
.rbr-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}
.mw-parser-output .rbr-btn a,
.mw-parser-output .rbr-btn a.external {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	background: none;
	color: #e6e6e6;
	text-decoration: none;
}
.mw-parser-output .rbr-btn a.external::after {
	content: none;
	display: none;
}
.mw-parser-output .rbr-btn a:hover {
	filter: brightness( 1.1 );
	text-decoration: none;
}
.mw-parser-output .rbr-btn-primary a,
.mw-parser-output .rbr-btn-primary a.external {
	background: #2f6fd6;
	border-color: #2f6fd6;
	color: #fff;
}

/* The data page cards: the landing page's Player of the Week tile. */
.rbr-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 10px;
	margin: 8px 0 12px;
}
.rbr-card {
	background: #242424;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	padding: 10px 12px;
}
.rbr-card-title {
	font-weight: 600;
}
.rbr-card-text {
	color: #9a9a9a;
	font-size: 0.85rem;
}

/* Skill links as small bordered buttons. */
.mw-parser-output .rbr-chips a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: 4px 10px;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
}
.mw-parser-output .rbr-chips a:hover {
	border-color: #555;
	text-decoration: none;
}