front_end/panels/timeline/components/insights/baseInsightComponent.css

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

@keyframes insight-highlight-fade-out {
  from {
    background-color: var(--sys-color-yellow-container);
  }

  to {
    background-color: transparent;
  }
}

:host([highlight-insight]) {
  .insight {
    animation: insight-highlight-fade-out 2s 0s;
  }
}

.insight {
  display: block;
  position: relative;
  width: auto;
  height: auto;
  margin: var(--sys-size-5) 0;
  border-radius: var(--sys-shape-corner-extra-small);
  overflow: hidden;
  border: var(--sys-size-1) solid var(--sys-color-divider);
  background-color: var(--sys-color-base);

  header:focus-visible {
    outline: none;
  }

  &.closed {
    background-color: var(--sys-color-surface3);
    border: none;

    &:focus-within {
      /* Ensure that if the user tabs to a closed insight, we outline it so they know it's focused. */
      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
    }
  }

  header {
    padding: var(--sys-size-5) var(--sys-size-4);

    h3 {
      font: var(--sys-typescale-body4-medium);
    }
  }

  &:not(.closed) {
    header {
      padding-bottom: var(--sys-size-2);
    }
  }
}

.insight-hover-icon {
  position: absolute;
  top: var(--sys-size-5);
  right: var(--sys-size-5);
  border: none;
  width: var(--sys-size-9);
  user-select: none;
  height: var(--sys-size-9);
  box-shadow: var(--sys-elevation-level1);
  border-radius: var(--sys-shape-corner-full);
  background: var(--sys-color-cdt-base-container);
  opacity: 0%;

  /* Ensure that the icon appears when the user hovers, or focuses the header */
  .insight:hover &,
  header:focus-within & {
    opacity: 100%;
  }

  &.active devtools-button {
    transform: rotate(180deg);
  }
}

.insight-description,
.insight-body,
.insight-title {
  user-select: text;
}

.insight-body {
  padding: 0 var(--sys-size-4) var(--sys-size-5);

  .list-title {
    margin-top: var(--sys-size-4);
    margin-bottom: var(--sys-size-3);
  }

  ul {
    /* left padding to bring the list bullets to the right place */
    padding: 0 0 0 var(--sys-size-9);
    margin: 0;
  }
}

.insight-section {
  padding-top: var(--sys-size-5);
  margin-top: var(--sys-size-5);
}

.insight-description:not(:empty) {
  margin-bottom: var(--sys-size-5);
}

.insight-section:not(:empty) {
  border-top: var(--sys-size-1) solid var(--sys-color-divider);
}

.insight-title {
  color: var(--sys-color-on-base);
  margin-block: 3px;
}

.link {
  color: var(--sys-color-primary);
}

.dl-title {
  font-weight: bold;
}

dd.dl-title {
  text-align: right;
}

.dl-value {
  font-weight: bold;
}

.image-ref {
  display: inline-flex;
  align-items: center;

  &:not(:empty) {
    padding-top: var(--sys-size-5);
  }
}

.element-img {
  width: var(--sys-size-13);
  height: var(--sys-size-13);
  object-fit: cover;
  border: var(--sys-size-1) solid var(--sys-color-divider);
  background: var(--sys-color-divider) -0.054px -12px / 100.239% 148.936% no-repeat;
  margin-right: var(--sys-size-5);
}

.element-img-details {
  font: var(--sys-typescale-body4-regular);
  display: flex;
  flex-direction: column;
  word-break: break-all;

  .element-img-details-size {
    color: var(--color-text-secondary);
  }
}

::slotted(*) {
  font: var(--sys-typescale-body4-regular);
}

.insight-savings {
  font: var(--sys-typescale-body4-medium);
  color: var(--sys-color-green);
}

.timeline-link {
  cursor: pointer;
  text-decoration: var(--override-timeline-link-text-decoration, underline);
  color: var(--override-timeline-link-text-color, var(--sys-color-primary));
  /* for a11y reasons this is a button, so we have to remove some default
   * styling */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
}

.timeline-link.invalid-link {
  color: var(--sys-color-state-disabled);
}

.ask-ai-btn-wrap {
  border-top: var(--sys-size-1) solid var(--sys-color-divider);
  padding-top: var(--sys-size-5);
  margin-top: var(--sys-size-5);
  text-align: center;
}

.insight.minimal {
  .insight-section {
    border-top: none;
    padding: 0;
  }
}