front_end/panels/lighthouse/lighthousePanel.css

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

.lh-root {
  --report-menu-width: 0;

  user-select: text;
}
/* for View Trace button */

.lh-audit-group {
  position: relative;
}

button.view-trace {
  margin: 10px;
}

/** `window.opener` is null for windows opened from DevTools. This breaks
    the LH viewer app, so disable this feature. */

.lh-tools--viewer {
  display: none !important; /* stylelint-disable-line declaration-no-important */
}

.lighthouse-settings-pane {
  flex: none;
  background-color: var(--sys-color-cdt-base-container);
  border-bottom: 1px solid var(--sys-color-divider);
}

.lighthouse-settings-pane devtools-toolbar {
  flex: 1 1;
  flex-wrap: wrap;
}

select.lighthouse-report {
  min-width: 140px;
  /* Up to 180px wide, but if window is very small ensure dropdown arrow is visible */
  max-width: min(180px, calc(100% - 30px));
}

.lighthouse-toolbar-container {
  display: flex;
  flex: none;
}

.lighthouse-toolbar-container > devtools-toolbar {
  background-color: var(--sys-color-cdt-base-container);
  border-bottom: 1px solid var(--sys-color-divider);
}

.lighthouse-toolbar-container > :first-child {
  flex: 1 1 auto;
}

.lh-devtools .lh-element-screenshot__overlay {
  position: absolute;
}

.lighthouse-results-container {
  position: relative;

  :focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
  }

  .lh-tools__button {
    height: var(--sys-size-9);
    width: var(--sys-size-9);
    min-width: var(--sys-size-9);

    &:focus-visible {
      border-radius: var(--sys-shape-corner-full);
      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
    }

    &.lh-active + .lh-tools__dropdown {
      clip: rect(-8px, 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
    }
  }

  .lh-tools__dropdown {
    padding: var(--sys-size-5) 0;
    border-radius: var(--sys-shape-corner-small);
    box-shadow: var(--sys-elevation-level3);
    top: 24px;

    &:hover a:focus {
      background-color: transparent;
    }

    a {
      height: var(--sys-size-11);
      padding: 0 var(--sys-size-8);
      white-space: nowrap;
      align-items: center;

      &::before {
        content: none;
      }
    }
  }

}