This commit is contained in:
Desktop
2025-11-13 00:26:05 +05:00
parent 5bd2b00ee4
commit 621ee60521
2 changed files with 20 additions and 30 deletions

View File

@@ -569,22 +569,28 @@ export default function Images() {
isLoading={isUpdatingStatus}
/>
{/* Lightbox */}
{/* Lightbox - Use same background as Modal */}
{lightboxOpen && (
<div className="fixed inset-0 z-[99999]">
<Lightbox
open={lightboxOpen}
close={() => setLightboxOpen(false)}
index={lightboxIndex}
slides={lightboxSlides}
on={{ view: ({ index }) => setLightboxIndex(index) }}
/>
{/* Custom Close Button - Match Modal Style */}
<button
<div className="fixed inset-0 z-[999999] flex items-center justify-center">
{/* Modal background - same as ImageQueueModal */}
<div
className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
onClick={() => setLightboxOpen(false)}
className="absolute right-3 top-3 z-[999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
aria-label="Close lightbox"
>
></div>
<div className="relative z-[9999999]">
<Lightbox
open={lightboxOpen}
close={() => setLightboxOpen(false)}
index={lightboxIndex}
slides={lightboxSlides}
on={{ view: ({ index }) => setLightboxIndex(index) }}
/>
{/* Custom Close Button - Match Modal Style */}
<button
onClick={() => setLightboxOpen(false)}
className="absolute right-3 top-3 z-[99999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
aria-label="Close lightbox"
>
<svg
width="24"
height="24"

View File

@@ -230,22 +230,6 @@
.igny8-badge-danger { background: var(--igny8-red); }
.igny8-badge-purple { background: var(--igny8-purple); }
/* ===================================================================
LIGHTBOX STYLES - Match Modal Background
=================================================================== */
/* Use same background as modals: bg-gray-400/50 backdrop-blur-[32px] */
.yarl__container {
background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
backdrop-filter: blur(32px) !important;
-webkit-backdrop-filter: blur(32px) !important;
}
.yarl__backdrop {
background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
backdrop-filter: blur(32px) !important;
-webkit-backdrop-filter: blur(32px) !important;
}
/* ===================================================================
COMPACT LAYOUT STYLES (Global - Apply to all pages)
=================================================================== */