hr-design-system-handlebars 1.88.3 → 1.89.1

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.
Files changed (60) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +379 -274
  3. package/dist/assets/js/components/mediaplayer/ardPlayerLoader.subfeature.js +14 -3
  4. package/dist/views/components/content/copytext/components/contentbox/contentbox.hbs +3 -3
  5. package/dist/views/components/content/copytext/components/infobox.hbs +3 -3
  6. package/dist/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
  7. package/dist/views_static/components/content/copytext/components/contentbox/contentbox.hbs +3 -3
  8. package/dist/views_static/components/content/copytext/components/infobox.hbs +3 -3
  9. package/dist/views_static/components/teaser/cluster/teaser_cluster.hbs +1 -1
  10. package/package.json +1 -1
  11. package/src/assets/fixtures/audio/audios.inc.json +6 -3
  12. package/src/assets/fixtures/video/videos.inc.json +6 -3
  13. package/src/assets/tailwind.css +445 -294
  14. package/src/stories/views/components/content/copytext/components/contentbox/contentbox.hbs +3 -3
  15. package/src/stories/views/components/content/copytext/components/infobox.hbs +3 -3
  16. package/src/stories/views/components/content/copytext/fixtures/copytext_audio.json +1 -1
  17. package/src/stories/views/components/content/copytext/fixtures/copytext_audio_livestream.json +1 -1
  18. package/src/stories/views/components/content/copytext/fixtures/copytext_image.json +1 -1
  19. package/src/stories/views/components/content/copytext/fixtures/copytext_livestream.json +1 -1
  20. package/src/stories/views/components/content/copytext/fixtures/copytext_media_components.json +1 -1
  21. package/src/stories/views/components/content/copytext/fixtures/copytext_non_media_components.json +1 -1
  22. package/src/stories/views/components/content/copytext/fixtures/copytext_video.json +1 -1
  23. package/src/stories/views/components/mediaplayer/ardPlayerLoader.subfeature.js +14 -3
  24. package/src/stories/views/components/mediaplayer/fixtures/mediaplayer.json +1 -1
  25. package/src/stories/views/components/page/fixtures/page.json +1 -1
  26. package/src/stories/views/components/page/story/fixtures/story.json +1 -1
  27. package/src/stories/views/components/page/story/fixtures/story_with_audio.json +1 -1
  28. package/src/stories/views/components/page/story/fixtures/story_with_label.json +1 -1
  29. package/src/stories/views/components/page/story/fixtures/story_with_livestream.json +1 -1
  30. package/src/stories/views/components/page/story/fixtures/story_with_square_image.json +1 -1
  31. package/src/stories/views/components/page/story/fixtures/story_with_video.json +1 -1
  32. package/src/stories/views/components/pagination/fixtures/page_pagination.json +1 -1
  33. package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
  34. package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_audio.json +1 -1
  35. package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_live.json +1 -1
  36. package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_video.json +1 -1
  37. package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif_audio.json +1 -1
  38. package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif_live.json +1 -1
  39. package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif_video.json +1 -1
  40. package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_audio.json +1 -1
  41. package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_live.json +1 -1
  42. package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_video.json +1 -1
  43. package/src/stories/views/components/teaser/fixtures/teaser_group_100.json +1 -1
  44. package/src/stories/views/components/teaser/fixtures/teaser_group_100_highlight.json +1 -1
  45. package/src/stories/views/components/teaser/fixtures/teaser_group_100_highlight_2.json +1 -1
  46. package/src/stories/views/components/teaser/fixtures/teaser_group_related_content_100.json +1 -1
  47. package/src/stories/views/components/teaser/fixtures/teaser_index.json +1 -1
  48. package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_audio.json +1 -1
  49. package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_audio_livestream.json +1 -1
  50. package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_live.json +1 -1
  51. package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_video.json +1 -1
  52. package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_audio.json +1 -1
  53. package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_audio_livestream.json +1 -1
  54. package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_live.json +1 -1
  55. package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_video.json +1 -1
  56. package/src/stories/views/components/teaser/fixtures/teaser_tabbox.json +1 -1
  57. package/src/stories/views/components/teaser/fixtures/ticker_teaser_alternativ_hero_audio.json +1 -1
  58. package/src/stories/views/components/teaser/fixtures/ticker_teaser_standard_hero_audio.json +1 -1
  59. package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js +1 -1
  60. package/tailwind.config.js +2 -2
package/src/assets/tailwind.css CHANGED
@@ -13,12 +13,12 @@
13
13
  --breakpoint-md: theme(screens.md);
14
14
  --breakpoint-lg: theme(screens.lg);
15
15
 
16
- --color-primary-ds: theme('colors.blue.congress');
16
+ --color-primary-ds: theme('colors.blue.congress.hex');
17
17
  --color-secondary-ds: #606060;
18
18
  --color-highlight-1: theme('colors.blue.accented');
19
19
  --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
20
20
  --color-highlight-3: theme('colors.gray.dark');
21
- --color-highlight-1-dark: theme('colors.blue.nightRider');
21
+ --color-highlight-1-dark: theme('colors.blue.nightRider.hex');
22
22
 
23
23
  /* Text */
24
24
  --color-standard-text: theme('colors.black.DEFAULT');
@@ -32,8 +32,8 @@
32
32
  --color-navigation-text: theme('colors.black.DEFAULT');
33
33
  --color-search-header-text: theme('colors.black.DEFAULT');
34
34
  /* Brandnavigation Border and :before Color */
35
- --color-brandnavigation-border-color: theme('colors.blue.congress');
36
- --color-brandnav-pseudo: theme('colors.blue.congress');
35
+ --color-brandnavigation-border-color: theme('colors.blue.congress.hex');
36
+ --color-brandnav-pseudo: theme('colors.blue.congress.hex');
37
37
  /* Service/Sectionnavigation Border-Color */
38
38
  --color-navigation-border-color: #fff;
39
39
  --color-servicenavigation-border-color: #fff;
@@ -112,7 +112,7 @@
112
112
  --color-geoTag: theme('colors.gray.brightGray');
113
113
  /* Cluster-Teaser */
114
114
  --color-cluster-teaser-link: theme('colors.blue.science.hex');
