github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/code-editor/skin.scss (about)

     1  $syntax-light-grey: #dde3e7;
     2  $syntax-light-gray: #a4a4a4;
     3  $syntax-light-grey-blue: #6c7b81;
     4  $syntax-dark-grey: #788290;
     5  $syntax-faded-gray: #eaeaea;
     6  // Product colors
     7  $syntax-atlas: #127eff;
     8  $syntax-vagrant: #2f88f7;
     9  $syntax-consul: #69499a;
    10  $syntax-terraform: #822ff7;
    11  $syntax-serf: #dd4e58;
    12  $syntax-packer: #1ddba3;
    13  
    14  // Our colors
    15  $syntax-gray: lighten($ui-black, 89%);
    16  $syntax-red: #ff3d3d;
    17  $syntax-green: #39b54a;
    18  $syntax-dark-gray: #535f73;
    19  
    20  $syntax-gutter-grey: #2a2f36;
    21  $syntax-yellow: $ui-yellow-500;
    22  .CodeMirror {
    23    max-width: 1150px;
    24    min-height: 300px;
    25    height: auto;
    26    /* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */
    27    padding-bottom: 20px;
    28  }
    29  .CodeMirror-scroll {
    30    overflow-x: hidden !important;
    31  }
    32  .CodeMirror-lint-tooltip {
    33    background-color: #f9f9fa;
    34    border: 1px solid $syntax-light-gray;
    35    border-radius: 0;
    36    color: lighten($ui-black, 13%);
    37    font-family: $typo-family-mono;
    38    font-size: 13px;
    39    padding: 7px 8px 9px;
    40  }
    41  
    42  .cm-s-hashi {
    43    &.CodeMirror {
    44      width: 100%;
    45      background-color: $ui-black !important;
    46      color: #cfd2d1 !important;
    47      border: none;
    48      font-family: $typo-family-mono;
    49      -webkit-font-smoothing: auto;
    50      line-height: 1.4;
    51    }
    52  
    53    .CodeMirror-gutters {
    54      color: $syntax-dark-grey;
    55      background-color: $syntax-gutter-grey;
    56      border: none;
    57    }
    58  
    59    .CodeMirror-cursor {
    60      border-left: solid thin #f8f8f0;
    61    }
    62  
    63    .CodeMirror-linenumber {
    64      color: #6d8a88;
    65    }
    66  
    67    &.CodeMirror-focused div.CodeMirror-selected {
    68      background: rgb(33, 66, 131);
    69    }
    70  
    71    .CodeMirror-line::selection,
    72    .CodeMirror-line > span::selection,
    73    .CodeMirror-line > span > span::selection {
    74      background: rgb(33, 66, 131);
    75    }
    76  
    77    .CodeMirror-line::-moz-selection,
    78    .CodeMirror-line > span::-moz-selection,
    79    .CodeMirror-line > span > span::-moz-selection {
    80      background: rgba(255, 255, 255, 0.1);
    81    }
    82  
    83    span.cm-comment {
    84      color: $syntax-light-grey;
    85    }
    86  
    87    span.cm-string,
    88    span.cm-string-2 {
    89      color: $syntax-packer;
    90    }
    91  
    92    span.cm-number {
    93      color: $syntax-serf;
    94    }
    95  
    96    span.cm-variable {
    97      color: lighten($syntax-consul, 20%);
    98    }
    99  
   100    span.cm-variable-2 {
   101      color: lighten($syntax-consul, 20%);
   102    }
   103  
   104    span.cm-def {
   105      color: $syntax-packer;
   106    }
   107  
   108    span.cm-operator {
   109      color: $syntax-gray;
   110    }
   111    span.cm-keyword {
   112      color: $syntax-yellow;
   113    }
   114  
   115    span.cm-atom {
   116      color: $syntax-serf;
   117    }
   118  
   119    span.cm-meta {
   120      color: $syntax-packer;
   121    }
   122  
   123    span.cm-tag {
   124      color: $syntax-packer;
   125    }
   126  
   127    span.cm-attribute {
   128      color: #9fca56;
   129    }
   130  
   131    span.cm-qualifier {
   132      color: #9fca56;
   133    }
   134  
   135    span.cm-property {
   136      color: lighten($syntax-consul, 20%);
   137    }
   138  
   139    span.cm-variable-3 {
   140      color: #9fca56;
   141    }
   142  
   143    span.cm-builtin {
   144      color: #9fca56;
   145    }
   146  
   147    .CodeMirror-activeline-background {
   148      background: #101213;
   149    }
   150  
   151    .CodeMirror-matchingbracket {
   152      text-decoration: underline;
   153      color: $ui-white !important;
   154    }
   155  }
   156  
   157  .readonly-codemirror {
   158    .CodeMirror-cursors {
   159      display: none;
   160    }
   161  
   162    .cm-s-hashi {
   163      span {
   164        color: $syntax-light-grey;
   165      }
   166  
   167      span.cm-string,
   168      span.cm-string-2 {
   169        color: $syntax-faded-gray;
   170      }
   171  
   172      span.cm-number {
   173        color: lighten($syntax-dark-gray, 30%);
   174      }
   175  
   176      span.cm-property {
   177        color: $ui-white;
   178      }
   179  
   180      span.cm-variable-2 {
   181        color: $syntax-light-grey-blue;
   182      }
   183    }
   184  }