vidply 1.0.21 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vidply.css +720 -547
- package/dist/vidply.esm.js +411 -104
- package/dist/vidply.esm.js.map +2 -2
- package/dist/vidply.esm.min.js +11 -7
- package/dist/vidply.esm.min.meta.json +30 -25
- package/dist/vidply.js +411 -104
- package/dist/vidply.js.map +2 -2
- package/dist/vidply.min.css +1 -1
- package/dist/vidply.min.js +11 -7
- package/dist/vidply.min.meta.json +30 -25
- package/package.json +2 -2
- package/src/controls/ControlBar.js +3343 -3246
- package/src/controls/TranscriptManager.js +2296 -2271
- package/src/core/Player.js +4768 -4730
- package/src/features/PlaylistManager.js +1202 -1039
- package/src/i18n/languages/de.js +5 -1
- package/src/i18n/languages/en.js +5 -1
- package/src/i18n/languages/es.js +5 -1
- package/src/i18n/languages/fr.js +5 -1
- package/src/i18n/languages/ja.js +5 -1
- package/src/styles/vidply.css +720 -547
- package/src/utils/DOMUtils.js +67 -0
- package/src/utils/MenuUtils.js +10 -4
- package/src/utils/SettingsMenuFactory.js +8 -4
- package/src/utils/WindowComponents.js +6 -4
package/src/styles/vidply.css
CHANGED
|
@@ -34,40 +34,40 @@
|
|
|
34
34
|
--vidply-border-focus: var(--vidply-primary-light);
|
|
35
35
|
--vidply-border-hover: var(--vidply-white-30);
|
|
36
36
|
--vidply-border-light: var(--vidply-white-10);
|
|
37
|
-
--vidply-button-size:
|
|
38
|
-
--vidply-button-size-mobile:
|
|
39
|
-
--vidply-button-size-small:
|
|
40
|
-
--vidply-focus-outline:
|
|
41
|
-
--vidply-focus-outline-player:
|
|
42
|
-
--vidply-focus-outline-white:
|
|
43
|
-
--vidply-font-base:
|
|
44
|
-
--vidply-font-lg:
|
|
45
|
-
--vidply-font-md:
|
|
46
|
-
--vidply-font-sm:
|
|
47
|
-
--vidply-font-xl:
|
|
48
|
-
--vidply-font-xs:
|
|
37
|
+
--vidply-button-size: 1.875rem;
|
|
38
|
+
--vidply-button-size-mobile: 2.25rem;
|
|
39
|
+
--vidply-button-size-small: 2rem;
|
|
40
|
+
--vidply-focus-outline: 0.125rem solid var(--vidply-primary-light);
|
|
41
|
+
--vidply-focus-outline-player: 0.1875rem solid var(--vidply-primary-light);
|
|
42
|
+
--vidply-focus-outline-white: 0.125rem solid var(--vidply-primary-light);
|
|
43
|
+
--vidply-font-base: 0.8125rem;
|
|
44
|
+
--vidply-font-lg: 1rem;
|
|
45
|
+
--vidply-font-md: 0.875rem;
|
|
46
|
+
--vidply-font-sm: 0.75rem;
|
|
47
|
+
--vidply-font-xl: 1.125rem;
|
|
48
|
+
--vidply-font-xs: 0.6875rem;
|
|
49
49
|
|
|
50
50
|
/* Black Color Variations */
|
|
51
|
-
--vidply-font-xxl:
|
|
52
|
-
--vidply-gap-lg:
|
|
53
|
-
--vidply-gap-md:
|
|
54
|
-
--vidply-gap-sm:
|
|
55
|
-
--vidply-gap-xl:
|
|
56
|
-
--vidply-gap-xs:
|
|
57
|
-
--vidply-gap-xxl:
|
|
58
|
-
--vidply-header-height:
|
|
51
|
+
--vidply-font-xxl: 1.25rem;
|
|
52
|
+
--vidply-gap-lg: 0.75rem;
|
|
53
|
+
--vidply-gap-md: 0.5rem;
|
|
54
|
+
--vidply-gap-sm: 0.375rem;
|
|
55
|
+
--vidply-gap-xl: 1rem;
|
|
56
|
+
--vidply-gap-xs: 0.25rem;
|
|
57
|
+
--vidply-gap-xxl: 1.25rem;
|
|
58
|
+
--vidply-header-height: 1.75rem;
|
|
59
59
|
--vidply-hover-bg: var(--vidply-white-10);
|
|
60
60
|
|
|
61
61
|
/* UI Background Colors */
|
|
62
|
-
--vidply-icon-size:
|
|
63
|
-
--vidply-icon-size-mobile:
|
|
64
|
-
--vidply-icon-size-small:
|
|
65
|
-
--vidply-icon-size-xs:
|
|
66
|
-
--vidply-padding-lg:
|
|
67
|
-
--vidply-padding-md:
|
|
68
|
-
--vidply-padding-sm:
|
|
69
|
-
--vidply-padding-xl:
|
|
70
|
-
--vidply-padding-xxl:
|
|
62
|
+
--vidply-icon-size: 1.625rem;
|
|
63
|
+
--vidply-icon-size-mobile: 1.375rem;
|
|
64
|
+
--vidply-icon-size-small: 1.25rem;
|
|
65
|
+
--vidply-icon-size-xs: 1.125rem;
|
|
66
|
+
--vidply-padding-lg: 0.75rem;
|
|
67
|
+
--vidply-padding-md: 0.5rem;
|
|
68
|
+
--vidply-padding-sm: 0.25rem;
|
|
69
|
+
--vidply-padding-xl: 1rem;
|
|
70
|
+
--vidply-padding-xxl: 1.25rem;
|
|
71
71
|
--vidply-primary: #0a406e;
|
|
72
72
|
--vidply-primary-10: rgb(var(--vidply-primary-rgb), 0.1);
|
|
73
73
|
|
|
@@ -91,21 +91,21 @@
|
|
|
91
91
|
|
|
92
92
|
/* State Colors */
|
|
93
93
|
--vidply-primary-rgb: 10, 64, 110;
|
|
94
|
-
--vidply-radius-lg:
|
|
95
|
-
--vidply-radius-md:
|
|
96
|
-
--vidply-radius-sm:
|
|
94
|
+
--vidply-radius-lg: 0.5rem;
|
|
95
|
+
--vidply-radius-md: 0.375rem;
|
|
96
|
+
--vidply-radius-sm: 0.25rem;
|
|
97
97
|
|
|
98
98
|
/* Sizing Variables */
|
|
99
|
-
--vidply-radius-xl:
|
|
99
|
+
--vidply-radius-xl: 0.75rem;
|
|
100
100
|
--vidply-scrollbar-thumb: var(--vidply-white);
|
|
101
101
|
--vidply-scrollbar-thumb-hover: var(--vidply-white-90);
|
|
102
102
|
--vidply-scrollbar-track: #404040;
|
|
103
103
|
--vidply-scrollbar-track-transcript: #555;
|
|
104
|
-
--vidply-shadow-lg: 0
|
|
105
|
-
--vidply-shadow-md: 0
|
|
104
|
+
--vidply-shadow-lg: 0 0.75rem 3rem var(--vidply-black-80);
|
|
105
|
+
--vidply-shadow-md: 0 0.25rem 0.75rem var(--vidply-black-40);
|
|
106
106
|
|
|
107
107
|
/* Spacing Variables */
|
|
108
|
-
--vidply-shadow-sm: 0
|
|
108
|
+
--vidply-shadow-sm: 0 0.125rem 0.25rem var(--vidply-black-30);
|
|
109
109
|
--vidply-text-disabled: var(--vidply-white-60);
|
|
110
110
|
--vidply-text-muted: var(--vidply-white-70);
|
|
111
111
|
--vidply-text-primary: var(--vidply-white);
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
|
|
195
195
|
.vidply-icon-button:focus {
|
|
196
196
|
outline: var(--vidply-focus-outline-white);
|
|
197
|
-
outline-offset:
|
|
197
|
+
outline-offset: 0.125rem;
|
|
198
198
|
}
|
|
199
199
|
|
|
200
200
|
.vidply-icon-button .vidply-icon {
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
.vidply-draggable-header {
|
|
207
207
|
align-items: center;
|
|
208
208
|
background: #282828;
|
|
209
|
-
border-bottom:
|
|
209
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
210
210
|
cursor: move;
|
|
211
211
|
display: flex;
|
|
212
212
|
justify-content: space-between;
|
|
@@ -217,21 +217,21 @@
|
|
|
217
217
|
|
|
218
218
|
.vidply-draggable-header:focus,
|
|
219
219
|
.vidply-draggable-header:focus-visible {
|
|
220
|
-
box-shadow: 0 0 0
|
|
221
|
-
outline:
|
|
222
|
-
outline-offset:
|
|
220
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
221
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
222
|
+
outline-offset: 0.125rem;
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
.vidply-draggable-header h3 {
|
|
226
226
|
color: var(--vidply-white);
|
|
227
227
|
font-size: var(--vidply-font-lg);
|
|
228
228
|
font-weight: 600;
|
|
229
|
-
height:
|
|
230
|
-
left: -
|
|
229
|
+
height: 0.0625rem;
|
|
230
|
+
left: -625rem;
|
|
231
231
|
margin: 0;
|
|
232
232
|
overflow: hidden;
|
|
233
233
|
position: absolute;
|
|
234
|
-
width:
|
|
234
|
+
width: 0.0625rem;
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
/* Common Resize Handles */
|
|
@@ -244,67 +244,67 @@
|
|
|
244
244
|
.vidply-resize-handle-nw,
|
|
245
245
|
.vidply-resize-handle-se,
|
|
246
246
|
.vidply-resize-handle-sw {
|
|
247
|
-
height:
|
|
248
|
-
width:
|
|
247
|
+
height: 1rem;
|
|
248
|
+
width: 1rem;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
.vidply-resize-handle-n,
|
|
252
252
|
.vidply-resize-handle-s {
|
|
253
253
|
cursor: ns-resize;
|
|
254
|
-
height:
|
|
255
|
-
left:
|
|
256
|
-
right:
|
|
254
|
+
height: 0.5rem;
|
|
255
|
+
left: 1rem;
|
|
256
|
+
right: 1rem;
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
.vidply-resize-handle-e,
|
|
260
260
|
.vidply-resize-handle-w {
|
|
261
|
-
bottom:
|
|
261
|
+
bottom: 1rem;
|
|
262
262
|
cursor: ew-resize;
|
|
263
|
-
top:
|
|
264
|
-
width:
|
|
263
|
+
top: 1rem;
|
|
264
|
+
width: 0.5rem;
|
|
265
265
|
}
|
|
266
266
|
|
|
267
|
-
.vidply-resize-handle-n { top: -
|
|
268
|
-
.vidply-resize-handle-s { bottom: -
|
|
269
|
-
.vidply-resize-handle-e { right: -
|
|
270
|
-
.vidply-resize-handle-w { left: -
|
|
267
|
+
.vidply-resize-handle-n { top: -0.25rem; }
|
|
268
|
+
.vidply-resize-handle-s { bottom: -0.25rem; }
|
|
269
|
+
.vidply-resize-handle-e { right: -0.25rem; }
|
|
270
|
+
.vidply-resize-handle-w { left: -0.25rem; }
|
|
271
271
|
|
|
272
272
|
.vidply-resize-handle-ne {
|
|
273
273
|
cursor: nesw-resize;
|
|
274
|
-
right: -
|
|
275
|
-
top: -
|
|
274
|
+
right: -0.5rem;
|
|
275
|
+
top: -0.5rem;
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
.vidply-resize-handle-nw {
|
|
279
279
|
cursor: nwse-resize;
|
|
280
|
-
left: -
|
|
281
|
-
top: -
|
|
280
|
+
left: -0.5rem;
|
|
281
|
+
top: -0.5rem;
|
|
282
282
|
}
|
|
283
283
|
|
|
284
284
|
.vidply-resize-handle-se {
|
|
285
|
-
bottom: -
|
|
285
|
+
bottom: -0.5rem;
|
|
286
286
|
cursor: nwse-resize;
|
|
287
|
-
right: -
|
|
287
|
+
right: -0.5rem;
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
.vidply-resize-handle-sw {
|
|
291
|
-
bottom: -
|
|
291
|
+
bottom: -0.5rem;
|
|
292
292
|
cursor: nesw-resize;
|
|
293
|
-
left: -
|
|
293
|
+
left: -0.5rem;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
.vidply-resizable .vidply-resize-handle::after {
|
|
297
297
|
background: var(--vidply-primary-light);
|
|
298
298
|
border-radius: 50%;
|
|
299
299
|
content: '';
|
|
300
|
-
height:
|
|
300
|
+
height: 0.375rem;
|
|
301
301
|
left: 50%;
|
|
302
302
|
opacity: 0;
|
|
303
303
|
position: absolute;
|
|
304
304
|
top: 50%;
|
|
305
305
|
transform: translate(-50%, -50%);
|
|
306
306
|
transition: opacity 0.2s ease;
|
|
307
|
-
width:
|
|
307
|
+
width: 0.375rem;
|
|
308
308
|
}
|
|
309
309
|
|
|
310
310
|
.vidply-resizable:hover .vidply-resize-handle::after {
|
|
@@ -318,31 +318,31 @@
|
|
|
318
318
|
/* Common Settings Menu Pattern */
|
|
319
319
|
.vidply-popup-settings-menu {
|
|
320
320
|
background: var(--vidply-bg-menu);
|
|
321
|
-
border:
|
|
321
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
322
322
|
border-radius: var(--vidply-radius-md);
|
|
323
323
|
box-shadow: var(--vidply-shadow-lg);
|
|
324
324
|
display: none;
|
|
325
|
-
min-width:
|
|
325
|
+
min-width: 15rem;
|
|
326
326
|
padding: var(--vidply-gap-sm);
|
|
327
327
|
position: absolute;
|
|
328
328
|
z-index: 100;
|
|
329
329
|
}
|
|
330
330
|
|
|
331
331
|
.vidply-popup-settings-menu::after {
|
|
332
|
-
border-bottom:
|
|
333
|
-
border-left:
|
|
334
|
-
border-right:
|
|
332
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
333
|
+
border-left: 0.375rem solid transparent;
|
|
334
|
+
border-right: 0.375rem solid transparent;
|
|
335
335
|
bottom: 100%;
|
|
336
336
|
content: '';
|
|
337
337
|
height: 0;
|
|
338
|
-
left:
|
|
338
|
+
left: 0.5rem;
|
|
339
339
|
position: absolute;
|
|
340
340
|
width: 0;
|
|
341
341
|
}
|
|
342
342
|
|
|
343
343
|
.vidply-popup-settings-menu.vidply-menu-above::after {
|
|
344
344
|
border-bottom: none;
|
|
345
|
-
border-top:
|
|
345
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
346
346
|
bottom: auto;
|
|
347
347
|
top: 100%;
|
|
348
348
|
}
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
display: flex;
|
|
358
358
|
font-size: var(--vidply-font-base);
|
|
359
359
|
gap: var(--vidply-gap-md);
|
|
360
|
-
padding: var(--vidply-padding-md)
|
|
360
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
361
361
|
text-align: left;
|
|
362
362
|
transition: var(--vidply-transition-normal);
|
|
363
363
|
width: 100%;
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
display: flex;
|
|
401
401
|
flex-direction: column;
|
|
402
402
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
403
|
-
font-size:
|
|
403
|
+
font-size: 1rem;
|
|
404
404
|
line-height: 1.5;
|
|
405
405
|
max-width: 100%;
|
|
406
406
|
overflow: visible;
|
|
@@ -416,11 +416,11 @@
|
|
|
416
416
|
|
|
417
417
|
.vidply-player:focus-visible {
|
|
418
418
|
outline: var(--vidply-focus-outline-player);
|
|
419
|
-
outline-offset:
|
|
419
|
+
outline-offset: 0.25rem;
|
|
420
420
|
}
|
|
421
421
|
|
|
422
422
|
/* Mobile: Ensure player contains all elements properly */
|
|
423
|
-
@media (width <
|
|
423
|
+
@media (width < 48rem) {
|
|
424
424
|
.vidply-player {
|
|
425
425
|
isolation: isolate; /* Create stacking context */
|
|
426
426
|
overflow: visible; /* Allow menus to overflow but within bounds */
|
|
@@ -442,7 +442,7 @@
|
|
|
442
442
|
}
|
|
443
443
|
|
|
444
444
|
.vidply-player.vidply-audio .vidply-menu {
|
|
445
|
-
max-height:
|
|
445
|
+
max-height: 9.375rem;
|
|
446
446
|
}
|
|
447
447
|
|
|
448
448
|
/* Video/Audio Element */
|
|
@@ -455,7 +455,7 @@
|
|
|
455
455
|
}
|
|
456
456
|
|
|
457
457
|
/* Mobile: Video element order and sizing */
|
|
458
|
-
@media (width <
|
|
458
|
+
@media (width < 48rem) {
|
|
459
459
|
.vidply-player video,
|
|
460
460
|
.vidply-player audio {
|
|
461
461
|
flex: 0 0 auto; /* Don't grow or shrink */
|
|
@@ -489,7 +489,6 @@
|
|
|
489
489
|
background: linear-gradient(135deg, var(--vidply-black) 0%, #2a2a2a 100%);
|
|
490
490
|
height: 100%;
|
|
491
491
|
order: 1; /* First in flex order */
|
|
492
|
-
overflow: hidden;
|
|
493
492
|
position: relative;
|
|
494
493
|
width: 100%;
|
|
495
494
|
z-index: 1; /* Base video layer */
|
|
@@ -515,11 +514,11 @@
|
|
|
515
514
|
}
|
|
516
515
|
|
|
517
516
|
/* Mobile: Simplify video wrapper but keep captions contained */
|
|
518
|
-
@media (width <
|
|
517
|
+
@media (width < 48rem) {
|
|
519
518
|
.vidply-video-wrapper {
|
|
520
519
|
display: block;
|
|
521
520
|
height: auto;
|
|
522
|
-
min-height:
|
|
521
|
+
min-height: 12.5rem;
|
|
523
522
|
overflow: visible;
|
|
524
523
|
position: relative;
|
|
525
524
|
z-index: 2;
|
|
@@ -573,17 +572,19 @@
|
|
|
573
572
|
/* Centered Play Button Overlay */
|
|
574
573
|
.vidply-play-overlay {
|
|
575
574
|
cursor: pointer;
|
|
576
|
-
filter: drop-shadow(0
|
|
575
|
+
filter: drop-shadow(0 0.5rem 2rem rgb(0 0 0 / 30%));
|
|
577
576
|
left: 50%;
|
|
578
577
|
position: absolute;
|
|
579
578
|
top: 50%;
|
|
580
579
|
transform: translate(-50%, -50%);
|
|
581
580
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
582
581
|
z-index: var(--vidply-z-overlay);
|
|
582
|
+
border: 0.125rem solid var(--vidply-primary);
|
|
583
|
+
border-radius: 50%;
|
|
583
584
|
}
|
|
584
585
|
|
|
585
586
|
.vidply-play-overlay:hover {
|
|
586
|
-
filter: drop-shadow(0
|
|
587
|
+
filter: drop-shadow(0 0.75rem 3rem rgb(0 0 0 / 40%));
|
|
587
588
|
transform: translate(-50%, -50%) scale(1.1);
|
|
588
589
|
}
|
|
589
590
|
|
|
@@ -607,7 +608,7 @@
|
|
|
607
608
|
left: 0;
|
|
608
609
|
opacity: 0;
|
|
609
610
|
overflow: visible;
|
|
610
|
-
padding:
|
|
611
|
+
padding: 1.25rem 1rem 1rem;
|
|
611
612
|
pointer-events: none;
|
|
612
613
|
position: absolute;
|
|
613
614
|
right: 0;
|
|
@@ -631,15 +632,15 @@
|
|
|
631
632
|
}
|
|
632
633
|
|
|
633
634
|
/* Mobile: Controls underneath video (but not in landscape fullscreen) */
|
|
634
|
-
@media (width <
|
|
635
|
+
@media (width < 48rem) {
|
|
635
636
|
.vidply-controls {
|
|
636
637
|
background: var(--vidply-black-90);
|
|
637
|
-
border-top:
|
|
638
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
638
639
|
bottom: auto;
|
|
639
640
|
left: 0;
|
|
640
641
|
opacity: 1;
|
|
641
642
|
order: 2; /* After video-wrapper (1) */
|
|
642
|
-
padding:
|
|
643
|
+
padding: 0.75rem;
|
|
643
644
|
pointer-events: auto;
|
|
644
645
|
position: relative;
|
|
645
646
|
right: 0;
|
|
@@ -669,7 +670,7 @@
|
|
|
669
670
|
.vidply-progress-time-wrapper {
|
|
670
671
|
align-items: center;
|
|
671
672
|
display: flex;
|
|
672
|
-
gap:
|
|
673
|
+
gap: 1.25rem;
|
|
673
674
|
margin-bottom: var(--vidply-gap-lg);
|
|
674
675
|
width: 100%;
|
|
675
676
|
}
|
|
@@ -677,24 +678,25 @@
|
|
|
677
678
|
/* Progress Bar */
|
|
678
679
|
.vidply-progress-container {
|
|
679
680
|
background: var(--vidply-white-20);
|
|
680
|
-
border-radius:
|
|
681
|
+
border-radius: 0.1875rem;
|
|
681
682
|
cursor: pointer;
|
|
682
683
|
flex: 1;
|
|
683
|
-
height:
|
|
684
|
+
height: 0.5625rem;
|
|
685
|
+
margin-right: 0.5rem;
|
|
684
686
|
position: relative;
|
|
685
687
|
transition: height 0.2s ease;
|
|
686
688
|
}
|
|
687
689
|
|
|
688
690
|
.vidply-progress-container:hover,
|
|
689
691
|
.vidply-progress-container:focus {
|
|
690
|
-
height:
|
|
692
|
+
height: 0.6875rem;
|
|
691
693
|
outline: var(--vidply-focus-outline-white);
|
|
692
|
-
outline-offset:
|
|
694
|
+
outline-offset: 0.125rem;
|
|
693
695
|
}
|
|
694
696
|
|
|
695
697
|
.vidply-progress-buffered {
|
|
696
698
|
background: var(--vidply-white-40);
|
|
697
|
-
border-radius:
|
|
699
|
+
border-radius: 0.1875rem;
|
|
698
700
|
height: 100%;
|
|
699
701
|
left: 0;
|
|
700
702
|
position: absolute;
|
|
@@ -705,7 +707,7 @@
|
|
|
705
707
|
|
|
706
708
|
.vidply-progress-played {
|
|
707
709
|
background: var(--vidply-primary-light);
|
|
708
|
-
border-radius:
|
|
710
|
+
border-radius: 0.1875rem;
|
|
709
711
|
height: 100%;
|
|
710
712
|
left: 0;
|
|
711
713
|
position: absolute;
|
|
@@ -718,14 +720,14 @@
|
|
|
718
720
|
background: var(--vidply-white);
|
|
719
721
|
border-radius: 50%;
|
|
720
722
|
box-shadow: var(--vidply-shadow-sm);
|
|
721
|
-
height:
|
|
723
|
+
height: 0.9375rem;
|
|
722
724
|
opacity: 0;
|
|
723
725
|
position: absolute;
|
|
724
|
-
right: -
|
|
726
|
+
right: -0.375rem;
|
|
725
727
|
top: 50%;
|
|
726
728
|
transform: translateY(-50%);
|
|
727
729
|
transition: opacity 0.2s ease;
|
|
728
|
-
width:
|
|
730
|
+
width: 0.9375rem;
|
|
729
731
|
}
|
|
730
732
|
|
|
731
733
|
.vidply-progress-container:hover .vidply-progress-handle,
|
|
@@ -735,12 +737,12 @@
|
|
|
735
737
|
|
|
736
738
|
.vidply-progress-tooltip {
|
|
737
739
|
background: var(--vidply-black-90);
|
|
738
|
-
border-radius:
|
|
739
|
-
bottom:
|
|
740
|
+
border-radius: 0.25rem;
|
|
741
|
+
bottom: 0.75rem;
|
|
740
742
|
color: var(--vidply-white);
|
|
741
743
|
display: none;
|
|
742
|
-
font-size:
|
|
743
|
-
padding:
|
|
744
|
+
font-size: 0.75rem;
|
|
745
|
+
padding: 0.25rem 0.5rem;
|
|
744
746
|
pointer-events: none;
|
|
745
747
|
position: absolute;
|
|
746
748
|
transform: translateX(-50%);
|
|
@@ -776,7 +778,7 @@
|
|
|
776
778
|
cursor: pointer;
|
|
777
779
|
display: inline-flex;
|
|
778
780
|
justify-content: center;
|
|
779
|
-
margin:
|
|
781
|
+
margin: 0.0625rem;
|
|
780
782
|
min-height: var(--vidply-button-size);
|
|
781
783
|
min-width: var(--vidply-button-size);
|
|
782
784
|
padding: 0;
|
|
@@ -794,7 +796,7 @@
|
|
|
794
796
|
|
|
795
797
|
.vidply-button:focus {
|
|
796
798
|
outline: var(--vidply-focus-outline-white);
|
|
797
|
-
outline-offset:
|
|
799
|
+
outline-offset: 0.125rem;
|
|
798
800
|
}
|
|
799
801
|
|
|
800
802
|
.vidply-button:disabled {
|
|
@@ -802,6 +804,82 @@
|
|
|
802
804
|
opacity: 0.5;
|
|
803
805
|
}
|
|
804
806
|
|
|
807
|
+
/* Button text - hidden by default, visible when CSS is disabled */
|
|
808
|
+
.vidply-button-text {
|
|
809
|
+
display: none;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
/* When CSS is disabled or unavailable, button text will be visible */
|
|
813
|
+
|
|
814
|
+
/* This ensures buttons are functional even without CSS */
|
|
815
|
+
|
|
816
|
+
/* Tooltip styles - aria-hidden popovers for sighted users */
|
|
817
|
+
.vidply-tooltip {
|
|
818
|
+
background: #e0e0e0;
|
|
819
|
+
border-radius: var(--vidply-radius-sm);
|
|
820
|
+
color: #000;
|
|
821
|
+
font-size: var(--vidply-font-xs);
|
|
822
|
+
left: 50%;
|
|
823
|
+
opacity: 0;
|
|
824
|
+
padding: 0.375rem 0.5rem;
|
|
825
|
+
pointer-events: none;
|
|
826
|
+
position: absolute;
|
|
827
|
+
top: calc(100% + 0.5rem);
|
|
828
|
+
transform: translateX(-50%) translateY(-0.25rem);
|
|
829
|
+
transition: opacity var(--vidply-transition-fast), transform var(--vidply-transition-fast);
|
|
830
|
+
white-space: nowrap;
|
|
831
|
+
z-index: calc(var(--vidply-z-menu) + 1);
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
.vidply-tooltip::before {
|
|
835
|
+
border-color: transparent transparent #e0e0e0;
|
|
836
|
+
border-style: solid;
|
|
837
|
+
border-width: 0 0.375rem 0.375rem;
|
|
838
|
+
content: '';
|
|
839
|
+
left: 50%;
|
|
840
|
+
position: absolute;
|
|
841
|
+
top: -0.375rem;
|
|
842
|
+
transform: translateX(-50%);
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
/* Show tooltip on hover/focus */
|
|
846
|
+
.vidply-tooltip-visible {
|
|
847
|
+
opacity: 1;
|
|
848
|
+
transform: translateX(-50%) translateY(0);
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
/* In fullscreen mode, position tooltips above buttons */
|
|
852
|
+
.vidply-player.vidply-fullscreen .vidply-tooltip,
|
|
853
|
+
.vidply-player:fullscreen .vidply-tooltip {
|
|
854
|
+
bottom: calc(100% + 0.5rem);
|
|
855
|
+
top: auto;
|
|
856
|
+
transform: translateX(-50%) translateY(0.25rem);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.vidply-player.vidply-fullscreen .vidply-tooltip-visible,
|
|
860
|
+
.vidply-player:fullscreen .vidply-tooltip-visible {
|
|
861
|
+
transform: translateX(-50%) translateY(0);
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/* Adjust tooltip arrow for fullscreen (pointing down instead of up) */
|
|
865
|
+
.vidply-player.vidply-fullscreen .vidply-tooltip::before,
|
|
866
|
+
.vidply-player:fullscreen .vidply-tooltip::before {
|
|
867
|
+
border-color: #e0e0e0 transparent transparent;
|
|
868
|
+
border-width: 0.375rem 0.375rem 0;
|
|
869
|
+
bottom: -0.375rem;
|
|
870
|
+
top: auto;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
/* Ensure buttons with tooltips are positioned relatively */
|
|
874
|
+
.vidply-button,
|
|
875
|
+
.vidply-icon-button,
|
|
876
|
+
.vidply-sign-language-settings,
|
|
877
|
+
.vidply-sign-language-close,
|
|
878
|
+
.vidply-transcript-settings,
|
|
879
|
+
.vidply-transcript-close {
|
|
880
|
+
position: relative;
|
|
881
|
+
}
|
|
882
|
+
|
|
805
883
|
/* Icons */
|
|
806
884
|
.vidply-icon {
|
|
807
885
|
display: inline-block;
|
|
@@ -820,10 +898,10 @@
|
|
|
820
898
|
@media (forced-colors: active) {
|
|
821
899
|
.vidply-controls button .vidply-icon svg {
|
|
822
900
|
background: Canvas;
|
|
823
|
-
border-radius:
|
|
901
|
+
border-radius: 0.1875rem;
|
|
824
902
|
color: CanvasText;
|
|
825
903
|
fill: currentcolor;
|
|
826
|
-
padding:
|
|
904
|
+
padding: 0.125rem;
|
|
827
905
|
}
|
|
828
906
|
|
|
829
907
|
.vidply-transcript-close .vidply-icon svg,
|
|
@@ -831,29 +909,29 @@
|
|
|
831
909
|
.vidply-sign-language-close .vidply-icon svg,
|
|
832
910
|
.vidply-sign-language-settings .vidply-icon svg {
|
|
833
911
|
background: Canvas;
|
|
834
|
-
border-radius:
|
|
912
|
+
border-radius: 0.125rem;
|
|
835
913
|
color: CanvasText;
|
|
836
914
|
fill: currentcolor;
|
|
837
|
-
padding:
|
|
915
|
+
padding: 0.125rem;
|
|
838
916
|
}
|
|
839
917
|
}
|
|
840
918
|
|
|
841
919
|
/* Volume Control */
|
|
842
920
|
.vidply-volume-slider {
|
|
843
921
|
background: var(--vidply-white-20);
|
|
844
|
-
border-radius:
|
|
922
|
+
border-radius: 0.1875rem;
|
|
845
923
|
cursor: pointer;
|
|
846
|
-
height:
|
|
924
|
+
height: 6.25rem;
|
|
847
925
|
margin: 0 auto;
|
|
848
|
-
padding: 0
|
|
926
|
+
padding: 0 0.3125rem; /* Add padding for larger touch target on mobile */
|
|
849
927
|
position: relative;
|
|
850
928
|
touch-action: none; /* Prevent scrolling while dragging */
|
|
851
|
-
width:
|
|
929
|
+
width: 0.375rem;
|
|
852
930
|
}
|
|
853
931
|
|
|
854
932
|
.vidply-volume-slider:focus {
|
|
855
933
|
outline: var(--vidply-focus-outline-white);
|
|
856
|
-
outline-offset:
|
|
934
|
+
outline-offset: 0.125rem;
|
|
857
935
|
}
|
|
858
936
|
|
|
859
937
|
.vidply-volume-track {
|
|
@@ -864,7 +942,7 @@
|
|
|
864
942
|
|
|
865
943
|
.vidply-volume-fill {
|
|
866
944
|
background: var(--vidply-primary-light);
|
|
867
|
-
border-radius:
|
|
945
|
+
border-radius: 0.125rem;
|
|
868
946
|
bottom: 0;
|
|
869
947
|
height: 80%;
|
|
870
948
|
left: 0;
|
|
@@ -877,12 +955,12 @@
|
|
|
877
955
|
background: var(--vidply-white);
|
|
878
956
|
border-radius: 50%;
|
|
879
957
|
box-shadow: var(--vidply-shadow-sm);
|
|
880
|
-
height:
|
|
958
|
+
height: 0.625rem;
|
|
881
959
|
left: 50%;
|
|
882
960
|
position: absolute;
|
|
883
|
-
top: -
|
|
961
|
+
top: -0.25rem;
|
|
884
962
|
transform: translateX(-50%);
|
|
885
|
-
width:
|
|
963
|
+
width: 0.625rem;
|
|
886
964
|
}
|
|
887
965
|
|
|
888
966
|
/* Time Display */
|
|
@@ -905,11 +983,11 @@
|
|
|
905
983
|
}
|
|
906
984
|
|
|
907
985
|
.vidply-speed-text {
|
|
908
|
-
height:
|
|
909
|
-
left: -
|
|
986
|
+
height: 0.0625rem;
|
|
987
|
+
left: -625rem;
|
|
910
988
|
overflow: hidden;
|
|
911
989
|
position: absolute;
|
|
912
|
-
width:
|
|
990
|
+
width: 0.0625rem;
|
|
913
991
|
}
|
|
914
992
|
|
|
915
993
|
/* Menu Backdrop (for mobile) */
|
|
@@ -930,7 +1008,7 @@
|
|
|
930
1008
|
}
|
|
931
1009
|
|
|
932
1010
|
/* Mobile: Don't use backdrop, menus position above buttons */
|
|
933
|
-
@media (width <
|
|
1011
|
+
@media (width < 48rem) {
|
|
934
1012
|
.vidply-menu-backdrop {
|
|
935
1013
|
display: none !important;
|
|
936
1014
|
}
|
|
@@ -948,18 +1026,18 @@
|
|
|
948
1026
|
|
|
949
1027
|
/* Menus */
|
|
950
1028
|
.vidply-menu {
|
|
951
|
-
backdrop-filter: blur(
|
|
1029
|
+
backdrop-filter: blur(0.625rem);
|
|
952
1030
|
background: var(--vidply-bg-menu);
|
|
953
|
-
border:
|
|
954
|
-
border-radius:
|
|
955
|
-
bottom: calc(100% +
|
|
956
|
-
box-shadow: var(--vidply-shadow-lg), 0 0 0
|
|
957
|
-
max-height:
|
|
958
|
-
min-width:
|
|
1031
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1032
|
+
border-radius: 0.5rem;
|
|
1033
|
+
bottom: calc(100% + 0.5rem);
|
|
1034
|
+
box-shadow: var(--vidply-shadow-lg), 0 0 0 0.0625rem var(--vidply-white-10);
|
|
1035
|
+
max-height: 15.625rem;
|
|
1036
|
+
min-width: 12.5rem;
|
|
959
1037
|
-webkit-overflow-scrolling: touch;
|
|
960
1038
|
overflow-x: hidden;
|
|
961
1039
|
overflow-y: auto;
|
|
962
|
-
padding:
|
|
1040
|
+
padding: 0.5rem 0;
|
|
963
1041
|
pointer-events: auto; /* Ensure menus are clickable/touchable */
|
|
964
1042
|
position: absolute;
|
|
965
1043
|
right: 50%;
|
|
@@ -970,10 +1048,10 @@
|
|
|
970
1048
|
|
|
971
1049
|
/* Menu positioned below button */
|
|
972
1050
|
.vidply-menu.vidply-menu-below::after {
|
|
973
|
-
border-bottom:
|
|
1051
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
974
1052
|
border-top: none;
|
|
975
1053
|
bottom: auto;
|
|
976
|
-
top: -
|
|
1054
|
+
top: -0.375rem;
|
|
977
1055
|
}
|
|
978
1056
|
|
|
979
1057
|
/* Volume menu popup - narrow and centered on button */
|
|
@@ -981,18 +1059,18 @@
|
|
|
981
1059
|
min-width: unset;
|
|
982
1060
|
overflow-x: hidden;
|
|
983
1061
|
overflow-y: hidden;
|
|
984
|
-
padding:
|
|
1062
|
+
padding: 1rem 0.75rem;
|
|
985
1063
|
pointer-events: auto; /* Ensure volume menu is touchable */
|
|
986
1064
|
right: 50%;
|
|
987
1065
|
transform: translateX(50%);
|
|
988
|
-
width:
|
|
1066
|
+
width: 2.1875rem;
|
|
989
1067
|
z-index: var(--vidply-z-menu-high); /* High z-index to appear above everything */
|
|
990
1068
|
}
|
|
991
1069
|
|
|
992
1070
|
/* For audio players, show menus below buttons */
|
|
993
1071
|
.vidply-player.vidply-audio .vidply-menu {
|
|
994
1072
|
bottom: auto;
|
|
995
|
-
top: calc(100% +
|
|
1073
|
+
top: calc(100% + 0.5rem);
|
|
996
1074
|
}
|
|
997
1075
|
|
|
998
1076
|
.vidply-menu-item {
|
|
@@ -1020,8 +1098,8 @@
|
|
|
1020
1098
|
.vidply-menu-item:focus {
|
|
1021
1099
|
background: var(--vidply-primary-25);
|
|
1022
1100
|
color: var(--vidply-white);
|
|
1023
|
-
outline:
|
|
1024
|
-
outline-offset: -
|
|
1101
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
1102
|
+
outline-offset: -0.125rem;
|
|
1025
1103
|
}
|
|
1026
1104
|
|
|
1027
1105
|
.vidply-menu-item:active {
|
|
@@ -1047,8 +1125,8 @@
|
|
|
1047
1125
|
|
|
1048
1126
|
.vidply-menu-item-active .vidply-icon {
|
|
1049
1127
|
color: var(--vidply-primary-light);
|
|
1050
|
-
height:
|
|
1051
|
-
width:
|
|
1128
|
+
height: 1.25rem;
|
|
1129
|
+
width: 1.25rem;
|
|
1052
1130
|
}
|
|
1053
1131
|
|
|
1054
1132
|
.vidply-menu-item-with-value {
|
|
@@ -1062,13 +1140,13 @@
|
|
|
1062
1140
|
align-items: center;
|
|
1063
1141
|
display: flex;
|
|
1064
1142
|
flex: 1;
|
|
1065
|
-
gap:
|
|
1143
|
+
gap: 0.625rem;
|
|
1066
1144
|
}
|
|
1067
1145
|
|
|
1068
1146
|
.vidply-menu-item-label .vidply-icon {
|
|
1069
|
-
height:
|
|
1147
|
+
height: 1.5rem;
|
|
1070
1148
|
opacity: 0.9;
|
|
1071
|
-
width:
|
|
1149
|
+
width: 1.5rem;
|
|
1072
1150
|
}
|
|
1073
1151
|
|
|
1074
1152
|
.vidply-menu-item-value {
|
|
@@ -1077,7 +1155,7 @@
|
|
|
1077
1155
|
color: var(--vidply-text-muted);
|
|
1078
1156
|
font-size: var(--vidply-font-base);
|
|
1079
1157
|
font-weight: 500;
|
|
1080
|
-
padding:
|
|
1158
|
+
padding: 0.125rem var(--vidply-gap-md);
|
|
1081
1159
|
white-space: nowrap;
|
|
1082
1160
|
}
|
|
1083
1161
|
|
|
@@ -1090,7 +1168,7 @@
|
|
|
1090
1168
|
/* Overflow menu list - prevent overflow to the right */
|
|
1091
1169
|
.vidply-overflow-menu-list {
|
|
1092
1170
|
left: auto !important;
|
|
1093
|
-
max-width: calc(100vw -
|
|
1171
|
+
max-width: calc(100vw - 1.25rem);
|
|
1094
1172
|
right: 0 !important;
|
|
1095
1173
|
z-index: 1000; /* Ensure menu appears above all player elements including playlist */
|
|
1096
1174
|
|
|
@@ -1112,8 +1190,8 @@
|
|
|
1112
1190
|
|
|
1113
1191
|
/* SVG icons in overflow menu - proper sizing */
|
|
1114
1192
|
.vidply-overflow-menu-list .vidply-menu-item .vidply-icon svg {
|
|
1115
|
-
height:
|
|
1116
|
-
width:
|
|
1193
|
+
height: 1.125rem;
|
|
1194
|
+
width: 1.125rem;
|
|
1117
1195
|
}
|
|
1118
1196
|
|
|
1119
1197
|
/* Text icons (like "Aa" for caption styling) in overflow menu */
|
|
@@ -1141,7 +1219,7 @@
|
|
|
1141
1219
|
font-size: var(--vidply-font-base);
|
|
1142
1220
|
font-weight: 500;
|
|
1143
1221
|
margin-right: var(--vidply-gap-lg);
|
|
1144
|
-
min-width:
|
|
1222
|
+
min-width: 3.75rem;
|
|
1145
1223
|
}
|
|
1146
1224
|
|
|
1147
1225
|
.vidply-chapter-title {
|
|
@@ -1202,20 +1280,20 @@
|
|
|
1202
1280
|
.vidply-style-group input[type="color"]:focus {
|
|
1203
1281
|
border-color: var(--vidply-border-focus);
|
|
1204
1282
|
outline: var(--vidply-focus-outline-white);
|
|
1205
|
-
outline-offset:
|
|
1283
|
+
outline-offset: 0.125rem;
|
|
1206
1284
|
}
|
|
1207
1285
|
|
|
1208
1286
|
.vidply-style-group input[type="range"]::-webkit-slider-thumb {
|
|
1209
1287
|
-webkit-appearance: none;
|
|
1210
1288
|
appearance: none;
|
|
1211
1289
|
background: var(--vidply-primary);
|
|
1212
|
-
border:
|
|
1290
|
+
border: 0.125rem solid var(--vidply-white);
|
|
1213
1291
|
border-radius: 50%;
|
|
1214
1292
|
box-shadow: var(--vidply-shadow-sm);
|
|
1215
1293
|
cursor: pointer;
|
|
1216
|
-
height:
|
|
1294
|
+
height: 1rem;
|
|
1217
1295
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
1218
|
-
width:
|
|
1296
|
+
width: 1rem;
|
|
1219
1297
|
}
|
|
1220
1298
|
|
|
1221
1299
|
.vidply-style-group input[type="range"]::-webkit-slider-thumb:hover {
|
|
@@ -1225,13 +1303,13 @@
|
|
|
1225
1303
|
|
|
1226
1304
|
.vidply-style-group input[type="range"]::-moz-range-thumb {
|
|
1227
1305
|
background: var(--vidply-primary);
|
|
1228
|
-
border:
|
|
1306
|
+
border: 0.125rem solid var(--vidply-white);
|
|
1229
1307
|
border-radius: 50%;
|
|
1230
1308
|
box-shadow: var(--vidply-shadow-sm);
|
|
1231
1309
|
cursor: pointer;
|
|
1232
|
-
height:
|
|
1310
|
+
height: 1rem;
|
|
1233
1311
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
1234
|
-
width:
|
|
1312
|
+
width: 1rem;
|
|
1235
1313
|
}
|
|
1236
1314
|
|
|
1237
1315
|
.vidply-style-group input[type="range"]::-moz-range-thumb:hover {
|
|
@@ -1241,23 +1319,23 @@
|
|
|
1241
1319
|
|
|
1242
1320
|
.vidply-style-group input[type="range"]::-webkit-slider-runnable-track {
|
|
1243
1321
|
background: var(--vidply-white-20);
|
|
1244
|
-
border-radius:
|
|
1245
|
-
height:
|
|
1322
|
+
border-radius: 0.1875rem;
|
|
1323
|
+
height: 0.375rem;
|
|
1246
1324
|
width: 100%;
|
|
1247
1325
|
}
|
|
1248
1326
|
|
|
1249
1327
|
.vidply-style-group input[type="range"]::-moz-range-track {
|
|
1250
1328
|
background: var(--vidply-white-20);
|
|
1251
|
-
border-radius:
|
|
1252
|
-
height:
|
|
1329
|
+
border-radius: 0.1875rem;
|
|
1330
|
+
height: 0.375rem;
|
|
1253
1331
|
width: 100%;
|
|
1254
1332
|
}
|
|
1255
1333
|
|
|
1256
1334
|
/* Captions */
|
|
1257
1335
|
.vidply-captions {
|
|
1258
1336
|
background: var(--vidply-bg-caption);
|
|
1259
|
-
border-radius:
|
|
1260
|
-
bottom:
|
|
1337
|
+
border-radius: 0.25rem;
|
|
1338
|
+
bottom: 1rem;
|
|
1261
1339
|
color: var(--vidply-white);
|
|
1262
1340
|
display: none;
|
|
1263
1341
|
font-family: sans-serif;
|
|
@@ -1265,7 +1343,7 @@
|
|
|
1265
1343
|
left: 50%;
|
|
1266
1344
|
line-height: 1.4;
|
|
1267
1345
|
max-width: 90%;
|
|
1268
|
-
padding:
|
|
1346
|
+
padding: 0.5rem 1rem;
|
|
1269
1347
|
pointer-events: none;
|
|
1270
1348
|
position: absolute;
|
|
1271
1349
|
text-align: center;
|
|
@@ -1277,17 +1355,17 @@
|
|
|
1277
1355
|
/* Audio player: Display captions as readable transcript/lyrics */
|
|
1278
1356
|
.vidply-player.vidply-audio .vidply-captions {
|
|
1279
1357
|
background: var(--vidply-bg-transcript);
|
|
1280
|
-
border:
|
|
1281
|
-
border-radius:
|
|
1358
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1359
|
+
border-radius: 0.5rem;
|
|
1282
1360
|
bottom: auto;
|
|
1283
|
-
font-size:
|
|
1361
|
+
font-size: 1rem;
|
|
1284
1362
|
left: 0;
|
|
1285
1363
|
line-height: 1.6;
|
|
1286
|
-
max-height:
|
|
1364
|
+
max-height: 9.375rem;
|
|
1287
1365
|
max-width: 100%;
|
|
1288
|
-
min-width:
|
|
1366
|
+
min-width: 23.125rem;
|
|
1289
1367
|
overflow-y: auto;
|
|
1290
|
-
padding:
|
|
1368
|
+
padding: 1rem 1.25rem;
|
|
1291
1369
|
position: relative;
|
|
1292
1370
|
scroll-behavior: smooth;
|
|
1293
1371
|
text-align: left;
|
|
@@ -1299,16 +1377,16 @@
|
|
|
1299
1377
|
.vidply-player.vidply-audio .vidply-caption-cue {
|
|
1300
1378
|
background: transparent;
|
|
1301
1379
|
border-radius: 0;
|
|
1302
|
-
margin-bottom:
|
|
1303
|
-
padding:
|
|
1380
|
+
margin-bottom: 0.75rem;
|
|
1381
|
+
padding: 0.5rem 0;
|
|
1304
1382
|
}
|
|
1305
1383
|
|
|
1306
1384
|
/* Highlight active caption in audio player */
|
|
1307
1385
|
.vidply-player.vidply-audio .vidply-caption-cue.vidply-caption-active {
|
|
1308
1386
|
background: var(--vidply-primary-15);
|
|
1309
|
-
border-left:
|
|
1310
|
-
border-radius:
|
|
1311
|
-
padding:
|
|
1387
|
+
border-left: 0.1875rem solid var(--vidply-primary);
|
|
1388
|
+
border-radius: 0.25rem;
|
|
1389
|
+
padding: 0.5rem 0.75rem;
|
|
1312
1390
|
}
|
|
1313
1391
|
|
|
1314
1392
|
/* Smooth transitions for caption highlighting */
|
|
@@ -1321,14 +1399,14 @@
|
|
|
1321
1399
|
}
|
|
1322
1400
|
|
|
1323
1401
|
/* Desktop only: Move captions up when controls are visible */
|
|
1324
|
-
@media (width >=
|
|
1402
|
+
@media (width >= 48rem) {
|
|
1325
1403
|
.vidply-controls-visible .vidply-captions {
|
|
1326
|
-
bottom:
|
|
1404
|
+
bottom: 6rem;
|
|
1327
1405
|
}
|
|
1328
1406
|
}
|
|
1329
1407
|
|
|
1330
1408
|
/* Mobile: Caption positioning handled by JavaScript */
|
|
1331
|
-
@media (width <
|
|
1409
|
+
@media (width < 48rem) {
|
|
1332
1410
|
.vidply-captions {
|
|
1333
1411
|
/* Bottom position set dynamically by JS based on control height */
|
|
1334
1412
|
left: 50%;
|
|
@@ -1341,18 +1419,18 @@
|
|
|
1341
1419
|
|
|
1342
1420
|
/* Audio player captions on mobile - more compact */
|
|
1343
1421
|
.vidply-player.vidply-audio .vidply-captions {
|
|
1344
|
-
font-size:
|
|
1422
|
+
font-size: 0.875rem;
|
|
1345
1423
|
left: 0;
|
|
1346
|
-
max-height:
|
|
1347
|
-
min-width:
|
|
1348
|
-
padding:
|
|
1424
|
+
max-height: 7.5rem;
|
|
1425
|
+
min-width: 18.75rem;
|
|
1426
|
+
padding: 0.75rem 1rem;
|
|
1349
1427
|
position: relative;
|
|
1350
1428
|
transform: none;
|
|
1351
1429
|
width: 100%;
|
|
1352
1430
|
}
|
|
1353
1431
|
|
|
1354
1432
|
.vidply-player.vidply-audio .vidply-caption-cue {
|
|
1355
|
-
margin-bottom:
|
|
1433
|
+
margin-bottom: 0.5rem;
|
|
1356
1434
|
}
|
|
1357
1435
|
|
|
1358
1436
|
/* Make play overlay smaller and centered */
|
|
@@ -1373,7 +1451,7 @@
|
|
|
1373
1451
|
.vidply-settings-overlay {
|
|
1374
1452
|
align-items: center;
|
|
1375
1453
|
animation: vidply-fade-in 0.2s ease;
|
|
1376
|
-
backdrop-filter: blur(
|
|
1454
|
+
backdrop-filter: blur(0.5rem);
|
|
1377
1455
|
background: var(--vidply-bg-overlay);
|
|
1378
1456
|
bottom: 0;
|
|
1379
1457
|
display: flex;
|
|
@@ -1398,14 +1476,14 @@
|
|
|
1398
1476
|
.vidply-settings-dialog {
|
|
1399
1477
|
animation: vidply-slide-up 0.3s ease;
|
|
1400
1478
|
background: var(--vidply-bg-dialog);
|
|
1401
|
-
border:
|
|
1402
|
-
border-radius:
|
|
1479
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
1480
|
+
border-radius: 0.75rem;
|
|
1403
1481
|
box-shadow: var(--vidply-shadow-lg);
|
|
1404
1482
|
max-height: 80%;
|
|
1405
|
-
max-width:
|
|
1483
|
+
max-width: 31.25rem;
|
|
1406
1484
|
-webkit-overflow-scrolling: touch;
|
|
1407
1485
|
overflow-y: auto;
|
|
1408
|
-
padding:
|
|
1486
|
+
padding: 1.5rem;
|
|
1409
1487
|
|
|
1410
1488
|
/* iOS momentum scrolling */
|
|
1411
1489
|
touch-action: pan-y;
|
|
@@ -1414,7 +1492,7 @@
|
|
|
1414
1492
|
|
|
1415
1493
|
@keyframes vidply-slide-up {
|
|
1416
1494
|
from {
|
|
1417
|
-
transform: translateY(
|
|
1495
|
+
transform: translateY(1.25rem);
|
|
1418
1496
|
opacity: 0;
|
|
1419
1497
|
}
|
|
1420
1498
|
|
|
@@ -1441,7 +1519,7 @@
|
|
|
1441
1519
|
.vidply-settings-close {
|
|
1442
1520
|
min-height: auto;
|
|
1443
1521
|
min-width: auto;
|
|
1444
|
-
padding:
|
|
1522
|
+
padding: 0.25rem;
|
|
1445
1523
|
}
|
|
1446
1524
|
|
|
1447
1525
|
.vidply-settings-content {
|
|
@@ -1474,7 +1552,7 @@
|
|
|
1474
1552
|
.vidply-settings-color,
|
|
1475
1553
|
.vidply-settings-range {
|
|
1476
1554
|
background: var(--vidply-white-10);
|
|
1477
|
-
border:
|
|
1555
|
+
border: 0.0625rem solid var(--vidply-white-20);
|
|
1478
1556
|
border-radius: var(--vidply-radius-md);
|
|
1479
1557
|
color: var(--vidply-white);
|
|
1480
1558
|
font-size: var(--vidply-font-md);
|
|
@@ -1501,7 +1579,7 @@
|
|
|
1501
1579
|
.vidply-settings-range:focus {
|
|
1502
1580
|
background: var(--vidply-white-15);
|
|
1503
1581
|
border-color: var(--vidply-border-focus);
|
|
1504
|
-
box-shadow: 0 0 0
|
|
1582
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
1505
1583
|
outline: none;
|
|
1506
1584
|
}
|
|
1507
1585
|
|
|
@@ -1515,12 +1593,12 @@
|
|
|
1515
1593
|
color: var(--vidply-text-muted);
|
|
1516
1594
|
display: inline-block;
|
|
1517
1595
|
font-size: var(--vidply-font-base);
|
|
1518
|
-
min-width:
|
|
1596
|
+
min-width: 2.5rem;
|
|
1519
1597
|
text-align: right;
|
|
1520
1598
|
}
|
|
1521
1599
|
|
|
1522
1600
|
.vidply-settings-footer {
|
|
1523
|
-
border-top:
|
|
1601
|
+
border-top: 0.0625rem solid var(--vidply-white-10);
|
|
1524
1602
|
display: flex;
|
|
1525
1603
|
justify-content: flex-end;
|
|
1526
1604
|
margin-top: var(--vidply-gap-xxl);
|
|
@@ -1531,7 +1609,7 @@
|
|
|
1531
1609
|
background: var(--vidply-white-10);
|
|
1532
1610
|
border-radius: var(--vidply-radius-md);
|
|
1533
1611
|
min-width: auto;
|
|
1534
|
-
padding:
|
|
1612
|
+
padding: 0.625rem var(--vidply-gap-xxl);
|
|
1535
1613
|
}
|
|
1536
1614
|
|
|
1537
1615
|
.vidply-settings-footer .vidply-button:hover {
|
|
@@ -1555,9 +1633,9 @@
|
|
|
1555
1633
|
right: 0;
|
|
1556
1634
|
top: 0;
|
|
1557
1635
|
z-index: 999999;
|
|
1636
|
+
|
|
1558
1637
|
/* Critical iOS fixes */
|
|
1559
1638
|
transform: translate3d(0, 0, 0);
|
|
1560
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
1561
1639
|
margin: 0 !important;
|
|
1562
1640
|
padding: 0 !important;
|
|
1563
1641
|
}
|
|
@@ -1592,7 +1670,7 @@
|
|
|
1592
1670
|
left: 0 !important;
|
|
1593
1671
|
opacity: 0 !important;
|
|
1594
1672
|
order: 0 !important;
|
|
1595
|
-
padding:
|
|
1673
|
+
padding: 1.25rem 1rem 1rem !important;
|
|
1596
1674
|
pointer-events: none !important;
|
|
1597
1675
|
position: absolute !important;
|
|
1598
1676
|
right: 0 !important;
|
|
@@ -1635,7 +1713,7 @@
|
|
|
1635
1713
|
.vidply-player:fullscreen .vidply-controls-right {
|
|
1636
1714
|
display: flex !important;
|
|
1637
1715
|
flex-wrap: nowrap !important;
|
|
1638
|
-
gap:
|
|
1716
|
+
gap: 0.5rem !important;
|
|
1639
1717
|
}
|
|
1640
1718
|
|
|
1641
1719
|
/* Make sure buttons within containers are visible */
|
|
@@ -1674,7 +1752,7 @@
|
|
|
1674
1752
|
align-items: center !important;
|
|
1675
1753
|
display: flex !important;
|
|
1676
1754
|
flex-direction: row !important;
|
|
1677
|
-
gap:
|
|
1755
|
+
gap: 0.625rem !important;
|
|
1678
1756
|
justify-content: flex-start !important;
|
|
1679
1757
|
}
|
|
1680
1758
|
|
|
@@ -1688,7 +1766,7 @@
|
|
|
1688
1766
|
/* Caption positioning in landscape fullscreen */
|
|
1689
1767
|
.vidply-player.vidply-fullscreen .vidply-captions,
|
|
1690
1768
|
.vidply-player:fullscreen .vidply-captions {
|
|
1691
|
-
bottom:
|
|
1769
|
+
bottom: 1rem !important;
|
|
1692
1770
|
transition: bottom 0.3s ease !important;
|
|
1693
1771
|
}
|
|
1694
1772
|
|
|
@@ -1697,7 +1775,7 @@
|
|
|
1697
1775
|
.vidply-player:fullscreen.vidply-controls-visible .vidply-captions,
|
|
1698
1776
|
.vidply-player.vidply-fullscreen.vidply-paused .vidply-captions,
|
|
1699
1777
|
.vidply-player:fullscreen.vidply-paused .vidply-captions {
|
|
1700
|
-
bottom:
|
|
1778
|
+
bottom: 6rem !important;
|
|
1701
1779
|
}
|
|
1702
1780
|
|
|
1703
1781
|
/* Center video in landscape fullscreen */
|
|
@@ -1778,7 +1856,7 @@
|
|
|
1778
1856
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
1779
1857
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
1780
1858
|
position: absolute !important; /* Absolute relative to player */
|
|
1781
|
-
bottom:
|
|
1859
|
+
bottom: 5rem !important; /* Above controls (typical control height is ~5rem) */
|
|
1782
1860
|
left: 0 !important;
|
|
1783
1861
|
right: 0 !important;
|
|
1784
1862
|
z-index: 15 !important; /* Above video (z-index:1), below controls (z-index:30) */
|
|
@@ -1789,26 +1867,26 @@
|
|
|
1789
1867
|
/* Transcript in Fullscreen */
|
|
1790
1868
|
.vidply-player.vidply-fullscreen .vidply-transcript-window,
|
|
1791
1869
|
.vidply-player:fullscreen .vidply-transcript-window {
|
|
1792
|
-
bottom:
|
|
1870
|
+
bottom: 5rem !important;
|
|
1793
1871
|
height: auto !important;
|
|
1794
1872
|
left: auto !important;
|
|
1795
|
-
max-height: calc(100vh -
|
|
1796
|
-
max-width:
|
|
1873
|
+
max-height: calc(100vh - 11.25rem) !important;
|
|
1874
|
+
max-width: 26.25rem;
|
|
1797
1875
|
position: fixed !important;
|
|
1798
|
-
right:
|
|
1876
|
+
right: 1.25rem !important;
|
|
1799
1877
|
top: auto !important;
|
|
1800
|
-
width:
|
|
1878
|
+
width: 26.25rem;
|
|
1801
1879
|
}
|
|
1802
1880
|
|
|
1803
1881
|
/* Loading State */
|
|
1804
1882
|
.vidply-loading {
|
|
1805
1883
|
display: none;
|
|
1806
|
-
height:
|
|
1884
|
+
height: 3.125rem;
|
|
1807
1885
|
left: 50%;
|
|
1808
1886
|
position: absolute;
|
|
1809
1887
|
top: 50%;
|
|
1810
1888
|
transform: translate(-50%, -50%);
|
|
1811
|
-
width:
|
|
1889
|
+
width: 3.125rem;
|
|
1812
1890
|
}
|
|
1813
1891
|
|
|
1814
1892
|
.vidply-player.vidply-buffering .vidply-loading {
|
|
@@ -1817,7 +1895,7 @@
|
|
|
1817
1895
|
|
|
1818
1896
|
.vidply-loading::after {
|
|
1819
1897
|
animation: vidply-spin 0.8s linear infinite;
|
|
1820
|
-
border:
|
|
1898
|
+
border: 0.25rem solid var(--vidply-white-20);
|
|
1821
1899
|
border-radius: 50%;
|
|
1822
1900
|
border-top-color: var(--vidply-white);
|
|
1823
1901
|
content: '';
|
|
@@ -1834,11 +1912,11 @@
|
|
|
1834
1912
|
|
|
1835
1913
|
/* Screen Reader Only */
|
|
1836
1914
|
.vidply-sr-only {
|
|
1837
|
-
height:
|
|
1838
|
-
left: -
|
|
1915
|
+
height: 0.0625rem;
|
|
1916
|
+
left: -625rem;
|
|
1839
1917
|
overflow: hidden;
|
|
1840
1918
|
position: absolute;
|
|
1841
|
-
width:
|
|
1919
|
+
width: 0.0625rem;
|
|
1842
1920
|
}
|
|
1843
1921
|
|
|
1844
1922
|
/* High Contrast Mode Support */
|
|
@@ -1848,7 +1926,7 @@
|
|
|
1848
1926
|
}
|
|
1849
1927
|
|
|
1850
1928
|
.vidply-button:focus {
|
|
1851
|
-
outline:
|
|
1929
|
+
outline: 0.1875rem solid;
|
|
1852
1930
|
}
|
|
1853
1931
|
|
|
1854
1932
|
.vidply-progress-played {
|
|
@@ -1867,17 +1945,10 @@
|
|
|
1867
1945
|
}
|
|
1868
1946
|
}
|
|
1869
1947
|
|
|
1870
|
-
/* Dark Mode (default) - additional contrast */
|
|
1871
|
-
@media (prefers-color-scheme: dark) {
|
|
1872
|
-
.vidply-settings-dialog {
|
|
1873
|
-
background: var(--vidply-bg-dialog-dark);
|
|
1874
|
-
}
|
|
1875
|
-
}
|
|
1876
|
-
|
|
1877
1948
|
/* Responsive Breakpoints */
|
|
1878
|
-
@media (width <
|
|
1949
|
+
@media (width < 48rem) {
|
|
1879
1950
|
.vidply-controls {
|
|
1880
|
-
padding:
|
|
1951
|
+
padding: 1rem 0.75rem 0.75rem;
|
|
1881
1952
|
}
|
|
1882
1953
|
|
|
1883
1954
|
.vidply-time {
|
|
@@ -1890,12 +1961,12 @@
|
|
|
1890
1961
|
|
|
1891
1962
|
.vidply-settings-dialog {
|
|
1892
1963
|
animation: slideUpFromBottom 0.3s ease;
|
|
1893
|
-
border-radius:
|
|
1964
|
+
border-radius: 1rem 1rem 0 0;
|
|
1894
1965
|
bottom: 0;
|
|
1895
1966
|
margin: 0;
|
|
1896
1967
|
max-height: 90vh;
|
|
1897
1968
|
max-width: 100%;
|
|
1898
|
-
padding:
|
|
1969
|
+
padding: 1.25rem;
|
|
1899
1970
|
position: fixed;
|
|
1900
1971
|
top: auto;
|
|
1901
1972
|
width: 100%;
|
|
@@ -1907,11 +1978,11 @@
|
|
|
1907
1978
|
|
|
1908
1979
|
/* Bottom sheet style for menus - positioned within controls */
|
|
1909
1980
|
.vidply-menu {
|
|
1910
|
-
border-radius:
|
|
1911
|
-
bottom: calc(100% +
|
|
1981
|
+
border-radius: 0.5rem;
|
|
1982
|
+
bottom: calc(100% + 0.25rem);
|
|
1912
1983
|
left: 50%;
|
|
1913
|
-
max-height:
|
|
1914
|
-
min-width:
|
|
1984
|
+
max-height: 15.625rem;
|
|
1985
|
+
min-width: 12.5rem;
|
|
1915
1986
|
position: absolute;
|
|
1916
1987
|
right: auto;
|
|
1917
1988
|
top: auto;
|
|
@@ -1923,7 +1994,7 @@
|
|
|
1923
1994
|
/* Volume menu should stay narrow - positioning handled by JS */
|
|
1924
1995
|
.vidply-volume-menu {
|
|
1925
1996
|
min-width: unset !important;
|
|
1926
|
-
width:
|
|
1997
|
+
width: 3.125rem !important;
|
|
1927
1998
|
}
|
|
1928
1999
|
|
|
1929
2000
|
/* Remove the drag handle on mobile menus */
|
|
@@ -1934,33 +2005,33 @@
|
|
|
1934
2005
|
/* Caption style menu - narrower on mobile */
|
|
1935
2006
|
.vidply-caption-style-menu.vidply-settings-menu {
|
|
1936
2007
|
left: 50%;
|
|
1937
|
-
max-width: calc(100vw -
|
|
1938
|
-
min-width:
|
|
1939
|
-
padding:
|
|
2008
|
+
max-width: calc(100vw - 2.5rem);
|
|
2009
|
+
min-width: 17.5rem;
|
|
2010
|
+
padding: 1rem;
|
|
1940
2011
|
transform: translateX(-50%);
|
|
1941
2012
|
width: auto;
|
|
1942
2013
|
}
|
|
1943
2014
|
|
|
1944
2015
|
.vidply-style-group {
|
|
1945
|
-
margin-bottom:
|
|
2016
|
+
margin-bottom: 1.25rem;
|
|
1946
2017
|
}
|
|
1947
2018
|
|
|
1948
2019
|
.vidply-style-group label {
|
|
1949
|
-
font-size:
|
|
1950
|
-
margin-bottom:
|
|
2020
|
+
font-size: 0.875rem;
|
|
2021
|
+
margin-bottom: 0.5rem;
|
|
1951
2022
|
}
|
|
1952
2023
|
|
|
1953
2024
|
.vidply-style-select,
|
|
1954
2025
|
.vidply-style-group input[type="color"] {
|
|
1955
|
-
font-size:
|
|
1956
|
-
padding:
|
|
2026
|
+
font-size: 1rem;
|
|
2027
|
+
padding: 0.75rem;
|
|
1957
2028
|
}
|
|
1958
2029
|
|
|
1959
2030
|
/* Keep controls in one horizontal row on mobile */
|
|
1960
2031
|
.vidply-controls-buttons {
|
|
1961
2032
|
flex-direction: row;
|
|
1962
2033
|
flex-wrap: nowrap;
|
|
1963
|
-
gap:
|
|
2034
|
+
gap: 0.5rem;
|
|
1964
2035
|
width: 100%;
|
|
1965
2036
|
}
|
|
1966
2037
|
|
|
@@ -1975,7 +2046,7 @@
|
|
|
1975
2046
|
.vidply-button {
|
|
1976
2047
|
min-height: var(--vidply-button-size-mobile);
|
|
1977
2048
|
min-width: var(--vidply-button-size-mobile);
|
|
1978
|
-
padding:
|
|
2049
|
+
padding: 0.3125rem;
|
|
1979
2050
|
}
|
|
1980
2051
|
|
|
1981
2052
|
.vidply-icon {
|
|
@@ -1997,7 +2068,7 @@
|
|
|
1997
2068
|
}
|
|
1998
2069
|
|
|
1999
2070
|
/* Landscape mobile optimization */
|
|
2000
|
-
@media (width <=
|
|
2071
|
+
@media (width <= 56rem) and (orientation: landscape) {
|
|
2001
2072
|
.vidply-menu {
|
|
2002
2073
|
max-height: 50vh;
|
|
2003
2074
|
}
|
|
@@ -2013,9 +2084,9 @@
|
|
|
2013
2084
|
/* Landscape fullscreen playlist - horizontal scrolling */
|
|
2014
2085
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2015
2086
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2016
|
-
bottom:
|
|
2087
|
+
bottom: 4.375rem; /* Directly above controls */
|
|
2017
2088
|
max-height: 30vh; /* Less height in landscape */
|
|
2018
|
-
padding:
|
|
2089
|
+
padding: 0.625rem 0;
|
|
2019
2090
|
overflow-y: hidden;
|
|
2020
2091
|
overflow-x: auto;
|
|
2021
2092
|
touch-action: pan-x; /* Allow horizontal scrolling on touch devices */
|
|
@@ -2027,16 +2098,16 @@
|
|
|
2027
2098
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2028
2099
|
flex-direction: row;
|
|
2029
2100
|
flex-wrap: nowrap;
|
|
2030
|
-
gap:
|
|
2031
|
-
padding: 0
|
|
2101
|
+
gap: 0.5rem;
|
|
2102
|
+
padding: 0 0.625rem;
|
|
2032
2103
|
}
|
|
2033
2104
|
|
|
2034
2105
|
/* Landscape items - smaller vertical cards */
|
|
2035
2106
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2036
2107
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2037
|
-
width:
|
|
2038
|
-
min-width:
|
|
2039
|
-
max-width:
|
|
2108
|
+
width: 11.25rem;
|
|
2109
|
+
min-width: 11.25rem;
|
|
2110
|
+
max-width: 11.25rem;
|
|
2040
2111
|
flex-shrink: 0;
|
|
2041
2112
|
}
|
|
2042
2113
|
|
|
@@ -2049,26 +2120,26 @@
|
|
|
2049
2120
|
|
|
2050
2121
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2051
2122
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2052
|
-
height:
|
|
2123
|
+
height: 6.25rem;
|
|
2053
2124
|
width: 100%;
|
|
2054
|
-
border-radius:
|
|
2125
|
+
border-radius: 0.5rem 0.5rem 0 0;
|
|
2055
2126
|
}
|
|
2056
2127
|
|
|
2057
2128
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2058
2129
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2059
|
-
padding:
|
|
2130
|
+
padding: 0.5rem;
|
|
2060
2131
|
}
|
|
2061
2132
|
|
|
2062
2133
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2063
2134
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2064
|
-
padding: 0
|
|
2065
|
-
font-size:
|
|
2135
|
+
padding: 0 0.625rem 0.5rem;
|
|
2136
|
+
font-size: 0.6875rem;
|
|
2066
2137
|
flex-shrink: 0;
|
|
2067
2138
|
}
|
|
2068
2139
|
}
|
|
2069
2140
|
|
|
2070
2141
|
/* Extra small screens */
|
|
2071
|
-
@media (width <=
|
|
2142
|
+
@media (width <= 30rem) {
|
|
2072
2143
|
.vidply-speed-text {
|
|
2073
2144
|
display: none;
|
|
2074
2145
|
}
|
|
@@ -2096,7 +2167,7 @@
|
|
|
2096
2167
|
.vidply-player [role="link"]:hover,
|
|
2097
2168
|
.vidply-player [tabindex]:not([tabindex="-1"]):hover {
|
|
2098
2169
|
outline: var(--vidply-focus-outline-white);
|
|
2099
|
-
outline-offset:
|
|
2170
|
+
outline-offset: 0.125rem;
|
|
2100
2171
|
}
|
|
2101
2172
|
|
|
2102
2173
|
/* Print Styles */
|
|
@@ -2111,6 +2182,7 @@
|
|
|
2111
2182
|
============================================================================ */
|
|
2112
2183
|
|
|
2113
2184
|
/* Track Info Display (below video, above playlist) */
|
|
2185
|
+
|
|
2114
2186
|
/* Track Artwork - Displays album art/poster above audio player */
|
|
2115
2187
|
.vidply-track-artwork {
|
|
2116
2188
|
aspect-ratio: 16 / 3;
|
|
@@ -2118,7 +2190,7 @@
|
|
|
2118
2190
|
background-position: center;
|
|
2119
2191
|
background-repeat: no-repeat;
|
|
2120
2192
|
background-size: cover;
|
|
2121
|
-
border-bottom:
|
|
2193
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2122
2194
|
order: 1; /* Before video-wrapper */
|
|
2123
2195
|
overflow: hidden;
|
|
2124
2196
|
position: relative;
|
|
@@ -2140,38 +2212,64 @@
|
|
|
2140
2212
|
|
|
2141
2213
|
.vidply-track-info {
|
|
2142
2214
|
background: var(--vidply-bg-track-info);
|
|
2143
|
-
border-bottom:
|
|
2215
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2144
2216
|
order: 2; /* After video-wrapper */
|
|
2145
|
-
padding:
|
|
2217
|
+
padding: 1rem 1.25rem;
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
/* Track header - contains track number and duration */
|
|
2221
|
+
.vidply-track-header {
|
|
2222
|
+
align-items: center;
|
|
2223
|
+
display: flex;
|
|
2224
|
+
gap: 0.75rem;
|
|
2225
|
+
justify-content: space-between;
|
|
2226
|
+
margin-bottom: 0.25rem;
|
|
2146
2227
|
}
|
|
2147
2228
|
|
|
2148
2229
|
.vidply-track-number {
|
|
2149
2230
|
color: var(--vidply-text-muted);
|
|
2150
|
-
font-size:
|
|
2151
|
-
letter-spacing: 0.
|
|
2152
|
-
margin-bottom: 4px;
|
|
2231
|
+
font-size: 0.75rem;
|
|
2232
|
+
letter-spacing: 0.0313rem;
|
|
2153
2233
|
text-transform: uppercase;
|
|
2154
2234
|
}
|
|
2155
2235
|
|
|
2236
|
+
/* Duration in track info display */
|
|
2237
|
+
.vidply-track-duration {
|
|
2238
|
+
color: var(--vidply-text-muted);
|
|
2239
|
+
font-size: 0.75rem;
|
|
2240
|
+
font-variant-numeric: tabular-nums;
|
|
2241
|
+
}
|
|
2242
|
+
|
|
2156
2243
|
.vidply-track-title {
|
|
2157
2244
|
color: var(--vidply-white);
|
|
2158
|
-
font-size:
|
|
2245
|
+
font-size: 1.125rem;
|
|
2159
2246
|
font-weight: 600;
|
|
2160
|
-
margin-bottom:
|
|
2247
|
+
margin-bottom: 0.25rem;
|
|
2161
2248
|
}
|
|
2162
2249
|
|
|
2163
2250
|
.vidply-track-artist {
|
|
2164
2251
|
color: var(--vidply-white-80);
|
|
2165
|
-
font-size:
|
|
2252
|
+
font-size: 0.875rem;
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2255
|
+
.vidply-track-description {
|
|
2256
|
+
color: var(--vidply-white-60);
|
|
2257
|
+
font-size: 0.8125rem;
|
|
2258
|
+
line-height: 1.4;
|
|
2259
|
+
margin-top: 0.5rem;
|
|
2260
|
+
max-height: 3.5em;
|
|
2261
|
+
overflow: hidden;
|
|
2262
|
+
display: -webkit-box;
|
|
2263
|
+
-webkit-line-clamp: 2;
|
|
2264
|
+
-webkit-box-orient: vertical;
|
|
2166
2265
|
}
|
|
2167
2266
|
|
|
2168
2267
|
/* Playlist Panel */
|
|
2169
2268
|
.vidply-playlist-panel {
|
|
2170
2269
|
background: var(--vidply-bg-playlist);
|
|
2171
|
-
border-top:
|
|
2172
|
-
max-height:
|
|
2270
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
2271
|
+
max-height: 25rem;
|
|
2173
2272
|
transform: translate3d(0, 0, 0);
|
|
2174
|
-
-webkit-transform: translate3d(0, 0, 0);
|
|
2175
2273
|
order: 3; /* After track info */
|
|
2176
2274
|
-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
|
|
2177
2275
|
overflow-y: auto;
|
|
@@ -2185,10 +2283,10 @@
|
|
|
2185
2283
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
2186
2284
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
2187
2285
|
background: linear-gradient(to top, rgb(0 0 0 / 95%) 0%, rgb(0 0 0 / 90%) 100%);
|
|
2188
|
-
backdrop-filter: blur(
|
|
2286
|
+
backdrop-filter: blur(0.625rem);
|
|
2189
2287
|
border: none;
|
|
2190
|
-
border-top:
|
|
2191
|
-
bottom:
|
|
2288
|
+
border-top: 0.0625rem solid var(--vidply-border);
|
|
2289
|
+
bottom: 5rem; /* Directly above controls */
|
|
2192
2290
|
left: 0;
|
|
2193
2291
|
max-height: 50vh; /* Take up to half the screen */
|
|
2194
2292
|
opacity: 0;
|
|
@@ -2198,7 +2296,7 @@
|
|
|
2198
2296
|
position: absolute !important; /* Force absolute positioning over video */
|
|
2199
2297
|
right: 0;
|
|
2200
2298
|
touch-action: pan-y; /* Allow vertical scrolling on touch devices */
|
|
2201
|
-
transform: translateY(
|
|
2299
|
+
transform: translateY(1.25rem);
|
|
2202
2300
|
z-index: var(--vidply-z-playlist); /* Above video but below controls */
|
|
2203
2301
|
}
|
|
2204
2302
|
|
|
@@ -2226,8 +2324,8 @@
|
|
|
2226
2324
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
2227
2325
|
display: flex;
|
|
2228
2326
|
flex-direction: row;
|
|
2229
|
-
gap:
|
|
2230
|
-
padding:
|
|
2327
|
+
gap: 0.75rem;
|
|
2328
|
+
padding: 0.5rem 1rem;
|
|
2231
2329
|
overflow-x: auto;
|
|
2232
2330
|
overflow-y: hidden;
|
|
2233
2331
|
scroll-snap-type: x mandatory;
|
|
@@ -2238,17 +2336,17 @@
|
|
|
2238
2336
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
2239
2337
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
2240
2338
|
background: var(--vidply-black-50);
|
|
2241
|
-
border-bottom:
|
|
2242
|
-
font-size:
|
|
2243
|
-
padding:
|
|
2339
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
2340
|
+
font-size: 0.75rem;
|
|
2341
|
+
padding: 0.625rem 1rem;
|
|
2244
2342
|
}
|
|
2245
2343
|
|
|
2246
2344
|
/* Fullscreen playlist items - horizontal card style */
|
|
2247
2345
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
2248
2346
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
2249
2347
|
flex: 0 0 auto;
|
|
2250
|
-
min-width:
|
|
2251
|
-
max-width:
|
|
2348
|
+
min-width: 17.5rem;
|
|
2349
|
+
max-width: 20rem;
|
|
2252
2350
|
scroll-snap-align: start;
|
|
2253
2351
|
}
|
|
2254
2352
|
|
|
@@ -2256,10 +2354,10 @@
|
|
|
2256
2354
|
.vidply-player:fullscreen .vidply-playlist-item-button {
|
|
2257
2355
|
flex-direction: column;
|
|
2258
2356
|
align-items: stretch;
|
|
2259
|
-
gap:
|
|
2357
|
+
gap: 0.5rem;
|
|
2260
2358
|
padding: 0;
|
|
2261
2359
|
background: var(--vidply-black-40);
|
|
2262
|
-
border-radius:
|
|
2360
|
+
border-radius: 0.5rem;
|
|
2263
2361
|
overflow: hidden;
|
|
2264
2362
|
transition: all 0.2s ease;
|
|
2265
2363
|
}
|
|
@@ -2267,27 +2365,49 @@
|
|
|
2267
2365
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-button:hover,
|
|
2268
2366
|
.vidply-player:fullscreen .vidply-playlist-item-button:hover {
|
|
2269
2367
|
background: var(--vidply-white-10);
|
|
2270
|
-
transform: translateY(-
|
|
2271
|
-
box-shadow: 0
|
|
2368
|
+
transform: translateY(-0.25rem);
|
|
2369
|
+
box-shadow: 0 0.5rem 1.5rem var(--vidply-black-60);
|
|
2370
|
+
}
|
|
2371
|
+
|
|
2372
|
+
/* Fullscreen thumbnail container - takes full width of card */
|
|
2373
|
+
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail-container,
|
|
2374
|
+
.vidply-player:fullscreen .vidply-playlist-thumbnail-container {
|
|
2375
|
+
position: relative;
|
|
2376
|
+
width: 100%;
|
|
2272
2377
|
}
|
|
2273
2378
|
|
|
2274
2379
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
2275
2380
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
2276
2381
|
width: 100%;
|
|
2277
|
-
height:
|
|
2382
|
+
height: 10rem;
|
|
2278
2383
|
border-radius: 0;
|
|
2279
2384
|
}
|
|
2280
2385
|
|
|
2386
|
+
/* Larger duration badge in fullscreen for better visibility */
|
|
2387
|
+
.vidply-player.vidply-fullscreen .vidply-playlist-duration-badge,
|
|
2388
|
+
.vidply-player:fullscreen .vidply-playlist-duration-badge {
|
|
2389
|
+
bottom: 0.375rem;
|
|
2390
|
+
font-size: 0.75rem;
|
|
2391
|
+
padding: 0.1875rem 0.375rem;
|
|
2392
|
+
right: 0.375rem;
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2281
2395
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-info,
|
|
2282
2396
|
.vidply-player:fullscreen .vidply-playlist-item-info {
|
|
2283
|
-
padding:
|
|
2397
|
+
padding: 0.75rem;
|
|
2398
|
+
}
|
|
2399
|
+
|
|
2400
|
+
/* Hide description in fullscreen to save space */
|
|
2401
|
+
.vidply-player.vidply-fullscreen .vidply-playlist-item-description,
|
|
2402
|
+
.vidply-player:fullscreen .vidply-playlist-item-description {
|
|
2403
|
+
display: none;
|
|
2284
2404
|
}
|
|
2285
2405
|
|
|
2286
2406
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-title,
|
|
2287
2407
|
.vidply-player:fullscreen .vidply-playlist-item-title {
|
|
2288
|
-
font-size:
|
|
2408
|
+
font-size: 0.875rem;
|
|
2289
2409
|
font-weight: 600;
|
|
2290
|
-
margin-bottom:
|
|
2410
|
+
margin-bottom: 0.25rem;
|
|
2291
2411
|
white-space: normal;
|
|
2292
2412
|
overflow: hidden;
|
|
2293
2413
|
text-overflow: ellipsis;
|
|
@@ -2298,7 +2418,7 @@
|
|
|
2298
2418
|
|
|
2299
2419
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-artist,
|
|
2300
2420
|
.vidply-player:fullscreen .vidply-playlist-item-artist {
|
|
2301
|
-
font-size:
|
|
2421
|
+
font-size: 0.75rem;
|
|
2302
2422
|
opacity: 0.8;
|
|
2303
2423
|
}
|
|
2304
2424
|
|
|
@@ -2310,8 +2430,8 @@
|
|
|
2310
2430
|
/* Fullscreen playlist scrollbar styling - horizontal */
|
|
2311
2431
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar,
|
|
2312
2432
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar {
|
|
2313
|
-
height:
|
|
2314
|
-
width:
|
|
2433
|
+
height: 0.5rem;
|
|
2434
|
+
width: 0.625rem;
|
|
2315
2435
|
}
|
|
2316
2436
|
|
|
2317
2437
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-track,
|
|
@@ -2322,7 +2442,7 @@
|
|
|
2322
2442
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb,
|
|
2323
2443
|
.vidply-player:fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2324
2444
|
background: var(--vidply-white-30);
|
|
2325
|
-
border-radius:
|
|
2445
|
+
border-radius: 0.3125rem;
|
|
2326
2446
|
}
|
|
2327
2447
|
|
|
2328
2448
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel::-webkit-scrollbar-thumb:hover,
|
|
@@ -2333,7 +2453,7 @@
|
|
|
2333
2453
|
/* Horizontal scrollbar for playlist list */
|
|
2334
2454
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar,
|
|
2335
2455
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar {
|
|
2336
|
-
height:
|
|
2456
|
+
height: 0.375rem;
|
|
2337
2457
|
}
|
|
2338
2458
|
|
|
2339
2459
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-track,
|
|
@@ -2344,7 +2464,7 @@
|
|
|
2344
2464
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb,
|
|
2345
2465
|
.vidply-player:fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb {
|
|
2346
2466
|
background: var(--vidply-white-20);
|
|
2347
|
-
border-radius:
|
|
2467
|
+
border-radius: 0.1875rem;
|
|
2348
2468
|
}
|
|
2349
2469
|
|
|
2350
2470
|
.vidply-player.vidply-fullscreen .vidply-playlist-list::-webkit-scrollbar-thumb:hover,
|
|
@@ -2361,7 +2481,7 @@
|
|
|
2361
2481
|
/* Active item styling in fullscreen */
|
|
2362
2482
|
.vidply-player.vidply-fullscreen .vidply-playlist-item-active .vidply-playlist-item-button,
|
|
2363
2483
|
.vidply-player:fullscreen .vidply-playlist-item-active .vidply-playlist-item-button {
|
|
2364
|
-
border:
|
|
2484
|
+
border: 0.125rem solid var(--vidply-primary-light);
|
|
2365
2485
|
background: var(--vidply-primary-15);
|
|
2366
2486
|
}
|
|
2367
2487
|
|
|
@@ -2372,12 +2492,12 @@
|
|
|
2372
2492
|
|
|
2373
2493
|
.vidply-playlist-header {
|
|
2374
2494
|
background: var(--vidply-bg-playlist-header);
|
|
2375
|
-
border-bottom:
|
|
2495
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2376
2496
|
color: var(--vidply-white-90);
|
|
2377
|
-
font-size:
|
|
2497
|
+
font-size: 0.8125rem;
|
|
2378
2498
|
font-weight: 600;
|
|
2379
|
-
letter-spacing: 0.
|
|
2380
|
-
padding:
|
|
2499
|
+
letter-spacing: 0.0313rem;
|
|
2500
|
+
padding: 0.75rem 1rem;
|
|
2381
2501
|
position: sticky;
|
|
2382
2502
|
text-transform: uppercase;
|
|
2383
2503
|
top: 0;
|
|
@@ -2387,12 +2507,12 @@
|
|
|
2387
2507
|
.vidply-playlist-list {
|
|
2388
2508
|
list-style: none;
|
|
2389
2509
|
margin: 0;
|
|
2390
|
-
padding:
|
|
2510
|
+
padding: 0.25rem 0;
|
|
2391
2511
|
}
|
|
2392
2512
|
|
|
2393
2513
|
/* Playlist Items */
|
|
2394
2514
|
.vidply-playlist-item {
|
|
2395
|
-
border-left:
|
|
2515
|
+
border-left: 0.1875rem solid transparent;
|
|
2396
2516
|
position: relative;
|
|
2397
2517
|
}
|
|
2398
2518
|
|
|
@@ -2405,8 +2525,8 @@
|
|
|
2405
2525
|
cursor: pointer;
|
|
2406
2526
|
display: flex;
|
|
2407
2527
|
font: inherit;
|
|
2408
|
-
gap:
|
|
2409
|
-
padding:
|
|
2528
|
+
gap: 0.75rem;
|
|
2529
|
+
padding: 0.75rem 1rem;
|
|
2410
2530
|
text-align: left;
|
|
2411
2531
|
transition: var(--vidply-transition-default);
|
|
2412
2532
|
width: 100%;
|
|
@@ -2428,7 +2548,7 @@
|
|
|
2428
2548
|
.vidply-playlist-item-button:focus-visible {
|
|
2429
2549
|
background: var(--vidply-white-08);
|
|
2430
2550
|
outline: var(--vidply-focus-outline-white);
|
|
2431
|
-
outline-offset: -
|
|
2551
|
+
outline-offset: -0.125rem;
|
|
2432
2552
|
z-index: 1;
|
|
2433
2553
|
}
|
|
2434
2554
|
|
|
@@ -2443,19 +2563,19 @@
|
|
|
2443
2563
|
background: var(--vidply-primary-20);
|
|
2444
2564
|
border-left-color: var(--vidply-primary);
|
|
2445
2565
|
outline: var(--vidply-focus-outline-white);
|
|
2446
|
-
outline-offset: -
|
|
2566
|
+
outline-offset: -0.125rem;
|
|
2447
2567
|
z-index: 2;
|
|
2448
2568
|
}
|
|
2449
2569
|
|
|
2450
2570
|
/* Show focus ring on listbox when focused */
|
|
2451
2571
|
.vidply-playlist-list:focus {
|
|
2452
|
-
outline:
|
|
2453
|
-
outline-offset:
|
|
2572
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2573
|
+
outline-offset: 0.125rem;
|
|
2454
2574
|
}
|
|
2455
2575
|
|
|
2456
2576
|
.vidply-playlist-list:focus-visible {
|
|
2457
|
-
outline:
|
|
2458
|
-
outline-offset:
|
|
2577
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
2578
|
+
outline-offset: 0.125rem;
|
|
2459
2579
|
}
|
|
2460
2580
|
|
|
2461
2581
|
.vidply-playlist-item-active {
|
|
@@ -2478,7 +2598,13 @@
|
|
|
2478
2598
|
.vidply-playlist-item-active .vidply-playlist-item-button:focus-visible {
|
|
2479
2599
|
background: var(--vidply-primary-20);
|
|
2480
2600
|
outline: var(--vidply-focus-outline-white);
|
|
2481
|
-
outline-offset: -
|
|
2601
|
+
outline-offset: -0.125rem;
|
|
2602
|
+
}
|
|
2603
|
+
|
|
2604
|
+
/* Playlist Thumbnail Container (wrapper for thumbnail + duration badge) */
|
|
2605
|
+
.vidply-playlist-thumbnail-container {
|
|
2606
|
+
flex-shrink: 0;
|
|
2607
|
+
position: relative;
|
|
2482
2608
|
}
|
|
2483
2609
|
|
|
2484
2610
|
/* Playlist Thumbnail */
|
|
@@ -2487,20 +2613,20 @@
|
|
|
2487
2613
|
background-color: var(--vidply-white-10);
|
|
2488
2614
|
background-position: center;
|
|
2489
2615
|
background-size: cover;
|
|
2490
|
-
border-radius:
|
|
2616
|
+
border-radius: 0.25rem;
|
|
2491
2617
|
display: flex;
|
|
2492
2618
|
flex-shrink: 0;
|
|
2493
|
-
height:
|
|
2619
|
+
height: 2.8125rem;
|
|
2494
2620
|
justify-content: center;
|
|
2495
2621
|
overflow: hidden;
|
|
2496
|
-
width:
|
|
2622
|
+
width: 5rem;
|
|
2497
2623
|
}
|
|
2498
2624
|
|
|
2499
2625
|
.vidply-playlist-thumbnail-icon {
|
|
2500
2626
|
color: var(--vidply-text-subtle);
|
|
2501
|
-
height:
|
|
2627
|
+
height: 2rem;
|
|
2502
2628
|
transition: var(--vidply-transition-default);
|
|
2503
|
-
width:
|
|
2629
|
+
width: 2rem;
|
|
2504
2630
|
}
|
|
2505
2631
|
|
|
2506
2632
|
.vidply-playlist-item-button:hover .vidply-playlist-thumbnail-icon {
|
|
@@ -2512,6 +2638,23 @@
|
|
|
2512
2638
|
color: var(--vidply-primary-light);
|
|
2513
2639
|
}
|
|
2514
2640
|
|
|
2641
|
+
/* Duration badge on thumbnail (YouTube-style) */
|
|
2642
|
+
.vidply-playlist-duration-badge {
|
|
2643
|
+
background: rgb(0 0 0 / 80%);
|
|
2644
|
+
border-radius: 0.1875rem;
|
|
2645
|
+
bottom: 0.125rem;
|
|
2646
|
+
color: var(--vidply-white);
|
|
2647
|
+
font-family: var(--vidply-font-family);
|
|
2648
|
+
font-size: 0.625rem;
|
|
2649
|
+
font-variant-numeric: tabular-nums;
|
|
2650
|
+
font-weight: 500;
|
|
2651
|
+
letter-spacing: 0.02em;
|
|
2652
|
+
line-height: 1;
|
|
2653
|
+
padding: 0.125rem 0.25rem;
|
|
2654
|
+
position: absolute;
|
|
2655
|
+
right: 0.125rem;
|
|
2656
|
+
}
|
|
2657
|
+
|
|
2515
2658
|
/* Playlist Item Info */
|
|
2516
2659
|
.vidply-playlist-item-info {
|
|
2517
2660
|
display: block;
|
|
@@ -2519,12 +2662,21 @@
|
|
|
2519
2662
|
min-width: 0;
|
|
2520
2663
|
}
|
|
2521
2664
|
|
|
2665
|
+
/* Title row - contains title and optional inline duration */
|
|
2666
|
+
.vidply-playlist-item-title-row {
|
|
2667
|
+
align-items: center;
|
|
2668
|
+
display: flex;
|
|
2669
|
+
gap: 0.5rem;
|
|
2670
|
+
margin-bottom: 0.25rem;
|
|
2671
|
+
}
|
|
2672
|
+
|
|
2522
2673
|
.vidply-playlist-item-title {
|
|
2523
2674
|
color: var(--vidply-white);
|
|
2524
2675
|
display: block;
|
|
2525
|
-
|
|
2676
|
+
flex: 1;
|
|
2677
|
+
font-size: 0.875rem;
|
|
2526
2678
|
font-weight: 500;
|
|
2527
|
-
|
|
2679
|
+
min-width: 0;
|
|
2528
2680
|
overflow: hidden;
|
|
2529
2681
|
text-overflow: ellipsis;
|
|
2530
2682
|
white-space: nowrap;
|
|
@@ -2534,22 +2686,43 @@
|
|
|
2534
2686
|
color: var(--vidply-primary-light);
|
|
2535
2687
|
}
|
|
2536
2688
|
|
|
2689
|
+
/* Inline duration (shown when no thumbnail) */
|
|
2690
|
+
.vidply-playlist-item-duration {
|
|
2691
|
+
color: var(--vidply-text-disabled);
|
|
2692
|
+
flex-shrink: 0;
|
|
2693
|
+
font-size: 0.6875rem;
|
|
2694
|
+
font-variant-numeric: tabular-nums;
|
|
2695
|
+
}
|
|
2696
|
+
|
|
2537
2697
|
.vidply-playlist-item-artist {
|
|
2538
2698
|
color: var(--vidply-text-disabled);
|
|
2539
2699
|
display: block;
|
|
2540
|
-
font-size:
|
|
2700
|
+
font-size: 0.75rem;
|
|
2541
2701
|
overflow: hidden;
|
|
2542
2702
|
text-overflow: ellipsis;
|
|
2543
2703
|
white-space: nowrap;
|
|
2544
2704
|
}
|
|
2545
2705
|
|
|
2706
|
+
/* Description - truncated with ellipsis */
|
|
2707
|
+
.vidply-playlist-item-description {
|
|
2708
|
+
-webkit-box-orient: vertical;
|
|
2709
|
+
color: var(--vidply-text-subtle);
|
|
2710
|
+
display: -webkit-box;
|
|
2711
|
+
font-size: 0.6875rem;
|
|
2712
|
+
-webkit-line-clamp: 2;
|
|
2713
|
+
line-height: 1.4;
|
|
2714
|
+
margin-top: 0.25rem;
|
|
2715
|
+
overflow: hidden;
|
|
2716
|
+
text-overflow: ellipsis;
|
|
2717
|
+
}
|
|
2718
|
+
|
|
2546
2719
|
/* Playlist Item Icon */
|
|
2547
2720
|
.vidply-playlist-item-icon {
|
|
2548
2721
|
flex-shrink: 0;
|
|
2549
|
-
height:
|
|
2722
|
+
height: 1.25rem;
|
|
2550
2723
|
opacity: 0;
|
|
2551
2724
|
transition: opacity 0.2s ease;
|
|
2552
|
-
width:
|
|
2725
|
+
width: 1.25rem;
|
|
2553
2726
|
}
|
|
2554
2727
|
|
|
2555
2728
|
.vidply-playlist-item-active .vidply-playlist-item-icon {
|
|
@@ -2564,7 +2737,7 @@
|
|
|
2564
2737
|
}
|
|
2565
2738
|
|
|
2566
2739
|
.vidply-playlist-panel::-webkit-scrollbar {
|
|
2567
|
-
width:
|
|
2740
|
+
width: 0.5rem;
|
|
2568
2741
|
}
|
|
2569
2742
|
|
|
2570
2743
|
.vidply-playlist-panel::-webkit-scrollbar-track {
|
|
@@ -2573,7 +2746,7 @@
|
|
|
2573
2746
|
|
|
2574
2747
|
.vidply-playlist-panel::-webkit-scrollbar-thumb {
|
|
2575
2748
|
background: var(--vidply-scrollbar-thumb);
|
|
2576
|
-
border-radius:
|
|
2749
|
+
border-radius: 0.25rem;
|
|
2577
2750
|
}
|
|
2578
2751
|
|
|
2579
2752
|
.vidply-playlist-panel::-webkit-scrollbar-thumb:hover {
|
|
@@ -2582,7 +2755,7 @@
|
|
|
2582
2755
|
|
|
2583
2756
|
/* Audio Player with Playlist */
|
|
2584
2757
|
.vidply-player.vidply-audio.vidply-has-playlist {
|
|
2585
|
-
min-height:
|
|
2758
|
+
min-height: 12.5rem;
|
|
2586
2759
|
}
|
|
2587
2760
|
|
|
2588
2761
|
.vidply-player.vidply-audio.vidply-has-playlist audio {
|
|
@@ -2599,18 +2772,18 @@
|
|
|
2599
2772
|
|
|
2600
2773
|
/* Transcript Window */
|
|
2601
2774
|
.vidply-transcript-window {
|
|
2602
|
-
backdrop-filter: blur(
|
|
2775
|
+
backdrop-filter: blur(0.625rem);
|
|
2603
2776
|
background: var(--vidply-bg-transcript);
|
|
2604
|
-
border:
|
|
2605
|
-
border-radius:
|
|
2606
|
-
box-shadow: 0
|
|
2777
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2778
|
+
border-radius: 0.5rem;
|
|
2779
|
+
box-shadow: 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2607
2780
|
display: none;
|
|
2608
2781
|
flex-direction: column;
|
|
2609
|
-
min-width:
|
|
2782
|
+
min-width: 26.25rem;
|
|
2610
2783
|
order: 4; /* After video-wrapper (1), track-info (2), and playlist-panel (3) */
|
|
2611
2784
|
position: fixed;
|
|
2612
2785
|
top: 0;
|
|
2613
|
-
width:
|
|
2786
|
+
width: 26.25rem;
|
|
2614
2787
|
z-index: var(--vidply-z-transcript);
|
|
2615
2788
|
}
|
|
2616
2789
|
|
|
@@ -2618,13 +2791,13 @@
|
|
|
2618
2791
|
|
|
2619
2792
|
/* Minimum height for audio player transcript */
|
|
2620
2793
|
.vidply-player.vidply-audio .vidply-transcript-window {
|
|
2621
|
-
min-height:
|
|
2794
|
+
min-height: 12.5rem;
|
|
2622
2795
|
}
|
|
2623
2796
|
|
|
2624
2797
|
.vidply-transcript-header {
|
|
2625
2798
|
align-items: center;
|
|
2626
2799
|
background: #282828;
|
|
2627
|
-
border-bottom:
|
|
2800
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
2628
2801
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
2629
2802
|
cursor: move;
|
|
2630
2803
|
display: flex;
|
|
@@ -2636,21 +2809,21 @@
|
|
|
2636
2809
|
|
|
2637
2810
|
.vidply-transcript-header:focus,
|
|
2638
2811
|
.vidply-transcript-header:focus-visible {
|
|
2639
|
-
box-shadow: 0 0 0
|
|
2640
|
-
outline:
|
|
2641
|
-
outline-offset:
|
|
2812
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
2813
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
2814
|
+
outline-offset: 0.125rem;
|
|
2642
2815
|
}
|
|
2643
2816
|
|
|
2644
2817
|
.vidply-transcript-header h3 {
|
|
2645
2818
|
color: var(--vidply-white);
|
|
2646
2819
|
font-size: var(--vidply-font-lg);
|
|
2647
2820
|
font-weight: 600;
|
|
2648
|
-
height:
|
|
2649
|
-
left: -
|
|
2821
|
+
height: 0.0625rem;
|
|
2822
|
+
left: -625rem;
|
|
2650
2823
|
margin: 0;
|
|
2651
2824
|
overflow: hidden;
|
|
2652
2825
|
position: absolute;
|
|
2653
|
-
width:
|
|
2826
|
+
width: 0.0625rem;
|
|
2654
2827
|
}
|
|
2655
2828
|
|
|
2656
2829
|
.vidply-transcript-close {
|
|
@@ -2675,7 +2848,7 @@
|
|
|
2675
2848
|
|
|
2676
2849
|
.vidply-transcript-close:focus {
|
|
2677
2850
|
outline: var(--vidply-focus-outline-white);
|
|
2678
|
-
outline-offset:
|
|
2851
|
+
outline-offset: 0.125rem;
|
|
2679
2852
|
}
|
|
2680
2853
|
|
|
2681
2854
|
.vidply-transcript-close .vidply-icon {
|
|
@@ -2689,19 +2862,19 @@
|
|
|
2689
2862
|
overflow-y: auto;
|
|
2690
2863
|
|
|
2691
2864
|
/* iOS momentum scrolling */
|
|
2692
|
-
padding:
|
|
2865
|
+
padding: 0.75rem 0;
|
|
2693
2866
|
touch-action: pan-y;
|
|
2694
2867
|
}
|
|
2695
2868
|
|
|
2696
2869
|
.vidply-transcript-entry {
|
|
2697
2870
|
background: none;
|
|
2698
2871
|
border: none;
|
|
2699
|
-
border-left:
|
|
2872
|
+
border-left: 0.1875rem solid transparent;
|
|
2700
2873
|
color: inherit;
|
|
2701
2874
|
cursor: pointer;
|
|
2702
2875
|
display: block;
|
|
2703
2876
|
font: inherit;
|
|
2704
|
-
padding:
|
|
2877
|
+
padding: 0.75rem 1.25rem;
|
|
2705
2878
|
text-align: left;
|
|
2706
2879
|
transition: background 0.2s ease;
|
|
2707
2880
|
width: 100%;
|
|
@@ -2722,8 +2895,8 @@
|
|
|
2722
2895
|
font-family: 'Courier New', monospace;
|
|
2723
2896
|
font-size: 100%;
|
|
2724
2897
|
font-weight: 600;
|
|
2725
|
-
margin-bottom:
|
|
2726
|
-
margin-right:
|
|
2898
|
+
margin-bottom: 0.25rem;
|
|
2899
|
+
margin-right: 0.5rem;
|
|
2727
2900
|
}
|
|
2728
2901
|
|
|
2729
2902
|
.vidply-transcript-text {
|
|
@@ -2745,7 +2918,7 @@
|
|
|
2745
2918
|
/* Transcript entry types */
|
|
2746
2919
|
.vidply-transcript-description {
|
|
2747
2920
|
background: rgb(100 149 237 / 8%); /* Subtle blue tint for descriptions */
|
|
2748
|
-
border-left:
|
|
2921
|
+
border-left: 0.1875rem solid #8BB3FB;
|
|
2749
2922
|
}
|
|
2750
2923
|
|
|
2751
2924
|
.vidply-transcript-description .vidply-transcript-text {
|
|
@@ -2785,7 +2958,7 @@
|
|
|
2785
2958
|
}
|
|
2786
2959
|
|
|
2787
2960
|
.vidply-transcript-content::-webkit-scrollbar {
|
|
2788
|
-
width:
|
|
2961
|
+
width: 0.5rem;
|
|
2789
2962
|
}
|
|
2790
2963
|
|
|
2791
2964
|
.vidply-transcript-content::-webkit-scrollbar-track {
|
|
@@ -2794,7 +2967,7 @@
|
|
|
2794
2967
|
|
|
2795
2968
|
.vidply-transcript-content::-webkit-scrollbar-thumb {
|
|
2796
2969
|
background: var(--vidply-scrollbar-thumb);
|
|
2797
|
-
border-radius:
|
|
2970
|
+
border-radius: 0.25rem;
|
|
2798
2971
|
}
|
|
2799
2972
|
|
|
2800
2973
|
.vidply-transcript-content::-webkit-scrollbar-thumb:hover {
|
|
@@ -2805,7 +2978,7 @@
|
|
|
2805
2978
|
.vidply-transcript-header-left {
|
|
2806
2979
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
2807
2980
|
display: flex;
|
|
2808
|
-
gap:
|
|
2981
|
+
gap: 1rem;
|
|
2809
2982
|
position: relative;
|
|
2810
2983
|
}
|
|
2811
2984
|
|
|
@@ -2819,21 +2992,21 @@
|
|
|
2819
2992
|
align-self: center; /* Center checkbox label vertically in header */
|
|
2820
2993
|
cursor: pointer;
|
|
2821
2994
|
display: flex;
|
|
2822
|
-
gap:
|
|
2995
|
+
gap: 0.375rem;
|
|
2823
2996
|
user-select: none;
|
|
2824
2997
|
white-space: nowrap;
|
|
2825
2998
|
}
|
|
2826
2999
|
|
|
2827
3000
|
.vidply-transcript-autoscroll-label input[type="checkbox"] {
|
|
2828
3001
|
cursor: pointer;
|
|
2829
|
-
height:
|
|
3002
|
+
height: 1rem;
|
|
2830
3003
|
margin: 0;
|
|
2831
|
-
width:
|
|
3004
|
+
width: 1rem;
|
|
2832
3005
|
}
|
|
2833
3006
|
|
|
2834
3007
|
.vidply-transcript-autoscroll-text {
|
|
2835
3008
|
color: var(--vidply-text-muted);
|
|
2836
|
-
font-size:
|
|
3009
|
+
font-size: 0.8125rem;
|
|
2837
3010
|
transition: color 0.2s ease;
|
|
2838
3011
|
}
|
|
2839
3012
|
|
|
@@ -2847,32 +3020,32 @@
|
|
|
2847
3020
|
align-self: center; /* Center this wrapper vertically in header */
|
|
2848
3021
|
display: flex;
|
|
2849
3022
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
2850
|
-
gap:
|
|
3023
|
+
gap: 0.5rem;
|
|
2851
3024
|
}
|
|
2852
3025
|
|
|
2853
3026
|
.vidply-transcript-language-label {
|
|
2854
3027
|
/* Visible label for voice input accessibility */
|
|
2855
3028
|
color: var(--vidply-text-muted);
|
|
2856
3029
|
cursor: pointer;
|
|
2857
|
-
font-size:
|
|
3030
|
+
font-size: 0.8125rem;
|
|
2858
3031
|
font-weight: 400;
|
|
2859
|
-
margin-left:
|
|
3032
|
+
margin-left: 0.5rem;
|
|
2860
3033
|
white-space: nowrap;
|
|
2861
3034
|
}
|
|
2862
3035
|
|
|
2863
3036
|
.vidply-transcript-language-select {
|
|
2864
3037
|
background: var(--vidply-bg-menu);
|
|
2865
|
-
border:
|
|
2866
|
-
border-radius:
|
|
3038
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3039
|
+
border-radius: 0.25rem;
|
|
2867
3040
|
color: var(--vidply-text);
|
|
2868
|
-
font-size:
|
|
2869
|
-
max-width:
|
|
2870
|
-
padding:
|
|
3041
|
+
font-size: 0.875rem;
|
|
3042
|
+
max-width: 7.5rem;
|
|
3043
|
+
padding: 0.25rem 0.5rem;
|
|
2871
3044
|
}
|
|
2872
3045
|
|
|
2873
3046
|
.vidply-transcript-language-select:focus {
|
|
2874
3047
|
outline: var(--vidply-focus-outline);
|
|
2875
|
-
outline-offset:
|
|
3048
|
+
outline-offset: 0.125rem;
|
|
2876
3049
|
}
|
|
2877
3050
|
|
|
2878
3051
|
/* Transcript Settings Button */
|
|
@@ -2900,7 +3073,7 @@
|
|
|
2900
3073
|
|
|
2901
3074
|
.vidply-transcript-settings:focus {
|
|
2902
3075
|
outline: var(--vidply-focus-outline-white);
|
|
2903
|
-
outline-offset:
|
|
3076
|
+
outline-offset: 0.125rem;
|
|
2904
3077
|
}
|
|
2905
3078
|
|
|
2906
3079
|
.vidply-transcript-settings .vidply-icon {
|
|
@@ -2911,31 +3084,31 @@
|
|
|
2911
3084
|
/* Transcript Settings Menu */
|
|
2912
3085
|
.vidply-transcript-settings-menu {
|
|
2913
3086
|
background: var(--vidply-bg-menu);
|
|
2914
|
-
border:
|
|
3087
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
2915
3088
|
border-radius: var(--vidply-radius-md);
|
|
2916
3089
|
box-shadow: var(--vidply-shadow-lg);
|
|
2917
3090
|
display: none;
|
|
2918
|
-
min-width:
|
|
3091
|
+
min-width: 15rem;
|
|
2919
3092
|
padding: var(--vidply-gap-sm);
|
|
2920
3093
|
position: absolute;
|
|
2921
3094
|
z-index: 100;
|
|
2922
3095
|
}
|
|
2923
3096
|
|
|
2924
3097
|
.vidply-transcript-settings-menu::after {
|
|
2925
|
-
border-bottom:
|
|
2926
|
-
border-left:
|
|
2927
|
-
border-right:
|
|
3098
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
3099
|
+
border-left: 0.375rem solid transparent;
|
|
3100
|
+
border-right: 0.375rem solid transparent;
|
|
2928
3101
|
bottom: 100%;
|
|
2929
3102
|
content: '';
|
|
2930
3103
|
height: 0;
|
|
2931
|
-
left:
|
|
3104
|
+
left: 0.5rem;
|
|
2932
3105
|
position: absolute;
|
|
2933
3106
|
width: 0;
|
|
2934
3107
|
}
|
|
2935
3108
|
|
|
2936
3109
|
.vidply-transcript-settings-menu.vidply-menu-above::after {
|
|
2937
3110
|
border-bottom: none;
|
|
2938
|
-
border-top:
|
|
3111
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
2939
3112
|
bottom: auto;
|
|
2940
3113
|
top: 100%;
|
|
2941
3114
|
}
|
|
@@ -2951,7 +3124,7 @@
|
|
|
2951
3124
|
display: flex;
|
|
2952
3125
|
font-size: var(--vidply-font-base);
|
|
2953
3126
|
gap: var(--vidply-gap-md);
|
|
2954
|
-
padding: var(--vidply-padding-md)
|
|
3127
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
2955
3128
|
text-align: left;
|
|
2956
3129
|
transition: var(--vidply-transition-normal);
|
|
2957
3130
|
width: 100%;
|
|
@@ -2967,8 +3140,8 @@
|
|
|
2967
3140
|
|
|
2968
3141
|
.vidply-transcript-settings-item:focus {
|
|
2969
3142
|
background: var(--vidply-primary-25);
|
|
2970
|
-
outline:
|
|
2971
|
-
outline-offset: -
|
|
3143
|
+
outline: 0.125rem solid var(--vidply-primary-light);
|
|
3144
|
+
outline-offset: -0.125rem;
|
|
2972
3145
|
}
|
|
2973
3146
|
|
|
2974
3147
|
.vidply-transcript-settings-item:focus span {
|
|
@@ -2989,16 +3162,16 @@
|
|
|
2989
3162
|
/* Move Mode Visual Feedback */
|
|
2990
3163
|
.vidply-transcript-move-mode {
|
|
2991
3164
|
animation: transcriptPulse 0.5s ease-in-out 2;
|
|
2992
|
-
box-shadow: 0 0 0
|
|
3165
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2993
3166
|
}
|
|
2994
3167
|
|
|
2995
3168
|
@keyframes transcriptPulse {
|
|
2996
3169
|
0%, 100% {
|
|
2997
|
-
box-shadow: 0 0 0
|
|
3170
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
2998
3171
|
}
|
|
2999
3172
|
|
|
3000
3173
|
50% {
|
|
3001
|
-
box-shadow: 0 0 0
|
|
3174
|
+
box-shadow: 0 0 0 0.375rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3002
3175
|
}
|
|
3003
3176
|
}
|
|
3004
3177
|
|
|
@@ -3012,67 +3185,67 @@
|
|
|
3012
3185
|
.vidply-transcript-resize-nw,
|
|
3013
3186
|
.vidply-transcript-resize-se,
|
|
3014
3187
|
.vidply-transcript-resize-sw {
|
|
3015
|
-
height:
|
|
3016
|
-
width:
|
|
3188
|
+
height: 1rem;
|
|
3189
|
+
width: 1rem;
|
|
3017
3190
|
}
|
|
3018
3191
|
|
|
3019
3192
|
.vidply-transcript-resize-n,
|
|
3020
3193
|
.vidply-transcript-resize-s {
|
|
3021
3194
|
cursor: ns-resize;
|
|
3022
|
-
height:
|
|
3023
|
-
left:
|
|
3024
|
-
right:
|
|
3195
|
+
height: 0.5rem;
|
|
3196
|
+
left: 1rem;
|
|
3197
|
+
right: 1rem;
|
|
3025
3198
|
}
|
|
3026
3199
|
|
|
3027
3200
|
.vidply-transcript-resize-e,
|
|
3028
3201
|
.vidply-transcript-resize-w {
|
|
3029
|
-
bottom:
|
|
3202
|
+
bottom: 1rem;
|
|
3030
3203
|
cursor: ew-resize;
|
|
3031
|
-
top:
|
|
3032
|
-
width:
|
|
3204
|
+
top: 1rem;
|
|
3205
|
+
width: 0.5rem;
|
|
3033
3206
|
}
|
|
3034
3207
|
|
|
3035
|
-
.vidply-transcript-resize-n { top: -
|
|
3036
|
-
.vidply-transcript-resize-s { bottom: -
|
|
3037
|
-
.vidply-transcript-resize-e { right: -
|
|
3038
|
-
.vidply-transcript-resize-w { left: -
|
|
3208
|
+
.vidply-transcript-resize-n { top: -0.25rem; }
|
|
3209
|
+
.vidply-transcript-resize-s { bottom: -0.25rem; }
|
|
3210
|
+
.vidply-transcript-resize-e { right: -0.25rem; }
|
|
3211
|
+
.vidply-transcript-resize-w { left: -0.25rem; }
|
|
3039
3212
|
|
|
3040
3213
|
.vidply-transcript-resize-ne {
|
|
3041
3214
|
cursor: nesw-resize;
|
|
3042
|
-
right: -
|
|
3043
|
-
top: -
|
|
3215
|
+
right: -0.5rem;
|
|
3216
|
+
top: -0.5rem;
|
|
3044
3217
|
}
|
|
3045
3218
|
|
|
3046
3219
|
.vidply-transcript-resize-nw {
|
|
3047
3220
|
cursor: nwse-resize;
|
|
3048
|
-
left: -
|
|
3049
|
-
top: -
|
|
3221
|
+
left: -0.5rem;
|
|
3222
|
+
top: -0.5rem;
|
|
3050
3223
|
}
|
|
3051
3224
|
|
|
3052
3225
|
.vidply-transcript-resize-se {
|
|
3053
|
-
bottom: -
|
|
3226
|
+
bottom: -0.5rem;
|
|
3054
3227
|
cursor: nwse-resize;
|
|
3055
|
-
right: -
|
|
3228
|
+
right: -0.5rem;
|
|
3056
3229
|
}
|
|
3057
3230
|
|
|
3058
3231
|
.vidply-transcript-resize-sw {
|
|
3059
|
-
bottom: -
|
|
3232
|
+
bottom: -0.5rem;
|
|
3060
3233
|
cursor: nesw-resize;
|
|
3061
|
-
left: -
|
|
3234
|
+
left: -0.5rem;
|
|
3062
3235
|
}
|
|
3063
3236
|
|
|
3064
3237
|
.vidply-transcript-resizable .vidply-transcript-resize-handle::after {
|
|
3065
3238
|
background: var(--vidply-primary-light);
|
|
3066
3239
|
border-radius: 50%;
|
|
3067
3240
|
content: '';
|
|
3068
|
-
height:
|
|
3241
|
+
height: 0.375rem;
|
|
3069
3242
|
left: 50%;
|
|
3070
3243
|
opacity: 0;
|
|
3071
3244
|
position: absolute;
|
|
3072
3245
|
top: 50%;
|
|
3073
3246
|
transform: translate(-50%, -50%);
|
|
3074
3247
|
transition: opacity 0.2s ease;
|
|
3075
|
-
width:
|
|
3248
|
+
width: 0.375rem;
|
|
3076
3249
|
}
|
|
3077
3250
|
|
|
3078
3251
|
.vidply-transcript-resizable:hover .vidply-transcript-resize-handle::after {
|
|
@@ -3085,7 +3258,7 @@
|
|
|
3085
3258
|
|
|
3086
3259
|
/* Resizing State */
|
|
3087
3260
|
.vidply-transcript-resizing {
|
|
3088
|
-
box-shadow: 0 0 0
|
|
3261
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3089
3262
|
transition: none !important;
|
|
3090
3263
|
}
|
|
3091
3264
|
|
|
@@ -3095,17 +3268,17 @@
|
|
|
3095
3268
|
|
|
3096
3269
|
/* Keyboard Drag Mode */
|
|
3097
3270
|
.vidply-transcript-keyboard-drag {
|
|
3098
|
-
box-shadow: 0 0 0
|
|
3271
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3099
3272
|
}
|
|
3100
3273
|
|
|
3101
3274
|
.vidply-transcript-drag-indicator {
|
|
3102
3275
|
background: linear-gradient(135deg, var(--vidply-primary) 0%, var(--vidply-primary-light) 100%);
|
|
3103
|
-
border-radius: 0 0
|
|
3276
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
3104
3277
|
color: var(--vidply-white);
|
|
3105
|
-
font-size:
|
|
3278
|
+
font-size: 0.75rem;
|
|
3106
3279
|
font-weight: 600;
|
|
3107
3280
|
left: 0;
|
|
3108
|
-
padding:
|
|
3281
|
+
padding: 0.5rem 0.75rem;
|
|
3109
3282
|
position: absolute;
|
|
3110
3283
|
right: 0;
|
|
3111
3284
|
text-align: center;
|
|
@@ -3117,11 +3290,11 @@
|
|
|
3117
3290
|
.vidply-transcript-move-tooltip {
|
|
3118
3291
|
animation: fadeInDown 0.3s ease;
|
|
3119
3292
|
background: var(--vidply-black-90);
|
|
3120
|
-
border-radius:
|
|
3293
|
+
border-radius: 0.25rem;
|
|
3121
3294
|
color: var(--vidply-white);
|
|
3122
|
-
font-size:
|
|
3295
|
+
font-size: 0.75rem;
|
|
3123
3296
|
left: 50%;
|
|
3124
|
-
padding:
|
|
3297
|
+
padding: 0.375rem 0.75rem;
|
|
3125
3298
|
position: absolute;
|
|
3126
3299
|
text-align: center;
|
|
3127
3300
|
top: 100%;
|
|
@@ -3133,11 +3306,11 @@
|
|
|
3133
3306
|
.vidply-transcript-resize-tooltip {
|
|
3134
3307
|
animation: fadeInDown 0.3s ease;
|
|
3135
3308
|
background: var(--vidply-primary);
|
|
3136
|
-
border-radius:
|
|
3309
|
+
border-radius: 0.25rem;
|
|
3137
3310
|
color: var(--vidply-white);
|
|
3138
|
-
font-size:
|
|
3311
|
+
font-size: 0.75rem;
|
|
3139
3312
|
left: 50%;
|
|
3140
|
-
padding:
|
|
3313
|
+
padding: 0.375rem 0.75rem;
|
|
3141
3314
|
position: absolute;
|
|
3142
3315
|
text-align: center;
|
|
3143
3316
|
top: 100%;
|
|
@@ -3149,7 +3322,7 @@
|
|
|
3149
3322
|
@keyframes fadeInDown {
|
|
3150
3323
|
from {
|
|
3151
3324
|
opacity: 0;
|
|
3152
|
-
transform: translateX(-50%) translateY(-
|
|
3325
|
+
transform: translateX(-50%) translateY(-0.625rem);
|
|
3153
3326
|
}
|
|
3154
3327
|
|
|
3155
3328
|
to {
|
|
@@ -3161,15 +3334,15 @@
|
|
|
3161
3334
|
/* Transcript Style Dialog - Dropdown Menu Style */
|
|
3162
3335
|
.vidply-transcript-style-dialog {
|
|
3163
3336
|
background: var(--vidply-bg-menu);
|
|
3164
|
-
border:
|
|
3165
|
-
border-radius:
|
|
3337
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3338
|
+
border-radius: 0.5rem;
|
|
3166
3339
|
box-shadow: var(--vidply-shadow-lg);
|
|
3167
3340
|
display: none;
|
|
3168
3341
|
left: 0;
|
|
3169
|
-
max-height:
|
|
3170
|
-
min-width:
|
|
3342
|
+
max-height: 31.25rem;
|
|
3343
|
+
min-width: 17.5rem;
|
|
3171
3344
|
overflow-y: auto;
|
|
3172
|
-
padding:
|
|
3345
|
+
padding: 0.75rem;
|
|
3173
3346
|
position: absolute;
|
|
3174
3347
|
top: 100%;
|
|
3175
3348
|
width: auto;
|
|
@@ -3180,26 +3353,26 @@
|
|
|
3180
3353
|
.vidply-transcript-style-dialog::after {
|
|
3181
3354
|
border-color: transparent transparent var(--vidply-bg-menu) transparent;
|
|
3182
3355
|
border-style: solid;
|
|
3183
|
-
border-width: 0
|
|
3356
|
+
border-width: 0 0.5rem 0.5rem;
|
|
3184
3357
|
content: '';
|
|
3185
3358
|
height: 0;
|
|
3186
|
-
left:
|
|
3359
|
+
left: 0.75rem;
|
|
3187
3360
|
position: absolute;
|
|
3188
|
-
top: -
|
|
3361
|
+
top: -0.5rem;
|
|
3189
3362
|
width: 0;
|
|
3190
3363
|
}
|
|
3191
3364
|
|
|
3192
3365
|
.vidply-transcript-style-title {
|
|
3193
|
-
border-bottom:
|
|
3366
|
+
border-bottom: 0.0625rem solid var(--vidply-border);
|
|
3194
3367
|
color: var(--vidply-white);
|
|
3195
|
-
font-size:
|
|
3368
|
+
font-size: 0.875rem;
|
|
3196
3369
|
font-weight: 600;
|
|
3197
|
-
margin: 0 0
|
|
3198
|
-
padding-bottom:
|
|
3370
|
+
margin: 0 0 0.75rem;
|
|
3371
|
+
padding-bottom: 0.5rem;
|
|
3199
3372
|
}
|
|
3200
3373
|
|
|
3201
3374
|
.vidply-transcript-style-group {
|
|
3202
|
-
margin-bottom:
|
|
3375
|
+
margin-bottom: 0.75rem;
|
|
3203
3376
|
}
|
|
3204
3377
|
|
|
3205
3378
|
.vidply-transcript-style-group:last-child {
|
|
@@ -3209,19 +3382,19 @@
|
|
|
3209
3382
|
.vidply-transcript-style-group label {
|
|
3210
3383
|
color: var(--vidply-white-90);
|
|
3211
3384
|
display: block;
|
|
3212
|
-
font-size:
|
|
3385
|
+
font-size: 0.75rem;
|
|
3213
3386
|
font-weight: 500;
|
|
3214
|
-
margin-bottom:
|
|
3387
|
+
margin-bottom: 0.375rem;
|
|
3215
3388
|
}
|
|
3216
3389
|
|
|
3217
3390
|
/* Style Select */
|
|
3218
3391
|
.vidply-transcript-style-select {
|
|
3219
3392
|
background: var(--vidply-bg-menu);
|
|
3220
|
-
border:
|
|
3221
|
-
border-radius:
|
|
3393
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3394
|
+
border-radius: 0.25rem;
|
|
3222
3395
|
color: var(--vidply-text);
|
|
3223
|
-
font-size:
|
|
3224
|
-
padding:
|
|
3396
|
+
font-size: 0.875rem;
|
|
3397
|
+
padding: 0.25rem 0.5rem;
|
|
3225
3398
|
transition: var(--vidply-transition-default);
|
|
3226
3399
|
width: 100%;
|
|
3227
3400
|
}
|
|
@@ -3234,50 +3407,50 @@
|
|
|
3234
3407
|
.vidply-transcript-style-select:focus {
|
|
3235
3408
|
background: var(--vidply-white-15);
|
|
3236
3409
|
border-color: var(--vidply-border-focus);
|
|
3237
|
-
box-shadow: 0 0 0
|
|
3410
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3238
3411
|
outline: var(--vidply-focus-outline);
|
|
3239
|
-
outline-offset:
|
|
3412
|
+
outline-offset: 0.125rem;
|
|
3240
3413
|
}
|
|
3241
3414
|
|
|
3242
3415
|
/* Style Color Input */
|
|
3243
3416
|
.vidply-transcript-style-color {
|
|
3244
|
-
border:
|
|
3245
|
-
border-radius:
|
|
3417
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3418
|
+
border-radius: 0.25rem;
|
|
3246
3419
|
cursor: pointer;
|
|
3247
|
-
height:
|
|
3420
|
+
height: 2rem;
|
|
3248
3421
|
outline: none;
|
|
3249
|
-
padding:
|
|
3422
|
+
padding: 0.25rem;
|
|
3250
3423
|
transition: var(--vidply-transition-default);
|
|
3251
3424
|
width: 100%;
|
|
3252
3425
|
}
|
|
3253
3426
|
|
|
3254
3427
|
.vidply-transcript-style-color:hover {
|
|
3255
3428
|
border-color: var(--vidply-border-hover);
|
|
3256
|
-
box-shadow: 0 0 0
|
|
3429
|
+
box-shadow: 0 0 0 0.0625rem var(--vidply-primary-20);
|
|
3257
3430
|
}
|
|
3258
3431
|
|
|
3259
3432
|
.vidply-transcript-style-color:focus {
|
|
3260
3433
|
border-color: var(--vidply-border-focus);
|
|
3261
|
-
box-shadow: 0 0 0
|
|
3434
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3262
3435
|
outline: var(--vidply-focus-outline);
|
|
3263
|
-
outline-offset:
|
|
3436
|
+
outline-offset: 0.125rem;
|
|
3264
3437
|
}
|
|
3265
3438
|
|
|
3266
3439
|
/* Style Range Slider */
|
|
3267
3440
|
.vidply-transcript-style-range-container {
|
|
3268
3441
|
align-items: center;
|
|
3269
3442
|
display: flex;
|
|
3270
|
-
gap:
|
|
3443
|
+
gap: 0.75rem;
|
|
3271
3444
|
}
|
|
3272
3445
|
|
|
3273
3446
|
.vidply-transcript-style-range {
|
|
3274
3447
|
-webkit-appearance: none;
|
|
3275
3448
|
appearance: none;
|
|
3276
3449
|
background: var(--vidply-white-20);
|
|
3277
|
-
border-radius:
|
|
3450
|
+
border-radius: 0.1875rem;
|
|
3278
3451
|
cursor: pointer;
|
|
3279
3452
|
flex: 1;
|
|
3280
|
-
height:
|
|
3453
|
+
height: 0.375rem;
|
|
3281
3454
|
outline: none;
|
|
3282
3455
|
transition: var(--vidply-transition-default);
|
|
3283
3456
|
}
|
|
@@ -3288,20 +3461,20 @@
|
|
|
3288
3461
|
|
|
3289
3462
|
.vidply-transcript-style-range:focus {
|
|
3290
3463
|
background: var(--vidply-white-30);
|
|
3291
|
-
box-shadow: 0 0 0
|
|
3464
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-20);
|
|
3292
3465
|
}
|
|
3293
3466
|
|
|
3294
3467
|
.vidply-transcript-style-range::-webkit-slider-thumb {
|
|
3295
3468
|
-webkit-appearance: none;
|
|
3296
3469
|
appearance: none;
|
|
3297
3470
|
background: var(--vidply-primary-light);
|
|
3298
|
-
border:
|
|
3471
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3299
3472
|
border-radius: 50%;
|
|
3300
3473
|
box-shadow: var(--vidply-shadow-sm);
|
|
3301
3474
|
cursor: pointer;
|
|
3302
|
-
height:
|
|
3475
|
+
height: 1rem;
|
|
3303
3476
|
transition: all 0.15s ease;
|
|
3304
|
-
width:
|
|
3477
|
+
width: 1rem;
|
|
3305
3478
|
}
|
|
3306
3479
|
|
|
3307
3480
|
.vidply-transcript-style-range::-webkit-slider-thumb:hover {
|
|
@@ -3311,13 +3484,13 @@
|
|
|
3311
3484
|
|
|
3312
3485
|
.vidply-transcript-style-range::-moz-range-thumb {
|
|
3313
3486
|
background: var(--vidply-primary-light);
|
|
3314
|
-
border:
|
|
3487
|
+
border: 0.125rem solid var(--vidply-white);
|
|
3315
3488
|
border-radius: 50%;
|
|
3316
3489
|
box-shadow: var(--vidply-shadow-sm);
|
|
3317
3490
|
cursor: pointer;
|
|
3318
|
-
height:
|
|
3491
|
+
height: 1rem;
|
|
3319
3492
|
transition: all 0.15s ease;
|
|
3320
|
-
width:
|
|
3493
|
+
width: 1rem;
|
|
3321
3494
|
}
|
|
3322
3495
|
|
|
3323
3496
|
.vidply-transcript-style-range::-moz-range-thumb:hover {
|
|
@@ -3327,9 +3500,9 @@
|
|
|
3327
3500
|
|
|
3328
3501
|
.vidply-transcript-style-value {
|
|
3329
3502
|
color: var(--vidply-text-muted);
|
|
3330
|
-
font-size:
|
|
3503
|
+
font-size: 0.8125rem;
|
|
3331
3504
|
font-weight: 600;
|
|
3332
|
-
min-width:
|
|
3505
|
+
min-width: 2.5rem;
|
|
3333
3506
|
text-align: right;
|
|
3334
3507
|
}
|
|
3335
3508
|
|
|
@@ -3337,20 +3510,20 @@
|
|
|
3337
3510
|
.vidply-transcript-style-close {
|
|
3338
3511
|
background: var(--vidply-primary);
|
|
3339
3512
|
border: none;
|
|
3340
|
-
border-radius:
|
|
3513
|
+
border-radius: 0.25rem;
|
|
3341
3514
|
color: var(--vidply-white);
|
|
3342
3515
|
cursor: pointer;
|
|
3343
|
-
font-size:
|
|
3516
|
+
font-size: 0.8125rem;
|
|
3344
3517
|
font-weight: 600;
|
|
3345
|
-
margin-top:
|
|
3346
|
-
padding:
|
|
3518
|
+
margin-top: 0.75rem;
|
|
3519
|
+
padding: 0.5rem 1rem;
|
|
3347
3520
|
transition: var(--vidply-transition-default);
|
|
3348
3521
|
width: 100%;
|
|
3349
3522
|
}
|
|
3350
3523
|
|
|
3351
3524
|
.vidply-transcript-style-close:hover {
|
|
3352
3525
|
background: var(--vidply-primary-light);
|
|
3353
|
-
transform: translateY(-
|
|
3526
|
+
transform: translateY(-0.0625rem);
|
|
3354
3527
|
}
|
|
3355
3528
|
|
|
3356
3529
|
.vidply-transcript-style-close:active {
|
|
@@ -3358,22 +3531,22 @@
|
|
|
3358
3531
|
}
|
|
3359
3532
|
|
|
3360
3533
|
.vidply-transcript-style-close:focus {
|
|
3361
|
-
box-shadow: 0 0 0
|
|
3534
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary-20);
|
|
3362
3535
|
outline: var(--vidply-focus-outline);
|
|
3363
|
-
outline-offset:
|
|
3536
|
+
outline-offset: 0.125rem;
|
|
3364
3537
|
}
|
|
3365
3538
|
|
|
3366
3539
|
/* Sign Language Video Wrapper */
|
|
3367
3540
|
.vidply-sign-language-wrapper {
|
|
3368
3541
|
background: transparent;
|
|
3369
|
-
border-radius:
|
|
3542
|
+
border-radius: 0.5rem;
|
|
3370
3543
|
height: auto;
|
|
3371
3544
|
max-width: none;
|
|
3372
|
-
min-height:
|
|
3545
|
+
min-height: 6.25rem;
|
|
3373
3546
|
overflow: visible; /* Allow menu to overflow */
|
|
3374
3547
|
position: absolute;
|
|
3375
3548
|
transition: opacity 0.3s ease;
|
|
3376
|
-
width:
|
|
3549
|
+
width: 17.5rem;
|
|
3377
3550
|
z-index: 3;
|
|
3378
3551
|
}
|
|
3379
3552
|
|
|
@@ -3382,15 +3555,15 @@
|
|
|
3382
3555
|
}
|
|
3383
3556
|
|
|
3384
3557
|
.vidply-sign-language-wrapper:focus {
|
|
3385
|
-
outline:
|
|
3386
|
-
outline-offset:
|
|
3558
|
+
outline: 0.125rem solid var(--vidply-primary);
|
|
3559
|
+
outline-offset: 0.125rem;
|
|
3387
3560
|
}
|
|
3388
3561
|
|
|
3389
3562
|
/* Sign Language Header */
|
|
3390
3563
|
.vidply-sign-language-header {
|
|
3391
3564
|
align-items: center;
|
|
3392
3565
|
background: #282828;
|
|
3393
|
-
border-bottom:
|
|
3566
|
+
border-bottom: 0.0625rem solid var(--vidply-border-light);
|
|
3394
3567
|
border-radius: var(--vidply-radius-lg) var(--vidply-radius-lg) 0 0;
|
|
3395
3568
|
cursor: move;
|
|
3396
3569
|
display: flex;
|
|
@@ -3403,15 +3576,15 @@
|
|
|
3403
3576
|
|
|
3404
3577
|
.vidply-sign-language-header:focus,
|
|
3405
3578
|
.vidply-sign-language-header:focus-visible {
|
|
3406
|
-
box-shadow: 0 0 0
|
|
3407
|
-
outline:
|
|
3408
|
-
outline-offset:
|
|
3579
|
+
box-shadow: 0 0 0 0.25rem rgb(91 144 255 / 35%);
|
|
3580
|
+
outline: 0.1875rem solid var(--vidply-primary-light);
|
|
3581
|
+
outline-offset: 0.125rem;
|
|
3409
3582
|
}
|
|
3410
3583
|
|
|
3411
3584
|
.vidply-sign-language-header-left {
|
|
3412
3585
|
align-items: flex-start; /* Changed from center to align items at top */
|
|
3413
3586
|
display: flex;
|
|
3414
|
-
gap:
|
|
3587
|
+
gap: 1rem;
|
|
3415
3588
|
position: relative; /* Needed for menu positioning */
|
|
3416
3589
|
}
|
|
3417
3590
|
|
|
@@ -3420,29 +3593,29 @@
|
|
|
3420
3593
|
align-self: center; /* Center this wrapper vertically in header */
|
|
3421
3594
|
display: flex;
|
|
3422
3595
|
flex-direction: row; /* Horizontal layout: label left of select */
|
|
3423
|
-
gap:
|
|
3596
|
+
gap: 0.5rem;
|
|
3424
3597
|
}
|
|
3425
3598
|
|
|
3426
3599
|
.vidply-sign-language-label {
|
|
3427
3600
|
/* Visible label for voice input accessibility */
|
|
3428
3601
|
color: var(--vidply-white);
|
|
3429
|
-
font-size:
|
|
3602
|
+
font-size: 0.75rem;
|
|
3430
3603
|
font-weight: 500;
|
|
3431
3604
|
white-space: nowrap;
|
|
3432
3605
|
}
|
|
3433
3606
|
|
|
3434
3607
|
.vidply-sign-language-select {
|
|
3435
3608
|
background: var(--vidply-bg-menu);
|
|
3436
|
-
border:
|
|
3437
|
-
border-radius:
|
|
3609
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3610
|
+
border-radius: 0.25rem;
|
|
3438
3611
|
color: var(--vidply-text);
|
|
3439
|
-
font-size:
|
|
3440
|
-
padding:
|
|
3612
|
+
font-size: 0.875rem;
|
|
3613
|
+
padding: 0.25rem 0.5rem;
|
|
3441
3614
|
}
|
|
3442
3615
|
|
|
3443
3616
|
.vidply-sign-language-select:focus {
|
|
3444
3617
|
outline: var(--vidply-focus-outline);
|
|
3445
|
-
outline-offset:
|
|
3618
|
+
outline-offset: 0.125rem;
|
|
3446
3619
|
}
|
|
3447
3620
|
|
|
3448
3621
|
/* Sign Language Settings Button */
|
|
@@ -3469,7 +3642,7 @@
|
|
|
3469
3642
|
|
|
3470
3643
|
.vidply-sign-language-settings:focus {
|
|
3471
3644
|
outline: var(--vidply-focus-outline-white);
|
|
3472
|
-
outline-offset:
|
|
3645
|
+
outline-offset: 0.125rem;
|
|
3473
3646
|
}
|
|
3474
3647
|
|
|
3475
3648
|
.vidply-sign-language-settings .vidply-icon {
|
|
@@ -3480,20 +3653,20 @@
|
|
|
3480
3653
|
/* Sign Language Settings Menu */
|
|
3481
3654
|
.vidply-sign-language-settings-menu {
|
|
3482
3655
|
background: var(--vidply-bg-menu);
|
|
3483
|
-
border:
|
|
3656
|
+
border: 0.0625rem solid var(--vidply-border);
|
|
3484
3657
|
border-radius: var(--vidply-radius-md);
|
|
3485
3658
|
box-shadow: var(--vidply-shadow-lg);
|
|
3486
3659
|
display: none;
|
|
3487
|
-
min-width:
|
|
3660
|
+
min-width: 15rem;
|
|
3488
3661
|
padding: var(--vidply-gap-sm);
|
|
3489
3662
|
position: absolute;
|
|
3490
3663
|
z-index: 100;
|
|
3491
3664
|
}
|
|
3492
3665
|
|
|
3493
3666
|
.vidply-sign-language-settings-menu::after {
|
|
3494
|
-
border-bottom:
|
|
3495
|
-
border-left:
|
|
3496
|
-
border-right:
|
|
3667
|
+
border-bottom: 0.375rem solid var(--vidply-bg-menu);
|
|
3668
|
+
border-left: 0.375rem solid transparent;
|
|
3669
|
+
border-right: 0.375rem solid transparent;
|
|
3497
3670
|
bottom: 100%;
|
|
3498
3671
|
content: '';
|
|
3499
3672
|
height: 0;
|
|
@@ -3504,7 +3677,7 @@
|
|
|
3504
3677
|
|
|
3505
3678
|
.vidply-sign-language-settings-menu.vidply-menu-above::after {
|
|
3506
3679
|
border-bottom: none;
|
|
3507
|
-
border-top:
|
|
3680
|
+
border-top: 0.375rem solid var(--vidply-bg-menu);
|
|
3508
3681
|
bottom: auto;
|
|
3509
3682
|
top: 100%;
|
|
3510
3683
|
}
|
|
@@ -3520,7 +3693,7 @@
|
|
|
3520
3693
|
display: flex;
|
|
3521
3694
|
font-size: var(--vidply-font-base);
|
|
3522
3695
|
gap: var(--vidply-gap-md);
|
|
3523
|
-
padding: var(--vidply-padding-md)
|
|
3696
|
+
padding: var(--vidply-padding-md) 0.625rem;
|
|
3524
3697
|
text-align: left;
|
|
3525
3698
|
transition: var(--vidply-transition-normal);
|
|
3526
3699
|
width: 100%;
|
|
@@ -3562,12 +3735,12 @@
|
|
|
3562
3735
|
color: var(--vidply-white);
|
|
3563
3736
|
font-size: var(--vidply-font-lg);
|
|
3564
3737
|
font-weight: 600;
|
|
3565
|
-
height:
|
|
3566
|
-
left: -
|
|
3738
|
+
height: 0.0625rem;
|
|
3739
|
+
left: -625rem;
|
|
3567
3740
|
margin: 0;
|
|
3568
3741
|
overflow: hidden;
|
|
3569
3742
|
position: absolute;
|
|
3570
|
-
width:
|
|
3743
|
+
width: 0.0625rem;
|
|
3571
3744
|
}
|
|
3572
3745
|
|
|
3573
3746
|
.vidply-sign-language-close {
|
|
@@ -3592,7 +3765,7 @@
|
|
|
3592
3765
|
|
|
3593
3766
|
.vidply-sign-language-close:focus {
|
|
3594
3767
|
outline: var(--vidply-focus-outline-white);
|
|
3595
|
-
outline-offset:
|
|
3768
|
+
outline-offset: 0.125rem;
|
|
3596
3769
|
}
|
|
3597
3770
|
|
|
3598
3771
|
.vidply-sign-language-close .vidply-icon {
|
|
@@ -3603,10 +3776,10 @@
|
|
|
3603
3776
|
/* Sign Language Video */
|
|
3604
3777
|
.vidply-sign-language-video {
|
|
3605
3778
|
background: var(--vidply-black);
|
|
3606
|
-
border:
|
|
3607
|
-
border-radius: 0 0
|
|
3779
|
+
border: 0.125rem solid var(--vidply-white-30);
|
|
3780
|
+
border-radius: 0 0 0.5rem 0.5rem;
|
|
3608
3781
|
border-top: none;
|
|
3609
|
-
box-shadow: 0
|
|
3782
|
+
box-shadow: 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3610
3783
|
cursor: default;
|
|
3611
3784
|
display: block;
|
|
3612
3785
|
height: auto;
|
|
@@ -3625,67 +3798,67 @@
|
|
|
3625
3798
|
.vidply-sign-resize-nw,
|
|
3626
3799
|
.vidply-sign-resize-se,
|
|
3627
3800
|
.vidply-sign-resize-sw {
|
|
3628
|
-
height:
|
|
3629
|
-
width:
|
|
3801
|
+
height: 1rem;
|
|
3802
|
+
width: 1rem;
|
|
3630
3803
|
}
|
|
3631
3804
|
|
|
3632
3805
|
.vidply-sign-resize-n,
|
|
3633
3806
|
.vidply-sign-resize-s {
|
|
3634
3807
|
cursor: ns-resize;
|
|
3635
|
-
height:
|
|
3636
|
-
left:
|
|
3637
|
-
right:
|
|
3808
|
+
height: 0.5rem;
|
|
3809
|
+
left: 1rem;
|
|
3810
|
+
right: 1rem;
|
|
3638
3811
|
}
|
|
3639
3812
|
|
|
3640
3813
|
.vidply-sign-resize-e,
|
|
3641
3814
|
.vidply-sign-resize-w {
|
|
3642
|
-
bottom:
|
|
3815
|
+
bottom: 1rem;
|
|
3643
3816
|
cursor: ew-resize;
|
|
3644
|
-
top:
|
|
3645
|
-
width:
|
|
3817
|
+
top: 1rem;
|
|
3818
|
+
width: 0.5rem;
|
|
3646
3819
|
}
|
|
3647
3820
|
|
|
3648
|
-
.vidply-sign-resize-n { top: -
|
|
3649
|
-
.vidply-sign-resize-s { bottom: -
|
|
3650
|
-
.vidply-sign-resize-e { right: -
|
|
3651
|
-
.vidply-sign-resize-w { left: -
|
|
3821
|
+
.vidply-sign-resize-n { top: -0.25rem; }
|
|
3822
|
+
.vidply-sign-resize-s { bottom: -0.25rem; }
|
|
3823
|
+
.vidply-sign-resize-e { right: -0.25rem; }
|
|
3824
|
+
.vidply-sign-resize-w { left: -0.25rem; }
|
|
3652
3825
|
|
|
3653
3826
|
.vidply-sign-resize-ne {
|
|
3654
3827
|
cursor: nesw-resize;
|
|
3655
|
-
right: -
|
|
3656
|
-
top: -
|
|
3828
|
+
right: -0.5rem;
|
|
3829
|
+
top: -0.5rem;
|
|
3657
3830
|
}
|
|
3658
3831
|
|
|
3659
3832
|
.vidply-sign-resize-nw {
|
|
3660
3833
|
cursor: nwse-resize;
|
|
3661
|
-
left: -
|
|
3662
|
-
top: -
|
|
3834
|
+
left: -0.5rem;
|
|
3835
|
+
top: -0.5rem;
|
|
3663
3836
|
}
|
|
3664
3837
|
|
|
3665
3838
|
.vidply-sign-resize-se {
|
|
3666
|
-
bottom: -
|
|
3839
|
+
bottom: -0.5rem;
|
|
3667
3840
|
cursor: nwse-resize;
|
|
3668
|
-
right: -
|
|
3841
|
+
right: -0.5rem;
|
|
3669
3842
|
}
|
|
3670
3843
|
|
|
3671
3844
|
.vidply-sign-resize-sw {
|
|
3672
|
-
bottom: -
|
|
3845
|
+
bottom: -0.5rem;
|
|
3673
3846
|
cursor: nesw-resize;
|
|
3674
|
-
left: -
|
|
3847
|
+
left: -0.5rem;
|
|
3675
3848
|
}
|
|
3676
3849
|
|
|
3677
3850
|
.vidply-sign-resizable .vidply-sign-resize-handle::after {
|
|
3678
3851
|
background: var(--vidply-primary-light);
|
|
3679
3852
|
border-radius: 50%;
|
|
3680
3853
|
content: '';
|
|
3681
|
-
height:
|
|
3854
|
+
height: 0.375rem;
|
|
3682
3855
|
left: 50%;
|
|
3683
3856
|
opacity: 0;
|
|
3684
3857
|
position: absolute;
|
|
3685
3858
|
top: 50%;
|
|
3686
3859
|
transform: translate(-50%, -50%);
|
|
3687
3860
|
transition: opacity 0.2s ease;
|
|
3688
|
-
width:
|
|
3861
|
+
width: 0.375rem;
|
|
3689
3862
|
}
|
|
3690
3863
|
|
|
3691
3864
|
.vidply-sign-resizable:hover .vidply-sign-resize-handle::after {
|
|
@@ -3711,36 +3884,36 @@
|
|
|
3711
3884
|
|
|
3712
3885
|
/* Move Mode */
|
|
3713
3886
|
.vidply-sign-move-mode {
|
|
3714
|
-
box-shadow: 0 0 0
|
|
3887
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3715
3888
|
}
|
|
3716
3889
|
|
|
3717
3890
|
/* Resizing State */
|
|
3718
3891
|
.vidply-sign-resizing {
|
|
3719
|
-
box-shadow: 0 0 0
|
|
3892
|
+
box-shadow: 0 0 0 0.125rem var(--vidply-primary-light), 0 0.625rem 2.5rem var(--vidply-black-60);
|
|
3720
3893
|
transition: none !important;
|
|
3721
3894
|
}
|
|
3722
3895
|
|
|
3723
3896
|
/* Keyboard Drag/Resize Modes */
|
|
3724
3897
|
.vidply-sign-keyboard-drag,
|
|
3725
3898
|
.vidply-sign-keyboard-resize {
|
|
3726
|
-
box-shadow: 0 0 0
|
|
3899
|
+
box-shadow: 0 0 0 0.1875rem var(--vidply-primary), 0 0.25rem 0.75rem var(--vidply-black-60);
|
|
3727
3900
|
}
|
|
3728
3901
|
|
|
3729
3902
|
.vidply-sign-keyboard-drag::after,
|
|
3730
3903
|
.vidply-sign-keyboard-resize::after {
|
|
3731
3904
|
align-items: center;
|
|
3732
3905
|
background: var(--vidply-primary);
|
|
3733
|
-
border-radius:
|
|
3906
|
+
border-radius: 0.25rem;
|
|
3734
3907
|
color: var(--vidply-white);
|
|
3735
3908
|
display: flex;
|
|
3736
|
-
font-size:
|
|
3909
|
+
font-size: 0.75rem;
|
|
3737
3910
|
font-weight: 600;
|
|
3738
3911
|
justify-content: center;
|
|
3739
3912
|
left: 50%;
|
|
3740
|
-
padding:
|
|
3913
|
+
padding: 0.25rem 0.5rem;
|
|
3741
3914
|
pointer-events: none;
|
|
3742
3915
|
position: absolute;
|
|
3743
|
-
top: -
|
|
3916
|
+
top: -1.75rem;
|
|
3744
3917
|
transform: translateX(-50%);
|
|
3745
3918
|
white-space: nowrap;
|
|
3746
3919
|
z-index: 10;
|
|
@@ -3756,48 +3929,48 @@
|
|
|
3756
3929
|
|
|
3757
3930
|
/* Sign Language Video Positions */
|
|
3758
3931
|
.vidply-sign-position-bottom-right {
|
|
3759
|
-
bottom:
|
|
3760
|
-
right:
|
|
3932
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3933
|
+
right: 1rem;
|
|
3761
3934
|
}
|
|
3762
3935
|
|
|
3763
3936
|
.vidply-sign-position-bottom-left {
|
|
3764
|
-
bottom:
|
|
3765
|
-
left:
|
|
3937
|
+
bottom: 5.9375rem; /* Above controls */
|
|
3938
|
+
left: 1rem;
|
|
3766
3939
|
}
|
|
3767
3940
|
|
|
3768
3941
|
.vidply-sign-position-top-right {
|
|
3769
|
-
right:
|
|
3770
|
-
top:
|
|
3942
|
+
right: 1rem;
|
|
3943
|
+
top: 1rem;
|
|
3771
3944
|
}
|
|
3772
3945
|
|
|
3773
3946
|
.vidply-sign-position-top-left {
|
|
3774
|
-
left:
|
|
3775
|
-
top:
|
|
3947
|
+
left: 1rem;
|
|
3948
|
+
top: 1rem;
|
|
3776
3949
|
}
|
|
3777
3950
|
|
|
3778
3951
|
/* Responsive Sign Language Video */
|
|
3779
|
-
@media (width <
|
|
3952
|
+
@media (width < 48rem) {
|
|
3780
3953
|
.vidply-sign-language-wrapper {
|
|
3781
|
-
min-width:
|
|
3954
|
+
min-width: 7.5rem;
|
|
3782
3955
|
width: 35%;
|
|
3783
3956
|
}
|
|
3784
3957
|
|
|
3785
3958
|
.vidply-sign-position-bottom-right,
|
|
3786
3959
|
.vidply-sign-position-bottom-left {
|
|
3787
|
-
bottom:
|
|
3960
|
+
bottom: 7.875rem !important; /* Adjust for smaller controls */
|
|
3788
3961
|
}
|
|
3789
3962
|
}
|
|
3790
3963
|
|
|
3791
3964
|
/* Responsive Adjustments */
|
|
3792
|
-
@media (width <
|
|
3965
|
+
@media (width < 48rem) {
|
|
3793
3966
|
.vidply-playlist-thumbnail {
|
|
3794
|
-
height:
|
|
3795
|
-
width:
|
|
3967
|
+
height: 2.125rem;
|
|
3968
|
+
width: 3.75rem;
|
|
3796
3969
|
}
|
|
3797
3970
|
|
|
3798
3971
|
.vidply-playlist-item {
|
|
3799
|
-
gap:
|
|
3800
|
-
padding:
|
|
3972
|
+
gap: 0.625rem;
|
|
3973
|
+
padding: 0.625rem 0.75rem;
|
|
3801
3974
|
}
|
|
3802
3975
|
|
|
3803
3976
|
.vidply-track-artwork {
|
|
@@ -3805,19 +3978,19 @@
|
|
|
3805
3978
|
}
|
|
3806
3979
|
|
|
3807
3980
|
.vidply-track-info {
|
|
3808
|
-
padding:
|
|
3981
|
+
padding: 0.75rem 1rem;
|
|
3809
3982
|
}
|
|
3810
3983
|
|
|
3811
3984
|
.vidply-track-title {
|
|
3812
|
-
font-size:
|
|
3985
|
+
font-size: 1rem;
|
|
3813
3986
|
}
|
|
3814
3987
|
|
|
3815
3988
|
/* Mobile fullscreen playlist - horizontal scrolling directly above controls */
|
|
3816
3989
|
.vidply-player.vidply-fullscreen .vidply-playlist-panel,
|
|
3817
3990
|
.vidply-player:fullscreen .vidply-playlist-panel {
|
|
3818
|
-
bottom:
|
|
3991
|
+
bottom: 6.25rem; /* Directly above controls with extra space */
|
|
3819
3992
|
max-height: 35vh; /* Compact height */
|
|
3820
|
-
padding:
|
|
3993
|
+
padding: 0.75rem 0; /* Vertical padding only */
|
|
3821
3994
|
overflow-y: hidden; /* No vertical scrolling */
|
|
3822
3995
|
overflow-x: auto; /* Horizontal scrolling */
|
|
3823
3996
|
position: absolute !important; /* Force absolute over video */
|
|
@@ -3830,8 +4003,8 @@
|
|
|
3830
4003
|
.vidply-player:fullscreen .vidply-playlist-list {
|
|
3831
4004
|
flex-direction: row; /* Items side by side */
|
|
3832
4005
|
flex-wrap: nowrap; /* Never wrap */
|
|
3833
|
-
gap:
|
|
3834
|
-
padding: 0
|
|
4006
|
+
gap: 0.5rem;
|
|
4007
|
+
padding: 0 0.75rem;
|
|
3835
4008
|
-webkit-overflow-scrolling: touch;
|
|
3836
4009
|
scroll-behavior: smooth;
|
|
3837
4010
|
touch-action: pan-x; /* Ensure horizontal swipe gestures work */
|
|
@@ -3840,9 +4013,9 @@
|
|
|
3840
4013
|
/* Mobile playlist items - only show thumbnails */
|
|
3841
4014
|
.vidply-player.vidply-fullscreen .vidply-playlist-item,
|
|
3842
4015
|
.vidply-player:fullscreen .vidply-playlist-item {
|
|
3843
|
-
width:
|
|
3844
|
-
min-width:
|
|
3845
|
-
max-width:
|
|
4016
|
+
width: 7.5rem; /* Smaller width for thumbnail-only */
|
|
4017
|
+
min-width: 7.5rem;
|
|
4018
|
+
max-width: 7.5rem;
|
|
3846
4019
|
flex-shrink: 0; /* Don't shrink */
|
|
3847
4020
|
scroll-snap-align: start;
|
|
3848
4021
|
}
|
|
@@ -3856,10 +4029,10 @@
|
|
|
3856
4029
|
|
|
3857
4030
|
.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
|
|
3858
4031
|
.vidply-player:fullscreen .vidply-playlist-thumbnail {
|
|
3859
|
-
height:
|
|
4032
|
+
height: 5.625rem; /* Square-ish thumbnail */
|
|
3860
4033
|
width: 100%; /* Full width of card */
|
|
3861
4034
|
flex-shrink: 0;
|
|
3862
|
-
border-radius:
|
|
4035
|
+
border-radius: 0.5rem; /* Fully rounded for thumbnail-only */
|
|
3863
4036
|
}
|
|
3864
4037
|
|
|
3865
4038
|
/* Hide text info on mobile - show only thumbnails */
|
|
@@ -3873,28 +4046,28 @@
|
|
|
3873
4046
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-info {
|
|
3874
4047
|
display: flex;
|
|
3875
4048
|
flex-direction: column;
|
|
3876
|
-
padding:
|
|
4049
|
+
padding: 0.5rem;
|
|
3877
4050
|
justify-content: center;
|
|
3878
4051
|
align-items: center;
|
|
3879
4052
|
text-align: center;
|
|
3880
|
-
height:
|
|
4053
|
+
height: 5.625rem;
|
|
3881
4054
|
}
|
|
3882
4055
|
|
|
3883
4056
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title,
|
|
3884
4057
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-title {
|
|
3885
|
-
font-size:
|
|
4058
|
+
font-size: 0.6875rem;
|
|
3886
4059
|
-webkit-line-clamp: 3;
|
|
3887
4060
|
}
|
|
3888
4061
|
|
|
3889
4062
|
.vidply-player.vidply-fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist,
|
|
3890
4063
|
.vidply-player:fullscreen .vidply-playlist-item:not(:has(.vidply-playlist-thumbnail)) .vidply-playlist-item-artist {
|
|
3891
|
-
font-size:
|
|
4064
|
+
font-size: 0.5625rem;
|
|
3892
4065
|
}
|
|
3893
4066
|
|
|
3894
4067
|
.vidply-player.vidply-fullscreen .vidply-playlist-header,
|
|
3895
4068
|
.vidply-player:fullscreen .vidply-playlist-header {
|
|
3896
|
-
padding: 0
|
|
3897
|
-
font-size:
|
|
4069
|
+
padding: 0 0.75rem 0.5rem;
|
|
4070
|
+
font-size: 0.6875rem;
|
|
3898
4071
|
flex-shrink: 0;
|
|
3899
4072
|
}
|
|
3900
4073
|
|
|
@@ -3902,9 +4075,9 @@
|
|
|
3902
4075
|
.vidply-transcript-window {
|
|
3903
4076
|
border: none;
|
|
3904
4077
|
border-radius: 0;
|
|
3905
|
-
border-top:
|
|
4078
|
+
border-top: 0.0625rem solid var(--vidply-border-light);
|
|
3906
4079
|
box-shadow: none;
|
|
3907
|
-
min-width:
|
|
4080
|
+
min-width: 18.75rem;
|
|
3908
4081
|
order: 3; /* After controls (which are order: 2) */
|
|
3909
4082
|
position: relative;
|
|
3910
4083
|
width: 100%;
|
|
@@ -3913,11 +4086,11 @@
|
|
|
3913
4086
|
|
|
3914
4087
|
.vidply-transcript-header {
|
|
3915
4088
|
border-radius: 0;
|
|
3916
|
-
padding:
|
|
4089
|
+
padding: 0.75rem 1rem;
|
|
3917
4090
|
}
|
|
3918
4091
|
|
|
3919
4092
|
.vidply-transcript-content {
|
|
3920
|
-
max-height:
|
|
4093
|
+
max-height: 25rem;
|
|
3921
4094
|
}
|
|
3922
4095
|
|
|
3923
4096
|
/* Don't show dragging cursor on mobile (except in fullscreen) */
|