vistaview 0.6.4 → 0.6.5
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/vistaview.css +1 -1
- package/package.json +1 -1
package/dist/vistaview.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-anim-dur: 333;--vvw-init-w: 0;--vvw-init-h: 0;--vvw-init-t: 0;--vvw-init-l: 0;--vvw-idx: 0;--vvw-radius: 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:.5}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-container .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;pointer-events:none}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none}.vvw-item img{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{pointer-events:auto;cursor:zoom-in;--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;--vvw-current-w: 0px;--vvw-current-h: 0px;--vvw-current-radius: 0px;width:var(--vvw-init-w);height:var(--vvw-init-h);border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0;transition:width calc(var(--vvw-anim-dur) * 1.5ms) ease,height calc(var(--vvw-anim-dur) * 1.5ms) ease,border-radius calc(var(--vvw-anim-dur) * 1.5ms) ease}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms)}.vvw-ui.vvw-top-bar,.vvw-ui.vvw-bottom-bar{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:
|
|
1
|
+
:root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-anim-dur: 333;--vvw-init-w: 0;--vvw-init-h: 0;--vvw-init-t: 0;--vvw-init-l: 0;--vvw-idx: 0;--vvw-radius: 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:.5}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-container .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;pointer-events:none}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none}.vvw-item img{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{pointer-events:auto;cursor:zoom-in;--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;--vvw-current-w: 0px;--vvw-current-h: 0px;--vvw-current-radius: 0px;width:var(--vvw-init-w);height:var(--vvw-init-h);border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0;transition:width calc(var(--vvw-anim-dur) * 1.5ms) ease,height calc(var(--vvw-anim-dur) * 1.5ms) ease,border-radius calc(var(--vvw-anim-dur) * 1.5ms) ease}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease}.vvw-ui.vvw-top-bar,.vvw-ui.vvw-bottom-bar{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:stretch;justify-content:space-between}.vvw-ui.vvw-top-bar>div,.vvw-ui.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-ui.vvw-index{font-size:16px;padding:8px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui button:disabled{color:rgb(from var(--vvw-text-color) r g b / .5);cursor:not-allowed}.vvw-ui button:hover{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 20))}.vvw-ui button:active{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 40))}.vvw-ui button.vvw-button--loading{animation:vvw-simple-pulse .5s ease-in-out infinite}.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{position:absolute;top:50%;left:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;display:flex;align-items:center;justify-content:center;z-index:2}.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-container .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(+img.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{opacity:1;width:var(--vvw-current-w);height:var(--vvw-current-h);border-radius:var(--vvw-current-radius)}.vvw-root.vvw--settled .vvw-img-hi.vvw--ready{transition:none}.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,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0;top:50%!important;left: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-container .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}
|