Reduced dynamic fade in dark mode

For #3203

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 0a7a689f7dec53043ffbf576ba3c418f06eb6d43..7d408cd1b5f24fdcb41f42e18e8b680bf9baa899 100644 (file)
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -238,13 +238,13 @@
 }
 
 .fade-in-when-active {
-  opacity: 0.6;
+  @include lightDark(opacity, 0.6, 0.7);
   transition: opacity ease-in-out 120ms;
   &:hover, &:focus-within {
-    opacity: 1;
+    opacity: 1 !important;
   }
   @media (prefers-contrast: more) {
-    opacity: 1;
+    opacity: 1 !important;
   }
 }
 

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 783ccc8f9476cb455e71c6186c346e2695ba1b9e..69882d40deb4c5eafe551c8cd0835dfc066b3ad1 100644 (file)
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -361,16 +361,13 @@ body.flexbox {
     display: none;
   }
   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
-    opacity: 0.6;
+    @include lightDark(opacity, 0.6, 0.7);
     transition: opacity ease-in-out 120ms;
-    &:hover {
-      opacity: 1;
-    }
-    &:focus-within {
-      opacity: 1;
+    &:hover, &:focus-within {
+      opacity: 1 !important;
     }
     @media (prefers-contrast: more) {
-      opacity: 1;
+      opacity: 1 !important;
     }
   }
 

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index c46ac84f35e45f09ebd89cf31482fb12230af8ea..8febdcffcd4f681d4ba5b2b57ccc2ea37b56608c 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -193,7 +193,7 @@
     }
   }
   .entity-list-item.selected {
-    background-color: rgba(0, 0, 0, 0.08);
+    @include lightDark(background-color, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
   }
   .entity-list-item.no-hover {
     margin-top: -$-xs;