Jump to content

MediaWiki:Common.css: Difference between revisions

Created page with "→CSS placed here will be applied to all skins: →==== Chrono Odyssey dark palette ===============: :root { →whenever Vector isn't in dark mode yet: color-scheme: light dark; →enables light-dark() helper: } html.skin-theme-clientpref-night, @media (prefers-color-scheme: dark) { →fall back to OS preference: :root { →Core background & text: --background-color-base: #131820; /* matches front-page banner..."
 
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* ==== Chrono Odyssey dark palette =============== */
/* Chrono Odyssey Wiki - Dark Fantasy Theme CSS */
/* MediaWiki:Common.css - Version 1.43.0 Compatible */
 
/* ===== PRIORITY OVERRIDES ===== */
/* These must come first to ensure dark theme applies */
html {
    background: #0d0d0d !important;
}
 
body,
.mediawiki,
.skin-vector,
.skin-vector-legacy,
.skin-vector-2022 {
    background: #0d0d0d !important;
    color: #c9c9c9 !important;
}
 
/* Remove all default white backgrounds */
.mw-page-container,
.mw-body,
#content,
.vector-body {
    background: #0d0d0d !important;
    color: #c9c9c9 !important;
}
 
/* ===== CORE VARIABLES ===== */
:root {
:root {
  /* whenever Vector isn't in dark mode yet    */
    --main-bg: #0d0d0d;
  color-scheme: light dark;                 /* enables light-dark() helper */
    --secondary-bg: #1a0f0f;
    --border-color: #2a1515;
    --blood-red: #8b0000;
    --antique-gold: #b89968;
    --text-primary: #c9c9c9;
    --text-secondary: #999999;
    --text-muted: #666666;
    --link-color: #b89968;
    --link-hover: #d4af76;
    --shadow-dark: 0 6px 30px rgba(0,0,0,0.9);
    --shadow-inset: inset 0 0 20px rgba(0,0,0,0.5);
}
 
/* ===== GLOBAL RESET ===== */
* {
    box-sizing: border-box;
}
 
/* ===== BODY & MAIN CONTAINERS ===== */
body {
    background: var(--main-bg) !important;
    color: var(--text-primary);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.6;
}
 
/* Main wrapper and containers */
.mw-body {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}
 
#content {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 20px;
    box-shadow: var(--shadow-dark);
}
 
#bodyContent {
    font-size: 15px;
}
 
#mw-page-base {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%);
}
 
/* Page wrapper background */
.mw-page-container {
    background: var(--main-bg) !important;
}
 
/* Header area */
.mw-header {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%) !important;
    border-bottom: 2px solid var(--blood-red);
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
 
/* Logo area */
.mw-logo {
    filter: brightness(0.9);
}
 
/* Search container */
#p-search,
.vector-search-box,
#simpleSearch,
#searchform {
    background: transparent !important;
}
 
/* Page header area */
.mw-indicators,
.mw-body-header,
.vector-body-before-content {
    background: transparent !important;
}
 
/* User links area */
#p-personal,
.vector-user-links,
.vector-user-menu {
    background: transparent !important;
}
 
/* Language selector */
#p-lang,
.vector-menu-portal#p-lang {
    background: var(--main-bg) !important;
}
 
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--antique-gold);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--blood-red);
    padding-bottom: 10px;
    margin: 20px 0 15px 0;
}
 
h1 {
    font-size: 32px;
    letter-spacing: 4px;
}
 
h2 {
    font-size: 26px;
    letter-spacing: 3px;
}
 
h3 {
    font-size: 20px;
    border-bottom: 1px solid var(--border-color);
}
 
h4, h5, h6 {
    font-size: 16px;
    border-bottom: 1px solid var(--border-color);
}
 
/* First heading special styling */
.firstHeading {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}
 
/* ===== LINKS ===== */
a {
    color: var(--link-color);
    text-decoration: none;
}
 
