@clinic/heap-profiler/src/visualizer/info-box.css

Programmable interface to Clinic.js Heap Profiler

#info-box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: stretch;
  position: relative;
}

#info-box .frame-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  font-size: var(--normal-text-size);
  line-height: 1.1;
  height: 2.9em;
  margin: 0;
  padding: 4px 8px;
  font-family: monospace, monospace;
  font-size: var(--normal-text-size);
  white-space: nowrap;
  overflow: hidden;
  background-color: rgba(var(--opposite-color-val), 0.5);
  color: var(--grey-highlight);
  /* make sure the text has enough space as dictated by `height` */
  box-sizing: content-box;
}

#info-box .frame-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: bold;
  background-color: black;
  color: white;
  border: 0;
  cursor: pointer;
}

#info-box .frame-dropdown:focus {
  outline: 0;
}

#info-box .frame-dropdown span {
  min-width: 36px;
  text-align: left;
}

#info-box .frame-info strong {
  color: var(--max-contrast);
  word-break: break-word;
}

#info-box .frame-dropdown svg {
  margin-right: -8px;
  font-size: 2em;
  transition: transform 0.6s cubic-bezier(0.42, 0, 0.23, 1.65);
}

#info-box.collapsed .frame-dropdown svg {
  transform: rotate(180deg);
}

#info-box .collapsible-content-wrapper {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 320px;
  padding: 8px;
  font-size: var(--small-text-size);
  color: white;
  background-color: var(--options-menu-bg-color);
}

#info-box .collapsible-content-wrapper h2 {
  padding: 0 8px 6px 8px;
  margin: 0 -8px;
  font-size: var(--small-text-size);
  border-bottom: 3px solid var(--main-bg-color);
}

#info-box .collapsible-content-wrapper > :first-child {
  margin-top: 0;
}

#info-box .frame-info-item {
  padding: 0 4px;
}

#info-box .collapsible-content-wrapper > :last-child {
  margin-bottom: 0;
}

#info-box .frame-info-item {
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#info-box .frame-function {
  color: var(--max-contrast);
  word-break: break-word;
}

#info-box .frame-area {
  color: var(--area-color-core);
}

#info-box .frame-line-col {
  color: var(--primary-grey);
}

#info-box .frame-line-col span {
  display: none;
}

.visible-md {
  display: none;
}

#ui-tooltip .frame-tooltip {
  width: 100vw;
  max-width: 100vw;
}

@media (min-width: 680px) {
  #info-box .frame-info {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 4em;
  }

  #info-box .frame-info-item {
    line-height: 1;
    white-space: pre-wrap;
  }

  #info-box .frame-function {
    min-width: 20%;
  }

  #info-box .frame-path {
    flex-grow: 1;
    max-width: 60%;
  }

  #info-box .frame-area {
    flex-grow: 1;
    min-width: 20%;
    text-align: right;
  }
}

@media (min-width: 992px) {
  .visible-md {
    display: initial;
  }

  #info-box .frame-info-item {
    overflow: initial;
    text-overflow: initial;
  }

  #info-box .frame-info {
    align-items: center;
  }

  #info-box .frame-line-col span {
    display: inline-block;
  }

  #ui-tooltip .frame-tooltip {
    width: 33vw;
    width: max-content;
    max-width: none;
  }
}

/* presentation mode */
.presentation-mode #info-box .frame-info {
  background-color: var(--opposite-contrast);
}

.presentation-mode #info-box .frame-dropdown {
  border-left: solid var(--banner-bg-color) 1px;
}