@a2zb/styles 1.0.2 → 1.0.4
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/base.css +0 -3
- package/components.css +297 -285
- package/package.json +1 -1
- package/theme.css +6 -3
package/base.css
CHANGED
package/components.css
CHANGED
|
@@ -1,343 +1,355 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
.hero-kicker {
|
|
9
|
-
color: var(--text-muted);
|
|
10
|
-
}
|
|
1
|
+
@layer components {
|
|
2
|
+
.hero-title {
|
|
3
|
+
font-size: var(--text-hero);
|
|
4
|
+
line-height: 1.05;
|
|
5
|
+
letter-spacing: -0.02em;
|
|
6
|
+
font-weight: 800;
|
|
7
|
+
}
|
|
11
8
|
|
|
12
|
-
.
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
gap: 0.4rem;
|
|
18
|
-
|
|
19
|
-
padding: 0.58rem 0.92rem;
|
|
20
|
-
font-weight: 500;
|
|
21
|
-
letter-spacing: 0.01em;
|
|
22
|
-
border-radius: 0.7rem;
|
|
23
|
-
border: 1px solid transparent;
|
|
24
|
-
|
|
25
|
-
transition:
|
|
26
|
-
transform 120ms ease,
|
|
27
|
-
border-color 180ms ease,
|
|
28
|
-
background 180ms ease,
|
|
29
|
-
color 180ms ease,
|
|
30
|
-
box-shadow 180ms ease;
|
|
31
|
-
}
|
|
9
|
+
.hero-kicker {
|
|
10
|
+
color: var(--text-muted);
|
|
11
|
+
}
|
|
32
12
|
|
|
33
|
-
.btn
|
|
34
|
-
|
|
35
|
-
|
|
13
|
+
.btn {
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
gap: 0.4rem;
|
|
19
|
+
|
|
20
|
+
padding: 0.58rem 0.92rem;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
letter-spacing: 0.01em;
|
|
23
|
+
border-radius: 0.7rem;
|
|
24
|
+
border: 1px solid transparent;
|
|
25
|
+
|
|
26
|
+
transition:
|
|
27
|
+
transform 120ms ease,
|
|
28
|
+
border-color 180ms ease,
|
|
29
|
+
background 180ms ease,
|
|
30
|
+
color 180ms ease,
|
|
31
|
+
box-shadow 180ms ease;
|
|
32
|
+
}
|
|
36
33
|
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
.btn-rounded {
|
|
35
|
+
border-radius: 1.2rem;
|
|
36
|
+
border: 1px solid transparent;
|
|
39
37
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
background 140ms ease,
|
|
43
|
-
color 140ms ease,
|
|
44
|
-
box-shadow 140ms ease;
|
|
45
|
-
}
|
|
38
|
+
background: transparent;
|
|
39
|
+
color: var(--text-muted);
|
|
46
40
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
41
|
+
transition:
|
|
42
|
+
border-color 140ms ease,
|
|
43
|
+
background 140ms ease,
|
|
44
|
+
color 140ms ease,
|
|
45
|
+
box-shadow 140ms ease;
|
|
46
|
+
}
|
|
52
47
|
|
|
53
|
-
/*
|
|
54
|
-
.btn-rounded
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
/* hover (subtle hint) */
|
|
49
|
+
.btn-rounded:hover {
|
|
50
|
+
border-color: var(--border-default);
|
|
51
|
+
color: var(--text-primary);
|
|
52
|
+
}
|
|
57
53
|
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
/* selected */
|
|
55
|
+
.btn-rounded[data-active="true"] {
|
|
56
|
+
border-color: var(--accent-weak);
|
|
57
|
+
color: var(--accent-weak);
|
|
60
58
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
border-color: color-mix(in oklab, var(--accent) 70%, var(--border-default));
|
|
64
|
-
box-shadow:
|
|
65
|
-
0 0 0 2px var(--bg-primary),
|
|
66
|
-
0 0 0 5px color-mix(in oklab, var(--accent) 42%, transparent),
|
|
67
|
-
0 0 14px color-mix(in oklab, var(--accent) 28%, transparent);
|
|
68
|
-
}
|
|
59
|
+
background: color-mix(in oklab, var(--accent) 9%, transparent);
|
|
60
|
+
}
|
|
69
61
|
|
|
70
|
-
.btn:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
62
|
+
.btn:focus-visible {
|
|
63
|
+
outline: none;
|
|
64
|
+
border-color: color-mix(in oklab, var(--accent) 70%, var(--border-default));
|
|
65
|
+
box-shadow:
|
|
66
|
+
0 0 0 2px var(--bg-primary),
|
|
67
|
+
0 0 0 5px color-mix(in oklab, var(--accent) 42%, transparent),
|
|
68
|
+
0 0 14px color-mix(in oklab, var(--accent) 28%, transparent);
|
|
69
|
+
}
|
|
77
70
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
71
|
+
.btn:disabled {
|
|
72
|
+
opacity: 0.35;
|
|
73
|
+
cursor: not-allowed;
|
|
74
|
+
border-color: var(--border-soft);
|
|
75
|
+
background: var(--bg-surface);
|
|
76
|
+
box-shadow: none;
|
|
77
|
+
}
|
|
85
78
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
79
|
+
/* 🚫 disable hover effects */
|
|
80
|
+
.btn:disabled:hover {
|
|
81
|
+
transform: none;
|
|
82
|
+
background: var(--bg-surface);
|
|
83
|
+
border-color: var(--border-soft);
|
|
84
|
+
box-shadow: none;
|
|
85
|
+
}
|
|
89
86
|
|
|
90
|
-
.btn
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
.btn:active {
|
|
88
|
+
transform: translateY(0.5px) scale(0.995);
|
|
89
|
+
}
|
|
93
90
|
|
|
94
|
-
|
|
91
|
+
.btn-primary {
|
|
92
|
+
color: var(--text-primary);
|
|
93
|
+
font-weight: 600;
|
|
95
94
|
|
|
96
|
-
|
|
95
|
+
border-color: color-mix(in oklab, var(--accent) 32%, transparent);
|
|
97
96
|
|
|
98
|
-
|
|
99
|
-
}
|
|
97
|
+
background: color-mix(in oklab, var(--accent) 33%, black);
|
|
100
98
|
|
|
101
|
-
|
|
102
|
-
|
|
99
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
|
|
100
|
+
}
|
|
103
101
|
|
|
104
|
-
|
|
102
|
+
.btn-primary:hover {
|
|
103
|
+
color: var(--text-primary);
|
|
105
104
|
|
|
106
|
-
|
|
105
|
+
border-color: color-mix(in oklab, var(--accent) 40%, transparent);
|
|
107
106
|
|
|
108
|
-
|
|
109
|
-
}
|
|
107
|
+
background: color-mix(in oklab, var(--accent) 40%, black);
|
|
110
108
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
160deg,
|
|
114
|
-
color-mix(in oklab, var(--accent) 44%, black),
|
|
115
|
-
color-mix(in oklab, var(--accent) 34%, black)
|
|
116
|
-
);
|
|
117
|
-
border-color: color-mix(in oklab, var(--accent) 55%, transparent);
|
|
118
|
-
box-shadow:
|
|
119
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
120
|
-
inset 0 -1px 0 rgba(0, 0, 0, 0.36),
|
|
121
|
-
0 2px 6px color-mix(in oklab, var(--accent) 16%, black);
|
|
122
|
-
}
|
|
109
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
|
|
110
|
+
}
|
|
123
111
|
|
|
124
|
-
.btn-primary:active
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
112
|
+
.btn-primary:active {
|
|
113
|
+
background: linear-gradient(
|
|
114
|
+
160deg,
|
|
115
|
+
color-mix(in oklab, var(--accent) 44%, black),
|
|
116
|
+
color-mix(in oklab, var(--accent) 34%, black)
|
|
117
|
+
);
|
|
118
|
+
border-color: color-mix(in oklab, var(--accent) 55%, transparent);
|
|
119
|
+
box-shadow:
|
|
120
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
121
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.36),
|
|
122
|
+
0 2px 6px color-mix(in oklab, var(--accent) 16%, black);
|
|
123
|
+
}
|
|
134
124
|
|
|
135
|
-
|
|
125
|
+
.btn-primary:active:focus-visible {
|
|
126
|
+
border-color: color-mix(in oklab, var(--accent) 70%, transparent);
|
|
127
|
+
box-shadow:
|
|
128
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
129
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.36),
|
|
130
|
+
0 2px 6px color-mix(in oklab, var(--accent) 16%, black),
|
|
131
|
+
0 0 0 2px var(--bg-primary),
|
|
132
|
+
0 0 0 5px color-mix(in oklab, var(--accent) 46%, transparent),
|
|
133
|
+
0 0 16px color-mix(in oklab, var(--accent) 30%, transparent);
|
|
134
|
+
}
|
|
136
135
|
|
|
137
|
-
|
|
138
|
-
color: color-mix(in oklab, var(--text-primary) 92%, white 8%);
|
|
139
|
-
font-weight: 600;
|
|
136
|
+
/* === Danger Button (Cancel Order vibe) === */
|
|
140
137
|
|
|
141
|
-
|
|
138
|
+
.btn-danger {
|
|
139
|
+
color: color-mix(in oklab, var(--text-primary) 92%, white 8%);
|
|
140
|
+
font-weight: 600;
|
|
142
141
|
|
|
143
|
-
|
|
144
|
-
160deg,
|
|
145
|
-
color-mix(in oklch, var(--failure) 30%, black 70%),
|
|
146
|
-
color-mix(in oklch, var(--failure) 22%, black 78%)
|
|
147
|
-
);
|
|
142
|
+
border-color: color-mix(in oklch, var(--failure) 40%, transparent);
|
|
148
143
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
144
|
+
background: linear-gradient(
|
|
145
|
+
160deg,
|
|
146
|
+
color-mix(in oklch, var(--failure) 30%, black 70%),
|
|
147
|
+
color-mix(in oklch, var(--failure) 22%, black 78%)
|
|
148
|
+
);
|
|
154
149
|
|
|
155
|
-
|
|
156
|
-
.
|
|
157
|
-
|
|
150
|
+
box-shadow:
|
|
151
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
|
152
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
|
|
153
|
+
0 2px 6px color-mix(in oklch, var(--failure) 22%, black 78%);
|
|
154
|
+
}
|
|
158
155
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
color-mix(in oklch, var(--failure)
|
|
162
|
-
color-mix(in oklch, var(--failure) 30%, black 70%)
|
|
163
|
-
);
|
|
156
|
+
/* hover */
|
|
157
|
+
.btn-danger:hover {
|
|
158
|
+
border-color: color-mix(in oklch, var(--failure) 70%, transparent);
|
|
164
159
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
160
|
+
background: linear-gradient(
|
|
161
|
+
160deg,
|
|
162
|
+
color-mix(in oklch, var(--failure) 38%, black 62%),
|
|
163
|
+
color-mix(in oklch, var(--failure) 30%, black 70%)
|
|
164
|
+
);
|
|
170
165
|
|
|
171
|
-
|
|
172
|
-
.
|
|
173
|
-
|
|
166
|
+
box-shadow:
|
|
167
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
|
168
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
|
|
169
|
+
0 4px 12px color-mix(in oklch, var(--failure) 30%, black 70%);
|
|
170
|
+
}
|
|
174
171
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
color-mix(in oklch, var(--failure) 25%, black 75%)
|
|
179
|
-
);
|
|
172
|
+
/* active */
|
|
173
|
+
.btn-danger:active {
|
|
174
|
+
transform: translateY(0.5px) scale(0.995);
|
|
180
175
|
|
|
181
|
-
|
|
176
|
+
background: linear-gradient(
|
|
177
|
+
160deg,
|
|
178
|
+
color-mix(in oklch, var(--failure) 32%, black 68%),
|
|
179
|
+
color-mix(in oklch, var(--failure) 25%, black 75%)
|
|
180
|
+
);
|
|
182
181
|
|
|
183
|
-
|
|
184
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
185
|
-
inset 0 -1px 0 rgba(0, 0, 0, 0.32),
|
|
186
|
-
0 2px 6px color-mix(in oklch, var(--failure) 26%, black 74%);
|
|
187
|
-
}
|
|
182
|
+
border-color: color-mix(in oklch, var(--failure) 60%, transparent);
|
|
188
183
|
|
|
189
|
-
|
|
190
|
-
.
|
|
191
|
-
|
|
192
|
-
|
|
184
|
+
box-shadow:
|
|
185
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
186
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.32),
|
|
187
|
+
0 2px 6px color-mix(in oklch, var(--failure) 26%, black 74%);
|
|
188
|
+
}
|
|
193
189
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}
|
|
190
|
+
/* focus */
|
|
191
|
+
.btn-danger:focus-visible {
|
|
192
|
+
outline: none;
|
|
193
|
+
border-color: color-mix(in oklch, var(--failure) 70%, transparent);
|
|
199
194
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
195
|
+
box-shadow:
|
|
196
|
+
0 0 0 2px var(--bg-primary),
|
|
197
|
+
0 0 0 5px color-mix(in oklch, var(--failure) 30%, transparent),
|
|
198
|
+
0 0 14px color-mix(in oklch, var(--failure) 20%, transparent);
|
|
199
|
+
}
|
|
205
200
|
|
|
206
|
-
.btn-secondary
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
201
|
+
.btn-secondary {
|
|
202
|
+
color: var(--text-primary);
|
|
203
|
+
border-color: var(--border-default);
|
|
204
|
+
background: color-mix(in oklab, var(--accent) 8%, var(--bg-primary));
|
|
205
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
206
|
+
}
|
|
211
207
|
|
|
212
|
-
.btn-secondary:
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
208
|
+
.btn-secondary:hover {
|
|
209
|
+
border-color: color-mix(
|
|
210
|
+
in oklab,
|
|
211
|
+
var(--accent) 40%,
|
|
212
|
+
var(--border-default) 60%
|
|
213
|
+
);
|
|
214
|
+
background: color-mix(in oklab, var(--accent) 13%, var(--bg-primary));
|
|
215
|
+
box-shadow:
|
|
216
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
217
|
+
0 0 8px color-mix(in oklab, var(--accent) 8%, transparent);
|
|
218
|
+
}
|
|
216
219
|
|
|
217
|
-
.btn-secondary:active
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
0 0 0 2px var(--bg-primary),
|
|
222
|
-
0 0 0 5px color-mix(in oklab, var(--accent) 40%, transparent),
|
|
223
|
-
0 0 14px color-mix(in oklab, var(--accent) 24%, transparent);
|
|
224
|
-
}
|
|
220
|
+
.btn-secondary:active {
|
|
221
|
+
background: color-mix(in oklab, var(--accent) 16%, var(--bg-primary));
|
|
222
|
+
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
223
|
+
}
|
|
225
224
|
|
|
226
|
-
.btn-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
.btn-secondary:active:focus-visible {
|
|
226
|
+
border-color: color-mix(in oklab, var(--accent) 62%, var(--border-default));
|
|
227
|
+
box-shadow:
|
|
228
|
+
inset 0 1px 3px rgba(0, 0, 0, 0.25),
|
|
229
|
+
0 0 0 2px var(--bg-primary),
|
|
230
|
+
0 0 0 5px color-mix(in oklab, var(--accent) 40%, transparent),
|
|
231
|
+
0 0 14px color-mix(in oklab, var(--accent) 24%, transparent);
|
|
232
|
+
}
|
|
230
233
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
color
|
|
235
|
-
box-shadow 160ms ease;
|
|
236
|
-
}
|
|
234
|
+
.btn-ghost {
|
|
235
|
+
background: transparent;
|
|
236
|
+
border: 1px solid var(--border-default);
|
|
237
|
+
color: var(--text-muted);
|
|
237
238
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
}
|
|
239
|
+
transition:
|
|
240
|
+
border-color 160ms ease,
|
|
241
|
+
background 160ms ease,
|
|
242
|
+
color 160ms ease,
|
|
243
|
+
box-shadow 160ms ease;
|
|
244
|
+
}
|
|
244
245
|
|
|
245
|
-
.btn-ghost:
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
246
|
+
.btn-ghost:hover {
|
|
247
|
+
background: color-mix(in oklab, var(--bg-surface) 40%, transparent);
|
|
248
|
+
border-color: color-mix(
|
|
249
|
+
in oklab,
|
|
250
|
+
var(--accent) 25%,
|
|
251
|
+
var(--border-default) 75%
|
|
252
|
+
);
|
|
253
|
+
color: var(--text-primary);
|
|
254
|
+
box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 8%, transparent);
|
|
255
|
+
}
|
|
249
256
|
|
|
250
|
-
.btn-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
font-size: 0.8575rem;
|
|
255
|
-
letter-spacing: 1.6px;
|
|
256
|
-
border-radius: 0.5rem;
|
|
257
|
-
border: 1px solid var(--border-soft);
|
|
258
|
-
transition:
|
|
259
|
-
border-color 160ms ease,
|
|
260
|
-
color 160ms ease,
|
|
261
|
-
box-shadow 160ms ease;
|
|
262
|
-
}
|
|
257
|
+
.btn-ghost:active {
|
|
258
|
+
transform: translateY(0.5px) scale(0.995);
|
|
259
|
+
background: color-mix(in oklab, var(--bg-surface) 48%, transparent);
|
|
260
|
+
}
|
|
263
261
|
|
|
264
|
-
.btn-menu
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
262
|
+
.btn-menu {
|
|
263
|
+
height: 24px;
|
|
264
|
+
background: transparent;
|
|
265
|
+
color: var(--accent);
|
|
266
|
+
font-size: 0.8575rem;
|
|
267
|
+
letter-spacing: 1.6px;
|
|
268
|
+
border-radius: 0.5rem;
|
|
269
|
+
border: 1px solid var(--border-default);
|
|
270
|
+
transition:
|
|
271
|
+
border-color 160ms ease,
|
|
272
|
+
color 160ms ease,
|
|
273
|
+
box-shadow 160ms ease;
|
|
274
|
+
}
|
|
269
275
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
opacity: 0.4;
|
|
274
|
-
text-shadow: 0 0 4px var(--accent);
|
|
276
|
+
.btn-menu:hover {
|
|
277
|
+
border-color: var(--accent);
|
|
278
|
+
box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent);
|
|
275
279
|
}
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
280
|
+
|
|
281
|
+
@keyframes pulseGlow {
|
|
282
|
+
0%,
|
|
283
|
+
100% {
|
|
284
|
+
opacity: 0.4;
|
|
285
|
+
text-shadow: 0 0 4px var(--accent);
|
|
286
|
+
}
|
|
287
|
+
50% {
|
|
288
|
+
opacity: 1;
|
|
289
|
+
text-shadow: 0 0 12px var(--accent);
|
|
290
|
+
}
|
|
279
291
|
}
|
|
280
|
-
}
|
|
281
292
|
|
|
282
|
-
.token-action {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
}
|
|
293
|
+
.token-action {
|
|
294
|
+
color: var(--accent);
|
|
295
|
+
cursor: pointer;
|
|
296
|
+
font-weight: 500;
|
|
297
|
+
transition:
|
|
298
|
+
color 200ms ease,
|
|
299
|
+
text-shadow 200ms ease;
|
|
300
|
+
}
|
|
290
301
|
|
|
291
|
-
.token-action:hover {
|
|
292
|
-
|
|
293
|
-
}
|
|
302
|
+
.token-action:hover {
|
|
303
|
+
text-shadow: 0 0 6px currentColor;
|
|
304
|
+
}
|
|
294
305
|
|
|
295
|
-
.hover-lift {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
}
|
|
306
|
+
.hover-lift {
|
|
307
|
+
transition:
|
|
308
|
+
border-color 160ms ease,
|
|
309
|
+
background 160ms ease,
|
|
310
|
+
box-shadow 160ms ease;
|
|
311
|
+
}
|
|
301
312
|
|
|
302
|
-
.hover-lift:hover {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}
|
|
313
|
+
.hover-lift:hover {
|
|
314
|
+
border-color: var(--accent);
|
|
315
|
+
background: color-mix(in oklab, var(--bg-surface) 40%, transparent);
|
|
316
|
+
}
|
|
306
317
|
|
|
307
|
-
.rounded-border {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
}
|
|
318
|
+
.rounded-border {
|
|
319
|
+
border: 1px solid;
|
|
320
|
+
border-color: var(--border-default);
|
|
321
|
+
border-radius: 0.5rem;
|
|
322
|
+
}
|
|
312
323
|
|
|
313
|
-
.card {
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
}
|
|
324
|
+
.card {
|
|
325
|
+
border: 1px solid;
|
|
326
|
+
border-color: var(--border-default);
|
|
327
|
+
background-color: var(--bg-surface);
|
|
328
|
+
border-radius: 0.5rem;
|
|
329
|
+
overflow: hidden;
|
|
330
|
+
}
|
|
320
331
|
|
|
321
|
-
.base-row {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
}
|
|
332
|
+
.base-row {
|
|
333
|
+
cursor: pointer;
|
|
334
|
+
text-align: start;
|
|
335
|
+
display: flex;
|
|
336
|
+
align-items: center;
|
|
337
|
+
transition:
|
|
338
|
+
background 0.2s ease,
|
|
339
|
+
border-color 0.2s ease,
|
|
340
|
+
box-shadow 0.2s ease;
|
|
341
|
+
}
|
|
331
342
|
|
|
332
|
-
.base-row:hover {
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
}
|
|
343
|
+
.base-row:hover {
|
|
344
|
+
background: linear-gradient(
|
|
345
|
+
135deg,
|
|
346
|
+
color-mix(in oklab, var(--accent) 10%, transparent) 0%,
|
|
347
|
+
color-mix(in oklab, var(--accent) 5%, transparent) 100%
|
|
348
|
+
);
|
|
349
|
+
}
|
|
339
350
|
|
|
340
|
-
.filter-row[data-active=
|
|
341
|
-
|
|
342
|
-
|
|
351
|
+
.filter-row[data-active="true"] {
|
|
352
|
+
border-left: 2px solid var(--accent);
|
|
353
|
+
background: color-mix(in oklab, var(--accent) 12%, transparent);
|
|
354
|
+
}
|
|
343
355
|
}
|
package/package.json
CHANGED
package/theme.css
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
@theme {
|
|
2
2
|
/* --- backgrounds --- */
|
|
3
|
-
/* use as: bg-primary, bg-secondary, bg-surface */
|
|
3
|
+
/* use as: bg-primary, bg-secondary, bg-surface, bg-card */
|
|
4
4
|
--color-primary: var(--bg-primary);
|
|
5
5
|
--color-secondary: var(--bg-secondary);
|
|
6
6
|
--color-surface: var(--bg-surface);
|
|
7
|
+
--color-card: var(--bg-card);
|
|
7
8
|
|
|
8
9
|
/* --- text --- */
|
|
9
10
|
/* use as: text-fg (full), text-subtle (secondary), text-muted (dim/disabled) */
|
|
@@ -49,6 +50,7 @@
|
|
|
49
50
|
--bg-primary: #0b0b0e;
|
|
50
51
|
--bg-secondary: #1a1a20;
|
|
51
52
|
--bg-surface: #131316;
|
|
53
|
+
--bg-card: #17171c;
|
|
52
54
|
--bg-muted: rgba(120, 255, 180, 0.05);
|
|
53
55
|
|
|
54
56
|
--text-primary: rgba(230, 235, 240, 0.94);
|
|
@@ -56,7 +58,7 @@
|
|
|
56
58
|
--text-muted: rgba(165, 175, 185, 0.6);
|
|
57
59
|
|
|
58
60
|
--border-default: rgba(120, 255, 180, 0.35);
|
|
59
|
-
--border-soft: rgba(120, 255, 180, 0.
|
|
61
|
+
--border-soft: rgba(120, 255, 180, 0.25);
|
|
60
62
|
|
|
61
63
|
--accent-strong: #66ffb2; /* rare, special */
|
|
62
64
|
--accent: #49ca8a; /* normal primary */
|
|
@@ -83,6 +85,7 @@
|
|
|
83
85
|
--bg-primary: #010208;
|
|
84
86
|
--bg-secondary: #060826; /* more blue */
|
|
85
87
|
--bg-surface: #0b0f29; /* noticeably lifted */
|
|
88
|
+
--bg-card: #0e1230;
|
|
86
89
|
--bg-muted: rgba(120, 140, 255, 0.12);
|
|
87
90
|
|
|
88
91
|
--text-primary: rgba(220, 222, 235, 0.95);
|
|
@@ -90,7 +93,7 @@
|
|
|
90
93
|
--text-muted: rgba(170, 180, 220, 0.65);
|
|
91
94
|
|
|
92
95
|
--border-default: rgba(120, 140, 255, 0.45);
|
|
93
|
-
--border-soft: rgba(120, 140, 255, 0.
|
|
96
|
+
--border-soft: rgba(120, 140, 255, 0.32);
|
|
94
97
|
|
|
95
98
|
--accent: #7c84ff;
|
|
96
99
|
--accent-weak: rgba(124, 132, 255, 0.7);
|