Updated CSS to ensure dark mode works correctly.

PublicisSapient · Jan 27, 2025 · 169bac9 · 169bac9
1 parent 90857c6
commit 169bac9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 9 deletions.
diff --git a/css/image-gallery.css b/css/image-gallery.css
diff --git 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;