Anonymous
×
Create a new article
Write your page title here:
We currently have 5 articles on The Vault @ The EERIE Files. Type your article name above or click on one of the titles below and start writing!



The Vault @ The EERIE Files
The Vault @ The EERIE Files
5Articles
Revision as of 18:45, 21 July 2026 by GaryJJSpate (talk | contribs) (Created page with "→========================================================== 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{...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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;
}
Retrieved from "https://eeriefiles.com/thevault/index.php?title=MediaWiki:Common.css&oldid=17"