MediaWiki:Vector-darkmode.less/aceeditor.less

//

/* =======================================
       syntax highlight in ace editor
   ======================================= */

// This is taken from https://ace.c9.io/tool/mode_creator.html
//----- Theme monokai -----//

@code-bg:               @cloud-burst;
@gutter-bg:             @pickled-bluewood;
@gutter-active-line-bg: lighten(@gutter-bg, 10%);
@gutter-text:           @dark-text;
@active-line-bg:        lighten(@code-bg, 5%);
@selection-bg:          lighten(@code-bg, 10%);
@indent-guide:          lighten(@code-bg, 10%);

// adding this class for specificity
.wikiEditor-ui {

    .ace-tm .ace_gutter {
        background: @gutter-bg;
        color: @gutter-text;
    }

    .ace-tm .ace_print-margin {
        width: 1px;
        background: #555651
    }

    .ace-tm {
        background-color: @code-bg;
        color: #F8F8F2
    }

    .ace-tm .ace_cursor {
        color: #F8F8F0
    }

    .ace-tm .ace_marker-layer .ace_selection {
        background: @selection-bg
    }

    .ace-tm.ace_multiselect .ace_selection.ace_start {
        box-shadow: 0 0 3px 0px @selection-bg;
    }

    .ace-tm .ace_marker-layer .ace_step {
        background: rgb(102, 82, 0)
    }

    .ace-tm .ace_marker-layer .ace_bracket {
        margin: -1px 0 0 -1px;
        border: 1px solid #49483E
    }

    .ace-tm .ace_marker-layer .ace_active-line {
        background: @active-line-bg
    }

    .ace-tm .ace_gutter-active-line {
        background-color: @gutter-active-line-bg
    }

    .ace-tm .ace_marker-layer .ace_selected-word {
        border: 1px solid #49483E;
        background: #49483E
    }

    .ace-tm .ace_invisible {
        color: #52524d
    }

    .ace-tm .ace_entity.ace_name.ace_tag,
    .ace-tm .ace_keyword,
    .ace-tm .ace_meta.ace_tag,
    .ace-tm .ace_storage {
        color: #F92672
    }

    .ace-tm .ace_punctuation,
    .ace-tm .ace_punctuation.ace_tag {
        color: #fff
    }

    .ace-tm .ace_constant.ace_character,
    .ace-tm .ace_constant.ace_language,
    .ace-tm .ace_constant.ace_numeric,
    .ace-tm .ace_constant.ace_other {
        color: #AE81FF
    }

    .ace-tm .ace_invalid {
        color: #F8F8F0;
        background-color: #F92672
    }

    .ace-tm .ace_invalid.ace_deprecated {
        color: #F8F8F0;
        background-color: #AE81FF
    }

    .ace-tm .ace_support.ace_constant,
    .ace-tm .ace_support.ace_function {
        color: #66D9EF
    }

    .ace-tm .ace_fold {
        background-color: #A6E22E;
        border-color: #F8F8F2
    }

    .ace-tm .ace_storage.ace_type,
    .ace-tm .ace_support.ace_class,
    .ace-tm .ace_support.ace_type {
        color: #66D9EF
    }

    .ace-tm .ace_entity.ace_name.ace_function,
    .ace-tm .ace_entity.ace_other,
    .ace-tm .ace_entity.ace_other.ace_attribute-name,
    .ace-tm .ace_variable {
        color: #A6E22E
    }

    .ace-tm .ace_variable.ace_parameter {
        color: #FD971F
    }

    .ace-tm .ace_string {
        color: #E6DB74
    }

    .ace-tm .ace_keyword.ace_operator {
    	color: #949eaa;
    }

    .ace-tm .ace_comment {
        color: #949eaa;
    }

    .ace-tm .ace_indent-guide {
        background: none;
        border-right: solid 1px @indent-guide;
        margin-left: -1px;
    }

}

/* ===========================
        Lua debug console
   =========================== */

// console input textarea
#mw-scribunto-input {
    background-color: @ooui-input;
    border: 1px solid @ooui-input-border;
}

.mw-scribunto {

    &-console-fieldset {
        color: @dark-text;
        background-color: @ooui-interface;
        border-color: @ooui-interface-border;
    }

    // remove white backgrounds
    &-normalOutput,
    &-print,
    &-error,
    &-propList,
    &-message,
    &-tabcomplete {
        background: none;
    }

    // console input and echoes
    &-input {
        color: @curious-blue;
    }

    &-normalOutput {
        color: @dark-text;
    }

    &-print {
        color: @supernova;
    }

    &-error {
        color: @flamingo;
    }

    &-propList,
    &-message {
        color: @lima;
    }

    &-tabcomplete {
        color: @medium-purple;
    }

    &-clear {
        color: @flamingo;
        border-bottom-color: @flamingo;
    }

}