vistaview 1.0.3 → 2.0.0

package/main/dist/lib/vista-view.js

@@ -0,0 +1,576 @@
+import { DefaultOptions } from './defaults/options';
+import { vistaViewComponent } from './components';
+import { imageSetup } from './defaults/image-setup';
+import { init } from './defaults/init';
+import { open } from './defaults/open';
+import { close } from './defaults/close';
+import { transition } from './defaults/transition';
+import { VistaImage } from './vista-image';
+import { Throttle } from './throttle';
+import { VistaState } from './vista-state';
+import { VistaHiresTransition } from './vista-hires-transition';
+import { parseElement } from './utils/parse-element';
+import { VistaImageEvent } from './vista-image-event';
+export const GlobalVistaState = {
+    somethingOpened: null,
+};
+export class VistaView {
+    options;
+    state = new VistaState();
+    imageContainer = null;
+    externalPointerListener = [];
+    elements;
+    eventHandlers = null;
+    imageSetupFunction = imageSetup;
+    initFunction = init;
+    openFunction = open;
+    closeFunction = close;
+    transitionFunction = transition;
+    throttle = new Throttle();
+    root = null;
+    onClickElements = (e) => {
+        e.preventDefault();
+        const list = this.qsOrigin(this.elements);
+        const index = Array.prototype.indexOf.call(list, e.currentTarget);
+        this.open(index);
+    };
+    defaultOnClickHandler = (e) => e.preventDefault();
+    constructor(elements, options = {}) {
+        this.elements = elements;
+        this.options = {
+            ...DefaultOptions,
+            ...options,
+            controls: {
+                ...DefaultOptions.controls,
+                ...options.controls,
+            },
+        };
+        // setup user defined functions
+        if (this.options.imageSetupFunction) {
+            this.imageSetupFunction = this.options.imageSetupFunction;
+        }
+        if (this.options.closeFunction) {
+            this.closeFunction = this.options.closeFunction;
+        }
+        if (this.options.initFunction) {
+            this.initFunction = this.options.initFunction;
+        }
+        if (this.options.transitionFunction) {
+            this.transitionFunction = this.options.transitionFunction;
+        }
+        // Register all extensions
+        this.options.extensions?.forEach((ext) => {
+            this.state.extensions.add(ext);
+        });
+        // detect reduced motion
+        this.state.isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        // set click listeners on elements
+        this.reset();
+        // run init function
+        this.initFunction(this);
+    }
+    reset() {
+        if (typeof this.elements === 'string') {
+            const list = this.qsOrigin(this.elements);
+            this.state.elmLength = list.length;
+            list.forEach((el) => {
+                const e = el;
+                e.removeEventListener('click', this.defaultOnClickHandler);
+                e.removeEventListener('pointerup', this.onClickElements);
+                e.addEventListener('click', this.defaultOnClickHandler);
+                e.addEventListener('pointerup', this.onClickElements);
+            });
+        }
+        else {
+            this.state.elmLength = this.elements.length;
+        }
+    }
+    // ============================================================================
+    // HELPER METHODS
+    // ============================================================================
+    qs(selector) {
+        return this.root ? this.root.querySelector(selector) : null;
+    }
+    qsOrigin(selector) {
+        return document.querySelectorAll(selector);
+    }
+    registerPointerListener(listener) {
+        this.externalPointerListener.push(listener);
+    }
+    getChildElements(positionalIndex, index) {
+        const images = [];
+        const htmls = [];
+        const elements = typeof this.elements === 'string'
+            ? this.qsOrigin(this.elements)
+            : this.elements;
+        for (let i = -positionalIndex; i <= positionalIndex; i++) {
+            const elmIndex = (index + i + elements.length) % elements.length;
+            const elm = elements[elmIndex];
+            const parsedElm = elm instanceof HTMLElement
+                ? parseElement(elm)
+                : { config: elm, origin: undefined, parsedSrcSet: undefined };
+            const params = {
+                elm: parsedElm,
+                pos: i,
+                index: elmIndex,
+                vistaView: this,
+                maxZoomLevel: this.options.maxZoomLevel,
+                transitionShouldWait: () => this.isRapidSwap,
+                onScale: ({ vistaImage, isMin, isMax, }) => {
+                    if (vistaImage.index === this.state.currentIndex) {
+                        this.state.zoomedIn = !isMin;
+                        if (isMin) {
+                            this.qs('.vvw-zoom-out')?.setAttribute('disabled', 'true');
+                        }
+                        else {
+                            this.qs('.vvw-zoom-out')?.removeAttribute('disabled');
+                        }
+                        if (isMax) {
+                            this.qs('.vvw-zoom-in')?.setAttribute('disabled', 'true');
+                        }
+                        else {
+                            this.qs('.vvw-zoom-in')?.removeAttribute('disabled');
+                        }
+                    }
+                },
+            };
+            let vistaBox = null;
+            this.state.extensions.forEach((ext) => {
+                if (!vistaBox && ext.onInitializeImage) {
+                    vistaBox = ext.onInitializeImage(params);
+                }
+            });
+            const vistaImg = vistaBox ?? new VistaImage(params);
+            const div = document.createElement('div');
+            div.className = 'vvw-item';
+            div.dataset.vvwPos = `${i}`;
+            div.dataset.vvwIdx = `${elmIndex}`;
+            if (vistaImg.thumb)
+                div.appendChild(vistaImg.thumb);
+            div.appendChild(vistaImg.element);
+            images.push(vistaImg);
+            htmls.push(div);
+        }
+        return {
+            htmls,
+            images,
+        };
+    }
+    // ============================================================================
+    // SWAP LOGIC - handles image transitions between prev/next
+    // ============================================================================
+    lastSwapTime = 0;
+    isRapidSwap = false;
+    isRapidSwapRelease = null;
+    transitionCleanup = null;
+    async swap(beforeIndex, via) {
+        // reactivate UI elements
+        // before anything
+        this.reactivateUi();
+        const allImage = this.options.preloads || 0;
+        const index = this.state.currentIndex;
+        const { htmls, images } = this.getChildElements(allImage, index);
+        const imgc = this.imageContainer;
+        const c = this.state.children;
+        const vistaData = {
+            htmlElements: { from: c.htmls, to: htmls },
+            images: { from: c.images, to: images },
+            index: { from: beforeIndex, to: this.state.currentIndex },
+            via: via || { next: false, prev: false },
+        };
+        this.imageSetupFunction(vistaData, this);
+        // RESET ZOOM STATE
+        this.state.zoomedIn = false;
+        this.qs('.vvw-zoom-out')?.setAttribute('disabled', 'true');
+        this.qs('.vvw-zoom-in')?.removeAttribute('disabled');
+        // Check if this is a rapid swap (user navigating quickly)
+        const now = performance.now();
+        const rapid = now - this.lastSwapTime < this.options.rapidLimit;
+        this.isRapidSwap = rapid;
+        // can only setDescription after state.children is updated
+        // so we cache current images first
+        const { images: currentImages } = this.state.children;
+        this.state.children = { htmls, images };
+        this.displayCurrentInfo();
+        if (rapid) {
+            // Cancel pending image loads from previous swap
+            currentImages.forEach((img) => {
+                img.cancelPendingLoad();
+                img.destroy();
+            });
+        }
+        else {
+            // NORMAL SWAP: Run transition animation
+            const abortControllerSignal = this.state.abortController.signal;
+            const res = this.transitionFunction(vistaData, abortControllerSignal, this);
+            if (res) {
+                this.transitionCleanup = res.cleanup;
+                await res.transitionEnded;
+            }
+            this.lastSwapTime = performance.now();
+            // Cancel pending image loads from previous swap
+            currentImages.forEach((img) => {
+                img.cancelPendingLoad();
+            });
+            // Preserve animation state from old center image to avoid jarring resets
+            // -----
+            const img0 = currentImages.find((img) => img.index === index);
+            const transitionState = img0 ? VistaHiresTransition.stop(img0) : undefined;
+            const nextImg0 = images.find((img) => img.index === index);
+            if (nextImg0 && img0) {
+                nextImg0.cloneStyleFrom(img0, transitionState);
+            }
+            currentImages.forEach((img) => {
+                img.destroy();
+            });
+        }
+        // swap elements
+        imgc.innerHTML = '';
+        if (this.transitionCleanup) {
+            this.transitionCleanup();
+            // this.transitionCleanup = null;
+        }
+        htmls.forEach((vistaImg) => {
+            imgc.appendChild(vistaImg);
+        });
+        images.forEach((img) => {
+            img.init();
+        });
+        if (rapid) {
+            // Set cooldown period before allowing normal transitions again
+            if (this.isRapidSwapRelease)
+                clearTimeout(this.isRapidSwapRelease);
+            this.isRapidSwapRelease = setTimeout(() => {
+                this.isRapidSwap = false;
+            }, 333);
+        }
+        else {
+            this.isRapidSwap = false;
+        }
+        this.options.onImageView && this.options.onImageView(vistaData, this);
+        this.state.extensions.forEach((ext) => {
+            ext.onImageView && ext.onImageView(vistaData, this);
+        });
+    }
+    // ============================================================================
+    // UI UPDATES
+    // ============================================================================
+    displayCurrentInfo() {
+        const cid = this.state.currentIndex;
+        // set opacity in element
+        if (typeof this.elements === 'string') {
+            this.qsOrigin(this.elements).forEach((el, idx) => {
+                el.style.opacity = '';
+                if (idx === cid) {
+                    el.style.opacity = '0';
+                }
+            });
+        }
+        const indexDisplay = this.qs('.vvw-index');
+        const indexText = `${cid + 1}`;
+        const indexTotal = `${this.state.elmLength}`;
+        if (indexDisplay) {
+            indexDisplay.textContent = `${indexText} / ${indexTotal}`;
+        }
+        const description = this.qs('.vvw-desc');
+        if (description) {
+            const currentImg = this.state.children.images.find((img) => img.index === cid);
+            const descText = currentImg?.config.alt || '';
+            if (descText) {
+                description.textContent = descText;
+                description.setAttribute('aria-label', `Image ${indexText} of ${indexTotal}: ${descText}`);
+                description.style.opacity = '';
+            }
+            else {
+                description.textContent = '';
+                description.setAttribute('aria-label', `Image ${indexText} of ${indexTotal}`);
+                description.style.opacity = '0';
+            }
+        }
+    }
+    // ============================================================================
+    // ACTIVATE/DEACTIVATE UI ELEMENTS
+    // ============================================================================
+    tempDeactivatedUi = [];
+    tempDeactivationRequestBy = null;
+    deactivateUi(names, requestBy) {
+        names.forEach((name) => {
+            if (name === 'zoomIn') {
+                this.qs('.vvw-zoom-in')?.setAttribute('disabled', 'true');
+            }
+            else if (name === 'zoomOut') {
+                this.qs('.vvw-zoom-out')?.setAttribute('disabled', 'true');
+            }
+            this.tempDeactivatedUi.push(name);
+        });
+        this.tempDeactivationRequestBy = requestBy || null;
+        this.state.extensions.forEach((ext) => {
+            ext.onDeactivateUi && ext.onDeactivateUi(names, this.tempDeactivationRequestBy, this);
+        });
+    }
+    reactivateUi() {
+        this.tempDeactivatedUi.forEach((name) => {
+            if (name === 'zoomIn') {
+                this.qs('.vvw-zoom-in')?.removeAttribute('disabled');
+            }
+            else if (name === 'zoomOut') {
+                this.qs('.vvw-zoom-out')?.removeAttribute('disabled');
+            }
+        });
+        this.state.extensions.forEach((ext) => {
+            ext.onReactivateUi &&
+                ext.onReactivateUi(this.tempDeactivatedUi, this.tempDeactivationRequestBy, this);
+        });
+        this.tempDeactivatedUi = [];
+        this.tempDeactivationRequestBy = null;
+    }
+    // ============================================================================
+    // LIFECYCLE METHODS - open, close, destroy
+    // ============================================================================
+    // OPEN
+    open(startIndex = 0) {
+        if (GlobalVistaState.somethingOpened) {
+            console.warn('Another VistaView instance is already opened. Close it first before opening a new one.');
+            return;
+        }
+        GlobalVistaState.somethingOpened = this;
+        // reset elm calculation
+        this.reset();
+        if (startIndex < 0 || startIndex >= this.state.elmLength) {
+            // get the looped start index
+            startIndex =
+                ((startIndex % this.state.elmLength) + this.state.elmLength) % this.state.elmLength;
+        }
+        this.state.currentIndex = startIndex;
+        // Prevent body scrolling
+        document.body.style.overflow = 'hidden';
+        // setting up root component
+        const root = vistaViewComponent({
+            controls: this.options.controls,
+            extensions: this.state.extensions,
+        });
+        document.body.append(root);
+        this.root = document.body.querySelector('#vvw-root');
+        if (!this.root) {
+            throw new Error('Failed to setup VistaView root element.');
+        }
+        this.imageContainer = this.qs('.vvw-image-container');
+        // add options
+        if (this.options.animationDurationBase) {
+            this.root.style.setProperty('--vvw-anim-dur', `${this.options.animationDurationBase}`);
+        }
+        if (this.options.initialZIndex !== undefined) {
+            this.root.style.setProperty('--vvw-init-z', `${this.options.initialZIndex ?? 0}`);
+        }
+        if (this.options.arrowOnSmallScreens) {
+            this.root.classList.add('vvw-arrow-sm');
+        }
+        // setting up image, with preloads
+        const allImage = this.options.preloads || 0;
+        const index = startIndex;
+        const { images, htmls } = this.getChildElements(allImage, index);
+        const vistaData = {
+            htmlElements: { from: null, to: htmls },
+            images: { from: null, to: images },
+            index: { from: null, to: this.state.currentIndex },
+            via: { next: false, prev: false },
+        };
+        this.imageSetupFunction(vistaData, this);
+        this.state.children = { htmls, images };
+        htmls.forEach((vistaImg) => {
+            this.imageContainer.appendChild(vistaImg);
+        });
+        images.forEach((img) => {
+            img.init();
+        });
+        // set action buttons
+        // set buttons' event listeners
+        this.qs('.vvw-close')?.addEventListener('click', () => this.close());
+        this.qs('.vvw-zoom-in')?.addEventListener('click', () => this.zoomIn());
+        this.qs('.vvw-zoom-out')?.addEventListener('click', () => this.zoomOut());
+        this.qs('.vvw-prev>button')?.addEventListener('click', () => this.prev());
+        this.qs('.vvw-next>button')?.addEventListener('click', () => this.next());
+        if (this.state.elmLength < 2) {
+            this.qs('.vvw-prev')?.classList.add('vvw--hidden');
+            this.qs('.vvw-next')?.classList.add('vvw--hidden');
+        }
+        // call open function, before transition
+        this.openFunction(this);
+        // listen to events
+        this.eventHandlers = new VistaImageEvent(this);
+        this.externalPointerListener.forEach((listener) => {
+            this.eventHandlers.registerPointerListener(listener);
+        });
+        this.eventHandlers.start(this.imageContainer);
+        // when using single raf, sometimes the thumbnmail jumps
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.root?.addEventListener('transitionend', () => {
+                    this.root?.classList.add('vvw--settled');
+                }, { once: true });
+                this.root.classList.add('vvw--active');
+                this.displayCurrentInfo();
+                this.options.onOpen && this.options.onOpen(this);
+                this.options.onImageView && this.options.onImageView(vistaData, this);
+                this.state.extensions.forEach((ext) => {
+                    ext.onOpen && ext.onOpen(this);
+                    ext.onImageView && ext.onImageView(vistaData, this);
+                });
+            });
+        });
+    }
+    /// CLOSE
+    async close(animate = true) {
+        if (GlobalVistaState.somethingOpened !== this) {
+            return;
+        }
+        if (!this.root) {
+            return;
+        }
+        this.eventHandlers.stop();
+        this.eventHandlers = null;
+        this.state.children.images.forEach((img) => {
+            img.prepareClose();
+        });
+        if (animate) {
+            await new Promise((resolve) => {
+                const target = 3;
+                let current = 0;
+                this.root.addEventListener('transitionend', (e) => {
+                    if (e.target !== this.root)
+                        return;
+                    current++;
+                    if (current === 2) {
+                        if (typeof this.elements === 'string') {
+                            this.state.children.images.forEach((img) => {
+                                img.destroy();
+                            });
+                            this.qsOrigin(this.elements).forEach((el) => {
+                                el.style.opacity = '';
+                            });
+                        }
+                    }
+                    if (current === target) {
+                        resolve(null);
+                    }
+                });
+                this.root.classList.add('vvw--closing');
+            });
+        }
+        else {
+            if (typeof this.elements === 'string') {
+                this.state.children.images.forEach((img) => {
+                    img.destroy();
+                });
+                this.qsOrigin(this.elements).forEach((el) => {
+                    el.style.opacity = '';
+                });
+            }
+        }
+        // this.eventHandlers.stop();
+        this.root.remove();
+        this.root = null;
+        this.imageContainer = null;
+        this.state.children = { htmls: [], images: [] };
+        this.state.currentIndex = -1;
+        //
+        this.state.children.images.forEach((img) => {
+            img.destroy();
+        });
+        // Restore body scrolling
+        document.body.style.overflow = '';
+        GlobalVistaState.somethingOpened = null;
+        this.closeFunction(this);
+        this.options.onClose && this.options.onClose(this);
+        this.state.extensions.forEach((ext) => {
+            ext.onClose && ext.onClose(this);
+        });
+    }
+    // DESTROY
+    destroy() {
+        // close without animation
+        this.close(false);
+        this.externalPointerListener = [];
+        // remove click listeners on elements
+        if (typeof this.elements === 'string') {
+            this.qsOrigin(this.elements).forEach((el) => {
+                el.removeAttribute('data-vista-idx');
+                el.removeEventListener('click', this.defaultOnClickHandler);
+                el.removeEventListener('pointerup', this.onClickElements);
+            });
+        }
+    }
+    // ============================================================================
+    // NAVIGATION METHODS - next, prev, view
+    // ============================================================================
+    next() {
+        if (GlobalVistaState.somethingOpened !== this) {
+            console.warn('This VistaView instance is not opened.');
+            return;
+        }
+        const index = (this.state.currentIndex + 1) % this.state.elmLength;
+        this.view(index, { next: true, prev: false });
+    }
+    prev() {
+        if (GlobalVistaState.somethingOpened !== this) {
+            console.warn('This VistaView instance is not opened.');
+            return;
+        }
+        const index = (this.state.currentIndex - 1 + this.state.elmLength) % this.state.elmLength;
+        this.view(index, { next: false, prev: true });
+    }
+    view(index, via) {
+        if (GlobalVistaState.somethingOpened !== this) {
+            console.warn('This VistaView instance is not opened.');
+            return;
+        }
+        if (this.state.elmLength < 2) {
+            return;
+        }
+        if (index < 0 || index >= this.state.elmLength) {
+            // get the looped index
+            index = ((index % this.state.elmLength) + this.state.elmLength) % this.state.elmLength;
+        }
+        const before = this.state.currentIndex;
+        this.state.currentIndex = index;
+        // abort previous transition
+        const abortController = this.state.abortController;
+        abortController?.abort();
+        // set abort controller
+        this.state.abortController = new AbortController();
+        this.swap(before, via);
+    }
+    // ============================================================================
+    // ZOOM CONTROLS
+    // ============================================================================
+    isZoomedIn = false;
+    zoomIn() {
+        if (GlobalVistaState.somethingOpened !== this) {
+            console.warn('This VistaView instance is not opened.');
+            return;
+        }
+        if (this.tempDeactivatedUi.includes('zoomIn')) {
+            return;
+        }
+        this.throttle.fio(() => {
+            const image = this.state.children.images.find((img) => img.pos === 0);
+            image?.animateZoom(1.68);
+        }, 'zoom', 222);
+    }
+    zoomOut() {
+        if (GlobalVistaState.somethingOpened !== this) {
+            console.warn('This VistaView instance is not opened.');
+            return;
+        }
+        if (this.tempDeactivatedUi.includes('zoomOut')) {
+            return;
+        }
+        this.throttle.fio(() => {
+            const image = this.state.children.images.find((img) => img.pos === 0);
+            image?.animateZoom(0.68);
+        }, 'zoom', 222);
+    }
+    getCurrentIndex() {
+        return this.state.currentIndex;
+    }
+}

