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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* Hides the rollback option. Not needed when we don't have large vandalism issues. */
.mw-rollback-link {
display: none;
}
/* Implements section-collapse and stop-section-collapse */
.section-collapse {
border-color: #000000;
border-style: solid;
border-width: 2px 2px 0 0;
content: "";
cursor: pointer;
display: inline-block;
height: 7px;
margin-right: 5px;
position: relative;
right: 0;
top: 5px;
transform: rotate(-45deg);
vertical-align: middle;
width: 7px;
}
.section-collapsed {
display: none;
}
.collapsed-icon {
margin-top: 1px;
transform: rotate(135deg);
}
.mw-collapsible-toggle {
padding-left: 5px;
}
/* Hide the page header on the Main_Page */
body.page-Main_Page h1 { display: none; }
/* Make TabberNeue not have arrows on the list and instead wrap it */
.tabber__tabs {
margin: 0 auto;
flex-wrap: wrap;
}
/* Hide default tab indicator */
.tabber__indicator { display: none; }
/* Change style of selected tab */
.tabber__tab[aria-selected='true'] {
background-color: #2859a8;
color: white !important;
}
/* Some tab button fixes */
.tabber__tab {
margin: 0 auto !important;
font-size: 85%;
padding-bottom: 1px;
}
/* Change the size of the button text, note that this also proportionally changes the button padding */
/*.tabber__tab { font-size: calc(1em * 0.7); }*/
/* DARKMODE STYLING STARTS HERE */
/* Color variables, use with var() */
:root {
--text-color: #cbd9f4;
--link-color: #8cabe6;
--regular-bg: #0B0B3B;
--light-bg: #181857;
--newpage-color: #aa0000;
--button-bg: #343d56;
--border-button: #3f5073;
--code-bg: #777777;
--code-text: #f2f2f2;
--code-border: #7e8592;
--ooui-input: #384766;
--search-hover-bg: #0d0d36;
--border-general: #3f4186;
--editor-toolbar: #04046b;
--diff-addborder: #73a1ff;
--diff-delborder: #d35b4a;
--diff-addbg: #305ab1;
--diff-delbg: #691206;
--header-border: #596e96;
--button-hover: #2d4167;
--original-link: #0645ad;
}
/* Set color-scheme specification */
html.client-darkmode { color-scheme: dark; }
/* Cancel inversion to use better styling */
:root, img, .diffchange { filter: unset !important; }
/* The main coloring, sets most of the page to use the --regular-bg background color and the text color to --text-color */
.client-darkmode, .client-darkmode body, .client-darkmode html, .client-darkmode .mw-body, .client-darkmode #mw-navigation, .client-darkmode #mw-page-base, .client-darkmode #mw-head-base, .client-darkmode .vector-legacy-sidebar, .client-darkmode h1, .client-darkmode h2, .client-darkmode h3, .client-darkmode h4, .client-darkmode h5, .client-darkmode h6, .client-darkmode .mw-footer, .client-darkmode table, .client-darkmode table.wikitable, .client-darkmode figure[typeof~='mw:File/Thumb'], .client-darkmode .mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .client-darkmode .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption, .client-darkmode figure[typeof~='mw:File/Frame'], .client-darkmode .vector-menu-heading-label, .client-darkmode .mw-footer li, .client-darkmode .mw-wiki-logo, .client-darkmode .mw-datatable td {
background-color: var(--regular-bg);
color: var(--text-color);
}
/* Makes all darkmode links use the --link-color, !important must be used here */
:is(.client-darkmode) :is(a, a:visited, .mw-collapsible-text) {
color: var(--link-color) !important;
}
/* Makes the category section + table of contents the --light-bg color in darkmode, !important must be used here */
:is(.client-darkmode) :is(.catlinks, .toc, .cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled) {
background-color: var(--light-bg) !important;
}
/* The second main coloring, sets elements to use the --light-bg background color instead, such as table headers or mw-code blocks */
.client-darkmode .vector-search-box-input, .client-darkmode #searchInput, .client-darkmode .wikitable th, .client-darkmode .editOptions, .client-darkmode .oo-ui-textInputWidget .oo-ui-inputWidget-input, .client-darkmode textarea.mw-editfont-monospace, .client-darkmode pre, .client-darkmode .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .client-darkmode .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle, .client-darkmode .mw-search-profile-tabs, .client-darkmode .mw-code, .client-darkmode .tocnumber, .client-darkmode .suggestions-result, .client-darkmode .suggestions-special, .client-darkmode .special-query, .client-darkmode .mw-changeslist-legend.mw-specialpages-notes, .client-darkmode .mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button, .client-darkmode #filetoc, .client-darkmode .mw_metadata td, .client-darkmode .mw_metadata th, .client-darkmode .wikiEditor-ui-toolbar, .client-darkmode #pagehistory li.selected, .client-darkmode .mw-datatable th {
background-color: var(--light-bg);
color: var(--text-color);
}
/* Makes the currently active navbar button (Page/Read/Edit) blend into the page as it does in lightmode */
:is(.client-darkmode) :is(.vector-menu-checkbox, .vector-menu-content, .vector-menu-tabs-legacy .selected) {
background-color: var(--regular-bg);
}
:is(.client-darkmode) :is(.vector-menu-tabs-legacy .selected a:visited, .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title, .oo-ui-tabOptionWidget, .cdx-text-input__input:enabled) { color: var(--text-color) !important; }
/* Inverts a bunch of button icons to be visible in darkmode, including the WikiEditor dragbar and search bar magnifying glass */
.client-darkmode .searchButton, .client-darkmode .vector-menu-dropdown .vector-menu-heading::after, .client-darkmode .oo-ui-textInputWidget-type-search .oo-ui-iconElement-icon, .client-darkmode .oo-ui-textInputWidget-type-search .oo-ui-indicatorElement-indicator, .client-darkmode .mw-indicator, .client-darkmode .ext-WikiEditor-ResizingDragBar, .client-darkmode .oo-ui-buttonElement-button .oo-ui-iconElement-icon, .client-darkmode .oo-ui-indicatorElement-indicator.oo-ui-indicator-down { filter: invert( 1 ) hue-rotate( 180deg ) }
/* Removes the background from the top nav buttons, because it looks bad in darkmode */
:is(.client-darkmode) :is(.vector-menu-tabs-legacy li, #right-navigation.vector-menu-dropdown, #mw-page-base) { background-image: unset; }
/* Makes new-page links remain red in darkmode, with a dimmed red color defined in --newpage-color, !important must be used here */
:is(.client-darkmode) :is(li.new a, a.new, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button) { color: var(--newpage-color) !important; }
/* Sets the colors of the Show preview/Show changes buttons */
:is(.client-darkmode) :is(#wpPreviewWidget > input, #wpDiffWidget > input) {
background-color: var(--button-bg) !important;
color: var(--text-color) !important;
border-color: var(--border-button);
}
/* Sets the <code> colors */
.client-darkmode code {
border-color: var(--code-border);
color: var(--code-text);
background-color: var(--code-bg);
}
/* Makes unselected checkbox + radio buttons nicer */
:is(.client-darkmode) :is(.oo-ui-checkboxInputWidget [type='checkbox'] + span, .oo-ui-radioInputWidget [type='radio'] + span, .cdx-checkbox__icon) { background-color: var(--ooui-input); }
/* Sets the colors of the search results when you're hovering over them */
:is(.client-darkmode) :is(.suggestions-result-current, .suggestions-result-current *) {
background-color: var(--search-hover-bg) !important;
color: var(--text-color) !important;
}
/* Slight tweak to prevent white flashes when loading thumb images + hovering on system messages page + gallery and login pages */
:is(.client-darkmode) :is(figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element, .mw-changeslist-legend, li.gallerybox div.thumb, .cdx-text-input__input:enabled, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected, .mw-scribunto-console-fieldset, .mw-scribunto-error, .mw-scribunto-message) {
background-color: unset;
}
/* Quick hack to make bullet points visible in darkmode, I couldn't figure out any other way of doing this, putting an inversion filter on li::marker didn't work */
.client-darkmode ul { list-style-image: unset; }
/* Make general border colors less eye-piercing */
.client-darkmode #content.mw-body {
border-color: var(--border-general);
}
/* Set general border color part 2 */
:is(.client-darkmode) :is(h1, h2, #searchInput, .toc, .catlinks, table, th, tr, td, .mw-code, .editOptions, figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption, figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element, pre, .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .vector-menu-dropdown:hover .vector-menu-content, .oo-ui-textInputWidget .oo-ui-inputWidget-input, .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .oo-ui-menuSelectWidget, .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle, .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget ) { border-color: var(--header-border); }
/* Part 2 of the previous, it needs to be separated or the main body breaks */
:is(.client-darkmode) :is(.vector-menu-tabs, .vector-menu-tabs a, .vector-menu-dropdown #p-cactions-label.vector-menu-heading) {
background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,var(--border-general) 100%);
}
/* Makes the WikiEditor toolbar a dark blue, also fixes messages on the system messages page */
:is(.client-darkmode) :is(.wikiEditor-ui-toolbar, #mw-allmessagestable .am_actual) { background-color: var(--editor-toolbar); }
/* Makes the WikiEditor toolbar buttons visible */
.client-darkmode .wikiEditor-ui-toolbar .tabs span.tab a::before { filter: invert(1); }
/* Diff styling block */
.client-darkmode .diff-deletedline { border-color: var(--diff-delborder) !important; }
.client-darkmode .diff-addedline { border-color: var(--diff-addborder) !important; }
.client-darkmode .diff-context {
background-color: var(--light-bg);
border: 0;
color: var(--text-color);
}
.client-darkmode .diff-deletedline .diffchange { background-color: var(--diff-delbg); }
.client-darkmode .diff-addedline .diffchange { background-color: var(--diff-addbg); }
/* Diff block end */
/* Fix gallery hover */
:is(.client-darkmode) :is(ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper, ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper, ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper) { background: rgb(0 0 0 / 80%); }
/* Make big buttons (mostly used on recent changes page) not destroy eyes on hover, same with system messages page */
:is(.client-darkmode) :is(.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, #mw-allmessagestable tbody:hover td, #mw-allmessagestable tbody:hover .am_default, #mw-allmessagestable tbody:hover .am_actual, .cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover) { background-color: var(--button-hover); }
/* Make RC page filters better */
:is(.client-darkmode) :is(.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled, .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled) {
background-color: var(--light-bg);
border-color: var(--diff-addbg);
color: var(--text-color);
}
/* Ease RC button borders */
.client-darkmode .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { border-color: var(--border-button); }
/* Make mboxes not have weird looking links */
:is(.client-darkmode) :is(.mbox a,.mbox a:visited) { color: var(--original-link) !important; }
/* Fix tabs */
.client-darkmode a.tabber__tab[aria-selected='true'] { color: white !important; }
/* Fix RC page buttons + some dropdowns + some Lua console stuff */
:is(.client-darkmode) :is(.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined, .oo-ui-tagMultiselectWidget, .oo-ui-tabSelectWidget-framed, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-menuSelectWidget, #mw-scribunto-input) { background-color: var(--light-bg); }
/* Extra system messages page fixes */
.client-darkmode #mw-allmessagestable .am_default { background-color: var(--code-bg); }
/* Prefs page fixes */
.client-darkmode #preferences .mw-htmlform-submit-buttons {
background-color: var(--light-bg);
border-top: 1px solid var(--header-border);
}
.client-darkmode .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: var(--button-bg);
color: var(--text-color);
border-color: var(--border-button);
}
.client-darkmode .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--original-link);
color: var(--text-color);
}
:is(.client-darkmode) :is(.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover, .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover) {
color: var(--text-color);
background-color: var(--button-hover);
}
/* Prefs page fixes end */
/* Dropdown fixes */
:is(.client-darkmode) :is(.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, .oo-ui-dropdownInputWidget select) { background-color: var(--editor-toolbar); }
/* Fixes dropdown text + Lua console */
:is(.client-darkmode) :is(.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget, .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover, .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .mw-scribunto-input, .mw-scribunto-console-fieldset, .mw-scribunto-message) { color: unset; }
/* Fixes dropdown hover */
:is(.client-darkmode) :is(.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover, .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle, .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted) { background-color: var(--button-hover); }