Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* Text elements in white */
/* General Page Styles */
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 {
/* Base page styling with background and text colors */
    color: #ffffff !important;
}
 
/* Page background */
body {
body {
     background-color: #27292d !important;
     background-color: #27292d !important;
    color: #ffffff !important;
}
}


/* Content background */
/* Headers, Paragraphs, Lists, and Text Elements */
#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 {
h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, code, caption, label, span {
     background-color: #1f2024 !important;
     color: #ffffff !important;
}
}


/* Links */
/* Link Styles */
/* Standard and visited links */
a, a:visited {
a, a:visited {
     color: #ffffff !important;
     color: #ffffff !important;
}
}


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


/* Hover effect for buttons */
/* Interactive Elements Styles */
/* Input fields, text areas, and buttons */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], textarea, select, button, .option {
    color: #ffffff !important;
    background-color: #27292d !important;
}
 
/* Button hover effect */
button:hover {
button:hover {
     background-color: #444444 !important;
     background-color: #444444 !important;
Line 32: Line 38:
}
}


/* Border color */
/* Table Styles */
.border {
/* Standard table styling */
     border-color: #ffffff !important;
table, th, td, .wikitable, .mw-datatable {
    background-color: #1f2024 !important;
    color: #ffffff !important;
     border-color: #27292d !important;
}
}


/* Header background */
/* Header cells in tables */
#mw-head {
.wikitable > tr > th, .wikitable > * > tr > th, .mw-datatable th {
     background-color: #27292d !important;
     background-color: #131416 !important;
}
}


/* mw-code and mw-css background */
/* Content Sections */
.mw-code, .mw-css {
/* Main content area background */
     background-color: #131416 !important;
#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;
}
}


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


/* Tabs */
/* Vector Menu Tabs */
.vector-menu-tabs-legacy a, .vector-menu-tabs-legacy .selected {
.vector-menu-tabs-legacy a, .vector-menu-tabs-legacy .selected {
     background-color: #1f2024 !important; /* Background color */
     background-color: #1f2024 !important;
     color: #ffffff !important; /* Text color */
     color: #ffffff !important;
}
}
.vector-menu-tabs-legacy a:hover {
.vector-menu-tabs-legacy a:hover {
     background-color: #4b4e54 !important; /* Hover color */
     background-color: #4b4e54 !important;
}
 
/* Edit form */
.mw-editform .editOptions {
    background-color: #1f2024 !important;
}
}


/* Text input widget */
/* Widgets and Specialized Elements */
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
/* Different widget styles */
    background-color: #27292d !important;
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input,
    color: #ffffff !important; /* Sets text color to white */
.mw-code, .mw-css, .mw-normal-catlinks, .toc, .toccolours,
}
 
/* 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,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
    background-color: #27292d !important; /* Dark color based on your color scheme */
.oo-ui-indicatorElement-indicator .oo-ui-indicator-down,
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-decoratedOptionWidget.oo-ui-menuOptionWidget,
 
.mw-search-profile-tabs, .mw-changeslist-legend, .vector-menu-dropdown .mw-list-item a:not(.vector-icon),
/* Indicator Down Element Color */
.mw-widget-dateInputWidget-handle, code, .mw-trackingcategories-name,  
.oo-ui-indicatorElement-indicator .oo-ui-indicator-down {
.mw-trackingcategories-msg, .mw-trackingcategories-desc,
    color: #ffffff !important; /* Sets color to white */
.mw-trackingcategories-table, .mw-contribute-cards, .mw-contribute-card-content,
}
.mw-special-Contribute .mw-contribute-tabs-content, .oo-ui-dropdownWidget-handle,
 
