MediaWiki:Vector.css: Difference between revisions

From QME Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(110 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Vector skin */
/* ========================================================= */
/* Vector 2022 Dark Mode - Custom Skin Overrides            */
/* ========================================================= */
 
/* ------------------------------ */
/* 1a. Font face for episode titles */
/* ------------------------------ */
@font-face {
    font-family: 'Lydian Bold BT';
    src: url('/wiki/skins/Vector/fonts/LydianBold-BT.woff2') format('woff2'),
        url('/wiki/skins/Vector/fonts/LydianBold-BT.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
 
/* ------------------------------ */
/* 1b. Default font for all wiki pages */
/* ------------------------------ */
body, #content, #firstHeading {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: none;
    color: black; /* default heading color */
}
 
/* ------------------------------ */
/* 1c. Apply episode font ONLY if marker is present */
/* ------------------------------ */
.episode-identifier ~ #content #firstHeading {
    font-family: 'Lydian Bold BT', sans-serif;
    text-transform: uppercase;
    color: white; /* default for most episodes */
}
 
/* ------------------------------ */
/* 1d. Special title color for first 4 episodes */
/* ------------------------------ */
.episode-identifier[data-ep="1"] ~ #content #firstHeading,
.episode-identifier[data-ep="2"] ~ #content #firstHeading,
.episode-identifier[data-ep="3"] ~ #content #firstHeading,
.episode-identifier[data-ep="4"] ~ #content #firstHeading {
    color: #FFD700; /* golden yellow */
}
 


/* -------------------------------------------------------- */
/* 1. Global / Base Styles */
/* -------------------------------------------------------- */


/* Dark background for the overall page, top header strip, and page background */
/* ------------------------------ */
/* 1e. Base Page & Backgrounds */
/* ------------------------------ */
body,
body,
#mw-head-base,
#mw-head-base,
#mw-page-base {
#mw-page-base {
     background-color: #1a1a1a; /* Very dark gray, almost black */
     background-color: #1a1a1a !important;
     color: #e0e0e0;           /* Light gray for default text */
     color: #e0e0e0 !important;
}
}


/* General link styles (fallback for links not covered by more specific rules) */
/* ------------------------------ */
/* 2. Links */
/* ------------------------------ */
a {
a {
     color: #7aa06e; /* Dull aqua green for unvisited links */
     color: #88cc88 !important;
}
}
a:visited {
a:visited {
     color: #cccccc; /* Light grey for visited links */
     color: #2e8b57 !important;
}
}
a:hover {
a:hover {
     color: #a3be8c; /* A light green for 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;
}
#mw-panel a[href="https://buymeacoffee.com/QuincyExaminer"]:visited {
    color: #ffff00 !important;
}
#mw-panel a[href="https://buymeacoffee.com/QuincyExaminer"]:hover {
    color: #ffff00 !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;
}
 
/* ------------------------------ */
/* 6a. Header & Logo */
/* ------------------------------ */
#mw-head {
    background-color: #1a1a1a !important;
    border-bottom-color: #444 !important;
}
#mw-wiki-logo {
    background-color: transparent !important;
}
 
/* ------------------------------ */
/* 6b. Images and Captions
/* ------------------------------ */
 
figcaption {
    color: #222 !important; /* A dark gray close to black */
/*    font-weight: bold;      /* Optional: make the text bolder */
}
 
 
/* ------------------------------ */
/* 7. Main Page Title Hidden */
/* ------------------------------ */
.page-Main_Page h1.firstHeading {
    display: none !important;
}
 
.page-Main_Page #mw-content-text {
    padding-top: 4.5em !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;
}
}


/* Style for links to non-existent pages ("red links") */
/* 7.b Main Page: keep title hidden but reserve space to avoid layout shift */
a.new {
 
     color: #ffff00; /* Yellow for non-existent page links */
.page-Main_Page h1.firstHeading {
    display: none !important;
    margin-top: 8.5em !important; /* added ~26px more space */
}
/* 7.c Set Arial font for main title on all pages except Main Page */
/*body:not(.page-Main_Page) h1.firstHeading {  */
/*    font-family: Arial, sans-serif !important; */
/*} */
/* 7.c Set Lydian Std Bold as font for main title on all pages except Main Page */
body:not(.page-Main_Page) h1.firstHeading {
    font-family: 'Lydian Bold BT', Arial, sans-serif !important;
    font-weight: bold;
}
 
 
/* ------------------------------ */
/* 8. Search Input */
/* ------------------------------ */
#searchInput {
    background-color: #ffffff !important;
    color: #000000 !important;
}
#searchInput::placeholder {
    color: #666666 !important;
}
 
/* ============================== */
/* Table of Contents (TOC) Style */
/* ============================== */
 
/* Style the entire TOC container */
#toc {
    background-color: #2a2a2a !important;  /* Dark gray background */
    color: #e0e0e0 !important;              /* Light gray text */
    border: 1px solid #444 !important;
    padding: 1em;
    border-radius: 5px;
}
 
/* Restore indentation while suppressing bullets visually */
#toc ul,
#toc ul li {
    margin-left: 0 !important;
    padding-left: 1.6em !important;        /* Restore original indenting */
    list-style: none !important;            /* Remove default list bullets */
    list-style-image: none !important;
}
 
