MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 16:13, 1 August 2026

/* 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;
}

/* 4b. Fixed top header bar (logo row + search + user menu) —
   this is a separate fixed element, not part of #mw-content,
   which is why it was staying white before */
#mw-header-container {
    background: var(--sith-black) !important;
    color: var(--sith-text) !important;
    border-bottom: solid 2px var(--sith-red) !important;
}
#personal,
#personal h2,
#personal h2 span,
#user-tools {
    color: var(--sith-text) !important;
}
#personal .dropdown-header,
#p-search h2 {
    color: var(--sith-text) !important;
}

/* 6b. Sidebar OUTER wrappers — catches the white framing/box that
   was still showing around the Navigation/Wiki tools/Page tools
   panels even after .sidebar-inner was styled. Timeless boxes these
   with its .box() mixin, which defaults to a light background, so we
   override the wrapper itself, not just the inner content. */
#mw-site-navigation,
#mw-related-navigation,
.sidebar-chunk,
.mw-portlet {
    background: var(--sith-panel) !important;
    border-color: var(--sith-border) !important;
    color: var(--sith-text) !important;
}
#mw-site-navigation a,
#mw-related-navigation a,
.sidebar-chunk a,
.mw-portlet a {
    color: var(--sith-link) !important;
}
#mw-site-navigation h2,
#mw-site-navigation h3,
#mw-related-navigation h2,
#mw-related-navigation h3,
.sidebar-chunk h2,
.sidebar-chunk h3 {
    background: var(--sith-red) !important;
    color: #fff !important;
    border-color: var(--sith-border) !important;
}

/* 4c. Page title underline (h1.firstHeading) — hardcoded blue in
   Timeless by default, e.g. under "Main Page" */
h1.firstHeading {
    border-bottom: solid 4px var(--sith-red) !important;
}
/* Section heading underlines (h1/h2 in article body) also default
   to a neutral grey — matching them to the theme too */
.mw-heading1, h1,
.mw-heading2, h2 {
    border-bottom-color: var(--sith-border) !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;
}