vidply 1.0.20 → 1.0.22
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 +568 -544
- package/dist/vidply.esm.js +186 -17
- package/dist/vidply.esm.js.map +2 -2
- package/dist/vidply.esm.min.js +5 -5
- package/dist/vidply.esm.min.meta.json +30 -25
- package/dist/vidply.js +186 -17
- package/dist/vidply.js.map +2 -2
- package/dist/vidply.min.css +1 -1
- package/dist/vidply.min.js +5 -5
- package/dist/vidply.min.meta.json +30 -25
- package/package.json +1 -1
- package/src/controls/ControlBar.js +2 -1
- package/src/core/Player.js +68 -3
- package/src/features/PlaylistManager.js +109 -15
- package/src/i18n/languages/de.js +8 -0
- package/src/i18n/languages/en.js +8 -0
- package/src/i18n/languages/es.js +8 -0
- package/src/i18n/languages/fr.js +8 -0
- package/src/i18n/languages/ja.js +8 -0
- package/src/renderers/HLSRenderer.js +17 -0
- package/src/renderers/HTML5Renderer.js +14 -1
- package/src/renderers/VimeoRenderer.js +7 -0
- package/src/renderers/YouTubeRenderer.js +7 -0
- package/src/styles/vidply.css +568 -544
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 */
|
|
@@ -521,11 +521,11 @@
|
|
|
521
521
|
}
|
|
522
522
|
|
|
523
523
|
/* Mobile: Simplify video wrapper but keep captions contained */
|
|
524
|
-
@media (width <
|
|
524
|
+
@media (width < 48rem) {
|
|
525
525
|
.vidply-video-wrapper {
|
|
526
526
|
display: block;
|
|
527
527
|
height: auto;
|
|
528
|
-
min-height:
|
|
528
|
+
min-height: 12.5rem;
|
|
529
529
|
overflow: visible;
|
|
530
530
|
position: relative;
|
|
531
531
|
z-index: 2;
|
|
@@ -579,7 +579,7 @@
|
|
|
579
579
|
/* Centered Play Button Overlay */
|
|
580
580
|
.vidply-play-overlay {
|
|
581
581
|
cursor: pointer;
|
|
582
|
-
filter: drop-shadow(0
|
|
582
|
+
filter: drop-shadow(0 0.5rem 2rem rgb(0 0 0 / 30%));
|
|
583
583
|
left: 50%;
|
|
584
584
|
position: absolute;
|
|
585
585
|
top: 50%;
|
|
@@ -589,7 +589,7 @@
|
|
|
589
589
|
}
|
|
590
590
|
|
|
591
591
|
.vidply-play-overlay:hover {
|
|
592
|
-
filter: drop-shadow(0
|
|
592
|
+
filter: drop-shadow(0 0.75rem 3rem rgb(0 0 0 / 40%));
|
|
593
593
|
transform: translate(-50%, -50%) scale(1.1);
|
|
594
594
|
}
|
|
595
595
|
|
|
@@ -613,7 +613,7 @@
|
|
|
613
613
|
left: 0;
|
|
614
614
|
opacity: 0;
|
|
615
615
|
overflow: visible;
|
|
616
|
-
padding:
|
|
616
|
+
padding: 1.25rem 1rem 1rem;
|
|
617
617
|
pointer-events: none;
|
|
618
618
|
position: absolute;
|
|
619
619
|
right: 0;
|
|
@@ -637,15 +637,15 @@
|
|
|
637
637
|
}
|
|
638
638
|
|
|
639
639
|
/* Mobile: Controls underneath video (but not in landscape fullscreen) */
|
|
640
|
-
@media (width <
|
|
640
|
+
@media (width < 48rem) {
|
|
641
641
|
.vidply-controls {
|
|
642
642
|
background: var(--vidply-black-90);
|
|
643
|
-
border-top:
|
|
643
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
644
644
|
bottom: auto;
|
|
645
645
|
left: 0;
|
|
646
646
|
opacity: 1;
|
|
647
647
|
order: 2; /* After video-wrapper (1) */
|
|
648
|
-
padding:
|
|
648
|
+
padding: 0.75rem;
|
|
649
649
|
pointer-events: auto;
|
|
650
650
|
position: relative;
|
|
651
651
|
right: 0;
|
|
@@ -683,24 +683,24 @@
|
|
|
683
683
|
/* Progress Bar */
|
|
684
684
|
.vidply-progress-container {
|
|
685
685
|
background: var(--vidply-white-20);
|
|
686
|
-
border-radius:
|
|
686
|
+
border-radius: 0.1875rem;
|
|
687
687
|
cursor: pointer;
|
|
688
688
|
flex: 1;
|
|
689
|
-
height:
|
|
689
|
+
height: 0.5625rem;
|
|
690
690
|
position: relative;
|
|
691
691
|
transition: height 0.2s ease;
|
|
692
692
|
}
|
|
693
693
|
|
|
694
694
|
.vidply-progress-container:hover,
|
|
695
695
|
.vidply-progress-container:focus {
|
|
696
|
-
height:
|
|
696
|
+
height: 0.6875rem;
|
|
697
697
|
outline: var(--vidply-focus-outline-white);
|
|
698
|
-
outline-offset:
|
|
698
|
+
outline-offset: 0.125rem;
|
|
699
699
|
}
|
|
700
700
|
|
|
701
701
|
.vidply-progress-buffered {
|
|
702
702
|
background: var(--vidply-white-40);
|
|
703
|
-
border-radius:
|
|
703
|
+
border-radius: 0.1875rem;
|
|
704
704
|
height: 100%;
|
|
705
705
|
left: 0;
|
|
706
706
|
position: absolute;
|
|
@@ -711,7 +711,7 @@
|
|
|
711
711
|
|
|
712
712
|
.vidply-progress-played {
|
|
713
713
|
background: var(--vidply-primary-light);
|
|
714
|
-
border-radius:
|
|
714
|
+
border-radius: 0.1875rem;
|
|
715
715
|
height: 100%;
|
|
716
716
|
left: 0;
|
|
717
717
|
position: absolute;
|
|
@@ -724,14 +724,14 @@
|
|
|
724
724
|
background: var(--vidply-white);
|
|
725
725
|
border-radius: 50%;
|
|
726
726
|
box-shadow: var(--vidply-shadow-sm);
|
|
727
|
-
height:
|
|
727
|
+
height: 0.9375rem;
|
|
728
728
|
opacity: 0;
|
|
729
729
|
position: absolute;
|
|
730
|
-
right: -
|
|
730
|
+
right: -0.375rem;
|
|
731
731
|
top: 50%;
|
|
732
732
|
transform: translateY(-50%);
|
|
733
733
|
transition: opacity 0.2s ease;
|
|
734
|
-
width:
|
|
734
|
+
width: 0.9375rem;
|
|
735
735
|
}
|
|
736
736
|
|
|
737
737
|
.vidply-progress-container:hover .vidply-progress-handle,
|
|
@@ -741,12 +741,12 @@
|
|
|
741
741
|
|
|
742
742
|
.vidply-progress-tooltip {
|
|
743
743
|
background: var(--vidply-black-90);
|
|
744
|
-
border-radius:
|
|
745
|
-
bottom:
|
|
744
|
+
border-radius: 0.25rem;
|
|
745
|
+
bottom: 0.75rem;
|
|
746
746
|
color: var(--vidply-white);
|
|
747
747
|
display: none;
|
|
748
|
-
font-size:
|
|
749
|
-
padding:
|
|
748
|
+
font-size: 0.75rem;
|
|
749
|
+
padding: 0.25rem 0.5rem;
|
|
750
750
|
pointer-events: none;
|
|
751
751
|
position: absolute;
|
|
752
752
|
transform: translateX(-50%);
|
|
@@ -782,7 +782,7 @@
|
|
|
782
782
|
cursor: pointer;
|
|
783
783
|
display: inline-flex;
|
|
784
784
|
justify-content: center;
|
|
785
|
-
margin:
|
|
785
|
+
margin: 0.0625rem;
|
|
786
786
|
min-height: var(--vidply-button-size);
|
|
787
787
|
min-width: var(--vidply-button-size);
|
|
788
788
|
padding: 0;
|
|
@@ -800,7 +800,7 @@
|
|
|
800
800
|
|
|
801
801
|
.vidply-button:focus {
|
|
802
802
|
outline: var(--vidply-focus-outline-white);
|
|
803
|
-
outline-offset:
|
|
803
|
+
outline-offset: 0.125rem;
|
|
804
804
|
}
|
|
805
805
|
|
|
806
806
|
.vidply-button:disabled {
|
|
@@ -826,10 +826,10 @@
|
|
|
826
826
|
@media (forced-colors: active) {
|
|
827
827
|
.vidply-controls button .vidply-icon svg {
|
|
828
828
|
background: Canvas;
|
|
829
|
-
border-radius:
|
|
829
|
+
border-radius: 0.1875rem;
|
|
830
830
|
color: CanvasText;
|
|
831
831
|
fill: currentcolor;
|
|
832
|
-
padding:
|
|
832
|
+
padding: 0.125rem;
|
|
833
833
|
}
|
|
834
834
|
|
|
835
835
|
.vidply-transcript-close .vidply-icon svg,
|
|
@@ -837,29 +837,29 @@
|
|
|
837
837
|
.vidply-sign-language-close .vidply-icon svg,
|
|
838
838
|
.vidply-sign-language-settings .vidply-icon svg {
|
|
839
839
|
background: Canvas;
|
|
840
|
-
border-radius:
|
|
840
|
+
border-radius: 0.125rem;
|
|
841
841
|
color: CanvasText;
|
|
842
842
|
fill: currentcolor;
|
|
843
|
-
padding:
|
|
843
|
+
padding: 0.125rem;
|
|
844
844
|
}
|
|
845
845
|
}
|
|
846
846
|
|
|
847
847
|
/* Volume Control */
|
|
848
848
|
.vidply-volume-slider {
|
|
849
849
|
background: var(--vidply-white-20);
|
|
850
|
-
border-radius:
|
|
850
|
+
border-radius: 0.1875rem;
|
|
851
851
|
cursor: pointer;
|
|
852
|
-
height:
|
|
852
|
+
height: 6.25rem;
|
|
853
853
|
margin: 0 auto;
|
|
854
|
-
padding: 0
|
|
854
|
+
padding: 0 0.3125rem; /* Add padding for larger touch target on mobile */
|
|
855
855
|
position: relative;
|
|
856
856
|
touch-action: none; /* Prevent scrolling while dragging */
|
|
857
|
-
width:
|
|
857
|
+
width: 0.375rem;
|
|
858
858
|
}
|
|
859
859
|
|
|
860
860
|
.vidply-volume-slider:focus {
|
|
861
861
|
outline: var(--vidply-focus-outline-white);
|
|
862
|
-
outline-offset:
|
|
862
|
+
outline-offset: 0.125rem;
|
|
863
863
|
}
|
|
864
864
|
|
|
865
865
|
.vidply-volume-track {
|
|
@@ -870,7 +870,7 @@
|
|
|
870
870
|
|
|
871
871
|
.vidply-volume-fill {
|
|
872
872
|
background: var(--vidply-primary-light);
|
|
873
|
-
border-radius:
|
|
873
|
+
border-radius: 0.125rem;
|
|
874
874
|
bottom: 0;
|
|
875
875
|
height: 80%;
|
|
876
876
|
left: 0;
|
|
@@ -883,12 +883,12 @@
|
|
|
883
883
|
background: var(--vidply-white);
|
|
884
884
|
border-radius: 50%;
|
|
885
885
|
box-shadow: var(--vidply-shadow-sm);
|
|
886
|
-
height:
|
|
886
|
+
height: 0.625rem;
|
|
887
887
|
left: 50%;
|
|
888
888
|
position: absolute;
|
|
889
|
-
top: -
|
|
889
|
+
top: -0.25rem;
|
|
890
890
|
transform: translateX(-50%);
|
|
891
|
-
width:
|
|
891
|
+
width: 0.625rem;
|
|
892
892
|
}
|
|
893
893
|
|
|
894
894
|
/* Time Display */
|
|
@@ -911,11 +911,11 @@
|
|
|
911
911
|
}
|
|
912
912
|
|
|
913
913
|
.vidply-speed-text {
|
|
914
|
-
height:
|
|
915
|
-
left: -
|
|
914
|
+
height: 0.0625rem;
|
|
915
|
+
left: -625rem;
|
|
916
916
|
overflow: hidden;
|
|
917
917
|
position: absolute;
|
|
918
|
-
width:
|
|
918
|
+
width: 0.0625rem;
|
|
919
919
|
}
|
|
920
920
|
|
|
921
921
|
/* Menu Backdrop (for mobile) */
|
|
@@ -936,7 +936,7 @@
|
|
|
936
936
|
}
|
|
937
937
|
|
|
938
938
|
/* Mobile: Don't use backdrop, menus position above buttons */
|
|
939
|
-
@media (width <
|
|
939
|
+
@media (width < 48rem) {
|
|
940
940
|
.vidply-menu-backdrop {
|
|
941
941
|
display: none !important;
|
|
942
942
|
}
|
|
@@ -954,18 +954,18 @@
|
|
|
954
954
|
|
|
955
955
|
/* Menus */
|
|
956
956
|
.vidply-menu {
|
|
957
|
-
backdrop-filter: blur(
|
|
957
|
+
backdrop-filter: blur(0.625rem);
|
|
958
958
|
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:
|
|
959
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
960
|
+
border-radius: 0.5rem;
|
|
961
|
+
bottom: calc(100% + 0.5rem);
|
|
962
|
+
box-shadow: var(--vidply-shadow-lg), 0 0 0 0.0625rem var(--vidply-white-10);
|
|
963
|
+
max-height: 15.625rem;
|
|
964
|
+
min-width: 12.5rem;
|
|
965
965
|
-webkit-overflow-scrolling: touch;
|
|
966
966
|
overflow-x: hidden;
|
|
967
967
|
overflow-y: auto;
|
|
968
|
-
padding:
|
|
968
|
+
padding: 0.5rem 0;
|
|
969
969
|
pointer-events: auto; /* Ensure menus are clickable/touchable */
|
|
970
970
|
position: absolute;
|
|
971
971
|
right: 50%;
|
|
@@ -976,10 +976,10 @@
|
|
|
976
976
|
|
|
977
977
|
/* Menu positioned below button */
|
|
978
978
|
.vidply-menu.vidply-menu-below::after {
|
|
979
|
-
border-bottom:
|
|
979
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
980
980
|
border-top: none;
|
|
981
981
|
bottom: auto;
|
|
982
|
-
top: -
|
|
982
|
+
top: -0.375rem;
|
|
983
983
|
}
|
|
984
984
|
|
|
985
985
|
/* Volume menu popup - narrow and centered on button */
|
|
@@ -987,18 +987,18 @@
|
|
|
987
987
|
min-width: unset;
|
|
988
988
|
overflow-x: hidden;
|
|
989
989
|
overflow-y: hidden;
|
|
990
|
-
padding:
|
|
990
|
+
padding: 1rem 0.75rem;
|
|
991
991
|
pointer-events: auto; /* Ensure volume menu is touchable */
|
|
992
992
|
right: 50%;
|
|
993
993
|
transform: translateX(50%);
|
|
994
|
-
width:
|
|
994
|
+
width: 2.1875rem;
|
|
995
995
|
z-index: var(--vidply-z-menu-high); /* High z-index to appear above everything */
|
|
996
996
|
}
|
|
997
997
|
|
|
998
998
|
/* For audio players, show menus below buttons */
|
|
999
999
|
.vidply-player.vidply-audio .vidply-menu {
|
|
1000
1000
|
bottom: auto;
|
|
1001
|
-
top: calc(100% +
|
|
1001
|
+
top: calc(100% + 0.5rem);
|
|
1002
1002
|
}
|
|
1003
1003
|
|
|
1004
1004
|
.vidply-menu-item {
|
|
@@ -1026,8 +1026,8 @@
|
|
|
1026
1026
|
.vidply-menu-item:focus {
|
|
1027
1027
|
background: var(--vidply-primary-25);
|
|
1028
1028
|
color: var(--vidply-white);
|
|
1029
|
-
outline:
|
|
1030
|
-
outline-offset: -
|
|
1029
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
1030
|
+
outline-offset: -0.125rem;
|
|
1031
1031
|
}
|
|
1032
1032
|
|
|
1033
1033
|
.vidply-menu-item:active {
|
|
@@ -1053,8 +1053,8 @@
|
|
|
1053
1053
|
|
|
1054
1054
|
.vidply-menu-item-active .vidply-icon {
|
|
1055
1055
|
color: var(--vidply-primary-light);
|
|
1056
|
-
height:
|
|
1057
|
-
width:
|
|
1056
|
+
height: 1.25rem;
|
|
1057
|
+
width: 1.25rem;
|
|
1058
1058
|
}
|
|
1059
1059
|
|
|
1060
1060
|
.vidply-menu-item-with-value {
|
|
@@ -1068,13 +1068,13 @@
|
|
|
1068
1068
|
align-items: center;
|
|
1069
1069
|
display: flex;
|
|
1070
1070
|
flex: 1;
|
|
1071
|
-
gap:
|
|
1071
|
+
gap: 0.625rem;
|
|
1072
1072
|
}
|
|
1073
1073
|
|
|
1074
1074
|
.vidply-menu-item-label .vidply-icon {
|
|
1075
|
-
height:
|
|
1075
|
+
height: 1.5rem;
|
|
1076
1076
|
opacity: 0.9;
|
|
1077
|
-
width:
|
|
1077
|
+
width: 1.5rem;
|
|
1078
1078
|
}
|
|
1079
1079
|
|
|
1080
1080
|
.vidply-menu-item-value {
|
|
@@ -1083,7 +1083,7 @@
|
|
|
1083
1083
|
color: var(--vidply-text-muted);
|
|
1084
1084
|
font-size: var(--vidply-font-base);
|
|
1085
1085
|
font-weight: 500;
|
|
1086
|
-
padding:
|
|
1086
|
+
padding: 0.125rem var(--vidply-gap-md);
|
|
1087
1087
|
white-space: nowrap;
|
|
1088
1088
|
}
|
|
1089
1089
|
|
|
@@ -1096,7 +1096,7 @@
|
|
|
1096
1096
|
/* Overflow menu list - prevent overflow to the right */
|
|
1097
1097
|
.vidply-overflow-menu-list {
|
|
1098
1098
|
left: auto !important;
|
|
1099
|
-
max-width: calc(100vw -
|
|
1099
|
+
max-width: calc(100vw - 1.25rem);
|
|
1100
1100
|
right: 0 !important;
|
|
1101
1101
|
z-index: 1000; /* Ensure menu appears above all player elements including playlist */
|
|
1102
1102
|
|
|
@@ -1118,8 +1118,8 @@
|
|
|
1118
1118
|
|
|
1119
1119
|
/* SVG icons in overflow menu - proper sizing */
|
|
1120
1120
|
.vidply-overflow-menu-list .vidply-menu-item .vidply-icon svg {
|
|
1121
|
-
height:
|
|
1122
|
-
width:
|
|
1121
|
+
height: 1.125rem;
|
|
1122
|
+
width: 1.125rem;
|
|
1123
1123
|
}
|
|
1124
1124
|
|
|
1125
1125
|
/* Text icons (like "Aa" for caption styling) in overflow menu */
|
|
@@ -1147,7 +1147,7 @@
|
|
|
1147
1147
|
font-size: var(--vidply-font-base);
|
|
1148
1148
|
font-weight: 500;
|
|
1149
1149
|
margin-right: var(--vidply-gap-lg);
|
|
1150
|
-
min-width:
|
|
1150
|
+
min-width: 3.75rem;
|
|
1151
1151
|
}
|
|
1152
1152
|
|
|
1153
1153
|
.vidply-chapter-title {
|
|
@@ -1208,20 +1208,20 @@
|
|
|
1208
1208
|
.vidply-style-group input[type="color"]:focus {
|
|
1209
1209
|
border-color: var(--vidply-border-focus);
|
|
1210
1210
|
outline: var(--vidply-focus-outline-white);
|
|
1211
|
-
outline-offset:
|
|
1211
|
+
outline-offset: 0.125rem;
|
|
1212
1212
|
}
|
|
1213
1213
|
|
|
1214
1214
|
.vidply-style-group input[type="range"]::-webkit-slider-thumb {
|
|
1215
1215
|
-webkit-appearance: none;
|
|
1216
1216
|
appearance: none;
|
|
1217
1217
|
background: var(--vidply-primary);
|
|
1218
|
-
border:
|
|
1218
|
+
border: 0.125rem solid var(--vidply-white);
|
|
1219
1219
|
border-radius: 50%;
|
|
1220
1220
|
box-shadow: var(--vidply-shadow-sm);
|
|
1221
1221
|
cursor: pointer;
|
|
1222
|
-
height:
|
|
1222
|
+
height: 1rem;
|
|
1223
1223
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
1224
|
-
width:
|
|
1224
|
+
width: 1rem;
|
|
1225
1225
|
}
|
|
1226
1226
|
|
|
1227
1227
|
.vidply-style-group input[type="range"]::-webkit-slider-thumb:hover {
|
|
@@ -1231,13 +1231,13 @@
|
|
|
1231
1231
|
|
|
1232
1232
|
.vidply-style-group input[type="range"]::-moz-range-thumb {
|
|
1233
1233
|
background: var(--vidply-primary);
|
|
1234
|
-
border:
|
|
1234
|
+
border: 0.125rem solid var(--vidply-white);
|
|
1235
1235
|
border-radius: 50%;
|
|
1236
1236
|
box-shadow: var(--vidply-shadow-sm);
|
|
1237
1237
|
cursor: pointer;
|
|
1238
|
-
height:
|
|
1238
|
+
height: 1rem;
|
|
1239
1239
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
1240
|
-
width:
|
|
1240
|
+
width: 1rem;
|
|
1241
1241
|
}
|
|
1242
1242
|
|
|
1243
1243
|
.vidply-style-group input[type="range"]::-moz-range-thumb:hover {
|
|
@@ -1247,23 +1247,23 @@
|
|
|
1247
1247
|
|
|
1248
1248
|
.vidply-style-group input[type="range"]::-webkit-slider-runnable-track {
|
|
1249
1249
|
background: var(--vidply-white-20);
|
|
1250
|
-
border-radius:
|
|
1251
|
-
height:
|
|
1250
|
+
border-radius: 0.1875rem;
|
|
1251
|
+
height: 0.375rem;
|
|
1252
1252
|
width: 100%;
|
|
1253
1253
|
}
|
|
1254
1254
|
|
|
1255
1255
|
.vidply-style-group input[type="range"]::-moz-range-track {
|
|
1256
1256
|
background: var(--vidply-white-20);
|
|
1257
|
-
border-radius:
|
|
1258
|
-
height:
|
|
1257
|
+
border-radius: 0.1875rem;
|
|
1258
|
+
height: 0.375rem;
|
|
1259
1259
|
width: 100%;
|
|
1260
1260
|
}
|
|
1261
1261
|
|
|
1262
1262
|
/* Captions */
|
|
1263
1263
|
.vidply-captions {
|
|
1264
1264
|
background: var(--vidply-bg-caption);
|
|
1265
|
-
border-radius:
|
|
1266
|
-
bottom:
|
|
1265
|
+
border-radius: 0.25rem;
|
|
1266
|
+
bottom: 1rem;
|
|
1267
1267
|
color: var(--vidply-white);
|
|
1268
1268
|
display: none;
|
|
1269
1269
|
font-family: sans-serif;
|
|
@@ -1271,7 +1271,7 @@
|
|
|
1271
1271
|
left: 50%;
|
|
1272
1272
|
line-height: 1.4;
|
|
1273
1273
|
max-width: 90%;
|
|
1274
|
-
padding:
|
|
1274
|
+
padding: 0.5rem 1rem;
|
|
1275
1275
|
pointer-events: none;
|
|
1276
1276
|
position: absolute;
|
|
1277
1277
|
text-align: center;
|
|
@@ -1283,17 +1283,17 @@
|
|
|
1283
1283
|
/* Audio player: Display captions as readable transcript/lyrics */
|
|
1284
1284
|
.vidply-player.vidply-audio .vidply-captions {
|
|
1285
1285
|
background: var(--vidply-bg-transcript);
|
|
1286
|
-
border:
|
|
1287
|
-
border-radius:
|
|
1286
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1287
|
+
border-radius: 0.5rem;
|
|
1288
1288
|
bottom: auto;
|
|
1289
|
-
font-size:
|
|
1289
|
+
font-size: 1rem;
|
|
1290
1290
|
left: 0;
|
|
1291
1291
|
line-height: 1.6;
|
|
1292
|
-
max-height:
|
|
1292
|
+
max-height: 9.375rem;
|
|
1293
1293
|
max-width: 100%;
|
|
1294
|
-
min-width:
|
|
1294
|
+
min-width: 23.125rem;
|
|
1295
1295
|
overflow-y: auto;
|
|
1296
|
-
padding:
|
|
1296
|
+
padding: 1rem 1.25rem;
|
|
1297
1297
|
position: relative;
|
|
1298
1298
|
scroll-behavior: smooth;
|
|
1299
1299
|
text-align: left;
|
|
@@ -1305,16 +1305,16 @@
|
|
|
1305
1305
|
.vidply-player.vidply-audio .vidply-caption-cue {
|
|
1306
1306
|
background: transparent;
|
|
1307
1307
|
border-radius: 0;
|
|
1308
|
-
margin-bottom:
|
|
1309
|
-
padding:
|
|
1308
|
+
margin-bottom: 0.75rem;
|
|
1309
|
+
padding: 0.5rem 0;
|
|
1310
1310
|
}
|
|
1311
1311
|
|
|
1312
1312
|
/* Highlight active caption in audio player */
|
|
1313
1313
|
.vidply-player.vidply-audio .vidply-caption-cue.vidply-caption-active {
|
|
1314
1314
|
background: var(--vidply-primary-15);
|
|
1315
|
-
border-left:
|
|
1316
|
-
border-radius:
|
|
1317
|
-
padding:
|
|
1315
|
+
border-left: 0.1875rem solid var(--vidply-primary);
|
|
1316
|
+
border-radius: 0.25rem;
|
|
1317
|
+
padding: 0.5rem 0.75rem;
|
|
1318
1318
|
}
|
|
1319
1319
|
|
|
1320
1320
|
/* Smooth transitions for caption highlighting */
|
|
@@ -1327,14 +1327,14 @@
|
|
|
1327
1327
|
}
|
|
1328
1328
|
|
|
1329
1329
|
/* Desktop only: Move captions up when controls are visible */
|
|
1330
|
-
@media (width >=
|
|
1330
|
+
@media (width >= 48rem) {
|
|
1331
1331
|
.vidply-controls-visible .vidply-captions {
|
|
1332
|
-
bottom:
|
|
1332
|
+
bottom: 6rem;
|
|
1333
1333
|
}
|
|
1334
1334
|
}
|
|
1335
1335
|
|
|
1336
1336
|
/* Mobile: Caption positioning handled by JavaScript */
|
|
1337
|
-
@media (width <
|
|
1337
|
+
@media (width < 48rem) {
|
|
1338
1338
|
.vidply-captions {
|
|
1339
1339
|
/* Bottom position set dynamically by JS based on control height */
|
|
1340
1340
|
left: 50%;
|
|
@@ -1347,18 +1347,18 @@
|
|
|
1347
1347
|
|
|
1348
1348
|
/* Audio player captions on mobile - more compact */
|
|
1349
1349
|
.vidply-player.vidply-audio .vidply-captions {
|
|
1350
|
-
font-size:
|
|
1350
|
+
font-size: 0.875rem;
|
|
1351
1351
|
left: 0;
|
|
1352
|
-
max-height:
|
|
1353
|
-
min-width:
|
|
1354
|
-
padding:
|
|
1352
|
+
max-height: 7.5rem;
|
|
1353
|
+
min-width: 18.75rem;
|
|
1354
|
+
padding: 0.75rem 1rem;
|
|
1355
1355
|
position: relative;
|
|
1356
1356
|
transform: none;
|
|
1357
1357
|
width: 100%;
|
|
1358
1358
|
}
|
|
1359
1359
|
|
|
1360
1360
|
.vidply-player.vidply-audio .vidply-caption-cue {
|
|
1361
|
-
margin-bottom:
|
|
1361
|
+
margin-bottom: 0.5rem;
|
|
1362
1362
|
}
|
|
1363
1363
|
|
|
1364
1364
|
/* Make play overlay smaller and centered */
|
|
@@ -1379,7 +1379,7 @@
|
|
|
1379
1379
|
.vidply-settings-overlay {
|
|
1380
1380
|
align-items: center;
|
|
1381
1381
|
animation: vidply-fade-in 0.2s ease;
|
|
1382
|
-
backdrop-filter: blur(
|
|
1382
|
+
backdrop-filter: blur(0.5rem);
|
|
1383
1383
|
background: var(--vidply-bg-overlay);
|
|
1384
1384
|
bottom: 0;
|
|
1385
1385
|
display: flex;
|
|
@@ -1404,14 +1404,14 @@
|
|
|
1404
1404
|
.vidply-settings-dialog {
|
|
1405
1405
|
animation: vidply-slide-up 0.3s ease;
|
|
1406
1406
|
background: var(--vidply-bg-dialog);
|
|
1407
|
-
border:
|
|
1408
|
-
border-radius:
|
|
1407
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1408
|
+
border-radius: 0.75rem;
|
|
1409
1409
|
box-shadow: var(--vidply-shadow-lg);
|
|
1410
1410
|
max-height: 80%;
|
|
1411
|
-
max-width:
|
|
1411
|
+
max-width: 31.25rem;
|
|
1412
1412
|
-webkit-overflow-scrolling: touch;
|
|
1413
1413
|
overflow-y: auto;
|
|
1414
|
-
padding:
|
|
1414
|
+
padding: 1.5rem;
|
|
1415
1415
|
|
|
1416
1416
|
/* iOS momentum scrolling */
|
|
1417
1417
|
touch-action: pan-y;
|
|
@@ -1420,7 +1420,7 @@
|
|
|
1420
1420
|
|
|
1421
1421
|
@keyframes vidply-slide-up {
|
|
1422
1422
|
from {
|
|
1423
|
-
transform: translateY(
|
|
1423
|
+
transform: translateY(1.25rem);
|
|
1424
1424
|
opacity: 0;
|
|
1425
1425
|
}
|
|
1426
1426
|
|
|
@@ -1447,7 +1447,7 @@
|
|
|
1447
1447
|
.vidply-settings-close {
|
|
1448
1448
|
min-height: auto;
|
|
1449
1449
|
min-width: auto;
|
|
1450
|
-
padding:
|
|
1450
|
+
padding: 0.25rem;
|
|
1451
1451
|
}
|
|
1452
1452
|
|
|
1453
1453
|
.vidply-settings-content {
|
|
@@ -1480,7 +1480,7 @@
|
|
|
1480
1480
|
.vidply-settings-color,
|
|
1481
1481
|
.vidply-settings-range {
|
|
1482
1482
|
background: var(--vidply-white-10);
|
|
1483
|
-
border:
|
|
1483
|
+
border: 0.0625rem solid var(--vidply-white-20);
|
|
1484
1484
|
border-radius: var(--vidply-radius-md);
|
|
1485
1485
|
color: var(--vidply-white);
|
|
1486
1486
|
font-size: var(--vidply-font-md);
|
|
@@ -1507,7 +1507,7 @@
|
|
|
1507
1507
|
.vidply-settings-range:focus {
|
|
1508
1508
|
background: var(--vidply-white-15);
|
|
1509
1509
|
border-color: var(--vidply-border-focus);
|
|
1510
|
-
box-shadow: 0 0 0
|
|
1510
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
1511
1511
|
outline: none;
|
|
1512
1512
|
}
|
|
1513
1513
|
|
|
@@ -1521,12 +1521,12 @@
|
|
|
1521
1521
|
color: var(--vidply-text-muted);
|
|
1522
1522
|
display: inline-block;
|
|
1523
1523
|
font-size: var(--vidply-font-base);
|
|
1524
|
-
min-width:
|
|
1524
|
+
min-width: 2.5rem;
|
|
1525
1525
|
text-align: right;
|
|
1526
1526
|
}
|
|
1527
1527
|
|
|
1528
1528
|
.vidply-settings-footer {
|
|
1529
|
-
border-top:
|
|
1529
|
+
border-top: 0.0625rem solid var(--vidply-white-10);
|
|
1530
1530
|
display: flex;
|
|
1531
1531
|
justify-content: flex-end;
|
|
1532
1532
|
margin-top: var(--vidply-gap-xxl);
|
|
@@ -1537,7 +1537,7 @@
|
|
|
1537
1537
|
background: var(--vidply-white-10);
|
|
1538
1538
|
border-radius: var(--vidply-radius-md);
|
|
1539
1539
|
min-width: auto;
|
|
1540
|
-
padding:
|
|
1540
|
+
padding: 0.625rem var(--vidply-gap-xxl);
|
|
1541
1541
|
}
|
|
1542
1542
|
|
|
1543
1543
|
.vidply-settings-footer .vidply-button:hover {
|
|
@@ -1561,9 +1561,9 @@
|
|
|
1561
1561
|
right: 0;
|
|
1562
1562
|
top: 0;
|
|
1563
1563
|
z-index: 999999;
|
|
1564
|
+
|
|
1564
1565
|
/* Critical iOS fixes */
|
|
1565
1566
|
transform: translate3d(0, 0, 0);
|
|
1566
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
1567
1567
|
margin: 0 !important;
|
|
1568
1568
|
padding: 0 !important;
|
|
1569
1569
|
}
|
|
@@ -1598,7 +1598,7 @@
|
|
|
1598
1598
|
left: 0 !important;
|
|
1599
1599
|
opacity: 0 !important;
|
|
1600
1600
|
order: 0 !important;
|
|
1601
|
-
padding:
|
|
1601
|
+
padding: 1.25rem 1rem 1rem !important;
|
|
1602
1602
|
pointer-events: none !important;
|
|
1603
1603
|
position: absolute !important;
|
|
1604
1604
|
right: 0 !important;
|
|
@@ -1641,7 +1641,7 @@
|
|
|
1641
1641
|
.vidply-player:fullscreen .vidply-controls-right {
|
|
1642
1642
|
display: flex !important;
|
|
1643
1643
|
flex-wrap: nowrap !important;
|
|
1644
|
-
gap:
|
|
1644
|
+
gap: 0.5rem !important;
|
|
1645
1645
|
}
|
|
1646
1646
|
|
|
1647
1647
|
/* Make sure buttons within containers are visible */
|
|
@@ -1680,7 +1680,7 @@
|
|
|
1680
1680
|
align-items: center !important;
|
|
1681
1681
|
display: flex !important;
|
|
1682
1682
|
flex-direction: row !important;
|
|
1683
|
-
gap:
|
|
1683
|
+
gap: 0.625rem !important;
|
|
1684
1684
|
justify-content: flex-start !important;
|
|
1685
1685
|
}
|
|
1686
1686
|
|
|
@@ -1694,7 +1694,7 @@
|
|
|
1694
1694
|
/* Caption positioning in landscape fullscreen */
|
|
1695
1695
|
.vidply-player.vidply-fullscreen .vidply-captions,
|
|
1696
1696
|
.vidply-player:fullscreen .vidply-captions {
|
|
1697
|
-
bottom:
|
|
1697
|
+
bottom: 1rem !important;
|
|
1698
1698
|
transition: bottom 0.3s ease !important;
|
|
1699
1699
|
}
|
|
1700
1700
|
|
|
@@ -1703,7 +1703,7 @@
|
|
|
1703
1703
|
.vidply-player:fullscreen.vidply-controls-visible .vidply-captions,
|
|
1704
1704
|
.vidply-player.vidply-fullscreen.vidply-paused .vidply-captions,
|
|
1705
1705
|
.vidply-player:fullscreen.vidply-paused .vidply-captions {
|
|
1706
|
-
bottom:
|
|
1706
|
+
bottom: 6rem !important;
|
|
1707
1707
|
}
|
|
1708
1708
|
|
|
1709
1709
|
/* Center video in landscape fullscreen */
|
|
@@ -1784,7 +1784,7 @@
|
|
|
1784
1784
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
1785
1785
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
1786
1786
|
position: absolute !important; /* Absolute relative to player */
|
|
1787
|
-
bottom:
|
|
1787
|
+
bottom: 5rem !important; /* Above controls (typical control height is ~5rem) */
|
|
1788
1788
|
left: 0 !important;
|
|
1789
1789
|
right: 0 !important;
|
|
1790
1790
|
z-index: 15 !important; /* Above video (z-index:1), below controls (z-index:30) */
|
|
@@ -1795,26 +1795,26 @@
|
|
|
1795
1795
|
/* Transcript in Fullscreen */
|
|
1796
1796
|
.vidply-player.vidply-fullscreen .vidply-transcript-window,
|
|
1797
1797
|
.vidply-player:fullscreen .vidply-transcript-window {
|
|
1798
|
-
bottom:
|
|
1798
|
+
bottom: 5rem !important;
|
|
1799
1799
|
height: auto !important;
|
|
1800
1800
|
left: auto !important;
|
|
1801
|
-
max-height: calc(100vh -
|
|
1802
|
-
max-width:
|
|
1801
|
+
max-height: calc(100vh - 11.25rem) !important;
|
|
1802
|
+
max-width: 26.25rem;
|
|
1803
1803
|
position: fixed !important;
|
|
1804
|
-
right:
|
|
1804
|
+
right: 1.25rem !important;
|
|
1805
1805
|
top: auto !important;
|
|
1806
|
-
width:
|
|
1806
|
+
width: 26.25rem;
|
|
1807
1807
|
}
|
|
1808
1808
|
|
|
1809
1809
|
/* Loading State */
|
|
1810
1810
|
.vidply-loading {
|
|
1811
1811
|
display: none;
|
|
1812
|
-
height:
|
|
1812
|
+
height: 3.125rem;
|
|
1813
1813
|
left: 50%;
|
|
1814
1814
|
position: absolute;
|
|
1815
1815
|
top: 50%;
|
|
1816
1816
|
transform: translate(-50%, -50%);
|
|
1817
|
-
width:
|
|
1817
|
+
width: 3.125rem;
|
|
1818
1818
|
}
|
|
1819
1819
|
|
|
1820
1820
|
.vidply-player.vidply-buffering .vidply-loading {
|
|
@@ -1823,7 +1823,7 @@
|
|
|
1823
1823
|
|
|
1824
1824
|
.vidply-loading::after {
|
|
1825
1825
|
animation: vidply-spin 0.8s linear infinite;
|
|
1826
|
-
border:
|
|
1826
|
+
border: 0.25rem solid var(--vidply-white-20);
|
|
1827
1827
|
border-radius: 50%;
|
|
1828
1828
|
border-top-color: var(--vidply-white);
|
|
1829
1829
|
content: '';
|
|
@@ -1840,11 +1840,11 @@
|
|
|
1840
1840
|
|
|
1841
1841
|
/* Screen Reader Only */
|
|
1842
1842
|
.vidply-sr-only {
|
|
1843
|
-
height:
|
|
1844
|
-
left: -
|
|
1843
|
+
height: 0.0625rem;
|
|
1844
|
+
left: -625rem;
|
|
1845
1845
|
overflow: hidden;
|
|
1846
1846
|
position: absolute;
|
|
1847
|
-
width:
|
|
1847
|
+
width: 0.0625rem;
|
|
1848
1848
|
}
|
|
1849
1849
|
|
|
1850
1850
|
/* High Contrast Mode Support */
|
|
@@ -1854,7 +1854,7 @@
|
|
|
1854
1854
|
}
|
|
1855
1855
|
|
|
1856
1856
|
.vidply-button:focus {
|
|
1857
|
-
outline:
|
|
1857
|
+
outline: 0.1875rem solid;
|
|
1858
1858
|
}
|
|
1859
1859
|
|
|
1860
1860
|
.vidply-progress-played {
|
|
@@ -1873,17 +1873,10 @@
|
|
|
1873
1873
|
}
|
|
1874
1874
|
}
|
|
1875
1875
|
|
|
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
1876
|
/* Responsive Breakpoints */
|
|
1884
|
-
@media (width <
|
|
1877
|
+
@media (width < 48rem) {
|
|
1885
1878
|
.vidply-controls {
|
|
1886
|
-
padding:
|
|
1879
|
+
padding: 1rem 0.75rem 0.75rem;
|
|
1887
1880
|
}
|
|
1888
1881
|
|
|
1889
1882
|
.vidply-time {
|
|
@@ -1896,12 +1889,12 @@
|
|
|
1896
1889
|
|
|
1897
1890
|
.vidply-settings-dialog {
|
|
1898
1891
|
animation: slideUpFromBottom 0.3s ease;
|
|
1899
|
-
border-radius:
|
|
1892
|
+
border-radius: 1rem 1rem 0 0;
|
|
1900
1893
|
bottom: 0;
|
|
1901
1894
|
margin: 0;
|
|
1902
1895
|
max-height: 90vh;
|
|
1903
1896
|
max-width: 100%;
|
|
1904
|
-
padding:
|
|
1897
|
+
padding: 1.25rem;
|
|
1905
1898
|
position: fixed;
|
|
1906
1899
|
top: auto;
|
|
1907
1900
|
width: 100%;
|
|
@@ -1913,11 +1906,11 @@
|
|
|
1913
1906
|
|
|
1914
1907
|
/* Bottom sheet style for menus - positioned within controls */
|
|
1915
1908
|
.vidply-menu {
|
|
1916
|
-
border-radius:
|
|
1917
|
-
bottom: calc(100% +
|
|
1909
|
+
border-radius: 0.5rem;
|
|
1910
|
+
bottom: calc(100% + 0.25rem);
|
|
1918
1911
|
left: 50%;
|
|
1919
|
-
max-height:
|
|
1920
|
-
min-width:
|
|
1912
|
+
max-height: 15.625rem;
|
|
1913
|
+
min-width: 12.5rem;
|
|
1921
1914
|
position: absolute;
|
|
1922
1915
|
right: auto;
|
|
1923
1916
|
top: auto;
|
|
@@ -1929,7 +1922,7 @@
|
|
|
1929
1922
|
/* Volume menu should stay narrow - positioning handled by JS */
|
|
1930
1923
|
.vidply-volume-menu {
|
|
1931
1924
|
min-width: unset !important;
|
|
1932
|
-
width:
|
|
1925
|
+
width: 3.125rem !important;
|
|
1933
1926
|
}
|
|
1934
1927
|
|
|
1935
1928
|
/* Remove the drag handle on mobile menus */
|
|
@@ -1940,33 +1933,33 @@
|
|
|
1940
1933
|
/* Caption style menu - narrower on mobile */
|
|
1941
1934
|
.vidply-caption-style-menu.vidply-settings-menu {
|
|
1942
1935
|
left: 50%;
|
|
1943
|
-
max-width: calc(100vw -
|
|
1944
|
-
min-width:
|
|
1945
|
-
padding:
|
|
1936
|
+
max-width: calc(100vw - 2.5rem);
|
|
1937
|
+
min-width: 17.5rem;
|
|
1938
|
+
padding: 1rem;
|
|
1946
1939
|
transform: translateX(-50%);
|
|
1947
1940
|
width: auto;
|
|
1948
1941
|
}
|
|
1949
1942
|
|
|
1950
1943
|
.vidply-style-group {
|
|
1951
|
-
margin-bottom:
|
|
1944
|
+
margin-bottom: 1.25rem;
|
|
1952
1945
|
}
|
|
1953
1946
|
|
|
1954
1947
|
.vidply-style-group label {
|
|
1955
|
-
font-size:
|
|
1956
|
-
margin-bottom:
|
|
1948
|
+
font-size: 0.875rem;
|
|
1949
|
+
margin-bottom: 0.5rem;
|
|
1957
1950
|
}
|
|
1958
1951
|
|
|
1959
1952
|
.vidply-style-select,
|
|
1960
1953
|
.vidply-style-group input[type="color"] {
|
|
1961
|
-
font-size:
|
|
1962
|
-
padding:
|
|
1954
|
+
font-size: 1rem;
|
|
1955
|
+
padding: 0.75rem;
|
|
1963
1956
|
}
|
|
1964
1957
|
|
|
1965
1958
|
/* Keep controls in one horizontal row on mobile */
|
|
1966
1959
|
.vidply-controls-buttons {
|
|
1967
1960
|
flex-direction: row;
|
|
1968
1961
|
flex-wrap: nowrap;
|
|
1969
|
-
gap:
|
|
1962
|
+
gap: 0.5rem;
|
|
1970
1963
|
width: 100%;
|
|
1971
1964
|
}
|
|
1972
1965
|
|
|
@@ -1981,7 +1974,7 @@
|
|
|
1981
1974
|
.vidply-button {
|
|
1982
1975
|
min-height: var(--vidply-button-size-mobile);
|
|
1983
1976
|
min-width: var(--vidply-button-size-mobile);
|
|
1984
|
-
padding:
|
|
1977
|
+
padding: 0.3125rem;
|
|
1985
1978
|
}
|
|
1986
1979
|
|
|
1987
1980
|
.vidply-icon {
|
|
@@ -2003,7 +1996,7 @@
|
|
|
2003
1996
|
}
|
|
2004
1997
|
|
|
2005
1998
|
/* Landscape mobile optimization */
|
|
2006
|
-
@media (width <=
|
|
1999
|
+
@media (width <= 56rem) and (orientation: landscape) {
|
|
2007
2000
|
.vidply-menu {
|
|
2008
2001
|
max-height: 50vh;
|
|
2009
2002
|
}
|
|
@@ -2019,9 +2012,9 @@
|
|
|
2019
2012
|
/* Landscape fullscreen playlist - horizontal scrolling */
|
|
2020
2013
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2021
2014
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2022
|
-
bottom:
|
|
2015
|
+
bottom: 4.375rem; /* Directly above controls */
|
|
2023
2016
|
max-height: 30vh; /* Less height in landscape */
|
|
2024
|
-
padding:
|
|
2017
|
+
padding: 0.625rem 0;
|
|
2025
2018
|
overflow-y: hidden;
|
|
2026
2019
|
overflow-x: auto;
|
|
2027
2020
|
touch-action: pan-x; /* Allow horizontal scrolling on touch devices */
|
|
@@ -2033,16 +2026,16 @@
|
|
|
2033
2026
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2034
2027
|
flex-direction: row;
|
|
2035
2028
|
flex-wrap: nowrap;
|
|
2036
|
-
gap:
|
|
2037
|
-
padding: 0
|
|
2029
|
+
gap: 0.5rem;
|
|
2030
|
+
padding: 0 0.625rem;
|
|
2038
2031
|
}
|
|
2039
2032
|
|
|
2040
2033
|
/* Landscape items - smaller vertical cards */
|
|
2041
2034
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2042
2035
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2043
|
-
width:
|
|
2044
|
-
min-width:
|
|
2045
|
-
max-width:
|
|
2036
|
+
width: 11.25rem;
|
|
2037
|
+
min-width: 11.25rem;
|
|
2038
|
+
max-width: 11.25rem;
|
|
2046
2039
|
flex-shrink: 0;
|
|
2047
2040
|
}
|
|
2048
2041
|
|
|
@@ -2055,26 +2048,26 @@
|
|
|
2055
2048
|
|
|
2056
2049
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2057
2050
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2058
|
-
height:
|
|
2051
|
+
height: 6.25rem;
|
|
2059
2052
|
width: 100%;
|
|
2060
|
-
border-radius:
|
|
2053
|
+
border-radius: 0.5rem 0.5rem 0 0;
|
|
2061
2054
|
}
|
|
2062
2055
|
|
|
2063
2056
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2064
2057
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2065
|
-
padding:
|
|
2058
|
+
padding: 0.5rem;
|
|
2066
2059
|
}
|
|
2067
2060
|
|
|
2068
2061
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2069
2062
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2070
|
-
padding: 0
|
|
2071
|
-
font-size:
|
|
2063
|
+
padding: 0 0.625rem 0.5rem;
|
|
2064
|
+
font-size: 0.6875rem;
|
|
2072
2065
|
flex-shrink: 0;
|
|
2073
2066
|
}
|
|
2074
2067
|
}
|
|
2075
2068
|
|
|
2076
2069
|
/* Extra small screens */
|
|
2077
|
-
@media (width <=
|
|
2070
|
+
@media (width <= 30rem) {
|
|
2078
2071
|
.vidply-speed-text {
|
|
2079
2072
|
display: none;
|
|
2080
2073
|
}
|
|
@@ -2102,7 +2095,7 @@
|
|
|
2102
2095
|
.vidply-player [role="link"]:hover,
|
|
2103
2096
|
.vidply-player [tabindex]:not([tabindex="-1"]):hover {
|
|
2104
2097
|
outline: var(--vidply-focus-outline-white);
|
|
2105
|
-
outline-offset:
|
|
2098
|
+
outline-offset: 0.125rem;
|
|
2106
2099
|
}
|
|
2107
2100
|
|
|
2108
2101
|
/* Print Styles */
|
|
@@ -2117,40 +2110,67 @@
|
|
|
2117
2110
|
============================================================================ */
|
|
2118
2111
|
|
|
2119
2112
|
/* Track Info Display (below video, above playlist) */
|
|
2113
|
+
|
|
2114
|
+
/* Track Artwork - Displays album art/poster above audio player */
|
|
2115
|
+
.vidply-track-artwork {
|
|
2116
|
+
aspect-ratio: 16 / 3;
|
|
2117
|
+
background-color: var(--vidply-black);
|
|
2118
|
+
background-position: center;
|
|
2119
|
+
background-repeat: no-repeat;
|
|
2120
|
+
background-size: cover;
|
|
2121
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2122
|
+
order: 1; /* Before video-wrapper */
|
|
2123
|
+
overflow: hidden;
|
|
2124
|
+
position: relative;
|
|
2125
|
+
transition: background-image 0.3s ease-in-out;
|
|
2126
|
+
width: 100%;
|
|
2127
|
+
}
|
|
2128
|
+
|
|
2129
|
+
/* Optional: Add a subtle overlay for better text readability if needed */
|
|
2130
|
+
.vidply-track-artwork::after {
|
|
2131
|
+
background: linear-gradient(180deg, transparent 0%, var(--vidply-black-30) 100%);
|
|
2132
|
+
bottom: 0;
|
|
2133
|
+
content: '';
|
|
2134
|
+
left: 0;
|
|
2135
|
+
pointer-events: none;
|
|
2136
|
+
position: absolute;
|
|
2137
|
+
right: 0;
|
|
2138
|
+
top: 0;
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2120
2141
|
.vidply-track-info {
|
|
2121
2142
|
background: var(--vidply-bg-track-info);
|
|
2122
|
-
border-bottom:
|
|
2143
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2123
2144
|
order: 2; /* After video-wrapper */
|
|
2124
|
-
padding:
|
|
2145
|
+
padding: 1rem 1.25rem;
|
|
2125
2146
|
}
|
|
2126
2147
|
|
|
2127
2148
|
.vidply-track-number {
|
|
2128
2149
|
color: var(--vidply-text-muted);
|
|
2129
|
-
font-size:
|
|
2130
|
-
letter-spacing: 0.
|
|
2131
|
-
margin-bottom:
|
|
2150
|
+
font-size: 0.75rem;
|
|
2151
|
+
letter-spacing: 0.0313rem;
|
|
2152
|
+
margin-bottom: 0.25rem;
|
|
2132
2153
|
text-transform: uppercase;
|
|
2133
2154
|
}
|
|
2134
2155
|
|
|
2135
2156
|
.vidply-track-title {
|
|
2136
2157
|
color: var(--vidply-white);
|
|
2137
|
-
font-size:
|
|
2158
|
+
font-size: 1.125rem;
|
|
2138
2159
|
font-weight: 600;
|
|
2139
|
-
margin-bottom:
|
|
2160
|
+
margin-bottom: 0.25rem;
|
|
2140
2161
|
}
|
|
2141
2162
|
|
|
2142
2163
|
.vidply-track-artist {
|
|
2143
2164
|
color: var(--vidply-white-80);
|
|
2144
|
-
font-size:
|
|
2165
|
+
font-size: 0.875rem;
|
|
2145
2166
|
}
|
|
2146
2167
|
|
|
2147
2168
|
/* Playlist Panel */
|
|
2148
2169
|
.vidply-playlist-panel {
|
|
2149
2170
|
background: var(--vidply-bg-playlist);
|
|
2150
|
-
border-top:
|
|
2151
|
-
max-height:
|
|
2171
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
2172
|
+
max-height: 25rem;
|
|
2152
2173
|
transform: translate3d(0, 0, 0);
|
|
2153
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
2154
2174
|
order: 3; /* After track info */
|
|
2155
2175
|
-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
|
|
2156
2176
|
overflow-y: auto;
|
|
@@ -2164,10 +2184,10 @@
|
|
|
2164
2184
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2165
2185
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2166
2186
|
background: linear-gradient(to top, rgb(0 0 0 / 95%) 0%, rgb(0 0 0 / 90%) 100%);
|
|
2167
|
-
backdrop-filter: blur(
|
|
2187
|
+
backdrop-filter: blur(0.625rem);
|
|
2168
2188
|
border: none;
|
|
2169
|
-
border-top:
|
|
2170
|
-
bottom:
|
|
2189
|
+
border-top: 0.0625rem solid var(--vidply-border);
|
|
2190
|
+
bottom: 5rem; /* Directly above controls */
|
|
2171
2191
|
left: 0;
|
|
2172
2192
|
max-height: 50vh; /* Take up to half the screen */
|
|
2173
2193
|
opacity: 0;
|
|
@@ -2177,7 +2197,7 @@
|
|
|
2177
2197
|
position: absolute !important; /* Force absolute positioning over video */
|
|
2178
2198
|
right: 0;
|
|
2179
2199
|
touch-action: pan-y; /* Allow vertical scrolling on touch devices */
|
|
2180
|
-
transform: translateY(
|
|
2200
|
+
transform: translateY(1.25rem);
|
|
2181
2201
|
z-index: var(--vidply-z-playlist); /* Above video but below controls */
|
|
2182
2202
|
}
|
|
2183
2203
|
|
|
@@ -2205,8 +2225,8 @@
|
|
|
2205
2225
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2206
2226
|
display: flex;
|
|
2207
2227
|
flex-direction: row;
|
|
2208
|
-
gap:
|
|
2209
|
-
padding:
|
|
2228
|
+
gap: 0.75rem;
|
|
2229
|
+
padding: 0.5rem 1rem;
|
|
2210
2230
|
overflow-x: auto;
|
|
2211
2231
|
overflow-y: hidden;
|
|
2212
2232
|
scroll-snap-type: x mandatory;
|
|
@@ -2217,17 +2237,17 @@
|
|
|
2217
2237
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2218
2238
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2219
2239
|
background: var(--vidply-black-50);
|
|
2220
|
-
border-bottom:
|
|
2221
|
-
font-size:
|
|
2222
|
-
padding:
|
|
2240
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
2241
|
+
font-size: 0.75rem;
|
|
2242
|
+
padding: 0.625rem 1rem;
|
|
2223
2243
|
}
|
|
2224
2244
|
|
|
2225
2245
|
/* Fullscreen playlist items - horizontal card style */
|
|
2226
2246
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2227
2247
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2228
2248
|
flex: 0 0 auto;
|
|
2229
|
-
min-width:
|
|
2230
|
-
max-width:
|
|
2249
|
+
min-width: 17.5rem;
|
|
2250
|
+
max-width: 20rem;
|
|
2231
2251
|
scroll-snap-align: start;
|
|
2232
2252
|
}
|
|
2233
2253
|
|
|
@@ -2235,10 +2255,10 @@
|
|
|
2235
2255
|
.vidply-player:fullscreen .vidply-playlist-item-button {
|
|
2236
2256
|
flex-direction: column;
|
|
2237
2257
|
align-items: stretch;
|
|
2238
|
-
gap:
|
|
2258
|
+
gap: 0.5rem;
|
|
2239
2259
|
padding: 0;
|
|
2240
2260
|
background: var(--vidply-black-40);
|
|
2241
|
-
border-radius:
|
|
2261
|
+
border-radius: 0.5rem;
|
|
2242
2262
|
overflow: hidden;
|
|
2243
2263
|
transition: all 0.2s ease;
|
|
2244
2264
|
}
|
|
@@ -2246,27 +2266,27 @@
|
|
|
2246
2266
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-button:hover,
|
|
2247
2267
|
.vidply-player:fullscreen .vidply-playlist-item-button:hover {
|
|
2248
2268
|
background: var(--vidply-white-10);
|
|
2249
|
-
transform: translateY(-
|
|
2250
|
-
box-shadow: 0
|
|
2269
|
+
transform: translateY(-0.25rem);
|
|
2270
|
+
box-shadow: 0 0.5rem 1.5rem var(--vidply-black-60);
|
|
2251
2271
|
}
|
|
2252
2272
|
|
|
2253
2273
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2254
2274
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2255
2275
|
width: 100%;
|
|
2256
|
-
height:
|
|
2276
|
+
height: 10rem;
|
|
2257
2277
|
border-radius: 0;
|
|
2258
2278
|
}
|
|
2259
2279
|
|
|
2260
2280
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2261
2281
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2262
|
-
padding:
|
|
2282
|
+
padding: 0.75rem;
|
|
2263
2283
|
}
|
|
2264
2284
|
|
|
2265
2285
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-title,
|
|
2266
2286
|
.vidply-player:fullscreen .vidply-playlist-item-title {
|
|
2267
|
-
font-size:
|
|
2287
|
+
font-size: 0.875rem;
|
|
2268
2288
|
font-weight: 600;
|
|
2269
|
-
margin-bottom:
|
|
2289
|
+
margin-bottom: 0.25rem;
|
|
2270
2290
|
white-space: normal;
|
|
2271
2291
|
overflow: hidden;
|
|
2272
2292
|
text-overflow: ellipsis;
|
|
@@ -2277,7 +2297,7 @@
|
|
|
2277
2297
|
|
|
2278
2298
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-artist,
|
|
2279
2299
|
.vidply-player:fullscreen .vidply-playlist-item-artist {
|
|
2280
|
-
font-size:
|
|
2300
|
+
font-size: 0.75rem;
|
|
2281
2301
|
opacity: 0.8;
|
|
2282
2302
|
}
|
|
2283
2303
|
|
|
@@ -2289,8 +2309,8 @@
|
|
|
2289
2309
|
/* Fullscreen playlist scrollbar styling - horizontal */
|
|
2290
2310
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar,
|
|
2291
2311
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar {
|
|
2292
|
-
height:
|
|
2293
|
-
width:
|
|
2312
|
+
height: 0.5rem;
|
|
2313
|
+
width: 0.625rem;
|
|
2294
2314
|
}
|
|
2295
2315
|
|
|
2296
2316
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-track,
|
|
@@ -2301,7 +2321,7 @@
|
|
|
2301
2321
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb,
|
|
2302
2322
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2303
2323
|
background: var(--vidply-white-30);
|
|
2304
|
-
border-radius:
|
|
2324
|
+
border-radius: 0.3125rem;
|
|
2305
2325
|
}
|
|
2306
2326
|
|
|
2307
2327
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb:hover,
|
|
@@ -2312,7 +2332,7 @@
|
|
|
2312
2332
|
/* Horizontal scrollbar for playlist list */
|
|
2313
2333
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar,
|
|
2314
2334
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar {
|
|
2315
|
-
height:
|
|
2335
|
+
height: 0.375rem;
|
|
2316
2336
|
}
|
|
2317
2337
|
|
|
2318
2338
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-track,
|
|
@@ -2323,7 +2343,7 @@
|
|
|
2323
2343
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb,
|
|
2324
2344
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb {
|
|
2325
2345
|
background: var(--vidply-white-20);
|
|
2326
|
-
border-radius:
|
|
2346
|
+
border-radius: 0.1875rem;
|
|
2327
2347
|
}
|
|
2328
2348
|
|
|
2329
2349
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb:hover,
|
|
@@ -2340,7 +2360,7 @@
|
|
|
2340
2360
|
/* Active item styling in fullscreen */
|
|
2341
2361
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-active .vidply-playlist-item-button,
|
|
2342
2362
|
.vidply-player:fullscreen .vidply-playlist-item-active .vidply-playlist-item-button {
|
|
2343
|
-
border:
|
|
2363
|
+
border: 0.125rem solid var(--vidply-primary-light);
|
|
2344
2364
|
background: var(--vidply-primary-15);
|
|
2345
2365
|
}
|
|
2346
2366
|
|
|
@@ -2351,12 +2371,12 @@
|
|
|
2351
2371
|
|
|
2352
2372
|
.vidply-playlist-header {
|
|
2353
2373
|
background: var(--vidply-bg-playlist-header);
|
|
2354
|
-
border-bottom:
|
|
2374
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2355
2375
|
color: var(--vidply-white-90);
|
|
2356
|
-
font-size:
|
|
2376
|
+
font-size: 0.8125rem;
|
|
2357
2377
|
font-weight: 600;
|
|
2358
|
-
letter-spacing: 0.
|
|
2359
|
-
padding:
|
|
2378
|
+
letter-spacing: 0.0313rem;
|
|
2379
|
+
padding: 0.75rem 1rem;
|
|
2360
2380
|
position: sticky;
|
|
2361
2381
|
text-transform: uppercase;
|
|
2362
2382
|
top: 0;
|
|
@@ -2366,12 +2386,12 @@
|
|
|
2366
2386
|
.vidply-playlist-list {
|
|
2367
2387
|
list-style: none;
|
|
2368
2388
|
margin: 0;
|
|
2369
|
-
padding:
|
|
2389
|
+
padding: 0.25rem 0;
|
|
2370
2390
|
}
|
|
2371
2391
|
|
|
2372
2392
|
/* Playlist Items */
|
|
2373
2393
|
.vidply-playlist-item {
|
|
2374
|
-
border-left:
|
|
2394
|
+
border-left: 0.1875rem solid transparent;
|
|
2375
2395
|
position: relative;
|
|
2376
2396
|
}
|
|
2377
2397
|
|
|
@@ -2384,8 +2404,8 @@
|
|
|
2384
2404
|
cursor: pointer;
|
|
2385
2405
|
display: flex;
|
|
2386
2406
|
font: inherit;
|
|
2387
|
-
gap:
|
|
2388
|
-
padding:
|
|
2407
|
+
gap: 0.75rem;
|
|
2408
|
+
padding: 0.75rem 1rem;
|
|
2389
2409
|
text-align: left;
|
|
2390
2410
|
transition: var(--vidply-transition-default);
|
|
2391
2411
|
width: 100%;
|
|
@@ -2407,7 +2427,7 @@
|
|
|
2407
2427
|
.vidply-playlist-item-button:focus-visible {
|
|
2408
2428
|
background: var(--vidply-white-08);
|
|
2409
2429
|
outline: var(--vidply-focus-outline-white);
|
|
2410
|
-
outline-offset: -
|
|
2430
|
+
outline-offset: -0.125rem;
|
|
2411
2431
|
z-index: 1;
|
|
2412
2432
|
}
|
|
2413
2433
|
|
|
@@ -2422,19 +2442,19 @@
|
|
|
2422
2442
|
background: var(--vidply-primary-20);
|
|
2423
2443
|
border-left-color: var(--vidply-primary);
|
|
2424
2444
|
outline: var(--vidply-focus-outline-white);
|
|
2425
|
-
outline-offset: -
|
|
2445
|
+
outline-offset: -0.125rem;
|
|
2426
2446
|
z-index: 2;
|
|
2427
2447
|
}
|
|
2428
2448
|
|
|
2429
2449
|
/* Show focus ring on listbox when focused */
|
|
2430
2450
|
.vidply-playlist-list:focus {
|
|
2431
|
-
outline:
|
|
2432
|
-
outline-offset:
|
|
2451
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2452
|
+
outline-offset: 0.125rem;
|
|
2433
2453
|
}
|
|
2434
2454
|
|
|
2435
2455
|
.vidply-playlist-list:focus-visible {
|
|
2436
|
-
outline:
|
|
2437
|
-
outline-offset:
|
|
2456
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2457
|
+
outline-offset: 0.125rem;
|
|
2438
2458
|
}
|
|
2439
2459
|
|
|
2440
2460
|
.vidply-playlist-item-active {
|
|
@@ -2457,7 +2477,7 @@
|
|
|
2457
2477
|
.vidply-playlist-item-active .vidply-playlist-item-button:focus-visible {
|
|
2458
2478
|
background: var(--vidply-primary-20);
|
|
2459
2479
|
outline: var(--vidply-focus-outline-white);
|
|
2460
|
-
outline-offset: -
|
|
2480
|
+
outline-offset: -0.125rem;
|
|
2461
2481
|
}
|
|
2462
2482
|
|
|
2463
2483
|
/* Playlist Thumbnail */
|
|
@@ -2466,20 +2486,20 @@
|
|
|
2466
2486
|
background-color: var(--vidply-white-10);
|
|
2467
2487
|
background-position: center;
|
|
2468
2488
|
background-size: cover;
|
|
2469
|
-
border-radius:
|
|
2489
|
+
border-radius: 0.25rem;
|
|
2470
2490
|
display: flex;
|
|
2471
2491
|
flex-shrink: 0;
|
|
2472
|
-
height:
|
|
2492
|
+
height: 2.8125rem;
|
|
2473
2493
|
justify-content: center;
|
|
2474
2494
|
overflow: hidden;
|
|
2475
|
-
width:
|
|
2495
|
+
width: 5rem;
|
|
2476
2496
|
}
|
|
2477
2497
|
|
|
2478
2498
|
.vidply-playlist-thumbnail-icon {
|
|
2479
2499
|
color: var(--vidply-text-subtle);
|
|
2480
|
-
height:
|
|
2500
|
+
height: 2rem;
|
|
2481
2501
|
transition: var(--vidply-transition-default);
|
|
2482
|
-
width:
|
|
2502
|
+
width: 2rem;
|
|
2483
2503
|
}
|
|
2484
2504
|
|
|
2485
2505
|
.vidply-playlist-item-button:hover .vidply-playlist-thumbnail-icon {
|
|
@@ -2501,9 +2521,9 @@
|
|
|
2501
2521
|
.vidply-playlist-item-title {
|
|
2502
2522
|
color: var(--vidply-white);
|
|
2503
2523
|
display: block;
|
|
2504
|
-
font-size:
|
|
2524
|
+
font-size: 0.875rem;
|
|
2505
2525
|
font-weight: 500;
|
|
2506
|
-
margin-bottom:
|
|
2526
|
+
margin-bottom: 0.25rem;
|
|
2507
2527
|
overflow: hidden;
|
|
2508
2528
|
text-overflow: ellipsis;
|
|
2509
2529
|
white-space: nowrap;
|
|
@@ -2516,7 +2536,7 @@
|
|
|
2516
2536
|
.vidply-playlist-item-artist {
|
|
2517
2537
|
color: var(--vidply-text-disabled);
|
|
2518
2538
|
display: block;
|
|
2519
|
-
font-size:
|
|
2539
|
+
font-size: 0.75rem;
|
|
2520
2540
|
overflow: hidden;
|
|
2521
2541
|
text-overflow: ellipsis;
|
|
2522
2542
|
white-space: nowrap;
|
|
@@ -2525,10 +2545,10 @@
|
|
|
2525
2545
|
/* Playlist Item Icon */
|
|
2526
2546
|
.vidply-playlist-item-icon {
|
|
2527
2547
|
flex-shrink: 0;
|
|
2528
|
-
height:
|
|
2548
|
+
height: 1.25rem;
|
|
2529
2549
|
opacity: 0;
|
|
2530
2550
|
transition: opacity 0.2s ease;
|
|
2531
|
-
width:
|
|
2551
|
+
width: 1.25rem;
|
|
2532
2552
|
}
|
|
2533
2553
|
|
|
2534
2554
|
.vidply-playlist-item-active .vidply-playlist-item-icon {
|
|
@@ -2543,7 +2563,7 @@
|
|
|
2543
2563
|
}
|
|
2544
2564
|
|
|
2545
2565
|
.vidply-playlist-panel::-webkit-scrollbar {
|
|
2546
|
-
width:
|
|
2566
|
+
width: 0.5rem;
|
|
2547
2567
|
}
|
|
2548
2568
|
|
|
2549
2569
|
.vidply-playlist-panel::-webkit-scrollbar-track {
|
|
@@ -2552,7 +2572,7 @@
|
|
|
2552
2572
|
|
|
2553
2573
|
.vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2554
2574
|
background: var(--vidply-scrollbar-thumb);
|
|
2555
|
-
border-radius:
|
|
2575
|
+
border-radius: 0.25rem;
|
|
2556
2576
|
}
|
|
2557
2577
|
|
|
2558
2578
|
.vidply-playlist-panel::-webkit-scrollbar-thumb:hover {
|
|
@@ -2561,7 +2581,7 @@
|
|
|
2561
2581
|
|
|
2562
2582
|
/* Audio Player with Playlist */
|
|
2563
2583
|
.vidply-player.vidply-audio.vidply-has-playlist {
|
|
2564
|
-
min-height:
|
|
2584
|
+
min-height: 12.5rem;
|
|
2565
2585
|
}
|
|
2566
2586
|
|
|
2567
2587
|
.vidply-player.vidply-audio.vidply-has-playlist audio {
|
|
@@ -2578,18 +2598,18 @@
|
|
|
2578
2598
|
|
|
2579
2599
|
/* Transcript Window */
|
|
2580
2600
|
.vidply-transcript-window {
|
|
2581
|
-
backdrop-filter: blur(
|
|
2601
|
+
backdrop-filter: blur(0.625rem);
|
|
2582
2602
|
background: var(--vidply-bg-transcript);
|
|
2583
|
-
border:
|
|
2584
|
-
border-radius:
|
|
2585
|
-
box-shadow: 0
|
|
2603
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2604
|
+
border-radius: 0.5rem;
|
|
2605
|
+
box-shadow: 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2586
2606
|
display: none;
|
|
2587
2607
|
flex-direction: column;
|
|
2588
|
-
min-width:
|
|
2608
|
+
min-width: 26.25rem;
|
|
2589
2609
|
order: 4; /* After video-wrapper (1), track-info (2), and playlist-panel (3) */
|
|
2590
2610
|
position: fixed;
|
|
2591
2611
|
top: 0;
|
|
2592
|
-
width:
|
|
2612
|
+
width: 26.25rem;
|
|
2593
2613
|
z-index: var(--vidply-z-transcript);
|
|
2594
2614
|
}
|
|
2595
2615
|
|
|
@@ -2597,13 +2617,13 @@
|
|
|
2597
2617
|
|
|
2598
2618
|
/* Minimum height for audio player transcript */
|
|
2599
2619
|
.vidply-player.vidply-audio .vidply-transcript-window {
|
|
2600
|
-
min-height:
|
|
2620
|
+
min-height: 12.5rem;
|
|
2601
2621
|
}
|
|
2602
2622
|
|
|
2603
2623
|
.vidply-transcript-header {
|
|
2604
2624
|
align-items: center;
|
|
2605
2625
|
background: #282828;
|
|
2606
|
-
border-bottom:
|
|
2626
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2607
2627
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
2608
2628
|
cursor: move;
|
|
2609
2629
|
display: flex;
|
|
@@ -2615,21 +2635,21 @@
|
|
|
2615
2635
|
|
|
2616
2636
|
.vidply-transcript-header:focus,
|
|
2617
2637
|
.vidply-transcript-header:focus-visible {
|
|
2618
|
-
box-shadow: 0 0 0
|
|
2619
|
-
outline:
|
|
2620
|
-
outline-offset:
|
|
2638
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
2639
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
2640
|
+
outline-offset: 0.125rem;
|
|
2621
2641
|
}
|
|
2622
2642
|
|
|
2623
2643
|
.vidply-transcript-header h3 {
|
|
2624
2644
|
color: var(--vidply-white);
|
|
2625
2645
|
font-size: var(--vidply-font-lg);
|
|
2626
2646
|
font-weight: 600;
|
|
2627
|
-
height:
|
|
2628
|
-
left: -
|
|
2647
|
+
height: 0.0625rem;
|
|
2648
|
+
left: -625rem;
|
|
2629
2649
|
margin: 0;
|
|
2630
2650
|
overflow: hidden;
|
|
2631
2651
|
position: absolute;
|
|
2632
|
-
width:
|
|
2652
|
+
width: 0.0625rem;
|
|
2633
2653
|
}
|
|
2634
2654
|
|
|
2635
2655
|
.vidply-transcript-close {
|
|
@@ -2654,7 +2674,7 @@
|
|
|
2654
2674
|
|
|
2655
2675
|
.vidply-transcript-close:focus {
|
|
2656
2676
|
outline: var(--vidply-focus-outline-white);
|
|
2657
|
-
outline-offset:
|
|
2677
|
+
outline-offset: 0.125rem;
|
|
2658
2678
|
}
|
|
2659
2679
|
|
|
2660
2680
|
.vidply-transcript-close .vidply-icon {
|
|
@@ -2668,19 +2688,19 @@
|
|
|
2668
2688
|
overflow-y: auto;
|
|
2669
2689
|
|
|
2670
2690
|
/* iOS momentum scrolling */
|
|
2671
|
-
padding:
|
|
2691
|
+
padding: 0.75rem 0;
|
|
2672
2692
|
touch-action: pan-y;
|
|
2673
2693
|
}
|
|
2674
2694
|
|
|
2675
2695
|
.vidply-transcript-entry {
|
|
2676
2696
|
background: none;
|
|
2677
2697
|
border: none;
|
|
2678
|
-
border-left:
|
|
2698
|
+
border-left: 0.1875rem solid transparent;
|
|
2679
2699
|
color: inherit;
|
|
2680
2700
|
cursor: pointer;
|
|
2681
2701
|
display: block;
|
|
2682
2702
|
font: inherit;
|
|
2683
|
-
padding:
|
|
2703
|
+
padding: 0.75rem 1.25rem;
|
|
2684
2704
|
text-align: left;
|
|
2685
2705
|
transition: background 0.2s ease;
|
|
2686
2706
|
width: 100%;
|
|
@@ -2701,8 +2721,8 @@
|
|
|
2701
2721
|
font-family: 'Courier New', monospace;
|
|
2702
2722
|
font-size: 100%;
|
|
2703
2723
|
font-weight: 600;
|
|
2704
|
-
margin-bottom:
|
|
2705
|
-
margin-right:
|
|
2724
|
+
margin-bottom: 0.25rem;
|
|
2725
|
+
margin-right: 0.5rem;
|
|
2706
2726
|
}
|
|
2707
2727
|
|
|
2708
2728
|
.vidply-transcript-text {
|
|
@@ -2724,7 +2744,7 @@
|
|
|
2724
2744
|
/* Transcript entry types */
|
|
2725
2745
|
.vidply-transcript-description {
|
|
2726
2746
|
background: rgb(100 149 237 / 8%); /* Subtle blue tint for descriptions */
|
|
2727
|
-
border-left:
|
|
2747
|
+
border-left: 0.1875rem solid #8BB3FB;
|
|
2728
2748
|
}
|
|
2729
2749
|
|
|
2730
2750
|
.vidply-transcript-description .vidply-transcript-text {
|
|
@@ -2764,7 +2784,7 @@
|
|
|
2764
2784
|
}
|
|
2765
2785
|
|
|
2766
2786
|
.vidply-transcript-content::-webkit-scrollbar {
|
|
2767
|
-
width:
|
|
2787
|
+
width: 0.5rem;
|
|
2768
2788
|
}
|
|
2769
2789
|
|
|
2770
2790
|
.vidply-transcript-content::-webkit-scrollbar-track {
|
|
@@ -2773,7 +2793,7 @@
|
|
|
2773
2793
|
|
|
2774
2794
|
.vidply-transcript-content::-webkit-scrollbar-thumb {
|
|
2775
2795
|
background: var(--vidply-scrollbar-thumb);
|
|
2776
|
-
border-radius:
|
|
2796
|
+
border-radius: 0.25rem;
|
|
2777
2797
|
}
|
|
2778
2798
|
|
|
2779
2799
|
.vidply-transcript-content::-webkit-scrollbar-thumb:hover {
|
|
@@ -2784,7 +2804,7 @@
|
|
|
2784
2804
|
.vidply-transcript-header-left {
|
|
2785
2805
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
2786
2806
|
display: flex;
|
|
2787
|
-
gap:
|
|
2807
|
+
gap: 1rem;
|
|
2788
2808
|
position: relative;
|
|
2789
2809
|
}
|
|
2790
2810
|
|
|
@@ -2798,21 +2818,21 @@
|
|
|
2798
2818
|
align-self: center; /* Center checkbox label vertically in header */
|
|
2799
2819
|
cursor: pointer;
|
|
2800
2820
|
display: flex;
|
|
2801
|
-
gap:
|
|
2821
|
+
gap: 0.375rem;
|
|
2802
2822
|
user-select: none;
|
|
2803
2823
|
white-space: nowrap;
|
|
2804
2824
|
}
|
|
2805
2825
|
|
|
2806
2826
|
.vidply-transcript-autoscroll-label input[type="checkbox"] {
|
|
2807
2827
|
cursor: pointer;
|
|
2808
|
-
height:
|
|
2828
|
+
height: 1rem;
|
|
2809
2829
|
margin: 0;
|
|
2810
|
-
width:
|
|
2830
|
+
width: 1rem;
|
|
2811
2831
|
}
|
|
2812
2832
|
|
|
2813
2833
|
.vidply-transcript-autoscroll-text {
|
|
2814
2834
|
color: var(--vidply-text-muted);
|
|
2815
|
-
font-size:
|
|
2835
|
+
font-size: 0.8125rem;
|
|
2816
2836
|
transition: color 0.2s ease;
|
|
2817
2837
|
}
|
|
2818
2838
|
|
|
@@ -2826,32 +2846,32 @@
|
|
|
2826
2846
|
align-self: center; /* Center this wrapper vertically in header */
|
|
2827
2847
|
display: flex;
|
|
2828
2848
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
2829
|
-
gap:
|
|
2849
|
+
gap: 0.5rem;
|
|
2830
2850
|
}
|
|
2831
2851
|
|
|
2832
2852
|
.vidply-transcript-language-label {
|
|
2833
2853
|
/* Visible label for voice input accessibility */
|
|
2834
2854
|
color: var(--vidply-text-muted);
|
|
2835
2855
|
cursor: pointer;
|
|
2836
|
-
font-size:
|
|
2856
|
+
font-size: 0.8125rem;
|
|
2837
2857
|
font-weight: 400;
|
|
2838
|
-
margin-left:
|
|
2858
|
+
margin-left: 0.5rem;
|
|
2839
2859
|
white-space: nowrap;
|
|
2840
2860
|
}
|
|
2841
2861
|
|
|
2842
2862
|
.vidply-transcript-language-select {
|
|
2843
2863
|
background: var(--vidply-bg-menu);
|
|
2844
|
-
border:
|
|
2845
|
-
border-radius:
|
|
2864
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2865
|
+
border-radius: 0.25rem;
|
|
2846
2866
|
color: var(--vidply-text);
|
|
2847
|
-
font-size:
|
|
2848
|
-
max-width:
|
|
2849
|
-
padding:
|
|
2867
|
+
font-size: 0.875rem;
|
|
2868
|
+
max-width: 7.5rem;
|
|
2869
|
+
padding: 0.25rem 0.5rem;
|
|
2850
2870
|
}
|
|
2851
2871
|
|
|
2852
2872
|
.vidply-transcript-language-select:focus {
|
|
2853
2873
|
outline: var(--vidply-focus-outline);
|
|
2854
|
-
outline-offset:
|
|
2874
|
+
outline-offset: 0.125rem;
|
|
2855
2875
|
}
|
|
2856
2876
|
|
|
2857
2877
|
/* Transcript Settings Button */
|
|
@@ -2879,7 +2899,7 @@
|
|
|
2879
2899
|
|
|
2880
2900
|
.vidply-transcript-settings:focus {
|
|
2881
2901
|
outline: var(--vidply-focus-outline-white);
|
|
2882
|
-
outline-offset:
|
|
2902
|
+
outline-offset: 0.125rem;
|
|
2883
2903
|
}
|
|
2884
2904
|
|
|
2885
2905
|
.vidply-transcript-settings .vidply-icon {
|
|
@@ -2890,31 +2910,31 @@
|
|
|
2890
2910
|
/* Transcript Settings Menu */
|
|
2891
2911
|
.vidply-transcript-settings-menu {
|
|
2892
2912
|
background: var(--vidply-bg-menu);
|
|
2893
|
-
border:
|
|
2913
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2894
2914
|
border-radius: var(--vidply-radius-md);
|
|
2895
2915
|
box-shadow: var(--vidply-shadow-lg);
|
|
2896
2916
|
display: none;
|
|
2897
|
-
min-width:
|
|
2917
|
+
min-width: 15rem;
|
|
2898
2918
|
padding: var(--vidply-gap-sm);
|
|
2899
2919
|
position: absolute;
|
|
2900
2920
|
z-index: 100;
|
|
2901
2921
|
}
|
|
2902
2922
|
|
|
2903
2923
|
.vidply-transcript-settings-menu::after {
|
|
2904
|
-
border-bottom:
|
|
2905
|
-
border-left:
|
|
2906
|
-
border-right:
|
|
2924
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
2925
|
+
border-left: 0.375rem solid transparent;
|
|
2926
|
+
border-right: 0.375rem solid transparent;
|
|
2907
2927
|
bottom: 100%;
|
|
2908
2928
|
content: '';
|
|
2909
2929
|
height: 0;
|
|
2910
|
-
left:
|
|
2930
|
+
left: 0.5rem;
|
|
2911
2931
|
position: absolute;
|
|
2912
2932
|
width: 0;
|
|
2913
2933
|
}
|
|
2914
2934
|
|
|
2915
2935
|
.vidply-transcript-settings-menu.vidply-menu-above::after {
|
|
2916
2936
|
border-bottom: none;
|
|
2917
|
-
border-top:
|
|
2937
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
2918
2938
|
bottom: auto;
|
|
2919
2939
|
top: 100%;
|
|
2920
2940
|
}
|
|
@@ -2930,7 +2950,7 @@
|
|
|
2930
2950
|
display: flex;
|
|
2931
2951
|
font-size: var(--vidply-font-base);
|
|
2932
2952
|
gap: var(--vidply-gap-md);
|
|
2933
|
-
padding: var(--vidply-padding-md)
|
|
2953
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
2934
2954
|
text-align: left;
|
|
2935
2955
|
transition: var(--vidply-transition-normal);
|
|
2936
2956
|
width: 100%;
|
|
@@ -2946,8 +2966,8 @@
|
|
|
2946
2966
|
|
|
2947
2967
|
.vidply-transcript-settings-item:focus {
|
|
2948
2968
|
background: var(--vidply-primary-25);
|
|
2949
|
-
outline:
|
|
2950
|
-
outline-offset: -
|
|
2969
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
2970
|
+
outline-offset: -0.125rem;
|
|
2951
2971
|
}
|
|
2952
2972
|
|
|
2953
2973
|
.vidply-transcript-settings-item:focus span {
|
|
@@ -2968,16 +2988,16 @@
|
|
|
2968
2988
|
/* Move Mode Visual Feedback */
|
|
2969
2989
|
.vidply-transcript-move-mode {
|
|
2970
2990
|
animation: transcriptPulse 0.5s ease-in-out 2;
|
|
2971
|
-
box-shadow: 0 0 0
|
|
2991
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2972
2992
|
}
|
|
2973
2993
|
|
|
2974
2994
|
@keyframes transcriptPulse {
|
|
2975
2995
|
0%, 100% {
|
|
2976
|
-
box-shadow: 0 0 0
|
|
2996
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2977
2997
|
}
|
|
2978
2998
|
|
|
2979
2999
|
50% {
|
|
2980
|
-
box-shadow: 0 0 0
|
|
3000
|
+
box-shadow: 0 0 0 0.375rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2981
3001
|
}
|
|
2982
3002
|
}
|
|
2983
3003
|
|
|
@@ -2991,67 +3011,67 @@
|
|
|
2991
3011
|
.vidply-transcript-resize-nw,
|
|
2992
3012
|
.vidply-transcript-resize-se,
|
|
2993
3013
|
.vidply-transcript-resize-sw {
|
|
2994
|
-
height:
|
|
2995
|
-
width:
|
|
3014
|
+
height: 1rem;
|
|
3015
|
+
width: 1rem;
|
|
2996
3016
|
}
|
|
2997
3017
|
|
|
2998
3018
|
.vidply-transcript-resize-n,
|
|
2999
3019
|
.vidply-transcript-resize-s {
|
|
3000
3020
|
cursor: ns-resize;
|
|
3001
|
-
height:
|
|
3002
|
-
left:
|
|
3003
|
-
right:
|
|
3021
|
+
height: 0.5rem;
|
|
3022
|
+
left: 1rem;
|
|
3023
|
+
right: 1rem;
|
|
3004
3024
|
}
|
|
3005
3025
|
|
|
3006
3026
|
.vidply-transcript-resize-e,
|
|
3007
3027
|
.vidply-transcript-resize-w {
|
|
3008
|
-
bottom:
|
|
3028
|
+
bottom: 1rem;
|
|
3009
3029
|
cursor: ew-resize;
|
|
3010
|
-
top:
|
|
3011
|
-
width:
|
|
3030
|
+
top: 1rem;
|
|
3031
|
+
width: 0.5rem;
|
|
3012
3032
|
}
|
|
3013
3033
|
|
|
3014
|
-
.vidply-transcript-resize-n { top: -
|
|
3015
|
-
.vidply-transcript-resize-s { bottom: -
|
|
3016
|
-
.vidply-transcript-resize-e { right: -
|
|
3017
|
-
.vidply-transcript-resize-w { left: -
|
|
3034
|
+
.vidply-transcript-resize-n { top: -0.25rem; }
|
|
3035
|
+
.vidply-transcript-resize-s { bottom: -0.25rem; }
|
|
3036
|
+
.vidply-transcript-resize-e { right: -0.25rem; }
|
|
3037
|
+
.vidply-transcript-resize-w { left: -0.25rem; }
|
|
3018
3038
|
|
|
3019
3039
|
.vidply-transcript-resize-ne {
|
|
3020
3040
|
cursor: nesw-resize;
|
|
3021
|
-
right: -
|
|
3022
|
-
top: -
|
|
3041
|
+
right: -0.5rem;
|
|
3042
|
+
top: -0.5rem;
|
|
3023
3043
|
}
|
|
3024
3044
|
|
|
3025
3045
|
.vidply-transcript-resize-nw {
|
|
3026
3046
|
cursor: nwse-resize;
|
|
3027
|
-
left: -
|
|
3028
|
-
top: -
|
|
3047
|
+
left: -0.5rem;
|
|
3048
|
+
top: -0.5rem;
|
|
3029
3049
|
}
|
|
3030
3050
|
|
|
3031
3051
|
.vidply-transcript-resize-se {
|
|
3032
|
-
bottom: -
|
|
3052
|
+
bottom: -0.5rem;
|
|
3033
3053
|
cursor: nwse-resize;
|
|
3034
|
-
right: -
|
|
3054
|
+
right: -0.5rem;
|
|
3035
3055
|
}
|
|
3036
3056
|
|
|
3037
3057
|
.vidply-transcript-resize-sw {
|
|
3038
|
-
bottom: -
|
|
3058
|
+
bottom: -0.5rem;
|
|
3039
3059
|
cursor: nesw-resize;
|
|
3040
|
-
left: -
|
|
3060
|
+
left: -0.5rem;
|
|
3041
3061
|
}
|
|
3042
3062
|
|
|
3043
3063
|
.vidply-transcript-resizable .vidply-transcript-resize-handle::after {
|
|
3044
3064
|
background: var(--vidply-primary-light);
|
|
3045
3065
|
border-radius: 50%;
|
|
3046
3066
|
content: '';
|
|
3047
|
-
height:
|
|
3067
|
+
height: 0.375rem;
|
|
3048
3068
|
left: 50%;
|
|
3049
3069
|
opacity: 0;
|
|
3050
3070
|
position: absolute;
|
|
3051
3071
|
top: 50%;
|
|
3052
3072
|
transform: translate(-50%, -50%);
|
|
3053
3073
|
transition: opacity 0.2s ease;
|
|
3054
|
-
width:
|
|
3074
|
+
width: 0.375rem;
|
|
3055
3075
|
}
|
|
3056
3076
|
|
|
3057
3077
|
.vidply-transcript-resizable:hover .vidply-transcript-resize-handle::after {
|
|
@@ -3064,7 +3084,7 @@
|
|
|
3064
3084
|
|
|
3065
3085
|
/* Resizing State */
|
|
3066
3086
|
.vidply-transcript-resizing {
|
|
3067
|
-
box-shadow: 0 0 0
|
|
3087
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3068
3088
|
transition: none !important;
|
|
3069
3089
|
}
|
|
3070
3090
|
|
|
@@ -3074,17 +3094,17 @@
|
|
|
3074
3094
|
|
|
3075
3095
|
/* Keyboard Drag Mode */
|
|
3076
3096
|
.vidply-transcript-keyboard-drag {
|
|
3077
|
-
box-shadow: 0 0 0
|
|
3097
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3078
3098
|
}
|
|
3079
3099
|
|
|
3080
3100
|
.vidply-transcript-drag-indicator {
|
|
3081
3101
|
background: linear-gradient(135deg, var(--vidply-primary) 0%, var(--vidply-primary-light) 100%);
|
|
3082
|
-
border-radius: 0 0
|
|
3102
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
3083
3103
|
color: var(--vidply-white);
|
|
3084
|
-
font-size:
|
|
3104
|
+
font-size: 0.75rem;
|
|
3085
3105
|
font-weight: 600;
|
|
3086
3106
|
left: 0;
|
|
3087
|
-
padding:
|
|
3107
|
+
padding: 0.5rem 0.75rem;
|
|
3088
3108
|
position: absolute;
|
|
3089
3109
|
right: 0;
|
|
3090
3110
|
text-align: center;
|
|
@@ -3096,11 +3116,11 @@
|
|
|
3096
3116
|
.vidply-transcript-move-tooltip {
|
|
3097
3117
|
animation: fadeInDown 0.3s ease;
|
|
3098
3118
|
background: var(--vidply-black-90);
|
|
3099
|
-
border-radius:
|
|
3119
|
+
border-radius: 0.25rem;
|
|
3100
3120
|
color: var(--vidply-white);
|
|
3101
|
-
font-size:
|
|
3121
|
+
font-size: 0.75rem;
|
|
3102
3122
|
left: 50%;
|
|
3103
|
-
padding:
|
|
3123
|
+
padding: 0.375rem 0.75rem;
|
|
3104
3124
|
position: absolute;
|
|
3105
3125
|
text-align: center;
|
|
3106
3126
|
top: 100%;
|
|
@@ -3112,11 +3132,11 @@
|
|
|
3112
3132
|
.vidply-transcript-resize-tooltip {
|
|
3113
3133
|
animation: fadeInDown 0.3s ease;
|
|
3114
3134
|
background: var(--vidply-primary);
|
|
3115
|
-
border-radius:
|
|
3135
|
+
border-radius: 0.25rem;
|
|
3116
3136
|
color: var(--vidply-white);
|
|
3117
|
-
font-size:
|
|
3137
|
+
font-size: 0.75rem;
|
|
3118
3138
|
left: 50%;
|
|
3119
|
-
padding:
|
|
3139
|
+
padding: 0.375rem 0.75rem;
|
|
3120
3140
|
position: absolute;
|
|
3121
3141
|
text-align: center;
|
|
3122
3142
|
top: 100%;
|
|
@@ -3128,7 +3148,7 @@
|
|
|
3128
3148
|
@keyframes fadeInDown {
|
|
3129
3149
|
from {
|
|
3130
3150
|
opacity: 0;
|
|
3131
|
-
transform: translateX(-50%) translateY(-
|
|
3151
|
+
transform: translateX(-50%) translateY(-0.625rem);
|
|
3132
3152
|
}
|
|
3133
3153
|
|
|
3134
3154
|
to {
|
|
@@ -3140,15 +3160,15 @@
|
|
|
3140
3160
|
/* Transcript Style Dialog - Dropdown Menu Style */
|
|
3141
3161
|
.vidply-transcript-style-dialog {
|
|
3142
3162
|
background: var(--vidply-bg-menu);
|
|
3143
|
-
border:
|
|
3144
|
-
border-radius:
|
|
3163
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3164
|
+
border-radius: 0.5rem;
|
|
3145
3165
|
box-shadow: var(--vidply-shadow-lg);
|
|
3146
3166
|
display: none;
|
|
3147
3167
|
left: 0;
|
|
3148
|
-
max-height:
|
|
3149
|
-
min-width:
|
|
3168
|
+
max-height: 31.25rem;
|
|
3169
|
+
min-width: 17.5rem;
|
|
3150
3170
|
overflow-y: auto;
|
|
3151
|
-
padding:
|
|
3171
|
+
padding: 0.75rem;
|
|
3152
3172
|
position: absolute;
|
|
3153
3173
|
top: 100%;
|
|
3154
3174
|
width: auto;
|
|
@@ -3159,26 +3179,26 @@
|
|
|
3159
3179
|
.vidply-transcript-style-dialog::after {
|
|
3160
3180
|
border-color: transparent transparent var(--vidply-bg-menu) transparent;
|
|
3161
3181
|
border-style: solid;
|
|
3162
|
-
border-width: 0
|
|
3182
|
+
border-width: 0 0.5rem 0.5rem;
|
|
3163
3183
|
content: '';
|
|
3164
3184
|
height: 0;
|
|
3165
|
-
left:
|
|
3185
|
+
left: 0.75rem;
|
|
3166
3186
|
position: absolute;
|
|
3167
|
-
top: -
|
|
3187
|
+
top: -0.5rem;
|
|
3168
3188
|
width: 0;
|
|
3169
3189
|
}
|
|
3170
3190
|
|
|
3171
3191
|
.vidply-transcript-style-title {
|
|
3172
|
-
border-bottom:
|
|
3192
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
3173
3193
|
color: var(--vidply-white);
|
|
3174
|
-
font-size:
|
|
3194
|
+
font-size: 0.875rem;
|
|
3175
3195
|
font-weight: 600;
|
|
3176
|
-
margin: 0 0
|
|
3177
|
-
padding-bottom:
|
|
3196
|
+
margin: 0 0 0.75rem;
|
|
3197
|
+
padding-bottom: 0.5rem;
|
|
3178
3198
|
}
|
|
3179
3199
|
|
|
3180
3200
|
.vidply-transcript-style-group {
|
|
3181
|
-
margin-bottom:
|
|
3201
|
+
margin-bottom: 0.75rem;
|
|
3182
3202
|
}
|
|
3183
3203
|
|
|
3184
3204
|
.vidply-transcript-style-group:last-child {
|
|
@@ -3188,19 +3208,19 @@
|
|
|
3188
3208
|
.vidply-transcript-style-group label {
|
|
3189
3209
|
color: var(--vidply-white-90);
|
|
3190
3210
|
display: block;
|
|
3191
|
-
font-size:
|
|
3211
|
+
font-size: 0.75rem;
|
|
3192
3212
|
font-weight: 500;
|
|
3193
|
-
margin-bottom:
|
|
3213
|
+
margin-bottom: 0.375rem;
|
|
3194
3214
|
}
|
|
3195
3215
|
|
|
3196
3216
|
/* Style Select */
|
|
3197
3217
|
.vidply-transcript-style-select {
|
|
3198
3218
|
background: var(--vidply-bg-menu);
|
|
3199
|
-
border:
|
|
3200
|
-
border-radius:
|
|
3219
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3220
|
+
border-radius: 0.25rem;
|
|
3201
3221
|
color: var(--vidply-text);
|
|
3202
|
-
font-size:
|
|
3203
|
-
padding:
|
|
3222
|
+
font-size: 0.875rem;
|
|
3223
|
+
padding: 0.25rem 0.5rem;
|
|
3204
3224
|
transition: var(--vidply-transition-default);
|
|
3205
3225
|
width: 100%;
|
|
3206
3226
|
}
|
|
@@ -3213,50 +3233,50 @@
|
|
|
3213
3233
|
.vidply-transcript-style-select:focus {
|
|
3214
3234
|
background: var(--vidply-white-15);
|
|
3215
3235
|
border-color: var(--vidply-border-focus);
|
|
3216
|
-
box-shadow: 0 0 0
|
|
3236
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3217
3237
|
outline: var(--vidply-focus-outline);
|
|
3218
|
-
outline-offset:
|
|
3238
|
+
outline-offset: 0.125rem;
|
|
3219
3239
|
}
|
|
3220
3240
|
|
|
3221
3241
|
/* Style Color Input */
|
|
3222
3242
|
.vidply-transcript-style-color {
|
|
3223
|
-
border:
|
|
3224
|
-
border-radius:
|
|
3243
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3244
|
+
border-radius: 0.25rem;
|
|
3225
3245
|
cursor: pointer;
|
|
3226
|
-
height:
|
|
3246
|
+
height: 2rem;
|
|
3227
3247
|
outline: none;
|
|
3228
|
-
padding:
|
|
3248
|
+
padding: 0.25rem;
|
|
3229
3249
|
transition: var(--vidply-transition-default);
|
|
3230
3250
|
width: 100%;
|
|
3231
3251
|
}
|
|
3232
3252
|
|
|
3233
3253
|
.vidply-transcript-style-color:hover {
|
|
3234
3254
|
border-color: var(--vidply-border-hover);
|
|
3235
|
-
box-shadow: 0 0 0
|
|
3255
|
+
box-shadow: 0 0 0 0.0625rem var(--vidply-primary-20);
|
|
3236
3256
|
}
|
|
3237
3257
|
|
|
3238
3258
|
.vidply-transcript-style-color:focus {
|
|
3239
3259
|
border-color: var(--vidply-border-focus);
|
|
3240
|
-
box-shadow: 0 0 0
|
|
3260
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3241
3261
|
outline: var(--vidply-focus-outline);
|
|
3242
|
-
outline-offset:
|
|
3262
|
+
outline-offset: 0.125rem;
|
|
3243
3263
|
}
|
|
3244
3264
|
|
|
3245
3265
|
/* Style Range Slider */
|
|
3246
3266
|
.vidply-transcript-style-range-container {
|
|
3247
3267
|
align-items: center;
|
|
3248
3268
|
display: flex;
|
|
3249
|
-
gap:
|
|
3269
|
+
gap: 0.75rem;
|
|
3250
3270
|
}
|
|
3251
3271
|
|
|
3252
3272
|
.vidply-transcript-style-range {
|
|
3253
3273
|
-webkit-appearance: none;
|
|
3254
3274
|
appearance: none;
|
|
3255
3275
|
background: var(--vidply-white-20);
|
|
3256
|
-
border-radius:
|
|
3276
|
+
border-radius: 0.1875rem;
|
|
3257
3277
|
cursor: pointer;
|
|
3258
3278
|
flex: 1;
|
|
3259
|
-
height:
|
|
3279
|
+
height: 0.375rem;
|
|
3260
3280
|
outline: none;
|
|
3261
3281
|
transition: var(--vidply-transition-default);
|
|
3262
3282
|
}
|
|
@@ -3267,20 +3287,20 @@
|
|
|
3267
3287
|
|
|
3268
3288
|
.vidply-transcript-style-range:focus {
|
|
3269
3289
|
background: var(--vidply-white-30);
|
|
3270
|
-
box-shadow: 0 0 0
|
|
3290
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-20);
|
|
3271
3291
|
}
|
|
3272
3292
|
|
|
3273
3293
|
.vidply-transcript-style-range::-webkit-slider-thumb {
|
|
3274
3294
|
-webkit-appearance: none;
|
|
3275
3295
|
appearance: none;
|
|
3276
3296
|
background: var(--vidply-primary-light);
|
|
3277
|
-
border:
|
|
3297
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3278
3298
|
border-radius: 50%;
|
|
3279
3299
|
box-shadow: var(--vidply-shadow-sm);
|
|
3280
3300
|
cursor: pointer;
|
|
3281
|
-
height:
|
|
3301
|
+
height: 1rem;
|
|
3282
3302
|
transition: all 0.15s ease;
|
|
3283
|
-
width:
|
|
3303
|
+
width: 1rem;
|
|
3284
3304
|
}
|
|
3285
3305
|
|
|
3286
3306
|
.vidply-transcript-style-range::-webkit-slider-thumb:hover {
|
|
@@ -3290,13 +3310,13 @@
|
|
|
3290
3310
|
|
|
3291
3311
|
.vidply-transcript-style-range::-moz-range-thumb {
|
|
3292
3312
|
background: var(--vidply-primary-light);
|
|
3293
|
-
border:
|
|
3313
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3294
3314
|
border-radius: 50%;
|
|
3295
3315
|
box-shadow: var(--vidply-shadow-sm);
|
|
3296
3316
|
cursor: pointer;
|
|
3297
|
-
height:
|
|
3317
|
+
height: 1rem;
|
|
3298
3318
|
transition: all 0.15s ease;
|
|
3299
|
-
width:
|
|
3319
|
+
width: 1rem;
|
|
3300
3320
|
}
|
|
3301
3321
|
|
|
3302
3322
|
.vidply-transcript-style-range::-moz-range-thumb:hover {
|
|
@@ -3306,9 +3326,9 @@
|
|
|
3306
3326
|
|
|
3307
3327
|
.vidply-transcript-style-value {
|
|
3308
3328
|
color: var(--vidply-text-muted);
|
|
3309
|
-
font-size:
|
|
3329
|
+
font-size: 0.8125rem;
|
|
3310
3330
|
font-weight: 600;
|
|
3311
|
-
min-width:
|
|
3331
|
+
min-width: 2.5rem;
|
|
3312
3332
|
text-align: right;
|
|
3313
3333
|
}
|
|
3314
3334
|
|
|
@@ -3316,20 +3336,20 @@
|
|
|
3316
3336
|
.vidply-transcript-style-close {
|
|
3317
3337
|
background: var(--vidply-primary);
|
|
3318
3338
|
border: none;
|
|
3319
|
-
border-radius:
|
|
3339
|
+
border-radius: 0.25rem;
|
|
3320
3340
|
color: var(--vidply-white);
|
|
3321
3341
|
cursor: pointer;
|
|
3322
|
-
font-size:
|
|
3342
|
+
font-size: 0.8125rem;
|
|
3323
3343
|
font-weight: 600;
|
|
3324
|
-
margin-top:
|
|
3325
|
-
padding:
|
|
3344
|
+
margin-top: 0.75rem;
|
|
3345
|
+
padding: 0.5rem 1rem;
|
|
3326
3346
|
transition: var(--vidply-transition-default);
|
|
3327
3347
|
width: 100%;
|
|
3328
3348
|
}
|
|
3329
3349
|
|
|
3330
3350
|
.vidply-transcript-style-close:hover {
|
|
3331
3351
|
background: var(--vidply-primary-light);
|
|
3332
|
-
transform: translateY(-
|
|
3352
|
+
transform: translateY(-0.0625rem);
|
|
3333
3353
|
}
|
|
3334
3354
|
|
|
3335
3355
|
.vidply-transcript-style-close:active {
|
|
@@ -3337,22 +3357,22 @@
|
|
|
3337
3357
|
}
|
|
3338
3358
|
|
|
3339
3359
|
.vidply-transcript-style-close:focus {
|
|
3340
|
-
box-shadow: 0 0 0
|
|
3360
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3341
3361
|
outline: var(--vidply-focus-outline);
|
|
3342
|
-
outline-offset:
|
|
3362
|
+
outline-offset: 0.125rem;
|
|
3343
3363
|
}
|
|
3344
3364
|
|
|
3345
3365
|
/* Sign Language Video Wrapper */
|
|
3346
3366
|
.vidply-sign-language-wrapper {
|
|
3347
3367
|
background: transparent;
|
|
3348
|
-
border-radius:
|
|
3368
|
+
border-radius: 0.5rem;
|
|
3349
3369
|
height: auto;
|
|
3350
3370
|
max-width: none;
|
|
3351
|
-
min-height:
|
|
3371
|
+
min-height: 6.25rem;
|
|
3352
3372
|
overflow: visible; /* Allow menu to overflow */
|
|
3353
3373
|
position: absolute;
|
|
3354
3374
|
transition: opacity 0.3s ease;
|
|
3355
|
-
width:
|
|
3375
|
+
width: 17.5rem;
|
|
3356
3376
|
z-index: 3;
|
|
3357
3377
|
}
|
|
3358
3378
|
|
|
@@ -3361,15 +3381,15 @@
|
|
|
3361
3381
|
}
|
|
3362
3382
|
|
|
3363
3383
|
.vidply-sign-language-wrapper:focus {
|
|
3364
|
-
outline:
|
|
3365
|
-
outline-offset:
|
|
3384
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
3385
|
+
outline-offset: 0.125rem;
|
|
3366
3386
|
}
|
|
3367
3387
|
|
|
3368
3388
|
/* Sign Language Header */
|
|
3369
3389
|
.vidply-sign-language-header {
|
|
3370
3390
|
align-items: center;
|
|
3371
3391
|
background: #282828;
|
|
3372
|
-
border-bottom:
|
|
3392
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
3373
3393
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
3374
3394
|
cursor: move;
|
|
3375
3395
|
display: flex;
|
|
@@ -3382,15 +3402,15 @@
|
|
|
3382
3402
|
|
|
3383
3403
|
.vidply-sign-language-header:focus,
|
|
3384
3404
|
.vidply-sign-language-header:focus-visible {
|
|
3385
|
-
box-shadow: 0 0 0
|
|
3386
|
-
outline:
|
|
3387
|
-
outline-offset:
|
|
3405
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
3406
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
3407
|
+
outline-offset: 0.125rem;
|
|
3388
3408
|
}
|
|
3389
3409
|
|
|
3390
3410
|
.vidply-sign-language-header-left {
|
|
3391
3411
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
3392
3412
|
display: flex;
|
|
3393
|
-
gap:
|
|
3413
|
+
gap: 1rem;
|
|
3394
3414
|
position: relative; /* Needed for menu positioning */
|
|
3395
3415
|
}
|
|
3396
3416
|
|
|
@@ -3399,29 +3419,29 @@
|
|
|
3399
3419
|
align-self: center; /* Center this wrapper vertically in header */
|
|
3400
3420
|
display: flex;
|
|
3401
3421
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
3402
|
-
gap:
|
|
3422
|
+
gap: 0.5rem;
|
|
3403
3423
|
}
|
|
3404
3424
|
|
|
3405
3425
|
.vidply-sign-language-label {
|
|
3406
3426
|
/* Visible label for voice input accessibility */
|
|
3407
3427
|
color: var(--vidply-white);
|
|
3408
|
-
font-size:
|
|
3428
|
+
font-size: 0.75rem;
|
|
3409
3429
|
font-weight: 500;
|
|
3410
3430
|
white-space: nowrap;
|
|
3411
3431
|
}
|
|
3412
3432
|
|
|
3413
3433
|
.vidply-sign-language-select {
|
|
3414
3434
|
background: var(--vidply-bg-menu);
|
|
3415
|
-
border:
|
|
3416
|
-
border-radius:
|
|
3435
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3436
|
+
border-radius: 0.25rem;
|
|
3417
3437
|
color: var(--vidply-text);
|
|
3418
|
-
font-size:
|
|
3419
|
-
padding:
|
|
3438
|
+
font-size: 0.875rem;
|
|
3439
|
+
padding: 0.25rem 0.5rem;
|
|
3420
3440
|
}
|
|
3421
3441
|
|
|
3422
3442
|
.vidply-sign-language-select:focus {
|
|
3423
3443
|
outline: var(--vidply-focus-outline);
|
|
3424
|
-
outline-offset:
|
|
3444
|
+
outline-offset: 0.125rem;
|
|
3425
3445
|
}
|
|
3426
3446
|
|
|
3427
3447
|
/* Sign Language Settings Button */
|
|
@@ -3448,7 +3468,7 @@
|
|
|
3448
3468
|
|
|
3449
3469
|
.vidply-sign-language-settings:focus {
|
|
3450
3470
|
outline: var(--vidply-focus-outline-white);
|
|
3451
|
-
outline-offset:
|
|
3471
|
+
outline-offset: 0.125rem;
|
|
3452
3472
|
}
|
|
3453
3473
|
|
|
3454
3474
|
.vidply-sign-language-settings .vidply-icon {
|
|
@@ -3459,20 +3479,20 @@
|
|
|
3459
3479
|
/* Sign Language Settings Menu */
|
|
3460
3480
|
.vidply-sign-language-settings-menu {
|
|
3461
3481
|
background: var(--vidply-bg-menu);
|
|
3462
|
-
border:
|
|
3482
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3463
3483
|
border-radius: var(--vidply-radius-md);
|
|
3464
3484
|
box-shadow: var(--vidply-shadow-lg);
|
|
3465
3485
|
display: none;
|
|
3466
|
-
min-width:
|
|
3486
|
+
min-width: 15rem;
|
|
3467
3487
|
padding: var(--vidply-gap-sm);
|
|
3468
3488
|
position: absolute;
|
|
3469
3489
|
z-index: 100;
|
|
3470
3490
|
}
|
|
3471
3491
|
|
|
3472
3492
|
.vidply-sign-language-settings-menu::after {
|
|
3473
|
-
border-bottom:
|
|
3474
|
-
border-left:
|
|
3475
|
-
border-right:
|
|
3493
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
3494
|
+
border-left: 0.375rem solid transparent;
|
|
3495
|
+
border-right: 0.375rem solid transparent;
|
|
3476
3496
|
bottom: 100%;
|
|
3477
3497
|
content: '';
|
|
3478
3498
|
height: 0;
|
|
@@ -3483,7 +3503,7 @@
|
|
|
3483
3503
|
|
|
3484
3504
|
.vidply-sign-language-settings-menu.vidply-menu-above::after {
|
|
3485
3505
|
border-bottom: none;
|
|
3486
|
-
border-top:
|
|
3506
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
3487
3507
|
bottom: auto;
|
|
3488
3508
|
top: 100%;
|
|
3489
3509
|
}
|
|
@@ -3499,7 +3519,7 @@
|
|
|
3499
3519
|
display: flex;
|
|
3500
3520
|
font-size: var(--vidply-font-base);
|
|
3501
3521
|
gap: var(--vidply-gap-md);
|
|
3502
|
-
padding: var(--vidply-padding-md)
|
|
3522
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
3503
3523
|
text-align: left;
|
|
3504
3524
|
transition: var(--vidply-transition-normal);
|
|
3505
3525
|
width: 100%;
|
|
@@ -3541,12 +3561,12 @@
|
|
|
3541
3561
|
color: var(--vidply-white);
|
|
3542
3562
|
font-size: var(--vidply-font-lg);
|
|
3543
3563
|
font-weight: 600;
|
|
3544
|
-
height:
|
|
3545
|
-
left: -
|
|
3564
|
+
height: 0.0625rem;
|
|
3565
|
+
left: -625rem;
|
|
3546
3566
|
margin: 0;
|
|
3547
3567
|
overflow: hidden;
|
|
3548
3568
|
position: absolute;
|
|
3549
|
-
width:
|
|
3569
|
+
width: 0.0625rem;
|
|
3550
3570
|
}
|
|
3551
3571
|
|
|
3552
3572
|
.vidply-sign-language-close {
|
|
@@ -3571,7 +3591,7 @@
|
|
|
3571
3591
|
|
|
3572
3592
|
.vidply-sign-language-close:focus {
|
|
3573
3593
|
outline: var(--vidply-focus-outline-white);
|
|
3574
|
-
outline-offset:
|
|
3594
|
+
outline-offset: 0.125rem;
|
|
3575
3595
|
}
|
|
3576
3596
|
|
|
3577
3597
|
.vidply-sign-language-close .vidply-icon {
|
|
@@ -3582,10 +3602,10 @@
|
|
|
3582
3602
|
/* Sign Language Video */
|
|
3583
3603
|
.vidply-sign-language-video {
|
|
3584
3604
|
background: var(--vidply-black);
|
|
3585
|
-
border:
|
|
3586
|
-
border-radius: 0 0
|
|
3605
|
+
border: 0.125rem solid var(--vidply-white-30);
|
|
3606
|
+
border-radius: 0 0 0.5rem 0.5rem;
|
|
3587
3607
|
border-top: none;
|
|
3588
|
-
box-shadow: 0
|
|
3608
|
+
box-shadow: 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3589
3609
|
cursor: default;
|
|
3590
3610
|
display: block;
|
|
3591
3611
|
height: auto;
|
|
@@ -3604,67 +3624,67 @@
|
|
|
3604
3624
|
.vidply-sign-resize-nw,
|
|
3605
3625
|
.vidply-sign-resize-se,
|
|
3606
3626
|
.vidply-sign-resize-sw {
|
|
3607
|
-
height:
|
|
3608
|
-
width:
|
|
3627
|
+
height: 1rem;
|
|
3628
|
+
width: 1rem;
|
|
3609
3629
|
}
|
|
3610
3630
|
|
|
3611
3631
|
.vidply-sign-resize-n,
|
|
3612
3632
|
.vidply-sign-resize-s {
|
|
3613
3633
|
cursor: ns-resize;
|
|
3614
|
-
height:
|
|
3615
|
-
left:
|
|
3616
|
-
right:
|
|
3634
|
+
height: 0.5rem;
|
|
3635
|
+
left: 1rem;
|
|
3636
|
+
right: 1rem;
|
|
3617
3637
|
}
|
|
3618
3638
|
|
|
3619
3639
|
.vidply-sign-resize-e,
|
|
3620
3640
|
.vidply-sign-resize-w {
|
|
3621
|
-
bottom:
|
|
3641
|
+
bottom: 1rem;
|
|
3622
3642
|
cursor: ew-resize;
|
|
3623
|
-
top:
|
|
3624
|
-
width:
|
|
3643
|
+
top: 1rem;
|
|
3644
|
+
width: 0.5rem;
|
|
3625
3645
|
}
|
|
3626
3646
|
|
|
3627
|
-
.vidply-sign-resize-n { top: -
|
|
3628
|
-
.vidply-sign-resize-s { bottom: -
|
|
3629
|
-
.vidply-sign-resize-e { right: -
|
|
3630
|
-
.vidply-sign-resize-w { left: -
|
|
3647
|
+
.vidply-sign-resize-n { top: -0.25rem; }
|
|
3648
|
+
.vidply-sign-resize-s { bottom: -0.25rem; }
|
|
3649
|
+
.vidply-sign-resize-e { right: -0.25rem; }
|
|
3650
|
+
.vidply-sign-resize-w { left: -0.25rem; }
|
|
3631
3651
|
|
|
3632
3652
|
.vidply-sign-resize-ne {
|
|
3633
3653
|
cursor: nesw-resize;
|
|
3634
|
-
right: -
|
|
3635
|
-
top: -
|
|
3654
|
+
right: -0.5rem;
|
|
3655
|
+
top: -0.5rem;
|
|
3636
3656
|
}
|
|
3637
3657
|
|
|
3638
3658
|
.vidply-sign-resize-nw {
|
|
3639
3659
|
cursor: nwse-resize;
|
|
3640
|
-
left: -
|
|
3641
|
-
top: -
|
|
3660
|
+
left: -0.5rem;
|
|
3661
|
+
top: -0.5rem;
|
|
3642
3662
|
}
|
|
3643
3663
|
|
|
3644
3664
|
.vidply-sign-resize-se {
|
|
3645
|
-
bottom: -
|
|
3665
|
+
bottom: -0.5rem;
|
|
3646
3666
|
cursor: nwse-resize;
|
|
3647
|
-
right: -
|
|
3667
|
+
right: -0.5rem;
|
|
3648
3668
|
}
|
|
3649
3669
|
|
|
3650
3670
|
.vidply-sign-resize-sw {
|
|
3651
|
-
bottom: -
|
|
3671
|
+
bottom: -0.5rem;
|
|
3652
3672
|
cursor: nesw-resize;
|
|
3653
|
-
left: -
|
|
3673
|
+
left: -0.5rem;
|
|
3654
3674
|
}
|
|
3655
3675
|
|
|
3656
3676
|
.vidply-sign-resizable .vidply-sign-resize-handle::after {
|
|
3657
3677
|
background: var(--vidply-primary-light);
|
|
3658
3678
|
border-radius: 50%;
|
|
3659
3679
|
content: '';
|
|
3660
|
-
height:
|
|
3680
|
+
height: 0.375rem;
|
|
3661
3681
|
left: 50%;
|
|
3662
3682
|
opacity: 0;
|
|
3663
3683
|
position: absolute;
|
|
3664
3684
|
top: 50%;
|
|
3665
3685
|
transform: translate(-50%, -50%);
|
|
3666
3686
|
transition: opacity 0.2s ease;
|
|
3667
|
-
width:
|
|
3687
|
+
width: 0.375rem;
|
|
3668
3688
|
}
|
|
3669
3689
|
|
|
3670
3690
|
.vidply-sign-resizable:hover .vidply-sign-resize-handle::after {
|
|
@@ -3690,36 +3710,36 @@
|
|
|
3690
3710
|
|
|
3691
3711
|
/* Move Mode */
|
|
3692
3712
|
.vidply-sign-move-mode {
|
|
3693
|
-
box-shadow: 0 0 0
|
|
3713
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3694
3714
|
}
|
|
3695
3715
|
|
|
3696
3716
|
/* Resizing State */
|
|
3697
3717
|
.vidply-sign-resizing {
|
|
3698
|
-
box-shadow: 0 0 0
|
|
3718
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3699
3719
|
transition: none !important;
|
|
3700
3720
|
}
|
|
3701
3721
|
|
|
3702
3722
|
/* Keyboard Drag/Resize Modes */
|
|
3703
3723
|
.vidply-sign-keyboard-drag,
|
|
3704
3724
|
.vidply-sign-keyboard-resize {
|
|
3705
|
-
box-shadow: 0 0 0
|
|
3725
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary), 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3706
3726
|
}
|
|
3707
3727
|
|
|
3708
3728
|
.vidply-sign-keyboard-drag::after,
|
|
3709
3729
|
.vidply-sign-keyboard-resize::after {
|
|
3710
3730
|
align-items: center;
|
|
3711
3731
|
background: var(--vidply-primary);
|
|
3712
|
-
border-radius:
|
|
3732
|
+
border-radius: 0.25rem;
|
|
3713
3733
|
color: var(--vidply-white);
|
|
3714
3734
|
display: flex;
|
|
3715
|
-
font-size:
|
|
3735
|
+
font-size: 0.75rem;
|
|
3716
3736
|
font-weight: 600;
|
|
3717
3737
|
justify-content: center;
|
|
3718
3738
|
left: 50%;
|
|
3719
|
-
padding:
|
|
3739
|
+
padding: 0.25rem 0.5rem;
|
|
3720
3740
|
pointer-events: none;
|
|
3721
3741
|
position: absolute;
|
|
3722
|
-
top: -
|
|
3742
|
+
top: -1.75rem;
|
|
3723
3743
|
transform: translateX(-50%);
|
|
3724
3744
|
white-space: nowrap;
|
|
3725
3745
|
z-index: 10;
|
|
@@ -3735,64 +3755,68 @@
|
|
|
3735
3755
|
|
|
3736
3756
|
/* Sign Language Video Positions */
|
|
3737
3757
|
.vidply-sign-position-bottom-right {
|
|
3738
|
-
bottom:
|
|
3739
|
-
right:
|
|
3758
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3759
|
+
right: 1rem;
|
|
3740
3760
|
}
|
|
3741
3761
|
|
|
3742
3762
|
.vidply-sign-position-bottom-left {
|
|
3743
|
-
bottom:
|
|
3744
|
-
left:
|
|
3763
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3764
|
+
left: 1rem;
|
|
3745
3765
|
}
|
|
3746
3766
|
|
|
3747
3767
|
.vidply-sign-position-top-right {
|
|
3748
|
-
right:
|
|
3749
|
-
top:
|
|
3768
|
+
right: 1rem;
|
|
3769
|
+
top: 1rem;
|
|
3750
3770
|
}
|
|
3751
3771
|
|
|
3752
3772
|
.vidply-sign-position-top-left {
|
|
3753
|
-
left:
|
|
3754
|
-
top:
|
|
3773
|
+
left: 1rem;
|
|
3774
|
+
top: 1rem;
|
|
3755
3775
|
}
|
|
3756
3776
|
|
|
3757
3777
|
/* Responsive Sign Language Video */
|
|
3758
|
-
@media (width <
|
|
3778
|
+
@media (width < 48rem) {
|
|
3759
3779
|
.vidply-sign-language-wrapper {
|
|
3760
|
-
min-width:
|
|
3780
|
+
min-width: 7.5rem;
|
|
3761
3781
|
width: 35%;
|
|
3762
3782
|
}
|
|
3763
3783
|
|
|
3764
3784
|
.vidply-sign-position-bottom-right,
|
|
3765
3785
|
.vidply-sign-position-bottom-left {
|
|
3766
|
-
bottom:
|
|
3786
|
+
bottom: 7.875rem !important; /* Adjust for smaller controls */
|
|
3767
3787
|
}
|
|
3768
3788
|
}
|
|
3769
3789
|
|
|
3770
3790
|
/* Responsive Adjustments */
|
|
3771
|
-
@media (width <
|
|
3791
|
+
@media (width < 48rem) {
|
|
3772
3792
|
.vidply-playlist-thumbnail {
|
|
3773
|
-
height:
|
|
3774
|
-
width:
|
|
3793
|
+
height: 2.125rem;
|
|
3794
|
+
width: 3.75rem;
|
|
3775
3795
|
}
|
|
3776
3796
|
|
|
3777
3797
|
.vidply-playlist-item {
|
|
3778
|
-
gap:
|
|
3779
|
-
padding:
|
|
3798
|
+
gap: 0.625rem;
|
|
3799
|
+
padding: 0.625rem 0.75rem;
|
|
3780
3800
|
}
|
|
3781
3801
|
|
|
3802
|
+
.vidply-track-artwork {
|
|
3803
|
+
aspect-ratio: 16 / 3;
|
|
3804
|
+
}
|
|
3805
|
+
|
|
3782
3806
|
.vidply-track-info {
|
|
3783
|
-
padding:
|
|
3807
|
+
padding: 0.75rem 1rem;
|
|
3784
3808
|
}
|
|
3785
3809
|
|
|
3786
3810
|
.vidply-track-title {
|
|
3787
|
-
font-size:
|
|
3811
|
+
font-size: 1rem;
|
|
3788
3812
|
}
|
|
3789
3813
|
|
|
3790
3814
|
/* Mobile fullscreen playlist - horizontal scrolling directly above controls */
|
|
3791
3815
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
3792
3816
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
3793
|
-
bottom:
|
|
3817
|
+
bottom: 6.25rem; /* Directly above controls with extra space */
|
|
3794
3818
|
max-height: 35vh; /* Compact height */
|
|
3795
|
-
padding:
|
|
3819
|
+
padding: 0.75rem 0; /* Vertical padding only */
|
|
3796
3820
|
overflow-y: hidden; /* No vertical scrolling */
|
|
3797
3821
|
overflow-x: auto; /* Horizontal scrolling */
|
|
3798
3822
|
position: absolute !important; /* Force absolute over video */
|
|
@@ -3805,8 +3829,8 @@
|
|
|
3805
3829
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
3806
3830
|
flex-direction: row; /* Items side by side */
|
|
3807
3831
|
flex-wrap: nowrap; /* Never wrap */
|
|
3808
|
-
gap:
|
|
3809
|
-
padding: 0
|
|
3832
|
+
gap: 0.5rem;
|
|
3833
|
+
padding: 0 0.75rem;
|
|
3810
3834
|
-webkit-overflow-scrolling: touch;
|
|
3811
3835
|
scroll-behavior: smooth;
|
|
3812
3836
|
touch-action: pan-x; /* Ensure horizontal swipe gestures work */
|
|
@@ -3815,9 +3839,9 @@
|
|
|
3815
3839
|
/* Mobile playlist items - only show thumbnails */
|
|
3816
3840
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
3817
3841
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
3818
|
-
width:
|
|
3819
|
-
min-width:
|
|
3820
|
-
max-width:
|
|
3842
|
+
width: 7.5rem; /* Smaller width for thumbnail-only */
|
|
3843
|
+
min-width: 7.5rem;
|
|
3844
|
+
max-width: 7.5rem;
|
|
3821
3845
|
flex-shrink: 0; /* Don't shrink */
|
|
3822
3846
|
scroll-snap-align: start;
|
|
3823
3847
|
}
|
|
@@ -3831,10 +3855,10 @@
|
|
|
3831
3855
|
|
|
3832
3856
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
3833
3857
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
3834
|
-
height:
|
|
3858
|
+
height: 5.625rem; /* Square-ish thumbnail */
|
|
3835
3859
|
width: 100%; /* Full width of card */
|
|
3836
3860
|
flex-shrink: 0;
|
|
3837
|
-
border-radius:
|
|
3861
|
+
border-radius: 0.5rem; /* Fully rounded for thumbnail-only */
|
|
3838
3862
|
}
|
|
3839
3863
|
|
|
3840
3864
|
/* Hide text info on mobile - show only thumbnails */
|
|
@@ -3848,28 +3872,28 @@
|
|
|
3848
3872
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-info {
|
|
3849
3873
|
display: flex;
|
|
3850
3874
|
flex-direction: column;
|
|
3851
|
-
padding:
|
|
3875
|
+
padding: 0.5rem;
|
|
3852
3876
|
justify-content: center;
|
|
3853
3877
|
align-items: center;
|
|
3854
3878
|
text-align: center;
|
|
3855
|
-
height:
|
|
3879
|
+
height: 5.625rem;
|
|
3856
3880
|
}
|
|
3857
3881
|
|
|
3858
3882
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title,
|
|
3859
3883
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title {
|
|
3860
|
-
font-size:
|
|
3884
|
+
font-size: 0.6875rem;
|
|
3861
3885
|
-webkit-line-clamp: 3;
|
|
3862
3886
|
}
|
|
3863
3887
|
|
|
3864
3888
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist,
|
|
3865
3889
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist {
|
|
3866
|
-
font-size:
|
|
3890
|
+
font-size: 0.5625rem;
|
|
3867
3891
|
}
|
|
3868
3892
|
|
|
3869
3893
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
3870
3894
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
3871
|
-
padding: 0
|
|
3872
|
-
font-size:
|
|
3895
|
+
padding: 0 0.75rem 0.5rem;
|
|
3896
|
+
font-size: 0.6875rem;
|
|
3873
3897
|
flex-shrink: 0;
|
|
3874
3898
|
}
|
|
3875
3899
|
|
|
@@ -3877,9 +3901,9 @@
|
|
|
3877
3901
|
.vidply-transcript-window {
|
|
3878
3902
|
border: none;
|
|
3879
3903
|
border-radius: 0;
|
|
3880
|
-
border-top:
|
|
3904
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
3881
3905
|
box-shadow: none;
|
|
3882
|
-
min-width:
|
|
3906
|
+
min-width: 18.75rem;
|
|
3883
3907
|
order: 3; /* After controls (which are order: 2) */
|
|
3884
3908
|
position: relative;
|
|
3885
3909
|
width: 100%;
|
|
@@ -3888,11 +3912,11 @@
|
|
|
3888
3912
|
|
|
3889
3913
|
.vidply-transcript-header {
|
|
3890
3914
|
border-radius: 0;
|
|
3891
|
-
padding:
|
|
3915
|
+
padding: 0.75rem 1rem;
|
|
3892
3916
|
}
|
|
3893
3917
|
|
|
3894
3918
|
.vidply-transcript-content {
|
|
3895
|
-
max-height:
|
|
3919
|
+
max-height: 25rem;
|
|
3896
3920
|
}
|
|
3897
3921
|
|
|
3898
3922
|
/* Don't show dragging cursor on mobile (except in fullscreen) */
|