digital-garbageandClaude Sonnet 5.5
580fa5f94a
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
48 lines
2.0 KiB
CSS
48 lines
2.0 KiB
CSS
.cx-slider { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }
|
|
|
|
.cx-range {
|
|
appearance: none; -webkit-appearance: none;
|
|
flex: 1; min-width: 80px; height: 18px; background: transparent; cursor: pointer;
|
|
/* --fill is written by the element as the value changes, so the filled part
|
|
* of the track follows the theme's accent without JS naming a colour. */
|
|
--fill: 0%;
|
|
}
|
|
.cx-range::-webkit-slider-runnable-track {
|
|
height: 4px; border-radius: var(--r-pill);
|
|
background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
|
|
}
|
|
.cx-range::-moz-range-track {
|
|
height: 4px; border-radius: var(--r-pill);
|
|
background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
|
|
}
|
|
.cx-range::-webkit-slider-thumb {
|
|
-webkit-appearance: none; appearance: none;
|
|
width: 14px; height: 14px; margin-top: -5px;
|
|
border-radius: var(--r-pill); background: var(--elev-1);
|
|
border: 2px solid var(--accent);
|
|
transition: transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-range::-moz-range-thumb {
|
|
width: 14px; height: 14px; border-radius: var(--r-pill);
|
|
background: var(--elev-1); border: 2px solid var(--accent);
|
|
}
|
|
.cx-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
|
|
.cx-range:focus-visible { outline: none; }
|
|
.cx-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
|
|
.cx-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
|
|
.cx-range:disabled { opacity: var(--disabled-opacity); cursor: default; }
|
|
|
|
.cx-slider-sm .cx-range { height: 14px; }
|
|
|
|
.cx-readout {
|
|
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
|
|
font-size: var(--fs-6); color: var(--muted);
|
|
min-width: 4ch; text-align: right;
|
|
}
|
|
|
|
.cx-macro { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
|
|
.cx-macro-presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
|
|
.cx-macro-presets .cx-on { color: var(--accent); background: var(--accent-soft); }
|
|
|
|
.cx-range-pair { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; }
|