vexip-ui/css/video.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-video-vars{--vxp-video-bg-color:#111;--vxp-video-state-color:var(--vxp-content-color-third);--vxp-video-loading-color:var(--vxp-content-color-third);--vxp-video-controls-bg-color:unset;--vxp-video-controls-bg-image:linear-gradient(to top, rgba(17, 17, 17, 0.75) 0%, transparent 100%);--vxp-video-progress-height:3px;--vxp-video-progress-pad:5px;--vxp-video-progress-segment-bg-color:rgba(255, 255, 255, 0.35);--vxp-video-progress-filler-bg-color:var(--vxp-color-primary-base);--vxp-video-progress-trigger-radius:var(--vxp-radius-base);--vxp-video-progress-trigger-width:14px;--vxp-video-progress-trigger-height:10px;--vxp-video-progress-indicator-color:var(--vxp-color-primary-base);--vxp-video-progress-indicator-size:4px;--vxp-video-control-color:rgba(255, 255, 255, 0.85);--vxp-video-control-color-active:#fff;--vxp-video-control-color-disabled:rgba(255, 255, 255, 0.5);--vxp-video-control-bg-color:rgba(0, 0, 0, 0.75);--vxp-video-control-radius:var(--vxp-radius-small);--vxp-video-control-shadow:var(--vxp-shadow-shape) #000;--vxp-video-control-option-bg-color-hover:rgba(255, 255, 255, 0.15);--vxp-video-control-option-bg-color-active:rgba(255, 255, 255, 0.15);--vxp-video-timer-radius:var(--vxp-radius-small)}.vxp-video{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;width:100%;height:100%;outline-color:transparent}.vxp-video,.vxp-video *,.vxp-video ::after,.vxp-video ::before{box-sizing:border-box}.vxp-video--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-video__main{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--vxp-video-bg-color)}.vxp-video__player{display:flex;width:100%;height:100%;transition:var(--vxp-transition-transform)}.vxp-video__player--flipped{transform:scale(-1,1)}.vxp-video__video{width:100%;height:100%;outline-color:transparent}.vxp-video__poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.vxp-video__poster img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.vxp-video__state{position:absolute;top:50%;left:50%;color:var(--vxp-video-state-color);pointer-events:none;transform:translate(-50%,-50%)}.vxp-video__loading{position:absolute;top:50%;left:50%;color:var(--vxp-video-loading-color);pointer-events:none;transform:translate(-50%,-50%)}.vxp-video-state-effect-enter-active{animation:vxp-video-state-effect 250ms}.vxp-video-state-effect-leave-active{animation:vxp-video-state-effect reverse 250ms}@keyframes vxp-video-state-effect{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:100%;transform:translate(-50%,-50%) scale(1)}}.vxp-video__controls{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;padding:16px 0 4px;transition:var(--vxp-transition-transform)}.vxp-video__controls::before{position:absolute;inset:0;pointer-events:none;content:"";background-color:var(--vxp-video-controls-bg-color);background-image:var(--vxp-video-controls-bg-image);transition:var(--vxp-transition-opacity)}.vxp-video__controls--collapsed{transform:translateY(calc(var(--vxp-video-progress-pad) + var(--vxp-video-progress-height) + 43px)) translateZ(0)}.vxp-video__controls--collapsed::before{opacity:0}.vxp-video__controls-bottom,.vxp-video__controls-top{z-index:1;display:flex;gap:0 10px;align-items:center;width:100%}.vxp-video__controls-bottom{height:40px}.vxp-video__controls-center,.vxp-video__controls-left,.vxp-video__controls-right{display:flex;flex-shrink:0;align-items:center;height:100%}.vxp-video__controls-left{padding-inline-start:10px}.vxp-video__controls-center{flex:auto;justify-content:center}.vxp-video__controls-right{padding-inline-end:10px}.vxp-video__progress{position:relative;width:100%;padding:0 10px;transition:padding var(--vxp-transition-base)}.vxp-video__progress--disabled{pointer-events:none}.vxp-video__progress-segment{height:100%;padding:var(--vxp-video-progress-pad) 0}.vxp-video__progress-track{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--vxp-video-progress-segment-bg-color);border-radius:var(--vxp-video-progress-height)}.vxp-video__progress-filler{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--vxp-video-progress-filler-bg-color);border-radius:var(--vxp-video-progress-height);transition:var(--vxp-transition-background)}.vxp-video__progress-slider{--vxp-slider-track-height:calc(var(--vxp-video-progress-height) + var(--vxp-video-progress-pad) * 2);--vxp-slider-handler-size:13px;--vxp-slider-handler-scale-hover:1;--vxp-slider-handler-scale-focus:1;--vxp-slider-track-bg-color:transparent;--vxp-slider-track-bg-color-hover:transparent;--vxp-slider-marker-pad:0}.vxp-video__progress-trigger{position:relative;width:var(--vxp-video-progress-trigger-width);height:var(--vxp-video-progress-trigger-height);background-color:#fff;border:2px solid var(--vxp-video-progress-filler-bg-color);border-radius:var(--vxp-video-progress-trigger-radius)}.vxp-video__progress .vxp-slider{padding:0;margin:0}.vxp-video__progress .vxp-slider__container{width:100%;padding:0;margin:0}.vxp-video__progress .vxp-slider__track{gap:0 3px}.vxp-video__progress-indicator{position:absolute;top:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:var(--vxp-transition-opacity)}.vxp-video__progress-indicator--active{opacity:100%}.vxp-video__progress-indicator::after,.vxp-video__progress-indicator::before{position:absolute;left:50%;content:"";border:var(--vxp-video-progress-indicator-size) solid transparent;transform:translateX(-50%)}.vxp-video__progress-indicator::before{bottom:calc(100% - var(--vxp-video-progress-indicator-size) * .5 - var(--vxp-video-progress-pad) + var(--vxp-video-progress-trigger-height) * .25);border-top-color:var(--vxp-video-progress-indicator-color)}.vxp-video__progress-indicator::after{top:calc(100% - var(--vxp-video-progress-indicator-size) * .5 - var(--vxp-video-progress-pad) + var(--vxp-video-progress-trigger-height) * .25);border-bottom-color:var(--vxp-video-progress-indicator-color)}.vxp-video__controls--collapsed .vxp-video__progress{padding:0}.vxp-video__preview{position:absolute;bottom:100%;left:0;display:flex;flex-direction:column;align-items:center;margin-bottom:calc(5px + var(--vxp-video-progress-pad));pointer-events:none;opacity:0;transition:var(--vxp-transition-opacity)}.vxp-video__preview--active{opacity:100%}.vxp-video__preview-image{position:relative;width:60px;padding-top:100%}@supports (aspect-ratio:16/9){.vxp-video__preview-image{aspect-ratio:16/9;padding-top:0}}.vxp-video__preview-image img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.vxp-video__preview-time{display:flex;flex-direction:column;align-items:center;padding:6px;line-height:1;color:var(--vxp-video-control-color);background-color:var(--vxp-video-control-bg-color);border-radius:var(--vxp-video-control-radius);box-shadow:var(--vxp-video-control-shadow)}.vxp-video__preview--has-image .vxp-video__preview-time{position:absolute;bottom:0}.vxp-video__control{display:flex;align-items:center;justify-content:center;min-width:32px;height:100%;line-height:1;color:var(--vxp-video-control-color);transition:var(--vxp-transition-color)}.vxp-video__control:focus-within,.vxp-video__control:hover{color:var(--vxp-video-control-color-active)}.vxp-video__control--disabled,.vxp-video__control--disabled:focus-within,.vxp-video__control--disabled:hover{color:var(--vxp-video-control-color-disabled);cursor:not-allowed}.vxp-video__control-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 6px;line-height:inherit;color:inherit;cursor:pointer;background-color:transparent;border:0;outline:0}.vxp-video__control--disabled .vxp-video__control-button{cursor:not-allowed}.vxp-video__control-panel,.vxp-video__control-tip{display:flex;flex-direction:column;align-items:center;margin-bottom:calc(5px + var(--vxp-video-progress-pad));color:var(--vxp-video-control-color);background-color:var(--vxp-video-control-bg-color);border-radius:var(--vxp-video-control-radius);box-shadow:var(--vxp-video-control-shadow)}.vxp-video__control-tip{padding:6px}.vxp-video__control-name,.vxp-video__control-shortcut{display:inline-flex;align-items:center;line-height:1;white-space:nowrap}.vxp-video__control-shortcut{margin-inline-start:3px}.vxp-video__control-options{display:flex;flex-direction:column;width:100%;padding:5px 0;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-video__control-option{justify-content:center;color:var(--vxp-video-control-color);text-align:center;background-color:transparent}.vxp-video__control-option:hover{color:var(--vxp-video-control-color-active);background-color:var(--vxp-video-control-option-bg-color-hover)}.vxp-video__control-option--selected{color:var(--vxp-video-control-color-active);background-color:var(--vxp-video-control-option-bg-color-active)}.vxp-video__control-option--disabled,.vxp-video__control-option--disabled:hover{color:var(--vxp-video-control-color-disabled);background-color:transparent}.vxp-video__timer{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-video__timer-input{display:inline-flex;align-items:center;justify-content:center;height:22px;overflow:hidden;color:inherit;background-color:rgba(255,255,255,.3);border-radius:var(--vxp-video-timer-radius)}.vxp-video__timer-input .vxp-input__control{color:inherit;text-align:center;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto;background-color:transparent;border:0;outline:0}.vxp-video__timer-separator{margin:0 1px}.vxp-video__playback-rate{min-width:44px}.vxp-video__volume-panel{width:40px;height:140px;padding:6px 0}.vxp-video__volume-text{flex-shrink:0;padding:2px 0 4px}.vxp-video__volume-slider{--vxp-slider-handler-size:14px;--vxp-slider-handler-scale-hover:1;--vxp-slider-handler-scale-focus:1;width:auto}.vxp-video__progress-line{position:absolute;inset:auto 0 0;pointer-events:none}