@clinic/heap-profiler/src/visualizer/flame-graph.css

Programmable interface to Clinic.js Heap Profiler

section#flame-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  position: relative;
}
#flame-main canvas {
  display: block;
  position: relative;
}

#flame-main .scroll-container {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}

chart {
  display: block;
}
chart > div {
  height: 100%;
}
#flame-main .flamegraph-outer {
  border-top: 1px solid var(--light-glare);
}

/* node-highlighter */
.node-highlighter {
  pointer-events: none;
  position: absolute;
  transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1), width .3s cubic-bezier(0.65, 0.05, 0.36, 1);
  top: 0px;
  left: 0px;
  display: none;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.highlighter-box {
  display: none;
  top: 0px;
  left: 0px;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  pointer-events: none;
  position: absolute;
}
.highlighter-box.show{
  display: block;
}
.node-highlighter.show {
  display: flex;
}

.node-highlighter .down-arrow {
  border-color: transparent;
  border-top-color: var(--banner-bg-color);
  border-style: solid;
  border-width: 10px;
  filter: drop-shadow(0px 1px 0px var(--light-glare));
  margin:0 0 -8px;
  flex-shrink: 0;
}

.node-highlighter .vertical-line {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node-highlighter .vertical-line::before {
  content:"";
  flex-grow: 1;
  width: 0px;
  border-left: 1px dashed rgba(255, 255, 255, 0.5);
}

.selection-box {
  position: absolute;
  pointer-events: none;
  background: rgba(var(--grey-highlight-color-val), 0.12);
  background: linear-gradient(to bottom,
    rgba(var(--grey-highlight-color-val), 0.28) 0%,
    rgba(var(--grey-highlight-color-val), 0.14) 60%,
    rgba(var(--grey-highlight-color-val), 0) 100%
  );
  border: 1px solid transparent;
  box-shadow: 0 1px 4px rgba(var(--grey-highlight-color-val), 0.14);
  z-index: 10;
}

#flame-main canvas.flame-overlay {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}

.zoom-underline {
  position: absolute;
  pointer-events: none;
  border-top: 3px solid var(--main-bg-color);
  background: linear-gradient(to bottom, rgba(var(--grey-highlight-color-val), 0.3), rgba(var(--grey-highlight-color-val), 0));
}

.fg-tooltip-actions {
  display: flex;
  background-color: rgba(var(--opposite-color-val), 0.8);
  border: 1px solid var(--primary-grey);
  color: white;
  font-size: var(--normal-text-size);
}

.fg-tooltip-actions button {
  background-color: transparent;
  align-items: center;
  border-radius: 0;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-basis: 50%;
  font-size: inherit;
  justify-content: center;
  line-height: 1.2em;
  padding: 2px;
  outline: none;
}

.fg-tooltip-actions .label {
  white-space: nowrap;
}

.fg-tooltip-actions button:hover {
  background-color: var(--clickable-bg-hover);
  outline: 1px solid var(--max-contrast);
}

.fg-tooltip-actions .zoom-button svg {
  display: none;
}

.fg-tooltip-actions .zoom-button.zoom-in .zoom-in-svg {
  display: initial;
}

.fg-tooltip-actions .zoom-button.zoom-out .zoom-out-svg {
  display: initial;
}

.fg-tooltip-actions span {
  padding: 0 0.15em;
}

.fg-tooltip-actions .icon {
  display: flex;
  align-items: center;
}

/* presentation-mode */

.presentation-mode .node-highlighter .vertical-line::before {
  border-left-width: 2px;
}

.presentation-mode .selection-box {
  background-color: rgba(var(--grey-highlight-color-val), 0.2);
  box-shadow: 0 1px 4px rgba(var(--grey-highlight-color-val), 0.3);
}

.presentation-mode .highlighter-box {
  border-width: 2px;
}