| <!-- |
| @license |
| Copyright 2018 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. |
| --> |
| |
| <!-- Lighthouse run warnings --> |
| <template id="tmpl-lh-warnings--toplevel"> |
| <div class="lh-warnings lh-warnings--toplevel"> |
| <strong class="lh-warnings__msg"></strong> |
| <ul></ul> |
| </div> |
| </template> |
| |
| <!-- Lighthouse score scale --> |
| <template id="tmpl-lh-scorescale"> |
| <div class="lh-scorescale"> |
| <span class="lh-scorescale-range lh-scorescale-range--fail">0–49</span> |
| <span class="lh-scorescale-range lh-scorescale-range--average">50–89</span> |
| <span class="lh-scorescale-range lh-scorescale-range--pass">90–100</span> |
| </div> |
| </template> |
| |
| <!-- Toggle arrow chevron --> |
| <template id="tmpl-lh-chevron"> |
| <svg class="lh-chevron" title="See audits" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100"> |
| <g class="lh-chevron__lines"> |
| <path class="lh-chevron__line lh-chevron__line-left" d="M10 50h40"></path> |
| <path class="lh-chevron__line lh-chevron__line-right" d="M90 50H50"></path> |
| </g> |
| </svg> |
| </template> |
| |
| <!-- Lighthouse category header --> |
| <template id="tmpl-lh-category-header"> |
| <div class="lh-category-header"> |
| <div class="lh-score__gauge" role="heading" aria-level="2"></div> |
| <div class="lh-category-header__description"></div> |
| </div> |
| </template> |
| |
| <!-- Lighthouse clump --> |
| <template id="tmpl-lh-clump"> |
| <!-- TODO: group classes shouldn't be reused for clumps. --> |
| <details class="lh-clump lh-audit-group"> |
| <summary> |
| <div class="lh-audit-group__summary"> |
| <div class="lh-audit-group__header"> |
| <span class="lh-audit-group__title"></span> |
| <span class="lh-audit-group__itemcount"></span> |
| <!-- .lh-audit-group__description will be added here --> |
| <!-- .lh-metrics-toggle will be added here --> |
| </div> |
| <div class=""></div> |
| </div> |
| </summary> |
| </details> |
| </template> |
| |
| <!-- Lighthouse metrics toggle --> |
| <template id="tmpl-lh-metrics-toggle"> |
| <div class="lh-metrics-toggle"> |
| <input class="lh-metrics-toggle__input" type="checkbox" id="toggle-metric-descriptions" aria-label="Toggle the display of metric descriptions"> |
| <label class="lh-metrics-toggle__label" for="toggle-metric-descriptions"> |
| <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--less" aria-hidden="true"> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> |
| <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" /> |
| </svg> |
| </div> |
| <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--more" aria-hidden="true"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> |
| <path class="lh-metrics-toggle__lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" /> |
| </svg> |
| </div> |
| </label> |
| </div> |
| </template> |
| |
| <!-- Lighthouse audit --> |
| <template id="tmpl-lh-audit"> |
| <div class="lh-audit"> |
| <details class="lh-expandable-details"> |
| <summary> |
| <div class="lh-audit__header lh-expandable-details__summary"> |
| <span class="lh-audit__score-icon"></span> |
| <span class="lh-audit__title-and-text"> |
| <span class="lh-audit__title"></span> |
| <span class="lh-audit__display-text"></span> |
| </span> |
| <div class="lh-chevron-container"></div> |
| </div> |
| </summary> |
| <div class="lh-audit__description"></div> |
| <div class="lh-audit__stackpacks"></div> |
| </details> |
| </div> |
| </template> |
| |
| <!-- Lighthouse perf metric --> |
| <template id="tmpl-lh-metric"> |
| <div class="lh-metric"> |
| <div class="lh-metric__innerwrap"> |
| <span class="lh-metric__title"></span> |
| <div class="lh-metric__value"></div> |
| <div class="lh-metric__description"></div> |
| </div> |
| </div> |
| </template> |
| |
| <!-- Lighthouse perf opportunity --> |
| <template id="tmpl-lh-opportunity"> |
| <div class="lh-audit lh-audit--load-opportunity"> |
| <details class="lh-expandable-details"> |
| <summary> |
| <div class="lh-audit__header lh-expandable-details__summary"> |
| <div class="lh-load-opportunity__cols"> |
| <div class="lh-load-opportunity__col lh-load-opportunity__col--one"> |
| <span class="lh-audit__score-icon"></span> |
| <div class="lh-audit__title"></div> |
| </div> |
| <div class="lh-load-opportunity__col lh-load-opportunity__col--two"> |
| <div class="lh-load-opportunity__sparkline"> |
| <div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div> |
| </div> |
| <div class="lh-audit__display-text"></div> |
| <div class="lh-chevron-container" title="See resources"></div> |
| </div> |
| </div> |
| </div> |
| </summary> |
| <div class="lh-audit__description"></div> |
| <div class="lh-audit__stackpacks"></div> |
| </details> |
| </div> |
| </template> |
| |
| <!-- Lighthouse perf opportunity header --> |
| <template id="tmpl-lh-opportunity-header"> |
| <div class="lh-load-opportunity__header lh-load-opportunity__cols"> |
| <div class="lh-load-opportunity__col lh-load-opportunity__col--one"></div> |
| <div class="lh-load-opportunity__col lh-load-opportunity__col--two"></div> |
| </div> |
| </template> |
| |
| <!-- Lighthouse score container --> |
| <template id="tmpl-lh-scores-wrapper"> |
| <style> |
| .lh-scores-container { |
| display: flex; |
| flex-direction: column; |
| padding: var(--scores-container-padding); |
| position: relative; |
| width: 100%; |
| } |
| |
| .lh-sticky-header { |
| --gauge-circle-size: 36px; |
| --plugin-badge-size: 18px; |
| --plugin-icon-size: 75%; |
| --gauge-wrapper-width: 60px; |
| --gauge-percentage-font-size: 13px; |
| position: sticky; |
| left: 0; |
| right: 0; |
| top: var(--topbar-height); |
| font-weight: 700; |
| display: none; |
| justify-content: center; |
| background-color: var(--sticky-header-background-color); |
| border-bottom: 1px solid var(--color-gray-200); |
| padding-top: var(--score-container-padding); |
| padding-bottom: 4px; |
| z-index: 1; |
| pointer-events: none; |
| } |
| |
| .lh-sticky-header--visible { |
| display: grid; |
| grid-auto-flow: column; |
| pointer-events: auto; |
| } |
| |
| /* Disable the gauge arc animation for the sticky header, so toggling display: none |
| does not play the animation. */ |
| .lh-sticky-header .lh-gauge-arc { |
| animation: none; |
| } |
| |
| .lh-sticky-header .lh-gauge__label { |
| display: none; |
| } |
| |
| .lh-highlighter { |
| width: var(--gauge-wrapper-width); |
| height: 1px; |
| background-color: var(--highlighter-background-color); |
| /* Position at bottom of first gauge in sticky header. */ |
| position: absolute; |
| grid-column: 1; |
| bottom: -1px; |
| } |
| |
| .lh-gauge__wrapper:first-of-type { |
| contain: none; |
| } |
| </style> |
| <div class="lh-scores-wrapper"> |
| <div class="lh-scores-container"> |
| <div class="pyro"> |
| <div class="before"></div> |
| <div class="after"></div> |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <!-- Lighthouse topbar --> |
| <template id="tmpl-lh-topbar"> |
| <style> |
| .lh-topbar { |
| position: sticky; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 1000; |
| display: flex; |
| align-items: center; |
| height: var(--topbar-height); |
| background-color: var(--topbar-background-color); |
| padding: var(--topbar-padding); |
| } |
| |
| .lh-topbar__logo { |
| width: var(--topbar-logo-size); |
| height: var(--topbar-logo-size); |
| user-select: none; |
| flex: none; |
| } |
| .lh-topbar__logo .shape { |
| fill: var(--report-text-color); |
| } |
| |
| .lh-topbar__url { |
| margin: var(--topbar-padding); |
| text-decoration: none; |
| color: var(--report-text-color); |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| .lh-tools { |
| margin-left: auto; |
| will-change: transform; |
| } |
| .lh-tools__button { |
| width: var(--tools-icon-size); |
| height: var(--tools-icon-size); |
| cursor: pointer; |
| margin-right: 5px; |
| /* This is actually a button element, but we want to style it like a transparent div. */ |
| display: flex; |
| background: none; |
| color: inherit; |
| border: none; |
| padding: 0; |
| font: inherit; |
| outline: inherit; |
| } |
| .lh-tools__button svg { |
| fill: var(--tools-icon-color); |
| } |
| .dark .lh-tools__button svg { |
| filter: invert(1); |
| } |
| .lh-tools__button.active + .lh-tools__dropdown { |
| opacity: 1; |
| clip: rect(-1px, 187px, 242px, -3px); |
| visibility: visible; |
| } |
| .lh-tools__dropdown { |
| position: absolute; |
| background-color: var(--report-background-color); |
| border: 1px solid var(--report-border-color); |
| border-radius: 3px; |
| padding: calc(var(--default-padding) / 2) 0; |
| cursor: pointer; |
| top: 36px; |
| right: 0; |
| box-shadow: 1px 1px 3px #ccc; |
| min-width: 125px; |
| clip: rect(0, 164px, 0, 0); |
| visibility: hidden; |
| opacity: 0; |
| transition: all 200ms cubic-bezier(0,0,0.2,1); |
| } |
| .lh-tools__dropdown a { |
| display: block; |
| color: currentColor; |
| text-decoration: none; |
| white-space: nowrap; |
| padding: 0 12px; |
| line-height: 2; |
| } |
| .lh-tools__dropdown a:hover, |
| .lh-tools__dropdown a:focus { |
| background-color: var(--color-gray-200); |
| outline: none; |
| } |
| .lh-tools__dropdown .report-icon { |
| cursor: pointer; |
| background-repeat: no-repeat; |
| background-position: 8px 50%; |
| background-size: 18px; |
| background-color: transparent; |
| text-indent: 18px; |
| } |
| .dark .report-icon { |
| color: var(--color-gray-900); |
| filter: invert(1); |
| } |
| .dark .lh-tools__dropdown a:hover, |
| .dark .lh-tools__dropdown a:focus { |
| background-color: #BDBDBD; |
| } |
| /* copy icon needs slight adjustments to look great */ |
| .lh-tools__dropdown .report-icon--copy { |
| background-size: 16px; |
| background-position: 9px 50%; |
| } |
| /* save-as-gist option hidden in report */ |
| .lh-tools__dropdown .lh-tools--gist { |
| display: none; |
| } |
| |
| @media screen and (max-width: 964px) { |
| .lh-tools__dropdown { |
| right: 0; |
| left: initial; |
| } |
| } |
| @media print { |
| .lh-topbar { |
| position: static; |
| margin-left: 0; |
| } |
| } |
| </style> |
| |
| <div class="lh-topbar"> |
| <!-- Lighthouse logo. --> |
| <svg class="lh-topbar__logo" viewBox="0 0 24 24"> |
| <defs> |
| <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a"> |
| <stop stop-color="#262626" stop-opacity=".1" offset="0%"/> |
| <stop stop-color="#262626" stop-opacity="0" offset="100%"/> |
| </linearGradient> |
| <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b"> |
| <stop stop-color="#262626" stop-opacity=".1" offset="0%"/> |
| <stop stop-color="#262626" stop-opacity="0" offset="100%"/> |
| </linearGradient> |
| <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c"> |
| <stop stop-color="#262626" stop-opacity=".1" offset="0%"/> |
| <stop stop-color="#262626" stop-opacity="0" offset="100%"/> |
| </linearGradient> |
| <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d"> |
| <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/> |
| <stop stop-color="#FFF" stop-opacity="0" offset="100%"/> |
| </linearGradient> |
| </defs> |
| <g fill="none" fill-rule="evenodd"> |
| <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/> |
| <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/> |
| <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/> |
| <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/> |
| <path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/> |
| <path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/> |
| <path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/> |
| </g> |
| </svg> |
| |
| <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a> |
| |
| <div class="lh-tools"> |
| <button id="lh-tools-button" class="report-icon report-icon--share lh-tools__button" title="Tools menu" aria-label="Toggle report tools menu" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-dropdown"> |
| <svg width="100%" height="100%" viewBox="0 0 24 24"> |
| <path d="M0 0h24v24H0z" fill="none"/> |
| <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/> |
| </svg> |
| </button> |
| <div id="lh-tools-dropdown" role="menu" class="lh-tools__dropdown" aria-labelledby="lh-tools-button"> |
| <!-- TODO(i18n): localize tools dropdown --> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--print" data-action="print-expanded">Print Expanded</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open lh-tools--viewer" data-action="open-viewer">Open in Viewer</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open lh-tools--gist" data-action="save-gist">Save as Gist</a> |
| <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--dark" data-action="toggle-dark">Toggle Dark Theme</a> |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <!-- Lighthouse header --> |
| <template id="tmpl-lh-heading"> |
| <style> |
| /* CSS Fireworks. Originally by Eddie Lin |
| https://codepen.io/paulirish/pen/yEVMbP |
| */ |
| .pyro { |
| display: none; |
| z-index: 1; |
| pointer-events: none; |
| } |
| .score100 .pyro { |
| display: block; |
| } |
| .score100 .lh-lighthouse stop:first-child { |
| stop-color: hsla(200, 12%, 95%, 0); |
| } |
| .score100 .lh-lighthouse stop:last-child { |
| stop-color: hsla(65, 81%, 76%, 1); |
| } |
| |
| .pyro > .before, .pyro > .after { |
| position: absolute; |
| width: 5px; |
| height: 5px; |
| border-radius: 2.5px; |
| box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff; |
| animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; |
| animation-delay: 1s, 1s, 1s; |
| } |
| |
| .pyro > .after { |
| animation-delay: 2.25s, 2.25s, 2.25s; |
| animation-duration: 1.25s, 1.25s, 6.25s; |
| } |
| .fireworks-paused .pyro > div { |
| animation-play-state: paused; |
| } |
| |
| @keyframes bang { |
| to { |
| box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47; |
| } |
| } |
| @keyframes gravity { |
| to { |
| transform: translateY(80px); |
| opacity: 0; |
| } |
| } |
| @keyframes position { |
| 0%, 19.9% { |
| margin-top: 4%; |
| margin-left: 47%; |
| } |
| 20%, 39.9% { |
| margin-top: 7%; |
| margin-left: 30%; |
| } |
| 40%, 59.9% { |
| margin-top: 6%; |
| margin-left: 70%; |
| } |
| 60%, 79.9% { |
| margin-top: 3%; |
| margin-left: 20%; |
| } |
| 80%, 99.9% { |
| margin-top: 3%; |
| margin-left: 80%; |
| } |
| } |
| </style> |
| |
| <div class="lh-header-container"> |
| <div class="lh-scores-wrapper-placeholder"></div> |
| </div> |
| </template> |
| |
| |
| <!-- Lighthouse footer --> |
| <template id="tmpl-lh-footer"> |
| <style> |
| .lh-footer { |
| padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2); |
| max-width: var(--report-width); |
| margin: 0 auto; |
| } |
| .lh-footer .lh-generated { |
| text-align: center; |
| } |
| .lh-env__title { |
| font-size: var(--env-item-font-size-big); |
| line-height: var(--env-item-line-height-big); |
| text-align: center; |
| padding: var(--score-container-padding); |
| } |
| .lh-env { |
| padding: var(--default-padding) 0; |
| } |
| .lh-env__items { |
| padding-left: 16px; |
| margin: 0 0 var(--audits-margin-bottom); |
| padding: 0; |
| } |
| .lh-env__items .lh-env__item:nth-child(2n) { |
| background-color: var(--env-item-background-color); |
| } |
| .lh-env__item { |
| display: flex; |
| padding: var(--env-item-padding); |
| position: relative; |
| } |
| span.lh-env__name { |
| font-weight: bold; |
| min-width: var(--env-name-min-width); |
| flex: 0.5; |
| padding: 0 8px; |
| } |
| span.lh-env__description { |
| text-align: left; |
| flex: 1; |
| } |
| </style> |
| <footer class="lh-footer"> |
| <!-- TODO(i18n): localize runtime settings --> |
| <div class="lh-env"> |
| <div class="lh-env__title">Runtime Settings</div> |
| <ul class="lh-env__items"> |
| <template id="tmpl-lh-env__items"> |
| <li class="lh-env__item"> |
| <span class="lh-env__name"></span> |
| <span class="lh-env__description"></span> |
| </li> |
| </template> |
| </ul> |
| </div> |
| |
| <div class="lh-generated"> |
| Generated by <b>Lighthouse</b> <span class="lh-footer__version"></span> | |
| <a href="https://github.com/GoogleChrome/Lighthouse/issues" target="_blank" rel="noopener">File an issue</a> |
| </div> |
| </footer> |
| </template> |
| |
| <!-- Lighthouse score gauge --> |
| <template id="tmpl-lh-gauge"> |
| <a href="#" class="lh-gauge__wrapper"> |
| <!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. --> |
| <div class="lh-gauge__svg-wrapper"> |
| <svg viewBox="0 0 120 120" class="lh-gauge"> |
| <circle class="lh-gauge-base" r="56" cx="60" cy="60"></circle> |
| <circle class="lh-gauge-arc" transform="rotate(-90 60 60)" r="56" cx="60" cy="60"></circle> |
| </svg> |
| </div> |
| <div class="lh-gauge__percentage"></div> |
| <!-- TODO: should likely be an h2 --> |
| <div class="lh-gauge__label"></div> |
| </a> |
| </template> |
| |
| |
| <!-- Lighthouse PWA badge gauge --> |
| <template id="tmpl-lh-gauge--pwa"> |
| <style> |
| .lh-gauge--pwa .lh-gauge--pwa__component { |
| display: none; |
| } |
| .lh-gauge--pwa__wrapper:not(.lh-badged--all) .lh-gauge--pwa__logo > path { |
| /* Gray logo unless everything is passing. */ |
| fill: #B0B0B0; |
| } |
| |
| .lh-gauge--pwa__disc { |
| fill: var(--color-gray-200); |
| } |
| |
| .lh-gauge--pwa__logo--primary-color { |
| fill: #304FFE; |
| } |
| |
| .lh-gauge--pwa__logo--secondary-color { |
| fill: #3D3D3D; |
| } |
| .dark .lh-gauge--pwa__logo--secondary-color { |
| fill: #D8B6B6; |
| } |
| |
| /* No passing groups. */ |
| .lh-gauge--pwa__wrapper:not([class*='lh-badged--']) .lh-gauge--pwa__na-line { |
| display: inline; |
| } |
| /* Just optimized. Same n/a line as no passing groups. */ |
| .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized:not(.lh-badged--pwa-installable):not(.lh-badged--pwa-fast-reliable) .lh-gauge--pwa__na-line { |
| display: inline; |
| } |
| |
| /* Just fast and reliable. */ |
| .lh-gauge--pwa__wrapper.lh-badged--pwa-fast-reliable:not(.lh-badged--pwa-installable) .lh-gauge--pwa__fast-reliable-badge { |
| display: inline; |
| } |
| |
| /* Just installable. */ |
| .lh-gauge--pwa__wrapper.lh-badged--pwa-installable:not(.lh-badged--pwa-fast-reliable) .lh-gauge--pwa__installable-badge { |
| display: inline; |
| } |
| |
| /* Fast and reliable and installable. */ |
| .lh-gauge--pwa__wrapper.lh-badged--pwa-fast-reliable.lh-badged--pwa-installable .lh-gauge--pwa__fast-reliable-installable-badges { |
| display: inline; |
| } |
| |
| /* All passing groups. */ |
| .lh-gauge--pwa__wrapper.lh-badged--all .lh-gauge--pwa__check-circle { |
| display: inline; |
| } |
| </style> |
| |
| <a href="#" class="lh-gauge__wrapper lh-gauge--pwa__wrapper"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" class="lh-gauge lh-gauge--pwa"> |
| <defs> |
| <linearGradient id="lh-gauge--pwa__check-circle__gradient" x1="50%" y1="0%" x2="50%" y2="100%"> |
| <stop stop-color="#00C852" offset="0%"></stop> |
| <stop stop-color="#009688" offset="100%"></stop> |
| </linearGradient> |
| <linearGradient id="lh-gauge--pwa__installable__shadow-gradient" x1="76.056%" x2="24.111%" y1="82.995%" y2="24.735%"> |
| <stop stop-color="#A5D6A7" offset="0%"></stop> |
| <stop stop-color="#80CBC4" offset="100%"></stop> |
| </linearGradient> |
| <linearGradient id="lh-gauge--pwa__fast-reliable__shadow-gradient" x1="76.056%" y1="82.995%" x2="25.678%" y2="26.493%"> |
| <stop stop-color="#64B5F6" offset="0%"></stop> |
| <stop stop-color="#2979FF" offset="100%"></stop> |
| </linearGradient> |
| |
| <g id="lh-gauge--pwa__fast-reliable-badge"> |
| <circle fill="#FFFFFF" cx="10" cy="10" r="10"></circle> |
| <path fill="#304FFE" d="M10 3.58l5.25 2.34v3.5c0 3.23-2.24 6.26-5.25 7-3.01-.74-5.25-3.77-5.25-7v-3.5L10 3.58zm-.47 10.74l2.76-4.83.03-.07c.04-.08 0-.24-.22-.24h-1.64l.47-3.26h-.47l-2.7 4.77c-.02.01.05-.1-.04.05-.09.16-.1.31.18.31h1.63l-.47 3.27h.47z"/> |
| </g> |
| <g id="lh-gauge--pwa__installable-badge"> |
| <circle fill="#FFFFFF" cx="10" cy="10" r="10"></circle> |
| <path fill="#009688" d="M10 4.167A5.835 5.835 0 0 0 4.167 10 5.835 5.835 0 0 0 10 15.833 5.835 5.835 0 0 0 15.833 10 5.835 5.835 0 0 0 10 4.167zm2.917 6.416h-2.334v2.334H9.417v-2.334H7.083V9.417h2.334V7.083h1.166v2.334h2.334v1.166z"/> |
| </g> |
| </defs> |
| |
| <g stroke="none" fill-rule="nonzero"> |
| <!-- Background and PWA logo (color by default) --> |
| <circle class="lh-gauge--pwa__disc" cx="30" cy="30" r="30"></circle> |
| <g class="lh-gauge--pwa__logo"> |
| <path class="lh-gauge--pwa__logo--secondary-color" d="M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z"/> |
| <path class="lh-gauge--pwa__logo--primary-color" d="M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z"/> |
| <path class="lh-gauge--pwa__logo--secondary-color" fill-rule="nonzero" d="M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z"/> |
| </g> |
| |
| <!-- No badges. --> |
| <rect class="lh-gauge--pwa__component lh-gauge--pwa__na-line" fill="#FFFFFF" x="20" y="32" width="20" height="4" rx="2"></rect> |
| |
| <!-- Just fast and reliable. --> |
| <g class="lh-gauge--pwa__component lh-gauge--pwa__fast-reliable-badge" transform="translate(20, 29)"> |
| <path fill="url(#lh-gauge--pwa__fast-reliable__shadow-gradient)" d="M33.63 19.49A30 30 0 0 1 16.2 30.36L3 17.14 17.14 3l16.49 16.49z"/> |
| <use href="#lh-gauge--pwa__fast-reliable-badge" /> |
| </g> |
| |
| <!-- Just installable. --> |
| <g class="lh-gauge--pwa__component lh-gauge--pwa__installable-badge" transform="translate(20, 29)"> |
| <path fill="url(#lh-gauge--pwa__installable__shadow-gradient)" d="M33.629 19.487c-4.272 5.453-10.391 9.39-17.415 10.869L3 17.142 17.142 3 33.63 19.487z"/> |
| <use href="#lh-gauge--pwa__installable-badge" /> |
| </g> |
| |
| <!-- Fast and reliable and installable. --> |
| <g class="lh-gauge--pwa__component lh-gauge--pwa__fast-reliable-installable-badges"> |
| <g transform="translate(8, 29)"> <!-- fast and reliable --> |
| <path fill="url(#lh-gauge--pwa__fast-reliable__shadow-gradient)" d="M16.321 30.463L3 17.143 17.142 3l22.365 22.365A29.864 29.864 0 0 1 22 31c-1.942 0-3.84-.184-5.679-.537z"/> |
| <use href="#lh-gauge--pwa__fast-reliable-badge" /> |
| </g> |
| <g transform="translate(32, 29)"> <!-- installable --> |
| <path fill="url(#lh-gauge--pwa__installable__shadow-gradient)" d="M25.982 11.84a30.107 30.107 0 0 1-13.08 15.203L3 17.143 17.142 3l8.84 8.84z"/> |
| <use href="#lh-gauge--pwa__installable-badge" /> |
| </g> |
| </g> |
| |
| <!-- Full PWA. --> |
| <g class="lh-gauge--pwa__component lh-gauge--pwa__check-circle" transform="translate(18, 28)"> |
| <circle fill="#FFFFFF" cx="12" cy="12" r="12"></circle> |
| <path fill="url(#lh-gauge--pwa__check-circle__gradient)" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path> |
| </g> |
| </g> |
| </svg> |
| |
| <div class="lh-gauge__label"></div> |
| </a> |
| </template> |
| |
| <!-- Lighthouse crtiical request chains component --> |
| <template id="tmpl-lh-crc"> |
| <div class="lh-crc-container"> |
| <style> |
| .lh-crc .tree-marker { |
| width: 12px; |
| height: 26px; |
| display: block; |
| float: left; |
| background-position: top left; |
| } |
| .lh-crc .horiz-down { |
| background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><g fill="%23D8D8D8" fill-rule="evenodd"><path d="M16 12v2H-2v-2z"/><path d="M9 12v14H7V12z"/></g></svg>'); |
| } |
| .lh-crc .right { |
| background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M16 12v2H0v-2z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>'); |
| } |
| .lh-crc .up-right { |
| background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v14H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>'); |
| } |
| .lh-crc .vert-right { |
| background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v27H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>'); |
| } |
| .lh-crc .vert { |
| background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v26H7z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>'); |
| } |
| .lh-crc .crc-tree { |
| font-size: 14px; |
| width: 100%; |
| overflow-x: auto; |
| } |
| .lh-crc .crc-node { |
| height: 26px; |
| line-height: 26px; |
| white-space: nowrap; |
| } |
| .lh-crc .crc-node__tree-value { |
| margin-left: 10px; |
| } |
| .lh-crc .crc-node__tree-value div { |
| display: inline; |
| } |
| .lh-crc .crc-node__chain-duration { |
| font-weight: 700; |
| } |
| .lh-crc .crc-initial-nav { |
| color: #595959; |
| font-style: italic; |
| } |
| .lh-crc__summary-value { |
| margin-bottom: 10px; |
| } |
| </style> |
| <div> |
| <div class="lh-crc__summary-value"> |
| <span class="lh-crc__longest_duration_label"></span> <b class="lh-crc__longest_duration"></b> |
| </div> |
| </div> |
| <div class="lh-crc"> |
| <div class="crc-initial-nav"></div> |
| <!-- stamp for each chain --> |
| <template id="tmpl-lh-crc__chains"> |
| <div class="crc-node"> |
| <span class="crc-node__tree-marker"> |
| |
| </span> |
| <span class="crc-node__tree-value"> |
| |
| </span> |
| </div> |
| </template> |
| </div> |
| </div> |
| </template> |
| |
| <template id="tmpl-lh-3p-filter"> |
| <style> |
| .lh-3p-filter { |
| background-color: var(--table-higlight-background-color); |
| color: var(--color-gray-600); |
| float: right; |
| padding: 6px; |
| } |
| .lh-3p-filter-label, .lh-3p-filter-input { |
| vertical-align: middle; |
| user-select: none; |
| } |
| .lh-3p-filter-input:disabled + .lh-3p-ui-string { |
| text-decoration: line-through; |
| } |
| </style> |
| <div class="lh-3p-filter"> |
| <label class="lh-3p-filter-label"> |
| <input type="checkbox" class="lh-3p-filter-input" checked /> |
| <span class="lh-3p-ui-string">Show 3rd party resources</span> (<span class="lh-3p-filter-count"></span>) |
| </label> |
| </div> |
| </template> |
| |
| <!-- Lighthouse snippet component --> |
| <template id="tmpl-lh-snippet"> |
| <div class="lh-snippet"> |
| <style> |
| :root { |
| --snippet-highlight-light: #fbf1f2; |
| --snippet-highlight-dark: #ffd6d8; |
| } |
| |
| .lh-snippet__header { |
| position: relative; |
| overflow: hidden; |
| padding: 10px; |
| border-bottom: none; |
| color: var(--snippet-color); |
| background-color: var(--snippet-background-color); |
| border: 1px solid var(--report-border-color-secondary); |
| } |
| .lh-snippet__title { |
| font-weight: bold; |
| float: left; |
| } |
| .lh-snippet__node { |
| float: left; |
| margin-left: 4px; |
| } |
| .lh-snippet__toggle-expand { |
| padding: 1px 7px; |
| margin-top: -1px; |
| margin-right: -7px; |
| float: right; |
| background: transparent; |
| border: none; |
| cursor: pointer; |
| font-size: 14px; |
| color: #0c50c7; |
| } |
| |
| .lh-snippet__snippet { |
| overflow: auto; |
| border: 1px solid var(--report-border-color-secondary); |
| } |
| /* Container needed so that all children grow to the width of the scroll container */ |
| .lh-snippet__snippet-inner { |
| display: inline-block; |
| min-width: 100%; |
| } |
| |
| .lh-snippet:not(.lh-snippet--expanded) .lh-snippet__show-if-expanded { |
| display: none; |
| } |
| .lh-snippet.lh-snippet--expanded .lh-snippet__show-if-collapsed { |
| display: none; |
| } |
| |
| .lh-snippet__line { |
| background: white; |
| white-space: pre; |
| display: flex; |
| } |
| .lh-snippet__line:not(.lh-snippet__line--message):first-child { |
| padding-top: 4px; |
| } |
| .lh-snippet__line:not(.lh-snippet__line--message):last-child { |
| padding-bottom: 4px; |
| } |
| .lh-snippet__line--content-highlighted { |
| background: var(--snippet-highlight-dark); |
| } |
| .lh-snippet__line--message { |
| background: var(--snippet-highlight-light); |
| } |
| .lh-snippet__line--message .lh-snippet__line-number { |
| padding-top: 10px; |
| padding-bottom: 10px; |
| } |
| .lh-snippet__line--message code { |
| padding: 10px; |
| padding-left: 5px; |
| color: var(--color-fail); |
| font-family: var(--report-font-family); |
| } |
| .lh-snippet__line--message code { |
| white-space: normal; |
| } |
| .lh-snippet__line-icon { |
| padding-top: 10px; |
| display: none; |
| } |
| .lh-snippet__line--message .lh-snippet__line-icon { |
| display: block; |
| } |
| .lh-snippet__line-icon:before { |
| content: ""; |
| display: inline-block; |
| vertical-align: middle; |
| margin-right: 4px; |
| width: var(--score-icon-size); |
| height: var(--score-icon-size); |
| background-image: var(--fail-icon-url); |
| } |
| .lh-snippet__line-number { |
| flex-shrink: 0; |
| width: 40px; |
| text-align: right; |
| font-family: monospace; |
| padding-right: 5px; |
| margin-right: 5px; |
| color: var(--color-gray-600); |
| user-select: none; |
| } |
| </style> |
| <template id="tmpl-lh-snippet__header"> |
| <div class="lh-snippet__header"> |
| <div class="lh-snippet__title"></div> |
| <div class="lh-snippet__node"></div> |
| <button class="lh-snippet__toggle-expand"> |
| <span class="lh-snippet__btn-label-collapse lh-snippet__show-if-expanded"></span> |
| <span class="lh-snippet__btn-label-expand lh-snippet__show-if-collapsed"></span> |
| </button> |
| </div> |
| </template> |
| <template id="tmpl-lh-snippet__content"> |
| <div class="lh-snippet__snippet"> |
| <div class="lh-snippet__snippet-inner"></div> |
| </div> |
| </template> |
| <template id="tmpl-lh-snippet__line"> |
| <div class="lh-snippet__line"> |
| <div class="lh-snippet__line-number"></div> |
| <div class="lh-snippet__line-icon"></div> |
| <code></code> |
| </div> |
| </template> |
| </div> |
| </template> |
| |
