github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/assets/css/colors.less (about)

     1  @import (reference) "_vars.less";
     2  
     3  .steps .nest.even { background: @grey90; }
     4  
     5  #builds { background: @grey100; }
     6  .builds-list { background: @grey100; }
     7  .build-step .header { background: @grey100; }
     8  
     9  .top-bar { background: @grey100; }
    10  
    11  .steps .nest.odd { background: @grey80; }
    12  
    13  .build-action { background-color: transparent; }
    14  .build-action i { color: @grey20; }
    15  .build-action:hover i { background: @grey80; }
    16  .build-action:active i { background: @grey50; }
    17  .build-action:focus i { background: @grey50; }
    18  
    19  .build-action-abort i { color: @base08; }
    20  .build-action-abort:hover i { background: @base08; color: @grey20; }
    21  .build-action-abort:active i { color: @grey20; background: @base0F; }
    22  .build-action-abort:focus i { background: @base0F; }
    23  
    24  .build-step i.failed    { color: @grey20; background: @base08; }
    25  .build-step i.succeeded { color: @grey20; background: @base0B; }
    26  .build-step i.errored   { color: @grey20; background: @base09; }
    27  
    28  // combined statuses go first so previous status background wins
    29  .pending { background: @grey-primary; }
    30  .started { background: @base0A; }
    31  .no-builds { background: @grey70; }
    32  .succeeded { background: @green-primary; }
    33  .failed { background: @red-primary; }
    34  .errored { background: @amber-primary; }
    35  .aborted { background: @brown-primary; }
    36  .paused { background: @blue-primary; }
    37  
    38  .build-step .header i.pending { color: @grey50; background: transparent; }
    39  .build-step .header i.started { color: @base0A; background: transparent; }
    40  .build-step .header i.succeeded { color: @base0B; background: transparent; }
    41  .build-step .header i.failed { color: @base08; background: transparent; }
    42  .build-step .header i.errored { color: @base09; background: transparent; }
    43  .build-step .header i.aborted { color: @base0F; background: transparent; }
    44  
    45  .fail-triangle {
    46    stroke: @grey90;
    47    stroke-linecap: round;
    48    stroke-linejoin: round;
    49    fill: @base08;
    50  }
    51  
    52  .fail-triangle-outline {
    53    fill: @base08;
    54    opacity: 0.7;
    55  }
    56  
    57  span.error { color: @base08; }
    58  
    59  .build-step .header .dictionary { color: @grey10; }
    60  
    61  .build-header .build-duration { color: @grey20; }
    62  .pagination-header h1 { color: @grey20; }
    63  
    64  .builds-list li a { color: @grey20; }
    65  #builds li a { color: @grey20; }
    66  .groups li a { color: @grey20; }
    67  .groups li.active a { background: @base0G; }
    68  #cli-downloads a { color: @grey20; }
    69  
    70  .job-animation-node .animation,
    71  .legend dt.started,
    72  .legend dt.pending,
    73  .legend dt.failed {
    74    border-radius: 1px;
    75  }
    76  
    77  .legend dt.started {
    78    .ripple-animation("small-started-ripple-@{theme}", 2px, @base0A);
    79  
    80    background: transparent;
    81  }
    82  
    83  .legend dt.pending {
    84    .pending-outline(2px, 3px);
    85  
    86    background: transparent;
    87  }
    88  
    89  .legend dt.failed {
    90    .failed-outline(2px, 3px);
    91  }
    92  
    93  .job-animation-node {
    94    &.failed  .animation-xlarge{.failed-outline(24px, 36px);}
    95    &.pending .animation-xlarge{.pending-outline(24px, 36px);}
    96    &.started .animation-xlarge{.ripple-animation("xlarge-started-ripples-@{theme}", 20px, @base0A);}
    97  
    98    &.failed  .animation-large{.failed-outline(18px, 27px);}
    99    &.pending .animation-large{.pending-outline(18px, 27px);}
   100    &.started .animation-large{.ripple-animation("large-started-ripples-@{theme}", 15px, @base0A);}
   101  
   102    &.failed  .animation-medium{.failed-outline(8px, 12px);}
   103    &.pending .animation-medium{.pending-outline(8px, 12px);}
   104    &.started .animation-medium{.ripple-animation("medium-started-ripples-@{theme}", 7px, @base0A);}
   105  
   106    &.failed  .animation-small{.failed-outline(4px, 6px);}
   107    &.pending .animation-small{.pending-outline(4px, 6px);}
   108    &.started .animation-small{.ripple-animation("small-started-ripples-@{theme}", 3px, @base0A);}
   109  }
   110  
   111  .halo-outline(@grey-radius, @color-radius, @color) {
   112    box-shadow: 0 0 0 @grey-radius @grey80, 0 0 0 @grey-radius + @color-radius fade(@color, 70%);
   113  }
   114  
   115  .failed-outline(@grey-radius, @red-radius) {
   116    .halo-outline(@grey-radius, @red-radius, @base08);
   117  }
   118  
   119  .pending-outline(@grey-radius, @yellow-radius) {
   120    .halo-outline(@grey-radius, @yellow-radius, @grey50);
   121  }
   122  
   123  .ripple-animation(@name, @ripple-factor, @ripple-color) {
   124    -webkit-animation: @name 1s linear infinite;
   125    animation: @name 1s linear infinite;
   126  
   127    @-webkit-keyframes @name {
   128      0% {
   129        box-shadow: 0 0 0 -@ripple-factor @grey80, 0 0 0 0 @ripple-color, 0 0 0 @ripple-factor @grey80, 0 0 0 @ripple-factor * 2 @ripple-color;
   130      }
   131  
   132      50% {
   133        box-shadow: 0 0 0 0 @grey80, 0 0 0 @ripple-factor @ripple-color, 0 0 0 @ripple-factor * 2  @grey80, 0 0 0 @ripple-factor * 3 fade(@ripple-color, 50%);
   134      }
   135  
   136      100% {
   137        box-shadow: 0 0 0 @ripple-factor @grey80, 0 0 0 @ripple-factor * 2  @ripple-color, 0 0 0 @ripple-factor * 3 @grey80, 0 0 0 @ripple-factor * 4 transparent;
   138      }
   139    }
   140  
   141    @keyframes @name {
   142      0% {
   143        box-shadow: 0 0 0 -@ripple-factor @grey80, 0 0 0 0 @ripple-color, 0 0 0 @ripple-factor @grey80, 0 0 0 @ripple-factor * 2 @ripple-color;
   144      }
   145  
   146      50% {
   147        box-shadow: 0 0 0 0 @grey80, 0 0 0 @ripple-factor @ripple-color, 0 0 0 @ripple-factor * 2  @grey80, 0 0 0 @ripple-factor * 3 fade(@ripple-color, 50%);
   148      }
   149  
   150      100% {
   151        box-shadow: 0 0 0 @ripple-factor @grey80, 0 0 0 @ripple-factor * 2  @ripple-color, 0 0 0 @ripple-factor * 3 @grey80, 0 0 0 @ripple-factor * 4 transparent;
   152      }
   153    }
   154  }
   155  
   156  .build-number {
   157    font-size: 2em;
   158    color: @grey20;
   159    padding: 5px;
   160    text-align: center;
   161    border: 5px solid @grey100;
   162    text-decoration: none;
   163    font-weight: bold;
   164  }
   165  
   166  .build-one-off {
   167    background-color: @grey70;
   168  }
   169  
   170  .build-action.btn-pause i {
   171    font-size: 23px;
   172  }
   173  
   174  .build-login input { background: @grey90; color: @grey10; }
   175  .build-login input:hover { background: @grey50; }