go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/frontend/static/common/css/timeline.css (about)

     1  /* Copyright 2022 The LUCI Authors.
     2   *
     3   * Licensed under the Apache License, Version 2.0 (the "License");
     4   * you may not use this file except in compliance with the License.
     5   * You may obtain a copy of the License at
     6   *
     7   *      http://www.apache.org/licenses/LICENSE-2.0
     8   *
     9   * Unless required by applicable law or agreed to in writing, software
    10   * distributed under the License is distributed on an "AS IS" BASIS,
    11   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12   * See the License for the specific language governing permissions and
    13   * limitations under the License.
    14   */
    15  
    16  /* Makes the group title take up the full width. */
    17  .vis-labelset .vis-label .vis-inner {
    18    display: block;
    19  }
    20  
    21  /*
    22    Makes items labels display fully even if time range is too small
    23    to contain it
    24  */
    25  .vis-item .vis-item-overflow {
    26    overflow: visible;
    27    cursor: pointer;
    28  }
    29  
    30  .group-title {
    31    font-weight: bold;
    32    padding: 5px;
    33  }
    34  
    35  /*
    36    Limit the group step title width to 50em, otherwise the items may
    37    be pushed off the right side of the screen and be inaccessible.
    38  */
    39  .group-title > .title {
    40    display: inline-block;
    41    white-space: nowrap;
    42    max-width: 50em;
    43    overflow: hidden;
    44    text-overflow: ellipsis;
    45  }
    46  
    47  /*
    48    TODO(dburger): these status styles could come from default.css but are
    49    apparently overridden by styles from .vis-item. This could likely be
    50    fixed by tweaking the style in default.css to get higher specificity.
    51  
    52    In the following the second selector with the "a" tag
    53    takes care of a specificity problem where jquery's
    54    .ui-widget-content a {color: #333;} ends up winning for a tags nested in
    55    a div with one of the following classes as is done on the "Results"
    56    time list that gets the .ui-widget-content from being inside jquery
    57    tabs on the timeline page.
    58  */
    59  .status-EXPIRED, .status-EXPIRED a {
    60    color: #FFFFFF;
    61    background-color: #ac39ac;
    62    border-color: #ACA0B3;
    63  }
    64  
    65  .status-EXCEPTION, .status-EXCEPTION a {
    66    color: #FFFFFF;
    67    background-color: #c6c;
    68    border-color: #ACA0B3;
    69  }
    70  
    71  .status-INFRA_FAILURE, .status-INFRA_FAILURE a {
    72    color: #FFFFFF;
    73    background-color: #c6c;
    74    border-color: #ACA0B3;
    75  }
    76  
    77  .status-WARNING, .status-WARNING a {
    78    color: #FFFFFF;
    79    background-color: #fa3;
    80    border-color: #C29D46;
    81  }
    82  
    83  .status-NOT_RUN, .status-NOT_RUN a {
    84    color: #000;
    85    background-color: #ccc;
    86    border-color: #ccc;
    87  }
    88  
    89  .status-RUNNING, .status-RUNNING a {
    90    color: #000;
    91    background-color: #fd3;
    92    border-color: #C5C56D;
    93  }
    94  
    95  .status-FAILURE, .status-FAILURE a {
    96    color: #000;
    97    background-color: #e88;
    98    border-color: #A77272;
    99    border-style: solid;
   100  }
   101  
   102  .status-CANCELED, .status-CANCELED a {
   103    color: #000;
   104    background-color: #8ef;
   105    border-color: #00d8fc;
   106    border-style: solid;
   107  }
   108  
   109  .status-SUCCESS, .status-SUCCESS a {
   110    color: #000;
   111    background-color: #8d4;
   112    border-color: #4F8530;
   113  }
   114  
   115  /*
   116    Positioned absolutely so that the timeline renders directly over it
   117    and does not jump when we remove this from the page.
   118  */
   119  #timeline-rendering {
   120    position: absolute;
   121  }