a:hover {
    color: var(--link-hover);
    text-shadow: 0 0 5px rgba(184, 153, 104, 0.3);
}
 
a:visited {
    color: #9a7f5a;
}
 
a.new, #p-personal a.new {
    color: #cc6666 !important;
}
 
a.external {
    color: var(--link-color);
    padding-right: 15px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23b89968" d="M9 3v6h-2V5L3 9V7l4-4H3V1h6z"/></svg>') no-repeat right center;
}
 
/* ===== NAVIGATION & SIDEBARS ===== */
/* Main sidebar container */
#mw-panel, .mw-sidebar {
    background: var(--secondary-bg) !important;
    border-right: 1px solid var(--border-color);
}
 
/* Vector 2022 sidebar */
.vector-main-menu-container,
.vector-sidebar-container {
    background: var(--secondary-bg) !important;
}
 
/* Sidebar sections */
#mw-panel .portal,
.vector-menu-portal,
.mw-sidebar .sidebar-chunk {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-color);
    margin: 10px;
    padding: 10px;
}
 
/* Sidebar headings */
#mw-panel .portal h3,
.vector-menu-heading,
.sidebar-chunk h3,
.tocheader {
    color: var(--blood-red) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}
 
/* Sidebar links */
#mw-panel .portal .body li a,
.vector-menu-content li a,
.sidebar-chunk li a {
    color: var(--text-secondary) !important;
}
 
#mw-panel .portal .body li a:hover,
.vector-menu-content li a:hover,
.sidebar-chunk li a:hover {
    color: var(--link-hover) !important;
}
 
/* Table of Contents */
#toc, .toc, .sidebar-toc {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
/* Contents header text */
.tocheader,
.sidebar-toc .sidebar-toc-title {
    color: var(--antique-gold) !important;
}
 
/* Tools section specific */
.vector-page-tools,
.vector-appearance,
.vector-more-collapsible-item {
    background: var(--main-bg) !important;
}
 
/* Toolbox styling */
#p-tb, #p-cactions, #p-personal {
    background: var(--secondary-bg) !important;
}
 
/* Left sidebar specific sections */
/* Main menu / Navigation */
#mw-panel .portal,
#mw-panel #p-logo + .portal,
#mw-panel #p-navigation,
#p-navigation,
.vector-menu-portal,
.vector-main-menu .vector-menu-content {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-color) !important;
    margin: 10px !important;
    padding: 10px !important;
}
 
/* Sidebar section headers - like "Contents", "Beginning" */
#mw-panel .portal h3 label,
#mw-panel .portal h3,
.vector-menu-heading,
.vector-menu-portal .vector-menu-heading,
.sidebar-toc .sidebar-toc-title {
    background: transparent !important;
    color: var(--blood-red) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    padding: 5px 0 !important;
}
 
/* Sidebar list items */
#mw-panel .portal .body ul li,
.vector-menu-content-list li,
.sidebar-toc-list li {
    background: transparent !important;
}
 
/* Sidebar links - like "Getting started" */
#mw-panel .portal .body ul li a,
.vector-menu-content-list li a,
.sidebar-toc-link {
    color: var(--text-secondary) !important;
    display: block;
    padding: 4px 0;
}
 
#mw-panel .portal .body ul li a:hover,
.vector-menu-content-list li a:hover,
.sidebar-toc-link:hover {
    color: var(--link-hover) !important;
    text-shadow: 0 0 5px rgba(184, 153, 104, 0.3);
}
 
/* Top navigation tabs */
.vectorTabs {
    background: none !important;
}
 
.vectorTabs li {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color);
    border-bottom: none;
}
 
.vectorTabs li.selected {
    background: var(--main-bg) !important;
    border-bottom: 1px solid var(--main-bg);
}
 
.vectorTabs li a {
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}
 
/* Vector 2022 tabs */
.vector-menu-tabs,
.vector-menu-tabs .vector-menu-content-list {
    background: transparent !important;
}
 
