fertig 1.0.3 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +126 -0
- package/README.md +113 -31
- package/fertig.core.min.css +1 -1
- package/fertig.css +253 -79
- package/fertig.min.css +1 -1
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,132 @@ is the token names, the class names (the seven, plus the layout utilities),
|
|
|
6
6
|
and the ARIA attributes the component layer reads — changes to any of those
|
|
7
7
|
are breaking.
|
|
8
8
|
|
|
9
|
+
## [1.1.0] — 2026-08-31
|
|
10
|
+
|
|
11
|
+
A visual refresh and a component-first repositioning. No API breaks — the same
|
|
12
|
+
tokens, classes and attributes — but the default look changes visibly.
|
|
13
|
+
|
|
14
|
+
### Added
|
|
15
|
+
|
|
16
|
+
- **Named accents.** `data-accent="indigo|sky|sage|clay|plum|gold|slate"` on any
|
|
17
|
+
element retints everything inside it: links, focus rings, filled buttons, the
|
|
18
|
+
caret, the selection. Scoped rather than global, so one section can differ
|
|
19
|
+
from the rest of a page. Each pair is measured — the light tone clears AA as
|
|
20
|
+
link text on paper, the dark tone clears it on the dark ground.
|
|
21
|
+
- **Motion tokens.** `--ease-out`, `--ease-in`, `--ease` and the durations
|
|
22
|
+
`--dur-1` / `--dur-2`. The sheet had been animating with a bare `ease`, which
|
|
23
|
+
is the browser default and the flattest curve available.
|
|
24
|
+
- `--rs`, a small radius for inline chips and code, so they do not inherit the
|
|
25
|
+
larger control radius and read as lozenges.
|
|
26
|
+
|
|
27
|
+
### Changed
|
|
28
|
+
|
|
29
|
+
- **The default accent is indigo**, not the desaturated navy it was. Measured
|
|
30
|
+
6.28:1 as link text on paper and 6.39:1 for a white label on the fill in
|
|
31
|
+
light; 8.72:1 and 10.26:1 in dark. Both sit inside sRGB.
|
|
32
|
+
- **Cards no longer paint a tinted strip behind their header and footer.** A
|
|
33
|
+
filled bar across the top of a card is the old panel-heading pattern and is
|
|
34
|
+
what dated the sheet on sight; a hairline separates just as well and lets the
|
|
35
|
+
card read as one surface.
|
|
36
|
+
- Radii up: `--r` 6px → 9px, `--rw` 10px → 14px. Controls have more room —
|
|
37
|
+
buttons and fields gained roughly a tenth of an em of padding.
|
|
38
|
+
- More things transition, on the named curves: tabs, badges, cards, segmented
|
|
39
|
+
controls and popover items, alongside the controls that already did.
|
|
40
|
+
`:focus-visible` is explicitly excluded — a focus ring has to be there the
|
|
41
|
+
instant focus lands, not fade in after it.
|
|
42
|
+
|
|
43
|
+
### Fixed
|
|
44
|
+
|
|
45
|
+
- The tone bar on `.card[data-tone]` follows the corner radius again. It was an
|
|
46
|
+
inset shadow, which does not track the curve cleanly at the larger radius —
|
|
47
|
+
it read as a detached line with gaps at both top corners. It is a background
|
|
48
|
+
layer now, which the radius clips. The duplicate indicator on
|
|
49
|
+
`.card > header` is gone with it: the filled header used to hide it, and
|
|
50
|
+
without the fill both were painting.
|
|
51
|
+
- Navigation lists. `[data-layout=sidebar]` shipped without any styling for the
|
|
52
|
+
nav inside it, so the obvious markup — a `<menu>` in a `<nav>` — came out as
|
|
53
|
+
a boxed list group. It is navigation now: no rules between items, no bullets,
|
|
54
|
+
and the link fills the row.
|
|
55
|
+
- `aside` and `search` are block landmarks that had no vertical rhythm of their
|
|
56
|
+
own, so whatever followed sat flush against them.
|
|
57
|
+
|
|
58
|
+
### Fixed — audit pass
|
|
59
|
+
|
|
60
|
+
An audit pass. Everything here came out of `docs/known-flaws.md`, which lists
|
|
61
|
+
what was found, what was verified in a browser, and what was left alone on
|
|
62
|
+
purpose.
|
|
63
|
+
|
|
64
|
+
- **The shell survives a framework wrapper.** The page shell was `body > *`, so
|
|
65
|
+
a React, Vue, Svelte or Next app rendering into `<div id="root">` lost the
|
|
66
|
+
measure, the paper surface and the gutters with nothing on screen to say why.
|
|
67
|
+
The shell now also matches the children of a single `#root`, `#app`,
|
|
68
|
+
`#__next` or `[data-fertig]` wrapper. Every added selector sits inside
|
|
69
|
+
`:where()`, so specificity is unchanged.
|
|
70
|
+
- **A floor under the floor.** Every colour token was an unguarded
|
|
71
|
+
`light-dark()`. In an engine without it the tokens were invalid at
|
|
72
|
+
computed-value time, so backgrounds went transparent and colour was
|
|
73
|
+
inherited — a page could land unreadable rather than plain. A
|
|
74
|
+
`@supports not (color: light-dark(…))` block at the end of the layer restates
|
|
75
|
+
the palette in flat sRGB, in both schemes.
|
|
76
|
+
- **`data-size`, `data-variant` and `data-block` are scoped to controls.** As
|
|
77
|
+
bare attribute selectors they restyled any element carrying those very common
|
|
78
|
+
attribute names — a `<span data-size="sm">` picked up button padding.
|
|
79
|
+
- **The focus ring no longer reshapes what it rings.** `:focus-visible` set
|
|
80
|
+
`border-radius: var(--r)`, which is the element's own radius, not the ring's:
|
|
81
|
+
a focused `<dialog>` snapped from `--rw` (14px) to `--r` (9px). Outlines
|
|
82
|
+
already follow the element's corners, so the declaration is simply gone.
|
|
83
|
+
- **`<svg>` stays inline.** It was in the `display: block` rule with `img`,
|
|
84
|
+
`video` and `iframe`, which dropped every inline icon onto its own line.
|
|
85
|
+
- **Toasts can stack.** Two `[popover][data-toast]` elements shared one set of
|
|
86
|
+
corner coordinates and overlapped, and an open popover is in the top layer so
|
|
87
|
+
no ordinary wrapper could stack them. `<div popover="manual"
|
|
88
|
+
data-toast-region>` is now the popover, with a `<div data-toast>` per message.
|
|
89
|
+
- **A selected tab is visible in Windows High Contrast.** Its cue was a
|
|
90
|
+
`box-shadow` that the forced-colors layer removes, and the replacement set
|
|
91
|
+
`border-color` on an element with `border: 0`. It now sets a real
|
|
92
|
+
`border-bottom`.
|
|
93
|
+
- **`--on-ac` survives a custom `--ac` in shipping browsers.** The
|
|
94
|
+
`contrast-color()` guard is real but almost nothing implements it. A relative
|
|
95
|
+
colour branch reaches the same black-or-white decision from the accent's own
|
|
96
|
+
lightness, and has been cross-engine since 2024.
|
|
97
|
+
- **`interpolate-size: allow-keywords` is set on `details`, not `:root`.** It is
|
|
98
|
+
inherited, so the old placement changed how *your* `height: auto` transitions
|
|
99
|
+
behaved as a side effect of animating a disclosure.
|
|
100
|
+
- **Two universal rules narrowed to what the sheet actually styles.**
|
|
101
|
+
`scrollbar-width: thin` no longer thins the page's own scrollbar (a
|
|
102
|
+
target-size problem for imprecise pointers), and `corner-shape: squircle` no
|
|
103
|
+
longer reshapes your components.
|
|
104
|
+
- **`input[type=image]` is a button, not a text field.** It was missing from the
|
|
105
|
+
`:not()` list and got full-width sunken-field treatment.
|
|
106
|
+
- **The tooltip is flow-relative and reachable on touch** — logical inset
|
|
107
|
+
properties with a `:dir(rtl)` offset, and `:active` alongside `:hover`. It is
|
|
108
|
+
still decorative, and now says so in the sheet, the README and the docs.
|
|
109
|
+
- **`a[target=_blank]`** no longer appends an arrow to a link wrapping an image.
|
|
110
|
+
- **Print keeps the footer.** It was hidden along with the toolbar, which drops
|
|
111
|
+
the legal line, the contact and the citations from every printout.
|
|
112
|
+
- **The small variant stays small on touch.** `(pointer: coarse)` forced
|
|
113
|
+
`min-height: 44px` on everything; `data-size="sm"` opts down to 32px, still
|
|
114
|
+
above the 24px WCAG 2.5.8 floor.
|
|
115
|
+
- `package.json`'s size claim, the one string `tools/sizes.py` does not reach.
|
|
116
|
+
|
|
117
|
+
### Changed
|
|
118
|
+
|
|
119
|
+
- **`--a1` / `--a2` are now `--fertig-a1` / `--fertig-a2`.** These are
|
|
120
|
+
`@property` registrations, and a registration is global — it cannot be
|
|
121
|
+
layered, scoped or overridden. Two-character names meant a consumer's own
|
|
122
|
+
`--a1` was silently retyped to `<number>`. The other token names are
|
|
123
|
+
deliberately short and are unchanged; they are ordinary custom properties and
|
|
124
|
+
the documented API.
|
|
125
|
+
|
|
126
|
+
**This stays a minor release**: the prefixed tokens read the bare ones as a
|
|
127
|
+
fallback (`--fertig-a1: var(--a1, .08)`), so a sheet that set `--a1` on
|
|
128
|
+
`:root` — the documented way — keeps working exactly as it did, verified in a
|
|
129
|
+
browser. A *scoped* `--a1` further down the tree does not reach the shadows,
|
|
130
|
+
but it never did: `--sh1` has always been computed on `:root`, so the
|
|
131
|
+
fallback restores the capability that existed, not less. `--a1` itself is no
|
|
132
|
+
longer registered, which is the whole point — nothing of yours gets retyped.
|
|
133
|
+
Prefer the prefixed names in new code.
|
|
134
|
+
|
|
9
135
|
## [1.0.3] — 2026-08-30
|
|
10
136
|
|
|
11
137
|
### Changed
|
package/README.md
CHANGED
|
@@ -1,10 +1,53 @@
|
|
|
1
1
|
# fertig
|
|
2
2
|
|
|
3
|
-
A classless CSS file
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
A classless CSS file that gives you **components**, not just styled elements —
|
|
4
|
+
menus, dialogs, drawers, toasts and tooltips from plain semantic HTML,
|
|
5
|
+
addressed by the ARIA that makes them accessible, and working with JavaScript
|
|
6
|
+
switched off.
|
|
7
|
+
|
|
8
|
+
Link it, write ordinary HTML, and the page is finished.
|
|
9
|
+
|
|
10
|
+
**32.8 KB raw · 8.4 KB gzipped · no build step · no dependencies · no JavaScript.**
|
|
11
|
+
|
|
12
|
+
### What makes it different
|
|
13
|
+
|
|
14
|
+
Surveyed across the eleven most-used classless stylesheets on 2026-08-31
|
|
15
|
+
([working notes](docs/classless-landscape-2026.md)):
|
|
16
|
+
|
|
17
|
+
- **Components addressed by ARIA.** Only one other classless sheet ships a
|
|
18
|
+
single ARIA-addressed component. None ships tabs, a segmented control, or an
|
|
19
|
+
anchored popover menu.
|
|
20
|
+
- **Behaviour without JavaScript.** Others style `<dialog>` and leave the open
|
|
21
|
+
and close to you. Here `popover`, `command` and anchor positioning do it —
|
|
22
|
+
[audited with scripting disabled](#components-that-work-without-javascript).
|
|
23
|
+
- **Modern CSS.** Zero of the eleven use `oklch()`, `light-dark()`, `@layer`,
|
|
24
|
+
`@property`, container queries or anchor positioning. This sheet uses all of
|
|
25
|
+
them.
|
|
26
|
+
- **Cascade-layered.** It lives in `@layer fertig`, so your own unlayered CSS
|
|
27
|
+
wins at any specificity and overriding never needs `!important`. No other
|
|
28
|
+
classless sheet does this.
|
|
29
|
+
- **RTL by construction.** Written in logical properties throughout, not
|
|
30
|
+
patched with `[dir=rtl]` overrides afterwards.
|
|
31
|
+
|
|
32
|
+
It is *not* the smallest — Concrete.css is 1.2 KB gzipped, and most of the
|
|
33
|
+
field is a fraction of this because it styles elements and stops there. Against
|
|
34
|
+
the two classless sheets that also ship a component layer, fertig is the
|
|
35
|
+
lightest: 8.4 KB against matcha's 8.6 KB and Pico classless at 10.2 KB, and the
|
|
36
|
+
only one of the three whose components work without JavaScript. Size is a
|
|
37
|
+
constraint here, not the pitch.
|
|
38
|
+
|
|
39
|
+
## Components that work without JavaScript
|
|
40
|
+
|
|
41
|
+
Audited in a browser with scripting disabled:
|
|
42
|
+
|
|
43
|
+
| | |
|
|
44
|
+
|---|---|
|
|
45
|
+
| Popover menu, dialog, drawer, toast, tooltip, disclosure | **work with no script** |
|
|
46
|
+
| Tabs | **styled only** — switching panels needs ~8 lines of your own |
|
|
6
47
|
|
|
7
|
-
|
|
48
|
+
Tabs are the one gap, and it is deliberate: `aria-selected` must be a real
|
|
49
|
+
attribute for a screen reader to announce the right tab, and CSS cannot set
|
|
50
|
+
attributes. The snippet is in the docs.
|
|
8
51
|
|
|
9
52
|
```html
|
|
10
53
|
<link rel="stylesheet" href="fertig.css">
|
|
@@ -31,8 +74,11 @@ npm install fertig
|
|
|
31
74
|
|
|
32
75
|
## What it is
|
|
33
76
|
|
|
34
|
-
|
|
35
|
-
a
|
|
77
|
+
Opinions, so you don't have to have them: system type, one accent, one
|
|
78
|
+
measure, a window on a desktop. The structure is classic — a title bar, sunken
|
|
79
|
+
fields, raised buttons — and the finish is macOS: vibrancy, hairlines, soft
|
|
80
|
+
radii, the blue focus ring. None of it is a period costume, and none of it is
|
|
81
|
+
a picture of an OS: it is all CSS that every current engine already ships.
|
|
36
82
|
|
|
37
83
|
- **System type, set properly** — 16px on a 1.65 line height across roughly
|
|
38
84
|
seventy characters. Code keeps a monospace face, where it earns its place.
|
|
@@ -58,9 +104,25 @@ Direct children of `<body>` are the containers:
|
|
|
58
104
|
</body>
|
|
59
105
|
```
|
|
60
106
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
107
|
+
One wrapper is fine. React, Vue, Svelte and Next render into a mount node, so
|
|
108
|
+
the shell matches `body`'s children *or* the children of a single `#root`,
|
|
109
|
+
`#app`, `#__next`, or `[data-fertig]` wrapper:
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<body>
|
|
113
|
+
<div id="root">
|
|
114
|
+
<nav>…</nav>
|
|
115
|
+
<main>…</main>
|
|
116
|
+
</div>
|
|
117
|
+
</body>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Deeper than that, or a differently named mount node, and you re-point the shell
|
|
121
|
+
yourself — it is the only place `body >` appears:
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
#shell > *, #shell > header, #shell > main, #shell > footer { /* … */ }
|
|
125
|
+
```
|
|
64
126
|
|
|
65
127
|
## Components
|
|
66
128
|
|
|
@@ -76,8 +138,8 @@ accessible by construction.
|
|
|
76
138
|
| Breadcrumb | `<nav aria-label="Breadcrumb"><ol>` |
|
|
77
139
|
| Dialog | `<dialog>` — animates in, blurs the page behind; optional `<header>`/`<footer>` pin while the body scrolls |
|
|
78
140
|
| Loading | `aria-busy="true"` (inline spinner) |
|
|
79
|
-
| Tooltip | `data-tooltip="…"` |
|
|
80
|
-
| Button variants | `data-variant="ghost\|link"`, `data-size="sm\|lg"`, `data-icon`, `data-block` |
|
|
141
|
+
| Tooltip | `data-tooltip="…"` — decorative; put the same words in `aria-label` too |
|
|
142
|
+
| Button variants | `data-variant="ghost\|link"`, `data-size="sm\|lg"`, `data-icon`, `data-block` — on controls only, so they cannot catch a `<span data-size>` of yours |
|
|
81
143
|
| Card anatomy | `<header>` / `<footer>` inside `.card`; `<a class="card">` lifts on hover |
|
|
82
144
|
| Tones | `data-tone="ok\|warn\|err"` retints any component |
|
|
83
145
|
|
|
@@ -89,7 +151,7 @@ no classes:
|
|
|
89
151
|
| Avatar | `data-avatar` on an `<img>` or on initials in a `<span>`; `="sm\|lg"` |
|
|
90
152
|
| Skeleton | `data-skeleton` on the element that is still loading |
|
|
91
153
|
| Sheet / drawer | `<dialog data-side="left\|right\|bottom">` — the same dialog, docked to an edge |
|
|
92
|
-
| Toast | `[popover][data-toast]` — non-modal, parked in a corner |
|
|
154
|
+
| Toast | `[popover][data-toast]` — non-modal, parked in a corner. Several at once: `<div popover="manual" data-toast-region>` with a `<div data-toast>` per message |
|
|
93
155
|
| List group | a plain `<menu>` outside a popover becomes a bordered list |
|
|
94
156
|
| Nav menu | a `<menu>` inside a `<nav>` is navigation instead — no rules, no bullets, `aria-current` marks the page |
|
|
95
157
|
| Sidebar layout | `data-layout="sidebar"` on a wrapper of two children; the first sticks |
|
|
@@ -146,8 +208,9 @@ Override the four tokens you'd actually want to change:
|
|
|
146
208
|
|
|
147
209
|
If you change `--ac`, check `--on-ac` too — that is the text colour sitting on
|
|
148
210
|
the accent, and a light accent needs dark text to stay legible.
|
|
149
|
-
`--up` / `--up2` / `--dn` are the elevation scale, `--a1` /
|
|
150
|
-
|
|
211
|
+
`--up` / `--up2` / `--dn` are the elevation scale, `--fertig-a1` /
|
|
212
|
+
`--fertig-a2` the shadow alphas (these two are `@property` registrations, and
|
|
213
|
+
a registration is global — hence the prefix), `--rw` the window radius, and `--nw` the column the toolbar's contents
|
|
151
214
|
line up with. `--nw` follows `--w`, so nothing moves by default; `<nav
|
|
152
215
|
class="wide">` re-points it at the wide column, which is what an app screen
|
|
153
216
|
built on `.wide` wants so its wordmark doesn't float in the middle of the
|
|
@@ -205,7 +268,7 @@ assistive technology reads.
|
|
|
205
268
|
|
|
206
269
|
| Sheet | Raw | Gzip |
|
|
207
270
|
|---|---:|---:|
|
|
208
|
-
| **fertig** | **
|
|
271
|
+
| **fertig** | **32.8 KB** | **8.4 KB** |
|
|
209
272
|
| Pico 2.1.1 classless | 69.4 KB | 10.1 KB |
|
|
210
273
|
|
|
211
274
|
Measured with `gzip -9`, KB = 1024 bytes for every row. Most of the gap is Pico's full
|
|
@@ -225,17 +288,21 @@ button { background: hotpink } /* wins, no !important needed */
|
|
|
225
288
|
|
|
226
289
|
## Modern CSS, used deliberately
|
|
227
290
|
|
|
228
|
-
Everything past the
|
|
291
|
+
Everything past the floor sits behind `@supports` and is additive:
|
|
229
292
|
`contrast-color()` picks the text colour on your accent so an override cannot
|
|
230
293
|
fail contrast; anchor positioning attaches popover menus to their button;
|
|
231
294
|
`::details-content` with `interpolate-size` animates disclosures open;
|
|
232
295
|
`field-sizing` grows textareas; `corner-shape: squircle` gives continuous
|
|
233
296
|
corners; `text-box: trim-both` sits headings on their cap height; and
|
|
234
|
-
|
|
235
|
-
`
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
297
|
+
`appearance: base-select` styles the dropdown picker itself. Without any of it,
|
|
298
|
+
nothing breaks. Relative colour (`oklch(from …)`) is on that list too, for one
|
|
299
|
+
job only: lightening the filled button on hover in OKLCH. The shadow alphas
|
|
300
|
+
that used to need it are taken with `color-mix` against `transparent` instead —
|
|
301
|
+
pixel-identical, and three years older, which is what keeps Safari 17.5 inside
|
|
302
|
+
the floor. Two things are *not* on the list because they are part of the floor:
|
|
303
|
+
`@property`, which types the shadow alphas so elevation can transition, and
|
|
304
|
+
`container-type` on `.card`, which makes every card a container you can write
|
|
305
|
+
`@container` queries against.
|
|
239
306
|
|
|
240
307
|
It also answers to the OS: `prefers-reduced-motion`,
|
|
241
308
|
`prefers-reduced-transparency`, `prefers-contrast`, `forced-colors`,
|
|
@@ -251,14 +318,29 @@ margins with no stranded lines.
|
|
|
251
318
|
|
|
252
319
|
## Browser support
|
|
253
320
|
|
|
254
|
-
The
|
|
255
|
-
|
|
256
|
-
polyfills, no fallback build.
|
|
257
|
-
`@
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
321
|
+
The two-year window is on *browsers*, not on CSS. fertig runs in anything
|
|
322
|
+
released since August 2024 and carries nothing for the ones before it — no
|
|
323
|
+
vendor prefixes, no polyfills, no fallback build. The CSS it uses is mostly
|
|
324
|
+
older than that: `@layer` has been cross-engine since 2022, `oklch()` and
|
|
325
|
+
`color-mix()` since 2023, `light-dark()` since May 2024. The newest thing it
|
|
326
|
+
*requires* is `@starting-style`, cross-engine since August 2024 — nothing it
|
|
327
|
+
needs shipped inside the last two years.
|
|
328
|
+
|
|
329
|
+
| Engine | Minimum | Set by |
|
|
330
|
+
|---|---|---|
|
|
331
|
+
| Chrome / Edge | **123** | `light-dark()` |
|
|
332
|
+
| Safari | **17.5** | `light-dark()`, `@starting-style`, `text-wrap: balance` |
|
|
333
|
+
| Firefox | **129** | `@starting-style`, `transition-behavior` |
|
|
334
|
+
|
|
335
|
+
No component needs more than that floor — anything a component would *like* to
|
|
336
|
+
have it asks for through `@supports`. Anchor positioning, for instance, is
|
|
337
|
+
gated; without it `[popover]` menus centre on screen instead of sitting under
|
|
338
|
+
their button. Below the floor everything degrades to unstyled-but-readable
|
|
339
|
+
HTML.
|
|
340
|
+
|
|
341
|
+
Per-component and per-enhancement version tables, with the shipping dates
|
|
342
|
+
behind them, are in [`docs/browser-support-research.md`](docs/browser-support-research.md)
|
|
343
|
+
and on the [docs site](https://moji2002.github.io/fertig/docs.html#support).
|
|
262
344
|
|
|
263
345
|
## Development
|
|
264
346
|
|
|
@@ -271,8 +353,8 @@ npm run build # regenerate fertig.min.css and print sizes
|
|
|
271
353
|
|
|
272
354
|
| Build | Raw | Gzip | |
|
|
273
355
|
|---|---:|---:|---|
|
|
274
|
-
| `fertig.min.css` |
|
|
275
|
-
| `fertig.core.min.css` |
|
|
356
|
+
| `fertig.min.css` | 32.8 KB | 8.4 KB | everything |
|
|
357
|
+
| `fertig.core.min.css` | 25.1 KB | 6.9 KB | without the ARIA component layer |
|
|
276
358
|
|
|
277
359
|
Dropping the component layer saves 1.4 KB gzipped — worth knowing, rarely worth
|
|
278
360
|
doing. The weight is in the element coverage and forms, not the components.
|
package/fertig.core.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! fertig v1.0.3 — a classless CSS stylesheet. MIT */@property --a1{syntax:"<number>";inherits:true;initial-value:.08}@property --a2{syntax:"<number>";inherits:true;initial-value:.06}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--ac);caret-color:var(--ac);--f:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--w:38rem;--r:6px;--rw:10px;--stone-100:oklch(97.5% .004 75);--stone-300:oklch(91% .006 75);--stone-500:oklch(72% .008 75);--stone-700:oklch(47% .009 75);--stone-900:oklch(26% .008 75);--sage-100:oklch(96% .022 155);--sage-300:oklch(87% .042 155);--sage-500:oklch(66% .058 155);--sage-700:oklch(47% .055 155);--sage-900:oklch(29% .038 155);--sky-100:oklch(96% .022 240);--sky-300:oklch(87% .045 240);--sky-500:oklch(64% .085 245);--sky-700:oklch(48% .095 250);--sky-900:oklch(30% .06 250);--clay-100:oklch(96% .022 45);--clay-300:oklch(88% .045 45);--clay-500:oklch(68% .085 45);--clay-700:oklch(50% .09 40);--clay-900:oklch(31% .055 40);--plum-100:oklch(96% .02 320);--plum-300:oklch(88% .038 320);--plum-500:oklch(66% .06 320);--plum-700:oklch(47% .065 320);--plum-900:oklch(29% .042 320);--gold-100:oklch(96.5% .028 90);--gold-300:oklch(89% .055 88);--gold-500:oklch(74% .085 85);--gold-700:oklch(55% .085 80);--gold-900:oklch(33% .05 80);--bg:light-dark(oklch(93.5% .006 75),oklch(16% .006 75));--el:light-dark(oklch(99.4% .002 75),oklch(21% .006 75));--face:light-dark(oklch(97.2% .005 75),oklch(25% .007 75));--fg:light-dark(oklch(22% .008 75),oklch(95% .004 75));--mut:light-dark(oklch(47% .009 75),oklch(73% .008 75));--bd:light-dark(oklch(22% .008 75 / .13),oklch(95% .004 75 / .13));--tb:light-dark(oklch(97.2% .005 75 / .85),oklch(25% .007 75 / .85));--ac:light-dark(var(--sky-700),oklch(78% .085 245));--on-ac:light-dark(#fff,#06121f);--sh:oklch(23.1% .007 286);--a1:.08;--a2:.06;--sh1:oklch(from var(--sh) l c h / var(--a1));--sh2:oklch(from var(--sh) l c h / var(--a2));--up:0 1px 1px var(--sh1);--up2:0 1px 2px var(--sh1),0 6px 16px -6px var(--sh2);--dn:inset 0 1px 2px oklch(from var(--sh) l c h / .08);--caps:.74em/1.4 var(--f)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--a1:.5;--a2:.45}}@supports (color:contrast-color(red)){:root{--on-ac:contrast-color(var(--ac))}}[data-theme=light]{color-scheme:light;--a1:.08;--a2:.06}[data-theme=dark]{color-scheme:dark;--a1:.5;--a2:.45}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px;border-radius:var(--r)}img,svg,video,iframe{display:block;max-width:100%;height:auto}img,video{border-radius:var(--r);box-shadow:var(--up2)}body>*{max-width:var(--w);margin-inline:auto;padding-inline:1.9rem}body>header,body>main,body>footer{background:var(--el);border-inline:1px solid var(--bd)}body>header{padding-block:2.4rem .8rem}body>main{padding-bottom:2.8rem}body>footer{padding-block:1.2rem 2rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);margin-bottom:2.5rem;box-shadow:0 18px 30px -22px oklch(from var(--sh) l c h / .5)}body>nav{position:sticky;top:0;z-index:9;max-width:none;--nw:var(--w);padding-inline:max(1.9rem,calc(50% - var(--nw) / 2 + 1.9rem),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--tb);color:var(--fg);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);font-size:.92em}body>nav a{color:var(--fg);text-decoration:none;opacity:.75}body>nav a:hover{opacity:1}body>nav:is(strong,b) a{opacity:1}body>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--caps);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) +:is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--mut)}hr{border:0;border-top:1px solid var(--bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--mut);text-align:center}code,kbd,samp,pre{font-family:var(--fm);font-size:.9em}:not(pre)>code,samp{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:.08em .35em}kbd{background:var(--face);border:1px solid var(--bd);border-bottom-width:2px;border-radius:var(--r);padding:.08em .4em;box-shadow:var(--up)}pre{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--syn-comment:light-dark(#6b7280,#8b949e);--syn-key:light-dark(#7c3aed,#c4a7fb);--syn-str:light-dark(#15803d,#7ee787);--syn-num:light-dark(#b45309,#f0b866);--syn-fn:light-dark(#1d4ed8,#93c5fd);--syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font:700 var(--caps);text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}}caption{text-align:start;color:var(--mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--mut)}label:has(input){font-size:1rem;color:var(--fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.4em .6em;background:var(--el);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12.5px) 55%;background-size:5px 5px;background-repeat:no-repeat}select:dir(rtl){background-position:12.5px 55%,17px 55%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate .15s ease,translate .15s ease}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;background:var(--el);margin-block-start:.35rem;box-shadow:var(--up2),0 20px 40px -14px oklch(from var(--sh) l c h / .4)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--r) - 2px)}option:hover{background:var(--face)}option:checked{background:var(--ac);color:var(--on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0 .45em 0 0;vertical-align:-.18em}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--face);cursor:default}label:has(+:required)::after,label:has(:required)::after{content:" *";color:var(--ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fg);box-shadow:var(--dn),inset 0 0 0 100px var(--el);caret-color:var(--ac)}:disabled{color:var(--mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem 1rem;background:var(--face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--bd);font-size:.95em;font-weight:700;color:var(--fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.38em 1.1em;background:var(--el);color:var(--fg);cursor:pointer;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--up);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--face)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--dn);translate:0 .5px}[type=submit],.primary{background:var(--ac);border-color:transparent;color:var(--on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--ac) calc(l + .05) c h)}[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}[data-block]{display:block;width:100%;min-width:0}[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}[data-variant=ghost]:hover:not(:disabled){background:var(--face);border-color:var(--bd)}[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--ac);text-decoration:underline;text-underline-offset:3px}[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 7%,var(--face))}:is([type=submit],.primary){box-shadow:var(--up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){*{corner-shape:squircle}}details{border:1px solid var(--bd);border-radius:var(--r);padding:.7rem 1.1rem;background:var(--el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--rw);padding:1.4rem;max-width:min(30rem,92dvw);box-shadow:0 32px 64px -16px oklch(from var(--sh) l c h / .45)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:oklch(from var(--sh) l c h / .35);backdrop-filter:blur(3px)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.4rem;padding:.7rem 1.4rem;background:var(--el)}dialog>header{inset-block-start:-1.4rem;margin-block:-1.4rem 1rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--rw) var(--rw) 0 0}dialog>header>:is(h1,h2,h3,h4,p){margin:0;font-size:1.05rem}dialog>footer{inset-block-end:-1.4rem;margin-block:1rem -1.4rem;border-top:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity .2s,translate .2s,display .2s allow-discrete,overlay .2s allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s,translate .13s,display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--ac) 28%,transparent)}aside{border:1px solid var(--bd);border-inline-start:3px solid var(--ac);border-radius:var(--r);border-start-start-radius:0;border-end-start-radius:0;background:var(--el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:calc(infinity * 1px);background:var(--face)}progress::-webkit-progress-bar{background:var(--face);border-radius:calc(infinity * 1px)}progress::-webkit-progress-value{background:var(--ac);border-radius:calc(infinity * 1px)}progress::-moz-progress-bar{background:var(--ac);border-radius:calc(infinity * 1px)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}body>nav.wide{max-width:none;--nw:66rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row:is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row:is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--bd);border-radius:var(--r);padding:.9rem;background:var(--el);box-shadow:var(--up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:var(--w)}.hidden{display:none}.badge{border:1px solid var(--bd);border-radius:calc(infinity * 1px);background:var(--face);padding:.1em .6em;font:700 var(--caps);color:var(--mut)}.card>:is(header,footer){margin-inline:-.9rem;padding:.55rem .9rem;background:var(--face)}.card>header{margin-top:-.9rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--r) var(--r) 0 0}.card>footer{margin-top:auto;margin-bottom:-.9rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-radius:0 0 var(--r) var(--r)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-.9rem -.9rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:none}.card[data-tone]{box-shadow:var(--up2),inset 0 2px 0 var(--ac)}.card[data-tone]>header:first-child{box-shadow:inset 0 2px 0 var(--ac)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));box-shadow:var(--up2),0 12px 26px -14px oklch(from var(--sh) l c h / .4);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-top:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--ac) 12%,transparent)}a[target=_blank]::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--ac)}del{color:var(--mut)}address{font-style:normal;color:var(--mut)}hgroup>*{margin:0}hgroup>p{color:var(--mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--ac)}*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--bg:#fff;--el:#fff;--fg:#000;--bd:#999}body>nav,body>footer{display:none}body>*{border:0;max-width:none}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-reduced-transparency:reduce){body>nav{background:var(--face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@media (prefers-contrast:more){:root{--bd:light-dark(#00000059,#ffffff6b);--mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset]{transition:box-shadow .15s,background-color .15s,border-color .15s,translate .08s}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true],button[aria-pressed=true]{border-color:Highlight}}}
|
|
1
|
+
/*! fertig v1.1.0 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.08}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.06}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--ac);caret-color:var(--ac);--f:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--w:38rem;--r:9px;--rs:5px;--rw:14px;--stone-100:oklch(97.5% .004 75);--stone-300:oklch(91% .006 75);--stone-500:oklch(72% .008 75);--stone-700:oklch(47% .009 75);--stone-900:oklch(26% .008 75);--sage-100:oklch(96% .022 155);--sage-300:oklch(87% .042 155);--sage-500:oklch(66% .058 155);--sage-700:oklch(47% .055 155);--sage-900:oklch(29% .038 155);--sky-100:oklch(96% .022 240);--sky-300:oklch(87% .045 240);--sky-500:oklch(64% .085 245);--sky-700:oklch(48% .095 250);--sky-900:oklch(30% .06 250);--clay-100:oklch(96% .022 45);--clay-300:oklch(88% .045 45);--clay-500:oklch(68% .085 45);--clay-700:oklch(50% .09 40);--clay-900:oklch(31% .055 40);--plum-100:oklch(96% .02 320);--plum-300:oklch(88% .038 320);--plum-500:oklch(66% .06 320);--plum-700:oklch(47% .065 320);--plum-900:oklch(29% .042 320);--gold-100:oklch(96.5% .028 90);--gold-300:oklch(89% .055 88);--gold-500:oklch(74% .085 85);--gold-700:oklch(55% .085 80);--gold-900:oklch(33% .05 80);--bg:light-dark(oklch(93.5% .006 75),oklch(16% .006 75));--el:light-dark(oklch(99.4% .002 75),oklch(21% .006 75));--face:light-dark(oklch(97.2% .005 75),oklch(25% .007 75));--fg:light-dark(oklch(22% .008 75),oklch(95% .004 75));--mut:light-dark(oklch(47% .009 75),oklch(73% .008 75));--bd:light-dark(oklch(22% .008 75 / .13),oklch(95% .004 75 / .13));--tb:light-dark(oklch(97.2% .005 75 / .85),oklch(25% .007 75 / .85));--ac:light-dark(oklch(50% .19 275),oklch(78% .11 275));--on-ac:light-dark(#fff,#06121f);--sh:oklch(23.1% .007 286);--fertig-a1:var(--a1,.08);--fertig-a2:var(--a2,.06);--sh1:color-mix(in srgb,var(--sh) calc(var(--fertig-a1) * 100%),transparent);--sh2:color-mix(in srgb,var(--sh) calc(var(--fertig-a2) * 100%),transparent);--up:0 1px 1px var(--sh1);--up2:0 1px 2px var(--sh1),0 6px 16px -6px var(--sh2);--dn:inset 0 1px 2px color-mix(in srgb,var(--sh) 8%,transparent);--caps:.74em/1.4 var(--f);--ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.55,0,1,.45);--ease:cubic-bezier(.4,0,.2,1);--dur-1:.12s;--dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:var(--a1,.5);--fertig-a2:var(--a2,.45)}}@supports (color:oklch(from red l c h)){:root{--on-ac:oklch(from var(--ac) clamp(0,(l - .62) * -100,1) 0 h)}}@supports (color:contrast-color(red)){:root{--on-ac:contrast-color(var(--ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:var(--a1,.08);--fertig-a2:var(--a2,.06)}[data-theme=dark]{color-scheme:dark;--fertig-a1:var(--a1,.5);--fertig-a2:var(--a2,.45)}[data-accent=indigo]{--ac:light-dark(oklch(50% .19 275),oklch(78% .11 275))}[data-accent=sky]{--ac:light-dark(var(--sky-700),oklch(78% .085 245))}[data-accent=sage]{--ac:light-dark(var(--sage-700),oklch(80% .075 155))}[data-accent=clay]{--ac:light-dark(var(--clay-700),oklch(80% .085 45))}[data-accent=plum]{--ac:light-dark(var(--plum-700),oklch(80% .065 320))}[data-accent=gold]{--ac:light-dark(oklch(55% .085 80),oklch(84% .09 85))}[data-accent=slate]{--ac:light-dark(oklch(35% .01 250),oklch(86% .006 250))}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--r);box-shadow:var(--up2)}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{max-width:var(--w);margin-inline:auto;padding-inline:1.9rem}body>:where(#root,#app,#__next,[data-fertig]){max-width:none;padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--el);border-inline:1px solid var(--bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);margin-bottom:2.5rem;box-shadow:0 18px 30px -22px color-mix(in srgb,var(--sh) 50%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;max-width:none;--nw:var(--w);padding-inline:max(1.9rem,calc(50% - var(--nw) / 2 + 1.9rem),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--tb);color:var(--fg);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);font-size:.92em}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav:is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--caps);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) +:is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--mut)}hr{border:0;border-top:1px solid var(--bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--mut);text-align:center}code,kbd,samp,pre{font-family:var(--fm);font-size:.9em}:not(pre)>code,samp{background:var(--face);border:1px solid var(--bd);border-radius:var(--rs);padding:.08em .35em}kbd{background:var(--face);border:1px solid var(--bd);border-bottom-width:2px;border-radius:var(--rs);padding:.08em .4em;box-shadow:var(--up)}pre{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--syn-comment:light-dark(#6b7280,#8b949e);--syn-key:light-dark(#7c3aed,#c4a7fb);--syn-str:light-dark(#15803d,#7ee787);--syn-num:light-dark(#b45309,#f0b866);--syn-fn:light-dark(#1d4ed8,#93c5fd);--syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font:700 var(--caps);text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}}caption{text-align:start;color:var(--mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--mut)}label:has(input){font-size:1rem;color:var(--fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--el);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12.5px) 55%;background-size:5px 5px;background-repeat:no-repeat}select:dir(rtl){background-position:12.5px 55%,17px 55%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;background:var(--el);margin-block-start:.35rem;box-shadow:var(--up2),0 20px 40px -14px color-mix(in srgb,var(--sh) 40%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--r) - 2px)}option:hover{background:var(--face)}option:checked{background:var(--ac);color:var(--on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0 .45em 0 0;vertical-align:-.18em}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--face);cursor:default}label:has(+:required)::after,label:has(:required)::after{content:" *";color:var(--ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fg);box-shadow:var(--dn),inset 0 0 0 100px var(--el);caret-color:var(--ac)}:disabled{color:var(--mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem 1rem;background:var(--face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--bd);font-size:.95em;font-weight:700;color:var(--fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.48em 1.1em;background:var(--el);color:var(--fg);cursor:pointer;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--up);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--face)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--dn);translate:0 .5px}[type=submit],.primary{background:var(--ac);border-color:transparent;color:var(--on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--face);border-color:var(--bd)}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 7%,var(--face))}:is([type=submit],.primary){box-shadow:var(--up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){:is(button,[type=submit],[type=button],[type=reset],input,select,textarea,fieldset,details,dialog,[popover],pre,kbd,code,samp,img,video,menu,aside,[data-avatar],[data-skeleton],.card,.badge){corner-shape:squircle}}details{border:1px solid var(--bd);border-radius:var(--r);padding:.7rem 1.1rem;background:var(--el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--rw);padding:1.4rem;max-width:min(30rem,92dvw);box-shadow:0 32px 64px -16px color-mix(in srgb,var(--sh) 45%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--sh) 35%,transparent);backdrop-filter:blur(3px)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.4rem;padding:.7rem 1.4rem;background:var(--el)}dialog>header{inset-block-start:-1.4rem;margin-block:-1.4rem 1rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--rw) var(--rw) 0 0}dialog>header>:is(h1,h2,h3,h4,p){margin:0;font-size:1.05rem}dialog>footer{inset-block-end:-1.4rem;margin-block:1rem -1.4rem;border-top:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--ease-out),translate .13s var(--ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--ac) 28%,transparent)}aside{border:1px solid var(--bd);border-inline-start:3px solid var(--ac);border-radius:var(--r);border-start-start-radius:0;border-end-start-radius:0;background:var(--el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:calc(infinity * 1px);background:var(--face)}progress::-webkit-progress-bar{background:var(--face);border-radius:calc(infinity * 1px)}progress::-webkit-progress-value{background:var(--ac);border-radius:calc(infinity * 1px)}progress::-moz-progress-bar{background:var(--ac);border-radius:calc(infinity * 1px)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--nw:66rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row:is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row:is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem;background:var(--el);box-shadow:var(--up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:var(--w)}.hidden{display:none}.badge{border:1px solid var(--bd);border-radius:calc(infinity * 1px);background:var(--face);padding:.1em .6em;font:700 var(--caps);color:var(--mut)}.card>:is(header,footer){margin-inline:-1.1rem;padding-inline:1.1rem}.card>header{margin-top:-.25rem;padding-bottom:.7rem;font-weight:600;border-bottom:1px solid var(--bd)}.card>footer{margin-top:auto;margin-bottom:-.25rem;padding-top:.7rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:none}.card[data-tone]{background:linear-gradient(var(--ac),var(--ac)) top / 100% 3px no-repeat,var(--el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));box-shadow:var(--up2),0 12px 26px -14px color-mix(in srgb,var(--sh) 40%,transparent);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-top:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--ac)}del{color:var(--mut)}address{font-style:normal;color:var(--mut)}hgroup>*{margin:0}hgroup>p{color:var(--mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--bg:#fff;--el:#fff;--fg:#000;--bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{box-shadow:none;margin-bottom:0}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{border:0;max-width:none}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-reduced-transparency:reduce){body>nav{background:var(--face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@media (prefers-contrast:more){:root{--bd:light-dark(#00000059,#ffffff6b);--mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=group]>*,[popover]:is(a,button){transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),translate .08s var(--ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--bg:#ece9e5;--el:#fefdfc;--face:#f8f5f2;--fg:#1d1a17;--mut:#5e5a55;--bd:#1d1a1721;--tb:#f8f5f2d9;--ac:#494fcc;--on-ac:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0d0a;--el:#1a1815;--face:#24211e;--fg:#f0eeec;--mut:#aba7a2;--bd:#f0eeec21;--tb:#24211ed9;--ac:#a3b2fe;--on-ac:#06121f}}[data-theme=dark]{--bg:#0f0d0a;--el:#1a1815;--face:#24211e;--fg:#f0eeec;--mut:#aba7a2;--bd:#f0eeec21;--tb:#24211ed9;--ac:#a3b2fe;--on-ac:#06121f}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true]{border-bottom:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}
|
package/fertig.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! fertig v1.0
|
|
1
|
+
/*! fertig v1.1.0 — a classless CSS stylesheet. MIT */
|
|
2
2
|
|
|
3
3
|
/* Opinions, so you don't have to have them:
|
|
4
4
|
system type · one accent · one measure · a window on a desktop.
|
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
Override the tokens marked "yours"; the rest is the point of view. */
|
|
8
8
|
|
|
9
9
|
/* typed so they interpolate; untyped custom properties cannot animate */
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
/* Registrations are global: they cannot be layered, scoped or overridden.
|
|
11
|
+
Hence the prefix — a bare --a1 would silently retype a property of yours. */
|
|
12
|
+
@property --fertig-a1 { syntax: "<number>"; inherits: true; initial-value: .08 }
|
|
13
|
+
@property --fertig-a2 { syntax: "<number>"; inherits: true; initial-value: .06 }
|
|
12
14
|
|
|
13
15
|
/* Two layers, in this order. Your own unlayered CSS wins over both regardless
|
|
14
16
|
of specificity, so overriding never needs !important — and neither does this
|
|
@@ -30,8 +32,9 @@
|
|
|
30
32
|
--fm: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
31
33
|
"Liberation Mono", monospace; /* code */
|
|
32
34
|
--w: 38rem; /* ~70 characters — yours */
|
|
33
|
-
--r:
|
|
34
|
-
--
|
|
35
|
+
--r: 9px; /* control radius */
|
|
36
|
+
--rs: 5px; /* small radius: inline chips and code */
|
|
37
|
+
--rw: 14px; /* window radius */
|
|
35
38
|
|
|
36
39
|
/* ---- palette ------------------------------------------------
|
|
37
40
|
Low chroma on purpose. Vivid palettes shout; these are meant to sit
|
|
@@ -73,29 +76,69 @@
|
|
|
73
76
|
--mut: light-dark(oklch(47% .009 75), oklch(73% .008 75));
|
|
74
77
|
--bd: light-dark(oklch(22% .008 75 / .13), oklch(95% .004 75 / .13));
|
|
75
78
|
--tb: light-dark(oklch(97.2% .005 75 / .85), oklch(25% .007 75 / .85));
|
|
76
|
-
|
|
79
|
+
/* indigo, not the azure every other classless sheet lands on. Measured:
|
|
80
|
+
6.28:1 as link text on paper and 6.39:1 for a white label on the fill in
|
|
81
|
+
light; 8.72:1 and 10.26:1 in dark. Both sit inside sRGB. */
|
|
82
|
+
--ac: light-dark(oklch(50% .19 275), oklch(78% .11 275)); /* yours */
|
|
77
83
|
--on-ac: light-dark(#fff, #06121f); /* text on the accent, both themes */
|
|
78
84
|
|
|
79
85
|
/* depth: hairline + soft shadow, macOS weight.
|
|
80
|
-
--sh is an ordinary colour — override it with any notation you like
|
|
81
|
-
the
|
|
86
|
+
--sh is an ordinary colour — override it with any notation you like, and
|
|
87
|
+
every shadow in the sheet retints. The alphas are taken with color-mix
|
|
88
|
+
against transparent rather than relative colour: same result, and it is
|
|
89
|
+
three years older, which keeps Safari 17.5 inside the floor. */
|
|
82
90
|
--sh: oklch(23.1% .007 286);
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
91
|
+
/* The prefixed names are the API; the bare ones are read as a fallback so a
|
|
92
|
+
sheet that set --a1 before 1.1.0 keeps working. --a1 itself stays
|
|
93
|
+
unregistered, which is the point of the rename — an @property
|
|
94
|
+
registration is global and cannot be scoped, so a two-character name was
|
|
95
|
+
silently retyping a consumer's own property. */
|
|
96
|
+
--fertig-a1: var(--a1, .08); --fertig-a2: var(--a2, .06);
|
|
97
|
+
--sh1: color-mix(in srgb, var(--sh) calc(var(--fertig-a1) * 100%), transparent);
|
|
98
|
+
--sh2: color-mix(in srgb, var(--sh) calc(var(--fertig-a2) * 100%), transparent);
|
|
86
99
|
--up: 0 1px 1px var(--sh1);
|
|
87
100
|
--up2: 0 1px 2px var(--sh1), 0 6px 16px -6px var(--sh2);
|
|
88
|
-
--dn: inset 0 1px 2px
|
|
101
|
+
--dn: inset 0 1px 2px color-mix(in srgb, var(--sh) 8%, transparent);
|
|
89
102
|
--caps: .74em/1.4 var(--f);
|
|
103
|
+
|
|
104
|
+
/* motion. One decelerating curve for things arriving, one accelerating for
|
|
105
|
+
things leaving, and a symmetric one for state that toggles in place. */
|
|
106
|
+
--ease-out: cubic-bezier(.22, 1, .36, 1);
|
|
107
|
+
--ease-in: cubic-bezier(.55, 0, 1, .45);
|
|
108
|
+
--ease: cubic-bezier(.4, 0, .2, 1);
|
|
109
|
+
--dur-1: .12s; /* a control reacting under the pointer */
|
|
110
|
+
--dur-2: .2s; /* something appearing or leaving */
|
|
90
111
|
}
|
|
91
112
|
@media (prefers-color-scheme: dark) {
|
|
92
|
-
:root:not([data-theme=light]) { --a1: .5; --a2: .45 }
|
|
113
|
+
:root:not([data-theme=light]) { --fertig-a1: var(--a1, .5); --fertig-a2: var(--a2, .45) }
|
|
114
|
+
}
|
|
115
|
+
/* --on-ac has to survive any --ac override, or a custom accent ships an
|
|
116
|
+
unreadable label. contrast-color() does that properly but has almost no
|
|
117
|
+
support; relative colour reaches the same black-or-white decision from the
|
|
118
|
+
accent's own lightness, and has been cross-engine since 2024. Both are
|
|
119
|
+
additive — the measured light-dark() pair above stands if neither exists. */
|
|
120
|
+
@supports (color: oklch(from red l c h)) {
|
|
121
|
+
:root { --on-ac: oklch(from var(--ac) clamp(0, (l - .62) * -100, 1) 0 h) }
|
|
93
122
|
}
|
|
94
123
|
@supports (color: contrast-color(red)) {
|
|
95
|
-
:root { --on-ac: contrast-color(var(--ac)) }
|
|
124
|
+
:root { --on-ac: contrast-color(var(--ac)) }
|
|
96
125
|
}
|
|
97
|
-
[data-theme=light] { color-scheme: light; --a1: .08; --a2: .06 }
|
|
98
|
-
[data-theme=dark] { color-scheme: dark; --a1: .5; --a2: .45 }
|
|
126
|
+
[data-theme=light] { color-scheme: light; --fertig-a1: var(--a1, .08); --fertig-a2: var(--a2, .06) }
|
|
127
|
+
[data-theme=dark] { color-scheme: dark; --fertig-a1: var(--a1, .5); --fertig-a2: var(--a2, .45) }
|
|
128
|
+
|
|
129
|
+
/* Named accents. The ramps already exist, so this is a mapping table: put
|
|
130
|
+
data-accent on any element and everything inside it — links, focus rings,
|
|
131
|
+
filled buttons, the caret, the selection — follows. Scoped rather than
|
|
132
|
+
global, so one section of a page can differ from the rest.
|
|
133
|
+
Each pair is measured: the light tone clears AA as link text on paper, the
|
|
134
|
+
dark tone clears it on the dark ground. */
|
|
135
|
+
[data-accent=indigo] { --ac: light-dark(oklch(50% .19 275), oklch(78% .11 275)) }
|
|
136
|
+
[data-accent=sky] { --ac: light-dark(var(--sky-700), oklch(78% .085 245)) }
|
|
137
|
+
[data-accent=sage] { --ac: light-dark(var(--sage-700), oklch(80% .075 155)) }
|
|
138
|
+
[data-accent=clay] { --ac: light-dark(var(--clay-700), oklch(80% .085 45)) }
|
|
139
|
+
[data-accent=plum] { --ac: light-dark(var(--plum-700), oklch(80% .065 320)) }
|
|
140
|
+
[data-accent=gold] { --ac: light-dark(oklch(55% .085 80), oklch(84% .09 85)) }
|
|
141
|
+
[data-accent=slate] { --ac: light-dark(oklch(35% .01 250), oklch(86% .006 250)) }
|
|
99
142
|
|
|
100
143
|
/* ---- base --------------------------------------------------- */
|
|
101
144
|
*, ::before, ::after { box-sizing: border-box }
|
|
@@ -110,28 +153,44 @@ body {
|
|
|
110
153
|
font-variant-numeric: slashed-zero tabular-nums;
|
|
111
154
|
}
|
|
112
155
|
::selection { background: color-mix(in srgb, var(--ac) 28%, transparent) }
|
|
113
|
-
|
|
156
|
+
/* The macOS ring. No border-radius here: an outline already follows the
|
|
157
|
+
element's own corners, and setting one would reshape whatever takes focus —
|
|
158
|
+
a focused dialog would snap from --rw to --r for as long as it is focused. */
|
|
159
|
+
:focus-visible {
|
|
114
160
|
outline: 3px solid color-mix(in srgb, var(--ac) 45%, transparent);
|
|
115
|
-
outline-offset: 1px;
|
|
161
|
+
outline-offset: 1px;
|
|
116
162
|
}
|
|
117
|
-
img,
|
|
163
|
+
img, video, iframe { display: block; max-width: 100%; height: auto }
|
|
164
|
+
/* svg is left inline: it is as often an icon inside a sentence or a button as
|
|
165
|
+
it is a standalone figure, and display:block drops the icon onto its own row */
|
|
166
|
+
svg { max-width: 100%; vertical-align: middle }
|
|
118
167
|
img, video { border-radius: var(--r); box-shadow: var(--up2) }
|
|
119
168
|
|
|
120
169
|
/* ---- layout: a window on a desktop --------------------------- */
|
|
121
|
-
body
|
|
122
|
-
|
|
170
|
+
/* The shell is body's own children — or the children of the single wrapper a
|
|
171
|
+
framework insists on (#root, #app, #__next, or your own [data-fertig]).
|
|
172
|
+
Without this a React page silently loses the measure, the paper and the
|
|
173
|
+
gutters, and nothing on screen says why. The wrapper list sits inside
|
|
174
|
+
:where() so every selector keeps the specificity it had as `body > *`. */
|
|
175
|
+
body > *,
|
|
176
|
+
body > :where(#root, #app, #__next, [data-fertig]) > * {
|
|
177
|
+
max-width: var(--w); margin-inline: auto; padding-inline: 1.9rem;
|
|
178
|
+
}
|
|
179
|
+
/* the wrapper is not itself a shell element; it just gets out of the way */
|
|
180
|
+
body > :where(#root, #app, #__next, [data-fertig]) { max-width: none; padding-inline: 0 }
|
|
181
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > :is(header, main, footer) {
|
|
123
182
|
background: var(--el); border-inline: 1px solid var(--bd);
|
|
124
183
|
}
|
|
125
|
-
body > header { padding-block: 2.4rem .8rem }
|
|
126
|
-
body > main { padding-bottom: 2.8rem }
|
|
127
|
-
body > footer {
|
|
184
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > header { padding-block: 2.4rem .8rem }
|
|
185
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > main { padding-bottom: 2.8rem }
|
|
186
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > footer {
|
|
128
187
|
padding-block: 1.2rem 2rem; color: var(--mut); font-size: .85em;
|
|
129
188
|
border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
|
|
130
189
|
border-radius: 0 0 var(--rw) var(--rw); margin-bottom: 2.5rem;
|
|
131
|
-
box-shadow: 0 18px 30px -22px
|
|
190
|
+
box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--sh) 50%, transparent);
|
|
132
191
|
}
|
|
133
192
|
/* nav = unified toolbar: full-bleed, vibrant, contents on the measure */
|
|
134
|
-
body > nav {
|
|
193
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav {
|
|
135
194
|
position: sticky; top: 0; z-index: 9; max-width: none;
|
|
136
195
|
/* the toolbar is full-bleed but its contents line up with the page column.
|
|
137
196
|
--nw is that column: it follows --w, so overriding the measure moves the
|
|
@@ -145,10 +204,10 @@ body > nav {
|
|
|
145
204
|
backdrop-filter: saturate(180%) blur(20px);
|
|
146
205
|
border-bottom: 1px solid var(--bd); font-size: .92em;
|
|
147
206
|
}
|
|
148
|
-
body > nav a { color: var(--fg); text-decoration: none; opacity: .75 }
|
|
149
|
-
body > nav a:hover { opacity: 1 }
|
|
150
|
-
body > nav :is(strong, b) a { opacity: 1 } /* the wordmark is not a link among links */
|
|
151
|
-
body > nav ul {
|
|
207
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav a { color: var(--fg); text-decoration: none; opacity: .75 }
|
|
208
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav a:hover { opacity: 1 }
|
|
209
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav :is(strong, b) a { opacity: 1 } /* the wordmark is not a link among links */
|
|
210
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav ul {
|
|
152
211
|
display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; padding: 0; margin: 0;
|
|
153
212
|
flex: 1; /* takes the slack, so a trailing control sits at the end */
|
|
154
213
|
}
|
|
@@ -192,11 +251,11 @@ figcaption { font-size: .85em; color: var(--mut); text-align: center }
|
|
|
192
251
|
code, kbd, samp, pre { font-family: var(--fm); font-size: .9em }
|
|
193
252
|
:not(pre) > code, samp {
|
|
194
253
|
background: var(--face); border: 1px solid var(--bd);
|
|
195
|
-
border-radius: var(--
|
|
254
|
+
border-radius: var(--rs); padding: .08em .35em;
|
|
196
255
|
}
|
|
197
256
|
kbd {
|
|
198
257
|
background: var(--face); border: 1px solid var(--bd); border-bottom-width: 2px;
|
|
199
|
-
border-radius: var(--
|
|
258
|
+
border-radius: var(--rs); padding: .08em .4em; box-shadow: var(--up);
|
|
200
259
|
}
|
|
201
260
|
pre {
|
|
202
261
|
background: var(--face); border: 1px solid var(--bd); border-radius: var(--r);
|
|
@@ -279,9 +338,9 @@ textarea { width: 100%; min-height: 5rem; resize: vertical }
|
|
|
279
338
|
@supports (field-sizing: content) {
|
|
280
339
|
textarea { field-sizing: content; max-height: 24rem }
|
|
281
340
|
}
|
|
282
|
-
input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset]),
|
|
341
|
+
input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),
|
|
283
342
|
select, textarea {
|
|
284
|
-
display: block; width: 100%; padding: .
|
|
343
|
+
display: block; width: 100%; padding: .52em .7em; background: var(--el);
|
|
285
344
|
border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--dn);
|
|
286
345
|
}
|
|
287
346
|
select {
|
|
@@ -305,14 +364,14 @@ select[multiple] { background-image: none; padding-inline-end: .6em }
|
|
|
305
364
|
content: ""; inline-size: .45em; block-size: .45em; flex: none;
|
|
306
365
|
border: solid currentColor; border-width: 0 1px 1px 0;
|
|
307
366
|
rotate: 45deg; translate: 0 -.15em; opacity: .7;
|
|
308
|
-
transition: rotate
|
|
367
|
+
transition: rotate var(--dur-1) var(--ease), translate var(--dur-1) var(--ease);
|
|
309
368
|
}
|
|
310
369
|
select:open::picker-icon { rotate: 225deg; translate: 0 .1em }
|
|
311
370
|
::picker(select) {
|
|
312
371
|
min-width: anchor-size(width); /* never narrower than the field */
|
|
313
372
|
border: 1px solid var(--bd); border-radius: var(--r); padding: .3rem;
|
|
314
373
|
background: var(--el); margin-block-start: .35rem;
|
|
315
|
-
box-shadow: var(--up2), 0 20px 40px -14px
|
|
374
|
+
box-shadow: var(--up2), 0 20px 40px -14px color-mix(in srgb, var(--sh) 40%, transparent);
|
|
316
375
|
}
|
|
317
376
|
option {
|
|
318
377
|
display: flex; align-items: center; gap: .5em; padding: .4em .6em;
|
|
@@ -363,7 +422,7 @@ legend + * { clear: left }
|
|
|
363
422
|
button, [type=submit], [type=button], [type=reset],
|
|
364
423
|
:where(a.primary, a[role=button]), ::file-selector-button {
|
|
365
424
|
display: inline-block; text-decoration: none; text-align: center;
|
|
366
|
-
padding: .
|
|
425
|
+
padding: .48em 1.1em; background: var(--el); color: var(--fg); cursor: pointer;
|
|
367
426
|
border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--up);
|
|
368
427
|
font: inherit; min-width: 5rem;
|
|
369
428
|
}
|
|
@@ -372,22 +431,34 @@ button, [type=submit], [type=button], [type=reset],
|
|
|
372
431
|
box-shadow: var(--dn); translate: 0 .5px;
|
|
373
432
|
}
|
|
374
433
|
[type=submit], .primary { background: var(--ac); border-color: transparent; color: var(--on-ac) }
|
|
434
|
+
/* The filled button lightens on hover. color-mix does that in oklab, which is
|
|
435
|
+
close enough and is Baseline; relative colour does it by adding to L
|
|
436
|
+
directly, which holds the hue exactly when --ac is a wide-gamut override.
|
|
437
|
+
Both derive from --ac, so a custom accent never needs a second declaration. */
|
|
375
438
|
:is([type=submit], .primary, a.primary):hover:not(:disabled) {
|
|
376
|
-
background:
|
|
439
|
+
background: color-mix(in oklab, var(--ac), #fff 9%);
|
|
440
|
+
}
|
|
441
|
+
@supports (color: oklch(from red l c h)) {
|
|
442
|
+
:is([type=submit], .primary, a.primary):hover:not(:disabled) {
|
|
443
|
+
background: oklch(from var(--ac) calc(l + .05) c h);
|
|
444
|
+
}
|
|
377
445
|
}
|
|
378
446
|
|
|
379
447
|
/* button detail: sizes, variants, toggles, icon and block forms */
|
|
380
|
-
|
|
381
|
-
|
|
448
|
+
/* Scoped to controls. data-size, data-block and data-variant are names other
|
|
449
|
+
component libraries and framework wrappers use too, and a bare attribute
|
|
450
|
+
selector would restyle a stranger's <span data-size="sm"> on contact. */
|
|
451
|
+
:is(button, a, input, select, label)[data-size=sm] { padding: .2em .7em; font-size: .85em; min-width: 0 }
|
|
452
|
+
:is(button, a, input, select, label)[data-size=lg] { padding: .55em 1.5em; font-size: 1.05em }
|
|
382
453
|
button[data-icon] { min-width: 0; padding: .38em .62em; line-height: 1 }
|
|
383
|
-
[data-block] { display: block; width: 100%; min-width: 0 }
|
|
384
|
-
[data-variant=ghost] { background: none; border-color: transparent; box-shadow: none }
|
|
385
|
-
[data-variant=ghost]:hover:not(:disabled) { background: var(--face); border-color: var(--bd) }
|
|
386
|
-
[data-variant=link] {
|
|
454
|
+
:is(button, a, input, select, label)[data-block] { display: block; width: 100%; min-width: 0 }
|
|
455
|
+
:is(button, a, input)[data-variant=ghost] { background: none; border-color: transparent; box-shadow: none }
|
|
456
|
+
:is(button, a, input)[data-variant=ghost]:hover:not(:disabled) { background: var(--face); border-color: var(--bd) }
|
|
457
|
+
:is(button, a, input)[data-variant=link] {
|
|
387
458
|
background: none; border: 0; box-shadow: none; min-width: 0; padding-inline: .2em;
|
|
388
459
|
color: var(--ac); text-decoration: underline; text-underline-offset: 3px;
|
|
389
460
|
}
|
|
390
|
-
[data-variant=link]:hover:not(:disabled) { background: none; text-decoration-thickness: 2px }
|
|
461
|
+
:is(button, a, input)[data-variant=link]:hover:not(:disabled) { background: none; text-decoration-thickness: 2px }
|
|
391
462
|
button[aria-pressed=true] { background: var(--face); color: var(--ac); font-weight: 700 }
|
|
392
463
|
button[aria-pressed=true]:hover:not(:disabled) {
|
|
393
464
|
background: color-mix(in srgb, var(--fg) 7%, var(--face));
|
|
@@ -397,7 +468,13 @@ button[aria-pressed=true]:hover:not(:disabled) {
|
|
|
397
468
|
:is([type=submit], .primary):active:not(:disabled) { box-shadow: inset 0 1px 3px #0006 }
|
|
398
469
|
|
|
399
470
|
@supports (corner-shape: squircle) {
|
|
400
|
-
|
|
471
|
+
/* the surfaces this sheet rounds, not `*` — a universal rule would reshape
|
|
472
|
+
your components too, and this one is a taste, not a repair */
|
|
473
|
+
:is(button, [type=submit], [type=button], [type=reset], input, select, textarea,
|
|
474
|
+
fieldset, details, dialog, [popover], pre, kbd, code, samp, img, video,
|
|
475
|
+
menu, aside, [data-avatar], [data-skeleton], .card, .badge) {
|
|
476
|
+
corner-shape: squircle;
|
|
477
|
+
}
|
|
401
478
|
}
|
|
402
479
|
|
|
403
480
|
/* ---- disclosure / misc -------------------------------------- */
|
|
@@ -412,11 +489,11 @@ details[open] > summary { margin-bottom: .6rem }
|
|
|
412
489
|
dialog {
|
|
413
490
|
background: var(--el); color: var(--fg); border: 1px solid var(--bd);
|
|
414
491
|
border-radius: var(--rw); padding: 1.4rem; max-width: min(30rem, 92dvw);
|
|
415
|
-
box-shadow: 0 32px 64px -16px
|
|
492
|
+
box-shadow: 0 32px 64px -16px color-mix(in srgb, var(--sh) 45%, transparent);
|
|
416
493
|
}
|
|
417
494
|
dialog > :last-child:not(footer) { margin-bottom: 0 }
|
|
418
495
|
dialog, [popover] { overscroll-behavior: contain }
|
|
419
|
-
dialog::backdrop { background:
|
|
496
|
+
dialog::backdrop { background: color-mix(in srgb, var(--sh) 35%, transparent); backdrop-filter: blur(3px) }
|
|
420
497
|
|
|
421
498
|
/* dialog anatomy: an optional header and footer, pinned while the body scrolls.
|
|
422
499
|
Sticky rather than a grid, because a classless sheet has no wrapper around
|
|
@@ -445,7 +522,8 @@ dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto;
|
|
|
445
522
|
/* sheets come up, they do not appear */
|
|
446
523
|
@media (prefers-reduced-motion: no-preference) and (update: fast) {
|
|
447
524
|
dialog, dialog::backdrop {
|
|
448
|
-
transition: opacity
|
|
525
|
+
transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out),
|
|
526
|
+
display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
|
|
449
527
|
}
|
|
450
528
|
dialog { opacity: 0; translate: 0 10px }
|
|
451
529
|
dialog[open] { opacity: 1; translate: 0 }
|
|
@@ -455,7 +533,8 @@ dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto;
|
|
|
455
533
|
@starting-style { dialog[open]::backdrop { opacity: 0 } }
|
|
456
534
|
[popover] {
|
|
457
535
|
opacity: 0; translate: 0 -4px;
|
|
458
|
-
transition: opacity .13s, translate .13s
|
|
536
|
+
transition: opacity .13s var(--ease-out), translate .13s var(--ease-out),
|
|
537
|
+
display .13s allow-discrete, overlay .13s allow-discrete;
|
|
459
538
|
}
|
|
460
539
|
[popover]:popover-open { opacity: 1; translate: 0 }
|
|
461
540
|
@starting-style { [popover]:popover-open { opacity: 0; translate: 0 -4px } }
|
|
@@ -476,10 +555,13 @@ progress::-moz-progress-bar { background: var(--ac); border-radius: calc(infinit
|
|
|
476
555
|
/* details can only animate to auto height once keywords interpolate */
|
|
477
556
|
@supports selector(::details-content) {
|
|
478
557
|
@media (prefers-reduced-motion: no-preference) and (update: fast) {
|
|
479
|
-
|
|
558
|
+
/* on details, not :root: allow-keywords is inherited, and setting it
|
|
559
|
+
document-wide would quietly change how your own height:auto
|
|
560
|
+
transitions behave */
|
|
561
|
+
details { interpolate-size: allow-keywords }
|
|
480
562
|
details::details-content {
|
|
481
563
|
block-size: 0; overflow: clip;
|
|
482
|
-
transition: block-size .28s ease, content-visibility .28s allow-discrete;
|
|
564
|
+
transition: block-size .28s var(--ease), content-visibility .28s allow-discrete;
|
|
483
565
|
}
|
|
484
566
|
details[open]::details-content { block-size: auto }
|
|
485
567
|
}
|
|
@@ -523,7 +605,7 @@ input[type=checkbox][role=switch] {
|
|
|
523
605
|
input[switch]::after, input[role=switch]::after {
|
|
524
606
|
content: ""; position: absolute; inset-block-start: .14em; inset-inline-start: .14em;
|
|
525
607
|
width: 1.02em; height: 1.02em; border-radius: 50%; background: #fff; box-shadow: var(--up);
|
|
526
|
-
transition: translate .16s ease;
|
|
608
|
+
transition: translate .16s var(--ease-out);
|
|
527
609
|
}
|
|
528
610
|
input[switch]:checked, input[role=switch]:checked { background: var(--ac) }
|
|
529
611
|
/* translate is physical, so the knob is told which way to travel */
|
|
@@ -535,7 +617,7 @@ input[switch]:checked::after, input[role=switch]:checked::after { translate: .9e
|
|
|
535
617
|
background: var(--el); color: var(--fg); border: 1px solid var(--bd);
|
|
536
618
|
border-radius: var(--r); padding: .3rem; min-width: 12rem;
|
|
537
619
|
max-block-size: 60dvh; overflow: auto; font-size: .95em;
|
|
538
|
-
box-shadow: var(--up2), 0 20px 40px -14px
|
|
620
|
+
box-shadow: var(--up2), 0 20px 40px -14px color-mix(in srgb, var(--sh) 40%, transparent);
|
|
539
621
|
}
|
|
540
622
|
/* anchor to the invoking button; without support it centres, which is fine.
|
|
541
623
|
Deliberately NOT scoped to :popover-open — the close is transitioned, so a
|
|
@@ -583,14 +665,21 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
|
|
|
583
665
|
}
|
|
584
666
|
@keyframes fertig-spin { to { rotate: 360deg } }
|
|
585
667
|
|
|
586
|
-
/* tooltip: [data-tooltip]
|
|
668
|
+
/* tooltip: [data-tooltip]. Decorative only, and deliberately so: generated
|
|
669
|
+
content is not reliably exposed to assistive tech and there is no way to
|
|
670
|
+
dismiss it without script (WCAG 1.4.13), so put the same words in aria-label
|
|
671
|
+
or aria-describedby and never say anything here that is said nowhere else.
|
|
672
|
+
A scroll container clips it — [role=group] is one. */
|
|
587
673
|
[data-tooltip] { position: relative }
|
|
588
|
-
[data-tooltip]:is(:hover, :focus-visible)::after {
|
|
589
|
-
content: attr(data-tooltip); position: absolute;
|
|
674
|
+
[data-tooltip]:is(:hover, :focus-visible, :active)::after {
|
|
675
|
+
content: attr(data-tooltip); position: absolute;
|
|
676
|
+
inset-block-end: 100%; inset-inline-start: 50%;
|
|
590
677
|
translate: -50% -.45em; z-index: 10; white-space: nowrap; pointer-events: none;
|
|
591
678
|
background: light-dark(#1d1d1f, #3a3a40); color: #fff; font-size: .8em;
|
|
592
679
|
padding: .25em .55em; border-radius: var(--r); box-shadow: var(--up2);
|
|
593
680
|
}
|
|
681
|
+
/* translate is physical; the offset has to be told which way to go */
|
|
682
|
+
[data-tooltip]:dir(rtl)::after { translate: 50% -.45em }
|
|
594
683
|
|
|
595
684
|
/* tones: retint any component by redefining its accent */
|
|
596
685
|
[data-tone=ok] { --ac: light-dark(var(--sage-700), oklch(76% .085 155)) }
|
|
@@ -662,6 +751,27 @@ dialog[data-side=bottom] {
|
|
|
662
751
|
position-area: none; inset: auto 1rem 1rem auto; min-width: 16rem;
|
|
663
752
|
}
|
|
664
753
|
}
|
|
754
|
+
/* Two open toasts land on the same corner coordinates and sit on top of each
|
|
755
|
+
other, and an open popover is in the top layer so no ordinary wrapper can
|
|
756
|
+
stack them. Make the region the popover instead and the toasts plain
|
|
757
|
+
children of it: <div popover=manual data-toast-region> with a
|
|
758
|
+
<div data-toast> per message. */
|
|
759
|
+
[popover][data-toast-region] {
|
|
760
|
+
position: fixed; inset: auto 1rem 1rem auto; margin: 0;
|
|
761
|
+
display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
|
|
762
|
+
background: none; border: 0; box-shadow: none; padding: 0;
|
|
763
|
+
max-block-size: none; overflow: visible; pointer-events: none;
|
|
764
|
+
}
|
|
765
|
+
[popover][data-toast-region] > [data-toast] {
|
|
766
|
+
pointer-events: auto; position: static; inset: auto;
|
|
767
|
+
min-width: 16rem; max-width: min(24rem, 92dvw); padding: .8rem 1rem;
|
|
768
|
+
background: var(--el); color: var(--fg); border: 1px solid var(--bd);
|
|
769
|
+
border-radius: var(--r); font-size: .95em;
|
|
770
|
+
box-shadow: var(--up2), 0 20px 40px -14px color-mix(in srgb, var(--sh) 40%, transparent);
|
|
771
|
+
}
|
|
772
|
+
@supports (position-area: block-end span-inline-end) {
|
|
773
|
+
[popover][data-toast-region] { position-area: none; inset: auto 1rem 1rem auto }
|
|
774
|
+
}
|
|
665
775
|
|
|
666
776
|
/* list group: a plain <menu> outside a popover is a bordered list */
|
|
667
777
|
menu {
|
|
@@ -718,7 +828,7 @@ nav menu :is(a, button)[aria-current] {
|
|
|
718
828
|
/* on the toolbar .wide cannot mean "be 66rem wide" — the bar stays full-bleed
|
|
719
829
|
and its contents move out to the wide column, so an app screen's wordmark
|
|
720
830
|
lines up with the app's own content rather than floating mid-screen. */
|
|
721
|
-
body > nav.wide { max-width: none; --nw: 66rem }
|
|
831
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav.wide { max-width: none; --nw: 66rem }
|
|
722
832
|
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center }
|
|
723
833
|
/* Form controls are full-width blocks by default, which is right in a form and
|
|
724
834
|
wrong in a toolbar. Inside a .row they size to the row instead. */
|
|
@@ -736,7 +846,7 @@ body > nav.wide { max-width: none; --nw: 66rem }
|
|
|
736
846
|
.grid + * { margin-top: 1.1rem }
|
|
737
847
|
.card {
|
|
738
848
|
container-type: inline-size; /* query it: @container (min-width: …) */
|
|
739
|
-
border: 1px solid var(--bd); border-radius: var(--r); padding: .
|
|
849
|
+
border: 1px solid var(--bd); border-radius: var(--r); padding: 1.1rem;
|
|
740
850
|
background: var(--el); box-shadow: var(--up2);
|
|
741
851
|
display: flex; flex-direction: column; /* so footers line up across a row */
|
|
742
852
|
gap: .85rem; /* spacing is the container's job */
|
|
@@ -803,27 +913,33 @@ body > nav.wide { max-width: none; --nw: 66rem }
|
|
|
803
913
|
}
|
|
804
914
|
|
|
805
915
|
/* card anatomy: an optional header, footer, and full-bleed media */
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
916
|
+
/* No fill on the header and footer. A tinted strip across the top of a card is
|
|
917
|
+
the old panel-heading pattern and it is what dates a sheet on sight; a
|
|
918
|
+
hairline does the same separating job and lets the card read as one surface. */
|
|
919
|
+
.card > :is(header, footer) { margin-inline: -1.1rem; padding-inline: 1.1rem }
|
|
809
920
|
.card > header {
|
|
810
|
-
margin-top: -.
|
|
811
|
-
border-bottom: 1px solid var(--bd);
|
|
921
|
+
margin-top: -.25rem; padding-bottom: .7rem; font-weight: 600;
|
|
922
|
+
border-bottom: 1px solid var(--bd);
|
|
812
923
|
}
|
|
813
924
|
.card > footer {
|
|
814
|
-
margin-top: auto; margin-bottom: -.
|
|
925
|
+
margin-top: auto; margin-bottom: -.25rem; padding-top: .7rem;
|
|
815
926
|
color: var(--mut); font-size: .85em;
|
|
816
|
-
border-top: 1px solid var(--bd);
|
|
927
|
+
border-top: 1px solid var(--bd);
|
|
817
928
|
}
|
|
818
929
|
.card > :is(img, video):first-child {
|
|
819
|
-
align-self: stretch; width: auto; max-width: none; margin:
|
|
930
|
+
align-self: stretch; width: auto; max-width: none; margin: -1.1rem -1.1rem 0;
|
|
820
931
|
aspect-ratio: 16 / 9; object-fit: cover;
|
|
821
932
|
border: 0; border-radius: var(--r) var(--r) 0 0; box-shadow: none;
|
|
822
933
|
}
|
|
823
|
-
/*
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
.
|
|
934
|
+
/* A background layer rather than a border or an inset shadow: a border would
|
|
935
|
+
shift the card's geometry, and an inset shadow does not follow the corner
|
|
936
|
+
radius cleanly at this size — it reads as a detached bar with gaps at the
|
|
937
|
+
top corners. A gradient is clipped by the radius, so the tone hugs the curve. */
|
|
938
|
+
.card[data-tone] {
|
|
939
|
+
background: linear-gradient(var(--ac), var(--ac)) top / 100% 3px no-repeat,
|
|
940
|
+
var(--el);
|
|
941
|
+
}
|
|
942
|
+
|
|
827
943
|
/* a card that is itself a link or button reacts like one */
|
|
828
944
|
:is(a, button).card {
|
|
829
945
|
display: flex; width: 100%; /* keep the column from .card */
|
|
@@ -832,7 +948,7 @@ body > nav.wide { max-width: none; --nw: 66rem }
|
|
|
832
948
|
}
|
|
833
949
|
:is(a, button).card:hover:not(:disabled) {
|
|
834
950
|
border-color: color-mix(in srgb, var(--ac) 45%, var(--bd));
|
|
835
|
-
box-shadow: var(--up2), 0 12px 26px -14px
|
|
951
|
+
box-shadow: var(--up2), 0 12px 26px -14px color-mix(in srgb, var(--sh) 40%, transparent);
|
|
836
952
|
translate: 0 -2px;
|
|
837
953
|
}
|
|
838
954
|
:is(a, button).card:active:not(:disabled) { translate: 0 0 }
|
|
@@ -844,7 +960,7 @@ body > nav.wide { max-width: none; --nw: 66rem }
|
|
|
844
960
|
@media (prefers-reduced-motion: no-preference) and (update: fast) { html { scroll-behavior: smooth } }
|
|
845
961
|
:target { scroll-margin-top: 4rem } /* clears the toolbar */
|
|
846
962
|
:is(h1,h2,h3,h4):target { background: color-mix(in srgb, var(--ac) 12%, transparent) }
|
|
847
|
-
a[target=_blank]::after { content: " ↗"; font-size: .85em; opacity: .6 }
|
|
963
|
+
a[target=_blank]:not(:has(> img, > svg))::after { content: " ↗"; font-size: .85em; opacity: .6 }
|
|
848
964
|
a:has(> img), a:has(> code) { text-decoration: none }
|
|
849
965
|
sup, sub { line-height: 0; font-size: .75em } /* stop them stretching lines */
|
|
850
966
|
q { quotes: "“" "”" "‘" "’" }
|
|
@@ -863,13 +979,28 @@ input:user-invalid, textarea:user-invalid { border-color: light-dark(#c0392b, #f
|
|
|
863
979
|
input:user-invalid + small { color: light-dark(#c0392b, #ff6b6b) }
|
|
864
980
|
summary:hover { color: var(--ac) }
|
|
865
981
|
/* thin scrollbars, macOS weight */
|
|
866
|
-
|
|
982
|
+
/* scrollbar-width is Safari 18.2, scrollbar-color Safari 26.2 — both younger
|
|
983
|
+
than the floor, and both left ungated on purpose: there is no fallback to
|
|
984
|
+
write. An engine without them paints its own scrollbar, which is exactly
|
|
985
|
+
what a scrollbar should look like there anyway. Same reasoning for
|
|
986
|
+
accent-color at the top of the sheet. */
|
|
987
|
+
/* Not `*`: the page's own scrollbar keeps the width the OS gave it. Thinning
|
|
988
|
+
every scroller on the page narrows hit targets the sheet never made, which
|
|
989
|
+
is a target-size problem for anyone using a pointer imprecisely. */
|
|
990
|
+
:is(pre, table, textarea, dialog, [popover], menu, fieldset,
|
|
991
|
+
[role=group], [data-carousel], [data-layout=sidebar] > *) {
|
|
992
|
+
scrollbar-width: thin;
|
|
993
|
+
scrollbar-color: color-mix(in srgb, var(--fg) 25%, transparent) transparent;
|
|
994
|
+
}
|
|
867
995
|
|
|
868
996
|
@page { margin: 2cm }
|
|
869
997
|
@media print {
|
|
870
998
|
:root { --bg: #fff; --el: #fff; --fg: #000; --bd: #999 }
|
|
871
|
-
body >
|
|
872
|
-
|
|
999
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav { display: none }
|
|
1000
|
+
/* the footer stays: the legal line, the contact and the citations live there,
|
|
1001
|
+
and a printout without them is missing the part people keep */
|
|
1002
|
+
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > footer { box-shadow: none; margin-bottom: 0 }
|
|
1003
|
+
body > *, body > :where(#root, #app, #__next, [data-fertig]) > * { border: 0; max-width: none }
|
|
873
1004
|
p, blockquote, li { orphans: 3; widows: 3 } /* no stranded single lines */
|
|
874
1005
|
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555 }
|
|
875
1006
|
pre, table, figure, details, tr, img { break-inside: avoid }
|
|
@@ -884,6 +1015,9 @@ summary:hover { color: var(--ac) }
|
|
|
884
1015
|
min-height: 44px;
|
|
885
1016
|
}
|
|
886
1017
|
input[type=checkbox], input[type=radio] { width: 1.4em; height: 1.4em }
|
|
1018
|
+
/* 44px is the AAA target (2.5.5). The small variant opts down to the 24px
|
|
1019
|
+
AA floor (2.5.8) rather than stopping being small on a phone. */
|
|
1020
|
+
:is(button, a, input, select, label)[data-size=sm] { min-height: 32px }
|
|
887
1021
|
}
|
|
888
1022
|
|
|
889
1023
|
/* the OS is already inverting; stop images being inverted twice */
|
|
@@ -916,8 +1050,45 @@ summary:hover { color: var(--ac) }
|
|
|
916
1050
|
|
|
917
1051
|
@media (prefers-reduced-motion: no-preference) and (update: fast) {
|
|
918
1052
|
a, button, input, select, textarea, summary, tr,
|
|
919
|
-
[type=submit], [type=button], [type=reset]
|
|
920
|
-
|
|
1053
|
+
[type=submit], [type=button], [type=reset], .card, .badge,
|
|
1054
|
+
[role=tab], [role=group] > *, [popover] :is(a, button) {
|
|
1055
|
+
transition: box-shadow var(--dur-1) var(--ease),
|
|
1056
|
+
background-color var(--dur-1) var(--ease),
|
|
1057
|
+
border-color var(--dur-1) var(--ease),
|
|
1058
|
+
color var(--dur-1) var(--ease),
|
|
1059
|
+
translate .08s var(--ease-out);
|
|
1060
|
+
}
|
|
1061
|
+
/* the ring must never be animated — it has to be there the instant focus
|
|
1062
|
+
lands, not fade in after it */
|
|
1063
|
+
:focus-visible { transition: none }
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
|
|
1067
|
+
/* ---- below the floor ---------------------------------------
|
|
1068
|
+
Everything above assumes light-dark(). An engine without it does not
|
|
1069
|
+
degrade to "unstyled but readable" — every colour token becomes invalid at
|
|
1070
|
+
computed-value time, so backgrounds go transparent and colour is inherited,
|
|
1071
|
+
and the page can land unreadable rather than plain. These are the same
|
|
1072
|
+
colours flattened to sRGB. Last in the layer, so it wins on order over the
|
|
1073
|
+
token block at the top. Nothing else needs a twin: an invalid --ac on a
|
|
1074
|
+
[data-tone] or [data-accent] element just inherits the one from :root. */
|
|
1075
|
+
@supports not (color: light-dark(#000, #fff)) {
|
|
1076
|
+
:root {
|
|
1077
|
+
--bg: #ece9e5; --el: #fefdfc; --face: #f8f5f2; --fg: #1d1a17;
|
|
1078
|
+
--mut: #5e5a55; --bd: #1d1a1721; --tb: #f8f5f2d9;
|
|
1079
|
+
--ac: #494fcc; --on-ac: #fff;
|
|
1080
|
+
}
|
|
1081
|
+
@media (prefers-color-scheme: dark) {
|
|
1082
|
+
:root:not([data-theme=light]) {
|
|
1083
|
+
--bg: #0f0d0a; --el: #1a1815; --face: #24211e; --fg: #f0eeec;
|
|
1084
|
+
--mut: #aba7a2; --bd: #f0eeec21; --tb: #24211ed9;
|
|
1085
|
+
--ac: #a3b2fe; --on-ac: #06121f;
|
|
1086
|
+
}
|
|
1087
|
+
}
|
|
1088
|
+
[data-theme=dark] {
|
|
1089
|
+
--bg: #0f0d0a; --el: #1a1815; --face: #24211e; --fg: #f0eeec;
|
|
1090
|
+
--mut: #aba7a2; --bd: #f0eeec21; --tb: #24211ed9;
|
|
1091
|
+
--ac: #a3b2fe; --on-ac: #06121f;
|
|
921
1092
|
}
|
|
922
1093
|
}
|
|
923
1094
|
|
|
@@ -932,6 +1103,9 @@ summary:hover { color: var(--ac) }
|
|
|
932
1103
|
.card, .badge, details, dialog, [popover], fieldset, table {
|
|
933
1104
|
border: 1px solid CanvasText;
|
|
934
1105
|
}
|
|
935
|
-
[role=tab]
|
|
1106
|
+
/* [role=tab] sets border:0, so there is nothing for border-color to land
|
|
1107
|
+
on, and the rule above just removed the box-shadow that marked it */
|
|
1108
|
+
[role=tab][aria-selected=true] { border-bottom: 2px solid Highlight }
|
|
1109
|
+
button[aria-pressed=true] { border-color: Highlight }
|
|
936
1110
|
}
|
|
937
1111
|
}
|
package/fertig.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! fertig v1.0.3 — a classless CSS stylesheet. MIT */@property --a1{syntax:"<number>";inherits:true;initial-value:.08}@property --a2{syntax:"<number>";inherits:true;initial-value:.06}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--ac);caret-color:var(--ac);--f:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--w:38rem;--r:6px;--rw:10px;--stone-100:oklch(97.5% .004 75);--stone-300:oklch(91% .006 75);--stone-500:oklch(72% .008 75);--stone-700:oklch(47% .009 75);--stone-900:oklch(26% .008 75);--sage-100:oklch(96% .022 155);--sage-300:oklch(87% .042 155);--sage-500:oklch(66% .058 155);--sage-700:oklch(47% .055 155);--sage-900:oklch(29% .038 155);--sky-100:oklch(96% .022 240);--sky-300:oklch(87% .045 240);--sky-500:oklch(64% .085 245);--sky-700:oklch(48% .095 250);--sky-900:oklch(30% .06 250);--clay-100:oklch(96% .022 45);--clay-300:oklch(88% .045 45);--clay-500:oklch(68% .085 45);--clay-700:oklch(50% .09 40);--clay-900:oklch(31% .055 40);--plum-100:oklch(96% .02 320);--plum-300:oklch(88% .038 320);--plum-500:oklch(66% .06 320);--plum-700:oklch(47% .065 320);--plum-900:oklch(29% .042 320);--gold-100:oklch(96.5% .028 90);--gold-300:oklch(89% .055 88);--gold-500:oklch(74% .085 85);--gold-700:oklch(55% .085 80);--gold-900:oklch(33% .05 80);--bg:light-dark(oklch(93.5% .006 75),oklch(16% .006 75));--el:light-dark(oklch(99.4% .002 75),oklch(21% .006 75));--face:light-dark(oklch(97.2% .005 75),oklch(25% .007 75));--fg:light-dark(oklch(22% .008 75),oklch(95% .004 75));--mut:light-dark(oklch(47% .009 75),oklch(73% .008 75));--bd:light-dark(oklch(22% .008 75 / .13),oklch(95% .004 75 / .13));--tb:light-dark(oklch(97.2% .005 75 / .85),oklch(25% .007 75 / .85));--ac:light-dark(var(--sky-700),oklch(78% .085 245));--on-ac:light-dark(#fff,#06121f);--sh:oklch(23.1% .007 286);--a1:.08;--a2:.06;--sh1:oklch(from var(--sh) l c h / var(--a1));--sh2:oklch(from var(--sh) l c h / var(--a2));--up:0 1px 1px var(--sh1);--up2:0 1px 2px var(--sh1),0 6px 16px -6px var(--sh2);--dn:inset 0 1px 2px oklch(from var(--sh) l c h / .08);--caps:.74em/1.4 var(--f)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--a1:.5;--a2:.45}}@supports (color:contrast-color(red)){:root{--on-ac:contrast-color(var(--ac))}}[data-theme=light]{color-scheme:light;--a1:.08;--a2:.06}[data-theme=dark]{color-scheme:dark;--a1:.5;--a2:.45}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px;border-radius:var(--r)}img,svg,video,iframe{display:block;max-width:100%;height:auto}img,video{border-radius:var(--r);box-shadow:var(--up2)}body>*{max-width:var(--w);margin-inline:auto;padding-inline:1.9rem}body>header,body>main,body>footer{background:var(--el);border-inline:1px solid var(--bd)}body>header{padding-block:2.4rem .8rem}body>main{padding-bottom:2.8rem}body>footer{padding-block:1.2rem 2rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);margin-bottom:2.5rem;box-shadow:0 18px 30px -22px oklch(from var(--sh) l c h / .5)}body>nav{position:sticky;top:0;z-index:9;max-width:none;--nw:var(--w);padding-inline:max(1.9rem,calc(50% - var(--nw) / 2 + 1.9rem),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--tb);color:var(--fg);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);font-size:.92em}body>nav a{color:var(--fg);text-decoration:none;opacity:.75}body>nav a:hover{opacity:1}body>nav:is(strong,b) a{opacity:1}body>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--caps);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) +:is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--mut)}hr{border:0;border-top:1px solid var(--bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--mut);text-align:center}code,kbd,samp,pre{font-family:var(--fm);font-size:.9em}:not(pre)>code,samp{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:.08em .35em}kbd{background:var(--face);border:1px solid var(--bd);border-bottom-width:2px;border-radius:var(--r);padding:.08em .4em;box-shadow:var(--up)}pre{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--syn-comment:light-dark(#6b7280,#8b949e);--syn-key:light-dark(#7c3aed,#c4a7fb);--syn-str:light-dark(#15803d,#7ee787);--syn-num:light-dark(#b45309,#f0b866);--syn-fn:light-dark(#1d4ed8,#93c5fd);--syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font:700 var(--caps);text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}}caption{text-align:start;color:var(--mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--mut)}label:has(input){font-size:1rem;color:var(--fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.4em .6em;background:var(--el);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12.5px) 55%;background-size:5px 5px;background-repeat:no-repeat}select:dir(rtl){background-position:12.5px 55%,17px 55%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate .15s ease,translate .15s ease}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;background:var(--el);margin-block-start:.35rem;box-shadow:var(--up2),0 20px 40px -14px oklch(from var(--sh) l c h / .4)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--r) - 2px)}option:hover{background:var(--face)}option:checked{background:var(--ac);color:var(--on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0 .45em 0 0;vertical-align:-.18em}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--face);cursor:default}label:has(+:required)::after,label:has(:required)::after{content:" *";color:var(--ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fg);box-shadow:var(--dn),inset 0 0 0 100px var(--el);caret-color:var(--ac)}:disabled{color:var(--mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem 1rem;background:var(--face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--bd);font-size:.95em;font-weight:700;color:var(--fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.38em 1.1em;background:var(--el);color:var(--fg);cursor:pointer;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--up);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--face)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--dn);translate:0 .5px}[type=submit],.primary{background:var(--ac);border-color:transparent;color:var(--on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--ac) calc(l + .05) c h)}[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}[data-block]{display:block;width:100%;min-width:0}[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}[data-variant=ghost]:hover:not(:disabled){background:var(--face);border-color:var(--bd)}[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--ac);text-decoration:underline;text-underline-offset:3px}[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 7%,var(--face))}:is([type=submit],.primary){box-shadow:var(--up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){*{corner-shape:squircle}}details{border:1px solid var(--bd);border-radius:var(--r);padding:.7rem 1.1rem;background:var(--el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--rw);padding:1.4rem;max-width:min(30rem,92dvw);box-shadow:0 32px 64px -16px oklch(from var(--sh) l c h / .45)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:oklch(from var(--sh) l c h / .35);backdrop-filter:blur(3px)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.4rem;padding:.7rem 1.4rem;background:var(--el)}dialog>header{inset-block-start:-1.4rem;margin-block:-1.4rem 1rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--rw) var(--rw) 0 0}dialog>header>:is(h1,h2,h3,h4,p){margin:0;font-size:1.05rem}dialog>footer{inset-block-end:-1.4rem;margin-block:1rem -1.4rem;border-top:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity .2s,translate .2s,display .2s allow-discrete,overlay .2s allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s,translate .13s,display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--ac) 28%,transparent)}aside{border:1px solid var(--bd);border-inline-start:3px solid var(--ac);border-radius:var(--r);border-start-start-radius:0;border-end-start-radius:0;background:var(--el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:calc(infinity * 1px);background:var(--face)}progress::-webkit-progress-bar{background:var(--face);border-radius:calc(infinity * 1px)}progress::-webkit-progress-value{background:var(--ac);border-radius:calc(infinity * 1px)}progress::-moz-progress-bar{background:var(--ac);border-radius:calc(infinity * 1px)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;overflow-x:auto;overscroll-behavior-x:contain}[role=group]>*{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--r);border-end-start-radius:var(--r)}[role=group]>:last-child{border-start-end-radius:var(--r);border-end-end-radius:var(--r)}[role=group]>[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--mut);padding:.45em .9em;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--face);color:var(--fg)}[role=tab][aria-selected=true]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;border-radius:calc(infinity * 1px);border:0;background:color-mix(in srgb,var(--fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.02em;height:1.02em;border-radius:50%;background:#fff;box-shadow:var(--up);transition:translate .16s ease}input[switch]:checked,input[role=switch]:checked{background:var(--ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 0}[popover]{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--up2),0 20px 40px -14px oklch(from var(--sh) l c h / .4)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover]:is(ul,menu){list-style:none;padding:0;margin:0}[popover]:is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--r) - 2px);font-weight:400}[popover]:is(a,button):hover:not(:disabled){background:var(--ac);color:var(--on-ac)}[popover] hr{margin:.3rem 0}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible)::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#fff;font-size:.8em;padding:.25em .55em;border-radius:var(--r);box-shadow:var(--up2)}[data-tone=ok]{--ac:light-dark(var(--sage-700),oklch(76% .085 155))}[data-tone=warn]{--ac:light-dark(var(--gold-700),oklch(80% .095 85))}[data-tone=err]{--ac:light-dark(var(--clay-700),oklch(75% .105 35))}[data-tone] .badge,.badge[data-tone]{color:var(--ac);border-color:var(--ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--face);border:1px solid var(--bd);font-size:.8em;font-weight:700;color:var(--mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--face),color-mix(in srgb,var(--fg) 9%,var(--face)),var(--face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--rw) var(--rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--bd);border-radius:var(--r);background:var(--el)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--bd)}[popover] menu{border:0;padding:0;margin:0;background:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu:is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--r);background:none;box-shadow:none;font:inherit;color:var(--fg);text-decoration:none;opacity:.72}nav menu:is(a,button):hover{background:var(--face);opacity:1}nav menu:is(a,button)[aria-current]{background:var(--face);color:var(--ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}body>nav.wide{max-width:none;--nw:66rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row:is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row:is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--bd);border-radius:var(--r);padding:.9rem;background:var(--el);box-shadow:var(--up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:var(--w)}.hidden{display:none}.badge{border:1px solid var(--bd);border-radius:calc(infinity * 1px);background:var(--face);padding:.1em .6em;font:700 var(--caps);color:var(--mut)}.card>:is(header,footer){margin-inline:-.9rem;padding:.55rem .9rem;background:var(--face)}.card>header{margin-top:-.9rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--r) var(--r) 0 0}.card>footer{margin-top:auto;margin-bottom:-.9rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-radius:0 0 var(--r) var(--r)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-.9rem -.9rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:none}.card[data-tone]{box-shadow:var(--up2),inset 0 2px 0 var(--ac)}.card[data-tone]>header:first-child{box-shadow:inset 0 2px 0 var(--ac)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));box-shadow:var(--up2),0 12px 26px -14px oklch(from var(--sh) l c h / .4);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-top:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--ac) 12%,transparent)}a[target=_blank]::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--ac)}del{color:var(--mut)}address{font-style:normal;color:var(--mut)}hgroup>*{margin:0}hgroup>p{color:var(--mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--ac)}*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--bg:#fff;--el:#fff;--fg:#000;--bd:#999}body>nav,body>footer{display:none}body>*{border:0;max-width:none}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-reduced-transparency:reduce){body>nav{background:var(--face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@media (prefers-contrast:more){:root{--bd:light-dark(#00000059,#ffffff6b);--mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset]{transition:box-shadow .15s,background-color .15s,border-color .15s,translate .08s}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true],button[aria-pressed=true]{border-color:Highlight}}}
|
|
1
|
+
/*! fertig v1.1.0 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.08}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.06}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--ac);caret-color:var(--ac);--f:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--w:38rem;--r:9px;--rs:5px;--rw:14px;--stone-100:oklch(97.5% .004 75);--stone-300:oklch(91% .006 75);--stone-500:oklch(72% .008 75);--stone-700:oklch(47% .009 75);--stone-900:oklch(26% .008 75);--sage-100:oklch(96% .022 155);--sage-300:oklch(87% .042 155);--sage-500:oklch(66% .058 155);--sage-700:oklch(47% .055 155);--sage-900:oklch(29% .038 155);--sky-100:oklch(96% .022 240);--sky-300:oklch(87% .045 240);--sky-500:oklch(64% .085 245);--sky-700:oklch(48% .095 250);--sky-900:oklch(30% .06 250);--clay-100:oklch(96% .022 45);--clay-300:oklch(88% .045 45);--clay-500:oklch(68% .085 45);--clay-700:oklch(50% .09 40);--clay-900:oklch(31% .055 40);--plum-100:oklch(96% .02 320);--plum-300:oklch(88% .038 320);--plum-500:oklch(66% .06 320);--plum-700:oklch(47% .065 320);--plum-900:oklch(29% .042 320);--gold-100:oklch(96.5% .028 90);--gold-300:oklch(89% .055 88);--gold-500:oklch(74% .085 85);--gold-700:oklch(55% .085 80);--gold-900:oklch(33% .05 80);--bg:light-dark(oklch(93.5% .006 75),oklch(16% .006 75));--el:light-dark(oklch(99.4% .002 75),oklch(21% .006 75));--face:light-dark(oklch(97.2% .005 75),oklch(25% .007 75));--fg:light-dark(oklch(22% .008 75),oklch(95% .004 75));--mut:light-dark(oklch(47% .009 75),oklch(73% .008 75));--bd:light-dark(oklch(22% .008 75 / .13),oklch(95% .004 75 / .13));--tb:light-dark(oklch(97.2% .005 75 / .85),oklch(25% .007 75 / .85));--ac:light-dark(oklch(50% .19 275),oklch(78% .11 275));--on-ac:light-dark(#fff,#06121f);--sh:oklch(23.1% .007 286);--fertig-a1:var(--a1,.08);--fertig-a2:var(--a2,.06);--sh1:color-mix(in srgb,var(--sh) calc(var(--fertig-a1) * 100%),transparent);--sh2:color-mix(in srgb,var(--sh) calc(var(--fertig-a2) * 100%),transparent);--up:0 1px 1px var(--sh1);--up2:0 1px 2px var(--sh1),0 6px 16px -6px var(--sh2);--dn:inset 0 1px 2px color-mix(in srgb,var(--sh) 8%,transparent);--caps:.74em/1.4 var(--f);--ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.55,0,1,.45);--ease:cubic-bezier(.4,0,.2,1);--dur-1:.12s;--dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:var(--a1,.5);--fertig-a2:var(--a2,.45)}}@supports (color:oklch(from red l c h)){:root{--on-ac:oklch(from var(--ac) clamp(0,(l - .62) * -100,1) 0 h)}}@supports (color:contrast-color(red)){:root{--on-ac:contrast-color(var(--ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:var(--a1,.08);--fertig-a2:var(--a2,.06)}[data-theme=dark]{color-scheme:dark;--fertig-a1:var(--a1,.5);--fertig-a2:var(--a2,.45)}[data-accent=indigo]{--ac:light-dark(oklch(50% .19 275),oklch(78% .11 275))}[data-accent=sky]{--ac:light-dark(var(--sky-700),oklch(78% .085 245))}[data-accent=sage]{--ac:light-dark(var(--sage-700),oklch(80% .075 155))}[data-accent=clay]{--ac:light-dark(var(--clay-700),oklch(80% .085 45))}[data-accent=plum]{--ac:light-dark(var(--plum-700),oklch(80% .065 320))}[data-accent=gold]{--ac:light-dark(oklch(55% .085 80),oklch(84% .09 85))}[data-accent=slate]{--ac:light-dark(oklch(35% .01 250),oklch(86% .006 250))}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--bg);color:var(--fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--ac) 45%,transparent);outline-offset:1px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--r);box-shadow:var(--up2)}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{max-width:var(--w);margin-inline:auto;padding-inline:1.9rem}body>:where(#root,#app,#__next,[data-fertig]){max-width:none;padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--el);border-inline:1px solid var(--bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);margin-bottom:2.5rem;box-shadow:0 18px 30px -22px color-mix(in srgb,var(--sh) 50%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;max-width:none;--nw:var(--w);padding-inline:max(1.9rem,calc(50% - var(--nw) / 2 + 1.9rem),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--tb);color:var(--fg);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--bd);font-size:.92em}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav:is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--caps);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) +:is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--mut)}hr{border:0;border-top:1px solid var(--bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--mut);text-align:center}code,kbd,samp,pre{font-family:var(--fm);font-size:.9em}:not(pre)>code,samp{background:var(--face);border:1px solid var(--bd);border-radius:var(--rs);padding:.08em .35em}kbd{background:var(--face);border:1px solid var(--bd);border-bottom-width:2px;border-radius:var(--rs);padding:.08em .4em;box-shadow:var(--up)}pre{background:var(--face);border:1px solid var(--bd);border-radius:var(--r);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--syn-comment:light-dark(#6b7280,#8b949e);--syn-key:light-dark(#7c3aed,#c4a7fb);--syn-str:light-dark(#15803d,#7ee787);--syn-num:light-dark(#b45309,#f0b866);--syn-fn:light-dark(#1d4ed8,#93c5fd);--syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font:700 var(--caps);text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}}caption{text-align:start;color:var(--mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--mut)}label:has(input){font-size:1rem;color:var(--fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--el);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12.5px) 55%;background-size:5px 5px;background-repeat:no-repeat}select:dir(rtl){background-position:12.5px 55%,17px 55%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--dur-1) var(--ease),translate var(--dur-1) var(--ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;background:var(--el);margin-block-start:.35rem;box-shadow:var(--up2),0 20px 40px -14px color-mix(in srgb,var(--sh) 40%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--r) - 2px)}option:hover{background:var(--face)}option:checked{background:var(--ac);color:var(--on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0 .45em 0 0;vertical-align:-.18em}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--face);cursor:default}label:has(+:required)::after,label:has(:required)::after{content:" *";color:var(--ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fg);box-shadow:var(--dn),inset 0 0 0 100px var(--el);caret-color:var(--ac)}:disabled{color:var(--mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--bd);border-radius:var(--r);padding:.9rem 1rem 1rem;background:var(--face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--bd);font-size:.95em;font-weight:700;color:var(--fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.48em 1.1em;background:var(--el);color:var(--fg);cursor:pointer;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--up);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--face)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--dn);translate:0 .5px}[type=submit],.primary{background:var(--ac);border-color:transparent;color:var(--on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--face);border-color:var(--bd)}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fg) 7%,var(--face))}:is([type=submit],.primary){box-shadow:var(--up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){:is(button,[type=submit],[type=button],[type=reset],input,select,textarea,fieldset,details,dialog,[popover],pre,kbd,code,samp,img,video,menu,aside,[data-avatar],[data-skeleton],.card,.badge){corner-shape:squircle}}details{border:1px solid var(--bd);border-radius:var(--r);padding:.7rem 1.1rem;background:var(--el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--rw);padding:1.4rem;max-width:min(30rem,92dvw);box-shadow:0 32px 64px -16px color-mix(in srgb,var(--sh) 45%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--sh) 35%,transparent);backdrop-filter:blur(3px)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.4rem;padding:.7rem 1.4rem;background:var(--el)}dialog>header{inset-block-start:-1.4rem;margin-block:-1.4rem 1rem;font-weight:700;border-bottom:1px solid var(--bd);border-radius:var(--rw) var(--rw) 0 0}dialog>header>:is(h1,h2,h3,h4,p){margin:0;font-size:1.05rem}dialog>footer{inset-block-end:-1.4rem;margin-block:1rem -1.4rem;border-top:1px solid var(--bd);border-radius:0 0 var(--rw) var(--rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--ease-out),translate .13s var(--ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--ac) 28%,transparent)}aside{border:1px solid var(--bd);border-inline-start:3px solid var(--ac);border-radius:var(--r);border-start-start-radius:0;border-end-start-radius:0;background:var(--el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:calc(infinity * 1px);background:var(--face)}progress::-webkit-progress-bar{background:var(--face);border-radius:calc(infinity * 1px)}progress::-webkit-progress-value{background:var(--ac);border-radius:calc(infinity * 1px)}progress::-moz-progress-bar{background:var(--ac);border-radius:calc(infinity * 1px)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;overflow-x:auto;overscroll-behavior-x:contain}[role=group]>*{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--r);border-end-start-radius:var(--r)}[role=group]>:last-child{border-start-end-radius:var(--r);border-end-end-radius:var(--r)}[role=group]>[aria-pressed=true]{background:var(--face);color:var(--ac);font-weight:700}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--mut);padding:.45em .9em;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--face);color:var(--fg)}[role=tab][aria-selected=true]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;border-radius:calc(infinity * 1px);border:0;background:color-mix(in srgb,var(--fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.02em;height:1.02em;border-radius:50%;background:#fff;box-shadow:var(--up);transition:translate .16s var(--ease-out)}input[switch]:checked,input[role=switch]:checked{background:var(--ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 0}[popover]{background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r);padding:.3rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--up2),0 20px 40px -14px color-mix(in srgb,var(--sh) 40%,transparent)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover]:is(ul,menu){list-style:none;padding:0;margin:0}[popover]:is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--r) - 2px);font-weight:400}[popover]:is(a,button):hover:not(:disabled){background:var(--ac);color:var(--on-ac)}[popover] hr{margin:.3rem 0}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible,:active)::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#fff;font-size:.8em;padding:.25em .55em;border-radius:var(--r);box-shadow:var(--up2)}[data-tooltip]:dir(rtl)::after{translate:50% -.45em}[data-tone=ok]{--ac:light-dark(var(--sage-700),oklch(76% .085 155))}[data-tone=warn]{--ac:light-dark(var(--gold-700),oklch(80% .095 85))}[data-tone=err]{--ac:light-dark(var(--clay-700),oklch(75% .105 35))}[data-tone] .badge,.badge[data-tone]{color:var(--ac);border-color:var(--ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--face);border:1px solid var(--bd);font-size:.8em;font-weight:700;color:var(--mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--face),color-mix(in srgb,var(--fg) 9%,var(--face)),var(--face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--rw) var(--rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}[popover][data-toast-region]{position:fixed;inset:auto 1rem 1rem auto;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;background:none;border:0;box-shadow:none;padding:0;max-block-size:none;overflow:visible;pointer-events:none}[popover][data-toast-region]>[data-toast]{pointer-events:auto;position:static;inset:auto;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem;background:var(--el);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r);font-size:.95em;box-shadow:var(--up2),0 20px 40px -14px color-mix(in srgb,var(--sh) 40%,transparent)}@supports (position-area:block-end span-inline-end){[popover][data-toast-region]{position-area:none;inset:auto 1rem 1rem auto}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--bd);border-radius:var(--r);background:var(--el)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--bd)}[popover] menu{border:0;padding:0;margin:0;background:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu:is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--r);background:none;box-shadow:none;font:inherit;color:var(--fg);text-decoration:none;opacity:.72}nav menu:is(a,button):hover{background:var(--face);opacity:1}nav menu:is(a,button)[aria-current]{background:var(--face);color:var(--ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--mut)}.center{text-align:center}.wide{max-width:66rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--nw:66rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row:is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row:is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem;background:var(--el);box-shadow:var(--up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:var(--w)}.hidden{display:none}.badge{border:1px solid var(--bd);border-radius:calc(infinity * 1px);background:var(--face);padding:.1em .6em;font:700 var(--caps);color:var(--mut)}.card>:is(header,footer){margin-inline:-1.1rem;padding-inline:1.1rem}.card>header{margin-top:-.25rem;padding-bottom:.7rem;font-weight:600;border-bottom:1px solid var(--bd)}.card>footer{margin-top:auto;margin-bottom:-.25rem;padding-top:.7rem;color:var(--mut);font-size:.85em;border-top:1px solid var(--bd)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--r) var(--r) 0 0;box-shadow:none}.card[data-tone]{background:linear-gradient(var(--ac),var(--ac)) top / 100% 3px no-repeat,var(--el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 45%,var(--bd));box-shadow:var(--up2),0 12px 26px -14px color-mix(in srgb,var(--sh) 40%,transparent);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-top:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--ac)}del{color:var(--mut)}address{font-style:normal;color:var(--mut)}hgroup>*{margin:0}hgroup>p{color:var(--mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--bg:#fff;--el:#fff;--fg:#000;--bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{box-shadow:none;margin-bottom:0}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{border:0;max-width:none}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-reduced-transparency:reduce){body>nav{background:var(--face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@media (prefers-contrast:more){:root{--bd:light-dark(#00000059,#ffffff6b);--mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=group]>*,[popover]:is(a,button){transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),translate .08s var(--ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--bg:#ece9e5;--el:#fefdfc;--face:#f8f5f2;--fg:#1d1a17;--mut:#5e5a55;--bd:#1d1a1721;--tb:#f8f5f2d9;--ac:#494fcc;--on-ac:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0d0a;--el:#1a1815;--face:#24211e;--fg:#f0eeec;--mut:#aba7a2;--bd:#f0eeec21;--tb:#24211ed9;--ac:#a3b2fe;--on-ac:#06121f}}[data-theme=dark]{--bg:#0f0d0a;--el:#1a1815;--face:#24211e;--fg:#f0eeec;--mut:#aba7a2;--bd:#f0eeec21;--tb:#24211ed9;--ac:#a3b2fe;--on-ac:#06121f}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true]{border-bottom:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fertig",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"description": "A classless CSS stylesheet with no legacy in it: no prefixes, no polyfills, no classes. Link one file, write ordinary HTML, done —
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "A classless CSS stylesheet with no legacy in it: no prefixes, no polyfills, no classes. Link one file, write ordinary HTML, done — 8.4 KB gzipped, no build step, no dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fertig",
|
|
7
7
|
"fertig.css",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"scripts": {
|
|
65
65
|
"build": "node build.js",
|
|
66
66
|
"dev": "python3 -m http.server 8899",
|
|
67
|
-
"prepublishOnly": "node build.js"
|
|
67
|
+
"prepublishOnly": "node build.js",
|
|
68
|
+
"sizes": "python3 tools/sizes.py"
|
|
68
69
|
}
|
|
69
70
|
}
|