MediaWiki:Common.css: Difference between revisions

Revision as of 01:57, 11 May 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, visited, and hover effects for links */
a, a:visited {
    color: #ffffff !important;
}
a:hover {
    color: #cccccc !important;
}

/* Interactive Elements Styles */
/* Input fields, text areas, buttons, and hover effects */
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 {
    background-color: #444444 !important;
    color: #ffffff !important;
}

/* Table Styles */
/* Standard table styling, header cells, and cell specifics */
table, th, td, .wikitable, .mw-datatable {
    background-color: #1f2024 !important;
    color: #ffffff !important;
    border-color: #27292d !important;
}
.wikitable > tr > th, .wikitable > * > tr > th, .mw-datatable th {
    background-color: #131416 !important;
}
.wikitable > tr > th, .wikitable > * > tr > th, .wikitable td {
    background-color: #0f1012 !important;
}

/* Content Sections */
/* Main content area background styling */
#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 and vector menu tabs styling */
#mw-head, .vector-menu-tabs-legacy a, .vector-menu-tabs-legacy .selected {
    background-color: #27292d !important;
    color: #ffffff !important;
}
.vector-menu-tabs-legacy a:hover {
    background-color: #4b4e54 !important;
}

/* Widgets and Specialized Elements */
/* Different widget styles and variations */
.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,
.wikitable, .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,
select#wpExpiry-sysop, select#wpExpiry-interface-admin, select#wpExpiry-bureaucrat {
    background-color: #2c2e32 !important;
    color: #ffffff !important;
}

/* Specific Styles for Padding, Edit Form, and Tag Widgets */
/* Padding for #mw-panel and #mw-head, edit form, preformatted text, tag widget */
#mw-panel, #mw-head {
    padding: 0 !important;
}
.mw-editform .editOptions, pre {
    background-color: #2c2e32 !important;
    border: 1px solid #444444 !important; /* Slightly lighter border for visibility */
    padding: 10px; /* Padding for better spacing */
    border-radius: 4px; /* Rounded corners for a modern look */
    color: #ffffff !important;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
    background-color: #1f2024 !important;
    color: #ffffff !important;
}

/* Search and Suggestions Styles */
/* Styling for search bar, suggestions, and special query text */
.suggestions-special, .suggestions-results, .suggestions-result, .suggestions, .special-query {
    background-color: #2c2e32 !important;
    color: #ffffff !important;
}

/* Warning Message Box Styles */
.mw-message-box-warning {
    background-color: #40372c !important;
    color: #ffcc00 !important;
    border: 1px solid #d97742 !important;
    padding: 10px;
    border-radius: 4px;
}

/* Date Input Widget Calendar Styles */
.mw-widget-dateInputWidget-calendar {
    background-color: #27292d !important;
    color: #ffffff !important;
}

/* Calendar Widget Day Styles */
.mw-widget-calendarWidget-day {
    color: #ffffff !important;
}
/* Category Links Styles */
.catlinks {
    background-color: #2c2e32 !important; /* Dark background color */
    color: #ffffff !important; /* White text color for contrast */
    border: 1px solid #444444 !important; /* Slightly lighter border for visibility */
    padding: 10px; /* Padding for better spacing */
    border-radius: 4px; /* Rounded corners for a modern look */
}
#footer {
    text-align: center;
}
/* footer links */
#footer-places { display: none; }
/* Portable Infobox Styles */
.portable-infobox {
    background-color: #2c2e32 !important; /* Dark background color for consistency */
    color: #ffffff !important; /* White text for good contrast */
    border: 1px solid #444444 !important; /* Slightly lighter border for definition */
    padding: 10px; /* Adequate padding for content separation */
    border-radius: 5px; /* Modern rounded corners */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-family: Arial, sans-serif; /* Modern, readable font */
}

.portable-infobox h2 {
    background-color: #27292d !important; /* Slightly darker for header sections */
    padding: 8px; /* Comfortable padding for headers */
    margin-top: 0; /* Remove top margin for alignment */
    border-bottom: 1px solid #444444; /* Border for visual separation within infobox */
}

.portable-infobox p {
    padding: 4px 8px; /* Padding for paragraph elements within the infobox */
    line-height: 1.6; /* Improved line height for readability */
}

.portable-infobox table {
    width: 100%; /* Full width tables within the infobox */
    border-collapse: collapse; /* Ensures no double borders */
}

.portable-infobox th, .portable-infobox td {
    border: 1px solid #444444; /* Borders for cells to maintain structure */
    padding: 8px; /* Padding for content inside table cells */
    text-align: left; /* Align text to the left for consistency */
}

/* Specific styles for infobox links */
.portable-infobox a, .portable-infobox a:visited {
    color: #0096FF; /* Bright color for links to stand out */
    text-decoration: none; /* No underlines to keep it clean */
}

.portable-infobox a:hover {
    color: #ffffff; /* White color on hover for visibility */
    background-color: #444444; /* Darker background on hover */
}

.portable-infobox .pi-data-label {
    font-weight: bold; /* Bold labels for clear distinction */
}

.portable-infobox .pi-data-value {
    font-weight: normal; /* Normal weight for data values to differentiate from labels */
}
.portable-infobox .pi-title {
    background-color: #1f2024 !important; /* Matching the table background color */
    color: #ffffff !important; /* Keeping the text color white for contrast */
    padding: 8px; /* Consistent padding with other header elements */
    border-bottom: 1px solid #444444; /* A subtle border to separate from the content */
    text-align: center; /* Center the title text for a balanced look */
    font-size: 18px; /* Slightly larger font size for prominence */
    font-weight: bold; /* Bold font weight for emphasis */
    margin-bottom: 10px; /* Extra space below the title for visual separation */
}