Revision as of 22:14, 29 July 2026 by GaryJJSpate (talk | contribs)
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
PART 1 — FOUNDATION
Clean MediaWiki light theme with Vault branding
========================================================== */
/* ==========================================================
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 {
--vault-purple:#6f32a8;
--vault-violet:#b34aff;
--vault-green:#5c8f00;
--vault-acid:#a6ff3f;
--vault-gold:#c28b00;
--vault-paper:#faf9f5;
--vault-panel:#ffffff;
--vault-border:#d8d2c5;
--vault-text:#202122;
--vault-muted:#666666;
--vault-blue:#1769aa;
--vault-red:#b32424;
}
/* ==========================================================
BASE MEDIAWIKI PAGE
========================================================== */
body {
background:var(--vault-paper);
color:var(--vault-text);
font-family:'Space Grotesk', sans-serif;
}
#content,
.mw-body,
#bodyContent {
background:var(--vault-paper);
color:var(--vault-text);
}
/* ==========================================================
ARTICLE CONTENT
========================================================== */
.mw-parser-output {
color:var(--vault-text);
font-family:'Space Grotesk', sans-serif;
}
.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 {
color:var(--vault-text);
}
.mw-parser-output p {
line-height:1.65;
}
/* ==========================================================
HEADINGS
========================================================== */
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:'Bungee', system-ui, sans-serif;
color:#222;
letter-spacing:.02em;
}
h1.firstHeading,
.mw-first-heading {
border-bottom:2px solid var(--vault-border);
padding-bottom:.5rem;
}
h2 {
color:var(--vault-purple);
border-bottom:1px solid var(--vault-border);
margin-top:2rem;
}
h3 {
color:#444;
}
/* ==========================================================
LINKS
========================================================== */
a {
color:var(--vault-blue);
}
a:visited {
color:#5c3d85;
}
a:hover {
color:var(--vault-green);
}
a.new {
color:var(--vault-red);
}
/* ==========================================================
TABLES
========================================================== */
table.wikitable {
background:white;
color:var(--vault-text);
border:1px solid var(--vault-border);
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background:var(--vault-purple);
color:white;
font-family:'JetBrains Mono', monospace;
letter-spacing:.05em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border-color:var(--vault-border);
}
table.wikitable tr:nth-child(even) td {
background:#faf8f2;
}
/* ==========================================================
CODE / PREFORMATTED TEXT
========================================================== */
code,
pre {
font-family:'JetBrains Mono', monospace;
}
pre {
background:#f5f2ea;
border:1px solid var(--vault-border);
color:#222;
}
/* ==========================================================
BLOCKQUOTES
========================================================== */
blockquote {
border-left:4px solid var(--vault-purple);
background:#f8f5ed;
padding:.8rem 1rem;
margin:1rem 0;
color:#444;
}
/* ==========================================================
CATEGORY FOOTER
========================================================== */
#catlinks,
.catlinks {
background:#f6f1e4;
border:1px solid var(--vault-border);
color:var(--vault-muted);
padding:.8rem;
}
#catlinks a,
.catlinks a {
color:var(--vault-purple);
}
/* ==========================================================
MEDIAWIKI SEARCH / UI TEXT FIXES
========================================================== */
.mw-body,
.mw-body-content {
color:var(--vault-text);
}
.mw-body a {
color:var(--vault-blue);
}
/* ==========================================================
END PART 1
PART 2 — VAULT COMPONENTS
========================================================== */
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
PART 2 — VAULT COMPONENTS
Infoboxes, assessments, evidence panels,
profiles, notices, cards and branding elements
========================================================== */
/* ==========================================================
HERO / LANDING COMPONENTS
========================================================== */
.vault-hero {
text-align:center;
padding:2rem 1rem;
background:white;
border:1px solid var(--vault-border);
border-radius:10px;
margin:1.5rem 0;
}
.vault-hero .vault-title {
font-family:'Bungee', system-ui, sans-serif;
font-size:2.2rem;
color:var(--vault-purple);
margin:0;
}
.vault-hero .vault-title span {
color:var(--vault-green);
}
.vault-hero .vault-tagline {
font-family:'JetBrains Mono', monospace;
font-size:.75rem;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--vault-muted);
margin-top:.6rem;
}
/* ==========================================================
CARDS / PORTALS / CASE GRID
========================================================== */
.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:white;
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.3rem;
text-decoration:none !important;
transition:.2s;
}
.vault-portal-card:hover,
.vault-case-card:hover {
border-color:var(--vault-purple);
transform:translateY(-3px);
}
.vault-portal-card .label,
.vault-case-card-title {
display:block;
font-family:'Bungee',system-ui,sans-serif;
color:var(--vault-purple) !important;
margin-bottom:.5rem;
}
.vault-portal-card .desc,
.vault-case-card-excerpt {
color:var(--vault-muted) !important;
font-size:.85rem;
line-height:1.5;
}
/* ==========================================================
INFOBOX
========================================================== */
.vault-infobox {
float:right;
width:280px;
margin:0 0 1rem 1.5rem;
background:white;
border:1px solid var(--vault-border);
border-radius:8px;
overflow:hidden;
}
.vault-infobox-header {
background:var(--vault-purple);
color:var(--vault-acid);
font-family:'Bungee',system-ui,sans-serif;
text-align:center;
padding:.8rem;
}
.vault-infobox-image {
text-align:center;
padding:.5rem;
}
.vault-infobox-image img {
max-width:100%;
height:auto;
}
.vault-infobox-caption {
font-size:.75rem;
color:var(--vault-muted);
padding:.5rem;
}
.vault-infobox-row {
display:grid;
grid-template-columns:95px 1fr;
gap:.5rem;
padding:.55rem .8rem;
border-top:1px solid var(--vault-border);
}
.vault-infobox-k {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
color:var(--vault-muted);
}
.vault-infobox-v {
color:var(--vault-text);
}
.vault-infobox-status {
color:var(--vault-green);
font-weight:bold;
}
/* ==========================================================
VAULT ASSESSMENT
========================================================== */
.vault-assessment {
width:100%;
margin:1.8rem 0;
background:white;
border:1px solid var(--vault-border);
border-radius:8px;
overflow:hidden;
clear:both;
}
.vault-assessment-header {
background:var(--vault-purple);
color:var(--vault-acid);
font-family:'Bungee',system-ui,sans-serif;
text-align:center;
padding:.8rem;
}
.vault-assessment-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
}
.vault-assessment-item {
padding:1rem;
border-top:1px solid var(--vault-border);
}
.vault-assessment-label {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
.vault-assessment-value {
color:var(--vault-text);
line-height:1.5;
}
.vault-assessment-status {
color:var(--vault-green);
font-weight:bold;
}
/* Assessment categories */
.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 ASSESSMENT
========================================================== */
.vault-evidence {
width:100%;
background:white;
border:1px solid var(--vault-border);
border-radius:8px;
overflow:hidden;
margin:1.8rem 0;
}
.vault-evidence-header {
background:var(--vault-purple);
color:var(--vault-acid);
font-family:'Bungee',system-ui,sans-serif;
text-align:center;
padding:.8rem;
}
.vault-evidence-score {
text-align:center;
font-size:2.2rem;
color:var(--vault-gold);
padding:1rem;
}
.vault-evidence-label {
text-align:center;
font-family:'JetBrains Mono',monospace;
font-size:.75rem;
text-transform:uppercase;
}
.vault-evidence-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
}
.vault-evidence-item {
padding:1rem;
border-top:1px solid var(--vault-border);
}
.vault-evidence-title {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
.vault-evidence-value {
color:var(--vault-text);
}
/* ==========================================================
PROFILE / LOCATION / WORK ASSESSMENTS
========================================================== */
.vault-profile-assessment,
.vault-location-assessment,
.vault-work-assessment {
width:100%;
background:white;
border:1px solid var(--vault-border);
border-radius:8px;
margin:1.8rem 0;
overflow:hidden;
clear:both;
}
.vault-profile-header,
.vault-location-header,
.vault-work-header {
background:var(--vault-purple);
color:var(--vault-acid);
font-family:'Bungee',system-ui,sans-serif;
text-align:center;
padding:.8rem;
}
.vault-profile-grid,
.vault-location-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
}
.vault-profile-item,
.vault-location-item {
padding:1rem;
border-right:1px solid var(--vault-border);
}
.vault-profile-label,
.vault-location-label {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
.vault-profile-value,
.vault-location-value {
color:var(--vault-text);
line-height:1.5;
}
.vault-profile-summary,
.vault-location-summary {
border-top:1px solid var(--vault-border);
padding:1rem;
}
/* ==========================================================
WORK ASSESSMENT
========================================================== */
.vault-work-row {
display:grid;
grid-template-columns:130px 1fr;
padding:.8rem 1rem;
border-top:1px solid var(--vault-border);
}
.vault-work-section {
padding:1rem;
border-top:1px solid var(--vault-border);
}
.vault-work-k {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
.vault-work-v {
color:var(--vault-text);
line-height:1.6;
}
/* ==========================================================
NOTICES
========================================================== */
.vault-notice {
background:white;
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-gold);
border-radius:6px;
padding:1rem 1.2rem;
margin:1.5rem 0;
}
.vault-notice-header {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-gold);
}
.vault-notice-title {
font-family:'Bungee',system-ui,sans-serif;
color:var(--vault-purple);
}
.vault-notice-body {
color:var(--vault-text);
line-height:1.5;
}
.vault-notice.warning {
border-left-color:#b32424;
}
.vault-notice.research {
border-left-color:#1769aa;
}
.vault-notice.featured {
border-left-color:var(--vault-green);
}
/* ==========================================================
END PART 2
PART 3 — BUTTONS, TAGS, RESPONSIVE & FINAL FIXES
========================================================== */
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
PART 3 — FINAL COMPONENTS & SYSTEM OVERRIDES
Buttons, tags, stats, references, categories,
edit pages and responsive layout
========================================================== */
/* ==========================================================
BUTTONS
========================================================== */
.vault-cta-strip {
text-align:center;
background:white;
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.5rem;
margin:1.8rem 0;
}
.vault-btn {
display:inline-block;
font-family:'JetBrains Mono',monospace;
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.06em;
padding:.7rem 1.3rem;
border-radius:4px;
margin:.3rem;
font-weight:bold;
text-decoration:none !important;
}
.vault-btn-primary {
background:var(--vault-green) !important;
color:white !important;
}
.vault-btn-vault {
background:var(--vault-purple) !important;
color:white !important;
}
.vault-btn-outline {
background:white !important;
color:var(--vault-purple) !important;
border:1px solid var(--vault-purple);
}
.vault-btn:hover {
opacity:.85;
}
/* ==========================================================
TAGS
========================================================== */
.vault-tag {
display:inline-block;
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.06em;
background:#f2eafa;
color:var(--vault-purple) !important;
border:1px solid #d5b9ee;
padding:.25rem .7rem;
border-radius:999px;
text-decoration:none !important;
margin:.2rem;
}
.vault-tag:hover {
background:#e5d4f5;
}
/* ==========================================================
FEATURE / DID YOU KNOW BOXES
========================================================== */
.vault-featured,
.vault-dyk {
background:white;
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-green);
border-radius:6px;
padding:1.2rem 1.5rem;
margin:1.5rem 0;
}
.vault-featured-title {
font-family:'Bungee',system-ui,sans-serif;
color:var(--vault-purple);
}
.vault-eyebrow {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.7rem;
color:var(--vault-gold);
}
/* ==========================================================
STATISTICS BAR
========================================================== */
.vault-stats-bar {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:1rem;
background:white;
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.3rem;
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:var(--vault-purple);
}
.vault-stats-bar-label {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
.vault-stats-bar a {
text-decoration:none;
}
/* ==========================================================
REFERENCES
========================================================== */
.reflist {
color:var(--vault-text);
font-size:.9rem;
}
.reflist a {
color:var(--vault-blue);
}
.reflist a:hover {
color:var(--vault-green);
}
/* Reference target highlight */
#mw-content-text li:target {
background:#fff8dc;
padding:.3rem;
}
/* ==========================================================
CATEGORY PAGES
========================================================== */
#mw-pages,
.mw-category,
.mw-category-group {
color:var(--vault-text);
}
#mw-pages a,
.mw-category a,
.mw-category-group a {
color:var(--vault-blue);
}
#mw-pages a:hover,
.mw-category a:hover,
.mw-category-group a:hover {
color:var(--vault-green);
}
/* ==========================================================
EDIT PAGE FIXES
========================================================== */
#editform,
#editform label,
#editform p,
#editform .editOptions,
.mw-editTools,
#editpage-copywarn,
.editnotice-area {
color:var(--vault-text);
}
.oo-ui-fieldLayout-header,
.oo-ui-labelElement,
.oo-ui-labelElement-label,
.oo-ui-labelWidget.oo-ui-inline-help {
color:var(--vault-text);
}
/* ==========================================================
MEDIAWIKI MESSAGE BOXES
Keep native MediaWiki warning/error styling
========================================================== */
.cdx-message {
color:#202122;
}
/* ==========================================================
FOOTNOTES / SMALL TEXT
========================================================== */
.mw-parser-output small {
color:var(--vault-muted);
}
/* ==========================================================
RECENT CHANGES CLEANUP
Keeps page names and timestamps,
hides unnecessary metadata
========================================================== */
.mw-changeslist-user,
.mw-usertoollinks,
.mw-changeslist-bytes,
.mw-plusminus-pos,
.mw-plusminus-neg,
.mw-tag-markers,
.comment {
display:none !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 var(--vault-border);
}
.vault-work-row {
grid-template-columns:1fr;
}
.vault-hero .vault-title {
font-size:1.6rem;
}
.vault-case-grid,
.vault-portal-grid {
grid-template-columns:1fr;
}
}
/* ==========================================================
FINAL CLEANUP
========================================================== */
/* Prevent assessment boxes being squeezed beside floats */
.vault-assessment,
.vault-evidence,
.vault-profile-assessment,
.vault-location-assessment,
.vault-work-assessment {
clear:both;
}
/* Images behave nicely inside content */
.mw-parser-output img {
max-width:100%;
height:auto;
}
/* Keep Vault headers consistent */
.vault-infobox-header,
.vault-assessment-header,
.vault-evidence-header,
.vault-profile-header,
.vault-location-header,
.vault-work-header {
letter-spacing:.04em;
}
/* ==========================================================
END OF THE VAULT COMMON.CSS
========================================================== */