MediaWiki:Cosmos.css: Difference between revisions

Help

Revision as of 19:26, 12 August 2026

/* ==========================================================
   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;
    }
}