MediaWiki:Vector.css: Difference between revisions

From QME Wiki
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
Tag: Manual revert
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the Vector skin */
/* ========================================================= */
/* Vector 2022 Dark Mode - Custom Skin Overrides            */
/* ========================================================= */


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 1. Global / Base Styles */
/* 1. Base Page & Backgrounds */
/* -------------------------------------------------------- */
/* ------------------------------ */


/* Dark background for the overall page, top header strip, and page background */
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: #7aa06e !important;
}
}
a:visited {
a:visited {
     color: #cccccc; /* Light grey for visited links */
     color: #cccccc !important;
}
}
a:hover {
a:hover {
     color: #a3be8c; /* A light green for hover */
     color: #a3be8c !important;
}
}
/* Style for links to non-existent pages ("red links") */
a.new {
a.new {
     color: #ffff00; /* Yellow for non-existent page links */
     color: #ffff00 !important;
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 2. Main Content Area (#content) and Main Page Text */
/* 3. Content Area */
/* -------------------------------------------------------- */
/* ------------------------------ */


#content {
#content,
     background-color: #2a2a2a; /* A slightly lighter dark gray for contrast with body */
.vector-body {
     color: #e0e0e0;           /* Light gray for general text within the content area */
     background-color: #2a2a2a !important;
     border-color: #444;       /* Darker border if there's one around the content */
     color: #e0e0e0 !important;
     border-color: #444 !important;
}
}


/* Ensure all common text elements within the main content area are light */
#content h1, #content h2, #content h3,
#content p,
#content h4, #content h5, #content h6 {
#content ul,
     color: #f0f0f0 !important;
#content ol,
#content li,
#content dl,
#content dd,
#content dt,
#content div { /* Added div for general block elements */
     color: #e0e0e0;
}
}


/* Headings within content */
#content p, #content ul, #content ol,
#content h1,
#content li, #content dl, #content dd,
#content h2,
#content dt, #content div {
#content h3,
     color: #e0e0e0 !important;
#content h4,
#content h5,
#content h6 {
     color: #f0f0f0; /* Slightly lighter headings */
}
}


/* Specific link styles for links inside the main content area */
#content a, .vector-body a {
#content a {
     color: #7aa06e !important;
     color: #7aa06e; /* Dull aqua green for unvisited links within content */
}
}
#content a:visited {
#content a:visited {
     color: #cccccc; /* Light grey for visited links within content */
     color: #cccccc !important;
}
}
#content a:hover {
#content a:hover {
     color: #a3be8c; /* Light green on hover for links within content */
     color: #a3be8c !important;
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 3. Table of Contents (TOC) */
/* 4. Sidebar & Navigation Panel */
/* -------------------------------------------------------- */
/* ------------------------------ */


/* Style for the Table of Contents heading */
#mw-panel {
.mw-toc-heading {
     background-color: #1a1a1a !important;
     color: #f0f0f0;         /* Set a light color for the heading text */
    color: #e0e0e0 !important;
     background-color: #3a3a3a; /* Set a dark background color for the heading */
     border-color: #444 !important;
}
}
 
#mw-panel div.portal {
/* -------------------------------------------------------- */
     background-color: #1a1a1a !important;
/* 4. Footer */
     border-color: #444 !important;
/* -------------------------------------------------------- */
 
/* Style for the footer area */
#footer {
     background-color: #1a1a1a; /* Match your body background for consistency */
     color: #e0e0e0;           /* Light gray for general text in the footer */
}
}
 
#mw-panel div.portal h3 {
/* Specific link styles within the footer */
    color: #f0f0f0 !important;
#footer a {
     border-color: #444 !important;
     color: #7aa06e; /* Dull aqua green for unvisited links in footer */
}
}
#footer a:visited {
#mw-panel div.body ul li a {
     color: #cccccc; /* Light grey for visited links in footer */
     color: #7aa06e !important;
}
}
#footer a:hover {
#mw-panel div.body ul li a:visited {
     color: #a3be8c; /* Light green on hover in footer */
     color: #cccccc !important;
}
}
 
#mw-panel div.body ul li a:hover {
/* Specific list item text color within the footer */
    color: #a3be8c !important;
