MediaWiki:WatercolorDark.css

From CrustyWindows, the largest archive of bootleg operating systems
Revision as of 15:37, 18 November 2023 by Undefishin (talk | contribs)
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
ul {
     list-style-image: none;
}
.ambox {
     background-color: #454545!important;
}

body #mw-navigation #searchform #simpleSearch #searchInput {
    border-color: #A2A9B1 !important;
}
figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"],
figcaption {
    background-color: #454545 !important;
    color: #d7d7d8;
    border-color: darkgray;
}
div.mw-collapsible {
    background: #454545 !important;
    color: #d7d7d8 !important;
    border-color: #a2a9b1 !important;
}
.mw-message-box, span.label {
    color: #d7d7d8 !important;
}
.oo-ui-iconElement-icon:not(.oo-ui-checkboxInputWidget-checkIcon/*.editCheckboxes * */), .oo-ui-indicatorElement-indicator, .searchButton, span.tab a:before, a.label:after {
    filter: invert(100%);
}

/*most of OO-UI, preferences page is used as an example, other places are ok too*/
#p-personal .oo-ui-buttonElement-button {
    background-color: unset !important;
}
.oo-ui-buttonElement-button {
    background-color: #353535 !important;
}
.oo-ui-flaggedElement-primary input {
    color: #fff !important;
}
.oo-ui-buttonElement-button {
    color: #d7d7d7 !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
    background-color: #151515 !important;
    border-color: #151515 !important;
}

.oo-ui-tabSelectWidget-framed {
    background-color: #323232 !important;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: #656565 !important;
    color: #fff !important;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
    color: #fff !important;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input, body #mw-navigation #searchform #simpleSearch #searchInput {
    background-color: #353535 !important;
    color: #fff !important;
}

.oo-ui-dropdownWidget-handle {
    background-color: #353535 !important;
}
.oo-ui-dropdownWidget-handle > .oo-ui-labelElement-label {
    color: #d7d7d8;
}
.oo-ui-defaultOverlay > .oo-ui-selectWidget {
    background-color: #353535 !important;
}

.oo-ui-menuOptionWidget > .oo-ui-labelElement-label {
    font-size: 14px;
    color: #d7d7d8;
}
.oo-ui-defaultOverlay > .oo-ui-selectWidget > .oo-ui-optionWidget-highlighted,
.oo-ui-defaultOverlay > .oo-ui-selectWidget > .oo-ui-optionWidget-selected {
    background-color: #151515 !important;
}

.oo-ui-radioInputWidget [type="radio"] + span,
.oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-inputWidget-input {
    background-color: #353535 !important;
    border-color: #a2a9b1 !important;
    border-radius: 0px;
}
.oo-ui-popupWidget-popup {
    font-size: 14px!important;
    color: #d7d7d8;
    background-color: #323232;
}
.oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
    background-color: #353535!important;
}
.oo-ui-popupWidget-anchor:after {
    border-top-color: #323232!important;
}

.oo-ui-menuSelectWidget * {
    background-color: #323232!important;
    color: #d7d7d8;
    font-size: 14px; /*i will never understand why everything has to be so FAT*/
}
.oo-ui-menuSectionOptionWidget * {
    color: #d7d7d8!important;
}

.oo-ui-buttonSelectWidget .oo-ui-optionWidget-selected > a {
    border-color: #fff!important;
}

.mw-prefs-buttons, #preferences .mw-htmlform-submit-buttons {
    background-color: #323232 !important;
}

/* Watercolor Dark - Source Editor */
pre, code, .mw-code {
    border-color: #a2a9b1!important;
}
.mw-editfont-monospace { /*first and most obvious step :)*/
    background-color: #323232;
    color: #d7d7d8;
}
.wikiEditor-ui .wikiEditor-ui-view, .wikiEditor-ui .wikiEditor-ui-top {
    border-color: #a2a9b1!important;
}
.wikiEditor-ui-toolbar {
    background-color: #323232;
}
.wikiEditor-ui-toolbar div {
    background-color: #353535;
    border-color: #a2a9b1 !important;
}
.wikiEditor-ui-toolbar div.tabs {
    margin: 0;
}
.wikiEditor-ui-toolbar .group .tool-select .options {
    background-color: #323232;
}
.wikiEditor-ui-toolbar .group .tool-select .options .option:hover {
    background-color: #151515 !important;
}
div.editOptions {
    background: #353535;
    color: #d7d7d8;
}
#wpSummaryWidget, .editCheckboxes {
    margin-bottom: 4px !important;
}

