lighthouse 11.7.0-dev.20240402 → 11.7.0-dev.20240404

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,725 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2021 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
-
7
- .flow-vars {
8
- --app-font-size: 12px;
9
- --base-spacing: 16px;
10
- --bold-weight: 500;
11
- --category-summary-font-size: 18px;
12
- --double-base-spacing: calc(var(--base-spacing) * 2);
13
- --gather-mode-icon-size: 16px;
14
- --header-adjacent-title-font-size: 14px;
15
- --header-adjacent-title-width: minmax(var(--min-text-width), 1fr);
16
- --header-current-description-font-size: 12px;
17
- --header-current-title-font-size: 20px;
18
- --header-margin: minmax(0px, calc(var(--base-spacing) * 4));
19
- --half-base-spacing: calc(var(--base-spacing) / 2);
20
- --min-text-width: 20ch;
21
- --dialog-border-color: var(--color-gray-700);
22
- --separator-color: var(--color-gray-300);
23
- --sidebar-flow-step-navigation-font-size: 14px;
24
- --sidebar-selected-bg-color: #DDEEFF;
25
- --sidebar-summary-font-size: 14px;
26
- --sidebar-title-font-size: 16px;
27
- --sidebar-width: 320px;
28
- --summary-flow-step-link-font-size: 14px;
29
- --summary-navigation-header-font-size: 12px;
30
- --summary-header-margin: 52px;
31
- --summary-subtitle-font-size: 12px;
32
- --summary-title-font-size: 20px;
33
- --summary-tooltip-box-shadow-color: rgba(0, 0, 0, 0.25);
34
- --summary-tooltip-line-height: 16px;
35
- --topbar-button-font-size: 14px;
36
- --topbar-button-size: 45px;
37
- --topbar-title-font-size: 14px;
38
- --dialog-title-font-size: 20px;
39
- }
40
-
41
- .App {
42
- display: grid;
43
- grid-template-areas:
44
- "topbar topbar"
45
- "sidebar content";
46
- grid-template-columns: min-content auto;
47
- grid-template-rows: min-content auto;
48
- height: 100vh;
49
- max-width: 100vw;
50
- font-size: var(--app-font-size);
51
- }
52
- .App--collapsed {
53
- grid-template-columns: 0px auto;
54
- }
55
- .App--collapsed .Sidebar {
56
- display: none;
57
- }
58
-
59
- @media print {
60
- .App {
61
- grid-template-rows: 0px auto !important;
62
- grid-template-columns: 0px auto !important;
63
- }
64
-
65
- .Topbar {
66
- display: none !important;
67
- }
68
-
69
- .Sidebar {
70
- display: none !important;
71
- }
72
-
73
- .Content {
74
- overflow-y: visible !important;
75
- }
76
-
77
- .SummaryFlow {
78
- grid-template-columns: repeat(7, min-content) !important;
79
- }
80
- }
81
-
82
- .Topbar {
83
- position: relative;
84
- padding-right: var(--base-spacing);
85
- grid-area: topbar;
86
- display: flex;
87
- align-items: center;
88
- border-bottom: 1px solid var(--separator-color);
89
- }
90
-
91
- .TopbarButton {
92
- height: var(--topbar-button-size);
93
- min-width: var(--topbar-button-size);
94
- cursor: pointer;
95
- display: flex;
96
- align-items: center;
97
- justify-content: center;
98
- -webkit-touch-callout: none;
99
- -webkit-user-select: none;
100
- -khtml-user-select: none;
101
- -moz-user-select: none;
102
- -ms-user-select: none;
103
- user-select: none;
104
- cursor: pointer;
105
- background: none;
106
- color: inherit;
107
- border: none;
108
- font: inherit;
109
- outline: inherit;
110
- font-size: var(--topbar-button-font-size);
111
- margin-right: var(--base-spacing);
112
- }
113
-
114
- .Topbar__logo {
115
- display: flex;
116
- margin-right: var(--half-base-spacing);
117
- }
118
-
119
- .Topbar__title {
120
- font-size: var(--topbar-title-font-size);
121
- font-weight: var(--bold-weight);
122
- margin-right: var(--double-base-spacing);
123
- }
124
-
125
- .Topbar__help-label {
126
- display: flex;
127
- align-items: center;
128
- }
129
- .Topbar__help-label > :first-child {
130
- margin-right: var(--half-base-spacing);
131
- }
132
-
133
- .Content {
134
- grid-area: content;
135
- overflow-y: auto;
136
- }
137
-
138
- .FlowSegment {
139
- height: 100%;
140
- width: var(--gather-mode-icon-size);
141
- display: flex;
142
- flex-direction: column;
143
- align-items: center;
144
- margin: 0 18px;
145
- color: var(--color-blue-A700);
146
- }
147
-
148
- .FlowSegment__top-line, .FlowSegment__bottom-line {
149
- width: 2px;
150
- flex-grow: 1;
151
- background-color: var(--color-blue-A700);
152
- }
153
-
154
- .Separator {
155
- height: 1px;
156
- width: 100%;
157
- background-color: var(--separator-color);
158
- }
159
-
160
- .Sidebar {
161
- grid-area: sidebar;
162
- border-right: 1px solid var(--separator-color);
163
- width: var(--sidebar-width);
164
- overflow-x: hidden;
165
- overflow-y: auto;
166
- }
167
- .Sidebar a {
168
- color: var(--color-gray-700);
169
- text-decoration: none;
170
- }
171
-
172
- .Sidebar--current {
173
- background-color: var(--sidebar-selected-bg-color);
174
- color: var(--color-blue-A700) !important;
175
- font-weight: var(--bold-weight);
176
- }
177
-
178
- .SidebarHeader {
179
- margin: 26px var(--base-spacing);
180
- }
181
- .SidebarHeader__title {
182
- font-size: var(--sidebar-title-font-size);
183
- font-weight: var(--bold-weight);
184
- width: max-content;
185
- }
186
- .SidebarHeader__date {
187
- color: var(--color-gray-700);
188
- width: max-content;
189
- }
190
-
191
- .SidebarRuntimeSettings {
192
- margin: var(--base-spacing);
193
- padding: var(--half-base-spacing);
194
- background-color: var(--color-gray-50);
195
- color: var(--color-gray-700);
196
- border-radius: 3px;
197
- }
198
-
199
- .SidebarRuntimeSettings__item {
200
- display: flex;
201
- align-items: center;
202
- flex-direction: row;
203
- }
204
-
205
- .SidebarRuntimeSettings__item--icon {
206
- margin-right: 8px;
207
- display: flex;
208
- height: 16px;
209
- width: 16px;
210
- align-items: center;
211
- justify-content: center;
212
- }
213
-
214
- .SidebarSummary {
215
- width: 100%;
216
- display: flex;
217
- padding: var(--half-base-spacing) 0px;
218
- align-items: center;
219
- margin: var(--half-base-spacing) 0px;
220
- }
221
-
222
- .SidebarSummary__icon {
223
- display: flex;
224
- height: 16px;
225
- width: 16px;
226
- align-items: center;
227
- justify-content: center;
228
- /* Flex column-gap workaround for safari */
229
- margin: 0px 18px;
230
- }
231
-
232
- .SidebarSummary__label {
233
- font-size: var(--sidebar-summary-font-size);
234
- }
235
-
236
- .SidebarFlow {
237
- margin: var(--half-base-spacing) 0px;
238
- }
239
-
240
- .SidebarFlowStep {
241
- display: flex;
242
- padding-right: var(--base-spacing);
243
- }
244
-
245
- .SidebarFlowStep__label {
246
- grid-column: 2;
247
- margin: var(--half-base-spacing) 0px;
248
- justify-self: left;
249
- overflow-x: hidden;
250
- text-overflow: ellipsis;
251
- }
252
- .SidebarFlowStep__label--navigation {
253
- font-size: var(--sidebar-flow-step-navigation-font-size);
254
- }
255
-
256
- .SidebarFlowSeparator > .FlowSegment {
257
- height: var(--half-base-spacing);
258
- }
259
-
260
- .Summary {
261
- display: grid;
262
- grid-template-columns: minmax(5%, 1fr) auto minmax(5%, 1fr);
263
- justify-content: start;
264
- width: 100%;
265
- }
266
- .Summary > * {
267
- grid-column: 2;
268
- }
269
- .Summary > .Separator {
270
- grid-column: 1 / span 3;
271
- }
272
-
273
- .SummaryHeader {
274
- margin: var(--summary-header-margin) 0px;
275
- }
276
-
277
- .SummaryHeader__title {
278
- font-size: var(--summary-title-font-size);
279
- font-weight: var(--bold-weight);
280
- line-height: 28px;
281
- margin: 0 0 calc(0.25 * var(--base-spacing));
282
- }
283
-
284
- .SummaryHeader__subtitle {
285
- font-size: var(--summary-subtitle-font-size);
286
- line-height: 16px;
287
- }
288
-
289
- .SummarySectionHeader {
290
- margin-top: var(--base-spacing);
291
- }
292
-
293
- .SummarySectionHeader__content {
294
- margin: var(--base-spacing) 0px;
295
- text-transform: uppercase;
296
- }
297
-
298
- .SummaryFlow {
299
- display: grid;
300
- max-width: var(--report-content-max-width);
301
- grid-auto-rows: min-content;
302
- grid-template-columns: min-content min-content minmax(var(--min-text-width), max-content) 1fr 1fr 1fr 1fr;
303
- align-items: center;
304
- margin: var(--base-spacing) 0px;
305
- --gauge-circle-size: 48px;
306
- }
307
- .SummaryFlow .lh-fraction__content {
308
- min-width: unset;
309
- }
310
-
311
- /* Hide top segment of sidebar flow */
312
- .SidebarFlow > :first-child .FlowSegment > .FlowSegment__top-line {
313
- background-color: transparent;
314
- }
315
-
316
- /* Hide end segments of summary flow */
317
- .SummaryFlow > :first-child > .FlowSegment > .FlowSegment__top-line {
318
- background-color: transparent;
319
- }
320
- .SummaryFlow > :last-child > .FlowSegment > .FlowSegment__bottom-line {
321
- background-color: transparent;
322
- }
323
-
324
- /* Hide segment for first navigation header */
325
- .SummaryFlow > :first-child .SummaryNavigationHeader .FlowSegment__bottom-line {
326
- background-color: transparent;
327
- }
328
- .SummaryFlow > :first-child .SummaryNavigationHeader .FlowSegment__top-line {
329
- background-color: transparent;
330
- }
331
-
332
- .SummaryFlowStep {
333
- display: contents;
334
- }
335
- .SummaryFlowStep .FlowSegment {
336
- grid-column: 2;
337
- }
338
- .SummaryFlowStep .FlowStepThumbnail {
339
- margin: var(--half-base-spacing);
340
- }
341
-
342
- .FlowStepThumbnail {
343
- align-self: center;
344
- justify-self: center;
345
- object-fit: cover;
346
- object-position: top left;
347
- border: 1px solid var(--color-gray-700);
348
- border-radius: 3px;
349
- padding: 2px;
350
- box-sizing: content-box !important;
351
- }
352
-
353
- .SummaryFlowStep__label {
354
- grid-column: 3;
355
- margin: var(--half-base-spacing);
356
- width: 100%;
357
- overflow-x: hidden;
358
- text-overflow: ellipsis;
359
- }
360
-
361
- .SummaryFlowStep__mode {
362
- color: var(--color-blue-A700);
363
- font-weight: var(--bold-weight);
364
- }
365
-
366
- .SummaryFlowStep__link {
367
- font-size: var(--summary-flow-step-link-font-size);
368
- line-height: 20px;
369
- color: var(--color-gray-800);
370
- text-decoration: underline;
371
- width: 100%;
372
- overflow-x: hidden;
373
- }
374
-
375
- .SummaryCategory__content {
376
- position: relative;
377
- }
378
- .SummaryCategory__content:hover,
379
- .SummaryCategory__content:focus-within {
380
- background-color: var(--color-gray-100);
381
- }
382
- .SummaryCategory__content:hover .SummaryTooltip,
383
- .SummaryCategory__content:focus-within .SummaryTooltip {
384
- display: block;
385
- }
386
-
387
- .SummaryTooltip {
388
- display: none;
389
- position: absolute;
390
- min-width: 200%;
391
- max-width: 300%;
392
- width: max-content;
393
- background-color: var(--report-background-color);
394
- border: 1px solid var(--color-gray-900);
395
- border-radius: 3px;
396
- padding: var(--base-spacing);
397
- right: 0;
398
- line-height: var(--summary-tooltip-line-height);
399
- box-shadow: 0px 4px 4px var(--summary-tooltip-box-shadow-color);
400
- z-index: 1;
401
- }
402
-
403
- .SummaryTooltip__title {
404
- font-weight: var(--bold-weight);
405
- }
406
-
407
- .SummaryTooltip__url {
408
- overflow-x: hidden;
409
- text-overflow: ellipsis;
410
- white-space: nowrap;
411
- margin-top: calc(0.25 * var(--base-spacing));
412
- margin-bottom: calc(0.75 * var(--base-spacing));
413
- color: var(--color-gray-700);
414
- }
415
-
416
- .SummaryTooltip__category {
417
- font-weight: var(--bold-weight);
418
- display: flex;
419
- align-items: center;
420
- margin-top: var(--half-base-spacing);
421
- }
422
-
423
- .SummaryTooltip__category-title {
424
- line-height: 24px;
425
- flex-grow: 1;
426
- }
427
-
428
- .SummaryTooltip__rating--pass {
429
- color: var(--color-pass);
430
- }
431
- .SummaryTooltip__rating--average {
432
- color: var(--color-average);
433
- }
434
- .SummaryTooltip__rating--fail,
435
- .SummaryTooltip__rating--error {
436
- color: var(--color-fail);
437
- }
438
-
439
- .SummaryTooltip__fraction {
440
- color: var(--color-gray-700);
441
- }
442
-
443
- .SummaryTooltip__informative {
444
- margin-top: calc(0.25 * var(--base-spacing));
445
- color: var(--color-gray-700);
446
- }
447
-
448
- .SummaryTooltipAudits__title {
449
- line-height: 24px;
450
- margin-top: calc(0.75 * var(--base-spacing));
451
- font-weight: var(--bold-weight);
452
- }
453
-
454
- .SummaryTooltipAudit {
455
- display: flex;
456
- margin: calc(0.25 * var(--base-spacing)) 0px;
457
- color: var(--color-gray-700);
458
- --score-icon-size: 10px;
459
- }
460
- .SummaryTooltipAudit code {
461
- color: var(--snippet-color);
462
- }
463
- .SummaryTooltipAudit::before {
464
- content: '';
465
- height: var(--score-icon-size);
466
- width: var(--score-icon-size);
467
- margin-top: calc((var(--summary-tooltip-line-height) - var(--score-icon-size)) / 2);
468
- margin-right: var(--half-base-spacing);
469
- }
470
- .SummaryTooltipAudit--pass::before {
471
- background-color: var(--color-pass);
472
- border-radius: 50%;
473
- }
474
- .SummaryTooltipAudit--average::before {
475
- background-color: var(--color-average);
476
- }
477
- .SummaryTooltipAudit--fail::before {
478
- border-left: calc(var(--score-icon-size) / 2) solid transparent;
479
- border-right: calc(var(--score-icon-size) / 2) solid transparent;
480
- border-bottom: var(--score-icon-size) solid var(--color-fail);
481
- }
482
-
483
- .SummaryNavigationHeader {
484
- font-size: var(--summary-navigation-header-font-size);
485
- line-height: 16px;
486
- display: contents;
487
- }
488
-
489
- .SummaryNavigationHeader__url,
490
- .SummaryNavigationHeader__category {
491
- height: 100%;
492
- display: flex;
493
- align-items: center;
494
- justify-content: center;
495
- padding: var(--half-base-spacing);
496
- background-color: var(--color-gray-100);
497
- color: var(--color-gray-700);
498
- border-top: 1px solid var(--color-gray-300);
499
- text-align: center;
500
- }
501
- .SummaryNavigationHeader__url {
502
- justify-content: start;
503
- text-align: left;
504
- }
505
- .SummaryNavigationHeader__url > a {
506
- color: inherit;
507
- overflow-x: hidden;
508
- text-overflow: ellipsis;
509
- }
510
-
511
- .SummaryFlowStep__separator {
512
- display: contents;
513
- }
514
- .SummaryFlowStep__separator > .Separator {
515
- grid-column-end: span 5;
516
- }
517
-
518
- .SummaryCategory__null {
519
- align-self: center;
520
- justify-self: center;
521
- height: 2px;
522
- width: 10px;
523
- margin: auto;
524
- background-color: var(--color-gray-700);
525
- }
526
-
527
- .Header {
528
- display: grid;
529
- grid-template-areas:
530
- ". . . current-tn . . ."
531
- "prev-seg prev-tn prev-tn current-tn next-tn next-tn next-seg"
532
- ". prev-title . current-tn . next-title ."
533
- ". prev-title current-title current-title current-title next-title .";
534
- grid-template-rows: 1fr auto 1fr auto;
535
- grid-template-columns: var(--header-margin) var(--header-adjacent-title-width) auto auto auto var(--header-adjacent-title-width) var(--header-margin);
536
- align-items: center;
537
- margin: var(--double-base-spacing) 0px;
538
- }
539
- .Header a {
540
- color: var(--color-gray-800);
541
- }
542
- .Header > .Header__segment:first-child {
543
- grid-area: prev-seg;
544
- }
545
- .Header > .Header__segment:last-child {
546
- grid-area: next-seg;
547
- }
548
-
549
- .Header__prev-thumbnail {
550
- display: flex;
551
- align-items: center;
552
- grid-area: prev-tn;
553
- }
554
- .Header__current-thumbnail {
555
- display: flex;
556
- align-items: center;
557
- grid-area: current-tn;
558
- }
559
- .Header__next-thumbnail {
560
- display: flex;
561
- align-items: center;
562
- grid-area: next-tn;
563
- }
564
- .Header__prev-thumbnail .Header__segment,
565
- .Header__next-thumbnail .Header__segment {
566
- flex-grow: 1;
567
- }
568
-
569
- .Header__segment {
570
- height: 2px;
571
- background-color: var(--color-blue-A700);
572
- }
573
-
574
- .HeaderThumbnail {
575
- position: relative;
576
- display: flex;
577
- margin: var(--base-spacing) 0px;
578
- }
579
- .HeaderThumbnail--main .FlowStepThumbnail {
580
- border: 2px solid var(--color-blue-A700);
581
- }
582
- .HeaderThumbnail--prev .HeaderThumbnail__icon {
583
- top: 50%;
584
- left: 100%;
585
- }
586
- .HeaderThumbnail--next .HeaderThumbnail__icon {
587
- top: 50%;
588
- left: 0;
589
- }
590
- .HeaderThumbnail--main .HeaderThumbnail__icon {
591
- top: 100%;
592
- left: 50%;
593
- }
594
-
595
- .HeaderThumbnail__icon {
596
- position: absolute;
597
- display: flex;
598
- padding: calc(var(--base-spacing) * 0.25);
599
- background-color: var(--report-background-color);
600
- border-radius: 50%;
601
- transform: translate(-50%, -50%);
602
- color: var(--color-blue-A700)
603
- }
604
-
605
- .Header__prev-title {
606
- grid-area: prev-title;
607
- text-align: left;
608
- justify-self: start;
609
- }
610
-
611
- .Header__next-title {
612
- grid-area: next-title;
613
- text-align: right;
614
- justify-self: end;
615
- }
616
-
617
- .Header__prev-title,
618
- .Header__next-title {
619
- font-size: var(--header-adjacent-title-font-size);
620
- align-self: start;
621
- overflow-x: hidden;
622
- text-overflow: ellipsis;
623
- max-width: 100%;
624
- }
625
-
626
- .Header__current-title {
627
- grid-area: current-title;
628
- text-align: center;
629
- font-size: var(--header-current-title-font-size);
630
- font-weight: var(--bold-weight);
631
- overflow-x: hidden;
632
- text-overflow: ellipsis;
633
- margin: 0px var(--half-base-spacing);
634
- }
635
-
636
- .Header__current-description {
637
- text-align: center;
638
- font-size: var(--header-current-description-font-size);
639
- font-weight: normal;
640
- }
641
-
642
- .HelpDialog {
643
- position: absolute;
644
- top: 100%;
645
- right: var(--base-spacing);
646
- z-index: 100;
647
- max-width: 720px;
648
-
649
- background: var(--color-white);
650
- color: var(--color-gray-800);
651
- border-radius: 3px;
652
- border: 1px solid var(--dialog-border-color);
653
- box-shadow: 0px 4px 12px var(--summary-tooltip-box-shadow-color);
654
-
655
- padding: var(--base-spacing) calc(var(--base-spacing) * 1.5);
656
- }
657
-
658
- .HelpDialog__title {
659
- display: flex;
660
- align-items: center;
661
-
662
- font-size: var(--dialog-title-font-size);
663
- font-weight: var(--bold-weight);
664
-
665
- margin-bottom: calc(var(--base-spacing) * 2);
666
- }
667
-
668
- .HelpDialog__close {
669
- background: none;
670
- border: none;
671
- cursor: pointer;
672
- line-height: 0;
673
- }
674
-
675
- .HelpDialog__columns {
676
- display: grid;
677
- grid-auto-flow: column;
678
- grid-template-rows: repeat(4, auto);
679
- grid-template-columns: repeat(3, 1fr);
680
- grid-column-gap: var(--base-spacing);
681
- }
682
-
683
- .HelpDialogColumn {
684
- display: contents;
685
- }
686
-
687
- .HelpDialogColumn__header-title {
688
- font-size: var(--category-summary-font-size);
689
- font-weight: var(--bold-weight);
690
- }
691
-
692
- .HelpDialogColumn__legend-label {
693
- color: var(--color-blue-A700);
694
- font-weight: var(--bold-weight);
695
- }
696
-
697
- .HelpDialogColumn ul {
698
- padding-left: var(--base-spacing);
699
- }
700
-
701
- .HelpDialogColumn__use-cases p,
702
- .HelpDialogColumn__categories p {
703
- font-weight: var(--bold-weight);
704
- color: var(--color-gray-700);
705
- }
706
-
707
- .HelpDialogColumnTimeline {
708
- display: flex;
709
- align-items: center;
710
-
711
- height: var(--double-base-spacing);
712
- color: var(--color-blue-A700);
713
- margin-right: calc(var(--base-spacing) * -1);
714
- }
715
-
716
- .HelpDialogColumn:last-child .HelpDialogColumnTimeline {
717
- margin-right: 0;
718
- }
719
-
720
- .HelpDialogColumnTimeline__line {
721
- height: 2px;
722
- flex-grow: 1;
723
-
724
- background: var(--color-blue-A700);
725
- }
@@ -1,7 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2021 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
- export {};
7
- //# sourceMappingURL=standalone.d.ts.map