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

thegeeklab · Aug 31, 2023 · 2f614e6 · 2f614e6
1 parent 6d75ee9
commit 2f614e6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 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("gdoc-post__codecopy--success")
+      trigger.classList.add("gdoc-post__codecopy--success", "gdoc-post__codecopy--out")
       trigger.querySelector(".gdoc-icon.copy").classList.add("hidden")
       trigger.querySelector(".gdoc-icon.check").classList.remove("hidden")
 
       setTimeout(function () {
-        trigger.classList.remove("gdoc-post__codecopy--success")
+        trigger.classList.remove("gdoc-post__codecopy--success", "gdoc-post__codecopy--out")
         trigger.querySelector(".gdoc-icon.copy").classList.remove("hidden")
         trigger.querySelector(".gdoc-icon.check").classList.add("hidden")
       }, 3000)

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -342,7 +342,9 @@ svg.gdoc-icon {
 .gdoc-language__list {
   background: var(--body-background);
   border-radius: $border-radius;
-  box-shadow: 0 1px 3px 0 var(--accent-color-dark), 0 1px 2px 0 var(--accent-color);
+  box-shadow:
+    0 1px 3px 0 var(--accent-color-dark),
+    0 1px 2px 0 var(--accent-color);
   position: absolute;
   margin: 0;
   padding: $padding-8 $padding-4 !important;
@@ -534,6 +536,10 @@ svg.gdoc-icon {
         color: var(--code-copy-success-color);
       }
     }
+
+    &--out {
+      transition: visibility 2s ease-out;
+    }
   }
 }
 
@@ -584,7 +590,9 @@ svg.gdoc-icon {
     padding: $padding-8;
     padding-left: $padding-32;
 
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    transition:
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
     border: 1px solid transparent;
     border-radius: $border-radius;
 

diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
@@ -115,9 +115,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: #{$code-font-color-dark};
+  --code-copy-border-color: #{$code-font-color-dark};
   --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
 }
 
@@ -130,7 +130,7 @@
   --code-font-color: #{$code-font-color};
 
   --code-copy-background: #{$code-background};
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-font-color: #{$code-font-color};
   --code-copy-border-color: #{lighten($body-font-color, 48)};
   --code-copy-success-color: #{map.get($hint-colors, "ok")};
 }