github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/sass/common.scss (about)

     1  @use './mixins/outline' as *;
     2  @import './variables.scss';
     3  
     4  pre,
     5  code,
     6  tt {
     7    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
     8    font-size: 14px;
     9  }
    10  
    11  tt {
    12    border-radius: 3px;
    13    border: 1px solidver(--ps-gray-light-4);
    14    padding: 2px 4px;
    15    background-color: var(--ps-ui-foreground-text);
    16  }
    17  
    18  .navbar {
    19    display: flex;
    20    height: 60px;
    21    align-items: center;
    22  }
    23  
    24  .navbar {
    25    .logo {
    26      margin: 0;
    27      padding: 0;
    28      font-weight: 400;
    29      background-size: 40px 40px;
    30      background-position: 0px 8px;
    31      background-repeat: no-repeat;
    32    }
    33  
    34    .logo::after {
    35      content: 'Pyroscope';
    36      font-weight: 400;
    37      padding-left: 44px;
    38      font-size: 25px;
    39      vertical-align: text-top;
    40    }
    41  }
    42  
    43  .flamegraph-table {
    44    width: 100%;
    45    font-size: 14px;
    46    border: 1px solid var(--ps-ui-border);
    47  
    48    thead th {
    49      color: var(--ps-neutral-2);
    50    }
    51  
    52    th,
    53    td {
    54      color: var(--ps-neutral-2);
    55      text-align: right;
    56      padding: 0px 10px;
    57  
    58      border-left: 1px solid var(--ps-ui-border);
    59      border-bottom: 1px solid var(--ps-ui-border);
    60      width: 150px;
    61      min-width: 150px;
    62      max-width: 150px;
    63  
    64      span {
    65        text-shadow: 0 0 1px var(--ps-table-row-text-shadow);
    66      }
    67  
    68      &:first-child {
    69        border-left: none;
    70        text-align: left;
    71  
    72        width: auto;
    73        min-width: auto;
    74        max-width: auto;
    75  
    76        white-space: nowrap;
    77      }
    78  
    79      &:first-child .color-reference {
    80        position: absolute;
    81        left: 10px;
    82        bottom: 0;
    83        top: 0;
    84        margin: auto;
    85      }
    86    }
    87  
    88    &.flamegraph-table-doubles th,
    89    &.flamegraph-table-doubles td {
    90      width: 130px;
    91      min-width: 130px;
    92      max-width: 130px;
    93  
    94      &:first-child {
    95        width: auto;
    96        min-width: auto;
    97        max-width: auto;
    98      }
    99    }
   100  
   101    .symbol-name {
   102      font-size: 14px;
   103      font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   104    }
   105  
   106    th {
   107      padding: 6px 10px;
   108    }
   109    tr th,
   110    tr:nth-child(2n) td {
   111      background: var(--ps-neutral-9);
   112    }
   113  
   114    td {
   115      font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   116  
   117      &:first-child {
   118        margin-left: 15px;
   119        position: relative;
   120      }
   121  
   122      // element right next the color reference
   123      &:first-child .color-reference + div {
   124        margin-left: 15px;
   125      }
   126  
   127      .table-item-button {
   128        border: none;
   129        display: flex;
   130        flex-flow: row nowrap;
   131        align-items: baseline;
   132        width: 100%;
   133        cursor: pointer;
   134        background-color: transparent;
   135      }
   136    }
   137  
   138    .unsupported-format {
   139      text-align: center;
   140      padding: 15px 40px;
   141    }
   142  }
   143  
   144  .color-reference {
   145    width: 10px;
   146    height: 10px;
   147    border-radius: 2px;
   148    display: inline-block;
   149    margin-right: 5px;
   150  }
   151  
   152  .navbar,
   153  .footer {
   154    .navbar-link {
   155      a {
   156        color: var(--ps-neutral-2);
   157        text-decoration: none;
   158        font-weight: 500;
   159        &:hover {
   160          color: var(--ps-neutral-2);
   161          cursor: pointer;
   162        }
   163      }
   164      margin-left: 30px;
   165    }
   166  }
   167  
   168  .btn-group {
   169    display: flex;
   170    .btn {
   171      border-radius: 0;
   172      border-left: none;
   173      &:first-child {
   174        border-left: 1px solid var(--ps-ui-border);
   175        border-radius: 4px 0 0 4px;
   176      }
   177      &:last-child {
   178        border-radius: 0 4px 4px 0;
   179      }
   180    }
   181  }