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

     1  .wrapper {
     2    position: relative;
     3  }
     4  
     5  .menu {
     6    width: 350px;
     7  }
     8  
     9  .caption {
    10    font-weight: bold;
    11    font-size: 14px;
    12  
    13    @media (max-width: 1300px) {
    14      display: none;
    15    }
    16  }
    17  
    18  .openButtonIcon {
    19    margin-left: 5px;
    20    height: 14px;
    21  }
    22  
    23  .body {
    24    display: flex;
    25    flex-direction: column;
    26  }
    27  
    28  .buttons {
    29    display: flex;
    30    flex-direction: row;
    31    margin-bottom: 15px;
    32    justify-content: space-between;
    33  
    34    .buttonsCol {
    35      display: flex;
    36      flex-direction: column;
    37      width: calc(50% - 4px);
    38    }
    39  }
    40  
    41  .priorButton {
    42    margin-bottom: 5px;
    43  }
    44  
    45  .hidden {
    46    display: none;
    47  }
    48  
    49  .subtitle {
    50    font-weight: bold;
    51    font-size: 16px;
    52    margin-bottom: 5px;
    53  
    54    .periodLabel {
    55      border-bottom: 1px solid white;
    56    }
    57  }
    58  
    59  .preview {
    60    display: flex;
    61    flex-direction: column;
    62    width: 100%;
    63    position: relative;
    64    padding-bottom: 40px;
    65  
    66    .timeline {
    67      background-color: black;
    68      height: 40px;
    69      border: 1px solid grey;
    70      width: 100%;
    71  
    72      .timelineBox {
    73        width: 100%;
    74        height: 100%;
    75        display: flex;
    76        flex-direction: row;
    77        position: relative;
    78  
    79        .selection {
    80          background-color: green;
    81          height: 100%;
    82          position: absolute;
    83        }
    84      }
    85    }
    86  
    87    .legend {
    88      display: flex;
    89      flex-direction: column;
    90      margin-top: 10px;
    91      position: absolute;
    92      top: 40px;
    93  
    94      .legendLine {
    95        width: 100%;
    96        background-color: white;
    97        height: 1px;
    98        position: relative;
    99  
   100        &::before {
   101          content: '';
   102          width: 1px;
   103          height: 12px;
   104          background-color: white;
   105          position: absolute;
   106          left: 0;
   107          top: -5px;
   108        }
   109  
   110        &::after {
   111          content: '';
   112          width: 1px;
   113          height: 12px;
   114          background-color: white;
   115          position: absolute;
   116          right: 0;
   117          top: -5px;
   118        }
   119      }
   120  
   121      .legendCaption {
   122        display: flex;
   123        align-items: center;
   124        justify-content: center;
   125        font-size: 12px;
   126      }
   127    }
   128  }
   129  
   130  .toggleCompare {
   131    margin-right: 10px;
   132  }