MediaWiki:Timeless.css: Difference between revisions

/* All CSS here will be loaded for users of the Timeless skin */

/* =========================================================
   Timeless Light / Dark Mode
   Works with MediaWiki:Timeless.js
   ========================================================= */

/* ---------------------------------------------------------
   LIGHT MODE
   --------------------------------------------------------- */

:root {
    --timeless-bg: #ffffff;
    --timeless-content-bg: #ffffff;
    --timeless-text: #202122;
    --timeless-secondary-text: #54595d;
    --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 {
    --timeless-bg: #181a1b;
    --timeless-content-bg: #202122;
    --timeless-text: #e8e6e3;
    --timeless-secondary-text: #b8b8b8;
    --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;
    }
}