Bureaucrats, editor, Interface administrators, Push subscription managers, Suppressors, Administrators
120
edits
MediaWiki:Common.css: Difference between revisions
Fix dark mode: search bar, sidebar, right tools panel, notifications, dropdowns, scrollbars
(Add dark mode CSS with custom properties) |
(Fix dark mode: search bar, sidebar, right tools panel, notifications, dropdowns, scrollbars) |
||
| Line 16: | Line 16: | ||
} | } | ||
/* === Base containers === */ | |||
body.mw-dark-mode, | body.mw-dark-mode, | ||
body.mw-dark-mode .mw-page-container, | body.mw-dark-mode .mw-page-container, | ||
body.mw-dark-mode .vector-body, | body.mw-dark-mode .vector-body, | ||
body.mw-dark-mode .mw-body { | body.mw-dark-mode .mw-body, | ||
body.mw-dark-mode .mw-body-content, | |||
body.mw-dark-mode #bodyContent, | |||
body.mw-dark-mode #content, | |||
body.mw-dark-mode .mw-content-ltr { | |||
background-color: var(--bg-primary) !important; | background-color: var(--bg-primary) !important; | ||
color: var(--text-primary) !important; | color: var(--text-primary) !important; | ||
} | } | ||
/* === Header === */ | |||
body.mw-dark-mode .vector-header, | body.mw-dark-mode .vector-header, | ||
body.mw-dark-mode .vector-sticky-header, | body.mw-dark-mode .vector-sticky-header, | ||
body.mw-dark-mode .mw-header { | body.mw-dark-mode .mw-header, | ||
body.mw-dark-mode .vector-header-container { | |||
background-color: var(--bg-secondary) !important; | |||
color: var(--text-primary) !important; | |||
} | |||
/* === Search bar (critical fix) === */ | |||
body.mw-dark-mode .cdx-text-input__input, | |||
body.mw-dark-mode .cdx-search-input__input, | |||
body.mw-dark-mode .vector-search-box-input, | |||
body.mw-dark-mode input[type="search"], | |||
body.mw-dark-mode .cdx-text-input, | |||
body.mw-dark-mode .cdx-search-input, | |||
body.mw-dark-mode .vector-search-box, | |||
body.mw-dark-mode .vector-search-box-vue .vector-search-box-input, | |||
body.mw-dark-mode .cdx-search-input--has-end-button .cdx-text-input, | |||
body.mw-dark-mode .cdx-text-input__input:focus { | |||
background-color: var(--bg-tertiary) !important; | |||
color: var(--text-primary) !important; | |||
border-color: var(--border-color) !important; | |||
} | |||
/* Search button */ | |||
body.mw-dark-mode .cdx-button, | |||
body.mw-dark-mode .searchButton, | |||
body.mw-dark-mode button.cdx-button { | |||
background-color: var(--bg-tertiary) !important; | |||
color: var(--text-primary) !important; | |||
border-color: var(--border-color) !important; | |||
} | |||
/* Search suggestions dropdown */ | |||
body.mw-dark-mode .cdx-menu, | |||
body.mw-dark-mode .cdx-menu__listbox, | |||
body.mw-dark-mode .cdx-menu-item, | |||
body.mw-dark-mode .vector-search-box-vue .cdx-menu, | |||
body.mw-dark-mode .cdx-typeahead-search__search-footer { | |||
background-color: var(--bg-secondary) !important; | background-color: var(--bg-secondary) !important; | ||
color: var(--text-primary) !important; | color: var(--text-primary) !important; | ||
border-color: var(--border-color) !important; | |||
} | |||
body.mw-dark-mode .cdx-menu-item:hover, | |||
body.mw-dark-mode .cdx-menu-item--highlighted { | |||
background-color: var(--bg-tertiary) !important; | |||
} | |||
/* === Sidebar / Left column === */ | |||
body.mw-dark-mode .vector-column-start, | |||
body.mw-dark-mode .vector-main-menu, | |||
body.mw-dark-mode .vector-main-menu-container, | |||
body.mw-dark-mode .vector-pinnable-header, | |||
body.mw-dark-mode .vector-toc, | |||
body.mw-dark-mode .vector-toc-landmark, | |||
body.mw-dark-mode #mw-panel, | |||
body.mw-dark-mode .vector-menu-portal, | |||
body.mw-dark-mode .sidebar-toc { | |||
background-color: var(--bg-secondary) !important; | |||
color: var(--text-secondary) !important; | |||
} | } | ||
| Line 36: | Line 97: | ||
body.mw-dark-mode .vector-menu-portal li a, | body.mw-dark-mode .vector-menu-portal li a, | ||
body.mw-dark-mode .mw-sidebar-action-link, | body.mw-dark-mode .mw-sidebar-action-link, | ||
body.mw-dark-mode #mw-panel .vector-menu-portal .vector-menu-heading { | body.mw-dark-mode #mw-panel .vector-menu-portal .vector-menu-heading, | ||
body.mw-dark-mode .vector-toc .vector-toc-link, | |||
body.mw-dark-mode .sidebar-toc-link { | |||
color: var(--text-secondary) !important; | color: var(--text-secondary) !important; | ||
} | } | ||
/* === Right sidebar / Tools === */ | |||
body.mw-dark-mode .vector-column-end, | |||
body.mw-dark-mode .vector-page-tools, | |||
body.mw-dark-mode .vector-page-tools-landmark, | |||
body.mw-dark-mode #mw-panel-toc, | |||
body.mw-dark-mode .vector-settings, | |||
body.mw-dark-mode .vector-page-toolbar-container { | |||
background-color: var(--bg-secondary) !important; | |||
color: var(--text-secondary) !important; | |||
} | |||
/* Any remaining white panels or containers */ | |||
body.mw-dark-mode div[class*="vector-"], | |||
body.mw-dark-mode .mw-portlet, | |||
body.mw-dark-mode .mw-portlet-body { | |||
background-color: transparent !important; | |||
} | |||
/* === Links === */ | |||
body.mw-dark-mode a { color: var(--link-color) !important; } | body.mw-dark-mode a { color: var(--link-color) !important; } | ||
body.mw-dark-mode a:visited { color: var(--link-visited) !important; } | body.mw-dark-mode a:visited { color: var(--link-visited) !important; } | ||
body.mw-dark-mode a.new { color: var(--link-new) !important; } | body.mw-dark-mode a.new { color: var(--link-new) !important; } | ||
/* === Headings & borders === */ | |||
body.mw-dark-mode h1, body.mw-dark-mode h2, body.mw-dark-mode h3, | body.mw-dark-mode h1, body.mw-dark-mode h2, body.mw-dark-mode h3, | ||
body.mw-dark-mode h4, body.mw-dark-mode h5, body.mw-dark-mode h6, | body.mw-dark-mode h4, body.mw-dark-mode h5, body.mw-dark-mode h6, | ||
| Line 51: | Line 134: | ||
} | } | ||
body.mw-dark-mode hr, | |||
body.mw-dark-mode .mw-heading::after, | |||
body.mw-dark-mode h2, | |||
body.mw-dark-mode .mw-heading2 { | |||
border-bottom-color: var(--border-color) !important; | |||
} | |||
/* === Tables === */ | |||
body.mw-dark-mode .wikitable, | body.mw-dark-mode .wikitable, | ||
body.mw-dark-mode table.wikitable { | body.mw-dark-mode table.wikitable { | ||
| Line 72: | Line 163: | ||
} | } | ||
body.mw-dark-mode . | /* === Category links bar === */ | ||
body.mw-dark-mode # | body.mw-dark-mode .catlinks, | ||
body.mw-dark-mode #catlinks { | |||
color: var(--text- | background-color: var(--bg-secondary) !important; | ||
border-color: var(--border-color) !important; | |||
color: var(--text-secondary) !important; | |||
} | } | ||
body.mw-dark-mode . | /* === Edit/action tabs === */ | ||
body.mw-dark-mode .vector-menu-tabs, | |||
body.mw-dark-mode .vector-menu-tabs .mw-list-item, | |||
body.mw-dark-mode .vector-menu-tabs .mw-list-item a, | |||
body.mw-dark-mode #p-views li a, | |||
body.mw-dark-mode #p-namespaces li a { | |||
color: var(--text-secondary) !important; | |||
background-color: transparent !important; | |||
} | } | ||
body.mw-dark-mode | body.mw-dark-mode .vector-menu-tabs .mw-list-item.selected a, | ||
body.mw-dark-mode .vector-menu- | body.mw-dark-mode .vector-menu-tabs .mw-list-item a:hover { | ||
color: var(--text-heading) !important; | |||
} | } | ||
body.mw-dark-mode input, body.mw-dark-mode textarea, body.mw-dark-mode select { | /* === Inputs & forms (global) === */ | ||
body.mw-dark-mode input, | |||
body.mw-dark-mode textarea, | |||
body.mw-dark-mode select, | |||
body.mw-dark-mode .oo-ui-inputWidget-input, | |||
body.mw-dark-mode .oo-ui-textInputWidget input, | |||
body.mw-dark-mode .oo-ui-widget { | |||
background-color: var(--bg-secondary) !important; | background-color: var(--bg-secondary) !important; | ||
color: var(--text-primary) !important; | color: var(--text-primary) !important; | ||
| Line 94: | Line 198: | ||
} | } | ||
body.mw-dark-mode . | /* === TOC === */ | ||
body.mw-dark-mode | body.mw-dark-mode .toc, | ||
body.mw-dark-mode #toc { | |||
background-color: var(--bg-secondary) !important; | background-color: var(--bg-secondary) !important; | ||
color: var(-- | border-color: var(--border-color) !important; | ||
} | } | ||
/* === Code blocks === */ | |||
body.mw-dark-mode code, body.mw-dark-mode pre { | body.mw-dark-mode code, body.mw-dark-mode pre { | ||
background-color: var(--code-bg) !important; | background-color: var(--code-bg) !important; | ||
| Line 105: | Line 211: | ||
} | } | ||
body.mw-dark-mode . | /* === Notification badge === */ | ||
body.mw-dark-mode .mw-echo-notifications-badge, | |||
body.mw-dark-mode .mw-echo-notification-badge-nojs { | |||
background-color: var(--bg-tertiary) !important; | |||
} | |||
/* === User menu / personal tools === */ | |||
body.mw-dark-mode #p-personal, | |||
body.mw-dark-mode .vector-user-links, | |||
body.mw-dark-mode .vector-user-menu, | |||
body.mw-dark-mode .vector-menu-content, | |||
body.mw-dark-mode .vector-dropdown-content, | |||
body.mw-dark-mode .vector-menu--hide { | |||
background-color: var(--bg-secondary) !important; | |||
color: var(--text-primary) !important; | |||
border-color: var(--border-color) !important; | |||
} | |||
/* Dropdown menus */ | |||
body.mw-dark-mode .vector-dropdown .vector-dropdown-content { | |||
background-color: var(--bg-secondary) !important; | background-color: var(--bg-secondary) !important; | ||
border-color: var(--border-color) !important; | border-color: var(--border-color) !important; | ||
} | } | ||
/* === Logo wordmark === */ | |||
body.mw-dark-mode .mw-logo-wordmark { | body.mw-dark-mode .mw-logo-wordmark { | ||
color: var(--text-heading) !important; | color: var(--text-heading) !important; | ||
} | } | ||
body.mw-dark-mode | /* === Footer === */ | ||
body.mw-dark-mode .mw-footer, | |||
body.mw-dark-mode | body.mw-dark-mode #footer { | ||
background-color: var(--bg-secondary) !important; | background-color: var(--bg-secondary) !important; | ||
color: var(--text-secondary) !important; | |||
border-top-color: var(--border-color) !important; | |||
} | } | ||
body.mw-dark-mode .mw- | /* === Scrollbars (Webkit) === */ | ||
background- | body.mw-dark-mode ::-webkit-scrollbar { | ||
width: 8px; | |||
height: 8px; | |||
} | |||
body.mw-dark-mode ::-webkit-scrollbar-track { | |||
background: var(--bg-primary); | |||
} | |||
body.mw-dark-mode ::-webkit-scrollbar-thumb { | |||
background: var(--border-color); | |||
border-radius: 4px; | |||
} | |||
/* === Misc patches === */ | |||
body.mw-dark-mode .mw-editsection a { | |||
color: var(--text-secondary) !important; | color: var(--text-secondary) !important; | ||
} | |||
body.mw-dark-mode .mw-indicators, | |||
body.mw-dark-mode .mw-indicator { | |||
background-color: transparent !important; | |||
} | } | ||
| Line 130: | Line 275: | ||
} | } | ||
/* Dark mode toggle button */ | /* === Dark mode toggle button === */ | ||
#mw-dark-toggle { | #mw-dark-toggle { | ||
cursor: pointer; | cursor: pointer; | ||
| Line 144: | Line 289: | ||
#mw-dark-toggle:hover { | #mw-dark-toggle:hover { | ||
background-color: rgba(128,128,128,0.2); | background-color: rgba(128,128,128,0.2); | ||
} | |||
/* === Nuclear option: catch any remaining white backgrounds === */ | |||
body.mw-dark-mode *:not(img):not(video):not(canvas):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) { | |||
scrollbar-color: var(--border-color) var(--bg-primary); | |||
} | } | ||