chrome-devtools-frontend/front_end/panels/timeline/components/relatedInsightChips.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 {
  display: block;
  border-bottom: 1px solid var(--sys-color-divider);
  flex: none;
}

ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sys-size-4);
  padding: 0 var(--sys-size-4);
  justify-content: flex-start;
  align-items: center;
}

.insight-chip button {
  background: none;
  user-select: none;
  font: var(--sys-typescale-body4-regular);
  border: var(--sys-size-1) solid var(--sys-color-primary);
  border-radius: var(--sys-shape-corner-extra-small);
  display: flex;
  margin: var(--sys-size-4) 0;
  padding: var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-4);
  width: max-content;
  white-space: pre;

  .keyword {
    color: var(--sys-color-primary);
    padding-right: var(--sys-size-3);
  }
}

.insight-chip button:hover {
  background-color: var(--sys-color-state-hover-on-subtle);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.insight-message-box {
  background: var(--sys-color-surface-yellow);
  border-radius: var(--sys-shape-corner-extra-small);
  font: var(--sys-typescale-body4-regular);
  margin: var(--sys-size-4) 0;

  button {
    color: var(--sys-color-on-surface-yellow);
    border: none;
    text-align: left;
    background: none;
    padding: var(--sys-size-4) var(--sys-size-5);
    width: 100%;
    max-width: 500px;

    .insight-label {
      color: var(--sys-color-orange-bright);
      padding-right: var(--sys-size-3);
      font-weight: var(--ref-typeface-weight-medium);
      margin-bottom: var(--sys-size-2);
    }

    &:hover {
      background-color: var(--sys-color-state-hover-on-subtle);
      cursor: pointer;
      transition: opacity 0.2s ease;
    }
  }
}