adding monkeytype

frontend/static/themes/rgb.css

@@ -0,0 +1,110 @@
+@keyframes rgb {
+  0% {
+    color: hsl(120, 39%, 49%);
+  }
+  20% {
+    color: hsl(192, 48%, 48%);
+  }
+  40% {
+    color: hsl(264, 90%, 58%);
+  }
+  60% {
+    color: hsl(357, 89%, 50%);
+  }
+  80% {
+    color: hsl(46, 100%, 51%);
+  }
+  100% {
+    color: hsl(120, 39%, 49%);
+  }
+}
+
+@keyframes rgb-bg {
+  0% {
+    background: hsl(120, 39%, 49%);
+  }
+  20% {
+    background: hsl(192, 48%, 48%);
+  }
+  40% {
+    background: hsl(264, 90%, 58%);
+  }
+  60% {
+    background: hsl(357, 89%, 50%);
+  }
+  80% {
+    background: hsl(46, 100%, 51%);
+  }
+  100% {
+    background: hsl(120, 39%, 49%);
+  }
+}
+
+@keyframes rgb-fill {
+  0% {
+    fill: hsl(120, 39%, 49%);
+  }
+  20% {
+    fill: hsl(192, 48%, 48%);
+  }
+  40% {
+    fill: hsl(264, 90%, 58%);
+  }
+  60% {
+    fill: hsl(357, 89%, 50%);
+  }
+  80% {
+    fill: hsl(46, 100%, 51%);
+  }
+  100% {
+    fill: hsl(120, 39%, 49%);
+  }
+}
+
+.pageSettings .section .buttons button.active,
+.pageSettings .section.languages .buttons .language.active,
+.pageAccount .group.filterButtons .buttons button.active {
+  animation: rgb-bg 5s linear infinite;
+}
+
+#caret {
+  animation: rgb-bg 5s linear infinite !important;
+}
+
+header[data-focused] {
+  & [data-ui-element="logoSubtext"] {
+    animation: none;
+  }
+  & [data-ui-element="logo"] svg path {
+    animation: none;
+  }
+}
+
+[data-ui-element="logoSubtext"],
+#result .stats .group .bottom,
+[data-nav-item]:hover,
+footer button:hover,
+#words.flipped .word,
+footer a:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: rgb 5s linear infinite;
+}
+
+#words {
+  --correct-letter-animation: rgb 5s linear infinite;
+}
+
+#words.flipped {
+  --correct-letter-animation: none;
+  --untyped-letter-animation: rgb 5s linear infinite;
+}
+
+header [data-ui-element="logo"] svg path,
+header [data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg path {
+  animation: rgb-fill 5s linear infinite;
+}
+
+[data-ui-element="accountMenu"] a:hover,
+[data-ui-element="accountMenu"] button:hover {
+  animation: none;
+}