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

     1  $pieChartWidth: 300px;
     2  
     3  .tagExplorerView {
     4    .header {
     5      display: flex;
     6      align-items: center;
     7      margin: 0 10px 10px;
     8  
     9      .notSelectedTagDropdown {
    10        border-color: var(--ps-selected-app);
    11        color: var(--ps-selected-app);
    12      }
    13  
    14      .whereSelectButton {
    15        flex-shrink: 1;
    16        text-align: left;
    17      }
    18    }
    19  
    20    .timelineWrapper,
    21    .flamegraphWrapper {
    22      min-height: 125px;
    23  
    24      span[role='progressbar'] {
    25        display: inline-block;
    26        margin-top: 50px;
    27      }
    28    }
    29  
    30    .loaderContainer {
    31      text-align: center;
    32    }
    33  
    34    .tableDescription {
    35      display: flex;
    36      justify-content: flex-end;
    37      margin: 0 0 10px 10px;
    38    }
    39  
    40    .title {
    41      display: inline-flex;
    42      font-weight: 500;
    43      font-size: 18px;
    44      margin-right: 5px;
    45      flex-shrink: 0;
    46    }
    47  
    48    .buttons {
    49      position: relative;
    50  
    51      a {
    52        cursor: pointer;
    53        padding: 8px 6px;
    54        margin-left: 5px;
    55        text-decoration: none;
    56        border: 1px solid var(--ps-ui-border);
    57        color: var(--ps-neutral-2);
    58        background-color: var(--ps-ui-element-bg-primary);
    59        border-radius: 4px;
    60  
    61        &:hover {
    62          background-color: var(--ps-ui-element-bg-highlight);
    63        }
    64      }
    65    }
    66  
    67    .queryGrouppedBy {
    68      @extend .query;
    69  
    70      flex-shrink: 0;
    71    }
    72  
    73    .selectName {
    74      font-weight: 500;
    75      color: var(--ps-right-click-info);
    76      margin-right: 5px;
    77      flex-shrink: 0;
    78    }
    79  
    80    .query {
    81      display: flex;
    82      align-items: center;
    83    }
    84  
    85    .tagExplorerTable {
    86      width: 100%;
    87      font-variant-numeric: lining-nums tabular-nums;
    88  
    89      thead,
    90      tbody tr:nth-child(2n):not(:hover) {
    91        background-color: var(--ps-neutral-9);
    92      }
    93  
    94      tbody {
    95        cursor: pointer;
    96  
    97        td {
    98          font-weight: initial;
    99          text-align: left;
   100          font-family: monospace;
   101        }
   102  
   103        tr.activeTagRow {
   104          background-color: var(--ps-green-highlight);
   105          color: var(--ps-tooltip-text);
   106        }
   107  
   108        .tagName {
   109          display: flex;
   110          align-items: center;
   111          flex-wrap: nowrap;
   112          flex-direction: row;
   113  
   114          .tagColor {
   115            flex-shrink: 0;
   116            display: inline-block;
   117            height: 10px;
   118            width: 10px;
   119            border-radius: 2px;
   120            margin-right: 10px;
   121          }
   122  
   123          .bold {
   124            font-weight: bold;
   125            white-space: nowrap;
   126          }
   127  
   128          .label {
   129            text-align: left;
   130          }
   131        }
   132      }
   133  
   134      td,
   135      th {
   136        border: 1px solid var(--ps-ui-border);
   137        padding: 4px 10px;
   138        width: 10%;
   139      }
   140    }
   141  }
   142  
   143  .statisticsBox {
   144    display: flex;
   145    flex-direction: row;
   146    justify-content: space-between;
   147  }
   148  
   149  .tableWrapper {
   150    width: calc(100% - ($pieChartWidth + 10px));
   151  }
   152  
   153  .pieChartWrapper {
   154    width: $pieChartWidth;
   155    display: flex;
   156    align-items: flex-start;
   157    justify-content: center;
   158    padding-top: 47px;
   159  }