/* Extra bullet suppression (some skins use markers) */
#toc li::marker {
    color: #2a2a2a !important;              /* Match background to hide marker */
}
 
/* Suppress any custom green bullets applied by Vector or gadgets */
#toc li::before {
    content: none !important;
}
 
/* Number styling */
#toc .tocnumber {
    color: #88cc88 !important;              /* Soft green */
    font-weight: bold;
}
 
/* Number hover effect */
#toc li:hover .tocnumber {
    color: #a3be8c !important;
}
 
/* TOC toggle links [hide]/[show] */
.toctoggle a {
    color: #88cc88 !important;
    text-decoration: none;
}
 
.toctoggle a:hover {
    color: #a3be8c !important;
    text-decoration: underline;
}
 
 
/* ------------------------------ */
/* 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; /* white text */
}
 
/* ------------------------------ */
/* Special Case for Edit Save Message */
/* ------------------------------ */
.oo-ui-labelElement-label {
    color: #d3d3d3 !important;  /* Ensure the text is light grey */
}
}


/* -------------------------------------------------------- */
.oo-ui-labelElement-label a {
/* 2. Main Content Area (#content) and Main Page Text */
    color: #88cc88 !important;  /* Green color for the link (edit link) */
/* -------------------------------------------------------- */
}


#content {
.oo-ui-labelElement-label a:hover {
     background-color: #2a2a2a; /* A slightly lighter dark gray for contrast with body */
     color: #a3be8c !important; /* Slightly lighter green on hover */
    color: #e0e0e0;            /* Light gray for general text within the content area */
    border-color: #444;        /* Darker border if there's one around the content */
}
}


/* Ensure all common text elements within the main content area are light */
.oo-ui-labelElement-label .oo-ui-labelElement-text {
#content p,
     color: #d3d3d3 !important; /* Ensure "was saved" text is visible */
#content ul,
#content ol,
#content li,
#content dl,
#content dd,
#content dt,
#content div { /* Added div for general block elements */
     color: #e0e0e0;
}
}


/* Headings within content */
/* Ensure the label text is not white on white */
#content h1,
.oo-ui-labelElement-label {
#content h2,
     background-color: transparent !important; /* Remove any background color if applied */
#content h3,
#content h4,
#content h5,
#content h6 {
     color: #f0f0f0; /* Slightly lighter headings */
}
}


/* Specific link styles for links inside the main content area */
/* ------------------------------ */
#content a {
/* 16. Special Pages: Remove bullets */
     color: #7aa06e; /* Dull aqua green for unvisited links within content */
/* ------------------------------ */
.mw-search-profile-tabs .search-types ul {
     list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
}
#content a:visited {
/* ------------------------------ */
     color: #cccccc; /* Light grey for visited links within content */
/* 17. Confirm Account Table Colors */
/* ------------------------------ */
.mw-confirmaccount-body-0 {
    background-color: #1a1a1a !important; /* Darker background for content */
     color: #d3d3d3 !important; /* Light grey text for readability */
    border: 1px solid #333 !important;  /* Dark border to match the background */
}
}
#content a:hover {
.mw-confirmaccount-body-0 td {
     color: #a3be8c; /* Light green on hover for links within content */
    background-color: #1a1a1a !important;
     color: #d3d3d3 !important; /* Light text color */
    border: 1px solid #444 !important;  /* Slightly lighter border */
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 3. Table of Contents (TOC) */
/* Ensuring Confirm Account List Styling */
/* -------------------------------------------------------- */
.mw-confirmaccount-type-0 {
    background-color: #2a2a2a !important;  /* Slightly lighter background than the main table */
    color: #d3d3d3 !important;  /* Light grey text */
    border-bottom: 1px solid #444 !important; /* Border between list items */
}


/* Style for the Table of Contents heading */
/* ------------------------------ */
.mw-toc-heading {
/* Ensuring Links inside Confirm Account List */
     color: #f0f0f0;         /* Set a light color for the heading text */
.mw-confirmaccount-type-0 a {
     background-color: #3a3a3a; /* Set a dark background color for the heading */
     color: #88cc88 !important; /* Greenish color for links */
    text-decoration: none !important;  /* Remove underline for cleaner look */
}
.mw-confirmaccount-type-0 a:hover {
     color: #a3be8c !important; /* Lighter green when hovered */
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 4. Footer */
/* Ensuring Strong text inside Confirm Account List */
/* -------------------------------------------------------- */
.mw-confirmaccount-type-0 strong {
    color: #f0f0f0 !important;  /* Light color for strong text */
}


/* Style for the footer area */
/* ------------------------------ */
#footer {
/* Adjusting Markers (list bullets) */
    background-color: #1a1a1a; /* Match your body background for consistency */
.mw-confirmaccount-type-0::marker {
     color: #e0e0e0;           /* Light gray for general text in the footer */
     color: #88cc88 !important; /* Matching color for list bullet markers */
}
}


/* Specific link styles within the footer */
/* ------------------------------ */
#footer a {
/* Hover Effect for Confirm Account List */
     color: #7aa06e; /* Dull aqua green for unvisited links in footer */
.mw-confirmaccount-type-0:hover {
     background-color: #3a3a3a !important; /* Darker grey background when hovered */
}
}
#footer a:visited {
 
     color: #cccccc; /* Light grey for visited links in footer */
/* ------------------------------ */
/* Ensuring contrast on user input forms (textareas, inputs) */
.mw-confirmaccount-type-0 input,
.mw-confirmaccount-type-0 textarea {
    background-color: #2a2a2a !important;  /* Dark background for input fields */
     color: #ffffff !important; /* Light text for input fields */
    border: 1px solid #555 !important;  /* Darker border to maintain the dark theme */
}
}
#footer a:hover {
 
     color: #a3be8c; /* Light green on hover in footer */
