MediaWiki:Common.css: Difference between revisions
From Melvor Idle
(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- | 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:# | color:#ce9178; | ||
} | } | ||
body.darkMode .codeEditor-status { | body.darkMode .codeEditor-status { | ||
color:# | 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; | |||
} | } |