vidply 1.0.9 → 1.0.10
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 +47 -14
- package/dist/vidply.esm.js +1063 -663
- package/dist/vidply.esm.js.map +3 -3
- package/dist/vidply.esm.min.js +3 -3
- package/dist/vidply.esm.min.meta.json +28 -10
- package/dist/vidply.js +1063 -663
- package/dist/vidply.js.map +3 -3
- package/dist/vidply.min.css +1 -1
- package/dist/vidply.min.js +3 -3
- package/dist/vidply.min.meta.json +27 -9
- package/package.json +1 -1
- package/src/controls/ControlBar.js +24 -14
- package/src/controls/TranscriptManager.js +344 -578
- package/src/core/Player.js +150 -276
- package/src/i18n/translations.js +50 -5
- package/src/styles/vidply.css +47 -14
- package/src/utils/DraggableResizable.js +771 -0
package/dist/vidply.min.css
CHANGED
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
* (c) 2025 Matthias Peltzer
|
|
4
4
|
* Released under GPL-2.0-or-later License
|
|
5
5
|
*/
|
|
6
|
-
:root{--vidply-active-bg:var(--vidply-white-05);--vidply-bg-caption:var(--vidply-black-80);--vidply-bg-controls:linear-gradient(180deg, rgb(var(--vidply-black-rgb), 0) 0%, rgb(var(--vidply-black-rgb), 0.9) 100%);--vidply-bg-dialog:rgb(20 20 20 / 98%);--vidply-bg-dialog-dark:rgb(18 18 18 / 98%);--vidply-bg-menu:rgb(20 20 20 / 98%);--vidply-bg-menu-rgb:20,20,20;--vidply-bg-overlay:var(--vidply-black-80);--vidply-bg-playlist:#1a1a1a;--vidply-bg-playlist-header:var(--vidply-black-40);--vidply-bg-track-info:linear-gradient(180deg, var(--vidply-black-80) 0%, var(--vidply-black-60) 100%);--vidply-bg-transcript:rgb(30 30 30 / 98%);--vidply-black:#000;--vidply-black-30:rgb(var(--vidply-black-rgb), 0.3);--vidply-black-40:rgb(var(--vidply-black-rgb), 0.4);--vidply-black-50:rgb(var(--vidply-black-rgb), 0.5);--vidply-black-60:rgb(var(--vidply-black-rgb), 0.6);--vidply-black-80:rgb(var(--vidply-black-rgb), 0.8);--vidply-black-90:rgb(var(--vidply-black-rgb), 0.9);--vidply-black-98:rgb(var(--vidply-black-rgb), 0.98);--vidply-black-rgb:0,0,0;--vidply-border:var(--vidply-white-15);--vidply-border-focus:var(--vidply-primary);--vidply-border-hover:var(--vidply-white-30);--vidply-border-light:var(--vidply-white-10);--vidply-focus-outline:2px solid var(--vidply-primary);--vidply-focus-outline-white:2px solid var(--vidply-primary-light);--vidply-focus-outline-player:3px solid var(--vidply-primary-light);--vidply-hover-bg:var(--vidply-white-10);--vidply-scrollbar-thumb:var(--vidply-white);--vidply-scrollbar-thumb-hover:var(--vidply-white-90);--vidply-scrollbar-track:#404040;--vidply-scrollbar-track-transcript:#555555;--vidply-transition-default:all 0.2s ease;--vidply-primary:#0a406e;--vidply-primary-10:rgb(var(--vidply-primary-rgb), 0.1);--vidply-primary-15:rgb(var(--vidply-primary-rgb), 0.15);--vidply-primary-20:rgb(var(--vidply-primary-rgb), 0.2);--vidply-primary-25:rgb(var(--vidply-primary-rgb), 0.25);--vidply-primary-30:rgb(var(--vidply-primary-rgb), 0.3);--vidply-primary-40:rgb(var(--vidply-primary-rgb), 0.4);--vidply-primary-50:rgb(var(--vidply-primary-rgb), 0.5);--vidply-primary-60:rgb(var(--vidply-primary-rgb), 0.6);--vidply-primary-70:rgb(var(--vidply-primary-rgb), 0.7);--vidply-primary-80:rgb(var(--vidply-primary-rgb), 0.8);--vidply-primary-dark:#083358;--vidply-primary-dark-rgb:8,51,88;--vidply-primary-light:#71b7e2;--vidply-primary-rgb:10,64,110;--vidply-shadow-lg:0 12px 48px var(--vidply-black-80);--vidply-shadow-md:0 4px 12px var(--vidply-black-40);--vidply-shadow-sm:0 2px 4px var(--vidply-black-30);--vidply-text-disabled:var(--vidply-white-60);--vidply-text-muted:var(--vidply-white-70);--vidply-text-primary:var(--vidply-white);--vidply-text-secondary:var(--vidply-white-90);--vidply-text-subtle:var(--vidply-white-50);--vidply-white:#fff;--vidply-white-05:rgb(var(--vidply-white-rgb), 0.05);--vidply-white-08:rgb(var(--vidply-white-rgb), 0.08);--vidply-white-10:rgb(var(--vidply-white-rgb), 0.1);--vidply-white-15:rgb(var(--vidply-white-rgb), 0.15);--vidply-white-20:rgb(var(--vidply-white-rgb), 0.2);--vidply-white-25:rgb(var(--vidply-white-rgb), 0.25);--vidply-white-30:rgb(var(--vidply-white-rgb), 0.3);--vidply-white-40:rgb(var(--vidply-white-rgb), 0.4);--vidply-white-50:rgb(var(--vidply-white-rgb), 0.5);--vidply-white-60:rgb(var(--vidply-white-rgb), 0.6);--vidply-white-70:rgb(var(--vidply-white-rgb), 0.7);--vidply-white-80:rgb(var(--vidply-white-rgb), 0.8);--vidply-white-90:rgb(var(--vidply-white-rgb), 0.9);--vidply-white-95:rgb(var(--vidply-white-rgb), 0.95);--vidply-white-rgb:255,255,255}.vidply-player{background:var(--vidply-black);box-sizing:border-box;color:var(--vidply-text-primary);contain:layout style;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;max-width:100%;overflow:visible;position:relative;text-size-adjust:100%;width:100%}.vidply-player:focus{outline:0}.vidply-player:focus-visible{outline:var(--vidply-focus-outline-player);outline-offset:4px}.vidply-player *,.vidply-player ::after,.vidply-player ::before{box-sizing:inherit}.vidply-player.vidply-audio{aspect-ratio:auto;background:linear-gradient(135deg,var(--vidply-primary-20) 0,rgb(var(--vidply-primary-dark-rgb),.2) 100%);height:auto}.vidply-player audio,.vidply-player video{display:block;height:100%;object-fit:contain;width:100%}@media (width <= 640px){.vidply-player{isolation:isolate;overflow:visible}.vidply-player audio,.vidply-player video{flex:0 0 auto;height:auto;order:1}}.vidply-player video::cue{display:none}.vidply-player video::-webkit-media-text-track-container{display:none!important}.vidply-player video::-webkit-media-text-track-display{display:none!important}.vidply-video-wrapper{background:linear-gradient(135deg,var(--vidply-black) 0,#2a2a2a 100%);height:100%;order:1;overflow:hidden;position:relative;width:100%;z-index:1}.vidply-player.vidply-audio .vidply-video-wrapper{overflow:visible}.vidply-player.vidply-audio .vidply-fullscreen{display:none}.vidply-play-overlay{cursor:pointer;filter:drop-shadow(0 8px 32px rgb(0 0 0 / 30%));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s cubic-bezier(.4, 0, .2, 1);z-index:2}.vidply-play-overlay:hover{filter:drop-shadow(0 12px 48px rgb(0 0 0 / 40%));transform:translate(-50%,-50%) scale(1.1)}.vidply-play-overlay:hover .vidply-play-overlay-bg{fill:rgb(255 255 255 / 100%)}.vidply-play-overlay:active{transform:translate(-50%,-50%) scale(.95)}.vidply-player.vidply-audio .vidply-play-overlay{display:none}.vidply-controls{background:linear-gradient(to top,var(--vidply-black-90) 0,var(--vidply-black-50) 100%);bottom:0;left:0;opacity:0;overflow:visible;padding:20px 16px 16px;pointer-events:none;position:absolute;right:0;transition:opacity .3s;z-index:10}.vidply-controls.vidply-controls-visible,.vidply-player.vidply-paused .vidply-controls,.vidply-player:hover .vidply-controls{opacity:1;pointer-events:auto}.vidply-audio .vidply-controls{background:var(--vidply-black-50);opacity:1;pointer-events:auto;position:relative}@media (width <= 640px){.vidply-video-wrapper{display:block;height:auto;overflow:visible}.vidply-controls{background:var(--vidply-black-90);border-top:1px solid var(--vidply-border-light);bottom:auto;left:0;opacity:1;order:2;padding:12px;pointer-events:auto;position:relative;right:0;width:100%;z-index:10}.vidply-controls-buttons,.vidply-controls-left,.vidply-controls-right{position:relative}}.vidply-progress-container{background:var(--vidply-white-20);border-radius:3px;cursor:pointer;height:5px;margin-bottom:12px;position:relative;transition:height .2s;width:100%}.vidply-progress-container:focus,.vidply-progress-container:hover{height:8px;outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-progress-buffered{background:var(--vidply-white-40);border-radius:3px;height:100%;left:0;position:absolute;top:0;transition:width .2s;width:0}.vidply-progress-played{background:var(--vidply-primary-light);border-radius:3px;height:100%;left:0;position:absolute;top:0;transition:width .1s linear;width:0}.vidply-progress-handle{background:var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);height:12px;opacity:0;position:absolute;right:-6px;top:50%;transform:translateY(-50%);transition:opacity .2s;width:12px}.vidply-progress-container:focus .vidply-progress-handle,.vidply-progress-container:hover .vidply-progress-handle{opacity:1}.vidply-progress-tooltip{background:var(--vidply-black-90);border-radius:4px;bottom:12px;color:var(--vidply-white);display:none;font-size:12px;padding:4px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap}.vidply-controls-buttons{align-items:center;display:flex;gap:8px;justify-content:space-between}.vidply-controls-left,.vidply-controls-right{align-items:center;display:flex;gap:8px;overflow:visible;position:relative}.vidply-button{align-items:center;background:0 0;border:none;border-radius:4px;color:var(--vidply-white);cursor:pointer;display:inline-flex;justify-content:center;min-height:32px;min-width:32px;padding:6px;position:relative;transition:background-color .2s,transform .1s}.vidply-button:hover{background:var(--vidply-hover-bg)}.vidply-button:active{transform:scale(.95)}.vidply-button:focus{outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-button:disabled{cursor:not-allowed;opacity:.5}.vidply-icon{display:inline-block;fill:currentcolor;height:26px;width:26px}.vidply-icon svg{display:block;height:100%;width:100%}.vidply-volume-slider{background:var(--vidply-white-20);border-radius:3px;cursor:pointer;height:100px;margin:0 auto;position:relative;width:6px}.vidply-volume-slider:focus{outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-volume-track{height:100%;position:relative;width:100%}.vidply-volume-fill{background:var(--vidply-primary-light);border-radius:2px;bottom:0;height:80%;left:0;position:absolute;transition:height .1s;width:100%}.vidply-volume-handle{background:var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);height:10px;left:50%;position:absolute;top:-4px;transform:translateX(-50%);width:10px}.vidply-time{align-items:center;color:#fff;display:flex;font-size:13px;font-variant-numeric:tabular-nums;gap:4px;padding:0 4px;user-select:none}.vidply-speed{gap:4px}.vidply-speed-text{font-size:12px;min-width:28px;text-align:center}.vidply-menu-backdrop{animation:.2s fadeIn;background:rgb(0 0 0 / 50%);bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:19}.vidply-menu-backdrop.visible{display:block}@media (width <= 640px){.vidply-menu-backdrop{display:none!important}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.vidply-menu{backdrop-filter:blur(10px);background:var(--vidply-bg-menu);border:1px solid var(--vidply-border);border-radius:8px;bottom:calc(100% + 8px);box-shadow:var(--vidply-shadow-lg),0 0 0 1px var(--vidply-white-10);max-height:250px;min-width:200px;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:8px 0;position:absolute;right:50%;touch-action:pan-y;transform:translateX(50%);z-index:20}.vidply-menu.vidply-menu-below::after{border-bottom:6px solid var(--vidply-bg-menu);border-top:none;bottom:auto;top:-6px}.vidply-menu::after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--vidply-bg-menu);bottom:-6px;content:'';height:0;position:absolute;right:50%;transform:translateX(50%);width:0}.vidply-volume-menu{min-width:50px;overflow-y:hidden;padding:16px 12px;width:50px}.vidply-player.vidply-audio .vidply-menu{max-height:150px;bottom:auto;top:calc(100% + 8px)}.vidply-player.vidply-audio .vidply-menu::after{border-bottom:6px solid var(--vidply-bg-menu);border-top:none;bottom:auto;top:-6px}.vidply-menu-item{align-items:center;background:0 0;border:none;color:var(--vidply-white);cursor:pointer;display:flex;font-size:14px;font-weight:400;justify-content:space-between;padding:12px 16px;text-align:left;transition:background-color .15s,color .15s;white-space:nowrap;width:100%}.vidply-menu-item:hover{background:var(--vidply-primary-20);color:var(--vidply-white)}.vidply-menu-item:focus{background:var(--vidply-primary-25);color:var(--vidply-white);outline:0}.vidply-menu-item:active{background:var(--vidply-primary-30)}.vidply-captions-menu .vidply-menu-item:focus,.vidply-captions-menu .vidply-menu-item:hover,.vidply-menu-item:focus .vidply-chapter-title,.vidply-menu-item:hover .vidply-chapter-title,.vidply-speed-menu .vidply-menu-item:focus,.vidply-speed-menu .vidply-menu-item:hover{text-decoration:underline}.vidply-menu-item-active{background:var(--vidply-primary-15);color:var(--vidply-primary-light)}.vidply-menu-item-active .vidply-icon{color:var(--vidply-primary-light);height:20px;width:20px}.vidply-menu-item-with-value{align-items:center;display:flex;gap:20px;justify-content:space-between}.vidply-menu-item-label{align-items:center;display:flex;flex:1;gap:10px}.vidply-menu-item-label .vidply-icon{height:24px;opacity:.9;width:24px}.vidply-menu-item-value{background:var(--vidply-white-10);border-radius:4px;color:var(--vidply-text-muted);font-size:13px;font-weight:500;padding:2px 8px;white-space:nowrap}.vidply-chapter-time{color:var(--vidply-text-muted);display:inline-block;font-family:'Courier New',monospace;font-size:13px;font-weight:500;margin-right:12px;min-width:60px}.vidply-chapter-title{color:var(--vidply-white-95);flex:1}.vidply-caption-style-menu.vidply-settings-menu{background:var(--vidply-bg-menu);padding:16px}.vidply-style-group{margin-bottom:16px}.vidply-style-group:last-child{margin-bottom:0}.vidply-style-group label{font-weight:500;letter-spacing:.01em}.vidply-style-group input[type=color],.vidply-style-group input[type=range],.vidply-style-select{-webkit-appearance:none;appearance:none}.vidply-style-select{outline:0;transition:border-color .2s,background .2s}.vidply-style-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-style-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-border-focus)}.vidply-style-group input[type=color]{outline:0;transition:border-color .2s}.vidply-style-group input[type=color]:hover{border-color:var(--vidply-border-hover)}.vidply-style-group input[type=color]:focus{border-color:var(--vidply-border-focus)}.vidply-style-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--vidply-primary);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:transform .15s,background .15s;width:16px}.vidply-style-group input[type=range]::-webkit-slider-thumb:hover{background:var(--vidply-primary-80);transform:scale(1.15)}.vidply-style-group input[type=range]::-moz-range-thumb{background:var(--vidply-primary);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:transform .15s,background .15s;width:16px}.vidply-style-group input[type=range]::-moz-range-thumb:hover{background:var(--vidply-primary-80);transform:scale(1.15)}.vidply-style-group input[type=range]::-webkit-slider-runnable-track{background:var(--vidply-white-20);border-radius:3px;height:6px;width:100%}.vidply-style-group input[type=range]::-moz-range-track{background:var(--vidply-white-20);border-radius:3px;height:6px;width:100%}.vidply-captions{background:var(--vidply-bg-caption);border-radius:4px;bottom:16px;color:var(--vidply-white);display:none;font-family:sans-serif;font-size:100%;left:50%;line-height:1.4;max-width:90%;padding:8px 16px;pointer-events:none;position:absolute;text-align:center;transform:translateX(-50%);transition:bottom .3s;z-index:4}.vidply-audio .vidply-captions{bottom:auto;top:-42px}.vidply-captions:empty{display:none}@media (width >= 641px){.vidply-controls-visible .vidply-captions{bottom:96px}}@media (width <= 640px){.vidply-captions{bottom:122px}}.vidply-settings-overlay{align-items:center;animation:.2s vidply-fade-in;backdrop-filter:blur(8px);background:var(--vidply-bg-overlay);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}@keyframes vidply-fade-in{from{opacity:0}to{opacity:1}}.vidply-settings-dialog{animation:.3s vidply-slide-up;background:var(--vidply-bg-dialog);border:1px solid var(--vidply-border);border-radius:12px;box-shadow:var(--vidply-shadow-lg);max-height:80%;max-width:500px;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:24px;touch-action:pan-y;width:90%}@keyframes vidply-slide-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.vidply-settings-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.vidply-settings-header h2{color:var(--vidply-white);font-size:20px;font-weight:600;margin:0}.vidply-settings-close{min-height:auto;min-width:auto;padding:4px}.vidply-settings-content{display:flex;flex-direction:column;gap:20px}.vidply-settings-section{display:flex;flex-direction:column;gap:12px}.vidply-settings-section h3{color:var(--vidply-white);font-size:16px;font-weight:600;margin:0}.vidply-settings-section label{color:var(--vidply-white-90);display:block;font-size:14px;margin-bottom:4px}.vidply-settings-color,.vidply-settings-range,.vidply-settings-select{background:var(--vidply-white-10);border:1px solid var(--vidply-white-20);border-radius:6px;color:var(--vidply-white);font-size:14px;padding:8px 12px;transition:border-color .2s,background .2s;width:100%}.vidply-settings-select option{background:#fff;color:#000}.vidply-settings-color:hover,.vidply-settings-range:hover,.vidply-settings-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-settings-color:focus,.vidply-settings-range:focus,.vidply-settings-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-border-focus);box-shadow:0 0 0 3px var(--vidply-primary-20);outline:0}.vidply-settings-control{display:flex;flex-direction:column;gap:8px}.vidply-settings-value{color:var(--vidply-text-muted);display:inline-block;font-size:13px;min-width:40px;text-align:right}.vidply-settings-footer{border-top:1px solid var(--vidply-white-10);display:flex;justify-content:flex-end;margin-top:20px;padding-top:20px}.vidply-settings-footer .vidply-button{background:var(--vidply-white-10);border-radius:6px;min-width:auto;padding:10px 20px}.vidply-settings-footer .vidply-button:hover{background:var(--vidply-white-20)}.vidply-player.vidply-fullscreen,.vidply-player:fullscreen{height:100vh;max-width:none;width:100vw}.vidply-player.vidply-fullscreen .vidply-transcript-window,.vidply-player:fullscreen .vidply-transcript-window{bottom:80px!important;height:auto!important;left:auto!important;max-height:calc(100vh - 180px)!important;max-width:400px;position:fixed!important;right:20px!important;top:auto!important;width:400px}.vidply-loading{display:none;height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:50px}.vidply-player.vidply-buffering .vidply-loading{display:block}.vidply-loading::after{animation:.8s linear infinite vidply-spin;border:4px solid var(--vidply-white-20);border-radius:50%;border-top-color:var(--vidply-white);content:'';display:block;height:100%;width:100%}@keyframes vidply-spin{to{transform:rotate(360deg)}}.vidply-sr-only{height:1px;left:-10000px;overflow:hidden;position:absolute;width:1px}@media (prefers-contrast:high){.vidply-controls{background:var(--vidply-black)}.vidply-button:focus{outline:solid 3px}.vidply-progress-played{background:currentcolor}}@media (prefers-reduced-motion:reduce){.vidply-player *,.vidply-player ::after,.vidply-player ::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}@media (prefers-color-scheme:dark){.vidply-settings-dialog{background:var(--vidply-bg-dialog-dark)}}@media (hover:none) and (pointer:coarse){.vidply-button{min-height:48px;min-width:48px}.vidply-progress-container{height:10px}.vidply-menu-item{font-size:16px;padding:16px 20px}}@media (width <= 640px){.vidply-controls{padding:16px 12px 12px}.vidply-time{font-size:11px}.vidply-speed-text{display:none}.vidply-settings-dialog{animation:.3s slideUpFromBottom;border-radius:16px 16px 0 0;bottom:0;margin:0;max-height:90vh;max-width:100%;padding:20px;position:fixed;top:auto;width:100%}.vidply-settings-overlay{align-items:flex-end}.vidply-menu{border-radius:8px;bottom:calc(100% + 4px);left:50%;max-height:250px;min-width:200px;position:absolute;right:auto;top:auto;transform:translateX(-50%);width:auto;z-index:15}.vidply-menu::after{border-bottom:6px solid var(--vidply-bg-menu);border-left:6px solid transparent;border-right:6px solid transparent;border-top:none;bottom:-6px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.vidply-menu::before{display:none}.vidply-caption-style-menu.vidply-settings-menu{left:50%;max-width:calc(100vw - 40px);min-width:280px;padding:16px;transform:translateX(-50%);width:auto}.vidply-style-group{margin-bottom:20px}.vidply-style-group label{font-size:14px;margin-bottom:8px}.vidply-style-group input[type=color],.vidply-style-select{font-size:16px;padding:12px}.vidply-controls-buttons{flex-direction:column;gap:8px;width:100%}.vidply-controls-left,.vidply-controls-right{flex-wrap:wrap;justify-content:center;width:100%;gap:4px}.vidply-button{min-height:36px;min-width:36px;padding:5px}.vidply-icon{height:22px;width:22px}}@keyframes slideUpFromBottom{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (width <= 896px) and (orientation:landscape){.vidply-menu{max-height:50vh}.vidply-transcript-window{max-height:70vh}.vidply-settings-dialog{max-height:80vh}}@media (width <= 480px){.vidply-speed-text{display:none}.vidply-button{min-height:32px;min-width:32px;padding:4px}.vidply-icon{height:20px;width:20px}}.vidply-player :focus-visible,.vidply-player [role=button]:hover,.vidply-player [role=link]:hover,.vidply-player [tabindex]:not([tabindex="-1"]):hover,.vidply-player a:hover,.vidply-player button:hover,.vidply-player input:hover,.vidply-player select:hover,.vidply-player textarea:hover{outline:var(--vidply-focus-outline-white);outline-offset:2px}@media print{.vidply-controls{display:none}}.vidply-track-info{background:var(--vidply-bg-track-info);border-bottom:1px solid var(--vidply-border-light);order:2;padding:16px 20px}.vidply-track-number{color:var(--vidply-text-muted);font-size:12px;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.vidply-track-title{color:var(--vidply-white);font-size:18px;font-weight:600;margin-bottom:4px}.vidply-track-artist{color:var(--vidply-white-80);font-size:14px}.vidply-playlist-panel{background:var(--vidply-bg-playlist);border-top:1px solid var(--vidply-border-light);max-height:400px;order:3;-webkit-overflow-scrolling:touch;overflow-y:auto;touch-action:pan-y;scrollbar-color:var(--vidply-scrollbar-thumb) var(--vidply-scrollbar-track);scrollbar-width:thin}.vidply-playlist-header{background:var(--vidply-bg-playlist-header);border-bottom:1px solid var(--vidply-border-light);color:var(--vidply-white-90);font-size:13px;font-weight:600;letter-spacing:.5px;padding:12px 16px;position:sticky;text-transform:uppercase;top:0;z-index:2}.vidply-playlist-list{list-style:none;margin:0;padding:4px 0}.vidply-playlist-item{align-items:center;background:0 0;border-left:3px solid transparent;cursor:pointer;display:flex;gap:12px;padding:12px 16px;position:relative;transition:var(--vidply-transition-default)}.vidply-playlist-item:hover{background:var(--vidply-active-bg);border-left-color:var(--vidply-primary-50)}.vidply-playlist-item:focus{background:var(--vidply-white-08);border-left-color:var(--vidply-primary);outline:0;z-index:1}.vidply-playlist-item:focus-visible{background:var(--vidply-white-08);border-left-color:var(--vidply-primary);outline:var(--vidply-focus-outline-white);outline-offset:-2px;z-index:1}.vidply-playlist-item-active{background:var(--vidply-primary-15);border-left-color:var(--vidply-primary)}.vidply-playlist-item-active:hover{background:var(--vidply-primary-20)}.vidply-playlist-item-active:focus{background:var(--vidply-primary-20);outline:0}.vidply-playlist-item-active:focus-visible{background:var(--vidply-primary-20);outline:var(--vidply-focus-outline-white);outline-offset:-2px}.vidply-playlist-thumbnail{align-items:center;background-color:var(--vidply-white-10);background-position:center;background-size:cover;border-radius:4px;display:flex;flex-shrink:0;height:45px;justify-content:center;overflow:hidden;width:80px}.vidply-playlist-thumbnail-icon{color:var(--vidply-text-subtle);height:32px;transition:var(--vidply-transition-default);width:32px}.vidply-playlist-item:hover .vidply-playlist-thumbnail-icon{color:var(--vidply-text-muted);transform:scale(1.1)}.vidply-playlist-item-active .vidply-playlist-thumbnail-icon{color:var(--vidply-primary-light)}.vidply-playlist-item-info{flex:1;min-width:0}.vidply-playlist-item-title{color:var(--vidply-white);font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vidply-playlist-item-active .vidply-playlist-item-title{color:var(--vidply-primary-light)}.vidply-playlist-item-artist{color:var(--vidply-text-disabled);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vidply-playlist-item-icon{flex-shrink:0;height:20px;opacity:0;transition:opacity .2s;width:20px}.vidply-playlist-item-active .vidply-playlist-item-icon,.vidply-playlist-item:hover .vidply-playlist-item-icon{opacity:.7}.vidply-playlist-item-active .vidply-playlist-item-icon{color:var(--vidply-primary-light);opacity:1}.vidply-playlist-panel::-webkit-scrollbar{width:8px}.vidply-playlist-panel::-webkit-scrollbar-track{background:var(--vidply-scrollbar-track)}.vidply-playlist-panel::-webkit-scrollbar-thumb{background:var(--vidply-scrollbar-thumb);border-radius:4px}.vidply-playlist-panel::-webkit-scrollbar-thumb:hover{background:var(--vidply-scrollbar-thumb-hover)}.vidply-player.vidply-audio.vidply-has-playlist{min-height:200px}.vidply-player.vidply-audio.vidply-has-playlist audio{display:none}.vidply-player.vidply-audio.vidply-has-playlist .vidply-video-wrapper{flex:1}.vidply-player.vidply-audio.vidply-has-playlist .vidply-controls{margin-top:auto}.vidply-transcript-window{backdrop-filter:blur(10px);background:var(--vidply-bg-transcript);border:1px solid var(--vidply-border);border-radius:8px;box-shadow:0 10px 40px var(--vidply-black-60);display:none;flex-direction:column;max-width:400px;order:4;position:absolute;top:0;width:400px;z-index:5}.vidply-player.vidply-audio .vidply-transcript-window{min-height:200px}.vidply-transcript-header{align-items:center;background:#282828;border-bottom:1px solid var(--vidply-border-light);border-radius:8px 8px 0 0;cursor:move;display:flex;justify-content:space-between;padding:16px 20px;user-select:none}.vidply-transcript-header h3{color:var(--vidply-white);font-size:16px;font-weight:600;height:1px;left:-10000px;margin:0;overflow:hidden;position:absolute;width:1px}.vidply-transcript-close{align-items:center;background:0 0;border:none;border-radius:4px;color:var(--vidply-text-muted);cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;transition:var(--vidply-transition-default);width:28px}.vidply-transcript-close:hover{background:var(--vidply-white-10);color:var(--vidply-white)}.vidply-transcript-close .vidply-icon{height:18px;width:18px}.vidply-transcript-content{flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:12px 0;touch-action:pan-y;scrollbar-color:var(--vidply-scrollbar-thumb) var(--vidply-scrollbar-track-transcript);scrollbar-width:thin}.vidply-transcript-entry{border-left:3px solid transparent;cursor:pointer;padding:12px 20px;transition:background .2s}.vidply-transcript-entry:focus,.vidply-transcript-entry:hover{background:var(--vidply-active-bg)}.vidply-transcript-entry-active{background:var(--vidply-primary-15);border-left-color:var(--vidply-primary-light)}.vidply-transcript-time{color:var(--vidply-primary-light);font-family:'Courier New',monospace;font-size:100%;font-weight:600;margin-bottom:4px;margin-right:8px}.vidply-transcript-text{color:var(--vidply-white-90);font-size:100%;line-height:1.6}.vidply-transcript-entry-active .vidply-transcript-text{color:var(--vidply-white);text-decoration:underline}.vidply-transcript-entry:focus .vidply-transcript-text,.vidply-transcript-entry:hover .vidply-transcript-text{text-decoration:underline}.vidply-transcript-description{background:rgb(100 149 237 / 8%);border-left:3px solid}.vidply-transcript-description .vidply-transcript-text{color:rgb(135 206 250 / 95%);font-style:italic;opacity:.9}.vidply-transcript-description .vidply-transcript-time{color:rgb(100 149 237 / 80%)}.vidply-transcript-description:focus,.vidply-transcript-description:hover{background:rgb(100 149 237 / 14%)}.vidply-transcript-description:focus .vidply-transcript-text,.vidply-transcript-description:hover .vidply-transcript-text{opacity:1}.vidply-transcript-description.vidply-transcript-entry-active{background:rgb(100 149 237 / 18%);border-left-color:#6495ed}.vidply-transcript-description.vidply-transcript-entry-active .vidply-transcript-text{color:rgb(135 206 250);opacity:1}.vidply-transcript-content::-webkit-scrollbar{width:8px}.vidply-transcript-content::-webkit-scrollbar-track{background:var(--vidply-scrollbar-track-transcript)}.vidply-transcript-content::-webkit-scrollbar-thumb{background:var(--vidply-scrollbar-thumb);border-radius:4px}.vidply-transcript-content::-webkit-scrollbar-thumb:hover{background:var(--vidply-scrollbar-thumb-hover)}.vidply-transcript-header-left{align-items:center;display:flex;gap:16px;position:relative}.vidply-transcript-autoscroll-label{align-items:center;cursor:pointer;display:flex;gap:6px;user-select:none;white-space:nowrap}.vidply-transcript-autoscroll-label input[type=checkbox]{cursor:pointer;height:16px;margin:0;width:16px}.vidply-transcript-autoscroll-text{color:var(--vidply-text-muted);font-size:13px;transition:color .2s}.vidply-transcript-autoscroll-label:hover .vidply-transcript-autoscroll-text{color:var(--vidply-white)}.vidply-transcript-language-select{background:var(--vidply-white-10);border:1px solid var(--vidply-white-20);border-radius:4px;color:var(--vidply-white);cursor:pointer;font-size:13px;padding:4px 8px;transition:var(--vidply-transition-default)}.vidply-transcript-language-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-transcript-language-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-border-focus);box-shadow:0 0 0 3px var(--vidply-primary-20);outline:0}.vidply-transcript-language-select option{background:#1a1a1a;color:var(--vidply-white)}.vidply-transcript-settings{align-items:center;background:0 0;border:none;border-radius:4px;color:var(--vidply-text-muted);cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;position:relative;transition:var(--vidply-transition-default);width:28px}.vidply-transcript-settings:hover{background:var(--vidply-white-10);color:var(--vidply-white)}.vidply-transcript-settings:focus{outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-transcript-settings .vidply-icon{height:18px;width:18px}.vidply-transcript-settings-menu{background:var(--vidply-bg-menu);border:1px solid var(--vidply-border);border-radius:6px;box-shadow:var(--vidply-shadow-lg);display:none;left:0;min-width:240px;padding:6px;position:absolute;top:calc(100% + 4px);z-index:100}.vidply-transcript-settings-menu::after{border-bottom:6px solid var(--vidply-bg-menu);border-left:6px solid transparent;border-right:6px solid transparent;bottom:100%;content:'';height:0;left:14px;position:absolute;width:0}.vidply-transcript-settings-item{align-items:flex-start;background:0 0;border:none;border-radius:4px;color:var(--vidply-white);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:8px 10px;text-align:left;transition:.15s;width:100%}.vidply-transcript-settings-item:hover{background:var(--vidply-primary-20)}.vidply-transcript-settings-item:hover span{text-decoration:underline}.vidply-transcript-settings-item:focus{background:var(--vidply-primary-25);outline:0}.vidply-transcript-settings-item:active span,.vidply-transcript-settings-item:focus span{text-decoration:underline}.vidply-transcript-settings-item .vidply-icon{flex-grow:0.2;height:20px;opacity:.9;width:20px}.vidply-transcript-settings-item span{flex:1}.vidply-transcript-move-mode{animation:.5s ease-in-out 2 transcriptPulse;box-shadow:0 0 0 3px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}@keyframes transcriptPulse{0%,100%{box-shadow:0 0 0 3px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}50%{box-shadow:0 0 0 6px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}}.vidply-transcript-resize-handle{position:absolute;z-index:10}.vidply-transcript-resize-ne,.vidply-transcript-resize-nw,.vidply-transcript-resize-se,.vidply-transcript-resize-sw{height:16px;width:16px}.vidply-transcript-resize-n,.vidply-transcript-resize-s{cursor:ns-resize;height:8px;left:16px;right:16px}.vidply-transcript-resize-e,.vidply-transcript-resize-w{bottom:16px;cursor:ew-resize;top:16px;width:8px}.vidply-transcript-resize-n{top:-4px}.vidply-transcript-resize-s{bottom:-4px}.vidply-transcript-resize-e{right:-4px}.vidply-transcript-resize-w{left:-4px}.vidply-transcript-resize-ne{cursor:nesw-resize;right:-8px;top:-8px}.vidply-transcript-resize-nw{cursor:nwse-resize;left:-8px;top:-8px}.vidply-transcript-resize-se{bottom:-8px;cursor:nwse-resize;right:-8px}.vidply-transcript-resize-sw{bottom:-8px;cursor:nesw-resize;left:-8px}.vidply-transcript-resizable .vidply-transcript-resize-handle::after{background:var(--vidply-primary-light);border-radius:50%;content:'';height:6px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s;width:6px}.vidply-transcript-resizable:hover .vidply-transcript-resize-handle::after{opacity:.8}.vidply-transcript-resizable .vidply-transcript-resize-handle:hover::after{opacity:1}.vidply-transcript-resizing{box-shadow:0 0 0 2px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60);transition:none!important}.vidply-transcript-resizing .vidply-transcript-content{pointer-events:none}.vidply-transcript-keyboard-drag{box-shadow:0 0 0 3px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}.vidply-transcript-drag-indicator{background:linear-gradient(135deg,var(--vidply-primary) 0,var(--vidply-primary-light) 100%);border-radius:0 0 6px 6px;color:var(--vidply-white);font-size:12px;font-weight:600;left:0;padding:8px 12px;position:absolute;right:0;text-align:center;top:100%;z-index:1000}.vidply-transcript-move-tooltip{animation:.3s fadeInDown;background:var(--vidply-black-90);border-radius:4px;color:var(--vidply-white);font-size:12px;left:50%;padding:6px 12px;position:absolute;text-align:center;top:100%;transform:translateX(-50%);white-space:nowrap;z-index:1000}@keyframes fadeInDown{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.vidply-transcript-style-dialog{background:var(--vidply-bg-menu);border:1px solid var(--vidply-border);border-radius:8px;box-shadow:var(--vidply-shadow-lg);display:none;left:0;max-height:500px;min-width:280px;overflow-y:auto;padding:12px;position:absolute;top:100%;width:auto;z-index:100}.vidply-transcript-style-dialog::after{border-color:transparent transparent var(--vidply-bg-menu) transparent;border-style:solid;border-width:0 8px 8px;content:'';height:0;left:12px;position:absolute;top:-8px;width:0}.vidply-transcript-style-title{border-bottom:1px solid var(--vidply-border);color:var(--vidply-white);font-size:14px;font-weight:600;margin:0 0 12px;padding-bottom:8px}.vidply-transcript-style-group{margin-bottom:12px}.vidply-transcript-style-group:last-child{margin-bottom:0}.vidply-transcript-style-group label{color:var(--vidply-white-90);display:block;font-size:12px;font-weight:500;margin-bottom:6px}.vidply-transcript-style-select{background:var(--vidply-white-10);border:1px solid var(--vidply-border);border-radius:4px;color:var(--vidply-white);cursor:pointer;font-size:13px;outline:0;padding:6px 10px;transition:var(--vidply-transition-default);width:100%}.vidply-transcript-style-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-transcript-style-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-primary-light);box-shadow:0 0 0 2px var(--vidply-primary-20)}.vidply-transcript-style-select option{background:#1a1a1a;color:#fff}.vidply-transcript-style-color{border:1px solid var(--vidply-border);border-radius:4px;cursor:pointer;height:32px;outline:0;padding:4px;transition:var(--vidply-transition-default);width:100%}.vidply-transcript-style-color:hover{border-color:var(--vidply-border-hover)}.vidply-transcript-style-color:focus{border-color:var(--vidply-primary-light);box-shadow:0 0 0 2px var(--vidply-primary-20)}.vidply-transcript-style-range-container{align-items:center;display:flex;gap:12px}.vidply-transcript-style-range{-webkit-appearance:none;appearance:none;background:var(--vidply-white-20);border-radius:3px;cursor:pointer;flex:1;height:6px;outline:0}.vidply-transcript-style-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--vidply-primary-light);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:.15s;width:16px}.vidply-transcript-style-range::-webkit-slider-thumb:hover{background:var(--vidply-primary);transform:scale(1.15)}.vidply-transcript-style-range::-moz-range-thumb{background:var(--vidply-primary-light);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:.15s;width:16px}.vidply-transcript-style-range::-moz-range-thumb:hover{background:var(--vidply-primary);transform:scale(1.15)}.vidply-transcript-style-value{color:var(--vidply-text-muted);font-size:13px;font-weight:600;min-width:40px;text-align:right}.vidply-transcript-style-close{background:var(--vidply-primary);border:none;border-radius:4px;color:var(--vidply-white);cursor:pointer;font-size:13px;font-weight:600;margin-top:12px;padding:8px 16px;transition:var(--vidply-transition-default);width:100%}.vidply-transcript-style-close:hover{background:var(--vidply-primary-light);transform:translateY(-1px)}.vidply-transcript-style-close:active{transform:translateY(0)}.vidply-transcript-style-close:focus{box-shadow:0 0 0 3px var(--vidply-primary-20);outline:0}.vidply-sign-language-wrapper{background:0 0;height:auto;max-width:400px;min-height:100px;min-width:150px;position:absolute;transition:opacity .3s;width:280px;z-index:3}.vidply-fullscreen .vidply-sign-language-wrapper{max-width:600px}.vidply-sign-language-wrapper:focus{outline:2px solid var(--vidply-primary);outline-offset:2px}.vidply-sign-language-video{background:var(--vidply-black);border:2px solid var(--vidply-white-30);border-radius:4px;box-shadow:0 4px 12px var(--vidply-black-60);cursor:move;display:block;height:auto;pointer-events:auto;width:100%}.vidply-sign-dragging .vidply-sign-language-video{cursor:grabbing!important;opacity:.9}.vidply-sign-resizing .vidply-sign-language-video{cursor:nwse-resize!important}.vidply-sign-keyboard-drag,.vidply-sign-keyboard-resize{box-shadow:0 0 0 3px var(--vidply-primary),0 4px 12px var(--vidply-black-60)}.vidply-sign-keyboard-drag::after,.vidply-sign-keyboard-resize::after{align-items:center;background:var(--vidply-primary);border-radius:4px;color:var(--vidply-white);display:flex;font-size:12px;font-weight:600;justify-content:center;left:50%;padding:4px 8px;pointer-events:none;position:absolute;top:-28px;transform:translateX(-50%);white-space:nowrap;z-index:10}.vidply-sign-keyboard-drag::after{content:'DRAG MODE (Arrow keys to move, ESC to exit)'}.vidply-sign-keyboard-resize::after{content:'RESIZE MODE (Arrow keys to resize, ESC to exit)'}.vidply-sign-resize-handle{background:var(--vidply-white);border:1px solid var(--vidply-black-30);border-radius:50%;height:12px;opacity:0;position:absolute;transition:opacity .2s,background .2s;width:12px;z-index:10}.vidply-sign-language-wrapper:focus .vidply-sign-resize-handle,.vidply-sign-language-wrapper:hover .vidply-sign-resize-handle{opacity:1}.vidply-sign-resize-handle:hover{background:var(--vidply-primary)}.vidply-sign-resize-nw{cursor:nwse-resize;left:-6px;top:-6px}.vidply-sign-resize-ne{cursor:nesw-resize;right:-6px;top:-6px}.vidply-sign-resize-sw{bottom:-6px;cursor:nesw-resize;left:-6px}.vidply-sign-resize-se{bottom:-6px;cursor:nwse-resize;right:-6px}.vidply-sign-position-bottom-right{bottom:95px;right:16px}.vidply-sign-position-bottom-left{bottom:95px;left:16px}.vidply-sign-position-top-right{right:16px;top:16px}.vidply-sign-position-top-left{left:16px;top:16px}@media (width <= 640px){.vidply-sign-language-wrapper{min-width:120px;width:35%}.vidply-sign-position-bottom-left,.vidply-sign-position-bottom-right{bottom:126px!important}.vidply-playlist-thumbnail{height:34px;width:60px}.vidply-playlist-item{gap:10px;padding:10px 12px}.vidply-track-info{padding:12px 16px}.vidply-track-title{font-size:16px}.vidply-transcript-window{border:none;border-radius:0;border-top:1px solid var(--vidply-border-light);box-shadow:none;order:3;position:relative;width:100%;z-index:5}.vidply-transcript-header{border-radius:0;padding:12px 16px;cursor:default!important}.vidply-transcript-content{max-height:400px}}
|
|
6
|
+
:root{--vidply-active-bg:var(--vidply-white-05);--vidply-bg-caption:var(--vidply-black-80);--vidply-bg-controls:linear-gradient(180deg, rgb(var(--vidply-black-rgb), 0) 0%, rgb(var(--vidply-black-rgb), 0.9) 100%);--vidply-bg-dialog:rgb(20 20 20 / 98%);--vidply-bg-dialog-dark:rgb(18 18 18 / 98%);--vidply-bg-menu:rgb(20 20 20 / 98%);--vidply-bg-menu-rgb:20,20,20;--vidply-bg-overlay:var(--vidply-black-80);--vidply-bg-playlist:#1a1a1a;--vidply-bg-playlist-header:var(--vidply-black-40);--vidply-bg-track-info:linear-gradient(180deg, var(--vidply-black-80) 0%, var(--vidply-black-60) 100%);--vidply-bg-transcript:rgb(30 30 30 / 98%);--vidply-black:#000;--vidply-black-30:rgb(var(--vidply-black-rgb), 0.3);--vidply-black-40:rgb(var(--vidply-black-rgb), 0.4);--vidply-black-50:rgb(var(--vidply-black-rgb), 0.5);--vidply-black-60:rgb(var(--vidply-black-rgb), 0.6);--vidply-black-80:rgb(var(--vidply-black-rgb), 0.8);--vidply-black-90:rgb(var(--vidply-black-rgb), 0.9);--vidply-black-98:rgb(var(--vidply-black-rgb), 0.98);--vidply-black-rgb:0,0,0;--vidply-border:var(--vidply-white-15);--vidply-border-focus:var(--vidply-primary);--vidply-border-hover:var(--vidply-white-30);--vidply-border-light:var(--vidply-white-10);--vidply-focus-outline:2px solid var(--vidply-primary);--vidply-focus-outline-player:3px solid var(--vidply-primary-light);--vidply-focus-outline-white:2px solid var(--vidply-primary-light);--vidply-hover-bg:var(--vidply-white-10);--vidply-primary:#0a406e;--vidply-primary-10:rgb(var(--vidply-primary-rgb), 0.1);--vidply-primary-15:rgb(var(--vidply-primary-rgb), 0.15);--vidply-primary-20:rgb(var(--vidply-primary-rgb), 0.2);--vidply-primary-25:rgb(var(--vidply-primary-rgb), 0.25);--vidply-primary-30:rgb(var(--vidply-primary-rgb), 0.3);--vidply-primary-40:rgb(var(--vidply-primary-rgb), 0.4);--vidply-primary-50:rgb(var(--vidply-primary-rgb), 0.5);--vidply-primary-60:rgb(var(--vidply-primary-rgb), 0.6);--vidply-primary-70:rgb(var(--vidply-primary-rgb), 0.7);--vidply-primary-80:rgb(var(--vidply-primary-rgb), 0.8);--vidply-primary-dark:#083358;--vidply-primary-dark-rgb:8,51,88;--vidply-primary-light:#71b7e2;--vidply-primary-rgb:10,64,110;--vidply-scrollbar-thumb:var(--vidply-white);--vidply-scrollbar-thumb-hover:var(--vidply-white-90);--vidply-scrollbar-track:#404040;--vidply-scrollbar-track-transcript:#555;--vidply-shadow-lg:0 12px 48px var(--vidply-black-80);--vidply-shadow-md:0 4px 12px var(--vidply-black-40);--vidply-shadow-sm:0 2px 4px var(--vidply-black-30);--vidply-text-disabled:var(--vidply-white-60);--vidply-text-muted:var(--vidply-white-70);--vidply-text-primary:var(--vidply-white);--vidply-text-secondary:var(--vidply-white-90);--vidply-text-subtle:var(--vidply-white-50);--vidply-transition-default:all 0.2s ease;--vidply-white:#fff;--vidply-white-05:rgb(var(--vidply-white-rgb), 0.05);--vidply-white-08:rgb(var(--vidply-white-rgb), 0.08);--vidply-white-10:rgb(var(--vidply-white-rgb), 0.1);--vidply-white-15:rgb(var(--vidply-white-rgb), 0.15);--vidply-white-20:rgb(var(--vidply-white-rgb), 0.2);--vidply-white-25:rgb(var(--vidply-white-rgb), 0.25);--vidply-white-30:rgb(var(--vidply-white-rgb), 0.3);--vidply-white-40:rgb(var(--vidply-white-rgb), 0.4);--vidply-white-50:rgb(var(--vidply-white-rgb), 0.5);--vidply-white-60:rgb(var(--vidply-white-rgb), 0.6);--vidply-white-70:rgb(var(--vidply-white-rgb), 0.7);--vidply-white-80:rgb(var(--vidply-white-rgb), 0.8);--vidply-white-90:rgb(var(--vidply-white-rgb), 0.9);--vidply-white-95:rgb(var(--vidply-white-rgb), 0.95);--vidply-white-rgb:255,255,255}.vidply-player{background:var(--vidply-black);box-sizing:border-box;color:var(--vidply-text-primary);contain:layout style;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;max-width:100%;overflow:visible;position:relative;text-size-adjust:100%;width:100%}.vidply-player:focus{outline:0}.vidply-player:focus-visible{outline:var(--vidply-focus-outline-player);outline-offset:4px}.vidply-player *,.vidply-player ::after,.vidply-player ::before{box-sizing:inherit}.vidply-player.vidply-audio{aspect-ratio:auto;background:linear-gradient(135deg,var(--vidply-primary-20) 0,rgb(var(--vidply-primary-dark-rgb),.2) 100%);height:auto}.vidply-player audio,.vidply-player video{display:block;height:100%;object-fit:contain;width:100%}@media (width <= 640px){.vidply-player{isolation:isolate;overflow:visible}.vidply-player audio,.vidply-player video{flex:0 0 auto;height:auto;order:1}}.vidply-player video::cue{display:none}.vidply-player video::-webkit-media-text-track-container{display:none!important}.vidply-player video::-webkit-media-text-track-display{display:none!important}.vidply-video-wrapper{background:linear-gradient(135deg,var(--vidply-black) 0,#2a2a2a 100%);height:100%;order:1;overflow:hidden;position:relative;width:100%;z-index:1}.vidply-video-wrapper.vidply-forced-poster{background-image:var(--vidply-poster-image);background-position:center;background-repeat:no-repeat;background-size:cover}.vidply-video-wrapper.vidply-forced-poster>video{opacity:0}.vidply-player.vidply-audio .vidply-video-wrapper{overflow:visible}.vidply-player.vidply-audio .vidply-fullscreen{display:none}.vidply-play-overlay{cursor:pointer;filter:drop-shadow(0 8px 32px rgb(0 0 0 / 30%));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s cubic-bezier(.4, 0, .2, 1);z-index:2}.vidply-play-overlay:hover{filter:drop-shadow(0 12px 48px rgb(0 0 0 / 40%));transform:translate(-50%,-50%) scale(1.1)}.vidply-play-overlay:hover .vidply-play-overlay-bg{fill:rgb(255 255 255 / 100%)}.vidply-play-overlay:active{transform:translate(-50%,-50%) scale(.95)}.vidply-player.vidply-audio .vidply-play-overlay{display:none}.vidply-controls{background:linear-gradient(to top,var(--vidply-black-90) 0,var(--vidply-black-50) 100%);bottom:0;left:0;opacity:0;overflow:visible;padding:20px 16px 16px;pointer-events:none;position:absolute;right:0;transition:opacity .3s;z-index:10}.vidply-controls.vidply-controls-visible,.vidply-player.vidply-paused .vidply-controls,.vidply-player:hover .vidply-controls{opacity:1;pointer-events:auto}.vidply-audio .vidply-controls{background:var(--vidply-black-50);opacity:1;pointer-events:auto;position:relative}@media (width <= 640px){.vidply-video-wrapper{display:block;height:auto;overflow:visible}.vidply-controls{background:var(--vidply-black-90);border-top:1px solid var(--vidply-border-light);bottom:auto;left:0;opacity:1;order:2;padding:12px;pointer-events:auto;position:relative;right:0;width:100%;z-index:10}.vidply-controls-buttons,.vidply-controls-left,.vidply-controls-right{position:relative}}.vidply-progress-container{background:var(--vidply-white-20);border-radius:3px;cursor:pointer;height:5px;margin-bottom:12px;position:relative;transition:height .2s;width:100%}.vidply-progress-container:focus,.vidply-progress-container:hover{height:8px;outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-progress-buffered{background:var(--vidply-white-40);border-radius:3px;height:100%;left:0;position:absolute;top:0;transition:width .2s;width:0}.vidply-progress-played{background:var(--vidply-primary-light);border-radius:3px;height:100%;left:0;position:absolute;top:0;transition:width .1s linear;width:0}.vidply-progress-handle{background:var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);height:12px;opacity:0;position:absolute;right:-6px;top:50%;transform:translateY(-50%);transition:opacity .2s;width:12px}.vidply-progress-container:focus .vidply-progress-handle,.vidply-progress-container:hover .vidply-progress-handle{opacity:1}.vidply-progress-tooltip{background:var(--vidply-black-90);border-radius:4px;bottom:12px;color:var(--vidply-white);display:none;font-size:12px;padding:4px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap}.vidply-controls-buttons{align-items:center;display:flex;gap:8px;justify-content:space-between}.vidply-controls-left,.vidply-controls-right{align-items:center;display:flex;gap:8px;overflow:visible;position:relative}.vidply-button{align-items:center;background:0 0;border:none;border-radius:4px;color:var(--vidply-white);cursor:pointer;display:inline-flex;justify-content:center;min-height:32px;min-width:32px;padding:6px;position:relative;transition:background-color .2s,transform .1s}.vidply-button:hover{background:var(--vidply-hover-bg)}.vidply-button:active{transform:scale(.95)}.vidply-button:focus{outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-button:disabled{cursor:not-allowed;opacity:.5}.vidply-icon{display:inline-block;fill:currentcolor;height:26px;width:26px}.vidply-icon svg{display:block;height:100%;width:100%}.vidply-volume-slider{background:var(--vidply-white-20);border-radius:3px;cursor:pointer;height:100px;margin:0 auto;position:relative;width:6px}.vidply-volume-slider:focus{outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-volume-track{height:100%;position:relative;width:100%}.vidply-volume-fill{background:var(--vidply-primary-light);border-radius:2px;bottom:0;height:80%;left:0;position:absolute;transition:height .1s;width:100%}.vidply-volume-handle{background:var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);height:10px;left:50%;position:absolute;top:-4px;transform:translateX(-50%);width:10px}.vidply-time{align-items:center;color:#fff;display:flex;font-size:13px;font-variant-numeric:tabular-nums;gap:4px;padding:0 4px;user-select:none}.vidply-speed{gap:4px}.vidply-speed-text{font-size:12px;min-width:28px;text-align:center}.vidply-menu-backdrop{animation:.2s fadeIn;background:rgb(0 0 0 / 50%);bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:19}.vidply-menu-backdrop.visible{display:block}@media (width <= 640px){.vidply-menu-backdrop{display:none!important}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.vidply-menu{backdrop-filter:blur(10px);background:var(--vidply-bg-menu);border:1px solid var(--vidply-border);border-radius:8px;bottom:calc(100% + 8px);box-shadow:var(--vidply-shadow-lg),0 0 0 1px var(--vidply-white-10);max-height:250px;min-width:200px;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:8px 0;position:absolute;right:50%;touch-action:pan-y;transform:translateX(50%);z-index:20}.vidply-menu.vidply-menu-below::after{border-bottom:6px solid var(--vidply-bg-menu);border-top:none;bottom:auto;top:-6px}.vidply-menu::after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--vidply-bg-menu);bottom:-6px;content:'';height:0;position:absolute;right:50%;transform:translateX(50%);width:0}.vidply-volume-menu{min-width:50px;overflow-y:hidden;padding:16px 12px;width:50px}.vidply-player.vidply-audio .vidply-menu{max-height:150px;bottom:auto;top:calc(100% + 8px)}.vidply-player.vidply-audio .vidply-menu::after{border-bottom:6px solid var(--vidply-bg-menu);border-top:none;bottom:auto;top:-6px}.vidply-menu-item{align-items:center;background:0 0;border:none;color:var(--vidply-white);cursor:pointer;display:flex;font-size:14px;font-weight:400;justify-content:space-between;padding:12px 16px;text-align:left;transition:background-color .15s,color .15s;white-space:nowrap;width:100%}.vidply-menu-item:hover{background:var(--vidply-primary-20);color:var(--vidply-white)}.vidply-menu-item:focus{background:var(--vidply-primary-25);color:var(--vidply-white);outline:0}.vidply-menu-item:active{background:var(--vidply-primary-30)}.vidply-captions-menu .vidply-menu-item:focus,.vidply-captions-menu .vidply-menu-item:hover,.vidply-menu-item:focus .vidply-chapter-title,.vidply-menu-item:hover .vidply-chapter-title,.vidply-speed-menu .vidply-menu-item:focus,.vidply-speed-menu .vidply-menu-item:hover{text-decoration:underline}.vidply-menu-item-active{background:var(--vidply-primary-15);color:var(--vidply-primary-light)}.vidply-menu-item-active .vidply-icon{color:var(--vidply-primary-light);height:20px;width:20px}.vidply-menu-item-with-value{align-items:center;display:flex;gap:20px;justify-content:space-between}.vidply-menu-item-label{align-items:center;display:flex;flex:1;gap:10px}.vidply-menu-item-label .vidply-icon{height:24px;opacity:.9;width:24px}.vidply-menu-item-value{background:var(--vidply-white-10);border-radius:4px;color:var(--vidply-text-muted);font-size:13px;font-weight:500;padding:2px 8px;white-space:nowrap}.vidply-chapter-time{color:var(--vidply-text-muted);display:inline-block;font-family:'Courier New',monospace;font-size:13px;font-weight:500;margin-right:12px;min-width:60px}.vidply-chapter-title{color:var(--vidply-white-95);flex:1}.vidply-caption-style-menu.vidply-settings-menu{background:var(--vidply-bg-menu);padding:16px}.vidply-style-group{margin-bottom:16px}.vidply-style-group:last-child{margin-bottom:0}.vidply-style-group label{font-weight:500;letter-spacing:.01em}.vidply-style-group input[type=color],.vidply-style-group input[type=range],.vidply-style-select{-webkit-appearance:none;appearance:none}.vidply-style-select{outline:0;transition:border-color .2s,background .2s}.vidply-style-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-style-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-border-focus)}.vidply-style-group input[type=color]{outline:0;transition:border-color .2s}.vidply-style-group input[type=color]:hover{border-color:var(--vidply-border-hover)}.vidply-style-group input[type=color]:focus{border-color:var(--vidply-border-focus)}.vidply-style-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--vidply-primary);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:transform .15s,background .15s;width:16px}.vidply-style-group input[type=range]::-webkit-slider-thumb:hover{background:var(--vidply-primary-80);transform:scale(1.15)}.vidply-style-group input[type=range]::-moz-range-thumb{background:var(--vidply-primary);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:transform .15s,background .15s;width:16px}.vidply-style-group input[type=range]::-moz-range-thumb:hover{background:var(--vidply-primary-80);transform:scale(1.15)}.vidply-style-group input[type=range]::-webkit-slider-runnable-track{background:var(--vidply-white-20);border-radius:3px;height:6px;width:100%}.vidply-style-group input[type=range]::-moz-range-track{background:var(--vidply-white-20);border-radius:3px;height:6px;width:100%}.vidply-captions{background:var(--vidply-bg-caption);border-radius:4px;bottom:16px;color:var(--vidply-white);display:none;font-family:sans-serif;font-size:100%;left:50%;line-height:1.4;max-width:90%;padding:8px 16px;pointer-events:none;position:absolute;text-align:center;transform:translateX(-50%);transition:bottom .3s;z-index:4}.vidply-audio .vidply-captions{bottom:auto;top:-42px}.vidply-captions:empty{display:none}@media (width >= 641px){.vidply-controls-visible .vidply-captions{bottom:96px}}@media (width <= 640px){.vidply-captions{bottom:122px}}.vidply-settings-overlay{align-items:center;animation:.2s vidply-fade-in;backdrop-filter:blur(8px);background:var(--vidply-bg-overlay);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}@keyframes vidply-fade-in{from{opacity:0}to{opacity:1}}.vidply-settings-dialog{animation:.3s vidply-slide-up;background:var(--vidply-bg-dialog);border:1px solid var(--vidply-border);border-radius:12px;box-shadow:var(--vidply-shadow-lg);max-height:80%;max-width:500px;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:24px;touch-action:pan-y;width:90%}@keyframes vidply-slide-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.vidply-settings-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.vidply-settings-header h2{color:var(--vidply-white);font-size:20px;font-weight:600;margin:0}.vidply-settings-close{min-height:auto;min-width:auto;padding:4px}.vidply-settings-content{display:flex;flex-direction:column;gap:20px}.vidply-settings-section{display:flex;flex-direction:column;gap:12px}.vidply-settings-section h3{color:var(--vidply-white);font-size:16px;font-weight:600;margin:0}.vidply-settings-section label{color:var(--vidply-white-90);display:block;font-size:14px;margin-bottom:4px}.vidply-settings-color,.vidply-settings-range,.vidply-settings-select{background:var(--vidply-white-10);border:1px solid var(--vidply-white-20);border-radius:6px;color:var(--vidply-white);font-size:14px;padding:8px 12px;transition:border-color .2s,background .2s;width:100%}.vidply-settings-select option{background:#fff;color:#000}.vidply-settings-color:hover,.vidply-settings-range:hover,.vidply-settings-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-settings-color:focus,.vidply-settings-range:focus,.vidply-settings-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-border-focus);box-shadow:0 0 0 3px var(--vidply-primary-20);outline:0}.vidply-settings-control{display:flex;flex-direction:column;gap:8px}.vidply-settings-value{color:var(--vidply-text-muted);display:inline-block;font-size:13px;min-width:40px;text-align:right}.vidply-settings-footer{border-top:1px solid var(--vidply-white-10);display:flex;justify-content:flex-end;margin-top:20px;padding-top:20px}.vidply-settings-footer .vidply-button{background:var(--vidply-white-10);border-radius:6px;min-width:auto;padding:10px 20px}.vidply-settings-footer .vidply-button:hover{background:var(--vidply-white-20)}.vidply-player.vidply-fullscreen,.vidply-player:fullscreen{height:100vh;max-width:none;width:100vw}.vidply-player.vidply-fullscreen .vidply-transcript-window,.vidply-player:fullscreen .vidply-transcript-window{bottom:80px!important;height:auto!important;left:auto!important;max-height:calc(100vh - 180px)!important;max-width:400px;position:fixed!important;right:20px!important;top:auto!important;width:400px}.vidply-loading{display:none;height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:50px}.vidply-player.vidply-buffering .vidply-loading{display:block}.vidply-loading::after{animation:.8s linear infinite vidply-spin;border:4px solid var(--vidply-white-20);border-radius:50%;border-top-color:var(--vidply-white);content:'';display:block;height:100%;width:100%}@keyframes vidply-spin{to{transform:rotate(360deg)}}.vidply-sr-only{height:1px;left:-10000px;overflow:hidden;position:absolute;width:1px}@media (prefers-contrast:high){.vidply-controls{background:var(--vidply-black)}.vidply-button:focus{outline:solid 3px}.vidply-progress-played{background:currentcolor}}@media (prefers-reduced-motion:reduce){.vidply-player *,.vidply-player ::after,.vidply-player ::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}@media (prefers-color-scheme:dark){.vidply-settings-dialog{background:var(--vidply-bg-dialog-dark)}}@media (hover:none) and (pointer:coarse){.vidply-button{min-height:48px;min-width:48px}.vidply-progress-container{height:10px}.vidply-menu-item{font-size:16px;padding:16px 20px}}@media (width <= 640px){.vidply-controls{padding:16px 12px 12px}.vidply-time{font-size:11px}.vidply-speed-text{display:none}.vidply-settings-dialog{animation:.3s slideUpFromBottom;border-radius:16px 16px 0 0;bottom:0;margin:0;max-height:90vh;max-width:100%;padding:20px;position:fixed;top:auto;width:100%}.vidply-settings-overlay{align-items:flex-end}.vidply-menu{border-radius:8px;bottom:calc(100% + 4px);left:50%;max-height:250px;min-width:200px;position:absolute;right:auto;top:auto;transform:translateX(-50%);width:auto;z-index:15}.vidply-menu::after{border-bottom:6px solid var(--vidply-bg-menu);border-left:6px solid transparent;border-right:6px solid transparent;border-top:none;bottom:-6px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.vidply-menu::before{display:none}.vidply-caption-style-menu.vidply-settings-menu{left:50%;max-width:calc(100vw - 40px);min-width:280px;padding:16px;transform:translateX(-50%);width:auto}.vidply-style-group{margin-bottom:20px}.vidply-style-group label{font-size:14px;margin-bottom:8px}.vidply-style-group input[type=color],.vidply-style-select{font-size:16px;padding:12px}.vidply-controls-buttons{flex-direction:column;gap:8px;width:100%}.vidply-controls-left,.vidply-controls-right{flex-wrap:wrap;justify-content:center;width:100%;gap:4px}.vidply-button{min-height:36px;min-width:36px;padding:5px}.vidply-icon{height:22px;width:22px}}@keyframes slideUpFromBottom{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@media (width <= 896px) and (orientation:landscape){.vidply-menu{max-height:50vh}.vidply-transcript-window{max-height:70vh}.vidply-settings-dialog{max-height:80vh}}@media (width <= 480px){.vidply-speed-text{display:none}.vidply-button{min-height:32px;min-width:32px;padding:4px}.vidply-icon{height:20px;width:20px}}.vidply-player :focus-visible,.vidply-player [role=button]:hover,.vidply-player [role=link]:hover,.vidply-player [tabindex]:not([tabindex="-1"]):hover,.vidply-player a:hover,.vidply-player button:hover,.vidply-player input:hover,.vidply-player select:hover,.vidply-player textarea:hover{outline:var(--vidply-focus-outline-white);outline-offset:2px}@media print{.vidply-controls{display:none}}.vidply-track-info{background:var(--vidply-bg-track-info);border-bottom:1px solid var(--vidply-border-light);order:2;padding:16px 20px}.vidply-track-number{color:var(--vidply-text-muted);font-size:12px;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.vidply-track-title{color:var(--vidply-white);font-size:18px;font-weight:600;margin-bottom:4px}.vidply-track-artist{color:var(--vidply-white-80);font-size:14px}.vidply-playlist-panel{background:var(--vidply-bg-playlist);border-top:1px solid var(--vidply-border-light);max-height:400px;order:3;-webkit-overflow-scrolling:touch;overflow-y:auto;touch-action:pan-y;scrollbar-color:var(--vidply-scrollbar-thumb) var(--vidply-scrollbar-track);scrollbar-width:thin}.vidply-playlist-header{background:var(--vidply-bg-playlist-header);border-bottom:1px solid var(--vidply-border-light);color:var(--vidply-white-90);font-size:13px;font-weight:600;letter-spacing:.5px;padding:12px 16px;position:sticky;text-transform:uppercase;top:0;z-index:2}.vidply-playlist-list{list-style:none;margin:0;padding:4px 0}.vidply-playlist-item{align-items:center;background:0 0;border-left:3px solid transparent;cursor:pointer;display:flex;gap:12px;padding:12px 16px;position:relative;transition:var(--vidply-transition-default)}.vidply-playlist-item:hover{background:var(--vidply-active-bg);border-left-color:var(--vidply-primary-50)}.vidply-playlist-item:focus{background:var(--vidply-white-08);border-left-color:var(--vidply-primary);outline:0;z-index:1}.vidply-playlist-item:focus-visible{background:var(--vidply-white-08);border-left-color:var(--vidply-primary);outline:var(--vidply-focus-outline-white);outline-offset:-2px;z-index:1}.vidply-playlist-item-active{background:var(--vidply-primary-15);border-left-color:var(--vidply-primary)}.vidply-playlist-item-active:hover{background:var(--vidply-primary-20)}.vidply-playlist-item-active:focus{background:var(--vidply-primary-20);outline:0}.vidply-playlist-item-active:focus-visible{background:var(--vidply-primary-20);outline:var(--vidply-focus-outline-white);outline-offset:-2px}.vidply-playlist-thumbnail{align-items:center;background-color:var(--vidply-white-10);background-position:center;background-size:cover;border-radius:4px;display:flex;flex-shrink:0;height:45px;justify-content:center;overflow:hidden;width:80px}.vidply-playlist-thumbnail-icon{color:var(--vidply-text-subtle);height:32px;transition:var(--vidply-transition-default);width:32px}.vidply-playlist-item:hover .vidply-playlist-thumbnail-icon{color:var(--vidply-text-muted);transform:scale(1.1)}.vidply-playlist-item-active .vidply-playlist-thumbnail-icon{color:var(--vidply-primary-light)}.vidply-playlist-item-info{flex:1;min-width:0}.vidply-playlist-item-title{color:var(--vidply-white);font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vidply-playlist-item-active .vidply-playlist-item-title{color:var(--vidply-primary-light)}.vidply-playlist-item-artist{color:var(--vidply-text-disabled);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vidply-playlist-item-icon{flex-shrink:0;height:20px;opacity:0;transition:opacity .2s;width:20px}.vidply-playlist-item-active .vidply-playlist-item-icon,.vidply-playlist-item:hover .vidply-playlist-item-icon{opacity:.7}.vidply-playlist-item-active .vidply-playlist-item-icon{color:var(--vidply-primary-light);opacity:1}.vidply-playlist-panel::-webkit-scrollbar{width:8px}.vidply-playlist-panel::-webkit-scrollbar-track{background:var(--vidply-scrollbar-track)}.vidply-playlist-panel::-webkit-scrollbar-thumb{background:var(--vidply-scrollbar-thumb);border-radius:4px}.vidply-playlist-panel::-webkit-scrollbar-thumb:hover{background:var(--vidply-scrollbar-thumb-hover)}.vidply-player.vidply-audio.vidply-has-playlist{min-height:200px}.vidply-player.vidply-audio.vidply-has-playlist audio{display:none}.vidply-player.vidply-audio.vidply-has-playlist .vidply-video-wrapper{flex:1}.vidply-player.vidply-audio.vidply-has-playlist .vidply-controls{margin-top:auto}.vidply-transcript-window{backdrop-filter:blur(10px);background:var(--vidply-bg-transcript);border:1px solid var(--vidply-border);border-radius:8px;box-shadow:0 10px 40px var(--vidply-black-60);display:none;flex-direction:column;max-width:400px;order:4;position:fixed;top:0;width:400px;z-index:5}.vidply-player.vidply-audio .vidply-transcript-window{min-height:200px}.vidply-transcript-header{align-items:center;background:#282828;border-bottom:1px solid var(--vidply-border-light);border-radius:8px 8px 0 0;cursor:move;display:flex;justify-content:space-between;padding:16px 20px;user-select:none}.vidply-transcript-header:focus,.vidply-transcript-header:focus-visible{box-shadow:0 0 0 4px rgb(91 144 255 / 35%);outline:3px solid var(--vidply-primary-light);outline-offset:2px}.vidply-transcript-header h3{color:var(--vidply-white);font-size:16px;font-weight:600;height:1px;left:-10000px;margin:0;overflow:hidden;position:absolute;width:1px}.vidply-transcript-close{align-items:center;background:0 0;border:none;border-radius:4px;color:var(--vidply-text-muted);cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;transition:var(--vidply-transition-default);width:28px}.vidply-transcript-close:hover{background:var(--vidply-white-10);color:var(--vidply-white)}.vidply-transcript-close .vidply-icon{height:18px;width:18px}.vidply-transcript-content{flex:1;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:12px 0;touch-action:pan-y;scrollbar-color:var(--vidply-scrollbar-thumb) var(--vidply-scrollbar-track-transcript);scrollbar-width:thin}.vidply-transcript-entry{border-left:3px solid transparent;cursor:pointer;padding:12px 20px;transition:background .2s}.vidply-transcript-entry:focus,.vidply-transcript-entry:hover{background:var(--vidply-active-bg)}.vidply-transcript-entry-active{background:var(--vidply-primary-15);border-left-color:var(--vidply-primary-light)}.vidply-transcript-time{color:var(--vidply-primary-light);font-family:'Courier New',monospace;font-size:100%;font-weight:600;margin-bottom:4px;margin-right:8px}.vidply-transcript-text{color:var(--vidply-white-90);font-size:100%;line-height:1.6}.vidply-transcript-entry-active .vidply-transcript-text{color:var(--vidply-white);text-decoration:underline}.vidply-transcript-entry:focus .vidply-transcript-text,.vidply-transcript-entry:hover .vidply-transcript-text{text-decoration:underline}.vidply-transcript-description{background:rgb(100 149 237 / 8%);border-left:3px solid}.vidply-transcript-description .vidply-transcript-text{color:rgb(135 206 250 / 95%);font-style:italic;opacity:.9}.vidply-transcript-description .vidply-transcript-time{color:rgb(100 149 237 / 80%)}.vidply-transcript-description:focus,.vidply-transcript-description:hover{background:rgb(100 149 237 / 14%)}.vidply-transcript-description:focus .vidply-transcript-text,.vidply-transcript-description:hover .vidply-transcript-text{opacity:1}.vidply-transcript-description.vidply-transcript-entry-active{background:rgb(100 149 237 / 18%);border-left-color:#6495ed}.vidply-transcript-description.vidply-transcript-entry-active .vidply-transcript-text{color:rgb(135 206 250);opacity:1}.vidply-transcript-content::-webkit-scrollbar{width:8px}.vidply-transcript-content::-webkit-scrollbar-track{background:var(--vidply-scrollbar-track-transcript)}.vidply-transcript-content::-webkit-scrollbar-thumb{background:var(--vidply-scrollbar-thumb);border-radius:4px}.vidply-transcript-content::-webkit-scrollbar-thumb:hover{background:var(--vidply-scrollbar-thumb-hover)}.vidply-transcript-header-left{align-items:center;display:flex;gap:16px;position:relative}.vidply-transcript-autoscroll-label{align-items:center;cursor:pointer;display:flex;gap:6px;user-select:none;white-space:nowrap}.vidply-transcript-autoscroll-label input[type=checkbox]{cursor:pointer;height:16px;margin:0;width:16px}.vidply-transcript-autoscroll-text{color:var(--vidply-text-muted);font-size:13px;transition:color .2s}.vidply-transcript-autoscroll-label:hover .vidply-transcript-autoscroll-text{color:var(--vidply-white)}.vidply-transcript-language-select{background:var(--vidply-white-10);border:1px solid var(--vidply-white-20);border-radius:4px;color:var(--vidply-white);cursor:pointer;font-size:13px;padding:4px 8px;transition:var(--vidply-transition-default)}.vidply-transcript-language-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-transcript-language-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-border-focus);box-shadow:0 0 0 3px var(--vidply-primary-20);outline:0}.vidply-transcript-language-select option{background:#1a1a1a;color:var(--vidply-white)}.vidply-transcript-settings{align-items:center;background:0 0;border:none;border-radius:4px;color:var(--vidply-text-muted);cursor:pointer;display:flex;height:28px;justify-content:center;padding:4px;position:relative;transition:var(--vidply-transition-default);width:28px}.vidply-transcript-settings:hover{background:var(--vidply-white-10);color:var(--vidply-white)}.vidply-transcript-settings:focus{outline:var(--vidply-focus-outline-white);outline-offset:2px}.vidply-transcript-settings .vidply-icon{height:18px;width:18px}.vidply-transcript-settings-menu{background:var(--vidply-bg-menu);border:1px solid var(--vidply-border);border-radius:6px;box-shadow:var(--vidply-shadow-lg);display:none;left:0;min-width:240px;padding:6px;position:absolute;top:calc(100% + 4px);z-index:100}.vidply-transcript-settings-menu::after{border-bottom:6px solid var(--vidply-bg-menu);border-left:6px solid transparent;border-right:6px solid transparent;bottom:100%;content:'';height:0;left:14px;position:absolute;width:0}.vidply-transcript-settings-item{align-items:flex-start;background:0 0;border:none;border-radius:4px;color:var(--vidply-white);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:8px 10px;text-align:left;transition:.15s;width:100%}.vidply-transcript-settings-item:hover{background:var(--vidply-primary-20)}.vidply-transcript-settings-item:hover span{text-decoration:underline}.vidply-transcript-settings-item:focus{background:var(--vidply-primary-25);outline:0}.vidply-transcript-settings-item:active span,.vidply-transcript-settings-item:focus span{text-decoration:underline}.vidply-transcript-settings-item .vidply-icon{flex-grow:0.2;height:20px;opacity:.9;width:20px}.vidply-transcript-settings-item span{flex:1}.vidply-transcript-move-mode{animation:.5s ease-in-out 2 transcriptPulse;box-shadow:0 0 0 3px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}@keyframes transcriptPulse{0%,100%{box-shadow:0 0 0 3px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}50%{box-shadow:0 0 0 6px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}}.vidply-transcript-resize-handle{position:absolute;z-index:10}.vidply-transcript-resize-ne,.vidply-transcript-resize-nw,.vidply-transcript-resize-se,.vidply-transcript-resize-sw{height:16px;width:16px}.vidply-transcript-resize-n,.vidply-transcript-resize-s{cursor:ns-resize;height:8px;left:16px;right:16px}.vidply-transcript-resize-e,.vidply-transcript-resize-w{bottom:16px;cursor:ew-resize;top:16px;width:8px}.vidply-transcript-resize-n{top:-4px}.vidply-transcript-resize-s{bottom:-4px}.vidply-transcript-resize-e{right:-4px}.vidply-transcript-resize-w{left:-4px}.vidply-transcript-resize-ne{cursor:nesw-resize;right:-8px;top:-8px}.vidply-transcript-resize-nw{cursor:nwse-resize;left:-8px;top:-8px}.vidply-transcript-resize-se{bottom:-8px;cursor:nwse-resize;right:-8px}.vidply-transcript-resize-sw{bottom:-8px;cursor:nesw-resize;left:-8px}.vidply-transcript-resizable .vidply-transcript-resize-handle::after{background:var(--vidply-primary-light);border-radius:50%;content:'';height:6px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s;width:6px}.vidply-transcript-resizable:hover .vidply-transcript-resize-handle::after{opacity:.8}.vidply-transcript-resizable .vidply-transcript-resize-handle:hover::after{opacity:1}.vidply-transcript-resizing{box-shadow:0 0 0 2px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60);transition:none!important}.vidply-transcript-resizing .vidply-transcript-content{pointer-events:none}.vidply-transcript-keyboard-drag{box-shadow:0 0 0 3px var(--vidply-primary-light),0 10px 40px var(--vidply-black-60)}.vidply-transcript-drag-indicator{background:linear-gradient(135deg,var(--vidply-primary) 0,var(--vidply-primary-light) 100%);border-radius:0 0 6px 6px;color:var(--vidply-white);font-size:12px;font-weight:600;left:0;padding:8px 12px;position:absolute;right:0;text-align:center;top:100%;z-index:1000}.vidply-transcript-move-tooltip{animation:.3s fadeInDown;background:var(--vidply-black-90);border-radius:4px;color:var(--vidply-white);font-size:12px;left:50%;padding:6px 12px;position:absolute;text-align:center;top:100%;transform:translateX(-50%);white-space:nowrap;z-index:1000}.vidply-transcript-resize-tooltip{animation:.3s fadeInDown;background:var(--vidply-primary);border-radius:4px;color:var(--vidply-white);font-size:12px;left:50%;padding:6px 12px;position:absolute;text-align:center;top:100%;transform:translateX(-50%);white-space:nowrap;z-index:1000}@keyframes fadeInDown{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.vidply-transcript-style-dialog{background:var(--vidply-bg-menu);border:1px solid var(--vidply-border);border-radius:8px;box-shadow:var(--vidply-shadow-lg);display:none;left:0;max-height:500px;min-width:280px;overflow-y:auto;padding:12px;position:absolute;top:100%;width:auto;z-index:100}.vidply-transcript-style-dialog::after{border-color:transparent transparent var(--vidply-bg-menu) transparent;border-style:solid;border-width:0 8px 8px;content:'';height:0;left:12px;position:absolute;top:-8px;width:0}.vidply-transcript-style-title{border-bottom:1px solid var(--vidply-border);color:var(--vidply-white);font-size:14px;font-weight:600;margin:0 0 12px;padding-bottom:8px}.vidply-transcript-style-group{margin-bottom:12px}.vidply-transcript-style-group:last-child{margin-bottom:0}.vidply-transcript-style-group label{color:var(--vidply-white-90);display:block;font-size:12px;font-weight:500;margin-bottom:6px}.vidply-transcript-style-select{background:var(--vidply-white-10);border:1px solid var(--vidply-border);border-radius:4px;color:var(--vidply-white);cursor:pointer;font-size:13px;outline:0;padding:6px 10px;transition:var(--vidply-transition-default);width:100%}.vidply-transcript-style-select:hover{background:var(--vidply-white-15);border-color:var(--vidply-border-hover)}.vidply-transcript-style-select:focus{background:var(--vidply-white-15);border-color:var(--vidply-primary-light);box-shadow:0 0 0 2px var(--vidply-primary-20)}.vidply-transcript-style-select option{background:#1a1a1a;color:#fff}.vidply-transcript-style-color{border:1px solid var(--vidply-border);border-radius:4px;cursor:pointer;height:32px;outline:0;padding:4px;transition:var(--vidply-transition-default);width:100%}.vidply-transcript-style-color:hover{border-color:var(--vidply-border-hover)}.vidply-transcript-style-color:focus{border-color:var(--vidply-primary-light);box-shadow:0 0 0 2px var(--vidply-primary-20)}.vidply-transcript-style-range-container{align-items:center;display:flex;gap:12px}.vidply-transcript-style-range{-webkit-appearance:none;appearance:none;background:var(--vidply-white-20);border-radius:3px;cursor:pointer;flex:1;height:6px;outline:0}.vidply-transcript-style-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--vidply-primary-light);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:.15s;width:16px}.vidply-transcript-style-range::-webkit-slider-thumb:hover{background:var(--vidply-primary);transform:scale(1.15)}.vidply-transcript-style-range::-moz-range-thumb{background:var(--vidply-primary-light);border:2px solid var(--vidply-white);border-radius:50%;box-shadow:var(--vidply-shadow-sm);cursor:pointer;height:16px;transition:.15s;width:16px}.vidply-transcript-style-range::-moz-range-thumb:hover{background:var(--vidply-primary);transform:scale(1.15)}.vidply-transcript-style-value{color:var(--vidply-text-muted);font-size:13px;font-weight:600;min-width:40px;text-align:right}.vidply-transcript-style-close{background:var(--vidply-primary);border:none;border-radius:4px;color:var(--vidply-white);cursor:pointer;font-size:13px;font-weight:600;margin-top:12px;padding:8px 16px;transition:var(--vidply-transition-default);width:100%}.vidply-transcript-style-close:hover{background:var(--vidply-primary-light);transform:translateY(-1px)}.vidply-transcript-style-close:active{transform:translateY(0)}.vidply-transcript-style-close:focus{box-shadow:0 0 0 3px var(--vidply-primary-20);outline:0}.vidply-sign-language-wrapper{background:0 0;height:auto;max-width:none;min-height:100px;position:absolute;transition:opacity .3s;width:280px;z-index:3}.vidply-fullscreen .vidply-sign-language-wrapper{max-width:none}.vidply-sign-language-wrapper:focus{outline:2px solid var(--vidply-primary);outline-offset:2px}.vidply-sign-language-video{background:var(--vidply-black);border:2px solid var(--vidply-white-30);border-radius:4px;box-shadow:0 4px 12px var(--vidply-black-60);cursor:move;display:block;height:auto;pointer-events:auto;width:100%}.vidply-sign-dragging .vidply-sign-language-video{cursor:grabbing!important;opacity:.9}.vidply-sign-resizing .vidply-sign-language-video{cursor:nwse-resize!important}.vidply-sign-keyboard-drag,.vidply-sign-keyboard-resize{box-shadow:0 0 0 3px var(--vidply-primary),0 4px 12px var(--vidply-black-60)}.vidply-sign-keyboard-drag::after,.vidply-sign-keyboard-resize::after{align-items:center;background:var(--vidply-primary);border-radius:4px;color:var(--vidply-white);display:flex;font-size:12px;font-weight:600;justify-content:center;left:50%;padding:4px 8px;pointer-events:none;position:absolute;top:-28px;transform:translateX(-50%);white-space:nowrap;z-index:10}.vidply-sign-keyboard-drag::after{content:'DRAG MODE (Arrow keys to move, ESC to exit)'}.vidply-sign-keyboard-resize::after{content:'RESIZE MODE (Arrow keys to resize, ESC to exit)'}.vidply-sign-resize-handle{background:var(--vidply-white);border:1px solid var(--vidply-black-30);border-radius:50%;height:12px;opacity:0;position:absolute;transition:opacity .2s,background .2s;width:12px;z-index:10}.vidply-sign-language-wrapper:focus .vidply-sign-resize-handle,.vidply-sign-language-wrapper:hover .vidply-sign-resize-handle{opacity:1}.vidply-sign-resize-handle:hover{background:var(--vidply-primary)}.vidply-sign-resize-nw{cursor:nwse-resize;left:-6px;top:-6px}.vidply-sign-resize-ne{cursor:nesw-resize;right:-6px;top:-6px}.vidply-sign-resize-sw{bottom:-6px;cursor:nesw-resize;left:-6px}.vidply-sign-resize-se{bottom:-6px;cursor:nwse-resize;right:-6px}.vidply-sign-position-bottom-right{bottom:95px;right:16px}.vidply-sign-position-bottom-left{bottom:95px;left:16px}.vidply-sign-position-top-right{right:16px;top:16px}.vidply-sign-position-top-left{left:16px;top:16px}@media (width <= 640px){.vidply-sign-language-wrapper{min-width:120px;width:35%}.vidply-sign-position-bottom-left,.vidply-sign-position-bottom-right{bottom:126px!important}.vidply-playlist-thumbnail{height:34px;width:60px}.vidply-playlist-item{gap:10px;padding:10px 12px}.vidply-track-info{padding:12px 16px}.vidply-track-title{font-size:16px}.vidply-transcript-window{border:none;border-radius:0;border-top:1px solid var(--vidply-border-light);box-shadow:none;order:3;position:relative;width:100%;z-index:5}.vidply-transcript-header{border-radius:0;padding:12px 16px;cursor:default!important}.vidply-transcript-content{max-height:400px}}
|