fix: lightbox chrome z-index and layout alignment
Root cause: media container was position:absolute inset-0 but without z-index, while buttons had no z-index either — in fill mode the image painted over the buttons making close/fill-toggle unclickable. Fixes: - Media div is now absolute inset-0 (explicit), chrome bars are z-10 - Top bar is a single flex row (h-14): left spacer | counter | FILL+✕ so counter, fill toggle and close are vertically aligned at the same height instead of scattered absolute elements - Bottom bar is a flex row (h-14) centred over dots - Both bars have a linear-gradient scrim so chrome stays legible over fill-mode images without a solid background - Prev/Next arrows get z-10 so they always sit above the media - Media padding uses pt-14 pb-14 in fit mode to clear the chrome bars Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+38
-36
@@ -169,43 +169,46 @@
|
||||
aria-modal="true"
|
||||
aria-label="Media lightbox"
|
||||
>
|
||||
<!-- Gradient accent line top -->
|
||||
<div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
|
||||
<!-- ── Top chrome bar ── -->
|
||||
<div class="absolute top-0 inset-x-0 z-10 flex items-center justify-between px-2 h-14"
|
||||
style="background: linear-gradient(to bottom, rgba(5,5,16,0.85), transparent)">
|
||||
<!-- gradient accent -->
|
||||
<div class="absolute top-0 inset-x-0 h-px gradient-line"></div>
|
||||
<!-- left spacer (mirrors right buttons width) -->
|
||||
<div class="w-24"></div>
|
||||
<!-- counter centred -->
|
||||
<div class="label text-fog tabular-nums"
|
||||
x-text="`${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}`"></div>
|
||||
<!-- right actions: fill toggle + close -->
|
||||
<div class="flex items-center w-24 justify-end gap-1">
|
||||
<button
|
||||
@click="fill = !fill"
|
||||
class="w-10 h-10 flex items-center justify-center label transition-colors"
|
||||
:class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
|
||||
:aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
|
||||
x-text="fill ? 'FIT' : 'FILL'"
|
||||
></button>
|
||||
<button
|
||||
@click="close()"
|
||||
class="w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
|
||||
aria-label="Close"
|
||||
>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Counter -->
|
||||
<div class="absolute top-5 left-1/2 -translate-x-1/2 label text-fog tabular-nums"
|
||||
x-text="`${String(idx + 1).padStart(2,'0')} / ${String(items.length).padStart(2,'0')}`"></div>
|
||||
|
||||
<!-- Fill / Fit toggle -->
|
||||
<button
|
||||
@click="fill = !fill"
|
||||
class="absolute top-3 right-16 w-10 h-10 flex items-center justify-center label transition-colors"
|
||||
:class="fill ? 'text-heat hover:text-chalk' : 'text-fog hover:text-heat'"
|
||||
:aria-label="fill ? 'Switch to fit mode' : 'Switch to fill mode'"
|
||||
x-text="fill ? 'FIT' : 'FILL'"
|
||||
></button>
|
||||
|
||||
<!-- Close -->
|
||||
<button
|
||||
@click="close()"
|
||||
class="absolute top-3 right-4 w-10 h-10 flex items-center justify-center label text-fog hover:text-chalk transition-colors"
|
||||
aria-label="Close"
|
||||
>✕</button>
|
||||
|
||||
<!-- Prev -->
|
||||
<!-- ── Prev ── -->
|
||||
<button
|
||||
@click="prev()"
|
||||
x-show="items.length > 1"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
|
||||
aria-label="Previous"
|
||||
>{{ partial "icon.html" "arrow-left" }}</button>
|
||||
|
||||
<!-- Media -->
|
||||
<!-- ── Media ── -->
|
||||
<div
|
||||
class="w-full h-full flex items-center justify-center transition-all duration-300"
|
||||
:class="fill ? 'p-0' : 'px-14 md:px-20 py-14'"
|
||||
class="absolute inset-0 flex items-center justify-center transition-[padding] duration-300"
|
||||
:class="fill ? 'p-0' : 'pt-14 pb-14 px-14 md:px-20'"
|
||||
>
|
||||
<!-- Video -->
|
||||
<video
|
||||
x-show="items[idx] && items[idx].video"
|
||||
:src="items[idx] && items[idx].video ? items[idx].video : ''"
|
||||
@@ -215,7 +218,6 @@
|
||||
class="transition-all duration-300"
|
||||
controls loop muted playsinline
|
||||
></video>
|
||||
<!-- Image -->
|
||||
<img
|
||||
x-show="items[idx] && !items[idx].video"
|
||||
:src="items[idx] && !items[idx].video ? items[idx].img : ''"
|
||||
@@ -225,16 +227,19 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Next -->
|
||||
<!-- ── Next ── -->
|
||||
<button
|
||||
@click="next()"
|
||||
x-show="items.length > 1"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-fog hover:text-heat transition-colors text-xl"
|
||||
aria-label="Next"
|
||||
>{{ partial "icon.html" "arrow-right" }}</button>
|
||||
|
||||
<!-- Dot indicators -->
|
||||
<div x-show="items.length > 1" class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2">
|
||||
<!-- ── Bottom chrome bar (dots) ── -->
|
||||
<div x-show="items.length > 1"
|
||||
class="absolute bottom-0 inset-x-0 z-10 flex items-center justify-center h-14 gap-2"
|
||||
style="background: linear-gradient(to top, rgba(5,5,16,0.85), transparent)">
|
||||
<div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
|
||||
<template x-for="(item, i) in items" :key="i">
|
||||
<button
|
||||
@click="idx = i"
|
||||
@@ -244,9 +249,6 @@
|
||||
></button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Gradient accent line bottom -->
|
||||
<div class="absolute bottom-0 inset-x-0 h-px gradient-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user