mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-02 20:24:26 +00:00
5d435c4f49
Theme: light is a dimmer brand-tinted stone with deeper shade, so it reads as the same material as dark; every neutral now carries --nv-brand in both appearances. Native controls (accent-color, caret-color) take the brand. Time picker: 24-hour by default; data-nv-format-toggle adds a third wheel of 24H / AM / PM. Swiping it rebuilds the hour wheel for the new format. The selection lens is a raised glass bar, not a flat band. Motion: drum effect on the wheels as a scroll-driven animation, with a script fallback for engines without it (Firefox); rubber-band at both ends of a wheel that springs back; calendar months slide locally instead of via a page-wide transition; a chosen day springs into place. Firefox: wheel notches arrive in lines, not pixels, which made the rubber-band invisible; deltaMode is now normalised. The selected-day pop no longer plays on page load. Also: hover only inside @media (hover: hover) on the slider, the Glaze inner glow is a token, and the focus note in GUIDELINES.md is corrected (popovers do not trap focus). SPDX identifier added to niveus.js. check.py, build.py and build.py --check pass. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
114 lines
3.7 KiB
CSS
114 lines
3.7 KiB
CSS
/* ==========================================================================
|
|
Niveus — Slider
|
|
--------------------------------------------------------------------------
|
|
<input class="nv-slider" type="range" min="0" max="100" value="50">
|
|
|
|
A native range input dressed as the rest of the controls are: the track is a
|
|
well cut into the surface, the fill is the accent seen inside it, and the
|
|
thumb is a knob lit from above. Keyboard, touch, step and form behaviour are
|
|
the browser's.
|
|
|
|
Firefox draws the fill itself (::-moz-range-progress). Chromium and Safari
|
|
do not expose one, so the fill is a gradient sized by --nv-slider-pos, which
|
|
niveus.js keeps in step with the value. Without the script the fill is
|
|
simply absent in those two engines and the thumb still tells the truth.
|
|
|
|
To bind a slider to a design token, add data-nv-var="--nv-glass-frost" (and
|
|
optionally data-nv-var-target="#region" for a subtree instead of :root).
|
|
========================================================================== */
|
|
|
|
.nv-slider {
|
|
--_track: 0.5rem;
|
|
--_thumb: 1.5rem;
|
|
--_pos: var(--nv-slider-pos, 50%);
|
|
|
|
display: block;
|
|
inline-size: 100%;
|
|
block-size: var(--_thumb);
|
|
margin: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.nv-slider:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
/* --- Track ------------------------------------------------------------------ */
|
|
|
|
.nv-slider::-webkit-slider-runnable-track {
|
|
block-size: var(--_track);
|
|
background:
|
|
linear-gradient(var(--nv-color-accent) 0 0) 0 / var(--_pos) 100% no-repeat,
|
|
var(--nv-color-surface-inset);
|
|
border: var(--nv-border-width) solid var(--nv-color-border);
|
|
border-radius: var(--nv-radius-full);
|
|
box-shadow: var(--nv-elevation-inset-md), var(--nv-ledge);
|
|
}
|
|
|
|
.nv-slider::-moz-range-track {
|
|
block-size: var(--_track);
|
|
background-color: var(--nv-color-surface-inset);
|
|
border: var(--nv-border-width) solid var(--nv-color-border);
|
|
border-radius: var(--nv-radius-full);
|
|
box-shadow: var(--nv-elevation-inset-md), var(--nv-ledge);
|
|
}
|
|
|
|
.nv-slider::-moz-range-progress {
|
|
block-size: var(--_track);
|
|
background-color: var(--nv-color-accent);
|
|
border-radius: var(--nv-radius-full);
|
|
}
|
|
|
|
/* --- Thumb ------------------------------------------------------------------ */
|
|
|
|
.nv-slider::-webkit-slider-thumb {
|
|
inline-size: var(--_thumb);
|
|
block-size: var(--_thumb);
|
|
margin-block-start: calc((var(--_track) - var(--_thumb)) / 2);
|
|
background-color: var(--nv-color-knob);
|
|
background-image: var(--nv-sheen-knob);
|
|
border: 0;
|
|
border-radius: var(--nv-radius-full);
|
|
box-shadow: var(--nv-outline), var(--nv-elevation-2);
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
transition: scale var(--nv-duration-quick) var(--nv-ease-spring);
|
|
}
|
|
|
|
.nv-slider::-moz-range-thumb {
|
|
inline-size: var(--_thumb);
|
|
block-size: var(--_thumb);
|
|
box-sizing: border-box;
|
|
background-color: var(--nv-color-knob);
|
|
background-image: var(--nv-sheen-knob);
|
|
border: 0;
|
|
border-radius: var(--nv-radius-full);
|
|
box-shadow: var(--nv-outline), var(--nv-elevation-2);
|
|
transition: scale var(--nv-duration-quick) var(--nv-ease-spring);
|
|
}
|
|
|
|
/* Hover only where there is a pointer to hover with; touch would leave the
|
|
thumb enlarged after a tap. */
|
|
@media (hover: hover) {
|
|
.nv-slider:hover::-webkit-slider-thumb { scale: 1.06; }
|
|
.nv-slider:hover::-moz-range-thumb { scale: 1.06; }
|
|
}
|
|
|
|
.nv-slider:active::-webkit-slider-thumb { scale: 0.96; }
|
|
.nv-slider:active::-moz-range-thumb { scale: 0.96; }
|
|
|
|
.nv-slider:focus-visible::-webkit-slider-thumb {
|
|
box-shadow: var(--nv-focus-ring), var(--nv-elevation-2);
|
|
}
|
|
|
|
.nv-slider:focus-visible::-moz-range-thumb {
|
|
box-shadow: var(--nv-focus-ring), var(--nv-elevation-2);
|
|
}
|
|
|
|
.nv-slider:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|