diff --git a/frontend/static/themes/_list.json b/frontend/static/themes/_list.json index f091b780f..e7c72ebea 100644 --- a/frontend/static/themes/_list.json +++ b/frontend/static/themes/_list.json @@ -1167,5 +1167,13 @@ "mainColor": "#8ccf7e", "subColor": "#838887", "textColor": "#dadada" + }, + { + "name": "grape", + "bgColor": "#2c003e", + "mainColor": "#ff8f00", + "subColor": "#651e56", + "textColor": "#fff" } + ] diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css new file mode 100644 index 000000000..b3ed842d7 --- /dev/null +++ b/frontend/static/themes/grape.css @@ -0,0 +1,79 @@ +:root { + --bg-color: #2c003e; + --main-color: #ff8f00; + --caret-color: #ff8f00; + --sub-color: #6e225e; + --sub-alt-color: #1f002d; + --text-color: #fff; + --error-color: #ff4081; + --error-extra-color: #bf2054; + --colorful-error-color: #ff4081; + --colorful-error-extra-color: #bf2054; +} + +@keyframes pastel { + 0% { + color: #00b8d4; + } + 25% { + color: #ffac41; + } + 50% { + color: #ffcc80; + } + 75% { + color: #ffac41; + } + 100% { + color: #00b8d4; + } +} + +@keyframes pastel-bg { + 0% { + background: #00b8d4; + } + 25% { + background: #ffac41; + } + 50% { + background: #ffcc80; + } + 75% { + background: #ffac41; + } + 100% { + background: #00b8d4; + } +} + +.button.discord::after, +#caret, +.pageSettings .section .buttons .button.active, +.pageSettings .section.languages .buttons .language.active, +.pageAccount .group.filterButtons .buttons .button.active { + animation: pastel-bg 5s linear infinite; +} + +#top.focus .button.discord::after, +#top .button.discord.dotHidden::after { + animation-name: none !important; +} + +.logo .bottom, +#top .config .group .buttons .textButton.active, +#result .stats .group .bottom, +#menu .textButton:hover, +#top .config .group .buttons .textButton:hover, +a:hover, +#words.flipped .word { + animation: pastel 5s linear infinite; +} + +#words.flipped .word letter.correct { + color: var(--sub-color); +} + +#words:not(.flipped) .word letter.correct { + animation: pastel 5s linear infinite; +}