fix(theme): inconsistent/unreadable styling on settings page when using phantom theme (@fehmer) (monkeytypegame#6446)

1. Some buttons have the color animation set like funboxes on the
settings page while others have not:

![image](https://github.com/user-attachments/assets/6c4f1ecc-6a94-4e0f-9643-6dde901f8506)

2. On the active theme button the effects overlap making it unreadable:

![image](https://github.com/user-attachments/assets/d2784c9c-34c2-40c6-8e30-5d47a39ff5f4)

3. On the footer color effect was applied to the `textButton` (like
github, discord links) but not `button` (like contract and support).
This applies to all animated themes.

Author: fehmer

frontend/static/themes/aurora.css

@@ -66,6 +66,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: aurora 5s linear infinite;
 }

frontend/static/themes/fire.css

@@ -66,6 +66,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: fire 5s linear infinite;
 }

frontend/static/themes/grape.css

@@ -66,6 +66,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: pastel 5s linear infinite;
 }

frontend/static/themes/phantom.css

@@ -104,10 +104,7 @@ input[type="submit"]:hover {
   color: var(--bg-color);
 }
 
-#caret,
-.pageSettings .section .buttons .button.active,
-.pageSettings .section.languages .buttons .language.active,
-.pageAccount .group.filterButtons .buttons .button.active {
+#caret {
   animation: tokyo-bg 3s linear infinite;
 }
 
@@ -117,13 +114,12 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: tokyo-glow 3s linear infinite;
 }
 
-.textButton.active {
-  animation: tokyo-glow 3s linear infinite;
-}
 .afk,
 .timeToday,
 #words .word letter.correct,

frontend/static/themes/rgb.css

@@ -96,6 +96,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover,
 #words.flipped .word {
   animation: rgb 5s linear infinite;

frontend/static/themes/shadow.css

@@ -44,6 +44,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: shadow-repeat 3s linear infinite forwards;
 }

frontend/static/themes/trance.css

@@ -54,6 +54,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: trance 5s linear infinite;
 }