MediaWiki:Common.css: Difference between revisions

Help

Revision as of 22:14, 29 July 2026

/* ==========================================================
   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
   ========================================================== */
GaryJJSpate (talk | contribs)

Revision as of 22:14, 29 July 2026
