MediaWiki:Timeless.css: Difference between revisions

Revision as of 23:17, 15 December 2025

/* === GLOBAL BACKGROUND === */
html, body {
    background: #000 !important;
    color: #fff !important;
}

/* === MAIN CONTENT AREA === */
#mw-content,
#mw-content-container,
#mw-content-block,
#mw-content-text {
    background: #000 !important;
    color: #fff !important;
}

/* === SIDEBAR + NAVIGATION === */
#mw-navigation,
#mw-panel,
#mw-panel .mw-portlet,
#mw-panel .mw-portlet-body {
    background: #000 !important;
    color: #fff !important;
}

/* === RIGHT SIDEBAR (page tools, more, etc.) === */
#mw-related-navigation,
#mw-data-navigation,
#mw-related-navigation .mw-portlet,
#mw-data-navigation .mw-portlet {
    background: #000 !important;
    color: #fff !important;
}

/* === HEADERS, TABS, TOP BAR === */
#mw-header,
#mw-header-container,
#mw-header h1,
#mw-header h2,
#mw-header .mw-portlet {
    background: #000 !important;
    color: #fff !important;
}

/* === SEARCH BAR === */
#searchInput,
#searchInput:focus {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

/* === LINKS === */
a {
    color: #ff0 !important; /* yellow links */
}

a:visited {
    color: #ccc !important; /* silver visited links */
}

/* === GRAY CONTENT BOXES === */
.mw-parser-output .infobox,
.mw-parser-output .toc,
.mw-parser-output table,
.mw-parser-output .thumb,
.mw-parser-output .thumbinner,
.mw-parser-output .navbox,
.mw-parser-output .metadata {
    background: #111 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* === FIX WHITE GAPS BETWEEN ELEMENTS === */
#mw-content-container,
#mw-content-block,
#mw-content-text,
#mw-content {
    background-color: #000 !important;
}

/* === REMOVE WHITE BACKGROUND FROM EDITOR === */
.wikiEditor-ui,
.wikiEditor-ui textarea {
    background: #000 !important;
    color: #fff !important;
}

/* === FORCE DARK BACKGROUND ON ALL GENERIC DIVS === */
div {
    background-color: transparent !important;
}



/* --- FORCE THE ENTIRE MENU COLUMN TO BE BLACK, NOT JUST THE TEXT ROWS --- */
#mw-panel,
#mw-panel .portal,
#mw-panel .portal .body,
#mw-panel .portal ul,
#mw-panel .sidebar,
#mw-panel .sidebar ul,
#mw-panel .sidebar li {
    background: #000 !important;
}

/* --- ENSURE NO TRANSPARENT GAPS BETWEEN ITEMS --- */
#mw-panel .portal ul li,
#mw-panel .sidebar ul li {
    background: #000 !important;
    border: none !important; /* Timeless sometimes adds separators */
}

/* --- ENSURE THE OVERLAY IS DARK --- */
#mw-navigation:before,
#mw-panel:before {
    background: rgba(0,0,0,0.85) !important;
}

/* --- TEXT + LINK COLORS --- */
#mw-panel,
#mw-panel * {
    color: #fff !important;
}

#mw-panel a {
    color: #f5d000 !important;
}

#mw-panel a:visited {
    color: #c0c0c0 !important;
}


/* FORCE THE ENTIRE MENU COLUMN TO BE SOLID BLACK */
#mw-panel,
#mw-panel .portal,
#mw-panel .portal .body,
#mw-panel .portal .body ul {
    background-color: #000 !important;
}

/* REMOVE ANY BACKGROUND FROM INDIVIDUAL MENU ITEMS */
#mw-panel .portal .body ul li,
#mw-panel .portal .body ul li a {
    background: transparent !important;
}

/* ENSURE TEXT AND LINKS ARE VISIBLE */
#mw-panel,
#mw-panel * {
    color: #fff !important;
}