#footer li {
     background-color: #3a3a3a !important;
     color: #e0e0e0;
}
}
 
#mw-panel div.body ul li {
/* -------------------------------------------------------- */
     color: #e0e0e0 !important;
/* 5. Search Box */
/* -------------------------------------------------------- */
 
/* Style for the search input field */
#searchInput {
     background-color: #ffffff; /* White interior */
    color: #333333;            /* Darker color for typed text */
}
}
 
#mw-panel li.mw-list-item a {
/* Style for the placeholder text (the default text in the search window) */
     color: #7aa06e !important;
#searchInput::placeholder { /* Standard placeholder selector */
     color: #666666; /* A dark grey for the default placeholder text */
    opacity: 1;    /* Ensure full opacity in Firefox */
}
}
#searchInput::-webkit-input-placeholder { /* For Webkit browsers (Chrome, Safari) */
#mw-panel li.mw-list-item a:visited {
     color: #666666;
     color: #cccccc !important;
}
}
#searchInput::-moz-placeholder { /* For Firefox */
#mw-list-item a:hover {
     color: #666666;
     color: #a3be8c !important;
     opacity: 1; /* Override Firefox's default lower opacity */
     background-color: #3a3a3a !important;
}
}
#searchInput:-ms-input-placeholder { /* For Internet Explorer 10+ */
#mw-panel li.mw-list-item {
     color: #666666;
     background-color: transparent !important;
}
     color: #e0e0e0 !important;
#searchInput::-ms-input-placeholder { /* For Microsoft Edge */
     color: #666666;
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 6. Main Page and Discussion Tabs (Page-level navigation) */
/* 5. Top Tabs (Read/Edit/History) */
/* -------------------------------------------------------- */
/* ------------------------------ */


/* Base styles for all top tabs */
#p-views ul li {
#p-views ul li {
     background-color: #3a3a3a; /* Dark background for unselected tabs */
     background-color: #3a3a3a !important;
     border-color: #444;       /* Darker border for tabs */
     border-color: #444 !important;
    /* Override any default background images for tabs */
     background-image: none !important;
     background-image: none !important;
}
}
#p-views ul li a {
#p-views ul li a {
     color: #e0e0e0; /* Light text color for tab links */
     color: #e0e0e0 !important;
    /* Override any default background images for tab links */
     background-image: none !important;
     background-image: none !important;
}
}
/* Styles for the currently selected tab */
#p-views ul li.selected {
#p-views ul li.selected {
     background-color: #2a2a2a; /* Darker background for the selected tab (match #content) */
     background-color: #2a2a2a !important;
     border-color: #444;      /* Darker border */
     border-color: #444 !important;
    background-image: none !important; /* Override background image for selected tab too */
}
}
#p-views ul li.selected a {
#p-views ul li.selected a {
     color: #f0f0f0; /* Slightly lighter text color for the selected tab link */
     color: #f0f0f0 !important;
}
}
/* Hover state for tabs */
#p-views ul li:not(.selected):hover {
#p-views ul li:not(.selected):hover {
     background-color: #4a4a4a; /* Slightly lighter dark background on hover for unselected tabs */
     background-color: #4a4a4a !important;
    background-image: none !important; /* Override background image on hover */
}
}
#p-views ul li:not(.selected):hover a {
#p-views ul li:not(.selected):hover a {
     color: #ffffff; /* White text on hover for unselected tabs */
     color: #ffffff !important;
}
}


/* Specific overrides for the vector-menu-tabs and dropdown heading for background gradients */
/* Vector 2022 Tabs */
.vector-menu-tabs,
.vector-menu-tabs,
.vector-menu-tabs a,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
#mw-head .vector-menu-dropdown .vector-menu-heading {
     background-image: none !important; /* Remove the light gradient */
     background-image: none !important;
     background-color: #3a3a3a !important; /* Set to a dark solid color */
     background-color: #3a3a3a !important;
     color: #e0e0e0 !important; /* Ensure text is light */
     color: #e0e0e0 !important;
}
}


/* ------------------------------ */
/* 6. Header & Logo */
/* ------------------------------ */


