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 -----//

// define the following commented vars in the file that is importing /aceeditor.less
//@code-bg:               ;
//@gutter-bg:             ;
@gutter-active-line-bg: lighten(@gutter-bg, 10%);
//@gutter-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
& .ve-ui-mwAceEditorWidget {

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

    .ace-tm .ace_print-margin {
        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 {
        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: #d8d8d2;
    }

    .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;
    }

}