You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
6.8 KiB
213 lines
6.8 KiB
[data-slider] {
|
|
--_slider-track-size: var(--slider-track-size-md);
|
|
--_slider-thumb-size: var(--slider-thumb-size-md);
|
|
--_slider-hit-size: var(--slider-hit-size-md);
|
|
--_slider-tick-size: var(--slider-tick-size-md);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-slider][data-size='xs'] {
|
|
--_slider-track-size: var(--slider-track-size-xs);
|
|
--_slider-thumb-size: var(--slider-thumb-size-xs);
|
|
--_slider-hit-size: var(--slider-hit-size-xs);
|
|
--_slider-tick-size: var(--slider-tick-size-xs);
|
|
}
|
|
|
|
[data-slider][data-size='sm'] {
|
|
--_slider-track-size: var(--slider-track-size-sm);
|
|
--_slider-thumb-size: var(--slider-thumb-size-sm);
|
|
--_slider-hit-size: var(--slider-hit-size-sm);
|
|
--_slider-tick-size: var(--slider-tick-size-sm);
|
|
}
|
|
|
|
[data-slider][data-size='lg'] {
|
|
--_slider-track-size: var(--slider-track-size-lg);
|
|
--_slider-thumb-size: var(--slider-thumb-size-lg);
|
|
--_slider-hit-size: var(--slider-hit-size-lg);
|
|
--_slider-tick-size: var(--slider-tick-size-lg);
|
|
}
|
|
|
|
[data-slider][data-size='xl'] {
|
|
--_slider-track-size: var(--slider-track-size-xl);
|
|
--_slider-thumb-size: var(--slider-thumb-size-xl);
|
|
--_slider-hit-size: var(--slider-hit-size-xl);
|
|
--_slider-tick-size: var(--slider-tick-size-xl);
|
|
}
|
|
|
|
[data-slider][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--slider-disabled-opacity);
|
|
}
|
|
|
|
/* Readonly — value visible, thumb stays focusable, NOT dimmed (distinct from
|
|
disabled). Just drops the grab/edit cursor; the value lock lives in soma. */
|
|
[data-slider][data-readonly] {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-slider-thumb][data-readonly],
|
|
[data-slider-thumb][data-readonly]:active {
|
|
cursor: default;
|
|
scale: 1;
|
|
}
|
|
|
|
/* The global `commit` firma pulses a 3px primary box-shadow RING on whatever the
|
|
commit event targets. Our `commit-set` targets the PROVIDER, so every arrow
|
|
step and every drag release drew a border around the WHOLE control — a ring
|
|
reads as feedback on a small box, as a stray border on a wide thin rail. Kill
|
|
the VISUAL ring here (the sound/haptic firma is unaffected — it runs in JS,
|
|
not CSS); the value change is itself the visible confirmation. Same opt-out as
|
|
gradient-builder.css, and it reaches every embedded slider (media-player,
|
|
waveform, color-picker, time-picker…) because they all carry [data-slider].
|
|
`animation` is the lever, not `box-shadow`: keyframed declarations outrank
|
|
normal ones, so only resetting the animation NAME stops the paint. */
|
|
[data-slider][data-event-family='commit'][data-event-phase='active'] {
|
|
animation: none;
|
|
}
|
|
|
|
[data-slider][data-orientation='horizontal'] {
|
|
inline-size: 100%; /* literal: a rail spans its container — identity; its floor is `min-inline-size` */
|
|
block-size: var(--_slider-hit-size);
|
|
min-inline-size: var(--slider-min-inline-size);
|
|
}
|
|
|
|
[data-slider][data-orientation='vertical'] {
|
|
inline-size: var(--_slider-hit-size);
|
|
block-size: var(--slider-min-block-size);
|
|
min-block-size: var(--slider-min-block-size);
|
|
}
|
|
|
|
[data-slider]::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: var(--slider-track-radius);
|
|
background: var(--slider-track-bg);
|
|
}
|
|
|
|
[data-slider][data-orientation='horizontal']::before {
|
|
inset-inline: 0;
|
|
inset-block-start: 50%;
|
|
block-size: var(--_slider-track-size);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Centring on the inline axis is a LOGICAL offset (`margin-inline-start`), never
|
|
`translateX(-50%)`: transforms are physical, so pairing one with
|
|
`inset-inline-start` centres in LTR and lands a full track-width off-axis in
|
|
RTL. Same idiom the Tick already used below. */
|
|
[data-slider][data-orientation='vertical']::before {
|
|
inset-block: 0;
|
|
inset-inline-start: 50%;
|
|
inline-size: var(--_slider-track-size);
|
|
margin-inline-start: calc(var(--_slider-track-size) / -2);
|
|
}
|
|
|
|
[data-slider-range] {
|
|
border-radius: var(--slider-track-radius);
|
|
background: var(--slider-range-bg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-slider-range][data-orientation='horizontal'] {
|
|
inset-block-start: 50%;
|
|
block-size: var(--_slider-track-size);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
[data-slider-range][data-orientation='vertical'] {
|
|
inset-inline-start: 50%;
|
|
inline-size: var(--_slider-track-size);
|
|
margin-inline-start: calc(var(--_slider-track-size) / -2);
|
|
}
|
|
|
|
/* Secondary track (buffer / preloaded region) — same geometry as the range,
|
|
layered UNDER it (source order: the range is painted after and on top). */
|
|
[data-slider-secondary-range] {
|
|
border-radius: var(--slider-track-radius);
|
|
background: var(--slider-secondary-bg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-slider-secondary-range][data-orientation='horizontal'] {
|
|
inset-block-start: 50%;
|
|
block-size: var(--_slider-track-size);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
[data-slider-secondary-range][data-orientation='vertical'] {
|
|
inset-inline-start: 50%;
|
|
inline-size: var(--_slider-track-size);
|
|
margin-inline-start: calc(var(--_slider-track-size) / -2);
|
|
}
|
|
|
|
[data-slider-thumb] {
|
|
inline-size: var(--_slider-thumb-size);
|
|
block-size: var(--_slider-thumb-size);
|
|
border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
|
|
border-radius: var(--slider-thumb-radius);
|
|
background: var(--slider-thumb-bg);
|
|
box-shadow: var(--slider-thumb-shadow);
|
|
cursor: grab;
|
|
outline: none;
|
|
/* `scale` is its own property, independent of the `transform: translate()`
|
|
the soma uses to centre the thumb — they compose, so the lift scales the
|
|
thumb in place. */
|
|
transition:
|
|
background var(--slider-transition-duration) var(--slider-transition-ease),
|
|
border-color var(--slider-transition-duration) var(--slider-transition-ease),
|
|
scale var(--slider-transition-duration) var(--slider-transition-ease),
|
|
box-shadow var(--slider-transition-duration) var(--slider-transition-ease);
|
|
}
|
|
|
|
/* Pickup lift on grab: scale toward the viewer + a higher shadow. */
|
|
[data-slider-thumb]:active {
|
|
cursor: grabbing;
|
|
scale: var(--slider-active-thumb-scale);
|
|
box-shadow: var(--slider-active-thumb-shadow);
|
|
}
|
|
|
|
[data-slider-thumb]:focus-visible {
|
|
/* Keep the thumb's own drop shadow; the focus ring is a flush outline (no gap)
|
|
so it survives forced-colors. */
|
|
box-shadow: var(--slider-thumb-shadow);
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-slider-thumb][data-disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-slider-tick] {
|
|
inline-size: var(--_slider-tick-size);
|
|
block-size: var(--_slider-tick-size);
|
|
border-radius: var(--slider-tick-radius);
|
|
background: var(--slider-tick-bg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-slider-tick][data-orientation='horizontal'] {
|
|
inset-block-start: 50%;
|
|
margin-block-start: calc(var(--_slider-tick-size) / -2);
|
|
}
|
|
|
|
[data-slider-tick][data-orientation='vertical'] {
|
|
inset-inline-start: 50%;
|
|
margin-inline-start: calc(var(--_slider-tick-size) / -2);
|
|
}
|
|
|
|
[data-slider-tick][data-active] {
|
|
background: var(--slider-active-tick-bg);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-slider-thumb] {
|
|
transition: none;
|
|
}
|
|
/* No pickup zoom under reduced motion — the raised shadow still conveys grab. */
|
|
[data-slider-thumb]:active {
|
|
scale: 1;
|
|
}
|
|
}
|