/* -------------------------------------------------------- */
/* 7. Header elements (mw-head, mw-wiki-logo) */
/* -------------------------------------------------------- */
/* Styles for the main header area, including borders and background */
#mw-head {
#mw-head {
     background-color: #1a1a1a; /* Ensure the header background is dark */
     background-color: #1a1a1a !important;
     border-bottom-color: #444; /* Dark border at the bottom of the header */
     border-bottom-color: #444 !important;
}
}
/* Styles for the wiki logo area */
#mw-wiki-logo {
#mw-wiki-logo {
     background-color: transparent; /* Ensure the logo background is transparent or matches main background */
     background-color: transparent !important;
}
}


/* -------------------------------------------------------- */
/* ------------------------------ */
/* 8. Left Navigation / Sidebar (#mw-panel) */
/* 7. Footer */
/* -------------------------------------------------------- */
/* ------------------------------ */


/* Overall sidebar background */
#footer {
#mw-panel {
     background-color: #1a1a1a !important;
     background-color: #1a1a1a; /* Match body background */
     color: #e0e0e0 !important;
     color: #e0e0e0;           /* Light text for general sidebar content */
}
     border-color: #444;       /* Darker border for the sidebar if present */
#footer a {
    color: #7aa06e !important;
}
#footer a:visited {
    color: #cccccc !important;
}
#footer a:hover {
    color: #a3be8c !important;
}
#footer li {
     color: #e0e0e0 !important;
}
}


/* Individual portal (section) within the sidebar */
/* ------------------------------ */
#mw-panel div.portal {
/* 8. Search Input */
     background-color: #1a1a1a; /* Ensure portal backgrounds are dark */
/* ------------------------------ */
     border-color: #444;       /* Darker borders for sections */
 
#searchInput {
     background-color: #ffffff !important;
     color: #333333 !important;
}
#searchInput::placeholder,
#searchInput::-webkit-input-placeholder,
#searchInput::-moz-placeholder,
#searchInput:-ms-input-placeholder,
#searchInput::-ms-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}
}


/* Headings for sidebar sections (e.g., "Navigation", "Tools") */
/* ------------------------------ */
#mw-panel div.portal h3 {
/* 9. Table of Contents (TOC) */
     color: #f0f0f0; /* Light color for section headings */
/* ------------------------------ */
     border-color: #444; /* Darker border under headings */
 
.mw-toc-heading {
     background-color: #3a3a3a !important;
     color: #f0f0f0 !important;
}
}


/* Links within sidebar sections */
/* ------------------------------ */
#mw-panel div.body ul li a {
/* 10. Changes List & Legends */
    color: #7aa06e; /* Dull aqua green for unvisited links */
/* ------------------------------ */
}


#mw-panel div.body ul li a:visited {
.mw-changeslist,
     color: #cccccc; /* Light grey for visited links */
.mw-changeslist-legend {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
     border-color: #444 !important;
}
}
 
.mw-changeslist-legend .mw-legend {
#mw-panel div.body ul li a:hover {
     color: #e0e0e0 !important;
     color: #a3be8c; /* Light green on hover */
    background-color: #3a3a3a; /* Slight dark background on hover */
}
}


/* Ensure list item text is visible if it's not a link */
/* ------------------------------ */
#mw-panel div.body ul li {
/* 11. Editing Interface */
    color: #e0e0e0; /* Light text for any non-link list items */
/* ------------------------------ */
}


/* Specific styling for list items with mw-list-item class in the sidebar */
#editform,
#mw-panel li.mw-list-item a {
#wpTextbox1 {
     color: #7aa06e; /* Apply dull aqua green for links inside mw-list-item */
    background-color: #2a2a2a !important;
     color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}
}


#mw-panel li.mw-list-item a:visited {
.divEditOptions,
     color: #cccccc; /* Apply light grey for visited links */
.editOptions {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
     border-color: #444 !important;
}
}


#mw-list-item a:hover {
.divEditOptions input,
     color: #a3be8c; /* Apply light green on hover */
.divEditOptions textarea,
     background-color: #3a3a3a; /* Apply slight dark background on hover */
.divEditOptions select {
    background-color: #2a2a2a !important;
     color: #e0e0e0 !important;
     border: 1px solid #555 !important;
}
}


