front_end/panels/lighthouse/lighthouseDialog.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.
 */

.lighthouse-view {
  flex: auto;
  align-items: start;
  width: 100%;
  max-width: var(--sys-size-34);

  .header {
    font: var(--sys-typescale-body2-medium);
    padding-top: var(--sys-size-3);
    margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
    flex: none;
  }

  .lighthouse-dialog-text {
    margin: 0 var(--sys-size-8);
  }
}

.lighthouse-view button {
  z-index: 10;
  margin-left: auto;
  margin-right: 0;
}

.lighthouse-status {
  width: calc(100% - 2*var(--sys-size-8));
  flex: auto;
  color: var(
  --sys-color-on-surface);
  margin: 0 var(
  --sys-size-8);
}

.lighthouse-status-text {
  text-align: center;
  min-height: var(--sys-size-16);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.lighthouse-status-text code {
  user-select: text;
  text-align: left;
  white-space: pre-wrap;
  overflow: auto;
}

.lighthouse-progress-wrapper {
  height: var(--sys-size-2);
  background-color: var(--sys-color-neutral-outline);
  position: relative;
  margin: var(--sys-size-5) 0;
}

.lighthouse-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--sys-color-primary-bright);
  position: absolute;
  transform-origin: left;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;

  --progress-bar-loading-duration: 45s;
  --progress-bar-gathering-duration: 12s;
  --progress-bar-gathering-percent: 70%;
  --progress-bar-auditing-duration: 5s;
  --progress-bar-auditing-percent: 95%;
}

.lighthouse-progress-bar.errored {
  width: 100%;
  background: var(--sys-color-error);
}

.lighthouse-progress-bar.loading {
  animation-duration: var(--progress-bar-loading-duration);
  animation-name: progressBarLoading;
}

@keyframes progressBarLoading {
  0% { width: 0%; }
  100% { width: var(--progress-bar-gathering-percent); }
}

.lighthouse-progress-bar.gathering {
  animation-duration: var(--progress-bar-gathering-duration);
  animation-name: progressBarGathering;
}

@keyframes progressBarGathering {
  0% { width: var(--progress-bar-gathering-percent); }
  100% { width: var(--progress-bar-auditing-percent); }
}

.lighthouse-progress-bar.auditing {
  animation-duration: var(--progress-bar-auditing-duration);
  animation-name: progressBarAuditing;
}

@keyframes progressBarAuditing {
  0% { width: var(--progress-bar-auditing-percent); }
  100% { width: 99%; }
}

.lighthouse-report-error {
  display: block;
  margin-top: 5px;
}

.lighthouse-action-buttons {
  justify-content: space-between;
  align-self: end;
  width: calc(100% - 2*var(--sys-size-8));
  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8);
}