diff --git a/static/sw.js b/static/sw.js index ddbda1a51..1c5bace10 100644 --- a/static/sw.js +++ b/static/sw.js @@ -1,4 +1,4 @@ -const staticCacheName = "sw-cache-2022-1-22-13-1-55"; +const staticCacheName = "sw-cache-2022-1-22-21-5-6"; caches.keys().then(function (names) { for (let name of names) { diff --git a/static/themes/_list.json b/static/themes/_list.json index 6271ff41e..bcd2ebb9d 100644 --- a/static/themes/_list.json +++ b/static/themes/_list.json @@ -689,4 +689,9 @@ "bgColor": "linear-gradient(to right, #071d75, #e51376)", "mainColor": "#ffffff" } + ,{ + "name": "fire", + "bgColor": "linear-gradient(to right, #b31313, #ff9000, #fdda16)", + "mainColor": "#ffffff" + } ] diff --git a/static/themes/fire.css b/static/themes/fire.css new file mode 100644 index 000000000..f114455f1 --- /dev/null +++ b/static/themes/fire.css @@ -0,0 +1,78 @@ +:root { + --bg-color: #0f0000; + --main-color: #b31313; + --caret-color: #b31313; + --sub-color: #683434; + --text-color: #ffffff; + --error-color: #2f3cb6; + --error-extra-color: #434a8f; + --colorful-error-color: #2f3cb6; + --colorful-error-extra-color: #434a8f; +} + +@keyframes rgb { + 0% { + color: #b31313; + } + 25% { + color: #ff9000; + } + 50% { + color: #fdda16; + } + 75% { + color: #ff9000; + } + 100% { + color: #b31313; + } +} + +@keyframes rgb-bg { + 0% { + background: #b31313; + } + 25% { + background: #ff9000; + } + 50% { + background: #fdda16; + } + 75% { + background: #ff9000; + } + 100% { + background: #b31313; + } +} + +.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; +}