MediaWiki:Common.css: Difference between revisions

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

/* --- Left column panels (Navigation / Tools / Personal / Search) ---
   Ensure the panel containers match the active palette in both modes
   Palette:
   - Dark:   #101418
   - Light:  #f8f8f2
   - Accent: #ff79c6
   - Secondary: #6272a4
   - Alert:  #ff5555
*/

/* NIGHT mode: panels and their inner content */
html.skin-theme-clientpref-night #p-navigation,
html.skin-theme-clientpref-night #p-tb,
html.skin-theme-clientpref-night #p-personal,
html.skin-theme-clientpref-night #p-search,
html.skin-theme-clientpref-night .vector-main-menu,
html.skin-theme-clientpref-night .vector-menu-content,
html.skin-theme-clientpref-night .vector-main-menu-container,
html.skin-theme-clientpref-night .vector-sticky-pinned-container {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
}

/* Night mode: links inside panels */
html.skin-theme-clientpref-night #p-navigation a,
html.skin-theme-clientpref-night #p-tb a,
html.skin-theme-clientpref-night #p-personal a,
html.skin-theme-clientpref-night .vector-main-menu a,
html.skin-theme-clientpref-night .vector-menu-content a {
  color: #f8f8f2 !important;
}
html.skin-theme-clientpref-night #p-navigation a:hover,
html.skin-theme-clientpref-night #p-tb a:hover,
html.skin-theme-clientpref-night .vector-main-menu a:hover {
  color: #ff79c6 !important;
}

/* LIGHT mode: panels and their inner content */
html.skin-theme-clientpref-day #p-navigation,
html.skin-theme-clientpref-day #p-tb,
html.skin-theme-clientpref-day #p-personal,
html.skin-theme-clientpref-day #p-search,
html.skin-theme-clientpref-day .vector-main-menu,
html.skin-theme-clientpref-day .vector-menu-content,
html.skin-theme-clientpref-day .vector-main-menu-container,
html.skin-theme-clientpref-day .vector-sticky-pinned-container {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
}

/* Light mode: links inside panels */
html.skin-theme-clientpref-day #p-navigation a,
html.skin-theme-clientpref-day #p-tb a,
html.skin-theme-clientpref-day #p-personal a,
html.skin-theme-clientpref-day .vector-main-menu a,
html.skin-theme-clientpref-day .vector-menu-content a {
  color: #ff79c6 !important;
}
html.skin-theme-clientpref-day #p-navigation a:hover,
html.skin-theme-clientpref-day #p-tb a:hover,
html.skin-theme-clientpref-day .vector-main-menu a:hover {
  color: #ff5555 !important;
}

/* Force the small gaps / gutters between sidebar boxes to inherit the same bg */
html.skin-theme-clientpref-day .vector-main-menu-container > *,
html.skin-theme-clientpref-day .vector-menu-content > *,
html.skin-theme-clientpref-day #p-navigation > .body,
html.skin-theme-clientpref-day #p-tb > .body,
html.skin-theme-clientpref-night .vector-main-menu-container > *,
html.skin-theme-clientpref-night .vector-menu-content > *,
html.skin-theme-clientpref-night #p-navigation > .body,
html.skin-theme-clientpref-night #p-tb > .body {
  background-color: inherit !important;
}

/* Optional: subtle border to separate sidebar from content */
html.skin-theme-clientpref-day .vector-main-menu-container,
html.skin-theme-clientpref-night .vector-main-menu-container {
  border-right: 1px solid #6272a4 !important;
}