github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-24 22:10:39 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Robert Kaussow 2023-09-01 23:12:05 +02:00 committed by GitHub
parent 478d9a7227
commit 9f18261880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/app.js
View File

@ -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)

4
src/sass/_base.scss
View File

@ -483,6 +483,10 @@ svg.gblog-icon {
color: var(--code-copy-success-color);
}
}
&--out {
transition: visibility 2s ease-out;
}
}
}

10
src/sass/_color_mode.scss
View File

@ -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")};
}