User:Lakelimbo/DarkTheme.css
From Fanon Wiki
- Page tools
- What links here
- Related changes
- Printable version
- Permanent link
- Page information
- User tools
- User contributions
- Logs
- View user groups
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.
/* EXPERIMENTAL.
Not recommended for usage yet.
This is quite big, so if your connection is not that great
or if your PC is a garbage bin, I'd not recommend using it.
You can adapt to your tastes as well, of course, but some selectors
may be quite specific, so be careful to not get lost.
*/
:root {
/* Tones */
--color-b1: #101010;
--color-b2: #202020;
--color-b3: #303030;
--color-b4: #505050;
--color-alpha: rgba(255,255,255,.1);
/* Theme colors */
--bg-color: var(--color-b1);
--link-color: #2a84ff;
}
/* Layout */
html {
color-scheme: dark;
}
body {
color: #fff;
}
a.new {
color: #ff0000;
}
h1, h2, h3, h4, h5, #firstHeading, .firstHeading,
.mw-headline,
#mw-content-text h1, #mw-content-text h2,
#mw-content-text h3, #mw-content-text h4,
#mw-content-text h5, #mw-content-text h6 {
color: #fff;
border-color: var(--color-b4);
}
#firstHeading {
border-color: var(--green);
}
#content-wrapper, .sidebar-section {
background-color: var(--color-b2);
color: #fff;
}
#searchInput {
outline-color: #ecd35a;
}
.searchButton {
filter: invert(1);
opacity: 1;
}
.refreshed-dropdown-tray, #toolbox-dropdown-button {
background-color: var(--color-b3);
color: #fff
}
.refreshed-dropdown-tray a:focus,
.refreshed-dropdown-tray a:hover,
.refreshed-dropdown-tray a:active,
.refreshed-dropdown-tray a.selected,
.header-button:hover,
a.sidebar-item:focus,
a.sidebar-item:hover,
a.sidebar-item:active,
a.sidebar-item.selected {
background-color: var(--color-alpha);
}
.refreshed-dropdown-triangle::after {
border-bottom-color: var(--color-b3);
}
.refreshed-toolbox-stuck {
background-color: #000;
}
.toc, .toccolours, #filetoc {
background-color: var(--color-b3);
border-color: var(--color-b4);
}
.tocnumber {
color: #fff;
}
.toctitle h2::before,
.refreshed-icon-refreshed-menu.ooui-icon-menu {
filter: invert(1);
}
#catlinks {
background-color: var(--color-b3)
}
#footer-wrapper {
color: #fff;
}
code, pre {
background-color: #151515;
border-color: var(--color-b4);
}
pre {
color: #fff;
}
/* The following styles can be inconsistent depending on the page */
/* Tables */
.wikitable, #mw_metadata, #mw_metadata td {
background-color: var(--color-b3);
color: #fff;
}
.wikitable > tr > th, .wikitable > * > tr > th, #mw_metadata th {
background-color: var(--color-b4);
border-color: #5e5e5e;
}
.wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td,
#mw_metadata td {
border-color: #5e5e5e;
}
.table-responsive tr:nth-child(even) td {
background-color: var(--color-alpha)
}
/* Infoboxes */
.infobox-cell:nth-child(4n+1) {
background-color: var(--color-alpha);
}
.infobox-img, .infobox-Img {
color: #fff!important;
}
/* Navboxes */
.navbox {
color: #000;
}
.navbox table td {
color: #fff;
}
/* The following styles could be quite heavy.
Remove if necessary.
*/
/* Recent changes */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.oo-ui-popupWidget-popup {
background-color: var(--color-b3);
border-color: var(--color-b4);
color: #fff;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
background: var(--color-b4);
color: #fff;
}
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert),
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert),
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-input > .oo-ui-icon-menu {
filter: invert(1)
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: inherit;
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input::placeholder {
color: #d0d0d0;
}
/* Search results */
.mw-search-profile-tabs,
.mw-ui-input {
background-color: var(--color-b3);
border-color: var(--color-b4);
color: #fff;
}
.search-types .current a {
color: #fff;
}
/* Diffs */
.diff-context {
background: none;
color: #fff;
border-color: var(--color-b4);
}
.diff-addedline .diffchange {
background: #4e6b86;
}
/* Edit page */
.wikiEditor-ui-controls,
.wikiEditor-ui .wikiEditor-ui-view,
.wikiEditor-ui .wikiEditor-ui-top,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
.wikiEditor-ui-toolbar .group .tool-select .label,
.wikiEditor-ui-toolbar .sections .section,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar .page-table td,
.editOptions,
.mw-scribunto-console-fieldset {
background-color: var(--color-b3);
border-color: var(--color-b4);
color: #fff;
}
body.ltr .wikiEditor-ui-toolbar .tabs span.tab a:before,
.wikiEditor-ui-toolbar .group .tool-select .label:after,
.ui-widget-header .ui-icon {
filter: invert(1);
}
.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .page-table th {
color: #d0d0d0;
}
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
filter: invert(1);
background-color: rgba(204,153,51,.3);
}
.wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--link-color);
}
.wikiEditor-ui-toolbar .booklet > .index > .current,
.wikiEditor-ui-toolbar .booklet > .index > :hover {
background-color: var(--color-alpha);
color: var(--link-color)
}
.wikiEditor-ui-toolbar .page-characters div span {
height: unset;
}
.wikiEditor-ui-toolbar .page-characters div span:hover {
background-color: var(--color-alpha);
border-color: var(--color-b4)
}
.ui-widget-content {
background: var(--color-b3);
color: #fff;
}
.ui-widget-header, .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: var(--color-b4);
border: none;
color: #fff;
}
.CodeMirror, .wikiEditor-ui .CodeMirror {
background: #101010!important;
color: #fff;
}
.CodeMirror-linenumber, .CodeMirror-gutter, .CodeMirror-gutters {
background: #000;
border-color: var(--color-b4);
}
.CodeMirror-line span::selection {
background: #647489;
}
.cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr {
background: var(--color-b3);
}
.cm-mw-template-name, .cm-mw-template-bracket {
color: #c363ff;
}
.cm-mw-link-ground {
color: var(--link-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
background: var(--color-b2)
}
/* Edit interface. NOT FULLY FUNCTIONAL */
.ace-tm {
background-color: var(--color-b3);
border-color: var(--color-b4);
color: #fff;
}
.ace-tm .ace_gutter, .codeEditor-status {
background: #000;
border-color: var(--color-b4);
}
.ace-tm .ace_gutter-active-line {
background: var(--blue);
color: #fff;
}
.ace-tm .ace_cursor {
color: #fff;
}
.ace_content {
background: #000;
filter: saturate(5);
}
.ace-tm .ace_print-margin {
background-color: var(--color-b4)
}
.mw-scribunto-message {
background: transparent;
color: #34cf34;
}
#mw-scribunto-input {
background: #000;
color: var(--link-color);
}
.mw-scribunto-input {
color: var(--link-ccurrentColor)
}
.mw-scribunto-print {
background: var(--color-b4);
color: #fff;
}
/* Temporary styles */
#main-grid div.mb-3 img:first-of-type {
filter: invert(1)
}
#main-grid .boxpanel:nth-of-type(2) {
background: #241e1e!important;
}
#main-grid .boxpanel:nth-of-type(3) {
background: #242a32!important;
}
#main-grid .boxpanel:nth-of-type(4) {
border-color: #fff!important;
background: #202020!important;
color: #fff
}
#main-grid .boxpanel:nth-of-type(4) div:first-child {
background: #fff!important;
color: #000!important;
}
#main-grid .boxpanel:nth-of-type(5) {
background: #302b33!important;
}
#main-grid .boxpanel:nth-of-type(6) {
background: #383730!important;
}
#main-grid .boxpanel:nth-of-type(7) {
background: #2e382e!important;
}
#main-grid .boxpanel:nth-of-type(8) {
background: #332c33!important;
}
#main-grid .boxpanel:nth-of-type(9) {
background: #262c2c!important;
}