.vector-menu-tabs .vector-menu-content-list li {
    background: var(--secondary-bg) !important;
}
 
.vector-menu-tabs .selected {
    background: var(--main-bg) !important;
}
 
/* Page actions menu */
.vector-page-toolbar,
.vector-menu-dropdown {
    background: transparent !important;
}
 
/* Actions button and dropdown */
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .vector-menu-checkbox {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
/* User menu */
.vector-user-menu-legacy li,
.vector-user-links .vector-menu-content-list li {
    background: transparent !important;
}
 
/* Dropdown menus and their hover states */
.vector-menu-dropdown .vector-menu-content,
.vector-menu-dropdown.vector-menu-dropdown-noicon .vector-menu-content {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--blood-red) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.9);
}
 
.vector-menu-dropdown .vector-menu-content-list li a {
    color: var(--text-secondary) !important;
    padding: 8px 15px !important;
}
 
.vector-menu-dropdown .vector-menu-content-list li a:hover {
    background: var(--blood-red) !important;
    color: white !important;
}
 
/* More menu specific */
#p-cactions .vector-menu-content,
#p-tb .vector-menu-content,
#p-views .vector-menu-content {
    background: var(--secondary-bg) !important;
}
 
/* ===== TABLES ===== */
table.wikitable {
    background: var(--main-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
}
html.skin-theme-clientpref-night,
@media (prefers-color-scheme: dark) {        /* fall back to OS preference */
  :root {
    /* Core background & text */
    --background-color-base: #131820;        /* matches front-page banner  */
    --background-color-subtle: #161b22;
    --color-base:            #f2f2f2;
    --color-subtle:          #dcdcde;


    /* Borders & separators */
table.wikitable > tr > th,
     --border-color-base:    #2e3741;
table.wikitable > * > tr > th {
     background: var(--secondary-bg);
    color: var(--antique-gold);
    text-transform: uppercase;
     letter-spacing: 1px;
    border: 1px solid var(--border-color);
}


    /* Accent & link colours */
table.wikitable > tr > td,
     --color-link:            #5fd4ff;
table.wikitable > * > tr > td {
     --color-link--visited:  #c178ff;
     border: 1px solid var(--border-color);
     --color-link--hover:    #91eaff;
     background: var(--main-bg);
  }
     color: var(--text-secondary);
}
}


/* ==== Opportunistic clean-ups =================== */
table.wikitable > tr:nth-child(even) > td,
body.skin-vector,
table.wikitable > * > tr:nth-child(even) > td {
body.skin-vector-2022 {
    background: rgba(26, 15, 15, 0.5);
  background: var(--background-color-base);
  color:      var(--color-base);
}
}


/* Content frame */
/* ===== INFOBOXES ===== */
#content, .mw-body, .mw-body-content {
.infobox {
  background: transparent;                   /* we already themed <body>  */
    background: var(--main-bg);
    border: 2px solid var(--blood-red);
    box-shadow: var(--shadow-dark);
    color: var(--text-primary);
    margin: 0 0 20px 20px;
    float: right;
    clear: right;
    width: 300px;
}
}


/* Sidebar & portlets */
.infobox th {
#mw-panel, .vector-sidebar {
    background: var(--secondary-bg);
  background: var(--background-color-subtle);
    color: var(--antique-gold);
  color: var(--color-base);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}
}
.vector-menu-heading {                       /* portlet headers            */
 
  background: #1f2937;
.infobox td {
  color: var(--color-subtle);
    background: rgba(13, 13, 13, 0.8);
    color: var(--text-secondary);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}
}


