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