@enderfall/ui 0.2.11 → 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.
- package/package.json +1 -1
- package/src/components/StackedCard.css +40 -40
- package/src/components/Tabs.css +7 -2
- package/src/components/Tabs.tsx +28 -13
- package/src/components/UserMenu.css +6 -0
- package/src/variables.css +20 -7
package/package.json
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;
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.ef-stacked-image {
|
|
40
|
-
position: absolute;
|
|
41
|
-
inset: 0;
|
|
42
|
-
border-radius: 18px;
|
|
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);
|
|
@@ -51,14 +51,14 @@
|
|
|
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;
|
|
@@ -127,9 +127,9 @@
|
|
|
127
127
|
justify-content: flex-start;
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
.ef-stacked-tag {
|
|
131
|
-
padding: 8px 18px;
|
|
132
|
-
border-radius: 8px;
|
|
130
|
+
.ef-stacked-tag {
|
|
131
|
+
padding: 8px 18px;
|
|
132
|
+
border-radius: var(--ef-stacked-control-radius, 8px);
|
|
133
133
|
background: var(--ef-stacked-tag-bg);
|
|
134
134
|
border: 2px solid transparent;
|
|
135
135
|
font-size: 0.7rem;
|
|
@@ -138,10 +138,10 @@
|
|
|
138
138
|
color: var(--ef-stacked-tag-text);
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.ef-stacked-action {
|
|
142
|
-
margin-top: 4px;
|
|
143
|
-
padding: 12px 32px;
|
|
144
|
-
border-radius: 8px;
|
|
141
|
+
.ef-stacked-action {
|
|
142
|
+
margin-top: 4px;
|
|
143
|
+
padding: 12px 32px;
|
|
144
|
+
border-radius: var(--ef-stacked-control-radius, 8px);
|
|
145
145
|
font-weight: 600;
|
|
146
146
|
font-family: inherit;
|
|
147
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
|
|
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
|
-
<
|
|
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
|
-
</
|
|
63
|
+
</Panel>
|
|
57
64
|
|
|
58
65
|
{(active?.content || renderTabContent) && (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
tabContentClassName
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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
|
);
|
|
@@ -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,10 +82,15 @@
|
|
|
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-
|
|
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);
|
|
88
94
|
--ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
|
|
89
95
|
--ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
|
|
90
96
|
--ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
|
|
@@ -434,6 +440,7 @@
|
|
|
434
440
|
--ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
|
|
435
441
|
--ef-button-hover-transform: translateY(-1px);
|
|
436
442
|
--ef-nav-text: rgba(246, 234, 242, 0.78);
|
|
443
|
+
--ef-nav-radius: 0px;
|
|
437
444
|
--ef-nav-text-hover: #f6eaf2;
|
|
438
445
|
--ef-nav-text-active: #f6eaf2;
|
|
439
446
|
--ef-nav-surface: rgba(27, 11, 24, 0.74);
|
|
@@ -449,6 +456,7 @@
|
|
|
449
456
|
--ef-tabs-content-surface: #1b0b18;
|
|
450
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));
|
|
451
458
|
--ef-tabs-indicator: linear-gradient(180deg, #ff86c8, #e255a1, #7dd6f6);
|
|
459
|
+
--ef-tabs-indicator-radius: 0px;
|
|
452
460
|
--ef-input-surface: #1b0b18;
|
|
453
461
|
--ef-input-border: var(--ef-border-gradient);
|
|
454
462
|
--ef-input-text: #f6eaf2;
|
|
@@ -459,6 +467,11 @@
|
|
|
459
467
|
--ef-stacked-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.56);
|
|
460
468
|
--ef-stacked-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.66);
|
|
461
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;
|
|
462
475
|
--ef-stacked-tag-bg: rgba(255, 134, 200, 0.14);
|
|
463
476
|
--ef-stacked-tag-text: rgba(246, 234, 242, 0.82);
|
|
464
477
|
--ef-stacked-body-muted: rgba(246, 234, 242, 0.74);
|
|
@@ -524,9 +537,9 @@
|
|
|
524
537
|
--menu-line: rgba(192, 59, 132, 0.5);
|
|
525
538
|
--menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
|
|
526
539
|
--menu-bg-soft: rgba(255, 134, 200, 0.12);
|
|
527
|
-
--menu-radius:
|
|
528
|
-
--menu-muted: #dbc7d7;
|
|
529
|
-
}
|
|
540
|
+
--menu-radius: 0px;
|
|
541
|
+
--menu-muted: #dbc7d7;
|
|
542
|
+
}
|
|
530
543
|
|
|
531
544
|
:root[data-theme="galaxy"] {
|
|
532
545
|
--ef-slider-track-radius: 6px;
|