.lh-vars {
--color-amber-50: #FFF8E1;
--color-blue-200: #90CAF9;
--color-blue-900: #0D47A1;
--color-blue-A700: #2962FF;
--color-blue-primary: #06f;
--color-cyan-500: #00BCD4;
--color-gray-100: #F5F5F5;
--color-gray-300: #CFCFCF;
--color-gray-200: #E0E0E0;
--color-gray-400: #BDBDBD;
--color-gray-50: #FAFAFA;
--color-gray-500: #9E9E9E;
--color-gray-600: #757575;
--color-gray-700: #616161;
--color-gray-800: #424242;
--color-gray-900: #212121;
--color-gray: #000000;
--color-green-700: #080;
--color-green: #0c6;
--color-lime-400: #D3E156;
--color-orange-50: #FFF3E0;
--color-orange-700: #C33300;
--color-orange: #fa3;
--color-red-700: #c00;
--color-red: #f33;
--color-teal-600: #00897B;
--color-white: #FFFFFF;
/* Context-specific colors */
--color-average-secondary: var(--color-orange-700);
--color-average: var(--color-orange);
--color-fail-secondary: var(--color-red-700);
--color-fail: var(--color-red);
--color-hover: var(--color-gray-50);
--color-informative: var(--color-blue-900);
--color-pass-secondary: var(--color-green-700);
--color-pass: var(--color-green);
--color-not-applicable: var(--color-gray-600);
/* Component variables */
--audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
--audit-explanation-line-height: 16px;
--audit-group-margin-bottom: calc(var(--default-padding) * 6);
--audit-group-padding-vertical: 8px;
--audit-margin-horizontal: 5px;
--audit-padding-vertical: 8px;
--category-padding: calc(var(--default-padding) * 6) var(--edge-gap-padding) calc(var(--default-padding) * 4);
--chevron-line-stroke: var(--color-gray-600);
--chevron-size: 12px;
--default-padding: 8px;
--edge-gap-padding: calc(var(--default-padding) * 4);
--env-item-background-color: var(--color-gray-100);
--env-item-font-size: 28px;
--env-item-line-height: 36px;
--env-item-padding: 10px 0px;
--env-name-min-width: 220px;
--footer-padding-vertical: 16px;
--gauge-circle-size-big: 96px;
--gauge-circle-size: 48px;
--gauge-circle-size-sm: 32px;
--gauge-label-font-size-big: 18px;
--gauge-label-font-size: var(--report-font-size-secondary);
--gauge-label-line-height-big: 24px;
--gauge-label-line-height: var(--report-line-height-secondary);
--gauge-percentage-font-size-big: 38px;
--gauge-percentage-font-size: var(--report-font-size-secondary);
--gauge-wrapper-width: 120px;
--header-line-height: 24px;
--highlighter-background-color: var(--report-text-color);
--icon-square-size: calc(var(--score-icon-size) * 0.88);
--image-preview-size: 48px;
--link-color: var(--color-blue-primary);
--locale-selector-background-color: var(--color-white);
--metric-toggle-lines-fill: #7F7F7F;
--metric-value-font-size: calc(var(--report-font-size) * 1.8);
--metrics-toggle-background-color: var(--color-gray-200);
--plugin-badge-background-color: var(--color-white);
--plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
--plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
--plugin-icon-size: 65%;
--pwa-icon-margin: 0 var(--default-padding);
--pwa-icon-size: var(--topbar-logo-size);
--report-background-color: #fff;
--report-border-color-secondary: #ebebeb;
--report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
--report-font-family: Roboto, Helvetica, Arial, sans-serif;
--report-font-size: 14px;
--report-font-size-secondary: 12px;
--report-icon-size: var(--score-icon-background-size);
--report-line-height: 24px;
--report-line-height-secondary: 20px;
--report-monospace-font-size: calc(var(--report-font-size) * 0.85);
--report-text-color-secondary: var(--color-gray-800);
--report-text-color: var(--color-gray-900);
--report-content-max-width: calc(60 * var(--report-font-size));
/* defaults to 840px */
--report-content-min-width: 360px;
--report-content-max-width-minus-edge-gap: calc(var(--report-content-max-width) - var(--edge-gap-padding) * 2);
--score-container-padding: 8px;
--score-icon-background-size: 24px;
--score-icon-margin-left: 6px;
--score-icon-margin-right: 14px;
--score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
--score-icon-size: 12px;
--score-icon-size-big: 16px;
--screenshot-overlay-background: rgba(0, 0, 0, 0.3);
--section-padding-vertical: calc(var(--default-padding) * 6);
--snippet-background-color: var(--color-gray-50);
--snippet-color: #0938C2;
--stackpack-padding-horizontal: 10px;
--sticky-header-background-color: var(--report-background-color);
--sticky-header-buffer: var(--topbar-height);
--sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2 + 1em);
--table-group-header-background-color: #EEF1F4;
--table-group-header-text-color: var(--color-gray-700);
--table-higlight-background-color: #F5F7FA;
--tools-icon-color: var(--color-gray-600);
--topbar-background-color: var(--color-white);
--topbar-height: 32px;
--topbar-logo-size: 24px;
--topbar-padding: 0 8px;
--toplevel-warning-background-color: hsla(30, 100%, 75%, 10%);
--toplevel-warning-message-text-color: var(--color-average-secondary);
--toplevel-warning-padding: 18px;
--toplevel-warning-text-color: var(--report-text-color);
/* SVGs */
--plugin-icon-url-dark: url('data:image/svg+xml;utf8,');
--plugin-icon-url: url('data:image/svg+xml;utf8,');
--pass-icon-url: url('data:image/svg+xml;utf8,');
--average-icon-url: url('data:image/svg+xml;utf8,');
--fail-icon-url: url('data:image/svg+xml;utf8,');
--error-icon-url: url('data:image/svg+xml;utf8,');
--pwa-installable-gray-url: url('data:image/svg+xml;utf8,');
--pwa-optimized-gray-url: url('data:image/svg+xml;utf8,');
--pwa-installable-gray-url-dark: url('data:image/svg+xml;utf8,');
--pwa-optimized-gray-url-dark: url('data:image/svg+xml;utf8,');
--pwa-installable-color-url: url('data:image/svg+xml;utf8,');
--pwa-optimized-color-url: url('data:image/svg+xml;utf8,');
--swap-locale-icon-url: url('data:image/svg+xml;utf8,');
}
@media not print {
.lh-dark {
/* Pallete */
--color-gray-200: var(--color-gray-800);
--color-gray-300: #616161;
--color-gray-400: var(--color-gray-600);
--color-gray-700: var(--color-gray-400);
--color-gray-50: #757575;
--color-gray-600: var(--color-gray-500);
--color-green-700: var(--color-green);
--color-orange-700: var(--color-orange);
--color-red-700: var(--color-red);
--color-teal-600: var(--color-cyan-500);
/* Context-specific colors */
--color-hover: rgba(0, 0, 0, 0.2);
--color-informative: var(--color-blue-200);
/* Component variables */
--env-item-background-color: #393535;
--link-color: var(--color-blue-200);
--locale-selector-background-color: var(--color-gray-200);
--plugin-badge-background-color: var(--color-gray-800);
--report-background-color: var(--color-gray-900);
--report-border-color-secondary: var(--color-gray-200);
--report-text-color-secondary: var(--color-gray-400);
--report-text-color: var(--color-gray-100);
--snippet-color: var(--color-cyan-500);
--topbar-background-color: var(--color-gray);
--toplevel-warning-background-color: hsl(33deg 14% 18%);
--toplevel-warning-message-text-color: var(--color-orange-700);
--toplevel-warning-text-color: var(--color-gray-100);
--table-group-header-background-color: rgba(186, 196, 206, 0.15);
--table-group-header-text-color: var(--color-gray-100);
--table-higlight-background-color: rgba(186, 196, 206, 0.09);
/* SVGs */
--plugin-icon-url: var(--plugin-icon-url-dark);
--pwa-installable-gray-url: var(--pwa-installable-gray-url-dark);
--pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark);
}
}
@media only screen and (max-width: 480px) {
.lh-vars {
--audit-group-margin-bottom: 20px;
--edge-gap-padding: var(--default-padding);
--env-name-min-width: 120px;
--gauge-circle-size-big: 96px;
--gauge-circle-size: 72px;
--gauge-label-font-size-big: 22px;
--gauge-label-font-size: 14px;
--gauge-label-line-height-big: 26px;
--gauge-label-line-height: 20px;
--gauge-percentage-font-size-big: 34px;
--gauge-percentage-font-size: 26px;
--gauge-wrapper-width: 112px;
--header-padding: 16px 0 16px 0;
--image-preview-size: 24px;
--plugin-icon-size: 75%;
--pwa-icon-margin: 0 7px 0 -3px;
--report-font-size: 14px;
--report-line-height: 20px;
--score-icon-margin-left: 2px;
--score-icon-size: 10px;
--topbar-height: 28px;
--topbar-logo-size: 20px;
}
}
.lh-vars.lh-devtools {
--audit-explanation-line-height: 14px;
--audit-group-margin-bottom: 20px;
--audit-group-padding-vertical: 12px;
--audit-padding-vertical: 4px;
--category-padding: 12px;
--default-padding: 12px;
--env-name-min-width: 120px;
--footer-padding-vertical: 8px;
--gauge-circle-size-big: 72px;
--gauge-circle-size: 64px;
--gauge-label-font-size-big: 22px;
--gauge-label-font-size: 14px;
--gauge-label-line-height-big: 26px;
--gauge-label-line-height: 20px;
--gauge-percentage-font-size-big: 34px;
--gauge-percentage-font-size: 26px;
--gauge-wrapper-width: 97px;
--header-line-height: 20px;
--header-padding: 16px 0 16px 0;
--screenshot-overlay-background: transparent;
--plugin-icon-size: 75%;
--pwa-icon-margin: 0 7px 0 -3px;
--report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
--report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
--report-font-size: 12px;
--report-line-height: 20px;
--score-icon-margin-left: 2px;
--score-icon-size: 10px;
--section-padding-vertical: 8px;
}
.lh-container:has(.lh-sticky-header) {
--sticky-header-buffer: calc(var(--topbar-height) + var(--sticky-header-height));
}
.lh-container:not(.lh-topbar + .lh-container) {
--topbar-height: 0;
--sticky-header-height: 0;
--sticky-header-buffer: 0;
}
.lh-max-viewport {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.lh-devtools.lh-root {
height: 100%;
}
.lh-devtools.lh-root img {
/* Override devtools default 'min-width: 0' so svg without size in a flexbox isn't collapsed. */
min-width: auto;
}
.lh-devtools .lh-container {
overflow-y: scroll;
height: calc(100% - var(--topbar-height));
/** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */
--sticky-header-buffer: 0;
}
.lh-devtools .lh-container:has(.lh-sticky-header) {
/** The .lh-container is the scroll parent in DevTools so we exclude the topbar from the sticky header buffer. */
--sticky-header-buffer: var(--sticky-header-height);
}
@media print {
.lh-devtools .lh-container {
overflow: unset;
}
}
.lh-devtools .lh-sticky-header {
/* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */
top: 0;
}
.lh-devtools .lh-element-screenshot__overlay {
position: absolute;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.6;
}
}
.lh-root *,
.lh-root *::before,
.lh-root *::after {
box-sizing: border-box;
}
.lh-root {
font-family: var(--report-font-family);
font-size: var(--report-font-size);
margin: 0;
line-height: var(--report-line-height);
background: var(--report-background-color);
color: var(--report-text-color);
}
.lh-root :focus-visible {
outline: -webkit-focus-ring-color auto 3px;
}
.lh-root summary:focus {
outline: none;
box-shadow: 0 0 0 1px hsl(217, 89%, 61%);
}
.lh-root [hidden] {
display: none !important;
}
.lh-root pre {
margin: 0;
}
.lh-root pre,
.lh-root code {
font-family: var(--report-font-family-monospace);
}
.lh-root details>summary {
cursor: pointer;
}
.lh-hidden {
display: none !important;
}
.lh-container {
/*
Text wrapping in the report is so much FUN!
We have a `word-break: break-word;` globally here to prevent a few common scenarios, namely
long non-breakable text (usually URLs) found in:
1. The footer
2. .lh-node (outerHTML)
3. .lh-code
With that sorted, the next challenge is appropriate column sizing and text wrapping inside our
.lh-details tables. Even more fun.
* We don't want table headers ("Potential Savings (ms)") to wrap or their column values, but
we'd be happy for the URL column to wrap if the URLs are particularly long.
* We want the narrow columns to remain narrow, providing the most column width for URL
* We don't want the table to extend past 100% width.
* Long URLs in the URL column can wrap. Util.getURLDisplayName maxes them out at 64 characters,
but they do not get any overflow:ellipsis treatment.
*/
word-break: break-word;
}
.lh-audit-group a,
.lh-category-header__description a,
.lh-audit__description a,
.lh-warnings a,
.lh-footer a,
.lh-table-column--link a {
color: var(--link-color);
}
.lh-audit__description,
.lh-audit__stackpack {
--inner-audit-padding-right: var(--stackpack-padding-horizontal);
padding-left: var(--audit-description-padding-left);
padding-right: var(--inner-audit-padding-right);
padding-top: 8px;
padding-bottom: 8px;
}
.lh-details {
margin-top: var(--default-padding);
margin-bottom: var(--default-padding);
margin-left: var(--audit-description-padding-left);
/* whatever the .lh-details side margins are */
width: 100%;
}
.lh-audit__stackpack {
display: flex;
align-items: center;
}
.lh-audit__stackpack__img {
max-width: 30px;
margin-right: var(--default-padding)
}
/* Report header */
.lh-report-icon {
display: flex;
align-items: center;
padding: 10px 12px;
cursor: pointer;
}
.lh-report-icon[disabled] {
opacity: 0.3;
pointer-events: none;
}
.lh-report-icon::before {
content: "";
margin: 4px;
background-repeat: no-repeat;
width: var(--report-icon-size);
height: var(--report-icon-size);
opacity: 0.7;
display: inline-block;
vertical-align: middle;
}
.lh-report-icon:hover::before {
opacity: 1;
}
.lh-dark .lh-report-icon::before {
filter: invert(1);
}
.lh-report-icon--print::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--copy::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--open::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--download::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--dark::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--treemap::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--date::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--devices::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--world::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--stopwatch::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--networkspeed::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--samples-one::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--samples-many::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--chrome::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-report-icon--external::before {
background-image: url('data:image/svg+xml;utf8,');
}
.lh-buttons {
display: flex;
flex-wrap: wrap;
margin: var(--default-padding) 0;
}
.lh-button {
height: 32px;
border: 1px solid var(--report-border-color-secondary);
border-radius: 3px;
color: var(--link-color);
background-color: var(--report-background-color);
margin: 5px;
}
.lh-button:first-of-type {
margin-left: 0;
}
/* Node */
.lh-node__snippet {
font-family: var(--report-font-family-monospace);
color: var(--snippet-color);
font-size: var(--report-monospace-font-size);
line-height: 20px;
}
/* Score */
.lh-audit__score-icon {
width: var(--score-icon-size);
height: var(--score-icon-size);
margin: var(--score-icon-margin);
}
.lh-audit--pass .lh-audit__display-text {
color: var(--color-pass-secondary);
}
.lh-audit--pass .lh-audit__score-icon,
.lh-scorescale-range--pass::before {
border-radius: 100%;
background: var(--color-pass);
}
.lh-audit--average .lh-audit__display-text {
color: var(--color-average-secondary);
}
.lh-audit--average .lh-audit__score-icon,
.lh-scorescale-range--average::before {
background: var(--color-average);
width: var(--icon-square-size);
height: var(--icon-square-size);
}
.lh-audit--fail .lh-audit__display-text {
color: var(--color-fail-secondary);
}
.lh-audit--fail .lh-audit__score-icon,
.lh-audit--error .lh-audit__score-icon,
.lh-scorescale-range--fail::before {
border-left: calc(var(--score-icon-size) / 2) solid transparent;
border-right: calc(var(--score-icon-size) / 2) solid transparent;
border-bottom: var(--score-icon-size) solid var(--color-fail);
}
.lh-audit--error .lh-audit__score-icon,
.lh-metric--error .lh-metric__icon {
background-image: var(--error-icon-url);
background-repeat: no-repeat;
background-position: center;
border: none;
}
.lh-gauge__wrapper--fail .lh-gauge--error {
background-image: var(--error-icon-url);
background-repeat: no-repeat;
background-position: center;
transform: scale(0.5);
top: var(--score-container-padding);
}
.lh-audit--manual .lh-audit__display-text,
.lh-audit--notapplicable .lh-audit__display-text {
color: var(--color-gray-600);
}
.lh-audit--manual .lh-audit__score-icon,
.lh-audit--notapplicable .lh-audit__score-icon {
border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);
border-radius: 100%;
background: none;
}
.lh-audit--informative .lh-audit__display-text {
color: var(--color-gray-600);
}
.lh-audit--informative .lh-audit__score-icon {
border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);
border-radius: 100%;
}
.lh-audit__description,
.lh-audit__stackpack {
color: var(--report-text-color-secondary);
}
.lh-audit__adorn {
border: 1px solid var(--color-gray-500);
border-radius: 3px;
margin: 0 3px;
padding: 0 2px;
line-height: 1.1;
display: inline-block;
font-size: 90%;
color: var(--report-text-color-secondary);
}
.lh-category-header__description {
text-align: center;
color: var(--color-gray-700);
margin: 0px auto;
max-width: 400px;
}
.lh-audit__display-text,
.lh-chevron-container {
margin: 0 var(--audit-margin-horizontal);
}
.lh-chevron-container {
margin-right: 0;
}
.lh-audit__title-and-text {
flex: 1;
}
.lh-audit__title-and-text code {
color: var(--snippet-color);
font-size: var(--report-monospace-font-size);
}
/* Prepend display text with em dash separator. */
.lh-audit__display-text:not(:empty):before {
content: '—';
margin-right: var(--audit-margin-horizontal);
}
/* Expandable Details (Audit Groups, Audits) */
.lh-audit__header {
display: flex;
align-items: center;
padding: var(--default-padding);
}
.lh-metricfilter {
display: grid;
justify-content: end;
align-items: center;
grid-auto-flow: column;
gap: 4px;
color: var(--color-gray-700);
}
.lh-metricfilter__radio {
/*
* Instead of hiding, position offscreen so it's still accessible to screen readers
* https://bugs.chromium.org/p/chromium/issues/detail?id=1439785
*/
position: fixed;
left: -9999px;
}
.lh-metricfilter input[type='radio']:focus-visible+label {
outline: -webkit-focus-ring-color auto 1px;
}
.lh-metricfilter__label {
display: inline-flex;
padding: 0 4px;
height: 16px;
text-decoration: underline;
align-items: center;
cursor: pointer;
font-size: 90%;
}
.lh-metricfilter__label--active {
background: var(--color-blue-primary);
color: var(--color-white);
border-radius: 3px;
text-decoration: none;
}
/* Give the 'All' choice a more muted display */
.lh-metricfilter__label--active[for="metric-All"] {
background-color: var(--color-blue-200) !important;
color: black !important;
}
.lh-metricfilter__text {
margin-right: 8px;
}
/* If audits are filtered, hide the itemcount for Passed Audits… */
.lh-category--filtered .lh-audit-group .lh-audit-group__itemcount {
display: none;
}
.lh-audit__header:hover {
background-color: var(--color-hover);
}
/* We want to hide the browser's default arrow marker on summary elements. Admittedly, it's complicated. */
.lh-root details>summary {
/* Blink 89+ and Firefox will hide the arrow when display is changed from (new) default of `list-item` to block. https://chromestatus.com/feature/6730096436051968*/
display: block;
}
/* Safari and Blink <=88 require using the -webkit-details-marker selector */
.lh-root details>summary::-webkit-details-marker {
display: none;
}
/* Perf Metric */
.lh-metrics-container {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: var(--report-line-height);
margin-bottom: var(--default-padding);
}
.lh-metric {
border-top: 1px solid var(--report-border-color-secondary);
}
.lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(-n+2) {
border-bottom: 1px solid var(--report-border-color-secondary);
}
.lh-metric__innerwrap {
display: grid;
/**
* Icon -- Metric Name
* -- Metric Value
*/
grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;
align-items: center;
padding: var(--default-padding);
}
.lh-metric__details {
order: -1;
}
.lh-metric__title {
flex: 1;
}
.lh-calclink {
padding-left: calc(1ex / 3);
}
.lh-metric__description {
display: none;
grid-column-start: 2;
grid-column-end: 4;
color: var(--report-text-color-secondary);
}
.lh-metric__value {
font-size: var(--metric-value-font-size);
margin: calc(var(--default-padding) / 2) 0;
white-space: nowrap;
/* No wrapping between metric value and the icon */
grid-column-start: 2;
}
@media screen and (max-width: 535px) {
.lh-metrics-container {
display: block;
}
.lh-metric {
border-bottom: none !important;
}
.lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(1) {
border-bottom: 1px solid var(--report-border-color-secondary) !important;
}
/* Change the grid to 3 columns for narrow viewport. */
.lh-metric__innerwrap {
/**
* Icon -- Metric Name -- Metric Value
*/
grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;
}
.lh-metric__value {
justify-self: end;
grid-column-start: unset;
}
}
/* No-JS toggle switch */
/* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */
.lh-metrics-toggle__input:checked~.lh-metrics-container .lh-metric__description {
display: block;
}
/* TODO get rid of the SVGS and clean up these some more */
.lh-metrics-toggle__input {
opacity: 0;
position: absolute;
right: 0;
top: 0px;
}
.lh-metrics-toggle__input+div>label>.lh-metrics-toggle__labeltext--hide,
.lh-metrics-toggle__input:checked+div>label>.lh-metrics-toggle__labeltext--show {
display: none;
}
.lh-metrics-toggle__input:checked+div>label>.lh-metrics-toggle__labeltext--hide {
display: inline;
}
.lh-metrics-toggle__input:focus+div>label {
outline: -webkit-focus-ring-color auto 3px;
}
.lh-metrics-toggle__label {
cursor: pointer;
font-size: var(--report-font-size-secondary);
line-height: var(--report-line-height-secondary);
color: var(--color-gray-700);
}
/* Pushes the metric description toggle button to the right. */
.lh-audit-group--metrics .lh-audit-group__header {
display: flex;
justify-content: space-between;
}
.lh-metric__icon,
.lh-scorescale-range::before {
content: '';
width: var(--score-icon-size);
height: var(--score-icon-size);
display: inline-block;
margin: var(--score-icon-margin);
}
.lh-metric--pass .lh-metric__value {
color: var(--color-pass-secondary);
}
.lh-metric--pass .lh-metric__icon {
border-radius: 100%;
background: var(--color-pass);
}
.lh-metric--average .lh-metric__value {
color: var(--color-average-secondary);
}
.lh-metric--average .lh-metric__icon {
background: var(--color-average);
width: var(--icon-square-size);
height: var(--icon-square-size);
}
.lh-metric--fail .lh-metric__value {
color: var(--color-fail-secondary);
}
.lh-metric--fail .lh-metric__icon {
border-left: calc(var(--score-icon-size) / 2) solid transparent;
border-right: calc(var(--score-icon-size) / 2) solid transparent;
border-bottom: var(--score-icon-size) solid var(--color-fail);
}
.lh-metric--error .lh-metric__value,
.lh-metric--error .lh-metric__description {
color: var(--color-fail-secondary);
}
/* Filmstrip */
.lh-filmstrip-container {
/* smaller gap between metrics and filmstrip */
margin: -8px auto 0 auto;
}
.lh-filmstrip {
display: grid;
justify-content: space-between;
padding-bottom: var(--default-padding);
width: 100%;
grid-template-columns: repeat(auto-fit, 90px);
}
.lh-filmstrip__frame {
text-align: right;
position: relative;
}
.lh-filmstrip__thumbnail {
border: 1px solid var(--report-border-color-secondary);
max-height: 150px;
max-width: 120px;
}
/* Audit */
.lh-audit {
border-bottom: 1px solid var(--report-border-color-secondary);
}
/* Apply border-top to just the first audit. */
.lh-audit {
border-top: 1px solid var(--report-border-color-secondary);
}
.lh-audit~.lh-audit {
border-top: none;
}
.lh-audit--error .lh-audit__display-text {
color: var(--color-fail-secondary);
}
/* Audit Group */
.lh-audit-group {
margin-bottom: var(--audit-group-margin-bottom);
position: relative;
}
.lh-audit-group--metrics {
margin-bottom: calc(var(--audit-group-margin-bottom) / 2);
}
.lh-audit-group__header::before {
/* By default, groups don't get an icon */
content: none;
width: var(--pwa-icon-size);
height: var(--pwa-icon-size);
margin: var(--pwa-icon-margin);
display: inline-block;
vertical-align: middle;
}
/* Style the "over budget" columns red. */
.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(4),
.lh-audit-group--budgets #performance-budget tbody tr td:nth-child(5),
.lh-audit-group--budgets #timing-budget tbody tr td:nth-child(3) {
color: var(--color-red-700);
}
/* Align the "over budget request count" text to be close to the "over budget bytes" column. */
.lh-audit-group--budgets .lh-table tbody tr td:nth-child(4) {
text-align: right;
}
.lh-audit-group--budgets .lh-details--budget {
width: 100%;
margin: 0 0 var(--default-padding);
}
.lh-audit-group--pwa-installable .lh-audit-group__header::before {
content: '';
background-image: var(--pwa-installable-gray-url);
}
.lh-audit-group--pwa-optimized .lh-audit-group__header::before {
content: '';
background-image: var(--pwa-optimized-gray-url);
}
.lh-audit-group--pwa-installable.lh-badged .lh-audit-group__header::before {
background-image: var(--pwa-installable-color-url);
}
.lh-audit-group--pwa-optimized.lh-badged .lh-audit-group__header::before {
background-image: var(--pwa-optimized-color-url);
}
.lh-audit-group--metrics .lh-audit-group__summary {
margin-top: 0;
margin-bottom: 0;
}
.lh-audit-group__summary {
display: flex;
justify-content: space-between;
align-items: center;
}
.lh-audit-group__header .lh-chevron {
margin-top: calc((var(--report-line-height) - 5px) / 2);
}
.lh-audit-group__header {
letter-spacing: 0.8px;
padding: var(--default-padding);
padding-left: 0;
}
.lh-audit-group__header,
.lh-audit-group__summary {
font-size: var(--report-font-size-secondary);
line-height: var(--report-line-height-secondary);
color: var(--color-gray-700);
}
.lh-audit-group__title {
text-transform: uppercase;
font-weight: 500;
}
.lh-audit-group__itemcount {
color: var(--color-gray-600);
}
.lh-audit-group__footer {
color: var(--color-gray-600);
display: block;
margin-top: var(--default-padding);
}
.lh-details,
.lh-category-header__description,
.lh-audit-group__footer {
font-size: var(--report-font-size-secondary);
line-height: var(--report-line-height-secondary);
}
.lh-audit-explanation {
margin: var(--audit-padding-vertical) 0 calc(var(--audit-padding-vertical) / 2) var(--audit-margin-horizontal);
line-height: var(--audit-explanation-line-height);
display: inline-block;
}
.lh-audit--fail .lh-audit-explanation {
color: var(--color-fail-secondary);
}
/* Report */
.lh-list> :not(:last-child) {
margin-bottom: calc(var(--default-padding) * 2);
}
.lh-header-container {
display: block;
margin: 0 auto;
position: relative;
word-wrap: break-word;
}
.lh-header-container .lh-scores-wrapper {
border-bottom: 1px solid var(--color-gray-200);
}
.lh-report {
min-width: var(--report-content-min-width);
}
.lh-exception {
font-size: large;
}
.lh-code {
white-space: normal;
margin-top: 0;
font-size: var(--report-monospace-font-size);
}
.lh-warnings {
--item-margin: calc(var(--report-line-height) / 6);
color: var(--color-average-secondary);
margin: var(--audit-padding-vertical) 0;
padding: var(--default-padding) var(--default-padding) var(--default-padding) calc(var(--audit-description-padding-left));
background-color: var(--toplevel-warning-background-color);
}
.lh-warnings span {
font-weight: bold;
}
.lh-warnings--toplevel {
--item-margin: calc(var(--header-line-height) / 4);
color: var(--toplevel-warning-text-color);
margin-left: auto;
margin-right: auto;
max-width: var(--report-content-max-width-minus-edge-gap);
padding: var(--toplevel-warning-padding);
border-radius: 8px;
}
.lh-warnings__msg {
color: var(--toplevel-warning-message-text-color);
margin: 0;
}
.lh-warnings ul {
margin: 0;
}
.lh-warnings li {
margin: var(--item-margin) 0;
}
.lh-warnings li:last-of-type {
margin-bottom: 0;
}
.lh-scores-header {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.lh-scores-header__solo {
padding: 0;
border: 0;
}
/* Gauge */
.lh-gauge__wrapper--pass {
color: var(--color-pass-secondary);
fill: var(--color-pass);
stroke: var(--color-pass);
}
.lh-gauge__wrapper--average {
color: var(--color-average-secondary);
fill: var(--color-average);
stroke: var(--color-average);
}
.lh-gauge__wrapper--fail {
color: var(--color-fail-secondary);
fill: var(--color-fail);
stroke: var(--color-fail);
}
.lh-gauge__wrapper--not-applicable {
color: var(--color-not-applicable);
fill: var(--color-not-applicable);
stroke: var(--color-not-applicable);
}
.lh-fraction__wrapper .lh-fraction__content::before {
content: '';
height: var(--score-icon-size);
width: var(--score-icon-size);
margin: var(--score-icon-margin);
display: inline-block;
}
.lh-fraction__wrapper--pass .lh-fraction__content {
color: var(--color-pass-secondary);
}
.lh-fraction__wrapper--pass .lh-fraction__background {
background-color: var(--color-pass);
}
.lh-fraction__wrapper--pass .lh-fraction__content::before {
background-color: var(--color-pass);
border-radius: 50%;
}
.lh-fraction__wrapper--average .lh-fraction__content {
color: var(--color-average-secondary);
}
.lh-fraction__wrapper--average .lh-fraction__background,
.lh-fraction__wrapper--average .lh-fraction__content::before {
background-color: var(--color-average);
}
.lh-fraction__wrapper--fail .lh-fraction__content {
color: var(--color-fail);
}
.lh-fraction__wrapper--fail .lh-fraction__background {
background-color: var(--color-fail);
}
.lh-fraction__wrapper--fail .lh-fraction__content::before {
border-left: calc(var(--score-icon-size) / 2) solid transparent;
border-right: calc(var(--score-icon-size) / 2) solid transparent;
border-bottom: var(--score-icon-size) solid var(--color-fail);
}
.lh-fraction__wrapper--null .lh-fraction__content {
color: var(--color-gray-700);
}
.lh-fraction__wrapper--null .lh-fraction__background {
background-color: var(--color-gray-700);
}
.lh-fraction__wrapper--null .lh-fraction__content::before {
border-radius: 50%;
border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-700);
}
.lh-fraction__background {
position: absolute;
height: 100%;
width: 100%;
border-radius: calc(var(--gauge-circle-size) / 2);
opacity: 0.1;
z-index: -1;
}
.lh-fraction__content-wrapper {
height: var(--gauge-circle-size);
display: flex;
align-items: center;
}
.lh-fraction__content {
display: flex;
position: relative;
align-items: center;
justify-content: center;
font-size: calc(0.3 * var(--gauge-circle-size));
line-height: calc(0.4 * var(--gauge-circle-size));
width: max-content;
min-width: calc(1.5 * var(--gauge-circle-size));
padding: calc(0.1 * var(--gauge-circle-size)) calc(0.2 * var(--gauge-circle-size));
--score-icon-size: calc(0.21 * var(--gauge-circle-size));
--score-icon-margin: 0 calc(0.15 * var(--gauge-circle-size)) 0 0;
}
.lh-gauge {
stroke-linecap: round;
width: var(--gauge-circle-size);
height: var(--gauge-circle-size);
}
.lh-category .lh-gauge {
--gauge-circle-size: var(--gauge-circle-size-big);
}
.lh-gauge-base {
opacity: 0.1;
}
.lh-gauge-arc {
fill: none;
transform-origin: 50% 50%;
animation: load-gauge var(--transition-length) ease both;
animation-delay: 250ms;
}
.lh-gauge__svg-wrapper {
position: relative;
height: var(--gauge-circle-size);
}
.lh-category .lh-gauge__svg-wrapper,
.lh-category .lh-fraction__wrapper {
--gauge-circle-size: var(--gauge-circle-size-big);
}
/* The plugin badge overlay */
.lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
width: var(--plugin-badge-size);
height: var(--plugin-badge-size);
background-color: var(--plugin-badge-background-color);
background-image: var(--plugin-icon-url);
background-repeat: no-repeat;
background-size: var(--plugin-icon-size);
background-position: 58% 50%;
content: "";
position: absolute;
right: -6px;
bottom: 0px;
display: block;
z-index: 100;
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
border-radius: 25%;
}
.lh-category .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
width: var(--plugin-badge-size-big);
height: var(--plugin-badge-size-big);
}
@keyframes load-gauge {
from {
stroke-dasharray: 0 352;
}
}
.lh-gauge__percentage {
width: 100%;
height: var(--gauge-circle-size);
line-height: var(--gauge-circle-size);
position: absolute;
font-family: var(--report-font-family-monospace);
font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px);
text-align: center;
top: var(--score-container-padding);
}
.lh-category .lh-gauge__percentage {
--gauge-circle-size: var(--gauge-circle-size-big);
--gauge-percentage-font-size: var(--gauge-percentage-font-size-big);
}
.lh-gauge__wrapper,
.lh-fraction__wrapper {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
text-decoration: none;
padding: var(--score-container-padding);
--transition-length: 1s;
/* Contain the layout style paint & layers during animation*/
contain: content;
will-change: opacity;
/* Only using for layer promotion */
}
.lh-gauge__label,
.lh-fraction__label {
font-size: var(--gauge-label-font-size);
font-weight: 500;
line-height: var(--gauge-label-line-height);
margin-top: 10px;
text-align: center;
color: var(--report-text-color);
word-break: keep-all;
}
/* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
.lh-category .lh-gauge__label,
.lh-category .lh-fraction__label {
--gauge-label-font-size: var(--gauge-label-font-size-big);
--gauge-label-line-height: var(--gauge-label-line-height-big);
margin-top: 14px;
}
.lh-scores-header .lh-gauge__wrapper,
.lh-scores-header .lh-fraction__wrapper,
.lh-scores-header .lh-gauge--pwa__wrapper,
.lh-sticky-header .lh-gauge__wrapper,
.lh-sticky-header .lh-fraction__wrapper,
.lh-sticky-header .lh-gauge--pwa__wrapper {
width: var(--gauge-wrapper-width);
}
.lh-scorescale {
display: inline-flex;
gap: calc(var(--default-padding) * 4);
margin: 16px auto 0 auto;
font-size: var(--report-font-size-secondary);
color: var(--color-gray-700);
}
.lh-scorescale-range {
display: flex;
align-items: center;
font-family: var(--report-font-family-monospace);
white-space: nowrap;
}
.lh-category-header__finalscreenshot .lh-scorescale {
border: 0;
display: flex;
justify-content: center;
}
.lh-category-header__finalscreenshot .lh-scorescale-range {
font-family: unset;
font-size: 12px;
}
.lh-scorescale-wrap {
display: contents;
}
/* Hide category score gauages if it's a single category report */
.lh-header--solo-category .lh-scores-wrapper {
display: none;
}
.lh-categories {
width: 100%;
}
.lh-category {
padding: var(--category-padding);
max-width: var(--report-content-max-width);
margin: 0 auto;
scroll-margin-top: calc(var(--sticky-header-buffer) - 1em);
}
.lh-category-wrapper {
border-bottom: 1px solid var(--color-gray-200);
}
.lh-category-wrapper:last-of-type {
border-bottom: 0;
}
.lh-category-header {
margin-bottom: var(--section-padding-vertical);
}
.lh-category-header .lh-score__gauge {
max-width: 400px;
width: auto;
margin: 0px auto;
}
.lh-category-header__finalscreenshot {
display: grid;
grid-template: none / 1fr 1px 1fr;
justify-items: center;
align-items: center;
gap: var(--report-line-height);
min-height: 288px;
margin-bottom: var(--default-padding);
}
.lh-final-ss-image {
/* constrain the size of the image to not be too large */
max-height: calc(var(--gauge-circle-size-big) * 2.8);
max-width: calc(var(--gauge-circle-size-big) * 3.5);
border: 1px solid var(--color-gray-200);
padding: 4px;
border-radius: 3px;
display: block;
}
.lh-category-headercol--separator {
background: var(--color-gray-200);
width: 1px;
height: var(--gauge-circle-size-big);
}
@media screen and (max-width: 780px) {
.lh-category-header__finalscreenshot {
grid-template: 1fr 1fr / none
}
.lh-category-headercol--separator {
display: none;
}
}
/* 964 fits the min-width of the filmstrip */
@media screen and (max-width: 964px) {
.lh-report {
margin-left: 0;
width: 100%;
}
}
@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 {
position: relative;
border-collapse: separate;
border-spacing: 0;
/* Can't assign padding to table, so shorten the width instead. */
width: calc(100% - var(--audit-description-padding-left) - var(--stackpack-padding-horizontal));
border: 1px solid var(--report-border-color-secondary);
}
.lh-table thead th {
position: sticky;
top: var(--sticky-header-buffer);
z-index: 1;
background-color: var(--report-background-color);
border-bottom: 1px solid var(--report-border-color-secondary);
font-weight: normal;
color: var(--color-gray-600);
/* See text-wrapping comment on .lh-container. */
word-break: normal;
}
.lh-row--group {
background-color: var(--table-group-header-background-color);
}
.lh-row--group td {
font-weight: bold;
font-size: 1.05em;
color: var(--table-group-header-text-color);
}
.lh-row--group td:first-child {
display: block;
min-width: max-content;
font-weight: normal;
}
.lh-row--group .lh-text {
color: inherit;
text-decoration: none;
display: inline-block;
}
.lh-row--group a.lh-link:hover {
text-decoration: underline;
}
.lh-row--group .lh-audit__adorn {
text-transform: capitalize;
font-weight: normal;
padding: 2px 3px 1px 3px;
}
.lh-row--group .lh-audit__adorn1p {
color: var(--link-color);
border-color: var(--link-color);
}
.lh-row--group .lh-report-icon--external::before {
content: "";
background-repeat: no-repeat;
width: 14px;
height: 16px;
opacity: 0.7;
display: inline-block;
vertical-align: middle;
}
.lh-row--group .lh-report-icon--external {
visibility: hidden;
}
.lh-row--group:hover .lh-report-icon--external {
visibility: visible;
}
.lh-dark .lh-report-icon--external::before {
filter: invert(1);
}
/** Manages indentation of two-level and three-level nested adjacent rows */
.lh-row--group~[data-entity]:not(.lh-row--group) td:first-child {
padding-left: 20px;
}
.lh-row--group~[data-entity]:not(.lh-row--group)~.lh-sub-item-row td:first-child {
padding-left: 40px;
}
.lh-row--even {
background-color: var(--table-group-header-background-color);
}
.lh-row--hidden {
display: none;
}
.lh-table th,
.lh-table td {
padding: var(--default-padding);
}
.lh-table tr {
vertical-align: middle;
}
.lh-table tr:hover {
background-color: var(--table-higlight-background-color);
}
/* Looks unnecessary, but mostly for keeping the | s left-aligned */
.lh-table-column--text,
.lh-table-column--source-location,
.lh-table-column--url,
/* .lh-table-column--thumbnail, */
/* .lh-table-column--empty,*/
.lh-table-column--code,
.lh-table-column--node {
text-align: left;
}
.lh-table-column--code {
min-width: 100px;
}
.lh-table-column--bytes,
.lh-table-column--timespanMs,
.lh-table-column--ms,
.lh-table-column--numeric {
text-align: right;
word-break: normal;
}
.lh-table .lh-table-column--thumbnail {
width: var(--image-preview-size);
}
.lh-table-column--url {
min-width: 250px;
}
.lh-table-column--text {
min-width: 80px;
}
/* Keep columns narrow if they follow the URL column */
/* 12% was determined to be a decent narrow width, but wide enough for column headings */
.lh-table-column--url+th.lh-table-column--bytes,
.lh-table-column--url+.lh-table-column--bytes+th.lh-table-column--bytes,
.lh-table-column--url+.lh-table-column--ms,
.lh-table-column--url+.lh-table-column--ms+th.lh-table-column--bytes,
.lh-table-column--url+.lh-table-column--bytes+th.lh-table-column--timespanMs {
width: 12%;
}
.lh-text__url-host {
display: inline;
}
.lh-text__url-host {
margin-left: calc(var(--report-font-size) / 2);
opacity: 0.6;
font-size: 90%
}
.lh-thumbnail {
object-fit: cover;
width: var(--image-preview-size);
height: var(--image-preview-size);
display: block;
}
.lh-unknown pre {
overflow: scroll;
border: solid 1px var(--color-gray-200);
}
.lh-text__url>a {
color: inherit;
text-decoration: none;
}
.lh-text__url>a:hover {
text-decoration: underline dotted #999;
}
.lh-sub-item-row {
margin-left: 20px;
margin-bottom: 0;
color: var(--color-gray-700);
}
.lh-sub-item-row td {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 20px;
}
/* Chevron
https://codepen.io/paulirish/pen/LmzEmK
*/
.lh-chevron {
--chevron-angle: 42deg;
/* Edge doesn't support transform: rotate(calc(...)), so we define it here */
--chevron-angle-right: -42deg;
width: var(--chevron-size);
height: var(--chevron-size);
margin-top: calc((var(--report-line-height) - 12px) / 2);
}
.lh-chevron__lines {
transition: transform 0.4s;
transform: translateY(var(--report-line-height));
}
.lh-chevron__line {
stroke: var(--chevron-line-stroke);
stroke-width: var(--chevron-size);
stroke-linecap: square;
transform-origin: 50%;
transform: rotate(var(--chevron-angle));
transition: transform 300ms, stroke 300ms;
}
.lh-expandable-details .lh-chevron__line-right,
.lh-expandable-details[open] .lh-chevron__line-left {
transform: rotate(var(--chevron-angle-right));
}
.lh-expandable-details[open] .lh-chevron__line-right {
transform: rotate(var(--chevron-angle));
}
.lh-expandable-details[open] .lh-chevron__lines {
transform: translateY(calc(var(--chevron-size) * -1));
}
.lh-expandable-details[open] {
animation: 300ms openDetails forwards;
padding-bottom: var(--default-padding);
}
@keyframes openDetails {
from {
outline: 1px solid var(--report-background-color);
}
to {
outline: 1px solid;
box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
}
}
@media screen and (max-width: 780px) {
/* no black outline if we're not confident the entire table can be displayed within bounds */
.lh-expandable-details[open] {
animation: none;
}
}
.lh-expandable-details[open] summary,
details.lh-clump>summary {
border-bottom: 1px solid var(--report-border-color-secondary);
}
details.lh-clump[open]>summary {
border-bottom-width: 0;
}
details .lh-clump-toggletext--hide,
details[open] .lh-clump-toggletext--show {
display: none;
}
details[open] .lh-clump-toggletext--hide {
display: block;
}
/* Tooltip */
.lh-tooltip-boundary {
position: relative;
}
.lh-tooltip {
position: absolute;
display: none;
/* Don't retain these layers when not needed */
opacity: 0;
background: #ffffff;
white-space: pre-line;
/* Render newlines in the text */
min-width: 246px;
max-width: 275px;
padding: 15px;
border-radius: 5px;
text-align: initial;
line-height: 1.4;
}
/* 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) {
.lh-tooltip {
min-width: 45vw;
padding: 3vw;
}
}
.lh-tooltip-boundary:hover .lh-tooltip {
display: block;
animation: fadeInTooltip 250ms;
animation-fill-mode: forwards;
animation-delay: 850ms;
bottom: 100%;
z-index: 1;
will-change: opacity;
right: 0;
pointer-events: none;
}
.lh-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));
pointer-events: auto;
}
}
/* Element screenshot */
.lh-element-screenshot {
float: left;
margin-right: 20px;
}
.lh-element-screenshot__content {
overflow: hidden;
min-width: 110px;
display: flex;
justify-content: center;
background-color: var(--report-background-color);
}
.lh-element-screenshot__image {
position: relative;
/* Set by ElementScreenshotRenderer.installFullPageScreenshotCssVariable */
background-image: var(--element-screenshot-url);
outline: 2px solid #777;
background-color: white;
background-repeat: no-repeat;
}
.lh-element-screenshot__mask {
position: absolute;
background: #555;
opacity: 0.8;
}
.lh-element-screenshot__element-marker {
position: absolute;
outline: 2px solid var(--color-lime-400);
}
.lh-element-screenshot__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
/* .lh-topbar is 1000 */
background: var(--screenshot-overlay-background);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
}
.lh-element-screenshot__overlay .lh-element-screenshot {
margin-right: 0;
/* clearing margin used in thumbnail case */
outline: 1px solid var(--color-gray-700);
}
.lh-screenshot-overlay--enabled .lh-element-screenshot {
cursor: zoom-out;
}
.lh-screenshot-overlay--enabled .lh-node .lh-element-screenshot {
cursor: zoom-in;
}
.lh-meta__items {
--meta-icon-size: calc(var(--report-icon-size) * 0.667);
padding: var(--default-padding);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: var(--env-item-background-color);
border-radius: 3px;
margin: 0 0 var(--default-padding) 0;
font-size: 12px;
column-gap: var(--default-padding);
color: var(--color-gray-700);
}
.lh-meta__item {
display: block;
list-style-type: none;
position: relative;
padding: 0 0 0 calc(var(--meta-icon-size) + var(--default-padding) * 2);
cursor: unset;
/* disable pointer cursor from report-icon */
}
.lh-meta__item.lh-tooltip-boundary {
text-decoration: dotted underline var(--color-gray-500);
cursor: help;
}
.lh-meta__item.lh-report-icon::before {
position: absolute;
left: var(--default-padding);
width: var(--meta-icon-size);
height: var(--meta-icon-size);
}
.lh-meta__item.lh-report-icon:hover::before {
opacity: 0.7;
}
.lh-meta__item .lh-tooltip {
color: var(--color-gray-800);
}
.lh-meta__item .lh-tooltip::before {
right: auto;
/* Set the tooltip arrow to the leftside */
left: 6px;
}
/* Change the grid for narrow viewport. */
@media screen and (max-width: 640px) {
.lh-meta__items {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 535px) {
.lh-meta__items {
display: block;
}
}
/* Explodey gauge */
.lh-exp-gauge-component {
margin-bottom: 10px;
}
.lh-exp-gauge-component circle {
stroke: currentcolor;
r: var(--radius);
}
.lh-exp-gauge-component text {
font-size: calc(var(--radius) * 0.2);
}
.lh-exp-gauge-component .lh-exp-gauge {
margin: 0 auto;
width: 225px;
stroke-width: var(--stroke-width);
stroke-linecap: round;
/* for better rendering perf */
contain: strict;
height: 225px;
will-change: transform;
}
.lh-exp-gauge-component .lh-exp-gauge--faded {
opacity: 0.1;
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper {
font-family: var(--report-font-family-monospace);
text-align: center;
text-decoration: none;
transition: .3s;
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass {
color: var(--color-pass);
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper--average {
color: var(--color-average);
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail {
color: var(--color-fail);
}
.lh-exp-gauge-component .state--expanded {
transition: color .3s;
}
.lh-exp-gauge-component .state--highlight {
color: var(--color-highlight);
}
.lh-exp-gauge-component .lh-exp-gauge__svg-wrapper {
display: flex;
flex-direction: column-reverse;
}
.lh-exp-gauge-component .lh-exp-gauge__label {
fill: var(--report-text-color);
font-family: var(--report-font-family);
font-size: 12px;
}
.lh-exp-gauge-component .lh-exp-gauge__cutout {
opacity: .999;
transition: opacity .3s;
}
.lh-exp-gauge-component .state--highlight .lh-exp-gauge__cutout {
opacity: 0;
}
.lh-exp-gauge-component .lh-exp-gauge__inner {
color: inherit;
}
.lh-exp-gauge-component .lh-exp-gauge__base {
fill: currentcolor;
}
.lh-exp-gauge-component .lh-exp-gauge__arc {
fill: none;
transition: opacity .3s;
}
.lh-exp-gauge-component .lh-exp-gauge__arc--metric {
color: var(--metric-color);
stroke-dashoffset: var(--metric-offset);
opacity: 0.3;
}
.lh-exp-gauge-component .lh-exp-gauge-hovertarget {
color: currentcolor;
opacity: 0.001;
stroke-linecap: butt;
stroke-width: 24;
/* hack. move the hover target out of the center. ideally i tweak the r instead but that rquires considerably more math. */
transform: scale(1.15);
}
.lh-exp-gauge-component .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {
opacity: 0;
stroke-dasharray: 0 calc(var(--circle-meas) * var(--radius));
transition: 0s .005s;
}
.lh-exp-gauge-component .state--expanded .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {
opacity: .999;
stroke-dasharray: var(--metric-array);
transition: 0.3s;
/* calc(.005s + var(--i)*.05s); entrace animation */
}
.lh-exp-gauge-component .state--expanded .lh-exp-gauge__inner .lh-exp-gauge__arc {
opacity: 0;
}
.lh-exp-gauge-component .lh-exp-gauge__percentage {
text-anchor: middle;
dominant-baseline: middle;
opacity: .999;
font-size: calc(var(--radius) * 0.625);
transition: opacity .3s ease-in;
}
.lh-exp-gauge-component .state--highlight .lh-exp-gauge__percentage {
opacity: 0;
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail .lh-exp-gauge__percentage {
fill: var(--color-fail);
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper--average .lh-exp-gauge__percentage {
fill: var(--color-average);
}
.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass .lh-exp-gauge__percentage {
fill: var(--color-pass);
}
.lh-exp-gauge-component .lh-cover {
fill: none;
opacity: .001;
pointer-events: none;
}
.lh-exp-gauge-component .state--expanded .lh-cover {
pointer-events: auto;
}
.lh-exp-gauge-component .metric {
transform: scale(var(--scale-initial));
opacity: 0;
transition: transform .1s .2s ease-out, opacity .3s ease-out;
pointer-events: none;
}
.lh-exp-gauge-component .metric text {
pointer-events: none;
}
.lh-exp-gauge-component .metric__value {
fill: currentcolor;
opacity: 0;
transition: opacity 0.2s;
}
.lh-exp-gauge-component .state--expanded .metric {
transform: scale(1);
opacity: .999;
transition: transform .3s ease-out, opacity .3s ease-in, stroke-width .1s ease-out;
transition-delay: calc(var(--i)*.05s);
pointer-events: auto;
}
.lh-exp-gauge-component .state--highlight .metric {
opacity: .3;
}
.lh-exp-gauge-component .state--highlight .metric--highlight {
opacity: .999;
stroke-width: calc(1.5*var(--stroke-width));
}
.lh-exp-gauge-component .state--highlight .metric--highlight .metric__value {
opacity: 0.999;
}
/*
the initial first load peek
*/
.lh-exp-gauge-component .lh-exp-gauge__bg {
/* needed for the use zindex stacking w/ transparency */
fill: var(--report-background-color);
stroke: var(--report-background-color);
}
.lh-exp-gauge-component .state--peek .metric {
transition-delay: 0ms;
animation: peek var(--peek-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96);
animation-fill-mode: forwards;
}
.lh-exp-gauge-component .state--peek .lh-exp-gauge__inner .lh-exp-gauge__arc {
opacity: 1;
}
.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc.lh-exp-gauge--faded {
opacity: 0.3;
/* just a tad stronger cuz its fighting with a big solid arg */
}
/* do i need to set expanded and override this? */
.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {
transition: opacity 0.3s;
}
.lh-exp-gauge-component .state--peek {
color: unset;
}
.lh-exp-gauge-component .state--peek .metric__label {
display: none;
}
.lh-exp-gauge-component .metric__label {
fill: var(--report-text-color);
}
@keyframes peek {
/* biggest it should go is 0.92. smallest is 0.8 */
0% {
transform: scale(0.8);
opacity: 0.8;
}
50% {
transform: scale(0.92);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 0.8;
}
}
.lh-exp-gauge-component .wrapper {
width: 620px;
} |