UX: Refactor lightbox hover drop shadow

UX: Refactor lightbox hover drop shadow

For parity with auto dark mode switching, this includes a subtle effect in dark themes too.

diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index 9da91ff..e8b0671 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -26,6 +26,7 @@
   --success: #{$success};
   --love: #{$love};
 
+  --always-black-rgb: 0, 0, 0;
   --primary-rgb: #{hexToRGB($primary)};
   --primary-low-rgb: #{hexToRGB($primary-low)};
   --secondary-rgb: #{hexToRGB($secondary)};
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index 2312966..de944a2 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -74,16 +74,14 @@ $meta-element-margin: 6px;
 }
 
 .discourse-no-touch {
-  @if is-light-color-scheme() {
-    a.lightbox {
-      -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-      transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-    }
+  a.lightbox {
+    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
 
-    a.lightbox:hover {
-      border-radius: 5px;
-      box-shadow: 0 2px 5px 0 rgba(var(--primary-rgb), 0.2),
-        0 2px 10px 0 rgba(var(--primary-rgb), 0.2);
-    }
+  a.lightbox:hover {
+    border-radius: 5px;
+    box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.2),
+      0 2px 10px 0 rgba(var(--always-black-rgb), 0.2);
   }
 }

GitHub sha: 413fa490

1 Like