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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* ==================== BACKGROUND COLORS ==================== */
body {
    background-color: #1a1d29 !important;
    color: #e5e7eb !important;
}

#mw-content-container {
    background-color: #252936 !important;
}

.mw-body {
    background-color: #252936 !important;
    color: #e5e7eb !important;
}

/* ==================== HEADER / TOP BAR ==================== */
#mw-header-container {
    background-color: #2d3142 !important;
    border-bottom: 2px solid #3a3f51 !important;
}

#mw-header-container .color-left {
    border-bottom-color: #f59e0b !important; /* Orange accent like your logo */
}

#mw-header-container .color-middle {
    border-bottom-color: #3b82f6 !important; /* Blue accent */
}

#mw-header-container .color-right {
    border-bottom-color: #10b981 !important; /* Green accent */
}

/* Site logo and title */
#p-logo a {
    color: #ffffff !important;
}

/* ==================== NAVIGATION SIDEBARS ==================== */
#mw-site-navigation,
#mw-related-navigation {
    background-color: #1a1d29 !important;
}

.mw-portal {
    background-color: #1a1d29 !important;
}

.mw-portal h3 {
    color: #fbbf24 !important; /* Golden/orange color */
    background-color: transparent !important;
    border: none !important;
}

.mw-portal .body li a {
    color: #e5e7eb !important;
}

.mw-portal .body li a:hover {
    color: #60a5fa !important;
    background-color: #2d3142 !important;
}

/* ==================== LINKS ==================== */
a {
    color: #60a5fa !important; /* Light blue */
}

a:visited {
    color: #a78bfa !important; /* Purple */
}

a:hover {
    color: #93c5fd !important;
}

a.new {
    color: #f87171 !important; /* Red for non-existent pages */
}

/* ==================== HEADINGS ==================== */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    border-bottom-color: #3a3f51 !important;
}

.mw-body h1.firstHeading {
    color: #ffffff !important;
    border-bottom: 2px solid #3a3f51 !important;
}

/* ==================== CONTENT BOXES ==================== */
.toc {
    background-color: #2d3142 !important;
    border: 1px solid #3a3f51 !important;
}

.toc h2 {
    color: #ffffff !important;
    background-color: transparent !important;
}

.toc ul a {
    color: #60a5fa !important;
}

/* ==================== SEARCH BAR ==================== */
#searchInput {
    background-color: #1a1d29 !important;
    color: #ffffff !important;
    border: 1px solid #3a3f51 !important;
}

#searchInput:focus {
    border-color: #60a5fa !important;
    outline: none !important;
}

.search-form {
    background-color: #2d3142 !important;
}

/* ==================== BUTTONS ==================== */
.mw-ui-button,
button,
input[type="submit"] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
}

.mw-ui-button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #2563eb !important;
}

/* ==================== TABS (Edit, History, etc.) ==================== */
#p-namespaces ul li {
    background-color: #2d3142 !important;
}

#p-namespaces ul li a {
    color: #e5e7eb !important;
}

#p-namespaces ul li.selected {
    background-color: #252936 !important;
}

#p-namespaces ul li:hover {
    background-color: #3a3f51 !important;
}

/* ==================== PAGE TOOLS MENU ==================== */
#page-tools {
    background-color: #1a1d29 !important;
}

#page-tools h3 {
    color: #fbbf24 !important;
}

#page-tools .body li a {
    color: #e5e7eb !important;
}

#page-tools .body li a:hover {
    color: #60a5fa !important;
    background-color: #2d3142 !important;
}

/* ==================== FOOTER ==================== */
#footer {
    background-color: #1a1d29 !important;
    border-top: 2px solid #3a3f51 !important;
    color: #9ca3af !important;
}

#footer a {
    color: #60a5fa !important;
}

/* ==================== TABLES ==================== */
table {
    background-color: #2d3142 !important;
    color: #e5e7eb !important;
}

table th {
    background-color: #3a3f51 !important;
    color: #ffffff !important;
}

table td {
    border-color: #3a3f51 !important;
}

/* ==================== CODE BLOCKS ==================== */
code,
pre {
    background-color: #1a1d29 !important;
    border: 1px solid #3a3f51 !important;
    color: #f3f4f6 !important;
}