package/main/dist/style.css

@@ -0,0 +1 @@
+:root{--vvw-bg-color:#000;--vvw-text-color:#fff;--vvw-bg-blur:10px;--vvw-bg-opacity:.8;--vvw-anim-dur:333;--vvw-init-z:1;--vvw-dest-z:2147480000;--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:1px}@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%{background-position:100%}to{background-position:0%}}.vvw-root{width:100vw;width:100dvw;height:100vh;height:100dvh;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;touch-action:none;position:fixed;top:0;left:0;overflow:hidden;transform:none}.vvw-container{width:100%;height:100%;position:relative;overflow:hidden}.vvw-bg{z-index:0;background-color:rgb(from var(--vvw-bg-color)r g b/var(--vvw-bg-opacity));width:100%;height:100%;-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;position:absolute;top:0;left:0}.vvw-image-container{isolation:isolate;height:100%;position:relative;overflow:hidden}.vvw-item{cursor:grab;width:100%;height:100%;position:relative;overflow:hidden}.vvw-item:active{cursor:grabbing}.vvw-item img,.vvw-item iframe.vvw-img-hi,.vvw-item div.vvw-img-hi{display:block;position:absolute;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{color:#fff;text-align:center;z-index:2;background-color:red;margin:0;padding:8px 12px;font-size:14px;display:none;position:absolute;top:50%;left:50%;translate:-50% -50%}.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;z-index:0;opacity:1;border-radius:var(--vvw-init-radius);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) 0 0/400% 400%;outline:1px solid #fff3;animation:3s ease-in-out infinite vvw-gradient;overflow:hidden;max-width:none!important;max-height:none!important}.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;object-fit:cover;opacity:0;overflow:hidden;max-width:none!important;max-height:none!important}.vvw-top-bar,.vvw-bottom-bar{z-index:6;pointer-events:none;justify-content:space-between;align-items:stretch;gap:1rem;width:100vw;display:flex;position:absolute;top:0;left:0}:is(.vvw-top-bar,.vvw-bottom-bar)>div{align-items:stretch;display:flex}:is(.vvw-top-bar,.vvw-bottom-bar)>div:nth-child(2){flex: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:var(--vvw-ui-border-width)solid var(--vvw-ui-outline-color);background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color);pointer-events:auto}.vvw-ui.vvw-index{padding:8px 13px;font-size:16px}.vvw-ui.vvw-desc{text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:8px 15px;font-size:14px;overflow:hidden}.vvw-ui>button{color:inherit;font:inherit;cursor:pointer;box-sizing:border-box;background:0 0;border:0;border-radius:0;outline:none;justify-content:center;align-self:stretch;align-items:center;height:100%;margin:0;padding:8px 12px;display:flex}.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{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.vvw-ui.vvw-prev button,.vvw-ui.vvw-next button{padding:1rem .5rem}.vvw-ui.vvw-prev{z-index:2;border-top-right-radius:var(--vvw-ui-border-radius);border-bottom-right-radius:var(--vvw-ui-border-radius);justify-content:center;align-items:center;display:none;position:absolute;top:50%;left:0;translate:0 -50%}.vvw-ui.vvw-next{z-index:2;border-top-left-radius:var(--vvw-ui-border-radius);border-bottom-left-radius:var(--vvw-ui-border-radius);justify-content:center;align-items:center;display:none;position:absolute;top:50%;right:0;translate:0 -50%}@media (min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-bottom-bar>div:first-child>div:last-child,.vvw-bottom-bar>div:nth-child(2)>div:last-child{border-top-right-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-bottom-bar>div:nth-child(2)>div:first-child,.vvw-bottom-bar>div:last-child>div:first-child{border-top-left-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-top-bar>div:first-child>div:last-child,.vvw-top-bar>div:nth-child(2)>div:last-child{border-bottom-right-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-top-bar>div:nth-child(2)>div:first-child,.vvw-top-bar>div:last-child>div:first-child{border-bottom-left-radius:var(--vvw-ui-border-radius);overflow:hidden}.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 0s 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:1s infinite vvw-pulse,3s ease-in-out infinite vvw-gradient;animation-delay:calc(var(--vvw-anim-dur)*2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+.vvw--loaded){opacity:0;animation:none}.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;z-index:var(--vvw-init-z);transform:scale(1);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 0s calc(var(--vvw-anim-dur)*1ms)ease;opacity:0!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important;top:50%!important;left:50%!important;translate:-50% -50%!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0s 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:1s ease-in-out infinite vvw-simple-pulse}

package/main/dist/styles/autumn-amber.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#1a0f00;--vvw-text-color:#fff8dc;--vvw-ui-outline-color:#8b4513;--vvw-ui-bg-color:#d2691e;--vvw-ui-text-color:#fff8dc;--vvw-ui-hover-bg-color:#ff8c42;--vvw-ui-active-bg-color:#ffa559;--vvw-ui-border-radius:6px}

package/main/dist/styles/cotton-candy.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .4s ease-in-out,padding-right .4s ease-in-out}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .4s ease-in-out .12s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#fff0faf2;--vvw-text-color:#c2185b;--vvw-ui-outline-color:#ffb3d9;--vvw-ui-bg-color:#ffe0f0;--vvw-ui-text-color:#c2185b;--vvw-ui-hover-bg-color:#ffc9e5;--vvw-ui-active-bg-color:#ffb3da;--vvw-ui-border-radius:18px}