115
- --color-cluster-teaser-headline: theme('colors.blue.congress');
115
+ --color-cluster-teaser-headline: theme('colors.blue.congress.hex');
116
116
  /* Button */
117
117
  --color-button-inverted: theme('colors.white.DEFAULT');
118
118
  --color-button-hollow: theme('colors.blue.science.hex');
@@ -186,20 +186,50 @@
186
186
  }
187
187
  }
188
188
  }
189
+
190
+ &.ardplayer-light-mode {
191
+ --ardplayer-lightmode-color-darkest: theme('colors.black.DEFAULT');
192
+ }
193
+
194
+ &.ardplayer-state-live {
195
+ &.ardplayer-light-mode {
196
+ --ardplayer-color-primary-live: theme('colors.orange.spicyCarrot.hex');
197
+ --ardplayer-color-primary-live-transparent-30: rgba(
198
+ theme('colors.orange.spicyCarrot.rgb') / 70%
199
+ );
200
+ --ardplayer-color-ui-background-shim: var(
201
+ --ardplayer-darkmode-color-ui-background-shim
202
+ );
203
+ --ardplayer-lightmode-color-lightest-transparent-30: theme(
204
+ 'colors.orange.spicyCarrot.hex'
205
+ );
206
+
207
+ .ardplayer-controlbar {
208
+ .ardplayer-controlbar-hover {
209
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
210
+ color: var(--ardplayer-color-lightest);
211
+ }
212
+ }
213
+
214
+ .noUi-handle {
215
+ background: theme('colors.orange.spicyCarrot.hex');
216
+ }
217
+ }
218
+ }
189
219
  }
190
220
  }
191
221
 
