MediaWiki:Common.css: Difference between revisions

From Hazeron Wiki
Jump to navigation Jump to search
(added necessary !mportant)
(Testing change for new extension)
 
(43 intermediate revisions by the same user not shown)
Line 55: Line 55:
}
}


/* Center the buttons better */
/* Some tab button fixes */
.tabber__tab { margin: 0 auto !important; }
.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  */
/* Change the size of the button text, note that this also proportionally changes the button padding  */
Line 85: Line 89:
     --diff-delbg: #691206;
     --diff-delbg: #691206;
     --header-border: #596e96;
     --header-border: #596e96;
    --button-hover: #2d4167;
    --original-link: #0645ad;
}
}
/* Set color-scheme specification */
html.theme-dark { color-scheme: dark; }


/* Cancel inversion to use better styling */
/* Cancel inversion to use better styling */
Line 91: Line 100:


/* The main coloring, sets most of the page to use the --regular-bg background color and the text color to --text-color */
/* 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 {  
.theme-dark, .theme-dark body, .theme-dark html, .theme-dark .mw-body, .theme-dark #mw-navigation, .theme-dark #mw-page-base, .theme-dark #mw-head-base, .theme-dark .vector-legacy-sidebar, .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6, .theme-dark .mw-footer, .theme-dark table, .theme-dark table.wikitable, .theme-dark figure[typeof~='mw:File/Thumb'], .theme-dark .mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .theme-dark .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption, .theme-dark figure[typeof~='mw:File/Frame'], .theme-dark .vector-menu-heading-label, .theme-dark .mw-footer li, .theme-dark .mw-wiki-logo, .theme-dark .mw-datatable td {  
     background-color: var(--regular-bg);  
     background-color: var(--regular-bg);  
     color: var(--text-color);
     color: var(--text-color);
Line 97: Line 106:


/* Makes all darkmode links use the --link-color, !important must be used here */
/* Makes all darkmode links use the --link-color, !important must be used here */
:is(.client-darkmode) :is(a, a:visited, .mw-collapsible-text) {
:is(.theme-dark) :is(a, a:visited, .mw-collapsible-text) {
     color: var(--link-color) !important;
     color: var(--link-color) !important;
}
}


