eb-player 2.5.1 → 2.5.3

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 (155) hide show
  1. package/dist/build/eb-player.css +1 -3367
  2. package/dist/build/ebplayer.bundle.js +177 -8654
  3. package/dist/build/types/src/core/command-handler.d.ts +0 -1
  4. package/dist/build/types/src/core/config.d.ts +0 -1
  5. package/dist/build/types/src/core/engine-state-sync.d.ts +0 -1
  6. package/dist/build/types/src/core/event-bus.d.ts +0 -1
  7. package/dist/build/types/src/core/fsm.d.ts +9 -4
  8. package/dist/build/types/src/core/i18n.d.ts +0 -1
  9. package/dist/build/types/src/core/index.d.ts +0 -1
  10. package/dist/build/types/src/core/lifecycle.d.ts +0 -1
  11. package/dist/build/types/src/core/player-state.d.ts +0 -1
  12. package/dist/build/types/src/core/types.d.ts +0 -1
  13. package/dist/build/types/src/eb-player-standalone.d.ts +0 -1
  14. package/dist/build/types/src/eb-player.d.ts +0 -1
  15. package/dist/build/types/src/engines/abr/dash.d.ts +0 -1
  16. package/dist/build/types/src/engines/abr/hls.d.ts +0 -1
  17. package/dist/build/types/src/engines/base-engine.d.ts +0 -1
  18. package/dist/build/types/src/engines/cdn-loader.d.ts +0 -1
  19. package/dist/build/types/src/engines/cdn-token-manager.d.ts +0 -1
  20. package/dist/build/types/src/engines/dash.d.ts +0 -1
  21. package/dist/build/types/src/engines/drm.d.ts +0 -1
  22. package/dist/build/types/src/engines/hls-discontinuity-patch.d.ts +0 -1
  23. package/dist/build/types/src/engines/hls.d.ts +0 -1
  24. package/dist/build/types/src/engines/index.d.ts +0 -1
  25. package/dist/build/types/src/engines/ios/hls.d.ts +0 -1
  26. package/dist/build/types/src/engines/poster/hls.d.ts +0 -1
  27. package/dist/build/types/src/engines/retry/dash.d.ts +0 -1
  28. package/dist/build/types/src/engines/retry/hls.d.ts +6 -1
  29. package/dist/build/types/src/engines/segment-token-loader.d.ts +0 -1
  30. package/dist/build/types/src/engines/snapshot/dash.d.ts +0 -1
  31. package/dist/build/types/src/engines/snapshot/hls.d.ts +0 -1
  32. package/dist/build/types/src/engines/stall-watchdog.d.ts +0 -1
  33. package/dist/build/types/src/integrations/ads-manager.d.ts +0 -1
  34. package/dist/build/types/src/integrations/chromecast-manager.d.ts +0 -1
  35. package/dist/build/types/src/integrations/epg-manager.d.ts +0 -1
  36. package/dist/build/types/src/integrations/index.d.ts +0 -1
  37. package/dist/build/types/src/integrations/intro-stream-manager.d.ts +0 -1
  38. package/dist/build/types/src/integrations/p2p-manager.d.ts +0 -1
  39. package/dist/build/types/src/integrations/playlist-manager.d.ts +0 -1
  40. package/dist/build/types/src/skin/bars/bottom-bar.d.ts +0 -1
  41. package/dist/build/types/src/skin/bars/middle-bar.d.ts +0 -1
  42. package/dist/build/types/src/skin/bars/top-bar.d.ts +0 -1
  43. package/dist/build/types/src/skin/base-component.d.ts +0 -1
  44. package/dist/build/types/src/skin/brand/forja-playlist-bar.d.ts +0 -1
  45. package/dist/build/types/src/skin/brand/snrt-radio-carousel.d.ts +0 -1
  46. package/dist/build/types/src/skin/component-registry.d.ts +0 -1
  47. package/dist/build/types/src/skin/controllers/auto-hide.d.ts +0 -1
  48. package/dist/build/types/src/skin/controllers/keyboard.d.ts +0 -1
  49. package/dist/build/types/src/skin/controls/cast-button.d.ts +0 -1
  50. package/dist/build/types/src/skin/controls/channel-name.d.ts +0 -1
  51. package/dist/build/types/src/skin/controls/forward-button.d.ts +0 -1
  52. package/dist/build/types/src/skin/controls/fullscreen-button.d.ts +0 -1
  53. package/dist/build/types/src/skin/controls/info-button.d.ts +0 -1
  54. package/dist/build/types/src/skin/controls/live-sync-button.d.ts +0 -1
  55. package/dist/build/types/src/skin/controls/pip-button.d.ts +0 -1
  56. package/dist/build/types/src/skin/controls/play-pause-button.d.ts +0 -1
  57. package/dist/build/types/src/skin/controls/rewind-button.d.ts +0 -1
  58. package/dist/build/types/src/skin/controls/seekbar.d.ts +0 -1
  59. package/dist/build/types/src/skin/controls/settings-panel.d.ts +0 -1
  60. package/dist/build/types/src/skin/controls/share-button.d.ts +0 -1
  61. package/dist/build/types/src/skin/controls/time-display.d.ts +0 -1
  62. package/dist/build/types/src/skin/controls/volume-control.d.ts +0 -1
  63. package/dist/build/types/src/skin/icons/icons-modern.d.ts +0 -1
  64. package/dist/build/types/src/skin/icons/icons.d.ts +0 -1
  65. package/dist/build/types/src/skin/icons/sprite.d.ts +0 -1
  66. package/dist/build/types/src/skin/index.d.ts +0 -1
  67. package/dist/build/types/src/skin/overlays/error-message.d.ts +0 -1
  68. package/dist/build/types/src/skin/overlays/info-overlay.d.ts +0 -1
  69. package/dist/build/types/src/skin/overlays/loading-spinner.d.ts +0 -1
  70. package/dist/build/types/src/skin/overlays/preroll-overlay.d.ts +0 -1
  71. package/dist/build/types/src/skin/overlays/socials-overlay.d.ts +0 -1
  72. package/dist/build/types/src/skin/overlays/toast-notification.d.ts +0 -1
  73. package/dist/build/types/src/skin/skin-root.d.ts +0 -1
  74. package/dist/build/types/src/utils/chapters.d.ts +0 -1
  75. package/dist/build/types/src/utils/format-duration.d.ts +0 -1
  76. package/dist/build/types/src/utils/format-wall-clock.d.ts +0 -1
  77. package/dist/build/types/src/utils/settings-helpers.d.ts +0 -1
  78. package/dist/eb-player.css +1 -3367
  79. package/package.json +2 -2
  80. package/dist/build/ebplayer.bundle.js.map +0 -1
  81. package/dist/build/types/src/core/command-handler.d.ts.map +0 -1
  82. package/dist/build/types/src/core/config.d.ts.map +0 -1
  83. package/dist/build/types/src/core/engine-state-sync.d.ts.map +0 -1
  84. package/dist/build/types/src/core/event-bus.d.ts.map +0 -1
  85. package/dist/build/types/src/core/fsm.d.ts.map +0 -1
  86. package/dist/build/types/src/core/i18n.d.ts.map +0 -1
  87. package/dist/build/types/src/core/index.d.ts.map +0 -1
  88. package/dist/build/types/src/core/lifecycle.d.ts.map +0 -1
  89. package/dist/build/types/src/core/player-state.d.ts.map +0 -1
  90. package/dist/build/types/src/core/types.d.ts.map +0 -1
  91. package/dist/build/types/src/eb-player-standalone.d.ts.map +0 -1
  92. package/dist/build/types/src/eb-player.d.ts.map +0 -1
  93. package/dist/build/types/src/engines/abr/dash.d.ts.map +0 -1
  94. package/dist/build/types/src/engines/abr/hls.d.ts.map +0 -1
  95. package/dist/build/types/src/engines/base-engine.d.ts.map +0 -1
  96. package/dist/build/types/src/engines/cdn-loader.d.ts.map +0 -1
  97. package/dist/build/types/src/engines/cdn-token-manager.d.ts.map +0 -1
  98. package/dist/build/types/src/engines/dash.d.ts.map +0 -1
  99. package/dist/build/types/src/engines/drm.d.ts.map +0 -1
  100. package/dist/build/types/src/engines/hls-discontinuity-patch.d.ts.map +0 -1
  101. package/dist/build/types/src/engines/hls.d.ts.map +0 -1
  102. package/dist/build/types/src/engines/index.d.ts.map +0 -1
  103. package/dist/build/types/src/engines/ios/hls.d.ts.map +0 -1
  104. package/dist/build/types/src/engines/poster/hls.d.ts.map +0 -1
  105. package/dist/build/types/src/engines/retry/dash.d.ts.map +0 -1
  106. package/dist/build/types/src/engines/retry/hls.d.ts.map +0 -1
  107. package/dist/build/types/src/engines/segment-token-loader.d.ts.map +0 -1
  108. package/dist/build/types/src/engines/snapshot/dash.d.ts.map +0 -1
  109. package/dist/build/types/src/engines/snapshot/hls.d.ts.map +0 -1
  110. package/dist/build/types/src/engines/stall-watchdog.d.ts.map +0 -1
  111. package/dist/build/types/src/integrations/ads-manager.d.ts.map +0 -1
  112. package/dist/build/types/src/integrations/chromecast-manager.d.ts.map +0 -1
  113. package/dist/build/types/src/integrations/epg-manager.d.ts.map +0 -1
  114. package/dist/build/types/src/integrations/index.d.ts.map +0 -1
  115. package/dist/build/types/src/integrations/intro-stream-manager.d.ts.map +0 -1
  116. package/dist/build/types/src/integrations/p2p-manager.d.ts.map +0 -1
  117. package/dist/build/types/src/integrations/playlist-manager.d.ts.map +0 -1
  118. package/dist/build/types/src/skin/bars/bottom-bar.d.ts.map +0 -1
  119. package/dist/build/types/src/skin/bars/middle-bar.d.ts.map +0 -1
  120. package/dist/build/types/src/skin/bars/top-bar.d.ts.map +0 -1
  121. package/dist/build/types/src/skin/base-component.d.ts.map +0 -1
  122. package/dist/build/types/src/skin/brand/forja-playlist-bar.d.ts.map +0 -1
  123. package/dist/build/types/src/skin/brand/snrt-radio-carousel.d.ts.map +0 -1
  124. package/dist/build/types/src/skin/component-registry.d.ts.map +0 -1
  125. package/dist/build/types/src/skin/controllers/auto-hide.d.ts.map +0 -1
  126. package/dist/build/types/src/skin/controllers/keyboard.d.ts.map +0 -1
  127. package/dist/build/types/src/skin/controls/cast-button.d.ts.map +0 -1
  128. package/dist/build/types/src/skin/controls/channel-name.d.ts.map +0 -1
  129. package/dist/build/types/src/skin/controls/forward-button.d.ts.map +0 -1
  130. package/dist/build/types/src/skin/controls/fullscreen-button.d.ts.map +0 -1
  131. package/dist/build/types/src/skin/controls/info-button.d.ts.map +0 -1
  132. package/dist/build/types/src/skin/controls/live-sync-button.d.ts.map +0 -1
  133. package/dist/build/types/src/skin/controls/pip-button.d.ts.map +0 -1
  134. package/dist/build/types/src/skin/controls/play-pause-button.d.ts.map +0 -1
  135. package/dist/build/types/src/skin/controls/rewind-button.d.ts.map +0 -1
  136. package/dist/build/types/src/skin/controls/seekbar.d.ts.map +0 -1
  137. package/dist/build/types/src/skin/controls/settings-panel.d.ts.map +0 -1
  138. package/dist/build/types/src/skin/controls/share-button.d.ts.map +0 -1
  139. package/dist/build/types/src/skin/controls/time-display.d.ts.map +0 -1
  140. package/dist/build/types/src/skin/controls/volume-control.d.ts.map +0 -1
  141. package/dist/build/types/src/skin/icons/icons-modern.d.ts.map +0 -1
  142. package/dist/build/types/src/skin/icons/icons.d.ts.map +0 -1
  143. package/dist/build/types/src/skin/icons/sprite.d.ts.map +0 -1
  144. package/dist/build/types/src/skin/index.d.ts.map +0 -1
  145. package/dist/build/types/src/skin/overlays/error-message.d.ts.map +0 -1
  146. package/dist/build/types/src/skin/overlays/info-overlay.d.ts.map +0 -1
  147. package/dist/build/types/src/skin/overlays/loading-spinner.d.ts.map +0 -1
  148. package/dist/build/types/src/skin/overlays/preroll-overlay.d.ts.map +0 -1
  149. package/dist/build/types/src/skin/overlays/socials-overlay.d.ts.map +0 -1
  150. package/dist/build/types/src/skin/overlays/toast-notification.d.ts.map +0 -1
  151. package/dist/build/types/src/skin/skin-root.d.ts.map +0 -1
  152. package/dist/build/types/src/utils/chapters.d.ts.map +0 -1
  153. package/dist/build/types/src/utils/format-duration.d.ts.map +0 -1
  154. package/dist/build/types/src/utils/format-wall-clock.d.ts.map +0 -1
  155. package/dist/build/types/src/utils/settings-helpers.d.ts.map +0 -1
