MediaWiki:Nord/dark.css

/** * * @title           Nord (dark theme) * @description    An arctic, north-blush color palette for FANDOM code. * @author         Speedit * @version        1.1.4 * @license        CC-BY-SA 3.0 * * @colordef       #2e3440; background * @colordef       #d8dee9; text * @colordef       #3b4252; interface * @colordef       #4c566a; interactivity * @colordef       #657b83; comments * @colordef       #6ca1c1; functions * @colordef       #a3be8c; strings * @colordef       #76a9a0; symbols * @colordef       #a78ea2; numbers * @colordef       #88b3b3; keywords * @colordef       #bf616a; regexp * */

/** * @section        Code block coloring * @element        #mw-content-text */ .skin-oasis.codeeditor .ace_editor, .skin-oasis.codeeditor .ace_editor .ace_gutter, .skin-oasis #mw-content-text .javascript, .skin-oasis #mw-content-text .css, .skin-oasis #mw-content-text .html5, .skin-oasis #mw-content-text .xml, .skin-oasis #mw-content-text .lua, .skin-oasis #mw-content-text .mw-geshi, .skin-oasis #mw-content-text pre { background-color: #2e3440 !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .skin-oasis.codeeditor .ace_editor, .skin-oasis #mw-content-text .javascript, .skin-oasis #mw-content-text .css, .skin-oasis #mw-content-text .html5, .skin-oasis #mw-content-text .xml, .skin-oasis #mw-content-text .lua, .skin-oasis #mw-content-text pre { color: #d8dee9 !important; } .skin-oasis #mw-content-text .javascript, .skin-oasis #mw-content-text .css, .skin-oasis #mw-content-text .html5, .skin-oasis #mw-content-text .xml, .skin-oasis #mw-content-text .lua, .skin-oasis #mw-content-text .mw-geshi, .skin-oasis #mw-content-text pre { border-color: #3b4252 !important; } .skin-oasis.codeeditor .ace_editor .ace_scrollbar::-webkit-scrollbar, .skin-oasis.codeeditor .ace_editor .ace_scrollbar_h::-webkit-scrollbar, .skin-oasis #mw-content-text pre::-webkit-scrollbar { background-color: #2e3440; border: solid #3b4252; } .skin-oasis #mw-content-text pre::-webkit-scrollbar { border-width: 1px; } .skin-oasis.codeeditor .ace_editor .ace_scrollbar::-webkit-scrollbar-thumb, .skin-oasis.codeeditor .ace_editor .ace_scrollbar_h::-webkit-scrollbar-thumb, .skin-oasis #mw-content-text pre::-webkit-scrollbar-thumb { background-color: #3b4252; } .skin-oasis #mw-content-text .mw-geshi { padding: 0 !important; } .skin-oasis #mw-content-text .mw-geshi pre { padding: 1em !important; } .skin-oasis.codeeditor #EditPage.editpage-sourcewidemode-off { display: flex; justify-content: space-between; } .skin-oasis.codeeditor #EditPage.editpage-sourcewidemode-off #EditPageRail { padding-bottom: 28px; } .skin-oasis.codeeditor #EditPage.editpage-sourcewidemode-off #EditPageRail:after { background: #3b4252; border-top: 1px solid hsla(0, 0%, 0%, 0.2); bottom: 0; box-sizing: border-box; color: #d8dee9; content: 'Nord v1.1.0 · http://dev.wikia.com/wiki/Nord'; display: flex; font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif; height: 28px; line-height: 24px; padding: 0 10px; position: absolute; white-space: pre-wrap; width: 100%; }

