MediaWiki:Common.css: Difference between revisions

Revision as of 18:55, 10 September 2026

/* ====================================================
   WIKI GLOBAL CSS - VECTOR 2022
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');

/* ====================================================
   1. HIDDEN ELEMENTS (READ-ONLY CLEANUP)
   ==================================================== */

/* Hide universal UI clutter */
#footer-places,
#footer-icons,
.mw-footer-container,
#mw-sidebar-button,
#vector-main-menu-dropdown,
.vector-pinnable-header-toggle-button.vector-pinnable-header-unpin-button,
.vector-pinnable-header-pinned.vector-toc-pinnable-header.vector-pinnable-header,
.cdx-menu-item--search-for,
.cdx-search-input__end-button,
#searchButton {
    display: none !important;
}

/* Hide navigation/editing UI for logged-out users ONLY */
body.not-logged-in #p-personal,
body.not-logged-in .vector-user-links,
body.not-logged-in #p-vector-user-menu-overflow,
body.not-logged-in #pt-login,
body.not-logged-in #pt-login-2,
body.not-logged-in .user-links-collapsible-item,
body.not-logged-in .vector-page-toolbar,
body.not-logged-in #p-namespaces,
body.not-logged-in #p-views,
body.not-logged-in #p-cactions,
body.not-logged-in .mw-article-toolbar {
    display: none !important;
}

