MediaWiki:Common.css: Difference between revisions

:root {
  --theme-red-primary: #e02d2d;
  --theme-red-hover: #ff4d4d;
  --theme-red-dark: #b81c1c;
  --dark-background-primary: #151515;
  --dark-background-secondary: #1f1f1f;
  --dark-border-color: #3a3a3a;
  --dark-text-color: #e1e1e1;
}

.skin-theme-clientpref-night {
  body {
    background-color: var(--dark-background-primary);
    color: var(--dark-text-color);
  }

  a {
    color: var(--theme-red-primary);
  }
  a:hover {
    color: var(--theme-red-hover);
    text-decoration: none;
  }
  a:visited {
    color: #c95b5b;
  }

  .vector-header {
    background: var(--dark-background-secondary);
    border-bottom: 2px solid var(--theme-red-primary);
  }

  .mw-page-title-main {
    color: var(--theme-red-primary);
  }

  .vector-sidebar {
    background-color: var(--dark-background-secondary);
  }
  .vector-sidebar a { color: var(--dark-text-color); }
  .vector-sidebar .vector-menu-heading.cdx-menu__heading { color: var(--theme-red-primary); }

  .vector-pinnable-element .mw-list-item > a:not(.new):link,
  .vector-sidebar .vector-menu-content-list .mw-list-item > a:not(.new):link,
  .vector-sidebar .vector-menu-content a:not(.new):link {
    color: var(--theme-red-primary) !important; text-decoration: none;
  }
  .vector-pinnable-element .mw-list-item > a:not(.new):visited,
  .vector-sidebar .vector-menu-content-list .mw-list-item > a:not(.new):visited,
  .vector-sidebar .vector-menu-content a:not(.new):visited {
    color: #ff6b6b !important;
  }
  .vector-pinnable-element .mw-list-item > a:hover,
  .vector-pinnable-element .mw-list-item > a:focus,
  .vector-sidebar .vector-menu-content-list .mw-list-item > a:hover,
  .vector-sidebar .vector-menu-content-list .mw-list-item > a:focus,
  .vector-sidebar .vector-menu-content a:hover,
  .vector-sidebar .vector-menu-content a:focus {
    color: var(--theme-red-hover) !important; text-decoration: none;
  }
  .vector-pinnable-element .mw-list-item > a:active,
  .vector-sidebar .vector-menu-content-list .mw-list-item > a:active,
  .vector-sidebar .vector-menu-content a:active,
  .vector-sidebar .vector-menu-content-list li.selected > a,
  .vector-sidebar .vector-menu-content-list a[aria-current="page"] {
    color: var(--theme-red-dark) !important;
  }

  .vector-main-menu,
  .vector-main-menu-action,
  .vector-main-menu-action-opt-out {
    --color-link: var(--theme-red-primary);
    --color-link--hover: var(--theme-red-hover);
    --color-link--active: var(--theme-red-dark);
    --color-link--visited: #ff6b6b;
    --color-progressive: var(--theme-red-primary);
    --color-progressive--hover: var(--theme-red-hover);
    --color-visited: #ff6b6b;
  }
  .vector-main-menu-action-opt-out > a:link    { color: var(--theme-red-primary) !important; text-decoration: none !important; }
  .vector-main-menu-action-opt-out > a:visited { color: #ff6b6b !important; }
  .vector-main-menu-action-opt-out > a:hover,
  .vector-main-menu-action-opt-out > a:focus   { color: var(--theme-red-hover) !important; text-decoration: none !important; }
  .vector-main-menu-action-opt-out > a:active  { color: var(--theme-red-dark) !important; }
  .vector-main-menu a[href*="useskin="],
  .vector-main-menu a[href*="useskinversion"] { text-decoration: none !important; }
  .vector-main-menu a[href*="useskin="]:link,
  .vector-main-menu a[href*="useskinversion"]:link { color: var(--theme-red-primary) !important; }
  .vector-main-menu a[href*="useskin="]:visited,
  .vector-main-menu a[href*="useskinversion"]:visited { color: #ff6b6b !important; }
  .vector-main-menu a[href*="useskin="]:hover,
  .vector-main-menu a[href*="useskin="]:focus,
  .vector-main-menu a[href*="useskinversion"]:hover,
  .vector-main-menu a[href*="useskinversion"]:focus { color: var(--theme-red-hover) !important; }
  .vector-main-menu a[href*="useskin="]:active,
  .vector-main-menu a[href*="useskinversion"]:active { color: var(--theme-red-dark) !important; }
  .vector-main-menu .cdx-button,
  .vector-main-menu .cdx-button:link,
  .vector-main-menu .cdx-button:visited {
    color: var(--theme-red-primary) !important;
    border-color: currentColor;
  }
  .vector-main-menu .cdx-button:hover,
  .vector-main-menu .cdx-button:focus {
    color: var(--theme-red-hover) !important;
  }
  .vector-main-menu .cdx-button:active {
    color: var(--theme-red-dark) !important;
  }

  .vector-header .vector-user-links .mw-list-item > a:link { color: var(--theme-red-primary) !important; text-decoration: none; }
  .vector-header .vector-user-links .mw-list-item > a:visited { color: #ff6b6b !important; }
  .vector-header .vector-user-links .mw-list-item > a:hover,
  .vector-header .vector-user-links .mw-list-item > a:focus { color: var(--theme-red-hover) !important; text-decoration: none; }
  .vector-header .vector-user-links .mw-list-item > a:active { color: var(--theme-red-dark) !important; }

  .vector-menu-tabs .mw-list-item > a:link { color: var(--theme-red-primary) !important; text-decoration: none; }
  .vector-menu-tabs .mw-list-item > a:visited { color: #ff6b6b !important; }
  .vector-menu-tabs .mw-list-item > a:hover,
  .vector-menu-tabs .mw-list-item > a:focus { color: var(--theme-red-hover) !important; text-decoration: none; }
  .vector-menu-tabs .mw-list-item > a:active { color: var(--theme-red-dark) !important; }
  .vector-menu-tabs .selected > a,
  .vector-menu-tabs .selected > a:visited { color: var(--theme-red-primary) !important; border-bottom: 1px solid var(--theme-red-primary); }

  .mw-ui-button.mw-ui-progressive,
  .mw-ui-button.mw-ui-constructive {
    background-color: var(--theme-red-dark);
    color: #ffffff;
    border: 1px solid var(--theme-red-dark);
    border-radius: 4px;
    transition: background-color 0.2s;
  }
  .mw-ui-button.mw-ui-progressive:hover,
  .mw-ui-button.mw-ui-constructive:hover {
    background-color: var(--theme-red-primary);
    border-color: var(--theme-red-primary);
  }

  .infobox,
  .navbox,
  .wikitable {
    background-color: var(--dark-background-secondary) !important;
    border: 1px solid var(--dark-border-color);
    color: var(--dark-text-color);
  }
  .wikitable > tr > th,
  .wikitable > * > tr > th,
  .infobox .infobox-header,
  .navbox-title {
    background-color: var(--theme-red-dark) !important;
    color: #ffffff;
    border: 1px solid var(--theme-red-dark);
  }
  .wikitable > tr:nth-child(even) > td,
  .wikitable > * > tr:nth-child(even) > td {
    background-color: #2a2a2a;
  }

  .cdx-text-input__input:focus {
    border-color: var(--theme-red-primary);
    box-shadow: 0 0 0 1px var(--theme-red-primary);
  }
  .cdx-search-input .cdx-button { border-color: var(--dark-border-color); }

  .toc { background-color: var(--dark-background-secondary); border: 1px solid var(--dark-border-color); }
  .toctitle { color: var(--theme-red-primary); }
}