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