adding monkeytype

frontend/static/themes/snes.css

@@ -0,0 +1,122 @@
+header[data-focused] [data-nav-item],
+header[data-focused] nav:before,
+header[data-focused] nav:after {
+  background: #99989f;
+}
+
+[data-nav-item] {
+  border-radius: 10rem !important;
+  --themable-button-text: var(--bg-color);
+}
+
+[data-nav-item]:hover {
+  filter: brightness(1.25);
+}
+
+[data-nav-item="test"] {
+  background: #553d94;
+}
+
+[data-nav-item="leaderboards"] {
+  background: #6851a4;
+}
+
+[data-nav-item="about"] {
+  background: #7962b3;
+}
+
+[data-nav-item="settings"] {
+  background: #8c76c3;
+}
+
+[data-nav-item="alerts"],
+[data-nav-item="login"] {
+  background: #9f8ad4;
+}
+
+[data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg {
+  fill: var(--bg-color);
+}
+
+[data-nav-item="alerts"],
+[data-ui-element="navAvatar"] {
+  & [data-ui-element="notificationBubble"] {
+    box-shadow: none;
+    background: var(--bg-color);
+  }
+}
+
+[data-nav-item="account"] {
+  --themable-button-text: var(--bg-color);
+  --themable-button-bg: var(--sub-color);
+  --themable-button-hover-bg: color-mix(
+    in srgb,
+    var(--sub-color) 75%,
+    white 15%
+  );
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    white 15%
+  );
+  [data-ui-element="userLevel"] {
+    background: var(--themable-button-text);
+    color: var(--themable-button-bg);
+  }
+}
+
+header[data-focused] {
+  [data-nav-item="test"],
+  [data-nav-item="leaderboards"],
+  [data-nav-item="about"],
+  [data-nav-item="settings"] {
+    --themable-button-bg: var(--sub-alt-color);
+    --nav-focus-opacity: 0.5;
+  }
+}
+
+body.crtmode {
+  & [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
+      -3px 0 color-mix(in srgb, #553d94 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="leaderboards"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
+      -3px 0 color-mix(in srgb, #6851a4 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="about"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
+      -3px 0 color-mix(in srgb, #7962b3 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
+      -3px 0 color-mix(in srgb, #8c76c3 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="alerts"],
+  & [data-nav-item="account"],
+  & [data-nav-item="login"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
+      -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
+      0 0 3px;
+  }
+
+  & header[data-focused] [data-nav-item] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
+      -3px 0 color-mix(in srgb, #99989f 30%, transparent),
+      0 0 3px;
+  }
+}