/* ------------------------------ */
/* Admin buttons, links, and other elements */
.mw-confirmaccount-type-0 .mw-ui-button {
    background-color: #444 !important;  /* Dark button background */
    color: #ffffff !important;  /* White text for buttons */
     border: 1px solid #555 !important; /* Dark border to match the theme */
}
}


/* Specific list item text color within the footer */
.mw-confirmaccount-type-0 .mw-ui-button:hover {
#footer li {
    background-color: #555 !important;  /* Lighter grey when button is hovered */
     color: #e0e0e0;
     border-color: #666 !important; /* Lighter border on hover */
}
}


/* -------------------------------------------------------- */
/* 5. Search Box */
/* -------------------------------------------------------- */


/* Style for the search input field */
 
#searchInput {
 
     background-color: #ffffff; /* White interior */
/* ------------------------------ */
     color: #333333;           /* Darker color for typed text */
/* 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;
}
}


/* Style for the placeholder text (the default text in the search window) */
/* ------------------------------ */
#searchInput::placeholder { /* Standard placeholder selector */
/* 21. Protected Page Warning (View Source Mode) - Dark Theme */
     color: #666666; /* A dark grey for the default placeholder text */
/* ------------------------------ */
     opacity: 1;    /* Ensure full opacity in Firefox */
.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;
}
}
#searchInput::-webkit-input-placeholder { /* For Webkit browsers (Chrome, Safari) */
.cdx-message--warning.mw-warning-with-logexcerpt a:hover {
     color: #666666;
     color: #ffcccc !important;
}
}
#searchInput::-moz-placeholder { /* For Firefox */
.cdx-message--warning.mw-warning-with-logexcerpt strong {
     color: #666666;
     color: #ff6666 !important;
    opacity: 1; /* Override Firefox's default lower opacity */
}
}
#searchInput:-ms-input-placeholder { /* For Internet Explorer 10+ */
.mw-logevent-loglines {
     color: #666666;
     color: #ffeaea !important;
}
}
#searchInput::-ms-input-placeholder { /* For Microsoft Edge */
/* ------------------------------ */
     color: #666666;
/* 22. Footer */
/* ------------------------------ */
#footer-info,
#footer-info li {
     color: #ffffff !important;
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 6. Main Page and Discussion Tabs (Page-level navigation) */
/* 23. Infobox (classic table) Fixes */
/* -------------------------------------------------------- */
/* ------------------------------ */
 
/* 23a. Base placement and size */
table.infobox,
table.infobox.vcard,
table.infobox.biography {
    float: right !important;            /* keep infobox on the right */
    margin: 0 0 1em 1em !important;      /* gap between infobox and text */
    max-width: 260px !important;        /* match template width */
    width: auto !important;
    box-sizing: border-box !important;
    clear: none !important;
}


/* Base styles for all top tabs */
/* 23b. Responsive images inside infobox */
#p-views ul li {
table.infobox img,
     background-color: #3a3a3a; /* Dark background for unselected tabs */
table.infobox .mw-file-element {
     border-color: #444;       /* Darker border for tabs */
     max-width: 100% !important;
    /* Override any default background images for tabs */
     height: auto !important;
     background-image: none !important;
     display: block !important;
}
}


#p-views ul li a {
/* 23c. Cell structure and padding */
     color: #e0e0e0; /* Light text color for tab links */
table.infobox td,
     /* Override any default background images for tab links */
table.infobox th {
     background-image: none !important;
     box-sizing: border-box !important;
    vertical-align: top !important;
     padding: 4px 6px !important;
     word-wrap: break-word !important;
}
}


/* Styles for the currently selected tab */
/* 23d. Header and title row styling */
#p-views ul li.selected {
table.infobox th[scope="row"],
     background-color: #2a2a2a; /* Darker background for the selected tab (match #content) */
table.infobox th {
     border-color: #444;      /* Darker border */
     text-align: center !important;
    background-image: none !important; /* Override background image for selected tab too */
     font-weight: 600 !important;
}
}


#p-views ul li.selected a {
/* 23e. Restore bullets for infobox lists */
     color: #f0f0f0; /* Slightly lighter text color for the selected tab link */
table.infobox ul,
table.infobox ol {
     list-style: disc inside !important;
    margin: 0.4em 0 !important;
    padding-left: 1.2em !important;
}
}


