MediaWiki:Cosmos.css: Difference between revisions

Help

Latest revision as of 21:49, 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;
}

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


/* Header title in Bungee, matching headings elsewhere on the site */
.cosmos-header__sitename,
.cosmos-header__sitename a {
    font-family: 'Bungee', sans-serif;
}


/* Custom footer: centred, no GNU FDL / Powered-by-MediaWiki icons */
#cosmos-footerContent-footerIcons {
    display: none !important;
}
#cosmos-footer-footerContent {
    text-align: center;
}
#cosmos-footerContent-footerLinks {
    float: none;
    width: 100%;
    text-align: center;
}
#vault-custom-footer {
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--vault-muted, #888);
    padding: 1rem 0;
}
#vault-custom-footer .vault-footer-line {
    margin: 0;
}
#vault-custom-footer .vault-footer-links {
    margin: .25rem 0;
}
#vault-custom-footer .vault-footer-links a {
    color: var(--vault-purple, #5b3a8e);
    text-decoration: none;
}
#vault-custom-footer .vault-footer-links a:hover {
    text-decoration: underline;
}
#vault-custom-footer .vault-footer-copyright {
    margin: .5rem 0 0;
    opacity: .8;
}


/* TwentyThree Studios link in the footer */
#vault-custom-footer .vault-footer-line a,
#vault-custom-footer .vault-footer-copyright a {
    color: var(--vault-purple, #5b3a8e);
    text-decoration: none;
}
#vault-custom-footer .vault-footer-line a:hover,
#vault-custom-footer .vault-footer-copyright a:hover {
    text-decoration: underline;
}