309 lines
6.5 KiB
CSS
309 lines
6.5 KiB
CSS
* {
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
:root {
|
|
--bg: #e3e4e8;
|
|
--fg: #17181c;
|
|
--primary: #255ff4;
|
|
--switchBg: #c7cad1;
|
|
font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
|
|
}
|
|
body, input {
|
|
font: 1em/1.5 "Inter", sans-serif;
|
|
}
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
/* Switch base */
|
|
.f, .f span {
|
|
display: block;
|
|
}
|
|
.f {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
margin: auto;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.f abbr {
|
|
text-decoration: none;
|
|
}
|
|
.f__input {
|
|
position: fixed;
|
|
top: -1.5em;
|
|
left: -1.5em;
|
|
}
|
|
.f__handle, .f__handle span {
|
|
transition-property: all;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
.f__handle, .f__switch {
|
|
height: 3em;
|
|
}
|
|
.f__handle {
|
|
clip-path: circle(50% at 50% 50%);
|
|
position: relative;
|
|
width: 3em;
|
|
transition-duration: 0.4s;
|
|
}
|
|
.f__handle span {
|
|
position: absolute;
|
|
transition-duration: 0.2s;
|
|
}
|
|
.f__switch {
|
|
background: var(--switchBg);
|
|
border-radius: 1.5em;
|
|
margin: 0 0.75em;
|
|
width: 6em;
|
|
}
|
|
.f__input:focus {
|
|
outline: 0;
|
|
}
|
|
.f__input:focus-visible + .f__switch {
|
|
box-shadow: 0 0 0.25em var(--primary);
|
|
}
|
|
.f__input:checked + .f__switch .f__handle {
|
|
transform: translateX(100%);
|
|
}
|
|
/* Shapes */
|
|
.f__1, .f__2a, .f__2b, .f__9, .f__10, .f__17 {
|
|
border-radius: 50%;
|
|
}
|
|
.f__1, .f__handle > span:nth-child(n + 11) {
|
|
background: #fff0;
|
|
}
|
|
.f__input:checked + .f__switch .f__1,
|
|
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11) {
|
|
background: #fff;
|
|
}
|
|
.f__1, .f__2, .f__2 span,
|
|
.f__input:checked + .f__switch .f__9,
|
|
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11):nth-child(-n + 17) {
|
|
transition-delay: 0.4s;
|
|
}
|
|
.f__1 {
|
|
box-shadow: 0 -0.5em 0 0.4em #fa0012 inset;
|
|
width: 3em;
|
|
height: 3em;
|
|
}
|
|
.f__input:checked + .f__switch .f__1 {
|
|
box-shadow: 0 0 0 0.1em #000 inset;
|
|
}
|
|
.f__2 {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
.f__input:checked + .f__switch .f__2 {
|
|
transform: scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__handle > span:nth-child(-n + 2),
|
|
.f__input:checked + .f__switch .f__2 span {
|
|
transition-delay: 0s;
|
|
}
|
|
.f__2a, .f__2b {
|
|
box-shadow: 0 0 0 0.25em #fa0012 inset;
|
|
top: 0.35em;
|
|
width: 1.375em;
|
|
height: 1.65em;
|
|
}
|
|
.f__input:checked + .f__switch .f__2 span:nth-child(-n + 2) {
|
|
box-shadow: 0 0 0 0.25em #000 inset;
|
|
}
|
|
.f__2a {
|
|
clip-path: polygon(0% 35%,100% 28%,100% 100%,0% 100%);
|
|
left: 0.15em;
|
|
transform: rotate(-45deg) skewX(-13deg);
|
|
}
|
|
.f__2b {
|
|
clip-path: polygon(0 28%,100% 35%,100% 100%,0 100%);
|
|
right: 0.15em;
|
|
transform: rotate(45deg) skewX(13deg);
|
|
}
|
|
.f__input:checked + .f__switch .f__2c,
|
|
.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
|
|
.f__10 {
|
|
background-color: #000;
|
|
}
|
|
.f__2c {
|
|
background-color: #fa0012;
|
|
clip-path: polygon(50% 0%,80% 14%,61% 22%,60% 75%,100% 90%,100% 100%,0% 100%,0% 90%,40% 75%,39% 22%,20% 14%);
|
|
top: 0;
|
|
left: 1em;
|
|
width: 1em;
|
|
height: 2.2em;
|
|
}
|
|
.f__2d, .f__2e {
|
|
top: 0.3em;
|
|
width: 0.25em;
|
|
height: 0.55em;
|
|
}
|
|
.f__2d {
|
|
border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
|
|
box-shadow: -0.1em -0.05em 0 #fa0012 inset;
|
|
left: 1.2em;
|
|
}
|
|
.f__input:checked + .f__switch .f__2d {
|
|
box-shadow: -0.1em -0.05em 0 #000 inset;
|
|
}
|
|
.f__2e {
|
|
border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
|
|
box-shadow: 0.1em -0.05em 0 #fa0012 inset;
|
|
left: 1.55em;
|
|
}
|
|
.f__input:checked + .f__switch .f__2e {
|
|
box-shadow: 0.1em -0.05em 0 #000 inset;
|
|
}
|
|
.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
|
|
.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
|
|
transform-origin: 50% 0;
|
|
}
|
|
.f__handle > span:nth-child(n + 3):nth-child(-n + 8) {
|
|
top: 1.5em;
|
|
left: 1.45em;
|
|
width: 0.1em;
|
|
height: 1.4em;
|
|
}
|
|
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__10 {
|
|
transition-delay: 0.2s;
|
|
}
|
|
.f__3 {
|
|
transform: translateY(-100%) scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__3 {
|
|
transform: translateY(-100%) scaleY(1);
|
|
}
|
|
.f__4 {
|
|
transform: rotate(60deg) translateY(-100%) scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__4 {
|
|
transform: rotate(60deg) translateY(-100%) scaleY(1);
|
|
}
|
|
.f__5 {
|
|
transform: rotate(120deg) translateY(-100%) scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__5 {
|
|
transform: rotate(120deg) translateY(-100%) scaleY(1);
|
|
}
|
|
.f__6 {
|
|
transform: rotate(180deg) translateY(-100%) scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__6 {
|
|
transform: rotate(180deg) translateY(-100%) scaleY(1);
|
|
}
|
|
.f__7 {
|
|
transform: rotate(240deg) translateY(-100%) scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__7 {
|
|
transform: rotate(240deg) translateY(-100%) scaleY(1);
|
|
}
|
|
.f__8 {
|
|
transform: rotate(300deg) translateY(-100%) scaleY(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__8 {
|
|
transform: rotate(300deg) translateY(-100%) scaleY(1);
|
|
}
|
|
.f__9, .f__10, .f__17 {
|
|
transform: scale(0);
|
|
}
|
|
.f__9 {
|
|
background-image:
|
|
conic-gradient(
|
|
#000 15deg,
|
|
#fff 15deg 45deg,
|
|
#000 45deg 75deg,
|
|
#fff 75deg 105deg,
|
|
#000 105deg 135deg,
|
|
#fff 135deg 165deg,
|
|
#000 165deg 195deg,
|
|
#fff 195deg 225deg,
|
|
#000 225deg 255deg,
|
|
#fff 255deg 285deg,
|
|
#000 285deg 315deg,
|
|
#fff 315deg 345deg,
|
|
#000 345deg
|
|
);
|
|
top: 0.3em;
|
|
left: 0.3em;
|
|
width: 2.4em;
|
|
height: 2.4em;
|
|
}
|
|
.f__10 {
|
|
top: 0.5em;
|
|
left: 0.5em;
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
.f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__input:checked + .f__switch .f__10 {
|
|
transition-delay: 0.3s;
|
|
}
|
|
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 9):nth-child(-n + 10),
|
|
.f__input:checked + .f__switch .f__17 {
|
|
transform: scale(1);
|
|
}
|
|
.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
|
|
clip-path: polygon(50% 0%,100% 100%,0% 100%);
|
|
top: 1.5em;
|
|
left: 1.32em;
|
|
width: 0.36em;
|
|
height: 0.9em;
|
|
}
|
|
.f__11 {
|
|
transform: scaleX(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__11 {
|
|
transform: scaleX(1);
|
|
}
|
|
.f__12 {
|
|
transform: rotate(60deg) scaleX(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__12 {
|
|
transform: rotate(60deg) scaleX(1);
|
|
}
|
|
.f__13 {
|
|
transform: rotate(120deg) scaleX(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__13 {
|
|
transform: rotate(120deg) scaleX(1);
|
|
}
|
|
.f__14 {
|
|
transform: rotate(180deg) scaleX(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__14 {
|
|
transform: rotate(180deg) scaleX(1);
|
|
}
|
|
.f__15 {
|
|
transform: rotate(240deg) scaleX(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__15 {
|
|
transform: rotate(240deg) scaleX(1);
|
|
}
|
|
.f__16 {
|
|
transform: rotate(300deg) scaleX(0);
|
|
}
|
|
.f__input:checked + .f__switch .f__16 {
|
|
transform: rotate(300deg) scaleX(1);
|
|
}
|
|
.f__17 {
|
|
top: 1.06em;
|
|
left: 1.06em;
|
|
width: 0.88em;
|
|
height: 0.88em;
|
|
}
|
|
/* Dark theme */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #2e3138;
|
|
--fg: #e3e4e8;
|
|
--primary: #5583f6;
|
|
--switchBg: #454954;
|
|
}
|
|
} |