/* Hover state for tabs */
/* 23f. Heading float-clear fix */
#p-views ul li:not(.selected):hover {
h1.firstHeading::after {
     background-color: #4a4a4a; /* Slightly lighter dark background on hover for unselected tabs */
     content: "";
     background-image: none !important; /* Override background image on hover */
    display: table;
     clear: both;
}
}


#p-views ul li:not(.selected):hover a {
/* 23g. Inherit color inside infobox to respect template styling */
     color: #ffffff; /* White text on hover for unselected tabs */
table.infobox,
table.infobox * {
     color: inherit !important;
}
}


/* Specific overrides for the vector-menu-tabs and dropdown heading for background gradients */
/* 23h. Optional: remove dark-mode background if conflicts occur */
.vector-menu-tabs,
table.infobox {
.vector-menu-tabs a,
     background: none !important;
#mw-head .vector-menu-dropdown .vector-menu-heading {
     background-image: none !important; /* Remove the light gradient */
    background-color: #3a3a3a !important; /* Set to a dark solid color */
    color: #e0e0e0 !important; /* Ensure text is light */
}
}


/* ------------------------------ */
/* 24. Optional Portable Infobox (modern) Fixes */
/* ------------------------------ */


/* -------------------------------------------------------- */
/* 24a. Base layout */
/* 7. Header elements (mw-head, mw-wiki-logo) */
.portable-infobox {
/* -------------------------------------------------------- */
    float: right !important;
    margin: 0 0 1em 1em !important;
    max-width: 22em !important;
    width: auto !important;
    clear: none !important;
    box-sizing: border-box !important;
}


/* Styles for the main header area, including borders and background */
/* 24b. Internal block layout */
#mw-head {
.portable-infobox .pi-title,
     background-color: #1a1a1a; /* Ensure the header background is dark */
.portable-infobox .pi-data,
     border-bottom-color: #444; /* Dark border at the bottom of the header */
.portable-infobox .pi-group {
     display: block !important;
}
 
/* 24c. Images inside portable infobox */
.portable-infobox img,
.portable-infobox .mw-file-element {
     max-width: 100% !important;
    height: auto !important;
    display: block !important;
}
}


/* Styles for the wiki logo area */
/* 24d. Restore list styling inside portable infobox */
#mw-wiki-logo {
.portable-infobox ul,
     background-color: transparent; /* Ensure the logo background is transparent or matches main background */
.portable-infobox ol {
     list-style: disc inside !important;
    margin: 0.4em 0 !important;
    padding-left: 1.2em !important;
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 8. Left Navigation / Sidebar (#mw-panel) */
/* 25. Compatibility Adjustments */
/* -------------------------------------------------------- */
/* ------------------------------ */
 
/* 25a. Prevent global #content div rule in*
 
/* ------------------------------ */
/* 26. Infobox (classic bio) — Episode-themed coloring */
/* ------------------------------ */


/* Overall sidebar background */
/* 26a. Base dark-theme background & border to match episode pages */
#mw-panel {
table.infobox.biography,
     background-color: #1a1a1a; /* Match body background */
table.infobox.biography.vcard {
     color: #e0e0e0;           /* Light text for general sidebar content */
     background: #2a2a2a !important;        /* match main content bg */
     border-color: #444;       /* Darker border for the sidebar if present */
    border: 1px solid #444 !important;     /* subtle dark border like skin */
     color: #e0e0e0 !important;             /* readable light text */
     box-shadow: none !important;          /* remove light template shadows */
}
 
/* 26b. Header/title row — adopt episode title treatment (centered, strong) */
table.infobox.biography th:first-child,
table.infobox.biography th {
    background: linear-gradient(#333, #2f2f2f) !important; /* dark header */
    color: #f0f0f0 !important;
    text-align: center !important;
    font-size: 105% !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid #444 !important;
}
}


/* Individual portal (section) within the sidebar */
/* 26c. Caption / image credit (italic) */
#mw-panel div.portal {
table.infobox.biography td,
    background-color: #1a1a1a; /* Ensure portal backgrounds are dark */
table.infobox.biography .thumbcaption,
     border-color: #444;       /* Darker borders for sections */
table.infobox.biography .infobox-caption {
     color: #cfcfcf !important;   /* slightly dimmer for captions */
}
}


/* Headings for sidebar sections (e.g., "Navigation", "Tools") */
/* 26d. Make image area match episode infobox image behavior */
#mw-panel div.portal h3 {
table.infobox.biography img,
     color: #f0f0f0; /* Light color for section headings */
table.infobox.biography .mw-file-element {
     border-color: #444; /* Darker border under headings */
     max-width: 100% !important;
    height: auto !important;
    display: block !important;
     margin: 0 auto !important;
}
}


/* Links within sidebar sections */
/* 26e. Fields (th/td) — lighter headers, readable values */
#mw-panel div.body ul li a {
table.infobox.biography th[scope="row"],
     color: #7aa06e; /* Dull aqua green for unvisited links */
table.infobox.biography th {
    background: transparent !important;
    color: #dfeff0 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 6px 8px !important;
}
table.infobox.biography td {
     color: #e0e0e0 !important;
    padding: 6px 8px !important;
}
}


