monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-09-06 14:46:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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.
This commit is contained in:
Christian Fehmer 2025-04-17 14:31:56 +02:00 • committed by GitHub
parent fd75dd8ac8
commit 644c59cd9b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/static/themes/aurora.css
View file

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

2
frontend/static/themes/fire.css
View file

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

2
frontend/static/themes/grape.css
View file

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

10
frontend/static/themes/phantom.css
View file

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

2
frontend/static/themes/rgb.css
View file

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

2
frontend/static/themes/shadow.css
View file

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

2
frontend/static/themes/trance.css
View file

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