github.com/hernad/nomad@v1.6.112/ui/app/styles/components/codemirror.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  $dark-bright: lighten($dark, 15%);
     7  
     8  .CodeMirror {
     9    height: auto;
    10  }
    11  
    12  .CodeMirror-scroll {
    13    min-height: 500px;
    14  }
    15  
    16  .cm-s-hashi,
    17  .cm-s-hashi-read-only {
    18    &.CodeMirror {
    19      background-color: $dark-3;
    20      color: $grey-blue;
    21      border: none;
    22      font-family: $family-monospace;
    23      -webkit-font-smoothing: auto;
    24      line-height: 1.4;
    25    }
    26  
    27    .CodeMirror-gutters {
    28      background-color: $dark-2;
    29      border: none;
    30    }
    31  
    32    .CodeMirror-cursor {
    33      border-left: solid thin $white-ter;
    34    }
    35  
    36    .CodeMirror-linenumber {
    37      color: $dark-bright;
    38    }
    39  
    40    &.CodeMirror-focused div.CodeMirror-selected {
    41      background: rgba(255, 255, 255, 0.1);
    42    }
    43  
    44    .CodeMirror-line::selection,
    45    .CodeMirror-line > span::selection,
    46    .CodeMirror-line > span > span::selection {
    47      background: rgba(255, 255, 255, 0.1);
    48    }
    49  
    50    span.cm-comment {
    51      color: $grey;
    52    }
    53  
    54    span.cm-string,
    55    span.cm-string-2 {
    56      color: $nomad-green;
    57    }
    58  
    59    span.cm-number {
    60      color: $serf-red;
    61    }
    62  
    63    span.cm-variable {
    64      color: $packer-blue;
    65    }
    66  
    67    span.cm-variable-2 {
    68      color: $packer-blue;
    69    }
    70  
    71    span.cm-def {
    72      color: $nomad-green;
    73    }
    74  
    75    span.cm-operator {
    76      color: $grey;
    77    }
    78    span.cm-keyword {
    79      color: $yellow;
    80    }
    81  
    82    span.cm-atom {
    83      color: $terraform-purple-bright;
    84    }
    85  
    86    span.cm-meta {
    87      color: $nomad-green;
    88    }
    89  
    90    span.cm-tag {
    91      color: $nomad-green;
    92    }
    93  
    94    span.cm-attribute {
    95      color: $consul-pink;
    96    }
    97  
    98    span.cm-qualifier {
    99      color: $consul-pink;
   100    }
   101  
   102    span.cm-property {
   103      color: $nomad-green;
   104    }
   105  
   106    span.cm-variable-3 {
   107      color: $consul-pink;
   108    }
   109  
   110    span.cm-builtin {
   111      color: $consul-pink;
   112    }
   113  
   114    .CodeMirror-activeline-background {
   115      background: $black-ter;
   116    }
   117  
   118    .CodeMirror-matchingbracket {
   119      text-decoration: underline;
   120      color: $white;
   121    }
   122  }
   123  
   124  .cm-s-auto-height.CodeMirror {
   125    height: auto;
   126  }
   127  
   128  .cm-s-hashi-read-only {
   129    &.CodeMirror {
   130      background-color: $dark-2;
   131    }
   132  
   133    .CodeMirror-gutters {
   134      background-color: $dark-2;
   135    }
   136  }
   137  
   138  header.run-job-header {
   139    display: grid;
   140    grid-template-columns: 1fr auto;
   141    margin-bottom: 2rem;
   142    gap: 0 1rem;
   143    align-items: end;
   144    & > h1 {
   145      grid-column: -1 / 1;
   146    }
   147  }
   148  
   149  .job-spec-upload {
   150    .button {
   151      cursor: pointer;
   152    }
   153    input {
   154      width: 100%;
   155      height: 100%;
   156      position: absolute;
   157      display: none;
   158    }
   159  }
   160  
   161  .buttonset {
   162    display: flex;
   163    justify-content: space-between;
   164  
   165    &.sticky {
   166      position: sticky;
   167      bottom: 0;
   168      background: white;
   169      padding: 0.5rem 0;
   170  
   171      &.pull-left {
   172        justify-content: flex-start;
   173      }
   174    }
   175  }
   176  
   177  .job-definition-select {
   178    border: 1px solid $grey-blue;
   179    background: rgba(0, 0, 0, 0.05);
   180    border-radius: 2px;
   181    display: grid;
   182    gap: 0.5rem;
   183    grid-template-columns: 1fr 1fr;
   184    padding: 0.25rem 0.5rem;
   185    margin: 0rem 1rem;
   186  
   187    &.disabled {
   188      opacity: 0.5;
   189      pointer-events: none;
   190    }
   191  
   192    button {
   193      height: auto;
   194      padding: 0 0.5rem;
   195      background: transparent;
   196      transition: 0.1s;
   197  
   198      &:hover {
   199        background: rgba(255, 255, 255, 0.5);
   200      }
   201  
   202      &.is-active {
   203        background: $white;
   204      }
   205    }
   206  }
   207  
   208  .job-editor-alerts {
   209    display: grid;
   210    grid-template-rows: repeat(minmax(200px, 1fr), auto-fit);
   211    gap: 10px;
   212    margin-bottom: 10px;
   213  }