a8215149a3
The vendored copy of Niveus, the site's design system, brought up to the current upstream (github.com/Nexoniarz/Niveus, 2026-10-18). The tree under docs/Website/niveus is upstream's byte for byte. .gitattributes says `* text eol=lf` and listed the binary types it knew, and woff2 was not one of them: Niveus's InstrumentSans-Italic had a CR LF pair in its compressed data, and committing it turned that into LF and the font into garbage. woff, woff2, otf, ico, gif, webp, pdf and wasm are binary now. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4
131 lines
4 KiB
CSS
131 lines
4 KiB
CSS
/* ==========================================================================
|
|
Niveus — Disclosure
|
|
--------------------------------------------------------------------------
|
|
<details class="nv-disclosure">
|
|
<summary class="nv-disclosure__summary"> … </summary>
|
|
<div class="nv-disclosure__body"> … </div>
|
|
</details>
|
|
|
|
Content expands out of the row that revealed it, at the position it already
|
|
occupies, rather than appearing at full height. The height animates because
|
|
the continuity layer turns on `interpolate-size`, which is what lets
|
|
block-size: auto take part in a transition — no measurement, no script, and
|
|
no wrapper whose height has to be kept in sync.
|
|
|
|
.nv-collapse in continuity.css covers the same relationship for markup that
|
|
cannot be a <details>.
|
|
========================================================================== */
|
|
|
|
.nv-disclosure {
|
|
--_padding: var(--nv-space-4);
|
|
|
|
background-color: var(--nv-color-surface);
|
|
background-image: var(--nv-sheen-surface);
|
|
border: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
|
border-radius: var(--nv-radius-lg);
|
|
box-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-1);
|
|
transition: var(--nv-transition-surface);
|
|
}
|
|
|
|
.nv-disclosure--plain {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.nv-disclosure__summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nv-space-3);
|
|
padding: var(--nv-space-3) var(--_padding);
|
|
|
|
font: var(--nv-font-label);
|
|
color: var(--nv-color-text-primary);
|
|
border-radius: inherit;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
list-style: none;
|
|
transition: var(--nv-transition-colors);
|
|
}
|
|
|
|
/* Both spellings are needed to suppress the native marker. */
|
|
.nv-disclosure__summary::marker,
|
|
.nv-disclosure__summary::-webkit-details-marker {
|
|
display: none;
|
|
content: "";
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.nv-disclosure__summary:hover {
|
|
background-color: var(--nv-color-surface-hover);
|
|
}
|
|
}
|
|
|
|
.nv-disclosure__summary:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--nv-focus-ring);
|
|
}
|
|
|
|
/* The chevron turns rather than swapping to a different glyph — the rotation
|
|
is what says "this is the same control in its other state". */
|
|
.nv-disclosure__chevron {
|
|
inline-size: 0.5em;
|
|
block-size: 0.5em;
|
|
margin-inline-start: auto;
|
|
margin-block-start: -0.2em;
|
|
flex: none;
|
|
|
|
border-inline-end: 1.5px solid var(--nv-color-text-tertiary);
|
|
border-block-end: 1.5px solid var(--nv-color-text-tertiary);
|
|
rotate: 45deg;
|
|
transition: rotate var(--nv-duration-normal) var(--nv-ease-standard);
|
|
}
|
|
|
|
.nv-disclosure[open] .nv-disclosure__chevron {
|
|
rotate: 225deg;
|
|
margin-block-start: 0.15em;
|
|
}
|
|
|
|
.nv-disclosure__body {
|
|
padding: 0 var(--_padding) var(--_padding);
|
|
color: var(--nv-color-text-secondary);
|
|
font: var(--nv-font-body);
|
|
}
|
|
|
|
/* The element the browser creates for a <details> body. Transitioning
|
|
content-visibility as a discrete property is what keeps the content
|
|
rendered while it collapses, instead of vanishing on the first frame. */
|
|
.nv-disclosure::details-content {
|
|
block-size: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition:
|
|
block-size var(--nv-duration-expand) var(--nv-ease-standard),
|
|
opacity var(--nv-duration-expand) var(--nv-ease-standard),
|
|
content-visibility var(--nv-duration-expand) allow-discrete;
|
|
}
|
|
|
|
.nv-disclosure[open]::details-content {
|
|
block-size: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Stacked disclosures read as one control surface, so only the outer corners
|
|
round and neighbours share a single hairline. */
|
|
.nv-disclosure-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* The negative margin collapses each pair of adjacent borders into a single
|
|
hairline, so neighbours are separated once rather than twice. */
|
|
.nv-disclosure-group > .nv-disclosure:not(:first-child) {
|
|
border-start-start-radius: 0;
|
|
border-start-end-radius: 0;
|
|
margin-block-start: calc(var(--nv-border-width) * -1);
|
|
}
|
|
|
|
.nv-disclosure-group > .nv-disclosure:not(:last-child) {
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|