//---------------------------------------------------------------------------------------------------------------------- // I M P O R T S //---------------------------------------------------------------------------------------------------------------------- @import '../../../../../clientlib-site/css/base/variables.less';@import "../../../../../clientlib-site/css/base/mixins.less";//---------------------------------------------------------------------------------------------------------------------- // C A L E N D A R - S T Y L E S //---------------------------------------------------------------------------------------------------------------------- .video-container.theater,.video-container.full-screen{max-width:initial;width:100%}
.video-container.theater{max-height:90vh}
.video-container.full-screen{max-height:100vh}
video{width:100%}
.video-controls-container{position:absolute;bottom:0;left:0;right:0;color:white;z-index:100;opacity:0;transition:opacity 150ms ease-in-out}
.video-controls-container::before{content:"";position:absolute;bottom:0;// background:linear-gradient(to top,rgba(0,0,0,.75),transparent);width:100%;aspect-ratio:6 / 1;z-index:-1;pointer-events:none}
.video-container:hover .video-controls-container,.video-container:focus-within .video-controls-container,.video-container.paused .video-controls-container{opacity:1}
.video-controls-container .controls{display:flex;gap:.5rem;padding:.25rem;align-items:center}
.video-controls-container .controls button{background:0;border:0;color:inherit;padding:0;height:30px;width:30px;font-size:1.1rem;cursor:pointer;opacity:.85;transition:opacity 150ms ease-in-out}
.video-controls-container .controls button:hover{opacity:1}
.video-container.paused .pause-icon{display:none}
.video-container:not(.paused) .play-icon{display:none}
.video-container.theater .tall{display:none}
.video-container:not(.theater) .wide{display:none}
.video-container.full-screen .open{display:none}
.video-container:not(.full-screen) .close{display:none}
.volume-high-icon,.volume-low-icon,.volume-muted-icon{display:none}
.video-container[data-volume-level="high"] .volume-high-icon{display:block}
.video-container[data-volume-level="low"] .volume-low-icon{display:block}
.video-container[data-volume-level="muted"] .volume-muted-icon{display:block}
.volume-container{display:flex;align-items:center}
.volume-slider{width:0;transform-origin:left;transform:scaleX(0);transition:width 150ms ease-in-out,transform 150ms ease-in-out}
.volume-container:hover .volume-slider,.volume-slider:focus-within{width:100px;transform:scaleX(1)}
.duration-container{display:flex;align-items:center;gap:.25rem;flex-grow:1}
.video-container.captions .captions-btn{border-bottom:3px solid #00296d}
.video-controls-container .controls button.wide-btn{width:50px}
.timeline-container{height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}
.timeline{background-color:rgba(100,100,100,.5);height:3px;width:100%;position:relative}
.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--preview-position) * 100%);background-color:#969696;// display:none}
.timeline::after{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--progress-position) * 100%);background-color:#00296d}
.timeline .thumb-indicator{--scale:0;position:absolute;transform:translateX(-50%) scale(var(--scale));height:200%;top:-50%;left:calc(var(--progress-position) * 100%);background-color:#00296d;border-radius:50%;transition:transform 150ms ease-in-out;aspect-ratio:1 / 1}
.timeline .preview-img{position:absolute;height:80px;aspect-ratio:16 / 9;top:-1rem;transform:translate(-50%,-100%);left:calc(var(--preview-position) * 100%);border-radius:.25rem;border:2px solid white;display:none}
.thumbnail-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:none}
.video-container.scrubbing .thumbnail-img{display:block}
.video-container.scrubbing .preview-img,.timeline-container:hover .preview-img{display:block}
.video-container.scrubbing .timeline::before,.timeline-container:hover .timeline::before{display:block}
.video-container.scrubbing .thumb-indicator,.timeline-container:hover .thumb-indicator{--scale:1}
.video-container.scrubbing .timeline,.timeline-container:hover .timeline{height:100%}
.video-container{position:relative;width:90%;max-width:1000px;display:flex;justify-content:center;margin-inline:auto;background-color:black;margin:24px auto}
.ajustes{display:flex;flex-direction:column;position:absolute;bottom:48px;right:32px;background-color:rgba(0,41,109,.7);padding:10px;border-radius:5%;.descriptions,.keyboard{border:0;background-color:transparent;color:white;padding:8px}
}
.video-modal{display:flex;position:absolute;z-index:20;left:0;top:0;background-color:white;z-index:999;width:100%;min-height:563px;border:2px solid;flex-direction:row-reverse;align-items:flex-start;margin:0}
.video-modal-content{width:900px;max-height:900px;display:flex;flex-direction:column;margin:36px auto;padding:8px}
.close-modal{border:0;background-color:transparent;padding:8px;font-size:24px}
.d-none{display:none}
@media(max-width:767px){svg.play-icon{margin-top:2px;width:24px}
svg.pause-icon{margin-top:2px;width:24px}
svg.captions{margin-top:2px;width:24px}
svg.gear{margin-top:2px;width:24px}
svg.open{margin-top:2px;width:24px}
svg.close{margin-top:2px;width:24px}
}