/** * DEISO WP Pro — Tweaks X3 — Force Image Lightbox * * Self-contained. No framework, no icon font, no external asset. Every icon is * an inline SVG injected by the JS, so nothing here depends on the theme. * * Namespacing: every selector is prefixed `deiso-lb`. The overlay is appended * to and carries its own stacking context, so theme rules that target * generic class names cannot reach it. */ .deiso-lb-root { position: fixed; inset: 0; z-index: 2147483000; /* Above admin bar, sticky headers, cookie bars. */ display: flex; flex-direction: column; background: rgba(6, 14, 22, 0.94); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .deiso-lb-root.is-open { opacity: 1; visibility: visible; } /* Prevent the page behind from scrolling while open. */ html.deiso-lb-locked, body.deiso-lb-locked { overflow: hidden !important; touch-action: none; } /* ── Toolbar ─────────────────────────────────────────────────────────── */ .deiso-lb-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: linear-gradient(180deg, rgba(6, 14, 22, .85) 0%, rgba(6, 14, 22, 0) 100%); flex: 0 0 auto; } .deiso-lb-counter { color: #cfe0ec; font-size: 13px; font-weight: 600; letter-spacing: .03em; min-width: 64px; } .deiso-lb-bar-spacer { flex: 1 1 auto; } .deiso-lb-btn { appearance: none; -webkit-appearance: none; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: #fff; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease, transform .1s ease; line-height: 0; } .deiso-lb-btn:hover, .deiso-lb-btn:focus-visible { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); outline: none; } .deiso-lb-btn:active { transform: scale(.94); } .deiso-lb-btn[disabled] { opacity: .32; cursor: default; pointer-events: none; } .deiso-lb-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Download is a plain icon button, identical to every other control in the toolbar. It carries no accent colour and no text label — only the busy state differs, and only while a download is in flight. */ .deiso-lb-btn-download.is-busy { opacity: .5; pointer-events: none; } /* ── Stage ───────────────────────────────────────────────────────────── */ .deiso-lb-stage { position: relative; flex: 1 1 auto; /* Flex items default to min-height/min-width:auto, so a large image made the stage GROW instead of constraining the image — max-height:100% then resolved against the grown stage and never clamped anything. */ min-height: 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: zoom-in; } .deiso-lb-stage.is-zoomed { cursor: grab; } .deiso-lb-stage.is-panning { cursor: grabbing; } .deiso-lb-img { /* !important because this site carries theme and optimiser rules that set img dimensions with !important; without it they win inside our overlay. */ max-width: 100% !important; max-height: 100% !important; object-fit: contain; display: block; transform-origin: center center; will-change: transform; transition: transform .18s ease-out; user-select: none; -webkit-user-drag: none; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); background: rgba(255, 255, 255, .04); } .deiso-lb-img.is-dragging { transition: none; } /* Loading indicator — pure CSS, no asset. */ .deiso-lb-spinner { position: absolute; width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, .18); border-top-color: #00d13a; border-radius: 50%; animation: deiso-lb-spin .8s linear infinite; opacity: 0; transition: opacity .15s ease; pointer-events: none; } .deiso-lb-root.is-loading .deiso-lb-spinner { opacity: 1; } @keyframes deiso-lb-spin { to { transform: rotate(360deg); } } /* ── Prev / next ─────────────────────────────────────────────────────── */ .deiso-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 66px; border-radius: 12px; } .deiso-lb-nav-prev { left: 14px; } .deiso-lb-nav-next { right: 14px; } /* ── Caption ─────────────────────────────────────────────────────────── */ .deiso-lb-caption { flex: 0 0 auto; padding: 14px 20px 20px; color: #d8e6f0; font-size: 13.5px; line-height: 1.6; text-align: center; max-width: 900px; margin: 0 auto; background: linear-gradient(0deg, rgba(6, 14, 22, .85) 0%, rgba(6, 14, 22, 0) 100%); } .deiso-lb-caption:empty { display: none; } /* ── Screen-reader-only live region ──────────────────────────────────── */ .deiso-lb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Trigger affordance on the page ──────────────────────────────────── */ img.deiso-lb-trigger { cursor: zoom-in; } /* ── Mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .deiso-lb-bar { padding: 10px 10px; gap: 6px; } .deiso-lb-btn { width: 38px; height: 38px; border-radius: 9px; } .deiso-lb-nav { width: 40px; height: 56px; } .deiso-lb-nav-prev { left: 6px; } .deiso-lb-nav-next { right: 6px; } .deiso-lb-counter { font-size: 12px; min-width: 52px; } .deiso-lb-caption { font-size: 12.5px; padding: 12px 14px 16px; } } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .deiso-lb-root, .deiso-lb-img, .deiso-lb-btn { transition: none !important; } .deiso-lb-spinner { animation-duration: 2s; } }