#mw-panel div.body ul li a:visited {
/* 26f. Links inside infobox should use site link colors (green) */
     color: #cccccc; /* Light grey for visited links */
table.infobox.biography a {
    color: #88cc88 !important;
}
table.infobox.biography a:visited {
     color: #2e8b57 !important;
}
table.infobox.biography a:hover {
    color: #a3be8c !important;
}
}


#mw-panel div.body ul li a:hover {
/* 26g. Restore list markers and spacing inside bio infobox */
     color: #a3be8c; /* Light green on hover */
table.infobox.biography ul,
     background-color: #3a3a3a; /* Slight dark background on hover */
table.infobox.biography ol {
    list-style: disc inside !important;
     margin: 0.4em 0 !important;
     padding-left: 1.2em !important;
    color: #e0e0e0 !important;
}
}


/* Ensure list item text is visible if it's not a link */
/* ------------------------------ */
#mw-panel div.body ul li {
/* 26h. Episode-aware accent: when page has .episode-identifier present, */
     color: #e0e0e0; /* Light text for any non-link list items */
/*      make the infobox title match the episode title color (white/gold). */
/*      This mirrors your existing heading rules (used earlier in CSS). */
/* ------------------------------ */
 
/* Default episode accent (white heading text) */
.episode-identifier ~ #content table.infobox.biography th {
    /* white title for most episodes */
     color: #ffffff !important;
    background: linear-gradient(#3a3a3a, #2f2f2f) !important;
}
}


/* Specific styling for list items with mw-list-item class in the sidebar */
/* Special color for episodes 1–4 (golden title) */
#mw-panel li.mw-list-item a {
.episode-identifier[data-ep="1"] ~ #content table.infobox.biography th,
     color: #7aa06e; /* Apply dull aqua green for links inside mw-list-item */
.episode-identifier[data-ep="2"] ~ #content table.infobox.biography th,
.episode-identifier[data-ep="3"] ~ #content table.infobox.biography th,
.episode-identifier[data-ep="4"] ~ #content table.infobox.biography th {
     color: #FFD700 !important; /* golden yellow used for those episodes */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
}
}


#mw-panel li.mw-list-item a:visited {
/* 26i. If episode pages use a distinct accent bar color, allow that color
     color: #cccccc; /* Apply light grey for visited links */
  on the left border to link the infobox visually to episode details */
.episode-identifier ~ #content table.infobox.biography {
     border-left: 4px solid #88cc88 !important; /* green accent like links */
}
}


#mw-list-item a:hover {
/* 26j. Keep text contrast accessible — if the infobox background is overridden by template,
    color: #a3be8c; /* Apply light green on hover */
  force readable foreground for key elements */
     background-color: #3a3a3a; /* Apply slight dark background on hover */
table.infobox.biography th,
table.infobox.biography td,
table.infobox.biography caption {
     color: #e0e0e0 !important;
}
}


/* Ensure the list item itself has a dark background and light text if not a link */
/* ------------------------------ */
#mw-panel li.mw-list-item {
/* End 26. Episode-themed bio infobox colors */
    background-color: transparent; /* Or a specific dark color if needed */
/* ------------------------------ */
     color: #e0e0e0; /* Light text color for the list item itself */
 
/* ------------------------------ */
/* 27. Infobox visual overrides — Option A (site-wide green accent) */
/* ------------------------------ */
 
/* 27a. Restore template backgrounds (don't force background:none) so template inline/bg can apply */
table.infobox {
     background-color: unset !important;
}
}


/* -------------------------------------------------------- */
/* 27b. Episode pages: header should be BLACK text on GREEN background */
/* 9. Main Page Custom Styles - Future Use */
.episode-identifier ~ #content table.infobox.biography th,
/* -------------------------------------------------------- */
.episode-identifier ~ #content table.infobox th {
.qme-column {
     background: linear-gradient(#9fd89f, #77b977) !important; /* green gradient */
     background-color: #2a2a2a; /* Dark background */
     color: #000000 !important; /* black title text */
     color: #e0e0e0; /* Light text color */
     text-shadow: none !important;
     border: 1px solid #444; /* Optional: A subtle dark border for consistency */
     border-bottom: 1px solid rgba(0,0,0,0.18) !important;
     padding: 1em; /* Add some padding if needed, adjust as desired */
}
}
/*
    This section is intentionally left empty.
    As you refactor your Main Page to remove inline styles,
    you can define CSS classes here (e.g., .my-dark-box, .qme-heading)
    and then apply those classes in your WikiText/HTML.


    Example:
/* 27c. Person (biography) infobox: ALWAYS use the same green left-accent site-wide (Option A) */
    If your Main Page has:
table.infobox.biography {
     <div style="background-color:#fcfcfc; color:#000;">...</div>
     border-left: 4px solid #88cc88 !important;
}


    You would change the WikiText to:
/* 27d. Ensure infobox headers respect explicit colors (avoid broad inherit rules stomping them) */
    <div class="main-page-box">...</div>
table.infobox.biography th,
table.infobox.biography th[scope="row"] {
    color: inherit !important; /* allows episode-specific rule above to set the header color */
}


    And then add the corresponding CSS rule here:
