@lolmath/ui 9.1.0 → 9.1.2
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.
- package/dist/index.css +393 -252
- package/dist/index.mjs +142 -143
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/readme.md +10 -0
package/dist/index.css
CHANGED
|
@@ -181,17 +181,22 @@
|
|
|
181
181
|
}
|
|
182
182
|
}
|
|
183
183
|
@layer lol {
|
|
184
|
-
.
|
|
184
|
+
._breadcrumbs_1gzfl_2 {
|
|
185
185
|
display: flex;
|
|
186
186
|
gap: 0.25rem;
|
|
187
|
+
/* An <ol>: the UA gives it block margins and a 40px marker gutter. */
|
|
188
|
+
margin: 0;
|
|
189
|
+
padding: 0;
|
|
190
|
+
list-style: none;
|
|
187
191
|
}
|
|
188
192
|
|
|
189
|
-
.
|
|
193
|
+
._item_1gzfl_11 {
|
|
190
194
|
display: flex;
|
|
191
195
|
align-items: center;
|
|
192
196
|
}
|
|
193
197
|
|
|
194
|
-
.
|
|
198
|
+
._link_1gzfl_16 {
|
|
199
|
+
text-decoration: none;
|
|
195
200
|
font-family: var(--lol-font-family-beaufort);
|
|
196
201
|
color: var(--lol-color-gold-300);
|
|
197
202
|
position: relative;
|
|
@@ -206,27 +211,28 @@
|
|
|
206
211
|
}
|
|
207
212
|
}
|
|
208
213
|
|
|
209
|
-
.
|
|
214
|
+
._divider_1gzfl_32 {
|
|
215
|
+
/* Off the text baseline, so the row's height is the glyph's, and never
|
|
216
|
+
wider than the row. */
|
|
217
|
+
display: block;
|
|
218
|
+
max-width: 100%;
|
|
210
219
|
height: 11px;
|
|
211
220
|
}
|
|
212
221
|
}
|
|
213
222
|
@layer lol {
|
|
214
|
-
.
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
font-weight: 900;
|
|
223
|
-
}
|
|
223
|
+
._button_7nrx3_2 {
|
|
224
|
+
appearance: none;
|
|
225
|
+
margin: 0;
|
|
226
|
+
/* Presets that want horizontal padding add it back further down. Without a
|
|
227
|
+
zero here, `text` (which wants none) picks up the UA's `1px 6px`. */
|
|
228
|
+
padding: 0;
|
|
229
|
+
/* Also rendered on the <a> of ButtonLink, which the UA underlines. */
|
|
230
|
+
text-decoration: none;
|
|
224
231
|
|
|
225
|
-
._button_1k1xc_13 {
|
|
226
232
|
border-radius: 0px;
|
|
227
233
|
border: 2px solid transparent;
|
|
228
234
|
|
|
229
|
-
&.
|
|
235
|
+
&._thin_7nrx3_14 {
|
|
230
236
|
border-width: 1px;
|
|
231
237
|
}
|
|
232
238
|
|
|
@@ -257,21 +263,37 @@
|
|
|
257
263
|
outline: none;
|
|
258
264
|
}
|
|
259
265
|
|
|
260
|
-
&.
|
|
266
|
+
&._small_7nrx3_45 {
|
|
261
267
|
font-size: var(--lol-font-size-sm);
|
|
262
268
|
min-height: var(--lol-form-height-small);
|
|
263
269
|
}
|
|
264
270
|
|
|
265
|
-
&.
|
|
271
|
+
&._medium_7nrx3_50 {
|
|
266
272
|
font-size: var(--lol-font-size-base);
|
|
267
273
|
min-height: var(--lol-form-height-medium);
|
|
268
274
|
}
|
|
269
275
|
|
|
270
|
-
&.
|
|
276
|
+
&._large_7nrx3_55 {
|
|
271
277
|
font-size: var(--lol-font-size-base);
|
|
272
278
|
min-height: var(--lol-form-height-large);
|
|
273
279
|
}
|
|
274
280
|
|
|
281
|
+
/*
|
|
282
|
+
* Nested so the shape wins on specificity: as a bare `.round` it ties with
|
|
283
|
+
* `.button` and loses the border-radius and font-weight to whichever rule
|
|
284
|
+
* is written last.
|
|
285
|
+
*/
|
|
286
|
+
&._round_7nrx3_61,
|
|
287
|
+
&._square_7nrx3_66 {
|
|
288
|
+
aspect-ratio: 1 / 1;
|
|
289
|
+
padding: 0px;
|
|
290
|
+
font-weight: 900;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
&._round_7nrx3_61 {
|
|
294
|
+
border-radius: 9999px;
|
|
295
|
+
}
|
|
296
|
+
|
|
275
297
|
&:hover {
|
|
276
298
|
color: var(--lol-color-gold-100);
|
|
277
299
|
}
|
|
@@ -299,22 +321,22 @@
|
|
|
299
321
|
* together by exactly one border width so their two gradient borders read as
|
|
300
322
|
* a single seam instead of a double-thick one.
|
|
301
323
|
*/
|
|
302
|
-
.
|
|
324
|
+
._toggleButtonGroup_7nrx3_103 {
|
|
303
325
|
display: inline-flex;
|
|
304
326
|
|
|
305
|
-
& > .
|
|
327
|
+
& > ._button_7nrx3_2 + ._button_7nrx3_2 {
|
|
306
328
|
margin-left: -2px;
|
|
307
329
|
}
|
|
308
330
|
|
|
309
331
|
/* Must follow the rule above: thin buttons only need a 1px overlap. */
|
|
310
|
-
& > .
|
|
332
|
+
& > ._thin_7nrx3_14 + ._thin_7nrx3_14 {
|
|
311
333
|
margin-left: -1px;
|
|
312
334
|
}
|
|
313
335
|
|
|
314
336
|
/* Whichever button is highlighted owns the seams next to it. */
|
|
315
|
-
& > .
|
|
316
|
-
& > .
|
|
317
|
-
& > .
|
|
337
|
+
& > ._button_7nrx3_2:hover,
|
|
338
|
+
& > ._button_7nrx3_2:focus-visible,
|
|
339
|
+
& > ._button_7nrx3_2[data-selected] {
|
|
318
340
|
position: relative;
|
|
319
341
|
z-index: 1;
|
|
320
342
|
}
|
|
@@ -324,48 +346,48 @@
|
|
|
324
346
|
/* Equal widths keep the collapsed seams lined up. */
|
|
325
347
|
align-items: stretch;
|
|
326
348
|
|
|
327
|
-
& > .
|
|
349
|
+
& > ._button_7nrx3_2 + ._button_7nrx3_2 {
|
|
328
350
|
margin-left: 0;
|
|
329
351
|
margin-top: -2px;
|
|
330
352
|
}
|
|
331
353
|
|
|
332
|
-
& > .
|
|
354
|
+
& > ._thin_7nrx3_14 + ._thin_7nrx3_14 {
|
|
333
355
|
margin-top: -1px;
|
|
334
356
|
}
|
|
335
357
|
}
|
|
336
358
|
}
|
|
337
359
|
|
|
338
|
-
.
|
|
339
|
-
.
|
|
340
|
-
.
|
|
341
|
-
.
|
|
342
|
-
&:not(.
|
|
343
|
-
&.
|
|
360
|
+
._primary_7nrx3_139,
|
|
361
|
+
._secondary_7nrx3_140,
|
|
362
|
+
._hextech_7nrx3_141,
|
|
363
|
+
._dimmed_7nrx3_142 {
|
|
364
|
+
&:not(._square_7nrx3_66, ._round_7nrx3_61) {
|
|
365
|
+
&._small_7nrx3_45 {
|
|
344
366
|
padding: 0 0.5rem;
|
|
345
367
|
}
|
|
346
368
|
|
|
347
|
-
&.
|
|
369
|
+
&._medium_7nrx3_50 {
|
|
348
370
|
padding: 0 1rem;
|
|
349
371
|
}
|
|
350
372
|
|
|
351
|
-
&.
|
|
373
|
+
&._large_7nrx3_55 {
|
|
352
374
|
padding: 0 1rem;
|
|
353
375
|
}
|
|
354
376
|
}
|
|
355
377
|
}
|
|
356
378
|
|
|
357
|
-
.
|
|
358
|
-
&.
|
|
359
|
-
&.
|
|
379
|
+
._text_7nrx3_158 {
|
|
380
|
+
&._round_7nrx3_61,
|
|
381
|
+
&._square_7nrx3_66 {
|
|
360
382
|
&:hover {
|
|
361
383
|
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
362
384
|
--lol-button-border-gradient: var(--lol-gradient-transparent);
|
|
363
385
|
}
|
|
364
386
|
}
|
|
365
387
|
|
|
366
|
-
&.
|
|
367
|
-
&.
|
|
368
|
-
&.
|
|
388
|
+
&._round_7nrx3_61,
|
|
389
|
+
&._square_7nrx3_66,
|
|
390
|
+
&._normal_7nrx3_169 {
|
|
369
391
|
position: relative;
|
|
370
392
|
|
|
371
393
|
&::after {
|
|
@@ -383,7 +405,7 @@
|
|
|
383
405
|
}
|
|
384
406
|
}
|
|
385
407
|
|
|
386
|
-
.
|
|
408
|
+
._hextech_7nrx3_141 {
|
|
387
409
|
color: var(--lol-color-blue-100);
|
|
388
410
|
--lol-button-border-gradient: var(--lol-gradient-hextech);
|
|
389
411
|
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
@@ -408,17 +430,16 @@
|
|
|
408
430
|
}
|
|
409
431
|
}
|
|
410
432
|
|
|
411
|
-
.
|
|
433
|
+
._dimmed_7nrx3_142 {
|
|
412
434
|
--lol-button-background-gradient: var(--lol-gradient-hextech-black);
|
|
413
435
|
--lol-button-border-gradient: var(--lol-gradient-grey-300);
|
|
414
436
|
|
|
415
|
-
&._selected_1k1xc_203,
|
|
416
437
|
&:focus-visible {
|
|
417
438
|
--lol-button-border-gradient: var(--lol-gradient-gold);
|
|
418
439
|
}
|
|
419
440
|
}
|
|
420
441
|
|
|
421
|
-
.
|
|
442
|
+
._primary_7nrx3_139 {
|
|
422
443
|
--lol-button-border-gradient: var(--lol-gradient-gold);
|
|
423
444
|
--lol-button-background-gradient: linear-gradient(
|
|
424
445
|
to top,
|
|
@@ -446,36 +467,55 @@
|
|
|
446
467
|
}
|
|
447
468
|
}
|
|
448
469
|
|
|
449
|
-
.
|
|
470
|
+
._secondary_7nrx3_140 {
|
|
450
471
|
--lol-button-border-gradient: var(--lol-gradient-gold);
|
|
451
472
|
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
452
473
|
}
|
|
453
474
|
|
|
454
|
-
.
|
|
455
|
-
.
|
|
456
|
-
.
|
|
475
|
+
._primary_7nrx3_139:hover,
|
|
476
|
+
._secondary_7nrx3_140:hover,
|
|
477
|
+
._dimmed_7nrx3_142:hover {
|
|
457
478
|
--lol-button-border-gradient: var(--lol-gradient-gold-hover);
|
|
458
479
|
}
|
|
459
480
|
|
|
460
|
-
.
|
|
461
|
-
.
|
|
462
|
-
.
|
|
481
|
+
._primary_7nrx3_139:active,
|
|
482
|
+
._secondary_7nrx3_140:active,
|
|
483
|
+
._dimmed_7nrx3_142:active {
|
|
463
484
|
--lol-button-border-gradient: var(--lol-gradient-gold-press);
|
|
464
485
|
}
|
|
465
486
|
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
487
|
+
/*
|
|
488
|
+
* A selected toggle takes the hextech background from `.button`, so the
|
|
489
|
+
* dimmed border follows it there: a hextech body inside the resting grey
|
|
490
|
+
* frame reads as an unfinished button. Must stay after the gold `:hover`
|
|
491
|
+
* and `:active` rules above so the resting selected border wins, and
|
|
492
|
+
* before `:disabled` below so a disabled toggle still greys out.
|
|
493
|
+
*/
|
|
494
|
+
._dimmed_7nrx3_142[data-selected] {
|
|
495
|
+
--lol-button-border-gradient: var(--lol-gradient-hextech);
|
|
496
|
+
|
|
497
|
+
&:hover {
|
|
498
|
+
--lol-button-border-gradient: var(--lol-gradient-hextech-hover);
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
&:active {
|
|
502
|
+
--lol-button-border-gradient: var(--lol-gradient-hextech-press);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
._primary_7nrx3_139:disabled,
|
|
507
|
+
._secondary_7nrx3_140:disabled,
|
|
508
|
+
._dimmed_7nrx3_142:disabled {
|
|
469
509
|
--lol-button-border-gradient: var(--lol-gradient-disabled);
|
|
470
510
|
}
|
|
471
511
|
|
|
472
|
-
.
|
|
473
|
-
.
|
|
512
|
+
._primary_7nrx3_139:focus-visible,
|
|
513
|
+
._secondary_7nrx3_140:focus-visible {
|
|
474
514
|
outline-color: var(--lol-color-gold-400);
|
|
475
515
|
}
|
|
476
516
|
}
|
|
477
517
|
@layer lol {
|
|
478
|
-
.
|
|
518
|
+
._checkbox_1rldq_2 {
|
|
479
519
|
font-family: var(--lol-font-family-spiegel);
|
|
480
520
|
color: var(--lol-color-grey-100);
|
|
481
521
|
display: flex;
|
|
@@ -495,13 +535,25 @@
|
|
|
495
535
|
}
|
|
496
536
|
}
|
|
497
537
|
|
|
498
|
-
.
|
|
538
|
+
._icon_1rldq_22 {
|
|
539
|
+
/* Off the text baseline, so the box is the glyph. */
|
|
540
|
+
display: block;
|
|
541
|
+
max-width: 100%;
|
|
499
542
|
width: 0.875rem;
|
|
500
543
|
height: 0.875rem;
|
|
501
544
|
}
|
|
502
545
|
}
|
|
503
546
|
@layer lol {
|
|
504
|
-
.
|
|
547
|
+
._disclosureButton_1wmxg_2 {
|
|
548
|
+
/* A <button> we never paint: without this it falls back to the UA's
|
|
549
|
+
`buttonface` slab, which is grey under `color-scheme: dark`. */
|
|
550
|
+
appearance: none;
|
|
551
|
+
background: none;
|
|
552
|
+
border: 0;
|
|
553
|
+
margin: 0;
|
|
554
|
+
font: inherit;
|
|
555
|
+
letter-spacing: inherit;
|
|
556
|
+
|
|
505
557
|
color: var(--lol-color-grey-100);
|
|
506
558
|
font-family: var(--lol-font-family-beaufort);
|
|
507
559
|
|
|
@@ -519,7 +571,7 @@
|
|
|
519
571
|
text-align: left;
|
|
520
572
|
}
|
|
521
573
|
|
|
522
|
-
.
|
|
574
|
+
._icon_1wmxg_29 {
|
|
523
575
|
margin-left: 0.125rem;
|
|
524
576
|
margin-right: 0.5rem;
|
|
525
577
|
display: inline-block;
|
|
@@ -527,7 +579,7 @@
|
|
|
527
579
|
font-size: var(--lol-font-size-sm);
|
|
528
580
|
}
|
|
529
581
|
|
|
530
|
-
.
|
|
582
|
+
._disclosure_1wmxg_2 {
|
|
531
583
|
border-bottom: 1px solid var(--lol-color-gold-600);
|
|
532
584
|
|
|
533
585
|
&:last-of-type {
|
|
@@ -535,7 +587,7 @@
|
|
|
535
587
|
}
|
|
536
588
|
}
|
|
537
589
|
|
|
538
|
-
.
|
|
590
|
+
._disclosurePanel_1wmxg_45 {
|
|
539
591
|
color: var(--lol-color-grey-100);
|
|
540
592
|
font-family: var(--lol-font-family-spiegel);
|
|
541
593
|
|
|
@@ -557,14 +609,17 @@
|
|
|
557
609
|
}
|
|
558
610
|
}
|
|
559
611
|
@layer lol {
|
|
560
|
-
.
|
|
612
|
+
._divider_wpkyb_2 {
|
|
561
613
|
height: 1px;
|
|
562
614
|
flex-grow: 1;
|
|
563
615
|
border: none;
|
|
616
|
+
/* An <hr>: the UA gives it 0.5em block margins and a grey `color`. */
|
|
617
|
+
margin: 0;
|
|
618
|
+
color: inherit;
|
|
564
619
|
display: flex;
|
|
565
620
|
}
|
|
566
621
|
|
|
567
|
-
.
|
|
622
|
+
._left_wpkyb_12 {
|
|
568
623
|
background-image: linear-gradient(
|
|
569
624
|
to right,
|
|
570
625
|
rgba(0, 0, 0, 0),
|
|
@@ -572,7 +627,7 @@
|
|
|
572
627
|
);
|
|
573
628
|
}
|
|
574
629
|
|
|
575
|
-
.
|
|
630
|
+
._center_wpkyb_20 {
|
|
576
631
|
background-image: linear-gradient(
|
|
577
632
|
to right,
|
|
578
633
|
rgba(0, 0, 0, 0),
|
|
@@ -581,7 +636,7 @@
|
|
|
581
636
|
);
|
|
582
637
|
}
|
|
583
638
|
|
|
584
|
-
.
|
|
639
|
+
._right_wpkyb_29 {
|
|
585
640
|
background-image: linear-gradient(
|
|
586
641
|
to right,
|
|
587
642
|
var(--lol-color-gold-600),
|
|
@@ -589,20 +644,20 @@
|
|
|
589
644
|
);
|
|
590
645
|
}
|
|
591
646
|
|
|
592
|
-
.
|
|
647
|
+
._block_wpkyb_37 {
|
|
593
648
|
width: 5px;
|
|
594
649
|
height: 5px;
|
|
595
650
|
border: 1px solid var(--lol-color-gold-600);
|
|
596
651
|
rotate: 45deg;
|
|
597
652
|
}
|
|
598
653
|
|
|
599
|
-
.
|
|
654
|
+
._wrapper_wpkyb_44 {
|
|
600
655
|
display: flex;
|
|
601
656
|
align-items: center;
|
|
602
657
|
flex-grow: 1;
|
|
603
658
|
}
|
|
604
659
|
|
|
605
|
-
.
|
|
660
|
+
._childrenWrapper_wpkyb_50 {
|
|
606
661
|
display: flex;
|
|
607
662
|
align-items: center;
|
|
608
663
|
gap: 2rem;
|
|
@@ -610,60 +665,62 @@
|
|
|
610
665
|
}
|
|
611
666
|
}
|
|
612
667
|
@layer lol {
|
|
613
|
-
.
|
|
668
|
+
._heading_4cie6_2 {
|
|
669
|
+
/* Rendered as h1-h5, which the UA gives block margins scaled to the font. */
|
|
670
|
+
margin: 0;
|
|
614
671
|
font-family: var(--lol-font-family-beaufort);
|
|
615
672
|
scroll-margin-top: 5rem;
|
|
616
673
|
text-transform: uppercase;
|
|
617
674
|
}
|
|
618
675
|
|
|
619
|
-
.
|
|
676
|
+
._h1_4cie6_10 {
|
|
620
677
|
font-size: var(--lol-font-size-h1);
|
|
621
678
|
line-height: var(--lol-line-height-h1);
|
|
622
679
|
letter-spacing: var(--lol-letter-spacing-h1);
|
|
623
680
|
font-weight: var(--lol-font-weight-h1);
|
|
624
681
|
}
|
|
625
682
|
|
|
626
|
-
.
|
|
683
|
+
._h2_4cie6_17 {
|
|
627
684
|
font-size: var(--lol-font-size-h2);
|
|
628
685
|
line-height: var(--lol-line-height-h2);
|
|
629
686
|
letter-spacing: var(--lol-letter-spacing-h2);
|
|
630
687
|
font-weight: var(--lol-font-weight-h2);
|
|
631
688
|
}
|
|
632
689
|
|
|
633
|
-
.
|
|
690
|
+
._h3_4cie6_24 {
|
|
634
691
|
font-size: var(--lol-font-size-h3);
|
|
635
692
|
line-height: var(--lol-line-height-h3);
|
|
636
693
|
letter-spacing: var(--lol-letter-spacing-h3);
|
|
637
694
|
font-weight: var(--lol-font-weight-h3);
|
|
638
695
|
}
|
|
639
696
|
|
|
640
|
-
.
|
|
697
|
+
._h4_4cie6_31 {
|
|
641
698
|
font-size: var(--lol-font-size-h4);
|
|
642
699
|
line-height: var(--lol-line-height-h4);
|
|
643
700
|
letter-spacing: var(--lol-letter-spacing-h4);
|
|
644
701
|
font-weight: var(--lol-font-weight-h4);
|
|
645
702
|
}
|
|
646
703
|
|
|
647
|
-
.
|
|
704
|
+
._h5_4cie6_38 {
|
|
648
705
|
font-size: var(--lol-font-size-h5);
|
|
649
706
|
line-height: var(--lol-line-height-h5);
|
|
650
707
|
letter-spacing: var(--lol-letter-spacing-h5);
|
|
651
708
|
font-weight: var(--lol-font-weight-h5);
|
|
652
709
|
}
|
|
653
710
|
|
|
654
|
-
.
|
|
711
|
+
._grey100_4cie6_45 {
|
|
655
712
|
color: var(--lol-color-grey-100);
|
|
656
713
|
}
|
|
657
714
|
|
|
658
|
-
.
|
|
715
|
+
._gold100_4cie6_49 {
|
|
659
716
|
color: var(--lol-color-gold-100);
|
|
660
717
|
}
|
|
661
718
|
|
|
662
|
-
.
|
|
719
|
+
._gold200_4cie6_53 {
|
|
663
720
|
color: var(--lol-color-gold-200);
|
|
664
721
|
}
|
|
665
722
|
|
|
666
|
-
.
|
|
723
|
+
._gold400_4cie6_57 {
|
|
667
724
|
color: var(--lol-color-gold-400);
|
|
668
725
|
}
|
|
669
726
|
}
|
|
@@ -752,7 +809,7 @@
|
|
|
752
809
|
}
|
|
753
810
|
}
|
|
754
811
|
@layer lol {
|
|
755
|
-
.
|
|
812
|
+
._overlay_cjo05_2 {
|
|
756
813
|
background-color: color-mix(
|
|
757
814
|
in srgb,
|
|
758
815
|
var(--lol-color-hextech-black),
|
|
@@ -775,7 +832,7 @@
|
|
|
775
832
|
backdrop-filter: blur(8px);
|
|
776
833
|
}
|
|
777
834
|
|
|
778
|
-
.
|
|
835
|
+
._dialog_cjo05_25 {
|
|
779
836
|
background:
|
|
780
837
|
var(--lol-button-background-gradient) padding-box,
|
|
781
838
|
var(--lol-button-border-gradient) border-box;
|
|
@@ -817,12 +874,14 @@
|
|
|
817
874
|
}
|
|
818
875
|
}
|
|
819
876
|
|
|
820
|
-
.
|
|
877
|
+
._modal_cjo05_67 {
|
|
821
878
|
width: 100%;
|
|
822
879
|
max-width: 28rem;
|
|
823
880
|
}
|
|
824
881
|
|
|
825
|
-
.
|
|
882
|
+
._dialogHeading_cjo05_72 {
|
|
883
|
+
/* React aria renders an <h3>, which the UA gives block margins. */
|
|
884
|
+
margin: 0;
|
|
826
885
|
color: var(--lol-color-gold-100);
|
|
827
886
|
font-family: var(--lol-font-family-beaufort);
|
|
828
887
|
text-transform: uppercase;
|
|
@@ -832,7 +891,7 @@
|
|
|
832
891
|
line-height: var(--lol-line-height-h5);
|
|
833
892
|
}
|
|
834
893
|
|
|
835
|
-
.
|
|
894
|
+
._dialogButtons_cjo05_84 {
|
|
836
895
|
justify-content: center;
|
|
837
896
|
transform: translateY(2px);
|
|
838
897
|
padding: 0 0.25rem;
|
|
@@ -842,18 +901,18 @@
|
|
|
842
901
|
}
|
|
843
902
|
}
|
|
844
903
|
@layer lol {
|
|
845
|
-
.
|
|
904
|
+
._group_1haju_2 {
|
|
846
905
|
display: grid;
|
|
847
906
|
grid-template-columns: auto 1fr auto;
|
|
848
907
|
gap: 1px;
|
|
849
908
|
padding: 1px;
|
|
850
909
|
outline: none;
|
|
851
910
|
|
|
852
|
-
&.
|
|
911
|
+
&._normal_1haju_9 {
|
|
853
912
|
background-image: var(--lol-gradient-gold);
|
|
854
913
|
}
|
|
855
914
|
|
|
856
|
-
&.
|
|
915
|
+
&._dimmed_1haju_13 {
|
|
857
916
|
background-image: var(--lol-gradient-grey-300);
|
|
858
917
|
}
|
|
859
918
|
|
|
@@ -865,20 +924,23 @@
|
|
|
865
924
|
background-image: var(--lol-gradient-gold-hover);
|
|
866
925
|
}
|
|
867
926
|
|
|
868
|
-
&.
|
|
927
|
+
&._small_1haju_25 {
|
|
869
928
|
min-height: var(--lol-form-height-small);
|
|
870
929
|
}
|
|
871
930
|
|
|
872
|
-
&.
|
|
931
|
+
&._medium_1haju_29 {
|
|
873
932
|
min-height: var(--lol-form-height-medium);
|
|
874
933
|
}
|
|
875
934
|
|
|
876
|
-
&.
|
|
935
|
+
&._large_1haju_33 {
|
|
877
936
|
min-height: var(--lol-form-height-large);
|
|
878
937
|
}
|
|
879
938
|
}
|
|
880
939
|
|
|
881
|
-
.
|
|
940
|
+
._input_1haju_38 {
|
|
941
|
+
/* The group draws the border as its own 1px gradient padding. */
|
|
942
|
+
border: 0;
|
|
943
|
+
margin: 0;
|
|
882
944
|
background-color: var(--lol-color-hextech-black);
|
|
883
945
|
color: var(--lol-color-gold-100);
|
|
884
946
|
font-family: var(--lol-font-family-spiegel);
|
|
@@ -893,12 +955,20 @@
|
|
|
893
955
|
color: var(--lol-color-grey-100);
|
|
894
956
|
}
|
|
895
957
|
|
|
896
|
-
&.
|
|
958
|
+
&._focus_1haju_56 {
|
|
897
959
|
background-image: var(--lol-gradient-grey-focus);
|
|
898
960
|
}
|
|
899
961
|
}
|
|
900
962
|
|
|
901
|
-
.
|
|
963
|
+
._button_1haju_61 {
|
|
964
|
+
/* A <button> we never paint: without this it falls back to the UA's
|
|
965
|
+
`buttonface` slab, which is grey under `color-scheme: dark`. */
|
|
966
|
+
appearance: none;
|
|
967
|
+
border: 0;
|
|
968
|
+
margin: 0;
|
|
969
|
+
font: inherit;
|
|
970
|
+
letter-spacing: inherit;
|
|
971
|
+
|
|
902
972
|
color: var(--lol-color-gold-100);
|
|
903
973
|
background-color: var(--lol-color-hextech-black);
|
|
904
974
|
padding: 0 0.625rem;
|
|
@@ -910,7 +980,7 @@
|
|
|
910
980
|
}
|
|
911
981
|
}
|
|
912
982
|
@layer lol {
|
|
913
|
-
.
|
|
983
|
+
._popover_uemk0_2 {
|
|
914
984
|
padding: 2px;
|
|
915
985
|
box-shadow: 0 2px 4px 0 var(--lol-color-grey-300);
|
|
916
986
|
border: 2px solid transparent;
|
|
@@ -920,49 +990,57 @@
|
|
|
920
990
|
--lol-button-border-gradient: var(--lol-gradient-gold-press);
|
|
921
991
|
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
922
992
|
|
|
923
|
-
&.
|
|
993
|
+
&._top_uemk0_12 {
|
|
924
994
|
margin-bottom: 0.5rem;
|
|
925
995
|
}
|
|
926
996
|
|
|
927
|
-
&.
|
|
997
|
+
&._bottom_uemk0_16 {
|
|
928
998
|
margin-top: 0.5rem;
|
|
929
999
|
}
|
|
930
1000
|
|
|
931
|
-
&.
|
|
1001
|
+
&._left_uemk0_20 {
|
|
932
1002
|
margin-right: 0.5rem;
|
|
933
1003
|
}
|
|
934
1004
|
|
|
935
|
-
&.
|
|
1005
|
+
&._right_uemk0_24 {
|
|
936
1006
|
margin-left: 0.5rem;
|
|
937
1007
|
}
|
|
938
1008
|
}
|
|
939
1009
|
|
|
940
|
-
.
|
|
941
|
-
|
|
1010
|
+
._arrow_uemk0_29 {
|
|
1011
|
+
/*
|
|
1012
|
+
* React aria anchors the arrow's wrapper with `bottom: 100%`, so the
|
|
1013
|
+
* wrapper's box has to *be* the glyph. Left inline the svg sits on a text
|
|
1014
|
+
* baseline: the wrapper grows to a line-height and the arrow floats off the
|
|
1015
|
+
* popover by the difference.
|
|
1016
|
+
*/
|
|
1017
|
+
display: block;
|
|
1018
|
+
|
|
1019
|
+
._outer_uemk0_38 {
|
|
942
1020
|
fill: var(--lol-color-gold-600);
|
|
943
1021
|
}
|
|
944
1022
|
|
|
945
|
-
.
|
|
1023
|
+
._inner_uemk0_42 {
|
|
946
1024
|
fill: var(--lol-color-grey-300);
|
|
947
1025
|
}
|
|
948
1026
|
|
|
949
|
-
&.
|
|
1027
|
+
&._top_uemk0_12 {
|
|
950
1028
|
transform: translateX(-1.5px);
|
|
951
1029
|
}
|
|
952
1030
|
|
|
953
|
-
&.
|
|
1031
|
+
&._bottom_uemk0_16 {
|
|
954
1032
|
transform: translateX(-1.5px) rotate(180deg);
|
|
955
1033
|
|
|
956
|
-
.
|
|
1034
|
+
._outer_uemk0_38 {
|
|
957
1035
|
fill: var(--lol-color-gold-500);
|
|
958
1036
|
}
|
|
959
1037
|
}
|
|
960
1038
|
|
|
961
|
-
&.
|
|
1039
|
+
&._left_uemk0_20 {
|
|
962
1040
|
transform: translateY(-2px) translateX(-5px) rotate(-90deg);
|
|
963
1041
|
}
|
|
964
1042
|
|
|
965
|
-
&.
|
|
1043
|
+
&._right_uemk0_24 {
|
|
966
1044
|
transform: translateY(-2px) translateX(5px) rotate(90deg);
|
|
967
1045
|
}
|
|
968
1046
|
}
|
|
@@ -1063,7 +1141,7 @@
|
|
|
1063
1141
|
}
|
|
1064
1142
|
}
|
|
1065
1143
|
@layer lol {
|
|
1066
|
-
.
|
|
1144
|
+
._searchField_tm8b9_2 {
|
|
1067
1145
|
display: grid;
|
|
1068
1146
|
grid-template-areas:
|
|
1069
1147
|
"label label"
|
|
@@ -1075,7 +1153,7 @@
|
|
|
1075
1153
|
color: var(--lol-color-gold-100);
|
|
1076
1154
|
}
|
|
1077
1155
|
|
|
1078
|
-
.
|
|
1156
|
+
._input_tm8b9_14 {
|
|
1079
1157
|
background:
|
|
1080
1158
|
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC") no-repeat 5px center,
|
|
1081
1159
|
var(--lol-search-field-background-gradient) padding-box,
|
|
@@ -1112,20 +1190,30 @@
|
|
|
1112
1190
|
--lol-search-field-background-gradient: var(--lol-gradient-grey-focus);
|
|
1113
1191
|
}
|
|
1114
1192
|
|
|
1115
|
-
&.
|
|
1193
|
+
&._small_tm8b9_51 {
|
|
1116
1194
|
min-height: var(--lol-form-height-small);
|
|
1117
1195
|
}
|
|
1118
1196
|
|
|
1119
|
-
&.
|
|
1197
|
+
&._medium_tm8b9_55 {
|
|
1120
1198
|
min-height: var(--lol-form-height-medium);
|
|
1121
1199
|
}
|
|
1122
1200
|
|
|
1123
|
-
&.
|
|
1201
|
+
&._large_tm8b9_59 {
|
|
1124
1202
|
min-height: var(--lol-form-height-large);
|
|
1125
1203
|
}
|
|
1126
1204
|
}
|
|
1127
1205
|
|
|
1128
|
-
.
|
|
1206
|
+
._button_tm8b9_64 {
|
|
1207
|
+
/* A <button> we never paint: without this it falls back to the UA's
|
|
1208
|
+
`buttonface` slab, which is grey under `color-scheme: dark`. */
|
|
1209
|
+
appearance: none;
|
|
1210
|
+
background: none;
|
|
1211
|
+
border: 0;
|
|
1212
|
+
margin: 0;
|
|
1213
|
+
padding: 0;
|
|
1214
|
+
font: inherit;
|
|
1215
|
+
letter-spacing: inherit;
|
|
1216
|
+
|
|
1129
1217
|
grid-area: button;
|
|
1130
1218
|
|
|
1131
1219
|
font-size: 0.75rem;
|
|
@@ -1153,95 +1241,110 @@
|
|
|
1153
1241
|
}
|
|
1154
1242
|
}
|
|
1155
1243
|
}
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
border: 2px solid transparent;
|
|
1163
|
-
border-radius: 9999px;
|
|
1164
|
-
|
|
1165
|
-
align-items: center;
|
|
1166
|
-
display: grid;
|
|
1167
|
-
grid-template-columns: 1fr auto;
|
|
1168
|
-
|
|
1169
|
-
font-family: var(--lol-font-family-spiegel);
|
|
1170
|
-
letter-spacing: var(--lol-letter-spacing-sm);
|
|
1171
|
-
font-weight: var(--lol-font-weight-sm);
|
|
1172
|
-
font-size: 0.75rem;
|
|
1173
|
-
line-height: 1;
|
|
1174
|
-
color: var(--lol-color-gold-300);
|
|
1175
|
-
padding: 0 0.3rem 0 0.5rem;
|
|
1176
|
-
}
|
|
1244
|
+
@layer lol {
|
|
1245
|
+
/* Base tag sets up CSS variables; variants (gold/hextech) define actual gradients */
|
|
1246
|
+
._tag_baprz_3 {
|
|
1247
|
+
background:
|
|
1248
|
+
var(--lol-multiple-select-background-gradient) padding-box,
|
|
1249
|
+
var(--lol-multiple-select-border-gradient) border-box;
|
|
1177
1250
|
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
--lol-multiple-select-border-gradient: var(--lol-gradient-gold);
|
|
1181
|
-
--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
|
|
1182
|
-
color: var(--lol-color-gold-300);
|
|
1183
|
-
}
|
|
1251
|
+
border: 2px solid transparent;
|
|
1252
|
+
border-radius: 9999px;
|
|
1184
1253
|
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
|
|
1189
|
-
color: var(--lol-color-blue-100);
|
|
1190
|
-
}
|
|
1254
|
+
align-items: center;
|
|
1255
|
+
display: grid;
|
|
1256
|
+
grid-template-columns: 1fr auto;
|
|
1191
1257
|
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1258
|
+
font-family: var(--lol-font-family-spiegel);
|
|
1259
|
+
letter-spacing: var(--lol-letter-spacing-sm);
|
|
1260
|
+
font-weight: var(--lol-font-weight-sm);
|
|
1261
|
+
font-size: 0.75rem;
|
|
1262
|
+
line-height: 1;
|
|
1263
|
+
color: var(--lol-color-gold-300);
|
|
1264
|
+
padding: 0 0.3rem 0 0.5rem;
|
|
1265
|
+
}
|
|
1198
1266
|
|
|
1199
|
-
.
|
|
1200
|
-
|
|
1201
|
-
|
|
1267
|
+
._gold_baprz_24 {
|
|
1268
|
+
border-width: 1px;
|
|
1269
|
+
--lol-multiple-select-border-gradient: var(--lol-gradient-gold);
|
|
1270
|
+
--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
|
|
1271
|
+
color: var(--lol-color-gold-300);
|
|
1272
|
+
}
|
|
1202
1273
|
|
|
1203
|
-
.
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1274
|
+
._hextech_baprz_31 {
|
|
1275
|
+
border-width: 1px;
|
|
1276
|
+
--lol-multiple-select-border-gradient: var(--lol-gradient-hextech);
|
|
1277
|
+
--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
|
|
1278
|
+
color: var(--lol-color-blue-100);
|
|
1279
|
+
}
|
|
1209
1280
|
|
|
1210
|
-
|
|
1211
|
-
|
|
1281
|
+
._grey_baprz_38 {
|
|
1282
|
+
border-width: 1px;
|
|
1283
|
+
--lol-multiple-select-border-gradient: var(--lol-color-grey-100);
|
|
1284
|
+
--lol-multiple-select-background-gradient: var(--lol-gradient-grey-300);
|
|
1285
|
+
color: var(--lol-color-gold-100);
|
|
1212
1286
|
}
|
|
1213
1287
|
|
|
1214
|
-
|
|
1215
|
-
|
|
1288
|
+
._text_baprz_45 {
|
|
1289
|
+
padding: 0.25rem 0;
|
|
1216
1290
|
}
|
|
1217
|
-
}
|
|
1218
1291
|
|
|
1219
|
-
.
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1292
|
+
._remove_baprz_49 {
|
|
1293
|
+
/* A <button> we never paint: without this it falls back to the UA's
|
|
1294
|
+
`buttonface` slab, which is grey under `color-scheme: dark`. The mask is
|
|
1295
|
+
filled with `currentColor`, so the inherited colour matters too. */
|
|
1296
|
+
appearance: none;
|
|
1297
|
+
border: 0;
|
|
1298
|
+
margin: 0;
|
|
1299
|
+
padding: 0;
|
|
1300
|
+
font: inherit;
|
|
1301
|
+
letter-spacing: inherit;
|
|
1302
|
+
color: inherit;
|
|
1224
1303
|
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
flex-direction: column;
|
|
1235
|
-
}
|
|
1304
|
+
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACKklEQVR42uzcvUoDQRQF4M0QBW0srHwICxttIygGRH0PsRAfwELsI/gkghYiiGATQVDwIawsUmihRbzjDyyLm2Qnc+eejefC6Taw+zGz88NkG/1+P2OVlyMBgQhEIAIRiEAEIhCLQAQiEIHQqhn6w97zU60edG5hEaoFNdjFymtecitpJXyOFckuVBcbgHMlWZJcSDYlNwlwLn0vkkxLTlBbUB7H1+wPUisRjq+OZB8RqIiTJUAq4mQaSE4RRxOpDCc6UgygswE4GkjDcPJIewhAh5K3Ea6LgTQqztdUTXKPAHQt2UqAVBWnLemivKS1kUxwYg/zWkhmOBoz6dhIpjhaS41YSOY4movVcZEgcDSBxkGCwdEGCkWCwUkBFIIEg5MKqCoSDE5KoFhISXFSA42LlBzHAigUyQTHCsjXq+SjwvVTkhmLG7UAqjLPyY9u55LVSQcKwTFFcjXBMUNyNcIxQXJgOL0KM+4kSA4Mp11xWaKO5MBwugFrN1UkB4YTusBVQ3KAOFBIDhQHBskB40AgOXAccyRXAxxTpBhAy1m6bdKqSMcIQKeSg4T7OaMiPUq2Ud5BnQFIGptdw5AeJGuSF6RR7C8kj7OR6ewEliF5nPUYOBrzoDzSL86d4nKmiBQVx1dT4aY90nv2fXhJE6eIdCTZiYnjqxH6v3nAk/b+8Hrpw6CdtLcolS8kNPjlhf/TgghEIAIRiEAEYhGIQAQiEIEINCH1KcAAQX7SgLqjwvQAAAAASUVORK5CYII=);
|
|
1305
|
+
height: 1rem;
|
|
1306
|
+
aspect-ratio: 1;
|
|
1307
|
+
background-color: currentColor;
|
|
1308
|
+
mask-size: contain;
|
|
1309
|
+
|
|
1310
|
+
&[data-hovered] {
|
|
1311
|
+
background-color: var(--lol-color-gold-100);
|
|
1312
|
+
}
|
|
1236
1313
|
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1314
|
+
&[data-pressed] {
|
|
1315
|
+
background-color: var(--lol-color-grey-150);
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
._tagGroup_baprz_76 {
|
|
1320
|
+
padding: 0.25rem;
|
|
1321
|
+
display: flex;
|
|
1322
|
+
justify-content: center;
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
._tagList_baprz_82 {
|
|
1326
|
+
display: flex;
|
|
1327
|
+
flex-wrap: wrap;
|
|
1328
|
+
gap: 0.25rem;
|
|
1329
|
+
row-gap: 0.25rem;
|
|
1330
|
+
}
|
|
1241
1331
|
}
|
|
1332
|
+
@layer lol {
|
|
1333
|
+
._popover_1bri3_2 {
|
|
1334
|
+
width: 250px;
|
|
1335
|
+
display: flex;
|
|
1336
|
+
flex-direction: column;
|
|
1337
|
+
}
|
|
1242
1338
|
|
|
1243
|
-
.
|
|
1244
|
-
|
|
1339
|
+
._select_1bri3_8 {
|
|
1340
|
+
border-right: none;
|
|
1341
|
+
display: flex;
|
|
1342
|
+
align-items: center;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
._triggerContainer_1bri3_14 {
|
|
1346
|
+
display: inline-flex;
|
|
1347
|
+
}
|
|
1245
1348
|
}
|
|
1246
1349
|
@layer lol {
|
|
1247
1350
|
._text_1tvjr_2 {
|
|
@@ -1310,7 +1413,10 @@
|
|
|
1310
1413
|
}
|
|
1311
1414
|
}
|
|
1312
1415
|
@layer lol {
|
|
1313
|
-
.
|
|
1416
|
+
._button_y5tgp_2 {
|
|
1417
|
+
/* A <button>; the trigger's whole look is drawn below. */
|
|
1418
|
+
appearance: none;
|
|
1419
|
+
margin: 0;
|
|
1314
1420
|
font-family: var(--lol-font-family-spiegel);
|
|
1315
1421
|
display: inline-block;
|
|
1316
1422
|
min-width: 200px;
|
|
@@ -1352,40 +1458,40 @@
|
|
|
1352
1458
|
filter: grayscale(100%);
|
|
1353
1459
|
}
|
|
1354
1460
|
|
|
1355
|
-
&.
|
|
1461
|
+
&._small_y5tgp_47 {
|
|
1356
1462
|
min-height: var(--lol-form-height-small);
|
|
1357
1463
|
}
|
|
1358
1464
|
|
|
1359
|
-
&.
|
|
1465
|
+
&._medium_y5tgp_51 {
|
|
1360
1466
|
min-height: var(--lol-form-height-medium);
|
|
1361
1467
|
}
|
|
1362
1468
|
|
|
1363
|
-
&.
|
|
1469
|
+
&._large_y5tgp_55 {
|
|
1364
1470
|
min-height: var(--lol-form-height-large);
|
|
1365
1471
|
}
|
|
1366
1472
|
}
|
|
1367
1473
|
|
|
1368
|
-
.
|
|
1474
|
+
._singleSelect_y5tgp_60 {
|
|
1369
1475
|
background:
|
|
1370
1476
|
var(--lol-select-image) no-repeat right 0.5rem center,
|
|
1371
1477
|
var(--lol-select-background-gradient) padding-box,
|
|
1372
1478
|
var(--lol-select-border-gradient) border-box;
|
|
1373
1479
|
}
|
|
1374
1480
|
|
|
1375
|
-
.
|
|
1481
|
+
._multiSelect_y5tgp_67 {
|
|
1376
1482
|
background:
|
|
1377
1483
|
var(--lol-select-background-gradient) padding-box,
|
|
1378
1484
|
var(--lol-select-border-gradient) border-box;
|
|
1379
1485
|
}
|
|
1380
1486
|
|
|
1381
|
-
.
|
|
1487
|
+
._listBox_y5tgp_73 {
|
|
1382
1488
|
background-color: var(--lol-color-hextech-black);
|
|
1383
1489
|
border: 1px solid var(--lol-color-gold-600);
|
|
1384
1490
|
outline: none;
|
|
1385
1491
|
overflow-y: auto;
|
|
1386
1492
|
}
|
|
1387
1493
|
|
|
1388
|
-
.
|
|
1494
|
+
._item_y5tgp_80 {
|
|
1389
1495
|
border-bottom: 1px solid var(--lol-color-grey-300);
|
|
1390
1496
|
color: var(--lol-color-gold-300);
|
|
1391
1497
|
font-size: var(--lol-font-size-sm);
|
|
@@ -1402,7 +1508,7 @@
|
|
|
1402
1508
|
}
|
|
1403
1509
|
|
|
1404
1510
|
&[data-pressed],
|
|
1405
|
-
&.
|
|
1511
|
+
&._focus_y5tgp_97 {
|
|
1406
1512
|
background-color: color-mix(
|
|
1407
1513
|
in srgb,
|
|
1408
1514
|
var(--lol-color-grey-300),
|
|
@@ -1411,20 +1517,20 @@
|
|
|
1411
1517
|
color: var(--lol-color-gold-600);
|
|
1412
1518
|
}
|
|
1413
1519
|
|
|
1414
|
-
&.
|
|
1520
|
+
&._selected_y5tgp_106 {
|
|
1415
1521
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAsElEQVR42pTQXQoBURTA8ZmbdxuxAi/WgfLmQb4pYgMi36QUJUuxBIvw7FEi/qfOrds0NPfW7+We85+mG95v18DjhGjglPKMNqjibTyilUYTbE3CaIE65ujLZZJQlptYomsvJUyjp1+Oi1pYo+MOjA7GmEWiKdrY6c7HHcqrjpDRpQeGGslv7VGLRjZ8Ii9PjAFyyOKISlxkQzkvFDUu4Izyr8gNA41KuODwL5LzFWAAUJ8mTIVblvcAAAAASUVORK5CYII=);
|
|
1416
1522
|
background-position: right 0.5rem center;
|
|
1417
1523
|
background-repeat: no-repeat;
|
|
1418
1524
|
}
|
|
1419
1525
|
}
|
|
1420
1526
|
|
|
1421
|
-
.
|
|
1527
|
+
._popover_y5tgp_113 {
|
|
1422
1528
|
width: var(--trigger-width);
|
|
1423
1529
|
display: flex;
|
|
1424
1530
|
flex-direction: column;
|
|
1425
1531
|
}
|
|
1426
1532
|
|
|
1427
|
-
.
|
|
1533
|
+
._emptyList_y5tgp_119 {
|
|
1428
1534
|
padding: 0.5rem 0.25rem;
|
|
1429
1535
|
text-align: center;
|
|
1430
1536
|
}
|
|
@@ -1509,13 +1615,16 @@
|
|
|
1509
1615
|
}
|
|
1510
1616
|
}
|
|
1511
1617
|
@layer lol {
|
|
1512
|
-
.
|
|
1618
|
+
._spinner_15he7_2 {
|
|
1619
|
+
/* Off the text baseline, so the box is the glyph. */
|
|
1620
|
+
display: block;
|
|
1621
|
+
max-width: 100%;
|
|
1513
1622
|
aspect-ratio: 1 / 1;
|
|
1514
1623
|
width: 3rem;
|
|
1515
|
-
animation:
|
|
1624
|
+
animation: _spin_15he7_2 1s linear infinite;
|
|
1516
1625
|
}
|
|
1517
1626
|
|
|
1518
|
-
@keyframes
|
|
1627
|
+
@keyframes _spin_15he7_2 {
|
|
1519
1628
|
from {
|
|
1520
1629
|
transform: rotate(0deg);
|
|
1521
1630
|
}
|
|
@@ -1526,7 +1635,7 @@
|
|
|
1526
1635
|
}
|
|
1527
1636
|
}
|
|
1528
1637
|
@layer lol {
|
|
1529
|
-
.
|
|
1638
|
+
._toast_1a46s_2 {
|
|
1530
1639
|
padding: 1rem;
|
|
1531
1640
|
border: 2px solid transparent;
|
|
1532
1641
|
background:
|
|
@@ -1540,23 +1649,23 @@
|
|
|
1540
1649
|
gap: 6px;
|
|
1541
1650
|
}
|
|
1542
1651
|
|
|
1543
|
-
.
|
|
1652
|
+
._default_1a46s_16 {
|
|
1544
1653
|
--lol-toast-background-gradient: var(--lol-gradient-hextech-black);
|
|
1545
1654
|
--lol-toast-border-gradient: var(--lol-gradient-grey-300);
|
|
1546
1655
|
--lol-toast-icon-color: var(--lol-color-gold-300);
|
|
1547
1656
|
}
|
|
1548
1657
|
|
|
1549
|
-
.
|
|
1658
|
+
._title_1a46s_22 {
|
|
1550
1659
|
font-size: var(--lol-font-size-sm);
|
|
1551
1660
|
}
|
|
1552
1661
|
|
|
1553
|
-
.
|
|
1662
|
+
._content_1a46s_26 {
|
|
1554
1663
|
display: flex;
|
|
1555
1664
|
align-items: flex-start;
|
|
1556
1665
|
gap: 0.75rem;
|
|
1557
1666
|
}
|
|
1558
1667
|
|
|
1559
|
-
.
|
|
1668
|
+
._icon_1a46s_32 {
|
|
1560
1669
|
display: flex;
|
|
1561
1670
|
height: 20px;
|
|
1562
1671
|
width: 20px;
|
|
@@ -1569,25 +1678,30 @@
|
|
|
1569
1678
|
& > * {
|
|
1570
1679
|
flex-shrink: 0;
|
|
1571
1680
|
}
|
|
1681
|
+
/* Off the text baseline, so the box is the glyph. */
|
|
1682
|
+
& > img {
|
|
1683
|
+
display: block;
|
|
1684
|
+
max-width: 100%;
|
|
1685
|
+
}
|
|
1572
1686
|
& svg {
|
|
1573
1687
|
margin-left: var(--toast-svg-margin-start);
|
|
1574
1688
|
margin-right: var(--toast-svg-margin-end);
|
|
1575
1689
|
}
|
|
1576
1690
|
}
|
|
1577
1691
|
|
|
1578
|
-
.
|
|
1692
|
+
._content_1a46s_26 {
|
|
1579
1693
|
display: flex;
|
|
1580
1694
|
flex-direction: column;
|
|
1581
1695
|
gap: 2px;
|
|
1582
1696
|
}
|
|
1583
1697
|
|
|
1584
|
-
.
|
|
1698
|
+
._actions_1a46s_62 {
|
|
1585
1699
|
display: flex;
|
|
1586
1700
|
justify-content: flex-end;
|
|
1587
1701
|
margin-top: 0.25rem;
|
|
1588
1702
|
}
|
|
1589
1703
|
|
|
1590
|
-
.
|
|
1704
|
+
._button_1a46s_68 {
|
|
1591
1705
|
padding-left: 8px;
|
|
1592
1706
|
padding-right: 8px;
|
|
1593
1707
|
margin-left: var(--toast-button-margin-start);
|
|
@@ -1595,7 +1709,7 @@
|
|
|
1595
1709
|
flex-shrink: 0;
|
|
1596
1710
|
}
|
|
1597
1711
|
|
|
1598
|
-
.
|
|
1712
|
+
._closeButton_1a46s_76 {
|
|
1599
1713
|
position: absolute;
|
|
1600
1714
|
min-height: 1.33rem !important;
|
|
1601
1715
|
left: var(--toast-close-button-start);
|
|
@@ -1611,7 +1725,7 @@
|
|
|
1611
1725
|
z-index: 1;
|
|
1612
1726
|
}
|
|
1613
1727
|
|
|
1614
|
-
.
|
|
1728
|
+
._loader_1a46s_92 {
|
|
1615
1729
|
width: 20px;
|
|
1616
1730
|
height: 20px;
|
|
1617
1731
|
}
|
|
@@ -1697,12 +1811,12 @@
|
|
|
1697
1811
|
}
|
|
1698
1812
|
}
|
|
1699
1813
|
@layer lol {
|
|
1700
|
-
.
|
|
1814
|
+
._resizableContainer_1iv6r_2 {
|
|
1701
1815
|
overflow: auto;
|
|
1702
1816
|
position: relative;
|
|
1703
1817
|
}
|
|
1704
1818
|
|
|
1705
|
-
.
|
|
1819
|
+
._table_1iv6r_7 {
|
|
1706
1820
|
border-collapse: collapse;
|
|
1707
1821
|
border-spacing: 0;
|
|
1708
1822
|
width: 100%;
|
|
@@ -1720,7 +1834,7 @@
|
|
|
1720
1834
|
}
|
|
1721
1835
|
}
|
|
1722
1836
|
|
|
1723
|
-
.
|
|
1837
|
+
._row_1iv6r_25 {
|
|
1724
1838
|
color: var(--lol-color-grey-100);
|
|
1725
1839
|
outline: none;
|
|
1726
1840
|
transition: color 0.3s ease;
|
|
@@ -1779,7 +1893,14 @@
|
|
|
1779
1893
|
}
|
|
1780
1894
|
}
|
|
1781
1895
|
|
|
1782
|
-
.
|
|
1896
|
+
._cell_1iv6r_84 {
|
|
1897
|
+
/*
|
|
1898
|
+
* Collapsed borders are resolved between neighbours, and Chrome paints the
|
|
1899
|
+
* winning hairline once per edge when the losing side is styled `none`. The
|
|
1900
|
+
* header's 25%-opacity line then blends twice and comes out twice as
|
|
1901
|
+
* bright; a zero-width `solid` border on the cell below keeps it single.
|
|
1902
|
+
*/
|
|
1903
|
+
border: 0 solid;
|
|
1783
1904
|
padding: 0.375rem 0.75rem;
|
|
1784
1905
|
vertical-align: middle;
|
|
1785
1906
|
outline: none;
|
|
@@ -1790,7 +1911,7 @@
|
|
|
1790
1911
|
}
|
|
1791
1912
|
}
|
|
1792
1913
|
|
|
1793
|
-
.
|
|
1914
|
+
._resizer_1iv6r_102 {
|
|
1794
1915
|
position: absolute;
|
|
1795
1916
|
inset-block: 0;
|
|
1796
1917
|
inset-inline-end: 0;
|
|
@@ -1822,7 +1943,7 @@
|
|
|
1822
1943
|
}
|
|
1823
1944
|
|
|
1824
1945
|
/* Fixed footprint so toggling the sort direction never shifts the header. */
|
|
1825
|
-
.
|
|
1946
|
+
._sortIndicator_1iv6r_134 {
|
|
1826
1947
|
display: inline-block;
|
|
1827
1948
|
vertical-align: middle;
|
|
1828
1949
|
width: 0.5rem;
|
|
@@ -1846,7 +1967,7 @@
|
|
|
1846
1967
|
}
|
|
1847
1968
|
}
|
|
1848
1969
|
|
|
1849
|
-
.
|
|
1970
|
+
._column_1iv6r_158 {
|
|
1850
1971
|
position: relative;
|
|
1851
1972
|
font-family: var(--lol-font-family-beaufort);
|
|
1852
1973
|
color: var(--lol-color-gold-100);
|
|
@@ -1882,15 +2003,15 @@
|
|
|
1882
2003
|
color: var(--lol-color-gold-500);
|
|
1883
2004
|
}
|
|
1884
2005
|
|
|
1885
|
-
&[data-hovered] .
|
|
2006
|
+
&[data-hovered] ._sortIndicator_1iv6r_134 {
|
|
1886
2007
|
opacity: 0.5;
|
|
1887
2008
|
}
|
|
1888
2009
|
|
|
1889
|
-
&[data-sort-direction] .
|
|
2010
|
+
&[data-sort-direction] ._sortIndicator_1iv6r_134 {
|
|
1890
2011
|
opacity: 1;
|
|
1891
2012
|
}
|
|
1892
2013
|
|
|
1893
|
-
&[data-sort-direction="descending"] .
|
|
2014
|
+
&[data-sort-direction="descending"] ._sortIndicator_1iv6r_134::after {
|
|
1894
2015
|
border-width: 0.375rem 0.25rem 0;
|
|
1895
2016
|
border-top-color: currentColor;
|
|
1896
2017
|
border-bottom-color: transparent;
|
|
@@ -1902,28 +2023,34 @@
|
|
|
1902
2023
|
}
|
|
1903
2024
|
}
|
|
1904
2025
|
|
|
1905
|
-
.
|
|
2026
|
+
._footer_1iv6r_214 {
|
|
1906
2027
|
color: var(--lol-color-gold-300);
|
|
1907
2028
|
|
|
1908
|
-
& .
|
|
2029
|
+
& ._cell_1iv6r_84 {
|
|
1909
2030
|
border-top: 1px solid rgb(from var(--lol-color-grey-100) r g b / 0.25);
|
|
1910
2031
|
}
|
|
1911
2032
|
}
|
|
1912
2033
|
|
|
1913
|
-
.
|
|
2034
|
+
._empty_1iv6r_222 {
|
|
1914
2035
|
padding: 1rem 0.75rem;
|
|
1915
2036
|
text-align: center;
|
|
1916
2037
|
}
|
|
1917
2038
|
|
|
1918
|
-
|
|
2039
|
+
/* React aria renders the empty state in a row it builds itself, so that cell
|
|
2040
|
+
never gets `.cell` and keeps the UA's 1px padding. */
|
|
2041
|
+
._table_1iv6r_7 [data-empty] > tr > td {
|
|
2042
|
+
padding: 0;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
._start_1iv6r_233 {
|
|
1919
2046
|
text-align: start;
|
|
1920
2047
|
}
|
|
1921
2048
|
|
|
1922
|
-
.
|
|
2049
|
+
._center_1iv6r_237 {
|
|
1923
2050
|
text-align: center;
|
|
1924
2051
|
}
|
|
1925
2052
|
|
|
1926
|
-
.
|
|
2053
|
+
._end_1iv6r_241 {
|
|
1927
2054
|
text-align: end;
|
|
1928
2055
|
}
|
|
1929
2056
|
}
|
|
@@ -1991,7 +2118,7 @@
|
|
|
1991
2118
|
}
|
|
1992
2119
|
}
|
|
1993
2120
|
@layer lol {
|
|
1994
|
-
.
|
|
2121
|
+
._textField_1dbgw_2 {
|
|
1995
2122
|
background:
|
|
1996
2123
|
var(--lol-input-background-gradient) padding-box,
|
|
1997
2124
|
var(--lol-input-border-gradient) border-box;
|
|
@@ -2027,26 +2154,29 @@
|
|
|
2027
2154
|
--lol-input-background-gradient: var(--lol-gradient-grey-focus);
|
|
2028
2155
|
}
|
|
2029
2156
|
|
|
2030
|
-
&.
|
|
2157
|
+
&._small_1dbgw_38 {
|
|
2031
2158
|
min-height: var(--lol-form-height-small);
|
|
2032
2159
|
}
|
|
2033
2160
|
|
|
2034
|
-
&.
|
|
2161
|
+
&._medium_1dbgw_42 {
|
|
2035
2162
|
min-height: var(--lol-form-height-medium);
|
|
2036
2163
|
}
|
|
2037
2164
|
|
|
2038
|
-
&.
|
|
2165
|
+
&._large_1dbgw_46 {
|
|
2039
2166
|
min-height: var(--lol-form-height-large);
|
|
2040
2167
|
}
|
|
2041
2168
|
|
|
2042
|
-
&.
|
|
2169
|
+
&._textArea_1dbgw_50 {
|
|
2043
2170
|
padding-top: 0.5rem;
|
|
2044
2171
|
padding-bottom: 0.5rem;
|
|
2172
|
+
/* The UA lets a textarea be resized in both axes, which breaks the
|
|
2173
|
+
field's layout; only the height is safe to drag. */
|
|
2174
|
+
resize: vertical;
|
|
2045
2175
|
}
|
|
2046
2176
|
}
|
|
2047
2177
|
}
|
|
2048
2178
|
@layer lol {
|
|
2049
|
-
.
|
|
2179
|
+
._toolbar_1j7x4_2 {
|
|
2050
2180
|
display: flex;
|
|
2051
2181
|
align-items: center;
|
|
2052
2182
|
gap: 0.5rem;
|
|
@@ -2061,9 +2191,12 @@
|
|
|
2061
2191
|
}
|
|
2062
2192
|
}
|
|
2063
2193
|
|
|
2064
|
-
.
|
|
2194
|
+
._separator_1j7x4_17 {
|
|
2065
2195
|
border: none;
|
|
2196
|
+
/* An <hr> when horizontal: the UA gives it block margins and a grey
|
|
2197
|
+
`color`. */
|
|
2066
2198
|
margin: 0;
|
|
2199
|
+
color: inherit;
|
|
2067
2200
|
flex: none;
|
|
2068
2201
|
align-self: stretch;
|
|
2069
2202
|
height: 1px;
|
|
@@ -2088,7 +2221,7 @@
|
|
|
2088
2221
|
}
|
|
2089
2222
|
}
|
|
2090
2223
|
@layer lol {
|
|
2091
|
-
.
|
|
2224
|
+
._tree_17ans_2 {
|
|
2092
2225
|
--lol-tree-indent: 1.125rem;
|
|
2093
2226
|
|
|
2094
2227
|
box-sizing: border-box;
|
|
@@ -2107,7 +2240,7 @@
|
|
|
2107
2240
|
}
|
|
2108
2241
|
}
|
|
2109
2242
|
|
|
2110
|
-
.
|
|
2243
|
+
._item_17ans_21 {
|
|
2111
2244
|
display: flex;
|
|
2112
2245
|
align-items: center;
|
|
2113
2246
|
gap: 0.375rem;
|
|
@@ -2190,16 +2323,24 @@
|
|
|
2190
2323
|
|
|
2191
2324
|
/* Top-level items are separated by the client's faint gold hairline. The
|
|
2192
2325
|
sibling combinator keeps it off the first row, whichever level follows. */
|
|
2193
|
-
.
|
|
2326
|
+
._item_17ans_21 + ._item_17ans_21[data-level="1"] {
|
|
2194
2327
|
border-top: 1px solid var(--lol-color-gold-600);
|
|
2195
2328
|
}
|
|
2196
2329
|
|
|
2197
|
-
.
|
|
2330
|
+
._chevron_17ans_108 {
|
|
2331
|
+
/* A <button> we never paint: without this it falls back to the UA's
|
|
2332
|
+
`buttonface` slab, which is grey under `color-scheme: dark`. */
|
|
2333
|
+
appearance: none;
|
|
2334
|
+
border: 0;
|
|
2335
|
+
margin: 0;
|
|
2336
|
+
padding: 0;
|
|
2337
|
+
font: inherit;
|
|
2338
|
+
letter-spacing: inherit;
|
|
2339
|
+
color: inherit;
|
|
2340
|
+
|
|
2198
2341
|
flex: none;
|
|
2199
2342
|
width: 0.5rem;
|
|
2200
2343
|
height: 0.75rem;
|
|
2201
|
-
padding: 0;
|
|
2202
|
-
border: none;
|
|
2203
2344
|
outline: none;
|
|
2204
2345
|
cursor: pointer;
|
|
2205
2346
|
|
|
@@ -2217,27 +2358,27 @@
|
|
|
2217
2358
|
}
|
|
2218
2359
|
}
|
|
2219
2360
|
|
|
2220
|
-
.
|
|
2361
|
+
._chevronSpacer_17ans_139 {
|
|
2221
2362
|
flex: none;
|
|
2222
2363
|
width: 0.5rem;
|
|
2223
2364
|
}
|
|
2224
2365
|
|
|
2225
|
-
.
|
|
2366
|
+
._item_17ans_21[data-expanded] ._chevron_17ans_108 {
|
|
2226
2367
|
rotate: 90deg;
|
|
2227
2368
|
}
|
|
2228
2369
|
|
|
2229
|
-
.
|
|
2230
|
-
.
|
|
2231
|
-
.
|
|
2370
|
+
._item_17ans_21[data-hovered] ._chevron_17ans_108,
|
|
2371
|
+
._chevron_17ans_108[data-hovered],
|
|
2372
|
+
._chevron_17ans_108[data-focus-visible] {
|
|
2232
2373
|
--lol-tree-chevron: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAABGElEQVR42r3WO47CMBCA4T+jaCtuQLEcZE+x3IOOxxVIRcM1tlvtPTgBNFQIQUu1TSxFVpw44xlGiiI5o/nk0dhK9bie6IkVMAe2GEWdQA5A1T4bC0gGEIA10FhDMYIlJiOIGSbAZ1ukGsktwgS4AEvglZGvxkLrfoFvT6w7DK5YPN5umPSsuWCSWDfHZOCbKSYjBcwwyShggknm0BRjMuEoFGEy8YCrMVFcWyqsVl7GAfsBPjIw1Y5CPDN3BXDTQl/AHzDLyN0CjbwD0bROhUyF1MgUqAjJhYqRHMgEGYPMkCHIFElB5kgf5ILEkBvShVyRAC28kQCdgaMn0m3dDth7IfEwpLBipG+8Y8wESf0z7Nr33QoB+AdPzF+bRdCP8QAAAABJRU5ErkJggg==");
|
|
2233
2374
|
}
|
|
2234
2375
|
|
|
2235
|
-
.
|
|
2376
|
+
._item_17ans_21[data-disabled] ._chevron_17ans_108 {
|
|
2236
2377
|
cursor: default;
|
|
2237
2378
|
filter: grayscale(100%);
|
|
2238
2379
|
}
|
|
2239
2380
|
|
|
2240
|
-
.
|
|
2381
|
+
._label_17ans_159 {
|
|
2241
2382
|
flex: 1;
|
|
2242
2383
|
min-width: 0;
|
|
2243
2384
|
overflow: hidden;
|
|
@@ -2245,18 +2386,18 @@
|
|
|
2245
2386
|
text-overflow: ellipsis;
|
|
2246
2387
|
}
|
|
2247
2388
|
|
|
2248
|
-
.
|
|
2389
|
+
._empty_17ans_167 {
|
|
2249
2390
|
padding: 1rem 0.75rem;
|
|
2250
2391
|
text-align: center;
|
|
2251
2392
|
}
|
|
2252
2393
|
|
|
2253
|
-
.
|
|
2394
|
+
._loadMore_17ans_172 {
|
|
2254
2395
|
display: flex;
|
|
2255
2396
|
justify-content: center;
|
|
2256
2397
|
padding: 0.5rem;
|
|
2257
2398
|
}
|
|
2258
2399
|
|
|
2259
|
-
.
|
|
2400
|
+
._spinner_17ans_178 {
|
|
2260
2401
|
width: 1.5rem;
|
|
2261
2402
|
}
|
|
2262
2403
|
}
|