98 lines
4.0 KiB
CSS
98 lines
4.0 KiB
CSS
*,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
body {
|
|
align-items: center;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
cursor: var(--cursor);
|
|
}
|
|
.hsl-slider {
|
|
--handle-size: 50;
|
|
width: 280px;
|
|
height: 20px;
|
|
border: 4px solid #111;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
max-width: 70vw;
|
|
cursor: pointer;
|
|
background: linear-gradient(90deg, hsl(0, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(36, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(72, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(108, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(144, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(180, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(216, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(252, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(288, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(324, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)), hsl(360, calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%)));
|
|
}
|
|
.hsl-slider__arc {
|
|
height: calc(var(--handle-size) * 2px + 4px);
|
|
width: calc(var(--handle-size) * 2px + 4px);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(var(--value, 0) * 1%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 100%;
|
|
opacity: 0.2;
|
|
border: 4px solid #c6c6c6;
|
|
z-index: -1;
|
|
-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
|
|
clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
|
|
}
|
|
.hsl-slider__handle {
|
|
height: calc(var(--handle-size) * 1px);
|
|
width: calc(var(--handle-size) * 1px);
|
|
border-radius: 100%;
|
|
background: hsl(var(--hue, 0), calc(var(--saturation, 100) * 1%), calc(var(--lightness, 50) * 1%));
|
|
border: 4px solid #111;
|
|
touch-action: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(var(--value, 0) * 1%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
cursor: var(--cursor);
|
|
}
|
|
.hsl-slider__handle--lightness,
|
|
.hsl-slider__handle--saturation {
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
border: 0;
|
|
-webkit-transform: translate(-50%, -50%) rotate(90deg) rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--handle-size) * 1px));
|
|
transform: translate(-50%, -50%) rotate(90deg) rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--handle-size) * 1px));
|
|
}
|
|
.hsl-slider__handle--lightness:before,
|
|
.hsl-slider__handle--saturation:before {
|
|
display: none;
|
|
}
|
|
.hsl-slider__handle--lightness:after,
|
|
.hsl-slider__handle--saturation:after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 50%;
|
|
width: 50%;
|
|
border: 4px solid #111;
|
|
border-radius: 100%;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.hsl-slider__handle--lightness:after {
|
|
background: hsl(0, 0%, calc(var(--lightness, 50) * 1%));
|
|
}
|
|
.hsl-slider__handle--saturation:after {
|
|
background: linear-gradient(90deg, hsl(0, calc(var(--saturation, 50) * 1%), 50%), hsl(36, calc(var(--saturation, 50) * 1%), 50%), hsl(72, calc(var(--saturation, 50) * 1%), 50%), hsl(108, calc(var(--saturation, 50) * 1%), 50%), hsl(144, calc(var(--saturation, 50) * 1%), 50%), hsl(180, calc(var(--saturation, 50) * 1%), 50%), hsl(216, calc(var(--saturation, 50) * 1%), 50%), hsl(252, calc(var(--saturation, 50) * 1%), 50%), hsl(288, calc(var(--saturation, 50) * 1%), 50%), hsl(324, calc(var(--saturation, 50) * 1%), 50%), hsl(360, calc(var(--saturation, 50) * 1%), 50%));
|
|
}
|
|
.container {
|
|
position: relative;
|
|
}
|
|
.values {
|
|
font-size: 0.5rem;
|
|
position: absolute;
|
|
color: #ccc;
|
|
top: calc(100% + 100px);
|
|
}
|