MediaWiki:Timeless.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.

/* All CSS here will be loaded for users of the Timeless skin */
/* ============================================================
   THE CHAAKAT HOLOCRON — "Sith Holocron" dark theme for Timeless
   Paste this into MediaWiki:Timeless.css (as a wiki admin)
   ============================================================ */

/* 1. Neutralize the DarkMode extension's invert(1) hue-rotate(180deg)
   filter. We're hand-authoring real dark colors below, so we don't
   want that filter mangling them on top. This also stops it from
   inverting images/thumbnails, which is a bonus. */
html,
html.client-darkmode,
html.skin-theme-clientpref-night {
    filter: none !important;
    -webkit-filter: none !important;
}

/* 2. Palette — tune these and everything below follows */
:root {
    --sith-black:        #0a0a0a;
    --sith-black-alt:    #141414;
    --sith-panel:        #1c1010;
    --sith-red:          #8b0000;
    --sith-red-bright:   #b30000;
    --sith-red-glow:     #ff2a2a;
    --sith-border:       #3a0a0a;
    --sith-text:         #e6d6d6;
    --sith-text-dim:     #a88888;
    --sith-link:         #ff4d4d;
    --sith-link-visited: #b34d4d;
}

/* 3. Page + main content background */
html, body {
    background: var(--sith-black) !important;
}
#mw-content,
#mw-content-container {
    background: var(--sith-black-alt) !important;
    color: var(--sith-text) !important;
    border-bottom: solid 4px var(--sith-red) !important;
}

/* 4. Header / logo / search */
#p-logo-text a {
    color: var(--sith-red-bright) !important;
}
#simpleSearch {
    background: var(--sith-panel) !important;
    border: solid 1px var(--sith-border) !important;
}
#searchInput {
    color: var(--sith-text) !important;
    background: transparent !important;
}

/* 5. The tri-color bars (top + bottom of content) —
   this is the element that was going white before */
.color-left   { background: var(--sith-red)       !important; }
.color-right  { background: var(--sith-red-bright) !important; }
.color-middle { background: var(--sith-red-glow)   !important; }

/* 6. Sidebars (Navigation / Wiki tools / page tools) */
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
    background: var(--sith-panel) !important;
    border-color: var(--sith-border) !important;
    color: var(--sith-text) !important;
}
#mw-site-navigation h3,
#mw-related-navigation h3 {
    color: var(--sith-red-bright) !important;
}

/* 7. Personal tools / user dropdown (top right) */
#personal,
#personal .dropdown-menu {
    background: var(--sith-panel) !important;
    color: var(--sith-text) !important;
}

/* 8. Links */
a { color: var(--sith-link) !important; }
a:visited { color: var(--sith-link-visited) !important; }

/* 9. Tables, infoboxes, table of contents */
.wikitable, .toc, .toccolours, .mw_metadata, .mw-datatable {
    background: var(--sith-panel) !important;
    border-color: var(--sith-border) !important;
    color: var(--sith-text) !important;
}
.wikitable th, .mw_metadata th {
    background: var(--sith-red) !important;
    color: #fff !important;
}

/* 10. Footer */
.mw-footer-container,
.mw-footer {
    background: var(--sith-black-alt) !important;
    color: var(--sith-text-dim) !important;
    border-top: solid 1px var(--sith-border) !important;
}
.mw-footer a {
    color: var(--sith-link) !important;
}