MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ================================= MEDIAWIKI DARK THEME - VECTOR + MINERVA ================================= */ /* global transitions */ * { transition: all 0.3s ease !important; } /* ================================= SHARED STYLES (Vector + Minerva) ================================= */ /* main background and text */ body { background: #1a1a1a !important; color: #ffffff !important; } /* links */ a { color: #ff9999 !important; } a:hover { color: #ffffff !important; } a:visited { color: #ff7777 !important; } /* headings */ h1, h2, h3, h4, h5, h6 { color: #ffffff !important; border-bottom: 1px solid #444 !important; } /* tables */ table { background: #2a2a2a !important; border: 1px solid #444 !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6) !important; } th { background: #333 !important; color: #ffffff !important; border-bottom: 1px solid #cc3333 !important; } td { color: #ffffff !important; border-bottom: 1px solid #444 !important; } /* code blocks */ pre, code { background: #1a1a1a !important; border: 1px solid #444 !important; color: #ffffff !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important; } /* ================================= VECTOR SKIN STYLES ================================= */ /* content area */ #content, .mw-body { background: #2a2a2a !important; border: 1px solid #444 !important; color: #ffffff !important; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6) !important; } /* sidebar */ #mw-panel, .vector-menu-portal { background: #222 !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important; } #mw-panel .portal h3, .vector-menu-portal h3 { background: #333 !important; color: #ffffff !important; border-bottom: 2px solid #cc3333 !important; } #mw-panel .portal .body li a, .vector-menu-portal .body li a { color: #ffffff !important; } #mw-panel .portal .body li a:hover, .vector-menu-portal .body li a:hover { background: #ff6666 !important; color: #ffffff !important; } /* header */ .header-container, .vector-header { background: #1a1a1a !important; border-bottom: 1px solid #444 !important; } /* search box */ #searchInput, .vector-search-box-input { background: #333 !important; border: 1px solid #555 !important; color: #ffffff !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important; } #searchInput:focus, .vector-search-box-input:focus { border-color: #cc3333 !important; background: #444 !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 5px rgba(204, 51, 51, 0.3) !important; } /* tabs */ #p-views li, #p-cactions li, .vector-menu-tabs li { background: #2a2a2a !important; border: 1px solid #555 !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important; } /* selected tab */ #p-views li.selected, #p-cactions li.selected, .vector-menu-tabs li.selected { background: #444 !important; border-bottom: 2px solid #888 !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important; } /* remove default tab styling */ .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: none !important; } .vector-menu-tabs-legacy li { background-image: none !important; background: #2a2a2a !important; } .vector-menu-tabs-legacy li.selected { background: #444 !important; } #p-views li a, #p-cactions li a, .vector-menu-tabs li a { color: #ffffff !important; } #p-views li:hover, #p-cactions li:hover, .vector-menu-tabs li:hover { background: #3a3a3a !important; } /* don't change selected tab on hover */ #p-views li.selected:hover, #p-cactions li.selected:hover, .vector-menu-tabs li.selected:hover { background: #444 !important; } /* user menu */ #p-personal, .vector-user-menu { background: transparent !important; } #p-personal li a, .vector-user-menu li a { color: #ffffff !important; } #p-personal li a:hover, .vector-user-menu li a:hover { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; text-shadow: 0 0 3px rgba(255, 255, 255, 0.3) !important; } /* footer */ #footer { background: #1a1a1a !important; border-top: 1px solid #444 !important; color: #cccccc !important; } /* footer last modified text */ .footer-info-lastmod { color: rgb(175, 175, 175) !important; } /* footer items override */ .mw-footer li, #footer-info li { color: rgb(175, 175, 175) !important; } /* ================================= MINERVA SKIN STYLES ================================= */ /* main minerva elements */ .minerva-header, .header { background: #1a1a1a !important; border-bottom: 1px solid #444 !important; } /* minerva content */ #content, .content, main.content { background: #2a2a2a !important; color: #ffffff !important; } /* minerva page wrapper */ .page-container, .minerva-page-container { background: #1a1a1a !important; } /* minerva navigation */ .main-menu-mask, .navigation-drawer { background: rgba(26, 26, 26, 0.95) !important; } #mw-mf-page-center { background: #1a1a1a !important; } .main-menu, .navigation-drawer .menu { background: #222 !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important; } .main-menu h3, .navigation-drawer h3 { background: #333 !important; color: #ffffff !important; border-bottom: 2px solid #cc3333 !important; } .main-menu li a, .navigation-drawer li a { color: #ffffff !important; border-bottom: 1px solid #444 !important; } .main-menu li a:hover, .navigation-drawer li a:hover { background: #ff6666 !important; color: #ffffff !important; } /* minerva search */ .minerva-search-form input, .search-box input { background: #333 !important; border: 1px solid #555 !important; color: #ffffff !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important; } .minerva-search-form input:focus, .search-box input:focus { border-color: #cc3333 !important; background: #444 !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 5px rgba(204, 51, 51, 0.3) !important; } /* minerva tabs/actions */ .page-actions-menu, .minerva-tab-container { background: #2a2a2a !important; border: 1px solid #555 !important; } .page-actions-menu li, .minerva-tab-container li { background: #2a2a2a !important; border-right: 1px solid #555 !important; } .page-actions-menu li.selected, .minerva-tab-container li.selected { background: #444 !important; border-bottom: 2px solid #888 !important; } .page-actions-menu li a, .minerva-tab-container li a { color: #ffffff !important; } .page-actions-menu li:hover, .minerva-tab-container li:hover { background: #3a3a3a !important; } /* minerva footer */ .minerva-footer, .last-modified-bar { background: #1a1a1a !important; border-top: 1px solid #444 !important; color: #cccccc !important; } /* minerva user menu */ .minerva-user-menu, .user-links { background: transparent !important; } .minerva-user-menu li a, .user-links li a { color: #ffffff !important; } .minerva-user-menu li a:hover, .user-links li a:hover { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; text-shadow: 0 0 3px rgba(255, 255, 255, 0.3) !important; } /* minerva buttons */ .mw-ui-button, .minerva-button { background-color: #cc3333 !important; color: white !important; border: 1px solid #aa2222 !important; } .mw-ui-button:hover, .minerva-button:hover { background-color: #dd4444 !important; } /* minerva edit button */ .minerva-icon-edit, .edit-link { background-color: #cc3333 !important; border-radius: 4px !important; } /* minerva page issues */ .page-issues, .minerva-ambox { background: #333 !important; border: 1px solid #555 !important; color: #ffffff !important; } /* minerva toast notifications */ .mw-notification, .minerva-toast { background: #333 !important; border: 1px solid #555 !important; color: #ffffff !important; } /* ================================= SHARED UI ELEMENTS (Both Skins) ================================= */ /* visual editor save dialog */ .ve-ui-mwSaveDialog-options { background-color: rgb(50, 50, 50) !important; } /* ooui window elements */ .oo-ui-window-body, .oo-ui-window-head, .oo-ui-window-foot { background-color: rgb(50, 50, 50) !important; } /* edit page copyright warning */ #editpage-copywarn { color: white !important; background: rgba(0, 0, 0, 0.75) !important; border-radius: 8px !important; padding: 10px !important; } /* ooui button elements */ .oo-ui-buttonElement-button { background-color: #cc3333 !important; color: white !important; border: 1px solid #aa2222 !important; } /* alternative selector for close buttons */ .oo-ui-buttonElement-button.oo-ui-iconElement { background-color: black !important; } /* visual editor save button */ .ve-ui-toolbar-saveButton { background: #cc3333 !important; } /* ooui tool titles */ .oo-ui-tool-title { color: white !important; } /* ooui close icon - remove filter, keep it black */ .oo-ui-iconElement-icon.oo-ui-icon-close { filter: none !important; } /* hide not logged in text */ #pt-anonuserpage { display: none !important; } /* search */ #mw-searchoptions { background-color: #1e1e1e !important; } .mw-search-profile-tabs { background-color: #181818 !important; } .mw-htmlform-submit-buttons { background-color: #1e1e1e !important; } .oo-ui-popupWidget-popup { background-color: #1e1e1e !important; } .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { background-color: #1e1e1e !important; } .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td { background-color: #380000 !important; }