MediaWiki:Common.css: Difference between revisions

Revision as of 02:43, 14 October 2025

/* ============================
  Untenables Wiki — Dual Light / Night mode CSS for Vector 2022
  Palette:
    Dark: #101418
    Text (cream): #f8f8f2
    Accent: #ff79c6
    Secondary / Blue-grey: #6272a4
    Alert / Red: #ff5555
============================ */

/* Defaults in night mode (dark) */
html.skin-theme-clientpref-night body.skin-vector-2022,
html.skin-theme-clientpref-os-dark body.skin-vector-2022 {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
}

/* Containers in night mode */
html.skin-theme-clientpref-night body.skin-vector-2022 #mw-page-base,
html.skin-theme-clientpref-night body.skin-vector-2022 #mw-header-container,
html.skin-theme-clientpref-night body.skin-vector-2022 #mw-content-container,
html.skin-theme-clientpref-night body.skin-vector-2022 .mw-body {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
}

/* Night mode — links, headings, accents */
html.skin-theme-clientpref-night a,
html.skin-theme-clientpref-night .mw-body a {
  color: #ff79c6 !important;
}
html.skin-theme-clientpref-night a:visited {
  color: #6272a4 !important;
}
html.skin-theme-clientpref-night a:hover,
html.skin-theme-clientpref-night a:focus {
  color: #ff5555 !important;
}
html.skin-theme-clientpref-night h1, h2, h3, h4, h5, h6 {
  color: #ff79c6 !important;
  border-color: #6272a4 !important;
}

/* Buttons, input, etc. in night mode */
html.skin-theme-clientpref-night button,
html.skin-theme-clientpref-night .mw-ui-button,
html.skin-theme-clientpref-night input[type=submit],
html.skin-theme-clientpref-night input[type=button],
html.skin-theme-clientpref-night .oo-ui-buttonElement-button {
  background-color: #6272a4 !important;
  color: #f8f8f2 !important;
}
html.skin-theme-clientpref-night button:hover,
html.skin-theme-clientpref-night .mw-ui-button:hover,
html.skin-theme-clientpref-night .oo-ui-buttonElement-button:hover {
  background-color: #ff79c6 !important;
  color: #101418 !important;
}

/* Tables, pre/code, etc. in night mode */
html.skin-theme-clientpref-night table,
html.skin-theme-clientpref-night th,
html.skin-theme-clientpref-night td {
  background-color: #101418 !important;
  border-color: #6272a4 !important;
  color: #f8f8f2 !important;
}
html.skin-theme-clientpref-night th {
  background-color: #101418 !important;
  color: #ff79c6 !important;
}
html.skin-theme-clientpref-night pre,
html.skin-theme-clientpref-night code,
html.skin-theme-clientpref-night .mw-code {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
  border: 1px solid #6272a4 !important;
}
html.skin-theme-clientpref-night #footer,
html.skin-theme-clientpref-night .mw-footer,
html.skin-theme-clientpref-night #mw-panel,
html.skin-theme-clientpref-night .vector-sidebar-container {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
}

/* --------------------------
   Now: Day mode (light) overrides
   Flip background/text, but keep accents / borders consistent
---------------------------- */

html.skin-theme-clientpref-day body.skin-vector-2022,
html.skin-theme-clientpref-os-light body.skin-vector-2022 {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
}

/* Containers in day mode */
html.skin-theme-clientpref-day body.skin-vector-2022 #mw-page-base,
html.skin-theme-clientpref-day body.skin-vector-2022 #mw-header-container,
html.skin-theme-clientpref-day body.skin-vector-2022 #mw-content-container,
html.skin-theme-clientpref-day body.skin-vector-2022 .mw-body {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
}

/* Links, headings in day mode */
html.skin-theme-clientpref-day a,
html.skin-theme-clientpref-day .mw-body a {
  color: #ff79c6 !important;
}
html.skin-theme-clientpref-day a:visited {
  color: #6272a4 !important;
}
html.skin-theme-clientpref-day a:hover,
html.skin-theme-clientpref-day a:focus {
  color: #ff5555 !important;
}
html.skin-theme-clientpref-day h1, h2, h3, h4, h5, h6 {
  color: #ff79c6 !important;
  border-color: #6272a4 !important;
}

/* Buttons, inputs in day mode */
html.skin-theme-clientpref-day button,
html.skin-theme-clientpref-day .mw-ui-button,
html.skin-theme-clientpref-day input[type=submit],
html.skin-theme-clientpref-day input[type=button],
html.skin-theme-clientpref-day .oo-ui-buttonElement-button {
  background-color: #6272a4 !important;
  color: #101418 !important;
}
html.skin-theme-clientpref-day button:hover,
html.skin-theme-clientpref-day .mw-ui-button:hover,
html.skin-theme-clientpref-day .oo-ui-buttonElement-button:hover {
  background-color: #ff79c6 !important;
  color: #f8f8f2 !important;
}

/* Tables, pre/code, etc. in day mode */
html.skin-theme-clientpref-day table,
html.skin-theme-clientpref-day th,
html.skin-theme-clientpref-day td {
  background-color: #f8f8f2 !important;
  border-color: #6272a4 !important;
  color: #101418 !important;
}
html.skin-theme-clientpref-day th {
  background-color: #f8f8f2 !important;
  color: #ff79c6 !important;
}
html.skin-theme-clientpref-day pre,
html.skin-theme-clientpref-day code,
html.skin-theme-clientpref-day .mw-code {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
  border: 1px solid #6272a4 !important;
}

/* Footer, sidebar day mode */
html.skin-theme-clientpref-day #footer,
html.skin-theme-clientpref-day .mw-footer,
html.skin-theme-clientpref-day #mw-panel,
html.skin-theme-clientpref-day .vector-sidebar-container {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
}

/* Selection highlight works across both modes */
::selection {
  background: #ff79c6 !important;
  color: #101418 !important;
}