github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/pages/ServiceDiscovery.module.scss (about)

     1  $badge-info-background: #007bff;
     2  $badge-healthy-background: #2ecc40;
     3  $badge-error-background: #dc3545;
     4  $target-background: rgba(0, 0, 0, 0.3);
     5  
     6  .serviceDiscoveryApp {
     7    padding: 15px;
     8    min-height: calc(100% - 70px);
     9  
    10    .header {
    11      margin: 0 0 10px;
    12    }
    13  
    14    .collapsibleHeader {
    15      font-weight: bold;
    16      margin-bottom: 10px;
    17      cursor: pointer;
    18    }
    19    .collapsibleSection {
    20      margin: 10px 0;
    21      max-width: 100%;
    22      overflow: auto;
    23    }
    24    .target {
    25      width: 100%;
    26      grid-template-columns: 80px 1fr;
    27      color: white;
    28      padding: 10px;
    29      border-radius: 10px;
    30      column-gap: 10px;
    31      row-gap: 5px;
    32      height: fit-content;
    33      padding: 15px;
    34  
    35      th.tableCell {
    36        vertical-align: bottom;
    37        background-color: rgba(255, 255, 255, 0.05);
    38        padding-top: 15px;
    39        padding-bottom: 15px;
    40      }
    41      td.tableCell {
    42        vertical-align: top;
    43      }
    44    }
    45    tr:nth-child(2n) td {
    46      background-color: rgba(255, 255, 255, 0.05);
    47    }
    48    .buttonGroup {
    49      margin: 10px 0 20px;
    50      button {
    51        border: none;
    52        border-right: 1px solid darken(#007bff, 20%);
    53      }
    54      button:last-child {
    55        border-right: none;
    56      }
    57    }
    58    .badge {
    59      font-size: 12px;
    60      display: inline-flex;
    61      font-weight: bold;
    62      color: white;
    63      padding: 1px 5px;
    64      line-height: 1.5;
    65      border-radius: 5px;
    66      margin: 0px 3px 3px 0;
    67      white-space: pre-wrap;
    68      user-select: all;
    69      &.info {
    70        background: $badge-info-background;
    71      }
    72      &.healthy {
    73        background: $badge-healthy-background;
    74      }
    75      &.error {
    76        background: $badge-error-background;
    77      }
    78    }
    79    .link {
    80      color: $badge-info-background;
    81    }
    82  }
    83  
    84  .tableCell {
    85    border: 1px solid rgba(255, 255, 255, 0.3);
    86    padding: 5px;
    87    text-align: left;
    88    line-height: 1.25;
    89  
    90    &.url {
    91      min-width: 100px;
    92    }
    93    &.health {
    94      min-width: 64px;
    95    }
    96    &.dicoveredLabels {
    97      width: auto;
    98    }
    99    &.labels {
   100      width: auto;
   101    }
   102    &.lastScrape {
   103      min-width: 60px;
   104    }
   105    &.scrapeDuration {
   106      min-width: 77px;
   107    }
   108    &.error {
   109      min-width: 100px;
   110    }
   111  }