MediaWiki:Common.css: Difference between revisions

Revision as of 19:45, 10 September 2026

 /* CSS placed here will be applied to all skins */


/* --- 0. LOCAL FONT DECLARATIONS --- */

@font-face {

    font-family: 'Mountains of Christmas';

    font-style: normal;

    font-weight: 700;

    src: url('/images/fonts/MountainsofChristmas-Bold.ttf') format('truetype');

}


@font-face {

    font-family: 'Mountains of Christmas';

    font-style: normal;

    font-weight: 400;

    src: url('/images/fonts/MountainsofChristmas-Regular.ttf') format('truetype');

}


/* --- 1. UI CLEANUP & READ-ONLY HIDING --- */


/* Footers: Privacy, disclaimers, powered by */

#footer-places,

#footer-icons,

.mw-footer-container {

    display: none !important;

}


/* Sidebar & Navigation controls */

#mw-sidebar-button,

#vector-main-menu-dropdown {

    display: none !important;

}


/* User account / Log in links */

#p-personal,

#pt-login,

#pt-login-2,

#p-vector-user-menu-overflow,

.vector-user-links,

.user-links-collapsible-item {

    display: none !important;

}


/* Page tabs & toolbars (Namespaces, views, actions) */

.vector-page-toolbar,

.mw-article-toolbar,

#p-namespaces,

#p-views,

#p-cactions,

#vector-page-tools-dropdown {

    display: none !important;

}


/* Spacing left behind by removed tabs */

.mw-body-header {

    border-bottom: none !important;

    margin-bottom: 0 !important;

}


/* Watch page elements (Forms & VisualEditor) */

#wpWatchthis,

.page-mw-watchthis,

.mw-editWatchlist,

.mw-widget-checkDef-watchthis,

label[for="wpWatchthis"],

.oo-ui-fieldLayout:has(#wpWatchthis),

.oo-ui-fieldLayout:has([name="wpWatchthis"]) {

    display: none !important;

}


/* --- 2. HEADER ALIGNMENT & INSTANT SEARCH POSITIONING --- */


/* Remove gap between header items */

.mw-header .vector-header-start {

    gap: 0 !important;

}


/* Eliminate search shift, margin delays, and animation "yawns" */

#p-search,

.vector-search-box,

.vector-typeahead-search-container,

.cdx-typeahead-search,

.vector-typeahead-search {

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding-left: 0 !important;

    transition: none !important;

}


.cdx-typeahead-search__input-wrapper,

.cdx-search-input {

    margin-left: 0 !important;

    transition: none !important;

}


/* --- 3. TABLE OF CONTENTS --- */


#vector-toc,

.vector-toc {

    margin-top: 0 !important;

}


ul#mw-panel-toc-list.vector-toc-contents {

    margin-left: 6px !important;

}


/* Hide TOC header & unpin button */

.vector-pinnable-header-pinned.vector-toc-pinnable-header.vector-pinnable-header,

.vector-pinnable-header-toggle-button.vector-pinnable-header-unpin-button {

    display: none !important;

}


/* --- 4. BRANDING & MEDIA --- */


/* Prevent MediaWiki from auto-inverting colors on night mode */

.mw-logo-container.skin-invert {

    filter: none !important;

}


/* Wordmark styling (Light Mode default) */

.mw-logo-wordmark,

.mw-logo-wordmark * {

    color: #202122 !important;

    font-family: "Mountains of Christmas", cursive, serif !important;

    font-weight: 700 !important;

}


/* Modern infobox images */

.portable-infobox .pi-image img,

.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;

}


/* --- 5. MATERIAL FLOATING SEARCH BAR --- */


/* Hide search buttons & dropdown filler */

#searchButton,

.cdx-search-input__end-button,

.cdx-menu-item--search-for {

    display: none !important;

}


/* Search container & layout stability */

.vector-typeahead-search-container {

    max-width: none !important;

    margin: 0 !important;

    transform: none !important;

}


.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;

}


.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;

}


/* Search inputs */

.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;

}


.cdx-text-input__input {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding-right: 32px !important;

    transition: none !important;

}


/* Search dropdown results */

.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;

}


.cdx-menu-item:hover,

.cdx-menu-item[aria-selected="true"] {

    background-color: #eeeeee !important;

}


/* --- 6. THEME OVERRIDES --- */


/* Light Theme (Clientpref Day) */

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;

}


html.skin-theme-clientpref-day .mw-logo-wordmark,

