Fix snackbar animation & button theming

output/index.css

@@ -96,7 +96,7 @@ a, .anchorstyle {
 /* Enumerate elements with transitions to improve performance on Chromium. */
 #theming-root, th, tr, .protocol-indicator, .copy_button,
 .td_description::after,
-#details-modal, #details-modal :is(#details-modal-copy-button, #details-modal-copy-staff-id),
+#details-modal, #details-modal .themed-button,
 a, .anchorstyle {
 	transition: color 2.5s linear, background-color 2s linear;
 }
@@ -568,7 +568,7 @@ label[for=toggle-show-room-ids]::after {
 	text-align: center;
 }
 
-#details-modal :is(#details-modal-copy-button, #details-modal-copy-staff-id) {
+#details-modal .themed-button {
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
 	border-radius: 10%;
@@ -592,16 +592,16 @@ label[for=toggle-show-room-ids]::after {
 	z-index: 1; /* Add a z-index if needed */
 	left: 50%; /* Offset the snackbar by half the viewport width */
 	transform: translateX(-50%); /* Push the snackbar back by half its width */
-	bottom: 30px; /* 30px from the bottom */
+	bottom: 0;
+	opacity: 0;
+	transition: bottom 0.5s, opacity 0.5s;
 }
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
 #copy-snackbar.show {
 	visibility: visible; /* Show the snackbar */
-	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
-	However, delay the fade out process for 2.5 seconds */
-	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-	animation: fadein 0.5s, fadeout 0.5s 2.5s;
+	bottom: 30px;  /* 30px from the bottom */
+	opacity: 1;
 }
 
 /* Responsive properties */
@@ -692,26 +692,3 @@ label[for=toggle-show-room-ids]::after {
 		--dynamic-columns-width: 15rem;
 	}
 }
-
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes fadein {
-	from {bottom: 0; opacity: 0;}
-	to {bottom: 30px; opacity: 1;}
-}
-
-@keyframes fadein {
-	from {bottom: 0; opacity: 0;}
-	to {bottom: 30px; opacity: 1;}
-}
-
-@-webkit-keyframes fadeout {
-	from {bottom: 30px; opacity: 1;}
-	to {bottom: 0; opacity: 0;}
-}
-
-@keyframes fadeout {
-	from {bottom: 30px; opacity: 1;}
-	to {bottom: 0; opacity: 0;}
-}
-
-

sites/+components/qr_modals.php

@@ -72,6 +72,7 @@
 		<p>
 			<button
 				id="details-modal-copy-button"
+				class="themed-button"
 				data-hydrate-with="join_link:data-href"
 				title="Click here to copy this Community's join link"
 			>
@@ -80,6 +81,7 @@
 
 			<button
 				id="details-modal-copy-staff-id"
+				class="themed-button"
 				data-hydrate-with="staff:data-staff"
 				title="Copy the mention for a random staff member"
 			>