diff options
Diffstat (limited to 'static/style/captcha.css')
| -rw-r--r-- | static/style/captcha.css | 76 |
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 |