html.skin-theme-clientpref-day .mw-logo-wordmark * {

    color: #202122 !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;

    }


    html.skin-theme-clientpref-os .mw-logo-wordmark,

    html.skin-theme-clientpref-os .mw-logo-wordmark * {

        color: #202122 !important;

    }

}


/* Dark Theme (Manual / Clientpref Night / Skin-Invert) */

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,

html.skin-invert,

html.skin-invert body,

html.skin-invert .mw-page-container,

html.skin-invert .mw-header {

    background-color: #101418 !important;

}


/* Dark Theme Wordmark */

html.skin-theme-clientpref-night .mw-logo-wordmark,

html.skin-theme-clientpref-night .mw-logo-wordmark *,

html.skin-invert .mw-logo-wordmark,

html.skin-invert .mw-logo-wordmark * {

    color: #ffffff !important;

}


/* Dark Search Bar */

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,

html.skin-invert .cdx-search-input,

html.skin-invert .cdx-search-input:focus-within,

html.skin-invert .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,

html.skin-invert .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"],

html.skin-invert .cdx-menu-item:hover,

html.skin-invert .cdx-menu-item[aria-selected="true"] {

    background-color: #333639 !important;

}


/* PortableInfobox Dark Mode */

html.skin-theme-clientpref-night .portable-infobox,

html.skin-invert .portable-infobox {

    background-color: #181d23 !important;

    color: #eaecf0 !important;

    border: 1px solid #272d35 !important;

}


html.skin-theme-clientpref-night .portable-infobox .pi-title,

html.skin-theme-clientpref-night .portable-infobox .pi-header,

html.skin-invert .portable-infobox .pi-title,

html.skin-invert .portable-infobox .pi-header {

    background-color: #222831 !important;

    color: #ffffff !important;

    border-bottom: 1px solid #272d35 !important;

}


html.skin-theme-clientpref-night .portable-infobox .pi-data,

html.skin-theme-clientpref-night .portable-infobox .pi-data-label,

html.skin-theme-clientpref-night .portable-infobox .pi-data-value,

html.skin-invert .portable-infobox .pi-data,

html.skin-invert .portable-infobox .pi-data-label,

html.skin-invert .portable-infobox .pi-data-value {

    background-color: transparent !important;

    color: #eaecf0 !important;

    border-color: #272d35 !important;

}


html.skin-theme-clientpref-night .portable-infobox a,

html.skin-invert .portable-infobox a {

    color: #6daafb !important;

}


/* Dark Theme (OS Match - Clientpref OS) */

@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-wordmark * {

        color: #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;

    }


    /* PortableInfobox OS Dark Mode */

    html.skin-theme-clientpref-os .portable-infobox {

        background-color: #181d23 !important;

        color: #eaecf0 !important;

        border: 1px solid #272d35 !important;

    }


    html.skin-theme-clientpref-os .portable-infobox .pi-title,

    html.skin-theme-clientpref-os .portable-infobox .pi-header {

        background-color: #222831 !important;

        color: #ffffff !important;

        border-bottom: 1px solid #272d35 !important;

    }


    html.skin-theme-clientpref-os .portable-infobox .pi-data,

    html.skin-theme-clientpref-os .portable-infobox .pi-data-label,

    html.skin-theme-clientpref-os .portable-infobox .pi-data-value {

        background-color: transparent !important;

        color: #eaecf0 !important;

        border-color: #272d35 !important;

    }


    html.skin-theme-clientpref-os .portable-infobox a {

        color: #6daafb !important;

    }

}


/* --- 7. MOBILE FIXES (LOGO, SEARCH & INFOBOX) --- */


/* Mobile search toggle button spacing */

.search-toggle {

    margin-right: 8px !important;

}


/* Restore the logo icon on mobile using inline alignment */

.mw-logo-icon {

    display: inline-block !important;

    vertical-align: middle !important;

    margin-right: 6px !important;

}


.mw-logo-container {

    display: inline-block !important;

    vertical-align: middle !important;

}


/* Unfloat infobox only on genuine narrow screens (<= 500px) */

@media (max-width: 500px) {

    .portable-infobox,

    .infobox {

        float: none !important;

        clear: both !important;

        margin: 1em auto !important;

        max-width: 100% !important;

    }

}


/* Hide right sidebar / column tools */

.vector-column-end,

.no-font-mode-scale.vector-column-end {

    display: none !important;

}