/* Makes the category section + table of contents the --light-bg color in darkmode, !important must be used here */
/* Makes the category section + table of contents the --light-bg color in darkmode, !important must be used here */
:is(.client-darkmode) :is(.catlinks, .toc) {
:is(.theme-dark) :is(.catlinks, .toc, .cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled) {
     background-color: var(--light-bg) !important;  
     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 */
/* 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 {
.theme-dark .vector-search-box-input, .theme-dark #searchInput, .theme-dark .wikitable th, .theme-dark .editOptions, .theme-dark .oo-ui-textInputWidget .oo-ui-inputWidget-input, .theme-dark textarea.mw-editfont-monospace, .theme-dark pre, .theme-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .theme-dark .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle, .theme-dark .mw-search-profile-tabs, .theme-dark .mw-code, .theme-dark .tocnumber, .theme-dark .suggestions-result, .theme-dark .suggestions-special, .theme-dark .special-query, .theme-dark .mw-changeslist-legend.mw-specialpages-notes, .theme-dark .mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button, .theme-dark #filetoc, .theme-dark .mw_metadata td, .theme-dark .mw_metadata th, .theme-dark .wikiEditor-ui-toolbar, .theme-dark #pagehistory li.selected, .theme-dark .mw-datatable th {
     background-color: var(--light-bg);  
     background-color: var(--light-bg);  
     color: var(--text-color);
     color: var(--text-color);
Line 113: Line 122:


/* Makes the currently active navbar button (Page/Read/Edit) blend into the page as it does in lightmode */
/* 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) {
:is(.theme-dark) :is(.vector-menu-checkbox, .vector-menu-content, .vector-menu-tabs-legacy .selected) {
     background-color: var(--regular-bg);  
     background-color: var(--regular-bg);  
}
}


:is(.client-darkmode) :is(.vector-menu-tabs-legacy .selected a:visited, .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title) { color: var(--text-color) !important; }
:is(.theme-dark) :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 */
/* 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 ) }
.theme-dark .searchButton, .theme-dark .vector-menu-dropdown .vector-menu-heading::after, .theme-dark .oo-ui-textInputWidget-type-search .oo-ui-iconElement-icon, .theme-dark .oo-ui-textInputWidget-type-search .oo-ui-indicatorElement-indicator, .theme-dark .mw-indicator, .theme-dark .ext-WikiEditor-ResizingDragBar, .theme-dark .oo-ui-buttonElement-button .oo-ui-iconElement-icon, .theme-dark .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 */
/* 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: unset; background-image: unset; }
:is(.theme-dark) :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 */
/* 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; }
:is(.theme-dark) :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 */
/* Sets the colors of the Show preview/Show changes buttons */
:is(.client-darkmode) :is(#wpPreviewWidget > input, #wpDiffWidget) > input {  
:is(.theme-dark) :is(#wpPreviewWidget > input, #wpDiffWidget > input) {  
     background-color: var(--button-bg) !important;
     background-color: var(--button-bg) !important;
     color: var(--text-color) !important;
     color: var(--text-color) !important;
Line 136: Line 145:


/* Sets the <code> colors */
/* Sets the <code> colors */
.client-darkmode code {
.theme-dark code {
     border-color: var(--code-border);
     border-color: var(--code-border);
     color: var(--code-text);
     color: var(--code-text);
Line 142: Line 151:
}
}


/* I actually forgot what this does but it's needed */
/* Makes unselected checkbox + radio buttons nicer */
.client-darkmode .oo-ui-checkboxInputWidget [type='checkbox'] + span { background-color: var(--ooui-input); }
:is(.theme-dark) :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 */
/* Sets the colors of the search results when you're hovering over them */
:is(.client-darkmode) :is(.suggestions-result-current, .suggestions-result-current *) {  
:is(.theme-dark) :is(.suggestions-result-current, .suggestions-result-current *) {  
     background-color: var(--search-hover-bg) !important;
     background-color: var(--search-hover-bg) !important;
     color: var(--text-color) !important;
     color: var(--text-color) !important;
}
}


/* Slight tweak to prevent white flashes when loading thumb images, and removes a bad-looking border */
/* 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) {  
:is(.theme-dark) :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) {  
    border: 0;
     background-color: unset;
     background-color: var(--regular-bg)
}
}


/* 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 */
/* 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; }
.theme-dark ul { list-style-image: unset; }


/* Make general border colors less eye-piercing */
/* Make general border colors less eye-piercing */
.client-darkmode #content.mw-body {
.theme-dark #content.mw-body {
     border-color: var(--border-general);
     border-color: var(--border-general);
}
}
/* Set general border color part 2 */
:is(.theme-dark) :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 */
/* 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) {
:is(.theme-dark) :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%);
     background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,var(--border-general) 100%);
}
}


/* Makes the WikiEditor toolbar a dark blue */
/* Makes the WikiEditor toolbar a dark blue, also fixes messages on the system messages page */
.client-darkmode .wikiEditor-ui-toolbar { background-color: var(--editor-toolbar); }
:is(.theme-dark) :is(.wikiEditor-ui-toolbar, #mw-allmessagestable .am_actual) { background-color: var(--editor-toolbar); }


/* Makes the WikiEditor toolbar buttons visible */
/* Makes the WikiEditor toolbar buttons visible */
.client-darkmode .wikiEditor-ui-toolbar .tabs span.tab a::before { filter: invert(1); }
.theme-dark .wikiEditor-ui-toolbar .tabs span.tab a::before { filter: invert(1); }


/* Diff styling block */
/* Diff styling block */
.client-darkmode .diff-deletedline { border-color: var(--diff-delborder) !important; }
.theme-dark .diff-deletedline { border-color: var(--diff-delborder) !important; }
.client-darkmode .diff-addedline { border-color: var(--diff-addborder) !important; }
.theme-dark .diff-addedline { border-color: var(--diff-addborder) !important; }


.client-darkmode .diff-context {  
.theme-dark .diff-context {  
     background-color: var(--light-bg);
     background-color: var(--light-bg);
     border: 0;
     border: 0;
Line 186: Line 198:
}
}


.client-darkmode .diff-deletedline .diffchange { background-color: var(--diff-delbg); }
.theme-dark .diff-deletedline .diffchange { background-color: var(--diff-delbg); }
.client-darkmode .diff-addedline .diffchange { background-color: var(--diff-addbg); }
.theme-dark .diff-addedline .diffchange { background-color: var(--diff-addbg); }
/* Diff block end */
/* Diff block end */


/* Set general border color */
/* Fix gallery hover */
:is(.client-darkmode) :is(h1, h2, #searchInput, .toc, .catlinks, table, th, tr, td, .mw-code, .editOptions) { border-color: var(--header-border); }
:is(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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 */
.theme-dark .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(.theme-dark) :is(.mbox a,.mbox a:visited) { color: var(--original-link) !important; }
 
/* Fix tabs */
.theme-dark a.tabber__tab[aria-selected='true'] { color: white !important; }
 
/* Fix RC page buttons + some dropdowns + some Lua console stuff */
:is(.theme-dark) :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 */
.theme-dark #mw-allmessagestable .am_default { background-color: var(--code-bg); }
 
/* Prefs page fixes */
.theme-dark #preferences .mw-htmlform-submit-buttons {
    background-color: var(--light-bg);
    border-top: 1px solid var(--header-border);
}
 
.theme-dark .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);
}
 
.theme-dark .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: var(--original-link);
    color: var(--text-color);
}
 
:is(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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); }