#mw-panel a {
    color: #f5d000 !important;
}

#mw-panel a:visited {
    color: #c0c0c0 !important;
}

/* DARKEN THE OVERLAY BEHIND THE MENU */
#mw-navigation:before {
    background: rgba(0,0,0,0.85) !important;
}


/* FORCE THE ENTIRE MOBILE MENU COLUMN TO BE BLACK */
.mw-portlet,
.mw-portlet .mw-portlet-body,
.mw-portlet .mw-portlet-body ul,
.mw-portlet .mw-portlet-body ul li {
    background: #000 !important;
}

/* REMOVE BACKGROUND FROM LINKS SO THEY DON'T CREATE STRIPES */
.mw-portlet .mw-portlet-body ul li a {
    background: transparent !important;
}

/* ENSURE TEXT IS VISIBLE */
.mw-portlet,
.mw-portlet * {
    color: #fff !important;
}

/* YOUR LINK COLORS */
.mw-portlet a {
    color: #f5d000 !important;
}

.mw-portlet a:visited {
    color: #c0c0c0 !important;
}

/* DARKEN THE OVERLAY BEHIND THE MENU */
#mw-navigation:before {
    background: rgba(0,0,0,0.85) !important;
}





/* FORCE THE ENTIRE MOBILE MENU COLUMN TO BE BLACK */
#mw-navigation,
#mw-navigation .mw-accordion,
#mw-navigation .mw-accordion-section,
#mw-navigation .mw-accordion-section .mw-accordion-content,
#mw-navigation .mw-accordion-section .mw-accordion-content ul,
#mw-navigation .mw-accordion-section .mw-accordion-content li {
    background: #000 !important;
}

/* REMOVE BACKGROUND FROM LINKS SO THEY DON'T CREATE STRIPES */
#mw-navigation .mw-accordion-section .mw-accordion-content li a {
    background: transparent !important;
}

/* ENSURE TEXT IS VISIBLE */
#mw-navigation,
#mw-navigation * {
    color: #fff !important;
}

/* YOUR LINK COLORS */
#mw-navigation a {
    color: #f5d000 !important;
}

#mw-navigation a:visited {
    color: #c0c0c0 !important;
}

/* DARKEN THE OVERLAY BEHIND THE MENU */
#mw-navigation:before {
    background: rgba(0,0,0,0.85) !important;
}


/* FORCE THE ENTIRE MENU COLUMN TO BE BLACK */
#mw-navigation,
#mw-navigation * {
    background-color: #000 !important;
}

/* REMOVE BACKGROUND FROM LINKS SO THEY DON'T CREATE STRIPES */
#mw-navigation li a {
    background: transparent !important;
}

/* REMOVE TRANSPARENT PADDING THAT CREATES THE GAPS */
#mw-navigation li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #000 !important;
}

/* ENSURE THE UL ITSELF IS BLACK */
#mw-navigation ul {
    background-color: #000 !important;
}

/* TEXT + LINK COLORS */
#mw-navigation,
#mw-navigation * {
    color: #fff !important;
}

#mw-navigation a {
    color: #f5d000 !important;
}

#mw-navigation a:visited {
    color: #c0c0c0 !important;
}










/* Force a visible yellow hamburger in Timeless header */
.skin-timeless #mw-header {
    position: relative !important;
}

/* Overlay our own yellow hamburger symbol */
.skin-timeless #mw-header::before {
    content: "≡";
    position: absolute;
    left: 12px;   /* adjust horizontally */
    top: 10px;    /* adjust vertically */
    font-size: 28px;
    color: #ffff00;
    z-index: 9999;
    pointer-events: auto; /* <-- now it can receive clicks */
}

/* Make the overlay click trigger the real menu toggle */
.skin-timeless #mw-header::before {
    cursor: pointer;
}





/* TEST: make the entire page background neon green */
body.skin-timeless {
    background: #00ff00 !important;
}