package/main/dist/styles/dark-rounded.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-ui-outline-color:#333;--vvw-ui-bg-color:#222;--vvw-ui-text-color:#eee;--vvw-ui-hover-bg-color:#333;--vvw-ui-active-bg-color:#444;--vvw-ui-border-radius:5px}

package/main/dist/styles/ember-glow.css

@@ -0,0 +1 @@
+.vvw-ui{box-shadow:0 0 8px #ff572266}.vvw-ui>button{box-shadow:0 0 8px #ff572266}.vvw-ui>button svg{filter:drop-shadow(0 0 2px #ff5722)}.vvw-ui>button:hover,.vvw-ui>button:active{box-shadow:0 0 12px #ff572299}.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#0d0300;--vvw-text-color:#ffccbc;--vvw-ui-outline-color:#d84315;--vvw-ui-bg-color:#1a0a00;--vvw-ui-text-color:#ffccbc;--vvw-ui-hover-bg-color:#2d1400;--vvw-ui-active-bg-color:#401f00;--vvw-ui-border-radius:6px}

package/main/dist/styles/forest-moss.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#0d1a0d;--vvw-text-color:#d4e8d4;--vvw-ui-outline-color:#3d5a3d;--vvw-ui-bg-color:#4a6741;--vvw-ui-text-color:#d4e8d4;--vvw-ui-hover-bg-color:#5a7a52;--vvw-ui-active-bg-color:#6a8d63;--vvw-ui-border-radius:7px}

package/main/dist/styles/green-lake.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#001a14;--vvw-text-color:#e8f5f1;--vvw-ui-outline-color:#0a5f4e;--vvw-ui-bg-color:#0d7a64;--vvw-ui-text-color:#e8f5f1;--vvw-ui-hover-bg-color:#0f9677;--vvw-ui-active-bg-color:#11b389;--vvw-ui-border-radius:8px}

package/main/dist/styles/ice-crystal.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#e1f5fe;--vvw-text-color:#01579b;--vvw-ui-outline-color:#4db8ff;--vvw-ui-bg-color:#b3e5fc;--vvw-ui-text-color:#01579b;--vvw-ui-hover-bg-color:#81d4fa;--vvw-ui-active-bg-color:#4fc3f7;--vvw-ui-border-radius:2px}

package/main/dist/styles/lavender-fields.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .4s ease-out,padding-right .4s ease-out}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .4s ease-out .1s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#1a0d2e;--vvw-text-color:#f4f0ff;--vvw-ui-outline-color:#6b5b95;--vvw-ui-bg-color:#8e7cc3;--vvw-ui-text-color:#f4f0ff;--vvw-ui-hover-bg-color:#a599d6;--vvw-ui-active-bg-color:#bcb3e5;--vvw-ui-border-radius:10px}

