@enderfall/ui 0.1.6 → 0.1.7

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/base.css +121 -121
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.1.6",
4
+ "version": "0.1.7",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/base.css CHANGED
@@ -6,70 +6,70 @@
6
6
  text-align: left;
7
7
  }
8
8
 
9
- body {
10
- margin: 0;
11
- min-height: 100vh;
12
- font-family: var(--font-main);
13
- color: var(--text-strong);
14
- background: var(--bg);
15
- }
16
-
17
- :root[data-reduce-motion="true"] *,
18
- :root[data-reduce-motion="true"] *::before,
19
- :root[data-reduce-motion="true"] *::after {
20
- animation-duration: 0.001ms !important;
21
- animation-iteration-count: 1 !important;
22
- transition-duration: 0.001ms !important;
23
- transition-delay: 0ms !important;
24
- scroll-behavior: auto !important;
25
- }
26
-
27
- :root[data-reduce-motion="true"] body.ef-galaxy::after,
28
- :root[data-reduce-motion="true"] body.ef-galaxy-light::after {
29
- animation: none !important;
30
- }
9
+ body {
10
+ margin: 0;
11
+ min-height: 100vh;
12
+ font-family: var(--font-main);
13
+ color: var(--text-strong);
14
+ background: var(--bg);
15
+ }
16
+
17
+ :root[data-reduce-motion="true"] *,
18
+ :root[data-reduce-motion="true"] *::before,
19
+ :root[data-reduce-motion="true"] *::after {
20
+ animation-duration: 0.001ms !important;
21
+ animation-iteration-count: 1 !important;
22
+ transition-duration: 0.001ms !important;
23
+ transition-delay: 0ms !important;
24
+ scroll-behavior: auto !important;
25
+ }
26
+
27
+ :root[data-reduce-motion="true"] body.ef-galaxy::after,
28
+ :root[data-reduce-motion="true"] body.ef-galaxy-light::after {
29
+ animation: none !important;
30
+ }
31
31
 
32
- :root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
33
- :root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
34
- :root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
35
- :root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action),
36
- :root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action) {
32
+ :root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
33
+ :root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
34
+ :root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
35
+ :root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
36
+ :root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab) {
37
37
  border: 2px solid transparent;
38
38
  border-radius: 8px;
39
39
  padding: 10px 18px;
40
40
  font-weight: 600;
41
41
  cursor: pointer;
42
- background:
43
- linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
44
- var(--ef-border-gradient) border-box;
42
+ background:
43
+ linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
44
+ var(--ef-border-gradient) border-box;
45
45
  color: var(--text-strong);
46
46
  box-shadow: var(--shadow);
47
47
  }
48
48
 
49
- :root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
50
- :root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
51
- :root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
52
- :root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled,
53
- :root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):disabled {
54
- opacity: 0.6;
55
- cursor: not-allowed;
56
- box-shadow: none;
57
- background:
58
- linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
59
- var(--ef-border-gradient-soft) border-box;
60
- }
49
+ :root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
50
+ :root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
51
+ :root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
52
+ :root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
53
+ :root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled {
54
+ opacity: 0.6;
55
+ cursor: not-allowed;
56
+ box-shadow: none;
57
+ background:
58
+ linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
59
+ var(--ef-border-gradient-soft) border-box;
60
+ }
61
61
 
