@neo-ui-kit/react 1.0.0 → 1.0.1
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/README.md +12 -2
- package/dist/components/artwork/DatabaseArt/styles.css +58 -58
- package/dist/components/artwork/Landscape/styles.css +79 -79
- package/dist/components/artwork/Planet/styles.css +52 -52
- package/dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt +21 -21
- package/dist/components/artwork/ServerArt/styles.css +43 -43
- package/dist/components/artwork/Spectrum/styles.css +35 -35
- package/dist/components/controls/Autocomplete/styles.css +1 -1
- package/dist/components/controls/Checkbox/styles.css +58 -58
- package/dist/components/controls/InputBase/styles.css +374 -374
- package/dist/components/controls/Link/styles.css +50 -50
- package/dist/components/controls/SegmentedControl/styles.css +9 -9
- package/dist/components/controls/Switch/styles.css +54 -54
- package/dist/components/controls/Tabs/styles.css +239 -239
- package/dist/components/controls/ToggleButton/styles.css +49 -49
- package/dist/components/controls/shared.css +694 -694
- package/dist/components/editor/shared.css +1 -1
- package/dist/components/effects/Beacon/styles.css +38 -38
- package/dist/components/effects/Equalizer/styles.css +34 -34
- package/dist/components/effects/GlowText/styles.css +56 -56
- package/dist/components/effects/Marquee/styles.css +46 -46
- package/dist/components/effects/Reveal/styles.css +25 -25
- package/dist/components/effects/Shimmer/styles.css +48 -48
- package/dist/components/effects/Sparkles/styles.css +28 -28
- package/dist/components/effects/Spotlight/styles.css +45 -45
- package/dist/components/effects/Tilt/styles.css +67 -67
- package/dist/components/feedback/CollapsibleSection/styles.css +76 -76
- package/dist/components/feedback/DataTable/styles.css +522 -522
- package/dist/components/feedback/EmptyState/styles.css +80 -80
- package/dist/components/feedback/KeyValueList/styles.css +51 -51
- package/dist/components/feedback/MenuItem/styles.css +71 -71
- package/dist/components/feedback/Popover/styles.css +44 -44
- package/dist/components/feedback/Steps/styles.css +152 -152
- package/dist/components/feedback/Toast/styles.css +89 -89
- package/dist/components/forms/FormFields/styles.css +21 -21
- package/dist/components/foundation/ThemeProvider/styles.css +31 -31
- package/dist/components/layout/Avatar/styles.css +151 -151
- package/dist/components/layout/Card/styles.css +37 -37
- package/dist/components/layout/DialogActions/styles.css +31 -31
- package/dist/components/layout/DialogBody/styles.css +17 -17
- package/dist/components/layout/Illustration/styles.css +104 -104
- package/dist/components/layout/ScrollArea/styles.css +61 -61
- package/dist/components/layout/TabPanel/styles.css +16 -16
- package/dist/components/layout/shared.css +65 -65
- package/dist/components/media/AudioPlayer/styles.css +86 -86
- package/dist/components/media/LevelMeter/styles.css +30 -30
- package/dist/components/media/MelodyRoll/styles.css +196 -196
- package/dist/components/media/RotaryKnob/styles.css +319 -319
- package/dist/components/media/Sparkline/styles.css +69 -69
- package/dist/components/media/WaveDecoration/styles.css +1 -1
- package/dist/components/media/shared.css +7 -7
- package/dist/fonts/melodix.css +123 -123
- package/dist/index.js +2101 -2101
- package/dist/theme/base.css +210 -210
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,6 +14,8 @@ Install the package in your application. React and ReactDOM are peer dependencie
|
|
|
14
14
|
npm install @neo-ui-kit/react
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
+
Package: [@neo-ui-kit/react on npm](https://www.npmjs.com/package/@neo-ui-kit/react).
|
|
18
|
+
|
|
17
19
|
Import the stylesheet once in the app entry point:
|
|
18
20
|
|
|
19
21
|
```ts
|
|
@@ -23,9 +25,11 @@ import "@neo-ui-kit/react/styles.css";
|
|
|
23
25
|
To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
|
|
24
26
|
|
|
25
27
|
```bash
|
|
26
|
-
npm install /path/to/adui/release/neo-ui-kit-react-1.0.
|
|
28
|
+
npm install /path/to/adui/release/neo-ui-kit-react-1.0.1.tgz
|
|
27
29
|
```
|
|
28
30
|
|
|
31
|
+
Maintainers publish new versions from `Pro100Dimka/adui` using the `release.yml` GitHub Actions workflow, a matching `v<version>` tag, and the `npm-publication` environment. npm trusts its OIDC identity; no `NPM_TOKEN` is required. The workflow checks the project and packed consumer before publishing the tested archive. Published `1.0.0` cannot be overwritten: code and README changes in npm require a new package version. See the [repository release instructions](https://github.com/Pro100Dimka/adui#npm-пакет).
|
|
32
|
+
|
|
29
33
|
## Theme
|
|
30
34
|
|
|
31
35
|
Two colours build the whole palette (a primary scale, a secondary scale and tinted neutrals):
|
|
@@ -124,7 +128,7 @@ An existing audio engine can also pass its own `AnalyserNode` as `audio`, or a c
|
|
|
124
128
|
|
|
125
129
|
Set `pageSize` to enable pagination. `pageSizeOptions` provides footer choices (the initial size is always included), and the footer shows the visible result range. The reset button clears sorting, filters, grouping, search, hidden columns, resized widths, and the chosen page size. See the live `DataTable` example in the documentation for complete column and row definitions.
|
|
126
130
|
|
|
127
|
-
Click a header to cycle ascending/descending/unsorted; Shift-click adds another sort criterion. `sorting` / `defaultSorting` / `onSortingChange` manage the ordered array of criteria. The existing single-column `sort` API remains supported. `columnOrder` and `columnPinning` have the same controlled/default/change pattern; pinning is `{ left: ["name"], right: ["status"] }`. The Columns menu exposes keyboard-accessible reordering and pinning. `renderRowDetails(row, index)` is called only for expanded, mounted rows; `expandedRows` contains stable row keys. `renderRowActions` adds an isolated actions cell (`rowActionsWidth` defaults to
|
|
131
|
+
Click a header to cycle ascending/descending/unsorted; Shift-click adds another sort criterion. `sorting` / `defaultSorting` / `onSortingChange` manage the ordered array of criteria. The existing single-column `sort` API remains supported. `columnOrder` and `columnPinning` have the same controlled/default/change pattern; pinning is `{ left: ["name"], right: ["status"] }`. The Columns menu exposes keyboard-accessible reordering and pinning. `renderRowDetails(row, index)` is called only for expanded, mounted rows; `expandedRows` contains stable row keys. `renderRowActions` adds an isolated actions cell (`rowActionsWidth` defaults to 120px). Enable `rowNumbers` and `densityToggle` as needed.
|
|
128
132
|
|
|
129
133
|
For a remote table, supply only the current page and control the state used by your data client:
|
|
130
134
|
|
|
@@ -178,6 +182,12 @@ import { ThemeProvider, useMotion } from "@neo-ui-kit/react/core";
|
|
|
178
182
|
|
|
179
183
|
Canvas-rendered volume knob. Drag near the edge to rotate, drag from the center to move linearly, click the outer scale to jump. Wheel and arrow keys change the value, Shift gives a fine step, PageUp/PageDown change by 10, Home/End set 0/100, Escape cancels a drag, double-click resets. `onValueChange` fires while adjusting, `onValueCommit` after the gesture. `readOnly` turns it into a gauge.
|
|
180
184
|
|
|
185
|
+
## 1.0.1 release notes
|
|
186
|
+
|
|
187
|
+
- Clarifies npm installation and documents GitHub Actions trusted publishing through OIDC.
|
|
188
|
+
- Corrects the documented DataTable `rowActionsWidth` default to 120px.
|
|
189
|
+
- Runtime code is unchanged from 1.0.0.
|
|
190
|
+
|
|
181
191
|
## 1.0.0 hardening notes
|
|
182
192
|
|
|
183
193
|
Version 1.0.0 is the new NEO UI starting point. Rebuild the local archive after changing source files.
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
/* Styles owned by DatabaseArt. Orbit, spark and aura animations are shared with ServerArt. */
|
|
2
|
-
.ad-database-art {
|
|
3
|
-
display: block;
|
|
4
|
-
width: 100%;
|
|
5
|
-
max-width: 11rem;
|
|
6
|
-
aspect-ratio: 170 / 179;
|
|
7
|
-
height: auto;
|
|
8
|
-
position: relative;
|
|
9
|
-
overflow: visible;
|
|
10
|
-
}
|
|
11
|
-
/* An artwork stack (see layers.tsx): drawings laid exactly over each other. */
|
|
12
|
-
:is(.ad-database-art, .ad-server-art) > .ad-art-layer {
|
|
13
|
-
position: absolute;
|
|
14
|
-
inset: 0;
|
|
15
|
-
display: block;
|
|
16
|
-
width: 100%;
|
|
17
|
-
height: 100%;
|
|
18
|
-
overflow: visible;
|
|
19
|
-
pointer-events: none;
|
|
20
|
-
}
|
|
21
|
-
/* The orbits are the only drawing that repaints: three thin dashes, with no filter. */
|
|
22
|
-
.ad-art-orbit {
|
|
23
|
-
stroke-dasharray: 14 86;
|
|
24
|
-
stroke-linecap: round;
|
|
25
|
-
animation: ad-art-orbit 4s linear infinite;
|
|
26
|
-
}
|
|
27
|
-
/* The same pulses on whole layers: the compositor scales and fades them, nothing repaints.
|
|
28
|
-
Each layer scales about its own point (set inline from the drawing). */
|
|
29
|
-
.ad-art-spark-layer {
|
|
30
|
-
animation: ad-art-spark 4s ease-in-out var(--ad-delay, 0s) infinite;
|
|
31
|
-
will-change: transform, opacity;
|
|
32
|
-
}
|
|
33
|
-
.ad-art-aura-layer {
|
|
34
|
-
animation: ad-art-aura 5s ease-in-out infinite;
|
|
35
|
-
will-change: transform, opacity;
|
|
36
|
-
}
|
|
37
|
-
@keyframes ad-art-orbit {
|
|
38
|
-
to {
|
|
39
|
-
stroke-dashoffset: -100;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
@keyframes ad-art-spark {
|
|
43
|
-
0%,
|
|
44
|
-
100% {
|
|
45
|
-
opacity: 0.35;
|
|
46
|
-
transform: scale(0.7);
|
|
47
|
-
}
|
|
48
|
-
50% {
|
|
49
|
-
opacity: 1;
|
|
50
|
-
transform: scale(1);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
@keyframes ad-art-aura {
|
|
54
|
-
50% {
|
|
55
|
-
opacity: 0.6;
|
|
56
|
-
transform: scale(1.08);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
1
|
+
/* Styles owned by DatabaseArt. Orbit, spark and aura animations are shared with ServerArt. */
|
|
2
|
+
.ad-database-art {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
max-width: 11rem;
|
|
6
|
+
aspect-ratio: 170 / 179;
|
|
7
|
+
height: auto;
|
|
8
|
+
position: relative;
|
|
9
|
+
overflow: visible;
|
|
10
|
+
}
|
|
11
|
+
/* An artwork stack (see layers.tsx): drawings laid exactly over each other. */
|
|
12
|
+
:is(.ad-database-art, .ad-server-art) > .ad-art-layer {
|
|
13
|
+
position: absolute;
|
|
14
|
+
inset: 0;
|
|
15
|
+
display: block;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
overflow: visible;
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
|
21
|
+
/* The orbits are the only drawing that repaints: three thin dashes, with no filter. */
|
|
22
|
+
.ad-art-orbit {
|
|
23
|
+
stroke-dasharray: 14 86;
|
|
24
|
+
stroke-linecap: round;
|
|
25
|
+
animation: ad-art-orbit 4s linear infinite;
|
|
26
|
+
}
|
|
27
|
+
/* The same pulses on whole layers: the compositor scales and fades them, nothing repaints.
|
|
28
|
+
Each layer scales about its own point (set inline from the drawing). */
|
|
29
|
+
.ad-art-spark-layer {
|
|
30
|
+
animation: ad-art-spark 4s ease-in-out var(--ad-delay, 0s) infinite;
|
|
31
|
+
will-change: transform, opacity;
|
|
32
|
+
}
|
|
33
|
+
.ad-art-aura-layer {
|
|
34
|
+
animation: ad-art-aura 5s ease-in-out infinite;
|
|
35
|
+
will-change: transform, opacity;
|
|
36
|
+
}
|
|
37
|
+
@keyframes ad-art-orbit {
|
|
38
|
+
to {
|
|
39
|
+
stroke-dashoffset: -100;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
@keyframes ad-art-spark {
|
|
43
|
+
0%,
|
|
44
|
+
100% {
|
|
45
|
+
opacity: 0.35;
|
|
46
|
+
transform: scale(0.7);
|
|
47
|
+
}
|
|
48
|
+
50% {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
transform: scale(1);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
@keyframes ad-art-aura {
|
|
54
|
+
50% {
|
|
55
|
+
opacity: 0.6;
|
|
56
|
+
transform: scale(1.08);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
/* Styles owned by Landscape: the painting fades in, the horizon glow pulses and the frame drifts slowly. */
|
|
2
|
-
.ad-landscape {
|
|
3
|
-
position: relative;
|
|
4
|
-
isolation: isolate;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
min-height: 7rem;
|
|
7
|
-
aspect-ratio: 1220 / 168;
|
|
8
|
-
border-radius: var(--ad-radius);
|
|
9
|
-
background: var(--ad-neutral-900);
|
|
10
|
-
}
|
|
11
|
-
.ad-landscape > canvas {
|
|
12
|
-
/* Painted in ruby; turned to the theme hue. */
|
|
13
|
-
filter: hue-rotate(var(--ad-hue-shift, 0deg));
|
|
14
|
-
position: absolute;
|
|
15
|
-
inset: 0;
|
|
16
|
-
width: 100%;
|
|
17
|
-
height: 100%;
|
|
18
|
-
object-fit: cover;
|
|
19
|
-
object-position: 70% 50%;
|
|
20
|
-
opacity: 0;
|
|
21
|
-
transition: opacity 1.2s ease-out;
|
|
22
|
-
animation: ad-landscape-drift 24s ease-in-out infinite alternate;
|
|
23
|
-
}
|
|
24
|
-
.ad-landscape > canvas[data-ready] {
|
|
25
|
-
opacity: 0.8;
|
|
26
|
-
}
|
|
27
|
-
.ad-landscape[data-shade]::before {
|
|
28
|
-
content: "";
|
|
29
|
-
position: absolute;
|
|
30
|
-
inset: 0;
|
|
31
|
-
z-index: 1;
|
|
32
|
-
background: linear-gradient(
|
|
33
|
-
90deg,
|
|
34
|
-
rgb(from var(--ad-neutral-900) r g b / 0.94) 0%,
|
|
35
|
-
rgb(from var(--ad-neutral-900) r g b / 0.67) 32%,
|
|
36
|
-
rgb(from var(--ad-neutral-900) r g b / 0.15) 70%,
|
|
37
|
-
rgb(from var(--ad-neutral-900) r g b / 0.04)
|
|
38
|
-
);
|
|
39
|
-
pointer-events: none;
|
|
40
|
-
}
|
|
41
|
-
/* Breathing glow where the planet meets the ridge. */
|
|
42
|
-
.ad-landscape-glow {
|
|
43
|
-
position: absolute;
|
|
44
|
-
z-index: 1;
|
|
45
|
-
left: 58%;
|
|
46
|
-
bottom: -10%;
|
|
47
|
-
width: 28%;
|
|
48
|
-
aspect-ratio: 2;
|
|
49
|
-
border-radius: 50%;
|
|
50
|
-
background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.33), transparent);
|
|
51
|
-
mix-blend-mode: screen;
|
|
52
|
-
animation: ad-landscape-glow 5s ease-in-out infinite;
|
|
53
|
-
pointer-events: none;
|
|
54
|
-
}
|
|
55
|
-
.ad-landscape-content {
|
|
56
|
-
position: relative;
|
|
57
|
-
z-index: 2;
|
|
58
|
-
height: 100%;
|
|
59
|
-
padding: clamp(0.75rem, 2vw, 1.5rem);
|
|
60
|
-
}
|
|
61
|
-
@keyframes ad-landscape-drift {
|
|
62
|
-
from {
|
|
63
|
-
transform: scale(1.02) translateX(0);
|
|
64
|
-
}
|
|
65
|
-
to {
|
|
66
|
-
transform: scale(1.08) translateX(-1.5%);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
@keyframes ad-landscape-glow {
|
|
70
|
-
0%,
|
|
71
|
-
100% {
|
|
72
|
-
opacity: 0.5;
|
|
73
|
-
scale: 0.9;
|
|
74
|
-
}
|
|
75
|
-
50% {
|
|
76
|
-
opacity: 1;
|
|
77
|
-
scale: 1.1;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
1
|
+
/* Styles owned by Landscape: the painting fades in, the horizon glow pulses and the frame drifts slowly. */
|
|
2
|
+
.ad-landscape {
|
|
3
|
+
position: relative;
|
|
4
|
+
isolation: isolate;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
min-height: 7rem;
|
|
7
|
+
aspect-ratio: 1220 / 168;
|
|
8
|
+
border-radius: var(--ad-radius);
|
|
9
|
+
background: var(--ad-neutral-900);
|
|
10
|
+
}
|
|
11
|
+
.ad-landscape > canvas {
|
|
12
|
+
/* Painted in ruby; turned to the theme hue. */
|
|
13
|
+
filter: hue-rotate(var(--ad-hue-shift, 0deg));
|
|
14
|
+
position: absolute;
|
|
15
|
+
inset: 0;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
object-fit: cover;
|
|
19
|
+
object-position: 70% 50%;
|
|
20
|
+
opacity: 0;
|
|
21
|
+
transition: opacity 1.2s ease-out;
|
|
22
|
+
animation: ad-landscape-drift 24s ease-in-out infinite alternate;
|
|
23
|
+
}
|
|
24
|
+
.ad-landscape > canvas[data-ready] {
|
|
25
|
+
opacity: 0.8;
|
|
26
|
+
}
|
|
27
|
+
.ad-landscape[data-shade]::before {
|
|
28
|
+
content: "";
|
|
29
|
+
position: absolute;
|
|
30
|
+
inset: 0;
|
|
31
|
+
z-index: 1;
|
|
32
|
+
background: linear-gradient(
|
|
33
|
+
90deg,
|
|
34
|
+
rgb(from var(--ad-neutral-900) r g b / 0.94) 0%,
|
|
35
|
+
rgb(from var(--ad-neutral-900) r g b / 0.67) 32%,
|
|
36
|
+
rgb(from var(--ad-neutral-900) r g b / 0.15) 70%,
|
|
37
|
+
rgb(from var(--ad-neutral-900) r g b / 0.04)
|
|
38
|
+
);
|
|
39
|
+
pointer-events: none;
|
|
40
|
+
}
|
|
41
|
+
/* Breathing glow where the planet meets the ridge. */
|
|
42
|
+
.ad-landscape-glow {
|
|
43
|
+
position: absolute;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
left: 58%;
|
|
46
|
+
bottom: -10%;
|
|
47
|
+
width: 28%;
|
|
48
|
+
aspect-ratio: 2;
|
|
49
|
+
border-radius: 50%;
|
|
50
|
+
background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.33), transparent);
|
|
51
|
+
mix-blend-mode: screen;
|
|
52
|
+
animation: ad-landscape-glow 5s ease-in-out infinite;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
}
|
|
55
|
+
.ad-landscape-content {
|
|
56
|
+
position: relative;
|
|
57
|
+
z-index: 2;
|
|
58
|
+
height: 100%;
|
|
59
|
+
padding: clamp(0.75rem, 2vw, 1.5rem);
|
|
60
|
+
}
|
|
61
|
+
@keyframes ad-landscape-drift {
|
|
62
|
+
from {
|
|
63
|
+
transform: scale(1.02) translateX(0);
|
|
64
|
+
}
|
|
65
|
+
to {
|
|
66
|
+
transform: scale(1.08) translateX(-1.5%);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
@keyframes ad-landscape-glow {
|
|
70
|
+
0%,
|
|
71
|
+
100% {
|
|
72
|
+
opacity: 0.5;
|
|
73
|
+
scale: 0.9;
|
|
74
|
+
}
|
|
75
|
+
50% {
|
|
76
|
+
opacity: 1;
|
|
77
|
+
scale: 1.1;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
/* Styles owned by Planet: the planet fades in and its rim breathes with light. */
|
|
2
|
-
.ad-planet {
|
|
3
|
-
position: relative;
|
|
4
|
-
isolation: isolate;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
min-height: 6rem;
|
|
7
|
-
aspect-ratio: 515 / 114;
|
|
8
|
-
border-radius: var(--ad-radius);
|
|
9
|
-
background:
|
|
10
|
-
radial-gradient(ellipse 60% 120% at 100% 100%, rgb(from var(--ad-primary) r g b / 0.08), transparent 70%),
|
|
11
|
-
var(--ad-neutral-900);
|
|
12
|
-
}
|
|
13
|
-
.ad-planet > canvas {
|
|
14
|
-
/* Painted in ruby; turned to the theme hue (a static filter, applied once). */
|
|
15
|
-
filter: hue-rotate(var(--ad-hue-shift, 0deg));
|
|
16
|
-
position: absolute;
|
|
17
|
-
inset: 0;
|
|
18
|
-
width: 100%;
|
|
19
|
-
height: 100%;
|
|
20
|
-
object-fit: cover;
|
|
21
|
-
object-position: 100% 100%;
|
|
22
|
-
opacity: 0;
|
|
23
|
-
transition: opacity 1.2s ease-out;
|
|
24
|
-
}
|
|
25
|
-
/* The rim breathes: a light over the planet's edge swells and settles (opacity only; the painted
|
|
26
|
-
canvas is never re-filtered and nothing is blended). */
|
|
27
|
-
.ad-planet::after {
|
|
28
|
-
content: "";
|
|
29
|
-
position: absolute;
|
|
30
|
-
inset: 0;
|
|
31
|
-
z-index: 0;
|
|
32
|
-
background: radial-gradient(ellipse 70% 120% at 100% 100%, transparent 38%, rgb(from var(--ad-secondary) r g b / 0.16) 52%, transparent 66%);
|
|
33
|
-
opacity: 0;
|
|
34
|
-
animation: ad-planet-rim 6s ease-in-out infinite;
|
|
35
|
-
pointer-events: none;
|
|
36
|
-
/* A layer of its own: the painted canvas under it is never redrawn by the breath. */
|
|
37
|
-
will-change: opacity;
|
|
38
|
-
}
|
|
39
|
-
.ad-planet > canvas[data-ready] {
|
|
40
|
-
opacity: 1;
|
|
41
|
-
}
|
|
42
|
-
.ad-planet-content {
|
|
43
|
-
position: relative;
|
|
44
|
-
z-index: 1;
|
|
45
|
-
height: 100%;
|
|
46
|
-
padding: clamp(0.75rem, 2vw, 1.5rem);
|
|
47
|
-
}
|
|
48
|
-
@keyframes ad-planet-rim {
|
|
49
|
-
50% {
|
|
50
|
-
opacity: 1;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
1
|
+
/* Styles owned by Planet: the planet fades in and its rim breathes with light. */
|
|
2
|
+
.ad-planet {
|
|
3
|
+
position: relative;
|
|
4
|
+
isolation: isolate;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
min-height: 6rem;
|
|
7
|
+
aspect-ratio: 515 / 114;
|
|
8
|
+
border-radius: var(--ad-radius);
|
|
9
|
+
background:
|
|
10
|
+
radial-gradient(ellipse 60% 120% at 100% 100%, rgb(from var(--ad-primary) r g b / 0.08), transparent 70%),
|
|
11
|
+
var(--ad-neutral-900);
|
|
12
|
+
}
|
|
13
|
+
.ad-planet > canvas {
|
|
14
|
+
/* Painted in ruby; turned to the theme hue (a static filter, applied once). */
|
|
15
|
+
filter: hue-rotate(var(--ad-hue-shift, 0deg));
|
|
16
|
+
position: absolute;
|
|
17
|
+
inset: 0;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
object-fit: cover;
|
|
21
|
+
object-position: 100% 100%;
|
|
22
|
+
opacity: 0;
|
|
23
|
+
transition: opacity 1.2s ease-out;
|
|
24
|
+
}
|
|
25
|
+
/* The rim breathes: a light over the planet's edge swells and settles (opacity only; the painted
|
|
26
|
+
canvas is never re-filtered and nothing is blended). */
|
|
27
|
+
.ad-planet::after {
|
|
28
|
+
content: "";
|
|
29
|
+
position: absolute;
|
|
30
|
+
inset: 0;
|
|
31
|
+
z-index: 0;
|
|
32
|
+
background: radial-gradient(ellipse 70% 120% at 100% 100%, transparent 38%, rgb(from var(--ad-secondary) r g b / 0.16) 52%, transparent 66%);
|
|
33
|
+
opacity: 0;
|
|
34
|
+
animation: ad-planet-rim 6s ease-in-out infinite;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
/* A layer of its own: the painted canvas under it is never redrawn by the breath. */
|
|
37
|
+
will-change: opacity;
|
|
38
|
+
}
|
|
39
|
+
.ad-planet > canvas[data-ready] {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
}
|
|
42
|
+
.ad-planet-content {
|
|
43
|
+
position: relative;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
height: 100%;
|
|
46
|
+
padding: clamp(0.75rem, 2vw, 1.5rem);
|
|
47
|
+
}
|
|
48
|
+
@keyframes ad-planet-rim {
|
|
49
|
+
50% {
|
|
50
|
+
opacity: 1;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Quantum Fields Contributors
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Quantum Fields Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
/* Styles owned by ServerArt. The layer stack, spark and aura pulses come from DatabaseArt. */
|
|
2
|
-
.ad-server-art {
|
|
3
|
-
display: block;
|
|
4
|
-
width: 100%;
|
|
5
|
-
max-width: 11rem;
|
|
6
|
-
aspect-ratio: 180 / 170;
|
|
7
|
-
height: auto;
|
|
8
|
-
position: relative;
|
|
9
|
-
overflow: visible;
|
|
10
|
-
}
|
|
11
|
-
.ad-server-led,
|
|
12
|
-
.ad-server-glow {
|
|
13
|
-
stroke: var(--ad-red);
|
|
14
|
-
animation: ad-server-led 3.4s ease-in-out infinite;
|
|
15
|
-
}
|
|
16
|
-
/* A status dot is a layer of its own: its glow is drawn once and the layer only fades. */
|
|
17
|
-
.ad-server-dot {
|
|
18
|
-
fill: var(--ad-pink);
|
|
19
|
-
filter: drop-shadow(0 0 0.2rem var(--ad-red));
|
|
20
|
-
animation: ad-server-led 3.4s ease-in-out infinite;
|
|
21
|
-
will-change: opacity;
|
|
22
|
-
}
|
|
23
|
-
.ad-server-orbit {
|
|
24
|
-
stroke: color-mix(in srgb, var(--ad-pink) 72%, #fff);
|
|
25
|
-
stroke-width: 1px;
|
|
26
|
-
stroke-dasharray: 7 93;
|
|
27
|
-
stroke-linecap: round;
|
|
28
|
-
animation: ad-art-orbit 6.4s linear infinite;
|
|
29
|
-
}
|
|
30
|
-
.ad-server-cloud {
|
|
31
|
-
animation: ad-server-cloud 3s ease-in-out infinite;
|
|
32
|
-
will-change: transform;
|
|
33
|
-
}
|
|
34
|
-
@keyframes ad-server-led {
|
|
35
|
-
50% {
|
|
36
|
-
opacity: 0.35;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
@keyframes ad-server-cloud {
|
|
40
|
-
50% {
|
|
41
|
-
transform: translateY(-0.2rem);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
1
|
+
/* Styles owned by ServerArt. The layer stack, spark and aura pulses come from DatabaseArt. */
|
|
2
|
+
.ad-server-art {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
max-width: 11rem;
|
|
6
|
+
aspect-ratio: 180 / 170;
|
|
7
|
+
height: auto;
|
|
8
|
+
position: relative;
|
|
9
|
+
overflow: visible;
|
|
10
|
+
}
|
|
11
|
+
.ad-server-led,
|
|
12
|
+
.ad-server-glow {
|
|
13
|
+
stroke: var(--ad-red);
|
|
14
|
+
animation: ad-server-led 3.4s ease-in-out infinite;
|
|
15
|
+
}
|
|
16
|
+
/* A status dot is a layer of its own: its glow is drawn once and the layer only fades. */
|
|
17
|
+
.ad-server-dot {
|
|
18
|
+
fill: var(--ad-pink);
|
|
19
|
+
filter: drop-shadow(0 0 0.2rem var(--ad-red));
|
|
20
|
+
animation: ad-server-led 3.4s ease-in-out infinite;
|
|
21
|
+
will-change: opacity;
|
|
22
|
+
}
|
|
23
|
+
.ad-server-orbit {
|
|
24
|
+
stroke: color-mix(in srgb, var(--ad-pink) 72%, #fff);
|
|
25
|
+
stroke-width: 1px;
|
|
26
|
+
stroke-dasharray: 7 93;
|
|
27
|
+
stroke-linecap: round;
|
|
28
|
+
animation: ad-art-orbit 6.4s linear infinite;
|
|
29
|
+
}
|
|
30
|
+
.ad-server-cloud {
|
|
31
|
+
animation: ad-server-cloud 3s ease-in-out infinite;
|
|
32
|
+
will-change: transform;
|
|
33
|
+
}
|
|
34
|
+
@keyframes ad-server-led {
|
|
35
|
+
50% {
|
|
36
|
+
opacity: 0.35;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
@keyframes ad-server-cloud {
|
|
40
|
+
50% {
|
|
41
|
+
transform: translateY(-0.2rem);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
/* Styles owned by Spectrum. */
|
|
2
|
-
.ad-spectrum {
|
|
3
|
-
display: block;
|
|
4
|
-
width: 100%;
|
|
5
|
-
max-width: 21rem;
|
|
6
|
-
aspect-ratio: 325 / 232;
|
|
7
|
-
height: auto;
|
|
8
|
-
pointer-events: none;
|
|
9
|
-
}
|
|
10
|
-
.ad-spectrum[data-variant="bars"] {
|
|
11
|
-
max-width: 12rem;
|
|
12
|
-
aspect-ratio: 163 / 140;
|
|
13
|
-
}
|
|
14
|
-
.ad-spectrum[data-variant="segmented"] {
|
|
15
|
-
position: relative;
|
|
16
|
-
overflow: hidden;
|
|
17
|
-
}
|
|
18
|
-
.ad-spectrum[data-variant="segmented"] rect {
|
|
19
|
-
fill: var(--ad-primary-600);
|
|
20
|
-
}
|
|
21
|
-
/* A column is a window over its rows: both slide by transform on layers of their own. */
|
|
22
|
-
.ad-spectrum-column {
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
height: 100%;
|
|
26
|
-
overflow: hidden;
|
|
27
|
-
transform: translateY(100%);
|
|
28
|
-
will-change: transform;
|
|
29
|
-
}
|
|
30
|
-
.ad-spectrum-column > svg {
|
|
31
|
-
display: block;
|
|
32
|
-
width: 100%;
|
|
33
|
-
height: 100%;
|
|
34
|
-
will-change: transform;
|
|
35
|
-
}
|
|
1
|
+
/* Styles owned by Spectrum. */
|
|
2
|
+
.ad-spectrum {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
max-width: 21rem;
|
|
6
|
+
aspect-ratio: 325 / 232;
|
|
7
|
+
height: auto;
|
|
8
|
+
pointer-events: none;
|
|
9
|
+
}
|
|
10
|
+
.ad-spectrum[data-variant="bars"] {
|
|
11
|
+
max-width: 12rem;
|
|
12
|
+
aspect-ratio: 163 / 140;
|
|
13
|
+
}
|
|
14
|
+
.ad-spectrum[data-variant="segmented"] {
|
|
15
|
+
position: relative;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
}
|
|
18
|
+
.ad-spectrum[data-variant="segmented"] rect {
|
|
19
|
+
fill: var(--ad-primary-600);
|
|
20
|
+
}
|
|
21
|
+
/* A column is a window over its rows: both slide by transform on layers of their own. */
|
|
22
|
+
.ad-spectrum-column {
|
|
23
|
+
position: absolute;
|
|
24
|
+
top: 0;
|
|
25
|
+
height: 100%;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
transform: translateY(100%);
|
|
28
|
+
will-change: transform;
|
|
29
|
+
}
|
|
30
|
+
.ad-spectrum-column > svg {
|
|
31
|
+
display: block;
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 100%;
|
|
34
|
+
will-change: transform;
|
|
35
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/* Styles owned by Autocomplete; the option list lives in Select/styles.css. */
|
|
1
|
+
/* Styles owned by Autocomplete; the option list lives in Select/styles.css. */
|