.oo-ui-inputWidget-input, .oo-ui-buttonElement-button, .oo-ui-buttonElement-button:hover,
/* Dark background with white text for specific widget */
.cdx-text-input__input:enabled, .mw-htmlform-submit-buttons, .oo-ui-tabSelectWidget-framed,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-decoratedOptionWidget.oo-ui-menuOptionWidget {
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
    background-color: #27292d !important; /* Dark background */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
    color: #ffffff !important; /* White text */
.mw-rcfilters-ui-filterMenuHeaderWidget .mw-rcfilters-ui-cell,
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header,
 
.mw-rcfilters-ui-menuSelectWidget-footer, .mw-rcfilters-ui-filterMenuSectionOptionWidget,
/* Background color for search profile tabs */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.mw-search-profile-tabs {
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonGroupWidget,
    background-color: #27292d !important; /* Setting the color to #27292d */
.legend, .mw-warning-logempty, .mw-autocomplete-user, #wpReason,
}
#wpExpiry-sysop select, #wpExpiry-interface-admin select, #wpExpiry-bureaucrat select,
 
#mw-userrights-form2 .mw-userrights-groups select, select.mw-autocomplete-user,  
/* mw-changeslist-legend background and text color */
select#wpExpiry-sysop, select#wpExpiry-interface-admin, select#wpExpiry-bureaucrat,
.mw-changeslist-legend {
html.client-js.qxipgo.idc0_350 body.skin-vector-legacy.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns--1.ns-special.mw-special-Tags.page-Special_Tags.rootpage-Special_Tags.skin-vector.action-view div#content.mw-body div#bodyContent.vector-body div#mw-content-text.mw-body-content table.mw-datatable.sortable.mw-tags-table.jquery-tablesorter,
    background-color: #27292d !important; /* Consistent dark background */
.mw-datatable tr td, .mw-datatable tr:hover td, .mw-apisandbox-toolbar, .mw-notification,
    color: #ffffff !important; /* White text color */
.oo-ui-optionWidget.oo-ui-widget-enabled:hover, .oo-ui-outlineOptionWidget:hover,
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected, .oo-ui-optionWidget.oo-ui-optionWidget-selected,
 
/* 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 */
}
/* Styling for .mw-rcfilters-ui-filterMenuSectionOptionWidget */
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text */
}
/* Border color for .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    border-color: #27292d !important; /* Dark border color */
}
/* Border color for .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    border-color: #27292d !important; /* Dark border color */
}
/* Border color for mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget within enabled button group widget */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonGroupWidget {
    border-color: #27292d !important; /* Dark border color */
}
 
.wikitable {
    background-color: #1f2024 !important; /* Slightly lighter background for table cells */
    color: #ffffff !important; /* White text for table cells */
    border-color: #27292d !important; /* Border color for cells */
}
/* Styling for .wikitable headers */
.wikitable > tr > th,  
.wikitable > * > tr > th {
    background-color: #0f1012 !important; /* Slightly darker grey for headers */
    color: #ffffff !important; /* White text for contrast */
}
 
/* General styling for .wikitable */
.wikitable {
    color: #ffffff !important; /* White text for table content */
}
 
.wikitable td {
    background-color: #1f2024 !important; /* Dark background for table cells */
    border-color: #27292d !important; /* Border color for cells */
}
/* White text color for <legend> elements */
legend {
    color: #ffffff !important; /* Setting text color to white */
}
/* White text color for .mw-warning-logempty */
.mw-warning-logempty {
    color: #ffffff !important; /* Setting text color to white */
}
/* Dark background color for .mw-autocomplete-user */
.mw-autocomplete-user {
    background-color: #27292d !important; /* Setting background color to dark grey */
    color: #ffffff !important; /* White text for contrast */
}
/* Dark background color for #wpReason */
#wpReason {
    background-color: #27292d !important; /* Setting background color to dark grey */
    color: #ffffff !important; /* White text for contrast */
}
/* Styling for select elements within wpExpiry dropdowns */
#wpExpiry-sysop select,
#wpExpiry-interface-admin select,
#wpExpiry-bureaucrat select {
    background-color: #27292d !important; /* Dark grey background */
    color: #ffffff !important; /* White text for contrast */
    border: 1px solid #27292d !important; /* Border to match the background */
}
 
/* Dropdowns in Special:UserRights */
#mw-userrights-form2 .mw-userrights-groups select {
    background-color: #27292d !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #27292d !important; /* Consistent border color */
}
 
/* General styling for dropdowns */
select.mw-autocomplete-user,  
select#wpExpiry-sysop,
select#wpExpiry-interface-admin,
select#wpExpiry-bureaucrat {
    background-color: #2c2e32 !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #27292d !important; /* Consistent border color */
}
/* Specific styling for sortable tags table on Special:Tags page */
html.client-js.qxipgo.idc0_350 body.skin-vector-legacy.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns--1.ns-special.mw-special-Tags.page-Special_Tags.rootpage-Special_Tags.skin-vector.action-view div#content.mw-body div#bodyContent.vector-body div#mw-content-text.mw-body-content table.mw-datatable.sortable.mw-tags-table.jquery-tablesorter {
    background-color: #1f2024 !important; /* Dark background for the table */
    color: #ffffff !important; /* White text for table content */
}
/* Default row styling in .mw-datatable */
.mw-datatable tr td {
    background-color: #27292d !important; /* Dark grey background for rows */
    color: #ffffff !important; /* White text for contrast */
}
 
/* Hover styling for rows in .mw-datatable */
.mw-datatable tr:hover td {
    background-color: #232527 !important; /* Slightly darker grey on hover */
}
/* Styling for .mw-apisandbox-toolbar */
.mw-apisandbox-toolbar {
    background-color: #1f2024 !important; /* Dark background */
    color: #ffffff !important; /* White text for contrast */
}
/* Styling for .mw-notification */
.mw-notification {
    background-color: #2c2e32 !important; /* Dark grey background */
    color: #ffffff !important; /* White text for readability */
}
/* Styling for unselected oo-ui-outlineOptionWidget and oo-ui-optionWidget on hover */
.oo-ui-optionWidget.oo-ui-widget-enabled:hover,
.oo-ui-outlineOptionWidget:hover {
    background-color: #2c2e32 !important; /* Dark grey background when hovered but not selected */
    color: #ffffff !important; /* White text for readability */
}
 
