Revision as of 19:26, 12 August 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
Cosmos skin overrides
This file only controls typography and minor presentation.
Colours are left to the default Cosmos / MediaWiki skin.
========================================================== */
/* ==========================================================
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);
/* ==========================================================
COSMOS TYPOGRAPHY
========================================================== */
body {
font-family:'Space Grotesk', sans-serif;
}
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:'Bungee', system-ui, sans-serif;
}
code,
pre,
.mw-code {
font-family:'JetBrains Mono', monospace;
}
/* ==========================================================
HEADER / NAVIGATION
Leave Cosmos colours untouched
========================================================== */
.cosmos-community-header,
.wiki-nav,
#p-logo a {
border-color:inherit;
}
.wiki-nav a,
.cosmos-header-menu a {
text-decoration:none;
}
/* ==========================================================
SEARCH
Allow default MediaWiki styling
========================================================== */
.cosmos-searchInput input,
#simpleSearch,
.oo-ui-textInputWidget input {
font-family:'Space Grotesk', sans-serif;
}
/* ==========================================================
FOOTER
Leave default skin styling intact
========================================================== */
#footer,
.mw-footer {
font-family:'Space Grotesk', sans-serif;
}
/* ==========================================================
RESPONSIVE CLEANUP
========================================================== */
@media screen and (max-width:700px) {
body {
font-size:16px;
}
}
/* ==========================================================
FANDOM-STYLE LAYOUT TWEAKS
Full-width header banner + compact top-right search.
Colours intentionally left untouched (see rest of file).
========================================================== */
/* Close the gap left below the fixed top bar: the page reserves
133px for it by default, but the bar itself is only ~55px tall. */
#mw-content-container {
padding-top: 55px !important;
}
/* The 100vw full-bleed trick below counts the scrollbar's own
width, which can push the page a few pixels wider than the
viewport and trigger a horizontal scrollbar. Clip it. */
html, body {
overflow-x: hidden;
}
/* Widen the main content column — almost full width, small
breathing margin either side. Header is unaffected since it's
already broken out separately via the 100vw trick above. */
#mw-content-wrapper {
width: 97% !important;
max-width: 97% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Darken the page background to blend with the dark header
banner image, instead of the previous cream tone. Overriding
the --vault-paper variable keeps this consistent everywhere
it's already used (html/body background). */
:root {
--vault-paper: #121016;
}
/* Also darken the top utility bar (search/bell/user menu),
which currently uses the skin's default light grey and would
otherwise clash with the dark banner directly beneath it. */
#cosmos-banner {
background-color: #121016 !important;
}
/* Compact search, tucked into the top-right corner */
#cosmos-banner-content {
display: flex;
align-items: center;
}
#p-search.cosmos-banner-search {
flex: 0 1 260px;
width: 260px;
max-width: 260px;
margin-left: auto;
margin-right: 12px;
}
#cosmos-banner-userOptions {
flex: 0 0 auto;
}
/* Full-width header/banner (break out of the boxed column).
Only the header's own box is affected; the wrapper, main
content, and footer are left completely untouched so their
normal centering is preserved. */
.cosmos-header {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
min-height: 160px;
background: none !important;
}
/* Paint the banner image on a dedicated, decoupled layer behind
the header content, instead of as the header's own background.
This avoids background-size:cover misbehaving when combined
with the left:50%/-50vw full-bleed trick on the header itself. */
.cosmos-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('/thevault/images/d/da/Eerie_files_banner.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
}
.cosmos-header,
.cosmos-header > a,
.cosmos-header .wds-dropdown__toggle,
.cosmos-header .wds-dropdown__toggle a,
.cosmos-header .wds-dropdown__toggle span,
#p-logo a,
.cosmos-header__sitename a,
.cosmos-header__counter-value,
.cosmos-header__counter-label {
color: #ffffff !important;
text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5);
}
/* Dropdown panels open on a white background, so keep their
links dark/default rather than white-on-white. */
.cosmos-header .wds-dropdown__content,
.cosmos-header .wds-dropdown__content a {
color: initial !important;
text-shadow: none !important;
}
/* Keep search usable on small screens */
@media (max-width: 700px) {
#p-search.cosmos-banner-search {
flex: 1 1 auto;
width: auto;
max-width: none;
margin-right: 8px;
}
}