/* ==================== WARNING/INFO BOXES ==================== */
.mw-warning,
.mw-message-box {
    background-color: #2d3142 !important;
    border-color: #3a3f51 !important;
    color: #e5e7eb !important;
}

/* ==================== INPUT FIELDS ==================== */
input[type="text"],
textarea {
    background-color: #1a1d29 !important;
    color: #ffffff !important;
    border: 1px solid #3a3f51 !important;
}

input[type="text"]:focus,
textarea:focus {
    border-color: #60a5fa !important;
}
/* ==================== FIX SIDEBAR BACKGROUNDS ==================== */
#mw-site-navigation .mw-portlet,
#mw-related-navigation .mw-portlet,
.mw-portlet {
    background-color: #1a1d29 !important;
    border: none !important;
}

#mw-navigation {
    background-color: #1a1d29 !important;
}

/* Fix white box around navigation */
#mw-site-navigation,
#mw-related-navigation {
    background-color: #1a1d29 !important;
    border: none !important;
}

/* ==================== FIX CONTENT WRAPPER ==================== */
#mw-content-wrapper {
    background-color: #252936 !important;
}

#mw-content {
    background-color: #252936 !important;
}

/* ==================== FIX TABLE OF CONTENTS ==================== */
.toc {
    background-color: #2d3447 !important;
    border: 1px solid #3a3f51 !important;
}

.toc .toctitle h2 {
    background-color: transparent !important;
    color: #fbbf24 !important;
}

.toc ul {
    background-color: transparent !important;
}

.tocnumber {
    color: #9ca3af !important;
}

.toctext {
    color: #60a5fa !important;
}

/* ==================== FIX PAGE CONTENT AREA ==================== */
.mw-parser-output {
    color: #e5e7eb !important;
}

/* ==================== FIX HEADER AREA ==================== */
#mw-header {
    background-color: #2d3142 !important;
}

#personal {
    background-color: #2d3142 !important;
}

#personal ul li a {
    color: #e5e7eb !important;
}

/* ==================== FIX EDIT LINKS ==================== */
.mw-editsection,
.mw-editsection a {
    color: #60a5fa !important;
}

/* ==================== FIX PAGE TOOLS SIDEBAR ==================== */
#page-tools {
    background-color: #1a1d29 !important;
    border: 1px solid #3a3f51 !important;
}

#page-tools h3 {
    background-color: transparent !important;
    border-bottom: 1px solid #3a3f51 !important;
}

#page-tools .mw-portlet-body {
    background-color: #1a1d29 !important;
}

/* ==================== FIX ANY REMAINING WHITE BOXES ==================== */
.mw-portlet .body {
    background-color: transparent !important;
}

div#mw-panel {
    background-color: #1a1d29 !important;
}

/* ==================== FIX DROPDOWN MENUS ==================== */
.dropdown {
    background-color: #2d3142 !important;
}

.dropdown .body {
    background-color: #2d3142 !important;
    border: 1px solid #3a3f51 !important;
}

/* ==================== FIX USER MENU ==================== */
#user-tools {
    background-color: #2d3142 !important;
}

#user-tools .body {
    background-color: #2d3142 !important;
}

/* ==================== REMOVE ANY WHITE BORDERS ==================== */
* {
    scrollbar-color: #3a3f51 #1a1d29;
}

::-webkit-scrollbar {
    background-color: #1a1d29;
}

::-webkit-scrollbar-thumb {
    background-color: #3a3f51;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #4a5568;
}
/* ==================== FIX REMAINING WHITE SIDEBAR BOXES ==================== */
/* Target the specific portlet containers */
.mw-portlet {
    background-color: #1a1d29 !important;
    border: none !important;
}

/* Navigation and Wiki tools headers */
.mw-portlet h3 {
    background-color: #1a1d29 !important;
    color: #fbbf24 !important;
    border: none !important;
    padding: 8px 12px !important;
}

/* The body/content of each portlet */
.mw-portlet .body,
.mw-portlet .mw-portlet-body {
    background-color: #1a1d29 !important;
    border: none !important;
}

