vidply 1.0.21 → 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 +538 -545
- package/dist/vidply.min.css +1 -1
- package/package.json +1 -1
- package/src/styles/vidply.css +538 -545
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,6 +2110,7 @@
|
|
|
2117
2110
|
============================================================================ */
|
|
2118
2111
|
|
|
2119
2112
|
/* Track Info Display (below video, above playlist) */
|
|
2113
|
+
|
|
2120
2114
|
/* Track Artwork - Displays album art/poster above audio player */
|
|
2121
2115
|
.vidply-track-artwork {
|
|
2122
2116
|
aspect-ratio: 16 / 3;
|
|
@@ -2124,7 +2118,7 @@
|
|
|
2124
2118
|
background-position: center;
|
|
2125
2119
|
background-repeat: no-repeat;
|
|
2126
2120
|
background-size: cover;
|
|
2127
|
-
border-bottom:
|
|
2121
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2128
2122
|
order: 1; /* Before video-wrapper */
|
|
2129
2123
|
overflow: hidden;
|
|
2130
2124
|
position: relative;
|
|
@@ -2146,38 +2140,37 @@
|
|
|
2146
2140
|
|
|
2147
2141
|
.vidply-track-info {
|
|
2148
2142
|
background: var(--vidply-bg-track-info);
|
|
2149
|
-
border-bottom:
|
|
2143
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2150
2144
|
order: 2; /* After video-wrapper */
|
|
2151
|
-
padding:
|
|
2145
|
+
padding: 1rem 1.25rem;
|
|
2152
2146
|
}
|
|
2153
2147
|
|
|
2154
2148
|
.vidply-track-number {
|
|
2155
2149
|
color: var(--vidply-text-muted);
|
|
2156
|
-
font-size:
|
|
2157
|
-
letter-spacing: 0.
|
|
2158
|
-
margin-bottom:
|
|
2150
|
+
font-size: 0.75rem;
|
|
2151
|
+
letter-spacing: 0.0313rem;
|
|
2152
|
+
margin-bottom: 0.25rem;
|
|
2159
2153
|
text-transform: uppercase;
|
|
2160
2154
|
}
|
|
2161
2155
|
|
|
2162
2156
|
.vidply-track-title {
|
|
2163
2157
|
color: var(--vidply-white);
|
|
2164
|
-
font-size:
|
|
2158
|
+
font-size: 1.125rem;
|
|
2165
2159
|
font-weight: 600;
|
|
2166
|
-
margin-bottom:
|
|
2160
|
+
margin-bottom: 0.25rem;
|
|
2167
2161
|
}
|
|
2168
2162
|
|
|
2169
2163
|
.vidply-track-artist {
|
|
2170
2164
|
color: var(--vidply-white-80);
|
|
2171
|
-
font-size:
|
|
2165
|
+
font-size: 0.875rem;
|
|
2172
2166
|
}
|
|
2173
2167
|
|
|
2174
2168
|
/* Playlist Panel */
|
|
2175
2169
|
.vidply-playlist-panel {
|
|
2176
2170
|
background: var(--vidply-bg-playlist);
|
|
2177
|
-
border-top:
|
|
2178
|
-
max-height:
|
|
2171
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
2172
|
+
max-height: 25rem;
|
|
2179
2173
|
transform: translate3d(0, 0, 0);
|
|
2180
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
2181
2174
|
order: 3; /* After track info */
|
|
2182
2175
|
-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
|
|
2183
2176
|
overflow-y: auto;
|
|
@@ -2191,10 +2184,10 @@
|
|
|
2191
2184
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2192
2185
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2193
2186
|
background: linear-gradient(to top, rgb(0 0 0 / 95%) 0%, rgb(0 0 0 / 90%) 100%);
|
|
2194
|
-
backdrop-filter: blur(
|
|
2187
|
+
backdrop-filter: blur(0.625rem);
|
|
2195
2188
|
border: none;
|
|
2196
|
-
border-top:
|
|
2197
|
-
bottom:
|
|
2189
|
+
border-top: 0.0625rem solid var(--vidply-border);
|
|
2190
|
+
bottom: 5rem; /* Directly above controls */
|
|
2198
2191
|
left: 0;
|
|
2199
2192
|
max-height: 50vh; /* Take up to half the screen */
|
|
2200
2193
|
opacity: 0;
|
|
@@ -2204,7 +2197,7 @@
|
|
|
2204
2197
|
position: absolute !important; /* Force absolute positioning over video */
|
|
2205
2198
|
right: 0;
|
|
2206
2199
|
touch-action: pan-y; /* Allow vertical scrolling on touch devices */
|
|
2207
|
-
transform: translateY(
|
|
2200
|
+
transform: translateY(1.25rem);
|
|
2208
2201
|
z-index: var(--vidply-z-playlist); /* Above video but below controls */
|
|
2209
2202
|
}
|
|
2210
2203
|
|
|
@@ -2232,8 +2225,8 @@
|
|
|
2232
2225
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2233
2226
|
display: flex;
|
|
2234
2227
|
flex-direction: row;
|
|
2235
|
-
gap:
|
|
2236
|
-
padding:
|
|
2228
|
+
gap: 0.75rem;
|
|
2229
|
+
padding: 0.5rem 1rem;
|
|
2237
2230
|
overflow-x: auto;
|
|
2238
2231
|
overflow-y: hidden;
|
|
2239
2232
|
scroll-snap-type: x mandatory;
|
|
@@ -2244,17 +2237,17 @@
|
|
|
2244
2237
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2245
2238
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2246
2239
|
background: var(--vidply-black-50);
|
|
2247
|
-
border-bottom:
|
|
2248
|
-
font-size:
|
|
2249
|
-
padding:
|
|
2240
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
2241
|
+
font-size: 0.75rem;
|
|
2242
|
+
padding: 0.625rem 1rem;
|
|
2250
2243
|
}
|
|
2251
2244
|
|
|
2252
2245
|
/* Fullscreen playlist items - horizontal card style */
|
|
2253
2246
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2254
2247
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2255
2248
|
flex: 0 0 auto;
|
|
2256
|
-
min-width:
|
|
2257
|
-
max-width:
|
|
2249
|
+
min-width: 17.5rem;
|
|
2250
|
+
max-width: 20rem;
|
|
2258
2251
|
scroll-snap-align: start;
|
|
2259
2252
|
}
|
|
2260
2253
|
|
|
@@ -2262,10 +2255,10 @@
|
|
|
2262
2255
|
.vidply-player:fullscreen .vidply-playlist-item-button {
|
|
2263
2256
|
flex-direction: column;
|
|
2264
2257
|
align-items: stretch;
|
|
2265
|
-
gap:
|
|
2258
|
+
gap: 0.5rem;
|
|
2266
2259
|
padding: 0;
|
|
2267
2260
|
background: var(--vidply-black-40);
|
|
2268
|
-
border-radius:
|
|
2261
|
+
border-radius: 0.5rem;
|
|
2269
2262
|
overflow: hidden;
|
|
2270
2263
|
transition: all 0.2s ease;
|
|
2271
2264
|
}
|
|
@@ -2273,27 +2266,27 @@
|
|
|
2273
2266
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-button:hover,
|
|
2274
2267
|
.vidply-player:fullscreen .vidply-playlist-item-button:hover {
|
|
2275
2268
|
background: var(--vidply-white-10);
|
|
2276
|
-
transform: translateY(-
|
|
2277
|
-
box-shadow: 0
|
|
2269
|
+
transform: translateY(-0.25rem);
|
|
2270
|
+
box-shadow: 0 0.5rem 1.5rem var(--vidply-black-60);
|
|
2278
2271
|
}
|
|
2279
2272
|
|
|
2280
2273
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2281
2274
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2282
2275
|
width: 100%;
|
|
2283
|
-
height:
|
|
2276
|
+
height: 10rem;
|
|
2284
2277
|
border-radius: 0;
|
|
2285
2278
|
}
|
|
2286
2279
|
|
|
2287
2280
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2288
2281
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2289
|
-
padding:
|
|
2282
|
+
padding: 0.75rem;
|
|
2290
2283
|
}
|
|
2291
2284
|
|
|
2292
2285
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-title,
|
|
2293
2286
|
.vidply-player:fullscreen .vidply-playlist-item-title {
|
|
2294
|
-
font-size:
|
|
2287
|
+
font-size: 0.875rem;
|
|
2295
2288
|
font-weight: 600;
|
|
2296
|
-
margin-bottom:
|
|
2289
|
+
margin-bottom: 0.25rem;
|
|
2297
2290
|
white-space: normal;
|
|
2298
2291
|
overflow: hidden;
|
|
2299
2292
|
text-overflow: ellipsis;
|
|
@@ -2304,7 +2297,7 @@
|
|
|
2304
2297
|
|
|
2305
2298
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-artist,
|
|
2306
2299
|
.vidply-player:fullscreen .vidply-playlist-item-artist {
|
|
2307
|
-
font-size:
|
|
2300
|
+
font-size: 0.75rem;
|
|
2308
2301
|
opacity: 0.8;
|
|
2309
2302
|
}
|
|
2310
2303
|
|
|
@@ -2316,8 +2309,8 @@
|
|
|
2316
2309
|
/* Fullscreen playlist scrollbar styling - horizontal */
|
|
2317
2310
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar,
|
|
2318
2311
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar {
|
|
2319
|
-
height:
|
|
2320
|
-
width:
|
|
2312
|
+
height: 0.5rem;
|
|
2313
|
+
width: 0.625rem;
|
|
2321
2314
|
}
|
|
2322
2315
|
|
|
2323
2316
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-track,
|
|
@@ -2328,7 +2321,7 @@
|
|
|
2328
2321
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb,
|
|
2329
2322
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2330
2323
|
background: var(--vidply-white-30);
|
|
2331
|
-
border-radius:
|
|
2324
|
+
border-radius: 0.3125rem;
|
|
2332
2325
|
}
|
|
2333
2326
|
|
|
2334
2327
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb:hover,
|
|
@@ -2339,7 +2332,7 @@
|
|
|
2339
2332
|
/* Horizontal scrollbar for playlist list */
|
|
2340
2333
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar,
|
|
2341
2334
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar {
|
|
2342
|
-
height:
|
|
2335
|
+
height: 0.375rem;
|
|
2343
2336
|
}
|
|
2344
2337
|
|
|
2345
2338
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-track,
|
|
@@ -2350,7 +2343,7 @@
|
|
|
2350
2343
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb,
|
|
2351
2344
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb {
|
|
2352
2345
|
background: var(--vidply-white-20);
|
|
2353
|
-
border-radius:
|
|
2346
|
+
border-radius: 0.1875rem;
|
|
2354
2347
|
}
|
|
2355
2348
|
|
|
2356
2349
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb:hover,
|
|
@@ -2367,7 +2360,7 @@
|
|
|
2367
2360
|
/* Active item styling in fullscreen */
|
|
2368
2361
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-active .vidply-playlist-item-button,
|
|
2369
2362
|
.vidply-player:fullscreen .vidply-playlist-item-active .vidply-playlist-item-button {
|
|
2370
|
-
border:
|
|
2363
|
+
border: 0.125rem solid var(--vidply-primary-light);
|
|
2371
2364
|
background: var(--vidply-primary-15);
|
|
2372
2365
|
}
|
|
2373
2366
|
|
|
@@ -2378,12 +2371,12 @@
|
|
|
2378
2371
|
|
|
2379
2372
|
.vidply-playlist-header {
|
|
2380
2373
|
background: var(--vidply-bg-playlist-header);
|
|
2381
|
-
border-bottom:
|
|
2374
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2382
2375
|
color: var(--vidply-white-90);
|
|
2383
|
-
font-size:
|
|
2376
|
+
font-size: 0.8125rem;
|
|
2384
2377
|
font-weight: 600;
|
|
2385
|
-
letter-spacing: 0.
|
|
2386
|
-
padding:
|
|
2378
|
+
letter-spacing: 0.0313rem;
|
|
2379
|
+
padding: 0.75rem 1rem;
|
|
2387
2380
|
position: sticky;
|
|
2388
2381
|
text-transform: uppercase;
|
|
2389
2382
|
top: 0;
|
|
@@ -2393,12 +2386,12 @@
|
|
|
2393
2386
|
.vidply-playlist-list {
|
|
2394
2387
|
list-style: none;
|
|
2395
2388
|
margin: 0;
|
|
2396
|
-
padding:
|
|
2389
|
+
padding: 0.25rem 0;
|
|
2397
2390
|
}
|
|
2398
2391
|
|
|
2399
2392
|
/* Playlist Items */
|
|
2400
2393
|
.vidply-playlist-item {
|
|
2401
|
-
border-left:
|
|
2394
|
+
border-left: 0.1875rem solid transparent;
|
|
2402
2395
|
position: relative;
|
|
2403
2396
|
}
|
|
2404
2397
|
|
|
@@ -2411,8 +2404,8 @@
|
|
|
2411
2404
|
cursor: pointer;
|
|
2412
2405
|
display: flex;
|
|
2413
2406
|
font: inherit;
|
|
2414
|
-
gap:
|
|
2415
|
-
padding:
|
|
2407
|
+
gap: 0.75rem;
|
|
2408
|
+
padding: 0.75rem 1rem;
|
|
2416
2409
|
text-align: left;
|
|
2417
2410
|
transition: var(--vidply-transition-default);
|
|
2418
2411
|
width: 100%;
|
|
@@ -2434,7 +2427,7 @@
|
|
|
2434
2427
|
.vidply-playlist-item-button:focus-visible {
|
|
2435
2428
|
background: var(--vidply-white-08);
|
|
2436
2429
|
outline: var(--vidply-focus-outline-white);
|
|
2437
|
-
outline-offset: -
|
|
2430
|
+
outline-offset: -0.125rem;
|
|
2438
2431
|
z-index: 1;
|
|
2439
2432
|
}
|
|
2440
2433
|
|
|
@@ -2449,19 +2442,19 @@
|
|
|
2449
2442
|
background: var(--vidply-primary-20);
|
|
2450
2443
|
border-left-color: var(--vidply-primary);
|
|
2451
2444
|
outline: var(--vidply-focus-outline-white);
|
|
2452
|
-
outline-offset: -
|
|
2445
|
+
outline-offset: -0.125rem;
|
|
2453
2446
|
z-index: 2;
|
|
2454
2447
|
}
|
|
2455
2448
|
|
|
2456
2449
|
/* Show focus ring on listbox when focused */
|
|
2457
2450
|
.vidply-playlist-list:focus {
|
|
2458
|
-
outline:
|
|
2459
|
-
outline-offset:
|
|
2451
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2452
|
+
outline-offset: 0.125rem;
|
|
2460
2453
|
}
|
|
2461
2454
|
|
|
2462
2455
|
.vidply-playlist-list:focus-visible {
|
|
2463
|
-
outline:
|
|
2464
|
-
outline-offset:
|
|
2456
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2457
|
+
outline-offset: 0.125rem;
|
|
2465
2458
|
}
|
|
2466
2459
|
|
|
2467
2460
|
.vidply-playlist-item-active {
|
|
@@ -2484,7 +2477,7 @@
|
|
|
2484
2477
|
.vidply-playlist-item-active .vidply-playlist-item-button:focus-visible {
|
|
2485
2478
|
background: var(--vidply-primary-20);
|
|
2486
2479
|
outline: var(--vidply-focus-outline-white);
|
|
2487
|
-
outline-offset: -
|
|
2480
|
+
outline-offset: -0.125rem;
|
|
2488
2481
|
}
|
|
2489
2482
|
|
|
2490
2483
|
/* Playlist Thumbnail */
|
|
@@ -2493,20 +2486,20 @@
|
|
|
2493
2486
|
background-color: var(--vidply-white-10);
|
|
2494
2487
|
background-position: center;
|
|
2495
2488
|
background-size: cover;
|
|
2496
|
-
border-radius:
|
|
2489
|
+
border-radius: 0.25rem;
|
|
2497
2490
|
display: flex;
|
|
2498
2491
|
flex-shrink: 0;
|
|
2499
|
-
height:
|
|
2492
|
+
height: 2.8125rem;
|
|
2500
2493
|
justify-content: center;
|
|
2501
2494
|
overflow: hidden;
|
|
2502
|
-
width:
|
|
2495
|
+
width: 5rem;
|
|
2503
2496
|
}
|
|
2504
2497
|
|
|
2505
2498
|
.vidply-playlist-thumbnail-icon {
|
|
2506
2499
|
color: var(--vidply-text-subtle);
|
|
2507
|
-
height:
|
|
2500
|
+
height: 2rem;
|
|
2508
2501
|
transition: var(--vidply-transition-default);
|
|
2509
|
-
width:
|
|
2502
|
+
width: 2rem;
|
|
2510
2503
|
}
|
|
2511
2504
|
|
|
2512
2505
|
.vidply-playlist-item-button:hover .vidply-playlist-thumbnail-icon {
|
|
@@ -2528,9 +2521,9 @@
|
|
|
2528
2521
|
.vidply-playlist-item-title {
|
|
2529
2522
|
color: var(--vidply-white);
|
|
2530
2523
|
display: block;
|
|
2531
|
-
font-size:
|
|
2524
|
+
font-size: 0.875rem;
|
|
2532
2525
|
font-weight: 500;
|
|
2533
|
-
margin-bottom:
|
|
2526
|
+
margin-bottom: 0.25rem;
|
|
2534
2527
|
overflow: hidden;
|
|
2535
2528
|
text-overflow: ellipsis;
|
|
2536
2529
|
white-space: nowrap;
|
|
@@ -2543,7 +2536,7 @@
|
|
|
2543
2536
|
.vidply-playlist-item-artist {
|
|
2544
2537
|
color: var(--vidply-text-disabled);
|
|
2545
2538
|
display: block;
|
|
2546
|
-
font-size:
|
|
2539
|
+
font-size: 0.75rem;
|
|
2547
2540
|
overflow: hidden;
|
|
2548
2541
|
text-overflow: ellipsis;
|
|
2549
2542
|
white-space: nowrap;
|
|
@@ -2552,10 +2545,10 @@
|
|
|
2552
2545
|
/* Playlist Item Icon */
|
|
2553
2546
|
.vidply-playlist-item-icon {
|
|
2554
2547
|
flex-shrink: 0;
|
|
2555
|
-
height:
|
|
2548
|
+
height: 1.25rem;
|
|
2556
2549
|
opacity: 0;
|
|
2557
2550
|
transition: opacity 0.2s ease;
|
|
2558
|
-
width:
|
|
2551
|
+
width: 1.25rem;
|
|
2559
2552
|
}
|
|
2560
2553
|
|
|
2561
2554
|
.vidply-playlist-item-active .vidply-playlist-item-icon {
|
|
@@ -2570,7 +2563,7 @@
|
|
|
2570
2563
|
}
|
|
2571
2564
|
|
|
2572
2565
|
.vidply-playlist-panel::-webkit-scrollbar {
|
|
2573
|
-
width:
|
|
2566
|
+
width: 0.5rem;
|
|
2574
2567
|
}
|
|
2575
2568
|
|
|
2576
2569
|
.vidply-playlist-panel::-webkit-scrollbar-track {
|
|
@@ -2579,7 +2572,7 @@
|
|
|
2579
2572
|
|
|
2580
2573
|
.vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2581
2574
|
background: var(--vidply-scrollbar-thumb);
|
|
2582
|
-
border-radius:
|
|
2575
|
+
border-radius: 0.25rem;
|
|
2583
2576
|
}
|
|
2584
2577
|
|
|
2585
2578
|
.vidply-playlist-panel::-webkit-scrollbar-thumb:hover {
|
|
@@ -2588,7 +2581,7 @@
|
|
|
2588
2581
|
|
|
2589
2582
|
/* Audio Player with Playlist */
|
|
2590
2583
|
.vidply-player.vidply-audio.vidply-has-playlist {
|
|
2591
|
-
min-height:
|
|
2584
|
+
min-height: 12.5rem;
|
|
2592
2585
|
}
|
|
2593
2586
|
|
|
2594
2587
|
.vidply-player.vidply-audio.vidply-has-playlist audio {
|
|
@@ -2605,18 +2598,18 @@
|
|
|
2605
2598
|
|
|
2606
2599
|
/* Transcript Window */
|
|
2607
2600
|
.vidply-transcript-window {
|
|
2608
|
-
backdrop-filter: blur(
|
|
2601
|
+
backdrop-filter: blur(0.625rem);
|
|
2609
2602
|
background: var(--vidply-bg-transcript);
|
|
2610
|
-
border:
|
|
2611
|
-
border-radius:
|
|
2612
|
-
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);
|
|
2613
2606
|
display: none;
|
|
2614
2607
|
flex-direction: column;
|
|
2615
|
-
min-width:
|
|
2608
|
+
min-width: 26.25rem;
|
|
2616
2609
|
order: 4; /* After video-wrapper (1), track-info (2), and playlist-panel (3) */
|
|
2617
2610
|
position: fixed;
|
|
2618
2611
|
top: 0;
|
|
2619
|
-
width:
|
|
2612
|
+
width: 26.25rem;
|
|
2620
2613
|
z-index: var(--vidply-z-transcript);
|
|
2621
2614
|
}
|
|
2622
2615
|
|
|
@@ -2624,13 +2617,13 @@
|
|
|
2624
2617
|
|
|
2625
2618
|
/* Minimum height for audio player transcript */
|
|
2626
2619
|
.vidply-player.vidply-audio .vidply-transcript-window {
|
|
2627
|
-
min-height:
|
|
2620
|
+
min-height: 12.5rem;
|
|
2628
2621
|
}
|
|
2629
2622
|
|
|
2630
2623
|
.vidply-transcript-header {
|
|
2631
2624
|
align-items: center;
|
|
2632
2625
|
background: #282828;
|
|
2633
|
-
border-bottom:
|
|
2626
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2634
2627
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
2635
2628
|
cursor: move;
|
|
2636
2629
|
display: flex;
|
|
@@ -2642,21 +2635,21 @@
|
|
|
2642
2635
|
|
|
2643
2636
|
.vidply-transcript-header:focus,
|
|
2644
2637
|
.vidply-transcript-header:focus-visible {
|
|
2645
|
-
box-shadow: 0 0 0
|
|
2646
|
-
outline:
|
|
2647
|
-
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;
|
|
2648
2641
|
}
|
|
2649
2642
|
|
|
2650
2643
|
.vidply-transcript-header h3 {
|
|
2651
2644
|
color: var(--vidply-white);
|
|
2652
2645
|
font-size: var(--vidply-font-lg);
|
|
2653
2646
|
font-weight: 600;
|
|
2654
|
-
height:
|
|
2655
|
-
left: -
|
|
2647
|
+
height: 0.0625rem;
|
|
2648
|
+
left: -625rem;
|
|
2656
2649
|
margin: 0;
|
|
2657
2650
|
overflow: hidden;
|
|
2658
2651
|
position: absolute;
|
|
2659
|
-
width:
|
|
2652
|
+
width: 0.0625rem;
|
|
2660
2653
|
}
|
|
2661
2654
|
|
|
2662
2655
|
.vidply-transcript-close {
|
|
@@ -2681,7 +2674,7 @@
|
|
|
2681
2674
|
|
|
2682
2675
|
.vidply-transcript-close:focus {
|
|
2683
2676
|
outline: var(--vidply-focus-outline-white);
|
|
2684
|
-
outline-offset:
|
|
2677
|
+
outline-offset: 0.125rem;
|
|
2685
2678
|
}
|
|
2686
2679
|
|
|
2687
2680
|
.vidply-transcript-close .vidply-icon {
|
|
@@ -2695,19 +2688,19 @@
|
|
|
2695
2688
|
overflow-y: auto;
|
|
2696
2689
|
|
|
2697
2690
|
/* iOS momentum scrolling */
|
|
2698
|
-
padding:
|
|
2691
|
+
padding: 0.75rem 0;
|
|
2699
2692
|
touch-action: pan-y;
|
|
2700
2693
|
}
|
|
2701
2694
|
|
|
2702
2695
|
.vidply-transcript-entry {
|
|
2703
2696
|
background: none;
|
|
2704
2697
|
border: none;
|
|
2705
|
-
border-left:
|
|
2698
|
+
border-left: 0.1875rem solid transparent;
|
|
2706
2699
|
color: inherit;
|
|
2707
2700
|
cursor: pointer;
|
|
2708
2701
|
display: block;
|
|
2709
2702
|
font: inherit;
|
|
2710
|
-
padding:
|
|
2703
|
+
padding: 0.75rem 1.25rem;
|
|
2711
2704
|
text-align: left;
|
|
2712
2705
|
transition: background 0.2s ease;
|
|
2713
2706
|
width: 100%;
|
|
@@ -2728,8 +2721,8 @@
|
|
|
2728
2721
|
font-family: 'Courier New', monospace;
|
|
2729
2722
|
font-size: 100%;
|
|
2730
2723
|
font-weight: 600;
|
|
2731
|
-
margin-bottom:
|
|
2732
|
-
margin-right:
|
|
2724
|
+
margin-bottom: 0.25rem;
|
|
2725
|
+
margin-right: 0.5rem;
|
|
2733
2726
|
}
|
|
2734
2727
|
|
|
2735
2728
|
.vidply-transcript-text {
|
|
@@ -2751,7 +2744,7 @@
|
|
|
2751
2744
|
/* Transcript entry types */
|
|
2752
2745
|
.vidply-transcript-description {
|
|
2753
2746
|
background: rgb(100 149 237 / 8%); /* Subtle blue tint for descriptions */
|
|
2754
|
-
border-left:
|
|
2747
|
+
border-left: 0.1875rem solid #8BB3FB;
|
|
2755
2748
|
}
|
|
2756
2749
|
|
|
2757
2750
|
.vidply-transcript-description .vidply-transcript-text {
|
|
@@ -2791,7 +2784,7 @@
|
|
|
2791
2784
|
}
|
|
2792
2785
|
|
|
2793
2786
|
.vidply-transcript-content::-webkit-scrollbar {
|
|
2794
|
-
width:
|
|
2787
|
+
width: 0.5rem;
|
|
2795
2788
|
}
|
|
2796
2789
|
|
|
2797
2790
|
.vidply-transcript-content::-webkit-scrollbar-track {
|
|
@@ -2800,7 +2793,7 @@
|
|
|
2800
2793
|
|
|
2801
2794
|
.vidply-transcript-content::-webkit-scrollbar-thumb {
|
|
2802
2795
|
background: var(--vidply-scrollbar-thumb);
|
|
2803
|
-
border-radius:
|
|
2796
|
+
border-radius: 0.25rem;
|
|
2804
2797
|
}
|
|
2805
2798
|
|
|
2806
2799
|
.vidply-transcript-content::-webkit-scrollbar-thumb:hover {
|
|
@@ -2811,7 +2804,7 @@
|
|
|
2811
2804
|
.vidply-transcript-header-left {
|
|
2812
2805
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
2813
2806
|
display: flex;
|
|
2814
|
-
gap:
|
|
2807
|
+
gap: 1rem;
|
|
2815
2808
|
position: relative;
|
|
2816
2809
|
}
|
|
2817
2810
|
|
|
@@ -2825,21 +2818,21 @@
|
|
|
2825
2818
|
align-self: center; /* Center checkbox label vertically in header */
|
|
2826
2819
|
cursor: pointer;
|
|
2827
2820
|
display: flex;
|
|
2828
|
-
gap:
|
|
2821
|
+
gap: 0.375rem;
|
|
2829
2822
|
user-select: none;
|
|
2830
2823
|
white-space: nowrap;
|
|
2831
2824
|
}
|
|
2832
2825
|
|
|
2833
2826
|
.vidply-transcript-autoscroll-label input[type="checkbox"] {
|
|
2834
2827
|
cursor: pointer;
|
|
2835
|
-
height:
|
|
2828
|
+
height: 1rem;
|
|
2836
2829
|
margin: 0;
|
|
2837
|
-
width:
|
|
2830
|
+
width: 1rem;
|
|
2838
2831
|
}
|
|
2839
2832
|
|
|
2840
2833
|
.vidply-transcript-autoscroll-text {
|
|
2841
2834
|
color: var(--vidply-text-muted);
|
|
2842
|
-
font-size:
|
|
2835
|
+
font-size: 0.8125rem;
|
|
2843
2836
|
transition: color 0.2s ease;
|
|
2844
2837
|
}
|
|
2845
2838
|
|
|
@@ -2853,32 +2846,32 @@
|
|
|
2853
2846
|
align-self: center; /* Center this wrapper vertically in header */
|
|
2854
2847
|
display: flex;
|
|
2855
2848
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
2856
|
-
gap:
|
|
2849
|
+
gap: 0.5rem;
|
|
2857
2850
|
}
|
|
2858
2851
|
|
|
2859
2852
|
.vidply-transcript-language-label {
|
|
2860
2853
|
/* Visible label for voice input accessibility */
|
|
2861
2854
|
color: var(--vidply-text-muted);
|
|
2862
2855
|
cursor: pointer;
|
|
2863
|
-
font-size:
|
|
2856
|
+
font-size: 0.8125rem;
|
|
2864
2857
|
font-weight: 400;
|
|
2865
|
-
margin-left:
|
|
2858
|
+
margin-left: 0.5rem;
|
|
2866
2859
|
white-space: nowrap;
|
|
2867
2860
|
}
|
|
2868
2861
|
|
|
2869
2862
|
.vidply-transcript-language-select {
|
|
2870
2863
|
background: var(--vidply-bg-menu);
|
|
2871
|
-
border:
|
|
2872
|
-
border-radius:
|
|
2864
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2865
|
+
border-radius: 0.25rem;
|
|
2873
2866
|
color: var(--vidply-text);
|
|
2874
|
-
font-size:
|
|
2875
|
-
max-width:
|
|
2876
|
-
padding:
|
|
2867
|
+
font-size: 0.875rem;
|
|
2868
|
+
max-width: 7.5rem;
|
|
2869
|
+
padding: 0.25rem 0.5rem;
|
|
2877
2870
|
}
|
|
2878
2871
|
|
|
2879
2872
|
.vidply-transcript-language-select:focus {
|
|
2880
2873
|
outline: var(--vidply-focus-outline);
|
|
2881
|
-
outline-offset:
|
|
2874
|
+
outline-offset: 0.125rem;
|
|
2882
2875
|
}
|
|
2883
2876
|
|
|
2884
2877
|
/* Transcript Settings Button */
|
|
@@ -2906,7 +2899,7 @@
|
|
|
2906
2899
|
|
|
2907
2900
|
.vidply-transcript-settings:focus {
|
|
2908
2901
|
outline: var(--vidply-focus-outline-white);
|
|
2909
|
-
outline-offset:
|
|
2902
|
+
outline-offset: 0.125rem;
|
|
2910
2903
|
}
|
|
2911
2904
|
|
|
2912
2905
|
.vidply-transcript-settings .vidply-icon {
|
|
@@ -2917,31 +2910,31 @@
|
|
|
2917
2910
|
/* Transcript Settings Menu */
|
|
2918
2911
|
.vidply-transcript-settings-menu {
|
|
2919
2912
|
background: var(--vidply-bg-menu);
|
|
2920
|
-
border:
|
|
2913
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2921
2914
|
border-radius: var(--vidply-radius-md);
|
|
2922
2915
|
box-shadow: var(--vidply-shadow-lg);
|
|
2923
2916
|
display: none;
|
|
2924
|
-
min-width:
|
|
2917
|
+
min-width: 15rem;
|
|
2925
2918
|
padding: var(--vidply-gap-sm);
|
|
2926
2919
|
position: absolute;
|
|
2927
2920
|
z-index: 100;
|
|
2928
2921
|
}
|
|
2929
2922
|
|
|
2930
2923
|
.vidply-transcript-settings-menu::after {
|
|
2931
|
-
border-bottom:
|
|
2932
|
-
border-left:
|
|
2933
|
-
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;
|
|
2934
2927
|
bottom: 100%;
|
|
2935
2928
|
content: '';
|
|
2936
2929
|
height: 0;
|
|
2937
|
-
left:
|
|
2930
|
+
left: 0.5rem;
|
|
2938
2931
|
position: absolute;
|
|
2939
2932
|
width: 0;
|
|
2940
2933
|
}
|
|
2941
2934
|
|
|
2942
2935
|
.vidply-transcript-settings-menu.vidply-menu-above::after {
|
|
2943
2936
|
border-bottom: none;
|
|
2944
|
-
border-top:
|
|
2937
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
2945
2938
|
bottom: auto;
|
|
2946
2939
|
top: 100%;
|
|
2947
2940
|
}
|
|
@@ -2957,7 +2950,7 @@
|
|
|
2957
2950
|
display: flex;
|
|
2958
2951
|
font-size: var(--vidply-font-base);
|
|
2959
2952
|
gap: var(--vidply-gap-md);
|
|
2960
|
-
padding: var(--vidply-padding-md)
|
|
2953
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
2961
2954
|
text-align: left;
|
|
2962
2955
|
transition: var(--vidply-transition-normal);
|
|
2963
2956
|
width: 100%;
|
|
@@ -2973,8 +2966,8 @@
|
|
|
2973
2966
|
|
|
2974
2967
|
.vidply-transcript-settings-item:focus {
|
|
2975
2968
|
background: var(--vidply-primary-25);
|
|
2976
|
-
outline:
|
|
2977
|
-
outline-offset: -
|
|
2969
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
2970
|
+
outline-offset: -0.125rem;
|
|
2978
2971
|
}
|
|
2979
2972
|
|
|
2980
2973
|
.vidply-transcript-settings-item:focus span {
|
|
@@ -2995,16 +2988,16 @@
|
|
|
2995
2988
|
/* Move Mode Visual Feedback */
|
|
2996
2989
|
.vidply-transcript-move-mode {
|
|
2997
2990
|
animation: transcriptPulse 0.5s ease-in-out 2;
|
|
2998
|
-
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);
|
|
2999
2992
|
}
|
|
3000
2993
|
|
|
3001
2994
|
@keyframes transcriptPulse {
|
|
3002
2995
|
0%, 100% {
|
|
3003
|
-
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);
|
|
3004
2997
|
}
|
|
3005
2998
|
|
|
3006
2999
|
50% {
|
|
3007
|
-
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);
|
|
3008
3001
|
}
|
|
3009
3002
|
}
|
|
3010
3003
|
|
|
@@ -3018,67 +3011,67 @@
|
|
|
3018
3011
|
.vidply-transcript-resize-nw,
|
|
3019
3012
|
.vidply-transcript-resize-se,
|
|
3020
3013
|
.vidply-transcript-resize-sw {
|
|
3021
|
-
height:
|
|
3022
|
-
width:
|
|
3014
|
+
height: 1rem;
|
|
3015
|
+
width: 1rem;
|
|
3023
3016
|
}
|
|
3024
3017
|
|
|
3025
3018
|
.vidply-transcript-resize-n,
|
|
3026
3019
|
.vidply-transcript-resize-s {
|
|
3027
3020
|
cursor: ns-resize;
|
|
3028
|
-
height:
|
|
3029
|
-
left:
|
|
3030
|
-
right:
|
|
3021
|
+
height: 0.5rem;
|
|
3022
|
+
left: 1rem;
|
|
3023
|
+
right: 1rem;
|
|
3031
3024
|
}
|
|
3032
3025
|
|
|
3033
3026
|
.vidply-transcript-resize-e,
|
|
3034
3027
|
.vidply-transcript-resize-w {
|
|
3035
|
-
bottom:
|
|
3028
|
+
bottom: 1rem;
|
|
3036
3029
|
cursor: ew-resize;
|
|
3037
|
-
top:
|
|
3038
|
-
width:
|
|
3030
|
+
top: 1rem;
|
|
3031
|
+
width: 0.5rem;
|
|
3039
3032
|
}
|
|
3040
3033
|
|
|
3041
|
-
.vidply-transcript-resize-n { top: -
|
|
3042
|
-
.vidply-transcript-resize-s { bottom: -
|
|
3043
|
-
.vidply-transcript-resize-e { right: -
|
|
3044
|
-
.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; }
|
|
3045
3038
|
|
|
3046
3039
|
.vidply-transcript-resize-ne {
|
|
3047
3040
|
cursor: nesw-resize;
|
|
3048
|
-
right: -
|
|
3049
|
-
top: -
|
|
3041
|
+
right: -0.5rem;
|
|
3042
|
+
top: -0.5rem;
|
|
3050
3043
|
}
|
|
3051
3044
|
|
|
3052
3045
|
.vidply-transcript-resize-nw {
|
|
3053
3046
|
cursor: nwse-resize;
|
|
3054
|
-
left: -
|
|
3055
|
-
top: -
|
|
3047
|
+
left: -0.5rem;
|
|
3048
|
+
top: -0.5rem;
|
|
3056
3049
|
}
|
|
3057
3050
|
|
|
3058
3051
|
.vidply-transcript-resize-se {
|
|
3059
|
-
bottom: -
|
|
3052
|
+
bottom: -0.5rem;
|
|
3060
3053
|
cursor: nwse-resize;
|
|
3061
|
-
right: -
|
|
3054
|
+
right: -0.5rem;
|
|
3062
3055
|
}
|
|
3063
3056
|
|
|
3064
3057
|
.vidply-transcript-resize-sw {
|
|
3065
|
-
bottom: -
|
|
3058
|
+
bottom: -0.5rem;
|
|
3066
3059
|
cursor: nesw-resize;
|
|
3067
|
-
left: -
|
|
3060
|
+
left: -0.5rem;
|
|
3068
3061
|
}
|
|
3069
3062
|
|
|
3070
3063
|
.vidply-transcript-resizable .vidply-transcript-resize-handle::after {
|
|
3071
3064
|
background: var(--vidply-primary-light);
|
|
3072
3065
|
border-radius: 50%;
|
|
3073
3066
|
content: '';
|
|
3074
|
-
height:
|
|
3067
|
+
height: 0.375rem;
|
|
3075
3068
|
left: 50%;
|
|
3076
3069
|
opacity: 0;
|
|
3077
3070
|
position: absolute;
|
|
3078
3071
|
top: 50%;
|
|
3079
3072
|
transform: translate(-50%, -50%);
|
|
3080
3073
|
transition: opacity 0.2s ease;
|
|
3081
|
-
width:
|
|
3074
|
+
width: 0.375rem;
|
|
3082
3075
|
}
|
|
3083
3076
|
|
|
3084
3077
|
.vidply-transcript-resizable:hover .vidply-transcript-resize-handle::after {
|
|
@@ -3091,7 +3084,7 @@
|
|
|
3091
3084
|
|
|
3092
3085
|
/* Resizing State */
|
|
3093
3086
|
.vidply-transcript-resizing {
|
|
3094
|
-
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);
|
|
3095
3088
|
transition: none !important;
|
|
3096
3089
|
}
|
|
3097
3090
|
|
|
@@ -3101,17 +3094,17 @@
|
|
|
3101
3094
|
|
|
3102
3095
|
/* Keyboard Drag Mode */
|
|
3103
3096
|
.vidply-transcript-keyboard-drag {
|
|
3104
|
-
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);
|
|
3105
3098
|
}
|
|
3106
3099
|
|
|
3107
3100
|
.vidply-transcript-drag-indicator {
|
|
3108
3101
|
background: linear-gradient(135deg, var(--vidply-primary) 0%, var(--vidply-primary-light) 100%);
|
|
3109
|
-
border-radius: 0 0
|
|
3102
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
3110
3103
|
color: var(--vidply-white);
|
|
3111
|
-
font-size:
|
|
3104
|
+
font-size: 0.75rem;
|
|
3112
3105
|
font-weight: 600;
|
|
3113
3106
|
left: 0;
|
|
3114
|
-
padding:
|
|
3107
|
+
padding: 0.5rem 0.75rem;
|
|
3115
3108
|
position: absolute;
|
|
3116
3109
|
right: 0;
|
|
3117
3110
|
text-align: center;
|
|
@@ -3123,11 +3116,11 @@
|
|
|
3123
3116
|
.vidply-transcript-move-tooltip {
|
|
3124
3117
|
animation: fadeInDown 0.3s ease;
|
|
3125
3118
|
background: var(--vidply-black-90);
|
|
3126
|
-
border-radius:
|
|
3119
|
+
border-radius: 0.25rem;
|
|
3127
3120
|
color: var(--vidply-white);
|
|
3128
|
-
font-size:
|
|
3121
|
+
font-size: 0.75rem;
|
|
3129
3122
|
left: 50%;
|
|
3130
|
-
padding:
|
|
3123
|
+
padding: 0.375rem 0.75rem;
|
|
3131
3124
|
position: absolute;
|
|
3132
3125
|
text-align: center;
|
|
3133
3126
|
top: 100%;
|
|
@@ -3139,11 +3132,11 @@
|
|
|
3139
3132
|
.vidply-transcript-resize-tooltip {
|
|
3140
3133
|
animation: fadeInDown 0.3s ease;
|
|
3141
3134
|
background: var(--vidply-primary);
|
|
3142
|
-
border-radius:
|
|
3135
|
+
border-radius: 0.25rem;
|
|
3143
3136
|
color: var(--vidply-white);
|
|
3144
|
-
font-size:
|
|
3137
|
+
font-size: 0.75rem;
|
|
3145
3138
|
left: 50%;
|
|
3146
|
-
padding:
|
|
3139
|
+
padding: 0.375rem 0.75rem;
|
|
3147
3140
|
position: absolute;
|
|
3148
3141
|
text-align: center;
|
|
3149
3142
|
top: 100%;
|
|
@@ -3155,7 +3148,7 @@
|
|
|
3155
3148
|
@keyframes fadeInDown {
|
|
3156
3149
|
from {
|
|
3157
3150
|
opacity: 0;
|
|
3158
|
-
transform: translateX(-50%) translateY(-
|
|
3151
|
+
transform: translateX(-50%) translateY(-0.625rem);
|
|
3159
3152
|
}
|
|
3160
3153
|
|
|
3161
3154
|
to {
|
|
@@ -3167,15 +3160,15 @@
|
|
|
3167
3160
|
/* Transcript Style Dialog - Dropdown Menu Style */
|
|
3168
3161
|
.vidply-transcript-style-dialog {
|
|
3169
3162
|
background: var(--vidply-bg-menu);
|
|
3170
|
-
border:
|
|
3171
|
-
border-radius:
|
|
3163
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3164
|
+
border-radius: 0.5rem;
|
|
3172
3165
|
box-shadow: var(--vidply-shadow-lg);
|
|
3173
3166
|
display: none;
|
|
3174
3167
|
left: 0;
|
|
3175
|
-
max-height:
|
|
3176
|
-
min-width:
|
|
3168
|
+
max-height: 31.25rem;
|
|
3169
|
+
min-width: 17.5rem;
|
|
3177
3170
|
overflow-y: auto;
|
|
3178
|
-
padding:
|
|
3171
|
+
padding: 0.75rem;
|
|
3179
3172
|
position: absolute;
|
|
3180
3173
|
top: 100%;
|
|
3181
3174
|
width: auto;
|
|
@@ -3186,26 +3179,26 @@
|
|
|
3186
3179
|
.vidply-transcript-style-dialog::after {
|
|
3187
3180
|
border-color: transparent transparent var(--vidply-bg-menu) transparent;
|
|
3188
3181
|
border-style: solid;
|
|
3189
|
-
border-width: 0
|
|
3182
|
+
border-width: 0 0.5rem 0.5rem;
|
|
3190
3183
|
content: '';
|
|
3191
3184
|
height: 0;
|
|
3192
|
-
left:
|
|
3185
|
+
left: 0.75rem;
|
|
3193
3186
|
position: absolute;
|
|
3194
|
-
top: -
|
|
3187
|
+
top: -0.5rem;
|
|
3195
3188
|
width: 0;
|
|
3196
3189
|
}
|
|
3197
3190
|
|
|
3198
3191
|
.vidply-transcript-style-title {
|
|
3199
|
-
border-bottom:
|
|
3192
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
3200
3193
|
color: var(--vidply-white);
|
|
3201
|
-
font-size:
|
|
3194
|
+
font-size: 0.875rem;
|
|
3202
3195
|
font-weight: 600;
|
|
3203
|
-
margin: 0 0
|
|
3204
|
-
padding-bottom:
|
|
3196
|
+
margin: 0 0 0.75rem;
|
|
3197
|
+
padding-bottom: 0.5rem;
|
|
3205
3198
|
}
|
|
3206
3199
|
|
|
3207
3200
|
.vidply-transcript-style-group {
|
|
3208
|
-
margin-bottom:
|
|
3201
|
+
margin-bottom: 0.75rem;
|
|
3209
3202
|
}
|
|
3210
3203
|
|
|
3211
3204
|
.vidply-transcript-style-group:last-child {
|
|
@@ -3215,19 +3208,19 @@
|
|
|
3215
3208
|
.vidply-transcript-style-group label {
|
|
3216
3209
|
color: var(--vidply-white-90);
|
|
3217
3210
|
display: block;
|
|
3218
|
-
font-size:
|
|
3211
|
+
font-size: 0.75rem;
|
|
3219
3212
|
font-weight: 500;
|
|
3220
|
-
margin-bottom:
|
|
3213
|
+
margin-bottom: 0.375rem;
|
|
3221
3214
|
}
|
|
3222
3215
|
|
|
3223
3216
|
/* Style Select */
|
|
3224
3217
|
.vidply-transcript-style-select {
|
|
3225
3218
|
background: var(--vidply-bg-menu);
|
|
3226
|
-
border:
|
|
3227
|
-
border-radius:
|
|
3219
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3220
|
+
border-radius: 0.25rem;
|
|
3228
3221
|
color: var(--vidply-text);
|
|
3229
|
-
font-size:
|
|
3230
|
-
padding:
|
|
3222
|
+
font-size: 0.875rem;
|
|
3223
|
+
padding: 0.25rem 0.5rem;
|
|
3231
3224
|
transition: var(--vidply-transition-default);
|
|
3232
3225
|
width: 100%;
|
|
3233
3226
|
}
|
|
@@ -3240,50 +3233,50 @@
|
|
|
3240
3233
|
.vidply-transcript-style-select:focus {
|
|
3241
3234
|
background: var(--vidply-white-15);
|
|
3242
3235
|
border-color: var(--vidply-border-focus);
|
|
3243
|
-
box-shadow: 0 0 0
|
|
3236
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3244
3237
|
outline: var(--vidply-focus-outline);
|
|
3245
|
-
outline-offset:
|
|
3238
|
+
outline-offset: 0.125rem;
|
|
3246
3239
|
}
|
|
3247
3240
|
|
|
3248
3241
|
/* Style Color Input */
|
|
3249
3242
|
.vidply-transcript-style-color {
|
|
3250
|
-
border:
|
|
3251
|
-
border-radius:
|
|
3243
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3244
|
+
border-radius: 0.25rem;
|
|
3252
3245
|
cursor: pointer;
|
|
3253
|
-
height:
|
|
3246
|
+
height: 2rem;
|
|
3254
3247
|
outline: none;
|
|
3255
|
-
padding:
|
|
3248
|
+
padding: 0.25rem;
|
|
3256
3249
|
transition: var(--vidply-transition-default);
|
|
3257
3250
|
width: 100%;
|
|
3258
3251
|
}
|
|
3259
3252
|
|
|
3260
3253
|
.vidply-transcript-style-color:hover {
|
|
3261
3254
|
border-color: var(--vidply-border-hover);
|
|
3262
|
-
box-shadow: 0 0 0
|
|
3255
|
+
box-shadow: 0 0 0 0.0625rem var(--vidply-primary-20);
|
|
3263
3256
|
}
|
|
3264
3257
|
|
|
3265
3258
|
.vidply-transcript-style-color:focus {
|
|
3266
3259
|
border-color: var(--vidply-border-focus);
|
|
3267
|
-
box-shadow: 0 0 0
|
|
3260
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3268
3261
|
outline: var(--vidply-focus-outline);
|
|
3269
|
-
outline-offset:
|
|
3262
|
+
outline-offset: 0.125rem;
|
|
3270
3263
|
}
|
|
3271
3264
|
|
|
3272
3265
|
/* Style Range Slider */
|
|
3273
3266
|
.vidply-transcript-style-range-container {
|
|
3274
3267
|
align-items: center;
|
|
3275
3268
|
display: flex;
|
|
3276
|
-
gap:
|
|
3269
|
+
gap: 0.75rem;
|
|
3277
3270
|
}
|
|
3278
3271
|
|
|
3279
3272
|
.vidply-transcript-style-range {
|
|
3280
3273
|
-webkit-appearance: none;
|
|
3281
3274
|
appearance: none;
|
|
3282
3275
|
background: var(--vidply-white-20);
|
|
3283
|
-
border-radius:
|
|
3276
|
+
border-radius: 0.1875rem;
|
|
3284
3277
|
cursor: pointer;
|
|
3285
3278
|
flex: 1;
|
|
3286
|
-
height:
|
|
3279
|
+
height: 0.375rem;
|
|
3287
3280
|
outline: none;
|
|
3288
3281
|
transition: var(--vidply-transition-default);
|
|
3289
3282
|
}
|
|
@@ -3294,20 +3287,20 @@
|
|
|
3294
3287
|
|
|
3295
3288
|
.vidply-transcript-style-range:focus {
|
|
3296
3289
|
background: var(--vidply-white-30);
|
|
3297
|
-
box-shadow: 0 0 0
|
|
3290
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-20);
|
|
3298
3291
|
}
|
|
3299
3292
|
|
|
3300
3293
|
.vidply-transcript-style-range::-webkit-slider-thumb {
|
|
3301
3294
|
-webkit-appearance: none;
|
|
3302
3295
|
appearance: none;
|
|
3303
3296
|
background: var(--vidply-primary-light);
|
|
3304
|
-
border:
|
|
3297
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3305
3298
|
border-radius: 50%;
|
|
3306
3299
|
box-shadow: var(--vidply-shadow-sm);
|
|
3307
3300
|
cursor: pointer;
|
|
3308
|
-
height:
|
|
3301
|
+
height: 1rem;
|
|
3309
3302
|
transition: all 0.15s ease;
|
|
3310
|
-
width:
|
|
3303
|
+
width: 1rem;
|
|
3311
3304
|
}
|
|
3312
3305
|
|
|
3313
3306
|
.vidply-transcript-style-range::-webkit-slider-thumb:hover {
|
|
@@ -3317,13 +3310,13 @@
|
|
|
3317
3310
|
|
|
3318
3311
|
.vidply-transcript-style-range::-moz-range-thumb {
|
|
3319
3312
|
background: var(--vidply-primary-light);
|
|
3320
|
-
border:
|
|
3313
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3321
3314
|
border-radius: 50%;
|
|
3322
3315
|
box-shadow: var(--vidply-shadow-sm);
|
|
3323
3316
|
cursor: pointer;
|
|
3324
|
-
height:
|
|
3317
|
+
height: 1rem;
|
|
3325
3318
|
transition: all 0.15s ease;
|
|
3326
|
-
width:
|
|
3319
|
+
width: 1rem;
|
|
3327
3320
|
}
|
|
3328
3321
|
|
|
3329
3322
|
.vidply-transcript-style-range::-moz-range-thumb:hover {
|
|
@@ -3333,9 +3326,9 @@
|
|
|
3333
3326
|
|
|
3334
3327
|
.vidply-transcript-style-value {
|
|
3335
3328
|
color: var(--vidply-text-muted);
|
|
3336
|
-
font-size:
|
|
3329
|
+
font-size: 0.8125rem;
|
|
3337
3330
|
font-weight: 600;
|
|
3338
|
-
min-width:
|
|
3331
|
+
min-width: 2.5rem;
|
|
3339
3332
|
text-align: right;
|
|
3340
3333
|
}
|
|
3341
3334
|
|
|
@@ -3343,20 +3336,20 @@
|
|
|
3343
3336
|
.vidply-transcript-style-close {
|
|
3344
3337
|
background: var(--vidply-primary);
|
|
3345
3338
|
border: none;
|
|
3346
|
-
border-radius:
|
|
3339
|
+
border-radius: 0.25rem;
|
|
3347
3340
|
color: var(--vidply-white);
|
|
3348
3341
|
cursor: pointer;
|
|
3349
|
-
font-size:
|
|
3342
|
+
font-size: 0.8125rem;
|
|
3350
3343
|
font-weight: 600;
|
|
3351
|
-
margin-top:
|
|
3352
|
-
padding:
|
|
3344
|
+
margin-top: 0.75rem;
|
|
3345
|
+
padding: 0.5rem 1rem;
|
|
3353
3346
|
transition: var(--vidply-transition-default);
|
|
3354
3347
|
width: 100%;
|
|
3355
3348
|
}
|
|
3356
3349
|
|
|
3357
3350
|
.vidply-transcript-style-close:hover {
|
|
3358
3351
|
background: var(--vidply-primary-light);
|
|
3359
|
-
transform: translateY(-
|
|
3352
|
+
transform: translateY(-0.0625rem);
|
|
3360
3353
|
}
|
|
3361
3354
|
|
|
3362
3355
|
.vidply-transcript-style-close:active {
|
|
@@ -3364,22 +3357,22 @@
|
|
|
3364
3357
|
}
|
|
3365
3358
|
|
|
3366
3359
|
.vidply-transcript-style-close:focus {
|
|
3367
|
-
box-shadow: 0 0 0
|
|
3360
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3368
3361
|
outline: var(--vidply-focus-outline);
|
|
3369
|
-
outline-offset:
|
|
3362
|
+
outline-offset: 0.125rem;
|
|
3370
3363
|
}
|
|
3371
3364
|
|
|
3372
3365
|
/* Sign Language Video Wrapper */
|
|
3373
3366
|
.vidply-sign-language-wrapper {
|
|
3374
3367
|
background: transparent;
|
|
3375
|
-
border-radius:
|
|
3368
|
+
border-radius: 0.5rem;
|
|
3376
3369
|
height: auto;
|
|
3377
3370
|
max-width: none;
|
|
3378
|
-
min-height:
|
|
3371
|
+
min-height: 6.25rem;
|
|
3379
3372
|
overflow: visible; /* Allow menu to overflow */
|
|
3380
3373
|
position: absolute;
|
|
3381
3374
|
transition: opacity 0.3s ease;
|
|
3382
|
-
width:
|
|
3375
|
+
width: 17.5rem;
|
|
3383
3376
|
z-index: 3;
|
|
3384
3377
|
}
|
|
3385
3378
|
|
|
@@ -3388,15 +3381,15 @@
|
|
|
3388
3381
|
}
|
|
3389
3382
|
|
|
3390
3383
|
.vidply-sign-language-wrapper:focus {
|
|
3391
|
-
outline:
|
|
3392
|
-
outline-offset:
|
|
3384
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
3385
|
+
outline-offset: 0.125rem;
|
|
3393
3386
|
}
|
|
3394
3387
|
|
|
3395
3388
|
/* Sign Language Header */
|
|
3396
3389
|
.vidply-sign-language-header {
|
|
3397
3390
|
align-items: center;
|
|
3398
3391
|
background: #282828;
|
|
3399
|
-
border-bottom:
|
|
3392
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
3400
3393
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
3401
3394
|
cursor: move;
|
|
3402
3395
|
display: flex;
|
|
@@ -3409,15 +3402,15 @@
|
|
|
3409
3402
|
|
|
3410
3403
|
.vidply-sign-language-header:focus,
|
|
3411
3404
|
.vidply-sign-language-header:focus-visible {
|
|
3412
|
-
box-shadow: 0 0 0
|
|
3413
|
-
outline:
|
|
3414
|
-
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;
|
|
3415
3408
|
}
|
|
3416
3409
|
|
|
3417
3410
|
.vidply-sign-language-header-left {
|
|
3418
3411
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
3419
3412
|
display: flex;
|
|
3420
|
-
gap:
|
|
3413
|
+
gap: 1rem;
|
|
3421
3414
|
position: relative; /* Needed for menu positioning */
|
|
3422
3415
|
}
|
|
3423
3416
|
|
|
@@ -3426,29 +3419,29 @@
|
|
|
3426
3419
|
align-self: center; /* Center this wrapper vertically in header */
|
|
3427
3420
|
display: flex;
|
|
3428
3421
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
3429
|
-
gap:
|
|
3422
|
+
gap: 0.5rem;
|
|
3430
3423
|
}
|
|
3431
3424
|
|
|
3432
3425
|
.vidply-sign-language-label {
|
|
3433
3426
|
/* Visible label for voice input accessibility */
|
|
3434
3427
|
color: var(--vidply-white);
|
|
3435
|
-
font-size:
|
|
3428
|
+
font-size: 0.75rem;
|
|
3436
3429
|
font-weight: 500;
|
|
3437
3430
|
white-space: nowrap;
|
|
3438
3431
|
}
|
|
3439
3432
|
|
|
3440
3433
|
.vidply-sign-language-select {
|
|
3441
3434
|
background: var(--vidply-bg-menu);
|
|
3442
|
-
border:
|
|
3443
|
-
border-radius:
|
|
3435
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3436
|
+
border-radius: 0.25rem;
|
|
3444
3437
|
color: var(--vidply-text);
|
|
3445
|
-
font-size:
|
|
3446
|
-
padding:
|
|
3438
|
+
font-size: 0.875rem;
|
|
3439
|
+
padding: 0.25rem 0.5rem;
|
|
3447
3440
|
}
|
|
3448
3441
|
|
|
3449
3442
|
.vidply-sign-language-select:focus {
|
|
3450
3443
|
outline: var(--vidply-focus-outline);
|
|
3451
|
-
outline-offset:
|
|
3444
|
+
outline-offset: 0.125rem;
|
|
3452
3445
|
}
|
|
3453
3446
|
|
|
3454
3447
|
/* Sign Language Settings Button */
|
|
@@ -3475,7 +3468,7 @@
|
|
|
3475
3468
|
|
|
3476
3469
|
.vidply-sign-language-settings:focus {
|
|
3477
3470
|
outline: var(--vidply-focus-outline-white);
|
|
3478
|
-
outline-offset:
|
|
3471
|
+
outline-offset: 0.125rem;
|
|
3479
3472
|
}
|
|
3480
3473
|
|
|
3481
3474
|
.vidply-sign-language-settings .vidply-icon {
|
|
@@ -3486,20 +3479,20 @@
|
|
|
3486
3479
|
/* Sign Language Settings Menu */
|
|
3487
3480
|
.vidply-sign-language-settings-menu {
|
|
3488
3481
|
background: var(--vidply-bg-menu);
|
|
3489
|
-
border:
|
|
3482
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3490
3483
|
border-radius: var(--vidply-radius-md);
|
|
3491
3484
|
box-shadow: var(--vidply-shadow-lg);
|
|
3492
3485
|
display: none;
|
|
3493
|
-
min-width:
|
|
3486
|
+
min-width: 15rem;
|
|
3494
3487
|
padding: var(--vidply-gap-sm);
|
|
3495
3488
|
position: absolute;
|
|
3496
3489
|
z-index: 100;
|
|
3497
3490
|
}
|
|
3498
3491
|
|
|
3499
3492
|
.vidply-sign-language-settings-menu::after {
|
|
3500
|
-
border-bottom:
|
|
3501
|
-
border-left:
|
|
3502
|
-
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;
|
|
3503
3496
|
bottom: 100%;
|
|
3504
3497
|
content: '';
|
|
3505
3498
|
height: 0;
|
|
@@ -3510,7 +3503,7 @@
|
|
|
3510
3503
|
|
|
3511
3504
|
.vidply-sign-language-settings-menu.vidply-menu-above::after {
|
|
3512
3505
|
border-bottom: none;
|
|
3513
|
-
border-top:
|
|
3506
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
3514
3507
|
bottom: auto;
|
|
3515
3508
|
top: 100%;
|
|
3516
3509
|
}
|
|
@@ -3526,7 +3519,7 @@
|
|
|
3526
3519
|
display: flex;
|
|
3527
3520
|
font-size: var(--vidply-font-base);
|
|
3528
3521
|
gap: var(--vidply-gap-md);
|
|
3529
|
-
padding: var(--vidply-padding-md)
|
|
3522
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
3530
3523
|
text-align: left;
|
|
3531
3524
|
transition: var(--vidply-transition-normal);
|
|
3532
3525
|
width: 100%;
|
|
@@ -3568,12 +3561,12 @@
|
|
|
3568
3561
|
color: var(--vidply-white);
|
|
3569
3562
|
font-size: var(--vidply-font-lg);
|
|
3570
3563
|
font-weight: 600;
|
|
3571
|
-
height:
|
|
3572
|
-
left: -
|
|
3564
|
+
height: 0.0625rem;
|
|
3565
|
+
left: -625rem;
|
|
3573
3566
|
margin: 0;
|
|
3574
3567
|
overflow: hidden;
|
|
3575
3568
|
position: absolute;
|
|
3576
|
-
width:
|
|
3569
|
+
width: 0.0625rem;
|
|
3577
3570
|
}
|
|
3578
3571
|
|
|
3579
3572
|
.vidply-sign-language-close {
|
|
@@ -3598,7 +3591,7 @@
|
|
|
3598
3591
|
|
|
3599
3592
|
.vidply-sign-language-close:focus {
|
|
3600
3593
|
outline: var(--vidply-focus-outline-white);
|
|
3601
|
-
outline-offset:
|
|
3594
|
+
outline-offset: 0.125rem;
|
|
3602
3595
|
}
|
|
3603
3596
|
|
|
3604
3597
|
.vidply-sign-language-close .vidply-icon {
|
|
@@ -3609,10 +3602,10 @@
|
|
|
3609
3602
|
/* Sign Language Video */
|
|
3610
3603
|
.vidply-sign-language-video {
|
|
3611
3604
|
background: var(--vidply-black);
|
|
3612
|
-
border:
|
|
3613
|
-
border-radius: 0 0
|
|
3605
|
+
border: 0.125rem solid var(--vidply-white-30);
|
|
3606
|
+
border-radius: 0 0 0.5rem 0.5rem;
|
|
3614
3607
|
border-top: none;
|
|
3615
|
-
box-shadow: 0
|
|
3608
|
+
box-shadow: 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3616
3609
|
cursor: default;
|
|
3617
3610
|
display: block;
|
|
3618
3611
|
height: auto;
|
|
@@ -3631,67 +3624,67 @@
|
|
|
3631
3624
|
.vidply-sign-resize-nw,
|
|
3632
3625
|
.vidply-sign-resize-se,
|
|
3633
3626
|
.vidply-sign-resize-sw {
|
|
3634
|
-
height:
|
|
3635
|
-
width:
|
|
3627
|
+
height: 1rem;
|
|
3628
|
+
width: 1rem;
|
|
3636
3629
|
}
|
|
3637
3630
|
|
|
3638
3631
|
.vidply-sign-resize-n,
|
|
3639
3632
|
.vidply-sign-resize-s {
|
|
3640
3633
|
cursor: ns-resize;
|
|
3641
|
-
height:
|
|
3642
|
-
left:
|
|
3643
|
-
right:
|
|
3634
|
+
height: 0.5rem;
|
|
3635
|
+
left: 1rem;
|
|
3636
|
+
right: 1rem;
|
|
3644
3637
|
}
|
|
3645
3638
|
|
|
3646
3639
|
.vidply-sign-resize-e,
|
|
3647
3640
|
.vidply-sign-resize-w {
|
|
3648
|
-
bottom:
|
|
3641
|
+
bottom: 1rem;
|
|
3649
3642
|
cursor: ew-resize;
|
|
3650
|
-
top:
|
|
3651
|
-
width:
|
|
3643
|
+
top: 1rem;
|
|
3644
|
+
width: 0.5rem;
|
|
3652
3645
|
}
|
|
3653
3646
|
|
|
3654
|
-
.vidply-sign-resize-n { top: -
|
|
3655
|
-
.vidply-sign-resize-s { bottom: -
|
|
3656
|
-
.vidply-sign-resize-e { right: -
|
|
3657
|
-
.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; }
|
|
3658
3651
|
|
|
3659
3652
|
.vidply-sign-resize-ne {
|
|
3660
3653
|
cursor: nesw-resize;
|
|
3661
|
-
right: -
|
|
3662
|
-
top: -
|
|
3654
|
+
right: -0.5rem;
|
|
3655
|
+
top: -0.5rem;
|
|
3663
3656
|
}
|
|
3664
3657
|
|
|
3665
3658
|
.vidply-sign-resize-nw {
|
|
3666
3659
|
cursor: nwse-resize;
|
|
3667
|
-
left: -
|
|
3668
|
-
top: -
|
|
3660
|
+
left: -0.5rem;
|
|
3661
|
+
top: -0.5rem;
|
|
3669
3662
|
}
|
|
3670
3663
|
|
|
3671
3664
|
.vidply-sign-resize-se {
|
|
3672
|
-
bottom: -
|
|
3665
|
+
bottom: -0.5rem;
|
|
3673
3666
|
cursor: nwse-resize;
|
|
3674
|
-
right: -
|
|
3667
|
+
right: -0.5rem;
|
|
3675
3668
|
}
|
|
3676
3669
|
|
|
3677
3670
|
.vidply-sign-resize-sw {
|
|
3678
|
-
bottom: -
|
|
3671
|
+
bottom: -0.5rem;
|
|
3679
3672
|
cursor: nesw-resize;
|
|
3680
|
-
left: -
|
|
3673
|
+
left: -0.5rem;
|
|
3681
3674
|
}
|
|
3682
3675
|
|
|
3683
3676
|
.vidply-sign-resizable .vidply-sign-resize-handle::after {
|
|
3684
3677
|
background: var(--vidply-primary-light);
|
|
3685
3678
|
border-radius: 50%;
|
|
3686
3679
|
content: '';
|
|
3687
|
-
height:
|
|
3680
|
+
height: 0.375rem;
|
|
3688
3681
|
left: 50%;
|
|
3689
3682
|
opacity: 0;
|
|
3690
3683
|
position: absolute;
|
|
3691
3684
|
top: 50%;
|
|
3692
3685
|
transform: translate(-50%, -50%);
|
|
3693
3686
|
transition: opacity 0.2s ease;
|
|
3694
|
-
width:
|
|
3687
|
+
width: 0.375rem;
|
|
3695
3688
|
}
|
|
3696
3689
|
|
|
3697
3690
|
.vidply-sign-resizable:hover .vidply-sign-resize-handle::after {
|
|
@@ -3717,36 +3710,36 @@
|
|
|
3717
3710
|
|
|
3718
3711
|
/* Move Mode */
|
|
3719
3712
|
.vidply-sign-move-mode {
|
|
3720
|
-
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);
|
|
3721
3714
|
}
|
|
3722
3715
|
|
|
3723
3716
|
/* Resizing State */
|
|
3724
3717
|
.vidply-sign-resizing {
|
|
3725
|
-
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);
|
|
3726
3719
|
transition: none !important;
|
|
3727
3720
|
}
|
|
3728
3721
|
|
|
3729
3722
|
/* Keyboard Drag/Resize Modes */
|
|
3730
3723
|
.vidply-sign-keyboard-drag,
|
|
3731
3724
|
.vidply-sign-keyboard-resize {
|
|
3732
|
-
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);
|
|
3733
3726
|
}
|
|
3734
3727
|
|
|
3735
3728
|
.vidply-sign-keyboard-drag::after,
|
|
3736
3729
|
.vidply-sign-keyboard-resize::after {
|
|
3737
3730
|
align-items: center;
|
|
3738
3731
|
background: var(--vidply-primary);
|
|
3739
|
-
border-radius:
|
|
3732
|
+
border-radius: 0.25rem;
|
|
3740
3733
|
color: var(--vidply-white);
|
|
3741
3734
|
display: flex;
|
|
3742
|
-
font-size:
|
|
3735
|
+
font-size: 0.75rem;
|
|
3743
3736
|
font-weight: 600;
|
|
3744
3737
|
justify-content: center;
|
|
3745
3738
|
left: 50%;
|
|
3746
|
-
padding:
|
|
3739
|
+
padding: 0.25rem 0.5rem;
|
|
3747
3740
|
pointer-events: none;
|
|
3748
3741
|
position: absolute;
|
|
3749
|
-
top: -
|
|
3742
|
+
top: -1.75rem;
|
|
3750
3743
|
transform: translateX(-50%);
|
|
3751
3744
|
white-space: nowrap;
|
|
3752
3745
|
z-index: 10;
|
|
@@ -3762,48 +3755,48 @@
|
|
|
3762
3755
|
|
|
3763
3756
|
/* Sign Language Video Positions */
|
|
3764
3757
|
.vidply-sign-position-bottom-right {
|
|
3765
|
-
bottom:
|
|
3766
|
-
right:
|
|
3758
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3759
|
+
right: 1rem;
|
|
3767
3760
|
}
|
|
3768
3761
|
|
|
3769
3762
|
.vidply-sign-position-bottom-left {
|
|
3770
|
-
bottom:
|
|
3771
|
-
left:
|
|
3763
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3764
|
+
left: 1rem;
|
|
3772
3765
|
}
|
|
3773
3766
|
|
|
3774
3767
|
.vidply-sign-position-top-right {
|
|
3775
|
-
right:
|
|
3776
|
-
top:
|
|
3768
|
+
right: 1rem;
|
|
3769
|
+
top: 1rem;
|
|
3777
3770
|
}
|
|
3778
3771
|
|
|
3779
3772
|
.vidply-sign-position-top-left {
|
|
3780
|
-
left:
|
|
3781
|
-
top:
|
|
3773
|
+
left: 1rem;
|
|
3774
|
+
top: 1rem;
|
|
3782
3775
|
}
|
|
3783
3776
|
|
|
3784
3777
|
/* Responsive Sign Language Video */
|
|
3785
|
-
@media (width <
|
|
3778
|
+
@media (width < 48rem) {
|
|
3786
3779
|
.vidply-sign-language-wrapper {
|
|
3787
|
-
min-width:
|
|
3780
|
+
min-width: 7.5rem;
|
|
3788
3781
|
width: 35%;
|
|
3789
3782
|
}
|
|
3790
3783
|
|
|
3791
3784
|
.vidply-sign-position-bottom-right,
|
|
3792
3785
|
.vidply-sign-position-bottom-left {
|
|
3793
|
-
bottom:
|
|
3786
|
+
bottom: 7.875rem !important; /* Adjust for smaller controls */
|
|
3794
3787
|
}
|
|
3795
3788
|
}
|
|
3796
3789
|
|
|
3797
3790
|
/* Responsive Adjustments */
|
|
3798
|
-
@media (width <
|
|
3791
|
+
@media (width < 48rem) {
|
|
3799
3792
|
.vidply-playlist-thumbnail {
|
|
3800
|
-
height:
|
|
3801
|
-
width:
|
|
3793
|
+
height: 2.125rem;
|
|
3794
|
+
width: 3.75rem;
|
|
3802
3795
|
}
|
|
3803
3796
|
|
|
3804
3797
|
.vidply-playlist-item {
|
|
3805
|
-
gap:
|
|
3806
|
-
padding:
|
|
3798
|
+
gap: 0.625rem;
|
|
3799
|
+
padding: 0.625rem 0.75rem;
|
|
3807
3800
|
}
|
|
3808
3801
|
|
|
3809
3802
|
.vidply-track-artwork {
|
|
@@ -3811,19 +3804,19 @@
|
|
|
3811
3804
|
}
|
|
3812
3805
|
|
|
3813
3806
|
.vidply-track-info {
|
|
3814
|
-
padding:
|
|
3807
|
+
padding: 0.75rem 1rem;
|
|
3815
3808
|
}
|
|
3816
3809
|
|
|
3817
3810
|
.vidply-track-title {
|
|
3818
|
-
font-size:
|
|
3811
|
+
font-size: 1rem;
|
|
3819
3812
|
}
|
|
3820
3813
|
|
|
3821
3814
|
/* Mobile fullscreen playlist - horizontal scrolling directly above controls */
|
|
3822
3815
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
3823
3816
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
3824
|
-
bottom:
|
|
3817
|
+
bottom: 6.25rem; /* Directly above controls with extra space */
|
|
3825
3818
|
max-height: 35vh; /* Compact height */
|
|
3826
|
-
padding:
|
|
3819
|
+
padding: 0.75rem 0; /* Vertical padding only */
|
|
3827
3820
|
overflow-y: hidden; /* No vertical scrolling */
|
|
3828
3821
|
overflow-x: auto; /* Horizontal scrolling */
|
|
3829
3822
|
position: absolute !important; /* Force absolute over video */
|
|
@@ -3836,8 +3829,8 @@
|
|
|
3836
3829
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
3837
3830
|
flex-direction: row; /* Items side by side */
|
|
3838
3831
|
flex-wrap: nowrap; /* Never wrap */
|
|
3839
|
-
gap:
|
|
3840
|
-
padding: 0
|
|
3832
|
+
gap: 0.5rem;
|
|
3833
|
+
padding: 0 0.75rem;
|
|
3841
3834
|
-webkit-overflow-scrolling: touch;
|
|
3842
3835
|
scroll-behavior: smooth;
|
|
3843
3836
|
touch-action: pan-x; /* Ensure horizontal swipe gestures work */
|
|
@@ -3846,9 +3839,9 @@
|
|
|
3846
3839
|
/* Mobile playlist items - only show thumbnails */
|
|
3847
3840
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
3848
3841
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
3849
|
-
width:
|
|
3850
|
-
min-width:
|
|
3851
|
-
max-width:
|
|
3842
|
+
width: 7.5rem; /* Smaller width for thumbnail-only */
|
|
3843
|
+
min-width: 7.5rem;
|
|
3844
|
+
max-width: 7.5rem;
|
|
3852
3845
|
flex-shrink: 0; /* Don't shrink */
|
|
3853
3846
|
scroll-snap-align: start;
|
|
3854
3847
|
}
|
|
@@ -3862,10 +3855,10 @@
|
|
|
3862
3855
|
|
|
3863
3856
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
3864
3857
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
3865
|
-
height:
|
|
3858
|
+
height: 5.625rem; /* Square-ish thumbnail */
|
|
3866
3859
|
width: 100%; /* Full width of card */
|
|
3867
3860
|
flex-shrink: 0;
|
|
3868
|
-
border-radius:
|
|
3861
|
+
border-radius: 0.5rem; /* Fully rounded for thumbnail-only */
|
|
3869
3862
|
}
|
|
3870
3863
|
|
|
3871
3864
|
/* Hide text info on mobile - show only thumbnails */
|
|
@@ -3879,28 +3872,28 @@
|
|
|
3879
3872
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-info {
|
|
3880
3873
|
display: flex;
|
|
3881
3874
|
flex-direction: column;
|
|
3882
|
-
padding:
|
|
3875
|
+
padding: 0.5rem;
|
|
3883
3876
|
justify-content: center;
|
|
3884
3877
|
align-items: center;
|
|
3885
3878
|
text-align: center;
|
|
3886
|
-
height:
|
|
3879
|
+
height: 5.625rem;
|
|
3887
3880
|
}
|
|
3888
3881
|
|
|
3889
3882
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title,
|
|
3890
3883
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title {
|
|
3891
|
-
font-size:
|
|
3884
|
+
font-size: 0.6875rem;
|
|
3892
3885
|
-webkit-line-clamp: 3;
|
|
3893
3886
|
}
|
|
3894
3887
|
|
|
3895
3888
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist,
|
|
3896
3889
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist {
|
|
3897
|
-
font-size:
|
|
3890
|
+
font-size: 0.5625rem;
|
|
3898
3891
|
}
|
|
3899
3892
|
|
|
3900
3893
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
3901
3894
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
3902
|
-
padding: 0
|
|
3903
|
-
font-size:
|
|
3895
|
+
padding: 0 0.75rem 0.5rem;
|
|
3896
|
+
font-size: 0.6875rem;
|
|
3904
3897
|
flex-shrink: 0;
|
|
3905
3898
|
}
|
|
3906
3899
|
|
|
@@ -3908,9 +3901,9 @@
|
|
|
3908
3901
|
.vidply-transcript-window {
|
|
3909
3902
|
border: none;
|
|
3910
3903
|
border-radius: 0;
|
|
3911
|
-
border-top:
|
|
3904
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
3912
3905
|
box-shadow: none;
|
|
3913
|
-
min-width:
|
|
3906
|
+
min-width: 18.75rem;
|
|
3914
3907
|
order: 3; /* After controls (which are order: 2) */
|
|
3915
3908
|
position: relative;
|
|
3916
3909
|
width: 100%;
|
|
@@ -3919,11 +3912,11 @@
|
|
|
3919
3912
|
|
|
3920
3913
|
.vidply-transcript-header {
|
|
3921
3914
|
border-radius: 0;
|
|
3922
|
-
padding:
|
|
3915
|
+
padding: 0.75rem 1rem;
|
|
3923
3916
|
}
|
|
3924
3917
|
|
|
3925
3918
|
.vidply-transcript-content {
|
|
3926
|
-
max-height:
|
|
3919
|
+
max-height: 25rem;
|
|
3927
3920
|
}
|
|
3928
3921
|
|
|
3929
3922
|
/* Don't show dragging cursor on mobile (except in fullscreen) */
|