MediaWiki:Cosmos.css: Difference between revisions

Help

Revision as of 18:57, 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).
   ========================================================== */

/* 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;
    z-index: 0;
}

/* 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,
.wiki-nav a,
#p-logo a,
.cosmos-header-menu a,
.cosmos-community-header {
    text-shadow: 0 1px 2px rgba(255,255,255,.85), 0 0 10px rgba(255,255,255,.5);
}

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