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

feat(themes): add suisei theme (@moonbamijam) (#5820)

Browse source 
Co-authored-by: Christian Fehmer <fehmer@users.noreply.github.com>
Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>
This commit is contained in:
Jam Moonbami 2024-09-09 23:34:03 +08:00 committed by GitHub
parent 618d53ebff
commit 14277538c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 69 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

@ -1244,5 +1244,12 @@
"mainColor": "#e0794e",
"subColor": "#688e8f",
"textColor": "#023e3b"
},
{
"name": "suisei",
"bgColor": "#3b4a62",
"mainColor": "#bef0ff",
"subColor": "#fe9841",
"textColor": "#dbdeeb"
}
]

62
frontend/static/themes/suisei.css Normal file
View file

@ -0,0 +1,62 @@
:root {
--bg-color: #3b4a62;
--main-color: #bef0ff;
--caret-color: #bef0ff;
--sub-color: #fe9841;
--sub-alt-color: #313e55;
--text-color: #dbdeeb;
--error-color: #ed2939;
--error-extra-color: #ce122c;
--colorful-error-color: #ed2939;
--colorful-error-extra-color: #ce122c;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
header #logo .text {
background: linear-gradient(120deg, var(--main-color), var(--sub-color));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
padding-bottom: 0.1em;
}
header #logo .text .top {
color: var(--main-color);
}
header.focus #logo .text {
background: linear-gradient(-120deg, var(--main-color), var(--sub-color));
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding-bottom: 0.1em;
}
header.focus nav > .textButton,
header.focus nav > .showAlerts {
background: none;
}
header nav > .textButton,
header nav > .showAlerts {
border-radius: 150px 150px 32px 32px;
background-color: var(--sub-alt-color);
color: var(--main-color);
}
header nav > .textButton:hover,
header nav > .showAlerts:hover {
animation: pulse 800ms ease-out infinite;
color: var(--main-color);
background-color: var(--sub-alt-color);
}
header nav > .view-leaderboards,
header nav > .view-leaderboards:hover {
color: var(--sub-color);
}