MediaWiki:Common.css: Difference between revisions

Revision as of 22:34, 4 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;
}

/* Center the buttons better */
.tabber__tab { margin: 0 auto !important; }

/* 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;
}

/* Cancel inversion to use better styling */
:root, img { 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 { 
    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 */
.client-darkmode .catlinks, .client-darkmode .toc {
    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 {
    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 */
.client-darkmode .vector-menu-checkbox, .client-darkmode .vector-menu-content, .client-darkmode .vector-menu-tabs-legacy .selected {
    background-color: var(--regular-bg); 
}

.client-darkmode .vector-menu-tabs-legacy .selected a:visited { 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 .diff-context, .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 */
.client-darkmode .vector-menu-tabs-legacy li, .client-darkmode #right-navigation.vector-menu-dropdown, .client-darkmode #mw-page-base { background: unset; 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 */
.client-darkmode li.new a, .client-darkmode a.new, .client-darkmode .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 */
.client-darkmode #wpPreviewWidget > input, .client-darkmode #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);
}

/* I actually forgot what this does but it's needed */
.client-darkmode .oo-ui-checkboxInputWidget [type='checkbox'] + span { background-color: var(--ooui-input); }

/* Sets the colors of the search results when you're hovering over them */
.client-darkmode .suggestions-result-current, .client-darkmode .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, and removes a bad-looking border */
.client-darkmode figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element { 
    border: 0;
    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 */
.client-darkmode ul { list-style-image: unset; }

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

/* Part 2 of the previous, it needs to be separated or the main body breaks */
.client-darkmode .vector-menu-tabs, .client-darkmode .vector-menu-tabs a {
    background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,var(--border-general) 100%);
}

/* Makes the WikiEditor toolbar a dark blue */
.client-darkmode .wikiEditor-ui-toolbar { background-color: var(--editor-toolbar); }

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