@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.
Files changed (55) hide show
  1. package/README.md +12 -2
  2. package/dist/components/artwork/DatabaseArt/styles.css +58 -58
  3. package/dist/components/artwork/Landscape/styles.css +79 -79
  4. package/dist/components/artwork/Planet/styles.css +52 -52
  5. package/dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt +21 -21
  6. package/dist/components/artwork/ServerArt/styles.css +43 -43
  7. package/dist/components/artwork/Spectrum/styles.css +35 -35
  8. package/dist/components/controls/Autocomplete/styles.css +1 -1
  9. package/dist/components/controls/Checkbox/styles.css +58 -58
  10. package/dist/components/controls/InputBase/styles.css +374 -374
  11. package/dist/components/controls/Link/styles.css +50 -50
  12. package/dist/components/controls/SegmentedControl/styles.css +9 -9
  13. package/dist/components/controls/Switch/styles.css +54 -54
  14. package/dist/components/controls/Tabs/styles.css +239 -239
  15. package/dist/components/controls/ToggleButton/styles.css +49 -49
  16. package/dist/components/controls/shared.css +694 -694
  17. package/dist/components/editor/shared.css +1 -1
  18. package/dist/components/effects/Beacon/styles.css +38 -38
  19. package/dist/components/effects/Equalizer/styles.css +34 -34
  20. package/dist/components/effects/GlowText/styles.css +56 -56
  21. package/dist/components/effects/Marquee/styles.css +46 -46
  22. package/dist/components/effects/Reveal/styles.css +25 -25
  23. package/dist/components/effects/Shimmer/styles.css +48 -48
  24. package/dist/components/effects/Sparkles/styles.css +28 -28
  25. package/dist/components/effects/Spotlight/styles.css +45 -45
  26. package/dist/components/effects/Tilt/styles.css +67 -67
  27. package/dist/components/feedback/CollapsibleSection/styles.css +76 -76
  28. package/dist/components/feedback/DataTable/styles.css +522 -522
  29. package/dist/components/feedback/EmptyState/styles.css +80 -80
  30. package/dist/components/feedback/KeyValueList/styles.css +51 -51
  31. package/dist/components/feedback/MenuItem/styles.css +71 -71
  32. package/dist/components/feedback/Popover/styles.css +44 -44
  33. package/dist/components/feedback/Steps/styles.css +152 -152
  34. package/dist/components/feedback/Toast/styles.css +89 -89
  35. package/dist/components/forms/FormFields/styles.css +21 -21
  36. package/dist/components/foundation/ThemeProvider/styles.css +31 -31
  37. package/dist/components/layout/Avatar/styles.css +151 -151
  38. package/dist/components/layout/Card/styles.css +37 -37
  39. package/dist/components/layout/DialogActions/styles.css +31 -31
  40. package/dist/components/layout/DialogBody/styles.css +17 -17
  41. package/dist/components/layout/Illustration/styles.css +104 -104
  42. package/dist/components/layout/ScrollArea/styles.css +61 -61
  43. package/dist/components/layout/TabPanel/styles.css +16 -16
  44. package/dist/components/layout/shared.css +65 -65
  45. package/dist/components/media/AudioPlayer/styles.css +86 -86
  46. package/dist/components/media/LevelMeter/styles.css +30 -30
  47. package/dist/components/media/MelodyRoll/styles.css +196 -196
  48. package/dist/components/media/RotaryKnob/styles.css +319 -319
  49. package/dist/components/media/Sparkline/styles.css +69 -69
  50. package/dist/components/media/WaveDecoration/styles.css +1 -1
  51. package/dist/components/media/shared.css +7 -7
  52. package/dist/fonts/melodix.css +123 -123
  53. package/dist/index.js +2101 -2101
  54. package/dist/theme/base.css +210 -210
  55. 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.0.tgz
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 96px). Enable `rowNumbers` and `densityToggle` as needed.
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. */