MediaWiki:Common.css: Difference between revisions

Revision as of 18:55, 18 March 2024

/* CSS placed here will be applied to all skins */

/* Text elements in white */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, span, blockquote, pre, code, th, td, caption, label, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select, button, .option, .mw-parser-output {
    color: #ffffff !important;
}

/* Page background */
body {
    background-color: #27292d !important;
}

/* Content background */
#content, #content #bodyContent, #content #mw-content-text, #content #mw-indicator-mw-helplink, #content #mw-panel, #content #footer, #content #footer #footer-info, #content #footer #footer-places, #content #footer #footer-icons, #content #footer #footer-copyright {
    background-color: #1f2024 !important;
}

/* Links */
a, a:visited {
    color: #ffffff !important;
}

/* Hover effect for links */
a:hover {
    color: #cccccc !important;
}

/* Hover effect for buttons */
button:hover {
    background-color: #444444 !important;
    color: #ffffff !important;
}

/* Border color */
.border {
    border-color: #ffffff !important;
}

/* Header background */
#mw-head {
    background-color: #27292d !important;
}

/* mw-code and mw-css background */
.mw-code, .mw-css {
    background-color: #131416 !important;
}

/* mw-normal-catlinks background */
.mw-normal-catlinks, .toc, .toccolours {
    background-color: #27292d !important;
    padding: 10px; /* Adjust padding as needed */
}

/* Tabs */
.vector-menu-tabs-legacy a, .vector-menu-tabs-legacy .selected {
    background-color: #1f2024 !important; /* Background color */
    color: #ffffff !important; /* Text color */
}

.vector-menu-tabs-legacy a:hover {
    background-color: #4b4e54 !important; /* Hover color */
}

/* Edit form */
.mw-editform .editOptions {
    background-color: #1f2024 !important;
}

/* Text input widget */
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
    background-color: #27292d !important;
    color: #ffffff !important; /* Sets text color to white */
}

/* Edit text box */
.mw-editform #wpTextbox1 {
    background-color: #1f2024 !important;
}

/* Dropdown handle normal and hover effect */
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    background-color: #27292d !important; /* Dark color based on your color scheme */
}

/* Indicator Down Element Color */
.oo-ui-indicatorElement-indicator .oo-ui-indicator-down {
    color: #ffffff !important; /* Sets color to white */
}

/* Dark background with white text for specific widget */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-decoratedOptionWidget.oo-ui-menuOptionWidget {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text */
}

/* Background color for search profile tabs */
.mw-search-profile-tabs {
    background-color: #27292d !important; /* Setting the color to #27292d */
}

/* mw-changeslist-legend background and text color */
.mw-changeslist-legend {
    background-color: #27292d !important; /* Consistent dark background */
    color: #ffffff !important; /* White text color */
}

/* Vector menu dropdown item background */
.vector-menu-dropdown .mw-list-item a:not(.vector-icon) {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text */
}

/* Dark mode style for mw-widget-dateInputWidget-handle */
.mw-widget-dateInputWidget-handle {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text */
}

/* mw-datatable header */
.mw-datatable th {
    background-color: #131416 !important; /* Dark grey background */
    color: #ffffff !important; /* White text */
}

/* Code boxes */
code {
    background-color: #2c2e32 !important; /* Dark background for code */
    color: #ffffff !important; /* White text */
}

/* Tracking categories styling */
.mw-trackingcategories-name, 
.mw-trackingcategories-msg, 
.mw-trackingcategories-desc {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text */
}

/* mw-trackingcategories-table dark mode style */
.mw-trackingcategories-table {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text */
}

.mw-trackingcategories-table th,
.mw-trackingcategories-table td {
    border-color: #27292d !important; /* Adjusting border color for better visibility */
}

/* mw-contribute-cards and mw-contribute-card-content */
.mw-contribute-cards, 
.mw-contribute-card-content {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text */
}
/* Special Contribute tabs content background */
.mw-special-Contribute .mw-contribute-tabs-content {
    background-color: #1f2024 !important; /* Dark background */
}
/* Dropdown handle, input widget, and button element */
.oo-ui-dropdownWidget-handle,
.oo-ui-inputWidget-input,
.oo-ui-buttonElement-button {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #27292d !important; /* Border color for definition */
}

/* Adjusting hover effect for buttons */
.oo-ui-buttonElement-button:hover {
    background-color: #27292d !important; /* Slightly lighter dark color for hover */
    color: #ffffff !important; /* Keeping text color white on hover */
}
/* Consistent styling for .cdx-text-input__input when enabled */
.cdx-text-input__input:enabled {
    background-color: #2c2e32 !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #27292d !important; /* Border color for definition */
}
/* Styling for mw-htmlform-submit-buttons */
.mw-htmlform-submit-buttons {
    background-color: #2c2e32 !important; /* Dark gray background */
    color: #ffffff !important; /* White text */
}

/* Styling for oo-ui-tabSelectWidget-framed */
.oo-ui-tabSelectWidget-framed {
    background-color: #2c2e32 !important; /* Dark gray background */
    color: #ffffff !important; /* White text */
}

/* Styling for selected tab option in oo-ui-tabSelectWidget-framed */
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: #131416 !important; /* Dark gray background for selected tab */
    color: #ffffff !important; /* White text for contrast */
}

/* Styling for .oo-ui-tagMultiselectWidget-handle within enabled .mw-rcfilters-ui-filterTagMultiselectWidget */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text for contrast */
}
/* Styling for .mw-rcfilters-ui-cell within .mw-rcfilters-ui-filterMenuHeaderWidget */
.mw-rcfilters-ui-filterMenuHeaderWidget .mw-rcfilters-ui-cell {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text for contrast */
}
/* Styling for .mw-rcfilters-ui-filterMenuSectionOptionWidget-header */
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text */
}
/* Styling for .mw-rcfilters-ui-menuSelectWidget-footer */
.mw-rcfilters-ui-menuSelectWidget-footer {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text */
}