/* 27e. Safety: keep image sizing controlled */
    .main-page-box {
table.infobox img,
        background-color: #2a2a2a;
table.infobox .mw-file-element {
        color: #e0e0e0;
    max-width: 100% !important;
        border: 1px solid #444;
    height: auto !important;
    }
    display: block !important;
}


    Similarly for headings:
/* ------------------------------ */
    From: <h2 style="background-color:#83FCDB; color:#000;">Welcome</h2>
/* End 27. Infobox visual overrides (Option A) */
    To: <h2 class="qme-heading">Welcome</h2>
/* ------------------------------ */


    And here in CSS:
    .qme-heading {
        background-color: #3a3a3a;
        color: #f0f0f0;
        border: 1px solid #444;
    }


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

Latest revision as of 21:20, 4 October 2025

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

/* ------------------------------ */
/* 1a. Font face for episode titles */
/* ------------------------------ */
@font-face {
    font-family: 'Lydian Bold BT';
    src: url('/wiki/skins/Vector/fonts/LydianBold-BT.woff2') format('woff2'),
         url('/wiki/skins/Vector/fonts/LydianBold-BT.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* ------------------------------ */
/* 1b. Default font for all wiki pages */
/* ------------------------------ */
body, #content, #firstHeading {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: none;
    color: black; /* default heading color */
}

/* ------------------------------ */
/* 1c. Apply episode font ONLY if marker is present */
/* ------------------------------ */
.episode-identifier ~ #content #firstHeading {
    font-family: 'Lydian Bold BT', sans-serif;
    text-transform: uppercase;
    color: white; /* default for most episodes */
}

/* ------------------------------ */
/* 1d. Special title color for first 4 episodes */
/* ------------------------------ */
.episode-identifier[data-ep="1"] ~ #content #firstHeading,
.episode-identifier[data-ep="2"] ~ #content #firstHeading,
.episode-identifier[data-ep="3"] ~ #content #firstHeading,
.episode-identifier[data-ep="4"] ~ #content #firstHeading {
    color: #FFD700; /* golden yellow */
}



/* ------------------------------ */
/* 1e. 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;
}
#mw-panel a[href="https://buymeacoffee.com/QuincyExaminer"]:visited {
    color: #ffff00 !important;
}
#mw-panel a[href="https://buymeacoffee.com/QuincyExaminer"]:hover {
    color: #ffff00 !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;
}

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

/* ------------------------------ */
/* 6b. Images and Captions
/* ------------------------------ */

figcaption {
    color: #222 !important; /* A dark gray close to black */
/*    font-weight: bold;      /* Optional: make the text bolder */
}


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

.page-Main_Page #mw-content-text {
    padding-top: 4.5em !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 */
}
/* 7.c Set Arial font for main title on all pages except Main Page */
/*body:not(.page-Main_Page) h1.firstHeading {  */
/*    font-family: Arial, sans-serif !important; */
/*} */
/* 7.c Set Lydian Std Bold as font for main title on all pages except Main Page */
body:not(.page-Main_Page) h1.firstHeading {
    font-family: 'Lydian Bold BT', Arial, sans-serif !important;
    font-weight: bold;
}


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

/* ============================== */
/* Table of Contents (TOC) Style */
/* ============================== */

/* Style the entire TOC container */
#toc {
    background-color: #2a2a2a !important;   /* Dark gray background */
    color: #e0e0e0 !important;              /* Light gray text */
    border: 1px solid #444 !important;
    padding: 1em;
    border-radius: 5px;
}

/* Restore indentation while suppressing bullets visually */
#toc ul,
#toc ul li {
    margin-left: 0 !important;
    padding-left: 1.6em !important;         /* Restore original indenting */
    list-style: none !important;            /* Remove default list bullets */
    list-style-image: none !important;
}

/* Extra bullet suppression (some skins use markers) */
#toc li::marker {
    color: #2a2a2a !important;              /* Match background to hide marker */
}

/* Suppress any custom green bullets applied by Vector or gadgets */
#toc li::before {
    content: none !important;
}

/* Number styling */
#toc .tocnumber {
    color: #88cc88 !important;              /* Soft green */
    font-weight: bold;
}

/* Number hover effect */
#toc li:hover .tocnumber {
    color: #a3be8c !important;
}

/* TOC toggle links [hide]/[show] */
.toctoggle a {
    color: #88cc88 !important;
    text-decoration: none;
}

.toctoggle a:hover {
    color: #a3be8c !important;
    text-decoration: underline;
}


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

/* ------------------------------ */
/* Special Case for Edit Save Message */
/* ------------------------------ */
.oo-ui-labelElement-label {
    color: #d3d3d3 !important;  /* Ensure the text is light grey */
}

.oo-ui-labelElement-label a {
    color: #88cc88 !important;  /* Green color for the link (edit link) */
}

.oo-ui-labelElement-label a:hover {
    color: #a3be8c !important;  /* Slightly lighter green on hover */
}

.oo-ui-labelElement-label .oo-ui-labelElement-text {
    color: #d3d3d3 !important;  /* Ensure "was saved" text is visible */
}

/* Ensure the label text is not white on white */
.oo-ui-labelElement-label {
    background-color: transparent !important;  /* Remove any background color if applied */
}

