MediaWiki:Cosmos.css: Difference between revisions

Help

Revision as of 11:21, 29 July 2026

/* ==========================================================
   THE VAULT @ THE E.E.R.I.E. FILES — MediaWiki:Cosmos.css
   Paste this into MediaWiki:Cosmos.css (a separate page from
   Common.css — search "Cosmos.css" or go to
   yourwiki.url/index.php?title=MediaWiki:Cosmos.css)

   This file targets Cosmos-specific elements (header, side
   rail, search) that Common.css can't reliably reach since
   Cosmos's layout differs from the default Vector skin.

   NOTE: the :root variable block below is deliberately
   duplicated from Common.css, not a mistake — MediaWiki
   loads skin CSS (this file) and Common.css as part of the
   same combined stylesheet for the Cosmos skin, but each
   file is still an independent wiki page with its own
   content, so each needs its own copy of the variables to
   be self-contained if edited or viewed in isolation.
   ========================================================== */

:root{
    --void:#0a0714;
    --panel:#160f2b;
    --panel-edge:#2a1c4a;
    --acid:#a6ff3f;
    --violet:#b34aff;
    --cream:#f2ecd9;
    --amber:#ffcf4d;
    --muted:#9d8fc2;
}

/* Side rail modules (Recent Changes, Random Page, etc.) */
#cosmos-rail .rail-module,
.rail-module {
    background-color: var(--panel) !important;
    border: 1px solid var(--panel-edge) !important;
    color: var(--cream) !important;
}
.rail-module .rail-module-header,
.rail-module h3 {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--violet) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--panel-edge) !important;
}
.rail-module a {
    color: var(--muted) !important;
}
.rail-module a:hover {
    color: var(--acid) !important;
}

/* Search box */
.cosmos-searchInput input,
#simpleSearch,
.oo-ui-textInputWidget input {
    background-color: var(--void) !important;
    color: var(--cream) !important;
    border: 1px solid var(--panel-edge) !important;
}

/* Community/wiki header navigation bar */
.cosmos-community-header,
.wiki-nav,
#p-logo a {
    border-color: var(--panel-edge) !important;
}
.wiki-nav a, .cosmos-header-menu a {
    color: var(--muted) !important;
}
.wiki-nav a:hover, .cosmos-header-menu a:hover {
    color: var(--acid) !important;
}

/* Personal toolbar (login/user links top-right) */
.personal-more-container,
#p-personal {
    color: var(--muted) !important;
}
#p-personal a {
    color: var(--muted) !important;
}
#p-personal a:hover {
    color: var(--acid) !important;
}

/* Footer */
#footer, .mw-footer {
    background-color: var(--panel) !important;
    border-top: 1px solid var(--panel-edge) !important;
    color: var(--muted) !important;
}
#footer a, .mw-footer a {
    color: var(--violet) !important;
}

/* NOTE: Cosmos's exact class names can vary slightly by
   version. If any of the above doesn't visibly apply once
   pasted in, right-click the element in your browser →
   Inspect, find its actual class name, and swap it in above —
   the colour variables at the top will still be correct either
   way, it's just a case of matching the right selector. */