fix: fix hover background color for the code copy box (#435)

thegeeklab · Sep 1, 2023 · 9f18261 · 9f18261
1 parent 478d9a7
commit 9f18261
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/src/js/app.js b/src/js/app.js
@@ -8,12 +8,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
     const trigger = e.trigger
 
     if (trigger.hasAttribute("data-copy-feedback")) {
-      trigger.classList.add("gblog-post__codecopy--success")
+      trigger.classList.add("gblog-post__codecopy--success", "gblog-post__codecopy--out")
       trigger.querySelector(".gblog-icon.copy").classList.add("hidden")
       trigger.querySelector(".gblog-icon.check").classList.remove("hidden")
 
       setTimeout(function () {
-        trigger.classList.remove("gblog-post__codecopy--success")
+        trigger.classList.remove("gblog-post__codecopy--success", "gblog-post__codecopy--out")
         trigger.querySelector(".gblog-icon.copy").classList.remove("hidden")
         trigger.querySelector(".gblog-icon.check").classList.add("hidden")
       }, 3000)

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -483,6 +483,10 @@ svg.gblog-icon {
         color: var(--code-copy-success-color);
       }
     }
+
+    &--out {
+      transition: visibility 2s ease-out;
+    }
   }
 }
 

diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
@@ -119,9 +119,9 @@
   --code-accent-color-lite: #{darken($code-background-dark, 2)};
   --code-font-color: #{$code-font-color-dark};
 
-  --code-copy-background: #{$body-background-dark};
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
-  --code-copy-border-color: #{lighten($body-font-color, 24)};
+  --code-copy-background: #{$code-background-dark};
+  --code-copy-font-color: #{darken($code-font-color-dark, 15)};
+  --code-copy-border-color: #{darken($code-font-color-dark, 20)};
   --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
 }
 
@@ -134,7 +134,7 @@
   --code-font-color: #{$code-font-color};
 
   --code-copy-background: #{$code-background};
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
-  --code-copy-border-color: #{lighten($body-font-color, 48)};
+  --code-copy-font-color: #{lighten($code-font-color, 15)};
+  --code-copy-border-color: #{lighten($code-font-color, 20)};
   --code-copy-success-color: #{map.get($hint-colors, "ok")};
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -483,6 +483,10 @@ svg.gblog-icon { @@
             color: var(--code-copy-success-color);
           }
         }
+        &--out {
+          transition: visibility 2s ease-out;
+        }
       }
     }
@@ Expand Down @@