Disable copy button until animation completes, fix the fill animation color, change how animations/transitions are disabled

CHANGELOG.md

@@ -28,8 +28,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add margin between comment author name and timestamp.
 - Add missing edge highlight to active footer navbar links.
 - Make comment timestamp more subtle.
+- Make the copy button inactive after it is pressed until the animation is complete.
 - Reduce the target heading transition time.
 - Reduce top margin of the target heading.
+- Set animation/transition duration to 0s with `prefers-reduced-motion' instead of removing them altogether.
 - Set socials icons as CSS variables and not inline styles.
 - Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
 - Tweak padding of verified instance badge.

sass/_comments.scss

@@ -21,10 +21,8 @@
 		margin-block-start: 2rem;
 
 		#load-comments {
-			background-image: linear-gradient(to right,
+			--shine: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
-					var(--fg-muted-1) 50%,
+			background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shine) 75%, var(--fg-muted-1) 100%);
-					var(--primary-color-alpha) 75%,
-					var(--fg-muted-1) 100%);
 			background-size: 200%;
 			background-color: transparent;
 

sass/_general.scss

@@ -84,11 +84,10 @@ body {
 }
 
 @media (prefers-reduced-motion) {
-
 	*,
 	*::before,
 	*::after {
-		animation: none !important;
+		animation-duration: 0s !important;
-		transition: none !important;
+		transition-duration: 0s !important;
 	}
 }

sass/_pre-container.scss

@@ -4,13 +4,9 @@
 	border-radius: var(--rounded-corner);
 
 	.header {
+		--shine: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
 		border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
-		background-image: linear-gradient(
+		background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shine) 75%, var(--fg-muted-1) 100%);
-			to right,
-			var(--fg-muted-1) 50%,
-			var(--primary-color-alpha) 75%,
-			var(--fg-muted-1) 100%
-		);
 		background-size: 200%;
 		padding: 0.25rem;
 		height: 2.5rem;
@@ -48,6 +44,14 @@
 				transform: var(--active);
 			}
 
+			&:disabled {
+				cursor: not-allowed;
+
+				&:active {
+					transform: none;
+				}
+			}
+
 			.icon {
 				--icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
 				-webkit-mask-image: var(--icon);
@@ -63,9 +67,8 @@
 			animation: active-fill var(--transition-long);
 
 			button {
-				&:hover {
+				box-shadow: var(--edge-highlight);
 				background-color: var(--primary-color-alpha);
-				}
 
 				.icon {
 					--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");

templates/partials/copy_button.html

@@ -36,22 +36,24 @@
 				container.appendChild(block);
 
 				button.addEventListener("click", async () => {
-					await copyCode(block, header);
+					await copyCode(block, header, button); // Pass the button here
 				});
 			}
 		});
 
-		async function copyCode(block, header) {
+		async function copyCode(block, header, button) {
 			let code = block.querySelector("code");
 			let text = code.innerText;
 
 			await navigator.clipboard.writeText(text);
 
 			header.classList.add("active");
+			button.setAttribute("disabled", true);
 
-			setTimeout(() => {
+			header.addEventListener("animationend", () => {
 				header.classList.remove("active");
-			}, 800);
+				button.removeAttribute("disabled");
+			}, { once: true });
 		}
 	});
 </script>