monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-09 23:25:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

Added Rainbow Trail theme (#4459) dastardlysky

Browse source 
* "Rainbow Trail" Theme

* reworked theme

* created contrast in test config buttons

* not overriding live wpm color,
showing rainbow on main color selection

* updated list file colors

---------

Co-authored-by: Miodec <jack@monkeytype.com>
This commit is contained in:
DastardlySky 2023-07-31 13:54:57 +01:00 • committed by GitHub
parent 051f21a47e
commit 4bc787d33e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 250 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/static/themes/_list.json
View file

@ -1174,6 +1174,13 @@
"mainColor": "#ff8f00",
"subColor": "#651e56",
"textColor": "#fff"
},
{
"name": "rainbow_trail",
"bgColor": "#f5f5f5",
"mainColor": "#363636",
"subColor": "#4f4f4f",
"textColor": "#1f1f1f"
}
]

243
frontend/static/themes/rainbow_trail.css Normal file
View file

@ -0,0 +1,243 @@
:root {
--bg-color: #f5f5f5;
--main-color: #363636;
--caret-color: #0d0d0d;
--sub-color: #4f4f4f;
--sub-alt-color: #e0e0e0;
--text-color: #1f1f1f;
--error-color: #ff0008;
--colorful-error-color: #ff0008;
}
#top .logo .text {
background: linear-gradient(
90deg,
#60b6ce,
#7ce3e1,
#b2e259,
#f6ee75,
#f5b83d,
#f49a98,
#ed7abd,
#dea2fa,
#a966f5
);
background-size: 500% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-gradient 30s alternate ease-in-out infinite;
}
.textButton:hover,
#restartTestButton:hover > i,
#restartTestButton:hover > i,
#showWordHistoryButton:hover > i,
#saveScreenshotButton:hover > i,
#restartTestButtonWithSameWordset:hover > i,
#nextTestButton:hover > i,
#practiseWordsButton:hover > i,
#watchReplayButton:hover > i,
#watchVideoAdButton:hover > i {
background: linear-gradient(
90deg,
#60b6ce,
#7ce3e1,
#b2e259,
#f6ee75,
#f5b83d,
#f49a98,
#ed7abd,
#dea2fa,
#a966f5
);
background-size: 500% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-gradient 5s alternate ease-in-out infinite;
transition: all 1s ease;
}
.current-theme.textButton {
animation: rainbow-infinite-loop 5s alternate ease-in-out infinite;
}
.current-theme.textButton:hover {
-webkit-text-fill-color: initial;
}
@keyframes rainbow {
0% {
color: #60b6ce;
}
11.11% {
color: #7ce3e1;
}
22.22% {
color: #b2e259;
}
33.33% {
color: #f6ee75;
}
44.44% {
color: #f5b83d;
}
55.56% {
color: #f49a98;
}
66.67% {
color: #ed7abd;
}
77.78% {
color: #dea2fa;
}
88.89% {
color: #a966f5;
}
100% {
color: var(--bg-color);
}
}
@keyframes rainbow-infinite-loop {
0% {
color: #60b6ce;
}
11.11% {
color: #7ce3e1;
}
22.22% {
color: #b2e259;
}
33.33% {
color: #f6ee75;
}
44.44% {
color: #f5b83d;
}
55.56% {
color: #f49a98;
}
66.67% {
color: #ed7abd;
}
77.78% {
color: #dea2fa;
}
88.89% {
color: #a966f5;
}
100% {
color: #60b6ce;
}
}
@keyframes rainbow-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes error-repeat {
0% {
color: #ff0000;
}
100% {
color: #ff000075;
}
}
#words.flipped .word {
animation: rainbow-infinite-loop 30s linear infinite;
}
#words.flipped .word letter.correct {
color: var(--sub-color);
}
#words:not(.flipped) .word letter.correct {
animation: rainbow 7.5s ease-in-out forwards;
}
#timerNumber.timerMain,
#largeLiveWpmAndAcc.timerMain,
#miniTimerAndLiveWpm.timerMain {
animation: rainbow-infinite-loop 30s linear infinite;
}
.word letter.incorrect {
animation: error-repeat 1s alternate ease-in-out infinite;
}
.button:hover {
animation: glowing-button 2s alternate ease-in-out infinite;
}
.row .textButton:not(.active) {
color: #999999;
}
.textButton.active {
color: #111111;
}
@keyframes light-rainbow-infinite-loop {
0% {
color: #60b6ce;
}
14% {
color: #7ce3e1;
}
28% {
color: #b2e259;
}
42% {
color: #f6ee75;
}
57% {
color: #f5b83d;
}
71% {
color: #f49a98;
}
85% {
color: #ed7abd;
}
100% {
color: #dea2fa;
}
}
@keyframes glowing-button {
0% {
box-shadow: 0 0 7.5px 2.5px #60b6ce, 0 0 12.5px 2.5px #60b6ce;
}
14% {
box-shadow: 0 0 7.5px 2.5px #7ce3e1, 0 0 12.5px 2.5px #7ce3e1;
}
28% {
box-shadow: 0 0 7.5px 2.5px #b2e259, 0 0 12.5px 2.5px #b2e259;
}
42% {
box-shadow: 0 0 7.5px 2.5px #f6ee75, 0 0 12.5px 2.5px #f6ee75;
}
57% {
box-shadow: 0 0 7.5px 2.5px #f5b83d, 0 0 12.5px 2.5px #f5b83d;
}
71% {
box-shadow: 0 0 7.5px 2.5px #f49a98, 0 0 12.5px 2.5px #f49a98;
}
85% {
box-shadow: 0 0 7.5px 2.5px #ed7abd, 0 0 12.5px 2.5px #ed7abd;
}
100% {
box-shadow: 0 0 7.5px 2.5px #dea2fa, 0 0 12.5px 2.5px #dea2fa;
}
}