You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
2.8 KiB
CSS
154 lines
2.8 KiB
CSS
* {
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
:root {
|
|
--bg: #e3e4e8;
|
|
--bgT: #e3e4e800;
|
|
--fg: #17181c;
|
|
--focused: #b6cafb;
|
|
--focusRing: #86a6f9;
|
|
--unchecked: #ffffff;
|
|
--checked: #255ff4;
|
|
font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
|
|
}
|
|
body, input {
|
|
font: 1em/1.5 system-ui, -apple-system, sans-serif;
|
|
}
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
form {
|
|
margin: auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 0.75em 0;
|
|
}
|
|
form:before, form:after, .circles, .circle {
|
|
position: absolute;
|
|
}
|
|
form:before, form:after {
|
|
content: "";
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0.5em;
|
|
z-index: 1;
|
|
}
|
|
form:before {
|
|
background: linear-gradient(var(--bg),var(--bgT));
|
|
top: 0;
|
|
}
|
|
form:after {
|
|
background: linear-gradient(var(--bgT),var(--bg));
|
|
bottom: 0;
|
|
}
|
|
input {
|
|
position: fixed;
|
|
top: -1.5em;
|
|
left: -1.5em;
|
|
}
|
|
input:checked + label {
|
|
background: var(--focused);
|
|
box-shadow: 0 0 0 2px var(--focusRing) inset;
|
|
}
|
|
input:nth-of-type(2):checked ~ .circles .circle {
|
|
transform: translateY(-6em);
|
|
}
|
|
input:nth-of-type(3):checked ~ .circles .circle {
|
|
transform: translateY(-3em);
|
|
}
|
|
input:nth-of-type(4):checked ~ .circles .circle {
|
|
transform: translateY(0);
|
|
}
|
|
label, .circle {
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
label {
|
|
border-radius: 0.25em;
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 0.75em 1em 0.75em 2.75em;
|
|
-tap-highlight-color: transparent;
|
|
}
|
|
.circles {
|
|
padding: 0.25em 0;
|
|
top: 0;
|
|
left: 1em;
|
|
}
|
|
.circle {
|
|
background: var(--unchecked);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
-0.2em -0.2em 0.2em #0003 inset,
|
|
0.2em 0.2em 0.2em #0003;
|
|
pointer-events: none;
|
|
top: 1.75em;
|
|
transform: translateY(-9em);
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.circle:nth-child(2) {
|
|
top: 4.75em;
|
|
transition-delay: 0.05s;
|
|
}
|
|
.circle:nth-child(3) {
|
|
top: 7.75em;
|
|
transition-delay: 0.1s;
|
|
}
|
|
.circle:nth-child(4) {
|
|
top: 10.75em;
|
|
transition-delay: 0.15s;
|
|
}
|
|
.circle:nth-child(5) {
|
|
top: 13.75em;
|
|
transition-delay: 0.2s;
|
|
}
|
|
.circle:nth-child(6) {
|
|
top: 16.75em;
|
|
transition-delay: 0.25s;
|
|
}
|
|
.circle:nth-child(7) {
|
|
top: 19.75em;
|
|
transition-delay: 0.3s;
|
|
}
|
|
.circle-checked {
|
|
background: var(--checked);
|
|
}
|
|
.circles-flip-delays .circle:nth-child(1) {
|
|
transition-delay: 0.3s;
|
|
}
|
|
.circles-flip-delays .circle:nth-child(2) {
|
|
transition-delay: 0.25s;
|
|
}
|
|
.circles-flip-delays .circle:nth-child(3) {
|
|
transition-delay: 0.2s;
|
|
}
|
|
.circles-flip-delays .circle:nth-child(4) {
|
|
transition-delay: 0.15s;
|
|
}
|
|
.circles-flip-delays .circle:nth-child(5) {
|
|
transition-delay: 0.1s;
|
|
}
|
|
.circles-flip-delays .circle:nth-child(6) {
|
|
transition-delay: 0.05s;
|
|
}
|
|
.circles-flip-delays .circle:nth-child(7) {
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
/* Dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #17181c;
|
|
--bgT: #17181c00;
|
|
--fg: #e3e4e8;
|
|
--focused: #062779;
|
|
--focusRing: #0936aa;
|
|
--unchecked: #5c6270;
|
|
}
|
|
} |