chrome-devtools-frontend/front_end/panels/console/consoleInsightTeaser.css

Chrome DevTools UI

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

@scope to (devtools-widget > *) {
  .teaser-tooltip-container {
    width: var(--sys-size-31);
    padding: var(--sys-size-1) var(--sys-size-3) var(--sys-size-3);
    margin-top: var(--sys-size-2);
  }

  .response-container {
    height: 85px;
    display: flex;
    flex-direction: column;
  }

  @keyframes gradient {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  .loader {
    background-size: 400% 100%;
    animation: gradient 4s infinite linear;
    margin-top: var(--sys-size-5);
  }

  @media (prefers-color-scheme: light) {
    .loader {
      background-image: linear-gradient(
        70deg,
        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 0%,
        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 30%,
        color-mix(in srgb, var(--sys-color-on-surface) 15%, transparent) 50%,
        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 70%,
        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 100%
      );
    }
  }

  @media (prefers-color-scheme: dark) {
    .loader {
      background-image: linear-gradient(
        70deg,
        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 0%,
        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 30%,
        color-mix(in srgb, var(--sys-color-on-surface) 30%, transparent) 50%,
        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 70%,
        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 100%
      );
    }
  }

  h2 {
    font: var(--sys-typescale-body4-bold);
    margin: 0 0 var(--sys-size-3);
    line-clamp: 1;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .main-text {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lightbulb-icon {
    color: var(--sys-color-on-primary);
    height: var(--sys-size-7);
    margin-left: calc(-1 * var(--sys-size-4));
  }

  .learn-more {
    padding-top: 7px;
  }

  .info-tooltip-text {
    max-width: var(--sys-size-26);
  }

  .tooltip-footer {
    padding: var(--sys-size-5) 0 0;
    display: flex;
    align-items: center;
    height: 34px;

    devtools-checkbox {
      margin-left: auto;
    }
  }

  .progress-line {
    display: flex;
    align-items: center;
    flex-grow: 1;

    .label {
      margin-right: var(--sys-size-6);
    }

    .indicator-container {
      height: var(--sys-size-5);
      background-color: var(--sys-color-surface5);
      flex-grow: 1
    }

    .indicator {
      background-color: var(--sys-color-primary);
      height: 100%;
    }
  }
}