chrome-devtools-frontend/front_end/panels/timeline/components/timelineSummary.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.
 */

:host {
  max-height: 100%;
  overflow: hidden auto;
  scrollbar-width: thin; /* ~11px wide reserved for gutter */
}

.timeline-summary {
  font-size: var(--sys-typescale-body4-size);
  flex-direction: column;
  padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
}

.summary-range {
  font-weight: var(--ref-typeface-weight-medium);
  height: 24.5px;
  line-height: 22px;
}

.category-summary {
  gap: var(--sys-size-4);
  display: flex;
  flex-direction: column;
}

.category-row {
  min-height: 16px;
  line-height: 16px;
}

.category-swatch {
  display: inline-block;
  width: var(--sys-size-6);
  height: var(--sys-size-6);
  margin-right: var(--sys-size-4);
  top: var(--sys-size-1);
  position: relative;
  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
}

.category-name {
  display: inline;
  word-break: break-all;
}

.category-value {
  text-align: right;
  position: relative;
  float: right;
  z-index: 0;
  width: var(--sys-size-19);
}

.background-bar-container {
  position: absolute;
  inset: 0 0 0 var(--sys-size-3);
  z-index: -1;
}

.background-bar {
  width: 100%;
  float: right;
  height: var(--sys-size-8);
  background-color: var(--sys-color-surface-yellow);
  border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
}