/** * @section    Ace code editor coloring * @element    .ace_editor */ .skin-oasis.codeeditor .ace_editor .ace_search { border: solid #454545; border-width: 0 0 0 4px; box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.4); color: #d5d5d4; width: 287px; padding: 6px 8px 2px 16px; } .skin-oasis.codeeditor .ace_editor .ace_search, .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_field, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn, .skin-oasis.codeeditor .ace_editor .ace_gutter-tooltip { background: inherit; color: inherit; border-radius: 0; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_field, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_gutter-tooltip { border-color: #4c566a !important; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_field, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn:hover, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn_close:hover, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn:hover, .skin-oasis.codeeditor .ace_editor .ace_marker-layer .ace_active-line, .skin-oasis.codeeditor .ace_editor .ace_gutter-active-line { background-color: #3b4252 !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_indent-guide { background: linear-gradient(to left, #3b4252 1px, transparent 1px, transparent 100%); } .skin-oasis.codeeditor .ace_editor .ace_marker-layer .ace_selection, .skin-oasis.codeeditor .ace_editor .ace_marker-layer .ace_selected-word { background-color: #3e4658 !important; border: none; border-radius: 2px; box-sizing: content-box; padding: 2px; transform: translateX(-2px) translateY(-2px); } .skin-oasis.codeeditor .ace_editor .ace_marker-layer .ace_active-line ~ .ace_selection { background-color: #4c566a !important; }

/** * @section    Ace editor interface buttons * @element    .ace_search */ .skin-oasis.codeeditor .ace_editor .ace_search_field:placeholder-shown ~ .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search_form.ace_nomatch .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button:not(.checked), .skin-oasis.codeeditor .ace_editor .ace_search_form.ace_nomatch + .ace_replace_form .ace_replacebtn { background-color: transparent !important; opacity: 0.5; } .skin-oasis.codeeditor .ace_editor .ace_search_field:placeholder-shown ~ .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search_form.ace_nomatch .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search_form.ace_nomatch + .ace_replace_form .ace_replacebtn { cursor: initial; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_form.ace_nomatch { outline: none; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_form.ace_nomatch .ace_search_field { background: #774a55 !important; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn_close { margin: 3px 0 7px 3px; width: 16px; height: 16px; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_form, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replace_form, .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_field, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn { border: none; border-radius: 0; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_field { font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn_close, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn, .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button { background-position: center; background-repeat: no-repeat; background-size: 14px; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn, .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button { transition: opacity 0.3s; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn_close, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn { background-position: center; background-repeat: no-repeat; background-size: 14px; transition: opacity,background-color 0.3s; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_form, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn { display: flex; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_search_options { display: flex; flex-direction: row-reverse; position: absolute; right: 84px; top: 8px; } .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button { color: inherit; display: block; border: none; font-size: 0; height: 17px; width: 17px; margin-left: 4px; } .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button:hover { background-color: transparent; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn { margin-left: 4px; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn, .skin-oasis.codeeditor .ace_editor .ace_search .ace_replacebtn { font-size: 0; width: 22px; }

/** * @section    Ace editor interface buttons * @element    .ace_button *             .ace_searchbtn_close *             .ace_searchbtn *             .ace_replacebtn */ .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn_close { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/8/8b/Cross.svg'); } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn.prev { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/c/c3/Arrow-prev.svg'); order: 2; } .skin-oasis.codeeditor .ace_editor .ace_search .ace_searchbtn.next { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/6/64/Arrow-next.svg'); order: 3; } .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button[action="toggleWholeWords"] { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/1/19/Word-match.svg'); } .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button[action="toggleCaseSensitive"] { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/e/e8/Case-sensitive.svg'); } .skin-oasis.codeeditor .ace_editor .ace_search_options .ace_button[action="toggleRegexpMode"] { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/d/d8/Regex.svg'); } .skin-oasis.codeeditor .ace_editor .ace_replace_form .ace_replacebtn[action="replaceAndFindNext"] { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/1/13/Replace-single.svg'); } .skin-oasis.codeeditor .ace_editor .ace_replace_form .ace_replacebtn[action="replaceAll"] { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/a/a2/Replace-all.svg'); }

