monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-04 04:51:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

Aurora theme (#2358) by aqeelshamz

Browse source 
* Add Aurora Theme

* Add Aurora Theme
This commit is contained in:
Aqeel 2022-01-27 20:35:32 +05:30 committed by GitHub
parent 5fbff79037
commit 9b73411bc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/themes/_list.json
View file

@ -694,4 +694,9 @@
"bgColor": "linear-gradient(to right, #b31313, #ff9000, #fdda16)",
"mainColor": "#ffffff"
}
,{
"name": "aurora",
"bgColor": "linear-gradient(to right, #002c39, #015061, #007a7f, #00e980, #00ffbb)",
"mainColor": "#ffffff"
}
]

78
static/themes/aurora.css Normal file
View file

@ -0,0 +1,78 @@
:root {
--bg-color: #011926;
--main-color: #00e980;
--caret-color: #00e980;
--sub-color: #245c69;
--text-color: #fff;
--error-color: #b94da1;
--error-extra-color: #9b3a76;
--colorful-error-color: #b94da1;
--colorful-error-extra-color: #9b3a76;
}
@keyframes rgb {
0% {
color: #009fb4;
}
25% {
color: #00e975;
}
50% {
color: #00ffea;
}
75% {
color: #00e975;
}
100% {
color: #009fb4;
}
}
@keyframes rgb-bg {
0% {
background: #009fb4;
}
25% {
background: #00e975;
}
50% {
background: #00ffea;
}
75% {
background: #00e975;
}
100% {
background: #009fb4;
}
}
.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;
}
#top.focus .button.discord::after,
#top .button.discord.dotHidden::after {
animation-name: none !important;
}
.logo .bottom,
#top .config .group .buttons .text-button.active,
#result .stats .group .bottom,
#menu .icon-button:hover,
#top .config .group .buttons .text-button:hover,
a:hover,
#words.flipped .word {
animation: rgb 5s linear infinite;
}
#words.flipped .word letter.correct {
color: var(--sub-color);
}
#words:not(.flipped) .word letter.correct {
animation: rgb 5s linear infinite;
}