MediaWiki:Common.css: Difference between revisions

Revision as of 22:02, 27 June 2026

:root {
	--mb-bg:        #12161d;
	--mb-bg-2:      #171c25;
	--mb-panel:     #1c232e;
	--mb-panel-2:   #232c39;
	--mb-border:    #36424f;
	--mb-border-2:  #2a333f;
	--mb-gold:      #efc14e;
	--mb-gold-soft: #f0cd6a;
	--mb-gold-dim:  #b8902f;
	--mb-blue:      #00a1d6;
	--mb-text:      #e7e9ec;
	--mb-text-dim:  #aab3bf;
	--mb-link:      #f0cd6a;
	--mb-link-hover:#ffe49a;
	--mb-link-red:  #e0736b;
}

html, body { background: var(--mb-bg); }
.mw-page-container { background: var(--mb-bg); color: var(--mb-text); }
.mw-body, .vector-body, .mw-content-container { color: var(--mb-text); }
body { font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }

.mw-body {
	background: var(--mb-panel);
	border: 1px solid var(--mb-border-2);
	border-radius: 6px;
	padding: 1.25em 1.6em 1.6em;
}

.mw-body-content { color: var(--mb-text); font-size: 0.96rem; line-height: 1.65; }

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4,
.mw-page-title, .vector-page-titlebar h1 {
	font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
	color: #fff;
	font-weight: 700;
}
.mw-body h1, .mw-body h2 {
	border-bottom: 2px solid var(--mb-gold-dim);
	padding-bottom: 0.2em;
}
.mw-body h3 { color: var(--mb-gold-soft); }
.firstHeading {
	font-family: 'PT Serif', Georgia, serif;
	color: #fff;
	border-bottom: 2px solid var(--mb-gold);
}

.mw-body a, .mw-body a.external { color: var(--mb-link); }
.mw-body a:hover { color: var(--mb-link-hover); text-decoration: underline; }
.mw-body a.new { color: var(--mb-link-red); }
.mw-body a.external::after { filter: hue-rotate(170deg) brightness(1.6); }

.vector-header-container, .mw-header,
.vector-header, .vector-sticky-header {
	background: var(--mb-bg-2);
	border-bottom: 1px solid var(--mb-gold-dim);
}
.vector-main-menu-container, .vector-page-tools-landmark,
.vector-pinned-container, .vector-toc, .mw-portlet {
	background: transparent;
	color: var(--mb-text-dim);
}
.vector-toc, .vector-pinnable-element {
	background: var(--mb-bg-2);
	border: 1px solid var(--mb-border-2);
	border-radius: 6px;
}
.mw-footer, .vector-footer {
	background: var(--mb-bg-2);
	border-top: 1px solid var(--mb-gold-dim);
	color: var(--mb-text-dim);
}
.cdx-text-input__input, .cdx-search-input input {
	background: var(--mb-panel);
	color: var(--mb-text);
	border-color: var(--mb-border);
}

.mw-body .wikitable {
	background: var(--mb-panel);
	color: var(--mb-text);
	border: 1px solid var(--mb-border);
	border-collapse: collapse;
}
.mw-body .wikitable > * > tr > th {
	background: var(--mb-panel-2);
	color: var(--mb-gold-soft);
	border: 1px solid var(--mb-border);
	font-family: 'PT Serif', Georgia, serif;
}
.mw-body .wikitable > * > tr > td {
	border: 1px solid var(--mb-border);
}
.mw-body .wikitable > * > tr:nth-child(even) > td { background: var(--mb-bg-2); }

