Stoulram

MediaWiki:Timeless.css: Difference between revisions

Newer edit →

Stoulram (talk | contribs)

3 user groups
3,139 edits
add dark mode css
 
update dark mode
Tag: Reverted
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 */
/* =========================================================
  Timeless Light / Dark Mode
  Works with MediaWiki:Timeless.js
  ========================================================= */
/* ---------------------------------------------------------
  LIGHT MODE
  --------------------------------------------------------- */


:root {
:root {
     --wiki-bg: #ffffff;
     --timeless-bg: #ffffff;
     --wiki-text: #202122;
     --timeless-content-bg: #ffffff;
     --wiki-content-bg: #ffffff;
    --timeless-text: #202122;
     --wiki-border: #a2a9b1;
     --timeless-secondary-text: #54595d;
     --wiki-link: #0645ad;
    --timeless-border: #c8ccd1;
    --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 {
     --wiki-bg: #181a1b;
     --timeless-bg: #181a1b;
     --wiki-text: #e8e6e3;
     --timeless-content-bg: #202122;
     --wiki-content-bg: #202122;
    --timeless-text: #e8e6e3;
     --wiki-border: #54595d;
     --timeless-secondary-text: #b8b8b8;
     --wiki-link: #6ea8fe;
    --timeless-border: #54595d;
    --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;
    }
}
}
Retrieved from "https://stoulram.me/wiki/MediaWiki:Timeless.css"