/* ------------------------------ */
/* 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: #1a1a1a !important; /* Darker background for content */
    color: #d3d3d3 !important;  /* Light grey text for readability */
    border: 1px solid #333 !important;  /* Dark border to match the background */
}
.mw-confirmaccount-body-0 td {
    background-color: #1a1a1a !important;
    color: #d3d3d3 !important;  /* Light text color */
    border: 1px solid #444 !important;  /* Slightly lighter border */
}

/* ------------------------------ */
/* Ensuring Confirm Account List Styling */
.mw-confirmaccount-type-0 {
    background-color: #2a2a2a !important;  /* Slightly lighter background than the main table */
    color: #d3d3d3 !important;  /* Light grey text */
    border-bottom: 1px solid #444 !important; /* Border between list items */
}

/* ------------------------------ */
/* Ensuring Links inside Confirm Account List */
.mw-confirmaccount-type-0 a {
    color: #88cc88 !important;  /* Greenish color for links */
    text-decoration: none !important;  /* Remove underline for cleaner look */
}
.mw-confirmaccount-type-0 a:hover {
    color: #a3be8c !important;  /* Lighter green when hovered */
}

/* ------------------------------ */
/* Ensuring Strong text inside Confirm Account List */
.mw-confirmaccount-type-0 strong {
    color: #f0f0f0 !important;  /* Light color for strong text */
}

/* ------------------------------ */
/* Adjusting Markers (list bullets) */
.mw-confirmaccount-type-0::marker {
    color: #88cc88 !important;  /* Matching color for list bullet markers */
}

/* ------------------------------ */
/* Hover Effect for Confirm Account List */
.mw-confirmaccount-type-0:hover {
    background-color: #3a3a3a !important;  /* Darker grey background when hovered */
}

/* ------------------------------ */
/* Ensuring contrast on user input forms (textareas, inputs) */
.mw-confirmaccount-type-0 input, 
.mw-confirmaccount-type-0 textarea {
    background-color: #2a2a2a !important;  /* Dark background for input fields */
    color: #ffffff !important;  /* Light text for input fields */
    border: 1px solid #555 !important;  /* Darker border to maintain the dark theme */
}

/* ------------------------------ */
/* Admin buttons, links, and other elements */
.mw-confirmaccount-type-0 .mw-ui-button {
    background-color: #444 !important;  /* Dark button background */
    color: #ffffff !important;  /* White text for buttons */
    border: 1px solid #555 !important;  /* Dark border to match the theme */
}

.mw-confirmaccount-type-0 .mw-ui-button:hover {
    background-color: #555 !important;  /* Lighter grey when button is hovered */
    border-color: #666 !important;  /* Lighter border on hover */
}




/* ------------------------------ */
/* 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;
}
/* ------------------------------ */
/* 22. Footer */
/* ------------------------------ */
#footer-info,
#footer-info li {
    color: #ffffff !important;
}

/* ------------------------------ */
/* 23. Infobox (classic table) Fixes */
/* ------------------------------ */

/* 23a. Base placement and size */
table.infobox,
table.infobox.vcard,
table.infobox.biography {
    float: right !important;             /* keep infobox on the right */
    margin: 0 0 1em 1em !important;      /* gap between infobox and text */
    max-width: 260px !important;         /* match template width */
    width: auto !important;
    box-sizing: border-box !important;
    clear: none !important;
}