Latest revision as of 01:49, 30 April 2024

/* 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.theme-dark { 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 */
.theme-dark, .theme-dark body, .theme-dark html, .theme-dark .mw-body, .theme-dark #mw-navigation, .theme-dark #mw-page-base, .theme-dark #mw-head-base, .theme-dark .vector-legacy-sidebar, .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6, .theme-dark .mw-footer, .theme-dark table, .theme-dark table.wikitable, .theme-dark figure[typeof~='mw:File/Thumb'], .theme-dark .mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .theme-dark .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption, .theme-dark figure[typeof~='mw:File/Frame'], .theme-dark .vector-menu-heading-label, .theme-dark .mw-footer li, .theme-dark .mw-wiki-logo, .theme-dark .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(.theme-dark) :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(.theme-dark) :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 */
.theme-dark .vector-search-box-input, .theme-dark #searchInput, .theme-dark .wikitable th, .theme-dark .editOptions, .theme-dark .oo-ui-textInputWidget .oo-ui-inputWidget-input, .theme-dark textarea.mw-editfont-monospace, .theme-dark pre, .theme-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .theme-dark .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle, .theme-dark .mw-search-profile-tabs, .theme-dark .mw-code, .theme-dark .tocnumber, .theme-dark .suggestions-result, .theme-dark .suggestions-special, .theme-dark .special-query, .theme-dark .mw-changeslist-legend.mw-specialpages-notes, .theme-dark .mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button, .theme-dark #filetoc, .theme-dark .mw_metadata td, .theme-dark .mw_metadata th, .theme-dark .wikiEditor-ui-toolbar, .theme-dark #pagehistory li.selected, .theme-dark .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(.theme-dark) :is(.vector-menu-checkbox, .vector-menu-content, .vector-menu-tabs-legacy .selected) {
    background-color: var(--regular-bg); 
}

:is(.theme-dark) :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 */
.theme-dark .searchButton, .theme-dark .vector-menu-dropdown .vector-menu-heading::after, .theme-dark .oo-ui-textInputWidget-type-search .oo-ui-iconElement-icon, .theme-dark .oo-ui-textInputWidget-type-search .oo-ui-indicatorElement-indicator, .theme-dark .mw-indicator, .theme-dark .ext-WikiEditor-ResizingDragBar, .theme-dark .oo-ui-buttonElement-button .oo-ui-iconElement-icon, .theme-dark .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(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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 */
.theme-dark code {
    border-color: var(--code-border);
    color: var(--code-text);
    background-color: var(--code-bg);
}

/* Makes unselected checkbox + radio buttons nicer */
:is(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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 */
.theme-dark ul { list-style-image: unset; }

/* Make general border colors less eye-piercing */
.theme-dark #content.mw-body {
    border-color: var(--border-general);
}


/* Set general border color part 2 */
:is(.theme-dark) :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(.theme-dark) :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(.theme-dark) :is(.wikiEditor-ui-toolbar, #mw-allmessagestable .am_actual) { background-color: var(--editor-toolbar); }

/* Makes the WikiEditor toolbar buttons visible */
.theme-dark .wikiEditor-ui-toolbar .tabs span.tab a::before { filter: invert(1); }

/* Diff styling block */
.theme-dark .diff-deletedline { border-color: var(--diff-delborder) !important; }
.theme-dark .diff-addedline { border-color: var(--diff-addborder) !important; }

.theme-dark .diff-context { 
    background-color: var(--light-bg);
    border: 0;
    color: var(--text-color);
}

.theme-dark .diff-deletedline .diffchange { background-color: var(--diff-delbg); }
.theme-dark .diff-addedline .diffchange { background-color: var(--diff-addbg); }
/* Diff block end */

/* Fix gallery hover */
:is(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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 */
.theme-dark .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(.theme-dark) :is(.mbox a,.mbox a:visited) { color: var(--original-link) !important; }

/* Fix tabs */
.theme-dark a.tabber__tab[aria-selected='true'] { color: white !important; }

/* Fix RC page buttons + some dropdowns + some Lua console stuff */
:is(.theme-dark) :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 */
.theme-dark #mw-allmessagestable .am_default { background-color: var(--code-bg); }

/* Prefs page fixes */
.theme-dark #preferences .mw-htmlform-submit-buttons {
    background-color: var(--light-bg); 
    border-top: 1px solid var(--header-border);
}

.theme-dark .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);
}

.theme-dark .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { 
    background-color: var(--original-link); 
    color: var(--text-color);
}

:is(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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(.theme-dark) :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); }