Merge pull request #92 from Le-SirH:master

New Themes

Author: Miodec

public/themes/list.json

@@ -19,5 +19,8 @@
     "olivia",
     "bliss",
     "mizu",
-    "metaverse"
+    "metaverse",
+    "shadow",
+    "mint",
+    "miami"
 ]

public/themes/miami.css

@@ -0,0 +1,17 @@
+:root {
+    --bg-color: #f35588;
+    --main-color: #05dfd7;
+    --caret-color: #a3f7bf;
+    --sub-color: #fff591;
+    --error-color: #9d72ff;
+}
+
+.word letter.incorrect, 
+.word.error, 
+.word letter.incorrect.extra {
+    color: var(--error-color);
+}
+
+.word.error {
+    border-bottom: solid 2px var(--error-color);
+}

public/themes/mint.css

@@ -0,0 +1,17 @@
+:root {
+    --bg-color: #05385b;
+    --main-color: #5cdb95;
+    --caret-color: #5cdb95;
+    --sub-color: #edf5e1;
+    --error-color:  #F35588;
+}
+
+.word letter.incorrect, 
+.word.error, 
+.word letter.incorrect.extra {
+    color: var(--error-color);
+}
+
+.word.error {
+    border-bottom: solid 2px var(--error-color);
+}

public/themes/shadow.css

@@ -0,0 +1,53 @@
+:root {
+    --bg-color: #000;
+    --main-color: #eee;
+    --caret-color: #eee;
+    --sub-color: #444;
+}
+
+@keyframes shadow {
+    to {
+        color: #000;
+    }
+}
+
+@keyframes shadow-repeat {
+    50% {
+        color: #000;
+    }
+    100% {
+        color: #eee;
+    }
+}
+
+.word.error {
+    border-bottom: 2px solid #fff;
+}
+
+.word letter.incorrect {
+    color: #fff;
+}
+
+.word letter.incorrect.extra {
+    color: #fff;
+}
+
+#top .config .group .buttons .button.active,
+#result .stats .group,
+#menu .button:hover,
+#top .config .group .buttons .button:hover,
+a:hover {
+    animation-name: shadow-repeat;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}
+
+#logo, .word letter.correct{
+    animation-name: shadow;
+    animation-duration: 5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}