/** * @section    Editor gutter redesign * @element    .ace_gutter */ .skin-oasis.codeeditor .ace_editor .ace_gutter { margin-right: 4px; } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_fold-widget { background-size: 12px; transform: translateX(2px); } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_fold-widget:hover, .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_fold-widget:active { background-color: transparent; border-color: transparent; box-shadow: none; } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_gutter-cell { background-position: 0 1px; } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_gutter-cell.ace_info { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/e/e1/Info.svg'); } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_gutter-cell.ace_warning { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/8/8f/Alert.svg'); } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_gutter-cell.ace_error { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/f/f0/Error.svg'); } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_fold-widget.ace_open { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/7/72/Folding.svg'); } .skin-oasis.codeeditor .ace_editor .ace_gutter-layer .ace_fold-widget.ace_closed { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/9/95/Folded.svg'); } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_fold { background-image: url('https://vignette.wikia.nocookie.net/speedit/images/5/5a/More.svg'); background-position: 2px -3px; }

/** * @section    Syntax highlighting * @element    #mw-content-text */ .skin-oasis.codeeditor .ace_editor .ace_gutter .ace_gutter-layer, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_comment, .skin-oasis #mw-content-text .javascript .co1, .skin-oasis #mw-content-text .javascript .coMULTI, .skin-oasis #mw-content-text .css .coMULTI, .skin-oasis #mw-content-text .html5 .sc-1, .skin-oasis #mw-content-text .xml .sc-1, .skin-oasis #mw-content-text .lua .co1 { color: #657b83 !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_string, .skin-oasis #mw-content-text .javascript .st0, .skin-oasis #mw-content-text .css .st0, .skin-oasis #mw-content-text .css .co1, /**  **/ .skin-oasis #mw-content-text .css .co1 + .br0, .skin-oasis #mw-content-text .css .co1 + .coMULTI + .br0, .skin-oasis #mw-content-text .css .br0 + .br0 + .br0, .skin-oasis #mw-content-text .css .nu0 + .br0 + .br0, .skin-oasis #mw-content-text .css .re3 + .br0 + .br0, .skin-oasis #mw-content-text .css .kw2 + .br0 + .br0, .skin-oasis #mw-content-text .css .br0 + .sy0 + .br0 + .br0, .skin-oasis #mw-content-text .css .nu0 + .sy0 + .br0 + .br0, .skin-oasis #mw-content-text .css .kw2 + .sy0 + .br0 + .br0, .skin-oasis #mw-content-text .css .re3 + .sy0 + .br0 + .br0, /** **/ .skin-oasis #mw-content-text .html5 .st0, .skin-oasis #mw-content-text .xml .st0, .skin-oasis #mw-content-text .lua .st0, .skin-oasis #mw-content-text .lua .es1 { color: #a3be8c !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_variable, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_keyword, .skin-oasis.codeeditor[class*="css"] .ace_editor .ace_text-layer .ace_constant, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_storage, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_meta.ace_tag, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_language, .skin-oasis #mw-content-text .javascript .kw0, .skin-oasis #mw-content-text .javascript .kw1, .skin-oasis #mw-content-text .javascript .kw2, .skin-oasis #mw-content-text .javascript .kw3, .skin-oasis #mw-content-text .javascript .re0, .skin-oasis #mw-content-text .css .kw2, .skin-oasis #mw-content-text .css .re0, .skin-oasis #mw-content-text .css .re1, .skin-oasis #mw-content-text .css .sy0, .skin-oasis #mw-content-text .css .br0, .skin-oasis #mw-content-text .html5 .sc2, .skin-oasis #mw-content-text .html5 .kw2, .skin-oasis #mw-content-text .html5 .sy0, .skin-oasis #mw-content-text .xml .sc3, .skin-oasis #mw-content-text .xml .re1, .skin-oasis #mw-content-text .lua .kw1, .skin-oasis #mw-content-text .lua .kw2, .skin-oasis #mw-content-text .lua .kw4 { color: #6ca1c1 !important; } .skin-oasis #mw-content-text .css .kw1, .skin-oasis #mw-content-text .html5 .kw2, .skin-oasis #mw-content-text .xml .re1, .skin-oasis #mw-content-text .lua .kw1, .skin-oasis #mw-content-text .lua .kw2 { font-weight: normal; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_entity.ace_name.ace_function, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_support.ace_function, .skin-oasis #mw-content-text .javascript .me1, .skin-oasis #mw-content-text .css .sy0, .skin-oasis #mw-content-text .css .br0, .skin-oasis #mw-content-text .css .re2, .skin-oasis #mw-content-text .lua .kw3, .skin-oasis #mw-content-text .lua .br0 { color: #76a9a0 !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_constant.ace_numeric, .skin-oasis #mw-content-text .javascript .nu0, .skin-oasis #mw-content-text .css .nu0, .skin-oasis #mw-content-text .lua .nu0 { color: #a78ea2 !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_entity.ace_attribute-name, .skin-oasis #mw-content-text .javascript .br0, .skin-oasis #mw-content-text .javascript .sy0, .skin-oasis #mw-content-text .html5 .kw3, .skin-oasis #mw-content-text .xml .re0, .skin-oasis #mw-content-text .lua .sy0 { color: #88b3b3 !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_identifier, .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_support.ace_type, .skin-oasis #mw-content-text .css .re3, .skin-oasis #mw-content-text .css .kw1, .skin-oasis #mw-content-text .css * .re3, .skin-oasis #mw-content-text .xml * * .re2 { color: inherit !important; } .skin-oasis.codeeditor .ace_editor .ace_text-layer .ace_regexp, .skin-oasis #mw-content-text .javascript .kw5, .skin-oasis #mw-content-text .javascript .es0, .skin-oasis #mw-content-text .javascript .co2, .skin-oasis #mw-content-text .css .es2, .skin-oasis #mw-content-text .css .co2, .skin-oasis #mw-content-text .lua .co2 { color: #bf616a !important; }