MediaWiki:Common.css: Difference between revisions

Help

Revision as of 20:41, 29 July 2026

/* ==========================================================
   THE VAULT @ THE E.E.R.I.E. FILES
   MediaWiki:Common.css

   SECTION 1 — FOUNDATION
   ========================================================== */


/* ---------- 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 {

    --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;

}


/* ==========================================================
   TABLES
   ========================================================== */

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;

}


/* ==========================================================
   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(--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;

}


/* ==========================================================
   CATEGORY 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;

}



/* ==========================================================
   THE VAULT — CUSTOM COMPONENTS

   SECTION 2 — VAULT UI ELEMENTS
   ========================================================== */


/* ==========================================================
   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,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;

}


/* ==========================================================
   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 .icon {

    font-size: 1.6rem;

}


.vault-portal-card .label,
.vault-case-card-title {

    font-family: 'Bungee', system-ui, sans-serif;

    color: var(--acid) !important;

}


.vault-portal-card .desc,
.vault-case-card-excerpt {

    font-size: .82rem;

    color: var(--muted) !important;

    line-height: 1.5;

}


.vault-case-card-title {

    font-size: 1.05rem;

    color: var(--cream) !important;

}


/* ==========================================================
   FEATURE / DID YOU KNOW / NOTICE BOXES
   ========================================================== */

.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;

}


.vault-featured {

    border-left: 4px solid var(--acid);

}


.vault-featured .vault-eyebrow,
.vault-notice-header {

    font-family: 'JetBrains Mono', monospace;

    font-size: .68rem;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--amber);

}


.vault-featured-title {

    font-family: 'Bungee', system-ui, sans-serif;

    font-size: 1.3rem;

    color: var(--cream);

}


.vault-dyk ul {

    margin: .4rem 0 0 1.2rem;

}


.vault-dyk li {

    margin-bottom: .5rem;

    color: var(--cream);

}


.vault-notice {

    border-left: 4px solid var(--amber);

}


.vault-notice-body {

    color: var(--cream);

    opacity: .9;

}


/* ==========================================================
   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 {

    font-size: .75rem;

    color: var(--muted);

    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;

    color: var(--muted);

    font-size: .66rem;

    letter-spacing: .03em;

}


.vault-infobox-v {

    color: var(--cream);

}


.vault-infobox-status {

    color: var(--acid);

    font-weight: bold;

}


/* ==========================================================
   VAULT ASSESSMENT (FULL WIDTH)
   ========================================================== */

.vault-assessment {

    width: 100%;

    margin: 1.5rem 0;

    background: var(--panel);

    border: 1px solid var(--panel-edge);

    border-radius: 8px;

    overflow: hidden;

}


.vault-assessment-header {

    background: var(--panel-edge);

    font-family: 'Bungee', system-ui, sans-serif;

    font-size: .95rem;

    text-align: center;

    padding: .8rem;

    color: var(--acid);

    letter-spacing: .04em;

}


.vault-assessment-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

}


.vault-assessment-item {

    padding: .9rem 1rem;

    border-top: 1px solid var(--panel-edge);

}


.vault-assessment-label {

    font-family: 'JetBrains Mono', monospace;

    font-size: .68rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: .35rem;

}


.vault-assessment-value {

    color: var(--cream);

    font-size: .9rem;

    line-height: 1.45;

}


.vault-assessment-status {

    color: var(--acid);

    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;

}


/* ==========================================================
   BUTTONS / TAGS
   ========================================================== */

.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-btn {

    display:inline-block;

    font-family:'JetBrains Mono', monospace;

    font-size:.78rem;

    letter-spacing:.06em;

    text-transform:uppercase;

    padding:.7rem 1.3rem;

    border-radius:4px;

    margin:.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:.68rem;

    letter-spacing:.06em;

    text-transform:uppercase;

    background:rgba(179,74,255,.12);

    color:var(--violet) !important;

    border:1px solid rgba(179,74,255,.35);

    padding:.25rem .7rem;

    border-radius:999px;

    text-decoration:none !important;

}





/* ==========================================================
   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: 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 components used by MediaWiki */

.oo-ui-fieldLayout-header,
.oo-ui-labelElement,
.oo-ui-labelElement-label,
.oo-ui-labelWidget.oo-ui-inline-help {

    color: var(--cream) !important;

}


/* ==========================================================
   MESSAGE BOXES
   ========================================================== */

/*
   Codex messages intentionally remain readable.
   They use their own light backgrounds.
*/

.cdx-message {

    color:#202122 !important;

}



/* ==========================================================
   CATEGORY PAGES
   ========================================================== */

#mw-pages,
.mw-category,
.mw-category-group {

    color:var(--cream) !important;

}


#mw-pages a,
.mw-category a,
.mw-category-group a {

    color:#8fd9ff !important;

}


#mw-pages a:visited,
.mw-category a:visited,
.mw-category-group a:visited {

    color:var(--muted) !important;

}


#mw-pages a:hover,
.mw-category a:hover,
.mw-category-group a:hover {

    color:var(--acid) !important;

}



/* ==========================================================
   CATEGORY / REFERENCE TARGETS
   ========================================================== */

#mw-content-text li:target,
#mw-content-text li:target * {

    background-color:var(--panel) !important;

    color:var(--cream) !important;

}


#mw-content-text li:target i {

    color:var(--muted) !important;

}



/* ==========================================================
   REFERENCE LIST
   ========================================================== */

.reflist {

    color:var(--cream);

}


.reflist a {

    color:#8fd9ff !important;

}



/* ==========================================================
   STATS COMPONENTS
   ========================================================== */

.vault-stats-bar {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    gap:1rem;

    background:var(--panel);

    border:1px solid var(--panel-edge);

    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:var(--acid);

}


.vault-stats-bar-label {

    font-family:'JetBrains Mono',monospace;

    font-size:.68rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--muted);

}


.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:var(--cream);

}


.vault-stats-bar-item a:hover .vault-stats-bar-label {

    color:var(--acid);

}



/* ==========================================================
   RECENT CHANGES / LOG CLEANUP

   Removes clutter while keeping:
   - page title
   - date/time
   ========================================================== */

.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;

}



/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */

@media screen and (max-width:700px) {


    .vault-infobox {

        float:none;

        width:100%;

        margin:1rem 0;

    }


    .vault-assessment-grid {

        grid-template-columns:1fr;

    }


    .vault-hero .vault-title {

        font-size:1.7rem;

    }


    .vault-case-grid,
    .vault-portal-grid {

        grid-template-columns:1fr;

    }


}
GaryJJSpate (talk | contribs)

Revision as of 20:41, 29 July 2026
