MediaWiki:Common.css: Difference between revisions

Revision as of 18:56, 10 September 2026

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

/* --- HIDE ALL CLUTTER FOR READ-ONLY WIKI --- */


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


/* Hide default MediaWiki footers (privacy, disclaimers, powered by) */

#footer-places,

#footer-icons,

.mw-footer-container {

    display: none !important;

}


/* 1. Hide the Hamburger Menu button (top left) */

#mw-sidebar-button,

#vector-main-menu-dropdown {

    display: none !important;

}


/* 2. Hide the Log in button / user section (top right) */

body.not-logged-in #p-personal,

body.not-logged-in .vector-user-links,

body.not-logged-in #pt-login,

body.not-logged-in #pt-login-2 {

    display: none !important;

}


/* 3. Hide the page category tabs (Main Page | Discussion) & action tabs (Read | View source | View history | Tools) */

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" checkbox in VisualEditor & standard edit forms */

.mw-widget-checkDef-watchthis,

.page-mw-watchthis,

#wpWatchthis,

label[for="wpWatchthis"],

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

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

    display: none !important;

}


/* 2. Hide Log in Button (Top Right) */

#p-vector-user-menu-overflow,

#pt-login,

#pt-login-2,

.vector-user-links,

.user-links-collapsible-item {

    display: none !important;

}


/* Optional: Clean up the top line spacing left behind by the tabs */

.mw-body-header {

    border-bottom: none !important;

    margin-bottom: 0 !important;

}


/* Hide "Watch this page" checkbox and label in edit forms */

.mw-editWatchlist,

.page-mw-watchthis,

label[for="wpWatchthis"],

#wpWatchthis {

    display: none !important;

}


/* Align Table of Contents list with the logo above */

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

    margin-left: 6px !important; 

}


/* Hide the pinned table of contents header */

.vector-pinnable-header-pinned.vector-toc-pinnable-header.vector-pinnable-header {

    display: none !important;

}


/* Remove the empty yellow margin space above the Table of Contents */

#vector-toc,

.vector-toc {

    margin-top: 0 !important;

}


/* Default (light mode) logo text */

.mw-logo-wordmark,

.mw-logo-wordmark * {

    color: #000000 !important;

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

    font-weight: 700 !important;

}


/* Dark mode & Automatic (OS dark) logo text */

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

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

    color: #ffffff !important;

}


@media (prefers-color-scheme: dark) {

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

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

        color: #ffffff !important;

    }

}


/* Modern styling for all images inside infoboxes */

.infobox img {

    border-radius: 8px;       /* Rounds image corners */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle depth shadow */

    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover transition */

}


/* --- HIDE INSPECTED UNPIN/HIDE BUTTON --- */

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

    display: none !important;

}



/* --- MINIMALIST MATERIAL (FLOATING STYLE) --- */


/* 1. Hide the Search button */

.cdx-search-input__end-button,

#searchButton {

    display: none !important;

}


/* 2. Hide "Search for pages containing..." in the dropdown */

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

    display: none !important;

}


/* 3. Search Bar Container */

.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: Becomes white, pops out, and STAYS rounded */

.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; /* Forces all corners to stay rounded */

}


/* 4. Search 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; /* REMOVES THE WHITE GAP */

}


/* Highlighted Suggestion */

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

    background-color: #eeeeee !important;

}


/* 5. Fix alignment shifting on focus */

/* Strip default Codex inner borders/shadows that cause the 1px jump */

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

}


/* Stop MediaWiki from dynamically resizing the search container width */

.vector-typeahead-search-container {

    max-width: none !important; 

    margin: 0 !important;

    transform: none !important;

}


/* 6. Fix text shifting when typing */

/* Lock internal padding & input styling so text never jumps */

.cdx-text-input__input {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding-right: 32px !important; /* Permanent space for clear button */

    transition: none !important; /* Disables padding shift animations */

}



/* Hover state for dropdown items in dark mode */

html.skin-theme-clientpref-night .cdx-menu-item:hover, 

html.skin-theme-clientpref-night .cdx-menu-item[aria-selected="true"] {

    background-color: #333639 !important;

}


/* ====================================================

   1. LIGHT THEME (Explicit Light or OS Light)

   ==================================================== */

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;

    }

}


/* ====================================================

   2. DARK THEME (Explicit Dark or OS Dark)

   ==================================================== */

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;

}


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

    }

}


/* Logo wordmark text white in dark mode & automatic dark */

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

    color: #ffffff !important;

}

@media (prefers-color-scheme: dark) {

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

        color: #ffffff !important;

    }

}


/* ====================================================

   3. SEARCH BAR DARK OVERRIDES (Night + OS Dark)

   ==================================================== */

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;

}


@media (prefers-color-scheme: dark) {

    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;

    }

}