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

}