smart-quick-view.css
1 lines
| 1 | .sqv-modal--wrapper{display:none}.sqv-element-clicked,.sqv-modal-opened{overflow:hidden}.sqv-element-clicked .sqv-element-loading-spin{cursor:wait;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.sqv-element-clicked .sqv-element-loading-spin *{opacity:.6;-webkit-filter:grayscale(1);filter:grayscale(1);pointer-events:none}.sqv-element-clicked .sqv-element-loading-spin::before{position:absolute;content:"";width:100%;height:100%;top:0;right:0;z-index:10;cursor:wait}.sqv-element-clicked .sqv-element-loading-spin::after{content:"";border:4px solid #f3f3f3;border-radius:50%;border-top:4px solid #3498db;top:50%;left:50%;width:40px;height:40px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:15;display:inline-block;position:absolute;margin-top:-20px;margin-left:-20px}.sqv-element-clicked .sqv-modal__body{display:none}.sqv-element-clicked .sqv-modal--close-btn{z-index:999}.sqv-modal-opened .sqv-modal__body{width:80vw;height:80vh;max-width:1600px;max-height:800px;position:fixed;top:50%;left:50%;opacity:1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#fff;-webkit-animation:sqv-open 1s;animation:sqv-open 1s;z-index:9999}.sqv-modal-opened .sqv-modal__body--close-btn{width:50px;height:50px;position:absolute;right:0;top:0;background:#f50b17;-webkit-transform:scale(1) translate(20%,-20%);transform:scale(1) translate(20%,-20%);-webkit-transform-origin:center center;transform-origin:center center;border-radius:50%;text-align:center;line-height:50px;color:#fff;cursor:pointer;-webkit-transition:all linear .2s;transition:all linear .2s}.sqv-modal-opened .sqv-modal__body--close-btn:hover{-webkit-transform:translate(20%,-20%) scale(.9);transform:translate(20%,-20%) scale(.9)}.sqv-modal-opened .sqv-modal__body--close-btn .sqv-close-icon{position:relative}.sqv-modal-opened .sqv-modal__body--close-btn .sqv-close-icon::before{content:"\2716";font-style:normal}.sqv-modal-opened .sqv-modal__body--content{overflow-y:scroll;overflow-x:hidden;padding:20px 30px;height:100%}.sqv-element-clicked .sqv-modal--overlay.sqv-loading-spin-show,.sqv-modal-opened .sqv-modal--overlay{background:rgba(0,0,0,.8);position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:9999}.sqv-element-clicked .sqv-modal--wrapper,.sqv-modal-opened .sqv-modal--wrapper{display:block}@-webkit-keyframes sqv-open{0%{opacity:0}100%{opacity:1}}@keyframes sqv-open{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes sqv_spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes sqv_spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media (max-width:768px){.sqv-modal-opened .sqv-modal__body{width:90vw;height:85vh}}@media (max-width:500px){.sqv-modal-opened .sqv-modal__body{width:100vw;height:100vh}}@media (max-width:500px){.sqv-modal-opened .sqv-modal__body--close-btn{-webkit-transform:scale(1) translate(-5px,5px);transform:scale(1) translate(-5px,5px)}} |