|
|
| Line 1: |
Line 1: |
| /* ===== DARK MODE ===== */ | | /* Dark mode disabled — needs server-side implementation */ |
| body.mw-dark-mode {
| |
| --bg-primary: #1a1a2e;
| |
| --bg-secondary: #16213e;
| |
| --bg-tertiary: #0f3460;
| |
| --text-primary: #e0e0e0;
| |
| --text-secondary: #b0b0b0;
| |
| --text-heading: #ffffff;
| |
| --link-color: #64b5f6;
| |
| --link-visited: #9575cd;
| |
| --link-new: #ef5350;
| |
| --border-color: #333355;
| |
| --table-header-bg: #1a1a3e;
| |
| --table-row-alt: #16213e;
| |
| --code-bg: #0d1117;
| |
| }
| |
| | |
| /* === Base containers === */
| |
| body.mw-dark-mode,
| |
| body.mw-dark-mode .mw-page-container,
| |
| body.mw-dark-mode .vector-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;
| |
| color: var(--text-primary) !important;
| |
| }
| |
| | |
| /* === Header === */
| |
| body.mw-dark-mode .vector-header,
| |
| body.mw-dark-mode .vector-sticky-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;
| |
| 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;
| |
| }
| |
| | |
| body.mw-dark-mode .vector-menu-tabs li a,
| |
| body.mw-dark-mode .vector-menu-portal .vector-menu-heading,
| |
| body.mw-dark-mode .vector-menu-portal li a,
| |
| body.mw-dark-mode .mw-sidebar-action-link,
| |
| 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;
| |
| }
| |
| | |
| /* === 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:visited { color: var(--link-visited) !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 h4, body.mw-dark-mode h5, body.mw-dark-mode h6,
| |
| body.mw-dark-mode .mw-headline {
| |
| color: var(--text-heading) !important;
| |
| border-bottom-color: var(--border-color) !important;
| |
| }
| |
| | |
| 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 table.wikitable {
| |
| background-color: var(--bg-secondary) !important;
| |
| color: var(--text-primary) !important;
| |
| border-color: var(--border-color) !important;
| |
| }
| |
| | |
| body.mw-dark-mode .wikitable th {
| |
| background-color: var(--table-header-bg) !important;
| |
| color: var(--text-heading) !important;
| |
| border-color: var(--border-color) !important;
| |
| }
| |
| | |
| body.mw-dark-mode .wikitable td {
| |
| border-color: var(--border-color) !important;
| |
| }
| |
| | |
| body.mw-dark-mode .wikitable tr:nth-child(even) {
| |
| background-color: var(--table-row-alt) !important;
| |
| }
| |
| | |
| /* === Category links bar === */
| |
| body.mw-dark-mode .catlinks,
| |
| body.mw-dark-mode #catlinks {
| |
| background-color: var(--bg-secondary) !important;
| |
| border-color: var(--border-color) !important;
| |
| color: var(--text-secondary) !important;
| |
| }
| |
| | |
| /* === 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 .vector-menu-tabs .mw-list-item.selected a,
| |
| body.mw-dark-mode .vector-menu-tabs .mw-list-item a:hover {
| |
| color: var(--text-heading) !important;
| |
| }
| |
| | |
| /* === 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;
| |
| color: var(--text-primary) !important;
| |
| border-color: var(--border-color) !important;
| |
| }
| |
| | |
| /* === TOC === */
| |
| body.mw-dark-mode .toc,
| |
| body.mw-dark-mode #toc {
| |
| background-color: var(--bg-secondary) !important;
| |
| border-color: var(--border-color) !important;
| |
| }
| |
| | |
| /* === Code blocks === */
| |
| body.mw-dark-mode code, body.mw-dark-mode pre {
| |
| background-color: var(--code-bg) !important;
| |
| color: var(--text-primary) !important;
| |
| }
| |
| | |
| /* === 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;
| |
| border-color: var(--border-color) !important;
| |
| }
| |
| | |
| /* === Logo wordmark === */
| |
| body.mw-dark-mode .mw-logo-wordmark {
| |
| color: var(--text-heading) !important;
| |
| }
| |
| | |
| /* === Footer === */
| |
| body.mw-dark-mode .mw-footer,
| |
| body.mw-dark-mode #footer {
| |
| background-color: var(--bg-secondary) !important;
| |
| color: var(--text-secondary) !important;
| |
| border-top-color: var(--border-color) !important;
| |
| }
| |
| | |
| /* === Scrollbars (Webkit) === */
| |
| 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;
| |
| }
| |
| | |
| body.mw-dark-mode .mw-indicators,
| |
| body.mw-dark-mode .mw-indicator {
| |
| background-color: transparent !important;
| |
| }
| |
| | |
| body.mw-dark-mode img {
| |
| opacity: 0.92;
| |
| }
| |
| | |
| /* === Dark mode toggle button === */
| |
| #mw-dark-toggle {
| |
| cursor: pointer;
| |
| padding: 4px 10px;
| |
| border: 1px solid #555;
| |
| border-radius: 4px;
| |
| font-size: 13px;
| |
| background: transparent;
| |
| color: inherit;
| |
| margin-left: 8px;
| |
| }
| |
| | |
| #mw-dark-toggle:hover {
| |
| 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);
| |
| }
| |