Revision as of 11:21, 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: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. */