Initial captcha code

1 files changed, 76 insertions, 0 deletions

diff --git a/static/style/captcha.css b/static/style/captcha.css
new file mode 100644
index 0000000..fe7c5d3
--- /dev/null
+++ b/static/style/captcha.css
@@ -0,0 +1,76 @@
+.dsc-outer {
+    --active-1: oklch(75% 0.15 195.032);
+    --active-2: oklch(75% 0.15 328.437);
+    --active-3: oklch(75% 0.15 109.374);
+    transform: rotate(-45deg) scale(0.7);
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    display: grid;
+    gap: 0.5em;
+    grid-template-columns: auto auto;
+    padding: 0.5em;
+    border: none;
+
+    &[data-solved] {
+        outline: 2px solid var(--active-1);
+    }
+
+    >button {
+        font-size: 1.5em;
+
+        &.dsc-submit {
+            writing-mode: sideways-rl;
+        }
+    }
+}
+
+button {
+    border: 2px outset #000;
+    background-color: #eee;
+
+    &:active {
+        border: 2px inset #000;
+    }
+}
+
+.dsc-inner {
+    grid-column-start: 1;
+    border: 2px inset #000;
+    display: grid;
+    gap: 0.5em;
+    padding: 0.5em;
+
+    >button {
+        height: 2em;
+        width: 2em;
+        aspect-ratio: 1 / 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 2em;
+
+        >span {
+            transform: rotate(45deg);
+            pointer-events: none;
+        }
+
+        &:disabled {
+            border: 2px solid #000;
+            outline: 1px solid #000;
+            color: #000;
+        }
+
+        &[data-active="1"] {
+            background-color: var(--active-1);
+        }
+
+        &[data-active="2"] {
+            background-color: var(--active-2);
+        }
+
+        &[data-active="3"] {
+            background-color: var(--active-3);
+        }
+    }
+}
\ No newline at end of file