Anonymous

MediaWiki:Common.css: Difference between revisions

From Melvor Idle
Dark mode: Compatibility for Ace code editor
(Tweak messagebox class)
(Dark mode: Compatibility for Ace code editor)
Line 117: Line 117:
body.darkMode .oo-ui-buttonOptionWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
body.darkMode .oo-ui-buttonOptionWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
body.darkMode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
body.darkMode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
body.darkMode .oo-ui-messageDialog-message,
body.darkMode .search-types .current a,
body.darkMode .search-types .current a,
body.darkMode .suggestions .suggestions-result,
body.darkMode .suggestions .suggestions-result,
Line 127: Line 128:
body.darkMode code,
body.darkMode code,
body.darkMode {
body.darkMode {
color:#eee
color:#eee;
}
}
body.darkMode .warningbox {
body.darkMode .warningbox {
Line 173: Line 174:
body.darkMode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
body.darkMode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
body.darkMode .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.darkMode .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.darkMode .oo-ui-messageDialog-container,
body.darkMode .oo-ui-toggleSwitchWidget,
body.darkMode .oo-ui-toggleSwitchWidget,
body.darkMode .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip,
body.darkMode .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip,
Line 191: Line 193:
}
}
body.darkMode .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-flaggedElement-progressive):not([aria-selected="true"]) > .oo-ui-buttonElement-button:hover,
body.darkMode .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-flaggedElement-progressive):not([aria-selected="true"]) > .oo-ui-buttonElement-button:hover,
body.darkMode .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:hover,
body.darkMode .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover,
body.darkMode .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
body.darkMode .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
body.darkMode .mw-rcfilters-ui-savedLinksListItemWidget:hover {
body.darkMode .mw-rcfilters-ui-savedLinksListItemWidget:hover {
Line 200: Line 202:
background-color:#223145
background-color:#223145
}
}
body.darkMode .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle,
body.darkMode .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
body.darkMode .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color:#a4a1a1;
color:#a4a1a1;
Line 235: Line 238:
body.darkMode #simpleSearch,
body.darkMode #simpleSearch,
body.darkMode .editOptions {
body.darkMode .editOptions {
border-color:#465160
border-color:#465160;
}
}
body.darkMode #mw-content-container,
body.darkMode #mw-content-container,
body.darkMode #simpleSearch,
body.darkMode #simpleSearch,
body.darkMode .cn-formsection-emphasis {
body.darkMode .cn-formsection-emphasis {
background-color:#232a35
background-color:#232a35;
}
}
body.darkMode .mw-parser-output a.external,
body.darkMode .mw-parser-output a.external,
Line 379: Line 382:
color:#eee;
color:#eee;
}
}
/* Scribunto/Lua Module Editing */
/* General Editing & Scribunto/Lua Module Editing */
body.darkMode .mw-scribunto-console-fieldset,
body.darkMode .mw-scribunto-console-fieldset,
body.darkMode .mw-scribunto-error,
body.darkMode .mw-scribunto-error,
Line 400: Line 403:
}
}
body.darkMode .mw-scribunto-print {
body.darkMode .mw-scribunto-print {
color:#a65709;
color:#ce9178;
}
}
body.darkMode .codeEditor-status {
body.darkMode .codeEditor-status {
color:#001133;
  background-color: #2f3744;
border-color: #465160;
}
body.darkMode .codeEditor-status-message,
body.darkMode .wikiEditor-ui .wikiEditor-ui-top,
body.darkMode .wikiEditor-ui .wikiEditor-ui-view {
border-color: #465160;
}
body.darkMode .wikiEditor-ui-toolbar {
background-color: #2f3744;
background-image: linear-gradient(#2c333e 0,#1f2e48 32px);
}
body.darkMode .tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:hover {
  background-color:#3c424a;
outline: 1px solid #465160;
}
body.darkMode .tool.tool-active.oo-ui-buttonElement-frameless.oo-ui-iconElement {
  background-color:#3c424a;
outline: 1px solid #465160;
box-shadow: unset;
}
 
/* Ace Editor */
body.darkMode .ace-tm .ace_gutter {
background-color: #3c4653;
color: #eee;
}
body.darkMode .ace-tm .ace_print-margin {
background: #4c5664;
}
body.darkMode .ace-tm .ace_fold {
background-color: green;
}
body.darkMode .ace-tm {
background-color: #232a35;
color: #eee;
}
body.darkMode .ace-tm .ace_cursor {
color: #eee;
}
body.darkMode .ace-tm .ace_invisible {
color: #3e4551;
}
body.darkMode .ace-tm .ace_storage,
body.darkMode .ace-tm .ace_keyword {
color: #569cd6;
}
body.darkMode .ace-tm .ace_constant {
color: #686be6;
}
body.darkMode .ace-tm .ace_constant.ace_buildin {
color: rgb(88, 72, 246);
}
body.darkMode .ace-tm .ace_constant.ace_language {
color: #686be6;
}
body.darkMode .ace-tm .ace_constant.ace_library {
color: #dbbb5b;
}
body.darkMode .ace-tm .ace_invalid {
background-color: rgba(255, 0, 0, 0.2);
color: red;
}
body.darkMode .ace-tm .ace_support.ace_function {
color: #dcdcaa;
}
body.darkMode .ace-tm .ace_support.ace_constant {
color: #569cd6;
}
body.darkMode .ace-tm .ace_support.ace_type,
body.darkMode .ace-tm .ace_support.ace_class {
color: #569cd6;
}
body.darkMode .ace-tm .ace_keyword.ace_operator {
color: #aaa8a8;
}
body.darkMode .ace-tm .ace_string {
color: #ce9178;
}
body.darkMode .ace-tm .ace_comment {
color: #529955;
}
body.darkMode .ace-tm .ace_comment.ace_doc {
color: #529955;
}
body.darkMode .ace-tm .ace_comment.ace_doc.ace_tag {
color: rgb(128, 159, 191);
}
body.darkMode .ace-tm .ace_constant.ace_numeric {
color: #b5ce9b;
}
body.darkMode .ace-tm .ace_variable {
color: #9cdcfe;
}
body.darkMode .ace-tm .ace_xml-pe {
color: rgb(104, 104, 91);
}
body.darkMode .ace-tm .ace_entity.ace_name.ace_function {
color: #dcdcaa;
}
body.darkMode .ace-tm .ace_heading {
color: #1c55f1;
}
body.darkMode .ace-tm .ace_list {
color: rgb(185, 6, 144);
}
body.darkMode .ace-tm .ace_meta.ace_tag {
color: #1c55f1;
}
body.darkMode .ace-tm .ace_string.ace_regex {
color: #ef4e4e;
}
body.darkMode .ace-tm .ace_marker-layer .ace_selection {
background: #3e445a;
}
body.darkMode .ace-tm.ace_multiselect .ace_selection.ace_start {
box-shadow: 0 0 3px 0px grey;
}
body.darkMode .ace-tm .ace_marker-layer .ace_step {
background: rgb(252, 255, 0);
}
body.darkMode .ace-tm .ace_marker-layer .ace_stack {
background: rgb(164, 229, 101);
}
body.darkMode .ace-tm .ace_marker-layer .ace_bracket {
border: 1px solid rgb(192, 192, 192);
}
body.darkMode .ace-tm .ace_marker-layer .ace_active-line {
background: rgba(255, 255, 255, 0.07);
}
body.darkMode .ace-tm .ace_gutter-active-line {
background-color: #4b6389;
}
body.darkMode .ace-tm .ace_marker-layer .ace_selected-word {
background: #383f4b;
border: 1px solid #313f73;
}
body.darkMode .ace-tm .ace_paren {
color: #ffc813;
}
body.darkMode .ace-tm .ace_indent-guide {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADklEQVR4AWMAA5+wlP8ABAMCBlWbPt4AAAAASUVORK5CYII=") right repeat-y;
}
body.darkMode .ace_fold-widget {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2P4//8/AzoGEQ7oGCaLLAhWiSwB146BAQCSTPYocqT0AAAAAElFTkSuQmCC");
}
body.darkMode .ace_fold-widget.ace_closed {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAHElEQVQIW2P4//+/AxAzgDADlOOAznHAKgPWAwARji8UIDTfQQAAAABJRU5ErkJggg==");
}
body.darkMode .ace_gutter-cell.ace_info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC");
}
body.darkMode .ace_search {
background-color:#323942;
border-color: #465160;
color:#eee;
}
body.darkMode .ace_search_field,
body.darkMode .ace_searchbtn {
background-color:#323942;
color:#eee;
}
body.darkMode .ace_button {
background-color:#3c424a;
color:#eee;
}
}