MediaWiki:WatercolorDark.css

/*Originul staile bai ZE CHOK, stool improov'd bai Undefashin _|(&<&'%)^$ */

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 (and some of MW-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, .mw-ui-button {
    background-color: #353535 !important;
}
.oo-ui-flaggedElement-primary input {
    color: #fff !important;
}
.oo-ui-buttonElement-button, .mw-ui-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 {
    transition: 0s;
}
.oo-ui-menuOptionWidget > .oo-ui-labelElement-label {
    font-size: 14px;
    color: #d7d7d8;
}
.oo-ui-defaultOverlay > .oo-ui-selectWidget > .oo-ui-optionWidget-highlighted > .oo-ui-labelElement-label,
.oo-ui-defaultOverlay > .oo-ui-selectWidget > .oo-ui-optionWidget-selected > .oo-ui-labelElement-label{
    background-color: #151515 !important;
    transition-duration: 0s;
}
.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: #80ff80;
}
.mw-plusminus-neg {
    color: #ff8080;
}
.unpatrolled {
    color: #ff5050;
}

/* Watercolor Dark - Revision History */
.mw-contributions-list > li.selected {
    background-color: #151515!important;
    color: #a7a7a8!important;
    outline: none!important;
}
.mw-contributions-list > li > input[type="radio"] {
    appearance: none;
    background-color: #323232;
    border:2px solid #a2a9b1;
    border-radius: 10px;
    padding: 4px;
}

/* Watercolor Dark - Difference Between Revisions */
.ve-init-mw-diffPage-diffMode .oo-ui-buttonElement-active .oo-ui-iconElement-icon {
    filter: invert(0%)!important;
}
/* Watercolor Dark - Difference Between Revisions - Wikitext */
.diff-context {
    background-color: #151515;
    border-color: #a2a9b1;
    border-radius: 0px;
    color: #a7a7a8;
}
.diff-marker {
    font-family: monospace;
}

.diff-addedline.diff-side-added {
    background-color: #323232;
    border-color: #80ff80!important;
    border-radius: 0px;
}
.diff-deletedline.diff-side-deleted {
    background-color: #323232;
    border-color: #ff8080!important;
    border-radius: 0px;
}
ins.diffchange {
    background-color: #008000!important;
    color: #fff;
    border-radius: 0px!important;
}
del.diffchange {
    background-color: #800000!important;
    color: #fff;
    border-radius: 0px!important;
}

/* Watercolor Dark - Difference Between Revisions - Visual */
.diff-side-deleted > div[data-diff-action="remove"] {
    background-color: #80000015!important;
    color: #ff8080;
}
.diff-side-added > div[data-diff-action="insert"] {
    background-color: #00800015!important;
    color: #80ff80;
}
.ve-ui-diffElement-spacer {
    display: none;
}

.ve-ui-diffElement-document [data-diff-action] * {
    mix-blend-mode: normal!important;
}

.ve-ui-diffElement-document [data-diff-action="none"] {
    opacity: 1.0;
}

.ve-ui-diffElement-document [data-diff-action="insert"] {
    background-color: #00800080!important;
    box-shadow: 0 0 0 1px #008000!important;
    color: #80ff80;
}
.ve-ui-diffElement-document ins[data-diff-action="insert"] {
    background-color: #00800080!important;
    box-shadow: none!important;
    border: 1px solid #008000;
    color: #80ff80;
}
.ve-ui-diffElement-document [data-diff-action="remove"] {
    background-color: #80000060!important;
    box-shadow: none!important;
    border: 1px solid #800000;
    color: #ff8080;
}
.ve-ui-diffElement-document del[data-diff-action="remove"] {
    background-color: #80000080!important;
    color: #ff8080!important;
}

.ve-ui-diffElement-document [data-diff-action="remove"]:hover {
    text-decoration: line-through;
}
.ve-ui-diffElement-document del[data-diff-action="remove"] > a {
    color: #fff!important;
}
.ve-ui-diffElement-document [data-diff-action="insert"] code {
    border-color: #80ff80!important;
    background-color: #003000!important;
    color: #d0f0d0;
}
.ve-ui-diffElement-document [data-diff-action="remove"] code {
    border-color: #ff8080!important;
    background-color: #300000!important;
    color: #ffd0d0;
}

/* Watercolor Dark - Syntax Highlighting - CSS */
.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: #80ff80;
    font-style: unset;
}
div.mw-highlight span.nt /*elements*/{
    color: #8080ff!important;
}
div.mw-highlight span.nc /*class*/,
div.mw-highlight span.nn /*id*/{
    color: #ffff80;
}
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: #80ff80;
}
div.mw-highlight span.mi,span.mf,span.mh /*property value-everything else*/{
    color: #80ffff!important;
    font-weight: bold;
}
div.mw-highlight span.nb {
    color: #8080ff;
    font-weight: bold;
}
div.mw-highlight span.s2 /*quotes*/{
    color: #80ff80;
}
div.mw-highlight span.kt {
    color: #ff80ff;
}
div.mw-highlight span.cp /*!important*/,
div.mw-highlight span.nd{
    color: #ff8080;/*you don't need important here, lol*/
    font-weight: bold;
}