MediaWiki:Common.css: Difference between revisions

Revision as of 03:37, 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;
}

/* NIGHT MODE — outer background consistency */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-os-dark,
html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-os-dark body,
html.skin-theme-clientpref-night body.skin-vector-2022,
html.skin-theme-clientpref-os-dark body.skin-vector-2022,
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,
html.skin-theme-clientpref-night .vector-header,
html.skin-theme-clientpref-night .vector-body,
html.skin-theme-clientpref-night .vector-page-tools,
html.skin-theme-clientpref-night .vector-toc,
html.skin-theme-clientpref-night #mw-panel {
    background-color: #101418 !important;
}

/* LIGHT MODE — outer background consistency */
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-os-light,
html.skin-theme-clientpref-day body,
html.skin-theme-clientpref-os-light body,
html.skin-theme-clientpref-day body.skin-vector-2022,
html.skin-theme-clientpref-os-light body.skin-vector-2022,
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,
html.skin-theme-clientpref-day .vector-header,
html.skin-theme-clientpref-day .vector-body,
html.skin-theme-clientpref-day .vector-page-tools,
html.skin-theme-clientpref-day .vector-toc,
html.skin-theme-clientpref-day #mw-panel {
    background-color: #f8f8f2 !important;
}

/* Light mode unified background for all page layers */
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-os-light,
html.skin-theme-clientpref-day body,
html.skin-theme-clientpref-os-light body,
html.skin-theme-clientpref-day body.skin-vector-2022,
html.skin-theme-clientpref-os-light body.skin-vector-2022,
html.skin-theme-clientpref-day .vector-page,
html.skin-theme-clientpref-day .mw-page-container,
html.skin-theme-clientpref-day .mw-footer-container,
html.skin-theme-clientpref-day .vector-header-start,
html.skin-theme-clientpref-day .vector-header-end,
html.skin-theme-clientpref-day .mw-body,
html.skin-theme-clientpref-day .mw-body-content,
html.skin-theme-clientpref-day .vector-body,
html.skin-theme-clientpref-day .vector-body-before-content,
html.skin-theme-clientpref-day #mw-content-container,
html.skin-theme-clientpref-day #mw-panel,
html.skin-theme-clientpref-day .mw-workspace-container {
    background-color: #f8f8f2 !important;
}

/* Slightly darker separator lines (optional, to match the theme) */
html.skin-theme-clientpref-day hr,
html.skin-theme-clientpref-day .vector-divider {
    border-color: #e0dfd9 !important;
}

/* =====================================
   Light Mode — Sidebar & menu background fix
===================================== */

html.skin-theme-clientpref-day .vector-sidebar-container,
html.skin-theme-clientpref-os-light .vector-sidebar-container,
html.skin-theme-clientpref-day .vector-main-menu,
html.skin-theme-clientpref-day .vector-menu-content,
html.skin-theme-clientpref-day .vector-page-toolbar,
html.skin-theme-clientpref-day .vector-toc,
html.skin-theme-clientpref-day #mw-panel,
html.skin-theme-clientpref-day .mw-sidebar {
    background-color: #f8f8f2 !important;
    color: #101418 !important;
}

/* Keep sidebar "Contents" section headers consistent */
html.skin-theme-clientpref-day .vector-menu-heading,
html.skin-theme-clientpref-day .vector-toc-heading {
    background-color: #f8f8f2 !important;
    color: #ff79c6 !important;
}

/* Sidebar link hover color to match theme */
html.skin-theme-clientpref-day .vector-menu-content a:hover {
    color: #ff5555 !important;
}

/* =====================================
   🕯️ Light Mode — Final Fix for Sidebar & Gutter
   Targets outer wrappers Vector-2022 ignores
===================================== */

/* Make the sidebar and its pinned container match the light theme background */
html.skin-theme-clientpref-day .vector-main-menu-container,
html.skin-theme-clientpref-day .vector-sticky-pinned-container,
html.skin-theme-clientpref-day .vector-toc,
html.skin-theme-clientpref-day .vector-skin-container,
html.skin-theme-clientpref-day .vector-main-container {
    background-color: #f8f8f2 !important;
    color: #101418 !important;
}

/* Ensure the menu itself and its headings inherit correctly */
html.skin-theme-clientpref-day .vector-main-menu,
html.skin-theme-clientpref-day .vector-main-menu .vector-menu-heading,
html.skin-theme-clientpref-day .vector-main-menu .vector-menu-content {
    background-color: #f8f8f2 !important;
    color: #101418 !important;
}

/* Also unify the area behind the pinned menu toggle (hamburger zone) */
html.skin-theme-clientpref-day .vector-header-start,
html.skin-theme-clientpref-day .vector-header-start .vector-menu-checkbox,
html.skin-theme-clientpref-day .vector-header-start .mw-logo {
    background-color: #f8f8f2 !important;
}

/* Optional: subtle border for definition */
html.skin-theme-clientpref-day .vector-main-menu-container,
html.skin-theme-clientpref-day .vector-sticky-pinned-container {
    border-right: 1px solid #6272a4 !important;
}