MediaWiki:Common.css: Difference between revisions

Latest revision as of 19:40, 20 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;
}

/* Remove the white shadow explicitly */
.box-shadow-color-inverted {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Infobox: character */
.infobox-character {
  border: 1px solid #6272a4;
  background: #101418;       /* dark background (night mode) */
  color: #f8f8f2;
  padding: 0.25em;
  margin: 0.6em 0;
  font-size: 0.92em;
  line-height:1.25;
  float: right;
  clear: right;
  max-width: 22em;
}

/* heading/title row in infobox (handled by template's inline style, but safe fallback) */
.infobox-character > caption,
.infobox-character .infobox-title,
.infobox-character th {
  color: #ff79c6;
  background: transparent;
  font-weight: bold;
}

/* label cells */
.infobox-character td:first-child,
.infobox-character th {
  background: transparent;
  color: #f8f8f2;
  vertical-align: top;
  padding-right: 0.4em;
  white-space: nowrap;
}

/* value cells */
.infobox-character td:nth-child(2) {
  background: transparent;
  color: #f8f8f2;
  padding-left: 0.4em;
}

/* image styling */
.infobox-character img,
.infobox-character .thumbimage {
  display:block;
  margin: 0.4em auto;
  max-width: 95%;
  height: auto;
}

/* Light-mode overrides (if you use the vector day/night selectors) */
html.skin-theme-clientpref-day .infobox-character {
  background: #f8f8f2;
  color: #101418;
  border: 1px solid #6272a4;
}
html.skin-theme-clientpref-day .infobox-character th {
  color: #ff79c6;
}

/* Hide stray VisualEditor <p><br></p> after infoboxes */
.mw-parser-output .infobox + p:has(br) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === Mobile Infobox Layout Fix === */
@media (max-width: 768px) {
  /* Force infoboxes to drop below text and use full width */
  .infobox {
    float: none !important;
    margin: 1em auto !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    display: block !important;
  }

  /* Slight padding and center alignment for aesthetics */
  .infobox th,
  .infobox td {
    padding: 0.4em !important;
  }

  /* Make sure text wraps nicely */
  .infobox td,
  .infobox th {
    word-wrap: break-word !important;
  }
}

/* === Desktop: show full wordmark === */
.mw-logo-icon { display: none !important; }
.mw-logo-wordmark { display: inline-block !important; }

/* === Mobile (under 768px): hide wordmark, show square icon === */
@media (max-width: 768px) {
  .mw-logo-wordmark { display: none !important; }
  .mw-logo-icon {
    display: inline-block !important;
    content: url("https://untenables.com/images/2/26/Favicon.png");
    width: 42px;
    height: auto;
    margin-top: 4px;
  }
}