192
222
  [data-theme='hessenschau'] {
193
- --color-primary-ds: theme('colors.blue.congress');
223
+ --color-primary-ds: theme('colors.blue.congress.hex');
194
224
  --color-secondary-ds: #606060;
195
225
  --color-highlight-1: theme('colors.blue.accented');
196
226
  --color-highlight-2: theme('colors.orange.spicyCarrot.hex');
197
- --color-highlight-3: theme('colors.blue.congress');
227
+ --color-highlight-3: theme('colors.blue.congress.hex');
198
228
 
199
229
  /* Text */
200
230
  --color-standard-text: #000;
201
231
  --color-standard-text-dark: #d8e9f6;
202
- --color-navigation-bg: theme('colors.blue.congress');
232
+ --color-navigation-bg: theme('colors.blue.congress.hex');
203
233
  /* Navigation Icons */
204
234
  --color-navigation-icons: #fff;
205
235
  /* Navigation Text */
@@ -208,7 +238,7 @@
208
238
  --search-border-color-desktop: theme('colors.transparent');
209
239
  --search-border-color-mobile: var(--color-primary-ds);
210
240
  --color-search-footer-text: #000;
211
- --search-icon-color: theme('colors.blue.congress');
241
+ --search-icon-color: theme('colors.blue.congress.hex');
212
242
 
213
243
  /* Logo-Container Padding */
214
244
  --logo-padding-top: 6px;
@@ -254,17 +284,17 @@
254
284
  --color-link-dark: #199bff;
255
285
  /*Stage */
256
286
  --color-stage-text-box: 67 61 55;
257
- --color-stage-primary: theme('colors.blue.congress');
287
+ --color-stage-primary: theme('colors.blue.congress.hex');
258
288
  --color-stage-text: theme('colors.white.DEFAULT');
259
289
  --color-stage-link: theme('colors.white.DEFAULT');
260
290
  /* geoTag */
261
291
  --color-geoTag: theme('colors.gray.brightGray');
262
292
  /* Cluster-Teaser */
263
293
  --color-cluster-teaser-link: theme('colors.blue.science.hex');
264
- --color-cluster-teaser-headline: theme('colors.blue.congress');
294
+ --color-cluster-teaser-headline: theme('colors.blue.congress.hex');
265
295
  /* Button */
266
296
  --color-button: theme('colors.blue.science.hex');
267
- --color-button--dark: theme('colors.blue.congress');
297
+ --color-button--dark: theme('colors.blue.congress.hex');
268
298
  --color-button-inverted: theme('colors.white.DEFAULT');
269
299
  --color-button-inverted--dark: theme('colors.blue.accented');
270
300
  --color-button-disabled: theme('colors.gray.lightGray');
@@ -294,33 +324,48 @@
294
324
  --color-ticker-teaser-headline: theme('colors.white.DEFAULT');
295
325
 
296
326
  .ardplayer {
297
- --ardplayer-color-primary-base: theme('colors.blue.science.hex');
298
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.blue.science.rgb') / 70%);
299
- --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
300
- --ardplayer-color-tertiary-base: theme('colors.blue.science.hex');
301
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
302
-
303
- .ardplayer-controlbar {
304
- .ardplayer-controlbar-hover {
305
- --ardplayer-color-lightest: theme('colors.blue.science.hex');
306
- color: var(--ardplayer-color-lightest);
327
+ --ardplayer-color-primary-base: theme('colors.blue.congress.hex');
328
+ --ardplayer-color-primary-base-transparent-30: rgba(
329
+ theme('colors.blue.congress.rgb') / 70%
330
+ );
331
+ --ardplayer-color-primary-dark-base: theme('colors.blue.nightRider.hex');
332
+
333
+ &.ardplayer-light-mode {
334
+ --ardplayer-color-primary-base: theme('colors.blue.science.hex');
335
+ --ardplayer-color-primary-base-transparent-30: rgba(
336
+ theme('colors.blue.science.rgb') / 70%
337
+ );
338
+ --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
339
+ --ardplayer-color-tertiary-base: theme('colors.blue.science.hex');
340
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
341
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.blue.science.hex');
342
+
343
+ .noUi-handle {
344
+ background: theme('colors.blue.science.hex');
345
+ }
346
+
347
+ .ardplayer-controlbar {
348
+ .ardplayer-controlbar-hover {
349
+ --ardplayer-color-lightest: theme('colors.blue.science.hex');
350
+ color: var(--ardplayer-color-lightest);
351
+ }
307
352
  }
308
- }
309
353
 
310
- .ardplayer-bottom-sheet-container {
311
- --ardplayer-color-lightest: theme('colors.blue.science.hex');
354
+ .ardplayer-bottom-sheet-container {
355
+ --ardplayer-color-lightest: theme('colors.blue.science.hex');
312
356
 
313
- .ardplayer-option:hover {
314
- color: theme('colors.white.DEFAULT');
315
- .ardplayer-icon {
316
- color: theme('colors.blue.science.hex');
357
+ .ardplayer-option:hover {
358
+ color: theme('colors.white.DEFAULT');
359
+ .ardplayer-icon {
360
+ color: theme('colors.blue.science.hex');
361
+ }
317
362
  }
318
363
  }
319
- }
320
- }
321
364
 
322
- .ardplayer.ardplayer-state-audio {
323
- --ardplayer-color-lightest: theme('colors.blue.science.hex');
365
+ &.ardplayer-state-audio {
366
+ --ardplayer-color-lightest: theme('colors.blue.science.hex');
367
+ }
368
+ }
324
369
  }
325
370
  }
326
371
 
@@ -390,37 +435,46 @@
390
435
  --font-weight-title: theme('fontWeight.bold');
391
436
 
392
437
  .ardplayer {
393
- --ardplayer-color-primary-base: theme('colors.blue.blueLuxury.hex');
394
- --ardplayer-color-primary-base-transparent-30: rgba(
395
- theme('colors.blue.blueLuxury.rgb') / 70%
396
- );
397
- --ardplayer-color-primary-dark-base: theme('colors.white.blackhaze');
398
- --ardplayer-color-tertiary-base: theme('colors.blue.blueLuxury.hex');
399
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
438
+ &.ardplayer-light-mode {
439
+ --ardplayer-color-primary-base: theme('colors.blue.blueLuxury.hex');
440
+ --ardplayer-color-primary-base-transparent-30: rgba(
441
+ theme('colors.blue.blueLuxury.rgb') / 70%
442
+ );
443
+ --ardplayer-color-primary-dark-base: theme('colors.white.blackhaze');
444
+ --ardplayer-color-tertiary-base: theme('colors.blue.blueLuxury.hex');
445
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
446
+
447
+ --ardplayer-lightmode-color-lightest-transparent-30: theme(
448
+ 'colors.blue.blueLuxury.hex'
449
+ );
450
+
451
+ .noUi-handle {
452
+ background: theme('colors.blue.blueLuxury.hex');
453
+ }
400
454
 
401
- .ardplayer-controlbar {
402
- .ardplayer-controlbar-hover {
403
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
404
- color: var(--ardplayer-color-lightest);
455
+ .ardplayer-controlbar {
456
+ .ardplayer-controlbar-hover {
457
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
458
+ color: var(--ardplayer-color-lightest);
459
+ }
405
460
  }
406
- }
407
461
 
408
- .ardplayer-bottom-sheet-container {
409
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
462
+ .ardplayer-bottom-sheet-container {
463
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
410
464
 
411
- .ardplayer-option:hover {
412
- color: theme('colors.white.DEFAULT');
465
+ .ardplayer-option:hover {
466
+ color: theme('colors.white.DEFAULT');
413
467
 
414
- .ardplayer-icon {
415
- color: theme('colors.blue.blueLuxury.hex');
468
+ .ardplayer-icon {
469
+ color: theme('colors.blue.blueLuxury.hex');
470
+ }
416
471
  }
417
472
  }
473
+ &.ardplayer-state-audio {
474
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
475
+ }
418
476
  }
419
477
  }
420
-
421
- .ardplayer.ardplayer-state-audio {
422
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
423
- }
424
478
  }
425
479
 
426
480
  [data-theme='hr-inforadio'] {
@@ -496,36 +550,42 @@
496
550
  --feature-box-height: 96px;
497
551
 
498
552
  .ardplayer {
499
- --ardplayer-color-primary-base: theme('colors.blue.jellyBean.hex');
500
- --ardplayer-color-primary-base-transparent-30: rgba(
501
- theme('colors.blue.jellyBean.rgb') / 70%
502
- );
503
- --ardplayer-color-primary-dark-base: theme('colors.blue.aqua');
504
- --ardplayer-color-tertiary-base: theme('colors.blue.jellyBean.hex');
505
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
553
+ &.ardplayer-light-mode {
554
+ --ardplayer-color-primary-base: theme('colors.blue.jellyBean.hex');
555
+ --ardplayer-color-primary-base-transparent-30: rgba(
556
+ theme('colors.blue.jellyBean.rgb') / 70%
557
+ );
558
+ --ardplayer-color-primary-dark-base: theme('colors.blue.aqua');
559
+ --ardplayer-color-tertiary-base: theme('colors.blue.jellyBean.hex');
560
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
561
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.blue.jellyBean.hex');
562
+
563
+ .noUi-handle {
564
+ background: theme('colors.blue.jellyBean.hex');
565
+ }
506
566
 
507
- .ardplayer-controlbar {
508
- .ardplayer-controlbar-hover {
509
- --ardplayer-color-lightest: theme('colors.blue.jellyBean.hex');
510
- color: var(--ardplayer-color-lightest);
567
+ .ardplayer-controlbar {
568
+ .ardplayer-controlbar-hover {
569
+ --ardplayer-color-lightest: theme('colors.blue.jellyBean.hex');
570
+ color: var(--ardplayer-color-lightest);
571
+ }
511
572
  }
512
- }
513
573
 
514
- .ardplayer-bottom-sheet-container {
515
- --ardplayer-color-lightest: theme('colors.blue.jellyBean.hex');
574
+ .ardplayer-bottom-sheet-container {
575
+ --ardplayer-color-lightest: theme('colors.blue.jellyBean.hex');
516
576
 
517
- .ardplayer-option:hover {
518
- color: theme('colors.white.DEFAULT');
519
- .ardplayer-icon {
520
- color: theme('colors.blue.jellyBean.hex');
577
+ .ardplayer-option:hover {
578
+ color: theme('colors.white.DEFAULT');
579
+ .ardplayer-icon {
580
+ color: theme('colors.blue.jellyBean.hex');
581
+ }
521
582
  }
522
583
  }
584
+ &.ardplayer-state-audio {
585
+ --ardplayer-color-lightest: theme('colors.blue.jellyBean.hex');
586
+ }
523
587
  }
524
588
  }
525
-
526
- .ardplayer.ardplayer-state-audio {
527
- --ardplayer-color-lightest: theme('colors.blue.jellyBean.hex');
528
- }
529
589
  }
530
590
 
531
591
  [data-theme='hr-rundfunkrat'] {
@@ -587,10 +647,10 @@
587
647
  --color-stage-link: theme('colors.white.DEFAULT');
588
648
  /* Cluster-Teaser */
589
649
  --color-cluster-teaser-link: theme('colors.blue.deepCerulean.hex');
590
- --color-cluster-teaser-headline: theme('colors.blue.congress');
650
+ --color-cluster-teaser-headline: theme('colors.blue.congress.hex');
591
651
  /* Button */
592
652
  --color-button: theme('colors.blue.deepCerulean.hex');
593
- --color-button--dark: theme('colors.blue.congress');
653
+ --color-button--dark: theme('colors.blue.congress.hex');
594
654
  --color-button-inverted: theme('colors.white.DEFAULT');
595
655
  --color-button-inverted--dark: theme('colors.blue.accented');
596
656
  /* Media-Button */
@@ -610,36 +670,44 @@
610
670
  --structure-nav-background: theme('colors.blue.deepCerulean.hex');
611
671
 
612
672
  .ardplayer {
613
- --ardplayer-color-primary-base: theme('colors.blue.deepCerulean.hex');
614
- --ardplayer-color-primary-base-transparent-30: rgba(
615
- theme('colors.blue.deepCerulean.rgb') / 70%
616
- );
617
- --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
618
- --ardplayer-color-tertiary-base: theme('colors.blue.deepCerulean.hex');
619
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
673
+ &.ardplayer-light-mode {
674
+ --ardplayer-color-primary-base: theme('colors.blue.deepCerulean.hex');
675
+ --ardplayer-color-primary-base-transparent-30: rgba(
676
+ theme('colors.blue.deepCerulean.rgb') / 70%
677
+ );
678
+ --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
679
+ --ardplayer-color-tertiary-base: theme('colors.blue.deepCerulean.hex');
680
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
681
+ --ardplayer-lightmode-color-lightest-transparent-30: theme(
682
+ 'colors.blue.deepCerulean.hex'
683
+ );
684
+
685
+ .noUi-handle {
686
+ background: theme('colors.blue.deepCerulean.hex');
687
+ }
620
688
 
621
- .ardplayer-controlbar {
622
- .ardplayer-controlbar-hover {
623
- --ardplayer-color-lightest: theme('colors.blue.deepCerulean.hex');
624
- color: var(--ardplayer-color-lightest);
689
+ .ardplayer-controlbar {
690
+ .ardplayer-controlbar-hover {
691
+ --ardplayer-color-lightest: theme('colors.blue.deepCerulean.hex');
692
+ color: var(--ardplayer-color-lightest);
693
+ }
625
694
  }
626
- }
627
695
 
628
- .ardplayer-bottom-sheet-container {
629
- --ardplayer-color-lightest: theme('colors.blue.deepCerulean.hex');
696
+ .ardplayer-bottom-sheet-container {
697
+ --ardplayer-color-lightest: theme('colors.blue.deepCerulean.hex');
630
698
 
631
- .ardplayer-option:hover {
632
- color: theme('colors.white.DEFAULT');
633
- .ardplayer-icon {
634
- color: theme('colors.blue.deepCerulean.hex');
699
+ .ardplayer-option:hover {
700
+ color: theme('colors.white.DEFAULT');
701
+ .ardplayer-icon {
702
+ color: theme('colors.blue.deepCerulean.hex');
703
+ }
635
704
  }
636
705
  }
706
+ &.ardplayer-state-audio {
707
+ --ardplayer-color-lightest: theme('colors.blue.deepCerulean.hex');
708
+ }
637
709
  }
638
710
  }
639
-
640
- .ardplayer.ardplayer-state-audio {
641
- --ardplayer-color-lightest: theme('colors.blue.deepCerulean.hex');
642
- }
643
711
  }
644
712
 
645
713
  [data-theme='hr-werbung'] {
@@ -727,36 +795,44 @@
727
795
  --font-weight-title: theme('fontWeight.bold');
728
796
 
729
797
  .ardplayer {
730
- --ardplayer-color-primary-base: theme('colors.blue.blueLuxury.hex');
731
- --ardplayer-color-primary-base-transparent-30: rgba(
732
- theme('colors.blue.blueLuxury.rgb') / 70%
733
- );
734
- --ardplayer-color-primary-dark-base: theme('colors.blue.blackSqueeze');
735
- --ardplayer-color-tertiary-base: theme('colors.blue.blueLuxury.hex');
736
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
798
+ &.ardplayer-light-mode {
799
+ --ardplayer-color-primary-base: theme('colors.blue.blueLuxury.hex');
800
+ --ardplayer-color-primary-base-transparent-30: rgba(
801
+ theme('colors.blue.blueLuxury.rgb') / 70%
802
+ );
803
+ --ardplayer-color-primary-dark-base: theme('colors.blue.blackSqueeze');
804
+ --ardplayer-color-tertiary-base: theme('colors.blue.blueLuxury.hex');
805
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
806
+ --ardplayer-lightmode-color-lightest-transparent-30: theme(
807
+ 'colors.blue.blueLuxury.hex'
808
+ );
809
+
810
+ .noUi-handle {
811
+ background: theme('colors.blue.blueLuxury.hex');
812
+ }
737
813
 
738
- .ardplayer-controlbar {
739
- .ardplayer-controlbar-hover {
740
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
741
- color: var(--ardplayer-color-lightest);
814
+ .ardplayer-controlbar {
815
+ .ardplayer-controlbar-hover {
816
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
817
+ color: var(--ardplayer-color-lightest);
818
+ }
742
819
  }
743
- }
744
820
 
745
- .ardplayer-bottom-sheet-container {
746
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
821
+ .ardplayer-bottom-sheet-container {
822
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
747
823
 
748
- .ardplayer-option:hover {
749
- color: theme('colors.white.DEFAULT');
750
- .ardplayer-icon {
751
- color: theme('colors.blue.blueLuxury.hex');
824
+ .ardplayer-option:hover {
825
+ color: theme('colors.white.DEFAULT');
826
+ .ardplayer-icon {
827
+ color: theme('colors.blue.blueLuxury.hex');
828
+ }
752
829
  }
753
830
  }
831
+ &.ardplayer-state-audio {
832
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
833
+ }
754
834
  }
755
835
  }
756
-
757
- .ardplayer.ardplayer-state-audio {
758
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
759
- }
760
836
  }
761
837
 
762
838
  [data-theme='hr-sinfonieorchester'] {
@@ -833,34 +909,42 @@
833
909
  --font-weight-title: theme('fontWeight.bold');
834
910
 
835
911
  .ardplayer {
836
- --ardplayer-color-primary-base: theme('colors.red.wellRead.hex');
837
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.red.wellRead.rgb') / 70%);
838
- --ardplayer-color-primary-dark-base: theme('colors.gray.alto');
839
- --ardplayer-color-tertiary-base: theme('colors.red.wellRead.hex');
840
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
841
-
842
- .ardplayer-controlbar {
843
- .ardplayer-controlbar-hover {
844
- --ardplayer-color-lightest: theme('colors.red.wellRead.hex');
845
- color: var(--ardplayer-color-lightest);
912
+ &.ardplayer-light-mode {
913
+ --ardplayer-color-primary-base: theme('colors.red.wellRead.hex');
914
+ --ardplayer-color-primary-base-transparent-30: rgba(
915
+ theme('colors.red.wellRead.rgb') / 70%
916
+ );
917
+ --ardplayer-color-primary-dark-base: theme('colors.gray.alto');
918
+ --ardplayer-color-tertiary-base: theme('colors.red.wellRead.hex');
919
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
920
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.red.wellRead.hex');
921
+
922
+ .noUi-handle {
923
+ background: theme('colors.red.wellRead.hex');
846
924
  }
847
- }
848
925
 
849
- .ardplayer-bottom-sheet-container {
850
- --ardplayer-color-lightest: theme('colors.red.wellRead.hex');
926
+ .ardplayer-controlbar {
927
+ .ardplayer-controlbar-hover {
928
+ --ardplayer-color-lightest: theme('colors.red.wellRead.hex');
929
+ color: var(--ardplayer-color-lightest);
930
+ }
931
+ }
932
+
933
+ .ardplayer-bottom-sheet-container {
934
+ --ardplayer-color-lightest: theme('colors.red.wellRead.hex');
851
935
 
852
- .ardplayer-option:hover {
853
- color: theme('colors.white.DEFAULT');
854
- .ardplayer-icon {
855
- color: theme('colors.red.wellRead.hex');
936
+ .ardplayer-option:hover {
937
+ color: theme('colors.white.DEFAULT');
938
+ .ardplayer-icon {
939
+ color: theme('colors.red.wellRead.hex');
940
+ }
856
941
  }
857
942
  }
943
+ &.ardplayer-state-audio {
944
+ --ardplayer-color-lightest: theme('colors.red.wellRead.hex');
945
+ }
858
946
  }
859
947
  }
860
-
861
- .ardplayer.ardplayer-state-audio {
862
- --ardplayer-color-lightest: theme('colors.red.wellRead.hex');
863
- }
864
948
  }
865
949
 
866
950
  [data-theme='hr-bigband'] {
@@ -934,33 +1018,41 @@
934
1018
  --font-weight-title: theme('fontWeight.bold');
935
1019
 
936
1020
  .ardplayer {
937
- --ardplayer-color-primary-base: theme('colors.teal.DEFAULT.hex');
938
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.teal.DEFAULT.rgb') / 70%);
939
- --ardplayer-color-primary-dark-base: theme('colors.blue.blackSqueeze');
940
- --ardplayer-color-tertiary-base: theme('colors.teal.DEFAULT.hex');
941
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
942
-
943
- .ardplayer-controlbar {
944
- .ardplayer-controlbar-hover {
945
- --ardplayer-color-lightest: theme('colors.teal.DEFAULT.hex');
946
- color: var(--ardplayer-color-lightest);
1021
+ &.ardplayer-light-mode {
1022
+ --ardplayer-color-primary-base: theme('colors.teal.DEFAULT.hex');
1023
+ --ardplayer-color-primary-base-transparent-30: rgba(
1024
+ theme('colors.teal.DEFAULT.rgb') / 70%
1025
+ );
1026
+ --ardplayer-color-primary-dark-base: theme('colors.blue.blackSqueeze');
1027
+ --ardplayer-color-tertiary-base: theme('colors.teal.DEFAULT.hex');
1028
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1029
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.teal.DEFAULT.hex');
1030
+
1031
+ .noUi-handle {
1032
+ background: theme('colors.teal.DEFAULT.hex');
947
1033
  }
948
- }
949
1034
 
950
- .ardplayer-bottom-sheet-container {
951
- --ardplayer-color-lightest: theme('colors.teal.DEFAULT.hex');
1035
+ .ardplayer-controlbar {
1036
+ .ardplayer-controlbar-hover {
1037
+ --ardplayer-color-lightest: theme('colors.teal.DEFAULT.hex');
1038
+ color: var(--ardplayer-color-lightest);
1039
+ }
1040
+ }
1041
+
1042
+ .ardplayer-bottom-sheet-container {
1043
+ --ardplayer-color-lightest: theme('colors.teal.DEFAULT.hex');
952
1044
 
953
- .ardplayer-option:hover {
954
- color: theme('colors.white.DEFAULT');
955
- .ardplayer-icon {
956
- color: theme('colors.teal.DEFAULT.hex');
1045
+ .ardplayer-option:hover {
1046
+ color: theme('colors.white.DEFAULT');
1047
+ .ardplayer-icon {
1048
+ color: theme('colors.teal.DEFAULT.hex');
1049
+ }
957
1050
  }
958
1051
  }
959
1052
  }
960
- }
961
-
962
- .ardplayer.ardplayer-state-audio {
963
- --ardplayer-color-lightest: theme('colors.teal.DEFAULT.hex');
1053
+ &.ardplayer-state-audio {
1054
+ --ardplayer-color-lightest: theme('colors.teal.DEFAULT.hex');
1055
+ }
964
1056
  }
965
1057
  }
966
1058
 
@@ -1049,36 +1141,44 @@
1049
1141
  --font-weight-title: theme('fontWeight.bold');
1050
1142
 
1051
1143
  .ardplayer {
1052
- --ardplayer-color-primary-base: theme('colors.blue.blueLuxury.hex');
1053
- --ardplayer-color-primary-base-transparent-30: rgba(
1054
- theme('colors.blue.blueLuxury.rgb') / 70%
1055
- );
1056
- --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
1057
- --ardplayer-color-tertiary-base: theme('colors.blue.blueLuxury.hex');
1058
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1144
+ &.ardplayer-light-mode {
1145
+ --ardplayer-color-primary-base: theme('colors.blue.blueLuxury.hex');
1146
+ --ardplayer-color-primary-base-transparent-30: rgba(
1147
+ theme('colors.blue.blueLuxury.rgb') / 70%
1148
+ );
1149
+ --ardplayer-color-primary-dark-base: theme('colors.blue.accented');
1150
+ --ardplayer-color-tertiary-base: theme('colors.blue.blueLuxury.hex');
1151
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1152
+ --ardplayer-lightmode-color-lightest-transparent-30: theme(
1153
+ 'colors.blue.blueLuxury.hex'
1154
+ );
1155
+
1156
+ .noUi-handle {
1157
+ background: theme('colors.blue.blueLuxury.hex');
1158
+ }
1059
1159
 
1060
- .ardplayer-controlbar {
1061
- .ardplayer-controlbar-hover {
1062
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
1063
- color: var(--ardplayer-color-lightest);
1160
+ .ardplayer-controlbar {
1161
+ .ardplayer-controlbar-hover {
1162
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
1163
+ color: var(--ardplayer-color-lightest);
1164
+ }
1064
1165
  }
1065
- }
1066
1166
 
1067
- .ardplayer-bottom-sheet-container {
1068
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
1167
+ .ardplayer-bottom-sheet-container {
1168
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
1069
1169
 
1070
- .ardplayer-option:hover {
1071
- color: theme('colors.white.DEFAULT');
1072
- .ardplayer-icon {
1073
- color: theme('colors.blue.blueLuxury.hex');
1170
+ .ardplayer-option:hover {
1171
+ color: theme('colors.white.DEFAULT');
1172
+ .ardplayer-icon {
1173
+ color: theme('colors.blue.blueLuxury.hex');
1174
+ }
1074
1175
  }
1075
1176
  }
1177
+ &.ardplayer-state-audio {
1178
+ --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
1179
+ }
1076
1180
  }
1077
1181
  }
1078
-
1079
- .ardplayer.ardplayer-state-audio {
1080
- --ardplayer-color-lightest: theme('colors.blue.blueLuxury.hex');
1081
- }
1082
1182
  }
1083
1183
 
1084
1184
  [data-theme='hr1'] {
@@ -1158,34 +1258,42 @@
1158
1258
  --feature-box-height: 96px;
1159
1259
 
1160
1260
  .ardplayer {
1161
- --ardplayer-color-primary-base: theme('colors.yellow.olive.hex');
1162
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.yellow.olive.rgb') / 70%);
1163
- --ardplayer-color-primary-dark-base: theme('colors.white.floral');
1164
- --ardplayer-color-tertiary-base: theme('colors.yellow.olive.hex');
1165
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1166
-
1167
- .ardplayer-controlbar {
1168
- .ardplayer-controlbar-hover {
1169
- --ardplayer-color-lightest: theme('colors.yellow.olive.hex');
1170
- color: var(--ardplayer-color-lightest);
1261
+ &.ardplayer-light-mode {
1262
+ --ardplayer-color-primary-base: theme('colors.yellow.olive.hex');
1263
+ --ardplayer-color-primary-base-transparent-30: rgba(
1264
+ theme('colors.yellow.olive.rgb') / 70%
1265
+ );
1266
+ --ardplayer-color-primary-dark-base: theme('colors.white.floral');
1267
+ --ardplayer-color-tertiary-base: theme('colors.yellow.olive.hex');
1268
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1269
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.yellow.olive.hex');
1270
+
1271
+ .noUi-handle {
1272
+ background: theme('colors.yellow.olive.hex');
1273
+ }
1274
+
1275
+ .ardplayer-controlbar {
1276
+ .ardplayer-controlbar-hover {
1277
+ --ardplayer-color-lightest: theme('colors.yellow.olive.hex');
1278
+ color: var(--ardplayer-color-lightest);
1279
+ }
1171
1280
  }
1172
- }
1173
1281
 
1174
- .ardplayer-bottom-sheet-container {
1175
- --ardplayer-color-lightest: theme('colors.yellow.olive.hex');
1282
+ .ardplayer-bottom-sheet-container {
1283
+ --ardplayer-color-lightest: theme('colors.yellow.olive.hex');
1176
1284
 
1177
- .ardplayer-option:hover {
1178
- color: theme('colors.white.DEFAULT');
1179
- .ardplayer-icon {
1180
- color: theme('colors.yellow.olive.hex');
1285
+ .ardplayer-option:hover {
1286
+ color: theme('colors.white.DEFAULT');
1287
+ .ardplayer-icon {
1288
+ color: theme('colors.yellow.olive.hex');
1289
+ }
1181
1290
  }
1182
1291
  }
1292
+ &.ardplayer-state-audio {
1293
+ --ardplayer-color-lightest: theme('colors.yellow.olive.hex');
1294
+ }
1183
1295
  }
1184
1296
  }
1185
-
1186
- .ardplayer.ardplayer-state-audio {
1187
- --ardplayer-color-lightest: theme('colors.yellow.olive.hex');
1188
- }
1189
1297
  }
1190
1298
 
1191
1299
  [data-theme='hr2'] {
@@ -1270,35 +1378,56 @@
1270
1378
  --feature-box-height: 96px;
1271
1379
 
1272
1380
  .ardplayer {
1273
- --ardplayer-color-primary-base: theme('colors.red.paprika.hex');
1274
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.red.paprika.rgb') / 70%);
1275
- --ardplayer-color-primary-live: theme('colors.pink.rose.hex');
1276
- --ardplayer-color-primary-live-transparent-30: rgba(theme('colors.pink.rose.rgb') / 70%);
1277
- --ardplayer-color-primary-dark-base: theme('colors.gray.alto');
1278
- --ardplayer-color-tertiary-base: theme('colors.red.paprika.hex');
1279
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1280
-
1281
- .ardplayer-controlbar {
1282
- .ardplayer-controlbar-hover {
1283
- --ardplayer-color-lightest: theme('colors.red.paprika.hex');
1284
- color: var(--ardplayer-color-lightest);
1381
+ &.ardplayer-light-mode {
1382
+ --ardplayer-color-primary-base: theme('colors.red.paprika.hex');
1383
+ --ardplayer-color-primary-base-transparent-30: rgba(
1384
+ theme('colors.red.paprika.rgb') / 70%
1385
+ );
1386
+ --ardplayer-color-primary-dark-base: theme('colors.gray.alto');
1387
+ --ardplayer-color-tertiary-base: theme('colors.red.paprika.hex');
1388
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1389
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.red.paprika.hex');
1390
+
1391
+ &.ardplayer-state-live {
1392
+ --ardplayer-color-primary-live: theme('colors.pink.rose.hex');
1393
+ --ardplayer-color-primary-live-transparent-30: rgba(
1394
+ theme('colors.pink.rose.rgb') / 70%
1395
+ );
1396
+ --ardplayer-color-ui-background-shim: var(
1397
+ --ardplayer-darkmode-color-ui-background-shim
1398
+ );
1399
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.pink.rose.hex');
1400
+
1401
+ .noUi-handle {
1402
+ background: theme('colors.pink.rose.hex');
1403
+ }
1285
1404
  }
1286
- }
1287
1405
 
1288
- .ardplayer-bottom-sheet-container {
1289
- --ardplayer-color-lightest: theme('colors.red.paprika.hex');
1406
+ .noUi-handle {
1407
+ background: theme('colors.red.paprika.hex');
1408
+ }
1290
1409
 
1291
- .ardplayer-option:hover {
1292
- color: theme('colors.white.DEFAULT');
1293
- .ardplayer-icon {
1294
- color: theme('colors.red.paprika.hex');
1410
+ .ardplayer-controlbar {
1411
+ .ardplayer-controlbar-hover {
1412
+ --ardplayer-color-lightest: theme('colors.red.paprika.hex');
1413
+ color: var(--ardplayer-color-lightest);
1295
1414
  }
1296
1415
  }
1297
- }
1298
- }
1299
1416
 
1300
- .ardplayer.ardplayer-state-audio {
1301
- --ardplayer-color-lightest: theme('colors.red.paprika.hex');
1417
+ .ardplayer-bottom-sheet-container {
1418
+ --ardplayer-color-lightest: theme('colors.red.paprika.hex');
1419
+
1420
+ .ardplayer-option:hover {
1421
+ color: theme('colors.white.DEFAULT');
1422
+ .ardplayer-icon {
1423
+ color: theme('colors.red.paprika.hex');
1424
+ }
1425
+ }
1426
+ }
1427
+ &.ardplayer-state-audio {
1428
+ --ardplayer-color-lightest: theme('colors.red.paprika.hex');
1429
+ }
1430
+ }
1302
1431
  }
1303
1432
  }
1304
1433
 
@@ -1380,34 +1509,42 @@
1380
1509
  --feature-box-height: 96px;
1381
1510
 
1382
1511
  .ardplayer {
1383
- --ardplayer-color-primary-base: theme('colors.red.monza.hex');
1384
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.red.monza.rgb') / 70%);
1385
- --ardplayer-color-primary-dark-base: theme('colors.gray.mercury');
1386
- --ardplayer-color-tertiary-base: theme('colors.red.monza.hex');
1387
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1388
-
1389
- .ardplayer-controlbar {
1390
- .ardplayer-controlbar-hover {
1391
- --ardplayer-color-lightest: theme('colors.red.monza.hex');
1392
- color: var(--ardplayer-color-lightest);
1512
+ &.ardplayer-light-mode {
1513
+ --ardplayer-color-primary-base: theme('colors.red.monza.hex');
1514
+ --ardplayer-color-primary-base-transparent-30: rgba(
1515
+ theme('colors.red.monza.rgb') / 70%
1516
+ );
1517
+ --ardplayer-color-primary-dark-base: theme('colors.gray.mercury');
1518
+ --ardplayer-color-tertiary-base: theme('colors.red.monza.hex');
1519
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1520
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.red.monza.hex');
1521
+
1522
+ .noUi-handle {
1523
+ background: theme('colors.red.monza.hex');
1524
+ }
1525
+
1526
+ .ardplayer-controlbar {
1527
+ .ardplayer-controlbar-hover {
1528
+ --ardplayer-color-lightest: theme('colors.red.monza.hex');
1529
+ color: var(--ardplayer-color-lightest);
1530
+ }
1393
1531
  }
1394
- }
1395
1532
 
1396
- .ardplayer-bottom-sheet-container {
1397
- --ardplayer-color-lightest: theme('colors.red.monza.hex');
1533
+ .ardplayer-bottom-sheet-container {
1534
+ --ardplayer-color-lightest: theme('colors.red.monza.hex');
1398
1535
 
1399
- .ardplayer-option:hover {
1400
- color: theme('colors.white.DEFAULT');
1401
- .ardplayer-icon {
1402
- color: theme('colors.red.monza.hex');
1536
+ .ardplayer-option:hover {
1537
+ color: theme('colors.white.DEFAULT');
1538
+ .ardplayer-icon {
1539
+ color: theme('colors.red.monza.hex');
1540
+ }
1403
1541
  }
1404
1542
  }
1543
+ &.ardplayer-state-audio {
1544
+ --ardplayer-color-lightest: theme('colors.red.monza.hex');
1545
+ }
1405
1546
  }
1406
1547
  }
1407
-
1408
- .ardplayer.ardplayer-state-audio {
1409
- --ardplayer-color-lightest: theme('colors.red.monza.hex');
1410
- }
1411
1548
  }
1412
1549
 
1413
1550
  [data-theme='hr4'] {
@@ -1488,34 +1625,42 @@
1488
1625
  --feature-box-height: 96px;
1489
1626
 
1490
1627
  .ardplayer {
1491
- --ardplayer-color-primary-base: theme('colors.green.eden.hex');
1492
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.green.eden.rgb') / 70%);
1493
- --ardplayer-color-primary-dark-base: theme('colors.white.azureish');
1494
- --ardplayer-color-tertiary-base: theme('colors.green.eden.hex');
1495
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1496
-
1497
- .ardplayer-controlbar {
1498
- .ardplayer-controlbar-hover {
1499
- --ardplayer-color-lightest: theme('colors.green.eden.hex');
1500
- color: var(--ardplayer-color-lightest);
1628
+ &.ardplayer-light-mode {
1629
+ --ardplayer-color-primary-base: theme('colors.green.eden.hex');
1630
+ --ardplayer-color-primary-base-transparent-30: rgba(
1631
+ theme('colors.green.eden.rgb') / 70%
1632
+ );
1633
+ --ardplayer-color-primary-dark-base: theme('colors.white.azureish');
1634
+ --ardplayer-color-tertiary-base: theme('colors.green.eden.hex');
1635
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1636
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.green.eden.hex');
1637
+
1638
+ .noUi-handle {
1639
+ background: theme('colors.green.eden.hex');
1501
1640
  }
1502
- }
1503
1641
 
1504
- .ardplayer-bottom-sheet-container {
1505
- --ardplayer-color-lightest: theme('colors.green.eden.hex');
1642
+ .ardplayer-controlbar {
1643
+ .ardplayer-controlbar-hover {
1644
+ --ardplayer-color-lightest: theme('colors.green.eden.hex');
1645
+ color: var(--ardplayer-color-lightest);
1646
+ }
1647
+ }
1648
+
1649
+ .ardplayer-bottom-sheet-container {
1650
+ --ardplayer-color-lightest: theme('colors.green.eden.hex');
1506
1651
 
1507
- .ardplayer-option:hover {
1508
- color: theme('colors.white.DEFAULT');
1509
- .ardplayer-icon {
1510
- color: theme('colors.green.eden.hex');
1652
+ .ardplayer-option:hover {
1653
+ color: theme('colors.white.DEFAULT');
1654
+ .ardplayer-icon {
1655
+ color: theme('colors.green.eden.hex');
1656
+ }
1511
1657
  }
1512
1658
  }
1659
+ &.ardplayer-state-audio {
1660
+ --ardplayer-color-lightest: theme('colors.green.eden.hex');
1661
+ }
1513
1662
  }
1514
1663
  }
1515
-
1516
- .ardplayer.ardplayer-state-audio {
1517
- --ardplayer-color-lightest: theme('colors.green.eden.hex');
1518
- }
1519
1664
  }
1520
1665
 
1521
1666
  [data-theme='you-fm'] {
@@ -1619,34 +1764,40 @@
1619
1764
  --feature-box-height: 96px;
1620
1765
 
1621
1766
  .ardplayer {
1622
- --ardplayer-color-primary-base: theme('colors.blue.sea.hex');
1623
- --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.blue.sea.rgb') / 70%);
1624
- --ardplayer-color-primary-dark-base: theme('colors.gray.platinum');
1625
- --ardplayer-color-tertiary-base: theme('colors.blue.sea.hex');
1626
- --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1627
-
1628
- .ardplayer-controlbar {
1629
- .ardplayer-controlbar-hover {
1630
- --ardplayer-color-lightest: theme('colors.blue.sea.hex');
1631
- color: var(--ardplayer-color-lightest);
1767
+ &.ardplayer-light-mode {
1768
+ --ardplayer-color-primary-base: theme('colors.blue.sea.hex');
1769
+ --ardplayer-color-primary-base-transparent-30: rgba(theme('colors.blue.sea.rgb') / 70%);
1770
+ --ardplayer-color-primary-dark-base: theme('colors.gray.platinum');
1771
+ --ardplayer-color-tertiary-base: theme('colors.blue.sea.hex');
1772
+ --ardplayer-color-lightest: theme('colors.white.DEFAULT');
1773
+ --ardplayer-lightmode-color-lightest-transparent-30: theme('colors.blue.sea.hex');
1774
+
1775
+ .noUi-handle {
1776
+ background: theme('colors.blue.sea.hex');
1632
1777
  }
1633
- }
1634
1778
 
1635
- .ardplayer-bottom-sheet-container {
1636
- --ardplayer-color-lightest: theme('colors.blue.sea.hex');
1779
+ .ardplayer-controlbar {
1780
+ .ardplayer-controlbar-hover {
1781
+ --ardplayer-color-lightest: theme('colors.blue.sea.hex');
1782
+ color: var(--ardplayer-color-lightest);
1783
+ }
1784
+ }
1637
1785
 
1638
- .ardplayer-option:hover {
1639
- color: theme('colors.white.DEFAULT');
1640
- .ardplayer-icon {
1641
- color: theme('colors.blue.sea.hex');
1786
+ .ardplayer-bottom-sheet-container {
1787
+ --ardplayer-color-lightest: theme('colors.blue.sea.hex');
1788
+
1789
+ .ardplayer-option:hover {
1790
+ color: theme('colors.white.DEFAULT');
1791
+ .ardplayer-icon {
1792
+ color: theme('colors.blue.sea.hex');
1793
+ }
1642
1794
  }
1643
1795
  }
1796
+ &.ardplayer-state-audio {
1797
+ --ardplayer-color-lightest: theme('colors.blue.sea.hex');
1798
+ }
1644
1799
  }
1645
1800
  }
1646
-
1647
- .ardplayer.ardplayer-state-audio {
1648
- --ardplayer-color-lightest: theme('colors.blue.sea.hex');
1649
- }
1650
1801
  }
1651
1802
 
1652
1803
  /*! purgecss end ignore */