MediaWiki:Minerva.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.

/* All CSS here will be loaded for users of the MinervaNeue skin */
/* Display footer links fix for MediaWiki < 1.44: */
/* https://www.mediawiki.org/wiki/Manual:Footer#Note_for_MediaWiki_versions_before_1.44.0 */
ul.footer-places li {
  display:inline !important;
}








/* ===== PAGE FORMS DARK MODE FIXES ===== */
/* Add this to MediaWiki:Minerva.css or MediaWiki:Common.css */

/* Token input fields - container */
html.skin-theme-clientpref-night .pfTokens {
    background-color: #313244 !important;
    border-color: #45475a !important;
}

/* Token tags - the selected items */
html.skin-theme-clientpref-night .pfTokens .token {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
    border-color: #585b70 !important;
}

/* Token text - ensure all text inside tokens is visible */
html.skin-theme-clientpref-night .pfTokens .token,
html.skin-theme-clientpref-night .pfTokens .token span,
html.skin-theme-clientpref-night .pfTokens .token p,
html.skin-theme-clientpref-night .pfTokens .token label {
    color: #cdd6f4 !important;
}

/* Token close button (x) */
html.skin-theme-clientpref-night .pfTokens .token .close {
    color: #f38ba8 !important;
}

/* Token input text field */
html.skin-theme-clientpref-night .pfTokens input,
html.skin-theme-clientpref-night .pfTokens input[type="text"] {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

/* Token input placeholder text */
html.skin-theme-clientpref-night .pfTokens input::placeholder {
    color: #a6adc8 !important;
    opacity: 1 !important;
}

/* Form table styling */
html.skin-theme-clientpref-night .formtable {
    background-color: #1e1e2e;
}

html.skin-theme-clientpref-night .formtable th {
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .formtable td {
    color: #cdd6f4;
}

/* All text inputs in forms */
html.skin-theme-clientpref-night .formtable input[type="text"],
html.skin-theme-clientpref-night .formtable input[type="url"],
html.skin-theme-clientpref-night .formtable textarea,
html.skin-theme-clientpref-night .formtable select {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

/* Combobox inputs */
html.skin-theme-clientpref-night .pfComboBox,
html.skin-theme-clientpref-night .pfComboBox input {
    background-color: #313244 !important;
    color: #cdd6f4 !important;
    border-color: #45475a !important;
}

/* Autocomplete dropdown menu */
html.skin-theme-clientpref-night .ui-autocomplete,
html.skin-theme-clientpref-night .ui-menu {
    background-color: #313244 !important;
    border-color: #45475a !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item,
html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item a,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item a {
    color: #cdd6f4 !important;
    background-color: #313244 !important;
}

html.skin-theme-clientpref-night .ui-autocomplete .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-autocomplete .ui-state-focus,
html.skin-theme-clientpref-night .ui-autocomplete .ui-state-active,
html.skin-theme-clientpref-night .ui-menu .ui-menu-item:hover,
html.skin-theme-clientpref-night .ui-menu .ui-state-focus,
html.skin-theme-clientpref-night .ui-menu .ui-state-active {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
}

/* Form buttons */
html.skin-theme-clientpref-night input[type="submit"],
html.skin-theme-clientpref-night .mw-htmlform-submit {
    background-color: #45475a !important;
    color: #cdd6f4 !important;
    border-color: #585b70 !important;
}

/* Placeholder text everywhere */
html.skin-theme-clientpref-night input::placeholder,
html.skin-theme-clientpref-night textarea::placeholder {
    color: #a6adc8 !important;
    opacity: 1 !important;
}

/* ===== OS DARK MODE PREFERENCE ===== */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .pfTokens {
        background-color: #313244 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
        border-color: #585b70 !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token,
    html.skin-theme-clientpref-os .pfTokens .token span,
    html.skin-theme-clientpref-os .pfTokens .token p,
    html.skin-theme-clientpref-os .pfTokens .token label {
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os .pfTokens .token .close {
        color: #f38ba8 !important;
    }

    html.skin-theme-clientpref-os .pfTokens input,
    html.skin-theme-clientpref-os .pfTokens input[type="text"] {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .pfTokens input::placeholder {
        color: #a6adc8 !important;
        opacity: 1 !important;
    }

    html.skin-theme-clientpref-os .formtable {
        background-color: #1e1e2e;
    }

    html.skin-theme-clientpref-os .formtable th {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable td {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .formtable input[type="text"],
    html.skin-theme-clientpref-os .formtable input[type="url"],
    html.skin-theme-clientpref-os .formtable textarea,
    html.skin-theme-clientpref-os .formtable select {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .pfComboBox,
    html.skin-theme-clientpref-os .pfComboBox input {
        background-color: #313244 !important;
        color: #cdd6f4 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete,
    html.skin-theme-clientpref-os .ui-menu {
        background-color: #313244 !important;
        border-color: #45475a !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item,
    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item a,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item a {
        color: #cdd6f4 !important;
        background-color: #313244 !important;
    }

    html.skin-theme-clientpref-os .ui-autocomplete .ui-menu-item:hover,
    html.skin-theme-clientpref-os .ui-autocomplete .ui-state-focus,
    html.skin-theme-clientpref-os .ui-menu .ui-menu-item:hover,
    html.skin-theme-clientpref-os .ui-menu .ui-state-focus {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
    }

    html.skin-theme-clientpref-os input[type="submit"],
    html.skin-theme-clientpref-os .mw-htmlform-submit {
        background-color: #45475a !important;
        color: #cdd6f4 !important;
        border-color: #585b70 !important;
    }

    html.skin-theme-clientpref-os input::placeholder,
    html.skin-theme-clientpref-os textarea::placeholder {
        color: #a6adc8 !important;
        opacity: 1 !important;
    }
}