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.
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES — MediaWiki:Common.css
Paste this entire file into MediaWiki:Common.css
(Special:MyLanguage/MediaWiki:Common.css, or search "Common.css")
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
--void:#0a0714;
--panel:#160f2b;
--panel-edge:#2a1c4a;
--acid:#a6ff3f;
--violet:#b34aff;
--cream:#f2ecd9;
--amber:#ffcf4d;
--muted:#9d8fc2;
}
/* ---------- BASE PAGE ---------- */
body{
background-color: var(--void) !important;
color: var(--cream) !important;
font-family: 'Space Grotesk', sans-serif !important;
}
#content, .mw-body, #bodyContent {
background-color: var(--void) !important;
color: var(--cream) !important;
border: none !important;
}
/* ---------- HEADINGS ---------- */
h1, h2, h3, h4, .firstHeading, .mw-first-heading {
font-family: 'Bungee', system-ui, sans-serif !important;
color: var(--cream) !important;
text-shadow: 0 0 16px rgba(166,255,63,0.25);
letter-spacing: 0.02em;
}
h1.firstHeading, .mw-first-heading {
border-bottom: 2px solid var(--panel-edge) !important;
padding-bottom: .5rem;
}
h2 {
border-bottom: 1px solid var(--panel-edge) !important;
color: var(--violet) !important;
text-shadow: none;
margin-top: 1.8rem;
}
/* ---------- LINKS ---------- */
a {
color: #8fd9ff;
}
a:visited {
color: var(--muted);
}
a:hover {
color: var(--acid) !important;
}
a.new {
color: #ff6161 !important; /* red links stay clearly visible against dark bg */
}
/* ---------- SIDEBAR / NAVIGATION ----------
Cosmos uses its own rail/header structure, not Vector's
#mw-panel sidebar — base colours for these are set via
LocalSettings.php config variables instead (see
LocalSettings-Cosmos-colours.php). Fine per-element tweaks
for Cosmos specifically live in MediaWiki:Cosmos.css. */
/* ---------- TOP BAR / SEARCH ----------
Cosmos's search box styling is handled in MediaWiki:Cosmos.css
since its markup differs from Vector's #p-search. */
/* ---------- TABLES / WIKITABLES ---------- */
table.wikitable {
background-color: var(--panel) !important;
color: var(--cream) !important;
border: 1px solid var(--panel-edge) !important;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var(--panel-edge) !important;
color: var(--acid) !important;
font-family: 'JetBrains Mono', monospace !important;
letter-spacing: 0.04em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color: var(--panel-edge) !important;
}
/* ---------- CATEGORY BADGES / FOOTER ---------- */
#catlinks, .catlinks {
background-color: var(--panel) !important;
border: 1px solid var(--panel-edge) !important;
color: var(--muted) !important;
}
#catlinks a, .catlinks a {
color: var(--violet) !important;
}
/* ---------- VAULT CUSTOM COMPONENTS (used by templates) ---------- */
.vault-hero {
text-align: center;
padding: 2rem 1rem;
border: 1px solid var(--panel-edge);
border-radius: 10px;
background: radial-gradient(ellipse at 50% 0%, rgba(179,74,255,0.15) 0%, var(--panel) 70%);
margin-bottom: 1.8rem;
}
.vault-hero .vault-title {
font-family: 'Bungee', system-ui, sans-serif;
font-size: 2.2rem;
color: var(--cream);
text-shadow: 0 0 20px rgba(166,255,63,0.4);
margin: 0;
}
.vault-hero .vault-title span { color: var(--acid); }
.vault-hero .vault-tagline {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-top: .6rem;
}
.vault-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.vault-portal-card {
background: var(--panel);
border: 1px solid var(--panel-edge);
border-radius: 8px;
padding: 1.3rem;
text-decoration: none;
display: block;
transition: 0.2s;
}
.vault-portal-card:hover {
border-color: var(--acid);
transform: translateY(-3px);
}
.vault-portal-card .icon { font-size: 1.6rem; }
.vault-portal-card .label {
font-family: 'Bungee', system-ui, sans-serif;
font-size: 0.95rem;
color: var(--acid) !important;
margin: 0.5rem 0 0.4rem;
display: block;
}
.vault-portal-card .desc {
font-size: 0.82rem;
color: var(--muted);
line-height: 1.5;
}
.vault-featured {
background: var(--panel);
border: 1px solid var(--panel-edge);
border-left: 4px solid var(--acid);
border-radius: 6px;
padding: 1.4rem 1.6rem;
margin: 1.5rem 0;
}
.vault-featured .vault-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--amber);
display: block;
margin-bottom: 0.5rem;
}
.vault-featured .vault-featured-title {
font-family: 'Bungee', system-ui, sans-serif;
font-size: 1.3rem;
color: var(--cream);
margin: 0 0 0.6rem;
}
.vault-dyk {
background: var(--panel);
border: 1px solid var(--panel-edge);
border-radius: 6px;
padding: 1.2rem 1.6rem;
margin: 1.5rem 0;
}
.vault-dyk ul { margin: 0.4rem 0 0 1.2rem; padding: 0; }
.vault-dyk li { margin-bottom: 0.5rem; color: var(--cream); opacity: 0.9; }
.vault-infobox {
float: right;
width: 280px;
margin: 0 0 1rem 1.5rem;
background: var(--panel);
border: 1px solid var(--panel-edge);
border-radius: 6px;
overflow: hidden;
}
.vault-infobox .vault-infobox-header {
background: var(--panel-edge);
font-family: 'Bungee', system-ui, sans-serif;
font-size: 0.9rem;
text-align: center;
padding: 0.7rem;
color: var(--acid);
}
.vault-infobox .vault-infobox-row {
display: grid;
grid-template-columns: 95px 1fr;
gap: 0.5rem;
padding: 0.5rem 0.8rem;
border-top: 1px solid var(--panel-edge);
font-size: 0.8rem;
}
.vault-infobox .vault-infobox-k {
font-family: 'JetBrains Mono', monospace;
color: var(--muted);
font-size: 0.66rem;
letter-spacing: 0.03em;
}
.vault-infobox .vault-infobox-v { color: var(--cream); }
.vault-infobox .vault-infobox-status { color: var(--acid); font-weight: bold; }
.vault-cta-strip {
text-align: center;
background: var(--panel);
border: 1px solid var(--panel-edge);
border-radius: 8px;
padding: 1.6rem;
margin: 1.8rem 0;
}
.vault-cta-strip .vault-btn {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.7rem 1.3rem;
border-radius: 4px;
margin: 0.3rem;
font-weight: bold;
text-decoration: none !important;
}
.vault-btn-primary { background: var(--acid) !important; color: var(--void) !important; }
.vault-btn-vault { background: var(--violet) !important; color: var(--cream) !important; }
.vault-btn-outline { background: transparent !important; color: var(--cream) !important; border: 1px solid var(--panel-edge); }
.vault-tag {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(179,74,255,0.12);
color: var(--violet) !important;
border: 1px solid rgba(179,74,255,0.35);
padding: 0.25rem 0.7rem;
border-radius: 999px;
margin: 0.2rem 0.3rem 0.2rem 0;
text-decoration: none !important;
}
.vault-tag:hover { background: rgba(179,74,255,0.25); }
.vault-stats-footer {
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: var(--muted);
padding: 1rem 0;
border-top: 1px solid var(--panel-edge);
margin-top: 1.5rem;
}
/* ==========================================================
THE VAULT — CONTRAST FIXES
WHY THIS IS NEEDED:
Cosmos sets text colour directly on specific containers
rather than letting it inherit from <body>, and several
distinct systems are involved:
1. .mw-parser-output / #mw-content-text — the article body.
2. #editform and related edit-page chrome (summary field
wrapper, edit-page notices, copyright warning).
3. OOUI widgets — the edit page's checkboxes ("minor edit",
"watch this page") and field labels are rendered via
MediaWiki's OOUI component library, which ships its own
hardcoded colours (#000 / #222 / #D5D4D4) on classes like
.oo-ui-labelElement-label.
4. Codex message boxes (.cdx-message) — notices, warnings,
and errors. These always render on their own light
background regardless of skin, and ship readable dark
text (#202122) by default — they must NOT be forced to
cream like the rest of the page, or light text ends up
on a light background instead of dark-on-dark.
Because body{color:var(--cream) !important} never reaches
any of these, each needs its own explicit rule. The .vault-*
custom components above already set their own colours
directly and are more specific selectors, so none of this
touches them.
========================================================== */
/* --- Article body text --- */
.mw-parser-output,
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output dt,
.mw-parser-output blockquote,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output caption,
#mw-content-text {
color: var(--cream) !important;
}
.mw-parser-output a {
color: #8fd9ff !important;
}
.mw-parser-output a:visited {
color: var(--muted) !important;
}
.mw-parser-output a:hover {
color: var(--acid) !important;
}
.mw-parser-output a.new {
color: #ff6161 !important;
}
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
color: var(--cream) !important;
}
.mw-parser-output h2 {
color: var(--violet) !important;
}
/* --- Edit page chrome: summary field, options, notices --- */
#editform,
#editform label,
#editform p,
#editform .editOptions,
.mw-editTools,
#editpage-copywarn,
.editnotice-area {
color: var(--cream) !important;
}
#editform a,
#editpage-copywarn a,
.editnotice-area a {
color: #8fd9ff !important;
}
#editform a:visited,
#editpage-copywarn a:visited {
color: var(--muted) !important;
}
/* --- OOUI widgets on the edit page (checkboxes, field labels) --- */
.oo-ui-fieldLayout-header,
.oo-ui-labelElement,
.oo-ui-labelElement-label,
.oo-ui-labelWidget.oo-ui-inline-help,
.editOptions {
color: var(--cream) !important;
}
/* --- Codex message boxes (notices/warnings/errors) ---
Deliberately kept dark-on-light, not forced to cream. */
.cdx-message {
color: #202122 !important;
}