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

surecart / packages / blocks-next / build / styles / lightbox.css
surecart / packages / blocks-next / build / styles Last commit date
lightbox.css
2 lines
.sc-lightbox-container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sc-lightbox-container img.has-image-lightbox{cursor:-webkit-zoom-in;cursor:zoom-in}.sc-lightbox-container img:hover+button.lightbox-trigger{opacity:1}.sc-lightbox-container button.lightbox-trigger{background-color:rgba(90,90,90,.25);border:none;color:#fff;opacity:0;fill:#fff;-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);cursor:-webkit-zoom-in;cursor:zoom-in;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;height:20px;padding:0;position:absolute;right:16px;text-align:center;top:16px;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;width:20px;z-index:100}.sc-lightbox-container button.lightbox-trigger:focus-visible{outline:3px auto rgba(90,90,90,.25);outline:3px auto -webkit-focus-ring-color;outline-offset:3px}.sc-lightbox-container button.lightbox-trigger:hover{cursor:pointer;opacity:1}.sc-lightbox-container button.lightbox-trigger:focus{opacity:1}.sc-lightbox-container button.lightbox-trigger:focus,.sc-lightbox-container button.lightbox-trigger:hover,.sc-lightbox-container button.lightbox-trigger:not(:hover):not(:active):not(.has-background){background-color:rgba(90,90,90,.25);border:none;padding:2px}.sc-lightbox-overlay{-webkit-box-sizing:border-box;box-sizing:border-box;cursor:-webkit-zoom-out;cursor:zoom-out;height:100vh;left:0;overflow:hidden;position:fixed;top:0;visibility:hidden;width:100%;z-index:100000}.sc-lightbox-overlay .sc-lightbox-close-button{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:40px;min-width:40px;padding:0;position:absolute;right:calc(env(safe-area-inset-right) + 16px);top:calc(env(safe-area-inset-top) + 16px);z-index:5000000;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-shadow:none;box-shadow:none;justify-content:center}.sc-lightbox-overlay .sc-lightbox-close-button:focus,.sc-lightbox-overlay .sc-lightbox-close-button:hover,.sc-lightbox-overlay .sc-lightbox-close-button:not(:hover):not(:active):not(.has-background){background:none;border:none}.sc-lightbox-overlay .sc-lightbox-next-button,.sc-lightbox-overlay .sc-lightbox-prev-button{cursor:pointer;display:none;min-height:40px;min-width:40px;padding:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:5000000;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-shadow:none;box-shadow:none;justify-content:center}.sc-lightbox-overlay .sc-lightbox-next-button[hidden],.sc-lightbox-overlay .sc-lightbox-prev-button[hidden]{display:none}.sc-lightbox-overlay .sc-lightbox-next-button[aria-disabled=true],.sc-lightbox-overlay .sc-lightbox-prev-button[aria-disabled=true]{opacity:.3}.sc-lightbox-overlay .sc-lightbox-next-button:focus,.sc-lightbox-overlay .sc-lightbox-next-button:hover,.sc-lightbox-overlay .sc-lightbox-next-button:not(:hover):not(:active):not(.has-background),.sc-lightbox-overlay .sc-lightbox-prev-button:focus,.sc-lightbox-overlay .sc-lightbox-prev-button:hover,.sc-lightbox-overlay .sc-lightbox-prev-button:not(:hover):not(:active):not(.has-background){background:none;border:none}@media(min-width:480px){.sc-lightbox-overlay .sc-lightbox-next-button,.sc-lightbox-overlay .sc-lightbox-prev-button{display:-webkit-box;display:-ms-flexbox;display:flex}}.sc-lightbox-overlay .sc-lightbox-prev-button{left:calc(env(safe-area-inset-left) + 16px)}.sc-lightbox-overlay .sc-lightbox-next-button{right:calc(env(safe-area-inset-right) + 16px)}.sc-lightbox-overlay .sc-lightbox-image-container{height:var(--sc-lightbox--container-height);left:50%;overflow:hidden;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;width:var(--sc-lightbox--container-width);z-index:9999999999}.sc-lightbox-overlay figure{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;position:relative;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;z-index:3000000}.sc-lightbox-overlay figure img{height:var(--sc-lightbox--image-height);min-height:var(--sc-lightbox--image-height);min-width:var(--sc-lightbox--image-width);width:var(--sc-lightbox--image-width)}.sc-lightbox-overlay figure figcaption{display:none}.sc-lightbox-overlay button{background:none;border:none}.sc-lightbox-overlay .scrim{background-color:#fff;height:100%;opacity:.9;position:absolute;width:100%;z-index:2000000}.sc-lightbox-overlay.active{-webkit-animation:sc-turn-on-visibility .25s both;animation:sc-turn-on-visibility .25s both;visibility:visible}.sc-lightbox-overlay.active img{-webkit-animation:sc-turn-on-visibility .35s both;animation:sc-turn-on-visibility .35s both}.sc-lightbox-overlay.show-closing-animation:not(.active){-webkit-animation:sc-turn-off-visibility .35s both;animation:sc-turn-off-visibility .35s both}.sc-lightbox-overlay.show-closing-animation:not(.active) img{-webkit-animation:sc-turn-off-visibility .25s both;animation:sc-turn-off-visibility .25s both}@media(prefers-reduced-motion:no-preference){.sc-lightbox-overlay.zoom.active{-webkit-animation:none;animation:none;opacity:1;visibility:visible}.sc-lightbox-overlay.zoom.active .sc-lightbox-image-container{-webkit-animation:sc-lightbox-zoom-in .4s;animation:sc-lightbox-zoom-in .4s}.sc-lightbox-overlay.zoom.active .sc-lightbox-image-container img{-webkit-animation:none;animation:none}.sc-lightbox-overlay.zoom.active .scrim{-webkit-animation:sc-turn-on-visibility .4s forwards;animation:sc-turn-on-visibility .4s forwards}.sc-lightbox-overlay.zoom.show-closing-animation:not(.active){-webkit-animation:none;animation:none}.sc-lightbox-overlay.zoom.show-closing-animation:not(.active) .sc-lightbox-image-container{-webkit-animation:sc-lightbox-zoom-out .4s;animation:sc-lightbox-zoom-out .4s}.sc-lightbox-overlay.zoom.show-closing-animation:not(.active) .sc-lightbox-image-container img{-webkit-animation:none;animation:none}.sc-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{-webkit-animation:sc-turn-off-visibility .4s forwards;animation:sc-turn-off-visibility .4s forwards}}@-webkit-keyframes show-content-image{0%{visibility:hidden}99%{visibility:hidden}to{visibility:visible}}@keyframes show-content-image{0%{visibility:hidden}99%{visibility:hidden}to{visibility:visible}}@-webkit-keyframes sc-turn-on-visibility{0%{opacity:0}to{opacity:1}}@keyframes sc-turn-on-visibility{0%{opacity:0}to{opacity:1}}@-webkit-keyframes sc-turn-off-visibility{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes sc-turn-off-visibility{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden}}@-webkit-keyframes sc-lightbox-zoom-in{0%{-webkit-transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale));transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale))}to{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@keyframes sc-lightbox-zoom-in{0%{-webkit-transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale));transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale))}to{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@-webkit-keyframes sc-lightbox-zoom-out{0%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);visibility:visible}99%{visibility:visible}to{-webkit-transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale));transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale));visibility:hidden}}@keyframes sc-lightbox-zoom-out{0%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);visibility:visible}99%{visibility:visible}to{-webkit-transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale));transform:translate(calc((-100vw + var(--sc-lightbox--scrollbar-width))/2 + var(--sc-lightbox--initial-left-position)),calc(-50vh + var(--sc-lightbox--initial-top-position))) scale(var(--sc-lightbox--scale));visibility:hidden}}