/* Tables & infoboxes */
.infobox .infobox-title {
table.wikitable,
    background: linear-gradient(180deg, var(--blood-red), #6b0000);
.mw-page-container table.infobox {
    color: white;
  background: #1a2029;
    font-size: 18px;
  color: var(--color-base);
    text-align: center;
  border-color: var(--border-color-base);
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
}
table.wikitable th {
 
  background: #36414d;
/* ===== SEARCH ===== */
#searchInput,
.vector-search-box-input,
.searchbox input[type="search"],
.mw-searchInput {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
}


/* Links (extra belt-and-braces) */
#searchButton,
a, a:link     { color: var(--color-link); }
#mw-searchButton,
a:visited      { color: var(--color-link--visited); }
.searchButton,
a:hover,
.vector-search-box-submit {
a:active        { color: var(--color-link--hover); }
    background: var(--blood-red) !important;
    border: 1px solid var(--border-color) !important;
    color: white !important;
    text-transform: uppercase;
}
 
/* Search suggestions */
.suggestions,
.mw-searchSuggest-link {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
.suggestions-results,
.suggestions-result {
    background: var(--main-bg) !important;
    color: var(--text-secondary) !important;
}
 
.suggestions-result-current {
    background: var(--blood-red) !important;
    color: white !important;
}
 
/* ===== CATEGORIES ===== */
#catlinks {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
    margin-top: 20px;
}
 
#catlinks a {
    color: var(--link-color);
}
 
/* ===== EDIT INTERFACE ===== */
.editOptions {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
 
#wpTextbox1 {
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid var(--border-color);
}
 
.editButtons input[type="submit"] {
    background: var(--blood-red);
    border: 1px solid var(--border-color);
    color: white;
    text-transform: uppercase;
    padding: 8px 20px;
    cursor: pointer;
}
 
.editButtons input[type="submit"]:hover {
    background: #a00000;
}
 
/* ===== THUMBNAILS & IMAGES ===== */
.thumb {
    border: 1px solid var(--border-color);
    background: var(--secondary-bg);
    padding: 5px;
}
 
.thumbinner {
    background: var(--main-bg);
    border: 1px solid var(--border-color);
}
 
.thumbcaption {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 5px;
}
 
/* ===== TOC (Table of Contents) ===== */
#toc, .toc {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
}
 
#toc h2, .toc h2 {
    color: var(--blood-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
}
 
.tocnumber {
    color: var(--blood-red);
}
 
.toctext {
    color: var(--text-secondary);
}
 
/* ===== NOTIFICATIONS ===== */
.mw-notification {
    background: var(--secondary-bg);
    border: 1px solid var(--blood-red);
    color: var(--text-primary);
}
 
/* ===== FOOTER ===== */
#footer {
    background: #0a0a0a;
    border-top: 2px solid var(--blood-red);
    color: var(--text-muted);
    padding: 20px;
}
 
#footer a {
    color: var(--link-color);
}
 
/* ===== CODE BLOCKS ===== */
pre, code, .mw-code {
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    color: #e0e0e0;
}
 
/* ===== SPECIAL PAGES ===== */
.special li {
    color: var(--text-secondary);
}
 
/* ===== DIFF PAGES ===== */
.diff-context {
    background: var(--secondary-bg);
    color: var(--text-secondary);
}
 
.diff-addedline {
    background: rgba(0, 100, 0, 0.2);
}
 
.diff-deletedline {
    background: rgba(139, 0, 0, 0.2);
}
 
/* ===== LOGIN/REGISTER FORM ===== */
.mw-ui-input {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
 
.mw-ui-button {
    background: var(--blood-red);
    border: 1px solid var(--border-color);
    color: white;
    text-transform: uppercase;
}
 
/* ===== WIKI EDITOR TOOLBAR ===== */
.wikiEditor-ui {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
}
 
.wikiEditor-ui-toolbar {
    background: var(--main-bg);
}
 
/* ===== CUSTOM CLASSES ===== */
.blood-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blood-red), transparent);
    margin: 20px 0;
}
 
.gothic-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-dark), var(--shadow-inset);
    padding: 20px;
    margin: 15px 0;
}
 
/* ===== OVERRIDE WHITE BACKGROUNDS ===== */
/* Force dark theme on all major containers */
.skin-vector,
.skin-vector-legacy,
.skin-monobook {
    background: var(--main-bg) !important;
}
 
