add new theme: dark note (#3886) mynimi

* add new theme: dark note

* change caret color of dark note theme

* theme dark note: replace typing animation with a more subtle effect

* theme dark note: bring back less jumpy dot animation

* adjusted animation

* faster animations

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/static/themes/_list.json

@@ -1,4 +1,9 @@
 [
+  {
+    "name" : "dark_note",
+    "bgColor": "linear-gradient(to bottom, #1f1f1f 0% 19%, rgba(67, 70, 83, 0.4) 19% 21%, #1f1f1f 21% 70%, rgba(67, 70, 83, 0.4) 70% 72%, #1f1f1f 72% 100%)",
+    "mainColor": "#f2c17b"
+  },
   {
     "name" : "viridescent",
     "bgColor": "#2C3333",

frontend/static/themes/dark_note.css

@@ -0,0 +1,176 @@
+:root {
+  --bg-color: #1f1f1f;
+  --main-color: #f2c17b;
+  --caret-color: #e3dce0;
+  --sub-color: #768f95;
+  --sub-alt-color: #141414;
+  --text-color: #d2dff4;
+  --error-color: #ff0000;
+  --error-extra-color: #588498;
+  --colorful-error-color: var(--error-color);
+  --colorful-error-extra-color: var(--error-extra-color);
+  /* custom vars */
+  --theme-bg-stripe-color: #434653;
+  --theme-bg-stripe-opacity: 0.1;
+  --theme-accent-stripe-color: #bf8200;
+  --current-color: var(--text-color);
+}
+
+.colorfulMode {
+  --current-color: var(--main-color);
+}
+
+.button,
+#testConfig .row {
+  --roundness: 5em; /* overwriting default roundness to make it softer */
+}
+
+/* Notepad style overlay */
+body {
+  position: relative;
+}
+
+body::before,
+body::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  opacity: var(--theme-bg-stripe-opacity);
+  display: block;
+  z-index: -9999;
+}
+
+body::after {
+  left: 0;
+  width: 100%;
+  background-image: linear-gradient(
+    0deg,
+    var(--theme-bg-stripe-color) 0.1em,
+    transparent 0.1em,
+    transparent 100%
+  );
+  background-size: 1em 2em;
+}
+
+body::before {
+  left: 10vw;
+  width: 0.1em;
+  background: var(--theme-accent-stripe-color);
+}
+
+#commandLineWrapper #commandLine {
+  --roundness: 0; /* making command line sharp */
+}
+
+/* restyling error displays to be strike-through instead of underlined */
+#wordsWrapper .word.error {
+  border-bottom: none;
+}
+
+#words .word.error {
+  text-shadow: none;
+}
+
+#words.colorfulMode .word letter.incorrect:not(.extra),
+#words .word letter.incorrect:not(.extra) {
+  color: var(--current-color);
+}
+
+#words .word letter.incorrect,
+#words.colorfulMode .word letter.incorrect {
+  text-decoration: line-through;
+  text-decoration-color: var(--error-color);
+  text-decoration-thickness: 2px;
+}
+
+/* transform already typed letters into appropriately colored dots */
+
+/* setting variables to the appropriate colors */
+#wordsWrapper {
+  --c-dot: var(--text-color);
+  --c-dot--error: var(--error-color);
+}
+
+.colorfulMode {
+  --c-dot: var(--main-color);
+  --c-dot--error: var(--colorful-error-color);
+}
+
+.word:not(.active) letter.correct,
+.word:not(.active) letter.incorrect {
+  animation: toDust 200ms ease-out 0ms 1 forwards;
+}
+
+.word:not(.active) letter.correct::after,
+.word:not(.active) letter.incorrect::after {
+  animation: fadeIn 100ms ease-in 100ms 1 forwards;
+}
+
+.word letter {
+  position: relative;
+}
+
+.word letter::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  opacity: 0;
+}
+
+.word letter.correct::after {
+  background: var(--c-dot);
+}
+
+.word letter.incorrect::after {
+  background: var(--c-dot--error);
+}
+
+/* hide hint during dot transformation */
+hint {
+  transition: 300ms ease opacity;
+  opacity: 1;
+}
+
+.word:not(.active) letter.incorrect hint {
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes toDust {
+  0% {
+    transform: scale(1);
+    color: var(--current-color);
+  }
+  10% {
+    /* transform: scale(1); */
+  }
+  15% {
+    transform: scale(1);
+    color: var(--c-dot);
+  }
+  80% {
+    /* transform: scale(0.5); */
+    color: var(--c-dot);
+  }
+  100% {
+    transform: scale(0.4);
+    color: transparent;
+  }
+}