| Index: third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css b/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| index db20879e1bb2836b6834b276048fc75898abc546..d0d7277db2da9cb1e3a714accb89991041dfab99 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| +++ b/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| @@ -14,7 +14,7 @@
|
| * limitations under the License.
|
| */
|
|
|
| -.lh-root {
|
| +.lh-vars {
|
| --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
|
| --body-font-size: 13px;
|
| --header-font-size: 16px;
|
| @@ -25,6 +25,7 @@
|
| /*--accent-color: #3879d9;*/
|
| --fail-color: #df332f;
|
| --pass-color: #2b882f;
|
| + --informative-color: #0c50c7;
|
| --average-color: #ef6c00; /* md orange 800 */
|
| --warning-color: #757575; /* md grey 600 */
|
|
|
| @@ -35,10 +36,10 @@
|
| --report-content-width: calc(var(--report-width) + var(--report-menu-width));
|
|
|
| --lh-score-highlight-bg: #fafafa;
|
| - --lh-score-icon-background-size: 17px;
|
| - --lh-score-margin: var(--default-padding);
|
| + --lh-score-icon-background-size: 24px;
|
| + --lh-score-margin: calc(var(--default-padding) / 2);
|
| --lh-audit-score-width: 35px;
|
| - --lh-category-score-width: 50px;
|
| + --lh-category-score-width: 60px;
|
| }
|
|
|
| .lh-root * {
|
| @@ -165,16 +166,14 @@ summary {
|
|
|
| .lh-score__value {
|
| flex: none;
|
| - padding: 5px;
|
| margin-right: var(--lh-score-margin);
|
| width: var(--lh-audit-score-width);
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| - background: var(--warning-color);
|
| - color: #fff;
|
| border-radius: 2px;
|
| position: relative;
|
| + font-weight: bold;
|
| }
|
|
|
| .lh-score__value::after {
|
| @@ -184,10 +183,19 @@ summary {
|
| right: 0;
|
| top: 0;
|
| bottom: 0;
|
| - background-color: #000;
|
| border-radius: inherit;
|
| }
|
|
|
| +.lh-score--informative .lh-score__value {
|
| + color: var(--informative-color);
|
| + border-radius: 50%;
|
| +}
|
| +
|
| +.lh-score--informative .lh-score__value::after {
|
| + background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="#0c50c7"/></svg>') no-repeat 50% 50%;
|
| + background-size: var(--lh-score-icon-background-size);
|
| +}
|
| +
|
| .lh-score__value--binary {
|
| text-indent: -5000px;
|
| }
|
| @@ -198,23 +206,22 @@ summary {
|
| }
|
|
|
| .lh-score__value--pass {
|
| - background: var(--pass-color);
|
| + color: var(--pass-color);
|
| }
|
|
|
| .lh-score__value--pass::after {
|
| - background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>pass</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="white" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
|
| + background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>pass</title><path d="M9.17 2.33L4.5 7 2.83 5.33 1.5 6.66l3 3 6-6z" fill="#2b882f" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
|
| background-size: var(--lh-score-icon-background-size);
|
| }
|
|
|
| .lh-score__value--average {
|
| - background: var(--average-color);
|
| + color: var(--average-color);
|
| }
|
|
|
| .lh-score__value--average::after {
|
| background: none;
|
| content: '!';
|
| - background-color: var(--average-color);
|
| - color: #fff;
|
| + color: var(--average-color);
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| @@ -223,31 +230,28 @@ summary {
|
| }
|
|
|
| .lh-score__value--fail {
|
| - background: var(--fail-color);
|
| + color: var(--fail-color);
|
| }
|
|
|
| .lh-score__value--fail::after {
|
| - background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>fail</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="white"/></svg>') no-repeat 50% 50%;
|
| + background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>fail</title><path d="M8.33 2.33l1.33 1.33-2.335 2.335L9.66 8.33 8.33 9.66 5.995 7.325 3.66 9.66 2.33 8.33l2.335-2.335L2.33 3.66l1.33-1.33 2.335 2.335z" fill="#df332f"/></svg>') no-repeat 50% 50%;
|
| background-size: var(--lh-score-icon-background-size);
|
| }
|
|
|
| -.lh-score__title {
|
| - margin-bottom: calc(var(--default-padding) / 2);
|
| -}
|
| -
|
| .lh-score__description {
|
| font-size: smaller;
|
| color: var(--secondary-text-color);
|
| margin-top: calc(var(--default-padding) / 2);
|
| }
|
|
|
| -.lh-score__header {
|
| - flex: 1;
|
| - margin-top: 2px;
|
| +.lh-score__snippet {
|
| + align-items: center;
|
| + justify-content: space-between;
|
| + /*outline: none;*/
|
| }
|
|
|
| -.lh-score__header[open] .lh-toggle-arrow {
|
| - transform: rotateZ(90deg);
|
| +.lh-score__snippet::-moz-list-bullet {
|
| + display: none;
|
| }
|
|
|
| .lh-toggle-arrow {
|
| @@ -263,18 +267,26 @@ summary {
|
| border: none;
|
| }
|
|
|
| -.lh-score__snippet {
|
| +/* Expandable Details (Audit Groups, Audits) */
|
| +
|
| +.lh-expandable-details {
|
| + flex: 1;
|
| +}
|
| +
|
| +.lh-expandable-details__summary {
|
| display: flex;
|
| - align-items: center;
|
| - justify-content: space-between;
|
| - /*outline: none;*/
|
| + cursor: pointer;
|
| }
|
|
|
| -.lh-score__snippet::-moz-list-bullet {
|
| - display: none;
|
| +.lh-expandable-details__header {
|
| + flex: 1;
|
| +}
|
| +
|
| +.lh-expandable-details[open] > .lh-expandable-details__summary > .lh-toggle-arrow {
|
| + transform: rotateZ(90deg);
|
| }
|
|
|
| -.lh-score__snippet::-webkit-details-marker {
|
| +.lh-expandable-details__summary::-webkit-details-marker {
|
| display: none;
|
| }
|
|
|
| @@ -286,6 +298,12 @@ summary {
|
|
|
| .lh-audit {
|
| margin-top: var(--default-padding);
|
| + padding-bottom: var(--default-padding);
|
| + border-bottom: 1px solid var(--report-secondary-border-color);
|
| +}
|
| +
|
| +.lh-audit:last-of-type {
|
| + border-bottom: none;
|
| }
|
|
|
| .lh-audit > .lh-score {
|
| @@ -293,6 +311,28 @@ summary {
|
| font-size: var(--header-font-size);
|
| }
|
|
|
| +/* Audit Group */
|
| +
|
| +.lh-audit-group {
|
| + margin-top: var(--default-padding);
|
| + padding-bottom: var(--default-padding);
|
| + border-bottom: 1px solid var(--report-secondary-border-color);
|
| +}
|
| +
|
| +.lh-audit-group:last-of-type {
|
| + border-bottom: none;
|
| +}
|
| +
|
| +.lh-audit-group__header {
|
| + font-size: 18px;
|
| +}
|
| +
|
| +.lh-audit-group__description {
|
| + font-size: 16px;
|
| + color: var(--secondary-text-color);
|
| + margin-top: calc(var(--default-padding) / 2);
|
| +}
|
| +
|
| .lh-debug {
|
| margin-top: calc(var(--default-padding) / 2);
|
| margin-left: calc(var(--lh-audit-score-width) + var(--lh-score-margin));
|
| @@ -305,8 +345,6 @@ summary {
|
| display: flex;
|
| max-width: var(--report-content-width);
|
| margin: 0 auto;
|
| - /*border-right: 1px solid var(--report-border-color);*/
|
| - /*border-left: 1px solid var(--report-border-color);*/
|
| }
|
|
|
| .lh-report {
|
| @@ -334,17 +372,36 @@ summary {
|
| border: none;
|
| }
|
|
|
| -.lh-category > .lh-audit,
|
| -.lh-category > .lh-passed-audits > .lh-audit {
|
| +.lh-category .lh-audit {
|
| margin-left: calc(var(--lh-category-score-width) + var(--lh-score-margin));
|
| }
|
|
|
| +.lh-category .lh-audit-group {
|
| + margin-left: calc(var(--lh-category-score-width) + var(--default-padding));
|
| +}
|
| +
|
| +.lh-category .lh-audit-group .lh-audit {
|
| + margin-left: var(--default-padding);
|
| +}
|
| +
|
| .lh-category > .lh-score {
|
| font-size: 20px;
|
| + padding-bottom: 24px;
|
| }
|
|
|
| -.lh-category > .lh-score .lh-score__value {
|
| - width: var(--lh-category-score-width);
|
| +.lh-category > .lh-score .lh-score__value,
|
| +.lh-category > .lh-score .lh-score__gauge .lh-gauge__label {
|
| + display: none;
|
| +}
|
| +
|
| +.lh-category .lh-score__gauge {
|
| + margin: calc(var(--default-padding) / 2) var(--default-padding) 0 0;
|
| + flex-basis: var(--circle-size);
|
| + flex-shrink: 0;
|
| +}
|
| +
|
| +.lh-category .lh-score__gauge .lh-gauge {
|
| + --circle-size: 60px;
|
| }
|
|
|
| /* Category snippet shouldnt have pointer cursor. */
|
| @@ -357,8 +414,14 @@ summary {
|
| font-weight: 400;
|
| }
|
|
|
| +.lh-passed-audits[open] summary.lh-passed-audits-summary {
|
| + margin-bottom: calc(var(--default-padding) * 2);
|
| +}
|
| +
|
| summary.lh-passed-audits-summary {
|
| - margin: var(--default-padding);
|
| + margin: calc(var(--default-padding) * 2) var(--default-padding);
|
| + margin-left: calc(var(--lh-category-score-width) + var(--default-padding));
|
| + margin-bottom: 0;
|
| font-size: 15px;
|
| display: flex;
|
| align-items: center;
|
| @@ -424,3 +487,4 @@ summary.lh-passed-audits-summary::-webkit-details-marker {
|
| }
|
| }
|
|
|
| +/*# sourceURL=report.styles.css */
|
|
|