@clinic/heap-profiler/src/visualizer/stack-bar.css

Programmable interface to Clinic.js Heap Profiler

#stack-bar {
  position: relative;
  cursor: pointer;
  box-shadow: 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
  overflow: hidden;
}

#stack-bar .stack-frame {
  height: 6px;
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.46, 1.79);
  transform-origin: 50%;
  pointer-events: none;
}

#stack-bar .stack-frame.highlighted{
  transform: scaleY(1.8)
}

#stack-bar .stack-frame.selected{
  border-top: 1px solid var(--main-bg-color);
  border-bottom: 1px solid var(--main-bg-color);
  box-shadow: 0 0 3px 1px rgba(var(--grey-highlight-color-val), 0.7);

  /* Make shadow/glow extend around border, while border doesn't cut into box size */
  box-sizing: content-box;
}

#stack-bar .stacks-wrapper{
  display: flex;
  height: 18px;
  align-items: center;
  background: var(--main-bg-color);
  border-bottom: 1px solid var(--light-glare);
}


#stack-bar .pointer {
  border-color: transparent;
  border-bottom-color: var(--banner-bg-color);
  border-style: solid;
  border-width: 10px;
  bottom: 0px;
  left: 0px;
  margin-left: -10px;
  pointer-events: none;
  position: absolute;
  transition: transform .5s cubic-bezier(0.65, 0.05, 0.36, 1);
  filter: drop-shadow(0px -1px 0px var(--light-glare));
}


/* presentation mode */
.presentation-mode #stack-bar .stack-frame.selected{
  box-shadow: 0 0 2px 1px rgba(var(--grey-highlight-color-val), 1);
}


.presentation-mode #stack-bar .pointer {
  filter: drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.9));
}