chrome-devtools-frontend/front_end/panels/timeline/components/metricCard.css

Chrome DevTools UI

/*
 * Copyright 2024 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.metric-card {
  border-radius: var(--sys-shape-corner-small);
  padding: 14px 16px;
  background-color: var(--sys-color-surface3);
  height: 100%;
  box-sizing: border-box;

  &:not(:hover) .title-help {
    visibility: hidden;
  }
}

.title {
  display: flex;
  justify-content: space-between;
  font-size: var(--sys-typescale-headline5-size);
  line-height: var(--sys-typescale-headline5-line-height);
  font-weight: var(--ref-typeface-weight-medium);
  margin: 0;
  margin-bottom: 6px;
}

.title-help {
  height: var(--sys-typescale-headline5-line-height);
  margin-left: 4px;
}

.metric-values-section {
  position: relative;
  display: flex;
  column-gap: 8px;
  margin-bottom: 8px;
}

.metric-values-section:focus-visible {
  outline: 2px solid -webkit-focus-ring-color;
}

.metric-source-block {
  flex: 1;
}

.metric-source-value {
  font-size: 32px;
  line-height: 36px;
  font-weight: var(--ref-typeface-weight-regular);
}

.metric-source-label {
  font-weight: var(--ref-typeface-weight-medium);
}

.warning {
  margin-top: 4px;
  color: var(--sys-color-error);
  font-size: var(--sys-typescale-body4-size);
  line-height: var(--sys-typescale-body4-line-height);
  display: flex;

  &::before {
    content: " ";
    width: var(--sys-typescale-body4-line-height);
    height: var(--sys-typescale-body4-line-height);
    mask-size: var(--sys-typescale-body4-line-height);
    mask-image: var(--image-file-warning);
    background-color: var(--sys-color-error);
    margin-right: 4px;
    flex-shrink: 0;
  }
}

.good-bg {
  background-color: var(--app-color-performance-good);
}

.needs-improvement-bg {
  background-color: var(--app-color-performance-ok);
}

.poor-bg {
  background-color: var(--app-color-performance-bad);
}

.divider {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sys-color-divider);
  margin: 8px 0;
  box-sizing: border-box;
}

.compare-text {
  margin-top: 8px;
}

.environment-recs-intro {
  margin-top: 8px;
}

.environment-recs {
  margin: 9px 0;
}

.environment-recs > summary {
  font-weight: var(--ref-typeface-weight-medium);
  margin-bottom: 4px;
  font-size: var(--sys-typescale-body4-size);
  line-height: var(--sys-typescale-body4-line-height);
  display: flex;

  &::before {
    content: " ";
    width: var(--sys-typescale-body4-line-height);
    height: var(--sys-typescale-body4-line-height);
    mask-size: var(--sys-typescale-body4-line-height);
    mask-image: var(--image-file-triangle-right);
    background-color: var(--icon-default);
    margin-right: 4px;
    flex-shrink: 0;
  }
}

details.environment-recs[open] > summary::before {
  mask-image: var(--image-file-triangle-down);
}

.environment-recs-list {
  margin: 0;
}

.detailed-compare-text {
  margin-bottom: 8px;
}

.bucket-summaries {
  margin-top: 8px;
  white-space: nowrap;
}

.bucket-summaries.histogram {
  display: grid;
  grid-template-columns: minmax(min-content, auto) minmax(40px, 60px) max-content;
  grid-auto-rows: 1fr;
  column-gap: 8px;
  place-items: center flex-end;
}

.bucket-label {
  justify-self: start;
  font-weight: var(--ref-typeface-weight-medium);
  white-space: wrap;

  > * {
    white-space: nowrap;
  }
}

.bucket-range {
  color: var(--sys-color-token-subtle);
}

.histogram-bar {
  height: 6px;
}

.histogram-percent {
  color: var(--sys-color-token-subtle);
  font-weight: var(--ref-typeface-weight-medium);
}

.tooltip {
  display: none;
  visibility: hidden;
  transition-property: visibility;
  width: min(var(--tooltip-container-width, 350px), 350px);
  max-width: max-content;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  box-sizing: border-box;
  padding: var(--sys-size-5) var(--sys-size-6);
  border-radius: var(--sys-shape-corner-small);
  background-color: var(--sys-color-cdt-base-container);
  box-shadow: var(--drop-shadow-depth-3);

  .tooltip-scroll {
    overflow-x: auto;

    .tooltip-contents {
      min-width: min-content;
    }
  }
}

.phase-table {
  display: grid;
  column-gap: var(--sys-size-3);
  white-space: nowrap;
}

.phase-table-row {
  display: contents;
}

.phase-table-value {
  text-align: right;
}

.phase-table-header-row {
  font-weight: var(--ref-typeface-weight-medium);
}