Revision as of 21:40, 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;
}
/* Lighten the bell/mail/user-menu icons + text on the now-dark
top bar so they're visible. The search box itself keeps its
own dark text since it sits on a white input field. */
#cosmos-banner-userOptions,
#cosmos-banner-userOptions a,
.cosmos-bannerOption,
.cosmos-bannerOption-button,
.cosmos-bannerOption-icon,
.cosmos-userOptions-personalTools,
.cosmos-userButton-label,
#cosmos-banner-userOptions span,
#cosmos-banner-userOptions svg,
#cosmos-banner-userOptions path {
color: #ffffff !important;
fill: #ffffff !important;
}
/* The bell/tray notification icons are OOUI background-image
icons, not fill-able SVGs — invert them to white instead. */
.mw-echo-notifications-badge {
filter: brightness(0) invert(1);
}
/* The "GaryJJSpate" personal-tools dropdown opens its own white
panel (separate from the nav dropdown), so keep its text dark
rather than white-on-white. */
.cosmos-dropdown-list,
.cosmos-personalTools-list,
.cosmos-dropdown-list a,
.cosmos-personalTools-list a,
#cosmos-banner-userOptions .cosmos-dropdown-list,
#cosmos-banner-userOptions .cosmos-personalTools-list,
#cosmos-banner-userOptions .cosmos-dropdown-list a,
#cosmos-banner-userOptions .cosmos-personalTools-list a {
color: #222222 !important;
text-shadow: none !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;
}
}
/* ==========================================================
SIDEBAR RAIL (container + placeholder)
Two-column layout: article + a fixed-width rail. Rail content
is injected via MediaWiki:Common.js.
========================================================== */
#bodyContent.cosmos-articleContainer {
display: flex;
align-items: flex-start;
gap: 28px;
}
#cosmos-pageBody-content {
flex: 1 1 auto;
min-width: 0;
}
#vault-sidebar {
flex: 0 0 300px;
width: 300px;
}
.vault-sidebar-placeholder {
border: 2px dashed var(--vault-border, #d8d2c4);
border-radius: 8px;
padding: 2rem 1rem;
text-align: center;
color: var(--vault-muted, #666);
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: .08em;
font-size: .8rem;
background: var(--vault-white, #fff);
}
.vault-sidebar-placeholder small {
display: block;
margin-top: .5rem;
text-transform: none;
letter-spacing: normal;
font-size: .75rem;
opacity: .8;
}
/* Stack to a single column on narrower screens */
@media (max-width: 900px) {
#bodyContent.cosmos-articleContainer {
flex-direction: column;
}
#vault-sidebar {
width: 100%;
flex-basis: auto;
}
}
/* ==========================================================
SIDEBAR MODULE STYLING (Recently Filed, etc.)
========================================================== */
.vault-sidebar-module {
background: var(--vault-white, #fff);
border: 1px solid var(--vault-border, #d8d2c4);
border-radius: 8px;
padding: 1rem 1.1rem;
margin-bottom: 1.25rem;
}
.vault-sidebar-module-header {
font-family: 'Bungee', sans-serif;
font-size: .95rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--vault-purple, #5b3a8e);
border-bottom: 2px solid var(--vault-purple, #5b3a8e);
padding-bottom: .5rem;
margin-bottom: .75rem;
}
.vault-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.vault-sidebar-list li {
padding: .4rem 0;
border-bottom: 1px dashed var(--vault-border, #e5e0d3);
font-family: 'JetBrains Mono', monospace;
font-size: .85rem;
}
.vault-sidebar-list li:last-child {
border-bottom: none;
}
.vault-sidebar-list a {
color: var(--vault-purple, #5b3a8e);
text-decoration: none;
}
.vault-sidebar-list a:hover {
text-decoration: underline;
}
.vault-sidebar-loading {
opacity: .6;
font-style: italic;
}
/* Thumbnails for the Latest News module */
.vault-sidebar-list--news li {
display: flex;
align-items: center;
gap: .6rem;
}
.vault-sidebar-list--news a {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
}
.vault-sidebar-thumb {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 4px;
flex: 0 0 auto;
background: var(--vault-border, #e5e0d3);
}
.vault-sidebar-list-title {
flex: 1 1 auto;
min-width: 0;
line-height: 1.25;
}
/* Logo duplicated into the top utility bar, left-aligned */
#cosmos-banner-logo {
display: flex;
align-items: stretch;
align-self: stretch;
flex: 0 0 auto;
margin-right: 16px;
}
#cosmos-banner-logo img {
height: 100%;
width: auto;
display: block;
}
/* Logo now lives in the top bar; hide the duplicate in the header/menu section */
.cosmos-header__wordmark {
display: none;
}
/* Constrain the top bar and the header's menu row to the same width
as the main content column, while the header photo stays full-bleed. */
#cosmos-banner {
left: 50%;
width: 97%;
max-width: 97%;
transform: translateX(-50%);
}
.cosmos-header__local-navigation {
width: 97%;
max-width: 97%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* Constrain the title/counter row too, same width as the top bar and menu row */
.cosmos-header__top-container {
width: 97%;
max-width: 97%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}