62
- body.ef-galaxy {
63
- background:
62
+ body.ef-galaxy {
63
+ background:
64
64
  radial-gradient(1600px 900px at 70% -15%, rgba(124, 77, 255, 0.25), transparent 70%),
65
65
  radial-gradient(1200px 900px at 10% 20%, rgba(0, 229, 255, 0.18), transparent 70%),
66
66
  radial-gradient(1300px 1000px at 85% 80%, rgba(255, 77, 210, 0.22), transparent 70%),
67
67
  radial-gradient(1000px 800px at 20% 75%, rgba(255, 183, 77, 0.12), transparent 75%),
68
68
  radial-gradient(900px 800px at 60% 40%, rgba(76, 255, 200, 0.1), transparent 70%),
69
69
  linear-gradient(180deg, #000001 0%, #02020a 100%);
70
- }
71
-
72
- body.ef-galaxy::before {
70
+ }
71
+
72
+ body.ef-galaxy::before {
73
73
  content: "";
74
74
  position: fixed;
75
75
  inset: 0;
@@ -83,78 +83,78 @@ body.ef-galaxy::before {
83
83
  opacity: 0.45;
84
84
  pointer-events: none;
85
85
  z-index: -1;
86
- }
87
-
88
- body.ef-galaxy::after {
89
- content: "";
90
- position: fixed;
91
- inset: -20%;
92
- background:
93
- radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, 0.85), transparent),
94
- radial-gradient(2px 2px at 35% 45%, rgba(255, 255, 255, 0.75), transparent),
95
- radial-gradient(2px 2px at 65% 30%, rgba(255, 255, 255, 0.7), transparent),
96
- radial-gradient(2px 2px at 85% 60%, rgba(255, 255, 255, 0.7), transparent),
97
- radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.6), transparent),
98
- radial-gradient(1px 1px at 55% 10%, rgba(255, 255, 255, 0.6), transparent),
99
- radial-gradient(1px 1px at 75% 90%, rgba(255, 255, 255, 0.6), transparent);
100
- opacity: 0.35;
101
- mix-blend-mode: screen;
102
- pointer-events: none;
103
- z-index: -1;
104
- background-size: 420px 420px;
105
- animation: star-drift 120s linear infinite;
106
- }
107
-
108
- body.ef-galaxy-light {
109
- background:
110
- radial-gradient(1600px 900px at 70% -15%, rgba(124, 77, 255, 0.25), transparent 70%),
111
- radial-gradient(1200px 900px at 10% 20%, rgba(0, 229, 255, 0.18), transparent 70%),
112
- radial-gradient(1300px 1000px at 85% 80%, rgba(255, 77, 210, 0.22), transparent 70%),
113
- radial-gradient(1000px 800px at 20% 75%, rgba(255, 183, 77, 0.12), transparent 75%),
114
- radial-gradient(900px 800px at 60% 40%, rgba(76, 255, 200, 0.1), transparent 70%),
115
- linear-gradient(180deg, #f7f4ee 0%, #f2ece2 100%);
116
- }
117
-
118
- body.ef-galaxy-light::before {
119
- content: "";
120
- position: fixed;
121
- inset: 0;
122
- background:
123
- radial-gradient(1800px 1000px at 50% 0%, rgba(88, 0, 255, 0.18), transparent 75%),
124
- radial-gradient(1200px 900px at 15% 55%, rgba(0, 168, 255, 0.14), transparent 75%),
125
- radial-gradient(1400px 1000px at 85% 45%, rgba(255, 0, 170, 0.18), transparent 75%),
126
- radial-gradient(900px 700px at 60% 85%, rgba(255, 148, 60, 0.1), transparent 75%),
127
- radial-gradient(1000px 900px at 40% 30%, rgba(0, 255, 150, 0.08), transparent 75%);
128
- opacity: 0.45;
129
- pointer-events: none;
130
- z-index: -1;
131
- }
132
-
133
- body.ef-galaxy-light::after {
134
- content: "";
135
- position: fixed;
136
- inset: -20%;
137
- background:
138
- radial-gradient(2px 2px at 15% 20%, rgba(0, 0, 0, 0.95), transparent),
139
- radial-gradient(2px 2px at 35% 45%, rgba(0, 0, 0, 0.9), transparent),
140
- radial-gradient(2px 2px at 65% 30%, rgba(0, 0, 0, 0.85), transparent),
141
- radial-gradient(2px 2px at 85% 60%, rgba(0, 0, 0, 0.85), transparent),
142
- radial-gradient(1px 1px at 25% 85%, rgba(0, 0, 0, 0.75), transparent),
143
- radial-gradient(1px 1px at 55% 10%, rgba(0, 0, 0, 0.75), transparent),
144
- radial-gradient(1px 1px at 75% 90%, rgba(0, 0, 0, 0.75), transparent);
145
- opacity: 0.55;
146
- pointer-events: none;
147
- z-index: -1;
148
- background-size: 420px 420px;
149
- animation: star-drift 120s linear infinite;
150
- }
151
-
152
- @keyframes star-drift {
153
- 0% {
154
- transform: translate3d(0, 0, 0);
155
- }
156
- 100% {
157
- transform: translate3d(-220px, -160px, 0);
158
- }
159
- }
86
+ }
87
+
88
+ body.ef-galaxy::after {
89
+ content: "";
90
+ position: fixed;
91
+ inset: -20%;
92
+ background:
93
+ radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, 0.85), transparent),
94
+ radial-gradient(2px 2px at 35% 45%, rgba(255, 255, 255, 0.75), transparent),
95
+ radial-gradient(2px 2px at 65% 30%, rgba(255, 255, 255, 0.7), transparent),
96
+ radial-gradient(2px 2px at 85% 60%, rgba(255, 255, 255, 0.7), transparent),
97
+ radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.6), transparent),
98
+ radial-gradient(1px 1px at 55% 10%, rgba(255, 255, 255, 0.6), transparent),
99
+ radial-gradient(1px 1px at 75% 90%, rgba(255, 255, 255, 0.6), transparent);
100
+ opacity: 0.35;
101
+ mix-blend-mode: screen;
102
+ pointer-events: none;
103
+ z-index: -1;
104
+ background-size: 420px 420px;
105
+ animation: star-drift 120s linear infinite;
106
+ }
107
+
108
+ body.ef-galaxy-light {
109
+ background:
110
+ radial-gradient(1600px 900px at 70% -15%, rgba(124, 77, 255, 0.25), transparent 70%),
111
+ radial-gradient(1200px 900px at 10% 20%, rgba(0, 229, 255, 0.18), transparent 70%),
112
+ radial-gradient(1300px 1000px at 85% 80%, rgba(255, 77, 210, 0.22), transparent 70%),
113
+ radial-gradient(1000px 800px at 20% 75%, rgba(255, 183, 77, 0.12), transparent 75%),
114
+ radial-gradient(900px 800px at 60% 40%, rgba(76, 255, 200, 0.1), transparent 70%),
115
+ linear-gradient(180deg, #f7f4ee 0%, #f2ece2 100%);
116
+ }
117
+
118
+ body.ef-galaxy-light::before {
119
+ content: "";
120
+ position: fixed;
121
+ inset: 0;
122
+ background:
123
+ radial-gradient(1800px 1000px at 50% 0%, rgba(88, 0, 255, 0.18), transparent 75%),
124
+ radial-gradient(1200px 900px at 15% 55%, rgba(0, 168, 255, 0.14), transparent 75%),
125
+ radial-gradient(1400px 1000px at 85% 45%, rgba(255, 0, 170, 0.18), transparent 75%),
126
+ radial-gradient(900px 700px at 60% 85%, rgba(255, 148, 60, 0.1), transparent 75%),
127
+ radial-gradient(1000px 900px at 40% 30%, rgba(0, 255, 150, 0.08), transparent 75%);
128
+ opacity: 0.45;
129
+ pointer-events: none;
130
+ z-index: -1;
131
+ }
132
+
133
+ body.ef-galaxy-light::after {
134
+ content: "";
135
+ position: fixed;
136
+ inset: -20%;
137
+ background:
138
+ radial-gradient(2px 2px at 15% 20%, rgba(0, 0, 0, 0.95), transparent),
139
+ radial-gradient(2px 2px at 35% 45%, rgba(0, 0, 0, 0.9), transparent),
140
+ radial-gradient(2px 2px at 65% 30%, rgba(0, 0, 0, 0.85), transparent),
141
+ radial-gradient(2px 2px at 85% 60%, rgba(0, 0, 0, 0.85), transparent),
142
+ radial-gradient(1px 1px at 25% 85%, rgba(0, 0, 0, 0.75), transparent),
143
+ radial-gradient(1px 1px at 55% 10%, rgba(0, 0, 0, 0.75), transparent),
144
+ radial-gradient(1px 1px at 75% 90%, rgba(0, 0, 0, 0.75), transparent);
145
+ opacity: 0.55;
146
+ pointer-events: none;
147
+ z-index: -1;
148
+ background-size: 420px 420px;
149
+ animation: star-drift 120s linear infinite;
150
+ }
151
+
152
+ @keyframes star-drift {
153
+ 0% {
154
+ transform: translate3d(0, 0, 0);
155
+ }
156
+ 100% {
157
+ transform: translate3d(-220px, -160px, 0);
158
+ }
159
+ }
160
160