User:Kylmä Moth/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.

:root {
  --bg-color: #061016;
  --text-color: white;
  --border-color: white;
}

/* Use the TNO font */
@font-face {
  font-family: 'Aldrich';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/aldrich/v21/MCoTzAn-1s3IGyJMVacY3w.woff2) format('woff2');
}

/* Overrides default mediawiki colors and applies the dark bg and white text */
body,
h1, h2, h3, h4, h5, h6,
.vector-pinnable-header-label,
.vector-feature-page-tools-enabled .vector-pinnable-element .vector-menu-heading,
.vector-dropdown-content .vector-menu-heading,
.footer,
.footer-navigation,
.footer-info,
.mw-footer li,
.mw-page-container,
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Aldrich', sans-serif;
}

.mw-page-title-main {
	font-family: 'Aldrich', sans-serif;
}

/* Make this text dark instead */
#firstHeadingTitle .mw-page-title-main,
.vector-sticky-header-context-bar-primary .mw-page-title-main,
figcaption {
	color: var(--bg-color);
}

/* Make all the links white */
a {
  color: var(--text-color) !important;
}
/* But make these links dark instead */
.mw-normal-catlinks > ul > li > a {
	color: var(--bg-color) !important;
}

/* Removes the fade effect from all elements */
*::after {
  display: none !important;
}

/* Table of Contents styles */
.vector-toc {
	background-color: var(--bg-color);
	border: 2px solid var(--border-color);
}

/* Search bar styles */
.cdx-text-input__input,
.client-js .vector-search-box-vue .vector-typeahead-search .cdx-text-input__input {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
    border-width: 2px;
    border-right-color: var(--text-color);
}
.cdx-button:not(.cdx-button--type-quiet) {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--bg-color);
}
button {
    background-color: var(--bg-color);
    color: var(--text-color);
}