monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 15:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

theme improvements

Browse source 
updated color rainbow
added animatoin to logo
fixed caret animation
rainbow now starts with green
closes #2384
This commit is contained in:
Miodec 2022-01-31 23:01:57 +01:00
parent d29c33ad43
commit b21dfec158
1 changed files with 51 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
static/themes/rgb.css
View file

@ -12,48 +12,78 @@
@keyframes rgb {
0% {
color: #f44336;
color: hsl(120, 39%, 49%);
}
25% {
color: #ffc107;
20% {
color: hsl(192, 48%, 48%);
}
50% {
color: #4caf50;
40% {
color: hsl(264, 90%, 58%);
}
75% {
color: #3f51b5;
60% {
color: hsl(357, 89%, 50%);
}
80% {
color: hsl(46, 100%, 51%);
}
100% {
color: #f44336;
color: hsl(120, 39%, 49%);
}
}
@keyframes rgb-bg {
0% {
background: #f44336;
background: hsl(120, 39%, 49%);
}
25% {
background: #ffc107;
20% {
background: hsl(192, 48%, 48%);
}
50% {
background: #4caf50;
40% {
background: hsl(264, 90%, 58%);
}
75% {
background: #3f51b5;
60% {
background: hsl(357, 89%, 50%);
}
80% {
background: hsl(46, 100%, 51%);
}
100% {
background: #f44336;
background: hsl(120, 39%, 49%);
}
}
@keyframes rgb-fill {
0% {
fill: hsl(120, 39%, 49%);
}
20% {
fill: hsl(192, 48%, 48%);
}
40% {
fill: hsl(264, 90%, 58%);
}
60% {
fill: hsl(357, 89%, 50%);
}
80% {
fill: hsl(46, 100%, 51%);
}
100% {
fill: hsl(120, 39%, 49%);
}
}
.button.discord::after,
#caret,
.pageSettings .section .buttons .button.active,
.pageSettings .section.languages .buttons .language.active,
.pageAccount .group.filterButtons .buttons .button.active {
animation: rgb-bg 5s linear infinite;
}
#caret {
animation: rgb-bg 5s linear infinite !important;
}
#top.focus .button.discord::after,
#top .button.discord.dotHidden::after {
animation-name: none !important;
@ -81,3 +111,7 @@ a:hover,
#words:not(.flipped) .word letter.correct {
animation: rgb 5s linear infinite;
}
#top .logo path {
animation: rgb-fill 5s linear infinite;
}