MediaWiki:Vector.css

/* ========================================================= */
/* Vector 2022 Dark Mode - Custom Skin Overrides             */
/* ========================================================= */

/* ------------------------------ */
/* 1. Base Page & Backgrounds */
/* ------------------------------ */
body,
#mw-head-base,
#mw-page-base {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* 2. Links */
/* ------------------------------ */
a {
    color: #88cc88 !important;
}
a:visited {
    color: #2e8b57 !important;
}
a:hover {
    color: #a3be8c !important;
}
a.new {
    color: #ffff00 !important;
}

/* ------------------------------ */
/* 3. Content Area */
/* ------------------------------ */
#content,
.vector-body {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
    color: #f0f0f0 !important;
}
#content p, #content ul, #content ol,
#content li, #content dl, #content dd,
#content dt, #content div {
    color: #e0e0e0 !important;
}
#content a, .vector-body a {
    color: #88cc88 !important;
}
#content a:visited {
    color: #2e8b57 !important;
}
#content a:hover {
    color: #a3be8c !important;
}

/* 3.a Custom bullets */
.ns-0 #content ul,
.ns-0 #content ol {
    list-style: none;
    padding-left: 1.5em;
}
.ns-0 #content ul li::before {
    content: "•";
    color: #88cc88;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ------------------------------ */
/* 4. Sidebar & Navigation Panel */
/* ------------------------------ */
#mw-panel {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
#mw-panel ul, #mw-panel ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#mw-panel div.portal {
    background-color: #1a1a1a !important;
    border-color: #444 !important;
}
#mw-panel div.portal h3 {
    color: #f0f0f0 !important;
    border-color: #444 !important;
}
#mw-panel div.body ul li a,
#mw-panel li.mw-list-item a {
    color: #88cc88 !important;
}
#mw-panel div.body ul li a:visited,
#mw-panel li.mw-list-item a:visited {
    color: #2e8b57 !important;
}
#mw-panel div.body ul li a:hover,
#mw-panel li.mw-list-item a:hover {
    color: #a3be8c !important;
    background-color: #3a3a3a !important;
}
#mw-panel li.mw-list-item {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

/* Highlight Donate link */
#mw-panel a[href="https://buymeacoffee.com/QuincyExaminer"] {
    color: #ffff00 !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

/* ------------------------------ */
/* 4.b Top-right user menu spacing fix */
#pt-userpage, #pt-anonuserpage,
#pt-login, #pt-logout, #pt-createaccount,
#pt-anontalk, #pt-mytalk, #pt-preferences,
#pt-watchlist, #pt-mycontris, #pt-globalwatchlist,
#pt-myalerts, #pt-messages {
    list-style: none !important;
    padding: 0.25em 0.5em !important;
    margin: 0.1em 0 !important;
    display: inline-block !important;
}
#p-cactions-label,
#p-cactions-label::after {
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* 5. Top Tabs */
/* ------------------------------ */
#p-views ul li {
    background-color: #3a3a3a !important;
    border-color: #444 !important;
    background-image: none !important;
}
#p-views ul li a {
    color: #e0e0e0 !important;
    background-image: none !important;
}
#p-views ul li.selected {
    background-color: #2a2a2a !important;
}
#p-views ul li.selected a {
    color: #f0f0f0 !important;
}
#p-views ul li:not(.selected):hover {
    background-color: #4a4a4a !important;
}
#p-views ul li:not(.selected):hover a {
    color: #ffffff !important;
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* 6. Header & Logo */
/* ------------------------------ */
#mw-head {
    background-color: #1a1a1a !important;
    border-bottom-color: #444 !important;
}
#mw-wiki-logo {
    background-color: transparent !important;
}

/* ------------------------------ */
/* 7. Main Page Title Hidden */
/* ------------------------------ */
.page-Main_Page h1.firstHeading {
    display: none !important;
}

.page-Main_Page #mw-content-text {
    padding-top: 3em !important;
}



/* 7.a Adjust title position below tabs on all pages */
h1.firstHeading {
    display: block !important;
    color: #f0f0f0 !important;
    background: none !important;
    padding: 0.5em 0.5em 0.5em 0.5em !important;
    margin: 3.5em 0 1em 0 !important;  /* push down to clear tabs (approx 56px) */
    position: relative !important;
    z-index: 10 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
}

/* 7.b Main Page: keep title hidden but reserve space to avoid layout shift */

.page-Main_Page h1.firstHeading {
    display: none !important;
    margin-top: 8.5em !important; /* added ~26px more space */
}

