@enderfall/ui 0.2.10 → 0.2.12

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 (6) hide show
  1. package/package.json +2 -2
  2. package/src/components/StackedCard.css +54 -56
  3. package/src/components/Tabs.css +7 -2
  4. package/src/components/Tabs.tsx +28 -13
  5. package/src/components/UserMenu.css +6 -0
  6. package/src/variables.css +131 -32
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.2.10",
4
+ "version": "0.2.12",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -31,4 +31,4 @@
31
31
  "typescript": "^5.3.3"
32
32
  }
33
33
  }
34
-
34
+
package/src/components/StackedCard.css CHANGED
@@ -1,31 +1,31 @@
1
- .ef-stacked-frame {
2
- position: relative;
3
- padding: 2px 2px 15px;
4
- border-radius: 24px;
5
- background: var(--ef-border-gradient);
6
- box-shadow: var(--ef-stacked-frame-shadow);
7
- }
1
+ .ef-stacked-frame {
2
+ position: relative;
3
+ padding: 2px 2px 15px;
4
+ border-radius: var(--ef-stacked-frame-radius, 24px);
5
+ background: var(--ef-border-gradient);
6
+ box-shadow: var(--ef-stacked-frame-shadow);
7
+ }
8
8
 
9
9
  .ef-stacked-frame::after {
10
10
  content: "";
11
11
  position: absolute;
12
12
  left: 6px;
13
- right: 6px;
14
- bottom: -6px;
15
- height: 10px;
16
- border-radius: 999px;
17
- background: var(--ef-border-gradient);
18
- filter: blur(12px);
19
- opacity: 0.7;
20
- }
13
+ right: 6px;
14
+ bottom: -6px;
15
+ height: 10px;
16
+ border-radius: var(--ef-stacked-pill-radius, 999px);
17
+ background: var(--ef-border-gradient);
18
+ filter: blur(12px);
19
+ opacity: 0.7;
20
+ }
21
21
 
22
- .ef-stacked-card {
23
- position: relative;
24
- padding: 20px;
25
- border-radius: 22px;
26
- background: var(--ef-stacked-card-bg);
27
- overflow: hidden;
28
- box-shadow: var(--ef-stacked-card-shadow);
22
+ .ef-stacked-card {
23
+ position: relative;
24
+ padding: 20px;
25
+ border-radius: var(--ef-stacked-card-radius, 22px);
26
+ background: var(--ef-stacked-card-bg);
27
+ overflow: hidden;
28
+ box-shadow: var(--ef-stacked-card-shadow);
29
29
  min-height: 320px;
30
30
  display: flex;
31
31
  flex-direction: column;
@@ -36,29 +36,29 @@
36
36
  box-shadow: var(--ef-stacked-card-shadow-hover);
37
37
  }
38
38
 
39
- .ef-stacked-image {
40
- position: absolute;
41
- inset: 0;
42
- border-radius: 18px;
39
+ .ef-stacked-image {
40
+ position: absolute;
41
+ inset: 0;
42
+ border-radius: var(--ef-stacked-image-radius, 18px);
43
43
  background:
44
44
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16), transparent 55%),
45
45
  var(--ef-stacked-image-gradient);
46
- box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
47
- z-index: 0;
48
- }
46
+ box-shadow: var(--ef-stacked-image-inset-shadow, inset 0 0 40px rgba(0, 0, 0, 0.35));
47
+ z-index: 0;
48
+ }
49
49
 
50
50
  .ef-stacked-image-photo {
51
51
  background-repeat: no-repeat;
52
52
  }
53
53
 
54
- .ef-stacked-image::after {
55
- content: "";
56
- position: absolute;
57
- inset: 0;
58
- border-radius: 18px;
59
- background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2), transparent 55%);
60
- mix-blend-mode: screen;
61
- }
54
+ .ef-stacked-image::after {
55
+ content: "";
56
+ position: absolute;
57
+ inset: 0;
58
+ border-radius: var(--ef-stacked-image-radius, 18px);
59
+ background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2), transparent 55%);
60
+ mix-blend-mode: screen;
61
+ }
62
62
 
63
63
  .ef-stacked-body {
64
64
  position: relative;
@@ -73,18 +73,16 @@
73
73
  color: var(--text-strong);
74
74
  }
75
75
 
