Jump to content

MediaWiki:Common.css: Difference between revisions

From Fedoverse Wiki, the free encyclopedia
← Older editNewer edit →

Fedorista (talk | contribs)

3 user groups
1,280 edits
No edit summary
No edit summary
Tag: Reverted
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* --- UNIVERSAL DARK MODE SELECTORS --- */
 
:root[class*="theme-dark"],
/* --- 0. FONTS & IMPORTS --- */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
 
/* --- 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. 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;
}
 
/* --- 3. BRANDING & MEDIA --- */
 
.mw-logo-wordmark,
.mw-logo-wordmark * {
    color: #202122;
    font-family: "Mountains of Christmas", 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;
}
 
/* --- 4. 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;
}
 
/* --- 5. 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: #000000 !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: #000000 !important;
    }
}
 
/* Dark Theme (Manual / Clientpref Night / Skin-Invert) */
html.skin-theme-clientpref-night,
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,
html.skin-invert body,
html.theme--dark,
html.skin-invert .mw-page-container,
html[data-theme="dark"] {
html.skin-invert .mw-header {
    --dark-bg: #101418;
     background-color: #101418 !important;
    --dark-surface: #181d23;
    --dark-header: #222831;
    --dark-border: #272d35;
    --dark-text: #ffffff;
    --dark-text-muted: #c8ccd1;
     --dark-link: #6daafb;
}
}


/* Dark Theme Wordmark */
/* 1. Force Title / Wordmark to White */
:root[class*="theme-dark"] .mw-logo-wordmark,
:root[class*="theme-dark"] .mw-logo-wordmark *,
html.skin-theme-clientpref-night .mw-logo-wordmark,
html.skin-theme-clientpref-night .mw-logo-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,
html.skin-invert .mw-logo-wordmark * {
html.skin-invert .mw-logo-wordmark *,
html.theme--dark .mw-logo-wordmark,
html.theme--dark .mw-logo-wordmark * {
     color: #ffffff !important;
     color: #ffffff !important;
}
}


/* Dark Search Bar */
/* 2. Force PortableInfobox Styling */
html.skin-theme-clientpref-night .cdx-search-input,
:root[class*="theme-dark"] aside.portable-infobox,
html.skin-theme-clientpref-night .cdx-search-input:focus-within,
html.skin-theme-clientpref-night aside.portable-infobox,
html.skin-theme-clientpref-night .cdx-menu,
html.skin-invert aside.portable-infobox,
html.skin-invert .cdx-search-input,
html.theme--dark aside.portable-infobox {
html.skin-invert .cdx-search-input:focus-within,
html.skin-invert .cdx-menu {
     background-color: #181d23 !important;
     background-color: #181d23 !important;
     border-color: #272d35 !important;
     border-color: #272d35 !important;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
     color: #ffffff !important;
}
}


html.skin-theme-clientpref-night .cdx-text-input__input,
/* Infobox Headers, Titles, and Category Strips */
html.skin-invert .cdx-text-input__input {
:root[class*="theme-dark"] aside.portable-infobox .pi-header,
    color: #f8f9fa !important;
:root[class*="theme-dark"] aside.portable-infobox .pi-title,
}
html.skin-theme-clientpref-night aside.portable-infobox .pi-header,
 
html.skin-theme-clientpref-night aside.portable-infobox .pi-title,
html.skin-theme-clientpref-night .cdx-menu-item:hover,
html.skin-invert aside.portable-infobox .pi-header,
html.skin-theme-clientpref-night .cdx-menu-item[aria-selected="true"],
html.skin-invert aside.portable-infobox .pi-title {
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;
     background-color: #222831 !important;
     color: #ffffff !important;
     color: #ffffff !important;
     border-bottom: 1px solid #272d35 !important;
     border-color: #272d35 !important;
}
}


