myetv-player 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/myetv-player.css +726 -11937
- package/css/myetv-player.min.css +1 -1
- package/dist/myetv-player.js +81 -66
- package/dist/myetv-player.min.js +78 -63
- package/package.json +2 -1
- package/plugins/youtube/myetv-player-youtube-plugin.js +54 -6
- package/scss/_controls.scss +120 -317
- package/scss/_menus.scss +117 -4023
- package/scss/_progress-bar.scss +168 -2052
- package/scss/_title-overlay.scss +10 -2239
- package/scss/_video.scss +62 -2167
- package/scss/_volume.scss +25 -1846
- package/src/controls.js +7 -7
- package/src/core.js +66 -49
- package/src/events.js +5 -0
- package/src/subtitles.js +3 -10
package/scss/_menus.scss
CHANGED
|
@@ -5,351 +5,6 @@
|
|
|
5
5
|
@use 'mixins' as *;
|
|
6
6
|
@use 'variables' as *;
|
|
7
7
|
|
|
8
|
-
/* ===================================
|
|
9
|
-
ALL SUBMENUS - ULTRA-COMPACT FIX
|
|
10
|
-
=================================== */
|
|
11
|
-
|
|
12
|
-
/* Apply to ALL submenus */
|
|
13
|
-
.settings-submenu,
|
|
14
|
-
.subtitles-menu,
|
|
15
|
-
.quality-submenu,
|
|
16
|
-
.speed-submenu,
|
|
17
|
-
.yt-subtitles-submenu,
|
|
18
|
-
.yt-quality-submenu {
|
|
19
|
-
/* Ultra-compact: fit to content */
|
|
20
|
-
width: fit-content !important;
|
|
21
|
-
min-width: auto !important;
|
|
22
|
-
max-width: 180px !important;
|
|
23
|
-
/* Always open to the LEFT */
|
|
24
|
-
right: 100% !important;
|
|
25
|
-
left: auto !important;
|
|
26
|
-
margin-right: 5px !important;
|
|
27
|
-
margin-left: 0 !important;
|
|
28
|
-
/* Scrollbar for long lists */
|
|
29
|
-
max-height: 250px !important;
|
|
30
|
-
overflow-y: auto !important;
|
|
31
|
-
overflow-x: hidden !important;
|
|
32
|
-
/* Text handling */
|
|
33
|
-
white-space: nowrap !important;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* All submenu options (inside submenus) */
|
|
37
|
-
.settings-submenu .settings-suboption,
|
|
38
|
-
.subtitles-menu .subtitle-option,
|
|
39
|
-
.quality-submenu .quality-option,
|
|
40
|
-
.speed-submenu .speed-option,
|
|
41
|
-
.yt-subtitles-submenu .quality-option {
|
|
42
|
-
padding: 8px 10px !important;
|
|
43
|
-
font-size: 12px !important;
|
|
44
|
-
white-space: nowrap !important;
|
|
45
|
-
overflow: hidden !important;
|
|
46
|
-
text-overflow: ellipsis !important;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/* ===================================
|
|
50
|
-
SETTINGS MENU - FONT CONSISTENCY
|
|
51
|
-
=================================== */
|
|
52
|
-
|
|
53
|
-
/* Main settings menu options (not in submenus) - keep consistent size */
|
|
54
|
-
.settings-menu > .settings-option,
|
|
55
|
-
.settings-menu > .subtitles-option {
|
|
56
|
-
font-size: 13px !important;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.settings-menu > .settings-option span,
|
|
60
|
-
.settings-menu > .subtitles-option span {
|
|
61
|
-
font-size: 13px !important;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* Override any existing .subtitles-option font-size */
|
|
65
|
-
.subtitles-btn,
|
|
66
|
-
.subtitles-control {
|
|
67
|
-
font-size: 13px !important;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* ===================================
|
|
71
|
-
RESPONSIVE - PROGRESSIVE REDUCTION
|
|
72
|
-
=================================== */
|
|
73
|
-
|
|
74
|
-
/* Tablets and larger phones */
|
|
75
|
-
@media (max-width: 768px) {
|
|
76
|
-
/* Main menu options stay readable */
|
|
77
|
-
.settings-menu > .settings-option,
|
|
78
|
-
.settings-menu > .subtitles-option {
|
|
79
|
-
font-size: 12px !important;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
/* Submenus get smaller */
|
|
83
|
-
.settings-submenu,
|
|
84
|
-
.subtitles-menu,
|
|
85
|
-
.quality-submenu,
|
|
86
|
-
.speed-submenu,
|
|
87
|
-
.yt-subtitles-submenu,
|
|
88
|
-
.yt-quality-submenu {
|
|
89
|
-
max-width: min(140px, calc(100vw - 180px)) !important;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.settings-submenu .settings-suboption,
|
|
93
|
-
.subtitles-menu .subtitle-option,
|
|
94
|
-
.quality-submenu .quality-option,
|
|
95
|
-
.speed-submenu .speed-option,
|
|
96
|
-
.yt-subtitles-submenu .quality-option {
|
|
97
|
-
padding: 7px 8px !important;
|
|
98
|
-
font-size: 11px !important;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* Small phones */
|
|
103
|
-
@media (max-width: 600px) {
|
|
104
|
-
.settings-menu > .settings-option,
|
|
105
|
-
.settings-menu > .subtitles-option {
|
|
106
|
-
font-size: 11px !important;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.settings-submenu,
|
|
110
|
-
.subtitles-menu,
|
|
111
|
-
.quality-submenu,
|
|
112
|
-
.speed-submenu,
|
|
113
|
-
.yt-subtitles-submenu,
|
|
114
|
-
.yt-quality-submenu {
|
|
115
|
-
max-width: min(120px, calc(100vw - 160px)) !important;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.settings-submenu .settings-suboption,
|
|
119
|
-
.subtitles-menu .subtitle-option,
|
|
120
|
-
.quality-submenu .quality-option,
|
|
121
|
-
.speed-submenu .speed-option,
|
|
122
|
-
.yt-subtitles-submenu .quality-option {
|
|
123
|
-
padding: 6px 7px !important;
|
|
124
|
-
font-size: 10px !important;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/* Very small phones */
|
|
129
|
-
@media (max-width: 450px) {
|
|
130
|
-
.settings-menu > .settings-option,
|
|
131
|
-
.settings-menu > .subtitles-option {
|
|
132
|
-
font-size: 10px !important;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.settings-submenu,
|
|
136
|
-
.subtitles-menu,
|
|
137
|
-
.quality-submenu,
|
|
138
|
-
.speed-submenu,
|
|
139
|
-
.yt-subtitles-submenu,
|
|
140
|
-
.yt-quality-submenu {
|
|
141
|
-
max-width: min(100px, calc(100vw - 140px)) !important;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.settings-submenu .settings-suboption,
|
|
145
|
-
.subtitles-menu .subtitle-option,
|
|
146
|
-
.quality-submenu .quality-option,
|
|
147
|
-
.speed-submenu .speed-option,
|
|
148
|
-
.yt-subtitles-submenu .quality-option {
|
|
149
|
-
padding: 5px 6px !important;
|
|
150
|
-
font-size: 9px !important;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/* Ultra small phones */
|
|
155
|
-
@media (max-width: 350px) {
|
|
156
|
-
.settings-menu > .settings-option,
|
|
157
|
-
.settings-menu > .subtitles-option {
|
|
158
|
-
font-size: 9px !important;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.settings-submenu,
|
|
162
|
-
.subtitles-menu,
|
|
163
|
-
.quality-submenu,
|
|
164
|
-
.speed-submenu,
|
|
165
|
-
.yt-subtitles-submenu,
|
|
166
|
-
.yt-quality-submenu {
|
|
167
|
-
max-width: min(90px, calc(100vw - 120px)) !important;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.settings-submenu .settings-suboption,
|
|
171
|
-
.subtitles-menu .subtitle-option,
|
|
172
|
-
.quality-submenu .quality-option,
|
|
173
|
-
.speed-submenu .speed-option,
|
|
174
|
-
.yt-subtitles-submenu .quality-option {
|
|
175
|
-
padding: 4px 5px !important;
|
|
176
|
-
font-size: 8px !important;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/* QUALITY BUTTON WITH DUAL DISPLAY */
|
|
181
|
-
.quality-btn {
|
|
182
|
-
min-height: 36px;
|
|
183
|
-
padding: 6px 8px;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.quality-btn-text {
|
|
187
|
-
display: flex;
|
|
188
|
-
flex-direction: column;
|
|
189
|
-
align-items: center;
|
|
190
|
-
line-height: 1;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.selected-quality {
|
|
194
|
-
font-size: 14px;
|
|
195
|
-
font-weight: 500;
|
|
196
|
-
color: var(--player-button-color);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.current-quality {
|
|
200
|
-
font-size: 10px;
|
|
201
|
-
font-weight: 400;
|
|
202
|
-
color: var(--player-text-secondary);
|
|
203
|
-
opacity: 0.8;
|
|
204
|
-
margin-top: 2px;
|
|
205
|
-
line-height: 1;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
/* ICONS */
|
|
209
|
-
.icon {
|
|
210
|
-
width: var(--player-icon-size);
|
|
211
|
-
height: var(--player-icon-size);
|
|
212
|
-
display: flex;
|
|
213
|
-
align-items: center;
|
|
214
|
-
justify-content: center;
|
|
215
|
-
font-size: 16px;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.hidden {
|
|
219
|
-
display: none !important;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
/* VOLUME CONTROLS - IMPROVED RESPONSIVE */
|
|
223
|
-
.volume-container {
|
|
224
|
-
display: flex;
|
|
225
|
-
align-items: center;
|
|
226
|
-
gap: 8px;
|
|
227
|
-
position: relative;
|
|
228
|
-
/* Allow volume container to shrink gradually */
|
|
229
|
-
flex-shrink: 2;
|
|
230
|
-
min-width: 0;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.volume-slider {
|
|
234
|
-
width: 60px;
|
|
235
|
-
height: var(--player-volume-height);
|
|
236
|
-
background: var(--player-volume-bg);
|
|
237
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
238
|
-
outline: none;
|
|
239
|
-
cursor: pointer;
|
|
240
|
-
-webkit-appearance: none;
|
|
241
|
-
transition: all var(--player-transition-fast);
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.volume-tooltip {
|
|
245
|
-
position: absolute;
|
|
246
|
-
bottom: 210%;
|
|
247
|
-
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
248
|
-
left: 0;
|
|
249
|
-
transform: translateX(-50%);
|
|
250
|
-
background: rgba(0, 0, 0, 0.9);
|
|
251
|
-
color: white;
|
|
252
|
-
padding: 6px 10px;
|
|
253
|
-
border-radius: 6px;
|
|
254
|
-
font-size: 12px;
|
|
255
|
-
font-weight: 500;
|
|
256
|
-
white-space: nowrap;
|
|
257
|
-
opacity: 0;
|
|
258
|
-
visibility: hidden;
|
|
259
|
-
z-index: 1000;
|
|
260
|
-
box-shadow: var(--player-shadow-tooltip);
|
|
261
|
-
pointer-events: none;
|
|
262
|
-
backdrop-filter: blur(8px);
|
|
263
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
.volume-tooltip::after {
|
|
267
|
-
content: '';
|
|
268
|
-
position: absolute;
|
|
269
|
-
top: 100%;
|
|
270
|
-
left: 50%;
|
|
271
|
-
transform: translateX(-50%);
|
|
272
|
-
width: 0;
|
|
273
|
-
height: 0;
|
|
274
|
-
border-left: 6px solid transparent;
|
|
275
|
-
border-right: 6px solid transparent;
|
|
276
|
-
border-top: 6px solid rgba(0, 0, 0, 0.9);
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.volume-container:hover .volume-tooltip,
|
|
280
|
-
.volume-tooltip.visible {
|
|
281
|
-
opacity: 1;
|
|
282
|
-
visibility: visible;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.volume-slider::-webkit-slider-thumb {
|
|
286
|
-
-webkit-appearance: none;
|
|
287
|
-
width: var(--player-volume-handle-size);
|
|
288
|
-
height: var(--player-volume-handle-size);
|
|
289
|
-
border-radius: 50%;
|
|
290
|
-
background: var(--player-primary-dark);
|
|
291
|
-
cursor: pointer;
|
|
292
|
-
transition: all var(--player-transition-fast);
|
|
293
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
294
|
-
margin-top: calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2);
|
|
295
|
-
transform: translateY(0);
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.volume-slider::-webkit-slider-thumb:hover {
|
|
299
|
-
transform: translateY(0) scale(1.2);
|
|
300
|
-
background: var(--player-primary-color);
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.volume-slider::-moz-range-thumb {
|
|
304
|
-
width: var(--player-volume-handle-size);
|
|
305
|
-
height: var(--player-volume-handle-size);
|
|
306
|
-
border-radius: 50%;
|
|
307
|
-
background: var(--player-primary-dark);
|
|
308
|
-
cursor: pointer;
|
|
309
|
-
border: none;
|
|
310
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
311
|
-
transition: all var(--player-transition-fast);
|
|
312
|
-
margin-top: 0;
|
|
313
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2));
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
317
|
-
background: var(--player-primary-color);
|
|
318
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2)) scale(1.1);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
.volume-slider::-webkit-slider-runnable-track {
|
|
322
|
-
height: var(--player-volume-height);
|
|
323
|
-
background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
|
|
324
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
325
|
-
transition: background var(--player-transition-fast);
|
|
326
|
-
margin: 0;
|
|
327
|
-
border: none;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
.volume-slider::-moz-range-track {
|
|
331
|
-
height: var(--player-volume-height);
|
|
332
|
-
background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
|
|
333
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
334
|
-
border: none;
|
|
335
|
-
transition: background var(--player-transition-fast);
|
|
336
|
-
margin: 0;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
/* TIME DISPLAY - RESPONSIVE */
|
|
340
|
-
.time-display {
|
|
341
|
-
color: var(--player-text-color);
|
|
342
|
-
font-size: 14px;
|
|
343
|
-
font-weight: 500;
|
|
344
|
-
display: flex;
|
|
345
|
-
align-items: center;
|
|
346
|
-
gap: 5px;
|
|
347
|
-
font-variant-numeric: tabular-nums;
|
|
348
|
-
/* Allow time display to shrink on very small screens */
|
|
349
|
-
flex-shrink: 2;
|
|
350
|
-
min-width: 0;
|
|
351
|
-
}
|
|
352
|
-
|
|
353
8
|
/* CONTROL MENUS */
|
|
354
9
|
.speed-control,
|
|
355
10
|
.quality-control,
|
|
@@ -377,15 +32,13 @@
|
|
|
377
32
|
box-shadow: var(--player-shadow-menu);
|
|
378
33
|
}
|
|
379
34
|
|
|
380
|
-
.
|
|
381
|
-
.speed-menu
|
|
382
|
-
.quality-
|
|
383
|
-
.
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
visibility: visible;
|
|
388
|
-
transform: translateY(-4px);
|
|
35
|
+
/* Main menus open ONLY with .active (CLICK) */
|
|
36
|
+
.speed-menu.active,
|
|
37
|
+
.quality-menu.active,
|
|
38
|
+
.subtitles-menu.active {
|
|
39
|
+
opacity: 1 !important;
|
|
40
|
+
visibility: visible !important;
|
|
41
|
+
pointer-events: all !important;
|
|
389
42
|
}
|
|
390
43
|
|
|
391
44
|
.speed-option,
|
|
@@ -416,6 +69,22 @@
|
|
|
416
69
|
background: rgba(255, 255, 255, 0.05);
|
|
417
70
|
}
|
|
418
71
|
|
|
72
|
+
/* Highlight currently selected subtitle option */
|
|
73
|
+
.subtitles-option.selected,
|
|
74
|
+
.subtitles-option.active {
|
|
75
|
+
color: var(--player-primary-color);
|
|
76
|
+
background: rgba(255, 255, 255, 0.1);
|
|
77
|
+
position: relative;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.subtitles-option.selected::after,
|
|
81
|
+
.subtitles-option.active::after {
|
|
82
|
+
content: '✓';
|
|
83
|
+
position: absolute;
|
|
84
|
+
right: 10px;
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
}
|
|
87
|
+
|
|
419
88
|
/* DUAL QUALITY INDICATORS */
|
|
420
89
|
.quality-option.selected {
|
|
421
90
|
color: var(--player-primary-color);
|
|
@@ -437,7 +106,7 @@
|
|
|
437
106
|
.quality-option.playing::after {
|
|
438
107
|
content: 'Playing';
|
|
439
108
|
font-size: 12px;
|
|
440
|
-
color: #4CAF50;
|
|
109
|
+
color: #4CAF50;
|
|
441
110
|
font-weight: 400;
|
|
442
111
|
margin-left: 8px;
|
|
443
112
|
}
|
|
@@ -456,64 +125,10 @@
|
|
|
456
125
|
color: var(--player-primary-color);
|
|
457
126
|
}
|
|
458
127
|
|
|
459
|
-
/* CUSTOM SUBTITLES STYLING */
|
|
460
|
-
.video-player::cue {
|
|
461
|
-
background: rgba(0, 0, 0, 0.8);
|
|
462
|
-
color: white;
|
|
463
|
-
font-size: 18px;
|
|
464
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
465
|
-
font-weight: 500;
|
|
466
|
-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
467
|
-
padding: 8px 12px;
|
|
468
|
-
border-radius: 6px;
|
|
469
|
-
line-height: 1.4;
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
.video-player::cue(.highlight) {
|
|
473
|
-
background: var(--player-primary-color);
|
|
474
|
-
color: black;
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
.video-player::cue(b) {
|
|
478
|
-
font-weight: 700;
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
.video-player::cue(i) {
|
|
482
|
-
font-style: italic;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
/* BRAND LOGO RESPONSIVE */
|
|
486
|
-
.controls-right .brand-logo {
|
|
487
|
-
height: 44px; /* recommended height for control bar logos */
|
|
488
|
-
max-width: 120px; /* maintain aspect ratio */
|
|
489
|
-
object-fit: contain; /* prevent distortion */
|
|
490
|
-
margin-right: 10px; /* spacing from buttons to the right */
|
|
491
|
-
pointer-events: auto; /* allow clicks for links */
|
|
492
|
-
opacity: 0.8; /* slightly transparent */
|
|
493
|
-
transition: opacity var(--player-transition-fast);
|
|
494
|
-
order: -1; /* force logo to appear first */
|
|
495
|
-
flex-shrink: 1; /* Allow brand logo to shrink */
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
.controls-right .brand-logo:hover {
|
|
499
|
-
opacity: 1; /* opaque on hover */
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
.controls-right .brand-logo-link {
|
|
503
|
-
order: -1; /* force link container to appear first */
|
|
504
|
-
margin-right: 10px; /* spacing from buttons */
|
|
505
|
-
display: inline-block;
|
|
506
|
-
text-decoration: none;
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
.controls-right .brand-logo-link .brand-logo {
|
|
510
|
-
margin-right: 0; /* remove margin when inside link */
|
|
511
|
-
}
|
|
512
|
-
|
|
513
128
|
/* SETTINGS DROPDOWN MENU - FOR SMALL SCREENS */
|
|
514
129
|
.settings-control {
|
|
515
130
|
position: relative;
|
|
516
|
-
display: none;
|
|
131
|
+
display: none;
|
|
517
132
|
}
|
|
518
133
|
|
|
519
134
|
.settings-btn {
|
|
@@ -546,7 +161,7 @@
|
|
|
546
161
|
}
|
|
547
162
|
|
|
548
163
|
.settings-btn .icon::before {
|
|
549
|
-
content: '⚙️';
|
|
164
|
+
content: '⚙️';
|
|
550
165
|
font-size: 16px;
|
|
551
166
|
}
|
|
552
167
|
|
|
@@ -568,11 +183,11 @@
|
|
|
568
183
|
box-shadow: var(--player-shadow-menu);
|
|
569
184
|
}
|
|
570
185
|
|
|
571
|
-
.
|
|
572
|
-
.settings-menu
|
|
573
|
-
opacity: 1;
|
|
574
|
-
visibility: visible;
|
|
575
|
-
|
|
186
|
+
/* ⚠️ Settings menu opens ONLY with .active (CLICK) */
|
|
187
|
+
.settings-menu.active {
|
|
188
|
+
opacity: 1 !important;
|
|
189
|
+
visibility: visible !important;
|
|
190
|
+
pointer-events: all !important;
|
|
576
191
|
}
|
|
577
192
|
|
|
578
193
|
.settings-option {
|
|
@@ -585,6 +200,7 @@
|
|
|
585
200
|
align-items: center;
|
|
586
201
|
justify-content: space-between;
|
|
587
202
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
203
|
+
position: relative;
|
|
588
204
|
}
|
|
589
205
|
|
|
590
206
|
.settings-option:last-child {
|
|
@@ -609,13 +225,10 @@
|
|
|
609
225
|
opacity: 0.8;
|
|
610
226
|
}
|
|
611
227
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
/* Submenu styling for settings */
|
|
618
|
-
.settings-submenu {
|
|
228
|
+
/* Submenu styling - HIDDEN BY DEFAULT */
|
|
229
|
+
.settings-submenu,
|
|
230
|
+
.quality-submenu,
|
|
231
|
+
.speed-submenu {
|
|
619
232
|
position: absolute;
|
|
620
233
|
bottom: 0;
|
|
621
234
|
right: 100%;
|
|
@@ -628,15 +241,35 @@
|
|
|
628
241
|
visibility: hidden;
|
|
629
242
|
transition: all var(--player-transition-fast);
|
|
630
243
|
min-width: 150px;
|
|
244
|
+
max-width: 180px;
|
|
245
|
+
max-height: 250px;
|
|
246
|
+
overflow-y: auto;
|
|
247
|
+
overflow-x: hidden;
|
|
248
|
+
white-space: nowrap;
|
|
631
249
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
632
250
|
z-index: 101;
|
|
633
251
|
box-shadow: var(--player-shadow-menu);
|
|
252
|
+
pointer-events: none;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* ⚠️ SOLUTION: Submenus open on HOVER (easier and more intuitive) */
|
|
256
|
+
.settings-option:hover .settings-submenu,
|
|
257
|
+
.settings-option:hover .quality-submenu,
|
|
258
|
+
.settings-option:hover .speed-submenu {
|
|
259
|
+
opacity: 1 !important;
|
|
260
|
+
visibility: visible !important;
|
|
261
|
+
transform: translateX(-2px) !important;
|
|
262
|
+
pointer-events: all !important;
|
|
634
263
|
}
|
|
635
264
|
|
|
636
|
-
.settings-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
265
|
+
.settings-submenu .settings-suboption,
|
|
266
|
+
.quality-submenu .quality-option,
|
|
267
|
+
.speed-submenu .speed-option {
|
|
268
|
+
padding: 8px 10px !important;
|
|
269
|
+
font-size: 12px !important;
|
|
270
|
+
white-space: nowrap !important;
|
|
271
|
+
overflow: hidden !important;
|
|
272
|
+
text-overflow: ellipsis !important;
|
|
640
273
|
}
|
|
641
274
|
|
|
642
275
|
.settings-suboption {
|
|
@@ -667,3623 +300,84 @@
|
|
|
667
300
|
color: var(--player-primary-color);
|
|
668
301
|
}
|
|
669
302
|
|
|
670
|
-
/*
|
|
303
|
+
/* Visual indicator for options with submenus */
|
|
304
|
+
.settings-option:has(.settings-submenu, .quality-submenu, .speed-submenu)::after {
|
|
305
|
+
content: '▶';
|
|
306
|
+
font-size: 10px;
|
|
307
|
+
color: var(--player-text-secondary);
|
|
308
|
+
margin-left: 8px;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.settings-option:hover::after {
|
|
312
|
+
color: var(--player-primary-color);
|
|
313
|
+
}
|
|
671
314
|
|
|
672
|
-
/*
|
|
315
|
+
/* RESPONSIVE - PROGRESSIVE REDUCTION */
|
|
673
316
|
@media (max-width: 768px) {
|
|
674
|
-
.
|
|
675
|
-
|
|
676
|
-
gap: 8px;
|
|
317
|
+
.settings-menu > .settings-option {
|
|
318
|
+
font-size: 12px !important;
|
|
677
319
|
}
|
|
678
320
|
|
|
679
|
-
.
|
|
680
|
-
|
|
321
|
+
.settings-submenu,
|
|
322
|
+
.quality-submenu,
|
|
323
|
+
.speed-submenu {
|
|
324
|
+
max-width: min(140px, calc(100vw - 180px)) !important;
|
|
681
325
|
}
|
|
682
326
|
|
|
683
|
-
.
|
|
684
|
-
|
|
327
|
+
.settings-submenu .settings-suboption,
|
|
328
|
+
.quality-submenu .quality-option,
|
|
329
|
+
.speed-submenu .speed-option {
|
|
330
|
+
padding: 7px 8px !important;
|
|
331
|
+
font-size: 11px !important;
|
|
685
332
|
}
|
|
333
|
+
}
|
|
686
334
|
|
|
687
|
-
|
|
688
|
-
|
|
335
|
+
@media (max-width: 600px) {
|
|
336
|
+
.settings-menu > .settings-option {
|
|
337
|
+
font-size: 11px !important;
|
|
689
338
|
}
|
|
690
339
|
|
|
691
|
-
.
|
|
692
|
-
|
|
340
|
+
.settings-submenu,
|
|
341
|
+
.quality-submenu,
|
|
342
|
+
.speed-submenu {
|
|
343
|
+
max-width: min(120px, calc(100vw - 160px)) !important;
|
|
693
344
|
}
|
|
694
345
|
|
|
695
|
-
.
|
|
696
|
-
|
|
697
|
-
|
|
346
|
+
.settings-submenu .settings-suboption,
|
|
347
|
+
.quality-submenu .quality-option,
|
|
348
|
+
.speed-submenu .speed-option {
|
|
349
|
+
padding: 6px 7px !important;
|
|
350
|
+
font-size: 10px !important;
|
|
698
351
|
}
|
|
352
|
+
}
|
|
699
353
|
|
|
700
|
-
|
|
701
|
-
|
|
354
|
+
@media (max-width: 450px) {
|
|
355
|
+
.settings-menu > .settings-option {
|
|
356
|
+
font-size: 10px !important;
|
|
702
357
|
}
|
|
703
358
|
|
|
704
|
-
.
|
|
705
|
-
|
|
359
|
+
.settings-submenu,
|
|
360
|
+
.quality-submenu,
|
|
361
|
+
.speed-submenu {
|
|
362
|
+
max-width: min(100px, calc(100vw - 140px)) !important;
|
|
706
363
|
}
|
|
707
364
|
|
|
708
|
-
.
|
|
709
|
-
|
|
710
|
-
|
|
365
|
+
.settings-submenu .settings-suboption,
|
|
366
|
+
.quality-submenu .quality-option,
|
|
367
|
+
.speed-submenu .speed-option {
|
|
368
|
+
padding: 5px 6px !important;
|
|
369
|
+
font-size: 9px !important;
|
|
711
370
|
}
|
|
371
|
+
}
|
|
712
372
|
|
|
713
|
-
|
|
714
|
-
|
|
373
|
+
@media (max-width: 350px) {
|
|
374
|
+
.settings-control {
|
|
375
|
+
display: block !important;
|
|
715
376
|
}
|
|
716
377
|
|
|
717
|
-
.
|
|
718
|
-
|
|
378
|
+
.pip-btn,
|
|
379
|
+
.speed-control,
|
|
380
|
+
.subtitles-control {
|
|
381
|
+
display: none !important;
|
|
719
382
|
}
|
|
720
|
-
|
|
721
|
-
.video-player::cue {
|
|
722
|
-
font-size: 16px;
|
|
723
|
-
padding: 6px 10px;
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
.controls-right .brand-logo {
|
|
727
|
-
height: 36px;
|
|
728
|
-
max-width: 100px;
|
|
729
|
-
margin-right: 8px;
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
|
|
733
|
-
/* Mobile phones */
|
|
734
|
-
@media (max-width: 480px) {
|
|
735
|
-
.controls-left,
|
|
736
|
-
.controls-right {
|
|
737
|
-
gap: 6px;
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
.volume-container {
|
|
741
|
-
/* Reduce volume slider width further instead of hiding */
|
|
742
|
-
flex-shrink: 3;
|
|
743
|
-
}
|
|
744
|
-
|
|
745
|
-
.volume-slider {
|
|
746
|
-
width: 35px; /* Further reduce volume slider */
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
.time-display span:nth-child(2) {
|
|
750
|
-
display: none; /* Hide the separator "/" */
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
.quality-btn {
|
|
754
|
-
min-height: 28px;
|
|
755
|
-
padding: 3px 5px;
|
|
756
|
-
}
|
|
757
|
-
|
|
758
|
-
.selected-quality {
|
|
759
|
-
font-size: 11px;
|
|
760
|
-
}
|
|
761
|
-
|
|
762
|
-
.current-quality {
|
|
763
|
-
font-size: 8px;
|
|
764
|
-
}
|
|
765
|
-
|
|
766
|
-
.seek-tooltip {
|
|
767
|
-
font-size: 10px;
|
|
768
|
-
padding: 3px 6px;
|
|
769
|
-
}
|
|
770
|
-
|
|
771
|
-
.title-overlay {
|
|
772
|
-
padding: 10px 12px 18px;
|
|
773
|
-
}
|
|
774
|
-
|
|
775
|
-
.title-text {
|
|
776
|
-
font-size: 14px;
|
|
777
|
-
}
|
|
778
|
-
|
|
779
|
-
.video-player::cue {
|
|
780
|
-
font-size: 14px;
|
|
781
|
-
padding: 4px 8px;
|
|
782
|
-
}
|
|
783
|
-
|
|
784
|
-
.controls-right .brand-logo {
|
|
785
|
-
height: 28px;
|
|
786
|
-
max-width: 80px;
|
|
787
|
-
margin-right: 5px;
|
|
788
|
-
}
|
|
789
|
-
}
|
|
790
|
-
|
|
791
|
-
/* VERY SMALL SCREENS - ENABLE MENU SETTINGS DROPDOWN */
|
|
792
|
-
@media (max-width: 350px) {
|
|
793
|
-
/* Show the Settings menu only on very small screens */
|
|
794
|
-
.settings-control {
|
|
795
|
-
display: block !important;
|
|
796
|
-
}
|
|
797
|
-
|
|
798
|
-
/* Hide individual controls and move them to the menu */
|
|
799
|
-
.pip-btn,
|
|
800
|
-
.speed-control,
|
|
801
|
-
.subtitles-control {
|
|
802
|
-
display: none !important;
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
/* Reduce the spaces further */
|
|
806
|
-
.controls-left,
|
|
807
|
-
.controls-right {
|
|
808
|
-
gap: 4px;
|
|
809
|
-
}
|
|
810
|
-
|
|
811
|
-
.control-btn {
|
|
812
|
-
padding: 4px;
|
|
813
|
-
}
|
|
814
|
-
|
|
815
|
-
.icon {
|
|
816
|
-
font-size: 12px;
|
|
817
|
-
}
|
|
818
|
-
|
|
819
|
-
.quality-btn {
|
|
820
|
-
min-height: 24px;
|
|
821
|
-
padding: 2px 4px;
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
.selected-quality {
|
|
825
|
-
font-size: 10px;
|
|
826
|
-
}
|
|
827
|
-
|
|
828
|
-
.current-quality {
|
|
829
|
-
font-size: 7px;
|
|
830
|
-
}
|
|
831
|
-
|
|
832
|
-
.controls-right .brand-logo {
|
|
833
|
-
height: 22px;
|
|
834
|
-
max-width: 50px;
|
|
835
|
-
margin-right: 3px;
|
|
836
|
-
}
|
|
837
|
-
|
|
838
|
-
.volume-slider {
|
|
839
|
-
width: 30px; /* Even smaller volume slider */
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
/* Reduce the settings menu for ultra-small screens */
|
|
843
|
-
.settings-menu {
|
|
844
|
-
min-width: 160px;
|
|
845
|
-
font-size: 12px;
|
|
846
|
-
}
|
|
847
|
-
|
|
848
|
-
.settings-option {
|
|
849
|
-
padding: 6px 12px;
|
|
850
|
-
font-size: 12px;
|
|
851
|
-
}
|
|
852
|
-
|
|
853
|
-
.settings-submenu {
|
|
854
|
-
min-width: 130px;
|
|
855
|
-
}
|
|
856
|
-
|
|
857
|
-
.settings-suboption {
|
|
858
|
-
padding: 6px 12px;
|
|
859
|
-
font-size: 11px;
|
|
860
|
-
}
|
|
861
|
-
}
|
|
862
|
-
|
|
863
|
-
/* Very small screens - ultra mobile */
|
|
864
|
-
@media (max-width: 280px) {
|
|
865
|
-
.controls-left,
|
|
866
|
-
.controls-right {
|
|
867
|
-
gap: 3px;
|
|
868
|
-
}
|
|
869
|
-
|
|
870
|
-
.control-btn {
|
|
871
|
-
padding: 3px;
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
.icon {
|
|
875
|
-
font-size: 10px;
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
.quality-btn {
|
|
879
|
-
min-height: 20px;
|
|
880
|
-
padding: 1px 3px;
|
|
881
|
-
}
|
|
882
|
-
|
|
883
|
-
.selected-quality {
|
|
884
|
-
font-size: 9px;
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
.current-quality {
|
|
888
|
-
font-size: 6px;
|
|
889
|
-
}
|
|
890
|
-
|
|
891
|
-
.controls-right .brand-logo {
|
|
892
|
-
height: 18px;
|
|
893
|
-
max-width: 40px;
|
|
894
|
-
margin-right: 2px;
|
|
895
|
-
}
|
|
896
|
-
|
|
897
|
-
.volume-slider {
|
|
898
|
-
width: 25px;
|
|
899
|
-
}
|
|
900
|
-
|
|
901
|
-
/* Menu settings ultra-compact */
|
|
902
|
-
.settings-menu {
|
|
903
|
-
min-width: 140px;
|
|
904
|
-
font-size: 11px;
|
|
905
|
-
}
|
|
906
|
-
|
|
907
|
-
.settings-option {
|
|
908
|
-
padding: 5px 10px;
|
|
909
|
-
font-size: 11px;
|
|
910
|
-
}
|
|
911
|
-
|
|
912
|
-
.settings-submenu {
|
|
913
|
-
min-width: 120px;
|
|
914
|
-
}
|
|
915
|
-
|
|
916
|
-
.settings-suboption {
|
|
917
|
-
padding: 5px 10px;
|
|
918
|
-
font-size: 10px;
|
|
919
|
-
}
|
|
920
|
-
}
|
|
921
|
-
|
|
922
|
-
/* OVERFLOW HANDLING - CRITICAL FIX */
|
|
923
|
-
@media (max-width: 600px) {
|
|
924
|
-
.controls-main {
|
|
925
|
-
/* Allow horizontal scrolling if absolutely necessary */
|
|
926
|
-
overflow-x: auto;
|
|
927
|
-
scrollbar-width: none; /* Firefox */
|
|
928
|
-
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
929
|
-
}
|
|
930
|
-
|
|
931
|
-
.controls-main::-webkit-scrollbar {
|
|
932
|
-
display: none; /* Safari and Chrome */
|
|
933
|
-
}
|
|
934
|
-
|
|
935
|
-
.controls-left,
|
|
936
|
-
.controls-right {
|
|
937
|
-
/* Ensure buttons stay in a single line */
|
|
938
|
-
flex-wrap: nowrap;
|
|
939
|
-
white-space: nowrap;
|
|
940
|
-
/* Allow further shrinking */
|
|
941
|
-
flex-shrink: 1;
|
|
942
|
-
min-width: fit-content;
|
|
943
|
-
}
|
|
944
|
-
}
|
|
945
|
-
|
|
946
|
-
/* PLAYLIST CONTROLS */
|
|
947
|
-
.controls-right .playlist-prev-btn,
|
|
948
|
-
.controls-right .playlist-next-btn {
|
|
949
|
-
display: none; /* Hidden by default, shown only when playlist is detected */
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
.controls-right .playlist-prev-btn.playlist-active,
|
|
953
|
-
.controls-right .playlist-next-btn.playlist-active {
|
|
954
|
-
display: flex;
|
|
955
|
-
}
|
|
956
|
-
|
|
957
|
-
/* Playlist button styles */
|
|
958
|
-
.playlist-prev-btn .icon::before {
|
|
959
|
-
content: '⏮';
|
|
960
|
-
}
|
|
961
|
-
|
|
962
|
-
.playlist-next-btn .icon::before {
|
|
963
|
-
content: '⏭';
|
|
964
|
-
}
|
|
965
|
-
|
|
966
|
-
/* Disabled state for playlist buttons */
|
|
967
|
-
.playlist-prev-btn:disabled,
|
|
968
|
-
.playlist-next-btn:disabled {
|
|
969
|
-
opacity: 0.4;
|
|
970
|
-
cursor: not-allowed;
|
|
971
|
-
pointer-events: none;
|
|
972
|
-
}
|
|
973
|
-
|
|
974
|
-
.playlist-prev-btn:disabled .icon,
|
|
975
|
-
.playlist-next-btn:disabled .icon {
|
|
976
|
-
opacity: 0.5;
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
/* Responsive playlist buttons */
|
|
980
|
-
@media (max-width: 768px) {
|
|
981
|
-
.playlist-prev-btn .icon::before,
|
|
982
|
-
.playlist-next-btn .icon::before {
|
|
983
|
-
font-size: 16px;
|
|
984
|
-
}
|
|
985
|
-
}
|
|
986
|
-
|
|
987
|
-
@media (max-width: 480px) {
|
|
988
|
-
.playlist-prev-btn .icon::before,
|
|
989
|
-
.playlist-next-btn .icon::before {
|
|
990
|
-
font-size: 14px;
|
|
991
|
-
}
|
|
992
|
-
}
|
|
993
|
-
|
|
994
|
-
/* FULLSCREEN */
|
|
995
|
-
.video-container:fullscreen,
|
|
996
|
-
.video-container:-webkit-full-screen,
|
|
997
|
-
.video-container:-moz-full-screen {
|
|
998
|
-
width: 100vw;
|
|
999
|
-
height: 100vh;
|
|
1000
|
-
border-radius: 0;
|
|
1001
|
-
}
|
|
1002
|
-
|
|
1003
|
-
/* ANIMATIONS */
|
|
1004
|
-
@keyframes qualityChange {
|
|
1005
|
-
0% {
|
|
1006
|
-
opacity: 0.7;
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
|
-
50% {
|
|
1010
|
-
opacity: 0.3;
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
100% {
|
|
1014
|
-
opacity: 1;
|
|
1015
|
-
}
|
|
1016
|
-
}
|
|
1017
|
-
|
|
1018
|
-
.quality-changing {
|
|
1019
|
-
animation: qualityChange 0.5s ease-in-out;
|
|
1020
|
-
}
|
|
1021
|
-
|
|
1022
|
-
/* FOCUS ACCESSIBILITY */
|
|
1023
|
-
.control-btn:focus {
|
|
1024
|
-
outline: 2px solid var(--player-primary-color);
|
|
1025
|
-
outline-offset: 2px;
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
|
-
.volume-slider:focus {
|
|
1029
|
-
outline: 2px solid var(--player-primary-color);
|
|
1030
|
-
outline-offset: 2px;
|
|
1031
|
-
}
|
|
1032
|
-
|
|
1033
|
-
/* THEME UTILITIES */
|
|
1034
|
-
.player-large-controls {
|
|
1035
|
-
--player-icon-size: 24px;
|
|
1036
|
-
--player-button-padding: 12px;
|
|
1037
|
-
--player-progress-height: 8px;
|
|
1038
|
-
--player-progress-handle-size: 20px;
|
|
1039
|
-
--player-title-overlay-padding: 18px 24px 30px;
|
|
1040
|
-
}
|
|
1041
|
-
|
|
1042
|
-
.player-compact-controls {
|
|
1043
|
-
--player-icon-size: 16px;
|
|
1044
|
-
--player-button-padding: 4px;
|
|
1045
|
-
--player-controls-padding: 15px 10px 10px;
|
|
1046
|
-
--player-title-overlay-padding: 12px 16px 20px;
|
|
1047
|
-
}
|
|
1048
|
-
|
|
1049
|
-
/* FIREFOX-SPECIFIC VOLUME SLIDER FIX */
|
|
1050
|
-
@-moz-document url-prefix() {
|
|
1051
|
-
.volume-slider::-moz-range-thumb {
|
|
1052
|
-
/* Additional Firefox alignment correction */
|
|
1053
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px));
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
1057
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px)) scale(1.1);
|
|
1058
|
-
}
|
|
1059
|
-
/* Ensure the track alignment is also correct */
|
|
1060
|
-
.volume-slider::-moz-range-track {
|
|
1061
|
-
height: var(--player-volume-height);
|
|
1062
|
-
background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
|
|
1063
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
1064
|
-
border: none;
|
|
1065
|
-
transition: background var(--player-transition-fast);
|
|
1066
|
-
margin: 0;
|
|
1067
|
-
}
|
|
1068
|
-
}
|
|
1069
|
-
|
|
1070
|
-
/* Alternative approach - using Firefox-specific selector */
|
|
1071
|
-
@supports (-moz-appearance: none) {
|
|
1072
|
-
.volume-slider {
|
|
1073
|
-
/* Slight vertical adjustment for Firefox only */
|
|
1074
|
-
margin-top: -1px;
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
.volume-slider::-moz-range-thumb {
|
|
1078
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px));
|
|
1079
|
-
}
|
|
1080
|
-
|
|
1081
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
1082
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px)) scale(1.1);
|
|
1083
|
-
}
|
|
1084
|
-
}
|
|
1085
|
-
|
|
1086
|
-
/* FIREFOX VOLUME CONTAINER POSITION FIX */
|
|
1087
|
-
@-moz-document url-prefix() {
|
|
1088
|
-
.volume-container {
|
|
1089
|
-
position: relative;
|
|
1090
|
-
top: 2px !important;
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
.volume-slider::-moz-range-thumb {
|
|
1094
|
-
margin-top: -6px !important;
|
|
1095
|
-
transform: translateY(-2px) !important;
|
|
1096
|
-
}
|
|
1097
|
-
|
|
1098
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
1099
|
-
transform: translateY(-2px) scale(1.1) !important;
|
|
1100
|
-
}
|
|
1101
|
-
}
|
|
1102
|
-
|
|
1103
|
-
/* RESOLUTION CONTROL SYSTEM - Video resolution modes management */
|
|
1104
|
-
|
|
1105
|
-
/* Base styles for resolution control */
|
|
1106
|
-
.video-player {
|
|
1107
|
-
object-position: center center;
|
|
1108
|
-
}
|
|
1109
|
-
|
|
1110
|
-
/* Normal (default) - maintain original aspect ratio */
|
|
1111
|
-
.resolution-normal .video-player {
|
|
1112
|
-
object-fit: contain;
|
|
1113
|
-
object-position: center center;
|
|
1114
|
-
}
|
|
1115
|
-
|
|
1116
|
-
/* 4:3 - Force 4:3 format */
|
|
1117
|
-
.resolution-4-3 .video-player {
|
|
1118
|
-
object-fit: fill;
|
|
1119
|
-
aspect-ratio: 4/3;
|
|
1120
|
-
}
|
|
1121
|
-
|
|
1122
|
-
.resolution-4-3 .video-wrapper {
|
|
1123
|
-
aspect-ratio: 4/3;
|
|
1124
|
-
}
|
|
1125
|
-
|
|
1126
|
-
/* 16:9 - Force 16:9 format */
|
|
1127
|
-
.resolution-16-9 .video-player {
|
|
1128
|
-
object-fit: fill;
|
|
1129
|
-
aspect-ratio: 16/9;
|
|
1130
|
-
}
|
|
1131
|
-
|
|
1132
|
-
.resolution-16-9 .video-wrapper {
|
|
1133
|
-
aspect-ratio: 16/9;
|
|
1134
|
-
}
|
|
1135
|
-
|
|
1136
|
-
/* Stretched - Stretch video to fill container completely */
|
|
1137
|
-
.resolution-stretched .video-player {
|
|
1138
|
-
object-fit: fill;
|
|
1139
|
-
width: 100%;
|
|
1140
|
-
height: 100%;
|
|
1141
|
-
}
|
|
1142
|
-
|
|
1143
|
-
.resolution-stretched .video-wrapper {
|
|
1144
|
-
height: auto;
|
|
1145
|
-
min-height: 300px;
|
|
1146
|
-
}
|
|
1147
|
-
|
|
1148
|
-
/* Fit to Screen - Adapt to screen without deforming, may crop parts */
|
|
1149
|
-
.resolution-fit-to-screen .video-player {
|
|
1150
|
-
object-fit: cover;
|
|
1151
|
-
object-position: center center;
|
|
1152
|
-
width: 100%;
|
|
1153
|
-
height: 100%;
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
.resolution-fit-to-screen .video-wrapper {
|
|
1157
|
-
height: 100vh;
|
|
1158
|
-
max-height: 100vh;
|
|
1159
|
-
}
|
|
1160
|
-
|
|
1161
|
-
/* Scale to Fit - PERFECT for smartphone videos! Scales to maximum size without distortion or cropping */
|
|
1162
|
-
.resolution-scale-to-fit .video-player {
|
|
1163
|
-
object-fit: contain;
|
|
1164
|
-
object-position: center center;
|
|
1165
|
-
width: 100%;
|
|
1166
|
-
height: 100%;
|
|
1167
|
-
max-width: 100vw;
|
|
1168
|
-
max-height: 100vh;
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
1172
|
-
display: flex;
|
|
1173
|
-
align-items: center;
|
|
1174
|
-
justify-content: center;
|
|
1175
|
-
height: 70vh;
|
|
1176
|
-
min-height: 400px;
|
|
1177
|
-
background: var(--player-bg-primary, #000);
|
|
1178
|
-
}
|
|
1179
|
-
|
|
1180
|
-
/* Enhanced scale-to-fit for different viewport orientations */
|
|
1181
|
-
@media (orientation: portrait) {
|
|
1182
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
1183
|
-
height: 50vh;
|
|
1184
|
-
min-height: 350px;
|
|
1185
|
-
}
|
|
1186
|
-
}
|
|
1187
|
-
|
|
1188
|
-
@media (orientation: landscape) {
|
|
1189
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
1190
|
-
height: 80vh;
|
|
1191
|
-
min-height: 450px;
|
|
1192
|
-
}
|
|
1193
|
-
}
|
|
1194
|
-
|
|
1195
|
-
/* Responsive adjustments for resolution modes */
|
|
1196
|
-
@media (max-width: 768px) {
|
|
1197
|
-
/* On mobile, some modes might need adjustments */
|
|
1198
|
-
.resolution-fit-to-screen .video-wrapper {
|
|
1199
|
-
height: 50vh;
|
|
1200
|
-
min-height: 250px;
|
|
1201
|
-
}
|
|
1202
|
-
|
|
1203
|
-
.resolution-4-3 .video-wrapper,
|
|
1204
|
-
.resolution-16-9 .video-wrapper {
|
|
1205
|
-
min-height: 200px;
|
|
1206
|
-
}
|
|
1207
|
-
|
|
1208
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
1209
|
-
height: 45vh;
|
|
1210
|
-
min-height: 300px;
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
@media (max-width: 480px) {
|
|
1215
|
-
.resolution-fit-to-screen .video-wrapper {
|
|
1216
|
-
height: 40vh;
|
|
1217
|
-
min-height: 200px;
|
|
1218
|
-
}
|
|
1219
|
-
|
|
1220
|
-
.resolution-4-3 .video-wrapper,
|
|
1221
|
-
.resolution-16-9 .video-wrapper {
|
|
1222
|
-
min-height: 180px;
|
|
1223
|
-
}
|
|
1224
|
-
|
|
1225
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
1226
|
-
height: 40vh;
|
|
1227
|
-
min-height: 250px;
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
|
|
1231
|
-
/* Transitions for smooth changes */
|
|
1232
|
-
.video-player {
|
|
1233
|
-
transition: object-fit 0.3s ease, aspect-ratio 0.3s ease;
|
|
1234
|
-
}
|
|
1235
|
-
|
|
1236
|
-
.video-wrapper {
|
|
1237
|
-
transition: aspect-ratio 0.3s ease, height 0.3s ease;
|
|
1238
|
-
}
|
|
1239
|
-
|
|
1240
|
-
/* Fallback for browsers that don't support aspect-ratio */
|
|
1241
|
-
@supports not (aspect-ratio: 1) {
|
|
1242
|
-
.resolution-4-3 .video-wrapper {
|
|
1243
|
-
padding-bottom: 75%; /* 4:3 ratio fallback */
|
|
1244
|
-
height: 0;
|
|
1245
|
-
position: relative;
|
|
1246
|
-
}
|
|
1247
|
-
|
|
1248
|
-
.resolution-4-3 .video-player {
|
|
1249
|
-
position: absolute;
|
|
1250
|
-
top: 0;
|
|
1251
|
-
left: 0;
|
|
1252
|
-
width: 100%;
|
|
1253
|
-
height: 100%;
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
.resolution-16-9 .video-wrapper {
|
|
1257
|
-
padding-bottom: 56.25%; /* 16:9 ratio fallback */
|
|
1258
|
-
height: 0;
|
|
1259
|
-
position: relative;
|
|
1260
|
-
}
|
|
1261
|
-
|
|
1262
|
-
.resolution-16-9 .video-player {
|
|
1263
|
-
position: absolute;
|
|
1264
|
-
top: 0;
|
|
1265
|
-
left: 0;
|
|
1266
|
-
width: 100%;
|
|
1267
|
-
height: 100%;
|
|
1268
|
-
}
|
|
1269
|
-
}
|
|
1270
|
-
|
|
1271
|
-
/* Quality changing state - show loading during quality change */
|
|
1272
|
-
.quality-changing .video-player {
|
|
1273
|
-
filter: brightness(0.7);
|
|
1274
|
-
}
|
|
1275
|
-
|
|
1276
|
-
/* Utility classes for debugging */
|
|
1277
|
-
.resolution-debug .video-wrapper::before {
|
|
1278
|
-
content: 'Resolution: ' attr(data-resolution);
|
|
1279
|
-
position: absolute;
|
|
1280
|
-
top: 10px;
|
|
1281
|
-
left: 10px;
|
|
1282
|
-
background: rgba(0, 0, 0, 0.7);
|
|
1283
|
-
color: white;
|
|
1284
|
-
padding: 5px 10px;
|
|
1285
|
-
border-radius: 4px;
|
|
1286
|
-
font-size: 12px;
|
|
1287
|
-
z-index: 1000;
|
|
1288
|
-
pointer-events: none;
|
|
1289
|
-
}
|
|
1290
|
-
|
|
1291
|
-
/* CRITICAL: Ensure all control containers can handle overflow gracefully */
|
|
1292
|
-
.controls,
|
|
1293
|
-
.controls-main,
|
|
1294
|
-
.controls-left,
|
|
1295
|
-
.controls-right {
|
|
1296
|
-
overflow: visible !important;
|
|
1297
|
-
}
|
|
1298
|
-
|
|
1299
|
-
/* Force buttons to stay in one line and allow flexible sizing */
|
|
1300
|
-
.controls-left,
|
|
1301
|
-
.controls-right {
|
|
1302
|
-
flex-wrap: nowrap !important;
|
|
1303
|
-
white-space: nowrap !important;
|
|
1304
|
-
}
|
|
1305
|
-
|
|
1306
|
-
/* Allow buttons to shrink below their natural content size when absolutely necessary */
|
|
1307
|
-
.control-btn {
|
|
1308
|
-
min-width: 0 !important;
|
|
1309
|
-
white-space: nowrap !important;
|
|
1310
|
-
}
|
|
1311
|
-
/* CSS for subtitles SRT */
|
|
1312
|
-
video::cue {
|
|
1313
|
-
background-color: rgba(0, 0, 0, 0.8);
|
|
1314
|
-
color: white;
|
|
1315
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
1316
|
-
font-size: 18px;
|
|
1317
|
-
font-weight: normal;
|
|
1318
|
-
line-height: 1.2;
|
|
1319
|
-
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
|
1320
|
-
padding: 4px 8px;
|
|
1321
|
-
border-radius: 4px;
|
|
1322
|
-
white-space: pre-line;
|
|
1323
|
-
}
|
|
1324
|
-
|
|
1325
|
-
/* Fix for browser WebKit (Chrome, Safari, Edge) */
|
|
1326
|
-
video::-webkit-media-text-track-display {
|
|
1327
|
-
color: white;
|
|
1328
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
1329
|
-
background-color: rgba(0, 0, 0, 0.8);
|
|
1330
|
-
border-radius: 4px;
|
|
1331
|
-
padding: 4px 8px;
|
|
1332
|
-
font-size: 18px;
|
|
1333
|
-
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
|
1334
|
-
}
|
|
1335
|
-
/* Custom subtitle overlay responsive styles */
|
|
1336
|
-
.custom-subtitle-overlay {
|
|
1337
|
-
font-size: clamp(12px, 4vw, 18px);
|
|
1338
|
-
}
|
|
1339
|
-
|
|
1340
|
-
/* Tablet responsiveness */
|
|
1341
|
-
@media (max-width: 768px) {
|
|
1342
|
-
.custom-subtitle-overlay {
|
|
1343
|
-
font-size: 16px !important;
|
|
1344
|
-
bottom: 70px !important;
|
|
1345
|
-
max-width: 85% !important;
|
|
1346
|
-
padding: 6px 12px !important;
|
|
1347
|
-
line-height: 1.2 !important;
|
|
1348
|
-
}
|
|
1349
|
-
}
|
|
1350
|
-
|
|
1351
|
-
/* Mobile phone responsiveness */
|
|
1352
|
-
@media (max-width: 480px) {
|
|
1353
|
-
.custom-subtitle-overlay {
|
|
1354
|
-
font-size: 14px !important;
|
|
1355
|
-
bottom: 60px !important;
|
|
1356
|
-
max-width: 90% !important;
|
|
1357
|
-
padding: 5px 10px !important;
|
|
1358
|
-
line-height: 1.15 !important;
|
|
1359
|
-
}
|
|
1360
|
-
}
|
|
1361
|
-
|
|
1362
|
-
/* Very small screens */
|
|
1363
|
-
@media (max-width: 360px) {
|
|
1364
|
-
.custom-subtitle-overlay {
|
|
1365
|
-
font-size: 12px !important;
|
|
1366
|
-
bottom: 50px !important;
|
|
1367
|
-
max-width: 95% !important;
|
|
1368
|
-
padding: 4px 8px !important;
|
|
1369
|
-
}
|
|
1370
|
-
}
|
|
1371
|
-
|
|
1372
|
-
/* Landscape mobile optimization */
|
|
1373
|
-
@media (max-height: 500px) and (orientation: landscape) {
|
|
1374
|
-
.custom-subtitle-overlay {
|
|
1375
|
-
font-size: 13px !important;
|
|
1376
|
-
bottom: 45px !important;
|
|
1377
|
-
max-width: 85% !important;
|
|
1378
|
-
padding: 4px 10px !important;
|
|
1379
|
-
}
|
|
1380
|
-
}
|
|
1381
|
-
|
|
1382
|
-
/* Scrollable dropdown menus for small player heights */
|
|
1383
|
-
.speed-menu,
|
|
1384
|
-
.quality-menu,
|
|
1385
|
-
.subtitles-menu {
|
|
1386
|
-
max-height: 200px;
|
|
1387
|
-
overflow-y: auto;
|
|
1388
|
-
scrollbar-width: thin;
|
|
1389
|
-
scrollbar-color: var(--player-primary-color) rgba(255, 255, 255, 0.1);
|
|
1390
|
-
}
|
|
1391
|
-
|
|
1392
|
-
/* Custom scrollbar for WebKit browsers */
|
|
1393
|
-
.speed-menu::-webkit-scrollbar,
|
|
1394
|
-
.quality-menu::-webkit-scrollbar,
|
|
1395
|
-
.subtitles-menu::-webkit-scrollbar {
|
|
1396
|
-
width: 6px;
|
|
1397
|
-
}
|
|
1398
|
-
|
|
1399
|
-
.speed-menu::-webkit-scrollbar-track,
|
|
1400
|
-
.quality-menu::-webkit-scrollbar-track,
|
|
1401
|
-
.subtitles-menu::-webkit-scrollbar-track {
|
|
1402
|
-
background: rgba(255, 255, 255, 0.1);
|
|
1403
|
-
border-radius: 3px;
|
|
1404
|
-
}
|
|
1405
|
-
|
|
1406
|
-
.speed-menu::-webkit-scrollbar-thumb,
|
|
1407
|
-
.quality-menu::-webkit-scrollbar-thumb,
|
|
1408
|
-
.subtitles-menu::-webkit-scrollbar-thumb {
|
|
1409
|
-
background: var(--player-primary-color);
|
|
1410
|
-
border-radius: 3px;
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1413
|
-
.speed-menu::-webkit-scrollbar-thumb:hover,
|
|
1414
|
-
.quality-menu::-webkit-scrollbar-thumb:hover,
|
|
1415
|
-
.subtitles-menu::-webkit-scrollbar-thumb:hover {
|
|
1416
|
-
background: var(--player-primary-hover);
|
|
1417
|
-
}
|
|
1418
|
-
|
|
1419
|
-
/* Responsive max-height for very small players */
|
|
1420
|
-
@media (max-height: 400px) {
|
|
1421
|
-
.speed-menu,
|
|
1422
|
-
.quality-menu,
|
|
1423
|
-
.subtitles-menu {
|
|
1424
|
-
max-height: 150px;
|
|
1425
|
-
}
|
|
1426
|
-
}
|
|
1427
|
-
|
|
1428
|
-
@media (max-height: 300px) {
|
|
1429
|
-
.speed-menu,
|
|
1430
|
-
.quality-menu,
|
|
1431
|
-
.subtitles-menu {
|
|
1432
|
-
max-height: 120px;
|
|
1433
|
-
}
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1436
|
-
/* Scrollbar for settings submenus on small screens */
|
|
1437
|
-
.settings-submenu {
|
|
1438
|
-
max-height: 180px;
|
|
1439
|
-
overflow-y: auto;
|
|
1440
|
-
scrollbar-width: thin;
|
|
1441
|
-
scrollbar-color: var(--player-primary-color) rgba(255, 255, 255, 0.1);
|
|
1442
|
-
}
|
|
1443
|
-
|
|
1444
|
-
/* Custom scrollbar for settings submenu in WebKit browsers */
|
|
1445
|
-
.settings-submenu::-webkit-scrollbar {
|
|
1446
|
-
width: 6px;
|
|
1447
|
-
}
|
|
1448
|
-
|
|
1449
|
-
.settings-submenu::-webkit-scrollbar-track {
|
|
1450
|
-
background: rgba(255, 255, 255, 0.1);
|
|
1451
|
-
border-radius: 3px;
|
|
1452
|
-
}
|
|
1453
|
-
|
|
1454
|
-
.settings-submenu::-webkit-scrollbar-thumb {
|
|
1455
|
-
background: var(--player-primary-color);
|
|
1456
|
-
border-radius: 3px;
|
|
1457
|
-
}
|
|
1458
|
-
|
|
1459
|
-
.settings-submenu::-webkit-scrollbar-thumb:hover {
|
|
1460
|
-
background: var(--player-primary-hover);
|
|
1461
|
-
}
|
|
1462
|
-
|
|
1463
|
-
/* Responsive adjustments for settings submenu on very small screens */
|
|
1464
|
-
@media (max-width: 350px) {
|
|
1465
|
-
.settings-submenu {
|
|
1466
|
-
max-height: 140px;
|
|
1467
|
-
}
|
|
1468
|
-
}
|
|
1469
|
-
|
|
1470
|
-
@media (max-height: 400px) {
|
|
1471
|
-
.settings-submenu {
|
|
1472
|
-
max-height: 120px;
|
|
1473
|
-
}
|
|
1474
|
-
}
|
|
1475
|
-
|
|
1476
|
-
/* Volume Slider Configuration - Base styles */
|
|
1477
|
-
.volume-container {
|
|
1478
|
-
position: relative;
|
|
1479
|
-
display: flex;
|
|
1480
|
-
align-items: center;
|
|
1481
|
-
gap: var(--player-controls-gap);
|
|
1482
|
-
}
|
|
1483
|
-
|
|
1484
|
-
/* Horizontal Volume Slider (default) - Base width reduced */
|
|
1485
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
1486
|
-
width: 80px; /* Ridotto da var(--player-volume-width) a 80px fissi */
|
|
1487
|
-
height: var(--player-volume-height);
|
|
1488
|
-
background: var(--player-volume-bg);
|
|
1489
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
1490
|
-
transition: all 0.3s ease;
|
|
1491
|
-
}
|
|
1492
|
-
|
|
1493
|
-
/* Responsive width reduction for horizontal slider */
|
|
1494
|
-
@media (max-width: 1200px) {
|
|
1495
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
1496
|
-
width: 70px;
|
|
1497
|
-
}
|
|
1498
|
-
}
|
|
1499
|
-
|
|
1500
|
-
@media (max-width: 900px) {
|
|
1501
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
1502
|
-
width: 60px;
|
|
1503
|
-
}
|
|
1504
|
-
}
|
|
1505
|
-
|
|
1506
|
-
@media (max-width: 768px) {
|
|
1507
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
1508
|
-
width: 50px;
|
|
1509
|
-
}
|
|
1510
|
-
}
|
|
1511
|
-
|
|
1512
|
-
@media (max-width: 600px) {
|
|
1513
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
1514
|
-
width: 40px;
|
|
1515
|
-
}
|
|
1516
|
-
}
|
|
1517
|
-
|
|
1518
|
-
/* Vertical Volume Slider (always visible) */
|
|
1519
|
-
.volume-container[data-orientation="vertical"] {
|
|
1520
|
-
flex-direction: column;
|
|
1521
|
-
height: 80px;
|
|
1522
|
-
justify-content: center;
|
|
1523
|
-
}
|
|
1524
|
-
|
|
1525
|
-
.volume-container[data-orientation="vertical"] .volume-slider {
|
|
1526
|
-
width: 4px;
|
|
1527
|
-
height: 60px;
|
|
1528
|
-
writing-mode: bt-lr; /* IE */
|
|
1529
|
-
-webkit-appearance: slider-vertical; /* WebKit */
|
|
1530
|
-
background: var(--player-volume-bg);
|
|
1531
|
-
border-radius: 2px;
|
|
1532
|
-
transform: rotate(0deg);
|
|
1533
|
-
transition: all 0.3s ease;
|
|
1534
|
-
}
|
|
1535
|
-
|
|
1536
|
-
/* Responsive: Force vertical behavior for horizontal sliders under 550px */
|
|
1537
|
-
@media (max-width: 550px) {
|
|
1538
|
-
/* Hide horizontal slider by default on mobile */
|
|
1539
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
1540
|
-
position: absolute;
|
|
1541
|
-
opacity: 0;
|
|
1542
|
-
visibility: hidden;
|
|
1543
|
-
pointer-events: none;
|
|
1544
|
-
width: 0;
|
|
1545
|
-
height: 0;
|
|
1546
|
-
transform: translateX(-50%) rotate(-90deg);
|
|
1547
|
-
transform-origin: center center;
|
|
1548
|
-
transition: opacity 0.1s ease, visibility 0.1s ease;
|
|
1549
|
-
}
|
|
1550
|
-
|
|
1551
|
-
/* Show vertical slider on hover for horizontal mode */
|
|
1552
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider,
|
|
1553
|
-
.volume-container[data-orientation="horizontal"]:hover .volume-slider {
|
|
1554
|
-
position: absolute;
|
|
1555
|
-
opacity: 1;
|
|
1556
|
-
visibility: visible;
|
|
1557
|
-
pointer-events: auto;
|
|
1558
|
-
width: 60px;
|
|
1559
|
-
height: 4px;
|
|
1560
|
-
bottom: 45px;
|
|
1561
|
-
left: -20px;
|
|
1562
|
-
transform: translateX(-50%) translateY(0%) rotate(-90deg);
|
|
1563
|
-
transform-origin: center center;
|
|
1564
|
-
z-index: 1000;
|
|
1565
|
-
background: rgba(0, 0, 0, 0.9);
|
|
1566
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
1567
|
-
border-radius: 6px;
|
|
1568
|
-
padding: 4px;
|
|
1569
|
-
backdrop-filter: blur(10px);
|
|
1570
|
-
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
|
|
1571
|
-
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
1572
|
-
}
|
|
1573
|
-
|
|
1574
|
-
/* Extend hover area of mute button for horizontal mode */
|
|
1575
|
-
.volume-container[data-orientation="horizontal"] + .mute-btn,
|
|
1576
|
-
.mute-btn + .volume-container[data-orientation="horizontal"] .mute-btn {
|
|
1577
|
-
padding: 15px;
|
|
1578
|
-
margin: -7px;
|
|
1579
|
-
position: relative;
|
|
1580
|
-
z-index: 1001;
|
|
1581
|
-
}
|
|
1582
|
-
|
|
1583
|
-
/* Keep hover active when moving from button to slider */
|
|
1584
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"]::before,
|
|
1585
|
-
.volume-container[data-orientation="horizontal"]::before {
|
|
1586
|
-
content: '';
|
|
1587
|
-
position: absolute;
|
|
1588
|
-
top: -50px;
|
|
1589
|
-
left: -40px;
|
|
1590
|
-
right: -20px;
|
|
1591
|
-
bottom: -10px;
|
|
1592
|
-
background: transparent;
|
|
1593
|
-
z-index: 999;
|
|
1594
|
-
}
|
|
1595
|
-
|
|
1596
|
-
/* Hide thumb by default for horizontal mode on mobile */
|
|
1597
|
-
.volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
|
|
1598
|
-
opacity: 0;
|
|
1599
|
-
visibility: hidden;
|
|
1600
|
-
transition: none !important;
|
|
1601
|
-
}
|
|
1602
|
-
|
|
1603
|
-
.volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
|
|
1604
|
-
opacity: 0;
|
|
1605
|
-
visibility: hidden;
|
|
1606
|
-
transition: none !important;
|
|
1607
|
-
}
|
|
1608
|
-
|
|
1609
|
-
/* Show thumb only when in hover for horizontal mode */
|
|
1610
|
-
.volume-container[data-orientation="horizontal"]:hover .volume-slider::-webkit-slider-thumb,
|
|
1611
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
|
|
1612
|
-
opacity: 1;
|
|
1613
|
-
visibility: visible;
|
|
1614
|
-
-webkit-appearance: none;
|
|
1615
|
-
width: var(--player-volume-handle-size);
|
|
1616
|
-
height: var(--player-volume-handle-size);
|
|
1617
|
-
border-radius: 50%;
|
|
1618
|
-
background: var(--player-primary-color);
|
|
1619
|
-
cursor: pointer;
|
|
1620
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
1621
|
-
transition: none !important;
|
|
1622
|
-
}
|
|
1623
|
-
|
|
1624
|
-
.volume-container[data-orientation="horizontal"]:hover .volume-slider::-moz-range-thumb,
|
|
1625
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
|
|
1626
|
-
opacity: 1;
|
|
1627
|
-
visibility: visible;
|
|
1628
|
-
width: var(--player-volume-handle-size);
|
|
1629
|
-
height: var(--player-volume-handle-size);
|
|
1630
|
-
border-radius: 50%;
|
|
1631
|
-
background: var(--player-primary-color);
|
|
1632
|
-
cursor: pointer;
|
|
1633
|
-
border: none;
|
|
1634
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
1635
|
-
transition: none !important;
|
|
1636
|
-
}
|
|
1637
|
-
|
|
1638
|
-
/* Vertical sliders remain unchanged on mobile */
|
|
1639
|
-
.volume-container[data-orientation="vertical"] {
|
|
1640
|
-
/* Keep original vertical styling */
|
|
1641
|
-
}
|
|
1642
|
-
}
|
|
1643
|
-
|
|
1644
|
-
/* CHAPTER MARKERS SYSTEM */
|
|
1645
|
-
|
|
1646
|
-
/* Container for all chapter markers */
|
|
1647
|
-
.chapter-markers-container {
|
|
1648
|
-
position: absolute;
|
|
1649
|
-
top: 0;
|
|
1650
|
-
left: 0;
|
|
1651
|
-
width: 100%;
|
|
1652
|
-
height: 100%;
|
|
1653
|
-
pointer-events: none;
|
|
1654
|
-
z-index: 3;
|
|
1655
|
-
}
|
|
1656
|
-
|
|
1657
|
-
/* Individual chapter marker */
|
|
1658
|
-
.chapter-marker {
|
|
1659
|
-
position: absolute;
|
|
1660
|
-
top: 0;
|
|
1661
|
-
height: 100%;
|
|
1662
|
-
width: 3px;
|
|
1663
|
-
background: var(--player-primary-color);
|
|
1664
|
-
opacity: 0.7;
|
|
1665
|
-
cursor: pointer;
|
|
1666
|
-
pointer-events: auto;
|
|
1667
|
-
transition: all var(--player-transition-fast);
|
|
1668
|
-
border-radius: 2px;
|
|
1669
|
-
transform: translateX(-50%);
|
|
1670
|
-
}
|
|
1671
|
-
|
|
1672
|
-
/* Hover state for chapter marker */
|
|
1673
|
-
.chapter-marker:hover {
|
|
1674
|
-
opacity: 1;
|
|
1675
|
-
width: 4px;
|
|
1676
|
-
height: 120%;
|
|
1677
|
-
top: -10%;
|
|
1678
|
-
box-shadow: 0 0 8px var(--player-primary-color);
|
|
1679
|
-
}
|
|
1680
|
-
|
|
1681
|
-
/* Active chapter marker (currently playing) */
|
|
1682
|
-
.chapter-marker.active {
|
|
1683
|
-
background: var(--player-primary-hover);
|
|
1684
|
-
opacity: 1;
|
|
1685
|
-
width: 4px;
|
|
1686
|
-
}
|
|
1687
|
-
|
|
1688
|
-
/* Chapter tooltip */
|
|
1689
|
-
.chapter-tooltip {
|
|
1690
|
-
position: absolute;
|
|
1691
|
-
bottom: 100%;
|
|
1692
|
-
left: 0;
|
|
1693
|
-
background: rgba(0, 0, 0, 0.95);
|
|
1694
|
-
backdrop-filter: blur(10px);
|
|
1695
|
-
border-radius: 8px;
|
|
1696
|
-
padding: 0;
|
|
1697
|
-
margin-bottom: 12px;
|
|
1698
|
-
opacity: 0;
|
|
1699
|
-
visibility: hidden;
|
|
1700
|
-
transition: all 0.2s ease;
|
|
1701
|
-
transform: translateX(-50%) translateY(-8px);
|
|
1702
|
-
z-index: 1000;
|
|
1703
|
-
box-shadow: var(--player-shadow-tooltip);
|
|
1704
|
-
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
1705
|
-
min-width: 200px;
|
|
1706
|
-
max-width: 300px;
|
|
1707
|
-
overflow: hidden;
|
|
1708
|
-
pointer-events: none;
|
|
1709
|
-
}
|
|
1710
|
-
|
|
1711
|
-
/* Tooltip arrow */
|
|
1712
|
-
.chapter-tooltip::after {
|
|
1713
|
-
content: '';
|
|
1714
|
-
position: absolute;
|
|
1715
|
-
top: 100%;
|
|
1716
|
-
left: 50%;
|
|
1717
|
-
transform: translateX(-50%);
|
|
1718
|
-
width: 0;
|
|
1719
|
-
height: 0;
|
|
1720
|
-
border-left: 6px solid transparent;
|
|
1721
|
-
border-right: 6px solid transparent;
|
|
1722
|
-
border-top: 6px solid rgba(0, 0, 0, 0.95);
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1725
|
-
/* Chapter tooltip image */
|
|
1726
|
-
.chapter-tooltip-image {
|
|
1727
|
-
width: 100%;
|
|
1728
|
-
height: 150px;
|
|
1729
|
-
background-size: cover;
|
|
1730
|
-
background-position: center;
|
|
1731
|
-
background-repeat: no-repeat;
|
|
1732
|
-
display: none;
|
|
1733
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
1734
|
-
}
|
|
1735
|
-
|
|
1736
|
-
/* Chapter tooltip title */
|
|
1737
|
-
.chapter-tooltip-title {
|
|
1738
|
-
padding: 10px 12px 6px;
|
|
1739
|
-
color: var(--player-text-color);
|
|
1740
|
-
font-size: 14px;
|
|
1741
|
-
font-weight: 600;
|
|
1742
|
-
line-height: 1.3;
|
|
1743
|
-
word-wrap: break-word;
|
|
1744
|
-
}
|
|
1745
|
-
|
|
1746
|
-
/* Chapter tooltip time */
|
|
1747
|
-
.chapter-tooltip-time {
|
|
1748
|
-
padding: 0 12px 10px;
|
|
1749
|
-
color: var(--player-text-secondary);
|
|
1750
|
-
font-size: 12px;
|
|
1751
|
-
font-weight: 400;
|
|
1752
|
-
font-variant-numeric: tabular-nums;
|
|
1753
|
-
}
|
|
1754
|
-
|
|
1755
|
-
/* RESPONSIVE ADJUSTMENTS FOR CHAPTERS */
|
|
1756
|
-
@media (max-width: 480px) {
|
|
1757
|
-
.chapter-marker {
|
|
1758
|
-
width: 2px;
|
|
1759
|
-
}
|
|
1760
|
-
|
|
1761
|
-
.chapter-marker:hover {
|
|
1762
|
-
width: 3px;
|
|
1763
|
-
}
|
|
1764
|
-
|
|
1765
|
-
.chapter-tooltip {
|
|
1766
|
-
min-width: 160px;
|
|
1767
|
-
max-width: 250px;
|
|
1768
|
-
}
|
|
1769
|
-
|
|
1770
|
-
.chapter-tooltip-image {
|
|
1771
|
-
height: 100px;
|
|
1772
|
-
}
|
|
1773
|
-
}
|
|
1774
|
-
/* VIDEO POSTER OVERLAY - THEMED VERSION */
|
|
1775
|
-
|
|
1776
|
-
/* Custom poster overlay to prevent disappearing */
|
|
1777
|
-
.video-poster-overlay {
|
|
1778
|
-
position: absolute;
|
|
1779
|
-
top: 0;
|
|
1780
|
-
left: 0;
|
|
1781
|
-
width: 100%;
|
|
1782
|
-
height: 100%;
|
|
1783
|
-
background-size: cover;
|
|
1784
|
-
background-position: center;
|
|
1785
|
-
background-repeat: no-repeat;
|
|
1786
|
-
z-index: 1;
|
|
1787
|
-
cursor: pointer;
|
|
1788
|
-
opacity: 0;
|
|
1789
|
-
visibility: hidden;
|
|
1790
|
-
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
1791
|
-
pointer-events: none;
|
|
1792
|
-
}
|
|
1793
|
-
|
|
1794
|
-
/* Visible state */
|
|
1795
|
-
.video-poster-overlay.visible {
|
|
1796
|
-
opacity: 1;
|
|
1797
|
-
visibility: visible;
|
|
1798
|
-
pointer-events: auto;
|
|
1799
|
-
}
|
|
1800
|
-
|
|
1801
|
-
/* Hidden state */
|
|
1802
|
-
.video-poster-overlay.hidden {
|
|
1803
|
-
opacity: 0;
|
|
1804
|
-
visibility: hidden;
|
|
1805
|
-
pointer-events: none;
|
|
1806
|
-
}
|
|
1807
|
-
|
|
1808
|
-
/* Hover effect on poster */
|
|
1809
|
-
.video-poster-overlay.visible:hover {
|
|
1810
|
-
opacity: 0.95;
|
|
1811
|
-
}
|
|
1812
|
-
|
|
1813
|
-
/* Play button overlay on poster - THEMED COLORS 🎨 */
|
|
1814
|
-
.video-poster-overlay::after {
|
|
1815
|
-
content: '';
|
|
1816
|
-
position: absolute;
|
|
1817
|
-
top: 50%;
|
|
1818
|
-
left: 50%;
|
|
1819
|
-
transform: translate(-50%, -50%);
|
|
1820
|
-
width: 80px;
|
|
1821
|
-
height: 80px;
|
|
1822
|
-
background: rgba(0, 0, 0, 0.7);
|
|
1823
|
-
border-radius: 50%;
|
|
1824
|
-
border: 3px solid var(--player-primary-color); /* THEMED BORDER ✨ */
|
|
1825
|
-
opacity: 0;
|
|
1826
|
-
transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
|
|
1827
|
-
pointer-events: none;
|
|
1828
|
-
}
|
|
1829
|
-
|
|
1830
|
-
/* Show play button on hover with animation and themed glow */
|
|
1831
|
-
.video-poster-overlay.visible:hover::after {
|
|
1832
|
-
opacity: 1;
|
|
1833
|
-
transform: translate(-50%, -50%) scale(1.1);
|
|
1834
|
-
border-color: var(--player-primary-hover); /* THEMED HOVER COLOR 🌟 */
|
|
1835
|
-
box-shadow: 0 0 20px var(--player-primary-color); /* THEMED GLOW 💫 */
|
|
1836
|
-
}
|
|
1837
|
-
|
|
1838
|
-
/* Play icon triangle - THEMED COLOR 🎨 */
|
|
1839
|
-
.video-poster-overlay::before {
|
|
1840
|
-
content: '';
|
|
1841
|
-
position: absolute;
|
|
1842
|
-
top: 50%;
|
|
1843
|
-
left: 50%;
|
|
1844
|
-
transform: translate(-40%, -50%);
|
|
1845
|
-
width: 0;
|
|
1846
|
-
height: 0;
|
|
1847
|
-
border-style: solid;
|
|
1848
|
-
border-width: 15px 0 15px 25px;
|
|
1849
|
-
border-color: transparent transparent transparent var(--player-primary-color); /* THEMED TRIANGLE ✨ */
|
|
1850
|
-
z-index: 2;
|
|
1851
|
-
opacity: 0;
|
|
1852
|
-
transition: opacity 0.3s ease, border-color 0.3s ease;
|
|
1853
|
-
pointer-events: none;
|
|
1854
|
-
}
|
|
1855
|
-
|
|
1856
|
-
/* Show play icon on hover with themed color */
|
|
1857
|
-
.video-poster-overlay.visible:hover::before {
|
|
1858
|
-
opacity: 1;
|
|
1859
|
-
border-color: transparent transparent transparent var(--player-primary-hover); /* THEMED HOVER 🌟 */
|
|
1860
|
-
}
|
|
1861
|
-
|
|
1862
|
-
/* Responsive adjustments */
|
|
1863
|
-
@media (max-width: 768px) {
|
|
1864
|
-
.video-poster-overlay::after {
|
|
1865
|
-
width: 60px;
|
|
1866
|
-
height: 60px;
|
|
1867
|
-
}
|
|
1868
|
-
|
|
1869
|
-
.video-poster-overlay::before {
|
|
1870
|
-
border-width: 12px 0 12px 20px;
|
|
1871
|
-
}
|
|
1872
|
-
}
|
|
1873
|
-
|
|
1874
|
-
@media (max-width: 480px) {
|
|
1875
|
-
.video-poster-overlay::after {
|
|
1876
|
-
width: 50px;
|
|
1877
|
-
height: 50px;
|
|
1878
|
-
}
|
|
1879
|
-
|
|
1880
|
-
.video-poster-overlay::before {
|
|
1881
|
-
border-width: 10px 0 10px 16px;
|
|
1882
|
-
}
|
|
1883
|
-
}
|
|
1884
|
-
|
|
1885
|
-
/* Ensure smooth transition when poster hides */
|
|
1886
|
-
.video-poster-overlay.hidden {
|
|
1887
|
-
transition: opacity 0.5s ease, visibility 0s ease 0.5s;
|
|
1888
|
-
}
|
|
1889
|
-
|
|
1890
|
-
/* THEME-SPECIFIC OVERRIDES (optional fine-tuning) */
|
|
1891
|
-
|
|
1892
|
-
/* Blue theme 💙 */
|
|
1893
|
-
.player-theme-blue .video-poster-overlay::after {
|
|
1894
|
-
border-color: #2196F3;
|
|
1895
|
-
}
|
|
1896
|
-
|
|
1897
|
-
.player-theme-blue .video-poster-overlay.visible:hover::after {
|
|
1898
|
-
border-color: #1976D2;
|
|
1899
|
-
box-shadow: 0 0 20px #2196F3;
|
|
1900
|
-
}
|
|
1901
|
-
|
|
1902
|
-
.player-theme-blue .video-poster-overlay::before {
|
|
1903
|
-
border-color: transparent transparent transparent #2196F3;
|
|
1904
|
-
}
|
|
1905
|
-
|
|
1906
|
-
.player-theme-blue .video-poster-overlay.visible:hover::before {
|
|
1907
|
-
border-color: transparent transparent transparent #1976D2;
|
|
1908
|
-
}
|
|
1909
|
-
|
|
1910
|
-
/* Green theme 💚 */
|
|
1911
|
-
.player-theme-green .video-poster-overlay::after {
|
|
1912
|
-
border-color: #4CAF50;
|
|
1913
|
-
}
|
|
1914
|
-
|
|
1915
|
-
.player-theme-green .video-poster-overlay.visible:hover::after {
|
|
1916
|
-
border-color: #45a049;
|
|
1917
|
-
box-shadow: 0 0 20px #4CAF50;
|
|
1918
|
-
}
|
|
1919
|
-
|
|
1920
|
-
.player-theme-green .video-poster-overlay::before {
|
|
1921
|
-
border-color: transparent transparent transparent #4CAF50;
|
|
1922
|
-
}
|
|
1923
|
-
|
|
1924
|
-
.player-theme-green .video-poster-overlay.visible:hover::before {
|
|
1925
|
-
border-color: transparent transparent transparent #45a049;
|
|
1926
|
-
}
|
|
1927
|
-
|
|
1928
|
-
/* Red theme ❤️ */
|
|
1929
|
-
.player-theme-red .video-poster-overlay::after {
|
|
1930
|
-
border-color: #f44336;
|
|
1931
|
-
}
|
|
1932
|
-
|
|
1933
|
-
.player-theme-red .video-poster-overlay.visible:hover::after {
|
|
1934
|
-
border-color: #d32f2f;
|
|
1935
|
-
box-shadow: 0 0 20px #f44336;
|
|
1936
|
-
}
|
|
1937
|
-
|
|
1938
|
-
.player-theme-red .video-poster-overlay::before {
|
|
1939
|
-
border-color: transparent transparent transparent #f44336;
|
|
1940
|
-
}
|
|
1941
|
-
|
|
1942
|
-
.player-theme-red .video-poster-overlay.visible:hover::before {
|
|
1943
|
-
border-color: transparent transparent transparent #d32f2f;
|
|
1944
|
-
}
|
|
1945
|
-
|
|
1946
|
-
/* Dark theme 🖤 (uses default goldenrod) */
|
|
1947
|
-
.player-theme-dark .video-poster-overlay::after {
|
|
1948
|
-
background: rgba(0, 0, 0, 0.85); /* Slightly darker background for dark theme */
|
|
1949
|
-
}
|
|
1950
|
-
|
|
1951
|
-
/* screen height adjust */
|
|
1952
|
-
@media (max-height: 400px) {
|
|
1953
|
-
.video-player {
|
|
1954
|
-
min-height: 200px;
|
|
1955
|
-
}
|
|
1956
|
-
|
|
1957
|
-
.controls {
|
|
1958
|
-
min-height: 50px !important;
|
|
1959
|
-
padding: 10px 10px 8px !important;
|
|
1960
|
-
}
|
|
1961
|
-
|
|
1962
|
-
.progress-container {
|
|
1963
|
-
margin-bottom: 8px;
|
|
1964
|
-
}
|
|
1965
|
-
|
|
1966
|
-
.controls-main {
|
|
1967
|
-
min-height: 32px !important;
|
|
1968
|
-
}
|
|
1969
|
-
}
|
|
1970
|
-
|
|
1971
|
-
@media (max-height: 330px) {
|
|
1972
|
-
.video-player {
|
|
1973
|
-
min-height: 150px;
|
|
1974
|
-
}
|
|
1975
|
-
|
|
1976
|
-
.controls {
|
|
1977
|
-
min-height: 45px !important;
|
|
1978
|
-
padding: 8px 8px 6px !important;
|
|
1979
|
-
}
|
|
1980
|
-
|
|
1981
|
-
.progress-container {
|
|
1982
|
-
margin-bottom: 6px;
|
|
1983
|
-
height: 4px;
|
|
1984
|
-
}
|
|
1985
|
-
|
|
1986
|
-
.controls-main {
|
|
1987
|
-
min-height: 28px !important;
|
|
1988
|
-
}
|
|
1989
|
-
|
|
1990
|
-
.control-btn {
|
|
1991
|
-
padding: 4px !important;
|
|
1992
|
-
}
|
|
1993
|
-
|
|
1994
|
-
.icon {
|
|
1995
|
-
font-size: 14px !important;
|
|
1996
|
-
}
|
|
1997
|
-
|
|
1998
|
-
.time-display {
|
|
1999
|
-
font-size: 11px !important;
|
|
2000
|
-
}
|
|
2001
|
-
}
|
|
2002
|
-
|
|
2003
|
-
@media (max-height: 250px) {
|
|
2004
|
-
.video-player {
|
|
2005
|
-
min-height: 120px;
|
|
2006
|
-
}
|
|
2007
|
-
|
|
2008
|
-
.controls {
|
|
2009
|
-
min-height: 40px !important;
|
|
2010
|
-
padding: 6px 8px 5px !important;
|
|
2011
|
-
}
|
|
2012
|
-
|
|
2013
|
-
.progress-container {
|
|
2014
|
-
margin-bottom: 4px;
|
|
2015
|
-
height: 3px;
|
|
2016
|
-
}
|
|
2017
|
-
|
|
2018
|
-
.controls-main {
|
|
2019
|
-
min-height: 24px !important;
|
|
2020
|
-
}
|
|
2021
|
-
|
|
2022
|
-
.control-btn {
|
|
2023
|
-
padding: 2px !important;
|
|
2024
|
-
}
|
|
2025
|
-
|
|
2026
|
-
.icon {
|
|
2027
|
-
font-size: 12px !important;
|
|
2028
|
-
}
|
|
2029
|
-
|
|
2030
|
-
.time-display {
|
|
2031
|
-
font-size: 10px !important;
|
|
2032
|
-
}
|
|
2033
|
-
|
|
2034
|
-
.quality-btn {
|
|
2035
|
-
min-height: 20px !important;
|
|
2036
|
-
padding: 2px 4px !important;
|
|
2037
|
-
}
|
|
2038
|
-
|
|
2039
|
-
.selected-quality {
|
|
2040
|
-
font-size: 9px !important;
|
|
2041
|
-
}
|
|
2042
|
-
|
|
2043
|
-
.current-quality {
|
|
2044
|
-
display: none;
|
|
2045
|
-
}
|
|
2046
|
-
|
|
2047
|
-
.volume-slider {
|
|
2048
|
-
width: 40px !important;
|
|
2049
|
-
}
|
|
2050
|
-
}
|
|
2051
|
-
|
|
2052
|
-
.video-container,
|
|
2053
|
-
.video-wrapper {
|
|
2054
|
-
overflow: visible !important;
|
|
2055
|
-
}
|
|
2056
|
-
|
|
2057
|
-
.controls.show {
|
|
2058
|
-
position: absolute !important;
|
|
2059
|
-
bottom: 0 !important;
|
|
2060
|
-
overflow: visible !important;
|
|
2061
|
-
}
|
|
2062
|
-
|
|
2063
|
-
/* ===================================
|
|
2064
|
-
WATERMARK OVERLAY
|
|
2065
|
-
=================================== */
|
|
2066
|
-
|
|
2067
|
-
.video-watermark {
|
|
2068
|
-
position: absolute;
|
|
2069
|
-
z-index: 15; /* Above video (10), below controls (100) */
|
|
2070
|
-
pointer-events: auto;
|
|
2071
|
-
opacity: 0.7;
|
|
2072
|
-
transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
|
|
2073
|
-
}
|
|
2074
|
-
|
|
2075
|
-
/* Watermark visible by default */
|
|
2076
|
-
.video-watermark {
|
|
2077
|
-
visibility: visible;
|
|
2078
|
-
opacity: 0.7;
|
|
2079
|
-
}
|
|
2080
|
-
|
|
2081
|
-
/* Hide watermark when it has hide-on-autohide class AND controls are hidden */
|
|
2082
|
-
.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
|
|
2083
|
-
visibility: hidden;
|
|
2084
|
-
opacity: 0;
|
|
2085
|
-
}
|
|
2086
|
-
|
|
2087
|
-
/* Show watermark when controls are shown */
|
|
2088
|
-
.video-wrapper.has-controls .video-watermark {
|
|
2089
|
-
visibility: visible;
|
|
2090
|
-
opacity: 0.7;
|
|
2091
|
-
}
|
|
2092
|
-
|
|
2093
|
-
.video-watermark:hover {
|
|
2094
|
-
opacity: 1;
|
|
2095
|
-
}
|
|
2096
|
-
|
|
2097
|
-
.video-watermark img {
|
|
2098
|
-
display: block;
|
|
2099
|
-
max-width: 150px;
|
|
2100
|
-
max-height: 80px;
|
|
2101
|
-
width: auto;
|
|
2102
|
-
height: auto;
|
|
2103
|
-
object-fit: contain;
|
|
2104
|
-
}
|
|
2105
|
-
|
|
2106
|
-
/* Watermark positions - Top positions unchanged */
|
|
2107
|
-
.video-watermark.watermark-topleft {
|
|
2108
|
-
top: 15px;
|
|
2109
|
-
left: 15px;
|
|
2110
|
-
}
|
|
2111
|
-
|
|
2112
|
-
.video-watermark.watermark-topright {
|
|
2113
|
-
top: 15px;
|
|
2114
|
-
right: 15px;
|
|
2115
|
-
}
|
|
2116
|
-
|
|
2117
|
-
/* Bottom positions - Increased spacing from controlbar (was 70px, now 90px) */
|
|
2118
|
-
.video-watermark.watermark-bottomleft {
|
|
2119
|
-
bottom: 90px; /* Increased spacing */
|
|
2120
|
-
left: 15px;
|
|
2121
|
-
}
|
|
2122
|
-
|
|
2123
|
-
.video-watermark.watermark-bottomright {
|
|
2124
|
-
bottom: 90px; /* Increased spacing */
|
|
2125
|
-
right: 15px;
|
|
2126
|
-
}
|
|
2127
|
-
|
|
2128
|
-
/* DYNAMIC POSITIONING: Always visible watermark moves down when controls are hidden */
|
|
2129
|
-
/* This applies ONLY to watermarks without hide-on-autohide class (always visible) */
|
|
2130
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
|
|
2131
|
-
bottom: 15px; /* Move to bottom corner when controls hidden */
|
|
2132
|
-
}
|
|
2133
|
-
|
|
2134
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
|
|
2135
|
-
bottom: 15px; /* Move to bottom corner when controls hidden */
|
|
2136
|
-
}
|
|
2137
|
-
|
|
2138
|
-
/* When controls are shown, bottom watermark stays above controlbar */
|
|
2139
|
-
.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
|
|
2140
|
-
.video-wrapper.has-controls .video-watermark.watermark-bottomright {
|
|
2141
|
-
bottom: 90px; /* Stay above controlbar */
|
|
2142
|
-
}
|
|
2143
|
-
|
|
2144
|
-
/* Responsive adjustments for mobile */
|
|
2145
|
-
@media (max-width: 768px) {
|
|
2146
|
-
.video-watermark img {
|
|
2147
|
-
max-width: 100px;
|
|
2148
|
-
max-height: 50px;
|
|
2149
|
-
}
|
|
2150
|
-
|
|
2151
|
-
.video-watermark.watermark-topleft,
|
|
2152
|
-
.video-watermark.watermark-topright {
|
|
2153
|
-
top: 10px;
|
|
2154
|
-
}
|
|
2155
|
-
|
|
2156
|
-
.video-watermark.watermark-topleft,
|
|
2157
|
-
.video-watermark.watermark-bottomleft {
|
|
2158
|
-
left: 10px;
|
|
2159
|
-
}
|
|
2160
|
-
|
|
2161
|
-
.video-watermark.watermark-topright,
|
|
2162
|
-
.video-watermark.watermark-bottomright {
|
|
2163
|
-
right: 10px;
|
|
2164
|
-
}
|
|
2165
|
-
|
|
2166
|
-
/* Bottom spacing adjusted for mobile */
|
|
2167
|
-
.video-watermark.watermark-bottomleft,
|
|
2168
|
-
.video-watermark.watermark-bottomright {
|
|
2169
|
-
bottom: 75px; /* Above controlbar on mobile */
|
|
2170
|
-
}
|
|
2171
|
-
|
|
2172
|
-
/* Always visible watermark on mobile - moves down when controls hidden */
|
|
2173
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
|
|
2174
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
|
|
2175
|
-
bottom: 10px; /* Move to corner on mobile */
|
|
2176
|
-
}
|
|
2177
|
-
}
|
|
2178
|
-
|
|
2179
|
-
/* Extra small screens */
|
|
2180
|
-
@media (max-width: 480px) {
|
|
2181
|
-
.video-watermark.watermark-bottomleft,
|
|
2182
|
-
.video-watermark.watermark-bottomright {
|
|
2183
|
-
bottom: 65px;
|
|
2184
|
-
}
|
|
2185
|
-
|
|
2186
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
|
|
2187
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
|
|
2188
|
-
bottom: 8px;
|
|
2189
|
-
}
|
|
2190
|
-
}
|
|
2191
|
-
|
|
2192
|
-
/* Clickable watermark cursor */
|
|
2193
|
-
.video-watermark[style*="cursor: pointer"] {
|
|
2194
|
-
cursor: pointer !important;
|
|
2195
|
-
}
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
/* SPECIFIC SUBTITLES BUTTON */
|
|
2202
|
-
.subtitles-btn {
|
|
2203
|
-
position: relative;
|
|
2204
|
-
}
|
|
2205
|
-
|
|
2206
|
-
.subtitles-btn.active {
|
|
2207
|
-
background: var(--player-button-active);
|
|
2208
|
-
color: var(--player-primary-color);
|
|
2209
|
-
}
|
|
2210
|
-
|
|
2211
|
-
.subtitles-btn.active::after {
|
|
2212
|
-
content: '';
|
|
2213
|
-
position: absolute;
|
|
2214
|
-
bottom: 2px;
|
|
2215
|
-
left: 50%;
|
|
2216
|
-
transform: translateX(-50%);
|
|
2217
|
-
width: 20px;
|
|
2218
|
-
height: 2px;
|
|
2219
|
-
background: var(--player-primary-color);
|
|
2220
|
-
border-radius: 1px;
|
|
2221
|
-
}
|
|
2222
|
-
|
|
2223
|
-
/* QUALITY BUTTON WITH DUAL DISPLAY */
|
|
2224
|
-
.quality-btn {
|
|
2225
|
-
min-height: 36px;
|
|
2226
|
-
padding: 6px 8px;
|
|
2227
|
-
}
|
|
2228
|
-
|
|
2229
|
-
.quality-btn-text {
|
|
2230
|
-
display: flex;
|
|
2231
|
-
flex-direction: column;
|
|
2232
|
-
align-items: center;
|
|
2233
|
-
line-height: 1;
|
|
2234
|
-
}
|
|
2235
|
-
|
|
2236
|
-
.selected-quality {
|
|
2237
|
-
font-size: 14px;
|
|
2238
|
-
font-weight: 500;
|
|
2239
|
-
color: var(--player-button-color);
|
|
2240
|
-
}
|
|
2241
|
-
|
|
2242
|
-
.current-quality {
|
|
2243
|
-
font-size: 10px;
|
|
2244
|
-
font-weight: 400;
|
|
2245
|
-
color: var(--player-text-secondary);
|
|
2246
|
-
opacity: 0.8;
|
|
2247
|
-
margin-top: 2px;
|
|
2248
|
-
line-height: 1;
|
|
2249
|
-
}
|
|
2250
|
-
|
|
2251
|
-
/* ICONS */
|
|
2252
|
-
.icon {
|
|
2253
|
-
width: var(--player-icon-size);
|
|
2254
|
-
height: var(--player-icon-size);
|
|
2255
|
-
display: flex;
|
|
2256
|
-
align-items: center;
|
|
2257
|
-
justify-content: center;
|
|
2258
|
-
font-size: 16px;
|
|
2259
|
-
}
|
|
2260
|
-
|
|
2261
|
-
.hidden {
|
|
2262
|
-
display: none !important;
|
|
2263
|
-
}
|
|
2264
|
-
|
|
2265
|
-
/* VOLUME CONTROLS - IMPROVED RESPONSIVE */
|
|
2266
|
-
.volume-container {
|
|
2267
|
-
display: flex;
|
|
2268
|
-
align-items: center;
|
|
2269
|
-
gap: 8px;
|
|
2270
|
-
position: relative;
|
|
2271
|
-
/* Allow volume container to shrink gradually */
|
|
2272
|
-
flex-shrink: 2;
|
|
2273
|
-
min-width: 0;
|
|
2274
|
-
}
|
|
2275
|
-
|
|
2276
|
-
.volume-slider {
|
|
2277
|
-
width: 60px;
|
|
2278
|
-
height: var(--player-volume-height);
|
|
2279
|
-
background: var(--player-volume-bg);
|
|
2280
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
2281
|
-
outline: none;
|
|
2282
|
-
cursor: pointer;
|
|
2283
|
-
-webkit-appearance: none;
|
|
2284
|
-
transition: all var(--player-transition-fast);
|
|
2285
|
-
}
|
|
2286
|
-
|
|
2287
|
-
.volume-tooltip {
|
|
2288
|
-
position: absolute;
|
|
2289
|
-
bottom: 210%;
|
|
2290
|
-
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
2291
|
-
left: 0;
|
|
2292
|
-
transform: translateX(-50%);
|
|
2293
|
-
background: rgba(0, 0, 0, 0.9);
|
|
2294
|
-
color: white;
|
|
2295
|
-
padding: 6px 10px;
|
|
2296
|
-
border-radius: 6px;
|
|
2297
|
-
font-size: 12px;
|
|
2298
|
-
font-weight: 500;
|
|
2299
|
-
white-space: nowrap;
|
|
2300
|
-
opacity: 0;
|
|
2301
|
-
visibility: hidden;
|
|
2302
|
-
z-index: 1000;
|
|
2303
|
-
box-shadow: var(--player-shadow-tooltip);
|
|
2304
|
-
pointer-events: none;
|
|
2305
|
-
backdrop-filter: blur(8px);
|
|
2306
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2307
|
-
}
|
|
2308
|
-
|
|
2309
|
-
.volume-tooltip::after {
|
|
2310
|
-
content: '';
|
|
2311
|
-
position: absolute;
|
|
2312
|
-
top: 100%;
|
|
2313
|
-
left: 50%;
|
|
2314
|
-
transform: translateX(-50%);
|
|
2315
|
-
width: 0;
|
|
2316
|
-
height: 0;
|
|
2317
|
-
border-left: 6px solid transparent;
|
|
2318
|
-
border-right: 6px solid transparent;
|
|
2319
|
-
border-top: 6px solid rgba(0, 0, 0, 0.9);
|
|
2320
|
-
}
|
|
2321
|
-
|
|
2322
|
-
.volume-container:hover .volume-tooltip,
|
|
2323
|
-
.volume-tooltip.visible {
|
|
2324
|
-
opacity: 1;
|
|
2325
|
-
visibility: visible;
|
|
2326
|
-
}
|
|
2327
|
-
|
|
2328
|
-
.volume-slider::-webkit-slider-thumb {
|
|
2329
|
-
-webkit-appearance: none;
|
|
2330
|
-
width: var(--player-volume-handle-size);
|
|
2331
|
-
height: var(--player-volume-handle-size);
|
|
2332
|
-
border-radius: 50%;
|
|
2333
|
-
background: var(--player-primary-dark);
|
|
2334
|
-
cursor: pointer;
|
|
2335
|
-
transition: all var(--player-transition-fast);
|
|
2336
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
2337
|
-
margin-top: calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2);
|
|
2338
|
-
transform: translateY(0);
|
|
2339
|
-
}
|
|
2340
|
-
|
|
2341
|
-
.volume-slider::-webkit-slider-thumb:hover {
|
|
2342
|
-
transform: translateY(0) scale(1.2);
|
|
2343
|
-
background: var(--player-primary-color);
|
|
2344
|
-
}
|
|
2345
|
-
|
|
2346
|
-
.volume-slider::-moz-range-thumb {
|
|
2347
|
-
width: var(--player-volume-handle-size);
|
|
2348
|
-
height: var(--player-volume-handle-size);
|
|
2349
|
-
border-radius: 50%;
|
|
2350
|
-
background: var(--player-primary-dark);
|
|
2351
|
-
cursor: pointer;
|
|
2352
|
-
border: none;
|
|
2353
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
2354
|
-
transition: all var(--player-transition-fast);
|
|
2355
|
-
margin-top: 0;
|
|
2356
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2));
|
|
2357
|
-
}
|
|
2358
|
-
|
|
2359
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
2360
|
-
background: var(--player-primary-color);
|
|
2361
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2)) scale(1.1);
|
|
2362
|
-
}
|
|
2363
|
-
|
|
2364
|
-
.volume-slider::-webkit-slider-runnable-track {
|
|
2365
|
-
height: var(--player-volume-height);
|
|
2366
|
-
background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
|
|
2367
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
2368
|
-
transition: background var(--player-transition-fast);
|
|
2369
|
-
margin: 0;
|
|
2370
|
-
border: none;
|
|
2371
|
-
}
|
|
2372
|
-
|
|
2373
|
-
.volume-slider::-moz-range-track {
|
|
2374
|
-
height: var(--player-volume-height);
|
|
2375
|
-
background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
|
|
2376
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
2377
|
-
border: none;
|
|
2378
|
-
transition: background var(--player-transition-fast);
|
|
2379
|
-
margin: 0;
|
|
2380
|
-
}
|
|
2381
|
-
|
|
2382
|
-
/* TIME DISPLAY - RESPONSIVE */
|
|
2383
|
-
.time-display {
|
|
2384
|
-
color: var(--player-text-color);
|
|
2385
|
-
font-size: 14px;
|
|
2386
|
-
font-weight: 500;
|
|
2387
|
-
display: flex;
|
|
2388
|
-
align-items: center;
|
|
2389
|
-
gap: 5px;
|
|
2390
|
-
font-variant-numeric: tabular-nums;
|
|
2391
|
-
/* Allow time display to shrink on very small screens */
|
|
2392
|
-
flex-shrink: 2;
|
|
2393
|
-
min-width: 0;
|
|
2394
|
-
}
|
|
2395
|
-
|
|
2396
|
-
/* CONTROL MENUS */
|
|
2397
|
-
.speed-control,
|
|
2398
|
-
.quality-control,
|
|
2399
|
-
.subtitles-control {
|
|
2400
|
-
position: relative;
|
|
2401
|
-
}
|
|
2402
|
-
|
|
2403
|
-
.speed-menu,
|
|
2404
|
-
.quality-menu,
|
|
2405
|
-
.subtitles-menu {
|
|
2406
|
-
position: absolute;
|
|
2407
|
-
bottom: 100%;
|
|
2408
|
-
right: 0;
|
|
2409
|
-
background: var(--player-bg-menu);
|
|
2410
|
-
backdrop-filter: blur(10px);
|
|
2411
|
-
border-radius: 8px;
|
|
2412
|
-
padding: 8px 0;
|
|
2413
|
-
margin-bottom: 10px;
|
|
2414
|
-
opacity: 0;
|
|
2415
|
-
visibility: hidden;
|
|
2416
|
-
transition: all var(--player-transition-fast);
|
|
2417
|
-
min-width: 140px;
|
|
2418
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2419
|
-
z-index: 100;
|
|
2420
|
-
box-shadow: var(--player-shadow-menu);
|
|
2421
|
-
}
|
|
2422
|
-
|
|
2423
|
-
.speed-control:hover .speed-menu,
|
|
2424
|
-
.speed-menu:hover,
|
|
2425
|
-
.quality-control:hover .quality-menu,
|
|
2426
|
-
.quality-menu:hover,
|
|
2427
|
-
.subtitles-control:hover .subtitles-menu,
|
|
2428
|
-
.subtitles-menu:hover {
|
|
2429
|
-
opacity: 1;
|
|
2430
|
-
visibility: visible;
|
|
2431
|
-
transform: translateY(-4px);
|
|
2432
|
-
}
|
|
2433
|
-
|
|
2434
|
-
.speed-option,
|
|
2435
|
-
.quality-option,
|
|
2436
|
-
.subtitles-option {
|
|
2437
|
-
padding: 8px 16px;
|
|
2438
|
-
color: var(--player-text-color);
|
|
2439
|
-
cursor: pointer;
|
|
2440
|
-
transition: all var(--player-transition-fast);
|
|
2441
|
-
font-size: 14px;
|
|
2442
|
-
display: flex;
|
|
2443
|
-
align-items: center;
|
|
2444
|
-
justify-content: space-between;
|
|
2445
|
-
}
|
|
2446
|
-
|
|
2447
|
-
.speed-option:hover,
|
|
2448
|
-
.quality-option:hover,
|
|
2449
|
-
.subtitles-option:hover {
|
|
2450
|
-
background: rgba(255, 255, 255, 0.1);
|
|
2451
|
-
color: var(--player-primary-color);
|
|
2452
|
-
}
|
|
2453
|
-
|
|
2454
|
-
.speed-option.active,
|
|
2455
|
-
.quality-option.active,
|
|
2456
|
-
.subtitles-option.active {
|
|
2457
|
-
color: var(--player-primary-color);
|
|
2458
|
-
font-weight: 600;
|
|
2459
|
-
background: rgba(255, 255, 255, 0.05);
|
|
2460
|
-
}
|
|
2461
|
-
|
|
2462
|
-
/* DUAL QUALITY INDICATORS */
|
|
2463
|
-
.quality-option.selected {
|
|
2464
|
-
color: var(--player-primary-color);
|
|
2465
|
-
font-weight: 600;
|
|
2466
|
-
}
|
|
2467
|
-
|
|
2468
|
-
.quality-option.selected::after {
|
|
2469
|
-
content: 'Selected';
|
|
2470
|
-
font-size: 12px;
|
|
2471
|
-
color: var(--player-primary-color);
|
|
2472
|
-
font-weight: 400;
|
|
2473
|
-
margin-left: 8px;
|
|
2474
|
-
}
|
|
2475
|
-
|
|
2476
|
-
.quality-option.playing {
|
|
2477
|
-
background: rgba(255, 255, 255, 0.05);
|
|
2478
|
-
}
|
|
2479
|
-
|
|
2480
|
-
.quality-option.playing::after {
|
|
2481
|
-
content: 'Playing';
|
|
2482
|
-
font-size: 12px;
|
|
2483
|
-
color: #4CAF50; /* Green for playing */
|
|
2484
|
-
font-weight: 400;
|
|
2485
|
-
margin-left: 8px;
|
|
2486
|
-
}
|
|
2487
|
-
|
|
2488
|
-
.quality-option.selected.playing::after {
|
|
2489
|
-
content: 'Active';
|
|
2490
|
-
font-size: 12px;
|
|
2491
|
-
color: var(--player-primary-color);
|
|
2492
|
-
font-weight: 500;
|
|
2493
|
-
margin-left: 8px;
|
|
2494
|
-
}
|
|
2495
|
-
|
|
2496
|
-
.subtitles-option.active::after {
|
|
2497
|
-
content: '✓';
|
|
2498
|
-
font-size: 12px;
|
|
2499
|
-
color: var(--player-primary-color);
|
|
2500
|
-
}
|
|
2501
|
-
|
|
2502
|
-
/* CUSTOM SUBTITLES STYLING */
|
|
2503
|
-
.video-player::cue {
|
|
2504
|
-
background: rgba(0, 0, 0, 0.8);
|
|
2505
|
-
color: white;
|
|
2506
|
-
font-size: 18px;
|
|
2507
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
2508
|
-
font-weight: 500;
|
|
2509
|
-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
2510
|
-
padding: 8px 12px;
|
|
2511
|
-
border-radius: 6px;
|
|
2512
|
-
line-height: 1.4;
|
|
2513
|
-
}
|
|
2514
|
-
|
|
2515
|
-
.video-player::cue(.highlight) {
|
|
2516
|
-
background: var(--player-primary-color);
|
|
2517
|
-
color: black;
|
|
2518
|
-
}
|
|
2519
|
-
|
|
2520
|
-
.video-player::cue(b) {
|
|
2521
|
-
font-weight: 700;
|
|
2522
|
-
}
|
|
2523
|
-
|
|
2524
|
-
.video-player::cue(i) {
|
|
2525
|
-
font-style: italic;
|
|
2526
|
-
}
|
|
2527
|
-
|
|
2528
|
-
/* BRAND LOGO RESPONSIVE */
|
|
2529
|
-
.controls-right .brand-logo {
|
|
2530
|
-
height: 44px; /* recommended height for control bar logos */
|
|
2531
|
-
max-width: 120px; /* maintain aspect ratio */
|
|
2532
|
-
object-fit: contain; /* prevent distortion */
|
|
2533
|
-
margin-right: 10px; /* spacing from buttons to the right */
|
|
2534
|
-
pointer-events: auto; /* allow clicks for links */
|
|
2535
|
-
opacity: 0.8; /* slightly transparent */
|
|
2536
|
-
transition: opacity var(--player-transition-fast);
|
|
2537
|
-
order: -1; /* force logo to appear first */
|
|
2538
|
-
flex-shrink: 1; /* Allow brand logo to shrink */
|
|
2539
|
-
}
|
|
2540
|
-
|
|
2541
|
-
.controls-right .brand-logo:hover {
|
|
2542
|
-
opacity: 1; /* opaque on hover */
|
|
2543
|
-
}
|
|
2544
|
-
|
|
2545
|
-
.controls-right .brand-logo-link {
|
|
2546
|
-
order: -1; /* force link container to appear first */
|
|
2547
|
-
margin-right: 10px; /* spacing from buttons */
|
|
2548
|
-
display: inline-block;
|
|
2549
|
-
text-decoration: none;
|
|
2550
|
-
}
|
|
2551
|
-
|
|
2552
|
-
.controls-right .brand-logo-link .brand-logo {
|
|
2553
|
-
margin-right: 0; /* remove margin when inside link */
|
|
2554
|
-
}
|
|
2555
|
-
|
|
2556
|
-
/* SETTINGS DROPDOWN MENU - NUOVO SISTEMA PER SCHERMI PICCOLI */
|
|
2557
|
-
.settings-control {
|
|
2558
|
-
position: relative;
|
|
2559
|
-
display: none; /* Hidden by default, shown only on small screens */
|
|
2560
|
-
}
|
|
2561
|
-
|
|
2562
|
-
.settings-btn {
|
|
2563
|
-
background: none;
|
|
2564
|
-
border: none;
|
|
2565
|
-
color: var(--player-button-color);
|
|
2566
|
-
cursor: pointer;
|
|
2567
|
-
padding: var(--player-button-padding);
|
|
2568
|
-
border-radius: 6px;
|
|
2569
|
-
display: flex;
|
|
2570
|
-
align-items: center;
|
|
2571
|
-
gap: 5px;
|
|
2572
|
-
transition: all var(--player-transition-fast);
|
|
2573
|
-
font-size: 14px;
|
|
2574
|
-
font-weight: 500;
|
|
2575
|
-
position: relative;
|
|
2576
|
-
flex-shrink: 0;
|
|
2577
|
-
min-width: 0;
|
|
2578
|
-
white-space: nowrap;
|
|
2579
|
-
}
|
|
2580
|
-
|
|
2581
|
-
.settings-btn:hover {
|
|
2582
|
-
background: var(--player-button-hover);
|
|
2583
|
-
transform: scale(1.05);
|
|
2584
|
-
}
|
|
2585
|
-
|
|
2586
|
-
.settings-btn:active {
|
|
2587
|
-
transform: scale(0.95);
|
|
2588
|
-
background: var(--player-button-active);
|
|
2589
|
-
}
|
|
2590
|
-
|
|
2591
|
-
.settings-btn .icon::before {
|
|
2592
|
-
content: '⚙️'; /* Settings gear emoji */
|
|
2593
|
-
font-size: 16px;
|
|
2594
|
-
}
|
|
2595
|
-
|
|
2596
|
-
.settings-menu {
|
|
2597
|
-
position: absolute;
|
|
2598
|
-
bottom: 100%;
|
|
2599
|
-
right: 0;
|
|
2600
|
-
background: var(--player-bg-menu);
|
|
2601
|
-
backdrop-filter: blur(10px);
|
|
2602
|
-
border-radius: 8px;
|
|
2603
|
-
padding: 8px 0;
|
|
2604
|
-
margin-bottom: 10px;
|
|
2605
|
-
opacity: 0;
|
|
2606
|
-
visibility: hidden;
|
|
2607
|
-
transition: all var(--player-transition-fast);
|
|
2608
|
-
min-width: 180px;
|
|
2609
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2610
|
-
z-index: 100;
|
|
2611
|
-
box-shadow: var(--player-shadow-menu);
|
|
2612
|
-
}
|
|
2613
|
-
|
|
2614
|
-
.settings-control:hover .settings-menu,
|
|
2615
|
-
.settings-menu:hover {
|
|
2616
|
-
opacity: 1;
|
|
2617
|
-
visibility: visible;
|
|
2618
|
-
transform: translateY(-4px);
|
|
2619
|
-
}
|
|
2620
|
-
|
|
2621
|
-
.settings-option {
|
|
2622
|
-
padding: 8px 16px;
|
|
2623
|
-
color: var(--player-text-color);
|
|
2624
|
-
cursor: pointer;
|
|
2625
|
-
transition: all var(--player-transition-fast);
|
|
2626
|
-
font-size: 14px;
|
|
2627
|
-
display: flex;
|
|
2628
|
-
align-items: center;
|
|
2629
|
-
justify-content: space-between;
|
|
2630
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
2631
|
-
}
|
|
2632
|
-
|
|
2633
|
-
.settings-option:last-child {
|
|
2634
|
-
border-bottom: none;
|
|
2635
|
-
}
|
|
2636
|
-
|
|
2637
|
-
.settings-option:hover {
|
|
2638
|
-
background: rgba(255, 255, 255, 0.1);
|
|
2639
|
-
color: var(--player-primary-color);
|
|
2640
|
-
}
|
|
2641
|
-
|
|
2642
|
-
.settings-option-label {
|
|
2643
|
-
display: flex;
|
|
2644
|
-
align-items: center;
|
|
2645
|
-
gap: 8px;
|
|
2646
|
-
flex: 1;
|
|
2647
|
-
}
|
|
2648
|
-
|
|
2649
|
-
.settings-option-value {
|
|
2650
|
-
font-size: 12px;
|
|
2651
|
-
color: var(--player-text-secondary);
|
|
2652
|
-
opacity: 0.8;
|
|
2653
|
-
}
|
|
2654
|
-
|
|
2655
|
-
.settings-option.active .settings-option-value {
|
|
2656
|
-
color: var(--player-primary-color);
|
|
2657
|
-
opacity: 1;
|
|
2658
|
-
}
|
|
2659
|
-
|
|
2660
|
-
/* Submenu styling for settings */
|
|
2661
|
-
.settings-submenu {
|
|
2662
|
-
position: absolute;
|
|
2663
|
-
bottom: 0;
|
|
2664
|
-
right: 100%;
|
|
2665
|
-
background: var(--player-bg-menu);
|
|
2666
|
-
backdrop-filter: blur(10px);
|
|
2667
|
-
border-radius: 8px;
|
|
2668
|
-
padding: 8px 0;
|
|
2669
|
-
margin-right: 5px;
|
|
2670
|
-
opacity: 0;
|
|
2671
|
-
visibility: hidden;
|
|
2672
|
-
transition: all var(--player-transition-fast);
|
|
2673
|
-
min-width: 150px;
|
|
2674
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
2675
|
-
z-index: 101;
|
|
2676
|
-
box-shadow: var(--player-shadow-menu);
|
|
2677
|
-
}
|
|
2678
|
-
|
|
2679
|
-
.settings-option:hover .settings-submenu {
|
|
2680
|
-
opacity: 1;
|
|
2681
|
-
visibility: visible;
|
|
2682
|
-
transform: translateX(-2px);
|
|
2683
|
-
}
|
|
2684
|
-
|
|
2685
|
-
.settings-suboption {
|
|
2686
|
-
padding: 8px 16px;
|
|
2687
|
-
color: var(--player-text-color);
|
|
2688
|
-
cursor: pointer;
|
|
2689
|
-
transition: all var(--player-transition-fast);
|
|
2690
|
-
font-size: 13px;
|
|
2691
|
-
display: flex;
|
|
2692
|
-
align-items: center;
|
|
2693
|
-
justify-content: space-between;
|
|
2694
|
-
}
|
|
2695
|
-
|
|
2696
|
-
.settings-suboption:hover {
|
|
2697
|
-
background: rgba(255, 255, 255, 0.1);
|
|
2698
|
-
color: var(--player-primary-color);
|
|
2699
|
-
}
|
|
2700
|
-
|
|
2701
|
-
.settings-suboption.active {
|
|
2702
|
-
color: var(--player-primary-color);
|
|
2703
|
-
font-weight: 600;
|
|
2704
|
-
background: rgba(255, 255, 255, 0.05);
|
|
2705
|
-
}
|
|
2706
|
-
|
|
2707
|
-
.settings-suboption.active::after {
|
|
2708
|
-
content: '✓';
|
|
2709
|
-
font-size: 12px;
|
|
2710
|
-
color: var(--player-primary-color);
|
|
2711
|
-
}
|
|
2712
|
-
|
|
2713
|
-
/* RESPONSIVE DESIGN - PROGRESSIVE DEGRADATION WITH DROP-DOWN MENU */
|
|
2714
|
-
|
|
2715
|
-
/* Large tablets and small desktops */
|
|
2716
|
-
@media (max-width: 768px) {
|
|
2717
|
-
.controls-left,
|
|
2718
|
-
.controls-right {
|
|
2719
|
-
gap: 8px;
|
|
2720
|
-
}
|
|
2721
|
-
|
|
2722
|
-
.volume-slider {
|
|
2723
|
-
width: 50px; /* Reduce volume slider width */
|
|
2724
|
-
}
|
|
2725
|
-
|
|
2726
|
-
.time-display {
|
|
2727
|
-
font-size: 12px;
|
|
2728
|
-
}
|
|
2729
|
-
|
|
2730
|
-
.icon {
|
|
2731
|
-
font-size: 14px;
|
|
2732
|
-
}
|
|
2733
|
-
|
|
2734
|
-
.control-btn {
|
|
2735
|
-
padding: 6px;
|
|
2736
|
-
}
|
|
2737
|
-
|
|
2738
|
-
.quality-btn {
|
|
2739
|
-
min-height: 32px;
|
|
2740
|
-
padding: 4px 6px;
|
|
2741
|
-
}
|
|
2742
|
-
|
|
2743
|
-
.selected-quality {
|
|
2744
|
-
font-size: 12px;
|
|
2745
|
-
}
|
|
2746
|
-
|
|
2747
|
-
.current-quality {
|
|
2748
|
-
font-size: 9px;
|
|
2749
|
-
}
|
|
2750
|
-
|
|
2751
|
-
.seek-tooltip {
|
|
2752
|
-
font-size: 11px;
|
|
2753
|
-
padding: 4px 8px;
|
|
2754
|
-
}
|
|
2755
|
-
|
|
2756
|
-
.title-overlay {
|
|
2757
|
-
padding: 12px 15px 20px;
|
|
2758
|
-
}
|
|
2759
|
-
|
|
2760
|
-
.title-text {
|
|
2761
|
-
font-size: 16px;
|
|
2762
|
-
}
|
|
2763
|
-
|
|
2764
|
-
.video-player::cue {
|
|
2765
|
-
font-size: 16px;
|
|
2766
|
-
padding: 6px 10px;
|
|
2767
|
-
}
|
|
2768
|
-
|
|
2769
|
-
.controls-right .brand-logo {
|
|
2770
|
-
height: 36px;
|
|
2771
|
-
max-width: 100px;
|
|
2772
|
-
margin-right: 8px;
|
|
2773
|
-
}
|
|
2774
|
-
}
|
|
2775
|
-
|
|
2776
|
-
/* Mobile phones */
|
|
2777
|
-
@media (max-width: 480px) {
|
|
2778
|
-
.controls-left,
|
|
2779
|
-
.controls-right {
|
|
2780
|
-
gap: 6px;
|
|
2781
|
-
}
|
|
2782
|
-
|
|
2783
|
-
.volume-container {
|
|
2784
|
-
/* Reduce volume slider width further instead of hiding */
|
|
2785
|
-
flex-shrink: 3;
|
|
2786
|
-
}
|
|
2787
|
-
|
|
2788
|
-
.volume-slider {
|
|
2789
|
-
width: 35px; /* Further reduce volume slider */
|
|
2790
|
-
}
|
|
2791
|
-
|
|
2792
|
-
.time-display span:nth-child(2) {
|
|
2793
|
-
display: none; /* Hide the separator "/" */
|
|
2794
|
-
}
|
|
2795
|
-
|
|
2796
|
-
.quality-btn {
|
|
2797
|
-
min-height: 28px;
|
|
2798
|
-
padding: 3px 5px;
|
|
2799
|
-
}
|
|
2800
|
-
|
|
2801
|
-
.selected-quality {
|
|
2802
|
-
font-size: 11px;
|
|
2803
|
-
}
|
|
2804
|
-
|
|
2805
|
-
.current-quality {
|
|
2806
|
-
font-size: 8px;
|
|
2807
|
-
}
|
|
2808
|
-
|
|
2809
|
-
.seek-tooltip {
|
|
2810
|
-
font-size: 10px;
|
|
2811
|
-
padding: 3px 6px;
|
|
2812
|
-
}
|
|
2813
|
-
|
|
2814
|
-
.title-overlay {
|
|
2815
|
-
padding: 10px 12px 18px;
|
|
2816
|
-
}
|
|
2817
|
-
|
|
2818
|
-
.title-text {
|
|
2819
|
-
font-size: 14px;
|
|
2820
|
-
}
|
|
2821
|
-
|
|
2822
|
-
.video-player::cue {
|
|
2823
|
-
font-size: 14px;
|
|
2824
|
-
padding: 4px 8px;
|
|
2825
|
-
}
|
|
2826
|
-
|
|
2827
|
-
.controls-right .brand-logo {
|
|
2828
|
-
height: 28px;
|
|
2829
|
-
max-width: 80px;
|
|
2830
|
-
margin-right: 5px;
|
|
2831
|
-
}
|
|
2832
|
-
}
|
|
2833
|
-
|
|
2834
|
-
/* VERY SMALL SCREENS - ENABLE MENU SETTINGS DROPDOWN */
|
|
2835
|
-
@media (max-width: 350px) {
|
|
2836
|
-
/* Show the Settings menu only on very small screens */
|
|
2837
|
-
.settings-control {
|
|
2838
|
-
display: block !important;
|
|
2839
|
-
}
|
|
2840
|
-
|
|
2841
|
-
/* Hide individual controls and move them to the menu */
|
|
2842
|
-
.pip-btn,
|
|
2843
|
-
.speed-control,
|
|
2844
|
-
.subtitles-control {
|
|
2845
|
-
display: none !important;
|
|
2846
|
-
}
|
|
2847
|
-
|
|
2848
|
-
/* Reduce the spaces further */
|
|
2849
|
-
.controls-left,
|
|
2850
|
-
.controls-right {
|
|
2851
|
-
gap: 4px;
|
|
2852
|
-
}
|
|
2853
|
-
|
|
2854
|
-
.control-btn {
|
|
2855
|
-
padding: 4px;
|
|
2856
|
-
}
|
|
2857
|
-
|
|
2858
|
-
.icon {
|
|
2859
|
-
font-size: 12px;
|
|
2860
|
-
}
|
|
2861
|
-
|
|
2862
|
-
.quality-btn {
|
|
2863
|
-
min-height: 24px;
|
|
2864
|
-
padding: 2px 4px;
|
|
2865
|
-
}
|
|
2866
|
-
|
|
2867
|
-
.selected-quality {
|
|
2868
|
-
font-size: 10px;
|
|
2869
|
-
}
|
|
2870
|
-
|
|
2871
|
-
.current-quality {
|
|
2872
|
-
font-size: 7px;
|
|
2873
|
-
}
|
|
2874
|
-
|
|
2875
|
-
.controls-right .brand-logo {
|
|
2876
|
-
height: 22px;
|
|
2877
|
-
max-width: 50px;
|
|
2878
|
-
margin-right: 3px;
|
|
2879
|
-
}
|
|
2880
|
-
|
|
2881
|
-
.volume-slider {
|
|
2882
|
-
width: 30px; /* Even smaller volume slider */
|
|
2883
|
-
}
|
|
2884
|
-
|
|
2885
|
-
/* Reduce the settings menu for ultra-small screens */
|
|
2886
|
-
.settings-menu {
|
|
2887
|
-
min-width: 160px;
|
|
2888
|
-
font-size: 12px;
|
|
2889
|
-
}
|
|
2890
|
-
|
|
2891
|
-
.settings-option {
|
|
2892
|
-
padding: 6px 12px;
|
|
2893
|
-
font-size: 12px;
|
|
2894
|
-
}
|
|
2895
|
-
|
|
2896
|
-
.settings-submenu {
|
|
2897
|
-
min-width: 130px;
|
|
2898
|
-
}
|
|
2899
|
-
|
|
2900
|
-
.settings-suboption {
|
|
2901
|
-
padding: 6px 12px;
|
|
2902
|
-
font-size: 11px;
|
|
2903
|
-
}
|
|
2904
|
-
}
|
|
2905
|
-
|
|
2906
|
-
/* Very small screens - ultra mobile */
|
|
2907
|
-
@media (max-width: 280px) {
|
|
2908
|
-
.controls-left,
|
|
2909
|
-
.controls-right {
|
|
2910
|
-
gap: 3px;
|
|
2911
|
-
}
|
|
2912
|
-
|
|
2913
|
-
.control-btn {
|
|
2914
|
-
padding: 3px;
|
|
2915
|
-
}
|
|
2916
|
-
|
|
2917
|
-
.icon {
|
|
2918
|
-
font-size: 10px;
|
|
2919
|
-
}
|
|
2920
|
-
|
|
2921
|
-
.quality-btn {
|
|
2922
|
-
min-height: 20px;
|
|
2923
|
-
padding: 1px 3px;
|
|
2924
|
-
}
|
|
2925
|
-
|
|
2926
|
-
.selected-quality {
|
|
2927
|
-
font-size: 9px;
|
|
2928
|
-
}
|
|
2929
|
-
|
|
2930
|
-
.current-quality {
|
|
2931
|
-
font-size: 6px;
|
|
2932
|
-
}
|
|
2933
|
-
|
|
2934
|
-
.controls-right .brand-logo {
|
|
2935
|
-
height: 18px;
|
|
2936
|
-
max-width: 40px;
|
|
2937
|
-
margin-right: 2px;
|
|
2938
|
-
}
|
|
2939
|
-
|
|
2940
|
-
.volume-slider {
|
|
2941
|
-
width: 25px;
|
|
2942
|
-
}
|
|
2943
|
-
|
|
2944
|
-
/* Menu settings ultra-compact */
|
|
2945
|
-
.settings-menu {
|
|
2946
|
-
min-width: 140px;
|
|
2947
|
-
font-size: 11px;
|
|
2948
|
-
}
|
|
2949
|
-
|
|
2950
|
-
.settings-option {
|
|
2951
|
-
padding: 5px 10px;
|
|
2952
|
-
font-size: 11px;
|
|
2953
|
-
}
|
|
2954
|
-
|
|
2955
|
-
.settings-submenu {
|
|
2956
|
-
min-width: 120px;
|
|
2957
|
-
}
|
|
2958
|
-
|
|
2959
|
-
.settings-suboption {
|
|
2960
|
-
padding: 5px 10px;
|
|
2961
|
-
font-size: 10px;
|
|
2962
|
-
}
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
/* OVERFLOW HANDLING - CRITICAL FIX */
|
|
2966
|
-
@media (max-width: 600px) {
|
|
2967
|
-
.controls-main {
|
|
2968
|
-
/* Allow horizontal scrolling if absolutely necessary */
|
|
2969
|
-
overflow-x: auto;
|
|
2970
|
-
scrollbar-width: none; /* Firefox */
|
|
2971
|
-
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
2972
|
-
}
|
|
2973
|
-
|
|
2974
|
-
.controls-main::-webkit-scrollbar {
|
|
2975
|
-
display: none; /* Safari and Chrome */
|
|
2976
|
-
}
|
|
2977
|
-
|
|
2978
|
-
.controls-left,
|
|
2979
|
-
.controls-right {
|
|
2980
|
-
/* Ensure buttons stay in a single line */
|
|
2981
|
-
flex-wrap: nowrap;
|
|
2982
|
-
white-space: nowrap;
|
|
2983
|
-
/* Allow further shrinking */
|
|
2984
|
-
flex-shrink: 1;
|
|
2985
|
-
min-width: fit-content;
|
|
2986
|
-
}
|
|
2987
|
-
}
|
|
2988
|
-
|
|
2989
|
-
/* PLAYLIST CONTROLS */
|
|
2990
|
-
.controls-right .playlist-prev-btn,
|
|
2991
|
-
.controls-right .playlist-next-btn {
|
|
2992
|
-
display: none; /* Hidden by default, shown only when playlist is detected */
|
|
2993
|
-
}
|
|
2994
|
-
|
|
2995
|
-
.controls-right .playlist-prev-btn.playlist-active,
|
|
2996
|
-
.controls-right .playlist-next-btn.playlist-active {
|
|
2997
|
-
display: flex;
|
|
2998
|
-
}
|
|
2999
|
-
|
|
3000
|
-
/* Playlist button styles */
|
|
3001
|
-
.playlist-prev-btn .icon::before {
|
|
3002
|
-
content: '⏮';
|
|
3003
|
-
}
|
|
3004
|
-
|
|
3005
|
-
.playlist-next-btn .icon::before {
|
|
3006
|
-
content: '⏭';
|
|
3007
|
-
}
|
|
3008
|
-
|
|
3009
|
-
/* Disabled state for playlist buttons */
|
|
3010
|
-
.playlist-prev-btn:disabled,
|
|
3011
|
-
.playlist-next-btn:disabled {
|
|
3012
|
-
opacity: 0.4;
|
|
3013
|
-
cursor: not-allowed;
|
|
3014
|
-
pointer-events: none;
|
|
3015
|
-
}
|
|
3016
|
-
|
|
3017
|
-
.playlist-prev-btn:disabled .icon,
|
|
3018
|
-
.playlist-next-btn:disabled .icon {
|
|
3019
|
-
opacity: 0.5;
|
|
3020
|
-
}
|
|
3021
|
-
|
|
3022
|
-
/* Responsive playlist buttons */
|
|
3023
|
-
@media (max-width: 768px) {
|
|
3024
|
-
.playlist-prev-btn .icon::before,
|
|
3025
|
-
.playlist-next-btn .icon::before {
|
|
3026
|
-
font-size: 16px;
|
|
3027
|
-
}
|
|
3028
|
-
}
|
|
3029
|
-
|
|
3030
|
-
@media (max-width: 480px) {
|
|
3031
|
-
.playlist-prev-btn .icon::before,
|
|
3032
|
-
.playlist-next-btn .icon::before {
|
|
3033
|
-
font-size: 14px;
|
|
3034
|
-
}
|
|
3035
|
-
}
|
|
3036
|
-
|
|
3037
|
-
/* FULLSCREEN */
|
|
3038
|
-
.video-container:fullscreen,
|
|
3039
|
-
.video-container:-webkit-full-screen,
|
|
3040
|
-
.video-container:-moz-full-screen {
|
|
3041
|
-
width: 100vw;
|
|
3042
|
-
height: 100vh;
|
|
3043
|
-
border-radius: 0;
|
|
3044
|
-
}
|
|
3045
|
-
|
|
3046
|
-
/* ANIMATIONS */
|
|
3047
|
-
@keyframes qualityChange {
|
|
3048
|
-
0% {
|
|
3049
|
-
opacity: 0.7;
|
|
3050
|
-
}
|
|
3051
|
-
|
|
3052
|
-
50% {
|
|
3053
|
-
opacity: 0.3;
|
|
3054
|
-
}
|
|
3055
|
-
|
|
3056
|
-
100% {
|
|
3057
|
-
opacity: 1;
|
|
3058
|
-
}
|
|
3059
|
-
}
|
|
3060
|
-
|
|
3061
|
-
.quality-changing {
|
|
3062
|
-
animation: qualityChange 0.5s ease-in-out;
|
|
3063
|
-
}
|
|
3064
|
-
|
|
3065
|
-
/* FOCUS ACCESSIBILITY */
|
|
3066
|
-
.control-btn:focus {
|
|
3067
|
-
outline: 2px solid var(--player-primary-color);
|
|
3068
|
-
outline-offset: 2px;
|
|
3069
|
-
}
|
|
3070
|
-
|
|
3071
|
-
.volume-slider:focus {
|
|
3072
|
-
outline: 2px solid var(--player-primary-color);
|
|
3073
|
-
outline-offset: 2px;
|
|
3074
|
-
}
|
|
3075
|
-
|
|
3076
|
-
/* THEME UTILITIES */
|
|
3077
|
-
.player-large-controls {
|
|
3078
|
-
--player-icon-size: 24px;
|
|
3079
|
-
--player-button-padding: 12px;
|
|
3080
|
-
--player-progress-height: 8px;
|
|
3081
|
-
--player-progress-handle-size: 20px;
|
|
3082
|
-
--player-title-overlay-padding: 18px 24px 30px;
|
|
3083
|
-
}
|
|
3084
|
-
|
|
3085
|
-
.player-compact-controls {
|
|
3086
|
-
--player-icon-size: 16px;
|
|
3087
|
-
--player-button-padding: 4px;
|
|
3088
|
-
--player-controls-padding: 15px 10px 10px;
|
|
3089
|
-
--player-title-overlay-padding: 12px 16px 20px;
|
|
3090
|
-
}
|
|
3091
|
-
|
|
3092
|
-
/* FIREFOX-SPECIFIC VOLUME SLIDER FIX */
|
|
3093
|
-
@-moz-document url-prefix() {
|
|
3094
|
-
.volume-slider::-moz-range-thumb {
|
|
3095
|
-
/* Additional Firefox alignment correction */
|
|
3096
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px));
|
|
3097
|
-
}
|
|
3098
|
-
|
|
3099
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
3100
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 2px)) scale(1.1);
|
|
3101
|
-
}
|
|
3102
|
-
/* Ensure the track alignment is also correct */
|
|
3103
|
-
.volume-slider::-moz-range-track {
|
|
3104
|
-
height: var(--player-volume-height);
|
|
3105
|
-
background: linear-gradient(to right, var(--player-primary-dark) 0%, var(--player-primary-dark) var(--player-volume-fill), var(--player-volume-bg) var(--player-volume-fill), var(--player-volume-bg) 100%);
|
|
3106
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
3107
|
-
border: none;
|
|
3108
|
-
transition: background var(--player-transition-fast);
|
|
3109
|
-
margin: 0;
|
|
3110
|
-
}
|
|
3111
|
-
}
|
|
3112
|
-
|
|
3113
|
-
/* Alternative approach - using Firefox-specific selector */
|
|
3114
|
-
@supports (-moz-appearance: none) {
|
|
3115
|
-
.volume-slider {
|
|
3116
|
-
/* Slight vertical adjustment for Firefox only */
|
|
3117
|
-
margin-top: -1px;
|
|
3118
|
-
}
|
|
3119
|
-
|
|
3120
|
-
.volume-slider::-moz-range-thumb {
|
|
3121
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px));
|
|
3122
|
-
}
|
|
3123
|
-
|
|
3124
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
3125
|
-
transform: translateY(calc((var(--player-volume-height) - var(--player-volume-handle-size)) / 2 - 1.5px)) scale(1.1);
|
|
3126
|
-
}
|
|
3127
|
-
}
|
|
3128
|
-
|
|
3129
|
-
/* FIREFOX VOLUME CONTAINER POSITION FIX */
|
|
3130
|
-
@-moz-document url-prefix() {
|
|
3131
|
-
.volume-container {
|
|
3132
|
-
position: relative;
|
|
3133
|
-
top: 2px !important;
|
|
3134
|
-
}
|
|
3135
|
-
|
|
3136
|
-
.volume-slider::-moz-range-thumb {
|
|
3137
|
-
margin-top: -6px !important;
|
|
3138
|
-
transform: translateY(-2px) !important;
|
|
3139
|
-
}
|
|
3140
|
-
|
|
3141
|
-
.volume-slider::-moz-range-thumb:hover {
|
|
3142
|
-
transform: translateY(-2px) scale(1.1) !important;
|
|
3143
|
-
}
|
|
3144
|
-
}
|
|
3145
|
-
|
|
3146
|
-
/* RESOLUTION CONTROL SYSTEM - Video resolution modes management */
|
|
3147
|
-
|
|
3148
|
-
/* Base styles for resolution control */
|
|
3149
|
-
.video-player {
|
|
3150
|
-
object-position: center center;
|
|
3151
|
-
}
|
|
3152
|
-
|
|
3153
|
-
/* Normal (default) - maintain original aspect ratio */
|
|
3154
|
-
.resolution-normal .video-player {
|
|
3155
|
-
object-fit: contain;
|
|
3156
|
-
object-position: center center;
|
|
3157
|
-
}
|
|
3158
|
-
|
|
3159
|
-
/* 4:3 - Force 4:3 format */
|
|
3160
|
-
.resolution-4-3 .video-player {
|
|
3161
|
-
object-fit: fill;
|
|
3162
|
-
aspect-ratio: 4/3;
|
|
3163
|
-
}
|
|
3164
|
-
|
|
3165
|
-
.resolution-4-3 .video-wrapper {
|
|
3166
|
-
aspect-ratio: 4/3;
|
|
3167
|
-
}
|
|
3168
|
-
|
|
3169
|
-
/* 16:9 - Force 16:9 format */
|
|
3170
|
-
.resolution-16-9 .video-player {
|
|
3171
|
-
object-fit: fill;
|
|
3172
|
-
aspect-ratio: 16/9;
|
|
3173
|
-
}
|
|
3174
|
-
|
|
3175
|
-
.resolution-16-9 .video-wrapper {
|
|
3176
|
-
aspect-ratio: 16/9;
|
|
3177
|
-
}
|
|
3178
|
-
|
|
3179
|
-
/* Stretched - Stretch video to fill container completely */
|
|
3180
|
-
.resolution-stretched .video-player {
|
|
3181
|
-
object-fit: fill;
|
|
3182
|
-
width: 100%;
|
|
3183
|
-
height: 100%;
|
|
3184
|
-
}
|
|
3185
|
-
|
|
3186
|
-
.resolution-stretched .video-wrapper {
|
|
3187
|
-
height: auto;
|
|
3188
|
-
min-height: 300px;
|
|
3189
|
-
}
|
|
3190
|
-
|
|
3191
|
-
/* Fit to Screen - Adapt to screen without deforming, may crop parts */
|
|
3192
|
-
.resolution-fit-to-screen .video-player {
|
|
3193
|
-
object-fit: cover;
|
|
3194
|
-
object-position: center center;
|
|
3195
|
-
width: 100%;
|
|
3196
|
-
height: 100%;
|
|
3197
|
-
}
|
|
3198
|
-
|
|
3199
|
-
.resolution-fit-to-screen .video-wrapper {
|
|
3200
|
-
height: 100vh;
|
|
3201
|
-
max-height: 100vh;
|
|
3202
|
-
}
|
|
3203
|
-
|
|
3204
|
-
/* Scale to Fit - PERFECT for smartphone videos! Scales to maximum size without distortion or cropping */
|
|
3205
|
-
.resolution-scale-to-fit .video-player {
|
|
3206
|
-
object-fit: contain;
|
|
3207
|
-
object-position: center center;
|
|
3208
|
-
width: 100%;
|
|
3209
|
-
height: 100%;
|
|
3210
|
-
max-width: 100vw;
|
|
3211
|
-
max-height: 100vh;
|
|
3212
|
-
}
|
|
3213
|
-
|
|
3214
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
3215
|
-
display: flex;
|
|
3216
|
-
align-items: center;
|
|
3217
|
-
justify-content: center;
|
|
3218
|
-
height: 70vh;
|
|
3219
|
-
min-height: 400px;
|
|
3220
|
-
background: var(--player-bg-primary, #000);
|
|
3221
|
-
}
|
|
3222
|
-
|
|
3223
|
-
/* Enhanced scale-to-fit for different viewport orientations */
|
|
3224
|
-
@media (orientation: portrait) {
|
|
3225
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
3226
|
-
height: 50vh;
|
|
3227
|
-
min-height: 350px;
|
|
3228
|
-
}
|
|
3229
|
-
}
|
|
3230
|
-
|
|
3231
|
-
@media (orientation: landscape) {
|
|
3232
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
3233
|
-
height: 80vh;
|
|
3234
|
-
min-height: 450px;
|
|
3235
|
-
}
|
|
3236
|
-
}
|
|
3237
|
-
|
|
3238
|
-
/* Responsive adjustments for resolution modes */
|
|
3239
|
-
@media (max-width: 768px) {
|
|
3240
|
-
/* On mobile, some modes might need adjustments */
|
|
3241
|
-
.resolution-fit-to-screen .video-wrapper {
|
|
3242
|
-
height: 50vh;
|
|
3243
|
-
min-height: 250px;
|
|
3244
|
-
}
|
|
3245
|
-
|
|
3246
|
-
.resolution-4-3 .video-wrapper,
|
|
3247
|
-
.resolution-16-9 .video-wrapper {
|
|
3248
|
-
min-height: 200px;
|
|
3249
|
-
}
|
|
3250
|
-
|
|
3251
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
3252
|
-
height: 45vh;
|
|
3253
|
-
min-height: 300px;
|
|
3254
|
-
}
|
|
3255
|
-
}
|
|
3256
|
-
|
|
3257
|
-
@media (max-width: 480px) {
|
|
3258
|
-
.resolution-fit-to-screen .video-wrapper {
|
|
3259
|
-
height: 40vh;
|
|
3260
|
-
min-height: 200px;
|
|
3261
|
-
}
|
|
3262
|
-
|
|
3263
|
-
.resolution-4-3 .video-wrapper,
|
|
3264
|
-
.resolution-16-9 .video-wrapper {
|
|
3265
|
-
min-height: 180px;
|
|
3266
|
-
}
|
|
3267
|
-
|
|
3268
|
-
.resolution-scale-to-fit .video-wrapper {
|
|
3269
|
-
height: 40vh;
|
|
3270
|
-
min-height: 250px;
|
|
3271
|
-
}
|
|
3272
|
-
}
|
|
3273
|
-
|
|
3274
|
-
/* Transitions for smooth changes */
|
|
3275
|
-
.video-player {
|
|
3276
|
-
transition: object-fit 0.3s ease, aspect-ratio 0.3s ease;
|
|
3277
|
-
}
|
|
3278
|
-
|
|
3279
|
-
.video-wrapper {
|
|
3280
|
-
transition: aspect-ratio 0.3s ease, height 0.3s ease;
|
|
3281
|
-
}
|
|
3282
|
-
|
|
3283
|
-
/* Fallback for browsers that don't support aspect-ratio */
|
|
3284
|
-
@supports not (aspect-ratio: 1) {
|
|
3285
|
-
.resolution-4-3 .video-wrapper {
|
|
3286
|
-
padding-bottom: 75%; /* 4:3 ratio fallback */
|
|
3287
|
-
height: 0;
|
|
3288
|
-
position: relative;
|
|
3289
|
-
}
|
|
3290
|
-
|
|
3291
|
-
.resolution-4-3 .video-player {
|
|
3292
|
-
position: absolute;
|
|
3293
|
-
top: 0;
|
|
3294
|
-
left: 0;
|
|
3295
|
-
width: 100%;
|
|
3296
|
-
height: 100%;
|
|
3297
|
-
}
|
|
3298
|
-
|
|
3299
|
-
.resolution-16-9 .video-wrapper {
|
|
3300
|
-
padding-bottom: 56.25%; /* 16:9 ratio fallback */
|
|
3301
|
-
height: 0;
|
|
3302
|
-
position: relative;
|
|
3303
|
-
}
|
|
3304
|
-
|
|
3305
|
-
.resolution-16-9 .video-player {
|
|
3306
|
-
position: absolute;
|
|
3307
|
-
top: 0;
|
|
3308
|
-
left: 0;
|
|
3309
|
-
width: 100%;
|
|
3310
|
-
height: 100%;
|
|
3311
|
-
}
|
|
3312
|
-
}
|
|
3313
|
-
|
|
3314
|
-
/* Quality changing state - show loading during quality change */
|
|
3315
|
-
.quality-changing .video-player {
|
|
3316
|
-
filter: brightness(0.7);
|
|
3317
|
-
}
|
|
3318
|
-
|
|
3319
|
-
/* Utility classes for debugging */
|
|
3320
|
-
.resolution-debug .video-wrapper::before {
|
|
3321
|
-
content: 'Resolution: ' attr(data-resolution);
|
|
3322
|
-
position: absolute;
|
|
3323
|
-
top: 10px;
|
|
3324
|
-
left: 10px;
|
|
3325
|
-
background: rgba(0, 0, 0, 0.7);
|
|
3326
|
-
color: white;
|
|
3327
|
-
padding: 5px 10px;
|
|
3328
|
-
border-radius: 4px;
|
|
3329
|
-
font-size: 12px;
|
|
3330
|
-
z-index: 1000;
|
|
3331
|
-
pointer-events: none;
|
|
3332
|
-
}
|
|
3333
|
-
|
|
3334
|
-
/* CRITICAL: Ensure all control containers can handle overflow gracefully */
|
|
3335
|
-
.controls,
|
|
3336
|
-
.controls-main,
|
|
3337
|
-
.controls-left,
|
|
3338
|
-
.controls-right {
|
|
3339
|
-
overflow: visible !important;
|
|
3340
|
-
}
|
|
3341
|
-
|
|
3342
|
-
/* Force buttons to stay in one line and allow flexible sizing */
|
|
3343
|
-
.controls-left,
|
|
3344
|
-
.controls-right {
|
|
3345
|
-
flex-wrap: nowrap !important;
|
|
3346
|
-
white-space: nowrap !important;
|
|
3347
|
-
}
|
|
3348
|
-
|
|
3349
|
-
/* Allow buttons to shrink below their natural content size when absolutely necessary */
|
|
3350
|
-
.control-btn {
|
|
3351
|
-
min-width: 0 !important;
|
|
3352
|
-
white-space: nowrap !important;
|
|
3353
|
-
}
|
|
3354
|
-
/* CSS for subtitles SRT */
|
|
3355
|
-
video::cue {
|
|
3356
|
-
background-color: rgba(0, 0, 0, 0.8);
|
|
3357
|
-
color: white;
|
|
3358
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
3359
|
-
font-size: 18px;
|
|
3360
|
-
font-weight: normal;
|
|
3361
|
-
line-height: 1.2;
|
|
3362
|
-
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
|
3363
|
-
padding: 4px 8px;
|
|
3364
|
-
border-radius: 4px;
|
|
3365
|
-
white-space: pre-line;
|
|
3366
|
-
}
|
|
3367
|
-
|
|
3368
|
-
/* Fix for browser WebKit (Chrome, Safari, Edge) */
|
|
3369
|
-
video::-webkit-media-text-track-display {
|
|
3370
|
-
color: white;
|
|
3371
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
3372
|
-
background-color: rgba(0, 0, 0, 0.8);
|
|
3373
|
-
border-radius: 4px;
|
|
3374
|
-
padding: 4px 8px;
|
|
3375
|
-
font-size: 18px;
|
|
3376
|
-
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
|
|
3377
|
-
}
|
|
3378
|
-
/* Custom subtitle overlay responsive styles */
|
|
3379
|
-
.custom-subtitle-overlay {
|
|
3380
|
-
font-size: clamp(12px, 4vw, 18px);
|
|
3381
|
-
}
|
|
3382
|
-
|
|
3383
|
-
/* Tablet responsiveness */
|
|
3384
|
-
@media (max-width: 768px) {
|
|
3385
|
-
.custom-subtitle-overlay {
|
|
3386
|
-
font-size: 16px !important;
|
|
3387
|
-
bottom: 70px !important;
|
|
3388
|
-
max-width: 85% !important;
|
|
3389
|
-
padding: 6px 12px !important;
|
|
3390
|
-
line-height: 1.2 !important;
|
|
3391
|
-
}
|
|
3392
|
-
}
|
|
3393
|
-
|
|
3394
|
-
/* Mobile phone responsiveness */
|
|
3395
|
-
@media (max-width: 480px) {
|
|
3396
|
-
.custom-subtitle-overlay {
|
|
3397
|
-
font-size: 14px !important;
|
|
3398
|
-
bottom: 60px !important;
|
|
3399
|
-
max-width: 90% !important;
|
|
3400
|
-
padding: 5px 10px !important;
|
|
3401
|
-
line-height: 1.15 !important;
|
|
3402
|
-
}
|
|
3403
|
-
}
|
|
3404
|
-
|
|
3405
|
-
/* Very small screens */
|
|
3406
|
-
@media (max-width: 360px) {
|
|
3407
|
-
.custom-subtitle-overlay {
|
|
3408
|
-
font-size: 12px !important;
|
|
3409
|
-
bottom: 50px !important;
|
|
3410
|
-
max-width: 95% !important;
|
|
3411
|
-
padding: 4px 8px !important;
|
|
3412
|
-
}
|
|
3413
|
-
}
|
|
3414
|
-
|
|
3415
|
-
/* Landscape mobile optimization */
|
|
3416
|
-
@media (max-height: 500px) and (orientation: landscape) {
|
|
3417
|
-
.custom-subtitle-overlay {
|
|
3418
|
-
font-size: 13px !important;
|
|
3419
|
-
bottom: 45px !important;
|
|
3420
|
-
max-width: 85% !important;
|
|
3421
|
-
padding: 4px 10px !important;
|
|
3422
|
-
}
|
|
3423
|
-
}
|
|
3424
|
-
|
|
3425
|
-
/* Scrollable dropdown menus for small player heights */
|
|
3426
|
-
.speed-menu,
|
|
3427
|
-
.quality-menu,
|
|
3428
|
-
.subtitles-menu {
|
|
3429
|
-
max-height: 200px;
|
|
3430
|
-
overflow-y: auto;
|
|
3431
|
-
scrollbar-width: thin;
|
|
3432
|
-
scrollbar-color: var(--player-primary-color) rgba(255, 255, 255, 0.1);
|
|
3433
|
-
}
|
|
3434
|
-
|
|
3435
|
-
/* Custom scrollbar for WebKit browsers */
|
|
3436
|
-
.speed-menu::-webkit-scrollbar,
|
|
3437
|
-
.quality-menu::-webkit-scrollbar,
|
|
3438
|
-
.subtitles-menu::-webkit-scrollbar {
|
|
3439
|
-
width: 6px;
|
|
3440
|
-
}
|
|
3441
|
-
|
|
3442
|
-
.speed-menu::-webkit-scrollbar-track,
|
|
3443
|
-
.quality-menu::-webkit-scrollbar-track,
|
|
3444
|
-
.subtitles-menu::-webkit-scrollbar-track {
|
|
3445
|
-
background: rgba(255, 255, 255, 0.1);
|
|
3446
|
-
border-radius: 3px;
|
|
3447
|
-
}
|
|
3448
|
-
|
|
3449
|
-
.speed-menu::-webkit-scrollbar-thumb,
|
|
3450
|
-
.quality-menu::-webkit-scrollbar-thumb,
|
|
3451
|
-
.subtitles-menu::-webkit-scrollbar-thumb {
|
|
3452
|
-
background: var(--player-primary-color);
|
|
3453
|
-
border-radius: 3px;
|
|
3454
|
-
}
|
|
3455
|
-
|
|
3456
|
-
.speed-menu::-webkit-scrollbar-thumb:hover,
|
|
3457
|
-
.quality-menu::-webkit-scrollbar-thumb:hover,
|
|
3458
|
-
.subtitles-menu::-webkit-scrollbar-thumb:hover {
|
|
3459
|
-
background: var(--player-primary-hover);
|
|
3460
|
-
}
|
|
3461
|
-
|
|
3462
|
-
/* Responsive max-height for very small players */
|
|
3463
|
-
@media (max-height: 400px) {
|
|
3464
|
-
.speed-menu,
|
|
3465
|
-
.quality-menu,
|
|
3466
|
-
.subtitles-menu {
|
|
3467
|
-
max-height: 150px;
|
|
3468
|
-
}
|
|
3469
|
-
}
|
|
3470
|
-
|
|
3471
|
-
@media (max-height: 300px) {
|
|
3472
|
-
.speed-menu,
|
|
3473
|
-
.quality-menu,
|
|
3474
|
-
.subtitles-menu {
|
|
3475
|
-
max-height: 120px;
|
|
3476
|
-
}
|
|
3477
|
-
}
|
|
3478
|
-
|
|
3479
|
-
/* Scrollbar for settings submenus on small screens */
|
|
3480
|
-
.settings-submenu {
|
|
3481
|
-
max-height: 180px;
|
|
3482
|
-
overflow-y: auto;
|
|
3483
|
-
scrollbar-width: thin;
|
|
3484
|
-
scrollbar-color: var(--player-primary-color) rgba(255, 255, 255, 0.1);
|
|
3485
|
-
}
|
|
3486
|
-
|
|
3487
|
-
/* Custom scrollbar for settings submenu in WebKit browsers */
|
|
3488
|
-
.settings-submenu::-webkit-scrollbar {
|
|
3489
|
-
width: 6px;
|
|
3490
|
-
}
|
|
3491
|
-
|
|
3492
|
-
.settings-submenu::-webkit-scrollbar-track {
|
|
3493
|
-
background: rgba(255, 255, 255, 0.1);
|
|
3494
|
-
border-radius: 3px;
|
|
3495
|
-
}
|
|
3496
|
-
|
|
3497
|
-
.settings-submenu::-webkit-scrollbar-thumb {
|
|
3498
|
-
background: var(--player-primary-color);
|
|
3499
|
-
border-radius: 3px;
|
|
3500
|
-
}
|
|
3501
|
-
|
|
3502
|
-
.settings-submenu::-webkit-scrollbar-thumb:hover {
|
|
3503
|
-
background: var(--player-primary-hover);
|
|
3504
|
-
}
|
|
3505
|
-
|
|
3506
|
-
/* Responsive adjustments for settings submenu on very small screens */
|
|
3507
|
-
@media (max-width: 350px) {
|
|
3508
|
-
.settings-submenu {
|
|
3509
|
-
max-height: 140px;
|
|
3510
|
-
}
|
|
3511
|
-
}
|
|
3512
|
-
|
|
3513
|
-
@media (max-height: 400px) {
|
|
3514
|
-
.settings-submenu {
|
|
3515
|
-
max-height: 120px;
|
|
3516
|
-
}
|
|
3517
|
-
}
|
|
3518
|
-
|
|
3519
|
-
/* Volume Slider Configuration - Base styles */
|
|
3520
|
-
.volume-container {
|
|
3521
|
-
position: relative;
|
|
3522
|
-
display: flex;
|
|
3523
|
-
align-items: center;
|
|
3524
|
-
gap: var(--player-controls-gap);
|
|
3525
|
-
}
|
|
3526
|
-
|
|
3527
|
-
/* Horizontal Volume Slider (default) - Base width reduced */
|
|
3528
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
3529
|
-
width: 80px; /* Ridotto da var(--player-volume-width) a 80px fissi */
|
|
3530
|
-
height: var(--player-volume-height);
|
|
3531
|
-
background: var(--player-volume-bg);
|
|
3532
|
-
border-radius: calc(var(--player-volume-height) / 2);
|
|
3533
|
-
transition: all 0.3s ease;
|
|
3534
|
-
}
|
|
3535
|
-
|
|
3536
|
-
/* Responsive width reduction for horizontal slider */
|
|
3537
|
-
@media (max-width: 1200px) {
|
|
3538
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
3539
|
-
width: 70px;
|
|
3540
|
-
}
|
|
3541
|
-
}
|
|
3542
|
-
|
|
3543
|
-
@media (max-width: 900px) {
|
|
3544
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
3545
|
-
width: 60px;
|
|
3546
|
-
}
|
|
3547
|
-
}
|
|
3548
|
-
|
|
3549
|
-
@media (max-width: 768px) {
|
|
3550
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
3551
|
-
width: 50px;
|
|
3552
|
-
}
|
|
3553
|
-
}
|
|
3554
|
-
|
|
3555
|
-
@media (max-width: 600px) {
|
|
3556
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
3557
|
-
width: 40px;
|
|
3558
|
-
}
|
|
3559
|
-
}
|
|
3560
|
-
|
|
3561
|
-
/* Vertical Volume Slider (always visible) */
|
|
3562
|
-
.volume-container[data-orientation="vertical"] {
|
|
3563
|
-
flex-direction: column;
|
|
3564
|
-
height: 80px;
|
|
3565
|
-
justify-content: center;
|
|
3566
|
-
}
|
|
3567
|
-
|
|
3568
|
-
.volume-container[data-orientation="vertical"] .volume-slider {
|
|
3569
|
-
width: 4px;
|
|
3570
|
-
height: 60px;
|
|
3571
|
-
writing-mode: bt-lr; /* IE */
|
|
3572
|
-
-webkit-appearance: slider-vertical; /* WebKit */
|
|
3573
|
-
background: var(--player-volume-bg);
|
|
3574
|
-
border-radius: 2px;
|
|
3575
|
-
transform: rotate(0deg);
|
|
3576
|
-
transition: all 0.3s ease;
|
|
3577
|
-
}
|
|
3578
|
-
|
|
3579
|
-
/* Responsive: Force vertical behavior for horizontal sliders under 550px */
|
|
3580
|
-
@media (max-width: 550px) {
|
|
3581
|
-
/* Hide horizontal slider by default on mobile */
|
|
3582
|
-
.volume-container[data-orientation="horizontal"] .volume-slider {
|
|
3583
|
-
position: absolute;
|
|
3584
|
-
opacity: 0;
|
|
3585
|
-
visibility: hidden;
|
|
3586
|
-
pointer-events: none;
|
|
3587
|
-
width: 0;
|
|
3588
|
-
height: 0;
|
|
3589
|
-
transform: translateX(-50%) rotate(-90deg);
|
|
3590
|
-
transform-origin: center center;
|
|
3591
|
-
transition: opacity 0.1s ease, visibility 0.1s ease;
|
|
3592
|
-
}
|
|
3593
|
-
|
|
3594
|
-
/* Show vertical slider on hover for horizontal mode */
|
|
3595
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider,
|
|
3596
|
-
.volume-container[data-orientation="horizontal"]:hover .volume-slider {
|
|
3597
|
-
position: absolute;
|
|
3598
|
-
opacity: 1;
|
|
3599
|
-
visibility: visible;
|
|
3600
|
-
pointer-events: auto;
|
|
3601
|
-
width: 60px;
|
|
3602
|
-
height: 4px;
|
|
3603
|
-
bottom: 45px;
|
|
3604
|
-
left: -20px;
|
|
3605
|
-
transform: translateX(-50%) translateY(0%) rotate(-90deg);
|
|
3606
|
-
transform-origin: center center;
|
|
3607
|
-
z-index: 1000;
|
|
3608
|
-
background: rgba(0, 0, 0, 0.9);
|
|
3609
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
3610
|
-
border-radius: 6px;
|
|
3611
|
-
padding: 4px;
|
|
3612
|
-
backdrop-filter: blur(10px);
|
|
3613
|
-
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
|
|
3614
|
-
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
3615
|
-
}
|
|
3616
|
-
|
|
3617
|
-
/* Extend hover area of mute button for horizontal mode */
|
|
3618
|
-
.volume-container[data-orientation="horizontal"] + .mute-btn,
|
|
3619
|
-
.mute-btn + .volume-container[data-orientation="horizontal"] .mute-btn {
|
|
3620
|
-
padding: 15px;
|
|
3621
|
-
margin: -7px;
|
|
3622
|
-
position: relative;
|
|
3623
|
-
z-index: 1001;
|
|
3624
|
-
}
|
|
3625
|
-
|
|
3626
|
-
/* Keep hover active when moving from button to slider */
|
|
3627
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"]::before,
|
|
3628
|
-
.volume-container[data-orientation="horizontal"]::before {
|
|
3629
|
-
content: '';
|
|
3630
|
-
position: absolute;
|
|
3631
|
-
top: -50px;
|
|
3632
|
-
left: -40px;
|
|
3633
|
-
right: -20px;
|
|
3634
|
-
bottom: -10px;
|
|
3635
|
-
background: transparent;
|
|
3636
|
-
z-index: 999;
|
|
3637
|
-
}
|
|
3638
|
-
|
|
3639
|
-
/* Hide thumb by default for horizontal mode on mobile */
|
|
3640
|
-
.volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
|
|
3641
|
-
opacity: 0;
|
|
3642
|
-
visibility: hidden;
|
|
3643
|
-
transition: none !important;
|
|
3644
|
-
}
|
|
3645
|
-
|
|
3646
|
-
.volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
|
|
3647
|
-
opacity: 0;
|
|
3648
|
-
visibility: hidden;
|
|
3649
|
-
transition: none !important;
|
|
3650
|
-
}
|
|
3651
|
-
|
|
3652
|
-
/* Show thumb only when in hover for horizontal mode */
|
|
3653
|
-
.volume-container[data-orientation="horizontal"]:hover .volume-slider::-webkit-slider-thumb,
|
|
3654
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-webkit-slider-thumb {
|
|
3655
|
-
opacity: 1;
|
|
3656
|
-
visibility: visible;
|
|
3657
|
-
-webkit-appearance: none;
|
|
3658
|
-
width: var(--player-volume-handle-size);
|
|
3659
|
-
height: var(--player-volume-handle-size);
|
|
3660
|
-
border-radius: 50%;
|
|
3661
|
-
background: var(--player-primary-color);
|
|
3662
|
-
cursor: pointer;
|
|
3663
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
3664
|
-
transition: none !important;
|
|
3665
|
-
}
|
|
3666
|
-
|
|
3667
|
-
.volume-container[data-orientation="horizontal"]:hover .volume-slider::-moz-range-thumb,
|
|
3668
|
-
.mute-btn:hover + .volume-container[data-orientation="horizontal"] .volume-slider::-moz-range-thumb {
|
|
3669
|
-
opacity: 1;
|
|
3670
|
-
visibility: visible;
|
|
3671
|
-
width: var(--player-volume-handle-size);
|
|
3672
|
-
height: var(--player-volume-handle-size);
|
|
3673
|
-
border-radius: 50%;
|
|
3674
|
-
background: var(--player-primary-color);
|
|
3675
|
-
cursor: pointer;
|
|
3676
|
-
border: none;
|
|
3677
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
3678
|
-
transition: none !important;
|
|
3679
|
-
}
|
|
3680
|
-
|
|
3681
|
-
/* Vertical sliders remain unchanged on mobile */
|
|
3682
|
-
.volume-container[data-orientation="vertical"] {
|
|
3683
|
-
/* Keep original vertical styling */
|
|
3684
|
-
}
|
|
3685
|
-
}
|
|
3686
|
-
|
|
3687
|
-
/* CHAPTER MARKERS SYSTEM */
|
|
3688
|
-
|
|
3689
|
-
/* Container for all chapter markers */
|
|
3690
|
-
.chapter-markers-container {
|
|
3691
|
-
position: absolute;
|
|
3692
|
-
top: 0;
|
|
3693
|
-
left: 0;
|
|
3694
|
-
width: 100%;
|
|
3695
|
-
height: 100%;
|
|
3696
|
-
pointer-events: none;
|
|
3697
|
-
z-index: 3;
|
|
3698
|
-
}
|
|
3699
|
-
|
|
3700
|
-
/* Individual chapter marker */
|
|
3701
|
-
.chapter-marker {
|
|
3702
|
-
position: absolute;
|
|
3703
|
-
top: 0;
|
|
3704
|
-
height: 100%;
|
|
3705
|
-
width: 3px;
|
|
3706
|
-
background: var(--player-primary-color);
|
|
3707
|
-
opacity: 0.7;
|
|
3708
|
-
cursor: pointer;
|
|
3709
|
-
pointer-events: auto;
|
|
3710
|
-
transition: all var(--player-transition-fast);
|
|
3711
|
-
border-radius: 2px;
|
|
3712
|
-
transform: translateX(-50%);
|
|
3713
|
-
}
|
|
3714
|
-
|
|
3715
|
-
/* Hover state for chapter marker */
|
|
3716
|
-
.chapter-marker:hover {
|
|
3717
|
-
opacity: 1;
|
|
3718
|
-
width: 4px;
|
|
3719
|
-
height: 120%;
|
|
3720
|
-
top: -10%;
|
|
3721
|
-
box-shadow: 0 0 8px var(--player-primary-color);
|
|
3722
|
-
}
|
|
3723
|
-
|
|
3724
|
-
/* Active chapter marker (currently playing) */
|
|
3725
|
-
.chapter-marker.active {
|
|
3726
|
-
background: var(--player-primary-hover);
|
|
3727
|
-
opacity: 1;
|
|
3728
|
-
width: 4px;
|
|
3729
|
-
}
|
|
3730
|
-
|
|
3731
|
-
/* Chapter tooltip */
|
|
3732
|
-
.chapter-tooltip {
|
|
3733
|
-
position: absolute;
|
|
3734
|
-
bottom: 100%;
|
|
3735
|
-
left: 0;
|
|
3736
|
-
background: rgba(0, 0, 0, 0.95);
|
|
3737
|
-
backdrop-filter: blur(10px);
|
|
3738
|
-
border-radius: 8px;
|
|
3739
|
-
padding: 0;
|
|
3740
|
-
margin-bottom: 12px;
|
|
3741
|
-
opacity: 0;
|
|
3742
|
-
visibility: hidden;
|
|
3743
|
-
transition: all 0.2s ease;
|
|
3744
|
-
transform: translateX(-50%) translateY(-8px);
|
|
3745
|
-
z-index: 1000;
|
|
3746
|
-
box-shadow: var(--player-shadow-tooltip);
|
|
3747
|
-
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
3748
|
-
min-width: 200px;
|
|
3749
|
-
max-width: 300px;
|
|
3750
|
-
overflow: hidden;
|
|
3751
|
-
pointer-events: none;
|
|
3752
|
-
}
|
|
3753
|
-
|
|
3754
|
-
/* Tooltip arrow */
|
|
3755
|
-
.chapter-tooltip::after {
|
|
3756
|
-
content: '';
|
|
3757
|
-
position: absolute;
|
|
3758
|
-
top: 100%;
|
|
3759
|
-
left: 50%;
|
|
3760
|
-
transform: translateX(-50%);
|
|
3761
|
-
width: 0;
|
|
3762
|
-
height: 0;
|
|
3763
|
-
border-left: 6px solid transparent;
|
|
3764
|
-
border-right: 6px solid transparent;
|
|
3765
|
-
border-top: 6px solid rgba(0, 0, 0, 0.95);
|
|
3766
|
-
}
|
|
3767
|
-
|
|
3768
|
-
/* Chapter tooltip image */
|
|
3769
|
-
.chapter-tooltip-image {
|
|
3770
|
-
width: 100%;
|
|
3771
|
-
height: 150px;
|
|
3772
|
-
background-size: cover;
|
|
3773
|
-
background-position: center;
|
|
3774
|
-
background-repeat: no-repeat;
|
|
3775
|
-
display: none;
|
|
3776
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
3777
|
-
}
|
|
3778
|
-
|
|
3779
|
-
/* Chapter tooltip title */
|
|
3780
|
-
.chapter-tooltip-title {
|
|
3781
|
-
padding: 10px 12px 6px;
|
|
3782
|
-
color: var(--player-text-color);
|
|
3783
|
-
font-size: 14px;
|
|
3784
|
-
font-weight: 600;
|
|
3785
|
-
line-height: 1.3;
|
|
3786
|
-
word-wrap: break-word;
|
|
3787
|
-
}
|
|
3788
|
-
|
|
3789
|
-
/* Chapter tooltip time */
|
|
3790
|
-
.chapter-tooltip-time {
|
|
3791
|
-
padding: 0 12px 10px;
|
|
3792
|
-
color: var(--player-text-secondary);
|
|
3793
|
-
font-size: 12px;
|
|
3794
|
-
font-weight: 400;
|
|
3795
|
-
font-variant-numeric: tabular-nums;
|
|
3796
|
-
}
|
|
3797
|
-
|
|
3798
|
-
/* RESPONSIVE ADJUSTMENTS FOR CHAPTERS */
|
|
3799
|
-
@media (max-width: 480px) {
|
|
3800
|
-
.chapter-marker {
|
|
3801
|
-
width: 2px;
|
|
3802
|
-
}
|
|
3803
|
-
|
|
3804
|
-
.chapter-marker:hover {
|
|
3805
|
-
width: 3px;
|
|
3806
|
-
}
|
|
3807
|
-
|
|
3808
|
-
.chapter-tooltip {
|
|
3809
|
-
min-width: 160px;
|
|
3810
|
-
max-width: 250px;
|
|
3811
|
-
}
|
|
3812
|
-
|
|
3813
|
-
.chapter-tooltip-image {
|
|
3814
|
-
height: 100px;
|
|
3815
|
-
}
|
|
3816
|
-
}
|
|
3817
|
-
/* VIDEO POSTER OVERLAY - THEMED VERSION */
|
|
3818
|
-
|
|
3819
|
-
/* Custom poster overlay to prevent disappearing */
|
|
3820
|
-
.video-poster-overlay {
|
|
3821
|
-
position: absolute;
|
|
3822
|
-
top: 0;
|
|
3823
|
-
left: 0;
|
|
3824
|
-
width: 100%;
|
|
3825
|
-
height: 100%;
|
|
3826
|
-
background-size: cover;
|
|
3827
|
-
background-position: center;
|
|
3828
|
-
background-repeat: no-repeat;
|
|
3829
|
-
z-index: 1;
|
|
3830
|
-
cursor: pointer;
|
|
3831
|
-
opacity: 0;
|
|
3832
|
-
visibility: hidden;
|
|
3833
|
-
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
3834
|
-
pointer-events: none;
|
|
3835
|
-
}
|
|
3836
|
-
|
|
3837
|
-
/* Visible state */
|
|
3838
|
-
.video-poster-overlay.visible {
|
|
3839
|
-
opacity: 1;
|
|
3840
|
-
visibility: visible;
|
|
3841
|
-
pointer-events: auto;
|
|
3842
|
-
}
|
|
3843
|
-
|
|
3844
|
-
/* Hidden state */
|
|
3845
|
-
.video-poster-overlay.hidden {
|
|
3846
|
-
opacity: 0;
|
|
3847
|
-
visibility: hidden;
|
|
3848
|
-
pointer-events: none;
|
|
3849
|
-
}
|
|
3850
|
-
|
|
3851
|
-
/* Hover effect on poster */
|
|
3852
|
-
.video-poster-overlay.visible:hover {
|
|
3853
|
-
opacity: 0.95;
|
|
3854
|
-
}
|
|
3855
|
-
|
|
3856
|
-
/* Play button overlay on poster - THEMED COLORS 🎨 */
|
|
3857
|
-
.video-poster-overlay::after {
|
|
3858
|
-
content: '';
|
|
3859
|
-
position: absolute;
|
|
3860
|
-
top: 50%;
|
|
3861
|
-
left: 50%;
|
|
3862
|
-
transform: translate(-50%, -50%);
|
|
3863
|
-
width: 80px;
|
|
3864
|
-
height: 80px;
|
|
3865
|
-
background: rgba(0, 0, 0, 0.7);
|
|
3866
|
-
border-radius: 50%;
|
|
3867
|
-
border: 3px solid var(--player-primary-color); /* THEMED BORDER ✨ */
|
|
3868
|
-
opacity: 0;
|
|
3869
|
-
transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
|
|
3870
|
-
pointer-events: none;
|
|
3871
|
-
}
|
|
3872
|
-
|
|
3873
|
-
/* Show play button on hover with animation and themed glow */
|
|
3874
|
-
.video-poster-overlay.visible:hover::after {
|
|
3875
|
-
opacity: 1;
|
|
3876
|
-
transform: translate(-50%, -50%) scale(1.1);
|
|
3877
|
-
border-color: var(--player-primary-hover); /* THEMED HOVER COLOR 🌟 */
|
|
3878
|
-
box-shadow: 0 0 20px var(--player-primary-color); /* THEMED GLOW 💫 */
|
|
3879
|
-
}
|
|
3880
|
-
|
|
3881
|
-
/* Play icon triangle - THEMED COLOR 🎨 */
|
|
3882
|
-
.video-poster-overlay::before {
|
|
3883
|
-
content: '';
|
|
3884
|
-
position: absolute;
|
|
3885
|
-
top: 50%;
|
|
3886
|
-
left: 50%;
|
|
3887
|
-
transform: translate(-40%, -50%);
|
|
3888
|
-
width: 0;
|
|
3889
|
-
height: 0;
|
|
3890
|
-
border-style: solid;
|
|
3891
|
-
border-width: 15px 0 15px 25px;
|
|
3892
|
-
border-color: transparent transparent transparent var(--player-primary-color); /* THEMED TRIANGLE ✨ */
|
|
3893
|
-
z-index: 2;
|
|
3894
|
-
opacity: 0;
|
|
3895
|
-
transition: opacity 0.3s ease, border-color 0.3s ease;
|
|
3896
|
-
pointer-events: none;
|
|
3897
|
-
}
|
|
3898
|
-
|
|
3899
|
-
/* Show play icon on hover with themed color */
|
|
3900
|
-
.video-poster-overlay.visible:hover::before {
|
|
3901
|
-
opacity: 1;
|
|
3902
|
-
border-color: transparent transparent transparent var(--player-primary-hover); /* THEMED HOVER 🌟 */
|
|
3903
|
-
}
|
|
3904
|
-
|
|
3905
|
-
/* Responsive adjustments */
|
|
3906
|
-
@media (max-width: 768px) {
|
|
3907
|
-
.video-poster-overlay::after {
|
|
3908
|
-
width: 60px;
|
|
3909
|
-
height: 60px;
|
|
3910
|
-
}
|
|
3911
|
-
|
|
3912
|
-
.video-poster-overlay::before {
|
|
3913
|
-
border-width: 12px 0 12px 20px;
|
|
3914
|
-
}
|
|
3915
|
-
}
|
|
3916
|
-
|
|
3917
|
-
@media (max-width: 480px) {
|
|
3918
|
-
.video-poster-overlay::after {
|
|
3919
|
-
width: 50px;
|
|
3920
|
-
height: 50px;
|
|
3921
|
-
}
|
|
3922
|
-
|
|
3923
|
-
.video-poster-overlay::before {
|
|
3924
|
-
border-width: 10px 0 10px 16px;
|
|
3925
|
-
}
|
|
3926
|
-
}
|
|
3927
|
-
|
|
3928
|
-
/* Ensure smooth transition when poster hides */
|
|
3929
|
-
.video-poster-overlay.hidden {
|
|
3930
|
-
transition: opacity 0.5s ease, visibility 0s ease 0.5s;
|
|
3931
|
-
}
|
|
3932
|
-
|
|
3933
|
-
/* THEME-SPECIFIC OVERRIDES (optional fine-tuning) */
|
|
3934
|
-
|
|
3935
|
-
/* Blue theme 💙 */
|
|
3936
|
-
.player-theme-blue .video-poster-overlay::after {
|
|
3937
|
-
border-color: #2196F3;
|
|
3938
|
-
}
|
|
3939
|
-
|
|
3940
|
-
.player-theme-blue .video-poster-overlay.visible:hover::after {
|
|
3941
|
-
border-color: #1976D2;
|
|
3942
|
-
box-shadow: 0 0 20px #2196F3;
|
|
3943
|
-
}
|
|
3944
|
-
|
|
3945
|
-
.player-theme-blue .video-poster-overlay::before {
|
|
3946
|
-
border-color: transparent transparent transparent #2196F3;
|
|
3947
|
-
}
|
|
3948
|
-
|
|
3949
|
-
.player-theme-blue .video-poster-overlay.visible:hover::before {
|
|
3950
|
-
border-color: transparent transparent transparent #1976D2;
|
|
3951
|
-
}
|
|
3952
|
-
|
|
3953
|
-
/* Green theme 💚 */
|
|
3954
|
-
.player-theme-green .video-poster-overlay::after {
|
|
3955
|
-
border-color: #4CAF50;
|
|
3956
|
-
}
|
|
3957
|
-
|
|
3958
|
-
.player-theme-green .video-poster-overlay.visible:hover::after {
|
|
3959
|
-
border-color: #45a049;
|
|
3960
|
-
box-shadow: 0 0 20px #4CAF50;
|
|
3961
|
-
}
|
|
3962
|
-
|
|
3963
|
-
.player-theme-green .video-poster-overlay::before {
|
|
3964
|
-
border-color: transparent transparent transparent #4CAF50;
|
|
3965
383
|
}
|
|
3966
|
-
|
|
3967
|
-
.player-theme-green .video-poster-overlay.visible:hover::before {
|
|
3968
|
-
border-color: transparent transparent transparent #45a049;
|
|
3969
|
-
}
|
|
3970
|
-
|
|
3971
|
-
/* Red theme ❤️ */
|
|
3972
|
-
.player-theme-red .video-poster-overlay::after {
|
|
3973
|
-
border-color: #f44336;
|
|
3974
|
-
}
|
|
3975
|
-
|
|
3976
|
-
.player-theme-red .video-poster-overlay.visible:hover::after {
|
|
3977
|
-
border-color: #d32f2f;
|
|
3978
|
-
box-shadow: 0 0 20px #f44336;
|
|
3979
|
-
}
|
|
3980
|
-
|
|
3981
|
-
.player-theme-red .video-poster-overlay::before {
|
|
3982
|
-
border-color: transparent transparent transparent #f44336;
|
|
3983
|
-
}
|
|
3984
|
-
|
|
3985
|
-
.player-theme-red .video-poster-overlay.visible:hover::before {
|
|
3986
|
-
border-color: transparent transparent transparent #d32f2f;
|
|
3987
|
-
}
|
|
3988
|
-
|
|
3989
|
-
/* Dark theme 🖤 (uses default goldenrod) */
|
|
3990
|
-
.player-theme-dark .video-poster-overlay::after {
|
|
3991
|
-
background: rgba(0, 0, 0, 0.85); /* Slightly darker background for dark theme */
|
|
3992
|
-
}
|
|
3993
|
-
|
|
3994
|
-
/* screen height adjust */
|
|
3995
|
-
@media (max-height: 400px) {
|
|
3996
|
-
.video-player {
|
|
3997
|
-
min-height: 200px;
|
|
3998
|
-
}
|
|
3999
|
-
|
|
4000
|
-
.controls {
|
|
4001
|
-
min-height: 50px !important;
|
|
4002
|
-
padding: 10px 10px 8px !important;
|
|
4003
|
-
}
|
|
4004
|
-
|
|
4005
|
-
.progress-container {
|
|
4006
|
-
margin-bottom: 8px;
|
|
4007
|
-
}
|
|
4008
|
-
|
|
4009
|
-
.controls-main {
|
|
4010
|
-
min-height: 32px !important;
|
|
4011
|
-
}
|
|
4012
|
-
}
|
|
4013
|
-
|
|
4014
|
-
@media (max-height: 330px) {
|
|
4015
|
-
.video-player {
|
|
4016
|
-
min-height: 150px;
|
|
4017
|
-
}
|
|
4018
|
-
|
|
4019
|
-
.controls {
|
|
4020
|
-
min-height: 45px !important;
|
|
4021
|
-
padding: 8px 8px 6px !important;
|
|
4022
|
-
}
|
|
4023
|
-
|
|
4024
|
-
.progress-container {
|
|
4025
|
-
margin-bottom: 6px;
|
|
4026
|
-
height: 4px;
|
|
4027
|
-
}
|
|
4028
|
-
|
|
4029
|
-
.controls-main {
|
|
4030
|
-
min-height: 28px !important;
|
|
4031
|
-
}
|
|
4032
|
-
|
|
4033
|
-
.control-btn {
|
|
4034
|
-
padding: 4px !important;
|
|
4035
|
-
}
|
|
4036
|
-
|
|
4037
|
-
.icon {
|
|
4038
|
-
font-size: 14px !important;
|
|
4039
|
-
}
|
|
4040
|
-
|
|
4041
|
-
.time-display {
|
|
4042
|
-
font-size: 11px !important;
|
|
4043
|
-
}
|
|
4044
|
-
}
|
|
4045
|
-
|
|
4046
|
-
@media (max-height: 250px) {
|
|
4047
|
-
.video-player {
|
|
4048
|
-
min-height: 120px;
|
|
4049
|
-
}
|
|
4050
|
-
|
|
4051
|
-
.controls {
|
|
4052
|
-
min-height: 40px !important;
|
|
4053
|
-
padding: 6px 8px 5px !important;
|
|
4054
|
-
}
|
|
4055
|
-
|
|
4056
|
-
.progress-container {
|
|
4057
|
-
margin-bottom: 4px;
|
|
4058
|
-
height: 3px;
|
|
4059
|
-
}
|
|
4060
|
-
|
|
4061
|
-
.controls-main {
|
|
4062
|
-
min-height: 24px !important;
|
|
4063
|
-
}
|
|
4064
|
-
|
|
4065
|
-
.control-btn {
|
|
4066
|
-
padding: 2px !important;
|
|
4067
|
-
}
|
|
4068
|
-
|
|
4069
|
-
.icon {
|
|
4070
|
-
font-size: 12px !important;
|
|
4071
|
-
}
|
|
4072
|
-
|
|
4073
|
-
.time-display {
|
|
4074
|
-
font-size: 10px !important;
|
|
4075
|
-
}
|
|
4076
|
-
|
|
4077
|
-
.quality-btn {
|
|
4078
|
-
min-height: 20px !important;
|
|
4079
|
-
padding: 2px 4px !important;
|
|
4080
|
-
}
|
|
4081
|
-
|
|
4082
|
-
.selected-quality {
|
|
4083
|
-
font-size: 9px !important;
|
|
4084
|
-
}
|
|
4085
|
-
|
|
4086
|
-
.current-quality {
|
|
4087
|
-
display: none;
|
|
4088
|
-
}
|
|
4089
|
-
|
|
4090
|
-
.volume-slider {
|
|
4091
|
-
width: 40px !important;
|
|
4092
|
-
}
|
|
4093
|
-
}
|
|
4094
|
-
|
|
4095
|
-
.video-container,
|
|
4096
|
-
.video-wrapper {
|
|
4097
|
-
overflow: visible !important;
|
|
4098
|
-
}
|
|
4099
|
-
|
|
4100
|
-
.controls.show {
|
|
4101
|
-
position: absolute !important;
|
|
4102
|
-
bottom: 0 !important;
|
|
4103
|
-
overflow: visible !important;
|
|
4104
|
-
}
|
|
4105
|
-
|
|
4106
|
-
/* ===================================
|
|
4107
|
-
WATERMARK OVERLAY
|
|
4108
|
-
=================================== */
|
|
4109
|
-
|
|
4110
|
-
.video-watermark {
|
|
4111
|
-
position: absolute;
|
|
4112
|
-
z-index: 15; /* Above video (10), below controls (100) */
|
|
4113
|
-
pointer-events: auto;
|
|
4114
|
-
opacity: 0.7;
|
|
4115
|
-
transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
|
|
4116
|
-
}
|
|
4117
|
-
|
|
4118
|
-
/* Watermark visible by default */
|
|
4119
|
-
.video-watermark {
|
|
4120
|
-
visibility: visible;
|
|
4121
|
-
opacity: 0.7;
|
|
4122
|
-
}
|
|
4123
|
-
|
|
4124
|
-
/* Hide watermark when it has hide-on-autohide class AND controls are hidden */
|
|
4125
|
-
.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
|
|
4126
|
-
visibility: hidden;
|
|
4127
|
-
opacity: 0;
|
|
4128
|
-
}
|
|
4129
|
-
|
|
4130
|
-
/* Show watermark when controls are shown */
|
|
4131
|
-
.video-wrapper.has-controls .video-watermark {
|
|
4132
|
-
visibility: visible;
|
|
4133
|
-
opacity: 0.7;
|
|
4134
|
-
}
|
|
4135
|
-
|
|
4136
|
-
.video-watermark:hover {
|
|
4137
|
-
opacity: 1;
|
|
4138
|
-
}
|
|
4139
|
-
|
|
4140
|
-
.video-watermark img {
|
|
4141
|
-
display: block;
|
|
4142
|
-
max-width: 150px;
|
|
4143
|
-
max-height: 80px;
|
|
4144
|
-
width: auto;
|
|
4145
|
-
height: auto;
|
|
4146
|
-
object-fit: contain;
|
|
4147
|
-
}
|
|
4148
|
-
|
|
4149
|
-
/* Watermark positions - Top positions unchanged */
|
|
4150
|
-
.video-watermark.watermark-topleft {
|
|
4151
|
-
top: 15px;
|
|
4152
|
-
left: 15px;
|
|
4153
|
-
}
|
|
4154
|
-
|
|
4155
|
-
.video-watermark.watermark-topright {
|
|
4156
|
-
top: 15px;
|
|
4157
|
-
right: 15px;
|
|
4158
|
-
}
|
|
4159
|
-
|
|
4160
|
-
/* Bottom positions - Increased spacing from controlbar (was 70px, now 90px) */
|
|
4161
|
-
.video-watermark.watermark-bottomleft {
|
|
4162
|
-
bottom: 90px; /* Increased spacing */
|
|
4163
|
-
left: 15px;
|
|
4164
|
-
}
|
|
4165
|
-
|
|
4166
|
-
.video-watermark.watermark-bottomright {
|
|
4167
|
-
bottom: 90px; /* Increased spacing */
|
|
4168
|
-
right: 15px;
|
|
4169
|
-
}
|
|
4170
|
-
|
|
4171
|
-
/* DYNAMIC POSITIONING: Always visible watermark moves down when controls are hidden */
|
|
4172
|
-
/* This applies ONLY to watermarks without hide-on-autohide class (always visible) */
|
|
4173
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide) {
|
|
4174
|
-
bottom: 15px; /* Move to bottom corner when controls hidden */
|
|
4175
|
-
}
|
|
4176
|
-
|
|
4177
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
|
|
4178
|
-
bottom: 15px; /* Move to bottom corner when controls hidden */
|
|
4179
|
-
}
|
|
4180
|
-
|
|
4181
|
-
/* When controls are shown, bottom watermark stays above controlbar */
|
|
4182
|
-
.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
|
|
4183
|
-
.video-wrapper.has-controls .video-watermark.watermark-bottomright {
|
|
4184
|
-
bottom: 90px; /* Stay above controlbar */
|
|
4185
|
-
}
|
|
4186
|
-
|
|
4187
|
-
/* Responsive adjustments for mobile */
|
|
4188
|
-
@media (max-width: 768px) {
|
|
4189
|
-
.video-watermark img {
|
|
4190
|
-
max-width: 100px;
|
|
4191
|
-
max-height: 50px;
|
|
4192
|
-
}
|
|
4193
|
-
|
|
4194
|
-
.video-watermark.watermark-topleft,
|
|
4195
|
-
.video-watermark.watermark-topright {
|
|
4196
|
-
top: 10px;
|
|
4197
|
-
}
|
|
4198
|
-
|
|
4199
|
-
.video-watermark.watermark-topleft,
|
|
4200
|
-
.video-watermark.watermark-bottomleft {
|
|
4201
|
-
left: 10px;
|
|
4202
|
-
}
|
|
4203
|
-
|
|
4204
|
-
.video-watermark.watermark-topright,
|
|
4205
|
-
.video-watermark.watermark-bottomright {
|
|
4206
|
-
right: 10px;
|
|
4207
|
-
}
|
|
4208
|
-
|
|
4209
|
-
/* Bottom spacing adjusted for mobile */
|
|
4210
|
-
.video-watermark.watermark-bottomleft,
|
|
4211
|
-
.video-watermark.watermark-bottomright {
|
|
4212
|
-
bottom: 75px; /* Above controlbar on mobile */
|
|
4213
|
-
}
|
|
4214
|
-
|
|
4215
|
-
/* Always visible watermark on mobile - moves down when controls hidden */
|
|
4216
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
|
|
4217
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
|
|
4218
|
-
bottom: 10px; /* Move to corner on mobile */
|
|
4219
|
-
}
|
|
4220
|
-
}
|
|
4221
|
-
|
|
4222
|
-
/* Extra small screens */
|
|
4223
|
-
@media (max-width: 480px) {
|
|
4224
|
-
.video-watermark.watermark-bottomleft,
|
|
4225
|
-
.video-watermark.watermark-bottomright {
|
|
4226
|
-
bottom: 65px;
|
|
4227
|
-
}
|
|
4228
|
-
|
|
4229
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
|
|
4230
|
-
.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
|
|
4231
|
-
bottom: 8px;
|
|
4232
|
-
}
|
|
4233
|
-
}
|
|
4234
|
-
|
|
4235
|
-
/* Clickable watermark cursor */
|
|
4236
|
-
.video-watermark[style*="cursor: pointer"] {
|
|
4237
|
-
cursor: pointer !important;
|
|
4238
|
-
}
|
|
4239
|
-
/* ===================================
|
|
4240
|
-
FIX SUBMENU CLIPPING ON SMALL SCREENS
|
|
4241
|
-
=================================== */
|
|
4242
|
-
|
|
4243
|
-
/* Change positioning from bottom-aligned to top-aligned when menu would be clipped */
|
|
4244
|
-
/* ONLY affects submenus inside settings menu (small screen mode) */
|
|
4245
|
-
@media (max-height: 600px) {
|
|
4246
|
-
.settings-menu .settings-submenu,
|
|
4247
|
-
.settings-option .settings-submenu,
|
|
4248
|
-
.settings-option .quality-submenu,
|
|
4249
|
-
.settings-option .speed-submenu {
|
|
4250
|
-
/* Remove bottom positioning */
|
|
4251
|
-
bottom: auto !important;
|
|
4252
|
-
/* Align to top of parent option */
|
|
4253
|
-
top: 0 !important;
|
|
4254
|
-
/* Reduce max-height on very small screens */
|
|
4255
|
-
max-height: 150px !important;
|
|
4256
|
-
}
|
|
4257
|
-
}
|
|
4258
|
-
|
|
4259
|
-
/* Even smaller screens - ultra compact */
|
|
4260
|
-
@media (max-height: 400px) {
|
|
4261
|
-
.settings-menu .settings-submenu,
|
|
4262
|
-
.settings-option .settings-submenu,
|
|
4263
|
-
.settings-option .quality-submenu,
|
|
4264
|
-
.settings-option .speed-submenu {
|
|
4265
|
-
max-height: 120px !important;
|
|
4266
|
-
}
|
|
4267
|
-
}
|
|
4268
|
-
|
|
4269
|
-
/* For very small players (width < 400px) - only inside settings menu */
|
|
4270
|
-
@media (max-width: 400px) {
|
|
4271
|
-
.settings-menu .settings-submenu,
|
|
4272
|
-
.settings-option .settings-submenu,
|
|
4273
|
-
.settings-option .quality-submenu,
|
|
4274
|
-
.settings-option .speed-submenu {
|
|
4275
|
-
/* Switch to top alignment */
|
|
4276
|
-
bottom: auto !important;
|
|
4277
|
-
top: 0 !important;
|
|
4278
|
-
max-height: 180px !important;
|
|
4279
|
-
}
|
|
4280
|
-
}
|
|
4281
|
-
|
|
4282
|
-
/* EXCLUDE standalone subtitles menu (the one that appears when player is large) */
|
|
4283
|
-
/* Keep original bottom positioning for standalone menus */
|
|
4284
|
-
.subtitles-button .subtitles-menu,
|
|
4285
|
-
.yt-subtitles-submenu:not(.settings-option *),
|
|
4286
|
-
.yt-quality-submenu:not(.settings-option *) {
|
|
4287
|
-
bottom: 0 !important;
|
|
4288
|
-
top: auto !important;
|
|
4289
|
-
}
|