github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/charts/colors.scss (about)

     1  $queued: $grey-lighter;
     2  $starting: $grey-lighter;
     3  $running: $primary;
     4  $complete: $nomad-green-dark;
     5  $failed: $danger;
     6  $lost: $dark;
     7  $not-scheduled: $blue-200;
     8  $degraded: $warning;
     9  $blocked: $danger;
    10  $canceled: $dark;
    11  
    12  .chart {
    13    .queued {
    14      fill: $queued;
    15    }
    16  
    17    .starting,
    18    .pending {
    19      .layer-0 {
    20        fill: $starting;
    21      }
    22  
    23      .layer-1 {
    24        fill: url(#diagonal-stripe-3);
    25        fill-opacity: 0.2;
    26      }
    27    }
    28  
    29    .running {
    30      fill: $running;
    31    }
    32  
    33    .complete {
    34      fill: $complete;
    35    }
    36  
    37    .failed {
    38      fill: $failed;
    39    }
    40  
    41    .lost {
    42      fill: $lost;
    43    }
    44  
    45    .not-scheduled {
    46      fill: $not-scheduled;
    47    }
    48  
    49    .degraded {
    50      fill: $degraded;
    51    }
    52  
    53    .unknown {
    54      fill: $unknown;
    55    }
    56  }
    57  
    58  .color-swatch {
    59    display: inline-block;
    60    height: 1rem;
    61    width: 1rem;
    62    margin-right: 0.25rem;
    63    vertical-align: middle;
    64    border-radius: $radius;
    65  
    66    &.is-wide {
    67      width: 2rem;
    68    }
    69  
    70    $color-sequence: $orange, $yellow, $green, $turquoise, $blue, $purple, $red;
    71    @for $i from 1 through length($color-sequence) {
    72      &.swatch-#{$i - 1} {
    73        background: nth($color-sequence, $i);
    74      }
    75    }
    76  
    77    @each $name, $scale in $chart-scales {
    78      &.swatch-#{$name} {
    79        background: nth($scale, -1);
    80      }
    81  
    82      @each $color in $scale {
    83        &.swatch-#{$name}-#{index($scale, $color)} {
    84          background: $color;
    85        }
    86      }
    87    }
    88  
    89    &.queued {
    90      box-shadow: inset 0 0 0 1px rgba($black, 0.3);
    91      background: $queued;
    92    }
    93  
    94    &.starting,
    95    &.pending {
    96      background: repeating-linear-gradient(
    97        -45deg,
    98        $starting,
    99        $starting 3px,
   100        darken($starting, 25%) 3px,
   101        darken($starting, 25%) 6px
   102      );
   103    }
   104  
   105    &.running {
   106      background: $running;
   107    }
   108  
   109    &.complete {
   110      background: $complete;
   111    }
   112  
   113    &.failed {
   114      background: $failed;
   115    }
   116  
   117    &.lost {
   118      background: $lost;
   119    }
   120  
   121    &.unknown {
   122      background: $unknown;
   123    }
   124  
   125    &.not-scheduled {
   126      background: $not-scheduled;
   127    }
   128  
   129    &.degraded {
   130      background: $degraded;
   131    }
   132  
   133    &.canceled {
   134      background: $canceled;
   135    }
   136  
   137    &.blocked {
   138      background: $blocked;
   139    }
   140  
   141    @each $name, $pair in $colors {
   142      $color: nth($pair, 1);
   143  
   144      &.is-#{$name} {
   145        background: $color;
   146      }
   147    }
   148  }