MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/*
 * =================================================================
 * Eldrasil Dark Theme - Final Overrides for Extensions & Components
 * =================================================================
*/

/* ----- 1. Fix All White Text Fields ----- */
/* Targets the main editor, summary box, and search bars */
textarea,
.mw-ui-input,
input[type="text"],
input[type="search"],
input[type="password"] {
    background-color: #1F212B !important;
    color: #E1E3E6 !important;
    border: 1px solid #3A3E4C !important;
}

/* Add a blue highlight when a text field is selected */
textarea:focus,
.mw-ui-input:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
    border-color: #4A90E2 !important;
    box-shadow: 0 0 3px rgba(74, 144, 226, 0.5) !important;
}


/* ----- 2. Fix Editor Toolbar Icons ----- */
/* Inverts the black icons from the WikiEditor extension to white */
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon {
    filter: invert(1) !important;
}


/* ----- 3. Fix Button Hover State ----- */
/* Ensures text on all standard buttons stays light on hover */
.mw-ui-button:hover,
.mw-ui-button:focus {
    color: #E1E3E6 !important;
}


/* ----- 4. Fix Talk Page "Discussion" Header ----- */
/* Removes the white box around the "Discussion" title on talk pages */
.mw-body-content #mw-content-text > .mw-parser-output > h2:first-of-type {
    background-color: transparent !important;
    border-bottom: 1px solid #3A3E4C !important;
    padding-left: 0 !important;
}


/* ----- 5. Fix Footer Logos ----- */
/* Inverts the logos to make them visible on a dark background.
   The best long-term solution is to upload transparent logo versions,
   but this filter is a very effective immediate fix. */
.mw-footer-poweredby img,
.mw-footer-copyright img {
    /* Inverts colors and adjusts contrast for dark backgrounds */
    filter: invert(0.9) hue-rotate(180deg) contrast(1.5);
}