/* Hide "Watch this page" checkboxes in all edit forms */
.mw-widget-checkDef-watchthis,
.page-mw-watchthis,
.mw-editWatchlist,
#wpWatchthis,
label[for="wpWatchthis"],
.oo-ui-fieldLayout:has(#wpWatchthis),
.oo-ui-fieldLayout:has([name="wpWatchthis"]) {
    display: none !important;
}


/* ====================================================
   2. TYPOGRAPHY & LOGO (DEFAULT/LIGHT)
   ==================================================== */

.mw-logo-wordmark,
.mw-logo-wordmark * {
    color: var(--color-base, #000000) !important;
    fill: var(--color-base, #000000) !important; /* Required if wordmark is an SVG */
    font-family: "Mountains of Christmas", serif !important;
    font-weight: 700 !important;
}


/* ====================================================
   3. LAYOUT & SPACING
   ==================================================== */

.mw-body-header {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Table of Contents Alignment */
ul#mw-panel-toc-list.vector-toc-contents {
    margin-left: 6px !important; 
}
#vector-toc,
.vector-toc {
    margin-top: 0 !important;
}


/* ====================================================
   4. INFOBOXES & IMAGES
   ==================================================== */

.infobox img,
.portable-infobox img {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Force PortableInfobox to inherit skin colors gracefully */
.portable-infobox {
    background-color: var(--background-color-interactive-subtle, #f8f9fa) !important;
    color: var(--color-base, #202122) !important;
    border: 1px solid var(--border-color-base, #a2a9b1) !important;
}
.portable-infobox .pi-secondary-background {
    background-color: var(--background-color-base, #ffffff) !important;
}
.portable-infobox .pi-secondary-font {
    color: var(--color-base, #202122) !important;
}


/* ====================================================
   5. SEARCH BAR (MINIMALIST MATERIAL)
   ==================================================== */

.cdx-search-input {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background-color: #f1f3f4 !important;
    transition: background-color 0.2s, box-shadow 0.2s, border 0.2s;
}

/* Focus State */
.cdx-search-input:focus-within {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(32, 33, 36, 0.2) !important;
    border: 1px solid #dfe1e5 !important;
    border-radius: 8px !important;
}

/* Dropdown Menu */
.cdx-menu {
    border-radius: 8px !important; 
    box-shadow: 0 6px 12px rgba(32, 33, 36, 0.15) !important; 
    border: 1px solid #dfe1e5 !important; 
    margin-top: 8px !important; 
    background-color: #ffffff !important; 
    overflow: hidden !important; 
    padding: 0 !important;
}

/* Hover/Focus Item */
.cdx-menu-item:hover, 
.cdx-menu-item[aria-selected="true"] {
    background-color: #eeeeee !important;
}

/* Fix text shifting and inner borders */
.cdx-text-input,
.cdx-text-input:focus-within,
.cdx-text-input.cdx-text-input--status-default {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
.vector-typeahead-search-container {
    max-width: none !important; 
    margin: 0 !important;
    transform: none !important;
}
.cdx-text-input__input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-right: 32px !important;
    transition: none !important;
}


/* ====================================================
   6. THEME OVERRIDES (LIGHT & DARK MODE)
   ==================================================== */

/* --- Explicit Light Theme --- */
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-day body,
html.skin-theme-clientpref-day .mw-page-container,
html.skin-theme-clientpref-day .mw-header {
    background-color: #ffffff !important;
}

@media (prefers-color-scheme: light) {
    html.skin-theme-clientpref-os,
    html.skin-theme-clientpref-os body,
    html.skin-theme-clientpref-os .mw-page-container,
    html.skin-theme-clientpref-os .mw-header {
        background-color: #ffffff !important;
    }
}

/* --- Explicit Dark Theme --- */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-header {
    background-color: #101418 !important;
}

/* Force ALL variations of the logo text to white */
html.skin-theme-clientpref-night .mw-logo-wordmark,
html.skin-theme-clientpref-night .mw-logo-container span,
html.skin-theme-clientpref-night .mw-wiki-title,
html.skin-theme-clientpref-night span.mw-logo-wordmark,
html.skin-theme-clientpref-night .mw-logo-wordmark * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Search Bar Dark Mode */
html.skin-theme-clientpref-night .cdx-search-input,
html.skin-theme-clientpref-night .cdx-search-input:focus-within,
html.skin-theme-clientpref-night .cdx-menu {
    background-color: #181d23 !important;
    border-color: #272d35 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}
html.skin-theme-clientpref-night .cdx-text-input__input {
    color: #f8f9fa !important;
}
html.skin-theme-clientpref-night .cdx-menu-item:hover, 
html.skin-theme-clientpref-night .cdx-menu-item[aria-selected="true"] {
    background-color: #333639 !important;
}

/* --- AGGRESSIVE PORTABLE INFOBOX DARK MODE OVERRIDE --- */
/* Strips inline variables and forces dark backgrounds */
html.skin-theme-clientpref-night aside.portable-infobox,
html.skin-theme-clientpref-night .portable-infobox {
    background-color: #181d23 !important;
    background: #181d23 !important;
    color: #ffffff !important;
    border: 1px solid #272d35 !important;
}

/* Forces all text inside the infobox to be white */
html.skin-theme-clientpref-night aside.portable-infobox *,
html.skin-theme-clientpref-night .portable-infobox * {
    color: #ffffff !important;
}

/* Forces secondary sections (headers, data rows) to be slightly darker */
html.skin-theme-clientpref-night .portable-infobox .pi-secondary-background,
html.skin-theme-clientpref-night .portable-infobox .pi-header,
html.skin-theme-clientpref-night .portable-infobox .pi-item,
html.skin-theme-clientpref-night .portable-infobox .pi-data,
html.skin-theme-clientpref-night .portable-infobox .pi-title {
    background-color: #101418 !important;
    background: #101418 !important;
    border-bottom: 1px solid #272d35 !important;
}


/* --- OS Automatic Dark Theme (Matches Explicit Dark) --- */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os,
    html.skin-theme-clientpref-os body,
    html.skin-theme-clientpref-os .mw-page-container,
    html.skin-theme-clientpref-os .mw-header {
        background-color: #101418 !important;
    }
    
    html.skin-theme-clientpref-os .mw-logo-wordmark,
    html.skin-theme-clientpref-os .mw-logo-container span,
    html.skin-theme-clientpref-os .mw-wiki-title,
    html.skin-theme-clientpref-os span.mw-logo-wordmark,
    html.skin-theme-clientpref-os .mw-logo-wordmark * {
        color: #ffffff !important;
        fill: #ffffff !important; 
    }
    
    html.skin-theme-clientpref-os .cdx-search-input,
    html.skin-theme-clientpref-os .cdx-search-input:focus-within,
    html.skin-theme-clientpref-os .cdx-menu {
        background-color: #181d23 !important;
        border-color: #272d35 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
    }
    
    html.skin-theme-clientpref-os .cdx-text-input__input {
        color: #f8f9fa !important;
    }
    
    html.skin-theme-clientpref-os .cdx-menu-item:hover, 
    html.skin-theme-clientpref-os .cdx-menu-item[aria-selected="true"] {
        background-color: #333639 !important;
    }
    
    html.skin-theme-clientpref-os aside.portable-infobox,
    html.skin-theme-clientpref-os .portable-infobox {
        background-color: #181d23 !important;
        background: #181d23 !important;
        color: #ffffff !important;
        border: 1px solid #272d35 !important;
    }
    html.skin-theme-clientpref-os aside.portable-infobox *,
    html.skin-theme-clientpref-os .portable-infobox * {
        color: #ffffff !important;
    }
    html.skin-theme-clientpref-os .portable-infobox .pi-secondary-background,
    html.skin-theme-clientpref-os .portable-infobox .pi-header,
    html.skin-theme-clientpref-os .portable-infobox .pi-item,
    html.skin-theme-clientpref-os .portable-infobox .pi-data,
    html.skin-theme-clientpref-os .portable-infobox .pi-title {
        background-color: #101418 !important;
        background: #101418 !important;
        border-bottom: 1px solid #272d35 !important;
    }
}