/* 23b. Responsive images inside infobox */
table.infobox img,
table.infobox .mw-file-element {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 23c. Cell structure and padding */
table.infobox td,
table.infobox th {
    box-sizing: border-box !important;
    vertical-align: top !important;
    padding: 4px 6px !important;
    word-wrap: break-word !important;
}

/* 23d. Header and title row styling */
table.infobox th[scope="row"],
table.infobox th {
    text-align: center !important;
    font-weight: 600 !important;
}

/* 23e. Restore bullets for infobox lists */
table.infobox ul,
table.infobox ol {
    list-style: disc inside !important;
    margin: 0.4em 0 !important;
    padding-left: 1.2em !important;
}

/* 23f. Heading float-clear fix */
h1.firstHeading::after {
    content: "";
    display: table;
    clear: both;
}

/* 23g. Inherit color inside infobox to respect template styling */
table.infobox,
table.infobox * {
    color: inherit !important;
}

/* 23h. Optional: remove dark-mode background if conflicts occur */
table.infobox {
    background: none !important;
}

/* ------------------------------ */
/* 24. Optional Portable Infobox (modern) Fixes */
/* ------------------------------ */

/* 24a. Base layout */
.portable-infobox {
    float: right !important;
    margin: 0 0 1em 1em !important;
    max-width: 22em !important;
    width: auto !important;
    clear: none !important;
    box-sizing: border-box !important;
}

/* 24b. Internal block layout */
.portable-infobox .pi-title,
.portable-infobox .pi-data,
.portable-infobox .pi-group {
    display: block !important;
}

/* 24c. Images inside portable infobox */
.portable-infobox img,
.portable-infobox .mw-file-element {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 24d. Restore list styling inside portable infobox */
.portable-infobox ul,
.portable-infobox ol {
    list-style: disc inside !important;
    margin: 0.4em 0 !important;
    padding-left: 1.2em !important;
}

/* ------------------------------ */
/* 25. Compatibility Adjustments */
/* ------------------------------ */

/* 25a. Prevent global #content div rule in*

/* ------------------------------ */
/* 26. Infobox (classic bio) — Episode-themed coloring */
/* ------------------------------ */

/* 26a. Base dark-theme background & border to match episode pages */
table.infobox.biography,
table.infobox.biography.vcard {
    background: #2a2a2a !important;        /* match main content bg */
    border: 1px solid #444 !important;     /* subtle dark border like skin */
    color: #e0e0e0 !important;             /* readable light text */
    box-shadow: none !important;           /* remove light template shadows */
}

/* 26b. Header/title row — adopt episode title treatment (centered, strong) */
table.infobox.biography th:first-child,
table.infobox.biography th {
    background: linear-gradient(#333, #2f2f2f) !important; /* dark header */
    color: #f0f0f0 !important;
    text-align: center !important;
    font-size: 105% !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid #444 !important;
}

/* 26c. Caption / image credit (italic) */
table.infobox.biography td,
table.infobox.biography .thumbcaption,
table.infobox.biography .infobox-caption {
    color: #cfcfcf !important;   /* slightly dimmer for captions */
}

/* 26d. Make image area match episode infobox image behavior */
table.infobox.biography img,
table.infobox.biography .mw-file-element {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 26e. Fields (th/td) — lighter headers, readable values */
table.infobox.biography th[scope="row"],
table.infobox.biography th {
    background: transparent !important;
    color: #dfeff0 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 6px 8px !important;
}
table.infobox.biography td {
    color: #e0e0e0 !important;
    padding: 6px 8px !important;
}

/* 26f. Links inside infobox should use site link colors (green) */
table.infobox.biography a {
    color: #88cc88 !important;
}
table.infobox.biography a:visited {
    color: #2e8b57 !important;
}
table.infobox.biography a:hover {
    color: #a3be8c !important;
}

/* 26g. Restore list markers and spacing inside bio infobox */
table.infobox.biography ul,
table.infobox.biography ol {
    list-style: disc inside !important;
    margin: 0.4em 0 !important;
    padding-left: 1.2em !important;
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* 26h. Episode-aware accent: when page has .episode-identifier present, */
/*      make the infobox title match the episode title color (white/gold). */
/*      This mirrors your existing heading rules (used earlier in CSS). */
/* ------------------------------ */

/* Default episode accent (white heading text) */
.episode-identifier ~ #content table.infobox.biography th {
    /* white title for most episodes */
    color: #ffffff !important;
    background: linear-gradient(#3a3a3a, #2f2f2f) !important;
}

/* Special color for episodes 1–4 (golden title) */
.episode-identifier[data-ep="1"] ~ #content table.infobox.biography th,
.episode-identifier[data-ep="2"] ~ #content table.infobox.biography th,
.episode-identifier[data-ep="3"] ~ #content table.infobox.biography th,
.episode-identifier[data-ep="4"] ~ #content table.infobox.biography th {
    color: #FFD700 !important;  /* golden yellow used for those episodes */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
}

/* 26i. If episode pages use a distinct accent bar color, allow that color
   on the left border to link the infobox visually to episode details */
.episode-identifier ~ #content table.infobox.biography {
    border-left: 4px solid #88cc88 !important; /* green accent like links */
}

/* 26j. Keep text contrast accessible — if the infobox background is overridden by template,
   force readable foreground for key elements */
table.infobox.biography th,
table.infobox.biography td,
table.infobox.biography caption {
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* End 26. Episode-themed bio infobox colors */
/* ------------------------------ */

/* ------------------------------ */
/* 27. Infobox visual overrides — Option A (site-wide green accent) */
/* ------------------------------ */

/* 27a. Restore template backgrounds (don't force background:none) so template inline/bg can apply */
table.infobox {
    background-color: unset !important;
}

/* 27b. Episode pages: header should be BLACK text on GREEN background */
.episode-identifier ~ #content table.infobox.biography th,
.episode-identifier ~ #content table.infobox th {
    background: linear-gradient(#9fd89f, #77b977) !important; /* green gradient */
    color: #000000 !important; /* black title text */
    text-shadow: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.18) !important;
}

/* 27c. Person (biography) infobox: ALWAYS use the same green left-accent site-wide (Option A) */
table.infobox.biography {
    border-left: 4px solid #88cc88 !important;
}

/* 27d. Ensure infobox headers respect explicit colors (avoid broad inherit rules stomping them) */
table.infobox.biography th,
table.infobox.biography th[scope="row"] {
    color: inherit !important; /* allows episode-specific rule above to set the header color */
}

/* 27e. Safety: keep image sizing controlled */
table.infobox img,
table.infobox .mw-file-element {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ------------------------------ */
/* End 27. Infobox visual overrides (Option A) */
/* ------------------------------ */


/* ========================================================= */
/* END Vector 2022 Dark Mode Custom Skin                     */
/* ========================================================= */
By using this site, you agree to the Terms of Use. © 1996–2025 The Quincy Examiner / MTB. All rights reserved.