|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Timeless skin */ | | /* All CSS here will be loaded for users of the Timeless skin */ |
|
| |
|
| /* ========================================================= | | @import 'https://www.mediawiki.org/wiki/Skin:Timeless-DarkCSS/timeless-dark.css?action=raw&ctype=text/css'; |
| Timeless Light / Dark Mode
| |
| Works with MediaWiki:Timeless.js
| |
| ========================================================= */
| |
| | |
| /* ---------------------------------------------------------
| |
| LIGHT MODE
| |
| --------------------------------------------------------- */
| |
|
| |
|
| :root { | | :root { |
| --timeless-bg: #ffffff; | | --wiki-bg: #ffffff; |
| --timeless-content-bg: #ffffff; | | --wiki-text: #202122; |
| --timeless-text: #202122;
| | --wiki-content-bg: #ffffff; |
| --timeless-secondary-text: #54595d; | | --wiki-border: #a2a9b1; |
| --timeless-border: #c8ccd1;
| | --wiki-link: #0645ad; |
| --timeless-link: #36c;
| |
| --timeless-link-visited: #795cb2;
| |
| --timeless-input-bg: #ffffff;
| |
| --timeless-input-border: #a2a9b1; | |
| --timeless-code-bg: #f8f9fa; | |
| --timeless-table-bg: #ffffff;
| |
| --timeless-table-header: #eaecf0;
| |
| } | | } |
|
| |
| /* ---------------------------------------------------------
| |
| DARK MODE VARIABLES
| |
| --------------------------------------------------------- */
| |
|
| |
|
| html.dark-mode { | | html.dark-mode { |
| --timeless-bg: #181a1b; | | --wiki-bg: #181a1b; |
| --timeless-content-bg: #202122; | | --wiki-text: #e8e6e3; |
| --timeless-text: #e8e6e3;
| | --wiki-content-bg: #202122; |
| --timeless-secondary-text: #b8b8b8; | | --wiki-border: #54595d; |
| --timeless-border: #54595d;
| | --wiki-link: #6ea8fe; |
| --timeless-link: #6ea8fe;
| |
| --timeless-link-visited: #b394e8;
| |
| --timeless-input-bg: #2b2d2f;
| |
| --timeless-input-border: #666a6e;
| |
| --timeless-code-bg: #282a2d;
| |
| --timeless-table-bg: #202122;
| |
| --timeless-table-header: #2d3033;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| PAGE BACKGROUND
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode,
| |
| html.dark-mode body {
| |
| background-color: var(--timeless-bg);
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| /* Main Timeless content areas */
| |
| | |
| html.dark-mode #mw-content-text,
| |
| html.dark-mode #content,
| |
| html.dark-mode .mw-body,
| |
| html.dark-mode #bodyContent {
| |
| background-color: var(--timeless-content-bg);
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| GENERAL TEXT
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode,
| |
| html.dark-mode body,
| |
| html.dark-mode p,
| |
| html.dark-mode li,
| |
| html.dark-mode dd,
| |
| html.dark-mode dt,
| |
| html.dark-mode div,
| |
| html.dark-mode span {
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| /* Secondary text */
| |
| | |
| html.dark-mode .mw-ui-code,
| |
| html.dark-mode .mw-editsection,
| |
| html.dark-mode .mw-jump,
| |
| html.dark-mode .mw-parser-output .thumbcaption {
| |
| color: var(--timeless-secondary-text);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| LINKS
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode a {
| |
| color: var(--timeless-link);
| |
| }
| |
| | |
| html.dark-mode a:visited {
| |
| color: var(--timeless-link-visited);
| |
| }
| |
| | |
| html.dark-mode a:hover {
| |
| color: #8bb9ff;
| |
| }
| |
| | |
| html.dark-mode a:active {
| |
| color: #a8c7ff;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| HEADINGS
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode h1,
| |
| html.dark-mode h2,
| |
| html.dark-mode h3,
| |
| html.dark-mode h4,
| |
| html.dark-mode h5,
| |
| html.dark-mode h6 {
| |
| color: #f0f0f0;
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| TIMeless HEADER
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode #mw-header,
| |
| html.dark-mode .mw-header,
| |
| html.dark-mode #mw-header-container {
| |
| background-color: #202122;
| |
| color: var(--timeless-text); | |
| }
| |
| | |
| html.dark-mode #mw-header a,
| |
| html.dark-mode .mw-header a {
| |
| color: var(--timeless-link);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| SIDEBAR / NAVIGATION
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode #mw-panel,
| |
| html.dark-mode #mw-panel .portal,
| |
| html.dark-mode .mw-portlet {
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| html.dark-mode #mw-panel .portal h3,
| |
| html.dark-mode .portal h3 {
| |
| color: #eeeeee;
| |
| }
| |
| | |
| html.dark-mode #mw-panel a,
| |
| html.dark-mode .portal a {
| |
| color: var(--timeless-link);
| |
| }
| |
| | |
| html.dark-mode #mw-panel a:hover,
| |
| html.dark-mode .portal a:hover {
| |
| color: #8bb9ff;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| PERSONAL TOOLS
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode #p-personal,
| |
| html.dark-mode #personal {
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| html.dark-mode #p-personal a,
| |
| html.dark-mode #personal a {
| |
| color: var(--timeless-link);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| SEARCH
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode input,
| |
| html.dark-mode textarea,
| |
| html.dark-mode select {
| |
| background-color: var(--timeless-input-bg);
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-input-border);
| |
| }
| |
| | |
| html.dark-mode input::placeholder,
| |
| html.dark-mode textarea::placeholder {
| |
| color: #a0a0a0;
| |
| }
| |
| | |
| /* Search box */
| |
| | |
| html.dark-mode #searchInput,
| |
| html.dark-mode #searchInput input,
| |
| html.dark-mode .searchform input {
| |
| background-color: var(--timeless-input-bg); | |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-input-border);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| BUTTONS
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode button,
| |
| html.dark-mode .mw-ui-button,
| |
| html.dark-mode .mw-ui-button.mw-ui-progressive {
| |
| background-color: #2b2d2f;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-input-border);
| |
| }
| |
| | |
| html.dark-mode button:hover,
| |
| html.dark-mode .mw-ui-button:hover {
| |
| background-color: #383b3e;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| DARK MODE TOGGLE BUTTON
| |
| --------------------------------------------------------- */
| |
| | |
| .timeless-theme-toggle {
| |
| display: inline-block;
| |
| padding: 4px 8px;
| |
| margin: 2px 0;
| |
| border: 1px solid #a2a9b1;
| |
| border-radius: 4px;
| |
| background: #ffffff;
| |
| color: #202122;
| |
| cursor: pointer;
| |
| font-size: 0.9em;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| .timeless-theme-toggle:hover {
| |
| background: #eaecf0;
| |
| }
| |
| | |
| /* Dark-mode appearance of the toggle */
| |
| | |
| html.dark-mode .timeless-theme-toggle {
| |
| background: #2b2d2f;
| |
| color: #eeeeee;
| |
| border-color: #666a6e;
| |
| }
| |
| | |
| html.dark-mode .timeless-theme-toggle:hover {
| |
| background: #383b3e;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| TABLES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode table.wikitable {
| |
| background-color: var(--timeless-table-bg);
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode table.wikitable > tr > th,
| |
| html.dark-mode table.wikitable > * > tr > th {
| |
| background-color: var(--timeless-table-header);
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode table.wikitable > tr > td,
| |
| html.dark-mode table.wikitable > * > tr > td {
| |
| background-color: var(--timeless-table-bg);
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| /* Zebra-striped tables */
| |
| | |
| html.dark-mode table.wikitable tr:nth-child(even) td {
| |
| background-color: #242628;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| INFOBOXES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode .infobox {
| |
| background-color: #202122;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode .infobox th {
| |
| background-color: #2d3033;
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| html.dark-mode .infobox td {
| |
| background-color: #202122;
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| NAVBOXES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode .navbox {
| |
| background-color: #202122;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode .navbox th,
| |
| html.dark-mode .navbox-title {
| |
| background-color: #2d3033;
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| html.dark-mode .navbox-subgroup {
| |
| background-color: #242628;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| CODE / PREFORMATTED TEXT
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode pre,
| |
| html.dark-mode code,
| |
| html.dark-mode .mw-code,
| |
| html.dark-mode .mw-highlight {
| |
| background-color: var(--timeless-code-bg);
| |
| color: #e8e6e3;
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode pre {
| |
| border: 1px solid var(--timeless-border);
| |
| padding: 1em;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| BLOCKQUOTES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode blockquote {
| |
| color: #d0d0d0;
| |
| border-left-color: #666a6e;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| THUMBNAILS / IMAGE CAPTIONS
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode .thumbinner,
| |
| html.dark-mode .thumbcaption {
| |
| background-color: #202122;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| /* Do NOT invert images. */
| |
| | |
| html.dark-mode img {
| |
| filter: none;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| TOOLTIPS / POPUPS
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode .mwe-popups,
| |
| html.dark-mode .mwe-popups-container,
| |
| html.dark-mode .mw-tooltip,
| |
| html.dark-mode .oo-ui-popupWidget {
| |
| background-color: #202122;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| FOOTER
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode #footer,
| |
| html.dark-mode .mw-footer {
| |
| background-color: #181a1b;
| |
| color: var(--timeless-secondary-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode #footer a,
| |
| html.dark-mode .mw-footer a {
| |
| color: var(--timeless-link);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| CATEGORIES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode #catlinks {
| |
| background-color: #202122;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| html.dark-mode #catlinks a {
| |
| color: var(--timeless-link);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| HORIZONTAL RULES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode hr {
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| NOTICE / MESSAGE BOXES
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode .mbox-small,
| |
| html.dark-mode .messagebox,
| |
| html.dark-mode .ombox,
| |
| html.dark-mode .tmbox,
| |
| html.dark-mode .ambox {
| |
| background-color: #252729;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-border);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| EDITOR / OOUI
| |
| --------------------------------------------------------- */
| |
| | |
| html.dark-mode .oo-ui-widget,
| |
| html.dark-mode .oo-ui-inputWidget,
| |
| html.dark-mode .oo-ui-textInputWidget,
| |
| html.dark-mode .oo-ui-fieldLayout {
| |
| color: var(--timeless-text);
| |
| }
| |
| | |
| html.dark-mode .oo-ui-inputWidget-input {
| |
| background-color: var(--timeless-input-bg);
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-input-border);
| |
| }
| |
| | |
| html.dark-mode .oo-ui-buttonElement-button {
| |
| background-color: #2b2d2f;
| |
| color: var(--timeless-text);
| |
| border-color: var(--timeless-input-border);
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| MOBILE
| |
| --------------------------------------------------------- */
| |
| | |
| @media (max-width: 720px) {
| |
| .timeless-theme-toggle {
| |
| font-size: 0.85em;
| |
| padding: 4px 7px;
| |
| }
| |
| } | | } |