MediaWiki:Vector.css

/* All CSS here will be loaded for users of the Vector skin */

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

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

/* General link styles (fallback for links not covered by more specific rules) */
a {
    color: #7aa06e; /* Dull aqua green for unvisited links */
}
a:visited {
    color: #cccccc; /* Light grey for visited links */
}
a:hover {
    color: #a3be8c; /* A light green for hover */
}

/* -------------------------------------------------------- */
/* 2. Main Content Area (#content) */
/* -------------------------------------------------------- */

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

/* Headings within content */
#content h1,
#content h2,
#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 {
    color: #7aa06e; /* Dull aqua green for unvisited links within content */
}
#content a:visited {
    color: #cccccc; /* Light grey for visited links within content */
}
#content a:hover {
    color: #a3be8c; /* Light green on hover for links within content */
}

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

/* Style for the Table of Contents heading */
.mw-toc-heading {
    color: #f0f0f0;         /* Set a light color for the heading text */
    background-color: #3a3a3a; /* Set a dark background color for the heading */
}

/* -------------------------------------------------------- */
/* 4. Footer */
/* -------------------------------------------------------- */

/* 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 */
}

/* Specific link styles within the footer */
#footer a {
    color: #7aa06e; /* Dull aqua green for unvisited links in footer */
}
#footer a:visited {
    color: #cccccc; /* Light grey for visited links in footer */
}
#footer a:hover {
    color: #a3be8c; /* Light green on hover in footer */
}

/* Specific list item text color within the footer */
#footer li {
    color: #e0e0e0;
}

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

/* Style for the search input field */
#searchInput {
    background-color: #ffffff; /* White interior */
    color: #333333;            /* Darker color for typed text */
}

/* Style for the placeholder text (the default text in the search window) */
#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) */
    color: #666666;
}
#searchInput::-moz-placeholder { /* For Firefox */
    color: #666666;
    opacity: 1; /* Override Firefox's default lower opacity */
}
#searchInput:-ms-input-placeholder { /* For Internet Explorer 10+ */
    color: #666666;
}
#searchInput::-ms-input-placeholder { /* For Microsoft Edge */
    color: #666666;
}

/* -------------------------------------------------------- */
/* 6. Main Page and Discussion Tabs (Page-level navigation) */
/* -------------------------------------------------------- */

/* Styles for the tabs above the main content, e.g., "Main Page", "Discussion", "Edit", "View History" */
#p-views ul li {
    background-color: #3a3a3a; /* Dark background for unselected tabs */
    border-color: #444;       /* Darker border for tabs */
}

#p-views ul li a {
    color: #e0e0e0; /* Light text color for tab links */
}

/* Styles for the currently selected tab */
#p-views ul li.selected {
    background-color: #2a2a2a; /* Darker background for the selected tab (match #content) */
    border-color: #444;       /* Darker border */
}

#p-views ul li.selected a {
    color: #f0f0f0; /* Slightly lighter text color for the selected tab link */
}

/* Hover state for tabs */
#p-views ul li:not(.selected):hover {
    background-color: #4a4a4a; /* Slightly lighter dark background on hover for unselected tabs */
}

#p-views ul li:not(.selected):hover a {
    color: #ffffff; /* White text on hover for unselected tabs */
}

/* -------------------------------------------------------- */
/* 7. Header elements (mw-head, mw-wiki-logo) */
/* -------------------------------------------------------- */

/* Styles for the main header area, including borders and background */
#mw-head {
    background-color: #1a1a1a; /* Ensure the header background is dark */
    border-bottom-color: #444; /* Dark border at the bottom of the header */
    /* Often, the border under the logo is part of mw-head itself or a container within it */
}

/* Styles for the wiki logo area */
#mw-wiki-logo {
    background-color: transparent; /* Ensure the logo background is transparent or matches main background */
    /* If there's a specific border around the logo itself, you might need: */
    /* border-color: #444; */
}

/* If the problem persists for a specific border on the logo,
   you might need to target properties like border-left-color or border-right-color
   on #mw-wiki-logo or other elements within #mw-head, such as a pseudo-element.
   Further inspection with developer tools will be key to finding the exact rule. */