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
Tag: Reverted
No edit summary
Tag: Manual revert
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 */
* MediaWiki Styles Override
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;
}


/* Recent changes legend */
/* Page background */
div.mw-changeslist-legend {
body {
     background-color: #27292d;
     background-color: #27292d !important;
}
}


/* Main page legend */
/* Content background */
div.mw-changeslist-legend dt {
#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 {
     float: left;
     background-color: #1f2024 !important;
}
}


/* Reference notes */
/* Links */
div.mw-references-wrap {
a, a:visited {
    font-size: 0.9em;
     color: #ffffff !important;
    color: #ffffff;
}
div.mw-references-wrap:before {
    border-bottom: 1px solid #A2A9B1;
    content: 'Notes and References';
    display: block;
    font-family: monospace;
    font-size: 1.75em;
    margin: 3em auto 0.75em;
     color: #ffffff;
}
}


/* Navigation margin top */
/* Hover effect for links */
#p-navigation {
a:hover {
     margin-top: -36px !important;
     color: #cccccc !important;
}
}


/* Hide <h3>&nbsp;</h3> at the top of the category pages list */
/* Hover effect for buttons */
.mw-category > .mw-category-group:only-child > h3 {
button:hover {
     display: none;
     background-color: #444444 !important;
}
     color: #ffffff !important;
.mw-category > .mw-category-group:first-child > h3 {
     margin: 0;
}
}


/* Table of contents */
/* Border color */
.toc {
.border {
     border-radius: 0.3rem;
     border-color: #ffffff !important;
    background-color: #1f2024;
    color: #ffffff;
}
}


/* Content links */
/* Header background */
#content a:link, #content a:visited, #content a:hover:link, #content a:hover:visited, #content a:focus:link, #content a:focus:visited {
#mw-head {
     color: #ffffff;
     background-color: #27292d !important;
}
#content a.new:link, #content a.new:visited, #content a.new:hover:link, #content a.new:hover:visited, #content a.new:focus:link, #content a.new:focus:visited {
    color: #BA0000;
}
#content a.oo-ui-buttonElement-button {
    color: #D33;
}
}


/* Button focus inner */
/* mw-code and mw-css background */
button::-moz-focus-inner {
.mw-code, .mw-css {
     padding: 0;
     background-color: #131416 !important;
}
}


/* Edit section margin top */
/* mw-normal-catlinks background */
div.editsection {
.mw-normal-catlinks, .toc, .toccolours {
     margin-top: 2em;
     background-color: #27292d !important;
    padding: 10px; /* Adjust padding as needed */
}
}


/* Heading margins and sizes */
/* Tabs */
.mw-body-content h2 { margin-top: 1.75em; font-size: 1.75em; }
.vector-menu-tabs-legacy a, .vector-menu-tabs-legacy .selected {
.mw-body-content h3 { margin-top: 1.00em; font-size: 1.50em; }
    background-color: #1f2024 !important; /* Background color */
.mw-body-content h4 { font-size: 1.25em; }
     color: #ffffff !important; /* Text color */
.mw-body-content h5 { font-size: 1.00em; }
.mw-body-content h6 { font-size: 0.90em; }
 
/* Edit section in headings */
h1 > span.mw-editsection, h2 > span.mw-editsection {
     font-style: italic;
    font-size: 0.5em;
}
h1 > span.mw-editsection > span.mw-editsection-bracket, h2 > span.mw-editsection > span.mw-editsection-bracket {
    display: none;
}
}


/* Edit section floating */
.vector-menu-tabs-legacy a:hover {
span.mw-editsection {
     background-color: #4b4e54 !important; /* Hover color */
     float: right;
}
}


/* Hide "Variants" tab */
/* Edit form */
#p-variants {
.mw-editform .editOptions {
     display: none;
     background-color: #1f2024 !important;
}
}


/* Hide Vector 2022 Skin */
/* Text input widget */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-radioOptionWidget:has( > span > input[value="vector-2022"]) {
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
     display:none;
    background-color: #27292d !important;
     color: #ffffff !important; /* Sets text color to white */
}
}


