If you plan to make a YouTube video or other content using bootlegs downloaded from our site, although we can't and won't force you to do anything, we greatly appreciate attribution for the large amounts of time and effort we spend finding these bootlegs. Thank you!
MediaWiki:WatercolorDark.css
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.
/*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;
}