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

     1  .table {
     2    width: 100%;
     3    table-layout: fixed;
     4  
     5    thead th {
     6      &.sortable {
     7        cursor: pointer;
     8        user-select: none;
     9      }
    10  
    11      .sortArrow {
    12        display: inline-block;
    13        border: 5px solid transparent;
    14        border-top-color: var(--ps-ui-foreground-text);
    15        top: 3px;
    16        position: relative;
    17        margin-left: 7px;
    18  
    19        &.asc {
    20          border-top-color: transparent;
    21          border-bottom-color: var(--ps-button-switch-bg-highlight);
    22          top: -2px;
    23        }
    24  
    25        &.desc {
    26          border-top-color: var(--ps-button-switch-bg-highlight);
    27          top: 3px;
    28        }
    29      }
    30    }
    31  
    32    thead,
    33    tbody tr:nth-child(2n) {
    34      background-color: var(--ps-neutral-9);
    35    }
    36  
    37    tbody {
    38      cursor: pointer;
    39  
    40      td {
    41        font-weight: initial;
    42        text-align: center;
    43      }
    44  
    45      tr {
    46        &.isRowSelected {
    47          cursor: pointer;
    48          background: var(--ps-table-highlight-row-bg) !important;
    49          color: var(--ps-table-highlight-row-text);
    50        }
    51  
    52        &.isRowDisabled td {
    53          text-decoration: line-through;
    54        }
    55  
    56        &:not(.isRowSelected) {
    57          &:hover {
    58            cursor: pointer;
    59            color: var(--ps-neutral-2);
    60            background: var(--ps-ui-element-bg-highlight);
    61          }
    62        }
    63      }
    64  
    65      td,
    66      th {
    67        border: 1px solid var(--ps-ui-border);
    68        padding: 4px 10px;
    69        width: 10%;
    70      }
    71    }
    72  }
    73  
    74  .loadingSpinner {
    75    text-align: center;
    76    margin-top: 50px;
    77  }
    78  
    79  .pagination {
    80    display: flex;
    81    justify-content: flex-end;
    82  }