flo-bit.dev / blog-template
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template flo-bit.dev/blog-template/
astro blog template
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

improve copy code button

author
Florian date (Feb 21, 2025, 7:58 AM +0100) commit ae98a9df parent 2d4fb38c
+3 -3
+3 -3
src/components/CodeCopyButton.astro
··· 8 8 9 9 let copyButton = document.createElement("button"); 10 10 copyButton.className = 11 - "opacity-50 sm:opacity-20 group-hover:opacity-100 transition-opacity duration-500 absolute top-2 right-2 text-xs bg-base-200 dark:bg-base-700 border border-base-400 dark:border-base-600 py-1 px-2 rounded-xl dark:hover:bg-base-600 hover:bg-base-300"; 11 + "opacity-0 focus:opacity-100 focus:outline-base-600 dark:focus:outline-base-400 group-hover:opacity-100 w-16 transition-opacity duration-500 absolute top-3 right-3 text-xs bg-base-200 dark:bg-base-800 outline outline-base-400 dark:outline-base-800 py-1 px-2 rounded-xl dark:hover:bg-base-700 hover:bg-base-300"; 12 12 copyButton.innerHTML = copyButtonLabel; 13 13 14 14 // Add class 'group' to codeBlock ··· 40 40 let oldLabel = button.innerText; 41 41 let oldClassName = button.className; 42 42 button.className = 43 - "opacity-100 transition-opacity duration-500 absolute top-2 right-2 text-xs bg-green-200 dark:bg-green-900 border border-green-300 dark:border-green-700 text-green-800 dark:text-green-300 py-1 px-2 rounded-xl"; 44 - button.innerText = "copied!"; 43 + "opacity-100 transition-opacity duration-500 w-16 absolute top-3 right-3 text-xs bg-green-200 dark:bg-green-900 outline outline-green-300 dark:outline-green-700 text-green-800 dark:text-green-300 py-1 px-2 rounded-xl"; 44 + button.innerText = "copied"; 45 45 46 46 setTimeout(() => { 47 47 button.innerText = oldLabel;