mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
369d1cd8f7
Glaze is glass with a dial: --nv-glass-frost (0 clear .. 1 heavy) moves backdrop blur, tint and saturation together, read where the surface is drawn so any subtree or slider can change it. A masked rim and a specular bloom follow the pointer via niveus.js; without it the light sits at its default and the material still reads. Falls back to the elevated solid under reduced transparency or without backdrop-filter. New components: .nv-slider (binds to a token with data-nv-var), .nv-calendar, .nv-timepicker (24-hour by default, optional 24H / AM/PM switch, value always HH:MM), and .nv-picker with .nv-menu--listbox (search, type-ahead, keys). All render without niveus.js except where noted. GUIDELINES.md is the normative rulebook for people and AI agents. check.py, build.py and build.py --check pass. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
128 lines
3.9 KiB
CSS
128 lines
3.9 KiB
CSS
/* ==========================================================================
|
|
Niveus — Time picker
|
|
--------------------------------------------------------------------------
|
|
<div class="nv-timepicker nv-surface" data-nv-timepicker
|
|
data-nv-value="09:30" data-nv-step="5" data-nv-format-toggle></div>
|
|
|
|
Wheels, as on a phone: each column scrolls and snaps, and whatever sits in
|
|
the lens across the middle is the value. Scrolling, snapping, momentum and
|
|
touch are the browser's; niveus.js builds the columns, reads which row is
|
|
centred, and exposes the value as data-nv-value and an `nv:time` event.
|
|
|
|
The lens is the selection colour laid over the centre row, so it follows the
|
|
brand. Rows fade towards the top and bottom with a mask rather than a
|
|
coloured gradient, which keeps the fade right on any surface — solid, or
|
|
Glaze with something moving behind it.
|
|
|
|
The format is 24-hour unless told otherwise. With data-nv-format-toggle a
|
|
24H / AM/PM switch sits under the wheels and adds an AM/PM wheel when chosen;
|
|
the value stays 24-hour either way, so a form never has to know which the
|
|
person used.
|
|
|
|
Without niveus.js the element is empty. For a no-script fallback, use a
|
|
native <input type="time" class="nv-input">.
|
|
========================================================================== */
|
|
|
|
.nv-timepicker {
|
|
--_row: 2.25rem;
|
|
--_rows: 5;
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--nv-space-2);
|
|
padding: var(--nv-space-2) var(--nv-space-3) var(--nv-space-3);
|
|
border-radius: var(--nv-radius-xl);
|
|
color: var(--nv-color-text-primary);
|
|
}
|
|
|
|
.nv-timepicker__wheels {
|
|
position: relative;
|
|
display: flex;
|
|
gap: var(--nv-space-1);
|
|
}
|
|
|
|
/* The lens. It belongs to the wheels, not the picker, so the switch beneath
|
|
them never moves the centre. */
|
|
.nv-timepicker__wheels::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline: calc(var(--nv-space-2) * -1);
|
|
inset-block-start: 50%;
|
|
block-size: var(--_row);
|
|
translate: 0 -50%;
|
|
background-color: var(--nv-color-selection);
|
|
border-radius: var(--nv-radius-md);
|
|
box-shadow: var(--nv-highlight-top);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nv-timepicker__column {
|
|
position: relative;
|
|
inline-size: 3.5rem;
|
|
block-size: calc(var(--_row) * var(--_rows));
|
|
margin: 0;
|
|
padding: calc(var(--_row) * (var(--_rows) - 1) / 2) 0;
|
|
list-style: none;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scroll-snap-type: y mandatory;
|
|
scrollbar-width: none;
|
|
mask-image: linear-gradient(
|
|
transparent,
|
|
currentcolor 28%,
|
|
currentcolor 72%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.nv-timepicker__column::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.nv-timepicker__column:focus-visible {
|
|
outline: none;
|
|
border-radius: var(--nv-radius-md);
|
|
box-shadow: var(--nv-focus-ring);
|
|
}
|
|
|
|
.nv-timepicker__option {
|
|
display: grid;
|
|
place-items: center;
|
|
block-size: var(--_row);
|
|
scroll-snap-align: center;
|
|
color: var(--nv-color-text-tertiary);
|
|
font: var(--nv-font-label);
|
|
font-size: var(--nv-font-size-lg);
|
|
font-variant-numeric: tabular-nums;
|
|
cursor: pointer;
|
|
transition: var(--nv-transition-colors);
|
|
}
|
|
|
|
.nv-timepicker__option[aria-selected="true"] {
|
|
color: var(--nv-color-text-primary);
|
|
font-weight: var(--nv-font-weight-semibold);
|
|
}
|
|
|
|
/* 24H / AM/PM. A button group under the wheels; the pressed one is the format
|
|
in use. 24-hour is the default, so it starts pressed. */
|
|
.nv-timepicker__format {
|
|
align-self: center;
|
|
}
|
|
|
|
/* Pressed reads as pushed in: the format in use is a key held down. */
|
|
.nv-timepicker__format .nv-button[aria-pressed="true"] {
|
|
background-color: var(--nv-color-accent-subtle);
|
|
background-image: none;
|
|
color: var(--nv-color-accent-text);
|
|
box-shadow: var(--nv-elevation-inset-sm), var(--nv-ledge);
|
|
}
|
|
|
|
.nv-timepicker__separator {
|
|
display: grid;
|
|
place-items: center;
|
|
align-self: center;
|
|
color: var(--nv-color-text-tertiary);
|
|
font: var(--nv-font-label);
|
|
font-size: var(--nv-font-size-lg);
|
|
}
|