From 35aa659bd3473aef3c4501c9c6a2fec494428924 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Fri, 9 Aug 2024 16:16:42 +0200
Subject: [PATCH] handling lightbox-gallery-styles

---
 resources/css/blocks/lightbox-gallery.css | 74 +++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 resources/css/blocks/lightbox-gallery.css

diff --git a/resources/css/blocks/lightbox-gallery.css b/resources/css/blocks/lightbox-gallery.css
new file mode 100644
index 0000000..f65f773
--- /dev/null
+++ b/resources/css/blocks/lightbox-gallery.css
@@ -0,0 +1,74 @@
+.lightbox-gallery {
+  @apply grid grid-cols-3 gap-6;
+  img {
+    @apply h-full w-full object-cover max-h-80;
+  }
+}
+
+.lightbox {
+  @apply fixed inset-0 w-full h-full z-40 bg-opacity-75 flex items-start justify-center;
+  /* backdrop-filter: blur(10px) lightness(20%); */
+  backdrop-filter: brightness(50%) blur(1px);
+  overflow-y: auto;
+  animation: lightboxIn 0.5s;
+
+  &--inactive {
+    @apply hidden;
+  }
+
+  &__prev,
+  &__next {
+    @apply absolute top-1/2 transform -translate-y-1/2 z-50;
+    transition: all 0.3s;
+    &:hover {
+      @apply scale-110;
+    }
+  }
+
+  &__prev {
+    @apply left-8;
+    img {
+      @apply rotate-180;
+    }
+  }
+
+  &__next {
+    @apply right-8;
+  }
+
+  &__close {
+    @apply absolute flex items-center top-0 right-0 m-4 text-neutral-900 text-base font-bold;
+    &:after {
+      @apply w-4 h-4 ml-4;
+      content: '';
+      display: inline-block;
+      background-image: url('../resources/img/graphic-assets/cross-close.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+  &__container {
+    @apply relative flex justify-center items-center bg-white;
+    width: 90%;
+    height: fit-content;
+    min-height: 90vh;
+    @apply my-4 mx-auto;
+  }
+
+  &__current-picture {
+    img {
+      @apply h-full w-full  max-w-xl;
+
+      max-height: 60vh;
+    }
+  }
+}
+
+@keyframes lightboxIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}