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 palette is the brand's (client/public/brand/make-banners.ps1): dark brown
   #2b2620, border #675a4a, gold #f0d9a0, tan #c7ae7e, headings in Arial Black. 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: #2b2620;
	--background-color-neutral: #3a332b;
	--background-color-neutral-subtle: #332d26;
	--background-color-interactive: #3a332b;
	--background-color-interactive-subtle: #332d26;
	--background-color-inverted: #f0d9a0;
	--background-color-progressive: #d8b86e;
	--background-color-progressive--hover: #f0d9a0;
	--background-color-progressive--active: #c7ae7e;
	--background-color-progressive--focus: #f0d9a0;
	--background-color-progressive-subtle: #463c2c;
	--background-color-notice-subtle: #3a332b;
	--color-base: #e8dfcb;
	--color-emphasized: #f6efdd;
	--color-subtle: #b5a78c;
	--color-base--subtle: #b5a78c;
	--color-inverted: #2b2620;
	--color-progressive: #f0d9a0;
	--color-progressive--hover: #fbe9bf;
	--color-progressive--active: #c7ae7e;
	--color-visited: #c7ae7e;
	--color-destructive: #f08a6c;
	--color-notice: #f6efdd;
	--border-color-base: #675a4a;
	--border-color-subtle: #54493c;
	--border-color-muted: #423a30;
	--border-color-interactive: #8a7a64;
	--border-color-inverted: #2b2620;
	--border-color-progressive: #d8b86e;
	--border-color-progressive--hover: #f0d9a0;
	--border-color-progressive--active: #c7ae7e;
	--border-color-progressive--focus: #f0d9a0;
	--border-color-notice: #675a4a;
	--box-shadow-color-progressive--focus: #f0d9a0;
}

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

/* Wordmark and headings in the brand's heavy type. */
.mw-logo-wordmark,
.mw-body h1.firstHeading,
.mw-body-content h1,
.mw-body-content h2 {
	font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
	font-weight: 900;
}
.mw-logo-wordmark {
	color: #f0d9a0;
	font-size: 1.4em;
	white-space: nowrap;
}
.mw-body h1.firstHeading,
.mw-body-content h1,
.mw-body-content h2 {
	color: #f0d9a0;
	border-bottom-color: #675a4a;
}
.mw-body-content h3 {
	color: #c7ae7e;
}

/* ---- Main Page ---------------------------------------------------------------------------- */
.page-Main_Page #firstHeading {
	display: none;
}

/* The banner: the forum banner's layout, the R icon beside the wordmark and tagline. */
.rbr-hero {
	display: flex;
	align-items: center;
	gap: 28px;
	background: #2b2620;
	border: 3px solid #675a4a;
	padding: 24px 32px;
	margin: 0 0 1.2em;
}
.rbr-hero-icon {
	flex: none;
	width: 128px;
	height: 128px;
	background: url(/runebr-assets/icon-192.png) center / contain no-repeat;
}
.rbr-hero-title {
	font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
	font-weight: 900;
	font-size: 64px;
	line-height: 1;
	color: #f0d9a0;
	text-shadow: 3px 3px 0 #000;
}
.rbr-hero-tag {
	font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
	font-weight: 900;
	font-size: 15px;
	letter-spacing: 3px;
	color: #c7ae7e;
	margin: 10px 0 16px;
}
.mw-parser-output .rbr-btn a,
.mw-parser-output .rbr-btn a.external {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 6px 16px;
	border: 1px solid #675a4a;
	background: #3a332b;
	color: #f0d9a0;
	font-weight: bold;
	text-decoration: none;
}
.mw-parser-output .rbr-btn a.external::after {
	content: none;
	display: none;
}
.mw-parser-output .rbr-btn a:hover {
	background: #463c2c;
	text-decoration: none;
}
.mw-parser-output .rbr-btn-primary a,
.mw-parser-output .rbr-btn-primary a.external {
	background: #f0d9a0;
	border-color: #f0d9a0;
	color: #2b2620;
}
.mw-parser-output .rbr-btn-primary a:hover {
	background: #fbe9bf;
}

/* The data page cards. */
.rbr-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
	gap: 12px;
	margin: 0.6em 0 1em;
}
.rbr-card {
	background: #332d26;
	border: 1px solid #675a4a;
	border-top: 3px solid #c7ae7e;
	padding: 12px 14px;
}
.rbr-card-title {
	font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
	font-weight: 900;
	font-size: 1.15em;
	margin-bottom: 4px;
}
.rbr-card-text {
	color: #b5a78c;
	font-size: 0.92em;
}

/* Skill links as chips. */
.mw-parser-output .rbr-chips a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: 3px 10px;
	background: #332d26;
	border: 1px solid #54493c;
	border-radius: 3px;
}
.mw-parser-output .rbr-chips a:hover {
	border-color: #c7ae7e;
	text-decoration: none;
}

@media ( max-width: 640px ) {
	.mw-logo-wordmark {
		font-size: 1.05em;
	}
	.rbr-hero {
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 20px 16px;
	}
	.rbr-hero-icon {
		width: 88px;
		height: 88px;
	}
	.rbr-hero-title {
		font-size: 34px;
	}
	.rbr-hero-tag {
		font-size: 12px;
		letter-spacing: 2px;
	}
}