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.
/* ================================================================ */
/* MISFITS NUCLEAR WASTELAND - FULL DARK MODE (Vector 2022) */
/* Applies site-wide for all visitors. Modeled after SS14 wiki. */
/* Two-tone: dark outer shell (#111) + lighter content (#1b1b1f). */
/* Last updated by MisfitsGuidebookBot */
/* ================================================================ */
/* ── Color scheme declaration ──────────────────────────────────── */
:root {
color-scheme: dark;
/* Core palette */
--bg-outer: #111111;
--bg-shell: #1b1b1f;
--bg-content: #212126;
--bg-panel: #212126;
--bg-panel-head: #1b1b1f;
--bg-elevated: #28282e;
--bg-hover: #2e2e34;
--border-soft: #2a2a30;
--border-mid: #3a3a42;
--border-strong: #4a4a52;
--text-body: #d4d4d4;
--text-heading: #e8e8e8;
--text-muted: #888;
--text-faint: #666;
--link-color: #6bba5e;
--link-visited: #8aaa7a;
--link-hover: #7dd06e;
--link-red: #cc5555;
--accent: #6bba5e;
--accent-dim: #3a5a2a;
/* Override Vector 2022 CSS custom properties */
--background-color-base: var(--bg-shell);
--background-color-neutral: var(--bg-content);
--background-color-neutral-subtle: var(--bg-shell);
--background-color-interactive: var(--bg-elevated);
--background-color-interactive--hover: var(--bg-hover);
--background-color-progressive: var(--accent);
--background-color-progressive--active: var(--accent-dim);
--color-base: var(--text-body);
--color-base--subtle: var(--text-muted);
--color-emphasized: var(--text-heading);
--color-link: var(--link-color);
--color-link--visited: var(--link-visited);
--color-progressive: var(--accent);
--color-progressive--hover: var(--link-hover);
--border-color-base: var(--border-mid);
--border-color-subtle: var(--border-soft);
--border-color-muted: var(--border-strong);
--box-shadow-drop-medium: 0 2px 8px rgba(0,0,0,0.6);
}
/*
* When Vector 2022's built-in night mode is active, it overrides
* the same CSS custom properties with its own dark palette.
* We re-assert our palette here so it wins over Vector's night vars.
*/
html.skin-theme-clientpref-night {
--background-color-base: var(--bg-shell) !important;
--background-color-neutral: var(--bg-content) !important;
--background-color-neutral-subtle: var(--bg-shell) !important;
--background-color-interactive: var(--bg-elevated) !important;
--background-color-interactive--hover: var(--bg-hover) !important;
--background-color-progressive: var(--accent) !important;
--background-color-progressive--active: var(--accent-dim) !important;
--color-base: var(--text-body) !important;
--color-base--subtle: var(--text-muted) !important;
--color-emphasized: var(--text-heading) !important;
--color-link: var(--link-color) !important;
--color-link--visited: var(--link-visited) !important;
--color-progressive: var(--accent) !important;
--color-progressive--hover: var(--link-hover) !important;
--border-color-base: var(--border-mid) !important;
--border-color-subtle: var(--border-soft) !important;
--border-color-muted: var(--border-strong) !important;
--box-shadow-drop-medium: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Same overrides for OS-level prefers-color-scheme when user chose "auto" */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--background-color-base: var(--bg-shell) !important;
--background-color-neutral: var(--bg-content) !important;
--background-color-neutral-subtle: var(--bg-shell) !important;
--background-color-interactive: var(--bg-elevated) !important;
--background-color-interactive--hover: var(--bg-hover) !important;
--background-color-progressive: var(--accent) !important;
--background-color-progressive--active: var(--accent-dim) !important;
--color-base: var(--text-body) !important;
--color-base--subtle: var(--text-muted) !important;
--color-emphasized: var(--text-heading) !important;
--color-link: var(--link-color) !important;
--color-link--visited: var(--link-visited) !important;
--color-progressive: var(--accent) !important;
--color-progressive--hover: var(--link-hover) !important;
--border-color-base: var(--border-mid) !important;
--border-color-subtle: var(--border-soft) !important;
--border-color-muted: var(--border-strong) !important;
--box-shadow-drop-medium: 0 2px 8px rgba(0,0,0,0.6) !important;
}
}
/* ================================================================ */
/* A. STRUCTURAL: outer shell, page container, content area */
/* ================================================================ */
html, body {
background: var(--bg-outer) !important;
color: var(--text-body) !important;
}
/* The entire page wrapper */
.mw-page-container {
background: var(--bg-shell) !important;
border-color: var(--bg-shell) !important;
}
/* Content area - slightly lighter than shell for visual depth */
.mw-body {
background: var(--bg-content) !important;
color: var(--text-body) !important;
border-color: var(--border-soft) !important;
border-radius: 4px;
padding: 1.2em 1.5em !important;
}
.vector-body {
color: var(--text-body) !important;
}
/* ================================================================ */
/* B. HEADER BAR */
/* ================================================================ */
.vector-header,
.vector-header-container {
background: var(--bg-shell) !important;
color: var(--text-body) !important;
border-bottom: 1px solid var(--border-soft) !important;
}
/* Sticky header on scroll */
.vector-sticky-header {
background: var(--bg-shell) !important;
border-bottom: 1px solid var(--border-soft) !important;
}
.vector-header a,
.vector-sticky-header a {
color: var(--text-muted) !important;
}
.vector-header a:hover,
.vector-sticky-header a:hover {
color: var(--accent) !important;
}
/* Site name / logo text */
.mw-logo-wordmark,
.vector-header .mw-logo-wordmark {
filter: brightness(0) invert(0.85);
}
/* ================================================================ */
/* C. LEFT SIDEBAR (Main Menu) - card-panel style */
/* ================================================================ */
.vector-column-start {
background: var(--bg-shell) !important;
}
.vector-main-menu-container,
.vector-main-menu-landmark {
background: var(--bg-shell) !important;
}
/* Main menu panel - card style */
.vector-main-menu {
background: var(--bg-content) !important;
border: 1px solid var(--border-soft) !important;
border-radius: 6px !important;
padding: 0.5em 0.8em !important;
margin-bottom: 0.8em !important;
}
/* Main menu header label */
.vector-main-menu .vector-pinnable-header {
background: transparent !important;
border-bottom: 1px solid var(--border-soft) !important;
margin-bottom: 0.4em !important;
padding-bottom: 0.4em !important;
}
.vector-main-menu .vector-pinnable-header-label {
color: var(--text-heading) !important;
font-weight: bold !important;
}
/* Individual menu sections inside sidebar (Navigation, etc.) */
.vector-main-menu .vector-menu.mw-portlet {
background: transparent !important;
margin-bottom: 0.6em !important;
}
.vector-main-menu .vector-menu-heading {
color: var(--text-body) !important;
font-weight: 600 !important;
border-bottom: 1px solid var(--border-soft) !important;
padding-bottom: 0.3em !important;
margin-bottom: 0.3em !important;
}
/* Sidebar links */
.vector-main-menu a,
.vector-main-menu .vector-menu-content a,
.vector-menu-portal .vector-menu-content a {
color: var(--text-muted) !important;
}
.vector-main-menu a:hover,
.vector-menu-portal .vector-menu-content a:hover {
color: var(--accent) !important;
}
/* ================================================================ */
/* D. RIGHT SIDEBAR (TOC + Tools + Appearance) - card-panel style */
/* ================================================================ */
.vector-column-end {
background: var(--bg-shell) !important;
}
/* Table of Contents panel - card style */
.vector-toc,
.vector-toc-landmark .vector-toc {
background: var(--bg-content) !important;
border: 1px solid var(--border-soft) !important;
border-radius: 6px !important;
padding: 0.5em 0.8em !important;
margin-bottom: 0.8em !important;
}
.vector-toc .vector-pinnable-header {
background: transparent !important;
border-bottom: 1px solid var(--border-soft) !important;
margin-bottom: 0.4em !important;
padding-bottom: 0.4em !important;
}
.vector-toc .vector-pinnable-header-label,
.sidebar-toc .sidebar-toc-header {
color: var(--text-heading) !important;
font-weight: bold !important;
}
.vector-toc a,
.sidebar-toc a {
color: var(--text-muted) !important;
}
.vector-toc a:hover,
.sidebar-toc a:hover {
color: var(--accent) !important;
}
.vector-toc-list-item-active > .sidebar-toc-link {
color: var(--accent) !important;
border-left-color: var(--accent) !important;
}
.sidebar-toc .sidebar-toc-list-item {
border-left-color: var(--border-soft) !important;
}
.vector-toc-numb,
.vector-toc .vector-toc-numb {
color: var(--text-faint) !important;
}
/* Page Tools panel (pinned to right column) - card style */
.vector-page-tools {
background: var(--bg-content) !important;
border: 1px solid var(--border-soft) !important;
border-radius: 6px !important;
padding: 0.5em 0.8em !important;
margin-bottom: 0.8em !important;
}
.vector-page-tools .vector-pinnable-header {
background: transparent !important;
border-bottom: 1px solid var(--border-soft) !important;
margin-bottom: 0.4em !important;
padding-bottom: 0.4em !important;
}
.vector-page-tools .vector-pinnable-header-label {
color: var(--text-heading) !important;
font-weight: bold !important;
}
.vector-page-tools .vector-menu-heading {
color: var(--text-body) !important;
font-weight: 600 !important;
border-bottom: 1px solid var(--border-soft) !important;
padding-bottom: 0.3em !important;
margin-bottom: 0.3em !important;
}
.vector-page-tools a {
color: var(--text-muted) !important;
}
.vector-page-tools a:hover {
color: var(--accent) !important;
}
/* Appearance settings panel - card style */
.vector-appearance {
background: var(--bg-content) !important;
border: 1px solid var(--border-soft) !important;
border-radius: 6px !important;
padding: 0.5em 0.8em !important;
margin-bottom: 0.8em !important;
}
.vector-appearance .vector-pinnable-header {
background: transparent !important;
border-bottom: 1px solid var(--border-soft) !important;
margin-bottom: 0.4em !important;
padding-bottom: 0.4em !important;
}
.vector-appearance .vector-pinnable-header-label {
color: var(--text-heading) !important;
font-weight: bold !important;
}
/* Old-style in-page TOC */
.toc, #toc {
background: var(--bg-content) !important;
border: 1px solid var(--border-mid) !important;
border-radius: 6px !important;
color: var(--text-body) !important;
}
.toc a, #toc a { color: var(--accent) !important; }
.toc .toctitle, #toc .toctitle { color: var(--text-heading) !important; }
.tocnumber { color: var(--text-muted) !important; }
/* ================================================================ */
/* E. TABS (Read / Edit / History / More) */
/* ================================================================ */
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs .selected a {
color: var(--text-body) !important;
}
.vector-menu-tabs .selected a {
border-bottom-color: var(--accent) !important;
}
nav.vector-menu-tabs {
border-bottom-color: var(--border-soft) !important;
}
/* ================================================================ */
/* F. CONTENT: headings, text, links, hr */
/* ================================================================ */
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
color: var(--text-heading) !important;
}
.mw-heading,
.mw-body-content h2 {
border-bottom-color: var(--border-mid) !important;
}
.mw-body-content {
color: var(--text-body) !important;
}
#firstHeading,
.mw-first-heading {
color: var(--text-heading) !important;
}
hr {
border-color: var(--border-mid) !important;
}
/* Links */
.mw-body-content a:not(.new),
.mw-parser-output a:not(.new) {
color: var(--link-color) !important;
}
.mw-body-content a:visited:not(.new),
.mw-parser-output a:visited:not(.new) {
color: var(--link-visited) !important;
}
.mw-body-content a:hover,
.mw-parser-output a:hover {
color: var(--link-hover) !important;
}
.mw-body-content a.new,
.mw-parser-output a.new {
color: var(--link-red) !important;
}
/* Edit section brackets */
.mw-editsection a {
color: var(--text-muted) !important;
}
/* ================================================================ */
/* G. SEARCH */
/* ================================================================ */
.cdx-text-input__input,
.vector-search-box-input,
input[type="search"] {
background: var(--bg-elevated) !important;
color: var(--text-body) !important;
border-color: var(--border-mid) !important;
}
.cdx-text-input__input::placeholder {
color: var(--text-faint) !important;
}
/* Suggestions dropdown */
.cdx-menu,
.cdx-typeahead-search__menu,
.suggestions,
.suggestions-results {
background: var(--bg-content) !important;
border-color: var(--border-mid) !important;
}
.cdx-menu-item { color: var(--text-body) !important; }
.cdx-menu-item--highlighted,
.cdx-menu-item:hover {
background: var(--bg-hover) !important;
}
/* Search button (Codex "SEARCH" button) */
.cdx-search-input__end-button,
.cdx-search-input__end-button.cdx-button,
.cdx-button.cdx-search-input__end-button {
background-color: var(--bg-elevated) !important;
color: var(--text-body) !important;
border-color: var(--border-mid) !important;
}
.cdx-search-input__end-button:hover {
background-color: var(--bg-hover) !important;
color: var(--text-heading) !important;
border-color: var(--border-strong) !important;
}
/* General Codex buttons in non-progressive contexts */
.cdx-button--action-default.cdx-button--weight-normal {
background-color: var(--bg-elevated) !important;
color: var(--text-body) !important;
border-color: var(--border-mid) !important;
}
.cdx-button--action-default.cdx-button--weight-normal:hover {
background-color: var(--bg-hover) !important;
}
/* Progressive (primary action) Codex buttons */
.cdx-button--action-progressive.cdx-button--weight-primary {
background-color: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
.cdx-button--action-progressive.cdx-button--weight-primary:hover {
background-color: var(--link-hover) !important;
border-color: var(--link-hover) !important;
}
/* Search results page */
.searchresult { color: var(--text-body) !important; }
.mw-search-result-heading a { color: var(--accent) !important; }
.mw-search-result-data { color: var(--text-muted) !important; }
/* ================================================================ */
/* H. TABLES */
/* ================================================================ */
.wikitable, table.wikitable {
background: var(--bg-elevated) !important;
color: var(--text-body) !important;
border: 1px solid var(--border-mid) !important;
}
.wikitable th,
.wikitable > * > tr > th {
background: var(--bg-panel-head) !important;
color: var(--text-heading) !important;
border-color: var(--border-mid) !important;
}
.wikitable td,
.wikitable > * > tr > td {
border-color: var(--border-soft) !important;
}
.wikitable tr:nth-child(even) {
background: var(--bg-content) !important;
}
.wikitable caption {
background: var(--bg-panel-head) !important;
color: var(--text-heading) !important;
}
/* Sortable table header icons (white arrows) */
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.jquery-tablesorter th.headerSort {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9"><path fill="white" d="m14.5 5-4 4-4-4zm0-1-4-4-4 4z"/></svg>') !important;
}
/* Infoboxes */
.infobox {
background: var(--bg-elevated) !important;
color: var(--text-body) !important;
border-color: var(--border-mid) !important;
}
/* ================================================================ */
/* I. CODE & PRE BLOCKS */
/* ================================================================ */
pre, code, .mw-code {
background: var(--bg-shell) !important;
color: #ccc !important;
border-color: var(--border-soft) !important;
}
/* ================================================================ */
/* J. CATEGORIES */
/* ================================================================ */
.catlinks {
background: var(--bg-panel) !important;
border: 1px solid var(--border-soft) !important;
color: var(--text-muted) !important;
}
.catlinks a { color: var(--accent) !important; }
/* ================================================================ */
/* K. FOOTER */
/* ================================================================ */
.mw-footer,
footer.mw-footer,
.vector-footer-container {
background: var(--bg-outer) !important;
color: var(--text-faint) !important;
border-top: 1px solid var(--border-soft) !important;
}
.mw-footer a { color: var(--text-muted) !important; }
.mw-footer a:hover { color: var(--accent) !important; }
/* ================================================================ */
/* L. DROPDOWNS & MENUS (user menu, "More" tab, etc.) */
/* ================================================================ */
.vector-dropdown-content,
.vector-menu-content {
background: var(--bg-content) !important;
border: 1px solid var(--border-mid) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
border-radius: 6px !important;
}
.vector-dropdown-content a,
.vector-user-links a {
color: var(--text-body) !important;
}
.vector-dropdown-content a:hover {
color: var(--accent) !important;
background: var(--bg-hover) !important;
}
.vector-user-links {
background: transparent !important;
}
/* When panels are unpinned and shown as dropdowns, card-style them */
.vector-unpinned-container .vector-main-menu,
.vector-unpinned-container .vector-page-tools,
.vector-unpinned-container .vector-toc,
.vector-unpinned-container .vector-appearance {
background: var(--bg-content) !important;
border: none !important;
border-radius: 0 !important;
padding: 0.5em !important;
margin: 0 !important;
}
/* ================================================================ */
/* M. PINNABLE HEADER BUTTONS (pin/unpin toggles) */
/* ================================================================ */
.vector-pinnable-header-toggle-button,
.vector-pinnable-header-unpin-button,
.vector-pinnable-header-pin-button {
color: var(--text-muted) !important;
}
.vector-pinnable-header-toggle-button:hover {
color: var(--accent) !important;
}
.vector-pinnable-header-label {
color: var(--text-body) !important;
}
/* ================================================================ */
/* N. EDIT & SPECIAL PAGES */
/* ================================================================ */
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"] {
background: var(--bg-elevated) !important;
color: var(--text-body) !important;
border-color: var(--border-mid) !important;
}
/* OOUI widgets */
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea {
background: var(--bg-elevated) !important;
color: var(--text-body) !important;
}
.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
background: var(--bg-elevated) !important;
color: var(--text-body) !important;
border-color: var(--border-mid) !important;
}
.oo-ui-buttonElement-framed .oo-ui-buttonElement-button:hover {
background: var(--bg-hover) !important;
}
/* ================================================================ */
/* O. DIFF PAGES */
/* ================================================================ */
.diff-context {
background: var(--bg-content) !important;
color: var(--text-body) !important;
}
.diff-addedline {
background: #1a2e1a !important;
color: #c8e8c8 !important;
}
.diff-deletedline {
background: #2e1a1a !important;
color: #e8c8c8 !important;
}
td.diff-marker {
color: var(--text-muted) !important;
}
/* ================================================================ */
/* P. NOTICES, MESSAGE BOXES, WARNINGS */
/* ================================================================ */
.mw-message-box,
.mbox-small,
.ambox, .ombox, .tmbox, .cmbox, .fmbox {
background: var(--bg-elevated) !important;
border-color: var(--border-mid) !important;
color: var(--text-body) !important;
}
.mw-message-box-warning {
background: #2e2a1a !important;
border-color: #5a5030 !important;
}
.mw-message-box-error {
background: #2e1a1a !important;
border-color: #5a3030 !important;
}
/* ================================================================ */
/* Q. SPECIAL PAGES */
/* ================================================================ */
fieldset {
border-color: var(--border-mid) !important;
}
legend {
color: var(--text-body) !important;
}
.mw-special-pages-table td {
border-color: var(--border-soft) !important;
}
/* Recent changes, watchlist, history */
.mw-changeslist-line,
.mw-contributions-list li {
border-color: var(--border-soft) !important;
}
#pagehistory li.selected {
background: var(--accent-dim) !important;
}
/* ================================================================ */
/* R. THUMBNAILS & IMAGES */
/* ================================================================ */
.thumbinner,
.thumbinner .thumbimage {
background: var(--bg-elevated) !important;
border-color: var(--border-mid) !important;
color: var(--text-muted) !important;
}
.thumbcaption {
color: var(--text-muted) !important;
}
/* ================================================================ */
/* S. COLLAPSIBLE ELEMENTS */
/* ================================================================ */
.mw-collapsible-toggle a {
color: var(--accent) !important;
}
/* ================================================================ */
/* T. EXISTING FALLOUT-WIKI-BOX (dark mode compatible) */
/* ================================================================ */
.mw-parser-output .fallout-wiki-box {
background-color: var(--bg-content);
color: var(--text-body);
padding: 20px;
border: 2px solid #003366;
border-top: 6px solid #FFCC00;
border-radius: 5px;
font-family: sans-serif;
}
.mw-parser-output .fallout-wiki-box h1,
.mw-parser-output .fallout-wiki-box h2,
.mw-parser-output .fallout-wiki-box h3 {
color: #FFCC00;
border-bottom: 2px solid #4a6a99;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
margin-top: 20px;
padding-bottom: 5px;
}
/* ================================================================ */
/* U. SCROLLBAR (Webkit) */
/* ================================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-shell); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
/* Firefox scrollbar */
* {
scrollbar-color: var(--border-mid) var(--bg-shell);
scrollbar-width: thin;
}
/* ================================================================ */
/* V. SELECTION HIGHLIGHT */
/* ================================================================ */
::selection {
background: var(--accent-dim);
color: var(--text-heading);
}