front_end/panels/timeline/components/layoutShiftDetails.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.
 */
@scope to (devtools-widget > *) {
  .layout-shift-details-title,
  .cluster-details-title {
    padding-bottom: var(--sys-size-5);
    display: flex;
    align-items: center;

    .layout-shift-event-title,
    .cluster-event-title {
      background-color: var(--app-color-rendering);
      width: var(--sys-size-6);
      height: var(--sys-size-6);
      border: var(--sys-size-1) solid var(--sys-color-divider);
      /* so the border adds onto the width/height */
      box-sizing: content-box;
      display: inline-block;
      margin-right: var(--sys-size-3);
    }
  }

  .layout-shift-details-table {
    font: var(--sys-typescale-body4-regular);
    margin-bottom: var(--sys-size-4);
    text-align: left;
    border-block: var(--sys-size-1) solid var(--sys-color-divider);
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;

    th,
    td {
      padding-right: var(--sys-size-4);
      min-width: var(--sys-size-20);
      max-width: var(--sys-size-28);
    }
  }

  .table-title {
    th {
      font: var(--sys-typescale-body4-medium);
    }

    tr {
      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
    }
  }

  /** TODO: This is duplicated in sidebarInsights.css. Should make a component. */
  .timeline-link {
    cursor: pointer;
    text-decoration: underline;
    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;
  }

  .parent-cluster-link {
    margin-left: var(--sys-size-2);
  }

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

  .details-row {
    display: flex;
    min-height: var(--sys-size-9);
  }

  .title {
    color: var(--sys-color-token-subtle);
    overflow: hidden;
    padding-right: var(--sys-size-5);
    display: inline-block;
    vertical-align: top;
  }

  .culprit {
    display: inline-flex;
    flex-direction: row;
    gap: var(--sys-size-3);
  }

  .value {
    display: inline-block;
    user-select: text;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 var(--sys-size-3);
  }

  .layout-shift-summary-details,
  .layout-shift-cluster-summary-details {
    font: var(--sys-typescale-body4-regular);
    display: flex;
    flex-direction: column;
    column-gap: var(--sys-size-4);
    padding: var(--sys-size-5) var(--sys-size-5) 0 var(--sys-size-5);
  }

  .culprits {
    display: flex;
    flex-direction: column;
  }

  .shift-row:not(:last-child) {
    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
  }

  .total-row {
    font: var(--sys-typescale-body4-medium);
  }
}