adding monkeytype

frontend/static/themes/phantom.css

@@ -0,0 +1,160 @@
+@keyframes phantom-glow {
+  0% {
+    color: #c0caf5;
+    text-shadow:
+      0 0 5px #7aa2f7,
+      0 0 10px #bb9af7;
+  }
+  50% {
+    color: #c0caf5;
+    text-shadow:
+      0 0 8px #7dcfff,
+      0 0 15px #bb9af7;
+  }
+  100% {
+    color: #c0caf5;
+    text-shadow:
+      0 0 5px #7aa2f7,
+      0 0 10px #bb9af7;
+  }
+}
+
+@keyframes phantom-glow-incorrect {
+  0% {
+    text-shadow:
+      0 0 5px #f7768e,
+      0 0 10px #db4b4b;
+  }
+  50% {
+    text-shadow:
+      0 0 8px #ff7a93,
+      0 0 15px #ff9e64;
+  }
+  100% {
+    text-shadow:
+      0 0 5px #f7768e,
+      0 0 10px #db4b4b;
+  }
+}
+
+@keyframes phantom-bg {
+  0% {
+    background: #7aa2f7;
+  }
+  50% {
+    background: #bb9af7;
+  }
+  100% {
+    background: #7aa2f7;
+  }
+}
+
+#words {
+  --correct-letter-color: var(--text-color);
+  --untyped-letter-color: #565f89;
+}
+
+header:not([data-focused]) [data-ui-element="logoText"] {
+  color: var(--text-color);
+  animation: phantom-glow 3s infinite alternate;
+}
+
+header [data-ui-element="logoSubtext"] {
+  color: inherit;
+  animation: none;
+}
+
+header [data-ui-element="logo"] svg {
+  color: var(--main-color) !important;
+}
+
+button.text:hover,
+.button.text:hover,
+.textButton:hover {
+  color: var(--caret-color);
+}
+
+button.text.active,
+.button.text.active,
+.textButton.active {
+  color: var(--main-color);
+}
+
+button.text:hover,
+.textButton:hover {
+  animation: phantom-glow 5s linear infinite;
+}
+
+.word .active {
+  animation: phantom-glow 5s linear infinite;
+}
+
+button:hover,
+.button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover {
+  color: var(--bg-color);
+  background: var(--caret-color);
+}
+
+.scrollToTopButton:hover {
+  background: var(--caret-color);
+  color: var(--bg-color);
+}
+
+#caret {
+  animation: phantom-bg 3s linear infinite;
+}
+
+[data-ui-element="logoSubtext"],
+#result .stats .group .bottom,
+[data-nav-item]:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: phantom-glow 3s linear infinite;
+}
+
+footer a:hover,
+footer button:hover {
+  animation: phantom-glow 3s linear infinite;
+  background: none;
+}
+
+[data-nav-item]:hover {
+  background: none;
+}
+
+[data-ui-element="testConfig"] button:hover {
+  background: none;
+  animation: phantom-glow 3s linear infinite;
+}
+
+.afk,
+.timeToday,
+#words .word letter.correct,
+#words .word.typed letter.correct,
+#words.highlight-word .word.typed letter,
+#words.highlight-next-word .word.typed letter,
+#words.highlight-next-two-words .word.typed letter,
+#words.highlight-next-three-words .word.typed letter {
+  animation: phantom-glow 5s linear infinite;
+}
+
+#words.flipped .word.typed letter {
+  animation: none;
+}
+
+.incorrect {
+  animation: phantom-glow-incorrect 5s linear infinite;
+}
+
+#words.highlight-off .word letter,
+#words.highlight-off .word.typed letter {
+  animation: phantom-glow 5s linear infinite;
+}
+
+[data-ui-element="accountMenu"] a:hover,
+[data-ui-element="accountMenu"] button:hover {
+  animation: none;
+  background: var(--text-color);
+}