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