/* Ensure the list item itself has a dark background and light text if not a link */
/* ------------------------------ */
#mw-panel li.mw-list-item {
/* 12. Custom Blocks (Optional) */
    background-color: transparent; /* Or a specific dark color if needed */
/* ------------------------------ */
    color: #e0e0e0; /* Light text color for the list item itself */
}


/* -------------------------------------------------------- */
/* 9. Main Page Custom Styles - Future Use */
/* -------------------------------------------------------- */
.qme-column {
.qme-column {
     background-color: #2a2a2a; /* Dark background */
     background-color: #2a2a2a !important;
     color: #e0e0e0; /* Light text color */
     color: #e0e0e0 !important;
     border: 1px solid #444; /* Optional: A subtle dark border for consistency */
     border: 1px solid #444 !important;
     padding: 1em; /* Add some padding if needed, adjust as desired */
     padding: 1em;
}
}
/*
    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:
/* Example custom heading style */
    If your Main Page has:
.qme-heading {
    <div style="background-color:#fcfcfc; color:#000;">...</div>
    background-color: #3a3a3a !important;
 
    color: #f0f0f0 !important;
    You would change the WikiText to:
    border: 1px solid #444 !important;
    <div class="main-page-box">...</div>
}
 
    And then add the corresponding CSS rule here:
    .main-page-box {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border: 1px solid #444;
    }
 
    Similarly for headings:
    From: <h2 style="background-color:#83FCDB; color:#000;">Welcome</h2>
    To: <h2 class="qme-heading">Welcome</h2>
 
    And here in CSS:
    .qme-heading {
        background-color: #3a3a3a;
        color: #f0f0f0;
        border: 1px solid #444;
    }
 
*/

Revision as of 23:37, 30 June 2025

/* ========================================================= */
/* 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: #7aa06e !important;
}
a:visited {
    color: #cccccc !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: #7aa06e !important;
}
#content a:visited {
    color: #cccccc !important;
}
#content a:hover {
    color: #a3be8c !important;
}

/* ------------------------------ */
/* 4. Sidebar & Navigation Panel */
/* ------------------------------ */

#mw-panel {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #444 !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 {
    color: #7aa06e !important;
}
#mw-panel div.body ul li a:visited {
    color: #cccccc !important;
}
#mw-panel div.body ul li a:hover {
    color: #a3be8c !important;
    background-color: #3a3a3a !important;
}
#mw-panel div.body ul li {
    color: #e0e0e0 !important;
}
#mw-panel li.mw-list-item a {
    color: #7aa06e !important;
}
#mw-panel li.mw-list-item a:visited {
    color: #cccccc !important;
}
#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;
}

/* ------------------------------ */
/* 5. Top Tabs (Read/Edit/History) */
/* ------------------------------ */

#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;
    border-color: #444 !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 2022 Tabs */
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none !important;
    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. Footer */
/* ------------------------------ */

#footer {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}
#footer a {
    color: #7aa06e !important;
}
#footer a:visited {
    color: #cccccc !important;
}
#footer a:hover {
    color: #a3be8c !important;
}
#footer li {
    color: #e0e0e0 !important;
}

/* ------------------------------ */
/* 8. Search Input */
/* ------------------------------ */

#searchInput {
    background-color: #ffffff !important;
    color: #333333 !important;
}
#searchInput::placeholder,
#searchInput::-webkit-input-placeholder,
#searchInput::-moz-placeholder,
#searchInput:-ms-input-placeholder,
#searchInput::-ms-input-placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

/* ------------------------------ */
/* 9. Table of Contents (TOC) */
/* ------------------------------ */

.mw-toc-heading {
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}

/* ------------------------------ */
/* 10. Changes List & Legends */
/* ------------------------------ */

.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 (Optional) */
/* ------------------------------ */

.qme-column {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    padding: 1em;
}

/* Example custom heading style */
.qme-heading {
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
    border: 1px solid #444 !important;
}
By using this site, you agree to the Terms of Use. © 1996–2025 The Quincy Examiner / MTB. All rights reserved.
Retrieved from "https://quincyexaminer.com/wiki/index.php?title=MediaWiki:Vector.css&oldid=320"