video.css — SureCart – Ecommerce Made Easy For Selling Physical Products, Digital Downloads, Subscriptions, Donations, & Payments 4.5.0

surecart / packages / blocks-next / build / styles / video.css
surecart / packages / blocks-next / build / styles Last commit date
video.css
2 lines
:root{--sc-video-play-button-size:60px;--sc-video-play-button-size-thumb:20px;--sc-video-play-button-color:var(--sc-color-gray-900);--sc-video-play-button-bg:var(--sc-color-white)}.surecart-theme-dark{--sc-video-play-button-color:var(--sc-color-white);--sc-video-play-button-bg:var(--sc-color-gray-900)}.sc-video-container{aspect-ratio:var(--sc-video-aspect-ratio,16/9);margin:0;max-width:100%;overflow:hidden;position:relative;width:100%}.sc-video-container [hidden]{display:none!important}.sc-video-container .sc-video{display:block;height:100%;max-width:100%;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%}.sc-video-container.sc-video-loading .sc-video-play-button:after{-webkit-animation:sc-video-spinner 1s linear infinite;animation:sc-video-spinner 1s linear infinite;border:2px solid rgba(0,0,0,0);border-radius:50%;border-top-color:currentcolor;content:"";height:20px;left:50%;margin:-10px 0 0 -10px;position:absolute;top:50%;width:20px}.sc-video-container.sc-video-loading .sc-video-play-button svg{opacity:.5}@-webkit-keyframes sc-video-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes sc-video-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.sc-video-overlay,.sc-video-thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;position:relative;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;cursor:pointer;justify-content:center;overflow:hidden}.sc-video-overlay img,.sc-video-thumbnail img{height:100%;-o-object-fit:cover;object-fit:cover;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:100%}.sc-video-overlay img:hover,.sc-video-thumbnail img:hover{opacity:.8}.sc-video-overlay:hover:after,.sc-video-thumbnail:hover:after{content:"";inset:0;pointer-events:none;position:absolute}.sc-video-play-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--sc-video-play-button-bg);border-radius:50%;-webkit-box-shadow:var(--sc-shadow-medium);box-shadow:var(--sc-shadow-medium);cursor:pointer;height:var(--sc-video-play-button-size);justify-content:center;padding:0;width:var(--sc-video-play-button-size)}.sc-video-play-button svg{margin-left:4px;fill:var(--sc-video-play-button-color)}.sc-video-play-button:focus{background-color:var(--sc-video-play-button-bg);border:none;outline:2px auto var(--sc-color-gray-200);outline-offset:2px;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.sc-video-thumbnail .sc-video-play-button{--sc-video-play-button-size:var(--sc-video-play-button-size-thumb);-webkit-backdrop-filter:none;backdrop-filter:none;bottom:5px;left:5px}.sc-video-thumbnail .sc-video-play-button svg{margin-left:2px;fill:var(--sc-video-play-button-color)}.sc-video-container:not(.sc-video-loaded){cursor:pointer}.sc-video-container .sc-video-play-button{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.swiper-slide:has(.sc-video-container){-ms-grid-column-span:2;grid-column:span 2}.swiper-slide .sc-video-container{cursor:default;height:100%}