/* Header and navigation areas */
#mw-head,
#mw-head-base,
#mw-navigation,
.mw-header-container {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%) !important;
}
 
/* All portlet containers */
.portlet,
.vector-menu,
.mw-portlet {
    background: transparent !important;
}
 
/* Personal tools area */
#p-personal,
.vector-user-links {
    background: transparent !important;
}
 
#p-personal ul,
.vector-user-links .vector-menu-content-list {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color);
}
 
/* Page tabs */
#p-namespaces,
#p-views,
#p-cactions,
.vector-menu-tabs {
    background: transparent !important;
}
 
/* Fix any remaining white divs */
div[style*="background-color: white"],
div[style*="background-color:#ffffff"],
div[style*="background-color: #ffffff"],
div[style*="background: white"],
div[style*="background:#ffffff"],
div[style*="background: #ffffff"] {
    background: var(--main-bg) !important;
}
 
/* Ensure all text remains visible */
* {
    color: inherit;
}
 
/* Specific overrides for common issues */
.mw-body-content {
    background: transparent !important;
}
 
.mw-content-container,
.mw-article-toolbar-container,
.mw-sidebar-container,
.mw-workspace-container {
    background: var(--main-bg) !important;
}
 
/* Page background */
.mw-page-container {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
}
 
/* Sticky header background */
.vector-sticky-header {
    background: var(--secondary-bg) !important;
    border-bottom: 1px solid var(--blood-red);
}
 
/* ===== COMPREHENSIVE DARK THEME ENFORCEMENT ===== */
/* Reset all backgrounds */
* {
    background-color: transparent;
}
 
/* Force dark background on root elements */
html,
body,
.skin-vector,
.skin-vector-legacy,
.mediawiki {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
}
 
/* Main content areas */
.mw-page-container,
.mw-workspace-container,
.mw-content-container,
.mw-article-toolbar-container,
.skin-vector .mw-body,
.vector-body {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
}
 
/* Header sections */
.mw-header,
.vector-header-container,
#mw-head,
#mw-head-base,
.vector-sticky-header-container {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%) !important;
}
 
/* Sidebar containers */
.mw-sidebar,
.vector-sidebar-container,
.vector-sidebar-container-no-toc,
.vector-main-menu-container,
#mw-panel,
#mw-navigation {
    background: var(--secondary-bg) !important;
}
 
/* Individual sidebar sections */
.vector-menu-portal,
.vector-main-menu-group,
.vector-menu-content,
.mw-portal,
.portal {
    background: var(--main-bg) !important;
    margin: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--border-color) !important;
}
 