/* Styling for selected oo-ui-outlineOptionWidget and oo-ui-optionWidget */
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-optionWidget.oo-ui-optionWidget-selected {
    background-color: #26282c !important; /* Even darker grey for selected state */
    color: #ffffff !important; /* White text for readability */
}
/* Styling for .oo-ui-popupWidget-popup */
.oo-ui-popupWidget-popup {
.oo-ui-popupWidget-popup {
     background-color: #27292d !important; /* Dark grey background */
     background-color: #27292d !important;
     color: #ffffff !important; /* White text for contrast */
     color: #ffffff !important;
}
}

Revision as of 02:32, 19 March 2024

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

/* General Page Styles */
/* Base page styling with background and text colors */
body {
    background-color: #27292d !important;
    color: #ffffff !important;
}

/* Headers, Paragraphs, Lists, and Text Elements */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, code, caption, label, span {
    color: #ffffff !important;
}

/* Link Styles */
/* Standard and visited links */
a, a:visited {
    color: #ffffff !important;
}

/* Link hover effects */
a:hover {
    color: #cccccc !important;
}

/* Interactive Elements Styles */
/* Input fields, text areas, and buttons */
input[type="text"], input[type="password"], input[type="email"], 
input[type="number"], textarea, select, button, .option {
    color: #ffffff !important;
    background-color: #27292d !important;
}

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

/* Table Styles */
/* Standard table styling */
table, th, td, .wikitable, .mw-datatable {
    background-color: #1f2024 !important;
    color: #ffffff !important;
    border-color: #27292d !important;
}

/* Header cells in tables */
.wikitable > tr > th, .wikitable > * > tr > th, .mw-datatable th {
    background-color: #131416 !important;
}

/* Content Sections */
/* Main content area 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;
}

/* Headers and Navigation */
/* Page header background */
#mw-head {
    background-color: #27292d !important;
}

/* Vector Menu Tabs */
.vector-menu-tabs-legacy a, .vector-menu-tabs-legacy .selected {
    background-color: #1f2024 !important;
    color: #ffffff !important;
}
.vector-menu-tabs-legacy a:hover {
    background-color: #4b4e54 !important;
}

/* Widgets and Specialized Elements */
/* Different widget styles */
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input,
.mw-code, .mw-css, .mw-normal-catlinks, .toc, .toccolours,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-indicatorElement-indicator .oo-ui-indicator-down,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-decoratedOptionWidget.oo-ui-menuOptionWidget,
.mw-search-profile-tabs, .mw-changeslist-legend, .vector-menu-dropdown .mw-list-item a:not(.vector-icon),
.mw-widget-dateInputWidget-handle, code, .mw-trackingcategories-name, 
.mw-trackingcategories-msg, .mw-trackingcategories-desc,
.mw-trackingcategories-table, .mw-contribute-cards, .mw-contribute-card-content,
.mw-special-Contribute .mw-contribute-tabs-content, .oo-ui-dropdownWidget-handle,
.oo-ui-inputWidget-input, .oo-ui-buttonElement-button, .oo-ui-buttonElement-button:hover,
.cdx-text-input__input:enabled, .mw-htmlform-submit-buttons, .oo-ui-tabSelectWidget-framed,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-filterMenuHeaderWidget .mw-rcfilters-ui-cell,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header,
.mw-rcfilters-ui-menuSelectWidget-footer, .mw-rcfilters-ui-filterMenuSectionOptionWidget,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonGroupWidget,
.legend, .mw-warning-logempty, .mw-autocomplete-user, #wpReason,
#wpExpiry-sysop select, #wpExpiry-interface-admin select, #wpExpiry-bureaucrat select,
#mw-userrights-form2 .mw-userrights-groups select, select.mw-autocomplete-user, 
select#wpExpiry-sysop, select#wpExpiry-interface-admin, select#wpExpiry-bureaucrat,
html.client-js.qxipgo.idc0_350 body.skin-vector-legacy.mediawiki.ltr.sitedir-ltr.mw-hide-empty-elt.ns--1.ns-special.mw-special-Tags.page-Special_Tags.rootpage-Special_Tags.skin-vector.action-view div#content.mw-body div#bodyContent.vector-body div#mw-content-text.mw-body-content table.mw-datatable.sortable.mw-tags-table.jquery-tablesorter,
.mw-datatable tr td, .mw-datatable tr:hover td, .mw-apisandbox-toolbar, .mw-notification,
.oo-ui-optionWidget.oo-ui-widget-enabled:hover, .oo-ui-outlineOptionWidget:hover,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected, .oo-ui-optionWidget.oo-ui-optionWidget-selected,
.oo-ui-popupWidget-popup {
    background-color: #27292d !important;
    color: #ffffff !important;
}