@@ -1,3367 +1 @@
1
- /**
2
- * eb-player base CSS
3
- *
4
- * CSS custom property defaults are provided as fallbacks in var() calls
5
- * rather than declared on .eb-player. This allows lifecycle.ts to set
6
- * overrides on the parent container element and have them inherit into
7
- * .eb-player without being blocked by a competing declaration.
8
- *
9
- * Theme overrides use the .eb-player[data-theme="..."] selector pattern (see theme-*.css).
10
- * Runtime overrides use style.setProperty() via PlayerController.mount() for backward
11
- * compatibility with the primaryColor / skinColors consumer API.
12
- *
13
- * CSS scoping: The .eb-player prefix ensures no style bleed between two co-hosted instances.
14
- */
15
-
16
- .eb-player {
17
- /* Base styles — all var() calls include hardcoded fallbacks */
18
- position: relative;
19
- overflow: hidden;
20
- font-family: var(--eb-font-family, Arial, sans-serif);
21
- font-size: var(--eb-font-size-base, 14px);
22
- color: var(--eb-color-text, #ffffff);
23
- box-sizing: border-box;
24
- }
25
-
26
- /* Ensure all descendants use border-box sizing */
27
- .eb-player *,
28
- .eb-player *::before,
29
- .eb-player *::after {
30
- box-sizing: inherit;
31
- }
32
-
33
- /* BEM block scaffold */
34
- .eb-player__container {
35
- position: relative;
36
- width: 100%;
37
- height: 100%;
38
- background-color: var(--eb-color-background, rgba(0, 0, 0, 0.8));
39
- }
40
-
41
- .eb-player__video {
42
- display: block;
43
- width: 100%;
44
- height: 100%;
45
- object-fit: contain;
46
- }
47
-
48
- /**
49
- * Forja theme
50
- *
51
- * Applied when [data-theme="forja"].
52
- * Black background, red accent, flat transport buttons,
53
- * two-row bottom bar: seekbar + live label on row 1,
54
- * play-pause + volume on the left / settings + pip + fullscreen on the right on row 2.
55
- */
56
-
57
- /* ============================================================
58
- Root vars & container
59
- ============================================================ */
60
- [data-theme="forja"] {
61
- --eb-color-primary: #FC013B;
62
- --eb-color-progress: #FC013B;
63
- --eb-accent: #FC013B;
64
- }
65
-
66
- [data-theme="forja"] .eb-player {
67
- --eb-color-background: #000;
68
- --eb-color-text: #fff;
69
- --eb-font-size-base: 14px;
70
- font-family: Arial, sans-serif;
71
- color: #fff;
72
- }
73
-
74
- /* ============================================================
75
- Top bar: hidden (no top-bar items in forja layout)
76
- ============================================================ */
77
- [data-theme="forja"] .eb-player .eb-top-bar {
78
- display: none;
79
- }
80
-
81
- /* ============================================================
82
- Bottom bar gradient
83
- ============================================================ */
84
- [data-theme="forja"] .eb-player .eb-bottom-bar__gradient {
85
- height: 100px;
86
- background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
87
- }
88
-
89
- /* ============================================================
90
- Bottom bar: two-row layout
91
- Row 1: seekbar (flex:1) | live-sync label (right)
92
- Row 2: play-pause + volume (left) | settings + pip + fullscreen (right)
93
- ============================================================ */
94
- [data-theme="forja"] .eb-player .eb-bottom-bar__controls-row {
95
- flex-wrap: wrap;
96
- align-items: center;
97
- padding: 0 12px 10px;
98
- gap: 6px;
99
- row-gap: 4px;
100
- }
101
-
102
- /* Row 1: seekbar spans full width */
103
- [data-theme="forja"] .eb-player .eb-bottom-bar__seekbar-zone {
104
- order: -1;
105
- flex: 1;
106
- min-width: 0;
107
- }
108
-
109
- /* Invisible flex break between row 1 and row 2 */
110
- [data-theme="forja"] .eb-player .eb-bottom-bar__controls-row::after {
111
- content: '';
112
- width: 100%;
113
- height: 0;
114
- order: 0;
115
- flex-shrink: 0;
116
- }
117
-
118
- /* Row 2: play-pause + volume on the left */
119
- [data-theme="forja"] .eb-player .eb-slot-play-pause,
120
- [data-theme="forja"] .eb-player .eb-slot-volume {
121
- order: 1;
122
- }
123
-
124
- /* Row 2: live-sync pushed to the right */
125
- [data-theme="forja"] .eb-player .eb-slot-live-sync {
126
- order: 1;
127
- margin-inline-start: auto;
128
- }
129
-
130
- [data-theme="forja"] .eb-player .eb-slot-settings,
131
- [data-theme="forja"] .eb-player .eb-slot-pip,
132
- [data-theme="forja"] .eb-player .eb-slot-fullscreen {
133
- order: 1;
134
- }
135
-
136
- /* ============================================================
137
- Controls visibility transitions
138
- ============================================================ */
139
- [data-theme="forja"] .eb-player.eb-controls-visible .eb-bottom-bar,
140
- [data-theme="forja"] .eb-player.eb-controls-visible .eb-middle-bar {
141
- opacity: 1;
142
- transition: opacity .25s;
143
- }
144
-
145
- [data-theme="forja"] .eb-player.eb-controls-hidden .eb-bottom-bar,
146
- [data-theme="forja"] .eb-player.eb-controls-hidden .eb-middle-bar {
147
- opacity: 0;
148
- transition: opacity .25s;
149
- }
150
-
151
- /* ============================================================
152
- Middle bar: flat grey transport (no circles)
153
- ============================================================ */
154
- [data-theme="forja"] .eb-player .eb-middle-bar {
155
- gap: 24px;
156
- }
157
-
158
- [data-theme="forja"] .eb-player .eb-middle-bar__play-btn {
159
- width: 72px;
160
- height: 72px;
161
- border-radius: 0;
162
- background: transparent;
163
- border: none;
164
- color: rgba(255,255,255,.7);
165
- padding: 0;
166
- transition: color .15s, transform .15s;
167
- }
168
-
169
- [data-theme="forja"] .eb-player .eb-middle-bar__play-btn:hover {
170
- color: rgba(255,255,255,.95);
171
- }
172
-
173
- [data-theme="forja"] .eb-player .eb-middle-bar__play-btn:active {
174
- transform: scale(.9);
175
- }
176
-
177
- [data-theme="forja"] .eb-player .eb-middle-bar__play-btn .eb-icon {
178
- width: 52px;
179
- height: 52px;
180
- fill: currentColor;
181
- stroke: none;
182
- }
183
-
184
- [data-theme="forja"] .eb-player .eb-middle-bar__seek-btn {
185
- width: 52px;
186
- height: 52px;
187
- border-radius: 0;
188
- background: transparent;
189
- border: none;
190
- color: rgba(255,255,255,.65);
191
- display: flex;
192
- flex-direction: column;
193
- align-items: center;
194
- justify-content: center;
195
- gap: 1px;
196
- padding: 0;
197
- transition: color .15s, transform .15s;
198
- }
199
-
200
- [data-theme="forja"] .eb-player .eb-middle-bar__seek-btn:hover {
201
- color: rgba(255,255,255,.9);
202
- }
203
-
204
- [data-theme="forja"] .eb-player .eb-middle-bar__seek-btn:active {
205
- transform: scale(.9);
206
- }
207
-
208
- [data-theme="forja"] .eb-player .eb-seek-circle {
209
- width: 28px;
210
- height: 28px;
211
- fill: currentColor;
212
- stroke: none;
213
- }
214
-
215
- [data-theme="forja"] .eb-player .eb-seek-label {
216
- font-size: .7em;
217
- font-weight: 700;
218
- line-height: 1;
219
- }
220
-
221
- /* ============================================================
222
- Bottom-bar control buttons: flat icon style
223
- ============================================================ */
224
- [data-theme="forja"] .eb-player .eb-play-pause,
225
- [data-theme="forja"] .eb-player .eb-fullscreen,
226
- [data-theme="forja"] .eb-player .eb-pip,
227
- [data-theme="forja"] .eb-player .eb-settings-btn,
228
- [data-theme="forja"] .eb-player .eb-volume-mute {
229
- color: rgba(255,255,255,.88);
230
- background: transparent;
231
- border: none;
232
- border-radius: 2px;
233
- width: 36px;
234
- height: 36px;
235
- transition: color .15s;
236
- flex-shrink: 0;
237
- }
238
-
239
- [data-theme="forja"] .eb-player .eb-play-pause:hover,
240
- [data-theme="forja"] .eb-player .eb-fullscreen:hover,
241
- [data-theme="forja"] .eb-player .eb-pip:hover,
242
- [data-theme="forja"] .eb-player .eb-settings-btn:hover,
243
- [data-theme="forja"] .eb-player .eb-volume-mute:hover {
244
- color: #fff;
245
- }
246
-
247
- [data-theme="forja"] .eb-player .eb-play-pause .eb-icon,
248
- [data-theme="forja"] .eb-player .eb-fullscreen .eb-icon,
249
- [data-theme="forja"] .eb-player .eb-pip .eb-icon,
250
- [data-theme="forja"] .eb-player .eb-settings-btn .eb-icon,
251
- [data-theme="forja"] .eb-player .eb-volume-mute .eb-icon {
252
- width: 22px;
253
- height: 22px;
254
- }
255
-
256
- [data-theme="forja"] .eb-player .eb-play-pause .eb-icon {
257
- fill: currentColor;
258
- stroke: none;
259
- }
260
-
261
- /* ============================================================
262
- Seekbar: thin red track
263
- ============================================================ */
264
- [data-theme="forja"] .eb-player .eb-seekbar-track {
265
- height: 3px;
266
- background: rgba(255,255,255,.25);
267
- border-radius: 0;
268
- transition: height .15s;
269
- }
270
-
271
- [data-theme="forja"] .eb-player .eb-seekbar:hover .eb-seekbar-track {
272
- height: 5px;
273
- }
274
-
275
- [data-theme="forja"] .eb-player .eb-seekbar-buffered {
276
- background: rgba(255,255,255,.3);
277
- border-radius: 0;
278
- }
279
-
280
- [data-theme="forja"] .eb-player .eb-seekbar-progress {
281
- background: var(--eb-color-progress, var(--eb-color-primary, #FC013B));
282
- border-radius: 0;
283
- }
284
-
285
- [data-theme="forja"] .eb-player .eb-seekbar-thumb {
286
- width: 12px;
287
- height: 12px;
288
- inset-inline-end: -6px;
289
- background: #FC013B;
290
- box-shadow: none;
291
- border-radius: 50%;
292
- }
293
-
294
- /* ============================================================
295
- Volume: always-visible inline slider
296
- ============================================================ */
297
- [data-theme="forja"] .eb-player .eb-volume-control {
298
- flex-direction: row;
299
- gap: 0;
300
- }
301
-
302
- [data-theme="forja"] .eb-player .eb-volume-track {
303
- width: 72px;
304
- height: 3px;
305
- background: rgba(255,255,255,.25);
306
- border-radius: 0;
307
- overflow: visible;
308
- margin: 0 4px 0 2px;
309
- transition: height .15s;
310
- }
311
-
312
- [data-theme="forja"] .eb-player .eb-volume-control:hover .eb-volume-track {
313
- height: 4px;
314
- }
315
-
316
- [data-theme="forja"] .eb-player .eb-volume-fill {
317
- background: #FC013B;
318
- border-radius: 0;
319
- }
320
-
321
- [data-theme="forja"] .eb-player .eb-volume-thumb {
322
- width: 11px;
323
- height: 11px;
324
- background: #fff;
325
- box-shadow: none;
326
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
327
- transition: transform .15s;
328
- }
329
-
330
- [data-theme="forja"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
331
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
332
- }
333
-
334
- /* ============================================================
335
- Live-sync: red LIVE badge
336
- ============================================================ */
337
- [data-theme="forja"] .eb-player .eb-live-sync {
338
- background: #FC013B;
339
- color: #fff;
340
- width: auto;
341
- height: auto;
342
- padding: 4px 8px;
343
- font-size: 12px;
344
- font-weight: 700;
345
- letter-spacing: 0.04em;
346
- text-transform: uppercase;
347
- border-radius: 3px;
348
- gap: 0;
349
- transition: background .15s;
350
- }
351
-
352
- [data-theme="forja"] .eb-player .eb-live-sync__icon {
353
- display: none;
354
- }
355
-
356
- [data-theme="forja"] .eb-player .eb-live-sync__dot {
357
- display: none;
358
- }
359
-
360
- [data-theme="forja"] .eb-player .eb-live-sync__label {
361
- display: block;
362
- font-size: 12px;
363
- font-weight: 700;
364
- letter-spacing: 0.5px;
365
- line-height: 1;
366
- }
367
-
368
- [data-theme="forja"] .eb-player .eb-live-sync:not(.eb-live-synced) {
369
- background: rgba(120,120,120,.6);
370
- }
371
-
372
- [data-theme="forja"] .eb-player .eb-live-sync:hover,
373
- [data-theme="forja"] .eb-player .eb-live-sync:active {
374
- background: #c9012f;
375
- }
376
-
377
- [data-theme="forja"] .eb-player .eb-live-sync:not(.eb-live-synced):hover {
378
- background: rgba(150,150,150,.7);
379
- }
380
-
381
- /* ============================================================
382
- Settings panel
383
- ============================================================ */
384
- [data-theme="forja"] .eb-player .eb-settings-panel {
385
- background: rgba(20, 20, 20, .95);
386
- border-radius: 4px;
387
- min-width: 240px;
388
- box-shadow: 0 4px 24px rgba(0,0,0,.7);
389
- }
390
-
391
- [data-theme="forja"] .eb-player .eb-settings-category,
392
- [data-theme="forja"] .eb-player .eb-settings-item,
393
- [data-theme="forja"] .eb-player .eb-settings-back {
394
- padding: 13px 16px;
395
- font-size: 13px;
396
- color: rgba(255,255,255,.85);
397
- border-bottom: 1px solid rgba(255,255,255,.07);
398
- transition: background .12s;
399
- }
400
-
401
- [data-theme="forja"] .eb-player .eb-settings-category:last-child,
402
- [data-theme="forja"] .eb-player .eb-settings-item:last-child {
403
- border-bottom: none;
404
- }
405
-
406
- [data-theme="forja"] .eb-player .eb-settings-category:hover,
407
- [data-theme="forja"] .eb-player .eb-settings-item:hover,
408
- [data-theme="forja"] .eb-player .eb-settings-back:hover {
409
- background: rgba(255,255,255,.06);
410
- }
411
-
412
- [data-theme="forja"] .eb-player .eb-settings-item--selected {
413
- color: #fff;
414
- font-weight: 500;
415
- }
416
-
417
- [data-theme="forja"] .eb-player .eb-settings-item--selected::after {
418
- content: '';
419
- width: 10px;
420
- height: 10px;
421
- border-radius: 50%;
422
- background: #FC013B;
423
- flex-shrink: 0;
424
- }
425
-
426
- [data-theme="forja"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
427
- content: '';
428
- width: 10px;
429
- height: 10px;
430
- border-radius: 50%;
431
- border: 2px solid rgba(255,255,255,.25);
432
- flex-shrink: 0;
433
- }
434
-
435
-
436
- /* ============================================================
437
- Error overlay
438
- ============================================================ */
439
- [data-theme="forja"] .eb-player .eb-error {
440
- background: rgba(0,0,0,.88);
441
- }
442
-
443
- [data-theme="forja"] .eb-player .eb-error-retry {
444
- border-radius: 3px;
445
- background: rgba(255,255,255,.1);
446
- border-color: rgba(255,255,255,.15);
447
- transition: background .2s;
448
- }
449
-
450
- [data-theme="forja"] .eb-player .eb-error-retry:hover {
451
- background: rgba(255,255,255,.18);
452
- }
453
-
454
- /* ============================================================
455
- Toast
456
- ============================================================ */
457
- [data-theme="forja"] .eb-player .eb-toast {
458
- background: rgba(20,20,20,.9);
459
- border-radius: 3px;
460
- font-size: 13px;
461
- padding: 7px 14px;
462
- }
463
-
464
- /**
465
- * L'Equipe theme — v2 layout with L'Equipe red (#d61e00) accent
466
- *
467
- * Applied when the container has [data-theme="lequipe"].
468
- * Dark UI with red accent, Inter font, rounded container,
469
- * backdrop-blur panels, expandable volume, single-row bottom bar,
470
- * gradient overlays, centered frosted-glass transport circles,
471
- * and refined slide/fade animations.
472
- */
473
-
474
- /* ============================================================
475
- Google Fonts (Inter 300-700)
476
- ============================================================ */
477
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
478
-
479
- /* ============================================================
480
- Root vars & container
481
- ============================================================ */
482
- [data-theme="lequipe"] {
483
- --eb-color-primary: #d61e00;
484
- --eb-color-progress: #d61e00;
485
- --eb-accent: #d61e00;
486
- }
487
-
488
- [data-theme="lequipe"] .eb-player {
489
- --eb-color-background: rgba(10, 10, 20, 0.85);
490
- --eb-color-text: #fff;
491
- --eb-font-family: 'Inter', -apple-system, sans-serif;
492
- --eb-font-size-base: 14px;
493
- --eb-radius-control: 8px;
494
- --eb-duration-transition: 200ms;
495
- font-family: 'Inter', -apple-system, sans-serif;
496
- border-radius: 0;
497
- box-shadow: none;
498
- color: #fff;
499
- }
500
-
501
- /* ============================================================
502
- Icons: bolder stroke weight to match filled-style target
503
- ============================================================ */
504
- [data-theme="lequipe"] .eb-player .eb-icon {
505
- stroke-width: 2.5;
506
- }
507
-
508
- /* Fullscreen: fill viewport, drop card styling */
509
- [data-theme="lequipe"] .eb-player:fullscreen,
510
- [data-theme="lequipe"] .eb-player:-webkit-full-screen {
511
- border-radius: 0;
512
- box-shadow: none;
513
- }
514
-
515
- /* ============================================================
516
- Gradients (top & bottom)
517
- ============================================================ */
518
- [data-theme="lequipe"] .eb-player .eb-top-bar {
519
- background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
520
- height: 110px;
521
- padding: 14px 16px;
522
- gap: 6px;
523
- }
524
-
525
- [data-theme="lequipe"] .eb-player .eb-bottom-bar__gradient {
526
- height: 150px;
527
- background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
528
- }
529
-
530
- /* ============================================================
531
- Top bar: slide-in from above
532
- ============================================================ */
533
- [data-theme="lequipe"] .eb-player.eb-controls-visible .eb-top-bar {
534
- opacity: 1;
535
- transform: translateY(0);
536
- transition: opacity .3s, transform .3s;
537
- }
538
-
539
- [data-theme="lequipe"] .eb-player.eb-controls-hidden .eb-top-bar {
540
- opacity: 0;
541
- transform: translateY(-6px);
542
- transition: opacity .3s, transform .3s;
543
- }
544
-
545
- [data-theme="lequipe"] .eb-player .eb-top-bar__actions {
546
- gap: 6px;
547
- }
548
-
549
- /* Logo */
550
- [data-theme="lequipe"] .eb-player .eb-top-bar__logo {
551
- max-height: 32px;
552
- max-width: 120px;
553
- opacity: .85;
554
- }
555
-
556
- /* ============================================================
557
- Bottom bar: slide-up animation + spacing
558
- ============================================================ */
559
- [data-theme="lequipe"] .eb-player .eb-bottom-bar__controls-row {
560
- padding: 0 14px 12px;
561
- gap: 8px;
562
- }
563
-
564
- [data-theme="lequipe"] .eb-player.eb-controls-visible .eb-bottom-bar {
565
- opacity: 1;
566
- transform: translateY(0);
567
- transition: opacity .3s, transform .3s;
568
- }
569
-
570
- [data-theme="lequipe"] .eb-player.eb-controls-hidden .eb-bottom-bar {
571
- opacity: 0;
572
- transform: translateY(8px);
573
- transition: opacity .3s, transform .3s;
574
- }
575
-
576
- /* ============================================================
577
- Middle bar: glassmorphism transport circles
578
- ============================================================ */
579
- [data-theme="lequipe"] .eb-player .eb-middle-bar {
580
- gap: 28px;
581
- }
582
-
583
- [data-theme="lequipe"] .eb-player.eb-controls-visible .eb-middle-bar {
584
- opacity: 1;
585
- transition: opacity .3s;
586
- }
587
-
588
- [data-theme="lequipe"] .eb-player.eb-controls-hidden .eb-middle-bar {
589
- opacity: 0;
590
- transition: opacity .3s;
591
- }
592
-
593
- /* Central play/pause — large frosted circle */
594
- [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn {
595
- width: 80px;
596
- height: 80px;
597
- border-radius: 50%;
598
- display: flex;
599
- align-items: center;
600
- justify-content: center;
601
- background: rgba(255,255,255,.15);
602
- backdrop-filter: blur(8px);
603
- -webkit-backdrop-filter: blur(8px);
604
- border: 2px solid rgba(255,255,255,.25);
605
- color: #fff;
606
- padding: 0;
607
- transition: background .15s, transform .25s, opacity .25s;
608
- }
609
-
610
- [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn:hover {
611
- background: rgba(255,255,255,.25);
612
- }
613
-
614
- [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn:active {
615
- transform: scale(.92);
616
- }
617
-
618
- [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn .eb-icon {
619
- width: 32px;
620
- height: 32px;
621
- stroke-width: 2.5;
622
- }
623
-
624
- /* Seek buttons — smaller frosted circles */
625
- [data-theme="lequipe"] .eb-player .eb-middle-bar__seek-btn {
626
- width: 56px;
627
- height: 56px;
628
- border-radius: 50%;
629
- display: flex;
630
- flex-direction: column;
631
- align-items: center;
632
- justify-content: center;
633
- background: rgba(255,255,255,.15);
634
- backdrop-filter: blur(8px);
635
- -webkit-backdrop-filter: blur(8px);
636
- border: 2px solid rgba(255,255,255,.25);
637
- color: #fff;
638
- gap: 1px;
639
- padding: 0;
640
- transition: background .15s;
641
- }
642
-
643
- [data-theme="lequipe"] .eb-player .eb-middle-bar__seek-btn:hover {
644
- background: rgba(255,255,255,.25);
645
- }
646
-
647
- [data-theme="lequipe"] .eb-player .eb-seek-circle {
648
- width: 24px;
649
- height: 24px;
650
- color: rgba(255,255,255,.85);
651
- fill: currentColor;
652
- stroke: none;
653
- }
654
-
655
- [data-theme="lequipe"] .eb-player .eb-seek-label {
656
- font-size: .75em;
657
- font-weight: 700;
658
- color: rgba(255,255,255,.9);
659
- line-height: 1;
660
- }
661
-
662
- /* ============================================================
663
- Buttons: rounded, soft color, scale on press
664
- ============================================================ */
665
- [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn),
666
- [data-theme="lequipe"] .eb-player .eb-play-pause,
667
- [data-theme="lequipe"] .eb-player .eb-fullscreen,
668
- [data-theme="lequipe"] .eb-player .eb-pip,
669
- [data-theme="lequipe"] .eb-player .eb-cast,
670
- [data-theme="lequipe"] .eb-player .eb-volume-mute,
671
- [data-theme="lequipe"] .eb-player .eb-live-sync {
672
- color: rgba(255,255,255,.82);
673
- border-radius: 8px;
674
- width: 38px;
675
- height: 38px;
676
- transition: background .15s, color .15s, transform .1s;
677
- flex-shrink: 0;
678
- }
679
-
680
- [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):hover,
681
- [data-theme="lequipe"] .eb-player .eb-play-pause:hover,
682
- [data-theme="lequipe"] .eb-player .eb-fullscreen:hover,
683
- [data-theme="lequipe"] .eb-player .eb-pip:hover,
684
- [data-theme="lequipe"] .eb-player .eb-cast:hover,
685
- [data-theme="lequipe"] .eb-player .eb-volume-mute:hover,
686
- [data-theme="lequipe"] .eb-player .eb-live-sync:hover {
687
- background: rgba(255,255,255,.12);
688
- color: #fff;
689
- }
690
-
691
- [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):active,
692
- [data-theme="lequipe"] .eb-player .eb-play-pause:active,
693
- [data-theme="lequipe"] .eb-player .eb-fullscreen:active,
694
- [data-theme="lequipe"] .eb-player .eb-pip:active,
695
- [data-theme="lequipe"] .eb-player .eb-cast:active,
696
- [data-theme="lequipe"] .eb-player .eb-volume-mute:active,
697
- [data-theme="lequipe"] .eb-player .eb-live-sync:active {
698
- transform: scale(.88);
699
- }
700
-
701
- /* Icon size inside buttons (not middle bar transport) */
702
- [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn) .eb-icon,
703
- [data-theme="lequipe"] .eb-player .eb-play-pause .eb-icon,
704
- [data-theme="lequipe"] .eb-player .eb-fullscreen .eb-icon,
705
- [data-theme="lequipe"] .eb-player .eb-pip .eb-icon,
706
- [data-theme="lequipe"] .eb-player .eb-cast .eb-icon,
707
- [data-theme="lequipe"] .eb-player .eb-volume-mute .eb-icon {
708
- width: 22px;
709
- height: 22px;
710
- }
711
-
712
- /* Top bar icons slightly larger */
713
- [data-theme="lequipe"] .eb-player .eb-top-bar .eb-icon {
714
- width: 24px;
715
- height: 24px;
716
- }
717
-
718
- /* Play/pause icons should be filled (solid), not stroke outlines */
719
- [data-theme="lequipe"] .eb-player .eb-play-pause .eb-icon,
720
- [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn .eb-icon {
721
- fill: currentColor;
722
- stroke: none;
723
- }
724
-
725
- /* Volume icon: fill the speaker body, keep stroke for sound waves */
726
- [data-theme="lequipe"] .eb-player .eb-volume-mute .eb-icon path:first-child {
727
- fill: currentColor;
728
- }
729
-
730
- /* Cast button active state */
731
- [data-theme="lequipe"] .eb-player .eb-cast-active {
732
- color: #1eb6d4 !important;
733
- background: rgba(30, 182, 212, .15) !important;
734
- }
735
-
736
- [data-theme="lequipe"] .eb-player .eb-cast-active .eb-icon {
737
- filter: drop-shadow(0 0 4px rgba(30, 182, 212, .6));
738
- }
739
-
740
- /* ============================================================
741
- Seekbar
742
- ============================================================ */
743
- [data-theme="lequipe"] .eb-player .eb-seekbar-track {
744
- height: 3px;
745
- background: rgba(255,255,255,.22);
746
- border-radius: 3px;
747
- transition: height .15s;
748
- }
749
-
750
- [data-theme="lequipe"] .eb-player .eb-seekbar:hover .eb-seekbar-track {
751
- height: 5px;
752
- }
753
-
754
- [data-theme="lequipe"] .eb-player .eb-seekbar-buffered {
755
- background: rgba(255,255,255,.28);
756
- border-radius: 3px;
757
- transition: height .15s;
758
- }
759
-
760
- /* Solid color fill */
761
- [data-theme="lequipe"] .eb-player .eb-seekbar-progress {
762
- background: var(--eb-color-progress, var(--eb-color-primary, #d61e00));
763
- border-radius: 3px;
764
- transition: height .15s;
765
- }
766
-
767
- [data-theme="lequipe"] .eb-player .eb-seekbar-thumb {
768
- width: 14px;
769
- height: 14px;
770
- inset-inline-end: -7px;
771
- background: #fff;
772
- box-shadow: 0 0 0 3px rgba(214,30,0,.45);
773
- }
774
-
775
- /* ============================================================
776
- Seekbar tooltip & preview
777
- ============================================================ */
778
- [data-theme="lequipe"] .eb-player .eb-seekbar-tooltip {
779
- bottom: 28px;
780
- background: rgba(0,0,0,.88);
781
- border: 1px solid rgba(255,255,255,.12);
782
- border-radius: 7px;
783
- font-size: 11px;
784
- font-weight: 500;
785
- padding: 0;
786
- overflow: hidden;
787
- box-shadow: 0 4px 16px rgba(0,0,0,.5);
788
- display: flex;
789
- flex-direction: column;
790
- align-items: center;
791
- }
792
-
793
- [data-theme="lequipe"] .eb-player .eb-seekbar-preview {
794
- width: 160px;
795
- height: 90px;
796
- background: #111;
797
- border: none;
798
- border-radius: 0;
799
- margin: 0;
800
- }
801
-
802
- /* ============================================================
803
- Chapter markers
804
- ============================================================ */
805
- [data-theme="lequipe"] .eb-player .eb-chapter-marker {
806
- width: 2px;
807
- height: 7px;
808
- background: rgba(0,0,0,.45);
809
- border-radius: 1px;
810
- top: 50%;
811
- transform: translate(var(--eb-chapter-marker-x, -50%), -50%);
812
- }
813
-
814
- /* ============================================================
815
- Volume: expandable slider, white fill
816
- ============================================================ */
817
- [data-theme="lequipe"] .eb-player .eb-volume-control {
818
- flex-direction: row;
819
- gap: 0;
820
- margin-inline-end: 0;
821
- }
822
-
823
- [data-theme="lequipe"] .eb-player .eb-volume-track {
824
- width: 0;
825
- height: 3px;
826
- background: rgba(255,255,255,.22);
827
- border-radius: 3px;
828
- overflow: hidden;
829
- transition: width .25s ease, margin .25s ease;
830
- margin: 0;
831
- }
832
-
833
- [data-theme="lequipe"] .eb-player .eb-volume-control:hover .eb-volume-track,
834
- [data-theme="lequipe"] .eb-player .eb-volume-control:focus-within .eb-volume-track {
835
- width: 66px;
836
- margin: 0 6px 0 2px;
837
- }
838
-
839
- [data-theme="lequipe"] .eb-player .eb-volume-fill {
840
- background: var(--eb-color-primary, #d61e00);
841
- }
842
-
843
- [data-theme="lequipe"] .eb-player .eb-volume-thumb {
844
- width: 11px;
845
- height: 11px;
846
- background: #fff;
847
- box-shadow: 0 0 0 2px rgba(255,255,255,.35);
848
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
849
- transition: transform .15s;
850
- }
851
-
852
- [data-theme="lequipe"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
853
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
854
- }
855
-
856
- /* ============================================================
857
- Time display
858
- ============================================================ */
859
- [data-theme="lequipe"] .eb-player .eb-time-display {
860
- font-size: 13px;
861
- color: rgba(255,255,255,.85);
862
- font-weight: 500;
863
- letter-spacing: .02em;
864
- }
865
-
866
- /* ============================================================
867
- Live badge — text badge with blinking dot (not icon)
868
- ============================================================ */
869
- [data-theme="lequipe"] .eb-player .eb-live-sync {
870
- width: auto;
871
- height: auto;
872
- padding: 4px 10px;
873
- border-radius: 6px;
874
- font-size: 11px;
875
- font-weight: 700;
876
- letter-spacing: .08em;
877
- text-transform: uppercase;
878
- gap: 5px;
879
- }
880
-
881
- /* Hide icon, show dot + label */
882
- [data-theme="lequipe"] .eb-player .eb-live-sync__icon {
883
- display: none;
884
- }
885
-
886
- [data-theme="lequipe"] .eb-player .eb-live-sync__dot {
887
- display: block;
888
- width: 6px;
889
- height: 6px;
890
- border-radius: 50%;
891
- background: #fff;
892
- flex-shrink: 0;
893
- }
894
-
895
- [data-theme="lequipe"] .eb-player .eb-live-sync__label {
896
- display: block;
897
- }
898
-
899
- /* Synced state — red background with blinking dot */
900
- [data-theme="lequipe"] .eb-player .eb-live-synced {
901
- background: rgba(214,30,0,.9);
902
- color: #fff;
903
- box-shadow: 0 2px 8px rgba(214,30,0,.4);
904
- }
905
-
906
- [data-theme="lequipe"] .eb-player .eb-live-synced .eb-live-sync__dot {
907
- animation: eb-lequipe-blink 1.2s ease infinite;
908
- }
909
-
910
- /* Delayed / not-at-live-edge */
911
- [data-theme="lequipe"] .eb-player .eb-live-sync:not(.eb-live-synced) {
912
- background: rgba(60,60,80,.75);
913
- color: rgba(255,255,255,.7);
914
- box-shadow: none;
915
- }
916
-
917
- [data-theme="lequipe"] .eb-player .eb-live-sync:not(.eb-live-synced) .eb-live-sync__dot {
918
- background: rgba(255,255,255,.5);
919
- animation: none;
920
- }
921
-
922
- [data-theme="lequipe"] .eb-player .eb-live-sync:not(.eb-live-synced):hover {
923
- background: rgba(214,30,0,.7);
924
- color: #fff;
925
- }
926
-
927
- @keyframes eb-lequipe-blink {
928
- 0%, 100% { opacity: 1; }
929
- 50% { opacity: .15; }
930
- }
931
-
932
- /* ============================================================
933
- Settings panel: glassmorphism dropdown
934
- ============================================================ */
935
- [data-theme="lequipe"] .eb-player .eb-settings-panel {
936
- background: rgba(30,30,45,.6);
937
- backdrop-filter: blur(24px) saturate(160%);
938
- -webkit-backdrop-filter: blur(24px) saturate(160%);
939
- border-radius: 14px;
940
- width: min(340px, 80vw);
941
- max-height: 60vh;
942
- overflow-y: auto;
943
- overflow-x: hidden;
944
- box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
945
- }
946
-
947
- /* Small viewports: compact rows */
948
- @media (max-height: 400px) {
949
- [data-theme="lequipe"] .eb-player .eb-settings-category { padding: 12px 14px; font-size: 13px; gap: 10px; }
950
- [data-theme="lequipe"] .eb-player .eb-settings-item { padding: 11px 14px; font-size: 13px; }
951
- [data-theme="lequipe"] .eb-player .eb-settings-header { padding: 10px 14px; }
952
- [data-theme="lequipe"] .eb-player .eb-settings-panel { min-width: 220px; border-radius: 10px; }
953
- [data-theme="lequipe"] .eb-player .eb-settings-back { width: 30px; height: 30px; }
954
- }
955
-
956
- [data-theme="lequipe"] .eb-player .eb-settings-menu {
957
- padding: 0;
958
- }
959
-
960
- /* Root menu category rows — icon | label | value | chevron */
961
- [data-theme="lequipe"] .eb-player .eb-settings-category {
962
- display: flex;
963
- align-items: center;
964
- gap: 14px;
965
- padding: 18px 20px;
966
- font-size: 14px;
967
- color: rgba(255,255,255,.95);
968
- border-bottom: 1px solid rgba(255,255,255,.06);
969
- transition: background .12s;
970
- width: 100%;
971
- border: none;
972
- background: none;
973
- cursor: pointer;
974
- text-align: start;
975
- }
976
-
977
- [data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
978
- border-bottom: none;
979
- }
980
-
981
- [data-theme="lequipe"] .eb-player .eb-settings-category:hover {
982
- background: rgba(255,255,255,.05);
983
- }
984
-
985
- [data-theme="lequipe"] .eb-player .eb-settings-category__icon {
986
- flex-shrink: 0;
987
- display: flex;
988
- align-items: center;
989
- justify-content: center;
990
- color: rgba(255,255,255,.6);
991
- }
992
-
993
- [data-theme="lequipe"] .eb-player .eb-settings-category__icon .eb-icon {
994
- width: 22px;
995
- height: 22px;
996
- }
997
-
998
- [data-theme="lequipe"] .eb-player .eb-settings-category__label {
999
- flex: 1;
1000
- font-weight: 400;
1001
- }
1002
-
1003
- [data-theme="lequipe"] .eb-player .eb-settings-category__value {
1004
- color: rgba(255,255,255,.45);
1005
- font-size: 13px;
1006
- font-weight: 400;
1007
- }
1008
-
1009
- [data-theme="lequipe"] .eb-player .eb-settings-category__chevron {
1010
- flex-shrink: 0;
1011
- display: flex;
1012
- align-items: center;
1013
- color: rgba(255,255,255,.3);
1014
- }
1015
-
1016
- [data-theme="lequipe"] .eb-player .eb-settings-category__chevron .eb-icon {
1017
- width: 16px;
1018
- height: 16px;
1019
- }
1020
-
1021
- /* Sub-menu header — circular back button + title */
1022
- [data-theme="lequipe"] .eb-player .eb-settings-header {
1023
- display: flex;
1024
- align-items: center;
1025
- gap: 12px;
1026
- padding: 14px 18px;
1027
- border-bottom: 1px solid rgba(255,255,255,.08);
1028
- }
1029
-
1030
- [data-theme="lequipe"] .eb-player .eb-settings-header__title {
1031
- font-size: 15px;
1032
- font-weight: 600;
1033
- color: #fff;
1034
- }
1035
-
1036
- [data-theme="lequipe"] .eb-player .eb-settings-back {
1037
- width: 36px;
1038
- height: 36px;
1039
- border-radius: 50%;
1040
- background: rgba(255,255,255,.12);
1041
- border: none;
1042
- cursor: pointer;
1043
- display: flex;
1044
- align-items: center;
1045
- justify-content: center;
1046
- padding: 0;
1047
- transition: background .15s;
1048
- flex-shrink: 0;
1049
- color: #fff;
1050
- }
1051
-
1052
- [data-theme="lequipe"] .eb-player .eb-settings-back:hover {
1053
- background: rgba(255,255,255,.2);
1054
- }
1055
-
1056
- [data-theme="lequipe"] .eb-player .eb-settings-back .eb-icon {
1057
- width: 18px;
1058
- height: 18px;
1059
- }
1060
-
1061
- /* Sub-menu items */
1062
- [data-theme="lequipe"] .eb-player .eb-settings-item {
1063
- display: flex;
1064
- align-items: center;
1065
- justify-content: space-between;
1066
- padding: 16px 20px;
1067
- font-size: 14px;
1068
- color: rgba(255,255,255,.7);
1069
- border-bottom: 1px solid rgba(255,255,255,.06);
1070
- transition: background .12s;
1071
- width: 100%;
1072
- border-left: none;
1073
- border-right: none;
1074
- border-top: none;
1075
- background: none;
1076
- cursor: pointer;
1077
- text-align: start;
1078
- }
1079
-
1080
- [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {
1081
- border-bottom: none;
1082
- }
1083
-
1084
- [data-theme="lequipe"] .eb-player .eb-settings-item:hover {
1085
- background: rgba(255,255,255,.05);
1086
- }
1087
-
1088
- /* Selected item text — brighter */
1089
- [data-theme="lequipe"] .eb-player .eb-settings-item--selected {
1090
- color: #fff;
1091
- font-weight: 500;
1092
- }
1093
-
1094
- /* Active selection dot (filled accent) */
1095
- [data-theme="lequipe"] .eb-player .eb-settings-item--selected::after {
1096
- content: '';
1097
- width: 12px;
1098
- height: 12px;
1099
- border-radius: 50%;
1100
- background: var(--eb-accent, #d61e00);
1101
- flex-shrink: 0;
1102
- }
1103
-
1104
- /* Non-selected items: hollow dot */
1105
- [data-theme="lequipe"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
1106
- content: '';
1107
- width: 12px;
1108
- height: 12px;
1109
- border-radius: 50%;
1110
- border: 2px solid rgba(255,255,255,.2);
1111
- flex-shrink: 0;
1112
- }
1113
-
1114
-
1115
- /* ============================================================
1116
- Error overlay
1117
- ============================================================ */
1118
- [data-theme="lequipe"] .eb-player .eb-error {
1119
- background: rgba(10,10,20,.85);
1120
- backdrop-filter: blur(12px);
1121
- -webkit-backdrop-filter: blur(12px);
1122
- }
1123
-
1124
- [data-theme="lequipe"] .eb-player .eb-error-message {
1125
- font-weight: 400;
1126
- letter-spacing: .01em;
1127
- }
1128
-
1129
- [data-theme="lequipe"] .eb-player .eb-error-retry {
1130
- border-radius: 8px;
1131
- background: rgba(255,255,255,.1);
1132
- border-color: rgba(255,255,255,.15);
1133
- transition: background .2s, color .2s;
1134
- }
1135
-
1136
- [data-theme="lequipe"] .eb-player .eb-error-retry:hover {
1137
- background: rgba(255,255,255,.18);
1138
- }
1139
-
1140
- /* ============================================================
1141
- Toast (keyboard hints, status messages)
1142
- ============================================================ */
1143
- [data-theme="lequipe"] .eb-player .eb-toast {
1144
- background: rgba(0,0,0,.72);
1145
- backdrop-filter: blur(10px);
1146
- -webkit-backdrop-filter: blur(10px);
1147
- border-radius: 10px;
1148
- font-size: 13px;
1149
- padding: 8px 16px;
1150
- }
1151
-
1152
- /* ============================================================
1153
- Info & socials overlays
1154
- ============================================================ */
1155
- [data-theme="lequipe"] .eb-player .eb-info-overlay,
1156
- [data-theme="lequipe"] .eb-player .eb-socials-overlay {
1157
- background: rgba(10,10,20,.85);
1158
- backdrop-filter: blur(12px);
1159
- -webkit-backdrop-filter: blur(12px);
1160
- }
1161
-
1162
- [data-theme="lequipe"] .eb-player .eb-info-close,
1163
- [data-theme="lequipe"] .eb-player .eb-socials-close {
1164
- border-radius: 8px;
1165
- background: rgba(255,255,255,.07);
1166
- border-color: rgba(255,255,255,.08);
1167
- transition: background .2s, color .2s;
1168
- }
1169
-
1170
- [data-theme="lequipe"] .eb-player .eb-info-close:hover,
1171
- [data-theme="lequipe"] .eb-player .eb-socials-close:hover {
1172
- background: rgba(255,255,255,.13);
1173
- color: #fff;
1174
- }
1175
-
1176
- [data-theme="lequipe"] .eb-player .eb-socials-link {
1177
- background: rgba(255,255,255,.07);
1178
- border: 1px solid rgba(255,255,255,.08);
1179
- border-radius: 8px;
1180
- transition: background .2s, color .2s, border-color .2s;
1181
- }
1182
-
1183
- [data-theme="lequipe"] .eb-player .eb-socials-link:hover {
1184
- background: rgba(214,30,0,.15);
1185
- border-color: rgba(214,30,0,.35);
1186
- color: #ff8a75;
1187
- }
1188
-
1189
- /* ============================================================
1190
- Poster
1191
- ============================================================ */
1192
- [data-theme="lequipe"] .eb-player .eb-poster {
1193
- background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
1194
- }
1195
-
1196
- /* ============================================================
1197
- Radio overlay
1198
- ============================================================ */
1199
- [data-theme="lequipe"] .eb-player .eb-radio-overlay {
1200
- background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
1201
- }
1202
-
1203
- [data-theme="lequipe"] .eb-player .eb-radio-bar {
1204
- background: rgba(214,30,0,.8);
1205
- }
1206
-
1207
- /* ============================================================
1208
- Chapter skip button
1209
- ============================================================ */
1210
- [data-theme="lequipe"] .eb-player .eb-chapter-skip {
1211
- background: rgba(10,10,20,.55);
1212
- backdrop-filter: blur(12px);
1213
- -webkit-backdrop-filter: blur(12px);
1214
- border: 1px solid rgba(255,255,255,.15);
1215
- border-radius: 8px;
1216
- font-size: 12px;
1217
- font-weight: 500;
1218
- transition: background .15s;
1219
- }
1220
-
1221
- [data-theme="lequipe"] .eb-player .eb-chapter-skip:hover {
1222
- background: rgba(255,255,255,.12);
1223
- }
1224
-
1225
- /**
1226
- * Modern theme overrides
1227
- *
1228
- * Applied when the container has [data-theme="modern"].
1229
- * Glassmorphism-inspired design with purple accent, Inter font,
1230
- * rounded corners, backdrop blur, and smooth transitions.
1231
- *
1232
- * Reference: player-reference.html
1233
- */
1234
-
1235
- /* ============================================================
1236
- Google Fonts (Inter 300-600)
1237
- ============================================================ */
1238
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
1239
-
1240
- /* ============================================================
1241
- Icons: override stroke-based defaults for filled Material icons
1242
- ============================================================ */
1243
- [data-theme="modern"] .eb-player .eb-icon {
1244
- fill: currentColor;
1245
- stroke: none;
1246
- stroke-width: 0;
1247
- }
1248
-
1249
- /* ============================================================
1250
- Root vars & container
1251
- ============================================================ */
1252
- [data-theme="modern"] {
1253
- --eb-color-primary: #7c3aed;
1254
- --eb-color-progress: #7c3aed;
1255
- --eb-accent: #1a73e8;
1256
- }
1257
-
1258
- [data-theme="modern"] .eb-player {
1259
- --eb-color-background: rgba(10, 10, 20, 0.85);
1260
- --eb-font-family: 'Inter', sans-serif;
1261
- font-family: 'Inter', sans-serif;
1262
- border-radius: 14px;
1263
- box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
1264
- }
1265
-
1266
- /* ============================================================
1267
- Gradients
1268
- ============================================================ */
1269
- [data-theme="modern"] .eb-player .eb-top-bar {
1270
- background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
1271
- height: 110px;
1272
- padding: 14px 16px;
1273
- gap: 6px;
1274
- }
1275
-
1276
- [data-theme="modern"] .eb-player .eb-bottom-bar__gradient {
1277
- height: 150px;
1278
- background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
1279
- }
1280
-
1281
- /* ============================================================
1282
- Top bar: slide-in animation
1283
- ============================================================ */
1284
- [data-theme="modern"] .eb-player.eb-controls-visible .eb-top-bar {
1285
- opacity: 1;
1286
- transform: translateY(0);
1287
- transition: opacity .3s, transform .3s;
1288
- }
1289
-
1290
- [data-theme="modern"] .eb-player.eb-controls-hidden .eb-top-bar {
1291
- opacity: 0;
1292
- transform: translateY(-6px);
1293
- transition: opacity .3s, transform .3s;
1294
- }
1295
-
1296
- [data-theme="modern"] .eb-player .eb-top-bar__actions {
1297
- gap: 6px;
1298
- }
1299
-
1300
- /* ============================================================
1301
- Bottom bar: slide-up animation + spacing
1302
- ============================================================ */
1303
- [data-theme="modern"] .eb-player .eb-bottom-bar__controls-row {
1304
- padding: 0 14px 12px;
1305
- gap: 8px;
1306
- }
1307
-
1308
- [data-theme="modern"] .eb-player.eb-controls-visible .eb-bottom-bar {
1309
- opacity: 1;
1310
- transform: translateY(0);
1311
- transition: opacity .3s, transform .3s;
1312
- }
1313
-
1314
- [data-theme="modern"] .eb-player.eb-controls-hidden .eb-bottom-bar {
1315
- opacity: 0;
1316
- transform: translateY(8px);
1317
- transition: opacity .3s, transform .3s;
1318
- }
1319
-
1320
- /* ============================================================
1321
- Middle bar: glassmorphism circles + wider gap
1322
- ============================================================ */
1323
- [data-theme="modern"] .eb-player .eb-middle-bar {
1324
- gap: 28px;
1325
- }
1326
-
1327
- /* Controls slide with bottom bar */
1328
- [data-theme="modern"] .eb-player.eb-controls-visible .eb-middle-bar {
1329
- opacity: 1;
1330
- transition: opacity .3s;
1331
- }
1332
-
1333
- [data-theme="modern"] .eb-player.eb-controls-hidden .eb-middle-bar {
1334
- opacity: 0;
1335
- transition: opacity .3s;
1336
- }
1337
-
1338
- [data-theme="modern"] .eb-player .eb-middle-bar__play-btn {
1339
- width: 72px;
1340
- height: 72px;
1341
- background: rgba(255,255,255,.18);
1342
- backdrop-filter: blur(6px);
1343
- -webkit-backdrop-filter: blur(6px);
1344
- border: 2px solid rgba(255,255,255,.28);
1345
- transition: background .15s;
1346
- }
1347
-
1348
- [data-theme="modern"] .eb-player .eb-middle-bar__play-btn:hover {
1349
- background: rgba(255,255,255,.28);
1350
- }
1351
-
1352
- [data-theme="modern"] .eb-player .eb-middle-bar__play-btn .eb-icon {
1353
- width: 30px;
1354
- height: 30px;
1355
- }
1356
-
1357
- [data-theme="modern"] .eb-player .eb-middle-bar__seek-btn {
1358
- width: 52px;
1359
- height: 52px;
1360
- border-radius: 50%;
1361
- background: rgba(255,255,255,.14);
1362
- backdrop-filter: blur(6px);
1363
- -webkit-backdrop-filter: blur(6px);
1364
- border: 1.5px solid rgba(255,255,255,.22);
1365
- flex-direction: column;
1366
- align-items: center;
1367
- justify-content: center;
1368
- gap: 1px;
1369
- transition: background .15s;
1370
- padding: 0;
1371
- }
1372
-
1373
- [data-theme="modern"] .eb-player .eb-middle-bar__seek-btn:hover {
1374
- background: rgba(255,255,255,.24);
1375
- }
1376
-
1377
- [data-theme="modern"] .eb-player .eb-seek-circle {
1378
- width: 18px;
1379
- height: 18px;
1380
- /* Reference uses filled skip arrows instead of the stroke circle */
1381
- fill: white;
1382
- stroke: none;
1383
- }
1384
-
1385
- [data-theme="modern"] .eb-player .eb-seek-label {
1386
- font-size: .58em;
1387
- font-weight: 700;
1388
- color: rgba(255,255,255,.9);
1389
- line-height: 1;
1390
- }
1391
-
1392
- /* ============================================================
1393
- Buttons: rounded, softer color, scale on active
1394
- ============================================================ */
1395
- [data-theme="modern"] .eb-player .eb-button,
1396
- [data-theme="modern"] .eb-player .eb-play-pause,
1397
- [data-theme="modern"] .eb-player .eb-fullscreen,
1398
- [data-theme="modern"] .eb-player .eb-pip,
1399
- [data-theme="modern"] .eb-player .eb-cast,
1400
- [data-theme="modern"] .eb-player .eb-volume-mute,
1401
- [data-theme="modern"] .eb-player .eb-live-sync {
1402
- color: rgba(255,255,255,.82);
1403
- border-radius: 8px;
1404
- width: 38px;
1405
- height: 38px;
1406
- transition: background .15s, color .15s, transform .1s;
1407
- flex-shrink: 0;
1408
- }
1409
-
1410
- [data-theme="modern"] .eb-player .eb-button:hover,
1411
- [data-theme="modern"] .eb-player .eb-play-pause:hover,
1412
- [data-theme="modern"] .eb-player .eb-fullscreen:hover,
1413
- [data-theme="modern"] .eb-player .eb-pip:hover,
1414
- [data-theme="modern"] .eb-player .eb-cast:hover,
1415
- [data-theme="modern"] .eb-player .eb-volume-mute:hover,
1416
- [data-theme="modern"] .eb-player .eb-live-sync:hover {
1417
- background: rgba(255,255,255,.12);
1418
- color: #fff;
1419
- }
1420
-
1421
- [data-theme="modern"] .eb-player .eb-button:active,
1422
- [data-theme="modern"] .eb-player .eb-play-pause:active,
1423
- [data-theme="modern"] .eb-player .eb-fullscreen:active,
1424
- [data-theme="modern"] .eb-player .eb-pip:active,
1425
- [data-theme="modern"] .eb-player .eb-cast:active,
1426
- [data-theme="modern"] .eb-player .eb-volume-mute:active,
1427
- [data-theme="modern"] .eb-player .eb-live-sync:active {
1428
- transform: scale(.88);
1429
- }
1430
-
1431
- /* ============================================================
1432
- Seekbar
1433
- ============================================================ */
1434
- [data-theme="modern"] .eb-player .eb-seekbar-track {
1435
- height: 3px;
1436
- background: rgba(255,255,255,.22);
1437
- border-radius: 3px;
1438
- transition: height .15s;
1439
- }
1440
-
1441
- [data-theme="modern"] .eb-player .eb-seekbar:hover .eb-seekbar-track {
1442
- height: 5px;
1443
- }
1444
-
1445
- [data-theme="modern"] .eb-player .eb-seekbar-buffered {
1446
- background: rgba(255,255,255,.28);
1447
- border-radius: 3px;
1448
- transition: height .15s;
1449
- }
1450
-
1451
- [data-theme="modern"] .eb-player .eb-seekbar-progress {
1452
- background: var(--eb-color-progress, var(--eb-color-primary, #7c3aed));
1453
- border-radius: 3px;
1454
- transition: height .15s;
1455
- }
1456
-
1457
- [data-theme="modern"] .eb-player .eb-seekbar-thumb {
1458
- width: 14px;
1459
- height: 14px;
1460
- inset-inline-end: -7px;
1461
- background: #fff;
1462
- box-shadow: 0 0 0 3px rgba(124,58,237,.45);
1463
- }
1464
-
1465
- /* ============================================================
1466
- Seekbar tooltip & preview
1467
- ============================================================ */
1468
- [data-theme="modern"] .eb-player .eb-seekbar-tooltip {
1469
- bottom: 24px;
1470
- background: rgba(0,0,0,.82);
1471
- border-radius: 5px;
1472
- font-size: 11px;
1473
- padding: 3px 7px;
1474
- }
1475
-
1476
- [data-theme="modern"] .eb-player .eb-seekbar-preview {
1477
- width: 128px;
1478
- height: 72px;
1479
- background: #111;
1480
- border: 2px solid rgba(255,255,255,.16);
1481
- border-radius: 6px;
1482
- }
1483
-
1484
- /* ============================================================
1485
- Chapter markers
1486
- ============================================================ */
1487
- [data-theme="modern"] .eb-player .eb-chapter-marker {
1488
- width: 2px;
1489
- height: 7px;
1490
- background: rgba(0,0,0,.45);
1491
- border-radius: 1px;
1492
- top: 50%;
1493
- transform: translate(var(--eb-chapter-marker-x, -50%), -50%);
1494
- }
1495
-
1496
- /* ============================================================
1497
- Volume: expandable slider, white fill
1498
- ============================================================ */
1499
- [data-theme="modern"] .eb-player .eb-volume-control {
1500
- flex-direction: row;
1501
- gap: 0;
1502
- margin-inline-end: 0;
1503
- }
1504
-
1505
- [data-theme="modern"] .eb-player .eb-volume-track {
1506
- width: 0;
1507
- height: 3px;
1508
- background: rgba(255,255,255,.22);
1509
- border-radius: 3px;
1510
- overflow: hidden;
1511
- transition: width .25s ease, margin .25s ease;
1512
- margin: 0;
1513
- }
1514
-
1515
- [data-theme="modern"] .eb-player .eb-volume-control:hover .eb-volume-track,
1516
- [data-theme="modern"] .eb-player .eb-volume-control:focus-within .eb-volume-track {
1517
- width: 66px;
1518
- margin: 0 6px 0 2px;
1519
- }
1520
-
1521
- [data-theme="modern"] .eb-player .eb-volume-fill {
1522
- background: var(--eb-color-primary, #7c3aed);
1523
- }
1524
-
1525
- [data-theme="modern"] .eb-player .eb-volume-thumb {
1526
- width: 11px;
1527
- height: 11px;
1528
- background: #fff;
1529
- box-shadow: 0 0 0 2px rgba(255,255,255,.35);
1530
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
1531
- transition: transform .15s;
1532
- }
1533
-
1534
- [data-theme="modern"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
1535
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
1536
- }
1537
-
1538
- /* ============================================================
1539
- Time display
1540
- ============================================================ */
1541
- [data-theme="modern"] .eb-player .eb-time-display {
1542
- font-size: 12px;
1543
- color: rgba(255,255,255,.6);
1544
- letter-spacing: .02em;
1545
- }
1546
-
1547
- /* ============================================================
1548
- Live badge
1549
- ============================================================ */
1550
- [data-theme="modern"] .eb-player .eb-live-sync {
1551
- width: auto;
1552
- height: auto;
1553
- padding: 4px 10px;
1554
- border-radius: 6px;
1555
- font-size: 11px;
1556
- font-weight: 700;
1557
- letter-spacing: .08em;
1558
- text-transform: uppercase;
1559
- }
1560
-
1561
- [data-theme="modern"] .eb-player .eb-live-synced {
1562
- background: rgba(220,38,38,.9);
1563
- color: #fff;
1564
- box-shadow: 0 2px 8px rgba(220,38,38,.4);
1565
- }
1566
-
1567
- /* ============================================================
1568
- Settings panel: glassmorphism + refined layout
1569
- ============================================================ */
1570
- [data-theme="modern"] .eb-player .eb-settings-panel {
1571
- background: rgba(10,10,20,.55);
1572
- backdrop-filter: blur(18px) saturate(160%);
1573
- -webkit-backdrop-filter: blur(18px) saturate(160%);
1574
- border-radius: 12px;
1575
- min-width: 280px;
1576
- box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
1577
- }
1578
-
1579
- [data-theme="modern"] .eb-player .eb-settings-menu {
1580
- padding: 0;
1581
- }
1582
-
1583
- [data-theme="modern"] .eb-player .eb-settings-category,
1584
- [data-theme="modern"] .eb-player .eb-settings-item,
1585
- [data-theme="modern"] .eb-player .eb-settings-back {
1586
- padding: 15px 20px;
1587
- font-size: 13px;
1588
- color: rgba(255,255,255,.9);
1589
- border-bottom: 1px solid rgba(255,255,255,.06);
1590
- transition: background .12s;
1591
- }
1592
-
1593
- [data-theme="modern"] .eb-player .eb-settings-category:last-child,
1594
- [data-theme="modern"] .eb-player .eb-settings-item:last-child {
1595
- border-bottom: none;
1596
- }
1597
-
1598
- [data-theme="modern"] .eb-player .eb-settings-category:hover,
1599
- [data-theme="modern"] .eb-player .eb-settings-item:hover,
1600
- [data-theme="modern"] .eb-player .eb-settings-back:hover {
1601
- background: rgba(255,255,255,.05);
1602
- }
1603
-
1604
- [data-theme="modern"] .eb-player .eb-settings-item--selected {
1605
- color: #fff;
1606
- font-weight: 500;
1607
- }
1608
-
1609
- /* Active selection dot */
1610
- [data-theme="modern"] .eb-player .eb-settings-item--selected::after {
1611
- content: '';
1612
- width: 10px;
1613
- height: 10px;
1614
- border-radius: 50%;
1615
- background: #1a73e8;
1616
- box-shadow: 0 0 0 3px rgba(26,115,232,.25);
1617
- flex-shrink: 0;
1618
- }
1619
-
1620
- /* Non-selected items: hollow dot */
1621
- [data-theme="modern"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
1622
- content: '';
1623
- width: 10px;
1624
- height: 10px;
1625
- border-radius: 50%;
1626
- border: 2px solid rgba(255,255,255,.2);
1627
- flex-shrink: 0;
1628
- }
1629
-
1630
- /* Sub-panel back button */
1631
- [data-theme="modern"] .eb-player .eb-settings-back {
1632
- gap: 14px;
1633
- font-weight: 600;
1634
- }
1635
-
1636
-
1637
- /* ============================================================
1638
- Error overlay
1639
- ============================================================ */
1640
- [data-theme="modern"] .eb-player .eb-error {
1641
- background: rgba(10,10,20,.85);
1642
- backdrop-filter: blur(12px);
1643
- -webkit-backdrop-filter: blur(12px);
1644
- }
1645
-
1646
- [data-theme="modern"] .eb-player .eb-error-retry {
1647
- border-radius: 8px;
1648
- background: rgba(255,255,255,.1);
1649
- border-color: rgba(255,255,255,.15);
1650
- transition: background .2s, color .2s;
1651
- }
1652
-
1653
- [data-theme="modern"] .eb-player .eb-error-retry:hover {
1654
- background: rgba(255,255,255,.18);
1655
- }
1656
-
1657
- /* ============================================================
1658
- Toast
1659
- ============================================================ */
1660
- [data-theme="modern"] .eb-player .eb-toast {
1661
- background: rgba(0,0,0,.72);
1662
- backdrop-filter: blur(10px);
1663
- -webkit-backdrop-filter: blur(10px);
1664
- border-radius: 10px;
1665
- font-size: 13px;
1666
- }
1667
-
1668
- /* ============================================================
1669
- Info & socials overlays
1670
- ============================================================ */
1671
- [data-theme="modern"] .eb-player .eb-info-overlay,
1672
- [data-theme="modern"] .eb-player .eb-socials-overlay {
1673
- background: rgba(10,10,20,.85);
1674
- backdrop-filter: blur(12px);
1675
- -webkit-backdrop-filter: blur(12px);
1676
- }
1677
-
1678
- [data-theme="modern"] .eb-player .eb-info-close,
1679
- [data-theme="modern"] .eb-player .eb-socials-close {
1680
- border-radius: 8px;
1681
- background: rgba(255,255,255,.07);
1682
- border-color: rgba(255,255,255,.08);
1683
- transition: background .2s, color .2s;
1684
- }
1685
-
1686
- [data-theme="modern"] .eb-player .eb-info-close:hover,
1687
- [data-theme="modern"] .eb-player .eb-socials-close:hover {
1688
- background: rgba(255,255,255,.13);
1689
- color: #fff;
1690
- }
1691
-
1692
- [data-theme="modern"] .eb-player .eb-socials-link {
1693
- background: rgba(255,255,255,.07);
1694
- border: 1px solid rgba(255,255,255,.08);
1695
- border-radius: 8px;
1696
- transition: background .2s, color .2s;
1697
- }
1698
-
1699
- [data-theme="modern"] .eb-player .eb-socials-link:hover {
1700
- background: rgba(167,139,250,.15);
1701
- border-color: rgba(167,139,250,.35);
1702
- color: #c4b5fd;
1703
- }
1704
-
1705
- /* ============================================================
1706
- Bottom bar: two-row layout (seekbar above, buttons below)
1707
- ============================================================ */
1708
- [data-theme="modern"] .eb-player .eb-bottom-bar__controls-row {
1709
- flex-wrap: wrap;
1710
- }
1711
-
1712
- /* Seekbar fills full width as its own row */
1713
- [data-theme="modern"] .eb-player .eb-bottom-bar__seekbar-zone {
1714
- flex: none;
1715
- width: 100%;
1716
- order: -1;
1717
- margin-bottom: -6px;
1718
- }
1719
-
1720
- /* Time display sits before seekbar visually (after live badge) */
1721
- [data-theme="modern"] .eb-player .eb-slot-time {
1722
- order: -1;
1723
- margin-inline-start: auto;
1724
- }
1725
-
1726
- /* Live sync badge before time */
1727
- [data-theme="modern"] .eb-player .eb-slot-live-sync {
1728
- order: -2;
1729
- }
1730
-
1731
- /* Move settings + pip to right end of control row */
1732
- [data-theme="modern"] .eb-player .eb-slot-settings {
1733
- margin-inline-start: auto;
1734
- }
1735
-
1736
- /* ============================================================
1737
- Poster
1738
- ============================================================ */
1739
- [data-theme="modern"] .eb-player .eb-poster {
1740
- background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
1741
- }
1742
-
1743
- /**
1744
- * Radio theme overrides
1745
- *
1746
- * Applied when the container has [data-theme="radio"].
1747
- * Uses higher specificity than base.css .eb-player selector.
1748
- */
1749
-
1750
- [data-theme="radio"] {
1751
- --eb-color-primary: #F4A261;
1752
- }
1753
-
1754
- [data-theme="radio"] .eb-player {
1755
- --eb-color-background: rgba(20, 20, 30, 0.95);
1756
- }
1757
-
1758
- /**
1759
- * SNRT theme overrides
1760
- *
1761
- * Applied when the container has [data-theme="snrt"].
1762
- * Uses higher specificity than base.css .eb-player selector.
1763
- */
1764
-
1765
- [data-theme="snrt"] {
1766
- --eb-color-primary: #006633;
1767
- }
1768
-
1769
- [data-theme="snrt"] .eb-player {
1770
- --eb-color-background: rgba(0, 0, 0, 0.9);
1771
- }
1772
-
1773
- /**
1774
- * V2 theme — based on snrtlive.ma (Aloula) player styling
1775
- *
1776
- * Applied when the container has [data-theme="v2"].
1777
- * Dark UI with indigo accent (#3d4097), Inter font, rounded container,
1778
- * backdrop-blur panels, expandable volume, two-row bottom bar
1779
- * (seekbar on top, buttons below), gradient overlays, centered
1780
- * frosted-glass transport circles, and refined slide/fade animations.
1781
- */
1782
-
1783
- /* ============================================================
1784
- Google Fonts (Inter 300-700)
1785
- ============================================================ */
1786
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
1787
-
1788
- /* ============================================================
1789
- Root vars & container
1790
- ============================================================ */
1791
- [data-theme="v2"] {
1792
- --eb-color-primary: #3d4097;
1793
- --eb-color-progress: #3d4097;
1794
- --eb-accent: #3d4097;
1795
- }
1796
-
1797
- [data-theme="v2"] .eb-player {
1798
- --eb-color-background: rgba(10, 10, 20, 0.85);
1799
- --eb-color-text: #fff;
1800
- --eb-font-family: 'Inter', -apple-system, sans-serif;
1801
- --eb-font-size-base: 14px;
1802
- --eb-radius-control: 8px;
1803
- --eb-duration-transition: 200ms;
1804
- font-family: 'Inter', -apple-system, sans-serif;
1805
- border-radius: 14px;
1806
- box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
1807
- color: #fff;
1808
- }
1809
-
1810
- /* ============================================================
1811
- Icons: bolder stroke weight to match filled-style target
1812
- ============================================================ */
1813
- [data-theme="v2"] .eb-player .eb-icon {
1814
- stroke-width: 2.5;
1815
- }
1816
-
1817
- /* Fullscreen: fill viewport, drop card styling */
1818
- [data-theme="v2"] .eb-player:fullscreen,
1819
- [data-theme="v2"] .eb-player:-webkit-full-screen {
1820
- border-radius: 0;
1821
- box-shadow: none;
1822
- }
1823
-
1824
- /* ============================================================
1825
- Gradients (top & bottom)
1826
- ============================================================ */
1827
- [data-theme="v2"] .eb-player .eb-top-bar {
1828
- background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
1829
- height: 110px;
1830
- padding: 14px 16px;
1831
- gap: 6px;
1832
- }
1833
-
1834
- [data-theme="v2"] .eb-player .eb-bottom-bar__gradient {
1835
- height: 150px;
1836
- background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
1837
- }
1838
-
1839
- /* ============================================================
1840
- Top bar: slide-in from above
1841
- ============================================================ */
1842
- [data-theme="v2"] .eb-player.eb-controls-visible .eb-top-bar {
1843
- opacity: 1;
1844
- transform: translateY(0);
1845
- transition: opacity .3s, transform .3s;
1846
- }
1847
-
1848
- [data-theme="v2"] .eb-player.eb-controls-hidden .eb-top-bar {
1849
- opacity: 0;
1850
- transform: translateY(-6px);
1851
- transition: opacity .3s, transform .3s;
1852
- }
1853
-
1854
- [data-theme="v2"] .eb-player .eb-top-bar__actions {
1855
- gap: 6px;
1856
- }
1857
-
1858
- /* Logo */
1859
- [data-theme="v2"] .eb-player .eb-top-bar__logo {
1860
- max-height: 32px;
1861
- max-width: 120px;
1862
- opacity: .85;
1863
- }
1864
-
1865
- /* ============================================================
1866
- Bottom bar: slide-up animation + spacing
1867
- ============================================================ */
1868
- [data-theme="v2"] .eb-player .eb-bottom-bar__controls-row {
1869
- padding: 0 14px 12px;
1870
- gap: 8px;
1871
- }
1872
-
1873
- [data-theme="v2"] .eb-player.eb-controls-visible .eb-bottom-bar {
1874
- opacity: 1;
1875
- transform: translateY(0);
1876
- transition: opacity .3s, transform .3s;
1877
- }
1878
-
1879
- [data-theme="v2"] .eb-player.eb-controls-hidden .eb-bottom-bar {
1880
- opacity: 0;
1881
- transform: translateY(8px);
1882
- transition: opacity .3s, transform .3s;
1883
- }
1884
-
1885
- /* ============================================================
1886
- Bottom bar: two-row layout
1887
- Row 1: LIVE + time
1888
- Row 2: play-pause | ——seekbar—— | volume | fullscreen
1889
- PiP / Cast are in the top bar (via THEME_LAYOUTS.v2 in config.ts)
1890
- ============================================================ */
1891
-
1892
- [data-theme="v2"] .eb-player .eb-bottom-bar__controls-row {
1893
- flex-wrap: wrap;
1894
- align-items: center;
1895
- row-gap: 2px;
1896
- }
1897
-
1898
- /* Row 1: live-sync and time float above, offset to align with seekbar start */
1899
- [data-theme="v2"] .eb-player .eb-slot-live-sync,
1900
- [data-theme="v2"] .eb-player .eb-slot-time {
1901
- order: -1;
1902
- }
1903
-
1904
- /* Align row 1 with the seekbar: offset by play-pause width (38px) + gap (8px) */
1905
- [data-theme="v2"] .eb-player .eb-slot-live-sync {
1906
- margin-inline-start: calc(38px + 8px);
1907
- }
1908
-
1909
- /* Invisible full-width flex break between row 1 and row 2 */
1910
- [data-theme="v2"] .eb-player .eb-bottom-bar__controls-row::after {
1911
- content: '';
1912
- width: 100%;
1913
- height: 0;
1914
- order: 0;
1915
- flex-shrink: 0;
1916
- }
1917
-
1918
- /* Row 2: play-pause, seekbar, volume, fullscreen */
1919
- [data-theme="v2"] .eb-player .eb-slot-play-pause,
1920
- [data-theme="v2"] .eb-player .eb-bottom-bar__seekbar-zone,
1921
- [data-theme="v2"] .eb-player .eb-slot-volume,
1922
- [data-theme="v2"] .eb-player .eb-slot-fullscreen {
1923
- order: 1;
1924
- }
1925
-
1926
- /* ============================================================
1927
- Middle bar: glassmorphism transport circles
1928
- ============================================================ */
1929
- [data-theme="v2"] .eb-player .eb-middle-bar {
1930
- gap: 28px;
1931
- }
1932
-
1933
- [data-theme="v2"] .eb-player.eb-controls-visible .eb-middle-bar {
1934
- opacity: 1;
1935
- transition: opacity .3s;
1936
- }
1937
-
1938
- [data-theme="v2"] .eb-player.eb-controls-hidden .eb-middle-bar {
1939
- opacity: 0;
1940
- transition: opacity .3s;
1941
- }
1942
-
1943
- /* Central play/pause — large frosted circle */
1944
- [data-theme="v2"] .eb-player .eb-middle-bar__play-btn {
1945
- width: 80px;
1946
- height: 80px;
1947
- border-radius: 50%;
1948
- display: flex;
1949
- align-items: center;
1950
- justify-content: center;
1951
- background: rgba(255,255,255,.15);
1952
- backdrop-filter: blur(8px);
1953
- -webkit-backdrop-filter: blur(8px);
1954
- border: 2px solid rgba(255,255,255,.25);
1955
- color: #fff;
1956
- padding: 0;
1957
- transition: background .15s, transform .25s, opacity .25s;
1958
- }
1959
-
1960
- [data-theme="v2"] .eb-player .eb-middle-bar__play-btn:hover {
1961
- background: rgba(255,255,255,.25);
1962
- }
1963
-
1964
- [data-theme="v2"] .eb-player .eb-middle-bar__play-btn:active {
1965
- transform: scale(.92);
1966
- }
1967
-
1968
- [data-theme="v2"] .eb-player .eb-middle-bar__play-btn .eb-icon {
1969
- width: 32px;
1970
- height: 32px;
1971
- stroke-width: 2.5;
1972
- }
1973
-
1974
- /* Seek buttons — smaller frosted circles, same style as play button */
1975
- [data-theme="v2"] .eb-player .eb-middle-bar__seek-btn {
1976
- width: 56px;
1977
- height: 56px;
1978
- border-radius: 50%;
1979
- display: flex;
1980
- flex-direction: column;
1981
- align-items: center;
1982
- justify-content: center;
1983
- background: rgba(255,255,255,.15);
1984
- backdrop-filter: blur(8px);
1985
- -webkit-backdrop-filter: blur(8px);
1986
- border: 2px solid rgba(255,255,255,.25);
1987
- color: #fff;
1988
- gap: 1px;
1989
- padding: 0;
1990
- transition: background .15s;
1991
- }
1992
-
1993
- [data-theme="v2"] .eb-player .eb-middle-bar__seek-btn:hover {
1994
- background: rgba(255,255,255,.25);
1995
- }
1996
-
1997
- [data-theme="v2"] .eb-player .eb-seek-circle {
1998
- width: 24px;
1999
- height: 24px;
2000
- color: rgba(255,255,255,.85);
2001
- fill: currentColor;
2002
- stroke: none;
2003
- }
2004
-
2005
- [data-theme="v2"] .eb-player .eb-seek-label {
2006
- font-size: .75em;
2007
- font-weight: 700;
2008
- color: rgba(255,255,255,.9);
2009
- line-height: 1;
2010
- }
2011
-
2012
- /* ============================================================
2013
- Buttons: rounded, soft color, scale on press
2014
- ============================================================ */
2015
- [data-theme="v2"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn),
2016
- [data-theme="v2"] .eb-player .eb-play-pause,
2017
- [data-theme="v2"] .eb-player .eb-fullscreen,
2018
- [data-theme="v2"] .eb-player .eb-pip,
2019
- [data-theme="v2"] .eb-player .eb-cast,
2020
- [data-theme="v2"] .eb-player .eb-volume-mute,
2021
- [data-theme="v2"] .eb-player .eb-live-sync {
2022
- color: rgba(255,255,255,.82);
2023
- border-radius: 8px;
2024
- width: 38px;
2025
- height: 38px;
2026
- transition: background .15s, color .15s, transform .1s;
2027
- flex-shrink: 0;
2028
- }
2029
-
2030
- [data-theme="v2"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):hover,
2031
- [data-theme="v2"] .eb-player .eb-play-pause:hover,
2032
- [data-theme="v2"] .eb-player .eb-fullscreen:hover,
2033
- [data-theme="v2"] .eb-player .eb-pip:hover,
2034
- [data-theme="v2"] .eb-player .eb-cast:hover,
2035
- [data-theme="v2"] .eb-player .eb-volume-mute:hover,
2036
- [data-theme="v2"] .eb-player .eb-live-sync:hover {
2037
- background: rgba(255,255,255,.12);
2038
- color: #fff;
2039
- }
2040
-
2041
- [data-theme="v2"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):active,
2042
- [data-theme="v2"] .eb-player .eb-play-pause:active,
2043
- [data-theme="v2"] .eb-player .eb-fullscreen:active,
2044
- [data-theme="v2"] .eb-player .eb-pip:active,
2045
- [data-theme="v2"] .eb-player .eb-cast:active,
2046
- [data-theme="v2"] .eb-player .eb-volume-mute:active,
2047
- [data-theme="v2"] .eb-player .eb-live-sync:active {
2048
- transform: scale(.88);
2049
- }
2050
-
2051
- /* Icon size inside buttons (not middle bar transport) */
2052
- [data-theme="v2"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn) .eb-icon,
2053
- [data-theme="v2"] .eb-player .eb-play-pause .eb-icon,
2054
- [data-theme="v2"] .eb-player .eb-fullscreen .eb-icon,
2055
- [data-theme="v2"] .eb-player .eb-pip .eb-icon,
2056
- [data-theme="v2"] .eb-player .eb-cast .eb-icon,
2057
- [data-theme="v2"] .eb-player .eb-volume-mute .eb-icon {
2058
- width: 22px;
2059
- height: 22px;
2060
- }
2061
-
2062
- /* Top bar icons slightly larger */
2063
- [data-theme="v2"] .eb-player .eb-top-bar .eb-icon {
2064
- width: 24px;
2065
- height: 24px;
2066
- }
2067
-
2068
- /* Play/pause icons should be filled (solid), not stroke outlines */
2069
- [data-theme="v2"] .eb-player .eb-play-pause .eb-icon,
2070
- [data-theme="v2"] .eb-player .eb-middle-bar__play-btn .eb-icon {
2071
- fill: currentColor;
2072
- stroke: none;
2073
- }
2074
-
2075
- /* Volume icon: fill the speaker body, keep stroke for sound waves */
2076
- [data-theme="v2"] .eb-player .eb-volume-mute .eb-icon path:first-child {
2077
- fill: currentColor;
2078
- }
2079
-
2080
- /* Cast button active state — cyan */
2081
- [data-theme="v2"] .eb-player .eb-cast-active {
2082
- color: #1eb6d4 !important;
2083
- background: rgba(30, 182, 212, .15) !important;
2084
- }
2085
-
2086
- [data-theme="v2"] .eb-player .eb-cast-active .eb-icon {
2087
- filter: drop-shadow(0 0 4px rgba(30, 182, 212, .6));
2088
- }
2089
-
2090
- /* ============================================================
2091
- Seekbar
2092
- ============================================================ */
2093
- [data-theme="v2"] .eb-player .eb-seekbar-track {
2094
- height: 3px;
2095
- background: rgba(255,255,255,.22);
2096
- border-radius: 3px;
2097
- transition: height .15s;
2098
- }
2099
-
2100
- [data-theme="v2"] .eb-player .eb-seekbar:hover .eb-seekbar-track {
2101
- height: 5px;
2102
- }
2103
-
2104
- [data-theme="v2"] .eb-player .eb-seekbar-buffered {
2105
- background: rgba(255,255,255,.28);
2106
- border-radius: 3px;
2107
- transition: height .15s;
2108
- }
2109
-
2110
- /* Gradient fill — brightens toward the right */
2111
- [data-theme="v2"] .eb-player .eb-seekbar-progress {
2112
- background: linear-gradient(90deg, var(--eb-color-progress, var(--eb-color-primary, #3d4097)), color-mix(in srgb, var(--eb-color-progress, var(--eb-color-primary, #3d4097)) 70%, #fff));
2113
- border-radius: 3px;
2114
- transition: height .15s;
2115
- }
2116
-
2117
- [data-theme="v2"] .eb-player .eb-seekbar-thumb {
2118
- width: 14px;
2119
- height: 14px;
2120
- inset-inline-end: -7px;
2121
- background: #fff;
2122
- box-shadow: 0 0 0 3px rgba(61,64,151,.45);
2123
- }
2124
-
2125
- /* ============================================================
2126
- Seekbar tooltip & preview
2127
- ============================================================ */
2128
- [data-theme="v2"] .eb-player .eb-seekbar-tooltip {
2129
- bottom: 28px;
2130
- background: rgba(0,0,0,.88);
2131
- border: 1px solid rgba(255,255,255,.12);
2132
- border-radius: 7px;
2133
- font-size: 11px;
2134
- font-weight: 500;
2135
- padding: 0;
2136
- overflow: hidden;
2137
- box-shadow: 0 4px 16px rgba(0,0,0,.5);
2138
- display: flex;
2139
- flex-direction: column;
2140
- align-items: center;
2141
- }
2142
-
2143
- [data-theme="v2"] .eb-player .eb-seekbar-preview {
2144
- width: 160px;
2145
- height: 90px;
2146
- background: #111;
2147
- border: none;
2148
- border-radius: 0;
2149
- margin: 0;
2150
- }
2151
-
2152
- /* ============================================================
2153
- Chapter markers
2154
- ============================================================ */
2155
- [data-theme="v2"] .eb-player .eb-chapter-marker {
2156
- width: 2px;
2157
- height: 7px;
2158
- background: rgba(0,0,0,.45);
2159
- border-radius: 1px;
2160
- top: 50%;
2161
- transform: translate(var(--eb-chapter-marker-x, -50%), -50%);
2162
- }
2163
-
2164
- /* ============================================================
2165
- Volume: expandable slider, white fill
2166
- ============================================================ */
2167
- [data-theme="v2"] .eb-player .eb-volume-control {
2168
- flex-direction: row;
2169
- gap: 0;
2170
- margin-inline-end: 0;
2171
- }
2172
-
2173
- [data-theme="v2"] .eb-player .eb-volume-track {
2174
- width: 0;
2175
- height: 3px;
2176
- background: rgba(255,255,255,.22);
2177
- border-radius: 3px;
2178
- overflow: hidden;
2179
- transition: width .25s ease, margin .25s ease;
2180
- margin: 0;
2181
- }
2182
-
2183
- [data-theme="v2"] .eb-player .eb-volume-control:hover .eb-volume-track,
2184
- [data-theme="v2"] .eb-player .eb-volume-control:focus-within .eb-volume-track {
2185
- width: 66px;
2186
- margin: 0 6px 0 2px;
2187
- }
2188
-
2189
- [data-theme="v2"] .eb-player .eb-volume-fill {
2190
- background: var(--eb-color-primary, #3d4097);
2191
- }
2192
-
2193
- [data-theme="v2"] .eb-player .eb-volume-thumb {
2194
- width: 11px;
2195
- height: 11px;
2196
- background: #fff;
2197
- box-shadow: 0 0 0 2px rgba(255,255,255,.35);
2198
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(0);
2199
- transition: transform .15s;
2200
- }
2201
-
2202
- [data-theme="v2"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
2203
- transform: translate(var(--eb-volume-thumb-x, -50%), -50%) scale(1);
2204
- }
2205
-
2206
- /* ============================================================
2207
- Time display
2208
- ============================================================ */
2209
- [data-theme="v2"] .eb-player .eb-time-display {
2210
- font-size: 13px;
2211
- color: rgba(255,255,255,.85);
2212
- font-weight: 500;
2213
- letter-spacing: .02em;
2214
- }
2215
-
2216
- /* ============================================================
2217
- Live badge — text badge with blinking dot (not icon)
2218
- ============================================================ */
2219
- [data-theme="v2"] .eb-player .eb-live-sync {
2220
- width: auto;
2221
- height: auto;
2222
- padding: 4px 10px;
2223
- border-radius: 6px;
2224
- font-size: 11px;
2225
- font-weight: 700;
2226
- letter-spacing: .08em;
2227
- text-transform: uppercase;
2228
- gap: 5px;
2229
- }
2230
-
2231
- /* Hide icon, show dot + label */
2232
- [data-theme="v2"] .eb-player .eb-live-sync__icon {
2233
- display: none;
2234
- }
2235
-
2236
- [data-theme="v2"] .eb-player .eb-live-sync__dot {
2237
- display: block;
2238
- width: 6px;
2239
- height: 6px;
2240
- border-radius: 50%;
2241
- background: #fff;
2242
- flex-shrink: 0;
2243
- }
2244
-
2245
- [data-theme="v2"] .eb-player .eb-live-sync__label {
2246
- display: block;
2247
- }
2248
-
2249
- /* Synced state — red background with blinking dot */
2250
- [data-theme="v2"] .eb-player .eb-live-synced {
2251
- background: rgba(220,38,38,.9);
2252
- color: #fff;
2253
- box-shadow: 0 2px 8px rgba(220,38,38,.4);
2254
- }
2255
-
2256
- [data-theme="v2"] .eb-player .eb-live-synced .eb-live-sync__dot {
2257
- animation: eb-v2-blink 1.2s ease infinite;
2258
- }
2259
-
2260
- /* Delayed / not-at-live-edge */
2261
- [data-theme="v2"] .eb-player .eb-live-sync:not(.eb-live-synced) {
2262
- background: rgba(60,60,80,.75);
2263
- color: rgba(255,255,255,.7);
2264
- box-shadow: none;
2265
- }
2266
-
2267
- [data-theme="v2"] .eb-player .eb-live-sync:not(.eb-live-synced) .eb-live-sync__dot {
2268
- background: rgba(255,255,255,.5);
2269
- animation: none;
2270
- }
2271
-
2272
- [data-theme="v2"] .eb-player .eb-live-sync:not(.eb-live-synced):hover {
2273
- background: rgba(220,38,38,.7);
2274
- color: #fff;
2275
- }
2276
-
2277
- @keyframes eb-v2-blink {
2278
- 0%, 100% { opacity: 1; }
2279
- 50% { opacity: .15; }
2280
- }
2281
-
2282
- /* ============================================================
2283
- Settings panel: glassmorphism dropdown
2284
- ============================================================ */
2285
- [data-theme="v2"] .eb-player .eb-settings-panel {
2286
- background: rgba(10,10,20,.55);
2287
- backdrop-filter: blur(18px) saturate(160%);
2288
- -webkit-backdrop-filter: blur(18px) saturate(160%);
2289
- border-radius: 12px;
2290
- min-width: 300px;
2291
- box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
2292
- }
2293
-
2294
- [data-theme="v2"] .eb-player .eb-settings-menu {
2295
- padding: 0;
2296
- }
2297
-
2298
- [data-theme="v2"] .eb-player .eb-settings-category,
2299
- [data-theme="v2"] .eb-player .eb-settings-item,
2300
- [data-theme="v2"] .eb-player .eb-settings-back {
2301
- padding: 15px 20px;
2302
- font-size: 13px;
2303
- color: rgba(255,255,255,.9);
2304
- border-bottom: 1px solid rgba(255,255,255,.06);
2305
- transition: background .12s;
2306
- }
2307
-
2308
- [data-theme="v2"] .eb-player .eb-settings-category:last-child,
2309
- [data-theme="v2"] .eb-player .eb-settings-item:last-child {
2310
- border-bottom: none;
2311
- }
2312
-
2313
- [data-theme="v2"] .eb-player .eb-settings-category:hover,
2314
- [data-theme="v2"] .eb-player .eb-settings-item:hover,
2315
- [data-theme="v2"] .eb-player .eb-settings-back:hover {
2316
- background: rgba(255,255,255,.05);
2317
- }
2318
-
2319
- /* Selected item text */
2320
- [data-theme="v2"] .eb-player .eb-settings-item--selected {
2321
- color: #fff;
2322
- font-weight: 500;
2323
- }
2324
-
2325
- /* Active selection dot (filled orange) */
2326
- [data-theme="v2"] .eb-player .eb-settings-item--selected::after {
2327
- content: '';
2328
- width: 10px;
2329
- height: 10px;
2330
- border-radius: 50%;
2331
- background: var(--eb-accent, #3d4097);
2332
- box-shadow: 0 0 0 3px rgba(61,64,151,.25);
2333
- flex-shrink: 0;
2334
- }
2335
-
2336
- /* Non-selected items: hollow dot */
2337
- [data-theme="v2"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
2338
- content: '';
2339
- width: 10px;
2340
- height: 10px;
2341
- border-radius: 50%;
2342
- border: 2px solid rgba(255,255,255,.2);
2343
- flex-shrink: 0;
2344
- }
2345
-
2346
- /* Back button */
2347
- [data-theme="v2"] .eb-player .eb-settings-back {
2348
- gap: 14px;
2349
- font-weight: 600;
2350
- }
2351
-
2352
-
2353
- /* ============================================================
2354
- Error overlay
2355
- ============================================================ */
2356
- [data-theme="v2"] .eb-player .eb-error {
2357
- background: rgba(10,10,20,.85);
2358
- backdrop-filter: blur(12px);
2359
- -webkit-backdrop-filter: blur(12px);
2360
- }
2361
-
2362
- [data-theme="v2"] .eb-player .eb-error-message {
2363
- font-weight: 400;
2364
- letter-spacing: .01em;
2365
- }
2366
-
2367
- [data-theme="v2"] .eb-player .eb-error-retry {
2368
- border-radius: 8px;
2369
- background: rgba(255,255,255,.1);
2370
- border-color: rgba(255,255,255,.15);
2371
- transition: background .2s, color .2s;
2372
- }
2373
-
2374
- [data-theme="v2"] .eb-player .eb-error-retry:hover {
2375
- background: rgba(255,255,255,.18);
2376
- }
2377
-
2378
- /* ============================================================
2379
- Toast (keyboard hints, status messages)
2380
- ============================================================ */
2381
- [data-theme="v2"] .eb-player .eb-toast {
2382
- background: rgba(0,0,0,.72);
2383
- backdrop-filter: blur(10px);
2384
- -webkit-backdrop-filter: blur(10px);
2385
- border-radius: 10px;
2386
- font-size: 13px;
2387
- padding: 8px 16px;
2388
- }
2389
-
2390
- /* ============================================================
2391
- Info & socials overlays
2392
- ============================================================ */
2393
- [data-theme="v2"] .eb-player .eb-info-overlay,
2394
- [data-theme="v2"] .eb-player .eb-socials-overlay {
2395
- background: rgba(10,10,20,.85);
2396
- backdrop-filter: blur(12px);
2397
- -webkit-backdrop-filter: blur(12px);
2398
- }
2399
-
2400
- [data-theme="v2"] .eb-player .eb-info-close,
2401
- [data-theme="v2"] .eb-player .eb-socials-close {
2402
- border-radius: 8px;
2403
- background: rgba(255,255,255,.07);
2404
- border-color: rgba(255,255,255,.08);
2405
- transition: background .2s, color .2s;
2406
- }
2407
-
2408
- [data-theme="v2"] .eb-player .eb-info-close:hover,
2409
- [data-theme="v2"] .eb-player .eb-socials-close:hover {
2410
- background: rgba(255,255,255,.13);
2411
- color: #fff;
2412
- }
2413
-
2414
- [data-theme="v2"] .eb-player .eb-socials-link {
2415
- background: rgba(255,255,255,.07);
2416
- border: 1px solid rgba(255,255,255,.08);
2417
- border-radius: 8px;
2418
- transition: background .2s, color .2s, border-color .2s;
2419
- }
2420
-
2421
- [data-theme="v2"] .eb-player .eb-socials-link:hover {
2422
- background: rgba(255,132,31,.15);
2423
- border-color: rgba(255,132,31,.35);
2424
- color: #ffb980;
2425
- }
2426
-
2427
- /* ============================================================
2428
- Poster
2429
- ============================================================ */
2430
- [data-theme="v2"] .eb-player .eb-poster {
2431
- background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
2432
- }
2433
-
2434
- /* ============================================================
2435
- Radio overlay
2436
- ============================================================ */
2437
- [data-theme="v2"] .eb-player .eb-radio-overlay {
2438
- background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
2439
- }
2440
-
2441
- [data-theme="v2"] .eb-player .eb-radio-bar {
2442
- background: rgba(255,132,31,.8);
2443
- }
2444
-
2445
- /* ============================================================
2446
- Chapter skip button
2447
- ============================================================ */
2448
- [data-theme="v2"] .eb-player .eb-chapter-skip {
2449
- background: rgba(10,10,20,.55);
2450
- backdrop-filter: blur(12px);
2451
- -webkit-backdrop-filter: blur(12px);
2452
- border: 1px solid rgba(255,255,255,.15);
2453
- border-radius: 8px;
2454
- font-size: 12px;
2455
- font-weight: 500;
2456
- transition: background .15s;
2457
- }
2458
-
2459
- [data-theme="v2"] .eb-player .eb-chapter-skip:hover {
2460
- background: rgba(255,255,255,.12);
2461
- }
2462
-
2463
- /* eb-player skin CSS — BEM-prefixed structural styles */
2464
- /* All class names use the eb- prefix to avoid collisions with consumer CSS */
2465
-
2466
- /* ============================================================
2467
- Root container
2468
- ============================================================ */
2469
- .eb-player {
2470
- position: relative;
2471
- width: 100%;
2472
- height: 100%;
2473
- overflow: hidden;
2474
- font-family: sans-serif;
2475
- background: #000;
2476
- color: #fff;
2477
- box-sizing: border-box;
2478
- user-select: none;
2479
- }
2480
-
2481
- /* Video element fills the container.
2482
- filter: brightness(1) is visually identical to no filter but forces Chrome to
2483
- composite the video through the GPU filter pipeline instead of using a hardware
2484
- overlay plane. Without this, DRM-protected video (Widevine) renders on a separate
2485
- hardware overlay that sits above ALL HTML layers — making seekbar snapshot preview
2486
- and other overlay elements invisible behind the main video. */
2487
- .eb-player video.eb-video {
2488
- position: absolute;
2489
- top: 0;
2490
- left: 0;
2491
- width: 100%;
2492
- height: 100%;
2493
- display: block;
2494
- object-fit: contain;
2495
- z-index: 1;
2496
- filter: brightness(1);
2497
- }
2498
-
2499
- /* ============================================================
2500
- Overlay zone (poster, radio, loading, error, socials, info)
2501
- ============================================================ */
2502
- .eb-overlay-zone {
2503
- position: absolute;
2504
- inset: 0;
2505
- pointer-events: none;
2506
- display: flex;
2507
- align-items: center;
2508
- justify-content: center;
2509
- z-index: 10;
2510
- }
2511
-
2512
- .eb-loading-slot {
2513
- position: absolute;
2514
- inset: 0;
2515
- display: flex;
2516
- align-items: center;
2517
- justify-content: center;
2518
- pointer-events: none;
2519
- z-index: 26;
2520
- }
2521
-
2522
- /* Poster image */
2523
- .eb-poster {
2524
- position: absolute;
2525
- inset: 0;
2526
- width: 100%;
2527
- height: 100%;
2528
- object-fit: cover;
2529
- pointer-events: none;
2530
- background: #000;
2531
- box-sizing: border-box;
2532
- }
2533
-
2534
- /* Ads container (for IMA SDK) */
2535
- .eb-ads-container {
2536
- position: absolute;
2537
- inset: 0;
2538
- z-index: 20;
2539
- pointer-events: none;
2540
- }
2541
-
2542
- /* While an ad plays, raise the ads container above the player chrome (bars are
2543
- z-index 30) and enable pointer-events so IMA's own ad UI — Skip button,
2544
- click-through — receives clicks. At rest the container stays pointer-events:none
2545
- so it never blocks clicks on the content video. */
2546
- .eb-ad-playing .eb-ads-container {
2547
- z-index: 40;
2548
- pointer-events: auto;
2549
- }
2550
-
2551
- /* ============================================================
2552
- Top bar
2553
- ============================================================ */
2554
- .eb-top-bar {
2555
- position: absolute;
2556
- top: 0;
2557
- left: 0;
2558
- right: 0;
2559
- display: flex;
2560
- flex-direction: row;
2561
- align-items: center;
2562
- justify-content: space-between;
2563
- padding: 8px 12px;
2564
- background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
2565
- z-index: 30;
2566
- pointer-events: auto;
2567
- }
2568
-
2569
- .eb-top-bar__logo {
2570
- height: 28px;
2571
- width: auto;
2572
- display: block;
2573
- }
2574
-
2575
- .eb-top-bar__logo-link {
2576
- display: inline-flex;
2577
- text-decoration: none;
2578
- }
2579
-
2580
- .eb-top-bar__actions {
2581
- display: flex;
2582
- align-items: center;
2583
- gap: 4px;
2584
- margin-inline-start: auto;
2585
- }
2586
-
2587
- /* ============================================================
2588
- Bottom bar
2589
- ============================================================ */
2590
- .eb-bottom-bar {
2591
- position: absolute;
2592
- bottom: 0;
2593
- left: 0;
2594
- right: 0;
2595
- display: flex;
2596
- flex-direction: column;
2597
- z-index: 30;
2598
- pointer-events: auto;
2599
- }
2600
-
2601
- .eb-bottom-bar__gradient {
2602
- position: absolute;
2603
- left: 0;
2604
- right: 0;
2605
- bottom: 0;
2606
- height: 100px;
2607
- background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
2608
- pointer-events: none;
2609
- z-index: -1;
2610
- }
2611
-
2612
- .eb-bottom-bar__controls-row {
2613
- display: flex;
2614
- flex-direction: row;
2615
- align-items: center;
2616
- gap: 4px;
2617
- padding: 4px 8px 8px;
2618
- }
2619
-
2620
- .eb-bottom-bar__seekbar-zone {
2621
- flex: 1;
2622
- min-width: 0;
2623
- }
2624
-
2625
- .eb-bottom-bar__seekbar-zone:has(.eb-seekbar[hidden]) {
2626
- display: none;
2627
- }
2628
-
2629
- /* ============================================================
2630
- Middle bar
2631
- ============================================================ */
2632
- .eb-middle-bar {
2633
- position: absolute;
2634
- top: 50%;
2635
- left: 50%;
2636
- transform: translate(-50%, -50%);
2637
- pointer-events: auto;
2638
- z-index: 25;
2639
- display: flex;
2640
- align-items: center;
2641
- gap: 16px;
2642
- }
2643
-
2644
- .eb-middle-bar__play-btn {
2645
- width: 64px;
2646
- height: 64px;
2647
- border-radius: 50%;
2648
- background: rgba(0,0,0,0.5);
2649
- display: flex;
2650
- align-items: center;
2651
- justify-content: center;
2652
- }
2653
-
2654
- .eb-middle-bar__seek-btn {
2655
- flex-direction: column;
2656
- gap: 2px;
2657
- background: none;
2658
- padding: 4px;
2659
- }
2660
-
2661
- .eb-middle-bar__seek-btn:hover {
2662
- background: rgba(255,255,255,0.1);
2663
- border-radius: 8px;
2664
- }
2665
-
2666
- .eb-seek-circle {
2667
- width: 32px;
2668
- height: 32px;
2669
- display: block;
2670
- pointer-events: none;
2671
- fill: currentColor;
2672
- }
2673
-
2674
- .eb-seek-label {
2675
- font-size: 11px;
2676
- font-weight: 600;
2677
- line-height: 1;
2678
- opacity: 0.85;
2679
- }
2680
-
2681
- /* ============================================================
2682
- Extension zones
2683
- ============================================================ */
2684
- .eb-extension-top-extra,
2685
- .eb-extension-bottom-extra,
2686
- .eb-extension-overlay,
2687
- .eb-extension-controls-extra {
2688
- position: absolute;
2689
- pointer-events: none;
2690
- z-index: 35;
2691
- }
2692
-
2693
- .eb-extension-top-extra > *,
2694
- .eb-extension-bottom-extra > *,
2695
- .eb-extension-overlay > *,
2696
- .eb-extension-controls-extra > * {
2697
- pointer-events: auto;
2698
- }
2699
-
2700
- .eb-extension-top-extra {
2701
- top: 0;
2702
- left: 0;
2703
- right: 0;
2704
- }
2705
-
2706
- .eb-extension-bottom-extra {
2707
- bottom: 0;
2708
- left: 0;
2709
- right: 0;
2710
- }
2711
-
2712
- .eb-extension-overlay {
2713
- inset: 0;
2714
- display: flex;
2715
- align-items: center;
2716
- justify-content: center;
2717
- }
2718
-
2719
- .eb-extension-controls-extra {
2720
- bottom: 0;
2721
- inset-inline-end: 0;
2722
- display: flex;
2723
- align-items: center;
2724
- gap: 4px;
2725
- padding: 4px 8px 8px;
2726
- }
2727
-
2728
- /* ============================================================
2729
- Time display
2730
- ============================================================ */
2731
- .eb-time-display {
2732
- font-size: 13px;
2733
- line-height: 1;
2734
- white-space: nowrap;
2735
- padding: 0 4px;
2736
- color: #fff;
2737
- font-variant-numeric: tabular-nums;
2738
- }
2739
-
2740
- .eb-time-display__offset {
2741
- color: rgba(255, 255, 255, 0.5);
2742
- }
2743
-
2744
- .eb-channel-name {
2745
- font-size: 13px;
2746
- line-height: 1;
2747
- white-space: nowrap;
2748
- padding: 0 4px;
2749
- color: #fff;
2750
- opacity: 0.75;
2751
- }
2752
-
2753
- /* ============================================================
2754
- Volume control
2755
- ============================================================ */
2756
- .eb-volume-control {
2757
- display: flex;
2758
- align-items: center;
2759
- gap: 4px;
2760
- margin-inline-end: 8px;
2761
- }
2762
-
2763
- .eb-volume-track {
2764
- position: relative;
2765
- width: 60px;
2766
- height: 4px;
2767
- background: rgba(255, 255, 255, 0.2);
2768
- border-radius: 2px;
2769
- cursor: pointer;
2770
- }
2771
-
2772
- .eb-volume-fill {
2773
- position: absolute;
2774
- top: 0;
2775
- inset-inline-start: 0;
2776
- height: 100%;
2777
- background: var(--eb-color-volume, var(--eb-color-primary, #fff));
2778
- border-radius: 2px;
2779
- pointer-events: none;
2780
- }
2781
-
2782
- .eb-volume-thumb {
2783
- position: absolute;
2784
- top: 50%;
2785
- width: 10px;
2786
- height: 10px;
2787
- border-radius: 50%;
2788
- background: var(--eb-color-volume, var(--eb-color-primary, #fff));
2789
- /* Centre on the inline-start offset; the sign flips under RTL (see RTL block) */
2790
- --eb-volume-thumb-x: -50%;
2791
- transform: translate(var(--eb-volume-thumb-x), -50%);
2792
- pointer-events: none;
2793
- }
2794
-
2795
- /* ============================================================
2796
- Settings panel
2797
- ============================================================ */
2798
- .eb-settings-wrapper {
2799
- position: relative;
2800
- }
2801
-
2802
- .eb-settings-panel {
2803
- position: absolute;
2804
- background: rgba(0, 0, 0, 0.85);
2805
- border-radius: 6px;
2806
- min-width: 160px;
2807
- max-width: 220px;
2808
- overflow: hidden;
2809
- font-size: 12px;
2810
- z-index: 40;
2811
- }
2812
-
2813
- /* Vertical direction: up (default) or down */
2814
- .eb-settings-panel--up {
2815
- bottom: calc(100% + 8px);
2816
- }
2817
-
2818
- .eb-settings-panel--down {
2819
- top: calc(100% + 8px);
2820
- }
2821
-
2822
- /* Horizontal alignment: right (default) or left */
2823
- .eb-settings-panel--right {
2824
- right: 0;
2825
- }
2826
-
2827
- .eb-settings-panel--left {
2828
- left: 0;
2829
- }
2830
-
2831
- .eb-settings-menu {
2832
- list-style: none;
2833
- margin: 0;
2834
- padding: 4px 0;
2835
- }
2836
-
2837
- .eb-settings-submenu {
2838
- max-height: 200px;
2839
- overflow-y: auto;
2840
- }
2841
-
2842
- .eb-settings-submenu::-webkit-scrollbar {
2843
- width: 4px;
2844
- }
2845
-
2846
- .eb-settings-submenu::-webkit-scrollbar-thumb {
2847
- background: rgba(255, 255, 255, 0.3);
2848
- border-radius: 2px;
2849
- }
2850
-
2851
- .eb-settings-header {
2852
- display: flex;
2853
- align-items: center;
2854
- gap: 4px;
2855
- padding: 5px 12px;
2856
- }
2857
-
2858
- .eb-settings-category,
2859
- .eb-settings-item {
2860
- display: flex;
2861
- align-items: center;
2862
- justify-content: space-between;
2863
- width: 100%;
2864
- padding: 5px 12px;
2865
- border: none;
2866
- background: none;
2867
- color: #fff;
2868
- cursor: pointer;
2869
- font-size: 12px;
2870
- text-align: start;
2871
- }
2872
-
2873
- .eb-settings-back {
2874
- display: flex;
2875
- align-items: center;
2876
- border: none;
2877
- background: none;
2878
- color: #fff;
2879
- cursor: pointer;
2880
- padding: 0;
2881
- }
2882
-
2883
- .eb-settings-category:hover,
2884
- .eb-settings-item:hover {
2885
- background: rgba(255, 255, 255, 0.1);
2886
- }
2887
-
2888
- .eb-settings-item--selected {
2889
- color: var(--eb-accent, var(--eb-color-primary, #e53935));
2890
- }
2891
-
2892
- /* ============================================================
2893
- Seekbar
2894
- ============================================================ */
2895
- .eb-seekbar {
2896
- position: relative;
2897
- width: 100%;
2898
- padding: 8px 0;
2899
- cursor: pointer;
2900
- }
2901
-
2902
- .eb-seekbar-disabled {
2903
- pointer-events: none;
2904
- opacity: 0.4;
2905
- }
2906
-
2907
- .eb-seekbar-track {
2908
- position: relative;
2909
- height: 4px;
2910
- background: rgba(255, 255, 255, 0.2);
2911
- border-radius: 2px;
2912
- }
2913
-
2914
- .eb-seekbar-buffered {
2915
- position: absolute;
2916
- top: 0;
2917
- inset-inline-start: 0;
2918
- height: 100%;
2919
- background: rgba(255, 255, 255, 0.4);
2920
- border-radius: 2px;
2921
- pointer-events: none;
2922
- }
2923
-
2924
- .eb-seekbar-progress {
2925
- position: absolute;
2926
- top: 0;
2927
- inset-inline-start: 0;
2928
- height: 100%;
2929
- background: var(--eb-color-progress, var(--eb-color-primary, #e53935));
2930
- border-radius: 2px;
2931
- pointer-events: none;
2932
- }
2933
-
2934
- .eb-seekbar-thumb {
2935
- position: absolute;
2936
- inset-inline-end: -6px;
2937
- top: 50%;
2938
- width: 12px;
2939
- height: 12px;
2940
- border-radius: 50%;
2941
- background: var(--eb-color-progress, var(--eb-color-primary, #e53935));
2942
- transform: translateY(-50%) scale(0);
2943
- transition: transform 0.15s;
2944
- pointer-events: none;
2945
- }
2946
-
2947
- .eb-seekbar:hover .eb-seekbar-thumb {
2948
- transform: translateY(-50%) scale(1);
2949
- }
2950
-
2951
- .eb-seekbar:hover .eb-seekbar-track {
2952
- height: 6px;
2953
- }
2954
-
2955
- .eb-seekbar-tooltip {
2956
- position: absolute;
2957
- bottom: calc(100% + 8px);
2958
- transform: translateX(-50%);
2959
- background: rgba(0, 0, 0, 0.8);
2960
- color: #fff;
2961
- font-size: 12px;
2962
- padding: 4px 8px;
2963
- border-radius: 3px;
2964
- white-space: nowrap;
2965
- pointer-events: none;
2966
- text-align: center;
2967
- z-index: 50;
2968
- overflow: hidden;
2969
- }
2970
-
2971
- .eb-seekbar-preview {
2972
- position: static !important;
2973
- width: 120px;
2974
- height: 68px;
2975
- min-width: 0 !important;
2976
- min-height: 0 !important;
2977
- max-width: none !important;
2978
- max-height: none !important;
2979
- display: block !important;
2980
- object-fit: contain;
2981
- background: #000;
2982
- margin: 0 !important;
2983
- padding: 0 !important;
2984
- border: none !important;
2985
- inset: auto !important;
2986
- transform: none !important;
2987
- z-index: auto !important;
2988
- }
2989
-
2990
- .eb-chapter-marker {
2991
- position: absolute;
2992
- top: 0;
2993
- width: 3px;
2994
- height: 100%;
2995
- background: rgba(255, 255, 255, 0.6);
2996
- /* Centre on the inline-start offset; the sign flips under RTL (see RTL block) */
2997
- --eb-chapter-marker-x: -50%;
2998
- transform: translateX(var(--eb-chapter-marker-x));
2999
- pointer-events: none;
3000
- }
3001
-
3002
- .eb-chapter-marker.eb-chapter-active {
3003
- background: #fff;
3004
- }
3005
-
3006
- .eb-chapter-skip {
3007
- position: absolute;
3008
- inset-inline-end: 0;
3009
- bottom: calc(100% + 4px);
3010
- background: rgba(0, 0, 0, 0.7);
3011
- color: #fff;
3012
- border: 1px solid rgba(255, 255, 255, 0.4);
3013
- border-radius: 4px;
3014
- padding: 6px 16px;
3015
- font-size: 13px;
3016
- cursor: pointer;
3017
- }
3018
-
3019
- .eb-chapter-skip:hover {
3020
- background: rgba(255, 255, 255, 0.2);
3021
- }
3022
-
3023
- .eb-epg-segment {
3024
- position: absolute;
3025
- top: 0;
3026
- height: 100%;
3027
- border-inline-end: 1px solid rgba(255, 255, 255, 0.3);
3028
- pointer-events: none;
3029
- }
3030
-
3031
- .eb-epg-segment.eb-epg-current {
3032
- background: rgba(255, 255, 255, 0.1);
3033
- }
3034
-
3035
- /* ============================================================
3036
- Icons
3037
- ============================================================ */
3038
- .eb-icon {
3039
- width: 20px;
3040
- height: 20px;
3041
- fill: none;
3042
- stroke: currentColor;
3043
- stroke-width: 2;
3044
- stroke-linecap: round;
3045
- stroke-linejoin: round;
3046
- display: block;
3047
- pointer-events: none;
3048
- flex-shrink: 0;
3049
- }
3050
-
3051
- /* ============================================================
3052
- Buttons (base style)
3053
- ============================================================ */
3054
- .eb-button,
3055
- .eb-play-pause,
3056
- .eb-fullscreen,
3057
- .eb-pip,
3058
- .eb-cast,
3059
- .eb-volume-mute,
3060
- .eb-live-sync {
3061
- cursor: pointer;
3062
- background: none;
3063
- border: none;
3064
- padding: 6px;
3065
- color: var(--eb-color-icon, inherit);
3066
- display: flex;
3067
- align-items: center;
3068
- justify-content: center;
3069
- border-radius: 4px;
3070
- transition: background 0.15s;
3071
- -webkit-tap-highlight-color: transparent;
3072
- }
3073
-
3074
- .eb-button:hover,
3075
- .eb-play-pause:hover,
3076
- .eb-fullscreen:hover,
3077
- .eb-pip:hover,
3078
- .eb-cast:hover,
3079
- .eb-volume-mute:hover,
3080
- .eb-live-sync:hover {
3081
- background: rgba(255,255,255,0.15);
3082
- }
3083
-
3084
- .eb-button:active,
3085
- .eb-play-pause:active,
3086
- .eb-fullscreen:active,
3087
- .eb-pip:active,
3088
- .eb-cast:active,
3089
- .eb-volume-mute:active,
3090
- .eb-live-sync:active {
3091
- background: rgba(255,255,255,0.25);
3092
- }
3093
-
3094
- /* ============================================================
3095
- Radio overlay
3096
- ============================================================ */
3097
- .eb-radio-overlay {
3098
- position: absolute;
3099
- inset: 0;
3100
- display: flex;
3101
- align-items: center;
3102
- justify-content: center;
3103
- background: #000;
3104
- z-index: 15;
3105
- }
3106
-
3107
- .eb-radio-bars {
3108
- display: flex;
3109
- align-items: flex-end;
3110
- gap: 4px;
3111
- height: 40px;
3112
- }
3113
-
3114
- .eb-radio-bar {
3115
- display: block;
3116
- width: 6px;
3117
- background: #fff;
3118
- border-radius: 3px;
3119
- animation: eb-radio-bar-bounce 0.8s ease-in-out infinite;
3120
- }
3121
-
3122
- .eb-radio-bar:nth-child(1) { animation-delay: 0s; height: 20px; }
3123
- .eb-radio-bar:nth-child(2) { animation-delay: 0.1s; height: 32px; }
3124
- .eb-radio-bar:nth-child(3) { animation-delay: 0.2s; height: 40px; }
3125
- .eb-radio-bar:nth-child(4) { animation-delay: 0.3s; height: 28px; }
3126
- .eb-radio-bar:nth-child(5) { animation-delay: 0.4s; height: 16px; }
3127
-
3128
- @keyframes eb-radio-bar-bounce {
3129
- 0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
3130
- 50% { transform: scaleY(1); opacity: 1; }
3131
- }
3132
-
3133
- /* Volume mute button — base styles shared via .eb-button group above */
3134
-
3135
- /* ============================================================
3136
- Live sync button
3137
- ============================================================ */
3138
- .eb-live-sync[hidden] {
3139
- display: none;
3140
- }
3141
-
3142
- .eb-live-synced {
3143
- color: var(--eb-accent, var(--eb-color-primary, #e53935));
3144
- }
3145
-
3146
- /* Default theme: show icon only, hide text badge elements */
3147
- .eb-live-sync__dot,
3148
- .eb-live-sync__label {
3149
- display: none;
3150
- }
3151
-
3152
- /* ============================================================
3153
- Overlay panels (error, info, socials — mounted in .eb-player)
3154
- ============================================================ */
3155
- .eb-error-slot,
3156
- .eb-info-slot,
3157
- .eb-socials-slot {
3158
- position: absolute;
3159
- inset: 0;
3160
- z-index: 50;
3161
- pointer-events: none;
3162
- }
3163
-
3164
- .eb-toast-slot {
3165
- position: absolute;
3166
- bottom: 60px;
3167
- left: 50%;
3168
- transform: translateX(-50%);
3169
- z-index: 50;
3170
- pointer-events: none;
3171
- }
3172
-
3173
- .eb-toast {
3174
- background: rgba(0, 0, 0, 0.8);
3175
- color: #fff;
3176
- padding: 8px 20px;
3177
- border-radius: 4px;
3178
- font-size: 13px;
3179
- white-space: nowrap;
3180
- pointer-events: auto;
3181
- }
3182
-
3183
- .eb-error,
3184
- .eb-info-overlay,
3185
- .eb-socials-overlay {
3186
- position: absolute;
3187
- inset: 0;
3188
- display: flex;
3189
- flex-direction: column;
3190
- align-items: center;
3191
- justify-content: center;
3192
- background: rgba(0, 0, 0, 0.75);
3193
- color: #fff;
3194
- z-index: 50;
3195
- pointer-events: auto;
3196
- padding: 24px;
3197
- text-align: center;
3198
- }
3199
-
3200
- .eb-error[hidden],
3201
- .eb-info-overlay[hidden],
3202
- .eb-socials-overlay[hidden] {
3203
- display: none;
3204
- }
3205
-
3206
- .eb-error-message {
3207
- font-size: 16px;
3208
- margin: 0 0 16px;
3209
- }
3210
-
3211
- .eb-error-retry {
3212
- background: rgba(255, 255, 255, 0.15);
3213
- color: #fff;
3214
- border: 1px solid rgba(255, 255, 255, 0.3);
3215
- border-radius: 4px;
3216
- padding: 8px 24px;
3217
- font-size: 14px;
3218
- cursor: pointer;
3219
- }
3220
-
3221
- .eb-error-retry:hover {
3222
- background: rgba(255, 255, 255, 0.25);
3223
- }
3224
-
3225
- .eb-info-content {
3226
- font-size: 14px;
3227
- line-height: 1.5;
3228
- max-width: 400px;
3229
- margin-bottom: 16px;
3230
- }
3231
-
3232
- .eb-info-close,
3233
- .eb-socials-close {
3234
- background: rgba(255, 255, 255, 0.15);
3235
- color: #fff;
3236
- border: 1px solid rgba(255, 255, 255, 0.3);
3237
- border-radius: 4px;
3238
- padding: 8px 24px;
3239
- font-size: 14px;
3240
- cursor: pointer;
3241
- }
3242
-
3243
- .eb-info-close:hover,
3244
- .eb-socials-close:hover {
3245
- background: rgba(255, 255, 255, 0.25);
3246
- }
3247
-
3248
- .eb-socials-links {
3249
- display: flex;
3250
- flex-wrap: wrap;
3251
- gap: 12px;
3252
- justify-content: center;
3253
- margin-bottom: 16px;
3254
- }
3255
-
3256
- .eb-socials-link {
3257
- color: #fff;
3258
- text-decoration: none;
3259
- background: rgba(255, 255, 255, 0.1);
3260
- border-radius: 4px;
3261
- padding: 8px 16px;
3262
- font-size: 14px;
3263
- text-transform: capitalize;
3264
- }
3265
-
3266
- .eb-socials-link:hover {
3267
- background: rgba(255, 255, 255, 0.25);
3268
- }
3269
-
3270
- /* ============================================================
3271
- Loading spinner — CSS arc ring
3272
- ============================================================ */
3273
- .eb-loading {
3274
- display: flex;
3275
- flex-direction: column;
3276
- align-items: center;
3277
- justify-content: center;
3278
- gap: 8px;
3279
- color: #fff;
3280
- pointer-events: none;
3281
- }
3282
-
3283
- .eb-loading[hidden] {
3284
- display: none;
3285
- }
3286
-
3287
- .eb-loading-arc {
3288
- width: 80px;
3289
- height: 80px;
3290
- border-radius: 50%;
3291
- border: 3px solid rgba(255, 255, 255, 0.15);
3292
- border-top-color: rgba(255, 255, 255, 0.9);
3293
- animation: eb-spin 1.8s linear infinite;
3294
- }
3295
-
3296
- .eb-loading-text {
3297
- font-size: 14px;
3298
- }
3299
-
3300
- @keyframes eb-spin {
3301
- from { transform: rotate(0deg); }
3302
- to { transform: rotate(360deg); }
3303
- }
3304
-
3305
- /* ============================================================
3306
- Controls visibility
3307
- ============================================================ */
3308
- .eb-controls-visible .eb-top-bar,
3309
- .eb-controls-visible .eb-bottom-bar,
3310
- .eb-controls-visible .eb-middle-bar {
3311
- opacity: 1;
3312
- transition: opacity 0.3s;
3313
- }
3314
-
3315
- .eb-controls-hidden .eb-top-bar,
3316
- .eb-controls-hidden .eb-bottom-bar,
3317
- .eb-controls-hidden .eb-middle-bar {
3318
- opacity: 0;
3319
- transition: opacity 0.3s;
3320
- pointer-events: none;
3321
- }
3322
-
3323
- /* ============================================================
3324
- iOS native controls fallback
3325
- ============================================================ */
3326
- .eb-ios-native .eb-top-bar,
3327
- .eb-ios-native .eb-bottom-bar,
3328
- .eb-ios-native .eb-middle-bar,
3329
- .eb-ios-native .eb-overlay-zone,
3330
- .eb-ios-native .eb-error-slot,
3331
- .eb-ios-native .eb-info-slot,
3332
- .eb-ios-native .eb-socials-slot,
3333
- .eb-ios-native .eb-toast-slot {
3334
- display: none;
3335
- }
3336
-
3337
- /* ============================================================
3338
- RTL support
3339
- dir="rtl" on .eb-player mirrors the whole UI natively: flex rows lay out
3340
- right-to-left and the logical properties above (margin-inline-*,
3341
- inset-inline-*, text-align: start) flip with it. Do not add row-reverse
3342
- here — it cancels the native mirroring. Only elements positioned with a
3343
- physical inline style (chapter markers use right: N% under RTL) need an
3344
- explicit override.
3345
-
3346
- Both overrides below MUST stay anchored to .eb-player[dir="rtl"]. As bare
3347
- [dir="rtl"] descendant selectors they also matched through an ancestor —
3348
- inside an RTL document (<html dir="rtl">) they fired even when the player
3349
- itself was LTR, mirroring the markers and volume thumb while Seekbar and
3350
- VolumeControl used their LTR pointer maths. Never widen these back.
3351
- ============================================================ */
3352
- .eb-player[dir="rtl"] .eb-chapter-marker {
3353
- --eb-chapter-marker-x: 50%;
3354
- }
3355
-
3356
- .eb-player[dir="rtl"] .eb-volume-thumb {
3357
- --eb-volume-thumb-x: 50%;
3358
- }
3359
-
3360
- /* ============================================================
3361
- Responsive: ensure container fills parent
3362
- ============================================================ */
3363
- .eb-player,
3364
- .eb-player video.eb-video {
3365
- max-width: 100%;
3366
- max-height: 100%;
3367
- }
1
+ .eb-player{color:var(--eb-color-text,#fff);font-family:var(--eb-font-family,Arial,sans-serif);font-size:var(--eb-font-size-base,14px)}.eb-player *,.eb-player :after,.eb-player :before{box-sizing:inherit}.eb-player__container{background-color:var(--eb-color-background,rgba(0,0,0,.8));height:100%;position:relative;width:100%}.eb-player__video{display:block;height:100%;object-fit:contain;width:100%}[data-theme=forja]{--eb-color-primary:#fc013b;--eb-color-progress:#fc013b;--eb-accent:#fc013b}[data-theme=forja] .eb-player{--eb-color-background:#000;--eb-color-text:#fff;--eb-font-size-base:14px;color:#fff;font-family:Arial,sans-serif}[data-theme=forja] .eb-player .eb-top-bar{display:none}[data-theme=forja] .eb-player .eb-bottom-bar__gradient{background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);height:100px}[data-theme=forja] .eb-player .eb-bottom-bar__controls-row{align-items:center;flex-wrap:wrap;gap:6px;padding:0 12px 10px;row-gap:4px}[data-theme=forja] .eb-player .eb-bottom-bar__seekbar-zone{flex:1;min-width:0;order:-1}[data-theme=forja] .eb-player .eb-bottom-bar__controls-row:after{content:"";flex-shrink:0;height:0;order:0;width:100%}[data-theme=forja] .eb-player .eb-slot-play-pause,[data-theme=forja] .eb-player .eb-slot-volume{order:1}[data-theme=forja] .eb-player .eb-slot-live-sync{margin-inline-start:auto;order:1}[data-theme=forja] .eb-player .eb-slot-fullscreen,[data-theme=forja] .eb-player .eb-slot-pip,[data-theme=forja] .eb-player .eb-slot-settings{order:1}[data-theme=forja] .eb-player.eb-controls-visible .eb-bottom-bar,[data-theme=forja] .eb-player.eb-controls-visible .eb-middle-bar{opacity:1;transition:opacity .25s}[data-theme=forja] .eb-player.eb-controls-hidden .eb-bottom-bar,[data-theme=forja] .eb-player.eb-controls-hidden .eb-middle-bar{opacity:0;transition:opacity .25s}[data-theme=forja] .eb-player .eb-middle-bar{gap:24px}[data-theme=forja] .eb-player .eb-middle-bar__play-btn{background:transparent;border:none;border-radius:0;color:hsla(0,0%,100%,.7);height:72px;padding:0;transition:color .15s,transform .15s;width:72px}[data-theme=forja] .eb-player .eb-middle-bar__play-btn:hover{color:hsla(0,0%,100%,.95)}[data-theme=forja] .eb-player .eb-middle-bar__play-btn:active{transform:scale(.9)}[data-theme=forja] .eb-player .eb-middle-bar__play-btn .eb-icon{fill:currentColor;stroke:none;height:52px;width:52px}[data-theme=forja] .eb-player .eb-middle-bar__seek-btn{align-items:center;background:transparent;border:none;border-radius:0;color:hsla(0,0%,100%,.65);display:flex;flex-direction:column;gap:1px;height:52px;justify-content:center;padding:0;transition:color .15s,transform .15s;width:52px}[data-theme=forja] .eb-player .eb-middle-bar__seek-btn:hover{color:hsla(0,0%,100%,.9)}[data-theme=forja] .eb-player .eb-middle-bar__seek-btn:active{transform:scale(.9)}[data-theme=forja] .eb-player .eb-seek-circle{fill:currentColor;stroke:none;height:28px;width:28px}[data-theme=forja] .eb-player .eb-seek-label{font-size:.7em;font-weight:700;line-height:1}[data-theme=forja] .eb-player .eb-fullscreen,[data-theme=forja] .eb-player .eb-pip,[data-theme=forja] .eb-player .eb-play-pause,[data-theme=forja] .eb-player .eb-settings-btn,[data-theme=forja] .eb-player .eb-volume-mute{background:transparent;border:none;border-radius:2px;color:hsla(0,0%,100%,.88);flex-shrink:0;height:36px;transition:color .15s;width:36px}[data-theme=forja] .eb-player .eb-fullscreen:hover,[data-theme=forja] .eb-player .eb-pip:hover,[data-theme=forja] .eb-player .eb-play-pause:hover,[data-theme=forja] .eb-player .eb-settings-btn:hover,[data-theme=forja] .eb-player .eb-volume-mute:hover{color:#fff}[data-theme=forja] .eb-player .eb-fullscreen .eb-icon,[data-theme=forja] .eb-player .eb-pip .eb-icon,[data-theme=forja] .eb-player .eb-play-pause .eb-icon,[data-theme=forja] .eb-player .eb-settings-btn .eb-icon,[data-theme=forja] .eb-player .eb-volume-mute .eb-icon{height:22px;width:22px}[data-theme=forja] .eb-player .eb-play-pause .eb-icon{fill:currentColor;stroke:none}[data-theme=forja] .eb-player .eb-seekbar-track{background:hsla(0,0%,100%,.25);border-radius:0;height:3px;transition:height .15s}[data-theme=forja] .eb-player .eb-seekbar:hover .eb-seekbar-track{height:5px}[data-theme=forja] .eb-player .eb-seekbar-buffered{background:hsla(0,0%,100%,.3);border-radius:0}[data-theme=forja] .eb-player .eb-seekbar-progress{background:var(--eb-color-progress,var(--eb-color-primary,#fc013b));border-radius:0}[data-theme=forja] .eb-player .eb-seekbar-thumb{background:#fc013b;border-radius:50%;box-shadow:none;height:12px;inset-inline-end:-6px;width:12px}[data-theme=forja] .eb-player .eb-volume-control{flex-direction:row;gap:0}[data-theme=forja] .eb-player .eb-volume-track{background:hsla(0,0%,100%,.25);border-radius:0;height:3px;margin:0 4px 0 2px;overflow:visible;transition:height .15s;width:72px}[data-theme=forja] .eb-player .eb-volume-control:hover .eb-volume-track{height:4px}[data-theme=forja] .eb-player .eb-volume-fill{background:#fc013b;border-radius:0}[data-theme=forja] .eb-player .eb-volume-thumb{background:#fff;box-shadow:none;height:11px;transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(0);transition:transform .15s;width:11px}[data-theme=forja] .eb-player .eb-volume-control:hover .eb-volume-thumb{transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(1)}[data-theme=forja] .eb-player .eb-live-sync{background:#fc013b;border-radius:3px;color:#fff;font-size:12px;font-weight:700;gap:0;height:auto;letter-spacing:.04em;padding:4px 8px;text-transform:uppercase;transition:background .15s;width:auto}[data-theme=forja] .eb-player .eb-live-sync__dot,[data-theme=forja] .eb-player .eb-live-sync__icon{display:none}[data-theme=forja] .eb-player .eb-live-sync__label{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;line-height:1}[data-theme=forja] .eb-player .eb-live-sync:not(.eb-live-synced){background:hsla(0,0%,47%,.6)}[data-theme=forja] .eb-player .eb-live-sync:active,[data-theme=forja] .eb-player .eb-live-sync:hover{background:#c9012f}[data-theme=forja] .eb-player .eb-live-sync:not(.eb-live-synced):hover{background:hsla(0,0%,59%,.7)}[data-theme=forja] .eb-player .eb-settings-panel{background:hsla(0,0%,8%,.95);border-radius:4px;box-shadow:0 4px 24px rgba(0,0,0,.7);min-width:240px}[data-theme=forja] .eb-player .eb-settings-back,[data-theme=forja] .eb-player .eb-settings-category,[data-theme=forja] .eb-player .eb-settings-item{border-bottom:1px solid hsla(0,0%,100%,.07);color:hsla(0,0%,100%,.85);font-size:13px;padding:13px 16px;transition:background .12s}[data-theme=forja] .eb-player .eb-settings-category:last-child,[data-theme=forja] .eb-player .eb-settings-item:last-child{border-bottom:none}[data-theme=forja] .eb-player .eb-settings-back:hover,[data-theme=forja] .eb-player .eb-settings-category:hover,[data-theme=forja] .eb-player .eb-settings-item:hover{background:hsla(0,0%,100%,.06)}[data-theme=forja] .eb-player .eb-settings-item--selected{color:#fff;font-weight:500}[data-theme=forja] .eb-player .eb-settings-item--selected:after{background:#fc013b;border-radius:50%;content:"";flex-shrink:0;height:10px;width:10px}[data-theme=forja] .eb-player .eb-settings-item:not(.eb-settings-item--selected):after{border:2px solid hsla(0,0%,100%,.25);border-radius:50%;content:"";flex-shrink:0;height:10px;width:10px}[data-theme=forja] .eb-player .eb-error{background:rgba(0,0,0,.88)}[data-theme=forja] .eb-player .eb-error-retry{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.15);border-radius:3px;transition:background .2s}[data-theme=forja] .eb-player .eb-error-retry:hover{background:hsla(0,0%,100%,.18)}[data-theme=forja] .eb-player .eb-toast{background:hsla(0,0%,8%,.9);border-radius:3px;font-size:13px;padding:7px 14px}[data-theme=lequipe]{--eb-color-primary:#d61e00;--eb-color-progress:#d61e00;--eb-accent:#d61e00}[data-theme=lequipe] .eb-player{--eb-color-background:rgba(10,10,20,.85);--eb-color-text:#fff;--eb-font-family:"Inter",-apple-system,sans-serif;--eb-font-size-base:14px;--eb-radius-control:8px;--eb-duration-transition:200ms;border-radius:0;box-shadow:none;color:#fff;font-family:Inter,-apple-system,sans-serif}[data-theme=lequipe] .eb-player .eb-icon{stroke-width:2.5}[data-theme=lequipe] .eb-player:-webkit-full-screen,[data-theme=lequipe] .eb-player:fullscreen{border-radius:0;box-shadow:none}[data-theme=lequipe] .eb-player .eb-top-bar{background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);gap:6px;height:110px;padding:14px 16px}[data-theme=lequipe] .eb-player .eb-bottom-bar__gradient{background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);height:150px}[data-theme=lequipe] .eb-player.eb-controls-visible .eb-top-bar{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}[data-theme=lequipe] .eb-player.eb-controls-hidden .eb-top-bar{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}[data-theme=lequipe] .eb-player .eb-top-bar__actions{gap:6px}[data-theme=lequipe] .eb-player .eb-top-bar__logo{max-height:32px;max-width:120px;opacity:.85}[data-theme=lequipe] .eb-player .eb-bottom-bar__controls-row{gap:8px;padding:0 14px 12px}[data-theme=lequipe] .eb-player.eb-controls-visible .eb-bottom-bar{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}[data-theme=lequipe] .eb-player.eb-controls-hidden .eb-bottom-bar{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}[data-theme=lequipe] .eb-player .eb-middle-bar{gap:28px}[data-theme=lequipe] .eb-player.eb-controls-visible .eb-middle-bar{opacity:1;transition:opacity .3s}[data-theme=lequipe] .eb-player.eb-controls-hidden .eb-middle-bar{opacity:0;transition:opacity .3s}[data-theme=lequipe] .eb-player .eb-middle-bar__play-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.15);border:2px solid hsla(0,0%,100%,.25);border-radius:50%;color:#fff;display:flex;height:80px;justify-content:center;padding:0;transition:background .15s,transform .25s,opacity .25s;width:80px}[data-theme=lequipe] .eb-player .eb-middle-bar__play-btn:hover{background:hsla(0,0%,100%,.25)}[data-theme=lequipe] .eb-player .eb-middle-bar__play-btn:active{transform:scale(.92)}[data-theme=lequipe] .eb-player .eb-middle-bar__play-btn .eb-icon{stroke-width:2.5;height:32px;width:32px}[data-theme=lequipe] .eb-player .eb-middle-bar__seek-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.15);border:2px solid hsla(0,0%,100%,.25);border-radius:50%;color:#fff;display:flex;flex-direction:column;gap:1px;height:56px;justify-content:center;padding:0;transition:background .15s;width:56px}[data-theme=lequipe] .eb-player .eb-middle-bar__seek-btn:hover{background:hsla(0,0%,100%,.25)}[data-theme=lequipe] .eb-player .eb-seek-circle{fill:currentColor;stroke:none;color:hsla(0,0%,100%,.85);height:24px;width:24px}[data-theme=lequipe] .eb-player .eb-seek-label{color:hsla(0,0%,100%,.9);font-size:.75em;font-weight:700;line-height:1}[data-theme=lequipe] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn),[data-theme=lequipe] .eb-player .eb-cast,[data-theme=lequipe] .eb-player .eb-fullscreen,[data-theme=lequipe] .eb-player .eb-live-sync,[data-theme=lequipe] .eb-player .eb-pip,[data-theme=lequipe] .eb-player .eb-play-pause,[data-theme=lequipe] .eb-player .eb-volume-mute{border-radius:8px;color:hsla(0,0%,100%,.82);flex-shrink:0;height:38px;transition:background .15s,color .15s,transform .1s;width:38px}[data-theme=lequipe] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):hover,[data-theme=lequipe] .eb-player .eb-cast:hover,[data-theme=lequipe] .eb-player .eb-fullscreen:hover,[data-theme=lequipe] .eb-player .eb-live-sync:hover,[data-theme=lequipe] .eb-player .eb-pip:hover,[data-theme=lequipe] .eb-player .eb-play-pause:hover,[data-theme=lequipe] .eb-player .eb-volume-mute:hover{background:hsla(0,0%,100%,.12);color:#fff}[data-theme=lequipe] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):active,[data-theme=lequipe] .eb-player .eb-cast:active,[data-theme=lequipe] .eb-player .eb-fullscreen:active,[data-theme=lequipe] .eb-player .eb-live-sync:active,[data-theme=lequipe] .eb-player .eb-pip:active,[data-theme=lequipe] .eb-player .eb-play-pause:active,[data-theme=lequipe] .eb-player .eb-volume-mute:active{transform:scale(.88)}[data-theme=lequipe] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn) .eb-icon,[data-theme=lequipe] .eb-player .eb-cast .eb-icon,[data-theme=lequipe] .eb-player .eb-fullscreen .eb-icon,[data-theme=lequipe] .eb-player .eb-pip .eb-icon,[data-theme=lequipe] .eb-player .eb-play-pause .eb-icon,[data-theme=lequipe] .eb-player .eb-volume-mute .eb-icon{height:22px;width:22px}[data-theme=lequipe] .eb-player .eb-top-bar .eb-icon{height:24px;width:24px}[data-theme=lequipe] .eb-player .eb-middle-bar__play-btn .eb-icon,[data-theme=lequipe] .eb-player .eb-play-pause .eb-icon{fill:currentColor;stroke:none}[data-theme=lequipe] .eb-player .eb-volume-mute .eb-icon path:first-child{fill:currentColor}[data-theme=lequipe] .eb-player .eb-cast-active{background:rgba(30,182,212,.15)!important;color:#1eb6d4!important}[data-theme=lequipe] .eb-player .eb-cast-active .eb-icon{filter:drop-shadow(0 0 4px rgba(30,182,212,.6))}[data-theme=lequipe] .eb-player .eb-seekbar-track{background:hsla(0,0%,100%,.22);border-radius:3px;height:3px;transition:height .15s}[data-theme=lequipe] .eb-player .eb-seekbar:hover .eb-seekbar-track{height:5px}[data-theme=lequipe] .eb-player .eb-seekbar-buffered{background:hsla(0,0%,100%,.28);border-radius:3px;transition:height .15s}[data-theme=lequipe] .eb-player .eb-seekbar-progress{background:var(--eb-color-progress,var(--eb-color-primary,#d61e00));border-radius:3px;transition:height .15s}[data-theme=lequipe] .eb-player .eb-seekbar-thumb{background:#fff;box-shadow:0 0 0 3px rgba(214,30,0,.45);height:14px;inset-inline-end:-7px;width:14px}[data-theme=lequipe] .eb-player .eb-seekbar-tooltip{align-items:center;background:rgba(0,0,0,.88);border:1px solid hsla(0,0%,100%,.12);border-radius:7px;bottom:28px;box-shadow:0 4px 16px rgba(0,0,0,.5);display:flex;flex-direction:column;font-size:11px;font-weight:500;overflow:hidden;padding:0}[data-theme=lequipe] .eb-player .eb-seekbar-preview{background:#111;border:none;border-radius:0;height:90px;margin:0;width:160px}[data-theme=lequipe] .eb-player .eb-chapter-marker{background:rgba(0,0,0,.45);border-radius:1px;height:7px;top:50%;transform:translate(var(--eb-chapter-marker-x,-50%),-50%);width:2px}[data-theme=lequipe] .eb-player .eb-volume-control{flex-direction:row;gap:0;margin-inline-end:0}[data-theme=lequipe] .eb-player .eb-volume-track{background:hsla(0,0%,100%,.22);border-radius:3px;height:3px;margin:0;overflow:hidden;transition:width .25s ease,margin .25s ease;width:0}[data-theme=lequipe] .eb-player .eb-volume-control:focus-within .eb-volume-track,[data-theme=lequipe] .eb-player .eb-volume-control:hover .eb-volume-track{margin:0 6px 0 2px;width:66px}[data-theme=lequipe] .eb-player .eb-volume-fill{background:var(--eb-color-primary,#d61e00)}[data-theme=lequipe] .eb-player .eb-volume-thumb{background:#fff;box-shadow:0 0 0 2px hsla(0,0%,100%,.35);height:11px;transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(0);transition:transform .15s;width:11px}[data-theme=lequipe] .eb-player .eb-volume-control:hover .eb-volume-thumb{transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(1)}[data-theme=lequipe] .eb-player .eb-time-display{color:hsla(0,0%,100%,.85);font-size:13px;font-weight:500;letter-spacing:.02em}[data-theme=lequipe] .eb-player .eb-live-sync{border-radius:6px;font-size:11px;font-weight:700;gap:5px;height:auto;letter-spacing:.08em;padding:4px 10px;text-transform:uppercase;width:auto}[data-theme=lequipe] .eb-player .eb-live-sync__icon{display:none}[data-theme=lequipe] .eb-player .eb-live-sync__dot{background:#fff;border-radius:50%;display:block;flex-shrink:0;height:6px;width:6px}[data-theme=lequipe] .eb-player .eb-live-sync__label{display:block}[data-theme=lequipe] .eb-player .eb-live-synced{background:rgba(214,30,0,.9);box-shadow:0 2px 8px rgba(214,30,0,.4);color:#fff}[data-theme=lequipe] .eb-player .eb-live-synced .eb-live-sync__dot{animation:eb-lequipe-blink 1.2s ease infinite}[data-theme=lequipe] .eb-player .eb-live-sync:not(.eb-live-synced){background:rgba(60,60,80,.75);box-shadow:none;color:hsla(0,0%,100%,.7)}[data-theme=lequipe] .eb-player .eb-live-sync:not(.eb-live-synced) .eb-live-sync__dot{animation:none;background:hsla(0,0%,100%,.5)}[data-theme=lequipe] .eb-player .eb-live-sync:not(.eb-live-synced):hover{background:rgba(214,30,0,.7);color:#fff}@keyframes eb-lequipe-blink{0%,to{opacity:1}50%{opacity:.15}}[data-theme=lequipe] .eb-player .eb-settings-panel{backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);background:rgba(30,30,45,.6);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.08);max-height:60vh;overflow-x:hidden;overflow-y:auto;width:min(340px,80vw)}@media (max-height:400px){[data-theme=lequipe] .eb-player .eb-settings-category{font-size:13px;gap:10px;padding:12px 14px}[data-theme=lequipe] .eb-player .eb-settings-item{font-size:13px;padding:11px 14px}[data-theme=lequipe] .eb-player .eb-settings-header{padding:10px 14px}[data-theme=lequipe] .eb-player .eb-settings-panel{border-radius:10px;min-width:220px}[data-theme=lequipe] .eb-player .eb-settings-back{height:30px;width:30px}}[data-theme=lequipe] .eb-player .eb-settings-menu{padding:0}[data-theme=lequipe] .eb-player .eb-settings-category{align-items:center;background:none;border:none;color:hsla(0,0%,100%,.95);cursor:pointer;display:flex;font-size:14px;gap:14px;padding:18px 20px;text-align:start;transition:background .12s;width:100%}[data-theme=lequipe] .eb-player .eb-settings-category:last-child{border-bottom:none}[data-theme=lequipe] .eb-player .eb-settings-category:hover{background:hsla(0,0%,100%,.05)}[data-theme=lequipe] .eb-player .eb-settings-category__icon{align-items:center;color:hsla(0,0%,100%,.6);display:flex;flex-shrink:0;justify-content:center}[data-theme=lequipe] .eb-player .eb-settings-category__icon .eb-icon{height:22px;width:22px}[data-theme=lequipe] .eb-player .eb-settings-category__label{flex:1;font-weight:400}[data-theme=lequipe] .eb-player .eb-settings-category__value{color:hsla(0,0%,100%,.45);font-size:13px;font-weight:400}[data-theme=lequipe] .eb-player .eb-settings-category__chevron{align-items:center;color:hsla(0,0%,100%,.3);display:flex;flex-shrink:0}[data-theme=lequipe] .eb-player .eb-settings-category__chevron .eb-icon{height:16px;width:16px}[data-theme=lequipe] .eb-player .eb-settings-header{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.08);display:flex;gap:12px;padding:14px 18px}[data-theme=lequipe] .eb-player .eb-settings-header__title{color:#fff;font-size:15px;font-weight:600}[data-theme=lequipe] .eb-player .eb-settings-back{align-items:center;background:hsla(0,0%,100%,.12);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;padding:0;transition:background .15s;width:36px}[data-theme=lequipe] .eb-player .eb-settings-back:hover{background:hsla(0,0%,100%,.2)}[data-theme=lequipe] .eb-player .eb-settings-back .eb-icon{height:18px;width:18px}[data-theme=lequipe] .eb-player .eb-settings-item{align-items:center;background:none;border:none;border-bottom:1px solid hsla(0,0%,100%,.06);color:hsla(0,0%,100%,.7);cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:16px 20px;text-align:start;transition:background .12s;width:100%}[data-theme=lequipe] .eb-player .eb-settings-item:last-child{border-bottom:none}[data-theme=lequipe] .eb-player .eb-settings-item:hover{background:hsla(0,0%,100%,.05)}[data-theme=lequipe] .eb-player .eb-settings-item--selected{color:#fff;font-weight:500}[data-theme=lequipe] .eb-player .eb-settings-item--selected:after{background:var(--eb-accent,#d61e00);border-radius:50%;content:"";flex-shrink:0;height:12px;width:12px}[data-theme=lequipe] .eb-player .eb-settings-item:not(.eb-settings-item--selected):after{border:2px solid hsla(0,0%,100%,.2);border-radius:50%;content:"";flex-shrink:0;height:12px;width:12px}[data-theme=lequipe] .eb-player .eb-error{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.85)}[data-theme=lequipe] .eb-player .eb-error-message{font-weight:400;letter-spacing:.01em}[data-theme=lequipe] .eb-player .eb-error-retry{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.15);border-radius:8px;transition:background .2s,color .2s}[data-theme=lequipe] .eb-player .eb-error-retry:hover{background:hsla(0,0%,100%,.18)}[data-theme=lequipe] .eb-player .eb-toast{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.72);border-radius:10px;font-size:13px;padding:8px 16px}[data-theme=lequipe] .eb-player .eb-info-overlay,[data-theme=lequipe] .eb-player .eb-socials-overlay{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.85)}[data-theme=lequipe] .eb-player .eb-info-close,[data-theme=lequipe] .eb-player .eb-socials-close{background:hsla(0,0%,100%,.07);border-color:hsla(0,0%,100%,.08);border-radius:8px;transition:background .2s,color .2s}[data-theme=lequipe] .eb-player .eb-info-close:hover,[data-theme=lequipe] .eb-player .eb-socials-close:hover{background:hsla(0,0%,100%,.13);color:#fff}[data-theme=lequipe] .eb-player .eb-socials-link{background:hsla(0,0%,100%,.07);border:1px solid hsla(0,0%,100%,.08);border-radius:8px;transition:background .2s,color .2s,border-color .2s}[data-theme=lequipe] .eb-player .eb-socials-link:hover{background:rgba(214,30,0,.15);border-color:rgba(214,30,0,.35);color:#ff8a75}[data-theme=lequipe] .eb-player .eb-poster,[data-theme=lequipe] .eb-player .eb-radio-overlay{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}[data-theme=lequipe] .eb-player .eb-radio-bar{background:rgba(214,30,0,.8)}[data-theme=lequipe] .eb-player .eb-chapter-skip{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.55);border:1px solid hsla(0,0%,100%,.15);border-radius:8px;font-size:12px;font-weight:500;transition:background .15s}[data-theme=lequipe] .eb-player .eb-chapter-skip:hover{background:hsla(0,0%,100%,.12)}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");[data-theme=modern] .eb-player .eb-icon{fill:currentColor;stroke:none;stroke-width:0}[data-theme=modern]{--eb-color-primary:#7c3aed;--eb-color-progress:#7c3aed;--eb-accent:#1a73e8}[data-theme=modern] .eb-player{--eb-color-background:rgba(10,10,20,.85);--eb-font-family:"Inter",sans-serif;border-radius:14px;box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 0 1px hsla(0,0%,100%,.06);font-family:Inter,sans-serif}[data-theme=modern] .eb-player .eb-top-bar{background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);gap:6px;height:110px;padding:14px 16px}[data-theme=modern] .eb-player .eb-bottom-bar__gradient{background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);height:150px}[data-theme=modern] .eb-player.eb-controls-visible .eb-top-bar{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}[data-theme=modern] .eb-player.eb-controls-hidden .eb-top-bar{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}[data-theme=modern] .eb-player .eb-top-bar__actions{gap:6px}[data-theme=modern] .eb-player .eb-bottom-bar__controls-row{gap:8px;padding:0 14px 12px}[data-theme=modern] .eb-player.eb-controls-visible .eb-bottom-bar{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}[data-theme=modern] .eb-player.eb-controls-hidden .eb-bottom-bar{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}[data-theme=modern] .eb-player .eb-middle-bar{gap:28px}[data-theme=modern] .eb-player.eb-controls-visible .eb-middle-bar{opacity:1;transition:opacity .3s}[data-theme=modern] .eb-player.eb-controls-hidden .eb-middle-bar{opacity:0;transition:opacity .3s}[data-theme=modern] .eb-player .eb-middle-bar__play-btn{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:hsla(0,0%,100%,.18);border:2px solid hsla(0,0%,100%,.28);height:72px;transition:background .15s;width:72px}[data-theme=modern] .eb-player .eb-middle-bar__play-btn:hover{background:hsla(0,0%,100%,.28)}[data-theme=modern] .eb-player .eb-middle-bar__play-btn .eb-icon{height:30px;width:30px}[data-theme=modern] .eb-player .eb-middle-bar__seek-btn{align-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:hsla(0,0%,100%,.14);border:1.5px solid hsla(0,0%,100%,.22);border-radius:50%;flex-direction:column;gap:1px;height:52px;justify-content:center;padding:0;transition:background .15s;width:52px}[data-theme=modern] .eb-player .eb-middle-bar__seek-btn:hover{background:hsla(0,0%,100%,.24)}[data-theme=modern] .eb-player .eb-seek-circle{fill:#fff;stroke:none;height:18px;width:18px}[data-theme=modern] .eb-player .eb-seek-label{color:hsla(0,0%,100%,.9);font-size:.58em;font-weight:700;line-height:1}[data-theme=modern] .eb-player .eb-button,[data-theme=modern] .eb-player .eb-cast,[data-theme=modern] .eb-player .eb-fullscreen,[data-theme=modern] .eb-player .eb-live-sync,[data-theme=modern] .eb-player .eb-pip,[data-theme=modern] .eb-player .eb-play-pause,[data-theme=modern] .eb-player .eb-volume-mute{border-radius:8px;color:hsla(0,0%,100%,.82);flex-shrink:0;height:38px;transition:background .15s,color .15s,transform .1s;width:38px}[data-theme=modern] .eb-player .eb-button:hover,[data-theme=modern] .eb-player .eb-cast:hover,[data-theme=modern] .eb-player .eb-fullscreen:hover,[data-theme=modern] .eb-player .eb-live-sync:hover,[data-theme=modern] .eb-player .eb-pip:hover,[data-theme=modern] .eb-player .eb-play-pause:hover,[data-theme=modern] .eb-player .eb-volume-mute:hover{background:hsla(0,0%,100%,.12);color:#fff}[data-theme=modern] .eb-player .eb-button:active,[data-theme=modern] .eb-player .eb-cast:active,[data-theme=modern] .eb-player .eb-fullscreen:active,[data-theme=modern] .eb-player .eb-live-sync:active,[data-theme=modern] .eb-player .eb-pip:active,[data-theme=modern] .eb-player .eb-play-pause:active,[data-theme=modern] .eb-player .eb-volume-mute:active{transform:scale(.88)}[data-theme=modern] .eb-player .eb-seekbar-track{background:hsla(0,0%,100%,.22);border-radius:3px;height:3px;transition:height .15s}[data-theme=modern] .eb-player .eb-seekbar:hover .eb-seekbar-track{height:5px}[data-theme=modern] .eb-player .eb-seekbar-buffered{background:hsla(0,0%,100%,.28);border-radius:3px;transition:height .15s}[data-theme=modern] .eb-player .eb-seekbar-progress{background:var(--eb-color-progress,var(--eb-color-primary,#7c3aed));border-radius:3px;transition:height .15s}[data-theme=modern] .eb-player .eb-seekbar-thumb{background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.45);height:14px;inset-inline-end:-7px;width:14px}[data-theme=modern] .eb-player .eb-seekbar-tooltip{background:rgba(0,0,0,.82);border-radius:5px;bottom:24px;font-size:11px;padding:3px 7px}[data-theme=modern] .eb-player .eb-seekbar-preview{background:#111;border:2px solid hsla(0,0%,100%,.16);border-radius:6px;height:72px;width:128px}[data-theme=modern] .eb-player .eb-chapter-marker{background:rgba(0,0,0,.45);border-radius:1px;height:7px;top:50%;transform:translate(var(--eb-chapter-marker-x,-50%),-50%);width:2px}[data-theme=modern] .eb-player .eb-volume-control{flex-direction:row;gap:0;margin-inline-end:0}[data-theme=modern] .eb-player .eb-volume-track{background:hsla(0,0%,100%,.22);border-radius:3px;height:3px;margin:0;overflow:hidden;transition:width .25s ease,margin .25s ease;width:0}[data-theme=modern] .eb-player .eb-volume-control:focus-within .eb-volume-track,[data-theme=modern] .eb-player .eb-volume-control:hover .eb-volume-track{margin:0 6px 0 2px;width:66px}[data-theme=modern] .eb-player .eb-volume-fill{background:var(--eb-color-primary,#7c3aed)}[data-theme=modern] .eb-player .eb-volume-thumb{background:#fff;box-shadow:0 0 0 2px hsla(0,0%,100%,.35);height:11px;transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(0);transition:transform .15s;width:11px}[data-theme=modern] .eb-player .eb-volume-control:hover .eb-volume-thumb{transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(1)}[data-theme=modern] .eb-player .eb-time-display{color:hsla(0,0%,100%,.6);font-size:12px;letter-spacing:.02em}[data-theme=modern] .eb-player .eb-live-sync{border-radius:6px;font-size:11px;font-weight:700;height:auto;letter-spacing:.08em;padding:4px 10px;text-transform:uppercase;width:auto}[data-theme=modern] .eb-player .eb-live-synced{background:rgba(220,38,38,.9);box-shadow:0 2px 8px rgba(220,38,38,.4);color:#fff}[data-theme=modern] .eb-player .eb-settings-panel{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);background:rgba(10,10,20,.55);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.1);min-width:280px}[data-theme=modern] .eb-player .eb-settings-menu{padding:0}[data-theme=modern] .eb-player .eb-settings-back,[data-theme=modern] .eb-player .eb-settings-category,[data-theme=modern] .eb-player .eb-settings-item{border-bottom:1px solid hsla(0,0%,100%,.06);color:hsla(0,0%,100%,.9);font-size:13px;padding:15px 20px;transition:background .12s}[data-theme=modern] .eb-player .eb-settings-category:last-child,[data-theme=modern] .eb-player .eb-settings-item:last-child{border-bottom:none}[data-theme=modern] .eb-player .eb-settings-back:hover,[data-theme=modern] .eb-player .eb-settings-category:hover,[data-theme=modern] .eb-player .eb-settings-item:hover{background:hsla(0,0%,100%,.05)}[data-theme=modern] .eb-player .eb-settings-item--selected{color:#fff;font-weight:500}[data-theme=modern] .eb-player .eb-settings-item--selected:after{background:#1a73e8;border-radius:50%;box-shadow:0 0 0 3px rgba(26,115,232,.25);content:"";flex-shrink:0;height:10px;width:10px}[data-theme=modern] .eb-player .eb-settings-item:not(.eb-settings-item--selected):after{border:2px solid hsla(0,0%,100%,.2);border-radius:50%;content:"";flex-shrink:0;height:10px;width:10px}[data-theme=modern] .eb-player .eb-settings-back{font-weight:600;gap:14px}[data-theme=modern] .eb-player .eb-error{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.85)}[data-theme=modern] .eb-player .eb-error-retry{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.15);border-radius:8px;transition:background .2s,color .2s}[data-theme=modern] .eb-player .eb-error-retry:hover{background:hsla(0,0%,100%,.18)}[data-theme=modern] .eb-player .eb-toast{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.72);border-radius:10px;font-size:13px}[data-theme=modern] .eb-player .eb-info-overlay,[data-theme=modern] .eb-player .eb-socials-overlay{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.85)}[data-theme=modern] .eb-player .eb-info-close,[data-theme=modern] .eb-player .eb-socials-close{background:hsla(0,0%,100%,.07);border-color:hsla(0,0%,100%,.08);border-radius:8px;transition:background .2s,color .2s}[data-theme=modern] .eb-player .eb-info-close:hover,[data-theme=modern] .eb-player .eb-socials-close:hover{background:hsla(0,0%,100%,.13);color:#fff}[data-theme=modern] .eb-player .eb-socials-link{background:hsla(0,0%,100%,.07);border:1px solid hsla(0,0%,100%,.08);border-radius:8px;transition:background .2s,color .2s}[data-theme=modern] .eb-player .eb-socials-link:hover{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.35);color:#c4b5fd}[data-theme=modern] .eb-player .eb-bottom-bar__controls-row{flex-wrap:wrap}[data-theme=modern] .eb-player .eb-bottom-bar__seekbar-zone{flex:none;margin-bottom:-6px;order:-1;width:100%}[data-theme=modern] .eb-player .eb-slot-time{margin-inline-start:auto;order:-1}[data-theme=modern] .eb-player .eb-slot-live-sync{order:-2}[data-theme=modern] .eb-player .eb-slot-settings{margin-inline-start:auto}[data-theme=modern] .eb-player .eb-poster{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}[data-theme=radio]{--eb-color-primary:#f4a261}[data-theme=radio] .eb-player{--eb-color-background:rgba(20,20,30,.95)}[data-theme=snrt]{--eb-color-primary:#063}[data-theme=snrt] .eb-player{--eb-color-background:rgba(0,0,0,.9)}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");[data-theme=v2]{--eb-color-primary:#3d4097;--eb-color-progress:#3d4097;--eb-accent:#3d4097}[data-theme=v2] .eb-player{--eb-color-background:rgba(10,10,20,.85);--eb-color-text:#fff;--eb-font-family:"Inter",-apple-system,sans-serif;--eb-font-size-base:14px;--eb-radius-control:8px;--eb-duration-transition:200ms;border-radius:14px;box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 0 1px hsla(0,0%,100%,.06);color:#fff;font-family:Inter,-apple-system,sans-serif}[data-theme=v2] .eb-player .eb-icon{stroke-width:2.5}[data-theme=v2] .eb-player:-webkit-full-screen,[data-theme=v2] .eb-player:fullscreen{border-radius:0;box-shadow:none}[data-theme=v2] .eb-player .eb-top-bar{background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);gap:6px;height:110px;padding:14px 16px}[data-theme=v2] .eb-player .eb-bottom-bar__gradient{background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);height:150px}[data-theme=v2] .eb-player.eb-controls-visible .eb-top-bar{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}[data-theme=v2] .eb-player.eb-controls-hidden .eb-top-bar{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}[data-theme=v2] .eb-player .eb-top-bar__actions{gap:6px}[data-theme=v2] .eb-player .eb-top-bar__logo{max-height:32px;max-width:120px;opacity:.85}[data-theme=v2] .eb-player .eb-bottom-bar__controls-row{gap:8px;padding:0 14px 12px}[data-theme=v2] .eb-player.eb-controls-visible .eb-bottom-bar{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}[data-theme=v2] .eb-player.eb-controls-hidden .eb-bottom-bar{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}[data-theme=v2] .eb-player .eb-bottom-bar__controls-row{align-items:center;flex-wrap:wrap;row-gap:2px}[data-theme=v2] .eb-player .eb-slot-live-sync,[data-theme=v2] .eb-player .eb-slot-time{order:-1}[data-theme=v2] .eb-player .eb-slot-live-sync{margin-inline-start:46px}[data-theme=v2] .eb-player .eb-bottom-bar__controls-row:after{content:"";flex-shrink:0;height:0;order:0;width:100%}[data-theme=v2] .eb-player .eb-bottom-bar__seekbar-zone,[data-theme=v2] .eb-player .eb-slot-fullscreen,[data-theme=v2] .eb-player .eb-slot-play-pause,[data-theme=v2] .eb-player .eb-slot-volume{order:1}[data-theme=v2] .eb-player .eb-middle-bar{gap:28px}[data-theme=v2] .eb-player.eb-controls-visible .eb-middle-bar{opacity:1;transition:opacity .3s}[data-theme=v2] .eb-player.eb-controls-hidden .eb-middle-bar{opacity:0;transition:opacity .3s}[data-theme=v2] .eb-player .eb-middle-bar__play-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.15);border:2px solid hsla(0,0%,100%,.25);border-radius:50%;color:#fff;display:flex;height:80px;justify-content:center;padding:0;transition:background .15s,transform .25s,opacity .25s;width:80px}[data-theme=v2] .eb-player .eb-middle-bar__play-btn:hover{background:hsla(0,0%,100%,.25)}[data-theme=v2] .eb-player .eb-middle-bar__play-btn:active{transform:scale(.92)}[data-theme=v2] .eb-player .eb-middle-bar__play-btn .eb-icon{stroke-width:2.5;height:32px;width:32px}[data-theme=v2] .eb-player .eb-middle-bar__seek-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.15);border:2px solid hsla(0,0%,100%,.25);border-radius:50%;color:#fff;display:flex;flex-direction:column;gap:1px;height:56px;justify-content:center;padding:0;transition:background .15s;width:56px}[data-theme=v2] .eb-player .eb-middle-bar__seek-btn:hover{background:hsla(0,0%,100%,.25)}[data-theme=v2] .eb-player .eb-seek-circle{fill:currentColor;stroke:none;color:hsla(0,0%,100%,.85);height:24px;width:24px}[data-theme=v2] .eb-player .eb-seek-label{color:hsla(0,0%,100%,.9);font-size:.75em;font-weight:700;line-height:1}[data-theme=v2] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn),[data-theme=v2] .eb-player .eb-cast,[data-theme=v2] .eb-player .eb-fullscreen,[data-theme=v2] .eb-player .eb-live-sync,[data-theme=v2] .eb-player .eb-pip,[data-theme=v2] .eb-player .eb-play-pause,[data-theme=v2] .eb-player .eb-volume-mute{border-radius:8px;color:hsla(0,0%,100%,.82);flex-shrink:0;height:38px;transition:background .15s,color .15s,transform .1s;width:38px}[data-theme=v2] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):hover,[data-theme=v2] .eb-player .eb-cast:hover,[data-theme=v2] .eb-player .eb-fullscreen:hover,[data-theme=v2] .eb-player .eb-live-sync:hover,[data-theme=v2] .eb-player .eb-pip:hover,[data-theme=v2] .eb-player .eb-play-pause:hover,[data-theme=v2] .eb-player .eb-volume-mute:hover{background:hsla(0,0%,100%,.12);color:#fff}[data-theme=v2] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):active,[data-theme=v2] .eb-player .eb-cast:active,[data-theme=v2] .eb-player .eb-fullscreen:active,[data-theme=v2] .eb-player .eb-live-sync:active,[data-theme=v2] .eb-player .eb-pip:active,[data-theme=v2] .eb-player .eb-play-pause:active,[data-theme=v2] .eb-player .eb-volume-mute:active{transform:scale(.88)}[data-theme=v2] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn) .eb-icon,[data-theme=v2] .eb-player .eb-cast .eb-icon,[data-theme=v2] .eb-player .eb-fullscreen .eb-icon,[data-theme=v2] .eb-player .eb-pip .eb-icon,[data-theme=v2] .eb-player .eb-play-pause .eb-icon,[data-theme=v2] .eb-player .eb-volume-mute .eb-icon{height:22px;width:22px}[data-theme=v2] .eb-player .eb-top-bar .eb-icon{height:24px;width:24px}[data-theme=v2] .eb-player .eb-middle-bar__play-btn .eb-icon,[data-theme=v2] .eb-player .eb-play-pause .eb-icon{fill:currentColor;stroke:none}[data-theme=v2] .eb-player .eb-volume-mute .eb-icon path:first-child{fill:currentColor}[data-theme=v2] .eb-player .eb-cast-active{background:rgba(30,182,212,.15)!important;color:#1eb6d4!important}[data-theme=v2] .eb-player .eb-cast-active .eb-icon{filter:drop-shadow(0 0 4px rgba(30,182,212,.6))}[data-theme=v2] .eb-player .eb-seekbar-track{background:hsla(0,0%,100%,.22);border-radius:3px;height:3px;transition:height .15s}[data-theme=v2] .eb-player .eb-seekbar:hover .eb-seekbar-track{height:5px}[data-theme=v2] .eb-player .eb-seekbar-buffered{background:hsla(0,0%,100%,.28);border-radius:3px;transition:height .15s}[data-theme=v2] .eb-player .eb-seekbar-progress{background:linear-gradient(90deg,var(--eb-color-progress,var(--eb-color-primary,#3d4097)),color-mix(in srgb,var(--eb-color-progress,var(--eb-color-primary,#3d4097)) 70%,#fff));border-radius:3px;transition:height .15s}[data-theme=v2] .eb-player .eb-seekbar-thumb{background:#fff;box-shadow:0 0 0 3px rgba(61,64,151,.45);height:14px;inset-inline-end:-7px;width:14px}[data-theme=v2] .eb-player .eb-seekbar-tooltip{align-items:center;background:rgba(0,0,0,.88);border:1px solid hsla(0,0%,100%,.12);border-radius:7px;bottom:28px;box-shadow:0 4px 16px rgba(0,0,0,.5);display:flex;flex-direction:column;font-size:11px;font-weight:500;overflow:hidden;padding:0}[data-theme=v2] .eb-player .eb-seekbar-preview{background:#111;border:none;border-radius:0;height:90px;margin:0;width:160px}[data-theme=v2] .eb-player .eb-chapter-marker{background:rgba(0,0,0,.45);border-radius:1px;height:7px;top:50%;transform:translate(var(--eb-chapter-marker-x,-50%),-50%);width:2px}[data-theme=v2] .eb-player .eb-volume-control{flex-direction:row;gap:0;margin-inline-end:0}[data-theme=v2] .eb-player .eb-volume-track{background:hsla(0,0%,100%,.22);border-radius:3px;height:3px;margin:0;overflow:hidden;transition:width .25s ease,margin .25s ease;width:0}[data-theme=v2] .eb-player .eb-volume-control:focus-within .eb-volume-track,[data-theme=v2] .eb-player .eb-volume-control:hover .eb-volume-track{margin:0 6px 0 2px;width:66px}[data-theme=v2] .eb-player .eb-volume-fill{background:var(--eb-color-primary,#3d4097)}[data-theme=v2] .eb-player .eb-volume-thumb{background:#fff;box-shadow:0 0 0 2px hsla(0,0%,100%,.35);height:11px;transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(0);transition:transform .15s;width:11px}[data-theme=v2] .eb-player .eb-volume-control:hover .eb-volume-thumb{transform:translate(var(--eb-volume-thumb-x,-50%),-50%) scale(1)}[data-theme=v2] .eb-player .eb-time-display{color:hsla(0,0%,100%,.85);font-size:13px;font-weight:500;letter-spacing:.02em}[data-theme=v2] .eb-player .eb-live-sync{border-radius:6px;font-size:11px;font-weight:700;gap:5px;height:auto;letter-spacing:.08em;padding:4px 10px;text-transform:uppercase;width:auto}[data-theme=v2] .eb-player .eb-live-sync__icon{display:none}[data-theme=v2] .eb-player .eb-live-sync__dot{background:#fff;border-radius:50%;display:block;flex-shrink:0;height:6px;width:6px}[data-theme=v2] .eb-player .eb-live-sync__label{display:block}[data-theme=v2] .eb-player .eb-live-synced{background:rgba(220,38,38,.9);box-shadow:0 2px 8px rgba(220,38,38,.4);color:#fff}[data-theme=v2] .eb-player .eb-live-synced .eb-live-sync__dot{animation:eb-v2-blink 1.2s ease infinite}[data-theme=v2] .eb-player .eb-live-sync:not(.eb-live-synced){background:rgba(60,60,80,.75);box-shadow:none;color:hsla(0,0%,100%,.7)}[data-theme=v2] .eb-player .eb-live-sync:not(.eb-live-synced) .eb-live-sync__dot{animation:none;background:hsla(0,0%,100%,.5)}[data-theme=v2] .eb-player .eb-live-sync:not(.eb-live-synced):hover{background:rgba(220,38,38,.7);color:#fff}@keyframes eb-v2-blink{0%,to{opacity:1}50%{opacity:.15}}[data-theme=v2] .eb-player .eb-settings-panel{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);background:rgba(10,10,20,.55);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.1);min-width:300px}[data-theme=v2] .eb-player .eb-settings-menu{padding:0}[data-theme=v2] .eb-player .eb-settings-back,[data-theme=v2] .eb-player .eb-settings-category,[data-theme=v2] .eb-player .eb-settings-item{border-bottom:1px solid hsla(0,0%,100%,.06);color:hsla(0,0%,100%,.9);font-size:13px;padding:15px 20px;transition:background .12s}[data-theme=v2] .eb-player .eb-settings-category:last-child,[data-theme=v2] .eb-player .eb-settings-item:last-child{border-bottom:none}[data-theme=v2] .eb-player .eb-settings-back:hover,[data-theme=v2] .eb-player .eb-settings-category:hover,[data-theme=v2] .eb-player .eb-settings-item:hover{background:hsla(0,0%,100%,.05)}[data-theme=v2] .eb-player .eb-settings-item--selected{color:#fff;font-weight:500}[data-theme=v2] .eb-player .eb-settings-item--selected:after{background:var(--eb-accent,#3d4097);border-radius:50%;box-shadow:0 0 0 3px rgba(61,64,151,.25);content:"";flex-shrink:0;height:10px;width:10px}[data-theme=v2] .eb-player .eb-settings-item:not(.eb-settings-item--selected):after{border:2px solid hsla(0,0%,100%,.2);border-radius:50%;content:"";flex-shrink:0;height:10px;width:10px}[data-theme=v2] .eb-player .eb-settings-back{font-weight:600;gap:14px}[data-theme=v2] .eb-player .eb-error{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.85)}[data-theme=v2] .eb-player .eb-error-message{font-weight:400;letter-spacing:.01em}[data-theme=v2] .eb-player .eb-error-retry{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.15);border-radius:8px;transition:background .2s,color .2s}[data-theme=v2] .eb-player .eb-error-retry:hover{background:hsla(0,0%,100%,.18)}[data-theme=v2] .eb-player .eb-toast{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.72);border-radius:10px;font-size:13px;padding:8px 16px}[data-theme=v2] .eb-player .eb-info-overlay,[data-theme=v2] .eb-player .eb-socials-overlay{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.85)}[data-theme=v2] .eb-player .eb-info-close,[data-theme=v2] .eb-player .eb-socials-close{background:hsla(0,0%,100%,.07);border-color:hsla(0,0%,100%,.08);border-radius:8px;transition:background .2s,color .2s}[data-theme=v2] .eb-player .eb-info-close:hover,[data-theme=v2] .eb-player .eb-socials-close:hover{background:hsla(0,0%,100%,.13);color:#fff}[data-theme=v2] .eb-player .eb-socials-link{background:hsla(0,0%,100%,.07);border:1px solid hsla(0,0%,100%,.08);border-radius:8px;transition:background .2s,color .2s,border-color .2s}[data-theme=v2] .eb-player .eb-socials-link:hover{background:rgba(255,132,31,.15);border-color:rgba(255,132,31,.35);color:#ffb980}[data-theme=v2] .eb-player .eb-poster,[data-theme=v2] .eb-player .eb-radio-overlay{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}[data-theme=v2] .eb-player .eb-radio-bar{background:rgba(255,132,31,.8)}[data-theme=v2] .eb-player .eb-chapter-skip{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(10,10,20,.55);border:1px solid hsla(0,0%,100%,.15);border-radius:8px;font-size:12px;font-weight:500;transition:background .15s}[data-theme=v2] .eb-player .eb-chapter-skip:hover{background:hsla(0,0%,100%,.12)}.eb-player{background:#000;box-sizing:border-box;color:#fff;font-family:sans-serif;height:100%;overflow:hidden;position:relative;user-select:none;width:100%}.eb-player video.eb-video{display:block;filter:brightness(1);height:100%;left:0;object-fit:contain;position:absolute;top:0;width:100%;z-index:1}.eb-overlay-zone{z-index:10}.eb-loading-slot,.eb-overlay-zone{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.eb-loading-slot{z-index:26}.eb-poster{background:#000;box-sizing:border-box;height:100%;object-fit:cover;width:100%}.eb-ads-container,.eb-poster{inset:0;pointer-events:none;position:absolute}.eb-ads-container{z-index:20}.eb-ad-playing .eb-ads-container{pointer-events:auto;z-index:40}.eb-top-bar{align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);display:flex;flex-direction:row;justify-content:space-between;left:0;padding:8px 12px;pointer-events:auto;position:absolute;right:0;top:0;z-index:30}.eb-top-bar__logo{display:block;height:28px;width:auto}.eb-top-bar__logo-link{display:inline-flex;text-decoration:none}.eb-top-bar__actions{align-items:center;display:flex;gap:4px;margin-inline-start:auto}.eb-bottom-bar{display:flex;flex-direction:column;pointer-events:auto;z-index:30}.eb-bottom-bar,.eb-bottom-bar__gradient{bottom:0;left:0;position:absolute;right:0}.eb-bottom-bar__gradient{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);height:100px;pointer-events:none;z-index:-1}.eb-bottom-bar__controls-row{align-items:center;display:flex;flex-direction:row;gap:4px;padding:4px 8px 8px}.eb-bottom-bar__seekbar-zone{flex:1;min-width:0}.eb-bottom-bar__seekbar-zone:has(.eb-seekbar[hidden]){display:none}.eb-middle-bar{align-items:center;display:flex;gap:16px;left:50%;pointer-events:auto;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:25}.eb-middle-bar__play-btn{align-items:center;background:rgba(0,0,0,.5);border-radius:50%;display:flex;height:64px;justify-content:center;width:64px}.eb-middle-bar__seek-btn{background:none;flex-direction:column;gap:2px;padding:4px}.eb-middle-bar__seek-btn:hover{background:hsla(0,0%,100%,.1);border-radius:8px}.eb-seek-circle{fill:currentColor;display:block;height:32px;pointer-events:none;width:32px}.eb-seek-label{font-size:11px;font-weight:600;line-height:1;opacity:.85}.eb-extension-bottom-extra,.eb-extension-controls-extra,.eb-extension-overlay,.eb-extension-top-extra{pointer-events:none;position:absolute;z-index:35}.eb-extension-bottom-extra>*,.eb-extension-controls-extra>*,.eb-extension-overlay>*,.eb-extension-top-extra>*{pointer-events:auto}.eb-extension-top-extra{left:0;right:0;top:0}.eb-extension-bottom-extra{bottom:0;left:0;right:0}.eb-extension-overlay{align-items:center;display:flex;inset:0;justify-content:center}.eb-extension-controls-extra{align-items:center;bottom:0;display:flex;gap:4px;inset-inline-end:0;padding:4px 8px 8px}.eb-time-display{color:#fff;font-size:13px;font-variant-numeric:tabular-nums;line-height:1;padding:0 4px;white-space:nowrap}.eb-time-display__offset{color:hsla(0,0%,100%,.5)}.eb-channel-name{color:#fff;font-size:13px;line-height:1;opacity:.75;padding:0 4px;white-space:nowrap}.eb-volume-control{align-items:center;display:flex;gap:4px;margin-inline-end:8px}.eb-volume-track{background:hsla(0,0%,100%,.2);border-radius:2px;cursor:pointer;height:4px;position:relative;width:60px}.eb-volume-fill{border-radius:2px;height:100%;inset-inline-start:0;top:0}.eb-volume-fill,.eb-volume-thumb{background:var(--eb-color-volume,var(--eb-color-primary,#fff));pointer-events:none;position:absolute}.eb-volume-thumb{--eb-volume-thumb-x:-50%;border-radius:50%;height:10px;top:50%;transform:translate(var(--eb-volume-thumb-x),-50%);width:10px}.eb-settings-wrapper{position:relative}.eb-settings-panel{background:rgba(0,0,0,.85);border-radius:6px;font-size:12px;max-width:220px;min-width:160px;overflow:hidden;position:absolute;z-index:40}.eb-settings-panel--up{bottom:calc(100% + 8px)}.eb-settings-panel--down{top:calc(100% + 8px)}.eb-settings-panel--right{right:0}.eb-settings-panel--left{left:0}.eb-settings-menu{list-style:none;margin:0;padding:4px 0}.eb-settings-submenu{max-height:200px;overflow-y:auto}.eb-settings-submenu::-webkit-scrollbar{width:4px}.eb-settings-submenu::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3);border-radius:2px}.eb-settings-header{align-items:center;display:flex;gap:4px;padding:5px 12px}.eb-settings-category,.eb-settings-item{font-size:12px;justify-content:space-between;padding:5px 12px;text-align:start;width:100%}.eb-settings-back,.eb-settings-category,.eb-settings-item{align-items:center;background:none;border:none;color:#fff;cursor:pointer;display:flex}.eb-settings-back{padding:0}.eb-settings-category:hover,.eb-settings-item:hover{background:hsla(0,0%,100%,.1)}.eb-settings-item--selected{color:var(--eb-accent,var(--eb-color-primary,#e53935))}.eb-seekbar{cursor:pointer;padding:8px 0;position:relative;width:100%}.eb-seekbar-disabled{opacity:.4;pointer-events:none}.eb-seekbar-track{background:hsla(0,0%,100%,.2);border-radius:2px;height:4px;position:relative}.eb-seekbar-buffered{background:hsla(0,0%,100%,.4)}.eb-seekbar-buffered,.eb-seekbar-progress{border-radius:2px;height:100%;inset-inline-start:0;pointer-events:none;position:absolute;top:0}.eb-seekbar-progress,.eb-seekbar-thumb{background:var(--eb-color-progress,var(--eb-color-primary,#e53935))}.eb-seekbar-thumb{border-radius:50%;height:12px;inset-inline-end:-6px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%) scale(0);transition:transform .15s;width:12px}.eb-seekbar:hover .eb-seekbar-thumb{transform:translateY(-50%) scale(1)}.eb-seekbar:hover .eb-seekbar-track{height:6px}.eb-seekbar-tooltip{background:rgba(0,0,0,.8);border-radius:3px;bottom:calc(100% + 8px);color:#fff;font-size:12px;overflow:hidden;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;transform:translateX(-50%);white-space:nowrap;z-index:50}.eb-seekbar-preview{background:#000;border:none!important;display:block!important;height:68px;inset:auto!important;margin:0!important;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;object-fit:contain;padding:0!important;position:static!important;transform:none!important;width:120px;z-index:auto!important}.eb-chapter-marker{--eb-chapter-marker-x:-50%;background:hsla(0,0%,100%,.6);height:100%;pointer-events:none;position:absolute;top:0;transform:translateX(var(--eb-chapter-marker-x));width:3px}.eb-chapter-marker.eb-chapter-active{background:#fff}.eb-chapter-skip{background:rgba(0,0,0,.7);border:1px solid hsla(0,0%,100%,.4);border-radius:4px;bottom:calc(100% + 4px);color:#fff;cursor:pointer;font-size:13px;inset-inline-end:0;padding:6px 16px;position:absolute}.eb-chapter-skip:hover{background:hsla(0,0%,100%,.2)}.eb-epg-segment{border-inline-end:1px solid hsla(0,0%,100%,.3);height:100%;pointer-events:none;position:absolute;top:0}.eb-epg-segment.eb-epg-current{background:hsla(0,0%,100%,.1)}.eb-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0;height:20px;pointer-events:none;width:20px}.eb-button,.eb-cast,.eb-fullscreen,.eb-live-sync,.eb-pip,.eb-play-pause,.eb-volume-mute{-webkit-tap-highlight-color:transparent;align-items:center;background:none;border:none;border-radius:4px;color:var(--eb-color-icon,inherit);cursor:pointer;display:flex;justify-content:center;padding:6px;transition:background .15s}.eb-button:hover,.eb-cast:hover,.eb-fullscreen:hover,.eb-live-sync:hover,.eb-pip:hover,.eb-play-pause:hover,.eb-volume-mute:hover{background:hsla(0,0%,100%,.15)}.eb-button:active,.eb-cast:active,.eb-fullscreen:active,.eb-live-sync:active,.eb-pip:active,.eb-play-pause:active,.eb-volume-mute:active{background:hsla(0,0%,100%,.25)}.eb-radio-overlay{align-items:center;background:#000;display:flex;inset:0;justify-content:center;position:absolute;z-index:15}.eb-radio-bars{align-items:flex-end;display:flex;gap:4px;height:40px}.eb-radio-bar{animation:eb-radio-bar-bounce .8s ease-in-out infinite;background:#fff;border-radius:3px;display:block;width:6px}.eb-radio-bar:first-child{animation-delay:0s;height:20px}.eb-radio-bar:nth-child(2){animation-delay:.1s;height:32px}.eb-radio-bar:nth-child(3){animation-delay:.2s;height:40px}.eb-radio-bar:nth-child(4){animation-delay:.3s;height:28px}.eb-radio-bar:nth-child(5){animation-delay:.4s;height:16px}@keyframes eb-radio-bar-bounce{0%,to{opacity:.7;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}.eb-live-sync[hidden]{display:none}.eb-live-synced{color:var(--eb-accent,var(--eb-color-primary,#e53935))}.eb-live-sync__dot,.eb-live-sync__label{display:none}.eb-error-slot,.eb-info-slot,.eb-socials-slot{inset:0;pointer-events:none;position:absolute;z-index:50}.eb-toast-slot{bottom:60px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:50}.eb-toast{background:rgba(0,0,0,.8);border-radius:4px;color:#fff;font-size:13px;padding:8px 20px;pointer-events:auto;white-space:nowrap}.eb-error,.eb-info-overlay,.eb-socials-overlay{align-items:center;background:rgba(0,0,0,.75);color:#fff;display:flex;flex-direction:column;inset:0;justify-content:center;padding:24px;pointer-events:auto;position:absolute;text-align:center;z-index:50}.eb-error[hidden],.eb-info-overlay[hidden],.eb-socials-overlay[hidden]{display:none}.eb-error-message{font-size:16px;margin:0 0 16px}.eb-error-retry{background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:8px 24px}.eb-error-retry:hover{background:hsla(0,0%,100%,.25)}.eb-info-content{font-size:14px;line-height:1.5;margin-bottom:16px;max-width:400px}.eb-info-close,.eb-socials-close{background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.3);border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:8px 24px}.eb-info-close:hover,.eb-socials-close:hover{background:hsla(0,0%,100%,.25)}.eb-socials-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:16px}.eb-socials-link{background:hsla(0,0%,100%,.1);border-radius:4px;color:#fff;font-size:14px;padding:8px 16px;text-decoration:none;text-transform:capitalize}.eb-socials-link:hover{background:hsla(0,0%,100%,.25)}.eb-loading{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;pointer-events:none}.eb-loading[hidden]{display:none}.eb-loading-arc{animation:eb-spin 1.8s linear infinite;border:3px solid hsla(0,0%,100%,.15);border-radius:50%;border-top-color:hsla(0,0%,100%,.9);height:80px;width:80px}.eb-loading-text{font-size:14px}@keyframes eb-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.eb-controls-visible .eb-bottom-bar,.eb-controls-visible .eb-middle-bar,.eb-controls-visible .eb-top-bar{opacity:1;transition:opacity .3s}.eb-controls-hidden .eb-bottom-bar,.eb-controls-hidden .eb-middle-bar,.eb-controls-hidden .eb-top-bar{opacity:0;pointer-events:none;transition:opacity .3s}.eb-ios-native .eb-bottom-bar,.eb-ios-native .eb-error-slot,.eb-ios-native .eb-info-slot,.eb-ios-native .eb-middle-bar,.eb-ios-native .eb-overlay-zone,.eb-ios-native .eb-socials-slot,.eb-ios-native .eb-toast-slot,.eb-ios-native .eb-top-bar{display:none}.eb-player[dir=rtl] .eb-chapter-marker{--eb-chapter-marker-x:50%}.eb-player[dir=rtl] .eb-volume-thumb{--eb-volume-thumb-x:50%}.eb-player,.eb-player video.eb-video{max-height:100%;max-width:100%}