MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================
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;
}