1234

frontend/src/pages/Writer/Images.tsx

@@ -569,9 +569,15 @@ export default function Images() {
         isLoading={isUpdatingStatus}
       />
 
-      {/* Lightbox */}
+      {/* Lightbox - Use same background as Modal */}
       {lightboxOpen && (
-        <div className="fixed inset-0 z-[99999]">
+        <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)}
+          ></div>
+          <div className="relative z-[9999999]">
             <Lightbox
               open={lightboxOpen}
               close={() => setLightboxOpen(false)}
@@ -582,7 +588,7 @@ export default function Images() {
             {/* Custom Close Button - Match Modal Style */}
             <button
               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"
+              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

frontend/src/styles/igny8-colors.css

@@ -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)
    =================================================================== */