/* Specific fix for Navigation box */
#p-navigation {
    background-color: #1a1d29 !important;
}

#p-navigation .body {
    background-color: #1a1d29 !important;
}

/* Specific fix for Wiki tools box */
#p-Wiki.tools,
#p-tb {
    background-color: #1a1d29 !important;
}

/* Fix any lingering white backgrounds in sidebar */
#mw-site-navigation > *,
#mw-related-navigation > * {
    background-color: #1a1d29 !important;
}

/* Navigation links styling */
.mw-portlet .body ul {
    background-color: transparent !important;
    margin: 0 !important;
}

.mw-portlet .body ul li {
    background-color: transparent !important;
    padding: 4px 12px !important;
}

.mw-portlet .body ul li a {
    color: #93c5fd !important;
}

.mw-portlet .body ul li a:hover {
    color: #ffffff !important;
    background-color: #2d3142 !important;
    text-decoration: none !important;
}

/* ==================== FIX CONTENTS BOX COLOR ==================== */
.toc {
    background-color: #2d3447 !important;
    border: 1px solid #4a5568 !important;
}

.toc h2,
.toc .toctitle h2 {
    color: #fbbf24 !important;
    background-color: transparent !important;
    border: none !important;
}

/* ==================== IMPROVE OVERALL SIDEBAR CONTRAST ==================== */
/* Make sure the entire left column is dark */
#mw-navigation,
#mw-panel {
    background-color: #1a1d29 !important;
}

/* Remove any default MediaWiki backgrounds */
.mw-portlet,
.portal {
    background: #1a1d29 !important;
    background-color: #1a1d29 !important;
    background-image: none !important;
}
/* ==================== REMOVE SIDEBAR BOX BORDERS ==================== */
.mw-portlet {
    border: none !important;
    box-shadow: none !important;
}

/* ==================== MATCH CONTENTS HEADER TO SIDEBAR STYLE ==================== */
.toc .toctitle h2 {
    color: #fbbf24 !important;
}

/* ==================== SUBTLE HOVER EFFECT FOR SIDEBAR LINKS ==================== */
.mw-portlet .body ul li {
    transition: background-color 0.2s ease !important;
}

.mw-portlet .body ul li:hover {
    background-color: #2d3142 !important;
}

/* ==================== POLISH THE TABS (Main Page, Discussion, etc) ==================== */
#p-namespaces ul li {
    border: none !important;
}

#p-namespaces ul li.selected {
    border-bottom: 2px solid #fbbf24 !important;
}

/* ==================== MAKE PAGE TOOLS SIDEBAR MATCH LEFT SIDEBAR ==================== */
#page-tools {
    border: none !important;
}

#page-tools .mw-portlet {
    border: none !important;
}
/* ==================== FORCE REMOVE ALL SIDEBAR BORDERS ==================== */
#mw-site-navigation .mw-portlet,
#mw-related-navigation .mw-portlet,
.mw-portlet,
.portal {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove borders from portlet headers */
.mw-portlet h3,
.mw-portlet .mw-portlet-heading {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Remove borders from portlet bodies */
.mw-portlet .body,
.mw-portlet .mw-portlet-body,
.mw-portlet-body {
    border: none !important;
}

/* Target specific Navigation and Wiki tools boxes */
#p-navigation,
#p-tb,
#p-Wiki\.tools {
    border: none !important;
    outline: none !important;
}

/* Remove any default Timeless borders */
.mw-portlet > div {
    border: none !important;
}

/* ==================== ALSO REMOVE CONTENTS BOX BORDER ==================== */
.toc {
    border: none !important;
}

/* ==================== REMOVE PAGE TOOLS BORDER ==================== */
#page-tools,
#page-tools .mw-portlet {
    border: none !important;
    outline: none !important;
}
/* ==================== NUCLEAR OPTION - REMOVE ALL BORDERS ==================== */
#mw-navigation * {
    border: none !important;
}

#page-tools * {
    border: none !important;
}

/* But keep the colored top border */
#mw-header-container .color-left,
#mw-header-container .color-middle, 
#mw-header-container .color-right {
    border-bottom: 2px solid !important;
}