| /** |
| * @license Copyright 2017 Google Inc. All Rights Reserved. |
| * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 |
| * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. |
| */ |
| |
| .lh-vars { |
| --text-font-family: Roboto, Helvetica, Arial, sans-serif; |
| --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; |
| --body-background-color: #fff; |
| --body-font-size: 14px; |
| --body-line-height: 18px; |
| --subheader-font-size: 14px; |
| --subheader-line-height: 20px; |
| --subheader-color: hsl(206, 6%, 25%); |
| --header-bg-color: #f1f3f4; |
| --header-font-size: 20px; |
| --header-line-height: 24px; |
| --title-font-size: 24px; |
| --title-line-height: 28px; |
| --caption-font-size: 12px; |
| --caption-line-height: 16px; |
| --default-padding: 12px; |
| --section-padding: 16px; |
| --section-indent: 16px; |
| --audit-group-indent: 16px; |
| --audit-item-gap: 5px; |
| --audit-indent: 16px; |
| --text-indent: 8px; |
| --expandable-indent: 20px; |
| --secondary-text-color: #565656; |
| /*--accent-color: #3879d9;*/ |
| --fail-color: hsl(1, 73%, 45%); |
| --average-color: hsl(31, 100%, 45%); /* md orange 800 */ |
| --pass-color: hsl(139, 70%, 30%); |
| --informative-color: #0c50c7; |
| --medium-75-gray: #757575; |
| --medium-50-gray: hsl(210, 17%, 98%); |
| --medium-100-gray: hsl(200, 12%, 95%); |
| --warning-color: #ffab00; /* md amber a700 */ |
| --report-border-color: #ccc; |
| --report-secondary-border-color: #ebebeb; |
| --metric-timeline-rule-color: #b3b3b3; |
| --display-value-gray: hsl(216, 5%, 39%); |
| --report-width: calc(60 * var(--body-font-size)); |
| --report-content-width: calc(var(--report-width)); |
| --report-header-height: 161px; |
| --report-header-color: #202124; |
| --navitem-font-size: var(--body-font-size); |
| --navitem-line-height: var(--body-line-height); |
| --navitem-hpadding: var(--body-font-size); |
| --navitem-vpadding: calc(var(--navitem-line-height) / 2); |
| --lh-score-highlight-bg: hsla(0, 0%, 90%, 0.2); |
| --lh-score-icon-background-size: 24px; |
| --lh-score-margin: 12px; |
| --lh-table-header-bg: #f8f9fa; |
| --lh-table-higlight-bg: hsla(0, 0%, 75%, 0.1); |
| --lh-sparkline-height: 5px; |
| --lh-sparkline-thin-height: 3px; |
| --lh-filmstrip-thumbnail-width: 60px; |
| --lh-score-icon-width: calc(var(--body-font-size) / 14 * 16); |
| --lh-category-score-width: calc(5 * var(--body-font-size)); |
| --lh-audit-vpadding: 8px; |
| --lh-audit-index-width: 18px; |
| --lh-audit-hgap: 12px; |
| --lh-audit-group-vpadding: 8px; |
| --lh-section-vpadding: 12px; |
| --chevron-size: 12px; |
| |
| /* Voodoo magic here to get narrow columns. 0 doesn't size the column like our friend 1px does */ |
| --bytes-col-width: 1px; |
| |
| --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="hsl(139, 70%, 30%)" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>'); |
| --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="hsl(31, 100%, 45%)" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>'); |
| --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="hsl(1, 73%, 45%)" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>'); |
| |
| --av-timer-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M22 34c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm0-28v8h4v-3.84c6.78.97 12 6.79 12 13.84 0 7.73-6.27 14-14 14s-14-6.27-14-14c0-3.36 1.18-6.43 3.15-8.85L24 26l2.83-2.83-13.6-13.6-.02.04C8.84 12.89 6 18.11 6 24c0 9.94 8.04 18 17.99 18S42 33.94 42 24 33.94 6 23.99 6H22zm14 18c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-24 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" fill="hsl(216, 5%, 39%)"/></svg>'); |
| --photo-filter-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="none" d="M0 0h48v48H0V0z"/><path d="M38.04 20v18H10V10h18V6H10.04c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4V20h-4zM34 20l1.88-4.12L40 14l-4.12-1.88L34 8l-1.88 4.12L28 14l4.12 1.88zm-7.5 1.5L24 16l-2.5 5.5L16 24l5.5 2.5L24 32l2.5-5.5L32 24z" fill="hsl(216, 5%, 39%)"/></svg>'); |
| --visibility-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z" fill="hsl(216, 5%, 39%)"/></svg>'); |
| --check-circle-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" fill="hsl(216, 5%, 39%)"/></svg>'); |
| --check-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"/></svg>'); |
| --search-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0a9 9 0 1 1 .001-18.001A9 9 0 0 1 19 28z" fill="hsl(216, 5%, 39%)"/><path d="M0 0h48v48H0z" fill="none" /></svg>'); |
| --remove-circle-icon-url: url('data:image/svg+xml;utf8,<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="hsl(216, 5%, 39%)"/></svg>'); |
| } |
| |
| .lh-vars.lh-devtools { |
| --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif; |
| --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; |
| --body-font-size: 12px; |
| --body-line-height: 16px; |
| --subheader-font-size: 14px; |
| --subheader-line-height: 18px; |
| --header-font-size: 16px; |
| --header-line-height: 20px; |
| --title-font-size: 20px; |
| --title-line-height: 24px; |
| --caption-font-size: 11px; |
| --caption-line-height: 14px; |
| --default-padding: 12px; |
| --section-padding: 12px; |
| --section-indent: 8px; |
| --audit-group-indent: 16px; |
| --audit-indent: 16px; |
| --expandable-indent: 16px; |
| |
| --lh-audit-vpadding: 4px; |
| --lh-audit-hgap: 12px; |
| --lh-audit-group-vpadding: 12px; |
| --lh-section-vpadding: 8px; |
| } |
| |
| @keyframes fadeIn { |
| 0% { opacity: 0;} |
| 100% { opacity: 0.6;} |
| } |
| |
| .lh-root * { |
| box-sizing: border-box; |
| } |
| |
| .lh-root { |
| font-family: var(--text-font-family); |
| font-size: var(--body-font-size); |
| margin: 0; |
| line-height: var(--body-line-height); |
| background: var(--body-background-color); |
| scroll-behavior: smooth; |
| } |
| |
| .lh-root [data-keyboard-focus="true"]:focus { |
| outline: -webkit-focus-ring-color auto 3px; |
| } |
| .lh-root summary[data-keyboard-focus="true"]:focus { |
| outline: 1px solid hsl(217, 89%, 61%); |
| } |
| |
| |
| .lh-root [hidden] { |
| display: none !important; |
| } |
| |
| .lh-audit-group a, |
| .lh-category-header__description a { |
| color: #0c50c7; |
| } |
| |
| |
| .lh-audit__description, |
| .lh-load-opportunity__description, |
| .lh-details { |
| --inner-audit-left-padding: calc(var(--text-indent) + var(--lh-audit-index-width) + 2 * var(--audit-item-gap)); |
| --inner-audit-right-padding: calc(var(--text-indent) + 2px); |
| margin-left: var(--inner-audit-left-padding); |
| margin-right: var(--inner-audit-right-padding); |
| } |
| |
| .lh-details { |
| font-size: var(--body-font-size); |
| margin-top: var(--default-padding); |
| margin-bottom: var(--default-padding); |
| /* whatever the .lh-details side margins are */ |
| width: calc(100% - var(--inner-audit-left-padding) - var(--inner-audit-right-padding)); |
| } |
| |
| .lh-details.flex .lh-code { |
| max-width: 70%; |
| } |
| |
| /* Report header */ |
| |
| .report-icon { |
| opacity: 0.7; |
| } |
| .report-icon:hover { |
| opacity: 1; |
| } |
| .report-icon[disabled] { |
| opacity: 0.3; |
| pointer-events: none; |
| } |
| |
| .report-icon--share { |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>'); |
| } |
| .report-icon--print { |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path fill="none" d="M0 0h24v24H0z"/></svg>'); |
| } |
| .report-icon--copy { |
| background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>'); |
| } |
| .report-icon--open { |
| background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/></svg>'); |
| } |
| .report-icon--download { |
| background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); |
| } |
| |
| /* Node */ |
| .lh-node { |
| display: block; |
| font-family: var(--monospace-font-family); |
| word-break: break-word; |
| color: hsl(174, 100%, 27%); |
| } |
| .lh-node:hover { |
| background: hsl(0, 0%, 98%); |
| border-radius: 2px; |
| } |
| |
| /* Score */ |
| |
| .lh-audit__score-icon { |
| margin-left: var(--lh-score-margin); |
| width: var(--lh-score-icon-width); |
| height: var(--lh-score-icon-width); |
| background: none no-repeat center center / contain; |
| } |
| |
| .lh-audit--pass .lh-audit__display-text { |
| color: var(--pass-color); |
| } |
| .lh-audit--pass .lh-audit__score-icon { |
| background-image: var(--pass-icon-url); |
| } |
| |
| .lh-audit--average .lh-audit__display-text { |
| color: var(--average-color); |
| } |
| .lh-audit--average .lh-audit__score-icon { |
| background-image: var(--average-icon-url); |
| } |
| |
| .lh-audit--fail .lh-audit__display-text { |
| color: var(--fail-color); |
| } |
| .lh-audit--fail .lh-audit__score-icon { |
| background-image: var(--fail-icon-url); |
| } |
| |
| .lh-audit--informative .lh-audit__display-text { |
| color: var(--display-value-gray); |
| } |
| |
| .lh-audit--informative .lh-audit__score-icon, |
| .lh-audit--manual .lh-audit__score-icon { |
| visibility: hidden; |
| } |
| .lh-audit--error .lh-audit__score-icon { |
| display: none; |
| } |
| |
| .lh-category-header__description, |
| .lh-audit__description { |
| color: var(--secondary-text-color); |
| } |
| |
| .lh-category-header__description { |
| font-size: var(--body-font-size); |
| margin: calc(var(--default-padding) / 2) 0 var(--default-padding); |
| } |
| |
| |
| .lh-audit__index, |
| .lh-audit__title, |
| .lh-audit__display-text, |
| .lh-audit__score-icon, |
| .lh-load-opportunity__sparkline, |
| .lh-chevron-container { |
| margin: 0 var(--audit-item-gap); |
| } |
| .lh-audit__index { |
| margin-left: 0; |
| } |
| .lh-chevron-container { |
| margin-right: 0; |
| } |
| |
| |
| .lh-audit__header .lh-audit__index { |
| width: var(--lh-audit-index-width); |
| } |
| |
| .lh-audit__title { |
| flex: 1; |
| } |
| |
| /* Expandable Details (Audit Groups, Audits) */ |
| .lh-audit__header { |
| display: flex; |
| padding: var(--lh-audit-vpadding) var(--text-indent); |
| cursor: pointer; |
| } |
| |
| .lh-audit--load-opportunity .lh-audit__header { |
| display: block; |
| } |
| |
| .lh-audit__header:hover { |
| background-color: #F8F9FA; |
| } |
| |
| .lh-audit-group__summary::-webkit-details-marker, |
| .lh-expandable-details__summary::-webkit-details-marker { |
| display: none; |
| } |
| |
| |
| /* Perf Metric */ |
| |
| .lh-metric-container { |
| display: flex; |
| } |
| |
| .lh-metric-column { |
| flex: 1; |
| } |
| .lh-metric-column:first-of-type { |
| margin-right: 20px; |
| } |
| |
| .lh-metric { |
| border-bottom: 1px solid var(--report-secondary-border-color); |
| } |
| |
| .lh-metric__innerwrap { |
| display: flex; |
| justify-content: space-between; |
| padding: 11px var(--text-indent); |
| } |
| |
| .lh-metric__details { |
| order: -1; |
| } |
| |
| .lh-metric__title { |
| font-size: var(--body-font-size); |
| line-height: var(--body-line-height); |
| display: flex; |
| } |
| |
| .lh-metric__name { |
| flex: 1; |
| } |
| |
| .lh-metrics__disclaimer { |
| color: var(--medium-75-gray); |
| text-align: right; |
| margin: var(--lh-section-vpadding) 0; |
| padding: 0 var(--text-indent); |
| } |
| |
| .lh-metric__description { |
| color: var(--secondary-text-color); |
| } |
| |
| .lh-metric__value { |
| white-space: nowrap; /* No wrapping between metric value and the icon */ |
| } |
| |
| |
| .lh-metric .lh-metric__value::after { |
| content: ''; |
| width: var(--lh-score-icon-width); |
| height: var(--lh-score-icon-width); |
| background-size: contain; |
| display: inline-block; |
| vertical-align: text-bottom; |
| margin-left: calc(var(--body-font-size) / 2); |
| } |
| |
| .lh-metric--pass .lh-metric__value { |
| color: var(--pass-color); |
| } |
| .lh-metric--pass .lh-metric__value::after { |
| background: var(--pass-icon-url) no-repeat 50% 50%; |
| } |
| |
| |
| .lh-metric--average .lh-metric__value { |
| color: var(--average-color); |
| } |
| .lh-metric--average .lh-metric__value::after { |
| background: var(--average-icon-url) no-repeat 50% 50%; |
| } |
| |
| |
| .lh-metric--fail .lh-metric__value { |
| color: var(--fail-color); |
| } |
| .lh-metric--fail .lh-metric__value::after { |
| background: var(--fail-icon-url) no-repeat 50% 50%; |
| } |
| |
| .lh-metric--error .lh-metric__value, |
| .lh-metric--error .lh-metric__description { |
| color: var(--fail-color); |
| } |
| |
| /* Hide icon if there was an error */ |
| .lh-metric--error .lh-metric__value::after { |
| display: none; |
| } |
| |
| /* Perf load opportunity */ |
| |
| .lh-load-opportunity__cols { |
| display: flex; |
| align-items: flex-start; |
| } |
| |
| .lh-load-opportunity__header .lh-load-opportunity__col { |
| background-color: var(--medium-50-gray); |
| color: var(--medium-75-gray); |
| text-align: center; |
| display: unset; |
| line-height: calc(2.3 * var(--body-font-size)); |
| } |
| |
| .lh-load-opportunity__col { |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .lh-load-opportunity__col--one { |
| flex: 5; |
| margin-right: 2px; |
| } |
| .lh-load-opportunity__col--two { |
| flex: 4; |
| } |
| |
| .lh-audit--load-opportunity .lh-audit__display-text { |
| text-align: right; |
| flex: 0 0 calc(3 * var(--body-font-size)); |
| } |
| |
| |
| /* Sparkline */ |
| |
| .lh-load-opportunity__sparkline { |
| flex: 1; |
| margin-top: calc((var(--body-line-height) - var(--lh-sparkline-height)) / 2); |
| } |
| |
| .lh-sparkline { |
| height: var(--lh-sparkline-height); |
| width: 100%; |
| } |
| |
| .lh-sparkline__bar { |
| height: 100%; |
| float: right; |
| } |
| |
| .lh-audit--pass .lh-sparkline__bar { |
| background: var(--pass-color); |
| } |
| |
| .lh-audit--average .lh-sparkline__bar { |
| background: var(--average-color); |
| } |
| |
| .lh-audit--fail .lh-sparkline__bar { |
| background: var(--fail-color); |
| } |
| |
| |
| |
| /* Filmstrip */ |
| |
| .lh-filmstrip-container { |
| padding: 0 var(--expandable-indent); |
| margin: 0 auto; |
| } |
| |
| |
| .lh-filmstrip { |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| padding-bottom: var(--default-padding); |
| } |
| |
| .lh-filmstrip__frame { |
| text-align: right; |
| position: relative; |
| } |
| |
| .lh-filmstrip__thumbnail { |
| border: 1px solid var(--report-secondary-border-color); |
| max-height: 100px; |
| max-width: 60px; |
| } |
| |
| /* Audit */ |
| |
| .lh-audit { |
| border-bottom: 1px solid var(--report-secondary-border-color); |
| } |
| |
| .lh-audit:last-child { |
| border-bottom: none; |
| } |
| |
| .lh-audit--error .lh-audit__display-text { |
| color: var(--fail-color); |
| } |
| |
| /* Audit Group */ |
| |
| .lh-audit-group { |
| padding: var(--lh-audit-group-vpadding) 0; |
| border-bottom: 1px solid var(--report-secondary-border-color); |
| } |
| |
| .lh-audit-group:last-child { |
| border-bottom: none; |
| } |
| |
| .lh-audit-group__header { |
| font-size: var(--subheader-font-size); |
| line-height: var(--subheader-line-height); |
| color: var(--subheader-color); |
| flex: 1; |
| font-weight: bold; |
| } |
| |
| .lh-audit-group__header::before { |
| content: ''; |
| width: calc(var(--subheader-font-size) / 14 * 24); |
| height: calc(var(--subheader-font-size) / 14 * 24); |
| margin-right: calc(var(--subheader-font-size) / 2); |
| background: var(--medium-100-gray) none no-repeat center / 16px; |
| display: inline-block; |
| border-radius: 50%; |
| vertical-align: middle; |
| } |
| |
| /* A11y/Seo groups within Passed don't get an icon */ |
| .lh-audit-group--unadorned .lh-audit-group__header::before { |
| content: none; |
| } |
| |
| |
| .lh-audit-group--manual .lh-audit-group__header::before { |
| background-image: var(--search-icon-url); |
| } |
| .lh-passed-audits .lh-audit-group__header::before { |
| background-image: var(--check-icon-url); |
| } |
| .lh-audit-group--diagnostics .lh-audit-group__header::before { |
| background-image: var(--search-icon-url); |
| } |
| .lh-audit-group--opportunities .lh-audit-group__header::before { |
| background-image: var(--photo-filter-icon-url); |
| } |
| .lh-audit-group--metrics .lh-audit-group__header::before { |
| background-image: var(--av-timer-icon-url); |
| } |
| .lh-audit-group--not-applicable .lh-audit-group__header::before { |
| background-image: var(--remove-circle-icon-url); |
| } |
| |
| /* Removing too much whitespace */ |
| .lh-audit-group--metrics { |
| margin-top: -28px; |
| border-bottom: none; |
| } |
| |
| .lh-audit-group__summary { |
| display: flex; |
| justify-content: space-between; |
| padding-right: var(--text-indent); |
| } |
| |
| .lh-audit-group__itemcount { |
| color: var(--display-value-gray); |
| margin: 0 10px; |
| } |
| |
| .lh-audit-group__description { |
| font-size: var(--body-font-size); |
| color: var(--medium-75-gray); |
| margin: var(--lh-audit-group-vpadding) 0; |
| } |
| |
| .lh-audit-group--unadorned .lh-audit-group__description { |
| margin-top: 0; |
| } |
| |
| .lh-audit-explanation { |
| margin: var(--lh-audit-vpadding) 0 calc(var(--lh-audit-vpadding) / 2); |
| line-height: var(--caption-line-height); |
| } |
| |
| .lh-audit--fail .lh-audit-explanation { |
| color: var(--fail-color); |
| } |
| |
| /* Report */ |
| |
| .lh-container { |
| display: flex; |
| max-width: var(--report-content-width); |
| word-wrap: break-word; |
| margin: 0 auto; |
| } |
| |
| .lh-header-sticky { |
| position: sticky; |
| top: 0; |
| width: 100%; |
| z-index: 2; |
| will-change: transform; |
| } |
| .lh-header-plain { |
| margin-top: var(--section-padding); |
| } |
| |
| .lh-header-container { |
| display: block; |
| margin: 0 auto; |
| max-width: var(--report-content-width); |
| position: relative; |
| word-wrap: break-word; |
| } |
| |
| .lh-report { |
| background-color: #fff; |
| } |
| @media screen { |
| .lh-report { |
| width: var(--report-width); |
| } |
| } |
| |
| .lh-exception { |
| font-size: large; |
| } |
| |
| .lh-code { |
| white-space: normal; |
| margin-top: 0; |
| font-size: 85%; |
| word-break: break-word; |
| } |
| |
| .lh-warnings { |
| --item-margin: calc(var(--body-line-height) / 6); |
| border: 1px solid var(--average-color); |
| border-radius: 4px; |
| margin: var(--lh-audit-vpadding) 0; |
| padding: calc(var(--lh-audit-vpadding) / 2) var(--lh-audit-vpadding); |
| } |
| |
| .lh-warnings--toplevel { |
| --item-margin: calc(var(--header-line-height) / 4); |
| color: var(--secondary-text-color); |
| margin: var(--section-padding); |
| padding: var(--section-padding); |
| } |
| .lh-warnings ul { |
| padding-left: calc(var(--section-padding) * 2); |
| margin: 0; |
| } |
| .lh-warnings li { |
| margin: var(--item-margin) 0; |
| } |
| .lh-warnings li:last-of-type { |
| margin-bottom: 0; |
| } |
| |
| .lh-scores-header { |
| display: flex; |
| justify-content: center; |
| overflow-x: hidden; |
| position: relative; |
| padding: var(--section-indent) calc(var(--section-indent) / 2) calc(var(--section-indent) * 2); |
| } |
| .lh-scores-header__solo { |
| padding: 0; |
| border: 0; |
| } |
| |
| .lh-scorescale { |
| color: var(--medium-75-gray); |
| padding: 0 calc(var(--section-indent) * 1.5) 0; |
| text-align: right; |
| transform-origin: bottom right; |
| will-change: opacity; /* opacity is changed on scroll */ |
| } |
| |
| .lh-scorescale-range { |
| margin-left: 10px; |
| } |
| |
| .lh-scorescale-range::before { |
| content: ''; |
| width: var(--body-font-size); |
| height: calc(var(--body-font-size) * .60); |
| border-radius: 4px; |
| display: inline-block; |
| margin: 0 5px; |
| } |
| |
| .lh-scorescale-range--pass::before { |
| background-color: var(--pass-color); |
| } |
| |
| .lh-scorescale-range--average::before { |
| background-color: var(--average-color); |
| } |
| |
| .lh-scorescale-range--fail::before { |
| background-color: var(--fail-color); |
| } |
| |
| /* Hide category score gauages if it's a single category report */ |
| .lh-header--solo-category .lh-scores-wrapper { |
| display: none; |
| } |
| |
| |
| .lh-categories { |
| width: 100%; |
| overflow: hidden; |
| } |
| |
| .lh-category { |
| --circle-size: calc(2.5 * var(--header-font-size)); |
| |
| padding: var(--section-padding); |
| border-top: 1px solid var(--report-border-color); |
| } |
| |
| .lh-category:first-of-type { |
| padding-top: calc(2 * var(--section-padding)); |
| border: none; |
| } |
| |
| /* section hash link jump should preserve fixed header |
| https://css-tricks.com/hash-tag-links-padding/ |
| */ |
| .lh-category > .lh-permalink { |
| margin-top: calc((var(--report-header-height) + var(--default-padding)) * -1); |
| padding-bottom: calc(var(--report-header-height) + var(--default-padding)); |
| display: block; |
| visibility: hidden; |
| } |
| |
| .lh-category-header { |
| font-size: var(--header-font-size); |
| min-height: var(--circle-size); |
| margin-bottom: var(--lh-section-vpadding); |
| } |
| |
| .lh-category-header__title { |
| line-height: 24px; |
| } |
| |
| .lh-category-header .lh-score__gauge .lh-gauge__label { |
| display: none; |
| } |
| |
| |
| .lh-category-header .lh-score__gauge { |
| float: right; |
| } |
| |
| .lh-category .lh-score__gauge { |
| margin-left: var(--section-indent); |
| } |
| |
| .lh-category-header .lh-audit__title { |
| font-size: var(--header-font-size); |
| line-height: var(--header-line-height); |
| } |
| |
| .lh-passed-audits[open] summary.lh-passed-audits-summary { |
| margin-bottom: calc(var(--default-padding) * 2); |
| } |
| |
| summary.lh-passed-audits-summary { |
| margin: calc(var(--default-padding) * 2) var(--default-padding); |
| margin-left: var(--default-padding); |
| margin-bottom: 0; |
| font-size: 15px; |
| display: flex; |
| align-items: center; |
| } |
| |
| #lh-log { |
| position: fixed; |
| background-color: #323232; |
| color: #fff; |
| min-height: 48px; |
| min-width: 288px; |
| padding: 16px 24px; |
| box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| border-radius: 2px; |
| margin: 12px; |
| font-size: 14px; |
| cursor: default; |
| transition: transform 0.3s, opacity 0.3s; |
| transform: translateY(100px); |
| opacity: 0; |
| -webkit-font-smoothing: antialiased; |
| bottom: 0; |
| left: 0; |
| z-index: 3; |
| } |
| |
| #lh-log.show { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| /* 964 fits the min-width of the filmstrip */ |
| @media screen and (max-width: 964px) { |
| .lh-report { |
| margin-left: 0; |
| width: 100%; |
| min-width: 400px; |
| } |
| } |
| |
| @media print { |
| body { |
| -webkit-print-color-adjust: exact; /* print background colors */ |
| } |
| .lh-container { |
| display: block; |
| } |
| .lh-report { |
| margin-left: 0; |
| padding-top: 0; |
| } |
| .lh-categories { |
| margin-top: 0; |
| } |
| } |
| |
| .lh-table { |
| --image-preview-size: 24px; |
| border-collapse: collapse; |
| } |
| |
| .lh-table thead { |
| background: var(--lh-table-header-bg); |
| } |
| .lh-table thead th { |
| color: var(--medium-75-gray); |
| font-weight: normal; |
| } |
| |
| .lh-table tbody tr:nth-child(even) { |
| background-color: var(--lh-table-higlight-bg); |
| } |
| |
| .lh-table th, |
| .lh-table td { |
| padding: 8px 6px; |
| } |
| |
| .lh-table-column--text, |
| .lh-table-column--bytes, |
| .lh-table-column--ms { |
| text-align: right; |
| } |
| |
| .lh-table-column--thumbnail { |
| width: calc(var(--image-preview-size) * 2); |
| } |
| |
| .lh-table-column--url { |
| text-align: left; |
| min-width: 250px; |
| white-space: nowrap; |
| max-width: 0; |
| } |
| |
| /* Keep bytes columns narrow if they follow the URL column */ |
| .lh-table-column--url + th.lh-table-column--bytes, |
| .lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes { |
| width: var(--bytes-col-width); |
| } |
| |
| .lh-table-column--code { |
| max-width: var(--url-col-max-width); |
| } |
| |
| .lh-text__url { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .lh-text__url:hover { |
| text-decoration: underline dotted #999; |
| text-decoration-skip-ink: auto; |
| } |
| |
| .lh-text__url > .lh-text, .lh-text__url-host { |
| display: inline-block; |
| } |
| |
| .lh-text__url-host { |
| margin-left: calc(var(--body-font-size) / 2); |
| opacity: 0.6; |
| font-size: 90% |
| } |
| |
| .lh-thumbnail { |
| height: var(--image-preview-size); |
| width: var(--image-preview-size); |
| object-fit: contain; |
| } |
| |
| /* Chevron |
| https://codepen.io/paulirish/pen/LmzEmK |
| */ |
| .lh-chevron { |
| --chevron-angle: 42deg; |
| width: var(--chevron-size); |
| height: var(--chevron-size); |
| margin-top: calc((var(--body-line-height) - 12px) / 2); |
| } |
| |
| .lh-chevron__lines { |
| transition: transform 0.4s; |
| transform: translateY(var(--body-line-height)); |
| } |
| .lh-chevron__line { |
| stroke: var(--display-value-gray); |
| stroke-width: var(--chevron-size); |
| stroke-linecap: square; |
| transform-origin: 50%; |
| transform: rotate(var(--chevron-angle)); |
| transition: transform 300ms, stroke 300ms; |
| } |
| |
| .lh-audit-group > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right, |
| .lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-left, |
| .lh-audit > .lh-expandable-details .lh-chevron__line-right, |
| .lh-audit > .lh-expandable-details[open] .lh-chevron__line-left { |
| transform: rotate(calc(var(--chevron-angle) * -1)); |
| } |
| |
| .lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right, |
| .lh-audit > .lh-expandable-details[open] .lh-chevron__line-right { |
| transform: rotate(var(--chevron-angle)); |
| } |
| |
| .lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__lines, |
| .lh-audit > .lh-expandable-details[open] .lh-chevron__lines { |
| transform: translateY(calc(var(--chevron-size) * -1)); |
| } |
| |
| |
| |
| /* Tooltip */ |
| .tooltip-boundary { |
| position: relative; |
| } |
| |
| .tooltip { |
| position: absolute; |
| display: none; /* Don't retain these layers when not needed */ |
| opacity: 0; |
| background: #ffffff; |
| min-width: 246px; |
| max-width: 275px; |
| padding: 15px; |
| border-radius: 5px; |
| text-align: initial; |
| } |
| /* shrink tooltips to not be cutoff on left edge of narrow viewports |
| 45vw is chosen to be ~= width of the left column of metrics |
| */ |
| @media screen and (max-width: 535px) { |
| .tooltip { |
| min-width: 45vw; |
| padding: 3vw; |
| } |
| } |
| |
| .tooltip-boundary:hover { |
| background-color: #F8F9FA; |
| } |
| |
| .tooltip-boundary:hover .tooltip { |
| display: block; |
| animation: fadeInTooltip 250ms; |
| animation-fill-mode: forwards; |
| animation-delay: 850ms; |
| bottom: 100%; |
| z-index: 1; |
| will-change: opacity; |
| right: 0; |
| } |
| |
| .tooltip::before { |
| content: ""; |
| border: solid transparent; |
| border-bottom-color: #fff; |
| border-width: 10px; |
| position: absolute; |
| bottom: -20px; |
| right: 6px; |
| transform: rotate(180deg); |
| pointer-events: none; |
| } |
| |
| @keyframes fadeInTooltip { |
| 0% { opacity: 0; } |
| 75% { opacity: 1; } |
| 100% { opacity: 1; filter: drop-shadow(1px 0px 1px #aaa) drop-shadow(0px 2px 4px hsla(206, 6%, 25%, 0.15)); } |
| } |