| <!-- Lighthouse run warnings --> |
| <template id="tmpl-lh-warnings--toplevel"> |
| <div class="lh-warnings lh-warnings--toplevel"> |
| <strong>There were issues affecting this run of Lighthouse:</strong> |
| <ul></ul> |
| </div> |
| </template> |
| |
| <!-- Lighthouse score scale --> |
| <template id="tmpl-lh-scorescale"> |
| <div class="lh-scorescale"> |
| <span class="lh-scorescale-label">Score scale:</span> |
| <span class="lh-scorescale-range lh-scorescale-range--fail">0-44</span> |
| <span class="lh-scorescale-range lh-scorescale-range--average">45-74</span> |
| <span class="lh-scorescale-range lh-scorescale-range--pass">75-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" stroke="#707173"/> |
| <path class="lh-chevron__line lh-chevron__line-right" d="M90 50H50" stroke="#707173"/> |
| </g> |
| </svg> |
| </template> |
| |
| <!-- Lighthouse category header --> |
| <template id="tmpl-lh-category-header"> |
| <div class="lh-category-header"> |
| <div class="lh-score__gauge"></div> |
| <span class="lh-category-header__title"></span> |
| <div class="lh-category-header__description"></div> |
| </div> |
| </template> |
| |
| <!-- Lighthouse audit --> |
| <template id="tmpl-lh-audit"> |
| <div class="lh-audit"> |
| <details class="lh-expandable-details"> |
| <summary class="lh-audit__header lh-expandable-details__summary"> |
| <span class="lh-audit__index"></span> |
| <span class="lh-audit__title"></span> |
| <span class="lh-audit__display-text"></span> |
| <div class="lh-audit__score-icon"></div> |
| <div class="lh-chevron-container"></div> |
| </summary> |
| <div class="lh-audit__description"></div> |
| </details> |
| </div> |
| </template> |
| |
| <!-- Lighthouse perf metric --> |
| <template id="tmpl-lh-metric"> |
| <div class="lh-metric"> |
| <div class="lh-metric__innerwrap tooltip-boundary"> |
| <span class="lh-metric__title"></span> |
| <div class="lh-metric__value"></div> |
| <div class="lh-metric__description tooltip"></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 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__index"></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> |
| </summary> |
| <div class="lh-audit__description"></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"> |
| Resource to optimize |
| </div> |
| <div class="lh-load-opportunity__col lh-load-opportunity__col--two"> |
| Estimated Savings |
| </div> |
| </div> |
| </template> |
| |
| |
| <!-- Lighthouse score container --> |
| <template id="tmpl-lh-scores-wrapper"> |
| <style> |
| .lh-scores-wrapper__background, |
| .lh-scores-wrapper__shadow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: white; |
| border-radius: 8px; |
| } |
| .lh-scores-wrapper__shadow { |
| border-radius: 0; |
| box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 0px -2px |
| } |
| .lh-scores-container { |
| padding-bottom: calc(var(--section-indent) / 2); |
| position: relative; |
| width: 100%; |
| } |
| </style> |
| <div class="lh-scores-wrapper"> |
| <div class="lh-scores-container"> |
| <div class="lh-scores-wrapper__background"></div> |
| <div class="lh-scores-wrapper__shadow"></div> |
| </div> |
| </div> |
| </template> |
| |
| |
| <!-- Lighthouse header --> |
| <template id="tmpl-lh-heading"> |
| <style> |
| :root { |
| --report-header-overlap-top: 30px; |
| } |
| .lh-header-bg { |
| background-color: var(--header-bg-color); |
| height: var(--report-header-height); |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| will-change: transform; |
| } |
| .lh-lighthouse { |
| position: absolute; |
| top: var(--report-header-height); |
| right: 50%; |
| transform: translate3d(calc(var(--report-content-width) / 2), -100%, 0); |
| opacity: 1; |
| transform-origin: bottom right; |
| will-change: transform, opacity; |
| } |
| .lh-header { |
| width: 100%; |
| height: var(--report-header-height); |
| max-width: 100%; /* support text-overflow on url */ |
| position: relative; |
| } |
| .lh-metadata { |
| flex: 1 1 0; |
| padding: calc(var(--section-padding) / 2); |
| padding-left: var(--section-indent); |
| line-height: 20px; |
| color: var(--report-header-color); |
| z-index: 1; |
| position: relative; |
| } |
| .lh-metadata__results { |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .lh-metadata__url { |
| color: currentColor; |
| } |
| .lh-scores-wrapper { |
| margin-top: -30px; |
| transform: translateZ(1px); |
| } |
| .lh-scores-wrapper__shadow { |
| opacity: 0; |
| } |
| .lh-scores-wrapper__background, |
| .lh-scores-wrapper__shadow { |
| box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1); |
| border-radius: 8px; |
| will-change: opacity, transform; |
| transform-origin: top; |
| } |
| |
| .lh-product-info, .lh-toolbar__metadata { |
| align-items: center; |
| white-space: nowrap; |
| color: #5F6369; |
| display: flex; |
| font-size: calc(var(--body-font-size) * 0.9); |
| margin-left: var(--section-indent); |
| opacity: 0; |
| transform: translateY(-50%); |
| will-change: opacity; |
| } |
| .lh-product-info__icon { |
| height: 20px; |
| margin-right: var(--default-padding); |
| } |
| .lh-toolbar { |
| height: 50px; |
| position: absolute; |
| top: 25px; |
| will-change: transform; |
| display: flex; |
| width: calc(100% - 70px); /* give room for export */ |
| } |
| .lh-toolbar__metadata { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| width: 100%; |
| } |
| .lh-toolbar__url { |
| color: currentColor; |
| display: block; |
| white-space: nowrap; |
| margin-right: 2px; |
| } |
| .lh-export { |
| position: absolute; |
| right: var(--section-indent); |
| transform: translateY(0); |
| top: calc(var(--section-padding) / 2); |
| will-change: transform; |
| z-index: 2; |
| } |
| .lh-export__button { |
| background-color: #fff; |
| border: 1px solid #dadada; |
| border-radius: 2px; |
| cursor: pointer; |
| outline: none; |
| height: 32px; |
| width: 48px; |
| background-repeat: no-repeat; |
| background-size: 20px; |
| background-position: 50% 50%; |
| will-change: transform; |
| } |
| .lh-export__button:focus, |
| .lh-export__button.active { |
| box-shadow: 1px 1px 3px #ccc; |
| } |
| .lh-export__button.active + .lh-export__dropdown { |
| opacity: 1; |
| clip: rect(0, 164px, 200px, 0); |
| } |
| .lh-export__dropdown { |
| position: absolute; |
| background-color: #fff; |
| 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); |
| opacity: 0; |
| transition: all 200ms cubic-bezier(0,0,0.2,1); |
| } |
| .lh-export__dropdown a { |
| display: block; |
| color: currentColor; |
| text-decoration: none; |
| white-space: nowrap; |
| padding: 0 12px; |
| line-height: 2; |
| } |
| .lh-export__dropdown a:hover, |
| .lh-export__dropdown a:focus { |
| background-color: #efefef; |
| outline: none; |
| } |
| .lh-export__dropdown .report-icon { |
| cursor: pointer; |
| background-repeat: no-repeat; |
| background-position: 8px 50%; |
| background-size: 18px; |
| background-color: transparent; |
| text-indent: 18px; |
| } |
| /* copy icon needs slight adjustments to look great */ |
| .lh-export__dropdown .report-icon--copy { |
| background-size: 16px; |
| background-position: 9px 50%; |
| } |
| /* save-as-gist option hidden in report */ |
| .lh-export__dropdown .lh-export--gist { |
| display: none; |
| } |
| .lh-config { |
| color: var(--secondary-text-color); |
| } |
| .lh-config__timestamp { |
| font-size: var(--caption-font-size); |
| display: block; |
| } |
| a.lh-config__emulation { |
| color: inherit; |
| text-decoration: none; |
| } |
| @media screen and (max-width: 964px) { |
| .lh-export__dropdown { |
| right: 0; |
| left: initial; |
| } |
| } |
| @media print { |
| .lh-header { |
| position: static; |
| margin-left: 0; |
| } |
| } |
| /* |
| TODO: Enable animating the clouds |
| .lh-lighthouse__clouds { |
| animation: panacross 30s linear infinite; |
| animation-play-state: paused; |
| } |
| @keyframes panacross { |
| 0% { transform: translateX(0px); } |
| 77% { transform: translateX(-680px); } |
| 77.0001% { transform: translateX(195px); } |
| 100% { transform: translateX(0px); } |
| } */ |
| </style> |
| <div class="lh-header-bg"></div> |
| <div class="lh-lighthouse"> |
| <svg width="217" height="148" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <defs> |
| <mask id="a" x="-56" y="-54" width="284" height="202" maskUnits="userSpaceOnUse"> |
| <path d="M-56-54h284v202H-56z" fill="#fff"/> |
| </mask> |
| <linearGradient id="b" x1="-525.16" y1="560.08" x2="-524.23" y2="560.08" gradientTransform="matrix(91 0 0 -77 47797 43181)" gradientUnits="userSpaceOnUse"> |
| <stop offset="0" stop-color="#f1f3f4"/> |
| <stop offset="1" stop-color="#fff"/> |
| </linearGradient> |
| </defs> |
| <g mask="url(#a)"> |
| <path d="M95 47h24v2H95z" fill="#ec5548"/> |
| <path d="M98 49h18v11H98z" fill="#fbc21b"/> |
| <path d="M95 59h24v7H95z" fill="#ec5548"/> |
| <path d="M97.63 66h19.74l2.63 47H95z" fill="#fff"/> |
| <path d="M107 38a10 10 0 0 1 10 10v1H97v-1a10 10 0 0 1 10-10zM96.77 82.23l21-10.7.63 11.87-22.31 11.87zM95 110.8L119.1 98l.9 14H95z" fill="#ec5548"/> |
| <path d="M0 148a177.58 177.58 0 0 1 217 0z" fill="#e8eaed"/> |
| <path d="M103 49a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5z" fill="#fef0c8"/> |
| <path d="M7 16l91 33.18v10L7 93z" fill="url(#b)"/> |
| </g> |
| <g mask="url(#a)" class="lh-lighthouse__clouds"> |
| <path d="M60 .19A9.77 9.77 0 0 1 61.93 0a9.44 9.44 0 0 1 9.24 7.83A7.24 7.24 0 0 1 79 14.45v.73A7.37 7.37 0 0 1 76.2 21h-31a7.44 7.44 0 0 1-1.2-4.09 7.31 7.31 0 0 1 7.26-7.36 6.84 6.84 0 0 1 1.28.1v-.11A9.51 9.51 0 0 1 60 .19m79.78 22.31h-17.9a4.37 4.37 0 0 1-.63-2.25 4.2 4.2 0 0 1 4.16-4.25 4.37 4.37 0 0 1 .72.06V16a5.35 5.35 0 0 1 10.64-1h.33a4.2 4.2 0 0 1 4.15 4.25 4.29 4.29 0 0 1-1.47 3.25zM163 62h-24.15a5.1 5.1 0 0 1-.85-2.81 5.65 5.65 0 0 1 6.59-5.19v-.08a7.07 7.07 0 0 1 7.24-6.92 7.15 7.15 0 0 1 7.17 5.64h.44a5.46 5.46 0 0 1 5.6 5.32A5.19 5.19 0 0 1 163 62z" fill="#fff"/> |
| </g> |
| </svg> |
| </div> |
| |
| <div class="lh-header-container"> |
| <div class="lh-header"> |
| <div class="lh-metadata"> |
| <div class="lh-metadata__results"><a href="" class="lh-metadata__url" target="_blank" rel="noopener"></a></div> |
| <div class="lh-config"> |
| <span class="lh-config__timestamp"></span> |
| <a href="#runtime-settings" class="lh-config__emulation"></a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lh-scores-wrapper-placeholder"></div> |
| |
| <div class="lh-toolbar"> |
| <div class="lh-product-info"> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAADjklEQVR4AWI08P/HQEvAQrxSQKvlECfLFYXx75xCY2qmh89GbNvOMjb3v9jOOlxnFWxj206ebQ3b7q6q+z1rNagu8/zvPSZACAABpeUAA0miMgU7SA7JjCraFGwZwECOwvL75dWjsKgWBKtx0jvWo+vkBAFbACCkByMP6nMn48+AVgXB2fzSCwsv22/lMGlUhmJ0AE7BH8dyUUDbUEgN6RzJRSeaPxhdRYR0Inel+7Hd5lBiFpkMAxACc0394//9C4voFHDiAAGLpuOXebdfdHfctgwJKaZRLRKy6ItrSis6RBnVBgGtbHyKTEmJHQoEXoBCE5BCrDeA2ogMUIGDAKEBDEhUqwgMqBYDjW4DQzmuffVdqff42/ZQYYqVcMXGZsMPyCsH3lyJSetxvEaxAQXdjR1HjfwCdIS7lo2DZke26Qe+MXO12OWkGT0O6oE7vMGkMnkYw4aN1KQgMKExhXqswfiov4+a7MQ11XPnbr/5qpKlgACAAQj94Lu271bN9DUecQasIZlNzG72llRAAKJiAi+/BSHrSFjRvQhg3DEKEqJh08tsmLTx597+f6enr4cc2Zpk57pihfX24dW7RHcOLLUbJYhJSl0ErQCI9BVXH/XrO97QasuvQQSiECa0BrQCIIJp6X9T/r8QG6L71WYSqCoIIGo2BZDUBnS/D9EA9Nun1iYvbM0MFExIDQRoKFatc1Z6zrm5uWeObJotq0BGV9FuQBWq5a4Fw3PPz848rZHstZSuA5FWAFSMP2nOppOOGpl6qh9PCSg0IFyHKjSQyDNQHTru2t75NOEe0fsf246oAmFkI6vCdnWvbQFQFCKx8vCswV8TrDLiDLgH4Nr7RAtNsrC9d8sfk7b8ls4igdNy8CQKAISlsB0FjZfd3Lfp155tf8fKI4BxZZIj/oTdVEAIAcJFOCmzauHG71I7/rdreUAgAqpDP05fDARCAQQARwEIBQSVxq0FyaLvZZtevpHa8WHw8cft6cpxlq8eAJtIhnSbWDf951yx3y13OqUuu5qyGgkxCgGFh9cDihDGbTa6BqvT1lWmrav3bmt2ZMJ4mU6TGgIC4DBzcv/JqAau1WhzSt3x9Ixk/4Jk/8J4ZrrViFMA4W6A7+WK8xcVjvyrOmVD0FbAXokcT48r+xVqLKvuJYbmpNadnlp3mpufJHOe/GXktM+r09bT8kEdq9BRYAbGSgzP7ll82U71Mc+ZFooXgwAAAABJRU5ErkJggg==" alt="" class="lh-product-info__icon" /> |
| <span class="lh-product-info__name">Lighthouse</span> |
| <span class="lh-product-info__version"></span> |
| </div> |
| |
| <div class="lh-toolbar__metadata"> |
| <a href="" class="lh-toolbar__url" target="_blank" rel="noopener"></a> |
| <span class="lh-toggle-arrow" title="See report's runtime settings"></span> |
| </div> |
| </div> |
| |
| <div class="lh-export"> |
| <button class="report-icon report-icon--share lh-export__button" title="Export report"></button> |
| <div class="lh-export__dropdown"> |
| <a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a> |
| <a href="#" class="report-icon report-icon--print" data-action="print-expanded">Print Expanded</a> |
| <a href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a> |
| <a href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a> |
| <a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a> |
| <a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a> |
| <a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a> |
| </div> |
| </div> |
| </template> |
| |
| |
| <!-- Lighthouse footer --> |
| <template id="tmpl-lh-footer"> |
| <style> |
| .lh-footer { |
| background-color: var(--header-bg-color); |
| border-top: 1px solid var(--report-secondary-border-color); |
| padding: var(--section-indent) calc(var(--default-padding) * 2); |
| } |
| .lh-footer .lh-generated { |
| text-align: center; |
| border-top: 1px solid var(--report-border-color); |
| padding-top: var(--default-padding); |
| } |
| .lh-env { |
| padding: var(--default-padding) 0; |
| } |
| .lh-env__items { |
| padding-left: 16px; |
| } |
| span.lh-env__name { |
| font-weight: bold; |
| color: var(--secondary-text-color); |
| } |
| span.lh-env__description { |
| font-family: var(--monospace-font-family); |
| font-size: var(--caption-font-size); |
| padding-left: 5px; |
| } |
| </style> |
| <footer class="lh-footer"> |
| <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"> |
| <style> |
| .lh-gauge__wrapper { |
| --circle-size: calc(3 * var(--header-font-size)); |
| --circle-size-half: calc(var(--circle-size) / 2); |
| --circle-background: hsl(216, 12%, 92%); |
| --circle-border-width: 9; |
| --inset-size: calc(var(--circle-size) - 2 * var(--circle-border-width)); |
| --transition-length: 1s; |
| } |
| |
| .lh-gauge__wrapper--pass, |
| .lh-gauge__wrapper--pass .lh-gauge { |
| --circle-color: var(--pass-color); |
| color: var(--circle-color); |
| } |
| |
| .lh-gauge__wrapper--average, |
| .lh-gauge__wrapper--average .lh-gauge { |
| --circle-color: var(--average-color); |
| color: var(--circle-color); |
| } |
| |
| .lh-gauge__wrapper--fail, |
| .lh-gauge__wrapper--fail .lh-gauge { |
| --circle-color: var(--fail-color); |
| color: var(--circle-color); |
| } |
| |
| .lh-gauge { |
| max-width: 360px; |
| max-height: 360px; |
| stroke-linecap: round; |
| width: var(--circle-size); |
| height: var(--circle-size); |
| } |
| |
| .lh-gauge-base { |
| fill: none; |
| stroke: var(--circle-background); |
| stroke-width: var(--circle-border-width); |
| } |
| .lh-gauge-arc { |
| fill: none; |
| stroke: var(--circle-color); |
| stroke-width: var(--circle-border-width); |
| animation: load-gauge var(--transition-length) ease forwards; |
| animation-delay: 250ms; |
| } |
| |
| @keyframes load-gauge { |
| from { stroke-dasharray: 0 329; } |
| } |
| |
| .lh-gauge__percentage { |
| --spacer: calc((var(--circle-size) - var(--inset-size)) / 2); |
| width: var(--inset-size); |
| height: var(--inset-size); |
| position: absolute; |
| border-radius: inherit; |
| font-size: var(--header-font-size); |
| text-align: center; |
| top: calc(var(--circle-size) / 3); |
| } |
| |
| .lh-gauge__wrapper { |
| display: inline-flex; |
| align-items: center; |
| flex-direction: column; |
| text-decoration: none; |
| flex: 1; |
| min-width: auto; |
| position: relative; |
| |
| /* Contain the layout style paint & layers during animation*/ |
| contain: content; |
| will-change: opacity; /* Only using for layer promotion */ |
| } |
| |
| .lh-gauge__label { |
| font-size: var(--body-font-size); |
| line-height: var(--body-line-height); |
| margin-top: calc(0.5 * var(--body-line-height)); |
| text-align: center; |
| color: black; |
| } |
| |
| </style> |
| <a href="#" class="lh-gauge__wrapper"> |
| <svg viewBox="0 0 120 120" class="lh-gauge" fill="none" stroke-width="2"> |
| <circle class="lh-gauge-base" r="53" cx="60" cy="60"></circle> |
| <circle class="lh-gauge-arc" transform="rotate(-90 60 60)" stroke-dasharray="0 329" stroke-dashoffset="0" r="53" cx="60" cy="60"></circle> |
| </svg> |
| <div class="lh-gauge__percentage"></div> |
| <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__chain-duration { |
| font-weight: 700; |
| } |
| .lh-crc .crc-node__tree-hostname { |
| color: #595959; |
| } |
| .lh-crc .crc-initial-nav { |
| color: #595959; |
| font-style: italic; |
| } |
| </style> |
| <div> |
| Longest chain: <b class="lh-crc__longest_duration"><!-- fill me: longestChain.duration --></b> |
| over <b class="lh-crc__longest_length"><!-- fill me: longestChain.length --></b> requests, totalling |
| <b class="lh-crc__longest_transfersize"><!-- fill me: longestChain.length --></b> |
| </div> |
| <div class="lh-crc"> |
| <div class="crc-initial-nav">Initial Navigation</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 class="crc-node__tree-file"><!-- fill me: node.request.url.file --></span> |
| <span class="crc-node__tree-hostname">(<!-- fill me: node.request.url.host -->)</span> |
| |
| </span> |
| </div> |
| </template> |
| </div> |
| </div> |
| </template> |