.infobox {
	float: right;
	clear: right;
	width: 270px;
	margin: 0 0 1em 1.4em;
	background: var(--mb-bg-2);
	border: 1px solid var(--mb-gold-dim);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	font-size: 0.86rem;
	overflow: hidden;
}
.infobox .infobox-title {
	background: linear-gradient(180deg, var(--mb-panel-2), var(--mb-bg));
	color: var(--mb-gold);
	font-family: 'PT Serif', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
	padding: 0.5em 0.6em;
	border-bottom: 2px solid var(--mb-gold-dim);
}
.infobox .infobox-image { text-align: center; padding: 0.7em 0.5em 0.3em; }
.infobox .infobox-image img { max-width: 100%; height: auto; }
.infobox .infobox-caption {
	text-align: center;
	color: var(--mb-text-dim);
	font-style: italic;
	padding: 0 0.6em 0.5em;
	font-size: 0.8rem;
}
.infobox table { width: 100%; border-collapse: collapse; }
.infobox .infobox-header {
	background: var(--mb-panel-2);
	color: var(--mb-gold-soft);
	font-family: 'PT Serif', Georgia, serif;
	text-align: center;
	padding: 0.35em 0.6em;
	border-top: 1px solid var(--mb-border);
}
.infobox th.infobox-label {
	text-align: left;
	color: var(--mb-text-dim);
	font-weight: 600;
	width: 42%;
	padding: 0.3em 0.6em;
	vertical-align: top;
	border-top: 1px solid var(--mb-border-2);
}
.infobox td.infobox-data {
	padding: 0.3em 0.6em;
	vertical-align: top;
	border-top: 1px solid var(--mb-border-2);
}

.navbox {
	clear: both;
	width: 100%;
	margin: 1.2em 0 0;
	background: var(--mb-bg-2);
	border: 1px solid var(--mb-gold-dim);
	border-radius: 6px;
	font-size: 0.85rem;
	border-collapse: collapse;
	overflow: hidden;
}
.navbox .navbox-title {
	background: linear-gradient(180deg, var(--mb-panel-2), var(--mb-bg));
	color: var(--mb-gold);
	font-family: 'PT Serif', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	padding: 0.45em 0.6em;
	border-bottom: 2px solid var(--mb-gold-dim);
}
.navbox .navbox-group {
	background: var(--mb-panel-2);
	color: var(--mb-gold-soft);
	font-family: 'PT Serif', Georgia, serif;
	text-align: right;
	white-space: nowrap;
	padding: 0.4em 0.7em;
	width: 1%;
	vertical-align: middle;
	border: 1px solid var(--mb-border);
}
.navbox .navbox-list {
	padding: 0.4em 0.7em;
	border: 1px solid var(--mb-border-2);
}
.navbox .navbox-list a { margin-right: 0.2em; }

.messagebox {
	border: 1px solid var(--mb-gold-dim);
	border-left: 4px solid var(--mb-gold);
	background: var(--mb-bg-2);
	padding: 0.7em 1em;
	margin: 0.8em 0;
	border-radius: 4px;
}

.mb-hero {
	text-align: center;
	background:
		radial-gradient(120% 120% at 50% -10%, rgba(239,193,78,0.12), transparent 60%),
		var(--mb-bg-2);
	border: 1px solid var(--mb-gold-dim);
	border-radius: 8px;
	padding: 1.6em 1em;
	margin-bottom: 1.2em;
}
.mb-hero .mb-hero-title {
	font-family: 'PT Serif', Georgia, serif;
	font-size: 2.3rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--mb-gold);
	text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.mb-hero .mb-hero-tagline { color: var(--mb-text-dim); font-size: 1.05rem; }

.mb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}
@media (max-width: 720px) { .mb-grid { grid-template-columns: 1fr; } }

.mb-card {
	background: var(--mb-bg-2);
	border: 1px solid var(--mb-border);
	border-top: 3px solid var(--mb-gold);
	border-radius: 6px;
	padding: 0.4em 1em 1em;
}
.mb-card > h2 {
	font-family: 'PT Serif', Georgia, serif;
	color: var(--mb-gold-soft);
	border-bottom: 1px solid var(--mb-border);
	margin-top: 0.5em;
}

.mistbound-hero {
	border: 1px solid var(--mb-gold-dim);
	background: var(--mb-bg-2);
	padding: 1em;
	border-radius: 6px;
}