vistaview 0.10.23 → 0.10.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-anim-dur: 333;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-ui-outline-color: hsl(from var(--vvw-bg-color) h s calc(l + 30) );--vvw-ui-bg-color: var(--vvw-bg-color);--vvw-ui-text-color: var(--vvw-text-color);--vvw-ui-hover-bg-color: hsl(from var(--vvw-bg-color) h s calc(l + 20) );--vvw-ui-active-bg-color: hsl(from var(--vvw-bg-color) h s calc(l + 40) );--vvw-ui-border-radius: 0px;--vvw-ui-border-width: 0px}@keyframes vvw-pulse{0%{opacity:1;border-radius:var(--vvw-init-radius);scale:1}50%{opacity:.7;border-radius:var(--vvw-pulse-radius);scale:.99}to{opacity:1;border-radius:var(--vvw-init-radius);scale:1}}@keyframes vvw-simple-pulse{0%{opacity:1}50%{opacity:.8}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.vvw-root{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;transform:none;touch-action:none}.vvw-container{position:relative;width:100%;height:100%;overflow:hidden}.vvw-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgb(from var(--vvw-bg-color) r g b / var(--vvw-bg-opacity));-webkit-backdrop-filter:blur(var(--vvw-bg-blur));backdrop-filter:blur(var(--vvw-bg-blur));opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease}.vvw-image-container{position:relative;height:100%;overflow:hidden;isolation:isolate}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden;cursor:grab}.vvw-item:active{cursor:grabbing}.vvw-item img,.vvw-item iframe.vvw-img-hi,.vvw-item div.vvw-img-hi{position:absolute;display:block;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff;background-color:red;font-size:14px;text-align:center;padding:8px 12px;margin:0;display:none;z-index:2}.vvw-item .vvw-img-lo{--vvw-init-radius: 0px;--vvw-pulse-radius: 0px;--vvw-init-x: 0px;--vvw-init-y: 0px;--vvw-current-x: 0px;--vvw-current-y: 0px;outline:1px solid rgba(255,255,255,.2);z-index:0;opacity:1;border-radius:var(--vvw-init-radius);overflow:hidden;transition:transform calc(var(--vvw-anim-dur) * 1ms) ease;transform:translate3d(var(--vvw-current-x),var(--vvw-current-y),0);background:linear-gradient(45deg,#1a1a1a,#333,#1a1a1a,#555);background-size:400% 400%;animation:vvw-gradient 3s ease-in-out infinite}.vvw-item .vvw-img-hi{--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0}.vvw-top-bar,.vvw-bottom-bar{position:absolute;top:0;left:0;width:100vw;z-index:6;display:flex;align-items:stretch;justify-content:space-between;pointer-events:none;gap:1rem}.vvw-top-bar>div,.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-top-bar>div:nth-child(2),.vvw-bottom-bar>div:nth-child(2){overflow:hidden;flex:1 1 auto}.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease;outline:1px solid var(--vvw-ui-outline-color);pointer-events:auto}.vvw-ui.vvw-index{font-size:16px;padding:8px 13px;background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui>button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:none;box-sizing:border-box;margin:0;padding:8px 12px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;height:100%;background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color)}.vvw-ui>button:disabled{color:rgb(from var(--vvw-ui-text-color) r g b / .5);cursor:not-allowed}.vvw-ui>button:hover{background-color:var(--vvw-ui-hover-bg-color)}.vvw-ui>button:active{background-color:var(--vvw-ui-active-bg-color)}.vvw-ui>button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vvw-ui.vvw-prev button,.vvw-ui.vvw-next button{padding:1rem .5rem}.vvw-ui.vvw-prev{position:absolute;top:50%;left:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}@media(min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-arrow-sm .vvw-ui.vvw-prev,.vvw-arrow-sm .vvw-ui.vvw-next{display:flex}.vvw-root.vvw--active{opacity:1;transition:z-index 0ms calc(var(--vvw-anim-dur) * 1ms) ease;z-index:var(--vvw-dest-z)}.vvw-root.vvw--active .vvw-bg{opacity:1}.vvw-root.vvw--active .vvw-img-lo{--vvw-current-x: 0px !important;--vvw-current-y: 0px !important}.vvw-root.vvw--active .vvw-ui{opacity:1}.vvw-root.vvw--settled .vvw-img-lo{animation:vvw-pulse 1s infinite,vvw-gradient 3s ease-in-out infinite;animation-delay:calc(var(--vvw-anim-dur) * 2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+.vvw--loaded){animation:none;opacity:0}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{transition:border-radius calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1;border-radius:0}.vvw-root.vvw--closing{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 2ms) ease,transform 0s calc(var(--vvw-anim-dur) * 2ms) ease,z-index 0s calc(var(--vvw-anim-dur) * 1ms) ease;transform:scale(1);z-index:var(--vvw-init-z);opacity:0!important}.vvw-root.vvw--closing .vvw-img-err:has(~img.vvw--loaderror){display:none}.vvw-root.vvw--closing .vvw-img-hi.vvw--loaded,.vvw-root.vvw--closing .vvw-img-hi.vvw--ready{transition:width calc(var(--vvw-anim-dur) * 1ms) ease,height calc(var(--vvw-anim-dur) * 1ms) ease,border-radius calc(var(--vvw-anim-dur) * 1ms) ease,top calc(var(--vvw-anim-dur) * 1ms) ease,left calc(var(--vvw-anim-dur) * 1ms) ease,translate calc(var(--vvw-anim-dur) * 1ms) ease,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0!important;top:50%!important;left:50%!important;translate:-50% -50%!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease,transform calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1!important;--vvw-current-x: var(--vvw-init-x) !important;--vvw-current-y: var(--vvw-init-y) !important}.vvw-root.vvw--closing .vvw-ui{transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw-root.vvw--closing .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw--hidden{display:none!important}.vvw--pulsing{animation:vvw-simple-pulse 1s ease-in-out infinite}
|
|
1
|
+
:root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-anim-dur: 333;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-ui-outline-color: hsl(from var(--vvw-bg-color) h s calc(l + 30) );--vvw-ui-bg-color: var(--vvw-bg-color);--vvw-ui-text-color: var(--vvw-text-color);--vvw-ui-hover-bg-color: hsl(from var(--vvw-bg-color) h s calc(l + 20) );--vvw-ui-active-bg-color: hsl(from var(--vvw-bg-color) h s calc(l + 40) );--vvw-ui-border-radius: 0px;--vvw-ui-border-width: 0px}@keyframes vvw-pulse{0%{opacity:1;border-radius:var(--vvw-init-radius);scale:1}50%{opacity:.7;border-radius:var(--vvw-pulse-radius);scale:.99}to{opacity:1;border-radius:var(--vvw-init-radius);scale:1}}@keyframes vvw-simple-pulse{0%{opacity:1}50%{opacity:.8}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.vvw-root{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;transform:none;touch-action:none}.vvw-container{position:relative;width:100%;height:100%;overflow:hidden}.vvw-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgb(from var(--vvw-bg-color) r g b / var(--vvw-bg-opacity));-webkit-backdrop-filter:blur(var(--vvw-bg-blur));backdrop-filter:blur(var(--vvw-bg-blur));opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease}.vvw-image-container{position:relative;height:100%;overflow:hidden;isolation:isolate}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden;cursor:grab}.vvw-item:active{cursor:grabbing}.vvw-item img,.vvw-item iframe.vvw-img-hi,.vvw-item div.vvw-img-hi{position:absolute;display:block;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff;background-color:red;font-size:14px;text-align:center;padding:8px 12px;margin:0;display:none;z-index:2}.vvw-item .vvw-img-lo{--vvw-init-radius: 0px;--vvw-pulse-radius: 0px;--vvw-init-x: 0px;--vvw-init-y: 0px;--vvw-current-x: 0px;--vvw-current-y: 0px;outline:1px solid rgba(255,255,255,.2);z-index:0;opacity:1;border-radius:var(--vvw-init-radius);overflow:hidden;transition:transform calc(var(--vvw-anim-dur) * 1ms) ease;transform:translate3d(var(--vvw-current-x),var(--vvw-current-y),0);background:linear-gradient(45deg,#1a1a1a,#333,#1a1a1a,#555);background-size:400% 400%;animation:vvw-gradient 3s ease-in-out infinite}.vvw-item .vvw-img-hi{--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0}.vvw-top-bar,.vvw-bottom-bar{position:absolute;top:0;left:0;width:100vw;z-index:6;display:flex;align-items:stretch;justify-content:space-between;pointer-events:none;gap:1rem}.vvw-top-bar>div,.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-top-bar>div:nth-child(2),.vvw-bottom-bar>div:nth-child(2){overflow:hidden;flex:1 1 auto}.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease;outline:1px solid var(--vvw-ui-outline-color);background-color:var(--vvw-ui-bg-color);pointer-events:auto}.vvw-ui.vvw-index{font-size:16px;padding:8px 13px;background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui>button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:none;box-sizing:border-box;margin:0;padding:8px 12px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;height:100%;background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color)}.vvw-ui>button:disabled{color:rgb(from var(--vvw-ui-text-color) r g b / .5);cursor:not-allowed}.vvw-ui>button:hover{background-color:var(--vvw-ui-hover-bg-color)}.vvw-ui>button:active{background-color:var(--vvw-ui-active-bg-color)}.vvw-ui>button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vvw-ui.vvw-prev button,.vvw-ui.vvw-next button{padding:1rem .5rem}.vvw-ui.vvw-prev{position:absolute;top:50%;left:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}@media(min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-arrow-sm .vvw-ui.vvw-prev,.vvw-arrow-sm .vvw-ui.vvw-next{display:flex}.vvw-root.vvw--active{opacity:1;transition:z-index 0ms calc(var(--vvw-anim-dur) * 1ms) ease;z-index:var(--vvw-dest-z)}.vvw-root.vvw--active .vvw-bg{opacity:1}.vvw-root.vvw--active .vvw-img-lo{--vvw-current-x: 0px !important;--vvw-current-y: 0px !important}.vvw-root.vvw--active .vvw-ui{opacity:1}.vvw-root.vvw--settled .vvw-img-lo{animation:vvw-pulse 1s infinite,vvw-gradient 3s ease-in-out infinite;animation-delay:calc(var(--vvw-anim-dur) * 2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+.vvw--loaded){animation:none;opacity:0}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{transition:border-radius calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1;border-radius:0}.vvw-root.vvw--closing{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 2ms) ease,transform 0s calc(var(--vvw-anim-dur) * 2ms) ease,z-index 0s calc(var(--vvw-anim-dur) * 1ms) ease;transform:scale(1);z-index:var(--vvw-init-z);opacity:0!important}.vvw-root.vvw--closing .vvw-img-err:has(~img.vvw--loaderror){display:none}.vvw-root.vvw--closing .vvw-img-hi.vvw--loaded,.vvw-root.vvw--closing .vvw-img-hi.vvw--ready{transition:width calc(var(--vvw-anim-dur) * 1ms) ease,height calc(var(--vvw-anim-dur) * 1ms) ease,border-radius calc(var(--vvw-anim-dur) * 1ms) ease,top calc(var(--vvw-anim-dur) * 1ms) ease,left calc(var(--vvw-anim-dur) * 1ms) ease,translate calc(var(--vvw-anim-dur) * 1ms) ease,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0!important;top:50%!important;left:50%!important;translate:-50% -50%!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease,transform calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1!important;--vvw-current-x: var(--vvw-init-x) !important;--vvw-current-y: var(--vvw-init-y) !important}.vvw-root.vvw--closing .vvw-ui{transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw-root.vvw--closing .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw--hidden{display:none!important}.vvw--pulsing{animation:vvw-simple-pulse 1s ease-in-out infinite}
|