/* ------------------------------ */
/* 8. Search Input */
/* ------------------------------ */
#searchInput {
    background-color: #ffffff !important;
    color: #000000 !important;
}
#searchInput::placeholder {
    color: #666666 !important;
}

/* ------------------------------ */
/* 9. TOC */
/* ------------------------------ */
#toc {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}
#toc ul {
    list-style: none !important;
    padding-left: 1.5em !important;
}
#toc .tocnumber {
    color: #88cc88 !important;
}
#toc li:hover .tocnumber {
    color: #a3be8c !important;
}
.toctoggle a {
    color: #88cc88 !important;
}
.toctoggle a:hover {
    color: #a3be8c !important;
}

/* ------------------------------ */
/* 10. Changes List */
/* ------------------------------ */
.mw-changeslist,
.mw-changeslist-legend {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
.mw-changeslist-legend .mw-legend {
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* 11. Editing Interface */
/* ------------------------------ */
#editform,
#wpTextbox1 {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}
.divEditOptions,
.editOptions {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
.divEditOptions input,
.divEditOptions textarea,
.divEditOptions select {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}

/* ------------------------------ */
/* 12. Custom Blocks */
/* ------------------------------ */
.qme-column {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #83FCDB !important;
    padding: 1em;
}
.qme-heading {
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
    border: 1px solid #444 !important;
}

/* ------------------------------ */
/* 13. Image Captions */
/* ------------------------------ */
.thumbcaption {
    color: #2e8b57 !important;
}

/* ------------------------------ */
/* 14. Code Blocks */
/* ------------------------------ */
pre,
code,
tt,
kbd,
samp,
.mw-code {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
    padding: 0.5em !important;
}

/* ------------------------------ */
/* 15. OOUI Labels */
/* ------------------------------ */
.oo-ui-labelElement-label,
.oo-ui-fieldsetLayout-header,
.oo-ui-fieldLayout-header label {
    color: #ffffff !important;
}

/* ------------------------------ */
/* 16. Special Pages: Remove bullets */
/* ------------------------------ */
.mw-search-profile-tabs .search-types ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ------------------------------ */
/* 17. Confirm Account Table Colors */
/* ------------------------------ */
.mw-confirmaccount-body-0 {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}
.mw-confirmaccount-body-0 td {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}
.mw-confirmaccount-type-0::marker {
    color: #88cc88 !important;
}

/* ------------------------------ */
/* 18. Admin Warning (EditingInterface) */
/* ------------------------------ */
.mw-editinginterface {
    background-color: #5a1a1a !important;
    color: #ffdddd !important;
    border: 1px solid #aa4444 !important;
    padding: 10px !important;
    margin: 1em 0 !important;
    font-weight: bold !important;
    border-radius: 4px !important;
}
.mw-editinginterface strong {
    color: #ff6666 !important;
}

/* ------------------------------ */
/* 19. Ace Editor Gutter Styling */
/* ------------------------------ */
.ace_gutter {
    background-color: #2a2a2a !important;
    border-right: 1px solid #555 !important;
}
.ace_gutter-cell {
    color: #aaaaaa !important;
    background-color: #2a2a2a !important;
}

/* ------------------------------ */
/* 20. View Source Mode Fixes for <pre> Blocks */
/* ------------------------------ */
.mw-code,
.mw-code pre,
pre {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
    padding: 1em !important;
    overflow: auto !important;
    font-family: monospace !important;
    font-size: 0.95em !important;
}
.mw-code span,
.mw-code span[style] {
    color: inherit !important;
}

/* ------------------------------ */
/* 21. Protected Page Warning (View Source Mode) - Dark Theme */
/* ------------------------------ */
.cdx-message--warning.mw-warning-with-logexcerpt {
    background-color: #3a1a1a !important;
    color: #ffdddd !important;
    border: 1px solid #aa4444 !important;
    padding: 1em !important;
    border-radius: 5px !important;
    font-weight: bold !important;
}
.cdx-message--warning.mw-warning-with-logexcerpt a {
    color: #ffaaaa !important;
    text-decoration: underline !important;
}
.cdx-message--warning.mw-warning-with-logexcerpt a:hover {
    color: #ffcccc !important;
}
.cdx-message--warning.mw-warning-with-logexcerpt strong {
    color: #ff6666 !important;
}
.mw-logevent-loglines {
    color: #ffeaea !important;
}

/* ========================================================= */
/* END Vector 2022 Dark Mode Custom Skin                     */
/* ========================================================= */