2025-05-22 05:14:06 +03:00
|
|
|
#video-editor-trim-root{@keyframes pulse{0%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}to{opacity:.7;transform:scale(1)}}}#video-editor-trim-root .video-player-container{position:relative;width:100%;background:#000;border-radius:.5rem;overflow:hidden;margin-bottom:1rem;aspect-ratio:16/9;-webkit-user-select:none;-moz-user-select:none;user-select:none}#video-editor-trim-root .video-player-container video{width:100%;height:100%;cursor:pointer;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;user-select:none}@supports (-webkit-touch-callout: none){#video-editor-trim-root .video-player-container video{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}}#video-editor-trim-root .play-pause-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background-color:#0009;border-radius:50%;opacity:0;transition:opacity .3s;pointer-events:none}#video-editor-trim-root .video-player-container:hover .play-pause-indicator{opacity:1}#video-editor-trim-root .play-pause-indicator:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#video-editor-trim-root .play-pause-indicator.play-icon:before{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:25px solid white;margin-left:3px}#video-editor-trim-root .play-pause-indicator.pause-icon:before{width:20px;height:25px;border-left:6px solid white;border-right:6px solid white}#video-editor-trim-root .ios-first-play-indicator{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10}#video-editor-trim-root .ios-play-message{color:#fff;font-size:1.2rem;text-align:center;padding:1rem;background:#000c;border-radius:.5rem;animation:pulse 2s infinite}#video-editor-trim-root .video-controls{position:absolute;bottom:0;left:0;right:0;padding:.75rem;background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .3s}#video-editor-trim-root .video-player-container:hover .video-controls{opacity:1}#video-editor-trim-root .video-current-time,#video-editor-trim-root .video-duration{color:#fff;font-size:.875rem}#video-editor-trim-root .video-time-display{display:flex;justify-content:space-between;margin-bottom:.5rem;color:#fff;font-size:.875rem}#video-editor-trim-root .video-progress{position:relative;height:6px;background-color:#ffffff4d;border-radius:3px;cursor:pointer;margin:0 10px;touch-action:none;flex-grow:1}#video-editor-trim-root .video-progress.dragging{height:8px}#video-editor-trim-root .video-progress-fill{position:absolute;top:0;left:0;height:100%;background-color:red;border-radius:3px;pointer-events:none}#video-editor-trim-root .video-scrubber{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background-color:red;border-radius:50%;cursor:grab;transition:transform .1s ease,width .1s ease,height .1s ease}#video-editor-trim-root .video-progress.dragging .video-scrubber{transform:translate(-50%,-50%) scale(1.2);width:18px;height:18px;cursor:grabbing;box-shadow:0 0 8px #f009}@media (pointer: coarse){#video-editor-trim-root .video-scrubber{width:20px;height:20px}#video-editor-trim-root .video-progress.dragging .video-scrubber{width:24px;height:24px}#video-editor-trim-root .video-scrubber:before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px}}#video-editor-trim-root .video-controls-buttons{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}#video-editor-trim-root .mute-button,#video-editor-trim-root .fullscreen-button{min-width:auto;color:#fff;background:none;border:none;cursor:pointer;padding:.25rem;transition:transform .2s}#video-editor-trim-root .mute-button:hover,#video-editor-trim-root .fullscreen-button:hover{transform:scale(1.1)}#video-editor-trim-root .mute-button svg,#video-editor-trim-root .fullscreen-button svg{width:1.25rem;height:1.25rem}#video-editor-trim-root .video-time-tooltip{position:absolute;top:-30px;backgr
|
