github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/FlameGraph/FlamegraphRenderer.module.scss (about)

     1  .flamegraphContainer {
     2    width: 100%;
     3  }
     4  
     5  /* We take a gamble here and assume only 2 items will exist */
     6  .flamegraphContainer > *:first-child {
     7    margin-right: 8px;
     8  }
     9  .flamegraphContainer > *:nth-child(2) {
    10    margin-left: 8px;
    11    /*  width: 50%; */
    12  }
    13  
    14  .createdBy {
    15    color: white;
    16    text-align: center;
    17    margin: 10px 0;
    18  }
    19  .createdBy a {
    20    color: #199bef !important;
    21  }
    22  
    23  .horizontal {
    24    flex-direction: row;
    25  }
    26  
    27  .vertical {
    28    /* reverse, since by default the table is on the left in the DOM */
    29    flex-direction: column-reverse;
    30  }
    31  
    32  .panesWrapper {
    33    display: flex;
    34  }
    35  
    36  .tablePane,
    37  .sandwichPane {
    38    flex: 1;
    39  }
    40  
    41  .sandwichPane {
    42    .sandwichPaneInfo {
    43      display: inline-block;
    44      position: relative;
    45      margin: 30px 0 0 10px;
    46      padding: 8px;
    47      border-radius: 5px;
    48      background-color: var(--ps-sandwich-pane-info-bg);
    49      color: var(--ps-neutral-1);
    50  
    51      &.vertical {
    52        margin: 30px 0;
    53  
    54        .arrow {
    55          top: initial;
    56          bottom: -15px;
    57          left: 20px;
    58          transform: rotate(-90deg);
    59        }
    60      }
    61  
    62      .arrow {
    63        position: absolute;
    64        top: 14px;
    65        left: -20px;
    66        width: 0;
    67        height: 0;
    68        border-style: solid;
    69        border-width: 8px 20px 8px 0;
    70        border-color: transparent var(--ps-sandwich-pane-info-bg) transparent
    71          transparent;
    72      }
    73    }
    74  
    75    .sandwichTop {
    76      margin-bottom: 10px;
    77    }
    78  
    79    .sandwichTop,
    80    .sandwichBottom {
    81      display: flex;
    82  
    83      .name {
    84        writing-mode: vertical-rl;
    85        transform: rotate(-180deg);
    86        padding: 5px 0;
    87      }
    88    }
    89  
    90    .sandwichBottom span {
    91      text-align: right;
    92    }
    93  }