html.skin-theme-clientpref-night .portable-infobox .pi-data,
/* Infobox Labels, Values, and Nested Cells */
html.skin-theme-clientpref-night .portable-infobox .pi-data-label,
:root[class*="theme-dark"] aside.portable-infobox .pi-item,
html.skin-theme-clientpref-night .portable-infobox .pi-data-value,
:root[class*="theme-dark"] aside.portable-infobox .pi-data,
html.skin-invert .portable-infobox .pi-data,
:root[class*="theme-dark"] aside.portable-infobox .pi-data-label,
html.skin-invert .portable-infobox .pi-data-label,
:root[class*="theme-dark"] aside.portable-infobox .pi-data-value,
html.skin-invert .portable-infobox .pi-data-value {
html.skin-theme-clientpref-night aside.portable-infobox .pi-item,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data-label,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data-value,
html.skin-invert aside.portable-infobox .pi-item,
html.skin-invert aside.portable-infobox .pi-data,
html.skin-invert aside.portable-infobox .pi-data-label,
html.skin-invert aside.portable-infobox .pi-data-value {
     background-color: transparent !important;
     background-color: transparent !important;
     color: #eaecf0 !important;
     color: #c8ccd1 !important;
     border-color: #272d35 !important;
     border-color: #272d35 !important;
}
}


html.skin-theme-clientpref-night .portable-infobox a,
/* Infobox Links */
html.skin-invert .portable-infobox a {
:root[class*="theme-dark"] aside.portable-infobox a,
html.skin-theme-clientpref-night aside.portable-infobox a,
html.skin-invert aside.portable-infobox a {
     color: #6daafb !important;
     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;
    }
}
}

Revision as of 19:01, 10 September 2026

/* --- UNIVERSAL DARK MODE SELECTORS --- */
:root[class*="theme-dark"],
html.skin-theme-clientpref-night,
html.skin-invert,
html.theme--dark,
html[data-theme="dark"] {
    --dark-bg: #101418;
    --dark-surface: #181d23;
    --dark-header: #222831;
    --dark-border: #272d35;
    --dark-text: #ffffff;
    --dark-text-muted: #c8ccd1;
    --dark-link: #6daafb;
}

/* 1. Force Title / Wordmark to White */
:root[class*="theme-dark"] .mw-logo-wordmark,
:root[class*="theme-dark"] .mw-logo-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 *,
html.theme--dark .mw-logo-wordmark,
html.theme--dark .mw-logo-wordmark * {
    color: #ffffff !important;
}

/* 2. Force PortableInfobox Styling */
:root[class*="theme-dark"] aside.portable-infobox,
html.skin-theme-clientpref-night aside.portable-infobox,
html.skin-invert aside.portable-infobox,
html.theme--dark aside.portable-infobox {
    background-color: #181d23 !important;
    border-color: #272d35 !important;
    color: #ffffff !important;
}

/* Infobox Headers, Titles, and Category Strips */
:root[class*="theme-dark"] aside.portable-infobox .pi-header,
:root[class*="theme-dark"] aside.portable-infobox .pi-title,
html.skin-theme-clientpref-night aside.portable-infobox .pi-header,
html.skin-theme-clientpref-night aside.portable-infobox .pi-title,
html.skin-invert aside.portable-infobox .pi-header,
html.skin-invert aside.portable-infobox .pi-title {
    background-color: #222831 !important;
    color: #ffffff !important;
    border-color: #272d35 !important;
}

/* Infobox Labels, Values, and Nested Cells */
:root[class*="theme-dark"] aside.portable-infobox .pi-item,
:root[class*="theme-dark"] aside.portable-infobox .pi-data,
:root[class*="theme-dark"] aside.portable-infobox .pi-data-label,
:root[class*="theme-dark"] aside.portable-infobox .pi-data-value,
html.skin-theme-clientpref-night aside.portable-infobox .pi-item,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data-label,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data-value,
html.skin-invert aside.portable-infobox .pi-item,
html.skin-invert aside.portable-infobox .pi-data,
html.skin-invert aside.portable-infobox .pi-data-label,
html.skin-invert aside.portable-infobox .pi-data-value {
    background-color: transparent !important;
    color: #c8ccd1 !important;
    border-color: #272d35 !important;
}

/* Infobox Links */
:root[class*="theme-dark"] aside.portable-infobox a,
html.skin-theme-clientpref-night aside.portable-infobox a,
html.skin-invert aside.portable-infobox a {
    color: #6daafb !important;
}
Retrieved from "https://fedoverse.com/index.php?title=MediaWiki:Common.css&oldid=418"