/* * Frontend styles for Image Viewer & Magnifier. * * Intentionally minimal: * - Provides correct positioning for lens/zoom * - Leaves most appearance to Elementor style controls and theme CSS */ .mivp-figure { margin: 0; } .mivp-viewer { position: relative; overflow: hidden; max-width: 100%; cursor: zoom-in; user-select: none; -webkit-user-select: none; /* In-page widget is click-to-open overlay; keep touch behavior default. */ touch-action: manipulation; } .mivp-viewer .mivp-image { cursor: zoom-in; } .mivp-viewer .mivp-image { display: block; width: 100%; height: auto; transform-origin: 50% 50%; will-change: transform; transition: transform 120ms ease-out; } /* Fullscreen Overlay Viewer */ .mivp-overlay { position: fixed; inset: 0; background: #fff; z-index: 999999; display: none; } .mivp-overlay.is-open { display: block; } /* Optional: hide common site headers/menus while fullscreen is open. * This is controlled by a widget toggle and a class on . * It's intentionally conservative and targets the most common selectors. */ .mivp-hide-site-menu body > header, .mivp-hide-site-menu #masthead, .mivp-hide-site-menu .site-header, .mivp-hide-site-menu .site-navigation, .mivp-hide-site-menu .primary-navigation, .mivp-hide-site-menu .elementor-location-header, .mivp-hide-site-menu .elementor-sticky--active, html.mivp-hide-site-menu .wp-site-blocks > header.wp-block-template-part, html.mivp-hide-site-menu header.wp-block-template-part, .mivp-hide-site-menu .elementor-sticky--effects { display: none !important; } .mivp-overlay__content { position: relative; width: 100%; height: 100%; } .mivp-overlay__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px; background: #fff; color: #111; font-size: 28px; line-height: 1; cursor: pointer; opacity: 1; transition: opacity 140ms ease-out; } .mivp-overlay__close.is-hidden { opacity: 0; } .mivp-overlay__close svg { width: 1em; height: 1em; display: block; fill: currentColor; stroke: currentColor; } .mivp-overlay__close svg * { fill: currentColor; stroke: currentColor; } .mivp-overlay__close:hover { background: #f6f7f7; } .mivp-overlay__stage { position: absolute; inset: 0; z-index: 1; padding: 72px 24px 24px 24px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* When close button is set to hover/proximity reveal, don't permanently reserve * space above the artwork. The button fades in over the stage when needed. */ .mivp-overlay.mivp-close-hover-reveal .mivp-overlay__stage { padding-top: 24px; } .mivp-overlay__image { box-sizing: border-box; max-width: none; max-height: none; transform-origin: 50% 50%; will-change: transform; } .mivp-minimap { position: absolute; top: 16px; right: 72px; z-index: 2; width: 160px; height: 120px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.95); overflow: visible; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); opacity: 1; transition: opacity 140ms ease-out; } .mivp-minimap__clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .mivp-minimap.is-hidden { opacity: 0; pointer-events: none; } .mivp-minimap__image { width: 100%; height: 100%; object-fit: contain; display: block; } .mivp-minimap__viewport-halo { position: absolute; left: 0; top: 0; pointer-events: none; /* Keep above the clipped thumbnail, below the interactive viewport rect. */ z-index: 1; } .mivp-minimap__viewport-halo.is-pulsing { will-change: box-shadow, filter; animation: mivpMinimapViewportHaloPulse 260ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes mivpMinimapViewportHaloPulse { 0% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 45% { filter: brightness(1.1); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55), 0 0 38px rgba(255, 255, 255, 0.9); } 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .mivp-minimap__viewport { position: absolute; left: 0; top: 0; border: 2px solid rgba(0, 103, 244, 0.9); background: rgba(0, 103, 244, 0.12); box-sizing: border-box; cursor: pointer; z-index: 2; } .mivp-minimap__viewport.is-pulsing { will-change: box-shadow, border-color, background-color, filter; animation: mivpMinimapViewportPulse 260ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes mivpMinimapViewportPulse { 0% { border-color: rgba(0, 103, 244, 0.9); background-color: rgba(0, 103, 244, 0.12); filter: brightness(1); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0); } 45% { border-color: rgba(255, 255, 255, 0.95); background-color: rgba(0, 103, 244, 0.28); filter: brightness(1.25); /* Use a layered *inset* glow so it still looks like an outer halo * even when the viewport touches minimap edges (overflow clipping). */ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.98), inset 0 0 0 8px rgba(255, 255, 255, 0.18), inset 0 0 14px rgba(255, 255, 255, 0.85); } 100% { border-color: rgba(0, 103, 244, 0.9); background-color: rgba(0, 103, 244, 0.12); filter: brightness(1); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0); } } .mivp-zoom-indicator { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(80, 80, 80, 0.55); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); opacity: 1; transition: opacity 140ms ease-out; pointer-events: none; } .mivp-zoom-indicator.is-hidden { opacity: 0; } .mivp-zoom-indicator.is-pulsing { /* Pulse cue when zoom returns to 100%. * Avoids transform so it won't override positioning transforms. */ will-change: filter, box-shadow; animation: mivpZoomIndicatorPulse 260ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes mivpZoomIndicatorPulse { 0% { filter: brightness(1) saturate(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); text-shadow: none; } 45% { filter: brightness(1.9) saturate(1.25); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), 0 0 0 6px rgba(255, 255, 255, 0.55); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 255, 255, 0.85); } 100% { filter: brightness(1) saturate(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); text-shadow: none; } } .mivp-viewer:focus { outline: 2px solid rgba(0, 103, 244, 0.6); outline-offset: 2px; } /* Right-click protection tooltip */ .mivp-right-click-tooltip { position: absolute; z-index: 10; padding: 8px 14px; border-radius: 6px; background: rgba(0, 0, 0, 0.82); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%) translateY(-12px) scale(0.92); transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); } .mivp-right-click-tooltip.is-visible { opacity: 1; transform: translate(-50%, -100%) translateY(-12px) scale(1); } /* Fixed positioning variant for thumbnail (body-level) tooltip */ .mivp-right-click-tooltip--fixed { position: fixed; } /* Legacy lens styles removed from primary UX (fullscreen overlay replaces lens). */ .mivp-notice { /* Small fallback notice shown when no image is selected. */ padding: 10px 12px; border: 1px solid #ccd0d4; background: #fff; color: #1d2327; }