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
SECTION 1 — FOUNDATION
Light Archive Theme:
- parchment/off-white page
- dark readable article text
- dark Vault panels remain
- neon headers retained
========================================================== */
/* ---------- FONTS ---------- */
@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');
/* ==========================================================
VAULT COLOUR SYSTEM
========================================================== */
:root {
/* Page */
--void:#f4f0e6;
--paper:#f4f0e6;
--ink:#24202b;
/* Dark Vault panels */
--panel:#160f2b;
--panel-edge:#2a1c4a;
/* Accent colours */
--acid:#a6ff3f;
--violet:#b34aff;
--amber:#ffcf4d;
/* Secondary text */
--muted:#756b8f;
/* Legacy compatibility */
--cream:#24202b;
}
/* ==========================================================
BASE PAGE
========================================================== */
body {
background-color:var(--paper) !important;
color:var(--ink) !important;
font-family:'Space Grotesk', sans-serif !important;
}
#content,
.mw-body,
#bodyContent {
background-color:var(--paper) !important;
color:var(--ink) !important;
border:none !important;
}
/* ==========================================================
HEADINGS
========================================================== */
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:'Bungee', system-ui, sans-serif !important;
color:var(--ink) !important;
text-shadow:none;
letter-spacing:.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;
margin-top:1.8rem;
}
h3,
h4 {
color:var(--ink) !important;
}
/* ==========================================================
LINKS
========================================================== */
a {
color:#1769aa;
}
a:visited {
color:#67518d;
}
a:hover {
color:#4b8f00 !important;
}
a.new {
color:#c0392b !important;
}
/* ==========================================================
TABLES
========================================================== */
table.wikitable {
background:var(--panel) !important;
color:#f2ecd9 !important;
border:1px solid var(--panel-edge) !important;
}
table.wikitable th {
background:var(--panel-edge) !important;
color:var(--acid) !important;
font-family:'JetBrains Mono', monospace !important;
}
table.wikitable td {
color:#f2ecd9 !important;
border-color:var(--panel-edge) !important;
}
/* ==========================================================
ARTICLE BODY COLOUR FIXES
========================================================== */
.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(--ink) !important;
}
/* Article links */
.mw-parser-output a {
color:#1769aa !important;
}
.mw-parser-output a:visited {
color:#67518d !important;
}
.mw-parser-output a:hover {
color:#4b8f00 !important;
}
.mw-parser-output a.new {
color:#c0392b !important;
}
/* Article headings */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
color:var(--ink) !important;
}
.mw-parser-output h2 {
color:var(--violet) !important;
}
/* ==========================================================
CATEGORY FOOTER
========================================================== */
#catlinks,
.catlinks {
background:var(--panel);
border:1px solid var(--panel-edge);
color:#f2ecd9 !important;
}
#catlinks a,
.catlinks a {
color:var(--acid) !important;
}
/* ==========================================================
THE VAULT — CUSTOM COMPONENTS
SECTION 2 — VAULT UI ELEMENTS
Dark archive panels retained against light background
========================================================== */
/* ==========================================================
HERO / LANDING COMPONENTS
========================================================== */
.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,.15),
var(--panel) 70%
);
margin-bottom:1.8rem;
}
.vault-hero .vault-title {
font-family:'Bungee',system-ui,sans-serif;
font-size:2.2rem;
color:#f2ecd9;
text-shadow:0 0 20px rgba(166,255,63,.4);
margin:0;
}
.vault-hero .vault-title span {
color:var(--acid);
}
.vault-hero .vault-tagline {
font-family:'JetBrains Mono',monospace;
font-size:.75rem;
letter-spacing:.2em;
text-transform:uppercase;
color:#c5b9dd;
}
/* ==========================================================
PORTAL / FEATURE CARDS
========================================================== */
.vault-portal-grid,
.vault-case-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1rem;
margin:1.5rem 0;
}
.vault-portal-card,
.vault-case-card {
background:var(--panel);
border:1px solid var(--panel-edge);
border-radius:8px;
padding:1.3rem;
text-decoration:none !important;
display:block;
transition:.2s;
}
.vault-portal-card:hover,
.vault-case-card:hover {
border-color:var(--acid);
transform:translateY(-3px);
}
.vault-portal-card .label {
font-family:'Bungee',system-ui,sans-serif;
color:var(--acid) !important;
}
.vault-portal-card .desc,
.vault-case-card-excerpt {
color:#c5b9dd !important;
font-size:.82rem;
line-height:1.5;
}
.vault-case-card-title {
font-family:'Bungee',system-ui,sans-serif;
color:#f2ecd9 !important;
}
/* ==========================================================
FEATURE / NOTICE / DID YOU KNOW
========================================================== */
.vault-featured,
.vault-dyk,
.vault-notice {
background:var(--panel);
border:1px solid var(--panel-edge);
border-radius:6px;
padding:1.4rem 1.6rem;
margin:1.5rem 0;
color:#f2ecd9;
}
.vault-featured {
border-left:4px solid var(--acid);
}
.vault-featured .vault-eyebrow,
.vault-notice-header {
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.16em;
color:var(--amber);
}
.vault-featured-title,
.vault-notice-title {
font-family:'Bungee',system-ui,sans-serif;
color:#f2ecd9;
}
.vault-dyk li {
color:#f2ecd9;
}
/* ==========================================================
INFOBOX
========================================================== */
.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-header {
background:var(--panel-edge);
font-family:'Bungee',system-ui,sans-serif;
font-size:.9rem;
text-align:center;
padding:.7rem;
color:var(--acid);
}
.vault-infobox-image {
text-align:center;
}
.vault-infobox-image img {
max-width:100%;
height:auto;
}
.vault-infobox-caption {
color:#c5b9dd;
font-size:.75rem;
padding:.5rem;
}
.vault-infobox-row {
display:grid;
grid-template-columns:95px 1fr;
gap:.5rem;
padding:.5rem .8rem;
border-top:1px solid var(--panel-edge);
font-size:.8rem;
}
.vault-infobox-k {
font-family:'JetBrains Mono',monospace;
font-size:.66rem;
color:#9d8fc2;
text-transform:uppercase;
}
.vault-infobox-v {
color:#f2ecd9;
}
.vault-infobox-status {
color:var(--acid);
font-weight:bold;
}
/* ==========================================================
FULL WIDTH ASSESSMENTS
========================================================== */
.vault-assessment,
.vault-evidence,
.vault-profile-assessment,
.vault-location-assessment,
.vault-work-assessment {
width:100%;
margin:1.5rem 0;
background:var(--panel);
border:1px solid var(--panel-edge);
border-radius:8px;
overflow:hidden;
color:#f2ecd9;
}
.vault-assessment-header,
.vault-evidence-header,
.vault-profile-header,
.vault-location-header,
.vault-work-header {
background:var(--panel-edge);
color:var(--acid);
font-family:'Bungee',system-ui,sans-serif;
text-align:center;
padding:.8rem;
letter-spacing:.05em;
}
/* Assessment grids */
.vault-assessment-grid,
.vault-evidence-grid,
.vault-profile-grid,
.vault-location-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
}
.vault-assessment-item,
.vault-evidence-item,
.vault-profile-item,
.vault-location-item {
padding:1rem;
border-top:1px solid var(--panel-edge);
}
.vault-assessment-label,
.vault-evidence-title,
.vault-profile-label,
.vault-location-label,
.vault-work-k {
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.08em;
color:#9d8fc2;
}
.vault-assessment-value,
.vault-evidence-value,
.vault-profile-value,
.vault-location-value,
.vault-work-v {
color:#f2ecd9;
line-height:1.5;
}
.vault-assessment-status {
color:var(--acid);
font-weight:bold;
}
/* ==========================================================
CATEGORY COLOURS
========================================================== */
.vault-assessment-cryptid .vault-assessment-header {
background:#355834;
}
.vault-assessment-ufo .vault-assessment-header {
background:#1d3f73;
}
.vault-assessment-haunting .vault-assessment-header {
background:#5b3b70;
}
.vault-assessment-parapsychology .vault-assessment-header {
background:#a36a00;
}
.vault-assessment-forteana .vault-assessment-header {
background:#444;
}
.vault-assessment-folklore .vault-assessment-header {
background:#765438;
}
/* ==========================================================
EVIDENCE SCORE
========================================================== */
.vault-evidence-score {
text-align:center;
font-size:2.2rem;
color:var(--amber);
padding:1rem;
}
.vault-evidence-label {
text-align:center;
color:#f2ecd9;
padding-bottom:1rem;
}
/* ==========================================================
BUTTONS / TAGS
========================================================== */
.vault-btn {
display:inline-block;
font-family:'JetBrains Mono',monospace;
font-size:.78rem;
text-transform:uppercase;
padding:.7rem 1.3rem;
border-radius:4px;
margin:.3rem;
text-decoration:none !important;
}
.vault-btn-primary {
background:var(--acid) !important;
color:#0a0714 !important;
}
.vault-btn-vault {
background:var(--violet) !important;
color:#f2ecd9 !important;
}
.vault-tag {
display:inline-block;
background:rgba(179,74,255,.12);
border:1px solid rgba(179,74,255,.35);
color:var(--violet) !important;
padding:.25rem .7rem;
border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
text-transform:uppercase;
}
/* ==========================================================
THE VAULT — MEDIAWIKI FIXES & RESPONSIVE
SECTION 3 — SYSTEM OVERRIDES
========================================================== */
/* ==========================================================
EDIT PAGE FIXES
========================================================== */
#editform,
#editform label,
#editform p,
#editform .editOptions,
.mw-editTools,
#editpage-copywarn,
.editnotice-area {
color: #222 !important;
}
#editform a,
#editpage-copywarn a,
.editnotice-area a {
color: #1769aa !important;
}
#editform a:visited,
#editpage-copywarn a:visited {
color: #6b5b95 !important;
}
/* OOUI components used by MediaWiki */
.oo-ui-fieldLayout-header,
.oo-ui-labelElement,
.oo-ui-labelElement-label,
.oo-ui-labelWidget.oo-ui-inline-help {
color: #222 !important;
}
/* ==========================================================
MESSAGE BOXES
========================================================== */
/*
MediaWiki system messages retain their own styling.
Keep these readable rather than forcing Vault colours.
*/
.cdx-message {
color:#202122 !important;
}
/* ==========================================================
CATEGORY PAGES
========================================================== */
#mw-pages,
.mw-category,
.mw-category-group {
color:#222 !important;
}
#mw-pages a,
.mw-category a,
.mw-category-group a {
color:#1769aa !important;
}
#mw-pages a:visited,
.mw-category a:visited,
.mw-category-group a:visited {
color:#6b5b95 !important;
}
#mw-pages a:hover,
.mw-category a:hover,
.mw-category-group a:hover {
color:#4b8f00 !important;
}
/* ==========================================================
REFERENCE LISTS
========================================================== */
.reflist {
color:#222 !important;
}
.reflist a {
color:#1769aa !important;
}
.reflist a:hover {
color:#4b8f00 !important;
}
/* ==========================================================
REFERENCE TARGET HIGHLIGHT
========================================================== */
#mw-content-text li:target,
#mw-content-text li:target * {
background-color:#fff8dc !important;
color:#222 !important;
}
#mw-content-text li:target i {
color:#666 !important;
}
/* ==========================================================
CATEGORY FOOTER
========================================================== */
#catlinks,
.catlinks {
background:#f6f1e4 !important;
border:1px solid #d8cdb5 !important;
color:#555 !important;
}
#catlinks a,
.catlinks a {
color:#6f32a8 !important;
}
/* ==========================================================
RECENT CHANGES / LOG CLEANUP
Keeps:
- date/time
- page title
Removes:
- usernames
- byte changes
- tags
- comments
========================================================== */
.mw-changeslist-links,
.mw-changeslist-separator,
.mw-changeslist-user,
.mw-usertoollinks,
.mw-changeslist-bytes,
.mw-plusminus-pos,
.mw-plusminus-neg,
.comment,
.mw-tag-markers,
.history-deleted {
display:none !important;
}
/* ==========================================================
STATS COMPONENTS
========================================================== */
.vault-stats-bar {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:1rem;
background:#f6f1e4;
border:1px solid #d8cdb5;
border-radius:8px;
padding:1.4rem;
margin:1.8rem 0;
text-align:center;
}
.vault-stats-bar-item {
display:flex;
flex-direction:column;
}
.vault-stats-bar-number {
font-family:'Bungee',system-ui,sans-serif;
font-size:1.8rem;
color:#6f32a8;
}
.vault-stats-bar-label {
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
letter-spacing:.08em;
text-transform:uppercase;
color:#777;
}
.vault-stats-bar-item a {
display:flex;
flex-direction:column;
text-decoration:none !important;
}
.vault-stats-bar-item a:hover .vault-stats-bar-number {
color:#4b8f00;
}
.vault-stats-bar-item a:hover .vault-stats-bar-label {
color:#6f32a8;
}
/* ==========================================================
TABLE OVERRIDE FOR LIGHT THEME
========================================================== */
table.wikitable {
background:#fff !important;
color:#222 !important;
border-color:#d8cdb5 !important;
}
table.wikitable th {
background:var(--panel-edge) !important;
color:var(--acid) !important;
}
table.wikitable td {
background:#fff !important;
color:#222 !important;
}
/* ==========================================================
RESPONSIVE DESIGN
========================================================== */
@media screen and (max-width:700px) {
.vault-infobox {
float:none;
width:100%;
margin:1rem 0;
}
.vault-assessment-grid,
.vault-evidence-grid,
.vault-profile-grid,
.vault-location-grid {
grid-template-columns:1fr;
}
.vault-profile-item,
.vault-location-item {
border-right:none;
border-bottom:1px solid #d8cdb5;
}
.vault-hero .vault-title {
font-size:1.7rem;
}
.vault-case-grid,
.vault-portal-grid {
grid-template-columns:1fr;
}
}
/* ==========================================================
FINAL LIGHT THEME ARTICLE OVERRIDES
These catch MediaWiki areas that ignore body colours
========================================================== */
.mw-body,
#content,
#bodyContent,
.mw-parser-output {
background:#faf7ef !important;
}
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output blockquote,
.mw-parser-output td,
.mw-parser-output th {
color:#222 !important;
}
.mw-parser-output blockquote {
border-left:4px solid #b34aff;
padding-left:1rem;
color:#444 !important;
}
/* Preserve Vault headers */
.vault-infobox-header,
.vault-assessment-header,
.vault-profile-header,
.vault-location-header,
.vault-work-header,
.vault-evidence-header {
color:var(--acid) !important;
}
/* ==========================================================
END OF THE VAULT COMMON.CSS
========================================================== */