package/main/dist/styles/midnight-gold.css

@@ -0,0 +1 @@
+.vvw-ui>button:hover,.vvw-ui>button:active{color:gold}.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#000;--vvw-text-color:khaki;--vvw-ui-outline-color:#d4af37;--vvw-ui-bg-color:#1a1a1a;--vvw-ui-text-color:khaki;--vvw-ui-hover-bg-color:#2a2a2a;--vvw-ui-active-bg-color:#3a3a3a;--vvw-ui-border-radius:4px}

package/main/dist/styles/midnight-ocean.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .5s cubic-bezier(.4,0,.2,1),padding-right .5s cubic-bezier(.4,0,.2,1)}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .5s cubic-bezier(.4,0,.2,1) .15s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#001a2e;--vvw-text-color:#a8e6ff;--vvw-ui-outline-color:#0a3d62;--vvw-ui-bg-color:#1e5f8c;--vvw-ui-text-color:#a8e6ff;--vvw-ui-hover-bg-color:#2980b9;--vvw-ui-active-bg-color:#3498db;--vvw-ui-border-radius:15px}

package/main/dist/styles/mint-chocolate.css

@@ -0,0 +1 @@
+.vvw-ui>button:hover,.vvw-ui>button:active{color:#80cbc4}.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#1a0f0a;--vvw-text-color:#b2dfdb;--vvw-ui-outline-color:#3e2723;--vvw-ui-bg-color:#5d4037;--vvw-ui-text-color:#b2dfdb;--vvw-ui-hover-bg-color:#6d4c41;--vvw-ui-active-bg-color:#7d584b;--vvw-ui-border-radius:10px}

package/main/dist/styles/neon-nights.css

@@ -0,0 +1 @@
+.vvw-ui{box-shadow:0 0 10px #ff00ff80}.vvw-ui>button{box-shadow:0 0 10px #ff00ff80}.vvw-ui>button svg{filter:drop-shadow(0 0 3px #0ff)}.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .25s,padding-right .25s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .25s 80ms}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#0a0014;--vvw-text-color:#0ff;--vvw-ui-outline-color:#f0f;--vvw-ui-bg-color:#1a0033;--vvw-ui-text-color:#0ff;--vvw-ui-hover-bg-color:#5600a1;--vvw-ui-active-bg-color:#7a00d4;--vvw-ui-border-radius:3px}

package/main/dist/styles/paper-light.css

@@ -0,0 +1 @@
+.vvw-ui{box-shadow:0 2px 4px #0000001a}.vvw-ui>button{box-shadow:0 2px 4px #0000001a}.vvw-ui>button:hover,.vvw-ui>button:active{box-shadow:0 3px 6px #00000026}.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#fffffff2;--vvw-text-color:#424242;--vvw-ui-outline-color:#e0e0e0;--vvw-ui-bg-color:#fff;--vvw-ui-text-color:#424242;--vvw-ui-hover-bg-color:#f5f5f5;--vvw-ui-active-bg-color:#ebebeb;--vvw-ui-border-radius:8px}

package/main/dist/styles/retro-arcade.css

@@ -0,0 +1 @@
+.vvw-ui{border:var(--vvw-ui-border-width)solid var(--vvw-ui-outline-color)}.vvw-ui>button,.vvw-ui.vvw-index,.vvw-ui.vvw-desc{font-weight:700}.vvw-ui>button:hover,.vvw-ui>button:active{color:#fff;border-color:#0f0}.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:visible}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .2s linear,padding-right .2s linear;overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .2s linear}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)scale(1.1)}.vvw-ui.vvw-prev button{border-radius:0}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next button{border-radius:0}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)scale(1.1)}:root{--vvw-bg-color:#000;--vvw-text-color:#ff0;--vvw-ui-outline-color:red;--vvw-ui-bg-color:#00f;--vvw-ui-text-color:#ff0;--vvw-ui-hover-bg-color:red;--vvw-ui-active-bg-color:#f33;--vvw-ui-border-radius:4px;--vvw-ui-border-width:1px}

package/main/dist/styles/soft-neutral.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#fafafa;--vvw-text-color:#5d4037;--vvw-ui-outline-color:#d7ccc8;--vvw-ui-bg-color:#efebe9;--vvw-ui-text-color:#5d4037;--vvw-ui-hover-bg-color:#d7ccc8;--vvw-ui-active-bg-color:#c9b7b0;--vvw-ui-border-radius:20px}

package/main/dist/styles/stark-minimal.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .2s linear,padding-right .2s linear}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .2s linear}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#000;--vvw-text-color:#fff;--vvw-ui-outline-color:#222;--vvw-ui-bg-color:#000;--vvw-ui-text-color:#fff;--vvw-ui-hover-bg-color:#1a1a1a;--vvw-ui-active-bg-color:#333;--vvw-ui-border-radius:0}