From 169bac99a5a5bdfd09575152988a36830a1bb0e4 Mon Sep 17 00:00:00 2001
From: Zoltan Hawryluk <zoltan.dulac@gmail.com>
Date: Mon, 27 Jan 2025 10:47:00 -0500
Subject: [PATCH] Updated CSS to ensure dark mode works correctly.

---
 css/image-gallery.css   | 27 ++++++++++++++++++++++----
 less/image-gallery.less | 43 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/css/image-gallery.css b/css/image-gallery.css
index 842818a2..11a465fe 100644
--- a/css/image-gallery.css
+++ b/css/image-gallery.css
@@ -39,6 +39,12 @@
   border: none;
   background: transparent;
 }
+.enable__is-dark-mode .gallery .thumb-nav-button {
+  filter: invert(100%);
+}
+.enable__is-dark-mode .gallery .thumbnail-button {
+  border: solid 1px #ededed;
+}
 .gallery .thumbnail-slider {
   display: flex;
   align-items: center;
@@ -54,8 +60,11 @@
   width: 60px;
   height: 40px;
   cursor: pointer;
-  opacity: 0.6;
   border-radius: 5px;
+  margin-right: 5px;
+}
+.gallery .thumbnail-slider .thumbnails .thumbnail-button:last-child {
+  margin-right: 0;
 }
 .gallery .thumbnail-slider .thumbnails .thumbnail-button img {
   width: 100%;
@@ -65,13 +74,23 @@
 .gallery .thumbnail-slider .thumbnails .thumbnail-button img:focus-visible {
   outline: none;
 }
+.gallery .thumbnail-slider .thumbnails .thumbnail-button:hover {
+  border: 0.1px solid #292929;
+}
+.enable__is-dark-mode .gallery .thumbnail-slider .thumbnails .thumbnail-button:hover {
+  border: 0.38px solid #9a6c6c;
+}
 .gallery .thumbnail-slider .thumbnails .thumbnail-button.active {
   opacity: 1;
   border: 0.38px solid #2b2b2b;
+  border-bottom-width: 3px;
 }
-.gallery .thumbnail-slider .thumbnails .thumbnail-button:hover {
-  opacity: 0.4;
-  border: 0.1px solid #2b2b2b;
+.gallery .thumbnail-slider .thumbnails .thumbnail-button.active img {
+  height: calc(100% + 3px);
+}
+.enable__is-dark-mode .gallery .thumbnail-slider .thumbnails .thumbnail-button.active {
+  border: 0.38px solid #9a6c6c;
+  border-bottom-width: 3px;
 }
 .gallery .thumbnail-slider .thumbnails .thumbnail-button:focus-visible {
   margin: 3px;
diff --git a/less/image-gallery.less b/less/image-gallery.less
index 42695378..771eb75b 100644
--- a/less/image-gallery.less
+++ b/less/image-gallery.less
@@ -28,6 +28,18 @@
         border: none;
         background: transparent;
     }
+
+    .thumb-nav-button {
+        .enable__is-dark-mode & {
+            filter: invert(100%);
+        }
+    }
+
+    .thumbnail-button {
+        .enable__is-dark-mode & {
+            border: solid 1px @dark-mode-white;
+        }
+    }
     
     .thumbnail-slider {
         display: flex;
@@ -42,8 +54,13 @@
                 width: 60px;
                 height: 40px;
                 cursor: pointer;
-                opacity: 0.6;
                 border-radius: 5px;
+                margin-right: 5px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
                 img{
                     width: 100%;
                     height: 100%;
@@ -52,14 +69,30 @@
                         outline: none;
                     }
                 } 
+                &:hover{
+                    
+                    border: .1px solid rgb(41, 41, 41);
+
+                    .enable__is-dark-mode & {
+                        border: .38px solid #9a6c6c;
+                    }
+                }
+
                 &.active{
                     opacity: 1;
                     border: .38px solid #2b2b2b;
+                    border-bottom-width: 3px;
+
+                    img {
+                        height: calc(100% + 3px);
+                    }
+
+                    .enable__is-dark-mode & {
+                        border: .38px solid #9a6c6c;
+                        border-bottom-width: 3px;
+                    }
                 }
-                &:hover{
-                    opacity: 0.4;
-                    border: .1px solid #2b2b2b;
-                }
+
                 &:focus-visible{
                     margin: 3px;
                     border: .1px solid #2b2b2b;