/* Preformatted text and code block styling */
/* Edit text box */
pre {
.mw-editform #wpTextbox1 {
    border-color: #DDD;
     background-color: #1f2024 !important;
}
code:not(.mw-highlight), div:not(.mw-highlight) > pre {
    margin: 0.5em 0 0.5em 0.5em;
    padding: 0.5em;
     background-color: #1f2024;
    border: 1px dashed #2F6FAB;
    font-size: 0.9em;
    line-height: 1.4em;
    white-space: pre;
    overflow-x: auto;
    color: #ffffff;
}
}


/* Obsolete <tt> tag styling */
/* Dropdown handle normal and hover effect */
var, tt {
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
    background-color: #1f2024;
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    font-family: "Lucida Console", Consolas, monospace;
     background-color: #27292d !important; /* Dark color based on your color scheme */
    font-size: 0.9em;
    font-style: normal;
    line-height: 1.4em;
    padding: 0.2em 0.3em;
    color: #ffffff;
}
tt:after {
    color: #D33;
    content: "<tt> is obsolete, use {{hl|text}} template";
    font-family: arial;
    font-size: 75%;
    font-weight: bold;
    line-height: 0;
    margin-left: 1em;
     position: relative;
        top: -0.5em;
    vertical-align: baseline;
}
}


/* Technical writing style */
/* Indicator Down Element Color */
pre, code, tt, kbd, samp, .mw-code {
.oo-ui-indicatorElement-indicator .oo-ui-indicator-down {
    font-family: "Lucida Console", monospace;
     color: #ffffff !important; /* Sets color to white */
    tab-size: 4;
     color: #ffffff;
}
#wpTextbox1 {
    tab-size: 4;
}
}


/*
/* Dark background with white text for specific widget */
* Syntaxhighlight styling
.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 */
div.mw-highlight > pre > span > .k, div.mw-highlight > pre > span > .kc, div.mw-highlight > pre > span > .nc, div.mw-highlight > pre > span > .nn, div.mw-highlight > pre > span > .nt {
     color: #ffffff !important; /* White text */
    font-weight: normal;
    text-shadow: 0 0 0.075em;        /* fake bold */
}
div.mw-highlight.mw-highlight-lang-css .cp {
     background-color: #FF8;
    color: #D00;
    margin: -0.125em;
    padding: 0.125em;
    text-shadow: 0 0 0.075em;       /* fake bold */
}
div.mw-highlight > pre {
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 0.5em 0;
    padding: 0.5em;
    overflow-x: auto;
    white-space: pre;
    background-color: #1f2024;
     color: #ffffff;
}
}


/*
/* Background color for search profile tabs */
* Smaller Wiki-styled checkboxes, e.g [[Special:Search]] (after v1.39)
.mw-search-profile-tabs {
*/
     background-color: #27292d !important; /* Setting the color to #27292d */
.oo-ui-checkboxInputWidget [type="checkbox"], .oo-ui-checkboxInputWidget [type="checkbox"] + span {
     height: 1.2em;
    min-height: unset;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    width: 1.2em;
    min-width: unset;
}
}


.oo-ui-layout.oo-ui-labelElement.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
/* mw-changeslist-legend background and text color */
     line-height: 1.1em;
.mw-changeslist-legend {
     background-color: #1f2024 !important; /* Consistent dark background */
    color: #ffffff !important; /* White text color */
}
}


/*
/* Vector menu dropdown item background */
* Bigger native checkboxes, e.g [[Special:ReplaceText]]
.vector-menu-dropdown .mw-list-item a:not(.vector-icon) {
*/
     background-color: #1f2024 !important; /* Dark background */
input[type="checkbox"] {
     color: #ffffff !important; /* White text */
     height: 1.2em;
     width: 1.2em;
}
}


/* Hide subtitle and categories on Main Page */
/* Dark mode style for mw-widget-dateInputWidget-handle */
.page-Main_Page #contentSub {
.mw-widget-dateInputWidget-handle {
     display: none;
    background-color: #1f2024 !important; /* Dark background */
     color: #ffffff !important; /* White text */
}
}
.page-Main_Page #catlinks {
    display: none;
}
.page-Main_Page #firstHeading {
    display: none;
}
/* Continue with more custom styles... */

Revision as of 16:27, 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: #1f2024 !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 */
}