MediaWiki:Common.css: Difference between revisions

Revision as of 10:17, 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;
}

/* --- Fix white background on .vector-pinned-container --- */

/* DARK MODE */
html.skin-theme-clientpref-night .vector-pinned-container {
  background-color: #101418 !important;  /* your dark background */
  color: #f8f8f2 !important;
}

/* LIGHT MODE */
html.skin-theme-clientpref-day .vector-pinned-container {
  background-color: #f8f8f2 !important;  /* your light container tone */
  color: #101418 !important;
}

/* Make sure inner panels inherit the correct color */
html.skin-theme-clientpref-night .vector-pinned-container * {
  background-color: transparent !important;
  color: inherit !important;
}
html.skin-theme-clientpref-day .vector-pinned-container * {
  background-color: transparent !important;
  color: inherit !important;
}

/* --- Fix white background on dropdown menus --- */

/* DARK MODE */
html.skin-theme-clientpref-night .vector-dropdown-content,
html.skin-theme-clientpref-night .vector-dropdown-content * {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
  border-color: #6272a4 !important;
}

/* LIGHT MODE */
html.skin-theme-clientpref-day .vector-dropdown-content,
html.skin-theme-clientpref-day .vector-dropdown-content * {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
  border-color: #6272a4 !important;
}

/* --- Final background patch for bottom white stripe --- */

/* DARK MODE */
html.skin-theme-clientpref-night .vector-sitenotice-container,
html.skin-theme-clientpref-night .vector-column-start {
  background-color: #101418 !important;
  color: #f8f8f2 !important;
}

/* LIGHT MODE */
html.skin-theme-clientpref-day .vector-sitenotice-container,
html.skin-theme-clientpref-day .vector-column-start {
  background-color: #f8f8f2 !important;
  color: #101418 !important;
}

/* Ensure children inherit correctly */
html.skin-theme-clientpref-night .vector-sitenotice-container *,
html.skin-theme-clientpref-night .vector-column-start * {
  background-color: transparent !important;
  color: inherit !important;
}

html.skin-theme-clientpref-day .vector-sitenotice-container *,
html.skin-theme-clientpref-day .vector-column-start * {
  background-color: transparent !important;
  color: inherit !important;
}

.color-inverted::before,
.color-inverted::after,
.color-inverted-fixed::before,
.color-inverted-fixed::after,
.box-shadow-color-inverted::before,
.box-shadow-color-inverted::after {
  box-shadow: none !important;
  background: transparent !important;
  content: none !important;
}