Claude
c873f4b318
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tw9fjX7o2YfeGQE18MEtPu
51 lines
2.4 KiB
CSS
51 lines
2.4 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: var(--slider-min-w); height: var(--ctl-h-icon); 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: var(--sp-2); border-radius: var(--r-pill);
|
|
background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
|
|
}
|
|
.cx-range::-moz-range-track {
|
|
height: var(--sp-2); 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: var(--thumb-size); height: var(--thumb-size); margin-top: calc((var(--sp-2) - var(--thumb-size)) / 2);
|
|
border-radius: var(--r-pill); background: var(--elev-1);
|
|
border: var(--bw-2) solid var(--accent);
|
|
transition: transform var(--dur-1) var(--ease-standard);
|
|
}
|
|
.cx-range::-moz-range-thumb {
|
|
width: var(--thumb-size); height: var(--thumb-size); border-radius: var(--r-pill);
|
|
background: var(--elev-1); border: var(--bw-2) 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: var(--thumb-size); }
|
|
|
|
.cx-readout {
|
|
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
|
|
font-size: var(--fs-5); color: var(--text);
|
|
flex: none; width: 8ch; min-width: 8ch; height: var(--ctl-h-md); padding: 0 var(--sp-3);
|
|
text-align: right; background: var(--elev-2);
|
|
border: var(--bw) solid var(--line); border-radius: var(--ctl-r);
|
|
}
|
|
.cx-readout:hover:not(:disabled) { border-color: var(--line-hover); }
|
|
|
|
.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%; }
|