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

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