1/*
2 * Copyright 2017 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
5 */
6
7.lighthouse-view {
8  --view-horizontal-margin: 20px;
9
10  margin: 7px var(--view-horizontal-margin);
11  flex: auto;
12  align-items: center;
13  width: 100%;
14  max-width: 500px;
15}
16
17.lighthouse-view h2 {
18  color: #666;
19  font-weight: bold;
20  font-size: 14px;
21  flex: none;
22  width: 100%;
23  text-align: left;
24}
25
26.lighthouse-view button {
27  z-index: 10;
28  margin-left: auto;
29  margin-right: 0;
30}
31
32.lighthouse-status {
33  width: 100%;
34  flex: auto;
35  align-items: center;
36  color: #666;
37}
38
39.lighthouse-status-text {
40  text-align: center;
41  min-height: 50px;
42  margin-bottom: 10px;
43  display: flex;
44  justify-content: center;
45  flex-direction: column;
46  max-width: 100%;
47}
48
49.lighthouse-status-text code {
50  user-select: text;
51  text-align: left;
52  white-space: pre-wrap;
53  overflow: auto;
54}
55
56.lighthouse-progress-wrapper {
57  width: calc(100% + 2 * var(--view-horizontal-margin));
58  height: 2px;
59  background-color: #e1f5fe;
60  position: relative;
61  margin: 10px;
62}
63
64.lighthouse-progress-bar {
65  width: 0%;
66  height: 100%;
67  background: #039be5;
68  position: absolute;
69  transform-origin: left;
70  animation-fill-mode: forwards;
71  animation-timing-function: ease-out;
72
73  --progress-bar-loading-duration: 45s;
74  --progress-bar-gathering-duration: 12s;
75  --progress-bar-gathering-percent: 70%;
76  --progress-bar-auditing-duration: 5s;
77  --progress-bar-auditing-percent: 95%;
78}
79
80.lighthouse-progress-bar.errored {
81  width: 100%;
82  background: #e50303;
83}
84
85.lighthouse-progress-bar.loading {
86  animation-duration: var(--progress-bar-loading-duration);
87  animation-name: progressBarLoading;
88}
89
90@keyframes progressBarLoading {
91  0% { width: 0%; }
92  100% { width: var(--progress-bar-gathering-percent); }
93}
94
95.lighthouse-progress-bar.gathering {
96  animation-duration: var(--progress-bar-gathering-duration);
97  animation-name: progressBarGathering;
98}
99
100@keyframes progressBarGathering {
101  0% { width: var(--progress-bar-gathering-percent); }
102  100% { width: var(--progress-bar-auditing-percent); }
103}
104
105.lighthouse-progress-bar.auditing {
106  animation-duration: var(--progress-bar-auditing-duration);
107  animation-name: progressBarAuditing;
108}
109
110@keyframes progressBarAuditing {
111  0% { width: var(--progress-bar-auditing-percent); }
112  100% { width: 99%; }
113}
114
115.lighthouse-report-error {
116  display: block;
117  margin-top: 5px;
118}
119