adding monkeytype

frontend/static/themes/dots.css

@@ -0,0 +1,95 @@
+[data-nav-item] {
+  border-radius: 10rem !important;
+  --themable-button-text: #121520;
+  --themable-button-hover-text: var(--bg-color);
+}
+
+[data-nav-item]:hover {
+  filter: brightness(1.25);
+}
+
+[data-nav-item="test"] {
+  background: #f94348;
+}
+
+[data-nav-item="leaderboards"] {
+  background: #9261ff;
+}
+
+[data-nav-item="about"] {
+  background: #3cc5f8;
+}
+
+[data-nav-item="settings"] {
+  background: #4acb8a;
+}
+
+[data-nav-item="alerts"],
+[data-nav-item="login"],
+[data-nav-item="account"] {
+  --themable-button-text: #393c73;
+  --themable-button-hover-text: var(--text-color);
+}
+
+[data-nav-item="account"] .xpBar {
+  bottom: -0.75rem !important;
+}
+
+[data-nav-item="account"]:hover svg {
+  /* color: var(--text-color); */
+}
+
+header[data-focused] {
+  & [data-nav-item] {
+    --nav-focus-opacity: 1;
+    background: var(--sub-color);
+  }
+  & [data-nav-item="alerts"],
+  & [data-nav-item="login"],
+  & [data-nav-item="account"] {
+    --nav-focus-opacity: 0;
+    background: transparent;
+  }
+}
+
+body.crtmode {
+  & [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
+      -3px 0 color-mix(in srgb, #f94348 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="leaderboards"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
+      -3px 0 color-mix(in srgb, #9261ff 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="about"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
+      -3px 0 color-mix(in srgb, #3cc5f8 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
+      -3px 0 color-mix(in srgb, #4acb8a 30%, transparent),
+      0 0 3px;
+  }
+
+  & header[data-focused] {
+    & [data-nav-item] {
+      box-shadow:
+        3px 0 1px var(--crt-sub-color-glow),
+        -3px 0 var(--crt-sub-color-glow);
+    }
+
+    & [data-nav-item="account"] {
+      box-shadow: none;
+    }
+  }
+}