eb-player 2.0.2 → 2.0.4

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 +1 @@
1
- <!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EBPlayer</title><style>html,body{margin:0;background-color:black;height:100vh}#eb_player{width:100%;height:100vh}</style><script defer src="equipe.js"></script></head><body><div id="eb_player"></div></body></html>
1
+ <!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EBPlayer</title><style>html,body{margin:0;background-color:black;height:100vh}#equipe_eb_player{width:100%;height:100vh}</style><script defer src="equipe.js"></script></head><body><div id="equipe_eb_player"></div></body></html>
@@ -27,8 +27,8 @@
27
27
  --eb-radius-control: 8px;
28
28
  --eb-duration-transition: 200ms;
29
29
  font-family: 'Inter', -apple-system, sans-serif;
30
- border-radius: 14px;
31
- box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
30
+ border-radius: 0;
31
+ box-shadow: none;
32
32
  color: #fff;
33
33
  }
34
34
 
@@ -291,9 +291,9 @@
291
291
  transition: height .15s;
292
292
  }
293
293
 
294
- /* Red gradient fill */
294
+ /* Solid red fill */
295
295
  [data-theme="lequipe"] .eb-player .eb-seekbar-progress {
296
- background: linear-gradient(90deg, #d61e00, color-mix(in srgb, #d61e00 70%, #fff));
296
+ background: #d61e00;
297
297
  border-radius: 3px;
298
298
  transition: height .15s;
299
299
  }
@@ -467,72 +467,184 @@
467
467
  Settings panel: glassmorphism dropdown
468
468
  ============================================================ */
469
469
  [data-theme="lequipe"] .eb-player .eb-settings-panel {
470
- background: rgba(10,10,20,.55);
471
- backdrop-filter: blur(18px) saturate(160%);
472
- -webkit-backdrop-filter: blur(18px) saturate(160%);
473
- border-radius: 12px;
474
- min-width: 300px;
475
- box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
470
+ background: rgba(30,30,45,.6);
471
+ backdrop-filter: blur(24px) saturate(160%);
472
+ -webkit-backdrop-filter: blur(24px) saturate(160%);
473
+ border-radius: 14px;
474
+ width: min(340px, 80vw);
475
+ max-height: 60vh;
476
+ overflow-y: auto;
477
+ overflow-x: hidden;
478
+ box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
479
+ }
480
+
481
+ /* Small viewports: compact rows */
482
+ @media (max-height: 400px) {
483
+ [data-theme="lequipe"] .eb-player .eb-settings-category { padding: 12px 14px; font-size: 13px; gap: 10px; }
484
+ [data-theme="lequipe"] .eb-player .eb-settings-item { padding: 11px 14px; font-size: 13px; }
485
+ [data-theme="lequipe"] .eb-player .eb-settings-header { padding: 10px 14px; }
486
+ [data-theme="lequipe"] .eb-player .eb-settings-panel { min-width: 220px; border-radius: 10px; }
487
+ [data-theme="lequipe"] .eb-player .eb-settings-back { width: 30px; height: 30px; }
476
488
  }
477
489
 
478
490
  [data-theme="lequipe"] .eb-player .eb-settings-menu {
479
491
  padding: 0;
480
492
  }
481
493
 
482
- [data-theme="lequipe"] .eb-player .eb-settings-category,
483
- [data-theme="lequipe"] .eb-player .eb-settings-item,
484
- [data-theme="lequipe"] .eb-player .eb-settings-back {
485
- padding: 15px 20px;
494
+ /* Root menu category rows — icon | label | value | chevron */
495
+ [data-theme="lequipe"] .eb-player .eb-settings-category {
496
+ display: flex;
497
+ align-items: center;
498
+ gap: 14px;
499
+ padding: 18px 20px;
500
+ font-size: 14px;
501
+ color: rgba(255,255,255,.95);
502
+ border-bottom: 1px solid rgba(255,255,255,.06);
503
+ transition: background .12s;
504
+ width: 100%;
505
+ border: none;
506
+ background: none;
507
+ cursor: pointer;
508
+ text-align: left;
509
+ }
510
+
511
+ [data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
512
+ border-bottom: none;
513
+ }
514
+
515
+ [data-theme="lequipe"] .eb-player .eb-settings-category:hover {
516
+ background: rgba(255,255,255,.05);
517
+ }
518
+
519
+ [data-theme="lequipe"] .eb-player .eb-settings-category__icon {
520
+ flex-shrink: 0;
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: center;
524
+ color: rgba(255,255,255,.6);
525
+ }
526
+
527
+ [data-theme="lequipe"] .eb-player .eb-settings-category__icon .eb-icon {
528
+ width: 22px;
529
+ height: 22px;
530
+ }
531
+
532
+ [data-theme="lequipe"] .eb-player .eb-settings-category__label {
533
+ flex: 1;
534
+ font-weight: 400;
535
+ }
536
+
537
+ [data-theme="lequipe"] .eb-player .eb-settings-category__value {
538
+ color: rgba(255,255,255,.45);
486
539
  font-size: 13px;
487
- color: rgba(255,255,255,.9);
540
+ font-weight: 400;
541
+ }
542
+
543
+ [data-theme="lequipe"] .eb-player .eb-settings-category__chevron {
544
+ flex-shrink: 0;
545
+ display: flex;
546
+ align-items: center;
547
+ color: rgba(255,255,255,.3);
548
+ }
549
+
550
+ [data-theme="lequipe"] .eb-player .eb-settings-category__chevron .eb-icon {
551
+ width: 16px;
552
+ height: 16px;
553
+ }
554
+
555
+ /* Sub-menu header — circular back button + title */
556
+ [data-theme="lequipe"] .eb-player .eb-settings-header {
557
+ display: flex;
558
+ align-items: center;
559
+ gap: 12px;
560
+ padding: 14px 18px;
561
+ border-bottom: 1px solid rgba(255,255,255,.08);
562
+ }
563
+
564
+ [data-theme="lequipe"] .eb-player .eb-settings-header__title {
565
+ font-size: 15px;
566
+ font-weight: 600;
567
+ color: #fff;
568
+ }
569
+
570
+ [data-theme="lequipe"] .eb-player .eb-settings-back {
571
+ width: 36px;
572
+ height: 36px;
573
+ border-radius: 50%;
574
+ background: rgba(255,255,255,.12);
575
+ border: none;
576
+ cursor: pointer;
577
+ display: flex;
578
+ align-items: center;
579
+ justify-content: center;
580
+ padding: 0;
581
+ transition: background .15s;
582
+ flex-shrink: 0;
583
+ color: #fff;
584
+ }
585
+
586
+ [data-theme="lequipe"] .eb-player .eb-settings-back:hover {
587
+ background: rgba(255,255,255,.2);
588
+ }
589
+
590
+ [data-theme="lequipe"] .eb-player .eb-settings-back .eb-icon {
591
+ width: 18px;
592
+ height: 18px;
593
+ }
594
+
595
+ /* Sub-menu items */
596
+ [data-theme="lequipe"] .eb-player .eb-settings-item {
597
+ display: flex;
598
+ align-items: center;
599
+ justify-content: space-between;
600
+ padding: 16px 20px;
601
+ font-size: 14px;
602
+ color: rgba(255,255,255,.7);
488
603
  border-bottom: 1px solid rgba(255,255,255,.06);
489
604
  transition: background .12s;
605
+ width: 100%;
606
+ border-left: none;
607
+ border-right: none;
608
+ border-top: none;
609
+ background: none;
610
+ cursor: pointer;
611
+ text-align: left;
490
612
  }
491
613
 
492
- [data-theme="lequipe"] .eb-player .eb-settings-category:last-child,
493
614
  [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {
494
615
  border-bottom: none;
495
616
  }
496
617
 
497
- [data-theme="lequipe"] .eb-player .eb-settings-category:hover,
498
- [data-theme="lequipe"] .eb-player .eb-settings-item:hover,
499
- [data-theme="lequipe"] .eb-player .eb-settings-back:hover {
618
+ [data-theme="lequipe"] .eb-player .eb-settings-item:hover {
500
619
  background: rgba(255,255,255,.05);
501
620
  }
502
621
 
503
- /* Selected item text */
622
+ /* Selected item text — brighter */
504
623
  [data-theme="lequipe"] .eb-player .eb-settings-item--selected {
505
624
  color: #fff;
506
625
  font-weight: 500;
507
626
  }
508
627
 
509
- /* Active selection dot (filled red) */
628
+ /* Active selection dot (filled accent) */
510
629
  [data-theme="lequipe"] .eb-player .eb-settings-item--selected::after {
511
630
  content: '';
512
- width: 10px;
513
- height: 10px;
631
+ width: 12px;
632
+ height: 12px;
514
633
  border-radius: 50%;
515
634
  background: var(--eb-accent, #d61e00);
516
- box-shadow: 0 0 0 3px rgba(214,30,0,.25);
517
635
  flex-shrink: 0;
518
636
  }
519
637
 
520
638
  /* Non-selected items: hollow dot */
521
639
  [data-theme="lequipe"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
522
640
  content: '';
523
- width: 10px;
524
- height: 10px;
641
+ width: 12px;
642
+ height: 12px;
525
643
  border-radius: 50%;
526
644
  border: 2px solid rgba(255,255,255,.2);
527
645
  flex-shrink: 0;
528
646
  }
529
647
 
530
- /* Back button */
531
- [data-theme="lequipe"] .eb-player .eb-settings-back {
532
- gap: 14px;
533
- font-weight: 600;
534
- }
535
-
536
648
  /* ============================================================
537
649
  Loading spinner
538
650
  ============================================================ */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eb-player",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "scripts": {
5
5
  "dev-test-player": "cd test_player && pnpm run dev",
6
6
  "dev:full": "concurrently -k -n player,next -c blue,green \"pnpm run dev --brand easybroadcast --variant demo\" \"pnpm run dev-test-player\"",