/* Subsection - Characters Section*/
.wikiEditor-ui-toolbar .booklet > .index > div.current,
.wikiEditor-ui-toolbar .booklet > .index > div:hover {
    background-color: #151515;
    color: #d7d7d8;
}
.wikiEditor-ui-toolbar .booklet > .pages > div > div > span {
    border-color: #a2a9b1;
    color: #d7d7d8;
    font-size: 16px;
}
.wikiEditor-ui-toolbar .booklet > .pages > div > div > span:hover {
    background-color: #151515;
}

/* Subsection - Help Section */
.page-table > table[class] > tbody > tr * {
    color: #d7d7d8;
}

/* Watercolor Dark - Recent Changes */
div.oo-ui-tagMultiselectWidget-handle {
    background-color: #303030!important;
}
div.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper *, div.oo-ui-tagMultiselectWidget-content, label.mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters, div.mw-rcfilters-ui-savedLinksListWidget-placeholder * {
    color: #d7d7d8 !important;
}
div.mw-rcfilters-ui-row .mw-rcfilters-ui-filterTagItemWidget  {
    background-color: #323232!important;
    border-color: #a2a9b1!important;
}
span.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget {
    background-color: #303030!important;
}
div.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-iconElement-icon.oo-ui-icon-stop {
    filter: invert(0%)!important;
}
div.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
    left: 0.5em!important;
}

div.mw-rcfilters-ui-datePopupWidget-hours .mw-rcfilters-ui-valuePickerWidget-title,
div.mw-rcfilters-ui-datePopupWidget-days .mw-rcfilters-ui-valuePickerWidget-title {
    color: #b7b7b8;
}

div.mw-rcfilters-ui-menuSelectWidget-footer label.oo-ui-labelWidget {
    color: #d7d7d8;
}

div.mw-rcfilters-ui-viewSwitchWidget-buttons .oo-ui-iconElement-icon {
    background-color: transparent !important;
}
span.mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton .oo-ui-icon-highlight /*yes, it's really spelled like that*/ {
    background-color: transparent !important;
}
span.mw-rcfilters-ui-filterMenuHeaderWidget-backButton span,
span.mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon span {
    background-color: transparent !important;
}

.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
    border-width: 1px!important;
}

.mw-rcfilters-ui-tagItemWidget-popup-content {
    color: #d7d7d8;
}
.mw-plusminus-pos {
    color: #88ff88;
}
.mw-plusminus-neg {
    color: #ff8888;
}
.unpatrolled {
    color: #ff5555;
}

/* Watercolor Dark - Syntax Highlighting */
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
    box-shadow: inset 2.75em 0 0 #323232!important;
}
div.mw-highlight,
div.mw-highlight span.linenos /*line number*/{
    background: #323232!important;
}
div.mw-highlight span.linenos:before {
    color: #a7a7a8;
}
div.mw-highlight span.c{
    color: #88ff88;
    font-style: unset;
}
div.mw-highlight span.nt /*elements*/{
    color: #8888ff!important;
}
div.mw-highlight span.nc /*class*/,
div.mw-highlight span.nn /*id*/{
    color: #ffff88;
}
div.mw-highlight span.o {
    color: unset;
}

div.mw-highlight span.k,span.p {/*property name*/
    color: unset;
    font-weight: unset;
}
div.mw-highlight span.kc /*property value-valid values*/{
    color: #88ff88;
}
div.mw-highlight span.mi,span.mf,span.mh /*property value-everything else*/{
    color: #88ffff!important;
    font-weight: bold;
}
div.mw-highlight span.s2 /*quotes*/{
    color: #88ff88;
}
div.mw-highlight span.kt {
    color: #ff88ff;
}
div.mw-highlight span.cp /*!important*/,
div.mw-highlight span.nd{
    color: #ff8888;/*you don't need important here, lol*/
    font-weight: bold;
}