/* Table of contents specific */
.vector-toc,
.sidebar-toc,
#toc,
.toc {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
.vector-toc .vector-toc-contents,
.sidebar-toc .sidebar-toc-contents {
    background: transparent !important;
}
 
/* Fix white backgrounds in various UI elements */
.vector-dropdown-content,
.vector-menu-dropdown .vector-menu-content,
.mw-searchSuggest-link,
.suggestions {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
/* Personal tools dropdown */
#p-personal .vector-menu-content,
.vector-user-menu .vector-menu-content {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
/* Page tools */
.vector-page-toolbar-container,
.vector-page-tools {
    background: transparent !important;
}
 
/* Eliminate any remaining white backgrounds */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"] {
    background: var(--main-bg) !important;
}
 
/* Ensure text remains visible */
[style*="color: black"],
[style*="color:black"],
[style*="color: #000"],
[style*="color:#000"],
[style*="color: #000000"],
[style*="color:#000000"],
[style*="color: rgb(0, 0, 0)"] {
    color: var(--text-primary) !important;
}
 
/* Footer area */
#footer,
.mw-footer-container {
    background: #0a0a0a !important;
    border-top: 2px solid var(--blood-red) !important;
}
 
/* Edit page specific */
.editOptions,
#editpage-specialchars,
.mw-editTools {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
/* Notification area */
.mw-notification-area,
.mw-notification {
    background: var(--secondary-bg) !important;
}
 
/* Search results page */
.mw-search-results-container,
.searchresults {
    background: var(--main-bg) !important;
}
 
/* Special pages */
.mw-special-Watchlist #mw-content-text,
.mw-special-Recentchanges #mw-content-text,
.mw-special-Contributions #mw-content-text {
    background: var(--main-bg) !important;
}
 
/* Dialog boxes and popups */
.oo-ui-window-content,
.oo-ui-dialog-content,
.mw-mmv-overlay {
    background: var(--secondary-bg) !important;
    color: var(--text-primary) !important;
}
 
/* OOUI theme overrides */
.oo-ui-buttonElement-button,
.oo-ui-inputWidget-input {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
 
/* Dropdown menus */
.oo-ui-menuSelectWidget,
.oo-ui-dropdownWidget-handle {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}
 
/* Final override for any missed elements */
.mw-body *,
#content * {
    background-color: transparent;
}
 
.mw-body,
#content,
.mw-body-content {
    background: var(--main-bg) !important;
}
 
/* ===== ABSOLUTE FINAL OVERRIDE ===== */
/* Nuclear option - use if some elements still show white */
/* This aggressively forces dark theme on everything */
div:not([class*="mw-highlight"]),
span:not([class*="mw-highlight"]),
section,
aside,
nav {
    background-color: transparent !important;
}
 
/* Ensure the main containers always have dark background */
html, body,
.mw-page-container,
.mw-body,
.mw-body-content,
#content,
.vector-body,
.skin-vector,
.mediawiki {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
    color: #c9c9c9 !important;
}
 
/* Force dark theme on sidebars */
#mw-panel,
.mw-sidebar,
.vector-sidebar-container,
.vector-main-menu-container {
    background: #1a0f0f !important;
    background-color: #1a0f0f !important;
}
 
/* Any element with white in style attribute */
[style*="fff"],
[style*="FFF"],
[style*="white"],
[style*="WHITE"],
[style*="255, 255, 255"],
[style*="255,255,255"] {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
}
 
/* Ensure all text is visible */
* {
    color: inherit;
}
 
h1, h2, h3, h4, h5, h6 {
    color: #b89968 !important;
}
 
a {
    color: #b89968 !important;
}
 
a:visited {
    color: #9a7f5a !important;
}
 
/* Emergency text visibility */
span, p, div, li, td, th {
    color: inherit;
}
 
/* If text is explicitly black, make it light */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: black"],
[style*="color:black"] {
    color: #c9c9c9 !important;
}
 
 
/* Unrelated to looks of the website! */
/* TOC display level limiter, will only display the TOC up to level N */
.toc1 li.toclevel-2, .toc1 li.toclevel-3, .toc1 li.toclevel-4, .toc1 li.toclevel-5, .toc1 li.toclevel-6,
.toc2 li.toclevel-3, .toc2 li.toclevel-4, .toc2 li.toclevel-5, .toc2 li.toclevel-6,
.toc3 li.toclevel-4, .toc3 li.toclevel-5, .toc3 li.toclevel-6,
.toc4 li.toclevel-5, .toc4 li.toclevel-6,
.toc5 li.toclevel-6,
.hide,
 
body.page-Main_Page.ns-subject h1.firstHeading { display:none; }
 
 
/* used by the front page starts*/
/* Default styles for desktop (769px or more) */
@media only screen and (min-width: 769px) {
    .desktop-view {
        display: block !important;
    }
    .mobile-view {
        display: none !important;
    }
}
 
/* Mobile styles */
@media only screen and (max-width: 768px) {
    .desktop-view {
        display: none !important;  
    }
    .mobile-view {
        display: block !important;
    }
}
/* used by the front page end*/
 
/* make the loading indicator invisible */
.mw-indicators {
    display: none;
}
Retrieved from "https://chronoodysseywiki.com/wiki/MediaWiki:Common.css"