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

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .service-list {
     7    .title {
     8      .back-link {
     9        text-decoration: none;
    10        color: #363636;
    11        position: relative;
    12        top: 4px;
    13      }
    14    }
    15    td svg {
    16      position: relative;
    17      top: 3px;
    18      margin-right: 5px;
    19    }
    20  }
    21  
    22  .service-sidebar {
    23    .aggregate-status {
    24      font-size: 1rem;
    25      font-weight: normal;
    26      line-height: 16px;
    27      & > svg {
    28        position: relative;
    29        top: 3px;
    30        margin-left: 5px;
    31      }
    32    }
    33    td.name {
    34      width: 100px;
    35      span {
    36        display: block;
    37        white-space: nowrap;
    38        overflow: hidden;
    39        text-overflow: ellipsis;
    40        max-width: 100px;
    41      }
    42    }
    43    td.status {
    44      span {
    45        display: inline-grid;
    46        grid-auto-flow: column;
    47        line-height: 16px;
    48        gap: 0.25rem;
    49      }
    50    }
    51  
    52    td.service-output {
    53      padding: 0;
    54      code {
    55        padding: 1.25em 1.5em;
    56        max-height: 100px;
    57        overflow: auto;
    58        display: block;
    59      }
    60    }
    61  
    62    .inline-definitions {
    63      display: grid;
    64      grid-template-columns: auto 1fr;
    65    }
    66  }
    67  
    68  .allocation-services-table {
    69    td svg {
    70      position: relative;
    71      top: 3px;
    72      margin-right: 5px;
    73    }
    74  }
    75  
    76  table.health-checks {
    77    table-layout: fixed;
    78    th.name {
    79      width: 20%;
    80    }
    81    th.status {
    82      width: 15%;
    83    }
    84    th.output {
    85      width: 65%;
    86    }
    87    tbody tr td {
    88      border-bottom-width: 0;
    89    }
    90  
    91    .service-status-indicators {
    92      td {
    93        border-bottom-width: 1px;
    94        text-align: right;
    95        & > div {
    96          display: grid;
    97          grid-auto-flow: column;
    98          justify-content: end;
    99          gap: 2px;
   100          width: calc(
   101            750px - 3rem - 50px
   102          ); //Sidebar width - padding - table padding
   103          height: 12px;
   104          padding-top: 30px;
   105          margin-top: -20px;
   106          padding-bottom: 20px;
   107          margin-bottom: -10px;
   108          overflow: hidden;
   109          box-sizing: content-box;
   110          .service-status-indicator {
   111            width: 12px;
   112            height: 12px;
   113            display: block;
   114            position: relative;
   115            line-height: 10px;
   116            text-align: center;
   117            color: white;
   118            border-radius: 2px;
   119            &.status-success {
   120              background-color: $nomad-green;
   121            }
   122            &.status-failure {
   123              background-color: $red;
   124            }
   125  
   126            & > .timestamp {
   127              color: black;
   128              font-size: 0.75rem;
   129              position: absolute;
   130              top: 100%;
   131              text-align: center;
   132              white-space: nowrap;
   133              left: 50%;
   134              width: 100px;
   135              margin-left: -50px;
   136              margin-top: calc(50% + 2px);
   137  
   138              & > span {
   139                visibility: hidden;
   140              }
   141  
   142              &:before {
   143                display: none;
   144                border-left: 1px solid $grey-blue;
   145                content: '';
   146                position: absolute;
   147                left: 50%;
   148                height: 50%;
   149                top: -50%;
   150              }
   151  
   152              &:after {
   153                display: block;
   154                width: calc(12px + 2px); // account for grid.gap
   155                border-top: 1px solid $grey-blue;
   156                content: '';
   157                position: absolute;
   158                left: calc(50% - 1px);
   159                margin-left: -6px;
   160                top: calc(-50% - 1px);
   161              }
   162            }
   163  
   164            &:nth-child(8n + 1) > .timestamp {
   165              &:before {
   166                display: block;
   167              }
   168              & > span {
   169                visibility: visible;
   170              }
   171              & > span {
   172                visibility: visible;
   173              }
   174            }
   175          }
   176        }
   177      }
   178    }
   179  }