body{
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
gap: 2em;
background: #f6f8fe;
}
[type="range"].kawaii {
--base: #fe8ce4;
--light: color-mix(in sRGB, var(--base) 60%, #fff);
--lighter: color-mix(in sRGB, var(--base) 30%, #fff);
--dark: color-mix(in sRGB, var(--base) 95%, #000);;
--transparent: color-mix(in sRGB, var(--base) 0%, #0000);
appearance: none;
font-size: 1em;
width: 20em;
height: 2em;
border: 0.5em solid #fff;
border-radius: 2em;
box-shadow:
0 0 1em #0001,
0 0.25em 0.5em #0001;
overflow: hidden;
}
[type="range"].kawaii::-webkit-slider-runnable-track {
background:
radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
radial-gradient(circle at 1.25em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
radial-gradient(circle at 5em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
linear-gradient(var(--light) 0 0) 1.25em 0.4em / 3.75em calc(0.4em - 0.5px) no-repeat,
linear-gradient(90deg, var(--base), var(--transparent) 1em),
linear-gradient(#0000 70%, var(--dark) 80%),
var(--base);
border-radius: 2em;
height: 100%;
overflow: hidden;
}
[type="range"].kawaii::-webkit-slider-thumb {
appearance: none;
height: 2em;
width: 2em;
color: var(--lighter);
background:
radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
linear-gradient(90deg, #0000 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;
border-radius: 50%; 0 50% 50% 0;
box-shadow:
inset -0.5em 0 0.5em -0.25em var(--base),
1em 0 0 0.25em,
2em 0 0 0.25em,
3em 0 0 0.25em,
4em 0 0 0.25em,
5em 0 0 0.25em,
6em 0 0 0.25em,
7em 0 0 0.25em,
8em 0 0 0.25em,
9em 0 0 0.25em,
10em 0 0 0.25em,
11em 0 0 0.25em,
12em 0 0 0.25em,
12em 0 0 0.25em,
13em 0 0 0.25em,
14em 0 0 0.25em,
15em 0 0 0.25em,
16em 0 0 0.25em,
17em 0 0 0.25em,
18em 0 0 0.25em,
19em 0 0 0.25em;
}
[type="range"].kawaii::-moz-range-track {
background:
radial-gradient(circle at 0.75em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),
radial-gradient(circle at 1.5em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),
radial-gradient(circle at 5.5em 30%, var(--light) calc(0.2em - 1px), #0000 0.2em),
linear-gradient(var(--light) 0 0) 1.5em calc(15% + 0.18em) / 4em calc(0.4em - 0.5px) no-repeat,
linear-gradient(90deg, var(--base), var(--transparent) 1em),
linear-gradient(var(--transparent) 70%, var(--dark) 80%),
var(--base);
border-radius: 2em;
height: 100%;
overflow: hidden;
}
[type="range"].kawaii::-moz-range-thumb {
appearance: none;
height: 2em;
width: 2em;
border: 0;
color: var(--lighter);
background:
radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
linear-gradient(90deg, var(--transparent) 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;
border-radius: 50%; 0 50% 50% 0;
box-shadow:
inset -0.5em 0 0.5em -0.25em var(--base),
1em 0 0 0.25em,
2em 0 0 0.25em,
3em 0 0 0.25em,
4em 0 0 0.25em,
5em 0 0 0.25em,
6em 0 0 0.25em,
7em 0 0 0.25em,
8em 0 0 0.25em,
9em 0 0 0.25em,
10em 0 0 0.25em,
11em 0 0 0.25em,
12em 0 0 0.25em,
12em 0 0 0.25em,
13em 0 0 0.25em,
14em 0 0 0.25em,
15em 0 0 0.25em,
16em 0 0 0.25em,
17em 0 0 0.25em,
18em 0 0 0.25em,
19em 0 0 0.25em;
}
|
