roles

static/images/check.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect fill="#000" width="2" height="5" x="3" y="4" style="transform: rotate(-45deg); transform-origin: center;" />
+  <rect fill="#000" width="2" height="7" x="7" y="4.5" style="transform: rotate(45deg); transform-origin: center;" />
+</svg>

static/main.css

@@ -1,3 +1,94 @@
+:root {
+  --taupe100: #332d2d;
+  --taupe200: #453e3d;
+  --taupe300: #5d5352;
+  --taupe400: #756867;
+  --taupe500: #ab9b9a;
+  --taupe600: #ebd6d4;
+
+  --discord100: #23272a;
+  --discord200: #2c2f33;
+  --discord400: #7289da;
+  --discord500: #99aab5;
+
+  --green400: #46b646;
+  --green200: #1d8227;
+
+  --red400: #e95353;
+  --red200: #f14343;
+
+  --gold400: #efcf24;
+
+  --grey100: #1c1010;
+  --grey500: #dbd9d9;
+  --grey600: #f2efef;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   font-family: "Atkinson Hyperlegible", sans-serif;
+  background-color: var(--taupe200);
+  color: var(--taupe600);
+}
+
+.role {
+  /* TODO: dont do this, don't remember why?? (^aki) */
+  display: inline-flex;
+  align-items: center;
+  border: 2px solid var(--role-color);
+  border-radius: 3px;
+  user-select: none;
+  padding: 0.217rem; /* this is silly number pls ignore :3 (^noe) */
+  gap: 0.215rem;
+
+  input {
+    appearance: none;
+    position: relative;
+    width: 1.216rem;
+    height: 1.216rem;
+    margin: 0;
+    padding: 0;
+    border: 2px solid var(--role-color);
+    transition: all 0.35s ease-in-out;
+    border-radius: 1.216rem;
+
+    &::before {
+      transition: all 0.35s ease-in-out;
+      content: "";
+      mask-image: url(/static/images/check.svg);
+      mask-size: cover;
+      mask-position: center center;
+      background-color: var(--role-color);
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 1.216rem;
+    }
+  }
+
+  label {
+  }
+
+  &:has(input:checked) {
+    background-color: var(--role-color);
+
+    input {
+      border-color: var(--contrast-color);
+      opacity: 1;
+
+      &::before {
+        opacity: 1;
+        background-color: var(--contrast-color);
+      }
+    }
+
+    label {
+      color: var(--contrast-color);
+    }
+  }
 }