vidply 1.0.21 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vidply.css +720 -547
- package/dist/vidply.esm.js +411 -104
- package/dist/vidply.esm.js.map +2 -2
- package/dist/vidply.esm.min.js +11 -7
- package/dist/vidply.esm.min.meta.json +30 -25
- package/dist/vidply.js +411 -104
- package/dist/vidply.js.map +2 -2
- package/dist/vidply.min.css +1 -1
- package/dist/vidply.min.js +11 -7
- package/dist/vidply.min.meta.json +30 -25
- package/package.json +2 -2
- package/src/controls/ControlBar.js +3343 -3246
- package/src/controls/TranscriptManager.js +2296 -2271
- package/src/core/Player.js +4768 -4730
- package/src/features/PlaylistManager.js +1202 -1039
- package/src/i18n/languages/de.js +5 -1
- package/src/i18n/languages/en.js +5 -1
- package/src/i18n/languages/es.js +5 -1
- package/src/i18n/languages/fr.js +5 -1
- package/src/i18n/languages/ja.js +5 -1
- package/src/styles/vidply.css +720 -547
- package/src/utils/DOMUtils.js +67 -0
- package/src/utils/MenuUtils.js +10 -4
- package/src/utils/SettingsMenuFactory.js +8 -4
- package/src/utils/WindowComponents.js +6 -4
package/dist/vidply.css
CHANGED
|
@@ -40,40 +40,40 @@
|
|
|
40
40
|
--vidply-border-focus: var(--vidply-primary-light);
|
|
41
41
|
--vidply-border-hover: var(--vidply-white-30);
|
|
42
42
|
--vidply-border-light: var(--vidply-white-10);
|
|
43
|
-
--vidply-button-size:
|
|
44
|
-
--vidply-button-size-mobile:
|
|
45
|
-
--vidply-button-size-small:
|
|
46
|
-
--vidply-focus-outline:
|
|
47
|
-
--vidply-focus-outline-player:
|
|
48
|
-
--vidply-focus-outline-white:
|
|
49
|
-
--vidply-font-base:
|
|
50
|
-
--vidply-font-lg:
|
|
51
|
-
--vidply-font-md:
|
|
52
|
-
--vidply-font-sm:
|
|
53
|
-
--vidply-font-xl:
|
|
54
|
-
--vidply-font-xs:
|
|
43
|
+
--vidply-button-size: 1.875rem;
|
|
44
|
+
--vidply-button-size-mobile: 2.25rem;
|
|
45
|
+
--vidply-button-size-small: 2rem;
|
|
46
|
+
--vidply-focus-outline: 0.125rem solid var(--vidply-primary-light);
|
|
47
|
+
--vidply-focus-outline-player: 0.1875rem solid var(--vidply-primary-light);
|
|
48
|
+
--vidply-focus-outline-white: 0.125rem solid var(--vidply-primary-light);
|
|
49
|
+
--vidply-font-base: 0.8125rem;
|
|
50
|
+
--vidply-font-lg: 1rem;
|
|
51
|
+
--vidply-font-md: 0.875rem;
|
|
52
|
+
--vidply-font-sm: 0.75rem;
|
|
53
|
+
--vidply-font-xl: 1.125rem;
|
|
54
|
+
--vidply-font-xs: 0.6875rem;
|
|
55
55
|
|
|
56
56
|
/* Black Color Variations */
|
|
57
|
-
--vidply-font-xxl:
|
|
58
|
-
--vidply-gap-lg:
|
|
59
|
-
--vidply-gap-md:
|
|
60
|
-
--vidply-gap-sm:
|
|
61
|
-
--vidply-gap-xl:
|
|
62
|
-
--vidply-gap-xs:
|
|
63
|
-
--vidply-gap-xxl:
|
|
64
|
-
--vidply-header-height:
|
|
57
|
+
--vidply-font-xxl: 1.25rem;
|
|
58
|
+
--vidply-gap-lg: 0.75rem;
|
|
59
|
+
--vidply-gap-md: 0.5rem;
|
|
60
|
+
--vidply-gap-sm: 0.375rem;
|
|
61
|
+
--vidply-gap-xl: 1rem;
|
|
62
|
+
--vidply-gap-xs: 0.25rem;
|
|
63
|
+
--vidply-gap-xxl: 1.25rem;
|
|
64
|
+
--vidply-header-height: 1.75rem;
|
|
65
65
|
--vidply-hover-bg: var(--vidply-white-10);
|
|
66
66
|
|
|
67
67
|
/* UI Background Colors */
|
|
68
|
-
--vidply-icon-size:
|
|
69
|
-
--vidply-icon-size-mobile:
|
|
70
|
-
--vidply-icon-size-small:
|
|
71
|
-
--vidply-icon-size-xs:
|
|
72
|
-
--vidply-padding-lg:
|
|
73
|
-
--vidply-padding-md:
|
|
74
|
-
--vidply-padding-sm:
|
|
75
|
-
--vidply-padding-xl:
|
|
76
|
-
--vidply-padding-xxl:
|
|
68
|
+
--vidply-icon-size: 1.625rem;
|
|
69
|
+
--vidply-icon-size-mobile: 1.375rem;
|
|
70
|
+
--vidply-icon-size-small: 1.25rem;
|
|
71
|
+
--vidply-icon-size-xs: 1.125rem;
|
|
72
|
+
--vidply-padding-lg: 0.75rem;
|
|
73
|
+
--vidply-padding-md: 0.5rem;
|
|
74
|
+
--vidply-padding-sm: 0.25rem;
|
|
75
|
+
--vidply-padding-xl: 1rem;
|
|
76
|
+
--vidply-padding-xxl: 1.25rem;
|
|
77
77
|
--vidply-primary: #0a406e;
|
|
78
78
|
--vidply-primary-10: rgb(var(--vidply-primary-rgb), 0.1);
|
|
79
79
|
|
|
@@ -97,21 +97,21 @@
|
|
|
97
97
|
|
|
98
98
|
/* State Colors */
|
|
99
99
|
--vidply-primary-rgb: 10, 64, 110;
|
|
100
|
-
--vidply-radius-lg:
|
|
101
|
-
--vidply-radius-md:
|
|
102
|
-
--vidply-radius-sm:
|
|
100
|
+
--vidply-radius-lg: 0.5rem;
|
|
101
|
+
--vidply-radius-md: 0.375rem;
|
|
102
|
+
--vidply-radius-sm: 0.25rem;
|
|
103
103
|
|
|
104
104
|
/* Sizing Variables */
|
|
105
|
-
--vidply-radius-xl:
|
|
105
|
+
--vidply-radius-xl: 0.75rem;
|
|
106
106
|
--vidply-scrollbar-thumb: var(--vidply-white);
|
|
107
107
|
--vidply-scrollbar-thumb-hover: var(--vidply-white-90);
|
|
108
108
|
--vidply-scrollbar-track: #404040;
|
|
109
109
|
--vidply-scrollbar-track-transcript: #555;
|
|
110
|
-
--vidply-shadow-lg: 0
|
|
111
|
-
--vidply-shadow-md: 0
|
|
110
|
+
--vidply-shadow-lg: 0 0.75rem 3rem var(--vidply-black-80);
|
|
111
|
+
--vidply-shadow-md: 0 0.25rem 0.75rem var(--vidply-black-40);
|
|
112
112
|
|
|
113
113
|
/* Spacing Variables */
|
|
114
|
-
--vidply-shadow-sm: 0
|
|
114
|
+
--vidply-shadow-sm: 0 0.125rem 0.25rem var(--vidply-black-30);
|
|
115
115
|
--vidply-text-disabled: var(--vidply-white-60);
|
|
116
116
|
--vidply-text-muted: var(--vidply-white-70);
|
|
117
117
|
--vidply-text-primary: var(--vidply-white);
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
|
|
201
201
|
.vidply-icon-button:focus {
|
|
202
202
|
outline: var(--vidply-focus-outline-white);
|
|
203
|
-
outline-offset:
|
|
203
|
+
outline-offset: 0.125rem;
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
.vidply-icon-button .vidply-icon {
|
|
@@ -212,7 +212,7 @@
|
|
|
212
212
|
.vidply-draggable-header {
|
|
213
213
|
align-items: center;
|
|
214
214
|
background: #282828;
|
|
215
|
-
border-bottom:
|
|
215
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
216
216
|
cursor: move;
|
|
217
217
|
display: flex;
|
|
218
218
|
justify-content: space-between;
|
|
@@ -223,21 +223,21 @@
|
|
|
223
223
|
|
|
224
224
|
.vidply-draggable-header:focus,
|
|
225
225
|
.vidply-draggable-header:focus-visible {
|
|
226
|
-
box-shadow: 0 0 0
|
|
227
|
-
outline:
|
|
228
|
-
outline-offset:
|
|
226
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
227
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
228
|
+
outline-offset: 0.125rem;
|
|
229
229
|
}
|
|
230
230
|
|
|
231
231
|
.vidply-draggable-header h3 {
|
|
232
232
|
color: var(--vidply-white);
|
|
233
233
|
font-size: var(--vidply-font-lg);
|
|
234
234
|
font-weight: 600;
|
|
235
|
-
height:
|
|
236
|
-
left: -
|
|
235
|
+
height: 0.0625rem;
|
|
236
|
+
left: -625rem;
|
|
237
237
|
margin: 0;
|
|
238
238
|
overflow: hidden;
|
|
239
239
|
position: absolute;
|
|
240
|
-
width:
|
|
240
|
+
width: 0.0625rem;
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
/* Common Resize Handles */
|
|
@@ -250,67 +250,67 @@
|
|
|
250
250
|
.vidply-resize-handle-nw,
|
|
251
251
|
.vidply-resize-handle-se,
|
|
252
252
|
.vidply-resize-handle-sw {
|
|
253
|
-
height:
|
|
254
|
-
width:
|
|
253
|
+
height: 1rem;
|
|
254
|
+
width: 1rem;
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
.vidply-resize-handle-n,
|
|
258
258
|
.vidply-resize-handle-s {
|
|
259
259
|
cursor: ns-resize;
|
|
260
|
-
height:
|
|
261
|
-
left:
|
|
262
|
-
right:
|
|
260
|
+
height: 0.5rem;
|
|
261
|
+
left: 1rem;
|
|
262
|
+
right: 1rem;
|
|
263
263
|
}
|
|
264
264
|
|
|
265
265
|
.vidply-resize-handle-e,
|
|
266
266
|
.vidply-resize-handle-w {
|
|
267
|
-
bottom:
|
|
267
|
+
bottom: 1rem;
|
|
268
268
|
cursor: ew-resize;
|
|
269
|
-
top:
|
|
270
|
-
width:
|
|
269
|
+
top: 1rem;
|
|
270
|
+
width: 0.5rem;
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
-
.vidply-resize-handle-n { top: -
|
|
274
|
-
.vidply-resize-handle-s { bottom: -
|
|
275
|
-
.vidply-resize-handle-e { right: -
|
|
276
|
-
.vidply-resize-handle-w { left: -
|
|
273
|
+
.vidply-resize-handle-n { top: -0.25rem; }
|
|
274
|
+
.vidply-resize-handle-s { bottom: -0.25rem; }
|
|
275
|
+
.vidply-resize-handle-e { right: -0.25rem; }
|
|
276
|
+
.vidply-resize-handle-w { left: -0.25rem; }
|
|
277
277
|
|
|
278
278
|
.vidply-resize-handle-ne {
|
|
279
279
|
cursor: nesw-resize;
|
|
280
|
-
right: -
|
|
281
|
-
top: -
|
|
280
|
+
right: -0.5rem;
|
|
281
|
+
top: -0.5rem;
|
|
282
282
|
}
|
|
283
283
|
|
|
284
284
|
.vidply-resize-handle-nw {
|
|
285
285
|
cursor: nwse-resize;
|
|
286
|
-
left: -
|
|
287
|
-
top: -
|
|
286
|
+
left: -0.5rem;
|
|
287
|
+
top: -0.5rem;
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
.vidply-resize-handle-se {
|
|
291
|
-
bottom: -
|
|
291
|
+
bottom: -0.5rem;
|
|
292
292
|
cursor: nwse-resize;
|
|
293
|
-
right: -
|
|
293
|
+
right: -0.5rem;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
.vidply-resize-handle-sw {
|
|
297
|
-
bottom: -
|
|
297
|
+
bottom: -0.5rem;
|
|
298
298
|
cursor: nesw-resize;
|
|
299
|
-
left: -
|
|
299
|
+
left: -0.5rem;
|
|
300
300
|
}
|
|
301
301
|
|
|
302
302
|
.vidply-resizable .vidply-resize-handle::after {
|
|
303
303
|
background: var(--vidply-primary-light);
|
|
304
304
|
border-radius: 50%;
|
|
305
305
|
content: '';
|
|
306
|
-
height:
|
|
306
|
+
height: 0.375rem;
|
|
307
307
|
left: 50%;
|
|
308
308
|
opacity: 0;
|
|
309
309
|
position: absolute;
|
|
310
310
|
top: 50%;
|
|
311
311
|
transform: translate(-50%, -50%);
|
|
312
312
|
transition: opacity 0.2s ease;
|
|
313
|
-
width:
|
|
313
|
+
width: 0.375rem;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
316
|
.vidply-resizable:hover .vidply-resize-handle::after {
|
|
@@ -324,31 +324,31 @@
|
|
|
324
324
|
/* Common Settings Menu Pattern */
|
|
325
325
|
.vidply-popup-settings-menu {
|
|
326
326
|
background: var(--vidply-bg-menu);
|
|
327
|
-
border:
|
|
327
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
328
328
|
border-radius: var(--vidply-radius-md);
|
|
329
329
|
box-shadow: var(--vidply-shadow-lg);
|
|
330
330
|
display: none;
|
|
331
|
-
min-width:
|
|
331
|
+
min-width: 15rem;
|
|
332
332
|
padding: var(--vidply-gap-sm);
|
|
333
333
|
position: absolute;
|
|
334
334
|
z-index: 100;
|
|
335
335
|
}
|
|
336
336
|
|
|
337
337
|
.vidply-popup-settings-menu::after {
|
|
338
|
-
border-bottom:
|
|
339
|
-
border-left:
|
|
340
|
-
border-right:
|
|
338
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
339
|
+
border-left: 0.375rem solid transparent;
|
|
340
|
+
border-right: 0.375rem solid transparent;
|
|
341
341
|
bottom: 100%;
|
|
342
342
|
content: '';
|
|
343
343
|
height: 0;
|
|
344
|
-
left:
|
|
344
|
+
left: 0.5rem;
|
|
345
345
|
position: absolute;
|
|
346
346
|
width: 0;
|
|
347
347
|
}
|
|
348
348
|
|
|
349
349
|
.vidply-popup-settings-menu.vidply-menu-above::after {
|
|
350
350
|
border-bottom: none;
|
|
351
|
-
border-top:
|
|
351
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
352
352
|
bottom: auto;
|
|
353
353
|
top: 100%;
|
|
354
354
|
}
|
|
@@ -363,7 +363,7 @@
|
|
|
363
363
|
display: flex;
|
|
364
364
|
font-size: var(--vidply-font-base);
|
|
365
365
|
gap: var(--vidply-gap-md);
|
|
366
|
-
padding: var(--vidply-padding-md)
|
|
366
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
367
367
|
text-align: left;
|
|
368
368
|
transition: var(--vidply-transition-normal);
|
|
369
369
|
width: 100%;
|
|
@@ -406,7 +406,7 @@
|
|
|
406
406
|
display: flex;
|
|
407
407
|
flex-direction: column;
|
|
408
408
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
409
|
-
font-size:
|
|
409
|
+
font-size: 1rem;
|
|
410
410
|
line-height: 1.5;
|
|
411
411
|
max-width: 100%;
|
|
412
412
|
overflow: visible;
|
|
@@ -422,11 +422,11 @@
|
|
|
422
422
|
|
|
423
423
|
.vidply-player:focus-visible {
|
|
424
424
|
outline: var(--vidply-focus-outline-player);
|
|
425
|
-
outline-offset:
|
|
425
|
+
outline-offset: 0.25rem;
|
|
426
426
|
}
|
|
427
427
|
|
|
428
428
|
/* Mobile: Ensure player contains all elements properly */
|
|
429
|
-
@media (width <
|
|
429
|
+
@media (width < 48rem) {
|
|
430
430
|
.vidply-player {
|
|
431
431
|
isolation: isolate; /* Create stacking context */
|
|
432
432
|
overflow: visible; /* Allow menus to overflow but within bounds */
|
|
@@ -448,7 +448,7 @@
|
|
|
448
448
|
}
|
|
449
449
|
|
|
450
450
|
.vidply-player.vidply-audio .vidply-menu {
|
|
451
|
-
max-height:
|
|
451
|
+
max-height: 9.375rem;
|
|
452
452
|
}
|
|
453
453
|
|
|
454
454
|
/* Video/Audio Element */
|
|
@@ -461,7 +461,7 @@
|
|
|
461
461
|
}
|
|
462
462
|
|
|
463
463
|
/* Mobile: Video element order and sizing */
|
|
464
|
-
@media (width <
|
|
464
|
+
@media (width < 48rem) {
|
|
465
465
|
.vidply-player video,
|
|
466
466
|
.vidply-player audio {
|
|
467
467
|
flex: 0 0 auto; /* Don't grow or shrink */
|
|
@@ -495,7 +495,6 @@
|
|
|
495
495
|
background: linear-gradient(135deg, var(--vidply-black) 0%, #2a2a2a 100%);
|
|
496
496
|
height: 100%;
|
|
497
497
|
order: 1; /* First in flex order */
|
|
498
|
-
overflow: hidden;
|
|
499
498
|
position: relative;
|
|
500
499
|
width: 100%;
|
|
501
500
|
z-index: 1; /* Base video layer */
|
|
@@ -521,11 +520,11 @@
|
|
|
521
520
|
}
|
|
522
521
|
|
|
523
522
|
/* Mobile: Simplify video wrapper but keep captions contained */
|
|
524
|
-
@media (width <
|
|
523
|
+
@media (width < 48rem) {
|
|
525
524
|
.vidply-video-wrapper {
|
|
526
525
|
display: block;
|
|
527
526
|
height: auto;
|
|
528
|
-
min-height:
|
|
527
|
+
min-height: 12.5rem;
|
|
529
528
|
overflow: visible;
|
|
530
529
|
position: relative;
|
|
531
530
|
z-index: 2;
|
|
@@ -579,17 +578,19 @@
|
|
|
579
578
|
/* Centered Play Button Overlay */
|
|
580
579
|
.vidply-play-overlay {
|
|
581
580
|
cursor: pointer;
|
|
582
|
-
filter: drop-shadow(0
|
|
581
|
+
filter: drop-shadow(0 0.5rem 2rem rgb(0 0 0 / 30%));
|
|
583
582
|
left: 50%;
|
|
584
583
|
position: absolute;
|
|
585
584
|
top: 50%;
|
|
586
585
|
transform: translate(-50%, -50%);
|
|
587
586
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
588
587
|
z-index: var(--vidply-z-overlay);
|
|
588
|
+
border: 0.125rem solid var(--vidply-primary);
|
|
589
|
+
border-radius: 50%;
|
|
589
590
|
}
|
|
590
591
|
|
|
591
592
|
.vidply-play-overlay:hover {
|
|
592
|
-
filter: drop-shadow(0
|
|
593
|
+
filter: drop-shadow(0 0.75rem 3rem rgb(0 0 0 / 40%));
|
|
593
594
|
transform: translate(-50%, -50%) scale(1.1);
|
|
594
595
|
}
|
|
595
596
|
|
|
@@ -613,7 +614,7 @@
|
|
|
613
614
|
left: 0;
|
|
614
615
|
opacity: 0;
|
|
615
616
|
overflow: visible;
|
|
616
|
-
padding:
|
|
617
|
+
padding: 1.25rem 1rem 1rem;
|
|
617
618
|
pointer-events: none;
|
|
618
619
|
position: absolute;
|
|
619
620
|
right: 0;
|
|
@@ -637,15 +638,15 @@
|
|
|
637
638
|
}
|
|
638
639
|
|
|
639
640
|
/* Mobile: Controls underneath video (but not in landscape fullscreen) */
|
|
640
|
-
@media (width <
|
|
641
|
+
@media (width < 48rem) {
|
|
641
642
|
.vidply-controls {
|
|
642
643
|
background: var(--vidply-black-90);
|
|
643
|
-
border-top:
|
|
644
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
644
645
|
bottom: auto;
|
|
645
646
|
left: 0;
|
|
646
647
|
opacity: 1;
|
|
647
648
|
order: 2; /* After video-wrapper (1) */
|
|
648
|
-
padding:
|
|
649
|
+
padding: 0.75rem;
|
|
649
650
|
pointer-events: auto;
|
|
650
651
|
position: relative;
|
|
651
652
|
right: 0;
|
|
@@ -675,7 +676,7 @@
|
|
|
675
676
|
.vidply-progress-time-wrapper {
|
|
676
677
|
align-items: center;
|
|
677
678
|
display: flex;
|
|
678
|
-
gap:
|
|
679
|
+
gap: 1.25rem;
|
|
679
680
|
margin-bottom: var(--vidply-gap-lg);
|
|
680
681
|
width: 100%;
|
|
681
682
|
}
|
|
@@ -683,24 +684,25 @@
|
|
|
683
684
|
/* Progress Bar */
|
|
684
685
|
.vidply-progress-container {
|
|
685
686
|
background: var(--vidply-white-20);
|
|
686
|
-
border-radius:
|
|
687
|
+
border-radius: 0.1875rem;
|
|
687
688
|
cursor: pointer;
|
|
688
689
|
flex: 1;
|
|
689
|
-
height:
|
|
690
|
+
height: 0.5625rem;
|
|
691
|
+
margin-right: 0.5rem;
|
|
690
692
|
position: relative;
|
|
691
693
|
transition: height 0.2s ease;
|
|
692
694
|
}
|
|
693
695
|
|
|
694
696
|
.vidply-progress-container:hover,
|
|
695
697
|
.vidply-progress-container:focus {
|
|
696
|
-
height:
|
|
698
|
+
height: 0.6875rem;
|
|
697
699
|
outline: var(--vidply-focus-outline-white);
|
|
698
|
-
outline-offset:
|
|
700
|
+
outline-offset: 0.125rem;
|
|
699
701
|
}
|
|
700
702
|
|
|
701
703
|
.vidply-progress-buffered {
|
|
702
704
|
background: var(--vidply-white-40);
|
|
703
|
-
border-radius:
|
|
705
|
+
border-radius: 0.1875rem;
|
|
704
706
|
height: 100%;
|
|
705
707
|
left: 0;
|
|
706
708
|
position: absolute;
|
|
@@ -711,7 +713,7 @@
|
|
|
711
713
|
|
|
712
714
|
.vidply-progress-played {
|
|
713
715
|
background: var(--vidply-primary-light);
|
|
714
|
-
border-radius:
|
|
716
|
+
border-radius: 0.1875rem;
|
|
715
717
|
height: 100%;
|
|
716
718
|
left: 0;
|
|
717
719
|
position: absolute;
|
|
@@ -724,14 +726,14 @@
|
|
|
724
726
|
background: var(--vidply-white);
|
|
725
727
|
border-radius: 50%;
|
|
726
728
|
box-shadow: var(--vidply-shadow-sm);
|
|
727
|
-
height:
|
|
729
|
+
height: 0.9375rem;
|
|
728
730
|
opacity: 0;
|
|
729
731
|
position: absolute;
|
|
730
|
-
right: -
|
|
732
|
+
right: -0.375rem;
|
|
731
733
|
top: 50%;
|
|
732
734
|
transform: translateY(-50%);
|
|
733
735
|
transition: opacity 0.2s ease;
|
|
734
|
-
width:
|
|
736
|
+
width: 0.9375rem;
|
|
735
737
|
}
|
|
736
738
|
|
|
737
739
|
.vidply-progress-container:hover .vidply-progress-handle,
|
|
@@ -741,12 +743,12 @@
|
|
|
741
743
|
|
|
742
744
|
.vidply-progress-tooltip {
|
|
743
745
|
background: var(--vidply-black-90);
|
|
744
|
-
border-radius:
|
|
745
|
-
bottom:
|
|
746
|
+
border-radius: 0.25rem;
|
|
747
|
+
bottom: 0.75rem;
|
|
746
748
|
color: var(--vidply-white);
|
|
747
749
|
display: none;
|
|
748
|
-
font-size:
|
|
749
|
-
padding:
|
|
750
|
+
font-size: 0.75rem;
|
|
751
|
+
padding: 0.25rem 0.5rem;
|
|
750
752
|
pointer-events: none;
|
|
751
753
|
position: absolute;
|
|
752
754
|
transform: translateX(-50%);
|
|
@@ -782,7 +784,7 @@
|
|
|
782
784
|
cursor: pointer;
|
|
783
785
|
display: inline-flex;
|
|
784
786
|
justify-content: center;
|
|
785
|
-
margin:
|
|
787
|
+
margin: 0.0625rem;
|
|
786
788
|
min-height: var(--vidply-button-size);
|
|
787
789
|
min-width: var(--vidply-button-size);
|
|
788
790
|
padding: 0;
|
|
@@ -800,7 +802,7 @@
|
|
|
800
802
|
|
|
801
803
|
.vidply-button:focus {
|
|
802
804
|
outline: var(--vidply-focus-outline-white);
|
|
803
|
-
outline-offset:
|
|
805
|
+
outline-offset: 0.125rem;
|
|
804
806
|
}
|
|
805
807
|
|
|
806
808
|
.vidply-button:disabled {
|
|
@@ -808,6 +810,82 @@
|
|
|
808
810
|
opacity: 0.5;
|
|
809
811
|
}
|
|
810
812
|
|
|
813
|
+
/* Button text - hidden by default, visible when CSS is disabled */
|
|
814
|
+
.vidply-button-text {
|
|
815
|
+
display: none;
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
/* When CSS is disabled or unavailable, button text will be visible */
|
|
819
|
+
|
|
820
|
+
/* This ensures buttons are functional even without CSS */
|
|
821
|
+
|
|
822
|
+
/* Tooltip styles - aria-hidden popovers for sighted users */
|
|
823
|
+
.vidply-tooltip {
|
|
824
|
+
background: #e0e0e0;
|
|
825
|
+
border-radius: var(--vidply-radius-sm);
|
|
826
|
+
color: #000;
|
|
827
|
+
font-size: var(--vidply-font-xs);
|
|
828
|
+
left: 50%;
|
|
829
|
+
opacity: 0;
|
|
830
|
+
padding: 0.375rem 0.5rem;
|
|
831
|
+
pointer-events: none;
|
|
832
|
+
position: absolute;
|
|
833
|
+
top: calc(100% + 0.5rem);
|
|
834
|
+
transform: translateX(-50%) translateY(-0.25rem);
|
|
835
|
+
transition: opacity var(--vidply-transition-fast), transform var(--vidply-transition-fast);
|
|
836
|
+
white-space: nowrap;
|
|
837
|
+
z-index: calc(var(--vidply-z-menu) + 1);
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
.vidply-tooltip::before {
|
|
841
|
+
border-color: transparent transparent #e0e0e0;
|
|
842
|
+
border-style: solid;
|
|
843
|
+
border-width: 0 0.375rem 0.375rem;
|
|
844
|
+
content: '';
|
|
845
|
+
left: 50%;
|
|
846
|
+
position: absolute;
|
|
847
|
+
top: -0.375rem;
|
|
848
|
+
transform: translateX(-50%);
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
/* Show tooltip on hover/focus */
|
|
852
|
+
.vidply-tooltip-visible {
|
|
853
|
+
opacity: 1;
|
|
854
|
+
transform: translateX(-50%) translateY(0);
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
/* In fullscreen mode, position tooltips above buttons */
|
|
858
|
+
.vidply-player.vidply-fullscreen .vidply-tooltip,
|
|
859
|
+
.vidply-player:fullscreen .vidply-tooltip {
|
|
860
|
+
bottom: calc(100% + 0.5rem);
|
|
861
|
+
top: auto;
|
|
862
|
+
transform: translateX(-50%) translateY(0.25rem);
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
.vidply-player.vidply-fullscreen .vidply-tooltip-visible,
|
|
866
|
+
.vidply-player:fullscreen .vidply-tooltip-visible {
|
|
867
|
+
transform: translateX(-50%) translateY(0);
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
/* Adjust tooltip arrow for fullscreen (pointing down instead of up) */
|
|
871
|
+
.vidply-player.vidply-fullscreen .vidply-tooltip::before,
|
|
872
|
+
.vidply-player:fullscreen .vidply-tooltip::before {
|
|
873
|
+
border-color: #e0e0e0 transparent transparent;
|
|
874
|
+
border-width: 0.375rem 0.375rem 0;
|
|
875
|
+
bottom: -0.375rem;
|
|
876
|
+
top: auto;
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
/* Ensure buttons with tooltips are positioned relatively */
|
|
880
|
+
.vidply-button,
|
|
881
|
+
.vidply-icon-button,
|
|
882
|
+
.vidply-sign-language-settings,
|
|
883
|
+
.vidply-sign-language-close,
|
|
884
|
+
.vidply-transcript-settings,
|
|
885
|
+
.vidply-transcript-close {
|
|
886
|
+
position: relative;
|
|
887
|
+
}
|
|
888
|
+
|
|
811
889
|
/* Icons */
|
|
812
890
|
.vidply-icon {
|
|
813
891
|
display: inline-block;
|
|
@@ -826,10 +904,10 @@
|
|
|
826
904
|
@media (forced-colors: active) {
|
|
827
905
|
.vidply-controls button .vidply-icon svg {
|
|
828
906
|
background: Canvas;
|
|
829
|
-
border-radius:
|
|
907
|
+
border-radius: 0.1875rem;
|
|
830
908
|
color: CanvasText;
|
|
831
909
|
fill: currentcolor;
|
|
832
|
-
padding:
|
|
910
|
+
padding: 0.125rem;
|
|
833
911
|
}
|
|
834
912
|
|
|
835
913
|
.vidply-transcript-close .vidply-icon svg,
|
|
@@ -837,29 +915,29 @@
|
|
|
837
915
|
.vidply-sign-language-close .vidply-icon svg,
|
|
838
916
|
.vidply-sign-language-settings .vidply-icon svg {
|
|
839
917
|
background: Canvas;
|
|
840
|
-
border-radius:
|
|
918
|
+
border-radius: 0.125rem;
|
|
841
919
|
color: CanvasText;
|
|
842
920
|
fill: currentcolor;
|
|
843
|
-
padding:
|
|
921
|
+
padding: 0.125rem;
|
|
844
922
|
}
|
|
845
923
|
}
|
|
846
924
|
|
|
847
925
|
/* Volume Control */
|
|
848
926
|
.vidply-volume-slider {
|
|
849
927
|
background: var(--vidply-white-20);
|
|
850
|
-
border-radius:
|
|
928
|
+
border-radius: 0.1875rem;
|
|
851
929
|
cursor: pointer;
|
|
852
|
-
height:
|
|
930
|
+
height: 6.25rem;
|
|
853
931
|
margin: 0 auto;
|
|
854
|
-
padding: 0
|
|
932
|
+
padding: 0 0.3125rem; /* Add padding for larger touch target on mobile */
|
|
855
933
|
position: relative;
|
|
856
934
|
touch-action: none; /* Prevent scrolling while dragging */
|
|
857
|
-
width:
|
|
935
|
+
width: 0.375rem;
|
|
858
936
|
}
|
|
859
937
|
|
|
860
938
|
.vidply-volume-slider:focus {
|
|
861
939
|
outline: var(--vidply-focus-outline-white);
|
|
862
|
-
outline-offset:
|
|
940
|
+
outline-offset: 0.125rem;
|
|
863
941
|
}
|
|
864
942
|
|
|
865
943
|
.vidply-volume-track {
|
|
@@ -870,7 +948,7 @@
|
|
|
870
948
|
|
|
871
949
|
.vidply-volume-fill {
|
|
872
950
|
background: var(--vidply-primary-light);
|
|
873
|
-
border-radius:
|
|
951
|
+
border-radius: 0.125rem;
|
|
874
952
|
bottom: 0;
|
|
875
953
|
height: 80%;
|
|
876
954
|
left: 0;
|
|
@@ -883,12 +961,12 @@
|
|
|
883
961
|
background: var(--vidply-white);
|
|
884
962
|
border-radius: 50%;
|
|
885
963
|
box-shadow: var(--vidply-shadow-sm);
|
|
886
|
-
height:
|
|
964
|
+
height: 0.625rem;
|
|
887
965
|
left: 50%;
|
|
888
966
|
position: absolute;
|
|
889
|
-
top: -
|
|
967
|
+
top: -0.25rem;
|
|
890
968
|
transform: translateX(-50%);
|
|
891
|
-
width:
|
|
969
|
+
width: 0.625rem;
|
|
892
970
|
}
|
|
893
971
|
|
|
894
972
|
/* Time Display */
|
|
@@ -911,11 +989,11 @@
|
|
|
911
989
|
}
|
|
912
990
|
|
|
913
991
|
.vidply-speed-text {
|
|
914
|
-
height:
|
|
915
|
-
left: -
|
|
992
|
+
height: 0.0625rem;
|
|
993
|
+
left: -625rem;
|
|
916
994
|
overflow: hidden;
|
|
917
995
|
position: absolute;
|
|
918
|
-
width:
|
|
996
|
+
width: 0.0625rem;
|
|
919
997
|
}
|
|
920
998
|
|
|
921
999
|
/* Menu Backdrop (for mobile) */
|
|
@@ -936,7 +1014,7 @@
|
|
|
936
1014
|
}
|
|
937
1015
|
|
|
938
1016
|
/* Mobile: Don't use backdrop, menus position above buttons */
|
|
939
|
-
@media (width <
|
|
1017
|
+
@media (width < 48rem) {
|
|
940
1018
|
.vidply-menu-backdrop {
|
|
941
1019
|
display: none !important;
|
|
942
1020
|
}
|
|
@@ -954,18 +1032,18 @@
|
|
|
954
1032
|
|
|
955
1033
|
/* Menus */
|
|
956
1034
|
.vidply-menu {
|
|
957
|
-
backdrop-filter: blur(
|
|
1035
|
+
backdrop-filter: blur(0.625rem);
|
|
958
1036
|
background: var(--vidply-bg-menu);
|
|
959
|
-
border:
|
|
960
|
-
border-radius:
|
|
961
|
-
bottom: calc(100% +
|
|
962
|
-
box-shadow: var(--vidply-shadow-lg), 0 0 0
|
|
963
|
-
max-height:
|
|
964
|
-
min-width:
|
|
1037
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1038
|
+
border-radius: 0.5rem;
|
|
1039
|
+
bottom: calc(100% + 0.5rem);
|
|
1040
|
+
box-shadow: var(--vidply-shadow-lg), 0 0 0 0.0625rem var(--vidply-white-10);
|
|
1041
|
+
max-height: 15.625rem;
|
|
1042
|
+
min-width: 12.5rem;
|
|
965
1043
|
-webkit-overflow-scrolling: touch;
|
|
966
1044
|
overflow-x: hidden;
|
|
967
1045
|
overflow-y: auto;
|
|
968
|
-
padding:
|
|
1046
|
+
padding: 0.5rem 0;
|
|
969
1047
|
pointer-events: auto; /* Ensure menus are clickable/touchable */
|
|
970
1048
|
position: absolute;
|
|
971
1049
|
right: 50%;
|
|
@@ -976,10 +1054,10 @@
|
|
|
976
1054
|
|
|
977
1055
|
/* Menu positioned below button */
|
|
978
1056
|
.vidply-menu.vidply-menu-below::after {
|
|
979
|
-
border-bottom:
|
|
1057
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
980
1058
|
border-top: none;
|
|
981
1059
|
bottom: auto;
|
|
982
|
-
top: -
|
|
1060
|
+
top: -0.375rem;
|
|
983
1061
|
}
|
|
984
1062
|
|
|
985
1063
|
/* Volume menu popup - narrow and centered on button */
|
|
@@ -987,18 +1065,18 @@
|
|
|
987
1065
|
min-width: unset;
|
|
988
1066
|
overflow-x: hidden;
|
|
989
1067
|
overflow-y: hidden;
|
|
990
|
-
padding:
|
|
1068
|
+
padding: 1rem 0.75rem;
|
|
991
1069
|
pointer-events: auto; /* Ensure volume menu is touchable */
|
|
992
1070
|
right: 50%;
|
|
993
1071
|
transform: translateX(50%);
|
|
994
|
-
width:
|
|
1072
|
+
width: 2.1875rem;
|
|
995
1073
|
z-index: var(--vidply-z-menu-high); /* High z-index to appear above everything */
|
|
996
1074
|
}
|
|
997
1075
|
|
|
998
1076
|
/* For audio players, show menus below buttons */
|
|
999
1077
|
.vidply-player.vidply-audio .vidply-menu {
|
|
1000
1078
|
bottom: auto;
|
|
1001
|
-
top: calc(100% +
|
|
1079
|
+
top: calc(100% + 0.5rem);
|
|
1002
1080
|
}
|
|
1003
1081
|
|
|
1004
1082
|
.vidply-menu-item {
|
|
@@ -1026,8 +1104,8 @@
|
|
|
1026
1104
|
.vidply-menu-item:focus {
|
|
1027
1105
|
background: var(--vidply-primary-25);
|
|
1028
1106
|
color: var(--vidply-white);
|
|
1029
|
-
outline:
|
|
1030
|
-
outline-offset: -
|
|
1107
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
1108
|
+
outline-offset: -0.125rem;
|
|
1031
1109
|
}
|
|
1032
1110
|
|
|
1033
1111
|
.vidply-menu-item:active {
|
|
@@ -1053,8 +1131,8 @@
|
|
|
1053
1131
|
|
|
1054
1132
|
.vidply-menu-item-active .vidply-icon {
|
|
1055
1133
|
color: var(--vidply-primary-light);
|
|
1056
|
-
height:
|
|
1057
|
-
width:
|
|
1134
|
+
height: 1.25rem;
|
|
1135
|
+
width: 1.25rem;
|
|
1058
1136
|
}
|
|
1059
1137
|
|
|
1060
1138
|
.vidply-menu-item-with-value {
|
|
@@ -1068,13 +1146,13 @@
|
|
|
1068
1146
|
align-items: center;
|
|
1069
1147
|
display: flex;
|
|
1070
1148
|
flex: 1;
|
|
1071
|
-
gap:
|
|
1149
|
+
gap: 0.625rem;
|
|
1072
1150
|
}
|
|
1073
1151
|
|
|
1074
1152
|
.vidply-menu-item-label .vidply-icon {
|
|
1075
|
-
height:
|
|
1153
|
+
height: 1.5rem;
|
|
1076
1154
|
opacity: 0.9;
|
|
1077
|
-
width:
|
|
1155
|
+
width: 1.5rem;
|
|
1078
1156
|
}
|
|
1079
1157
|
|
|
1080
1158
|
.vidply-menu-item-value {
|
|
@@ -1083,7 +1161,7 @@
|
|
|
1083
1161
|
color: var(--vidply-text-muted);
|
|
1084
1162
|
font-size: var(--vidply-font-base);
|
|
1085
1163
|
font-weight: 500;
|
|
1086
|
-
padding:
|
|
1164
|
+
padding: 0.125rem var(--vidply-gap-md);
|
|
1087
1165
|
white-space: nowrap;
|
|
1088
1166
|
}
|
|
1089
1167
|
|
|
@@ -1096,7 +1174,7 @@
|
|
|
1096
1174
|
/* Overflow menu list - prevent overflow to the right */
|
|
1097
1175
|
.vidply-overflow-menu-list {
|
|
1098
1176
|
left: auto !important;
|
|
1099
|
-
max-width: calc(100vw -
|
|
1177
|
+
max-width: calc(100vw - 1.25rem);
|
|
1100
1178
|
right: 0 !important;
|
|
1101
1179
|
z-index: 1000; /* Ensure menu appears above all player elements including playlist */
|
|
1102
1180
|
|
|
@@ -1118,8 +1196,8 @@
|
|
|
1118
1196
|
|
|
1119
1197
|
/* SVG icons in overflow menu - proper sizing */
|
|
1120
1198
|
.vidply-overflow-menu-list .vidply-menu-item .vidply-icon svg {
|
|
1121
|
-
height:
|
|
1122
|
-
width:
|
|
1199
|
+
height: 1.125rem;
|
|
1200
|
+
width: 1.125rem;
|
|
1123
1201
|
}
|
|
1124
1202
|
|
|
1125
1203
|
/* Text icons (like "Aa" for caption styling) in overflow menu */
|
|
@@ -1147,7 +1225,7 @@
|
|
|
1147
1225
|
font-size: var(--vidply-font-base);
|
|
1148
1226
|
font-weight: 500;
|
|
1149
1227
|
margin-right: var(--vidply-gap-lg);
|
|
1150
|
-
min-width:
|
|
1228
|
+
min-width: 3.75rem;
|
|
1151
1229
|
}
|
|
1152
1230
|
|
|
1153
1231
|
.vidply-chapter-title {
|
|
@@ -1208,20 +1286,20 @@
|
|
|
1208
1286
|
.vidply-style-group input[type="color"]:focus {
|
|
1209
1287
|
border-color: var(--vidply-border-focus);
|
|
1210
1288
|
outline: var(--vidply-focus-outline-white);
|
|
1211
|
-
outline-offset:
|
|
1289
|
+
outline-offset: 0.125rem;
|
|
1212
1290
|
}
|
|
1213
1291
|
|
|
1214
1292
|
.vidply-style-group input[type="range"]::-webkit-slider-thumb {
|
|
1215
1293
|
-webkit-appearance: none;
|
|
1216
1294
|
appearance: none;
|
|
1217
1295
|
background: var(--vidply-primary);
|
|
1218
|
-
border:
|
|
1296
|
+
border: 0.125rem solid var(--vidply-white);
|
|
1219
1297
|
border-radius: 50%;
|
|
1220
1298
|
box-shadow: var(--vidply-shadow-sm);
|
|
1221
1299
|
cursor: pointer;
|
|
1222
|
-
height:
|
|
1300
|
+
height: 1rem;
|
|
1223
1301
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
1224
|
-
width:
|
|
1302
|
+
width: 1rem;
|
|
1225
1303
|
}
|
|
1226
1304
|
|
|
1227
1305
|
.vidply-style-group input[type="range"]::-webkit-slider-thumb:hover {
|
|
@@ -1231,13 +1309,13 @@
|
|
|
1231
1309
|
|
|
1232
1310
|
.vidply-style-group input[type="range"]::-moz-range-thumb {
|
|
1233
1311
|
background: var(--vidply-primary);
|
|
1234
|
-
border:
|
|
1312
|
+
border: 0.125rem solid var(--vidply-white);
|
|
1235
1313
|
border-radius: 50%;
|
|
1236
1314
|
box-shadow: var(--vidply-shadow-sm);
|
|
1237
1315
|
cursor: pointer;
|
|
1238
|
-
height:
|
|
1316
|
+
height: 1rem;
|
|
1239
1317
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
1240
|
-
width:
|
|
1318
|
+
width: 1rem;
|
|
1241
1319
|
}
|
|
1242
1320
|
|
|
1243
1321
|
.vidply-style-group input[type="range"]::-moz-range-thumb:hover {
|
|
@@ -1247,23 +1325,23 @@
|
|
|
1247
1325
|
|
|
1248
1326
|
.vidply-style-group input[type="range"]::-webkit-slider-runnable-track {
|
|
1249
1327
|
background: var(--vidply-white-20);
|
|
1250
|
-
border-radius:
|
|
1251
|
-
height:
|
|
1328
|
+
border-radius: 0.1875rem;
|
|
1329
|
+
height: 0.375rem;
|
|
1252
1330
|
width: 100%;
|
|
1253
1331
|
}
|
|
1254
1332
|
|
|
1255
1333
|
.vidply-style-group input[type="range"]::-moz-range-track {
|
|
1256
1334
|
background: var(--vidply-white-20);
|
|
1257
|
-
border-radius:
|
|
1258
|
-
height:
|
|
1335
|
+
border-radius: 0.1875rem;
|
|
1336
|
+
height: 0.375rem;
|
|
1259
1337
|
width: 100%;
|
|
1260
1338
|
}
|
|
1261
1339
|
|
|
1262
1340
|
/* Captions */
|
|
1263
1341
|
.vidply-captions {
|
|
1264
1342
|
background: var(--vidply-bg-caption);
|
|
1265
|
-
border-radius:
|
|
1266
|
-
bottom:
|
|
1343
|
+
border-radius: 0.25rem;
|
|
1344
|
+
bottom: 1rem;
|
|
1267
1345
|
color: var(--vidply-white);
|
|
1268
1346
|
display: none;
|
|
1269
1347
|
font-family: sans-serif;
|
|
@@ -1271,7 +1349,7 @@
|
|
|
1271
1349
|
left: 50%;
|
|
1272
1350
|
line-height: 1.4;
|
|
1273
1351
|
max-width: 90%;
|
|
1274
|
-
padding:
|
|
1352
|
+
padding: 0.5rem 1rem;
|
|
1275
1353
|
pointer-events: none;
|
|
1276
1354
|
position: absolute;
|
|
1277
1355
|
text-align: center;
|
|
@@ -1283,17 +1361,17 @@
|
|
|
1283
1361
|
/* Audio player: Display captions as readable transcript/lyrics */
|
|
1284
1362
|
.vidply-player.vidply-audio .vidply-captions {
|
|
1285
1363
|
background: var(--vidply-bg-transcript);
|
|
1286
|
-
border:
|
|
1287
|
-
border-radius:
|
|
1364
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1365
|
+
border-radius: 0.5rem;
|
|
1288
1366
|
bottom: auto;
|
|
1289
|
-
font-size:
|
|
1367
|
+
font-size: 1rem;
|
|
1290
1368
|
left: 0;
|
|
1291
1369
|
line-height: 1.6;
|
|
1292
|
-
max-height:
|
|
1370
|
+
max-height: 9.375rem;
|
|
1293
1371
|
max-width: 100%;
|
|
1294
|
-
min-width:
|
|
1372
|
+
min-width: 23.125rem;
|
|
1295
1373
|
overflow-y: auto;
|
|
1296
|
-
padding:
|
|
1374
|
+
padding: 1rem 1.25rem;
|
|
1297
1375
|
position: relative;
|
|
1298
1376
|
scroll-behavior: smooth;
|
|
1299
1377
|
text-align: left;
|
|
@@ -1305,16 +1383,16 @@
|
|
|
1305
1383
|
.vidply-player.vidply-audio .vidply-caption-cue {
|
|
1306
1384
|
background: transparent;
|
|
1307
1385
|
border-radius: 0;
|
|
1308
|
-
margin-bottom:
|
|
1309
|
-
padding:
|
|
1386
|
+
margin-bottom: 0.75rem;
|
|
1387
|
+
padding: 0.5rem 0;
|
|
1310
1388
|
}
|
|
1311
1389
|
|
|
1312
1390
|
/* Highlight active caption in audio player */
|
|
1313
1391
|
.vidply-player.vidply-audio .vidply-caption-cue.vidply-caption-active {
|
|
1314
1392
|
background: var(--vidply-primary-15);
|
|
1315
|
-
border-left:
|
|
1316
|
-
border-radius:
|
|
1317
|
-
padding:
|
|
1393
|
+
border-left: 0.1875rem solid var(--vidply-primary);
|
|
1394
|
+
border-radius: 0.25rem;
|
|
1395
|
+
padding: 0.5rem 0.75rem;
|
|
1318
1396
|
}
|
|
1319
1397
|
|
|
1320
1398
|
/* Smooth transitions for caption highlighting */
|
|
@@ -1327,14 +1405,14 @@
|
|
|
1327
1405
|
}
|
|
1328
1406
|
|
|
1329
1407
|
/* Desktop only: Move captions up when controls are visible */
|
|
1330
|
-
@media (width >=
|
|
1408
|
+
@media (width >= 48rem) {
|
|
1331
1409
|
.vidply-controls-visible .vidply-captions {
|
|
1332
|
-
bottom:
|
|
1410
|
+
bottom: 6rem;
|
|
1333
1411
|
}
|
|
1334
1412
|
}
|
|
1335
1413
|
|
|
1336
1414
|
/* Mobile: Caption positioning handled by JavaScript */
|
|
1337
|
-
@media (width <
|
|
1415
|
+
@media (width < 48rem) {
|
|
1338
1416
|
.vidply-captions {
|
|
1339
1417
|
/* Bottom position set dynamically by JS based on control height */
|
|
1340
1418
|
left: 50%;
|
|
@@ -1347,18 +1425,18 @@
|
|
|
1347
1425
|
|
|
1348
1426
|
/* Audio player captions on mobile - more compact */
|
|
1349
1427
|
.vidply-player.vidply-audio .vidply-captions {
|
|
1350
|
-
font-size:
|
|
1428
|
+
font-size: 0.875rem;
|
|
1351
1429
|
left: 0;
|
|
1352
|
-
max-height:
|
|
1353
|
-
min-width:
|
|
1354
|
-
padding:
|
|
1430
|
+
max-height: 7.5rem;
|
|
1431
|
+
min-width: 18.75rem;
|
|
1432
|
+
padding: 0.75rem 1rem;
|
|
1355
1433
|
position: relative;
|
|
1356
1434
|
transform: none;
|
|
1357
1435
|
width: 100%;
|
|
1358
1436
|
}
|
|
1359
1437
|
|
|
1360
1438
|
.vidply-player.vidply-audio .vidply-caption-cue {
|
|
1361
|
-
margin-bottom:
|
|
1439
|
+
margin-bottom: 0.5rem;
|
|
1362
1440
|
}
|
|
1363
1441
|
|
|
1364
1442
|
/* Make play overlay smaller and centered */
|
|
@@ -1379,7 +1457,7 @@
|
|
|
1379
1457
|
.vidply-settings-overlay {
|
|
1380
1458
|
align-items: center;
|
|
1381
1459
|
animation: vidply-fade-in 0.2s ease;
|
|
1382
|
-
backdrop-filter: blur(
|
|
1460
|
+
backdrop-filter: blur(0.5rem);
|
|
1383
1461
|
background: var(--vidply-bg-overlay);
|
|
1384
1462
|
bottom: 0;
|
|
1385
1463
|
display: flex;
|
|
@@ -1404,14 +1482,14 @@
|
|
|
1404
1482
|
.vidply-settings-dialog {
|
|
1405
1483
|
animation: vidply-slide-up 0.3s ease;
|
|
1406
1484
|
background: var(--vidply-bg-dialog);
|
|
1407
|
-
border:
|
|
1408
|
-
border-radius:
|
|
1485
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1486
|
+
border-radius: 0.75rem;
|
|
1409
1487
|
box-shadow: var(--vidply-shadow-lg);
|
|
1410
1488
|
max-height: 80%;
|
|
1411
|
-
max-width:
|
|
1489
|
+
max-width: 31.25rem;
|
|
1412
1490
|
-webkit-overflow-scrolling: touch;
|
|
1413
1491
|
overflow-y: auto;
|
|
1414
|
-
padding:
|
|
1492
|
+
padding: 1.5rem;
|
|
1415
1493
|
|
|
1416
1494
|
/* iOS momentum scrolling */
|
|
1417
1495
|
touch-action: pan-y;
|
|
@@ -1420,7 +1498,7 @@
|
|
|
1420
1498
|
|
|
1421
1499
|
@keyframes vidply-slide-up {
|
|
1422
1500
|
from {
|
|
1423
|
-
transform: translateY(
|
|
1501
|
+
transform: translateY(1.25rem);
|
|
1424
1502
|
opacity: 0;
|
|
1425
1503
|
}
|
|
1426
1504
|
|
|
@@ -1447,7 +1525,7 @@
|
|
|
1447
1525
|
.vidply-settings-close {
|
|
1448
1526
|
min-height: auto;
|
|
1449
1527
|
min-width: auto;
|
|
1450
|
-
padding:
|
|
1528
|
+
padding: 0.25rem;
|
|
1451
1529
|
}
|
|
1452
1530
|
|
|
1453
1531
|
.vidply-settings-content {
|
|
@@ -1480,7 +1558,7 @@
|
|
|
1480
1558
|
.vidply-settings-color,
|
|
1481
1559
|
.vidply-settings-range {
|
|
1482
1560
|
background: var(--vidply-white-10);
|
|
1483
|
-
border:
|
|
1561
|
+
border: 0.0625rem solid var(--vidply-white-20);
|
|
1484
1562
|
border-radius: var(--vidply-radius-md);
|
|
1485
1563
|
color: var(--vidply-white);
|
|
1486
1564
|
font-size: var(--vidply-font-md);
|
|
@@ -1507,7 +1585,7 @@
|
|
|
1507
1585
|
.vidply-settings-range:focus {
|
|
1508
1586
|
background: var(--vidply-white-15);
|
|
1509
1587
|
border-color: var(--vidply-border-focus);
|
|
1510
|
-
box-shadow: 0 0 0
|
|
1588
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
1511
1589
|
outline: none;
|
|
1512
1590
|
}
|
|
1513
1591
|
|
|
@@ -1521,12 +1599,12 @@
|
|
|
1521
1599
|
color: var(--vidply-text-muted);
|
|
1522
1600
|
display: inline-block;
|
|
1523
1601
|
font-size: var(--vidply-font-base);
|
|
1524
|
-
min-width:
|
|
1602
|
+
min-width: 2.5rem;
|
|
1525
1603
|
text-align: right;
|
|
1526
1604
|
}
|
|
1527
1605
|
|
|
1528
1606
|
.vidply-settings-footer {
|
|
1529
|
-
border-top:
|
|
1607
|
+
border-top: 0.0625rem solid var(--vidply-white-10);
|
|
1530
1608
|
display: flex;
|
|
1531
1609
|
justify-content: flex-end;
|
|
1532
1610
|
margin-top: var(--vidply-gap-xxl);
|
|
@@ -1537,7 +1615,7 @@
|
|
|
1537
1615
|
background: var(--vidply-white-10);
|
|
1538
1616
|
border-radius: var(--vidply-radius-md);
|
|
1539
1617
|
min-width: auto;
|
|
1540
|
-
padding:
|
|
1618
|
+
padding: 0.625rem var(--vidply-gap-xxl);
|
|
1541
1619
|
}
|
|
1542
1620
|
|
|
1543
1621
|
.vidply-settings-footer .vidply-button:hover {
|
|
@@ -1561,9 +1639,9 @@
|
|
|
1561
1639
|
right: 0;
|
|
1562
1640
|
top: 0;
|
|
1563
1641
|
z-index: 999999;
|
|
1642
|
+
|
|
1564
1643
|
/* Critical iOS fixes */
|
|
1565
1644
|
transform: translate3d(0, 0, 0);
|
|
1566
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
1567
1645
|
margin: 0 !important;
|
|
1568
1646
|
padding: 0 !important;
|
|
1569
1647
|
}
|
|
@@ -1598,7 +1676,7 @@
|
|
|
1598
1676
|
left: 0 !important;
|
|
1599
1677
|
opacity: 0 !important;
|
|
1600
1678
|
order: 0 !important;
|
|
1601
|
-
padding:
|
|
1679
|
+
padding: 1.25rem 1rem 1rem !important;
|
|
1602
1680
|
pointer-events: none !important;
|
|
1603
1681
|
position: absolute !important;
|
|
1604
1682
|
right: 0 !important;
|
|
@@ -1641,7 +1719,7 @@
|
|
|
1641
1719
|
.vidply-player:fullscreen .vidply-controls-right {
|
|
1642
1720
|
display: flex !important;
|
|
1643
1721
|
flex-wrap: nowrap !important;
|
|
1644
|
-
gap:
|
|
1722
|
+
gap: 0.5rem !important;
|
|
1645
1723
|
}
|
|
1646
1724
|
|
|
1647
1725
|
/* Make sure buttons within containers are visible */
|
|
@@ -1680,7 +1758,7 @@
|
|
|
1680
1758
|
align-items: center !important;
|
|
1681
1759
|
display: flex !important;
|
|
1682
1760
|
flex-direction: row !important;
|
|
1683
|
-
gap:
|
|
1761
|
+
gap: 0.625rem !important;
|
|
1684
1762
|
justify-content: flex-start !important;
|
|
1685
1763
|
}
|
|
1686
1764
|
|
|
@@ -1694,7 +1772,7 @@
|
|
|
1694
1772
|
/* Caption positioning in landscape fullscreen */
|
|
1695
1773
|
.vidply-player.vidply-fullscreen .vidply-captions,
|
|
1696
1774
|
.vidply-player:fullscreen .vidply-captions {
|
|
1697
|
-
bottom:
|
|
1775
|
+
bottom: 1rem !important;
|
|
1698
1776
|
transition: bottom 0.3s ease !important;
|
|
1699
1777
|
}
|
|
1700
1778
|
|
|
@@ -1703,7 +1781,7 @@
|
|
|
1703
1781
|
.vidply-player:fullscreen.vidply-controls-visible .vidply-captions,
|
|
1704
1782
|
.vidply-player.vidply-fullscreen.vidply-paused .vidply-captions,
|
|
1705
1783
|
.vidply-player:fullscreen.vidply-paused .vidply-captions {
|
|
1706
|
-
bottom:
|
|
1784
|
+
bottom: 6rem !important;
|
|
1707
1785
|
}
|
|
1708
1786
|
|
|
1709
1787
|
/* Center video in landscape fullscreen */
|
|
@@ -1784,7 +1862,7 @@
|
|
|
1784
1862
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
1785
1863
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
1786
1864
|
position: absolute !important; /* Absolute relative to player */
|
|
1787
|
-
bottom:
|
|
1865
|
+
bottom: 5rem !important; /* Above controls (typical control height is ~5rem) */
|
|
1788
1866
|
left: 0 !important;
|
|
1789
1867
|
right: 0 !important;
|
|
1790
1868
|
z-index: 15 !important; /* Above video (z-index:1), below controls (z-index:30) */
|
|
@@ -1795,26 +1873,26 @@
|
|
|
1795
1873
|
/* Transcript in Fullscreen */
|
|
1796
1874
|
.vidply-player.vidply-fullscreen .vidply-transcript-window,
|
|
1797
1875
|
.vidply-player:fullscreen .vidply-transcript-window {
|
|
1798
|
-
bottom:
|
|
1876
|
+
bottom: 5rem !important;
|
|
1799
1877
|
height: auto !important;
|
|
1800
1878
|
left: auto !important;
|
|
1801
|
-
max-height: calc(100vh -
|
|
1802
|
-
max-width:
|
|
1879
|
+
max-height: calc(100vh - 11.25rem) !important;
|
|
1880
|
+
max-width: 26.25rem;
|
|
1803
1881
|
position: fixed !important;
|
|
1804
|
-
right:
|
|
1882
|
+
right: 1.25rem !important;
|
|
1805
1883
|
top: auto !important;
|
|
1806
|
-
width:
|
|
1884
|
+
width: 26.25rem;
|
|
1807
1885
|
}
|
|
1808
1886
|
|
|
1809
1887
|
/* Loading State */
|
|
1810
1888
|
.vidply-loading {
|
|
1811
1889
|
display: none;
|
|
1812
|
-
height:
|
|
1890
|
+
height: 3.125rem;
|
|
1813
1891
|
left: 50%;
|
|
1814
1892
|
position: absolute;
|
|
1815
1893
|
top: 50%;
|
|
1816
1894
|
transform: translate(-50%, -50%);
|
|
1817
|
-
width:
|
|
1895
|
+
width: 3.125rem;
|
|
1818
1896
|
}
|
|
1819
1897
|
|
|
1820
1898
|
.vidply-player.vidply-buffering .vidply-loading {
|
|
@@ -1823,7 +1901,7 @@
|
|
|
1823
1901
|
|
|
1824
1902
|
.vidply-loading::after {
|
|
1825
1903
|
animation: vidply-spin 0.8s linear infinite;
|
|
1826
|
-
border:
|
|
1904
|
+
border: 0.25rem solid var(--vidply-white-20);
|
|
1827
1905
|
border-radius: 50%;
|
|
1828
1906
|
border-top-color: var(--vidply-white);
|
|
1829
1907
|
content: '';
|
|
@@ -1840,11 +1918,11 @@
|
|
|
1840
1918
|
|
|
1841
1919
|
/* Screen Reader Only */
|
|
1842
1920
|
.vidply-sr-only {
|
|
1843
|
-
height:
|
|
1844
|
-
left: -
|
|
1921
|
+
height: 0.0625rem;
|
|
1922
|
+
left: -625rem;
|
|
1845
1923
|
overflow: hidden;
|
|
1846
1924
|
position: absolute;
|
|
1847
|
-
width:
|
|
1925
|
+
width: 0.0625rem;
|
|
1848
1926
|
}
|
|
1849
1927
|
|
|
1850
1928
|
/* High Contrast Mode Support */
|
|
@@ -1854,7 +1932,7 @@
|
|
|
1854
1932
|
}
|
|
1855
1933
|
|
|
1856
1934
|
.vidply-button:focus {
|
|
1857
|
-
outline:
|
|
1935
|
+
outline: 0.1875rem solid;
|
|
1858
1936
|
}
|
|
1859
1937
|
|
|
1860
1938
|
.vidply-progress-played {
|
|
@@ -1873,17 +1951,10 @@
|
|
|
1873
1951
|
}
|
|
1874
1952
|
}
|
|
1875
1953
|
|
|
1876
|
-
/* Dark Mode (default) - additional contrast */
|
|
1877
|
-
@media (prefers-color-scheme: dark) {
|
|
1878
|
-
.vidply-settings-dialog {
|
|
1879
|
-
background: var(--vidply-bg-dialog-dark);
|
|
1880
|
-
}
|
|
1881
|
-
}
|
|
1882
|
-
|
|
1883
1954
|
/* Responsive Breakpoints */
|
|
1884
|
-
@media (width <
|
|
1955
|
+
@media (width < 48rem) {
|
|
1885
1956
|
.vidply-controls {
|
|
1886
|
-
padding:
|
|
1957
|
+
padding: 1rem 0.75rem 0.75rem;
|
|
1887
1958
|
}
|
|
1888
1959
|
|
|
1889
1960
|
.vidply-time {
|
|
@@ -1896,12 +1967,12 @@
|
|
|
1896
1967
|
|
|
1897
1968
|
.vidply-settings-dialog {
|
|
1898
1969
|
animation: slideUpFromBottom 0.3s ease;
|
|
1899
|
-
border-radius:
|
|
1970
|
+
border-radius: 1rem 1rem 0 0;
|
|
1900
1971
|
bottom: 0;
|
|
1901
1972
|
margin: 0;
|
|
1902
1973
|
max-height: 90vh;
|
|
1903
1974
|
max-width: 100%;
|
|
1904
|
-
padding:
|
|
1975
|
+
padding: 1.25rem;
|
|
1905
1976
|
position: fixed;
|
|
1906
1977
|
top: auto;
|
|
1907
1978
|
width: 100%;
|
|
@@ -1913,11 +1984,11 @@
|
|
|
1913
1984
|
|
|
1914
1985
|
/* Bottom sheet style for menus - positioned within controls */
|
|
1915
1986
|
.vidply-menu {
|
|
1916
|
-
border-radius:
|
|
1917
|
-
bottom: calc(100% +
|
|
1987
|
+
border-radius: 0.5rem;
|
|
1988
|
+
bottom: calc(100% + 0.25rem);
|
|
1918
1989
|
left: 50%;
|
|
1919
|
-
max-height:
|
|
1920
|
-
min-width:
|
|
1990
|
+
max-height: 15.625rem;
|
|
1991
|
+
min-width: 12.5rem;
|
|
1921
1992
|
position: absolute;
|
|
1922
1993
|
right: auto;
|
|
1923
1994
|
top: auto;
|
|
@@ -1929,7 +2000,7 @@
|
|
|
1929
2000
|
/* Volume menu should stay narrow - positioning handled by JS */
|
|
1930
2001
|
.vidply-volume-menu {
|
|
1931
2002
|
min-width: unset !important;
|
|
1932
|
-
width:
|
|
2003
|
+
width: 3.125rem !important;
|
|
1933
2004
|
}
|
|
1934
2005
|
|
|
1935
2006
|
/* Remove the drag handle on mobile menus */
|
|
@@ -1940,33 +2011,33 @@
|
|
|
1940
2011
|
/* Caption style menu - narrower on mobile */
|
|
1941
2012
|
.vidply-caption-style-menu.vidply-settings-menu {
|
|
1942
2013
|
left: 50%;
|
|
1943
|
-
max-width: calc(100vw -
|
|
1944
|
-
min-width:
|
|
1945
|
-
padding:
|
|
2014
|
+
max-width: calc(100vw - 2.5rem);
|
|
2015
|
+
min-width: 17.5rem;
|
|
2016
|
+
padding: 1rem;
|
|
1946
2017
|
transform: translateX(-50%);
|
|
1947
2018
|
width: auto;
|
|
1948
2019
|
}
|
|
1949
2020
|
|
|
1950
2021
|
.vidply-style-group {
|
|
1951
|
-
margin-bottom:
|
|
2022
|
+
margin-bottom: 1.25rem;
|
|
1952
2023
|
}
|
|
1953
2024
|
|
|
1954
2025
|
.vidply-style-group label {
|
|
1955
|
-
font-size:
|
|
1956
|
-
margin-bottom:
|
|
2026
|
+
font-size: 0.875rem;
|
|
2027
|
+
margin-bottom: 0.5rem;
|
|
1957
2028
|
}
|
|
1958
2029
|
|
|
1959
2030
|
.vidply-style-select,
|
|
1960
2031
|
.vidply-style-group input[type="color"] {
|
|
1961
|
-
font-size:
|
|
1962
|
-
padding:
|
|
2032
|
+
font-size: 1rem;
|
|
2033
|
+
padding: 0.75rem;
|
|
1963
2034
|
}
|
|
1964
2035
|
|
|
1965
2036
|
/* Keep controls in one horizontal row on mobile */
|
|
1966
2037
|
.vidply-controls-buttons {
|
|
1967
2038
|
flex-direction: row;
|
|
1968
2039
|
flex-wrap: nowrap;
|
|
1969
|
-
gap:
|
|
2040
|
+
gap: 0.5rem;
|
|
1970
2041
|
width: 100%;
|
|
1971
2042
|
}
|
|
1972
2043
|
|
|
@@ -1981,7 +2052,7 @@
|
|
|
1981
2052
|
.vidply-button {
|
|
1982
2053
|
min-height: var(--vidply-button-size-mobile);
|
|
1983
2054
|
min-width: var(--vidply-button-size-mobile);
|
|
1984
|
-
padding:
|
|
2055
|
+
padding: 0.3125rem;
|
|
1985
2056
|
}
|
|
1986
2057
|
|
|
1987
2058
|
.vidply-icon {
|
|
@@ -2003,7 +2074,7 @@
|
|
|
2003
2074
|
}
|
|
2004
2075
|
|
|
2005
2076
|
/* Landscape mobile optimization */
|
|
2006
|
-
@media (width <=
|
|
2077
|
+
@media (width <= 56rem) and (orientation: landscape) {
|
|
2007
2078
|
.vidply-menu {
|
|
2008
2079
|
max-height: 50vh;
|
|
2009
2080
|
}
|
|
@@ -2019,9 +2090,9 @@
|
|
|
2019
2090
|
/* Landscape fullscreen playlist - horizontal scrolling */
|
|
2020
2091
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2021
2092
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2022
|
-
bottom:
|
|
2093
|
+
bottom: 4.375rem; /* Directly above controls */
|
|
2023
2094
|
max-height: 30vh; /* Less height in landscape */
|
|
2024
|
-
padding:
|
|
2095
|
+
padding: 0.625rem 0;
|
|
2025
2096
|
overflow-y: hidden;
|
|
2026
2097
|
overflow-x: auto;
|
|
2027
2098
|
touch-action: pan-x; /* Allow horizontal scrolling on touch devices */
|
|
@@ -2033,16 +2104,16 @@
|
|
|
2033
2104
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2034
2105
|
flex-direction: row;
|
|
2035
2106
|
flex-wrap: nowrap;
|
|
2036
|
-
gap:
|
|
2037
|
-
padding: 0
|
|
2107
|
+
gap: 0.5rem;
|
|
2108
|
+
padding: 0 0.625rem;
|
|
2038
2109
|
}
|
|
2039
2110
|
|
|
2040
2111
|
/* Landscape items - smaller vertical cards */
|
|
2041
2112
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2042
2113
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2043
|
-
width:
|
|
2044
|
-
min-width:
|
|
2045
|
-
max-width:
|
|
2114
|
+
width: 11.25rem;
|
|
2115
|
+
min-width: 11.25rem;
|
|
2116
|
+
max-width: 11.25rem;
|
|
2046
2117
|
flex-shrink: 0;
|
|
2047
2118
|
}
|
|
2048
2119
|
|
|
@@ -2055,26 +2126,26 @@
|
|
|
2055
2126
|
|
|
2056
2127
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2057
2128
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2058
|
-
height:
|
|
2129
|
+
height: 6.25rem;
|
|
2059
2130
|
width: 100%;
|
|
2060
|
-
border-radius:
|
|
2131
|
+
border-radius: 0.5rem 0.5rem 0 0;
|
|
2061
2132
|
}
|
|
2062
2133
|
|
|
2063
2134
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2064
2135
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2065
|
-
padding:
|
|
2136
|
+
padding: 0.5rem;
|
|
2066
2137
|
}
|
|
2067
2138
|
|
|
2068
2139
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2069
2140
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2070
|
-
padding: 0
|
|
2071
|
-
font-size:
|
|
2141
|
+
padding: 0 0.625rem 0.5rem;
|
|
2142
|
+
font-size: 0.6875rem;
|
|
2072
2143
|
flex-shrink: 0;
|
|
2073
2144
|
}
|
|
2074
2145
|
}
|
|
2075
2146
|
|
|
2076
2147
|
/* Extra small screens */
|
|
2077
|
-
@media (width <=
|
|
2148
|
+
@media (width <= 30rem) {
|
|
2078
2149
|
.vidply-speed-text {
|
|
2079
2150
|
display: none;
|
|
2080
2151
|
}
|
|
@@ -2102,7 +2173,7 @@
|
|
|
2102
2173
|
.vidply-player [role="link"]:hover,
|
|
2103
2174
|
.vidply-player [tabindex]:not([tabindex="-1"]):hover {
|
|
2104
2175
|
outline: var(--vidply-focus-outline-white);
|
|
2105
|
-
outline-offset:
|
|
2176
|
+
outline-offset: 0.125rem;
|
|
2106
2177
|
}
|
|
2107
2178
|
|
|
2108
2179
|
/* Print Styles */
|
|
@@ -2117,6 +2188,7 @@
|
|
|
2117
2188
|
============================================================================ */
|
|
2118
2189
|
|
|
2119
2190
|
/* Track Info Display (below video, above playlist) */
|
|
2191
|
+
|
|
2120
2192
|
/* Track Artwork - Displays album art/poster above audio player */
|
|
2121
2193
|
.vidply-track-artwork {
|
|
2122
2194
|
aspect-ratio: 16 / 3;
|
|
@@ -2124,7 +2196,7 @@
|
|
|
2124
2196
|
background-position: center;
|
|
2125
2197
|
background-repeat: no-repeat;
|
|
2126
2198
|
background-size: cover;
|
|
2127
|
-
border-bottom:
|
|
2199
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2128
2200
|
order: 1; /* Before video-wrapper */
|
|
2129
2201
|
overflow: hidden;
|
|
2130
2202
|
position: relative;
|
|
@@ -2146,38 +2218,64 @@
|
|
|
2146
2218
|
|
|
2147
2219
|
.vidply-track-info {
|
|
2148
2220
|
background: var(--vidply-bg-track-info);
|
|
2149
|
-
border-bottom:
|
|
2221
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2150
2222
|
order: 2; /* After video-wrapper */
|
|
2151
|
-
padding:
|
|
2223
|
+
padding: 1rem 1.25rem;
|
|
2224
|
+
}
|
|
2225
|
+
|
|
2226
|
+
/* Track header - contains track number and duration */
|
|
2227
|
+
.vidply-track-header {
|
|
2228
|
+
align-items: center;
|
|
2229
|
+
display: flex;
|
|
2230
|
+
gap: 0.75rem;
|
|
2231
|
+
justify-content: space-between;
|
|
2232
|
+
margin-bottom: 0.25rem;
|
|
2152
2233
|
}
|
|
2153
2234
|
|
|
2154
2235
|
.vidply-track-number {
|
|
2155
2236
|
color: var(--vidply-text-muted);
|
|
2156
|
-
font-size:
|
|
2157
|
-
letter-spacing: 0.
|
|
2158
|
-
margin-bottom: 4px;
|
|
2237
|
+
font-size: 0.75rem;
|
|
2238
|
+
letter-spacing: 0.0313rem;
|
|
2159
2239
|
text-transform: uppercase;
|
|
2160
2240
|
}
|
|
2161
2241
|
|
|
2242
|
+
/* Duration in track info display */
|
|
2243
|
+
.vidply-track-duration {
|
|
2244
|
+
color: var(--vidply-text-muted);
|
|
2245
|
+
font-size: 0.75rem;
|
|
2246
|
+
font-variant-numeric: tabular-nums;
|
|
2247
|
+
}
|
|
2248
|
+
|
|
2162
2249
|
.vidply-track-title {
|
|
2163
2250
|
color: var(--vidply-white);
|
|
2164
|
-
font-size:
|
|
2251
|
+
font-size: 1.125rem;
|
|
2165
2252
|
font-weight: 600;
|
|
2166
|
-
margin-bottom:
|
|
2253
|
+
margin-bottom: 0.25rem;
|
|
2167
2254
|
}
|
|
2168
2255
|
|
|
2169
2256
|
.vidply-track-artist {
|
|
2170
2257
|
color: var(--vidply-white-80);
|
|
2171
|
-
font-size:
|
|
2258
|
+
font-size: 0.875rem;
|
|
2259
|
+
}
|
|
2260
|
+
|
|
2261
|
+
.vidply-track-description {
|
|
2262
|
+
color: var(--vidply-white-60);
|
|
2263
|
+
font-size: 0.8125rem;
|
|
2264
|
+
line-height: 1.4;
|
|
2265
|
+
margin-top: 0.5rem;
|
|
2266
|
+
max-height: 3.5em;
|
|
2267
|
+
overflow: hidden;
|
|
2268
|
+
display: -webkit-box;
|
|
2269
|
+
-webkit-line-clamp: 2;
|
|
2270
|
+
-webkit-box-orient: vertical;
|
|
2172
2271
|
}
|
|
2173
2272
|
|
|
2174
2273
|
/* Playlist Panel */
|
|
2175
2274
|
.vidply-playlist-panel {
|
|
2176
2275
|
background: var(--vidply-bg-playlist);
|
|
2177
|
-
border-top:
|
|
2178
|
-
max-height:
|
|
2276
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
2277
|
+
max-height: 25rem;
|
|
2179
2278
|
transform: translate3d(0, 0, 0);
|
|
2180
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
2181
2279
|
order: 3; /* After track info */
|
|
2182
2280
|
-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
|
|
2183
2281
|
overflow-y: auto;
|
|
@@ -2191,10 +2289,10 @@
|
|
|
2191
2289
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2192
2290
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2193
2291
|
background: linear-gradient(to top, rgb(0 0 0 / 95%) 0%, rgb(0 0 0 / 90%) 100%);
|
|
2194
|
-
backdrop-filter: blur(
|
|
2292
|
+
backdrop-filter: blur(0.625rem);
|
|
2195
2293
|
border: none;
|
|
2196
|
-
border-top:
|
|
2197
|
-
bottom:
|
|
2294
|
+
border-top: 0.0625rem solid var(--vidply-border);
|
|
2295
|
+
bottom: 5rem; /* Directly above controls */
|
|
2198
2296
|
left: 0;
|
|
2199
2297
|
max-height: 50vh; /* Take up to half the screen */
|
|
2200
2298
|
opacity: 0;
|
|
@@ -2204,7 +2302,7 @@
|
|
|
2204
2302
|
position: absolute !important; /* Force absolute positioning over video */
|
|
2205
2303
|
right: 0;
|
|
2206
2304
|
touch-action: pan-y; /* Allow vertical scrolling on touch devices */
|
|
2207
|
-
transform: translateY(
|
|
2305
|
+
transform: translateY(1.25rem);
|
|
2208
2306
|
z-index: var(--vidply-z-playlist); /* Above video but below controls */
|
|
2209
2307
|
}
|
|
2210
2308
|
|
|
@@ -2232,8 +2330,8 @@
|
|
|
2232
2330
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2233
2331
|
display: flex;
|
|
2234
2332
|
flex-direction: row;
|
|
2235
|
-
gap:
|
|
2236
|
-
padding:
|
|
2333
|
+
gap: 0.75rem;
|
|
2334
|
+
padding: 0.5rem 1rem;
|
|
2237
2335
|
overflow-x: auto;
|
|
2238
2336
|
overflow-y: hidden;
|
|
2239
2337
|
scroll-snap-type: x mandatory;
|
|
@@ -2244,17 +2342,17 @@
|
|
|
2244
2342
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2245
2343
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2246
2344
|
background: var(--vidply-black-50);
|
|
2247
|
-
border-bottom:
|
|
2248
|
-
font-size:
|
|
2249
|
-
padding:
|
|
2345
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
2346
|
+
font-size: 0.75rem;
|
|
2347
|
+
padding: 0.625rem 1rem;
|
|
2250
2348
|
}
|
|
2251
2349
|
|
|
2252
2350
|
/* Fullscreen playlist items - horizontal card style */
|
|
2253
2351
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2254
2352
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2255
2353
|
flex: 0 0 auto;
|
|
2256
|
-
min-width:
|
|
2257
|
-
max-width:
|
|
2354
|
+
min-width: 17.5rem;
|
|
2355
|
+
max-width: 20rem;
|
|
2258
2356
|
scroll-snap-align: start;
|
|
2259
2357
|
}
|
|
2260
2358
|
|
|
@@ -2262,10 +2360,10 @@
|
|
|
2262
2360
|
.vidply-player:fullscreen .vidply-playlist-item-button {
|
|
2263
2361
|
flex-direction: column;
|
|
2264
2362
|
align-items: stretch;
|
|
2265
|
-
gap:
|
|
2363
|
+
gap: 0.5rem;
|
|
2266
2364
|
padding: 0;
|
|
2267
2365
|
background: var(--vidply-black-40);
|
|
2268
|
-
border-radius:
|
|
2366
|
+
border-radius: 0.5rem;
|
|
2269
2367
|
overflow: hidden;
|
|
2270
2368
|
transition: all 0.2s ease;
|
|
2271
2369
|
}
|
|
@@ -2273,27 +2371,49 @@
|
|
|
2273
2371
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-button:hover,
|
|
2274
2372
|
.vidply-player:fullscreen .vidply-playlist-item-button:hover {
|
|
2275
2373
|
background: var(--vidply-white-10);
|
|
2276
|
-
transform: translateY(-
|
|
2277
|
-
box-shadow: 0
|
|
2374
|
+
transform: translateY(-0.25rem);
|
|
2375
|
+
box-shadow: 0 0.5rem 1.5rem var(--vidply-black-60);
|
|
2376
|
+
}
|
|
2377
|
+
|
|
2378
|
+
/* Fullscreen thumbnail container - takes full width of card */
|
|
2379
|
+
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail-container,
|
|
2380
|
+
.vidply-player:fullscreen .vidply-playlist-thumbnail-container {
|
|
2381
|
+
position: relative;
|
|
2382
|
+
width: 100%;
|
|
2278
2383
|
}
|
|
2279
2384
|
|
|
2280
2385
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2281
2386
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2282
2387
|
width: 100%;
|
|
2283
|
-
height:
|
|
2388
|
+
height: 10rem;
|
|
2284
2389
|
border-radius: 0;
|
|
2285
2390
|
}
|
|
2286
2391
|
|
|
2392
|
+
/* Larger duration badge in fullscreen for better visibility */
|
|
2393
|
+
.vidply-player.vidply-fullscreen .vidply-playlist-duration-badge,
|
|
2394
|
+
.vidply-player:fullscreen .vidply-playlist-duration-badge {
|
|
2395
|
+
bottom: 0.375rem;
|
|
2396
|
+
font-size: 0.75rem;
|
|
2397
|
+
padding: 0.1875rem 0.375rem;
|
|
2398
|
+
right: 0.375rem;
|
|
2399
|
+
}
|
|
2400
|
+
|
|
2287
2401
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2288
2402
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2289
|
-
padding:
|
|
2403
|
+
padding: 0.75rem;
|
|
2404
|
+
}
|
|
2405
|
+
|
|
2406
|
+
/* Hide description in fullscreen to save space */
|
|
2407
|
+
.vidply-player.vidply-fullscreen .vidply-playlist-item-description,
|
|
2408
|
+
.vidply-player:fullscreen .vidply-playlist-item-description {
|
|
2409
|
+
display: none;
|
|
2290
2410
|
}
|
|
2291
2411
|
|
|
2292
2412
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-title,
|
|
2293
2413
|
.vidply-player:fullscreen .vidply-playlist-item-title {
|
|
2294
|
-
font-size:
|
|
2414
|
+
font-size: 0.875rem;
|
|
2295
2415
|
font-weight: 600;
|
|
2296
|
-
margin-bottom:
|
|
2416
|
+
margin-bottom: 0.25rem;
|
|
2297
2417
|
white-space: normal;
|
|
2298
2418
|
overflow: hidden;
|
|
2299
2419
|
text-overflow: ellipsis;
|
|
@@ -2304,7 +2424,7 @@
|
|
|
2304
2424
|
|
|
2305
2425
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-artist,
|
|
2306
2426
|
.vidply-player:fullscreen .vidply-playlist-item-artist {
|
|
2307
|
-
font-size:
|
|
2427
|
+
font-size: 0.75rem;
|
|
2308
2428
|
opacity: 0.8;
|
|
2309
2429
|
}
|
|
2310
2430
|
|
|
@@ -2316,8 +2436,8 @@
|
|
|
2316
2436
|
/* Fullscreen playlist scrollbar styling - horizontal */
|
|
2317
2437
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar,
|
|
2318
2438
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar {
|
|
2319
|
-
height:
|
|
2320
|
-
width:
|
|
2439
|
+
height: 0.5rem;
|
|
2440
|
+
width: 0.625rem;
|
|
2321
2441
|
}
|
|
2322
2442
|
|
|
2323
2443
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-track,
|
|
@@ -2328,7 +2448,7 @@
|
|
|
2328
2448
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb,
|
|
2329
2449
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2330
2450
|
background: var(--vidply-white-30);
|
|
2331
|
-
border-radius:
|
|
2451
|
+
border-radius: 0.3125rem;
|
|
2332
2452
|
}
|
|
2333
2453
|
|
|
2334
2454
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb:hover,
|
|
@@ -2339,7 +2459,7 @@
|
|
|
2339
2459
|
/* Horizontal scrollbar for playlist list */
|
|
2340
2460
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar,
|
|
2341
2461
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar {
|
|
2342
|
-
height:
|
|
2462
|
+
height: 0.375rem;
|
|
2343
2463
|
}
|
|
2344
2464
|
|
|
2345
2465
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-track,
|
|
@@ -2350,7 +2470,7 @@
|
|
|
2350
2470
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb,
|
|
2351
2471
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb {
|
|
2352
2472
|
background: var(--vidply-white-20);
|
|
2353
|
-
border-radius:
|
|
2473
|
+
border-radius: 0.1875rem;
|
|
2354
2474
|
}
|
|
2355
2475
|
|
|
2356
2476
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb:hover,
|
|
@@ -2367,7 +2487,7 @@
|
|
|
2367
2487
|
/* Active item styling in fullscreen */
|
|
2368
2488
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-active .vidply-playlist-item-button,
|
|
2369
2489
|
.vidply-player:fullscreen .vidply-playlist-item-active .vidply-playlist-item-button {
|
|
2370
|
-
border:
|
|
2490
|
+
border: 0.125rem solid var(--vidply-primary-light);
|
|
2371
2491
|
background: var(--vidply-primary-15);
|
|
2372
2492
|
}
|
|
2373
2493
|
|
|
@@ -2378,12 +2498,12 @@
|
|
|
2378
2498
|
|
|
2379
2499
|
.vidply-playlist-header {
|
|
2380
2500
|
background: var(--vidply-bg-playlist-header);
|
|
2381
|
-
border-bottom:
|
|
2501
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2382
2502
|
color: var(--vidply-white-90);
|
|
2383
|
-
font-size:
|
|
2503
|
+
font-size: 0.8125rem;
|
|
2384
2504
|
font-weight: 600;
|
|
2385
|
-
letter-spacing: 0.
|
|
2386
|
-
padding:
|
|
2505
|
+
letter-spacing: 0.0313rem;
|
|
2506
|
+
padding: 0.75rem 1rem;
|
|
2387
2507
|
position: sticky;
|
|
2388
2508
|
text-transform: uppercase;
|
|
2389
2509
|
top: 0;
|
|
@@ -2393,12 +2513,12 @@
|
|
|
2393
2513
|
.vidply-playlist-list {
|
|
2394
2514
|
list-style: none;
|
|
2395
2515
|
margin: 0;
|
|
2396
|
-
padding:
|
|
2516
|
+
padding: 0.25rem 0;
|
|
2397
2517
|
}
|
|
2398
2518
|
|
|
2399
2519
|
/* Playlist Items */
|
|
2400
2520
|
.vidply-playlist-item {
|
|
2401
|
-
border-left:
|
|
2521
|
+
border-left: 0.1875rem solid transparent;
|
|
2402
2522
|
position: relative;
|
|
2403
2523
|
}
|
|
2404
2524
|
|
|
@@ -2411,8 +2531,8 @@
|
|
|
2411
2531
|
cursor: pointer;
|
|
2412
2532
|
display: flex;
|
|
2413
2533
|
font: inherit;
|
|
2414
|
-
gap:
|
|
2415
|
-
padding:
|
|
2534
|
+
gap: 0.75rem;
|
|
2535
|
+
padding: 0.75rem 1rem;
|
|
2416
2536
|
text-align: left;
|
|
2417
2537
|
transition: var(--vidply-transition-default);
|
|
2418
2538
|
width: 100%;
|
|
@@ -2434,7 +2554,7 @@
|
|
|
2434
2554
|
.vidply-playlist-item-button:focus-visible {
|
|
2435
2555
|
background: var(--vidply-white-08);
|
|
2436
2556
|
outline: var(--vidply-focus-outline-white);
|
|
2437
|
-
outline-offset: -
|
|
2557
|
+
outline-offset: -0.125rem;
|
|
2438
2558
|
z-index: 1;
|
|
2439
2559
|
}
|
|
2440
2560
|
|
|
@@ -2449,19 +2569,19 @@
|
|
|
2449
2569
|
background: var(--vidply-primary-20);
|
|
2450
2570
|
border-left-color: var(--vidply-primary);
|
|
2451
2571
|
outline: var(--vidply-focus-outline-white);
|
|
2452
|
-
outline-offset: -
|
|
2572
|
+
outline-offset: -0.125rem;
|
|
2453
2573
|
z-index: 2;
|
|
2454
2574
|
}
|
|
2455
2575
|
|
|
2456
2576
|
/* Show focus ring on listbox when focused */
|
|
2457
2577
|
.vidply-playlist-list:focus {
|
|
2458
|
-
outline:
|
|
2459
|
-
outline-offset:
|
|
2578
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2579
|
+
outline-offset: 0.125rem;
|
|
2460
2580
|
}
|
|
2461
2581
|
|
|
2462
2582
|
.vidply-playlist-list:focus-visible {
|
|
2463
|
-
outline:
|
|
2464
|
-
outline-offset:
|
|
2583
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2584
|
+
outline-offset: 0.125rem;
|
|
2465
2585
|
}
|
|
2466
2586
|
|
|
2467
2587
|
.vidply-playlist-item-active {
|
|
@@ -2484,7 +2604,13 @@
|
|
|
2484
2604
|
.vidply-playlist-item-active .vidply-playlist-item-button:focus-visible {
|
|
2485
2605
|
background: var(--vidply-primary-20);
|
|
2486
2606
|
outline: var(--vidply-focus-outline-white);
|
|
2487
|
-
outline-offset: -
|
|
2607
|
+
outline-offset: -0.125rem;
|
|
2608
|
+
}
|
|
2609
|
+
|
|
2610
|
+
/* Playlist Thumbnail Container (wrapper for thumbnail + duration badge) */
|
|
2611
|
+
.vidply-playlist-thumbnail-container {
|
|
2612
|
+
flex-shrink: 0;
|
|
2613
|
+
position: relative;
|
|
2488
2614
|
}
|
|
2489
2615
|
|
|
2490
2616
|
/* Playlist Thumbnail */
|
|
@@ -2493,20 +2619,20 @@
|
|
|
2493
2619
|
background-color: var(--vidply-white-10);
|
|
2494
2620
|
background-position: center;
|
|
2495
2621
|
background-size: cover;
|
|
2496
|
-
border-radius:
|
|
2622
|
+
border-radius: 0.25rem;
|
|
2497
2623
|
display: flex;
|
|
2498
2624
|
flex-shrink: 0;
|
|
2499
|
-
height:
|
|
2625
|
+
height: 2.8125rem;
|
|
2500
2626
|
justify-content: center;
|
|
2501
2627
|
overflow: hidden;
|
|
2502
|
-
width:
|
|
2628
|
+
width: 5rem;
|
|
2503
2629
|
}
|
|
2504
2630
|
|
|
2505
2631
|
.vidply-playlist-thumbnail-icon {
|
|
2506
2632
|
color: var(--vidply-text-subtle);
|
|
2507
|
-
height:
|
|
2633
|
+
height: 2rem;
|
|
2508
2634
|
transition: var(--vidply-transition-default);
|
|
2509
|
-
width:
|
|
2635
|
+
width: 2rem;
|
|
2510
2636
|
}
|
|
2511
2637
|
|
|
2512
2638
|
.vidply-playlist-item-button:hover .vidply-playlist-thumbnail-icon {
|
|
@@ -2518,6 +2644,23 @@
|
|
|
2518
2644
|
color: var(--vidply-primary-light);
|
|
2519
2645
|
}
|
|
2520
2646
|
|
|
2647
|
+
/* Duration badge on thumbnail (YouTube-style) */
|
|
2648
|
+
.vidply-playlist-duration-badge {
|
|
2649
|
+
background: rgb(0 0 0 / 80%);
|
|
2650
|
+
border-radius: 0.1875rem;
|
|
2651
|
+
bottom: 0.125rem;
|
|
2652
|
+
color: var(--vidply-white);
|
|
2653
|
+
font-family: var(--vidply-font-family);
|
|
2654
|
+
font-size: 0.625rem;
|
|
2655
|
+
font-variant-numeric: tabular-nums;
|
|
2656
|
+
font-weight: 500;
|
|
2657
|
+
letter-spacing: 0.02em;
|
|
2658
|
+
line-height: 1;
|
|
2659
|
+
padding: 0.125rem 0.25rem;
|
|
2660
|
+
position: absolute;
|
|
2661
|
+
right: 0.125rem;
|
|
2662
|
+
}
|
|
2663
|
+
|
|
2521
2664
|
/* Playlist Item Info */
|
|
2522
2665
|
.vidply-playlist-item-info {
|
|
2523
2666
|
display: block;
|
|
@@ -2525,12 +2668,21 @@
|
|
|
2525
2668
|
min-width: 0;
|
|
2526
2669
|
}
|
|
2527
2670
|
|
|
2671
|
+
/* Title row - contains title and optional inline duration */
|
|
2672
|
+
.vidply-playlist-item-title-row {
|
|
2673
|
+
align-items: center;
|
|
2674
|
+
display: flex;
|
|
2675
|
+
gap: 0.5rem;
|
|
2676
|
+
margin-bottom: 0.25rem;
|
|
2677
|
+
}
|
|
2678
|
+
|
|
2528
2679
|
.vidply-playlist-item-title {
|
|
2529
2680
|
color: var(--vidply-white);
|
|
2530
2681
|
display: block;
|
|
2531
|
-
|
|
2682
|
+
flex: 1;
|
|
2683
|
+
font-size: 0.875rem;
|
|
2532
2684
|
font-weight: 500;
|
|
2533
|
-
|
|
2685
|
+
min-width: 0;
|
|
2534
2686
|
overflow: hidden;
|
|
2535
2687
|
text-overflow: ellipsis;
|
|
2536
2688
|
white-space: nowrap;
|
|
@@ -2540,22 +2692,43 @@
|
|
|
2540
2692
|
color: var(--vidply-primary-light);
|
|
2541
2693
|
}
|
|
2542
2694
|
|
|
2695
|
+
/* Inline duration (shown when no thumbnail) */
|
|
2696
|
+
.vidply-playlist-item-duration {
|
|
2697
|
+
color: var(--vidply-text-disabled);
|
|
2698
|
+
flex-shrink: 0;
|
|
2699
|
+
font-size: 0.6875rem;
|
|
2700
|
+
font-variant-numeric: tabular-nums;
|
|
2701
|
+
}
|
|
2702
|
+
|
|
2543
2703
|
.vidply-playlist-item-artist {
|
|
2544
2704
|
color: var(--vidply-text-disabled);
|
|
2545
2705
|
display: block;
|
|
2546
|
-
font-size:
|
|
2706
|
+
font-size: 0.75rem;
|
|
2547
2707
|
overflow: hidden;
|
|
2548
2708
|
text-overflow: ellipsis;
|
|
2549
2709
|
white-space: nowrap;
|
|
2550
2710
|
}
|
|
2551
2711
|
|
|
2712
|
+
/* Description - truncated with ellipsis */
|
|
2713
|
+
.vidply-playlist-item-description {
|
|
2714
|
+
-webkit-box-orient: vertical;
|
|
2715
|
+
color: var(--vidply-text-subtle);
|
|
2716
|
+
display: -webkit-box;
|
|
2717
|
+
font-size: 0.6875rem;
|
|
2718
|
+
-webkit-line-clamp: 2;
|
|
2719
|
+
line-height: 1.4;
|
|
2720
|
+
margin-top: 0.25rem;
|
|
2721
|
+
overflow: hidden;
|
|
2722
|
+
text-overflow: ellipsis;
|
|
2723
|
+
}
|
|
2724
|
+
|
|
2552
2725
|
/* Playlist Item Icon */
|
|
2553
2726
|
.vidply-playlist-item-icon {
|
|
2554
2727
|
flex-shrink: 0;
|
|
2555
|
-
height:
|
|
2728
|
+
height: 1.25rem;
|
|
2556
2729
|
opacity: 0;
|
|
2557
2730
|
transition: opacity 0.2s ease;
|
|
2558
|
-
width:
|
|
2731
|
+
width: 1.25rem;
|
|
2559
2732
|
}
|
|
2560
2733
|
|
|
2561
2734
|
.vidply-playlist-item-active .vidply-playlist-item-icon {
|
|
@@ -2570,7 +2743,7 @@
|
|
|
2570
2743
|
}
|
|
2571
2744
|
|
|
2572
2745
|
.vidply-playlist-panel::-webkit-scrollbar {
|
|
2573
|
-
width:
|
|
2746
|
+
width: 0.5rem;
|
|
2574
2747
|
}
|
|
2575
2748
|
|
|
2576
2749
|
.vidply-playlist-panel::-webkit-scrollbar-track {
|
|
@@ -2579,7 +2752,7 @@
|
|
|
2579
2752
|
|
|
2580
2753
|
.vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2581
2754
|
background: var(--vidply-scrollbar-thumb);
|
|
2582
|
-
border-radius:
|
|
2755
|
+
border-radius: 0.25rem;
|
|
2583
2756
|
}
|
|
2584
2757
|
|
|
2585
2758
|
.vidply-playlist-panel::-webkit-scrollbar-thumb:hover {
|
|
@@ -2588,7 +2761,7 @@
|
|
|
2588
2761
|
|
|
2589
2762
|
/* Audio Player with Playlist */
|
|
2590
2763
|
.vidply-player.vidply-audio.vidply-has-playlist {
|
|
2591
|
-
min-height:
|
|
2764
|
+
min-height: 12.5rem;
|
|
2592
2765
|
}
|
|
2593
2766
|
|
|
2594
2767
|
.vidply-player.vidply-audio.vidply-has-playlist audio {
|
|
@@ -2605,18 +2778,18 @@
|
|
|
2605
2778
|
|
|
2606
2779
|
/* Transcript Window */
|
|
2607
2780
|
.vidply-transcript-window {
|
|
2608
|
-
backdrop-filter: blur(
|
|
2781
|
+
backdrop-filter: blur(0.625rem);
|
|
2609
2782
|
background: var(--vidply-bg-transcript);
|
|
2610
|
-
border:
|
|
2611
|
-
border-radius:
|
|
2612
|
-
box-shadow: 0
|
|
2783
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2784
|
+
border-radius: 0.5rem;
|
|
2785
|
+
box-shadow: 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2613
2786
|
display: none;
|
|
2614
2787
|
flex-direction: column;
|
|
2615
|
-
min-width:
|
|
2788
|
+
min-width: 26.25rem;
|
|
2616
2789
|
order: 4; /* After video-wrapper (1), track-info (2), and playlist-panel (3) */
|
|
2617
2790
|
position: fixed;
|
|
2618
2791
|
top: 0;
|
|
2619
|
-
width:
|
|
2792
|
+
width: 26.25rem;
|
|
2620
2793
|
z-index: var(--vidply-z-transcript);
|
|
2621
2794
|
}
|
|
2622
2795
|
|
|
@@ -2624,13 +2797,13 @@
|
|
|
2624
2797
|
|
|
2625
2798
|
/* Minimum height for audio player transcript */
|
|
2626
2799
|
.vidply-player.vidply-audio .vidply-transcript-window {
|
|
2627
|
-
min-height:
|
|
2800
|
+
min-height: 12.5rem;
|
|
2628
2801
|
}
|
|
2629
2802
|
|
|
2630
2803
|
.vidply-transcript-header {
|
|
2631
2804
|
align-items: center;
|
|
2632
2805
|
background: #282828;
|
|
2633
|
-
border-bottom:
|
|
2806
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2634
2807
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
2635
2808
|
cursor: move;
|
|
2636
2809
|
display: flex;
|
|
@@ -2642,21 +2815,21 @@
|
|
|
2642
2815
|
|
|
2643
2816
|
.vidply-transcript-header:focus,
|
|
2644
2817
|
.vidply-transcript-header:focus-visible {
|
|
2645
|
-
box-shadow: 0 0 0
|
|
2646
|
-
outline:
|
|
2647
|
-
outline-offset:
|
|
2818
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
2819
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
2820
|
+
outline-offset: 0.125rem;
|
|
2648
2821
|
}
|
|
2649
2822
|
|
|
2650
2823
|
.vidply-transcript-header h3 {
|
|
2651
2824
|
color: var(--vidply-white);
|
|
2652
2825
|
font-size: var(--vidply-font-lg);
|
|
2653
2826
|
font-weight: 600;
|
|
2654
|
-
height:
|
|
2655
|
-
left: -
|
|
2827
|
+
height: 0.0625rem;
|
|
2828
|
+
left: -625rem;
|
|
2656
2829
|
margin: 0;
|
|
2657
2830
|
overflow: hidden;
|
|
2658
2831
|
position: absolute;
|
|
2659
|
-
width:
|
|
2832
|
+
width: 0.0625rem;
|
|
2660
2833
|
}
|
|
2661
2834
|
|
|
2662
2835
|
.vidply-transcript-close {
|
|
@@ -2681,7 +2854,7 @@
|
|
|
2681
2854
|
|
|
2682
2855
|
.vidply-transcript-close:focus {
|
|
2683
2856
|
outline: var(--vidply-focus-outline-white);
|
|
2684
|
-
outline-offset:
|
|
2857
|
+
outline-offset: 0.125rem;
|
|
2685
2858
|
}
|
|
2686
2859
|
|
|
2687
2860
|
.vidply-transcript-close .vidply-icon {
|
|
@@ -2695,19 +2868,19 @@
|
|
|
2695
2868
|
overflow-y: auto;
|
|
2696
2869
|
|
|
2697
2870
|
/* iOS momentum scrolling */
|
|
2698
|
-
padding:
|
|
2871
|
+
padding: 0.75rem 0;
|
|
2699
2872
|
touch-action: pan-y;
|
|
2700
2873
|
}
|
|
2701
2874
|
|
|
2702
2875
|
.vidply-transcript-entry {
|
|
2703
2876
|
background: none;
|
|
2704
2877
|
border: none;
|
|
2705
|
-
border-left:
|
|
2878
|
+
border-left: 0.1875rem solid transparent;
|
|
2706
2879
|
color: inherit;
|
|
2707
2880
|
cursor: pointer;
|
|
2708
2881
|
display: block;
|
|
2709
2882
|
font: inherit;
|
|
2710
|
-
padding:
|
|
2883
|
+
padding: 0.75rem 1.25rem;
|
|
2711
2884
|
text-align: left;
|
|
2712
2885
|
transition: background 0.2s ease;
|
|
2713
2886
|
width: 100%;
|
|
@@ -2728,8 +2901,8 @@
|
|
|
2728
2901
|
font-family: 'Courier New', monospace;
|
|
2729
2902
|
font-size: 100%;
|
|
2730
2903
|
font-weight: 600;
|
|
2731
|
-
margin-bottom:
|
|
2732
|
-
margin-right:
|
|
2904
|
+
margin-bottom: 0.25rem;
|
|
2905
|
+
margin-right: 0.5rem;
|
|
2733
2906
|
}
|
|
2734
2907
|
|
|
2735
2908
|
.vidply-transcript-text {
|
|
@@ -2751,7 +2924,7 @@
|
|
|
2751
2924
|
/* Transcript entry types */
|
|
2752
2925
|
.vidply-transcript-description {
|
|
2753
2926
|
background: rgb(100 149 237 / 8%); /* Subtle blue tint for descriptions */
|
|
2754
|
-
border-left:
|
|
2927
|
+
border-left: 0.1875rem solid #8BB3FB;
|
|
2755
2928
|
}
|
|
2756
2929
|
|
|
2757
2930
|
.vidply-transcript-description .vidply-transcript-text {
|
|
@@ -2791,7 +2964,7 @@
|
|
|
2791
2964
|
}
|
|
2792
2965
|
|
|
2793
2966
|
.vidply-transcript-content::-webkit-scrollbar {
|
|
2794
|
-
width:
|
|
2967
|
+
width: 0.5rem;
|
|
2795
2968
|
}
|
|
2796
2969
|
|
|
2797
2970
|
.vidply-transcript-content::-webkit-scrollbar-track {
|
|
@@ -2800,7 +2973,7 @@
|
|
|
2800
2973
|
|
|
2801
2974
|
.vidply-transcript-content::-webkit-scrollbar-thumb {
|
|
2802
2975
|
background: var(--vidply-scrollbar-thumb);
|
|
2803
|
-
border-radius:
|
|
2976
|
+
border-radius: 0.25rem;
|
|
2804
2977
|
}
|
|
2805
2978
|
|
|
2806
2979
|
.vidply-transcript-content::-webkit-scrollbar-thumb:hover {
|
|
@@ -2811,7 +2984,7 @@
|
|
|
2811
2984
|
.vidply-transcript-header-left {
|
|
2812
2985
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
2813
2986
|
display: flex;
|
|
2814
|
-
gap:
|
|
2987
|
+
gap: 1rem;
|
|
2815
2988
|
position: relative;
|
|
2816
2989
|
}
|
|
2817
2990
|
|
|
@@ -2825,21 +2998,21 @@
|
|
|
2825
2998
|
align-self: center; /* Center checkbox label vertically in header */
|
|
2826
2999
|
cursor: pointer;
|
|
2827
3000
|
display: flex;
|
|
2828
|
-
gap:
|
|
3001
|
+
gap: 0.375rem;
|
|
2829
3002
|
user-select: none;
|
|
2830
3003
|
white-space: nowrap;
|
|
2831
3004
|
}
|
|
2832
3005
|
|
|
2833
3006
|
.vidply-transcript-autoscroll-label input[type="checkbox"] {
|
|
2834
3007
|
cursor: pointer;
|
|
2835
|
-
height:
|
|
3008
|
+
height: 1rem;
|
|
2836
3009
|
margin: 0;
|
|
2837
|
-
width:
|
|
3010
|
+
width: 1rem;
|
|
2838
3011
|
}
|
|
2839
3012
|
|
|
2840
3013
|
.vidply-transcript-autoscroll-text {
|
|
2841
3014
|
color: var(--vidply-text-muted);
|
|
2842
|
-
font-size:
|
|
3015
|
+
font-size: 0.8125rem;
|
|
2843
3016
|
transition: color 0.2s ease;
|
|
2844
3017
|
}
|
|
2845
3018
|
|
|
@@ -2853,32 +3026,32 @@
|
|
|
2853
3026
|
align-self: center; /* Center this wrapper vertically in header */
|
|
2854
3027
|
display: flex;
|
|
2855
3028
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
2856
|
-
gap:
|
|
3029
|
+
gap: 0.5rem;
|
|
2857
3030
|
}
|
|
2858
3031
|
|
|
2859
3032
|
.vidply-transcript-language-label {
|
|
2860
3033
|
/* Visible label for voice input accessibility */
|
|
2861
3034
|
color: var(--vidply-text-muted);
|
|
2862
3035
|
cursor: pointer;
|
|
2863
|
-
font-size:
|
|
3036
|
+
font-size: 0.8125rem;
|
|
2864
3037
|
font-weight: 400;
|
|
2865
|
-
margin-left:
|
|
3038
|
+
margin-left: 0.5rem;
|
|
2866
3039
|
white-space: nowrap;
|
|
2867
3040
|
}
|
|
2868
3041
|
|
|
2869
3042
|
.vidply-transcript-language-select {
|
|
2870
3043
|
background: var(--vidply-bg-menu);
|
|
2871
|
-
border:
|
|
2872
|
-
border-radius:
|
|
3044
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3045
|
+
border-radius: 0.25rem;
|
|
2873
3046
|
color: var(--vidply-text);
|
|
2874
|
-
font-size:
|
|
2875
|
-
max-width:
|
|
2876
|
-
padding:
|
|
3047
|
+
font-size: 0.875rem;
|
|
3048
|
+
max-width: 7.5rem;
|
|
3049
|
+
padding: 0.25rem 0.5rem;
|
|
2877
3050
|
}
|
|
2878
3051
|
|
|
2879
3052
|
.vidply-transcript-language-select:focus {
|
|
2880
3053
|
outline: var(--vidply-focus-outline);
|
|
2881
|
-
outline-offset:
|
|
3054
|
+
outline-offset: 0.125rem;
|
|
2882
3055
|
}
|
|
2883
3056
|
|
|
2884
3057
|
/* Transcript Settings Button */
|
|
@@ -2906,7 +3079,7 @@
|
|
|
2906
3079
|
|
|
2907
3080
|
.vidply-transcript-settings:focus {
|
|
2908
3081
|
outline: var(--vidply-focus-outline-white);
|
|
2909
|
-
outline-offset:
|
|
3082
|
+
outline-offset: 0.125rem;
|
|
2910
3083
|
}
|
|
2911
3084
|
|
|
2912
3085
|
.vidply-transcript-settings .vidply-icon {
|
|
@@ -2917,31 +3090,31 @@
|
|
|
2917
3090
|
/* Transcript Settings Menu */
|
|
2918
3091
|
.vidply-transcript-settings-menu {
|
|
2919
3092
|
background: var(--vidply-bg-menu);
|
|
2920
|
-
border:
|
|
3093
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2921
3094
|
border-radius: var(--vidply-radius-md);
|
|
2922
3095
|
box-shadow: var(--vidply-shadow-lg);
|
|
2923
3096
|
display: none;
|
|
2924
|
-
min-width:
|
|
3097
|
+
min-width: 15rem;
|
|
2925
3098
|
padding: var(--vidply-gap-sm);
|
|
2926
3099
|
position: absolute;
|
|
2927
3100
|
z-index: 100;
|
|
2928
3101
|
}
|
|
2929
3102
|
|
|
2930
3103
|
.vidply-transcript-settings-menu::after {
|
|
2931
|
-
border-bottom:
|
|
2932
|
-
border-left:
|
|
2933
|
-
border-right:
|
|
3104
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
3105
|
+
border-left: 0.375rem solid transparent;
|
|
3106
|
+
border-right: 0.375rem solid transparent;
|
|
2934
3107
|
bottom: 100%;
|
|
2935
3108
|
content: '';
|
|
2936
3109
|
height: 0;
|
|
2937
|
-
left:
|
|
3110
|
+
left: 0.5rem;
|
|
2938
3111
|
position: absolute;
|
|
2939
3112
|
width: 0;
|
|
2940
3113
|
}
|
|
2941
3114
|
|
|
2942
3115
|
.vidply-transcript-settings-menu.vidply-menu-above::after {
|
|
2943
3116
|
border-bottom: none;
|
|
2944
|
-
border-top:
|
|
3117
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
2945
3118
|
bottom: auto;
|
|
2946
3119
|
top: 100%;
|
|
2947
3120
|
}
|
|
@@ -2957,7 +3130,7 @@
|
|
|
2957
3130
|
display: flex;
|
|
2958
3131
|
font-size: var(--vidply-font-base);
|
|
2959
3132
|
gap: var(--vidply-gap-md);
|
|
2960
|
-
padding: var(--vidply-padding-md)
|
|
3133
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
2961
3134
|
text-align: left;
|
|
2962
3135
|
transition: var(--vidply-transition-normal);
|
|
2963
3136
|
width: 100%;
|
|
@@ -2973,8 +3146,8 @@
|
|
|
2973
3146
|
|
|
2974
3147
|
.vidply-transcript-settings-item:focus {
|
|
2975
3148
|
background: var(--vidply-primary-25);
|
|
2976
|
-
outline:
|
|
2977
|
-
outline-offset: -
|
|
3149
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
3150
|
+
outline-offset: -0.125rem;
|
|
2978
3151
|
}
|
|
2979
3152
|
|
|
2980
3153
|
.vidply-transcript-settings-item:focus span {
|
|
@@ -2995,16 +3168,16 @@
|
|
|
2995
3168
|
/* Move Mode Visual Feedback */
|
|
2996
3169
|
.vidply-transcript-move-mode {
|
|
2997
3170
|
animation: transcriptPulse 0.5s ease-in-out 2;
|
|
2998
|
-
box-shadow: 0 0 0
|
|
3171
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2999
3172
|
}
|
|
3000
3173
|
|
|
3001
3174
|
@keyframes transcriptPulse {
|
|
3002
3175
|
0%, 100% {
|
|
3003
|
-
box-shadow: 0 0 0
|
|
3176
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3004
3177
|
}
|
|
3005
3178
|
|
|
3006
3179
|
50% {
|
|
3007
|
-
box-shadow: 0 0 0
|
|
3180
|
+
box-shadow: 0 0 0 0.375rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3008
3181
|
}
|
|
3009
3182
|
}
|
|
3010
3183
|
|
|
@@ -3018,67 +3191,67 @@
|
|
|
3018
3191
|
.vidply-transcript-resize-nw,
|
|
3019
3192
|
.vidply-transcript-resize-se,
|
|
3020
3193
|
.vidply-transcript-resize-sw {
|
|
3021
|
-
height:
|
|
3022
|
-
width:
|
|
3194
|
+
height: 1rem;
|
|
3195
|
+
width: 1rem;
|
|
3023
3196
|
}
|
|
3024
3197
|
|
|
3025
3198
|
.vidply-transcript-resize-n,
|
|
3026
3199
|
.vidply-transcript-resize-s {
|
|
3027
3200
|
cursor: ns-resize;
|
|
3028
|
-
height:
|
|
3029
|
-
left:
|
|
3030
|
-
right:
|
|
3201
|
+
height: 0.5rem;
|
|
3202
|
+
left: 1rem;
|
|
3203
|
+
right: 1rem;
|
|
3031
3204
|
}
|
|
3032
3205
|
|
|
3033
3206
|
.vidply-transcript-resize-e,
|
|
3034
3207
|
.vidply-transcript-resize-w {
|
|
3035
|
-
bottom:
|
|
3208
|
+
bottom: 1rem;
|
|
3036
3209
|
cursor: ew-resize;
|
|
3037
|
-
top:
|
|
3038
|
-
width:
|
|
3210
|
+
top: 1rem;
|
|
3211
|
+
width: 0.5rem;
|
|
3039
3212
|
}
|
|
3040
3213
|
|
|
3041
|
-
.vidply-transcript-resize-n { top: -
|
|
3042
|
-
.vidply-transcript-resize-s { bottom: -
|
|
3043
|
-
.vidply-transcript-resize-e { right: -
|
|
3044
|
-
.vidply-transcript-resize-w { left: -
|
|
3214
|
+
.vidply-transcript-resize-n { top: -0.25rem; }
|
|
3215
|
+
.vidply-transcript-resize-s { bottom: -0.25rem; }
|
|
3216
|
+
.vidply-transcript-resize-e { right: -0.25rem; }
|
|
3217
|
+
.vidply-transcript-resize-w { left: -0.25rem; }
|
|
3045
3218
|
|
|
3046
3219
|
.vidply-transcript-resize-ne {
|
|
3047
3220
|
cursor: nesw-resize;
|
|
3048
|
-
right: -
|
|
3049
|
-
top: -
|
|
3221
|
+
right: -0.5rem;
|
|
3222
|
+
top: -0.5rem;
|
|
3050
3223
|
}
|
|
3051
3224
|
|
|
3052
3225
|
.vidply-transcript-resize-nw {
|
|
3053
3226
|
cursor: nwse-resize;
|
|
3054
|
-
left: -
|
|
3055
|
-
top: -
|
|
3227
|
+
left: -0.5rem;
|
|
3228
|
+
top: -0.5rem;
|
|
3056
3229
|
}
|
|
3057
3230
|
|
|
3058
3231
|
.vidply-transcript-resize-se {
|
|
3059
|
-
bottom: -
|
|
3232
|
+
bottom: -0.5rem;
|
|
3060
3233
|
cursor: nwse-resize;
|
|
3061
|
-
right: -
|
|
3234
|
+
right: -0.5rem;
|
|
3062
3235
|
}
|
|
3063
3236
|
|
|
3064
3237
|
.vidply-transcript-resize-sw {
|
|
3065
|
-
bottom: -
|
|
3238
|
+
bottom: -0.5rem;
|
|
3066
3239
|
cursor: nesw-resize;
|
|
3067
|
-
left: -
|
|
3240
|
+
left: -0.5rem;
|
|
3068
3241
|
}
|
|
3069
3242
|
|
|
3070
3243
|
.vidply-transcript-resizable .vidply-transcript-resize-handle::after {
|
|
3071
3244
|
background: var(--vidply-primary-light);
|
|
3072
3245
|
border-radius: 50%;
|
|
3073
3246
|
content: '';
|
|
3074
|
-
height:
|
|
3247
|
+
height: 0.375rem;
|
|
3075
3248
|
left: 50%;
|
|
3076
3249
|
opacity: 0;
|
|
3077
3250
|
position: absolute;
|
|
3078
3251
|
top: 50%;
|
|
3079
3252
|
transform: translate(-50%, -50%);
|
|
3080
3253
|
transition: opacity 0.2s ease;
|
|
3081
|
-
width:
|
|
3254
|
+
width: 0.375rem;
|
|
3082
3255
|
}
|
|
3083
3256
|
|
|
3084
3257
|
.vidply-transcript-resizable:hover .vidply-transcript-resize-handle::after {
|
|
@@ -3091,7 +3264,7 @@
|
|
|
3091
3264
|
|
|
3092
3265
|
/* Resizing State */
|
|
3093
3266
|
.vidply-transcript-resizing {
|
|
3094
|
-
box-shadow: 0 0 0
|
|
3267
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3095
3268
|
transition: none !important;
|
|
3096
3269
|
}
|
|
3097
3270
|
|
|
@@ -3101,17 +3274,17 @@
|
|
|
3101
3274
|
|
|
3102
3275
|
/* Keyboard Drag Mode */
|
|
3103
3276
|
.vidply-transcript-keyboard-drag {
|
|
3104
|
-
box-shadow: 0 0 0
|
|
3277
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3105
3278
|
}
|
|
3106
3279
|
|
|
3107
3280
|
.vidply-transcript-drag-indicator {
|
|
3108
3281
|
background: linear-gradient(135deg, var(--vidply-primary) 0%, var(--vidply-primary-light) 100%);
|
|
3109
|
-
border-radius: 0 0
|
|
3282
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
3110
3283
|
color: var(--vidply-white);
|
|
3111
|
-
font-size:
|
|
3284
|
+
font-size: 0.75rem;
|
|
3112
3285
|
font-weight: 600;
|
|
3113
3286
|
left: 0;
|
|
3114
|
-
padding:
|
|
3287
|
+
padding: 0.5rem 0.75rem;
|
|
3115
3288
|
position: absolute;
|
|
3116
3289
|
right: 0;
|
|
3117
3290
|
text-align: center;
|
|
@@ -3123,11 +3296,11 @@
|
|
|
3123
3296
|
.vidply-transcript-move-tooltip {
|
|
3124
3297
|
animation: fadeInDown 0.3s ease;
|
|
3125
3298
|
background: var(--vidply-black-90);
|
|
3126
|
-
border-radius:
|
|
3299
|
+
border-radius: 0.25rem;
|
|
3127
3300
|
color: var(--vidply-white);
|
|
3128
|
-
font-size:
|
|
3301
|
+
font-size: 0.75rem;
|
|
3129
3302
|
left: 50%;
|
|
3130
|
-
padding:
|
|
3303
|
+
padding: 0.375rem 0.75rem;
|
|
3131
3304
|
position: absolute;
|
|
3132
3305
|
text-align: center;
|
|
3133
3306
|
top: 100%;
|
|
@@ -3139,11 +3312,11 @@
|
|
|
3139
3312
|
.vidply-transcript-resize-tooltip {
|
|
3140
3313
|
animation: fadeInDown 0.3s ease;
|
|
3141
3314
|
background: var(--vidply-primary);
|
|
3142
|
-
border-radius:
|
|
3315
|
+
border-radius: 0.25rem;
|
|
3143
3316
|
color: var(--vidply-white);
|
|
3144
|
-
font-size:
|
|
3317
|
+
font-size: 0.75rem;
|
|
3145
3318
|
left: 50%;
|
|
3146
|
-
padding:
|
|
3319
|
+
padding: 0.375rem 0.75rem;
|
|
3147
3320
|
position: absolute;
|
|
3148
3321
|
text-align: center;
|
|
3149
3322
|
top: 100%;
|
|
@@ -3155,7 +3328,7 @@
|
|
|
3155
3328
|
@keyframes fadeInDown {
|
|
3156
3329
|
from {
|
|
3157
3330
|
opacity: 0;
|
|
3158
|
-
transform: translateX(-50%) translateY(-
|
|
3331
|
+
transform: translateX(-50%) translateY(-0.625rem);
|
|
3159
3332
|
}
|
|
3160
3333
|
|
|
3161
3334
|
to {
|
|
@@ -3167,15 +3340,15 @@
|
|
|
3167
3340
|
/* Transcript Style Dialog - Dropdown Menu Style */
|
|
3168
3341
|
.vidply-transcript-style-dialog {
|
|
3169
3342
|
background: var(--vidply-bg-menu);
|
|
3170
|
-
border:
|
|
3171
|
-
border-radius:
|
|
3343
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3344
|
+
border-radius: 0.5rem;
|
|
3172
3345
|
box-shadow: var(--vidply-shadow-lg);
|
|
3173
3346
|
display: none;
|
|
3174
3347
|
left: 0;
|
|
3175
|
-
max-height:
|
|
3176
|
-
min-width:
|
|
3348
|
+
max-height: 31.25rem;
|
|
3349
|
+
min-width: 17.5rem;
|
|
3177
3350
|
overflow-y: auto;
|
|
3178
|
-
padding:
|
|
3351
|
+
padding: 0.75rem;
|
|
3179
3352
|
position: absolute;
|
|
3180
3353
|
top: 100%;
|
|
3181
3354
|
width: auto;
|
|
@@ -3186,26 +3359,26 @@
|
|
|
3186
3359
|
.vidply-transcript-style-dialog::after {
|
|
3187
3360
|
border-color: transparent transparent var(--vidply-bg-menu) transparent;
|
|
3188
3361
|
border-style: solid;
|
|
3189
|
-
border-width: 0
|
|
3362
|
+
border-width: 0 0.5rem 0.5rem;
|
|
3190
3363
|
content: '';
|
|
3191
3364
|
height: 0;
|
|
3192
|
-
left:
|
|
3365
|
+
left: 0.75rem;
|
|
3193
3366
|
position: absolute;
|
|
3194
|
-
top: -
|
|
3367
|
+
top: -0.5rem;
|
|
3195
3368
|
width: 0;
|
|
3196
3369
|
}
|
|
3197
3370
|
|
|
3198
3371
|
.vidply-transcript-style-title {
|
|
3199
|
-
border-bottom:
|
|
3372
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
3200
3373
|
color: var(--vidply-white);
|
|
3201
|
-
font-size:
|
|
3374
|
+
font-size: 0.875rem;
|
|
3202
3375
|
font-weight: 600;
|
|
3203
|
-
margin: 0 0
|
|
3204
|
-
padding-bottom:
|
|
3376
|
+
margin: 0 0 0.75rem;
|
|
3377
|
+
padding-bottom: 0.5rem;
|
|
3205
3378
|
}
|
|
3206
3379
|
|
|
3207
3380
|
.vidply-transcript-style-group {
|
|
3208
|
-
margin-bottom:
|
|
3381
|
+
margin-bottom: 0.75rem;
|
|
3209
3382
|
}
|
|
3210
3383
|
|
|
3211
3384
|
.vidply-transcript-style-group:last-child {
|
|
@@ -3215,19 +3388,19 @@
|
|
|
3215
3388
|
.vidply-transcript-style-group label {
|
|
3216
3389
|
color: var(--vidply-white-90);
|
|
3217
3390
|
display: block;
|
|
3218
|
-
font-size:
|
|
3391
|
+
font-size: 0.75rem;
|
|
3219
3392
|
font-weight: 500;
|
|
3220
|
-
margin-bottom:
|
|
3393
|
+
margin-bottom: 0.375rem;
|
|
3221
3394
|
}
|
|
3222
3395
|
|
|
3223
3396
|
/* Style Select */
|
|
3224
3397
|
.vidply-transcript-style-select {
|
|
3225
3398
|
background: var(--vidply-bg-menu);
|
|
3226
|
-
border:
|
|
3227
|
-
border-radius:
|
|
3399
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3400
|
+
border-radius: 0.25rem;
|
|
3228
3401
|
color: var(--vidply-text);
|
|
3229
|
-
font-size:
|
|
3230
|
-
padding:
|
|
3402
|
+
font-size: 0.875rem;
|
|
3403
|
+
padding: 0.25rem 0.5rem;
|
|
3231
3404
|
transition: var(--vidply-transition-default);
|
|
3232
3405
|
width: 100%;
|
|
3233
3406
|
}
|
|
@@ -3240,50 +3413,50 @@
|
|
|
3240
3413
|
.vidply-transcript-style-select:focus {
|
|
3241
3414
|
background: var(--vidply-white-15);
|
|
3242
3415
|
border-color: var(--vidply-border-focus);
|
|
3243
|
-
box-shadow: 0 0 0
|
|
3416
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3244
3417
|
outline: var(--vidply-focus-outline);
|
|
3245
|
-
outline-offset:
|
|
3418
|
+
outline-offset: 0.125rem;
|
|
3246
3419
|
}
|
|
3247
3420
|
|
|
3248
3421
|
/* Style Color Input */
|
|
3249
3422
|
.vidply-transcript-style-color {
|
|
3250
|
-
border:
|
|
3251
|
-
border-radius:
|
|
3423
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3424
|
+
border-radius: 0.25rem;
|
|
3252
3425
|
cursor: pointer;
|
|
3253
|
-
height:
|
|
3426
|
+
height: 2rem;
|
|
3254
3427
|
outline: none;
|
|
3255
|
-
padding:
|
|
3428
|
+
padding: 0.25rem;
|
|
3256
3429
|
transition: var(--vidply-transition-default);
|
|
3257
3430
|
width: 100%;
|
|
3258
3431
|
}
|
|
3259
3432
|
|
|
3260
3433
|
.vidply-transcript-style-color:hover {
|
|
3261
3434
|
border-color: var(--vidply-border-hover);
|
|
3262
|
-
box-shadow: 0 0 0
|
|
3435
|
+
box-shadow: 0 0 0 0.0625rem var(--vidply-primary-20);
|
|
3263
3436
|
}
|
|
3264
3437
|
|
|
3265
3438
|
.vidply-transcript-style-color:focus {
|
|
3266
3439
|
border-color: var(--vidply-border-focus);
|
|
3267
|
-
box-shadow: 0 0 0
|
|
3440
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3268
3441
|
outline: var(--vidply-focus-outline);
|
|
3269
|
-
outline-offset:
|
|
3442
|
+
outline-offset: 0.125rem;
|
|
3270
3443
|
}
|
|
3271
3444
|
|
|
3272
3445
|
/* Style Range Slider */
|
|
3273
3446
|
.vidply-transcript-style-range-container {
|
|
3274
3447
|
align-items: center;
|
|
3275
3448
|
display: flex;
|
|
3276
|
-
gap:
|
|
3449
|
+
gap: 0.75rem;
|
|
3277
3450
|
}
|
|
3278
3451
|
|
|
3279
3452
|
.vidply-transcript-style-range {
|
|
3280
3453
|
-webkit-appearance: none;
|
|
3281
3454
|
appearance: none;
|
|
3282
3455
|
background: var(--vidply-white-20);
|
|
3283
|
-
border-radius:
|
|
3456
|
+
border-radius: 0.1875rem;
|
|
3284
3457
|
cursor: pointer;
|
|
3285
3458
|
flex: 1;
|
|
3286
|
-
height:
|
|
3459
|
+
height: 0.375rem;
|
|
3287
3460
|
outline: none;
|
|
3288
3461
|
transition: var(--vidply-transition-default);
|
|
3289
3462
|
}
|
|
@@ -3294,20 +3467,20 @@
|
|
|
3294
3467
|
|
|
3295
3468
|
.vidply-transcript-style-range:focus {
|
|
3296
3469
|
background: var(--vidply-white-30);
|
|
3297
|
-
box-shadow: 0 0 0
|
|
3470
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-20);
|
|
3298
3471
|
}
|
|
3299
3472
|
|
|
3300
3473
|
.vidply-transcript-style-range::-webkit-slider-thumb {
|
|
3301
3474
|
-webkit-appearance: none;
|
|
3302
3475
|
appearance: none;
|
|
3303
3476
|
background: var(--vidply-primary-light);
|
|
3304
|
-
border:
|
|
3477
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3305
3478
|
border-radius: 50%;
|
|
3306
3479
|
box-shadow: var(--vidply-shadow-sm);
|
|
3307
3480
|
cursor: pointer;
|
|
3308
|
-
height:
|
|
3481
|
+
height: 1rem;
|
|
3309
3482
|
transition: all 0.15s ease;
|
|
3310
|
-
width:
|
|
3483
|
+
width: 1rem;
|
|
3311
3484
|
}
|
|
3312
3485
|
|
|
3313
3486
|
.vidply-transcript-style-range::-webkit-slider-thumb:hover {
|
|
@@ -3317,13 +3490,13 @@
|
|
|
3317
3490
|
|
|
3318
3491
|
.vidply-transcript-style-range::-moz-range-thumb {
|
|
3319
3492
|
background: var(--vidply-primary-light);
|
|
3320
|
-
border:
|
|
3493
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3321
3494
|
border-radius: 50%;
|
|
3322
3495
|
box-shadow: var(--vidply-shadow-sm);
|
|
3323
3496
|
cursor: pointer;
|
|
3324
|
-
height:
|
|
3497
|
+
height: 1rem;
|
|
3325
3498
|
transition: all 0.15s ease;
|
|
3326
|
-
width:
|
|
3499
|
+
width: 1rem;
|
|
3327
3500
|
}
|
|
3328
3501
|
|
|
3329
3502
|
.vidply-transcript-style-range::-moz-range-thumb:hover {
|
|
@@ -3333,9 +3506,9 @@
|
|
|
3333
3506
|
|
|
3334
3507
|
.vidply-transcript-style-value {
|
|
3335
3508
|
color: var(--vidply-text-muted);
|
|
3336
|
-
font-size:
|
|
3509
|
+
font-size: 0.8125rem;
|
|
3337
3510
|
font-weight: 600;
|
|
3338
|
-
min-width:
|
|
3511
|
+
min-width: 2.5rem;
|
|
3339
3512
|
text-align: right;
|
|
3340
3513
|
}
|
|
3341
3514
|
|
|
@@ -3343,20 +3516,20 @@
|
|
|
3343
3516
|
.vidply-transcript-style-close {
|
|
3344
3517
|
background: var(--vidply-primary);
|
|
3345
3518
|
border: none;
|
|
3346
|
-
border-radius:
|
|
3519
|
+
border-radius: 0.25rem;
|
|
3347
3520
|
color: var(--vidply-white);
|
|
3348
3521
|
cursor: pointer;
|
|
3349
|
-
font-size:
|
|
3522
|
+
font-size: 0.8125rem;
|
|
3350
3523
|
font-weight: 600;
|
|
3351
|
-
margin-top:
|
|
3352
|
-
padding:
|
|
3524
|
+
margin-top: 0.75rem;
|
|
3525
|
+
padding: 0.5rem 1rem;
|
|
3353
3526
|
transition: var(--vidply-transition-default);
|
|
3354
3527
|
width: 100%;
|
|
3355
3528
|
}
|
|
3356
3529
|
|
|
3357
3530
|
.vidply-transcript-style-close:hover {
|
|
3358
3531
|
background: var(--vidply-primary-light);
|
|
3359
|
-
transform: translateY(-
|
|
3532
|
+
transform: translateY(-0.0625rem);
|
|
3360
3533
|
}
|
|
3361
3534
|
|
|
3362
3535
|
.vidply-transcript-style-close:active {
|
|
@@ -3364,22 +3537,22 @@
|
|
|
3364
3537
|
}
|
|
3365
3538
|
|
|
3366
3539
|
.vidply-transcript-style-close:focus {
|
|
3367
|
-
box-shadow: 0 0 0
|
|
3540
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3368
3541
|
outline: var(--vidply-focus-outline);
|
|
3369
|
-
outline-offset:
|
|
3542
|
+
outline-offset: 0.125rem;
|
|
3370
3543
|
}
|
|
3371
3544
|
|
|
3372
3545
|
/* Sign Language Video Wrapper */
|
|
3373
3546
|
.vidply-sign-language-wrapper {
|
|
3374
3547
|
background: transparent;
|
|
3375
|
-
border-radius:
|
|
3548
|
+
border-radius: 0.5rem;
|
|
3376
3549
|
height: auto;
|
|
3377
3550
|
max-width: none;
|
|
3378
|
-
min-height:
|
|
3551
|
+
min-height: 6.25rem;
|
|
3379
3552
|
overflow: visible; /* Allow menu to overflow */
|
|
3380
3553
|
position: absolute;
|
|
3381
3554
|
transition: opacity 0.3s ease;
|
|
3382
|
-
width:
|
|
3555
|
+
width: 17.5rem;
|
|
3383
3556
|
z-index: 3;
|
|
3384
3557
|
}
|
|
3385
3558
|
|
|
@@ -3388,15 +3561,15 @@
|
|
|
3388
3561
|
}
|
|
3389
3562
|
|
|
3390
3563
|
.vidply-sign-language-wrapper:focus {
|
|
3391
|
-
outline:
|
|
3392
|
-
outline-offset:
|
|
3564
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
3565
|
+
outline-offset: 0.125rem;
|
|
3393
3566
|
}
|
|
3394
3567
|
|
|
3395
3568
|
/* Sign Language Header */
|
|
3396
3569
|
.vidply-sign-language-header {
|
|
3397
3570
|
align-items: center;
|
|
3398
3571
|
background: #282828;
|
|
3399
|
-
border-bottom:
|
|
3572
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
3400
3573
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
3401
3574
|
cursor: move;
|
|
3402
3575
|
display: flex;
|
|
@@ -3409,15 +3582,15 @@
|
|
|
3409
3582
|
|
|
3410
3583
|
.vidply-sign-language-header:focus,
|
|
3411
3584
|
.vidply-sign-language-header:focus-visible {
|
|
3412
|
-
box-shadow: 0 0 0
|
|
3413
|
-
outline:
|
|
3414
|
-
outline-offset:
|
|
3585
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
3586
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
3587
|
+
outline-offset: 0.125rem;
|
|
3415
3588
|
}
|
|
3416
3589
|
|
|
3417
3590
|
.vidply-sign-language-header-left {
|
|
3418
3591
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
3419
3592
|
display: flex;
|
|
3420
|
-
gap:
|
|
3593
|
+
gap: 1rem;
|
|
3421
3594
|
position: relative; /* Needed for menu positioning */
|
|
3422
3595
|
}
|
|
3423
3596
|
|
|
@@ -3426,29 +3599,29 @@
|
|
|
3426
3599
|
align-self: center; /* Center this wrapper vertically in header */
|
|
3427
3600
|
display: flex;
|
|
3428
3601
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
3429
|
-
gap:
|
|
3602
|
+
gap: 0.5rem;
|
|
3430
3603
|
}
|
|
3431
3604
|
|
|
3432
3605
|
.vidply-sign-language-label {
|
|
3433
3606
|
/* Visible label for voice input accessibility */
|
|
3434
3607
|
color: var(--vidply-white);
|
|
3435
|
-
font-size:
|
|
3608
|
+
font-size: 0.75rem;
|
|
3436
3609
|
font-weight: 500;
|
|
3437
3610
|
white-space: nowrap;
|
|
3438
3611
|
}
|
|
3439
3612
|
|
|
3440
3613
|
.vidply-sign-language-select {
|
|
3441
3614
|
background: var(--vidply-bg-menu);
|
|
3442
|
-
border:
|
|
3443
|
-
border-radius:
|
|
3615
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3616
|
+
border-radius: 0.25rem;
|
|
3444
3617
|
color: var(--vidply-text);
|
|
3445
|
-
font-size:
|
|
3446
|
-
padding:
|
|
3618
|
+
font-size: 0.875rem;
|
|
3619
|
+
padding: 0.25rem 0.5rem;
|
|
3447
3620
|
}
|
|
3448
3621
|
|
|
3449
3622
|
.vidply-sign-language-select:focus {
|
|
3450
3623
|
outline: var(--vidply-focus-outline);
|
|
3451
|
-
outline-offset:
|
|
3624
|
+
outline-offset: 0.125rem;
|
|
3452
3625
|
}
|
|
3453
3626
|
|
|
3454
3627
|
/* Sign Language Settings Button */
|
|
@@ -3475,7 +3648,7 @@
|
|
|
3475
3648
|
|
|
3476
3649
|
.vidply-sign-language-settings:focus {
|
|
3477
3650
|
outline: var(--vidply-focus-outline-white);
|
|
3478
|
-
outline-offset:
|
|
3651
|
+
outline-offset: 0.125rem;
|
|
3479
3652
|
}
|
|
3480
3653
|
|
|
3481
3654
|
.vidply-sign-language-settings .vidply-icon {
|
|
@@ -3486,20 +3659,20 @@
|
|
|
3486
3659
|
/* Sign Language Settings Menu */
|
|
3487
3660
|
.vidply-sign-language-settings-menu {
|
|
3488
3661
|
background: var(--vidply-bg-menu);
|
|
3489
|
-
border:
|
|
3662
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3490
3663
|
border-radius: var(--vidply-radius-md);
|
|
3491
3664
|
box-shadow: var(--vidply-shadow-lg);
|
|
3492
3665
|
display: none;
|
|
3493
|
-
min-width:
|
|
3666
|
+
min-width: 15rem;
|
|
3494
3667
|
padding: var(--vidply-gap-sm);
|
|
3495
3668
|
position: absolute;
|
|
3496
3669
|
z-index: 100;
|
|
3497
3670
|
}
|
|
3498
3671
|
|
|
3499
3672
|
.vidply-sign-language-settings-menu::after {
|
|
3500
|
-
border-bottom:
|
|
3501
|
-
border-left:
|
|
3502
|
-
border-right:
|
|
3673
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
3674
|
+
border-left: 0.375rem solid transparent;
|
|
3675
|
+
border-right: 0.375rem solid transparent;
|
|
3503
3676
|
bottom: 100%;
|
|
3504
3677
|
content: '';
|
|
3505
3678
|
height: 0;
|
|
@@ -3510,7 +3683,7 @@
|
|
|
3510
3683
|
|
|
3511
3684
|
.vidply-sign-language-settings-menu.vidply-menu-above::after {
|
|
3512
3685
|
border-bottom: none;
|
|
3513
|
-
border-top:
|
|
3686
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
3514
3687
|
bottom: auto;
|
|
3515
3688
|
top: 100%;
|
|
3516
3689
|
}
|
|
@@ -3526,7 +3699,7 @@
|
|
|
3526
3699
|
display: flex;
|
|
3527
3700
|
font-size: var(--vidply-font-base);
|
|
3528
3701
|
gap: var(--vidply-gap-md);
|
|
3529
|
-
padding: var(--vidply-padding-md)
|
|
3702
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
3530
3703
|
text-align: left;
|
|
3531
3704
|
transition: var(--vidply-transition-normal);
|
|
3532
3705
|
width: 100%;
|
|
@@ -3568,12 +3741,12 @@
|
|
|
3568
3741
|
color: var(--vidply-white);
|
|
3569
3742
|
font-size: var(--vidply-font-lg);
|
|
3570
3743
|
font-weight: 600;
|
|
3571
|
-
height:
|
|
3572
|
-
left: -
|
|
3744
|
+
height: 0.0625rem;
|
|
3745
|
+
left: -625rem;
|
|
3573
3746
|
margin: 0;
|
|
3574
3747
|
overflow: hidden;
|
|
3575
3748
|
position: absolute;
|
|
3576
|
-
width:
|
|
3749
|
+
width: 0.0625rem;
|
|
3577
3750
|
}
|
|
3578
3751
|
|
|
3579
3752
|
.vidply-sign-language-close {
|
|
@@ -3598,7 +3771,7 @@
|
|
|
3598
3771
|
|
|
3599
3772
|
.vidply-sign-language-close:focus {
|
|
3600
3773
|
outline: var(--vidply-focus-outline-white);
|
|
3601
|
-
outline-offset:
|
|
3774
|
+
outline-offset: 0.125rem;
|
|
3602
3775
|
}
|
|
3603
3776
|
|
|
3604
3777
|
.vidply-sign-language-close .vidply-icon {
|
|
@@ -3609,10 +3782,10 @@
|
|
|
3609
3782
|
/* Sign Language Video */
|
|
3610
3783
|
.vidply-sign-language-video {
|
|
3611
3784
|
background: var(--vidply-black);
|
|
3612
|
-
border:
|
|
3613
|
-
border-radius: 0 0
|
|
3785
|
+
border: 0.125rem solid var(--vidply-white-30);
|
|
3786
|
+
border-radius: 0 0 0.5rem 0.5rem;
|
|
3614
3787
|
border-top: none;
|
|
3615
|
-
box-shadow: 0
|
|
3788
|
+
box-shadow: 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3616
3789
|
cursor: default;
|
|
3617
3790
|
display: block;
|
|
3618
3791
|
height: auto;
|
|
@@ -3631,67 +3804,67 @@
|
|
|
3631
3804
|
.vidply-sign-resize-nw,
|
|
3632
3805
|
.vidply-sign-resize-se,
|
|
3633
3806
|
.vidply-sign-resize-sw {
|
|
3634
|
-
height:
|
|
3635
|
-
width:
|
|
3807
|
+
height: 1rem;
|
|
3808
|
+
width: 1rem;
|
|
3636
3809
|
}
|
|
3637
3810
|
|
|
3638
3811
|
.vidply-sign-resize-n,
|
|
3639
3812
|
.vidply-sign-resize-s {
|
|
3640
3813
|
cursor: ns-resize;
|
|
3641
|
-
height:
|
|
3642
|
-
left:
|
|
3643
|
-
right:
|
|
3814
|
+
height: 0.5rem;
|
|
3815
|
+
left: 1rem;
|
|
3816
|
+
right: 1rem;
|
|
3644
3817
|
}
|
|
3645
3818
|
|
|
3646
3819
|
.vidply-sign-resize-e,
|
|
3647
3820
|
.vidply-sign-resize-w {
|
|
3648
|
-
bottom:
|
|
3821
|
+
bottom: 1rem;
|
|
3649
3822
|
cursor: ew-resize;
|
|
3650
|
-
top:
|
|
3651
|
-
width:
|
|
3823
|
+
top: 1rem;
|
|
3824
|
+
width: 0.5rem;
|
|
3652
3825
|
}
|
|
3653
3826
|
|
|
3654
|
-
.vidply-sign-resize-n { top: -
|
|
3655
|
-
.vidply-sign-resize-s { bottom: -
|
|
3656
|
-
.vidply-sign-resize-e { right: -
|
|
3657
|
-
.vidply-sign-resize-w { left: -
|
|
3827
|
+
.vidply-sign-resize-n { top: -0.25rem; }
|
|
3828
|
+
.vidply-sign-resize-s { bottom: -0.25rem; }
|
|
3829
|
+
.vidply-sign-resize-e { right: -0.25rem; }
|
|
3830
|
+
.vidply-sign-resize-w { left: -0.25rem; }
|
|
3658
3831
|
|
|
3659
3832
|
.vidply-sign-resize-ne {
|
|
3660
3833
|
cursor: nesw-resize;
|
|
3661
|
-
right: -
|
|
3662
|
-
top: -
|
|
3834
|
+
right: -0.5rem;
|
|
3835
|
+
top: -0.5rem;
|
|
3663
3836
|
}
|
|
3664
3837
|
|
|
3665
3838
|
.vidply-sign-resize-nw {
|
|
3666
3839
|
cursor: nwse-resize;
|
|
3667
|
-
left: -
|
|
3668
|
-
top: -
|
|
3840
|
+
left: -0.5rem;
|
|
3841
|
+
top: -0.5rem;
|
|
3669
3842
|
}
|
|
3670
3843
|
|
|
3671
3844
|
.vidply-sign-resize-se {
|
|
3672
|
-
bottom: -
|
|
3845
|
+
bottom: -0.5rem;
|
|
3673
3846
|
cursor: nwse-resize;
|
|
3674
|
-
right: -
|
|
3847
|
+
right: -0.5rem;
|
|
3675
3848
|
}
|
|
3676
3849
|
|
|
3677
3850
|
.vidply-sign-resize-sw {
|
|
3678
|
-
bottom: -
|
|
3851
|
+
bottom: -0.5rem;
|
|
3679
3852
|
cursor: nesw-resize;
|
|
3680
|
-
left: -
|
|
3853
|
+
left: -0.5rem;
|
|
3681
3854
|
}
|
|
3682
3855
|
|
|
3683
3856
|
.vidply-sign-resizable .vidply-sign-resize-handle::after {
|
|
3684
3857
|
background: var(--vidply-primary-light);
|
|
3685
3858
|
border-radius: 50%;
|
|
3686
3859
|
content: '';
|
|
3687
|
-
height:
|
|
3860
|
+
height: 0.375rem;
|
|
3688
3861
|
left: 50%;
|
|
3689
3862
|
opacity: 0;
|
|
3690
3863
|
position: absolute;
|
|
3691
3864
|
top: 50%;
|
|
3692
3865
|
transform: translate(-50%, -50%);
|
|
3693
3866
|
transition: opacity 0.2s ease;
|
|
3694
|
-
width:
|
|
3867
|
+
width: 0.375rem;
|
|
3695
3868
|
}
|
|
3696
3869
|
|
|
3697
3870
|
.vidply-sign-resizable:hover .vidply-sign-resize-handle::after {
|
|
@@ -3717,36 +3890,36 @@
|
|
|
3717
3890
|
|
|
3718
3891
|
/* Move Mode */
|
|
3719
3892
|
.vidply-sign-move-mode {
|
|
3720
|
-
box-shadow: 0 0 0
|
|
3893
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3721
3894
|
}
|
|
3722
3895
|
|
|
3723
3896
|
/* Resizing State */
|
|
3724
3897
|
.vidply-sign-resizing {
|
|
3725
|
-
box-shadow: 0 0 0
|
|
3898
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3726
3899
|
transition: none !important;
|
|
3727
3900
|
}
|
|
3728
3901
|
|
|
3729
3902
|
/* Keyboard Drag/Resize Modes */
|
|
3730
3903
|
.vidply-sign-keyboard-drag,
|
|
3731
3904
|
.vidply-sign-keyboard-resize {
|
|
3732
|
-
box-shadow: 0 0 0
|
|
3905
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary), 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3733
3906
|
}
|
|
3734
3907
|
|
|
3735
3908
|
.vidply-sign-keyboard-drag::after,
|
|
3736
3909
|
.vidply-sign-keyboard-resize::after {
|
|
3737
3910
|
align-items: center;
|
|
3738
3911
|
background: var(--vidply-primary);
|
|
3739
|
-
border-radius:
|
|
3912
|
+
border-radius: 0.25rem;
|
|
3740
3913
|
color: var(--vidply-white);
|
|
3741
3914
|
display: flex;
|
|
3742
|
-
font-size:
|
|
3915
|
+
font-size: 0.75rem;
|
|
3743
3916
|
font-weight: 600;
|
|
3744
3917
|
justify-content: center;
|
|
3745
3918
|
left: 50%;
|
|
3746
|
-
padding:
|
|
3919
|
+
padding: 0.25rem 0.5rem;
|
|
3747
3920
|
pointer-events: none;
|
|
3748
3921
|
position: absolute;
|
|
3749
|
-
top: -
|
|
3922
|
+
top: -1.75rem;
|
|
3750
3923
|
transform: translateX(-50%);
|
|
3751
3924
|
white-space: nowrap;
|
|
3752
3925
|
z-index: 10;
|
|
@@ -3762,48 +3935,48 @@
|
|
|
3762
3935
|
|
|
3763
3936
|
/* Sign Language Video Positions */
|
|
3764
3937
|
.vidply-sign-position-bottom-right {
|
|
3765
|
-
bottom:
|
|
3766
|
-
right:
|
|
3938
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3939
|
+
right: 1rem;
|
|
3767
3940
|
}
|
|
3768
3941
|
|
|
3769
3942
|
.vidply-sign-position-bottom-left {
|
|
3770
|
-
bottom:
|
|
3771
|
-
left:
|
|
3943
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3944
|
+
left: 1rem;
|
|
3772
3945
|
}
|
|
3773
3946
|
|
|
3774
3947
|
.vidply-sign-position-top-right {
|
|
3775
|
-
right:
|
|
3776
|
-
top:
|
|
3948
|
+
right: 1rem;
|
|
3949
|
+
top: 1rem;
|
|
3777
3950
|
}
|
|
3778
3951
|
|
|
3779
3952
|
.vidply-sign-position-top-left {
|
|
3780
|
-
left:
|
|
3781
|
-
top:
|
|
3953
|
+
left: 1rem;
|
|
3954
|
+
top: 1rem;
|
|
3782
3955
|
}
|
|
3783
3956
|
|
|
3784
3957
|
/* Responsive Sign Language Video */
|
|
3785
|
-
@media (width <
|
|
3958
|
+
@media (width < 48rem) {
|
|
3786
3959
|
.vidply-sign-language-wrapper {
|
|
3787
|
-
min-width:
|
|
3960
|
+
min-width: 7.5rem;
|
|
3788
3961
|
width: 35%;
|
|
3789
3962
|
}
|
|
3790
3963
|
|
|
3791
3964
|
.vidply-sign-position-bottom-right,
|
|
3792
3965
|
.vidply-sign-position-bottom-left {
|
|
3793
|
-
bottom:
|
|
3966
|
+
bottom: 7.875rem !important; /* Adjust for smaller controls */
|
|
3794
3967
|
}
|
|
3795
3968
|
}
|
|
3796
3969
|
|
|
3797
3970
|
/* Responsive Adjustments */
|
|
3798
|
-
@media (width <
|
|
3971
|
+
@media (width < 48rem) {
|
|
3799
3972
|
.vidply-playlist-thumbnail {
|
|
3800
|
-
height:
|
|
3801
|
-
width:
|
|
3973
|
+
height: 2.125rem;
|
|
3974
|
+
width: 3.75rem;
|
|
3802
3975
|
}
|
|
3803
3976
|
|
|
3804
3977
|
.vidply-playlist-item {
|
|
3805
|
-
gap:
|
|
3806
|
-
padding:
|
|
3978
|
+
gap: 0.625rem;
|
|
3979
|
+
padding: 0.625rem 0.75rem;
|
|
3807
3980
|
}
|
|
3808
3981
|
|
|
3809
3982
|
.vidply-track-artwork {
|
|
@@ -3811,19 +3984,19 @@
|
|
|
3811
3984
|
}
|
|
3812
3985
|
|
|
3813
3986
|
.vidply-track-info {
|
|
3814
|
-
padding:
|
|
3987
|
+
padding: 0.75rem 1rem;
|
|
3815
3988
|
}
|
|
3816
3989
|
|
|
3817
3990
|
.vidply-track-title {
|
|
3818
|
-
font-size:
|
|
3991
|
+
font-size: 1rem;
|
|
3819
3992
|
}
|
|
3820
3993
|
|
|
3821
3994
|
/* Mobile fullscreen playlist - horizontal scrolling directly above controls */
|
|
3822
3995
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
3823
3996
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
3824
|
-
bottom:
|
|
3997
|
+
bottom: 6.25rem; /* Directly above controls with extra space */
|
|
3825
3998
|
max-height: 35vh; /* Compact height */
|
|
3826
|
-
padding:
|
|
3999
|
+
padding: 0.75rem 0; /* Vertical padding only */
|
|
3827
4000
|
overflow-y: hidden; /* No vertical scrolling */
|
|
3828
4001
|
overflow-x: auto; /* Horizontal scrolling */
|
|
3829
4002
|
position: absolute !important; /* Force absolute over video */
|
|
@@ -3836,8 +4009,8 @@
|
|
|
3836
4009
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
3837
4010
|
flex-direction: row; /* Items side by side */
|
|
3838
4011
|
flex-wrap: nowrap; /* Never wrap */
|
|
3839
|
-
gap:
|
|
3840
|
-
padding: 0
|
|
4012
|
+
gap: 0.5rem;
|
|
4013
|
+
padding: 0 0.75rem;
|
|
3841
4014
|
-webkit-overflow-scrolling: touch;
|
|
3842
4015
|
scroll-behavior: smooth;
|
|
3843
4016
|
touch-action: pan-x; /* Ensure horizontal swipe gestures work */
|
|
@@ -3846,9 +4019,9 @@
|
|
|
3846
4019
|
/* Mobile playlist items - only show thumbnails */
|
|
3847
4020
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
3848
4021
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
3849
|
-
width:
|
|
3850
|
-
min-width:
|
|
3851
|
-
max-width:
|
|
4022
|
+
width: 7.5rem; /* Smaller width for thumbnail-only */
|
|
4023
|
+
min-width: 7.5rem;
|
|
4024
|
+
max-width: 7.5rem;
|
|
3852
4025
|
flex-shrink: 0; /* Don't shrink */
|
|
3853
4026
|
scroll-snap-align: start;
|
|
3854
4027
|
}
|
|
@@ -3862,10 +4035,10 @@
|
|
|
3862
4035
|
|
|
3863
4036
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
3864
4037
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
3865
|
-
height:
|
|
4038
|
+
height: 5.625rem; /* Square-ish thumbnail */
|
|
3866
4039
|
width: 100%; /* Full width of card */
|
|
3867
4040
|
flex-shrink: 0;
|
|
3868
|
-
border-radius:
|
|
4041
|
+
border-radius: 0.5rem; /* Fully rounded for thumbnail-only */
|
|
3869
4042
|
}
|
|
3870
4043
|
|
|
3871
4044
|
/* Hide text info on mobile - show only thumbnails */
|
|
@@ -3879,28 +4052,28 @@
|
|
|
3879
4052
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-info {
|
|
3880
4053
|
display: flex;
|
|
3881
4054
|
flex-direction: column;
|
|
3882
|
-
padding:
|
|
4055
|
+
padding: 0.5rem;
|
|
3883
4056
|
justify-content: center;
|
|
3884
4057
|
align-items: center;
|
|
3885
4058
|
text-align: center;
|
|
3886
|
-
height:
|
|
4059
|
+
height: 5.625rem;
|
|
3887
4060
|
}
|
|
3888
4061
|
|
|
3889
4062
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title,
|
|
3890
4063
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title {
|
|
3891
|
-
font-size:
|
|
4064
|
+
font-size: 0.6875rem;
|
|
3892
4065
|
-webkit-line-clamp: 3;
|
|
3893
4066
|
}
|
|
3894
4067
|
|
|
3895
4068
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist,
|
|
3896
4069
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist {
|
|
3897
|
-
font-size:
|
|
4070
|
+
font-size: 0.5625rem;
|
|
3898
4071
|
}
|
|
3899
4072
|
|
|
3900
4073
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
3901
4074
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
3902
|
-
padding: 0
|
|
3903
|
-
font-size:
|
|
4075
|
+
padding: 0 0.75rem 0.5rem;
|
|
4076
|
+
font-size: 0.6875rem;
|
|
3904
4077
|
flex-shrink: 0;
|
|
3905
4078
|
}
|
|
3906
4079
|
|
|
@@ -3908,9 +4081,9 @@
|
|
|
3908
4081
|
.vidply-transcript-window {
|
|
3909
4082
|
border: none;
|
|
3910
4083
|
border-radius: 0;
|
|
3911
|
-
border-top:
|
|
4084
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
3912
4085
|
box-shadow: none;
|
|
3913
|
-
min-width:
|
|
4086
|
+
min-width: 18.75rem;
|
|
3914
4087
|
order: 3; /* After controls (which are order: 2) */
|
|
3915
4088
|
position: relative;
|
|
3916
4089
|
width: 100%;
|
|
@@ -3919,11 +4092,11 @@
|
|
|
3919
4092
|
|
|
3920
4093
|
.vidply-transcript-header {
|
|
3921
4094
|
border-radius: 0;
|
|
3922
|
-
padding:
|
|
4095
|
+
padding: 0.75rem 1rem;
|
|
3923
4096
|
}
|
|
3924
4097
|
|
|
3925
4098
|
.vidply-transcript-content {
|
|
3926
|
-
max-height:
|
|
4099
|
+
max-height: 25rem;
|
|
3927
4100
|
}
|
|
3928
4101
|
|
|
3929
4102
|
/* Don't show dragging cursor on mobile (except in fullscreen) */
|