76
- .ef-stacked-body::before {
77
- content: "";
78
- position: absolute;
79
- inset: -40px -20px -20px;
80
- background: linear-gradient(
81
- 180deg,
82
- rgba(9, 12, 18, 0) 0%,
83
- rgba(9, 12, 18, 0.78) 55%,
84
- rgba(9, 12, 18, 0.9) 100%
85
- );
86
- z-index: -1;
87
- }
76
+ .ef-stacked-body::before {
77
+ content: "";
78
+ position: absolute;
79
+ inset: -40px -20px -20px;
80
+ background: var(
81
+ --ef-stacked-body-overlay,
82
+ linear-gradient(180deg, rgba(9, 12, 18, 0) 0%, rgba(9, 12, 18, 0.78) 55%, rgba(9, 12, 18, 0.9) 100%)
83
+ );
84
+ z-index: -1;
85
+ }
88
86
 
89
87
  .ef-stacked-body-plain {
90
88
  position: relative;
@@ -129,9 +127,9 @@
129
127
  justify-content: flex-start;
130
128
  }
131
129
 
132
- .ef-stacked-tag {
133
- padding: 8px 18px;
134
- border-radius: 8px;
130
+ .ef-stacked-tag {
131
+ padding: 8px 18px;
132
+ border-radius: var(--ef-stacked-control-radius, 8px);
135
133
  background: var(--ef-stacked-tag-bg);
136
134
  border: 2px solid transparent;
137
135
  font-size: 0.7rem;
@@ -140,10 +138,10 @@
140
138
  color: var(--ef-stacked-tag-text);
141
139
  }
142
140
 
143
- .ef-stacked-action {
144
- margin-top: 4px;
145
- padding: 12px 32px;
146
- border-radius: 8px;
141
+ .ef-stacked-action {
142
+ margin-top: 4px;
143
+ padding: 12px 32px;
144
+ border-radius: var(--ef-stacked-control-radius, 8px);
147
145
  font-weight: 600;
148
146
  font-family: inherit;
149
147
  text-transform: uppercase;
package/src/components/Tabs.css CHANGED
@@ -14,12 +14,16 @@
14
14
  display: flex;
15
15
  flex-wrap: wrap;
16
16
  gap: 10px;
17
+ }
18
+
19
+ .ef-tabs-list-panel {
17
20
  padding: 10px;
18
21
  border-radius: var(--menu-radius, 16px);
19
22
  background:
20
23
  linear-gradient(var(--ef-tabs-surface), var(--ef-tabs-surface)) padding-box,
21
24
  var(--ef-tabs-border) border-box;
22
25
  border: 1px solid transparent;
26
+ box-shadow: none;
23
27
  }
24
28
 
25
29
  .ef-tabs-list--vertical {
@@ -48,7 +52,7 @@
48
52
  margin-left: auto;
49
53
  width: 2px;
50
54
  height: 22px;
51
- border-radius: 999px;
55
+ border-radius: var(--ef-tabs-indicator-radius, 999px);
52
56
  background: var(--ef-tabs-indicator);
53
57
  }
54
58
 
@@ -57,13 +61,14 @@
57
61
  flex: 1;
58
62
  }
59
63
 
60
- .ef-tabs-content--background {
64
+ .ef-tabs-content-panel {
61
65
  border-radius: var(--menu-radius, 16px);
62
66
  padding: 12px;
63
67
  background:
64
68
  linear-gradient(var(--ef-tabs-content-surface), var(--ef-tabs-content-surface)) padding-box,
65
69
  var(--ef-tabs-content-border) border-box;
66
70
  border: 1px solid transparent;
71
+ box-shadow: none;
67
72
  }
68
73
 
69
74
  @media (max-width: 768px) {
package/src/components/Tabs.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ReactNode } from "react";
2
2
  import { Button } from "./Button";
3
+ import { Panel } from "./Panel";
3
4
 
4
5
  export type TabsItem = {
5
6
  id: string;
@@ -34,7 +35,13 @@ export const Tabs = ({
34
35
 
35
36
  return (
36
37
  <div className={["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" ")}>
37
- <div className={["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" ")}>
38
+ <Panel
39
+ variant="card"
40
+ borderWidth={1}
41
+ className={["ef-tabs-list", "ef-tabs-list-panel", isVertical ? "ef-tabs-list--vertical" : ""]
42
+ .filter(Boolean)
43
+ .join(" ")}
44
+ >
38
45
  {tabs.map((tab) => {
39
46
  const isActive = tab.id === activeTab;
40
47
  return (
@@ -53,20 +60,28 @@ export const Tabs = ({
53
60
  </Button>
54
61
  );
55
62
  })}
56
- </div>
63
+ </Panel>
57
64
 
58
65
  {(active?.content || renderTabContent) && (
59
- <div
60
- className={[
61
- "ef-tabs-content",
62
- showContentBackground ? "ef-tabs-content--background" : "",
63
- tabContentClassName,
64
- ]
65
- .filter(Boolean)
66
- .join(" ")}
67
- >
68
- {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
69
- </div>
66
+ showContentBackground ? (
67
+ <Panel
68
+ variant="card"
69
+ borderWidth={1}
70
+ className={["ef-tabs-content", "ef-tabs-content-panel", tabContentClassName]
71
+ .filter(Boolean)
72
+ .join(" ")}
73
+ >
74
+ {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
75
+ </Panel>
76
+ ) : (
77
+ <div
78
+ className={["ef-tabs-content", tabContentClassName]
79
+ .filter(Boolean)
80
+ .join(" ")}
81
+ >
82
+ {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
83
+ </div>
84
+ )
70
85
  )}
71
86
  </div>
72
87
  );
package/src/components/UserMenu.css CHANGED
@@ -260,6 +260,12 @@
260
260
  filter: brightness(1.1);
261
261
  }
262
262
 
263
+ :root[data-theme="atelier"] .avatar,
264
+ :root[data-theme="atelier"] .dropdown-avatar,
265
+ :root[data-theme="atelier"] .dropdown-action {
266
+ border-radius: 0;
267
+ }
268
+
263
269
  @media (max-width: 760px) {
264
270
  .user-button {
265
271
  gap: 8px;
package/src/variables.css CHANGED
@@ -59,6 +59,7 @@
59
59
  --ef-tabs-content-surface: #0b0c1a;
60
60
  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
61
61
  --ef-tabs-indicator: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
62
+ --ef-tabs-indicator-radius: 999px;
62
63
  --ef-slider-surface: var(--ef-surface);
63
64
  --ef-slider-border-color: var(--line-strong);
64
65
  --ef-slider-track-radius: 6px;
@@ -81,16 +82,28 @@
81
82
  --ef-input-focus: rgba(124, 77, 255, 0.55);
82
83
  --ef-input-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
83
84
  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
84
- --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
85
- --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
86
- --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
87
- --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
88
- --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
89
- --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
90
- --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
91
- --ef-stacked-image-gradient: linear-gradient(
92
- 135deg,
93
- rgba(0, 229, 255, 0.35),
85
+ --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
86
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
87
+ --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
88
+ --ef-stacked-frame-radius: 24px;
89
+ --ef-stacked-card-radius: 22px;
90
+ --ef-stacked-image-radius: 18px;
91
+ --ef-stacked-control-radius: 8px;
92
+ --ef-stacked-pill-radius: 999px;
93
+ --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
94
+ --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
95
+ --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
96
+ --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
97
+ --ef-stacked-body-overlay: linear-gradient(
98
+ 180deg,
99
+ rgba(9, 12, 18, 0) 0%,
100
+ rgba(9, 12, 18, 0.78) 55%,
101
+ rgba(9, 12, 18, 0.9) 100%
102
+ );
103
+ --ef-stacked-image-inset-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
104
+ --ef-stacked-image-gradient: linear-gradient(
105
+ 135deg,
106
+ rgba(0, 229, 255, 0.35),
94
107
  rgba(124, 77, 255, 0.35),
95
108
  rgba(255, 77, 210, 0.25)
96
109
  );
@@ -219,20 +232,27 @@
219
232
  --ef-field-label: rgba(29, 35, 42, 0.7);
220
233
  --ef-field-helper: rgba(29, 35, 42, 0.55);
221
234
  --ef-field-error: #b34a4a;
222
- --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
223
- --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
224
- --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
225
- --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
226
- --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
227
- --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
228
- --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
229
- --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
230
- --ef-stacked-image-gradient: linear-gradient(
231
- 135deg,
232
- rgba(0, 229, 255, 0.35),
233
- rgba(124, 77, 255, 0.35),
234
- rgba(255, 77, 210, 0.25)
235
- );
235
+ --ef-stacked-card-bg: rgba(255, 255, 255, 0.94);
236
+ --ef-stacked-card-shadow: 0 14px 35px rgba(24, 32, 40, 0.12);
237
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(24, 32, 40, 0.16);
238
+ --ef-stacked-frame-shadow: 0 16px 36px rgba(24, 32, 40, 0.11);
239
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.82);
240
+ --ef-stacked-tag-text: rgba(29, 35, 42, 0.78);
241
+ --ef-stacked-body-muted: rgba(29, 35, 42, 0.68);
242
+ --ef-stacked-action-shadow: 0 0 20px rgba(124, 77, 255, 0.22);
243
+ --ef-stacked-body-overlay: linear-gradient(
244
+ 180deg,
245
+ rgba(255, 255, 255, 0) 0%,
246
+ rgba(255, 255, 255, 0.72) 52%,
247
+ rgba(255, 255, 255, 0.88) 100%
248
+ );
249
+ --ef-stacked-image-inset-shadow: inset 0 0 28px rgba(24, 32, 40, 0.12);
250
+ --ef-stacked-image-gradient: linear-gradient(
251
+ 135deg,
252
+ rgba(0, 229, 255, 0.22),
253
+ rgba(124, 77, 255, 0.2),
254
+ rgba(255, 77, 210, 0.16)
255
+ );
236
256
  --text-strong: #1d232a;
237
257
  --text-soft: rgba(29, 35, 42, 0.75);
238
258
  --text-muted: rgba(29, 35, 42, 0.6);
@@ -292,7 +312,22 @@
292
312
  --ef-button-glow-pulse-duration: 1800ms;
293
313
  --ef-button-glow-surge-duration: 220ms;
294
314
  --ef-input-border: var(--ef-border-gradient);
295
- --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
315
+ --ef-stacked-card-bg: rgba(255, 255, 255, 0.96);
316
+ --ef-stacked-card-shadow: 0 10px 24px rgba(24, 32, 40, 0.08);
317
+ --ef-stacked-card-shadow-hover: 0 14px 30px rgba(24, 32, 40, 0.12);
318
+ --ef-stacked-frame-shadow: 0 10px 24px rgba(24, 32, 40, 0.08);
319
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.86);
320
+ --ef-stacked-tag-text: rgba(24, 32, 40, 0.74);
321
+ --ef-stacked-body-muted: rgba(24, 32, 40, 0.64);
322
+ --ef-stacked-action-shadow: 0 0 0 1px rgba(24, 32, 40, 0.22);
323
+ --ef-stacked-body-overlay: linear-gradient(
324
+ 180deg,
325
+ rgba(255, 255, 255, 0) 0%,
326
+ rgba(255, 255, 255, 0.75) 52%,
327
+ rgba(255, 255, 255, 0.9) 100%
328
+ );
329
+ --ef-stacked-image-inset-shadow: inset 0 0 22px rgba(24, 32, 40, 0.08);
330
+ --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.06), rgba(24, 32, 40, 0.12));
296
331
  --ef-nav-border: var(--ef-border-gradient);
297
332
  --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
298
333
  --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
@@ -328,6 +363,21 @@
328
363
  --ef-button-glow-pulse-duration: 1800ms;
329
364
  --ef-button-glow-surge-duration: 220ms;
330
365
  --ef-input-border: var(--ef-border-gradient);
366
+ --ef-stacked-card-bg: rgba(11, 12, 26, 0.94);
367
+ --ef-stacked-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
368
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.58);
369
+ --ef-stacked-frame-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
370
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.08);
371
+ --ef-stacked-tag-text: rgba(246, 245, 255, 0.78);
372
+ --ef-stacked-body-muted: rgba(246, 245, 255, 0.68);
373
+ --ef-stacked-action-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
374
+ --ef-stacked-body-overlay: linear-gradient(
375
+ 180deg,
376
+ rgba(11, 12, 26, 0) 0%,
377
+ rgba(11, 12, 26, 0.72) 55%,
378
+ rgba(11, 12, 26, 0.88) 100%
379
+ );
380
+ --ef-stacked-image-inset-shadow: inset 0 0 34px rgba(0, 0, 0, 0.34);
331
381
  --menu-line: var(--line);
332
382
  --menu-bg-soft: rgba(255, 255, 255, 0.06);
333
383
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
@@ -390,6 +440,7 @@
390
440
  --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
391
441
  --ef-button-hover-transform: translateY(-1px);
392
442
  --ef-nav-text: rgba(246, 234, 242, 0.78);
443
+ --ef-nav-radius: 0px;
393
444
  --ef-nav-text-hover: #f6eaf2;
394
445
  --ef-nav-text-active: #f6eaf2;
395
446
  --ef-nav-surface: rgba(27, 11, 24, 0.74);
@@ -405,13 +456,40 @@
405
456
  --ef-tabs-content-surface: #1b0b18;
406
457
  --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 134, 200, 0.3), rgba(226, 85, 161, 0.3), rgba(125, 214, 246, 0.3));
407
458
  --ef-tabs-indicator: linear-gradient(180deg, #ff86c8, #e255a1, #7dd6f6);
459
+ --ef-tabs-indicator-radius: 0px;
408
460
  --ef-input-surface: #1b0b18;
409
461
  --ef-input-border: var(--ef-border-gradient);
410
462
  --ef-input-text: #f6eaf2;
411
- --ef-input-placeholder: rgba(246, 234, 242, 0.6);
412
- --ef-input-focus: rgba(226, 85, 161, 0.45);
413
- --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
414
- --text-strong: #f6eaf2;
463
+ --ef-input-placeholder: rgba(246, 234, 242, 0.6);
464
+ --ef-input-focus: rgba(226, 85, 161, 0.45);
465
+ --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
466
+ --ef-stacked-card-bg: rgba(30, 12, 28, 0.94);
467
+ --ef-stacked-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.56);
468
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.66);
469
+ --ef-stacked-frame-shadow: 0 18px 40px rgba(0, 0, 0, 0.52);
470
+ --ef-stacked-frame-radius: 0px;
471
+ --ef-stacked-card-radius: 0px;
472
+ --ef-stacked-image-radius: 0px;
473
+ --ef-stacked-control-radius: 0px;
474
+ --ef-stacked-pill-radius: 0px;
475
+ --ef-stacked-tag-bg: rgba(255, 134, 200, 0.14);
476
+ --ef-stacked-tag-text: rgba(246, 234, 242, 0.82);
477
+ --ef-stacked-body-muted: rgba(246, 234, 242, 0.74);
478
+ --ef-stacked-action-shadow: 0 0 22px rgba(226, 85, 161, 0.36);
479
+ --ef-stacked-body-overlay: linear-gradient(
480
+ 180deg,
481
+ rgba(24, 9, 22, 0) 0%,
482
+ rgba(24, 9, 22, 0.74) 55%,
483
+ rgba(24, 9, 22, 0.9) 100%
484
+ );
485
+ --ef-stacked-image-inset-shadow: inset 0 0 38px rgba(6, 2, 8, 0.42);
486
+ --ef-stacked-image-gradient: linear-gradient(
487
+ 135deg,
488
+ rgba(255, 134, 200, 0.28),
489
+ rgba(226, 85, 161, 0.26),
490
+ rgba(125, 214, 246, 0.22)
491
+ );
492
+ --text-strong: #f6eaf2;
415
493
  --text-soft: rgba(246, 234, 242, 0.8);
416
494
  --text-muted: #dbc7d7;
417
495
  --card: #1b0b18;
@@ -459,9 +537,9 @@
459
537
  --menu-line: rgba(192, 59, 132, 0.5);
460
538
  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
461
539
  --menu-bg-soft: rgba(255, 134, 200, 0.12);
462
- --menu-radius: 18px;
463
- --menu-muted: #dbc7d7;
464
- }
540
+ --menu-radius: 0px;
541
+ --menu-muted: #dbc7d7;
542
+ }
465
543
 
466
544
  :root[data-theme="galaxy"] {
467
545
  --ef-slider-track-radius: 6px;
@@ -531,6 +609,27 @@ body.ef-galaxy-light {
531
609
  0 0 40px rgba(255, 77, 210, 0.22);
532
610
  --ef-button-glow-pulse-duration: 2300ms;
533
611
  --ef-button-glow-surge-duration: 380ms;
612
+ --ef-stacked-card-bg: rgba(255, 255, 255, 0.94);
613
+ --ef-stacked-card-shadow: 0 14px 35px rgba(24, 32, 40, 0.12);
614
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(24, 32, 40, 0.16);
615
+ --ef-stacked-frame-shadow: 0 16px 36px rgba(24, 32, 40, 0.11);
616
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.82);
617
+ --ef-stacked-tag-text: rgba(29, 35, 42, 0.78);
618
+ --ef-stacked-body-muted: rgba(29, 35, 42, 0.68);
619
+ --ef-stacked-action-shadow: 0 0 20px rgba(124, 77, 255, 0.22);
620
+ --ef-stacked-body-overlay: linear-gradient(
621
+ 180deg,
622
+ rgba(255, 255, 255, 0) 0%,
623
+ rgba(255, 255, 255, 0.72) 52%,
624
+ rgba(255, 255, 255, 0.88) 100%
625
+ );
626
+ --ef-stacked-image-inset-shadow: inset 0 0 28px rgba(24, 32, 40, 0.12);
627
+ --ef-stacked-image-gradient: linear-gradient(
628
+ 135deg,
629
+ rgba(0, 229, 255, 0.22),
630
+ rgba(124, 77, 255, 0.2),
631
+ rgba(255, 77, 210, 0.16)
632
+ );
534
633
  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
535
634
  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
536
635
  --ef-tabs-surface: #ffffff;