smart-quick-view.css
1 lines
| 1 | @charset "UTF-8";.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;user-select:none;position:relative}.sqv-element-clicked .sqv-element-loading-spin *{opacity:.6;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;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-modal-opened .sqv-modal__body{width:80vw;height:80vh;max-width:1600px;max-height:800px;position:fixed;top:50%;left:50%;opacity:1;transform:translate(-50%,-50%);background:#fff;animation:sqv-open 1s;z-index:999}.sqv-modal-opened .sqv-modal__body--close-btn{width:50px;height:50px;position:absolute;right:0;top:0;background:#f50b17;transform:scale(1) translate(20%,-20%);transform-origin:center center;border-radius:50%;text-align:center;line-height:50px;color:#fff;cursor:pointer;transition:all linear .2s}.sqv-modal-opened .sqv-modal__body--close-btn:hover{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:"✖";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:flex;align-items:center;justify-content:center;z-index:99}.sqv-element-clicked .sqv-modal--wrapper,.sqv-modal-opened .sqv-modal--wrapper{display:block}@keyframes sqv-open{0%{opacity:0}to{opacity:1}}@keyframes sqv_spin{0%{transform:rotate(0)}to{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}}.sqv-modal-opened .sqv-modal__body--close-btn{z-index:999}.sqv-iframe{width:100%;height:100%} |