MediaWiki:WatercolorDark.css
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.nb {
color: #8888ff;
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;
}