add image-overlay

src/assets/css/style.css

@@ -10,6 +10,7 @@
   --text: #333333;
   --light-text: #5a5a5a;
   --quote: #FFB300;
+  --bg-image-overlay: rgba(0, 0, 0, 0.75);
   --bg-post: #C5E1A5;
   --border-post: #9dd162;
   --bg-post-highlight: #9dd162;
@@ -110,6 +111,7 @@ nav a:hover, nav button:hover,
   width: 100%;
   top: 0;
   left: 0;
+  z-index: 1;
 }
 
 .home-left-navigation-div {
@@ -127,7 +129,7 @@ nav a:hover, nav button:hover,
   justify-content: flex-end;
   right: 0;
   margin-right: 7vw;
-  z-index: 999;
+  z-index: 2;
 }
 
 .new-thread-view {
@@ -149,7 +151,7 @@ nav a:hover, nav button:hover,
   }
   .dropdown-content {
     transition: 0.2s ease-out;
-    z-index: 100000;
+    z-index: 2;
     position: absolute;
     top: 100%;
     left: 0;
@@ -189,7 +191,7 @@ nav a:hover, nav button:hover,
     top: 0;
     left: 0;
     opacity: 0;
-    z-index: 99;
+    z-index: 2;
   }
   &:focus-within .dropdown-close-btn:not(:focus) {
     display: inline-block;
@@ -214,6 +216,31 @@ nav a:hover, nav button:hover,
   margin-top: auto;
 }
 
+/* don't use [img] selector because it interfere with leaflet */
+.image {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+}
+
+.image-small {
+  max-width: 30vw;
+  max-height: 30vh;
+}
+
+.image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--bg-image-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+}
+
 .thread {
   margin-inline: 1vw;
   margin-block: 3vw;
@@ -314,20 +341,9 @@ nav a:hover, nav button:hover,
   gap: 10px;
 }
 
-/* TODO use image dim? better max-size? */
 .post-image-div {
 }
 
-.post-image {
-  max-width: 90vw;
-  height: auto;
-}
-
-.post-image-small {
-  max-width: 30vw;
-  max-height: 30vh;
-}
-
 .post-comment {
   color: var(--text);
   padding-top: 10px;
@@ -353,7 +369,7 @@ nav a:hover, nav button:hover,
   background-color: var(--bg-form);
   border: 2px solid var(--border-form);
   padding: 5px;
-  z-index: 999990;
+  z-index: 3;
 }
 .reply-popup-dragzone {
   display: flex;
@@ -387,7 +403,7 @@ nav a:hover, nav button:hover,
   right: 1vw;
   bottom: 1vh;
   padding: 5px;
-  z-index: 999999;
+  z-index: 4;
   background-color: var(--bg-error-popup);
   border: 2px solid var(--border-error-popup);
   border-radius: 12px;