diff --git a/static/sw.js b/static/sw.js index 1328278be..62e6955b9 100644 --- a/static/sw.js +++ b/static/sw.js @@ -1,4 +1,4 @@ -const staticCacheName = "sw-cache-2022-1-21-17-29-14"; +const staticCacheName = "sw-cache-2022-1-22-0-8-14"; caches.keys().then(function (names) { for (let name of names) { diff --git a/static/themes/_list.json b/static/themes/_list.json index 33c26e311..6271ff41e 100644 --- a/static/themes/_list.json +++ b/static/themes/_list.json @@ -684,4 +684,9 @@ "bgColor": "#0084c2", "mainColor": "#f7f2ea" } + ,{ + "name": "trance", + "bgColor": "linear-gradient(to right, #071d75, #e51376)", + "mainColor": "#ffffff" + } ] diff --git a/static/themes/trance.css b/static/themes/trance.css new file mode 100644 index 000000000..36071707e --- /dev/null +++ b/static/themes/trance.css @@ -0,0 +1,66 @@ +:root { + --bg-color: #00021b; + --main-color: #e51376; + --caret-color: #e51376; + --sub-color: #3c4c79; + --text-color: #fff; + --error-color: #02d3b0; + --error-extra-color: #3f887c; + --colorful-error-color: #02d3b0; + --colorful-error-extra-color: #3f887c; +} + +@keyframes rgb { + 0% { + color: #e51376; + } + 50% { + color: #0e77ee; + } + 100% { + color: #e51376; + } +} + +@keyframes rgb-bg { + 0% { + background: #e51376; + } + 50% { + background: #0e77ee; + } + 100% { + background: #e51376; + } +} + +.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; +}