@umriss-ui/charts 0.43.0 → 0.45.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 +28 -0
- package/README.md +59 -2
- package/dist/charts.css +1 -1
- package/dist/charts.js +3555 -3202
- package/dist/de.d.ts +6 -0
- package/dist/index.d.ts +59 -11
- package/dist/wording/de.js +5 -2
- package/docs/llms-full.md +370 -81
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -30,6 +30,34 @@ interface was still expected to move before `0.3.0`.
|
|
|
30
30
|
|
|
31
31
|
---
|
|
32
32
|
|
|
33
|
+
## 0.45.0 – A chart in a named time zone (Oct. 2026)
|
|
34
|
+
|
|
35
|
+
### Added
|
|
36
|
+
|
|
37
|
+
- **`timeZone` on `Chart`** draws every time axis, a calendar axis included, in an IANA zone (ADR-0076): ticks stand on that zone's hours and midnights, and the labels, tooltip, readout, data table and summary write its time. Where the reader's zone is another, the axis title names it. An application on core passes `useFormats().timeZone`.
|
|
38
|
+
- **`localOffset(instant, timeZone?)` and `workingTimeTicks(…, offset, timeZone?)`** take the zone as an optional last argument; no existing call changes meaning. **`inDoubledHour(instant, timeZone?)`** says whether an instant lies in the hour a clock change doubles.
|
|
39
|
+
|
|
40
|
+
### Changed
|
|
41
|
+
|
|
42
|
+
- **The hour a clock change doubles is ticked twice** on a time axis, each label, tooltip and readout carrying its offset (`01:00 GMT+2`, `01:00 GMT+1`), and ticks below a day stand on the zone's whole multiples in real time.
|
|
43
|
+
- Migration: none needed; only an axis across the autumn change shows the second tick.
|
|
44
|
+
|
|
45
|
+
## 0.44.0 – A range a reader marks, and a picture of the chart (Oct. 2026)
|
|
46
|
+
|
|
47
|
+
### Added
|
|
48
|
+
|
|
49
|
+
- **`onRange` on `useChart` reports a stretch the reader marks** (ADR-0074): `{ axisId, from, to }` once, on release - Alt with a drag where an x axis zooms, a plain drag where none does, and Space on the keyboard (start, then end; Escape or blur cancels). `from` is never after `to`; a category axis reports the first and last category covered (`ChartRange<string>`), a time axis milliseconds, a calendar axis wall-clock instants. A band shows while the pointer is down; a chart with `onRange` holds no range and draws none after release (the application hands it back as `initialView` or a filter). The polite region reads the start and the range; `onRange` without a `Tooltip` warns once in development. Two examples: Mark a range (Zoom and pan) and Mark a range of bars (Bar).
|
|
50
|
+
- **`useChart` hands over `toPng()`** (ADR-0075): a PNG of the plot and its axes on the chart's ground, at least twice its CSS pixels, with the legend and its chips, the limits' labels and marks and the axis breaks.
|
|
51
|
+
- **A chart prints at the width the printed page leaves it,** its axes where its marks are, and returns to its screen width afterwards.
|
|
52
|
+
- **Development warnings,** once each: a series past the palette's last colour without `color` or `tone` repeats an earlier series' colour; a function held for its source text that reads a changed outer value is probed on the first 1,000 rows and warns, naming the series and the two ways out; rows that are not an array read as none, and the warning names what arrived.
|
|
53
|
+
|
|
54
|
+
### Changed
|
|
55
|
+
|
|
56
|
+
- **`ariaLabel` on `Chart` is removed;** 0.43.0 renamed it `aria-label`.
|
|
57
|
+
- Migration: write `aria-label` (TypeScript flags every use of `ariaLabel`).
|
|
58
|
+
- **`ChartsWording` has three new required keys,** `rangeStarted`, `rangeMade` and `rangeHelp`, in English and German.
|
|
59
|
+
- Migration: a wording written out in full adds them, as it did for `selectHelp`; one built on the shipped wording needs nothing.
|
|
60
|
+
|
|
33
61
|
## 0.43.0 – A chart's root, and Intl's options for its numbers (Oct. 2026)
|
|
34
62
|
|
|
35
63
|
### Added
|
package/README.md
CHANGED
|
@@ -68,7 +68,7 @@ an x axis that reads such rows names their type: `<XAxis<Row> value="t" />`.
|
|
|
68
68
|
A y axis reads no value: its series place the rows along y. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no row and
|
|
69
69
|
are imported as they are (ADR-0048).
|
|
70
70
|
|
|
71
|
-
The chart is a composite (ADR-0068): `ref`, `className`, `style`, `id` and `data-*` reach its root `<div>`; `aria-label` and `aria-labelledby` name the plot, and your `aria-describedby` is added after the plot's own summary.
|
|
71
|
+
The chart is a composite (ADR-0068): `ref`, `className`, `style`, `id` and `data-*` reach its root `<div>`; `aria-label` and `aria-labelledby` name the plot, and your `aria-describedby` is added after the plot's own summary.
|
|
72
72
|
|
|
73
73
|
A series is an element, not an entry in a configuration object: the order in the
|
|
74
74
|
JSX decides what lies over what, and at the same time the palette colour.
|
|
@@ -82,7 +82,9 @@ reader hears each value once the keys rest and a summary of the whole. A chart
|
|
|
82
82
|
with a zoomable x axis is one as well, without a tooltip: there is nothing to
|
|
83
83
|
walk, and plus, minus, Shift with an arrow and 0 zoom and pan it. `onSelect` on
|
|
84
84
|
`useChart` hears a click on a hit and Enter on the walked one; the chart keeps
|
|
85
|
-
no selection.
|
|
85
|
+
no selection. `onRange` on `useChart` hears a stretch the reader marks - Alt with
|
|
86
|
+
a drag where the chart zooms, a plain drag where it does not, or Space on the
|
|
87
|
+
keyboard (start, then end) - once, on release; the chart keeps no range either. The words, and with them the numbers and the dates and times of the
|
|
86
88
|
axes, tooltip, data table and screen-reader text, are English (`en-GB`, 24-hour
|
|
87
89
|
clock); German (`de-DE`) comes from its own subpath. The `locale` of the
|
|
88
90
|
wording is the one input - the browser's language is not read:
|
|
@@ -133,6 +135,11 @@ loaded: Geist when the application has it, the system fonts otherwise.
|
|
|
133
135
|
* **A chart that is loading says so**, as the table does: `loading` keeps
|
|
134
136
|
and dims a course already drawn, and where there is nothing yet a
|
|
135
137
|
silhouette of the chart to come shimmers in the plot (ADR-0042).
|
|
138
|
+
* **A chart follows the printed page**: when the page goes to print, the chart
|
|
139
|
+
measures its plot as the print layout gives it and draws there, its axes
|
|
140
|
+
included, and returns to its screen width afterwards. Proved in Chromium
|
|
141
|
+
(`page.pdf()`); hiding controls and page breaks stay with your print
|
|
142
|
+
stylesheet.
|
|
136
143
|
* **The instruments**: `LimitLine` and `LimitBand`, `ControlChart` with its four
|
|
137
144
|
rule violations, `pareto()` with a collected remainder, `bin()` for a
|
|
138
145
|
histogram, and a working-time axis that takes the empty hours out and marks
|
|
@@ -147,6 +154,30 @@ loaded: Geist when the application has it, the system fonts otherwise.
|
|
|
147
154
|
[`docs/capabilities.md`](docs/capabilities.md) under "Performance" — they are
|
|
148
155
|
not repeated here, so that a new measurement has one place to go.
|
|
149
156
|
|
|
157
|
+
### The picture
|
|
158
|
+
|
|
159
|
+
`toPng()` on what `useChart` returns resolves to a PNG `Blob` of the chart as
|
|
160
|
+
the reader sees it: plot, axes and legend on the chart's own ground, in the
|
|
161
|
+
colour scheme in use, at least twice its CSS pixels (ADR-0075). The tooltip,
|
|
162
|
+
the crosshair, the "Show all" button and the data table are not in it. It
|
|
163
|
+
rejects when the chart is not mounted or has no size. Where the picture goes
|
|
164
|
+
is yours:
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
const { Chart, toPng } = useChart(rows);
|
|
168
|
+
|
|
169
|
+
// Download
|
|
170
|
+
const save = async () => {
|
|
171
|
+
const url = URL.createObjectURL(await toPng());
|
|
172
|
+
Object.assign(document.createElement("a"), { href: url, download: "trend.png" }).click();
|
|
173
|
+
URL.revokeObjectURL(url);
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
// Clipboard
|
|
177
|
+
const copy = async () =>
|
|
178
|
+
navigator.clipboard.write([new ClipboardItem({ "image/png": toPng() })]);
|
|
179
|
+
```
|
|
180
|
+
|
|
150
181
|
What it deliberately cannot do — animations, a log scale, pie, donut and
|
|
151
182
|
radar — stands in the same record, with the reason,
|
|
152
183
|
and across all five packages in
|
|
@@ -154,6 +185,32 @@ and across all five packages in
|
|
|
154
185
|
them: bars and areas stack (`stack`, `normalize`). Horizontal bars are the
|
|
155
186
|
next kind to come (ADR-0059).
|
|
156
187
|
|
|
188
|
+
## Time zone
|
|
189
|
+
|
|
190
|
+
`<Chart timeZone="Europe/Berlin">` draws every time axis of the chart, a
|
|
191
|
+
working-time axis included, in that IANA zone for a reader anywhere; without
|
|
192
|
+
it the reader's zone holds, as before. An unknown name throws Intl's
|
|
193
|
+
`RangeError`. The chart needs no other package for it, so a charts-only app can
|
|
194
|
+
show a trend in UTC with `timeZone="UTC"`.
|
|
195
|
+
|
|
196
|
+
* **The texts** - tick labels, tooltip, readout, data table and summary - are
|
|
197
|
+
written with Intl's `timeZone` in the wording's `locale`.
|
|
198
|
+
* **The label**: where the reader's zone, canonicalised through Intl, is
|
|
199
|
+
another, the zone's generic name stands after the time axis's own title (or
|
|
200
|
+
alone, where it has none), once the page has mounted. The picture paints it
|
|
201
|
+
with the title.
|
|
202
|
+
* **The tick rule**, for a named zone and the reader's alike: steps of a day or
|
|
203
|
+
longer stand on the zone's midnights, months and years; steps below a day on
|
|
204
|
+
the zone's whole multiples in real time, so a two-hour grid stays on even
|
|
205
|
+
hours after a clock change. The hour a change removes has no tick; the hour
|
|
206
|
+
it doubles is ticked twice, and each label, the tooltip and the readout carry
|
|
207
|
+
the offset (`01:00 GMT-4`, `01:00 GMT-5`).
|
|
208
|
+
* `localOffset(instant, timeZone?)` and `workingTimeTicks(…, offset, timeZone?)`
|
|
209
|
+
take the zone as an optional last argument.
|
|
210
|
+
|
|
211
|
+
An application on `@umriss-ui/core` names the zone once in its formats and
|
|
212
|
+
passes `useFormats().timeZone` to the chart; see core's README on formats.
|
|
213
|
+
|
|
157
214
|
## More
|
|
158
215
|
|
|
159
216
|
* The demo, in a checkout: `pnpm dev:charts` (port 4174). It is the documentation — every page
|
package/dist/charts.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-layer-series,.uc-layer-series:before,.uc-layer-series:after{box-sizing:border-box}.uc-silhouette,.uc-silhouette:before,.uc-silhouette:after{box-sizing:border-box}.uc-silhouette-ground,.uc-silhouette-ground:before,.uc-silhouette-ground:after{box-sizing:border-box}.uc-silhouette-glint,.uc-silhouette-glint:before,.uc-silhouette-glint:after{box-sizing:border-box}.uc-silhouette-band,.uc-silhouette-band:before,.uc-silhouette-band:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));--uc-delay-stale: var(--u-delay-stale, .2s);--uc-silhouette: color-mix(in srgb, var(--u-color-text, #18181b) 10%, transparent);--uc-ease-swell: var(--u-ease-swell, ease-in-out);--uc-fade: var(--u-duration-medium, .24s) var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;inset:0;display:block;pointer-events:none}.uc-plot[data-stale]{pointer-events:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{opacity:.5;transition:opacity var(--uc-transition-state) var(--uc-delay-stale)}.uc-silhouette{position:absolute;pointer-events:none;transition:opacity var(--uc-fade)}.uc-silhouette[data-leaving]{opacity:0}.uc-silhouette>svg{box-sizing:border-box}.uc-silhouette>svg{display:block}.uc-silhouette-ground{fill:var(--uc-silhouette)}.uc-silhouette-glint{stop-color:var(--uc-color-bg)}.uc-silhouette-band{animation:uc-silhouette-sweep var(--uc-ease-swell) infinite}@keyframes uc-silhouette-sweep{0%{transform:translate(0)}80%{transform:translate(var(--uc-travel))}to{transform:translate(var(--uc-travel))}}.uc-plot[data-arriving]>.uc-layer-series{animation:uc-silhouette-arrive var(--uc-fade)}@keyframes uc-silhouette-arrive{0%{opacity:0}}@media(forced-colors:active){.uc-silhouette-ground{fill:GrayText}.uc-silhouette-band{display:none}}.uc-axes{position:absolute;inset:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;inset:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(pointer:coarse){.uc-legend{row-gap:10px}button.uc-legend-item,.uc-show-all{position:relative}.uc-show-all{position:absolute}button.uc-legend-item:after{box-sizing:border-box}button.uc-legend-item:after,.uc-show-all:after{content:"";position:absolute;inset:-4px 0}}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}.uc-silhouette-band{display:none}.uc-silhouette{transition:none}.uc-plot[data-arriving]>.uc-layer-series{animation:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{transition-duration:0s}}.uc-measure{position:absolute;inset:0 auto auto 0;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}
|
|
1
|
+
@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-layer-series,.uc-layer-series:before,.uc-layer-series:after{box-sizing:border-box}.uc-silhouette,.uc-silhouette:before,.uc-silhouette:after{box-sizing:border-box}.uc-silhouette-ground,.uc-silhouette-ground:before,.uc-silhouette-ground:after{box-sizing:border-box}.uc-silhouette-glint,.uc-silhouette-glint:before,.uc-silhouette-glint:after{box-sizing:border-box}.uc-silhouette-band,.uc-silhouette-band:before,.uc-silhouette-band:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));--uc-delay-stale: var(--u-delay-stale, .2s);--uc-silhouette: color-mix(in srgb, var(--u-color-text, #18181b) 10%, transparent);--uc-ease-swell: var(--u-ease-swell, ease-in-out);--uc-fade: var(--u-duration-medium, .24s) var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;inset:0;display:block;pointer-events:none}.uc-plot[data-stale]{pointer-events:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{opacity:.5;transition:opacity var(--uc-transition-state) var(--uc-delay-stale)}.uc-silhouette{position:absolute;pointer-events:none;transition:opacity var(--uc-fade)}.uc-silhouette[data-leaving]{opacity:0}.uc-silhouette>svg{box-sizing:border-box}.uc-silhouette>svg{display:block}.uc-silhouette-ground{fill:var(--uc-silhouette)}.uc-silhouette-glint{stop-color:var(--uc-color-bg)}.uc-silhouette-band{animation:uc-silhouette-sweep var(--uc-ease-swell) infinite}@keyframes uc-silhouette-sweep{0%{transform:translate(0)}80%{transform:translate(var(--uc-travel))}to{transform:translate(var(--uc-travel))}}.uc-plot[data-arriving]>.uc-layer-series{animation:uc-silhouette-arrive var(--uc-fade)}@keyframes uc-silhouette-arrive{0%{opacity:0}}@media(forced-colors:active){.uc-silhouette-ground{fill:GrayText}.uc-silhouette-band{display:none}}.uc-axes{position:absolute;inset:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;inset:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(pointer:coarse){.uc-legend{row-gap:10px}button.uc-legend-item,.uc-show-all{position:relative}.uc-show-all{position:absolute}button.uc-legend-item:after{box-sizing:border-box}button.uc-legend-item:after,.uc-show-all:after{content:"";position:absolute;inset:-4px 0}}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}.uc-silhouette-band{display:none}.uc-silhouette{transition:none}.uc-plot[data-arriving]>.uc-layer-series{animation:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{transition-duration:0s}}.uc-measure{position:absolute;inset:0 auto auto 0;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break>i{box-sizing:border-box}.uc-break>i{position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break>i:first-child{box-sizing:border-box}.uc-break>i:first-child{left:1px}.uc-break>i:last-child{box-sizing:border-box}.uc-break>i:last-child{left:4px}}
|