cloudbeaver/webapp/packages/plugin-codemirror/src/theme/_base-code-editor.scss

/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2021 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */

@mixin base-code-editor() {
  .material.CodeMirror-hints {
    border: none;
    border-radius: 0;
    padding: 0;
    @include mdc-theme-prop(background-color, surface, false);
    @include mdc-theme-prop(color, on-surface, false);
  }
  .material .CodeMirror-hint {
    position: relative;
    border: none;
    border-radius: 0;
    padding: 0 8px;
    @include mdc-theme-prop(color, on-surface, false);

    &:hover:before {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.14;
      @include mdc-theme-prop(background-color, primary, false);
  }
  }
  .material .CodeMirror-hint-active {
    @include mdc-theme-prop(background-color, primary, false);
    @include mdc-theme-prop(color, on-primary, false);

    &:hover:before {
      display: none;
    }
  }

  .react-codemirror2 {
    height: 100%;
    flex: 1 auto;

    [use|readonly] .CodeMirror-cursors {
      display: none;
    }

    .cm-s-material.CodeMirror {
      height: 100%;
      @include mdc-theme-prop(background-color, surface, false);
      @include mdc-theme-prop(color, on-surface, false);
      // color: #EEFFFF;
    }

    .cm-s-material .CodeMirror-gutters {
      @include mdc-theme-prop(background, secondary, false);
      @include mdc-theme-prop(color, on-secondary, false);
      @include mdc-theme-prop(border-color, background, false);
      // color: #546E7A;
      // border: none;
    }

    .cm-s-material .CodeMirror-guttermarker,
    .cm-s-material .CodeMirror-guttermarker-subtle,
    .cm-s-material .CodeMirror-linenumber {
      @include mdc-theme-prop(color, on-secondary, false);
      // color: #546E7A;
    }

    .cm-s-material .CodeMirror-cursor {
      border-left: 1px solid $cursor;
    }

    .cm-s-material .CodeMirror-scrollbar-filler {
      @include mdc-theme-prop(background, secondary, false);
    }

    .cm-s-material :global(div).CodeMirror-selected {
      background: rgba(128, 203, 196, 0.2);
    }

    .cm-s-material.CodeMirror-focused :global(div).CodeMirror-selected {
      background: rgba(128, 203, 196, 0.2);
    }

    .CodeMirror :global(pre).CodeMirror-line,
    .CodeMirror :global(pre).CodeMirror-line-like {
      padding: 0 8px;
    }

    .cm-s-material .CodeMirror-line::selection,
    .cm-s-material .CodeMirror-line > :global(span)::selection,
    .cm-s-material .CodeMirror-line > :global(span) > :global(span)::selection {
      background: rgba(128, 203, 196, 0.2);
    }

    .cm-s-material .CodeMirror-line::-moz-selection,
    .cm-s-material .CodeMirror-line > :global(span)::-moz-selection,
    .cm-s-material .CodeMirror-line > :global(span) > :global(span)::-moz-selection {
      background: rgba(128, 203, 196, 0.2);
    }

    .cm-s-material .CodeMirror-activeline-background {
      background: rgba(0, 0, 0, 0.5);
    }

    .cm-s-material .cm-keyword {
      color: $keyword;
      font-weight: bold;
    }

    .cm-s-material .cm-operator {
      color: $operator;
    }

    .cm-s-material .cm-variable-2 {
      color: $variable-2;
    }

    .cm-s-material .cm-variable-3,
    .cm-s-material .cm-type {
      color: $variable-3;
    }

    .cm-s-material .cm-builtin {
      color: $builtin;
    }

    .cm-s-material .cm-atom {
      color: $atom;
    }

    .cm-s-material .cm-number {
      color: $number;
    }

    .cm-s-material .cm-def {
      color: $def;
    }

    .cm-s-material .cm-string {
      color: $string;
    }

    .cm-s-material .cm-string-2 {
      color: $string-2;
    }

    .cm-s-material .cm-comment {
      color: $comment;
    }

    .cm-s-material .cm-variable {
      color: $variable;
    }

    .cm-s-material .cm-tag {
      color: $tag;
    }

    .cm-s-material .cm-meta {
      color: $meta;
    }

    .cm-s-material .cm-attribute {
      color: $attribute;
    }

    .cm-s-material .cm-property {
      color: $property;
    }

    .cm-s-material .cm-qualifier {
      color: $qualifier;
    }

    .cm-s-material .cm-variable-3,
    .cm-s-material .cm-type {
      color: $variable-3;
    }

    .cm-s-material .cm-error {
      color: rgba(255, 255, 255, 1);
      background-color: $error;
    }

    .cm-s-material .CodeMirror-matchingbracket {
      text-decoration: underline;
      color: white !important;
    }

    .cm-s-material .active-query {
      background-color: $active-query;
    }
  }
}