@umituz/web-dashboard 4.7.1 → 5.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.
- package/README.md +63 -88
- package/package.json +5 -7
- package/src/domains/analytics/components/AnalyticsCard.tsx +1 -6
- package/src/domains/analytics/components/AnalyticsChart.tsx +2 -14
- package/src/domains/analytics/components/AnalyticsLayout.tsx +3 -17
- package/src/domains/analytics/components/MetricCard.tsx +1 -6
- package/src/domains/analytics/utils/i18nKeys.ts +0 -9
- package/src/domains/auth/components/AuthLayout.tsx +1 -26
- package/src/domains/auth/components/ForgotPasswordForm.tsx +2 -14
- package/src/domains/auth/components/LoginForm.tsx +2 -15
- package/src/domains/auth/components/RegisterForm.tsx +3 -14
- package/src/domains/auth/components/ResetPasswordForm.tsx +3 -14
- package/src/domains/auth/components/shared/AuthErrorBanner.tsx +1 -11
- package/src/domains/auth/components/shared/EmailInput.tsx +2 -20
- package/src/domains/auth/components/shared/PasswordInput.tsx +3 -22
- package/src/domains/auth/components/shared/PasswordStrengthIndicator.tsx +1 -13
- package/src/domains/auth/components/shared/SocialLoginButtons.tsx +1 -15
- package/src/domains/auth/utils/i18nKeys.ts +0 -18
- package/src/domains/charts/components.tsx +2 -2
- package/src/domains/layouts/components/BrandLogo.tsx +7 -22
- package/src/domains/layouts/components/DashboardHeader.tsx +2 -23
- package/src/domains/layouts/components/DashboardLayout.tsx +2 -39
- package/src/domains/layouts/components/DashboardSidebar.tsx +3 -21
- package/src/domains/permissions/PermissionsContext.tsx +1 -17
- package/src/domains/permissions/utils/i18nKeys.ts +0 -5
- package/src/domains/session/DemoLogin.tsx +2 -10
- package/src/domains/session/OrgSwitcher.tsx +2 -10
- package/src/domains/settings/components/AuditLogList.tsx +1 -10
- package/src/domains/settings/components/PermissionMatrixScreen.tsx +1 -8
- package/src/domains/settings/components/SettingsLayout.tsx +1 -21
- package/src/domains/settings/components/SettingsSection.tsx +1 -13
- package/src/domains/settings/components/UserManagementTable.tsx +1 -8
- package/src/domains/settings/utils/i18nKeys.ts +0 -6
- package/src/index.ts +0 -17
- package/src/styles/dashboard.contract.test.ts +42 -0
- package/src/styles/dashboard.css +492 -920
- package/src/i18n/I18nContext.tsx +0 -33
- package/src/i18n/defaultT.test.ts +0 -43
- package/src/i18n/defaultT.ts +0 -34
- package/src/i18n/index.ts +0 -7
- package/src/i18n/types.ts +0 -13
- package/src/primitives/Button.tsx +0 -24
- package/src/primitives/Checkbox.tsx +0 -17
- package/src/primitives/Input.tsx +0 -23
- package/src/primitives/Skeleton.tsx +0 -6
- package/src/primitives/cn.ts +0 -10
- package/src/primitives/index.ts +0 -23
- package/src/styles/tokens.contract.test.ts +0 -91
- package/src/styles/tokens.css +0 -116
package/src/styles/dashboard.css
CHANGED
|
@@ -1,27 +1,34 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @umituz/web-dashboard — component stylesheet (udb-* BEM)
|
|
3
|
-
*
|
|
4
|
-
* Camp-agnostic by construction:
|
|
5
|
-
* - Every rule sets its own box-sizing / background / border explicitly,
|
|
6
|
-
* so a host's Tailwind preflight (or any other reset) cannot leak in.
|
|
7
|
-
* - Load order still matters with resets that use `*` selectors: import
|
|
8
|
-
* this file AFTER your base layer.
|
|
9
|
-
* - Colors, spacing and typography come exclusively from the `--u-*`
|
|
10
|
-
* tokens (see `tokens.css`); override them for theming and dark mode.
|
|
11
|
-
*
|
|
12
|
-
* Sections:
|
|
13
|
-
* 1. Scope & reset 5. Header/menus 9. Settings
|
|
14
|
-
* 2. Layout helpers 6. Auth 10. Analytics
|
|
15
|
-
* 3. App shell 7. Forms (auth) 11. Shared blocks
|
|
16
|
-
* 4. Sidebar
|
|
17
|
-
*/
|
|
18
1
|
|
|
19
2
|
@import "@umituz/web-design-system/styles.css";
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
3
|
+
:root {
|
|
4
|
+
--udb-font-size-xs: 11px;
|
|
5
|
+
--udb-font-size-sm: 12px;
|
|
6
|
+
--udb-font-size-md: 14px;
|
|
7
|
+
--udb-font-size-lg: 16px;
|
|
8
|
+
--udb-font-size-xl: 20px;
|
|
9
|
+
--udb-font-size-2xl: 24px;
|
|
10
|
+
--udb-font-size-3xl: 30px;
|
|
11
|
+
--udb-font-size-4xl: 36px;
|
|
12
|
+
--udb-space-1: 4px;
|
|
13
|
+
--udb-space-2: 8px;
|
|
14
|
+
--udb-space-3: 12px;
|
|
15
|
+
--udb-space-4: 16px;
|
|
16
|
+
--udb-space-5: 20px;
|
|
17
|
+
--udb-space-6: 24px;
|
|
18
|
+
--udb-space-7: 32px;
|
|
19
|
+
--udb-space-8: 40px;
|
|
20
|
+
--udb-radius-pill: 9999px;
|
|
21
|
+
--udb-border-strong: #cbd5e1;
|
|
22
|
+
--udb-sidebar-width: 240px;
|
|
23
|
+
--udb-sidebar-width-collapsed: 64px;
|
|
24
|
+
--udb-header-height: 56px;
|
|
25
|
+
--udb-sidebar-bg: var(--color-card);
|
|
26
|
+
--udb-sidebar-text: var(--color-foreground);
|
|
27
|
+
--udb-sidebar-muted: var(--color-muted-foreground);
|
|
28
|
+
--udb-sidebar-border: var(--color-border);
|
|
29
|
+
--udb-sidebar-accent: var(--color-muted);
|
|
30
|
+
--udb-sidebar-accent-text: var(--color-foreground);
|
|
31
|
+
}
|
|
25
32
|
|
|
26
33
|
.udb-root,
|
|
27
34
|
.udb-root *,
|
|
@@ -29,17 +36,14 @@
|
|
|
29
36
|
.udb-root *::after {
|
|
30
37
|
box-sizing: border-box;
|
|
31
38
|
}
|
|
32
|
-
|
|
33
39
|
.udb-root {
|
|
34
|
-
font-family: var(--
|
|
35
|
-
color: var(--
|
|
36
|
-
background: var(--
|
|
37
|
-
font-size: var(--
|
|
40
|
+
font-family: var(--font-sans);
|
|
41
|
+
color: var(--color-foreground);
|
|
42
|
+
background: var(--color-background);
|
|
43
|
+
font-size: var(--udb-font-size-md);
|
|
38
44
|
line-height: 1.5;
|
|
39
45
|
-webkit-font-smoothing: antialiased;
|
|
40
46
|
}
|
|
41
|
-
|
|
42
|
-
/* Screen-reader-only helper (replaces utility-framework sr-only). */
|
|
43
47
|
.udb-sr-only {
|
|
44
48
|
position: absolute;
|
|
45
49
|
width: 1px;
|
|
@@ -51,84 +55,64 @@
|
|
|
51
55
|
white-space: nowrap;
|
|
52
56
|
border: 0;
|
|
53
57
|
}
|
|
54
|
-
|
|
55
|
-
/* ============================================================
|
|
56
|
-
* 2. Layout helpers
|
|
57
|
-
* ============================================================ */
|
|
58
|
-
|
|
59
58
|
.udb-stack {
|
|
60
59
|
display: flex;
|
|
61
60
|
flex-direction: column;
|
|
62
|
-
gap: var(--
|
|
61
|
+
gap: var(--udb-space-5);
|
|
63
62
|
}
|
|
64
|
-
|
|
65
63
|
.udb-row {
|
|
66
64
|
display: flex;
|
|
67
65
|
align-items: center;
|
|
68
66
|
}
|
|
69
|
-
|
|
70
67
|
.udb-grid {
|
|
71
68
|
display: grid;
|
|
72
|
-
gap: var(--
|
|
69
|
+
gap: var(--udb-space-5);
|
|
73
70
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
74
71
|
}
|
|
75
|
-
|
|
76
72
|
.udb-card--sm {
|
|
77
|
-
padding: var(--
|
|
73
|
+
padding: var(--udb-space-4);
|
|
78
74
|
}
|
|
79
|
-
|
|
80
75
|
.udb-card--lg {
|
|
81
|
-
padding: var(--
|
|
76
|
+
padding: var(--udb-space-8);
|
|
82
77
|
}
|
|
83
|
-
|
|
84
|
-
/* ============================================================
|
|
85
|
-
* 3. App shell
|
|
86
|
-
* ============================================================ */
|
|
87
|
-
|
|
88
78
|
.udb-layout {
|
|
89
79
|
display: flex;
|
|
90
80
|
height: 100vh;
|
|
91
81
|
width: 100%;
|
|
92
82
|
overflow: hidden;
|
|
93
83
|
}
|
|
94
|
-
|
|
95
84
|
.udb-layout__sidebar {
|
|
96
85
|
display: none;
|
|
97
86
|
flex-direction: column;
|
|
98
87
|
flex-shrink: 0;
|
|
99
|
-
width: var(--
|
|
100
|
-
border-right: 1px solid var(--
|
|
101
|
-
background: var(--
|
|
88
|
+
width: var(--udb-sidebar-width);
|
|
89
|
+
border-right: 1px solid var(--udb-sidebar-border);
|
|
90
|
+
background: var(--udb-sidebar-bg);
|
|
102
91
|
transition: width 0.3s ease;
|
|
103
92
|
}
|
|
104
|
-
|
|
105
93
|
.udb-layout__sidebar--collapsed {
|
|
106
|
-
width: var(--
|
|
94
|
+
width: var(--udb-sidebar-width-collapsed);
|
|
107
95
|
}
|
|
108
|
-
|
|
109
96
|
.udb-layout__mobile {
|
|
110
97
|
position: fixed;
|
|
111
98
|
inset: 0;
|
|
112
99
|
z-index: 50;
|
|
113
100
|
}
|
|
114
|
-
|
|
115
101
|
.udb-layout__backdrop {
|
|
116
102
|
position: absolute;
|
|
117
103
|
inset: 0;
|
|
118
104
|
background: rgba(15, 23, 42, 0.45);
|
|
119
105
|
}
|
|
120
|
-
|
|
121
106
|
.udb-layout__mobile-sidebar {
|
|
122
107
|
position: absolute;
|
|
123
108
|
left: 0;
|
|
124
109
|
top: 0;
|
|
125
110
|
height: 100%;
|
|
126
|
-
width: var(--
|
|
127
|
-
border-right: 1px solid var(--
|
|
128
|
-
background: var(--
|
|
129
|
-
box-shadow: var(--
|
|
111
|
+
width: var(--udb-sidebar-width);
|
|
112
|
+
border-right: 1px solid var(--udb-sidebar-border);
|
|
113
|
+
background: var(--udb-sidebar-bg);
|
|
114
|
+
box-shadow: var(--shadow-lg);
|
|
130
115
|
}
|
|
131
|
-
|
|
132
116
|
.udb-layout__main {
|
|
133
117
|
display: flex;
|
|
134
118
|
flex: 1;
|
|
@@ -136,121 +120,98 @@
|
|
|
136
120
|
overflow: hidden;
|
|
137
121
|
min-width: 0;
|
|
138
122
|
}
|
|
139
|
-
|
|
140
123
|
.udb-layout__content {
|
|
141
124
|
flex: 1;
|
|
142
125
|
overflow-y: auto;
|
|
143
|
-
padding: var(--
|
|
126
|
+
padding: var(--udb-space-4);
|
|
144
127
|
}
|
|
145
|
-
|
|
146
|
-
/* Full desktop behavior from 768px up. */
|
|
147
128
|
@media (min-width: 768px) {
|
|
148
129
|
.udb-layout__sidebar {
|
|
149
130
|
display: flex;
|
|
150
131
|
}
|
|
151
|
-
|
|
152
132
|
.udb-layout__content {
|
|
153
|
-
padding: var(--
|
|
133
|
+
padding: var(--udb-space-7);
|
|
154
134
|
}
|
|
155
135
|
}
|
|
156
|
-
|
|
157
|
-
/* Route-transition skeleton page. */
|
|
158
136
|
.udb-page-skeleton {
|
|
159
137
|
margin: 0 auto;
|
|
160
138
|
width: 100%;
|
|
161
139
|
max-width: 1280px;
|
|
162
140
|
display: flex;
|
|
163
141
|
flex-direction: column;
|
|
164
|
-
gap: var(--
|
|
142
|
+
gap: var(--udb-space-6);
|
|
165
143
|
}
|
|
166
|
-
|
|
167
144
|
.udb-skeleton--title {
|
|
168
145
|
height: 32px;
|
|
169
146
|
width: 33%;
|
|
170
|
-
border-radius: var(--
|
|
147
|
+
border-radius: var(--radius-lg);
|
|
171
148
|
}
|
|
172
|
-
|
|
173
149
|
.udb-skeleton-grid {
|
|
174
150
|
display: grid;
|
|
175
|
-
gap: var(--
|
|
151
|
+
gap: var(--udb-space-4);
|
|
176
152
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
177
153
|
}
|
|
178
|
-
|
|
179
154
|
.udb-skeleton--card {
|
|
180
155
|
height: 112px;
|
|
181
|
-
border-radius: var(--
|
|
156
|
+
border-radius: var(--radius-xl);
|
|
182
157
|
}
|
|
183
|
-
|
|
184
158
|
.udb-skeleton--section {
|
|
185
159
|
height: 256px;
|
|
186
|
-
border-radius: var(--
|
|
160
|
+
border-radius: var(--radius-xl);
|
|
187
161
|
}
|
|
188
|
-
|
|
189
|
-
/* ============================================================
|
|
190
|
-
* 4. Sidebar
|
|
191
|
-
* ============================================================ */
|
|
192
|
-
|
|
193
162
|
.udb-sidebar {
|
|
194
163
|
display: flex;
|
|
195
164
|
flex-direction: column;
|
|
196
165
|
height: 100%;
|
|
197
166
|
width: 100%;
|
|
198
|
-
color: var(--
|
|
167
|
+
color: var(--udb-sidebar-text);
|
|
199
168
|
}
|
|
200
|
-
|
|
201
169
|
.udb-sidebar__brand {
|
|
202
170
|
display: flex;
|
|
203
|
-
height: var(--
|
|
171
|
+
height: var(--udb-header-height);
|
|
204
172
|
align-items: center;
|
|
205
|
-
gap: var(--
|
|
206
|
-
border-bottom: 1px solid var(--
|
|
207
|
-
padding: 0 var(--
|
|
173
|
+
gap: var(--udb-space-3);
|
|
174
|
+
border-bottom: 1px solid var(--udb-sidebar-border);
|
|
175
|
+
padding: 0 var(--udb-space-4);
|
|
208
176
|
}
|
|
209
|
-
|
|
210
177
|
.udb-brand-logo {
|
|
211
178
|
flex-shrink: 0;
|
|
212
179
|
}
|
|
213
|
-
|
|
214
180
|
.udb-sidebar__brand-text {
|
|
215
181
|
display: flex;
|
|
216
182
|
flex-direction: column;
|
|
217
183
|
min-width: 0;
|
|
218
184
|
}
|
|
219
|
-
|
|
220
185
|
.udb-sidebar__brand-name {
|
|
221
|
-
font-size: var(--
|
|
186
|
+
font-size: var(--udb-font-size-2xl);
|
|
222
187
|
font-weight: 900;
|
|
223
188
|
letter-spacing: -0.04em;
|
|
224
189
|
line-height: 1;
|
|
225
|
-
color: var(--
|
|
190
|
+
color: var(--udb-sidebar-text);
|
|
226
191
|
}
|
|
227
|
-
|
|
228
192
|
.udb-sidebar__brand-tagline {
|
|
229
|
-
margin-top: var(--
|
|
230
|
-
margin-left: var(--
|
|
231
|
-
font-size: var(--
|
|
232
|
-
font-weight: var(--
|
|
193
|
+
margin-top: var(--udb-space-2);
|
|
194
|
+
margin-left: var(--udb-space-1);
|
|
195
|
+
font-size: var(--udb-font-size-xs);
|
|
196
|
+
font-weight: var(--font-weight-bold);
|
|
233
197
|
text-transform: lowercase;
|
|
234
198
|
letter-spacing: -0.02em;
|
|
235
|
-
color: var(--
|
|
199
|
+
color: var(--color-primary);
|
|
236
200
|
opacity: 0.75;
|
|
237
201
|
user-select: none;
|
|
238
202
|
}
|
|
239
|
-
|
|
240
203
|
.udb-sidebar__create {
|
|
241
|
-
padding: var(--
|
|
242
|
-
border-bottom: 1px solid var(--
|
|
204
|
+
padding: var(--udb-space-4) var(--udb-space-3);
|
|
205
|
+
border-bottom: 1px solid var(--udb-sidebar-border);
|
|
243
206
|
}
|
|
244
|
-
|
|
245
207
|
.udb-sidebar__create-btn {
|
|
246
208
|
width: 100%;
|
|
247
209
|
height: 44px;
|
|
248
210
|
justify-content: flex-start;
|
|
249
|
-
padding: 0 var(--
|
|
250
|
-
border-radius: var(--
|
|
251
|
-
box-shadow: var(--
|
|
211
|
+
padding: 0 var(--udb-space-4);
|
|
212
|
+
border-radius: var(--radius-lg);
|
|
213
|
+
box-shadow: var(--shadow-md);
|
|
252
214
|
}
|
|
253
|
-
|
|
254
215
|
.udb-sidebar__create-btn--collapsed {
|
|
255
216
|
width: 40px;
|
|
256
217
|
height: 40px;
|
|
@@ -258,226 +219,188 @@
|
|
|
258
219
|
margin: 0 auto;
|
|
259
220
|
justify-content: center;
|
|
260
221
|
}
|
|
261
|
-
|
|
262
222
|
.udb-sidebar__create-icon {
|
|
263
223
|
width: 16px;
|
|
264
224
|
height: 16px;
|
|
265
225
|
flex-shrink: 0;
|
|
266
226
|
}
|
|
267
|
-
|
|
268
227
|
.udb-sidebar__create-label {
|
|
269
|
-
font-weight: var(--
|
|
228
|
+
font-weight: var(--font-weight-bold);
|
|
270
229
|
letter-spacing: -0.02em;
|
|
271
230
|
}
|
|
272
|
-
|
|
273
231
|
.udb-sidebar__nav {
|
|
274
232
|
flex: 1;
|
|
275
233
|
overflow-y: auto;
|
|
276
|
-
padding: var(--
|
|
234
|
+
padding: var(--udb-space-3) var(--udb-space-2);
|
|
277
235
|
}
|
|
278
|
-
|
|
279
236
|
.udb-sidebar__groups {
|
|
280
237
|
display: flex;
|
|
281
238
|
flex-direction: column;
|
|
282
|
-
gap: var(--
|
|
239
|
+
gap: var(--udb-space-6);
|
|
283
240
|
}
|
|
284
|
-
|
|
285
241
|
.udb-sidebar__group {
|
|
286
242
|
display: flex;
|
|
287
243
|
flex-direction: column;
|
|
288
|
-
gap: var(--
|
|
244
|
+
gap: var(--udb-space-1);
|
|
289
245
|
}
|
|
290
|
-
|
|
291
246
|
.udb-sidebar__group-toggle {
|
|
292
247
|
display: flex;
|
|
293
248
|
width: 100%;
|
|
294
249
|
align-items: center;
|
|
295
250
|
justify-content: space-between;
|
|
296
|
-
margin-bottom: var(--
|
|
297
|
-
padding: var(--
|
|
251
|
+
margin-bottom: var(--udb-space-1);
|
|
252
|
+
padding: var(--udb-space-2) var(--udb-space-3);
|
|
298
253
|
border: none;
|
|
299
|
-
border-radius: var(--
|
|
254
|
+
border-radius: var(--radius-md);
|
|
300
255
|
background: transparent;
|
|
301
256
|
cursor: pointer;
|
|
302
257
|
}
|
|
303
|
-
|
|
304
258
|
.udb-sidebar__group-toggle:hover {
|
|
305
|
-
background: var(--
|
|
259
|
+
background: var(--udb-sidebar-accent);
|
|
306
260
|
}
|
|
307
|
-
|
|
308
261
|
.udb-sidebar__group-title {
|
|
309
262
|
font-size: 10px;
|
|
310
|
-
font-weight: var(--
|
|
263
|
+
font-weight: var(--font-weight-bold);
|
|
311
264
|
text-transform: uppercase;
|
|
312
265
|
letter-spacing: 0.12em;
|
|
313
|
-
color: var(--
|
|
266
|
+
color: var(--udb-sidebar-muted);
|
|
314
267
|
opacity: 0.75;
|
|
315
268
|
}
|
|
316
|
-
|
|
317
269
|
.udb-sidebar__group-chevron {
|
|
318
270
|
display: flex;
|
|
319
271
|
flex-shrink: 0;
|
|
320
272
|
}
|
|
321
|
-
|
|
322
273
|
.udb-sidebar__chevron-icon {
|
|
323
274
|
width: 14px;
|
|
324
275
|
height: 14px;
|
|
325
|
-
color: var(--
|
|
276
|
+
color: var(--udb-sidebar-muted);
|
|
326
277
|
}
|
|
327
|
-
|
|
328
278
|
.udb-sidebar__item {
|
|
329
279
|
display: flex;
|
|
330
280
|
align-items: center;
|
|
331
|
-
gap: var(--
|
|
332
|
-
padding: 10px var(--
|
|
333
|
-
border-radius: var(--
|
|
334
|
-
font-size: var(--
|
|
335
|
-
font-weight: var(--
|
|
336
|
-
color: var(--
|
|
281
|
+
gap: var(--udb-space-3);
|
|
282
|
+
padding: 10px var(--udb-space-3);
|
|
283
|
+
border-radius: var(--radius-md);
|
|
284
|
+
font-size: var(--udb-font-size-md);
|
|
285
|
+
font-weight: var(--font-weight-medium);
|
|
286
|
+
color: var(--udb-sidebar-text);
|
|
337
287
|
opacity: 0.75;
|
|
338
288
|
text-decoration: none;
|
|
339
289
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
340
290
|
}
|
|
341
|
-
|
|
342
291
|
.udb-sidebar__item:hover {
|
|
343
|
-
background: var(--
|
|
344
|
-
color: var(--
|
|
292
|
+
background: var(--udb-sidebar-accent);
|
|
293
|
+
color: var(--udb-sidebar-accent-text);
|
|
345
294
|
opacity: 1;
|
|
346
295
|
}
|
|
347
|
-
|
|
348
296
|
.udb-sidebar__item--active {
|
|
349
|
-
background: var(--
|
|
350
|
-
color: var(--
|
|
297
|
+
background: var(--udb-sidebar-accent);
|
|
298
|
+
color: var(--udb-sidebar-accent-text);
|
|
351
299
|
opacity: 1;
|
|
352
|
-
box-shadow: var(--
|
|
300
|
+
box-shadow: var(--shadow-sm);
|
|
353
301
|
}
|
|
354
|
-
|
|
355
302
|
.udb-sidebar__item-icon {
|
|
356
303
|
width: 16px;
|
|
357
304
|
height: 16px;
|
|
358
305
|
flex-shrink: 0;
|
|
359
306
|
}
|
|
360
|
-
|
|
361
307
|
.udb-sidebar--collapsed .udb-sidebar__item {
|
|
362
308
|
justify-content: center;
|
|
363
309
|
}
|
|
364
|
-
|
|
365
310
|
.udb-sidebar--collapsed .udb-sidebar__brand,
|
|
366
311
|
.udb-sidebar--collapsed .udb-sidebar__create {
|
|
367
312
|
justify-content: center;
|
|
368
313
|
padding-left: 0;
|
|
369
314
|
padding-right: 0;
|
|
370
315
|
}
|
|
371
|
-
|
|
372
316
|
.udb-sidebar__footer {
|
|
373
|
-
border-top: 1px solid var(--
|
|
374
|
-
padding: var(--
|
|
317
|
+
border-top: 1px solid var(--udb-sidebar-border);
|
|
318
|
+
padding: var(--udb-space-3);
|
|
375
319
|
display: flex;
|
|
376
320
|
align-items: center;
|
|
377
321
|
justify-content: space-between;
|
|
378
322
|
}
|
|
379
|
-
|
|
380
323
|
.udb-sidebar--collapsed .udb-sidebar__footer {
|
|
381
324
|
justify-content: center;
|
|
382
325
|
}
|
|
383
|
-
|
|
384
326
|
.udb-sidebar__footer-label {
|
|
385
|
-
padding: 0 var(--
|
|
327
|
+
padding: 0 var(--udb-space-2);
|
|
386
328
|
font-size: 10px;
|
|
387
|
-
font-weight: var(--
|
|
329
|
+
font-weight: var(--font-weight-bold);
|
|
388
330
|
text-transform: uppercase;
|
|
389
331
|
letter-spacing: 0.1em;
|
|
390
|
-
color: var(--
|
|
332
|
+
color: var(--udb-sidebar-muted);
|
|
391
333
|
}
|
|
392
|
-
|
|
393
334
|
.udb-sidebar__footer-btn {
|
|
394
|
-
color: var(--
|
|
335
|
+
color: var(--udb-sidebar-text);
|
|
395
336
|
}
|
|
396
|
-
|
|
397
337
|
.udb-sidebar__footer-icon {
|
|
398
338
|
width: 16px;
|
|
399
339
|
height: 16px;
|
|
400
340
|
}
|
|
401
|
-
|
|
402
|
-
/* ============================================================
|
|
403
|
-
* 5. Header / menus / notifications / profile
|
|
404
|
-
* ============================================================ */
|
|
405
|
-
|
|
406
341
|
.udb-header {
|
|
407
342
|
display: flex;
|
|
408
|
-
height: var(--
|
|
343
|
+
height: var(--udb-header-height);
|
|
409
344
|
align-items: center;
|
|
410
345
|
justify-content: space-between;
|
|
411
346
|
flex-shrink: 0;
|
|
412
|
-
gap: var(--
|
|
413
|
-
border-bottom: 1px solid var(--
|
|
414
|
-
background: var(--
|
|
415
|
-
padding: 0 var(--
|
|
347
|
+
gap: var(--udb-space-3);
|
|
348
|
+
border-bottom: 1px solid var(--color-border);
|
|
349
|
+
background: var(--color-card);
|
|
350
|
+
padding: 0 var(--udb-space-4);
|
|
416
351
|
z-index: 30;
|
|
417
352
|
}
|
|
418
|
-
|
|
419
353
|
.udb-header__lead {
|
|
420
354
|
display: flex;
|
|
421
355
|
align-items: center;
|
|
422
|
-
gap: var(--
|
|
356
|
+
gap: var(--udb-space-3);
|
|
423
357
|
min-width: 0;
|
|
424
358
|
}
|
|
425
|
-
|
|
426
359
|
.udb-header__title {
|
|
427
360
|
margin: 0;
|
|
428
|
-
font-size: var(--
|
|
361
|
+
font-size: var(--udb-font-size-md);
|
|
429
362
|
font-weight: 600;
|
|
430
|
-
color: var(--
|
|
363
|
+
color: var(--color-foreground);
|
|
431
364
|
overflow: hidden;
|
|
432
365
|
text-overflow: ellipsis;
|
|
433
366
|
white-space: nowrap;
|
|
434
367
|
}
|
|
435
|
-
|
|
436
368
|
.udb-header__mobile-toggle {
|
|
437
369
|
display: inline-flex;
|
|
438
370
|
}
|
|
439
|
-
|
|
440
371
|
.udb-header__desktop-toggle {
|
|
441
372
|
display: none;
|
|
442
373
|
}
|
|
443
|
-
|
|
444
374
|
@media (min-width: 768px) {
|
|
445
375
|
.udb-header__mobile-toggle {
|
|
446
376
|
display: none;
|
|
447
377
|
}
|
|
448
|
-
|
|
449
378
|
.udb-header__desktop-toggle {
|
|
450
379
|
display: inline-flex;
|
|
451
380
|
}
|
|
452
381
|
}
|
|
453
|
-
|
|
454
382
|
.udb-header__actions {
|
|
455
383
|
display: flex;
|
|
456
384
|
align-items: center;
|
|
457
|
-
gap: var(--
|
|
385
|
+
gap: var(--udb-space-2);
|
|
458
386
|
}
|
|
459
|
-
|
|
460
387
|
.udb-header__icon-btn {
|
|
461
388
|
height: 36px;
|
|
462
389
|
width: 36px;
|
|
463
|
-
color: var(--
|
|
390
|
+
color: var(--color-muted-foreground);
|
|
464
391
|
}
|
|
465
|
-
|
|
466
392
|
.udb-header__icon {
|
|
467
393
|
width: 16px;
|
|
468
394
|
height: 16px;
|
|
469
395
|
}
|
|
470
|
-
|
|
471
396
|
.udb-header__toggle-icon {
|
|
472
397
|
width: 20px;
|
|
473
398
|
height: 20px;
|
|
474
399
|
}
|
|
475
|
-
|
|
476
400
|
.udb-header__anchor {
|
|
477
401
|
position: relative;
|
|
478
402
|
display: inline-flex;
|
|
479
403
|
}
|
|
480
|
-
|
|
481
404
|
.udb-header__unread {
|
|
482
405
|
position: absolute;
|
|
483
406
|
top: 6px;
|
|
@@ -486,25 +409,22 @@
|
|
|
486
409
|
width: 8px;
|
|
487
410
|
height: 8px;
|
|
488
411
|
}
|
|
489
|
-
|
|
490
412
|
.udb-header__unread-core {
|
|
491
413
|
position: relative;
|
|
492
414
|
display: inline-flex;
|
|
493
415
|
width: 8px;
|
|
494
416
|
height: 8px;
|
|
495
417
|
border-radius: 50%;
|
|
496
|
-
background: var(--
|
|
418
|
+
background: var(--color-destructive);
|
|
497
419
|
}
|
|
498
|
-
|
|
499
420
|
.udb-header__unread-core::before {
|
|
500
421
|
content: "";
|
|
501
422
|
position: absolute;
|
|
502
423
|
inset: 0;
|
|
503
424
|
border-radius: 50%;
|
|
504
|
-
background: var(--
|
|
425
|
+
background: var(--color-destructive);
|
|
505
426
|
animation: udb-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
506
427
|
}
|
|
507
|
-
|
|
508
428
|
@keyframes udb-ping {
|
|
509
429
|
0% {
|
|
510
430
|
transform: scale(1);
|
|
@@ -516,36 +436,30 @@
|
|
|
516
436
|
opacity: 0;
|
|
517
437
|
}
|
|
518
438
|
}
|
|
519
|
-
|
|
520
439
|
.udb-header__divider {
|
|
521
440
|
width: 1px;
|
|
522
441
|
height: 24px;
|
|
523
|
-
margin: 0 var(--
|
|
524
|
-
background: var(--
|
|
442
|
+
margin: 0 var(--udb-space-1);
|
|
443
|
+
background: var(--color-border);
|
|
525
444
|
}
|
|
526
|
-
|
|
527
|
-
/* Click-outside layer for popover menus. */
|
|
528
445
|
.udb-overlay {
|
|
529
446
|
position: fixed;
|
|
530
447
|
inset: 0;
|
|
531
448
|
z-index: 40;
|
|
532
449
|
}
|
|
533
|
-
|
|
534
|
-
/* Generic popover menu. */
|
|
535
450
|
.udb-menu {
|
|
536
451
|
position: absolute;
|
|
537
452
|
top: 48px;
|
|
538
453
|
right: 0;
|
|
539
454
|
min-width: 224px;
|
|
540
|
-
background: var(--
|
|
541
|
-
border: 1px solid var(--
|
|
542
|
-
border-radius: var(--
|
|
543
|
-
box-shadow: var(--
|
|
455
|
+
background: var(--color-card);
|
|
456
|
+
border: 1px solid var(--color-border);
|
|
457
|
+
border-radius: var(--radius-lg);
|
|
458
|
+
box-shadow: var(--shadow-lg);
|
|
544
459
|
overflow: hidden;
|
|
545
460
|
z-index: 50;
|
|
546
461
|
animation: udb-pop 0.18s ease;
|
|
547
462
|
}
|
|
548
|
-
|
|
549
463
|
@keyframes udb-pop {
|
|
550
464
|
from {
|
|
551
465
|
opacity: 0;
|
|
@@ -556,204 +470,172 @@
|
|
|
556
470
|
transform: none;
|
|
557
471
|
}
|
|
558
472
|
}
|
|
559
|
-
|
|
560
473
|
.udb-menu__header {
|
|
561
474
|
display: flex;
|
|
562
475
|
align-items: center;
|
|
563
476
|
justify-content: space-between;
|
|
564
|
-
padding: var(--
|
|
565
|
-
border-bottom: 1px solid var(--
|
|
566
|
-
background: var(--
|
|
477
|
+
padding: var(--udb-space-3) var(--udb-space-4);
|
|
478
|
+
border-bottom: 1px solid var(--color-border);
|
|
479
|
+
background: var(--color-muted);
|
|
567
480
|
}
|
|
568
|
-
|
|
569
481
|
.udb-menu__heading {
|
|
570
482
|
margin: 0;
|
|
571
|
-
font-size: var(--
|
|
572
|
-
font-weight: var(--
|
|
483
|
+
font-size: var(--udb-font-size-sm);
|
|
484
|
+
font-weight: var(--font-weight-bold);
|
|
573
485
|
text-transform: uppercase;
|
|
574
486
|
letter-spacing: 0.08em;
|
|
575
|
-
color: var(--
|
|
487
|
+
color: var(--color-foreground);
|
|
576
488
|
}
|
|
577
|
-
|
|
578
489
|
.udb-menu__action {
|
|
579
490
|
border: none;
|
|
580
491
|
background: transparent;
|
|
581
492
|
padding: 0;
|
|
582
493
|
font-size: 10px;
|
|
583
|
-
font-weight: var(--
|
|
494
|
+
font-weight: var(--font-weight-bold);
|
|
584
495
|
text-transform: uppercase;
|
|
585
|
-
color: var(--
|
|
496
|
+
color: var(--color-primary);
|
|
586
497
|
cursor: pointer;
|
|
587
498
|
}
|
|
588
|
-
|
|
589
499
|
.udb-menu__action:hover {
|
|
590
500
|
text-decoration: underline;
|
|
591
501
|
}
|
|
592
|
-
|
|
593
502
|
.udb-menu__item {
|
|
594
503
|
display: flex;
|
|
595
504
|
width: 100%;
|
|
596
505
|
align-items: center;
|
|
597
506
|
gap: 10px;
|
|
598
|
-
padding: var(--
|
|
507
|
+
padding: var(--udb-space-2) var(--udb-space-3);
|
|
599
508
|
border: none;
|
|
600
|
-
border-radius: var(--
|
|
509
|
+
border-radius: var(--radius-md);
|
|
601
510
|
background: transparent;
|
|
602
511
|
font-family: inherit;
|
|
603
|
-
font-size: var(--
|
|
604
|
-
color: var(--
|
|
512
|
+
font-size: var(--udb-font-size-md);
|
|
513
|
+
color: var(--color-foreground);
|
|
605
514
|
cursor: pointer;
|
|
606
515
|
text-align: left;
|
|
607
516
|
}
|
|
608
|
-
|
|
609
517
|
.udb-menu__item:hover {
|
|
610
|
-
background: var(--
|
|
518
|
+
background: var(--color-muted);
|
|
611
519
|
}
|
|
612
|
-
|
|
613
520
|
.udb-menu__item--danger {
|
|
614
|
-
color: var(--
|
|
615
|
-
font-weight: var(--
|
|
521
|
+
color: var(--color-destructive);
|
|
522
|
+
font-weight: var(--font-weight-medium);
|
|
616
523
|
}
|
|
617
|
-
|
|
618
524
|
.udb-menu__item--danger:hover {
|
|
619
|
-
background: var(--
|
|
525
|
+
background: var(--color-destructive-soft, color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent));
|
|
620
526
|
}
|
|
621
|
-
|
|
622
527
|
.udb-menu__item-icon {
|
|
623
528
|
width: 16px;
|
|
624
529
|
height: 16px;
|
|
625
|
-
color: var(--
|
|
530
|
+
color: var(--color-muted-foreground);
|
|
626
531
|
flex-shrink: 0;
|
|
627
532
|
}
|
|
628
|
-
|
|
629
533
|
.udb-menu__item--danger .udb-menu__item-icon {
|
|
630
|
-
color: var(--
|
|
534
|
+
color: var(--color-destructive);
|
|
631
535
|
}
|
|
632
|
-
|
|
633
|
-
/* Notifications popover. */
|
|
634
536
|
.udb-notif {
|
|
635
537
|
width: 320px;
|
|
636
538
|
}
|
|
637
|
-
|
|
638
539
|
.udb-notif__list {
|
|
639
540
|
max-height: 400px;
|
|
640
541
|
overflow-y: auto;
|
|
641
542
|
}
|
|
642
|
-
|
|
643
543
|
.udb-notif__item {
|
|
644
544
|
display: flex;
|
|
645
545
|
align-items: flex-start;
|
|
646
|
-
gap: var(--
|
|
647
|
-
padding: var(--
|
|
648
|
-
border-bottom: 1px solid var(--
|
|
546
|
+
gap: var(--udb-space-3);
|
|
547
|
+
padding: var(--udb-space-3) var(--udb-space-4);
|
|
548
|
+
border-bottom: 1px solid var(--color-border);
|
|
649
549
|
}
|
|
650
|
-
|
|
651
550
|
.udb-notif__item:last-child {
|
|
652
551
|
border-bottom: none;
|
|
653
552
|
}
|
|
654
|
-
|
|
655
553
|
.udb-notif__item:hover {
|
|
656
|
-
background: var(--
|
|
554
|
+
background: var(--color-muted);
|
|
657
555
|
}
|
|
658
|
-
|
|
659
556
|
.udb-notif__item--unread {
|
|
660
|
-
background: var(--
|
|
557
|
+
background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
|
|
661
558
|
}
|
|
662
|
-
|
|
663
559
|
.udb-notif__body {
|
|
664
560
|
flex: 1;
|
|
665
561
|
min-width: 0;
|
|
666
562
|
}
|
|
667
|
-
|
|
668
563
|
.udb-notif__text {
|
|
669
564
|
margin: 0;
|
|
670
|
-
font-size: var(--
|
|
565
|
+
font-size: var(--udb-font-size-md);
|
|
671
566
|
line-height: 1.35;
|
|
672
|
-
color: var(--
|
|
567
|
+
color: var(--color-foreground);
|
|
673
568
|
}
|
|
674
|
-
|
|
675
569
|
.udb-notif__meta {
|
|
676
570
|
display: flex;
|
|
677
571
|
align-items: center;
|
|
678
|
-
gap: var(--
|
|
679
|
-
margin: var(--
|
|
572
|
+
gap: var(--udb-space-1);
|
|
573
|
+
margin: var(--udb-space-1) 0 0;
|
|
680
574
|
font-size: 10px;
|
|
681
|
-
color: var(--
|
|
575
|
+
color: var(--color-muted-foreground);
|
|
682
576
|
}
|
|
683
|
-
|
|
684
577
|
.udb-notif__dot {
|
|
685
578
|
display: inline-block;
|
|
686
579
|
width: 4px;
|
|
687
580
|
height: 4px;
|
|
688
581
|
border-radius: 50%;
|
|
689
|
-
background: var(--
|
|
582
|
+
background: var(--color-muted-foreground);
|
|
690
583
|
opacity: 0.5;
|
|
691
584
|
}
|
|
692
|
-
|
|
693
585
|
.udb-notif__dismiss {
|
|
694
586
|
display: flex;
|
|
695
587
|
flex-shrink: 0;
|
|
696
588
|
border: none;
|
|
697
589
|
padding: 0;
|
|
698
590
|
background: transparent;
|
|
699
|
-
color: var(--
|
|
591
|
+
color: var(--color-muted-foreground);
|
|
700
592
|
cursor: pointer;
|
|
701
593
|
}
|
|
702
|
-
|
|
703
594
|
.udb-notif__dismiss:hover {
|
|
704
|
-
color: var(--
|
|
595
|
+
color: var(--color-foreground);
|
|
705
596
|
}
|
|
706
|
-
|
|
707
597
|
.udb-notif__dismiss-icon {
|
|
708
598
|
width: 12px;
|
|
709
599
|
height: 12px;
|
|
710
600
|
}
|
|
711
|
-
|
|
712
601
|
.udb-notif__empty {
|
|
713
|
-
padding: var(--
|
|
602
|
+
padding: var(--udb-space-8) var(--udb-space-4);
|
|
714
603
|
text-align: center;
|
|
715
604
|
}
|
|
716
|
-
|
|
717
605
|
.udb-notif__empty-icon {
|
|
718
606
|
display: flex;
|
|
719
607
|
width: 40px;
|
|
720
608
|
height: 40px;
|
|
721
609
|
align-items: center;
|
|
722
610
|
justify-content: center;
|
|
723
|
-
margin: 0 auto var(--
|
|
611
|
+
margin: 0 auto var(--udb-space-3);
|
|
724
612
|
border-radius: 50%;
|
|
725
|
-
background: var(--
|
|
613
|
+
background: var(--color-muted);
|
|
726
614
|
}
|
|
727
|
-
|
|
728
615
|
.udb-notif__empty-bell {
|
|
729
616
|
width: 20px;
|
|
730
617
|
height: 20px;
|
|
731
|
-
color: var(--
|
|
618
|
+
color: var(--color-muted-foreground);
|
|
732
619
|
opacity: 0.6;
|
|
733
620
|
}
|
|
734
|
-
|
|
735
621
|
.udb-notif__empty-text {
|
|
736
622
|
margin: 0;
|
|
737
|
-
font-size: var(--
|
|
738
|
-
color: var(--
|
|
623
|
+
font-size: var(--udb-font-size-md);
|
|
624
|
+
color: var(--color-muted-foreground);
|
|
739
625
|
}
|
|
740
|
-
|
|
741
|
-
/* Profile trigger & menu. */
|
|
742
626
|
.udb-profile-btn {
|
|
743
627
|
display: flex;
|
|
744
628
|
align-items: center;
|
|
745
|
-
gap: var(--
|
|
746
|
-
padding: var(--
|
|
629
|
+
gap: var(--udb-space-2);
|
|
630
|
+
padding: var(--udb-space-1);
|
|
747
631
|
border: none;
|
|
748
|
-
border-radius: var(--
|
|
632
|
+
border-radius: var(--udb-radius-pill);
|
|
749
633
|
background: transparent;
|
|
750
634
|
cursor: pointer;
|
|
751
635
|
}
|
|
752
|
-
|
|
753
636
|
.udb-profile-btn:hover {
|
|
754
|
-
background: var(--
|
|
637
|
+
background: var(--color-muted);
|
|
755
638
|
}
|
|
756
|
-
|
|
757
639
|
.udb-avatar {
|
|
758
640
|
display: flex;
|
|
759
641
|
width: 32px;
|
|
@@ -761,679 +643,552 @@
|
|
|
761
643
|
align-items: center;
|
|
762
644
|
justify-content: center;
|
|
763
645
|
border-radius: 50%;
|
|
764
|
-
border: 1px solid var(--
|
|
765
|
-
background: var(--
|
|
766
|
-
color: var(--
|
|
646
|
+
border: 1px solid var(--color-primary);
|
|
647
|
+
background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
|
|
648
|
+
color: var(--color-primary);
|
|
767
649
|
font-size: 10px;
|
|
768
|
-
font-weight: var(--
|
|
650
|
+
font-weight: var(--font-weight-bold);
|
|
769
651
|
overflow: hidden;
|
|
770
652
|
}
|
|
771
|
-
|
|
772
653
|
.udb-avatar__img {
|
|
773
654
|
width: 100%;
|
|
774
655
|
height: 100%;
|
|
775
656
|
object-fit: cover;
|
|
776
657
|
display: block;
|
|
777
658
|
}
|
|
778
|
-
|
|
779
659
|
.udb-profile-btn__chevron {
|
|
780
660
|
width: 16px;
|
|
781
661
|
height: 16px;
|
|
782
|
-
color: var(--
|
|
662
|
+
color: var(--color-muted-foreground);
|
|
783
663
|
transition: transform 0.2s ease;
|
|
784
664
|
}
|
|
785
|
-
|
|
786
665
|
.udb-profile-btn__chevron--open {
|
|
787
666
|
transform: rotate(180deg);
|
|
788
667
|
}
|
|
789
|
-
|
|
790
668
|
.udb-profile-menu {
|
|
791
669
|
width: 224px;
|
|
792
|
-
padding: var(--
|
|
670
|
+
padding: var(--udb-space-2);
|
|
793
671
|
}
|
|
794
|
-
|
|
795
672
|
.udb-profile-menu__id {
|
|
796
|
-
padding: var(--
|
|
797
|
-
border-bottom: 1px solid var(--
|
|
798
|
-
margin-bottom: var(--
|
|
673
|
+
padding: var(--udb-space-2) var(--udb-space-3);
|
|
674
|
+
border-bottom: 1px solid var(--color-border);
|
|
675
|
+
margin-bottom: var(--udb-space-1);
|
|
799
676
|
}
|
|
800
|
-
|
|
801
677
|
.udb-profile-menu__name {
|
|
802
678
|
margin: 0;
|
|
803
|
-
font-size: var(--
|
|
804
|
-
font-weight: var(--
|
|
805
|
-
color: var(--
|
|
679
|
+
font-size: var(--udb-font-size-md);
|
|
680
|
+
font-weight: var(--font-weight-bold);
|
|
681
|
+
color: var(--color-foreground);
|
|
806
682
|
}
|
|
807
|
-
|
|
808
683
|
.udb-profile-menu__email {
|
|
809
684
|
margin: 0;
|
|
810
|
-
font-size: var(--
|
|
811
|
-
color: var(--
|
|
685
|
+
font-size: var(--udb-font-size-sm);
|
|
686
|
+
color: var(--color-muted-foreground);
|
|
812
687
|
overflow: hidden;
|
|
813
688
|
text-overflow: ellipsis;
|
|
814
689
|
white-space: nowrap;
|
|
815
690
|
}
|
|
816
|
-
|
|
817
691
|
.udb-profile-menu__items {
|
|
818
692
|
display: flex;
|
|
819
693
|
flex-direction: column;
|
|
820
694
|
}
|
|
821
|
-
|
|
822
695
|
.udb-profile-menu__separator {
|
|
823
696
|
height: 1px;
|
|
824
|
-
margin: var(--
|
|
825
|
-
background: var(--
|
|
697
|
+
margin: var(--udb-space-2) 0;
|
|
698
|
+
background: var(--color-border);
|
|
826
699
|
}
|
|
827
|
-
|
|
828
|
-
/* ============================================================
|
|
829
|
-
* 6. Auth pages
|
|
830
|
-
* ============================================================ */
|
|
831
|
-
|
|
832
700
|
.udb-auth {
|
|
833
701
|
display: flex;
|
|
834
702
|
flex-direction: column;
|
|
835
703
|
min-height: 100dvh;
|
|
836
|
-
background: var(--
|
|
704
|
+
background: var(--color-background);
|
|
837
705
|
}
|
|
838
|
-
|
|
839
706
|
.udb-auth__header {
|
|
840
707
|
display: flex;
|
|
841
708
|
align-items: center;
|
|
842
709
|
justify-content: space-between;
|
|
843
|
-
gap: var(--
|
|
844
|
-
padding: var(--
|
|
710
|
+
gap: var(--udb-space-3);
|
|
711
|
+
padding: var(--udb-space-4) var(--udb-space-6);
|
|
845
712
|
}
|
|
846
|
-
|
|
847
713
|
.udb-auth__brand {
|
|
848
714
|
display: flex;
|
|
849
715
|
align-items: center;
|
|
850
|
-
gap: var(--
|
|
716
|
+
gap: var(--udb-space-2);
|
|
851
717
|
}
|
|
852
|
-
|
|
853
718
|
.udb-auth__brand-name {
|
|
854
|
-
font-size: var(--
|
|
855
|
-
font-weight: var(--
|
|
719
|
+
font-size: var(--udb-font-size-lg);
|
|
720
|
+
font-weight: var(--font-weight-bold);
|
|
856
721
|
letter-spacing: -0.02em;
|
|
857
|
-
color: var(--
|
|
722
|
+
color: var(--color-foreground);
|
|
858
723
|
}
|
|
859
|
-
|
|
860
724
|
.udb-auth__home-link {
|
|
861
|
-
font-size: var(--
|
|
862
|
-
color: var(--
|
|
725
|
+
font-size: var(--udb-font-size-md);
|
|
726
|
+
color: var(--color-muted-foreground);
|
|
863
727
|
text-decoration: none;
|
|
864
728
|
}
|
|
865
|
-
|
|
866
729
|
.udb-auth__home-link:hover {
|
|
867
|
-
color: var(--
|
|
730
|
+
color: var(--color-foreground);
|
|
868
731
|
text-decoration: underline;
|
|
869
732
|
}
|
|
870
|
-
|
|
871
733
|
.udb-auth__main {
|
|
872
734
|
display: flex;
|
|
873
735
|
flex: 1;
|
|
874
736
|
align-items: center;
|
|
875
737
|
justify-content: center;
|
|
876
|
-
padding: var(--
|
|
738
|
+
padding: var(--udb-space-6) var(--udb-space-4);
|
|
877
739
|
}
|
|
878
|
-
|
|
879
740
|
.udb-auth__column {
|
|
880
741
|
display: flex;
|
|
881
742
|
flex-direction: column;
|
|
882
743
|
width: 100%;
|
|
883
744
|
max-width: 420px;
|
|
884
745
|
}
|
|
885
|
-
|
|
886
746
|
.udb-auth__card {
|
|
887
|
-
background: var(--
|
|
888
|
-
border: 1px solid var(--
|
|
889
|
-
border-radius: var(--
|
|
890
|
-
box-shadow: var(--
|
|
891
|
-
padding: var(--
|
|
747
|
+
background: var(--color-card);
|
|
748
|
+
border: 1px solid var(--color-border);
|
|
749
|
+
border-radius: var(--radius-xl);
|
|
750
|
+
box-shadow: var(--shadow-lg);
|
|
751
|
+
padding: var(--udb-space-8) var(--udb-space-7);
|
|
892
752
|
}
|
|
893
|
-
|
|
894
753
|
.udb-auth__tagline {
|
|
895
|
-
margin: 0 0 var(--
|
|
754
|
+
margin: 0 0 var(--udb-space-5);
|
|
896
755
|
text-align: center;
|
|
897
|
-
font-size: var(--
|
|
898
|
-
font-weight: var(--
|
|
756
|
+
font-size: var(--udb-font-size-xs);
|
|
757
|
+
font-weight: var(--font-weight-bold);
|
|
899
758
|
text-transform: uppercase;
|
|
900
759
|
letter-spacing: 0.1em;
|
|
901
|
-
color: var(--
|
|
760
|
+
color: var(--color-primary);
|
|
902
761
|
}
|
|
903
|
-
|
|
904
762
|
.udb-auth__social {
|
|
905
|
-
margin-top: var(--
|
|
763
|
+
margin-top: var(--udb-space-5);
|
|
906
764
|
}
|
|
907
|
-
|
|
908
765
|
.udb-auth__footer {
|
|
909
|
-
padding: var(--
|
|
766
|
+
padding: var(--udb-space-4) var(--udb-space-6);
|
|
910
767
|
}
|
|
911
|
-
|
|
912
768
|
.udb-auth__footer-inner {
|
|
913
769
|
display: flex;
|
|
914
770
|
flex-direction: column;
|
|
915
771
|
align-items: center;
|
|
916
|
-
gap: var(--
|
|
772
|
+
gap: var(--udb-space-2);
|
|
917
773
|
text-align: center;
|
|
918
|
-
font-size: var(--
|
|
919
|
-
color: var(--
|
|
774
|
+
font-size: var(--udb-font-size-xs);
|
|
775
|
+
color: var(--color-muted-foreground);
|
|
920
776
|
}
|
|
921
|
-
|
|
922
777
|
.udb-auth__footer-inner > p {
|
|
923
778
|
margin: 0;
|
|
924
779
|
}
|
|
925
|
-
|
|
926
780
|
.udb-auth__footer-links {
|
|
927
781
|
display: flex;
|
|
928
782
|
align-items: center;
|
|
929
783
|
justify-content: center;
|
|
930
784
|
flex-wrap: wrap;
|
|
931
|
-
gap: var(--
|
|
785
|
+
gap: var(--udb-space-4);
|
|
932
786
|
}
|
|
933
|
-
|
|
934
787
|
.udb-auth__footer-link {
|
|
935
|
-
font-size: var(--
|
|
936
|
-
color: var(--
|
|
788
|
+
font-size: var(--udb-font-size-xs);
|
|
789
|
+
color: var(--color-muted-foreground);
|
|
937
790
|
text-decoration: none;
|
|
938
791
|
}
|
|
939
|
-
|
|
940
792
|
.udb-auth__footer-link:hover {
|
|
941
|
-
color: var(--
|
|
793
|
+
color: var(--color-foreground);
|
|
942
794
|
text-decoration: underline;
|
|
943
795
|
}
|
|
944
|
-
|
|
945
|
-
/* "Or continue with" divider. */
|
|
946
796
|
.udb-divider-row {
|
|
947
797
|
display: flex;
|
|
948
798
|
align-items: center;
|
|
949
|
-
gap: var(--
|
|
950
|
-
margin: var(--
|
|
799
|
+
gap: var(--udb-space-3);
|
|
800
|
+
margin: var(--udb-space-5) 0;
|
|
951
801
|
}
|
|
952
|
-
|
|
953
802
|
.udb-divider-row::before,
|
|
954
803
|
.udb-divider-row::after {
|
|
955
804
|
content: "";
|
|
956
805
|
flex: 1;
|
|
957
806
|
height: 1px;
|
|
958
|
-
background: var(--
|
|
807
|
+
background: var(--color-border);
|
|
959
808
|
}
|
|
960
|
-
|
|
961
809
|
.udb-divider-row__label {
|
|
962
|
-
font-size: var(--
|
|
963
|
-
font-weight: var(--
|
|
810
|
+
font-size: var(--udb-font-size-xs);
|
|
811
|
+
font-weight: var(--font-weight-medium);
|
|
964
812
|
text-transform: uppercase;
|
|
965
813
|
letter-spacing: 0.06em;
|
|
966
|
-
color: var(--
|
|
814
|
+
color: var(--color-muted-foreground);
|
|
967
815
|
white-space: nowrap;
|
|
968
816
|
}
|
|
969
|
-
|
|
970
|
-
/* Social provider buttons. */
|
|
971
817
|
.udb-social-grid {
|
|
972
818
|
display: grid;
|
|
973
819
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
974
|
-
gap: var(--
|
|
820
|
+
gap: var(--udb-space-3);
|
|
975
821
|
}
|
|
976
|
-
|
|
977
822
|
.udb-social-grid__btn {
|
|
978
823
|
width: 100%;
|
|
979
824
|
}
|
|
980
|
-
|
|
981
825
|
.udb-social-grid__icon {
|
|
982
826
|
width: 16px;
|
|
983
827
|
height: 16px;
|
|
984
828
|
flex-shrink: 0;
|
|
985
829
|
}
|
|
986
|
-
|
|
987
|
-
/* Standalone social button (AuthLayout provider grid). */
|
|
988
830
|
.udb-social-btn {
|
|
989
831
|
display: inline-flex;
|
|
990
832
|
align-items: center;
|
|
991
833
|
justify-content: center;
|
|
992
|
-
gap: var(--
|
|
834
|
+
gap: var(--udb-space-2);
|
|
993
835
|
height: 40px;
|
|
994
|
-
padding: 0 var(--
|
|
995
|
-
border: 1px solid var(--
|
|
996
|
-
border-radius: var(--
|
|
997
|
-
background: var(--
|
|
998
|
-
color: var(--
|
|
836
|
+
padding: 0 var(--udb-space-3);
|
|
837
|
+
border: 1px solid var(--udb-border-strong);
|
|
838
|
+
border-radius: var(--radius-md);
|
|
839
|
+
background: var(--color-card);
|
|
840
|
+
color: var(--color-foreground);
|
|
999
841
|
font-family: inherit;
|
|
1000
|
-
font-size: var(--
|
|
1001
|
-
font-weight: var(--
|
|
842
|
+
font-size: var(--udb-font-size-md);
|
|
843
|
+
font-weight: var(--font-weight-medium);
|
|
1002
844
|
cursor: pointer;
|
|
1003
845
|
}
|
|
1004
|
-
|
|
1005
846
|
.udb-social-btn:hover {
|
|
1006
|
-
background: var(--
|
|
847
|
+
background: var(--color-muted);
|
|
1007
848
|
}
|
|
1008
|
-
|
|
1009
849
|
.udb-social-btn__icon {
|
|
1010
850
|
display: inline-flex;
|
|
1011
851
|
align-items: center;
|
|
1012
852
|
justify-content: center;
|
|
1013
853
|
flex-shrink: 0;
|
|
1014
854
|
}
|
|
1015
|
-
|
|
1016
855
|
.udb-social-btn__icon svg {
|
|
1017
856
|
width: 16px;
|
|
1018
857
|
height: 16px;
|
|
1019
858
|
}
|
|
1020
|
-
|
|
1021
|
-
/* ============================================================
|
|
1022
|
-
* 7. Forms (auth + generic fields)
|
|
1023
|
-
* ============================================================ */
|
|
1024
|
-
|
|
1025
|
-
/* Shared spinner (also used by onboarding/analytics icons). */
|
|
1026
859
|
@keyframes udb-spin {
|
|
1027
860
|
to {
|
|
1028
861
|
transform: rotate(360deg);
|
|
1029
862
|
}
|
|
1030
863
|
}
|
|
1031
|
-
|
|
1032
864
|
.udb-spin {
|
|
1033
865
|
animation: udb-spin 1s linear infinite;
|
|
1034
866
|
}
|
|
1035
|
-
|
|
1036
867
|
.udb-form {
|
|
1037
868
|
display: flex;
|
|
1038
869
|
flex-direction: column;
|
|
1039
|
-
gap: var(--
|
|
870
|
+
gap: var(--udb-space-4);
|
|
1040
871
|
width: 100%;
|
|
1041
872
|
}
|
|
1042
|
-
|
|
1043
873
|
.udb-form__header {
|
|
1044
874
|
display: flex;
|
|
1045
875
|
flex-direction: column;
|
|
1046
|
-
gap: var(--
|
|
876
|
+
gap: var(--udb-space-1);
|
|
1047
877
|
text-align: center;
|
|
1048
878
|
}
|
|
1049
|
-
|
|
1050
879
|
.udb-form__title {
|
|
1051
880
|
margin: 0;
|
|
1052
|
-
font-size: var(--
|
|
1053
|
-
font-weight: var(--
|
|
881
|
+
font-size: var(--udb-font-size-2xl);
|
|
882
|
+
font-weight: var(--font-weight-bold);
|
|
1054
883
|
letter-spacing: -0.02em;
|
|
1055
884
|
line-height: 1.2;
|
|
1056
|
-
color: var(--
|
|
885
|
+
color: var(--color-foreground);
|
|
1057
886
|
}
|
|
1058
|
-
|
|
1059
887
|
.udb-form__title--lg {
|
|
1060
|
-
font-size: var(--
|
|
888
|
+
font-size: var(--udb-font-size-3xl);
|
|
1061
889
|
}
|
|
1062
|
-
|
|
1063
890
|
.udb-form__subtitle {
|
|
1064
891
|
margin: 0;
|
|
1065
|
-
font-size: var(--
|
|
1066
|
-
color: var(--
|
|
892
|
+
font-size: var(--udb-font-size-md);
|
|
893
|
+
color: var(--color-muted-foreground);
|
|
1067
894
|
}
|
|
1068
|
-
|
|
1069
895
|
.udb-form__subtitle-strong {
|
|
1070
|
-
color: var(--
|
|
1071
|
-
font-weight: var(--
|
|
896
|
+
color: var(--color-foreground);
|
|
897
|
+
font-weight: var(--font-weight-medium);
|
|
1072
898
|
}
|
|
1073
|
-
|
|
1074
899
|
.udb-form__row {
|
|
1075
900
|
display: flex;
|
|
1076
901
|
align-items: center;
|
|
1077
902
|
justify-content: space-between;
|
|
1078
|
-
gap: var(--
|
|
1079
|
-
font-size: var(--
|
|
903
|
+
gap: var(--udb-space-3);
|
|
904
|
+
font-size: var(--udb-font-size-md);
|
|
1080
905
|
}
|
|
1081
|
-
|
|
1082
906
|
.udb-form__footer-text {
|
|
1083
907
|
margin: 0;
|
|
1084
908
|
text-align: center;
|
|
1085
|
-
font-size: var(--
|
|
1086
|
-
color: var(--
|
|
909
|
+
font-size: var(--udb-font-size-md);
|
|
910
|
+
color: var(--color-muted-foreground);
|
|
1087
911
|
}
|
|
1088
|
-
|
|
1089
|
-
/* Tighter group inside a form (e.g. password + strength meter). */
|
|
1090
912
|
.udb-form__group {
|
|
1091
913
|
display: flex;
|
|
1092
914
|
flex-direction: column;
|
|
1093
|
-
gap: var(--
|
|
915
|
+
gap: var(--udb-space-3);
|
|
1094
916
|
}
|
|
1095
|
-
|
|
1096
|
-
/* Single labeled field. */
|
|
1097
917
|
.udb-field {
|
|
1098
918
|
display: flex;
|
|
1099
919
|
flex-direction: column;
|
|
1100
920
|
gap: 6px;
|
|
1101
921
|
}
|
|
1102
|
-
|
|
1103
922
|
.udb-field__label {
|
|
1104
|
-
font-size: var(--
|
|
1105
|
-
font-weight: var(--
|
|
1106
|
-
color: var(--
|
|
923
|
+
font-size: var(--udb-font-size-md);
|
|
924
|
+
font-weight: var(--font-weight-medium);
|
|
925
|
+
color: var(--color-foreground);
|
|
1107
926
|
}
|
|
1108
|
-
|
|
1109
927
|
.udb-field__required {
|
|
1110
928
|
margin-left: 2px;
|
|
1111
|
-
color: var(--
|
|
929
|
+
color: var(--color-destructive);
|
|
1112
930
|
}
|
|
1113
|
-
|
|
1114
931
|
.udb-field__error {
|
|
1115
932
|
margin: 0;
|
|
1116
|
-
font-size: var(--
|
|
1117
|
-
color: var(--
|
|
933
|
+
font-size: var(--udb-font-size-sm);
|
|
934
|
+
color: var(--color-destructive);
|
|
1118
935
|
}
|
|
1119
|
-
|
|
1120
|
-
/* Inline error banner. */
|
|
1121
936
|
.udb-form-alert {
|
|
1122
937
|
display: flex;
|
|
1123
938
|
align-items: flex-start;
|
|
1124
|
-
gap: var(--
|
|
1125
|
-
padding: 10px var(--
|
|
1126
|
-
border-radius: var(--
|
|
1127
|
-
background: var(--
|
|
1128
|
-
color: var(--
|
|
1129
|
-
font-size: var(--
|
|
939
|
+
gap: var(--udb-space-2);
|
|
940
|
+
padding: 10px var(--udb-space-3);
|
|
941
|
+
border-radius: var(--radius-md);
|
|
942
|
+
background: var(--color-destructive-soft, color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent));
|
|
943
|
+
color: var(--color-destructive);
|
|
944
|
+
font-size: var(--udb-font-size-md);
|
|
1130
945
|
}
|
|
1131
|
-
|
|
1132
946
|
.udb-form-alert__icon {
|
|
1133
947
|
width: 16px;
|
|
1134
948
|
height: 16px;
|
|
1135
949
|
flex-shrink: 0;
|
|
1136
950
|
margin-top: 2px;
|
|
1137
951
|
}
|
|
1138
|
-
|
|
1139
|
-
/* Checkbox line (remember me, terms). */
|
|
1140
952
|
.udb-check-label {
|
|
1141
953
|
display: flex;
|
|
1142
954
|
align-items: center;
|
|
1143
|
-
gap: var(--
|
|
1144
|
-
font-size: var(--
|
|
1145
|
-
color: var(--
|
|
955
|
+
gap: var(--udb-space-2);
|
|
956
|
+
font-size: var(--udb-font-size-md);
|
|
957
|
+
color: var(--color-muted-foreground);
|
|
1146
958
|
cursor: pointer;
|
|
1147
959
|
}
|
|
1148
|
-
|
|
1149
960
|
.udb-check-label--multiline {
|
|
1150
961
|
align-items: flex-start;
|
|
1151
962
|
}
|
|
1152
|
-
|
|
1153
963
|
.udb-check-label__text {
|
|
1154
964
|
flex: 1;
|
|
1155
965
|
line-height: 1.45;
|
|
1156
966
|
}
|
|
1157
|
-
|
|
1158
|
-
/* Inline text buttons ("Forgot password?", "Sign up"). */
|
|
1159
967
|
.udb-link-btn {
|
|
1160
968
|
display: inline;
|
|
1161
969
|
border: none;
|
|
1162
970
|
padding: 0;
|
|
1163
971
|
background: transparent;
|
|
1164
972
|
font-family: inherit;
|
|
1165
|
-
font-size: var(--
|
|
1166
|
-
color: var(--
|
|
973
|
+
font-size: var(--udb-font-size-md);
|
|
974
|
+
color: var(--color-primary);
|
|
1167
975
|
cursor: pointer;
|
|
1168
976
|
}
|
|
1169
|
-
|
|
1170
977
|
.udb-link-btn:hover {
|
|
1171
978
|
text-decoration: underline;
|
|
1172
979
|
}
|
|
1173
|
-
|
|
1174
980
|
.udb-link-btn:disabled {
|
|
1175
981
|
pointer-events: none;
|
|
1176
982
|
opacity: 0.55;
|
|
1177
983
|
}
|
|
1178
|
-
|
|
1179
984
|
.udb-link-btn--strong {
|
|
1180
985
|
font-weight: 600;
|
|
1181
986
|
}
|
|
1182
|
-
|
|
1183
987
|
.udb-text-link {
|
|
1184
|
-
color: var(--
|
|
988
|
+
color: var(--color-primary);
|
|
1185
989
|
text-decoration: none;
|
|
1186
990
|
}
|
|
1187
|
-
|
|
1188
991
|
.udb-text-link:hover {
|
|
1189
992
|
text-decoration: underline;
|
|
1190
993
|
}
|
|
1191
|
-
|
|
1192
|
-
/* Full-width submit button. */
|
|
1193
994
|
.udb-submit-btn {
|
|
1194
995
|
width: 100%;
|
|
1195
996
|
height: 44px;
|
|
1196
997
|
}
|
|
1197
|
-
|
|
1198
998
|
.udb-submit-btn--pill {
|
|
1199
999
|
height: 48px;
|
|
1200
|
-
border-radius: var(--
|
|
1000
|
+
border-radius: var(--udb-radius-pill);
|
|
1201
1001
|
}
|
|
1202
|
-
|
|
1203
1002
|
.udb-btn__spinner {
|
|
1204
1003
|
animation: udb-spin 1s linear infinite;
|
|
1205
1004
|
}
|
|
1206
|
-
|
|
1207
|
-
/* Password field with visibility toggle. */
|
|
1208
1005
|
.udb-password-wrap {
|
|
1209
1006
|
position: relative;
|
|
1210
1007
|
width: 100%;
|
|
1211
1008
|
}
|
|
1212
|
-
|
|
1213
1009
|
.udb-input--with-toggle {
|
|
1214
1010
|
padding-right: 44px;
|
|
1215
1011
|
}
|
|
1216
|
-
|
|
1217
1012
|
.udb-password-toggle {
|
|
1218
1013
|
position: absolute;
|
|
1219
1014
|
right: 2px;
|
|
1220
1015
|
top: 50%;
|
|
1221
1016
|
transform: translateY(-50%);
|
|
1222
1017
|
}
|
|
1223
|
-
|
|
1224
1018
|
.udb-password-toggle__icon {
|
|
1225
1019
|
width: 16px;
|
|
1226
1020
|
height: 16px;
|
|
1227
|
-
color: var(--
|
|
1021
|
+
color: var(--color-muted-foreground);
|
|
1228
1022
|
}
|
|
1229
|
-
|
|
1230
1023
|
.udb-input--error {
|
|
1231
|
-
border-color: var(--
|
|
1024
|
+
border-color: var(--color-destructive);
|
|
1232
1025
|
}
|
|
1233
|
-
|
|
1234
1026
|
.udb-input--error:focus-visible {
|
|
1235
|
-
border-color: var(--
|
|
1236
|
-
box-shadow: 0 0 0 3px var(--
|
|
1027
|
+
border-color: var(--color-destructive);
|
|
1028
|
+
box-shadow: 0 0 0 3px var(--color-destructive-soft, color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent));
|
|
1237
1029
|
}
|
|
1238
|
-
|
|
1239
|
-
/* Password strength meter. */
|
|
1240
1030
|
.udb-strength {
|
|
1241
1031
|
display: flex;
|
|
1242
1032
|
flex-direction: column;
|
|
1243
1033
|
gap: 6px;
|
|
1244
|
-
margin-top: var(--
|
|
1034
|
+
margin-top: var(--udb-space-1);
|
|
1245
1035
|
}
|
|
1246
|
-
|
|
1247
1036
|
.udb-strength__bars {
|
|
1248
1037
|
display: grid;
|
|
1249
1038
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1250
|
-
gap: var(--
|
|
1039
|
+
gap: var(--udb-space-2);
|
|
1251
1040
|
}
|
|
1252
|
-
|
|
1253
1041
|
.udb-strength__bar {
|
|
1254
1042
|
height: 4px;
|
|
1255
|
-
border-radius: var(--
|
|
1256
|
-
background: var(--
|
|
1043
|
+
border-radius: var(--udb-radius-pill);
|
|
1044
|
+
background: var(--udb-border-strong);
|
|
1257
1045
|
transition: background-color 0.2s ease;
|
|
1258
1046
|
}
|
|
1259
|
-
|
|
1260
1047
|
.udb-strength__bar--weak {
|
|
1261
|
-
background: var(--
|
|
1048
|
+
background: var(--color-destructive);
|
|
1262
1049
|
}
|
|
1263
|
-
|
|
1264
1050
|
.udb-strength__bar--fair {
|
|
1265
|
-
background: var(--
|
|
1051
|
+
background: var(--color-warning);
|
|
1266
1052
|
}
|
|
1267
|
-
|
|
1268
1053
|
.udb-strength__bar--good {
|
|
1269
|
-
background: var(--
|
|
1054
|
+
background: var(--color-primary);
|
|
1270
1055
|
}
|
|
1271
|
-
|
|
1272
1056
|
.udb-strength__bar--strong {
|
|
1273
|
-
background: var(--
|
|
1057
|
+
background: var(--color-success);
|
|
1274
1058
|
}
|
|
1275
|
-
|
|
1276
1059
|
.udb-strength__label {
|
|
1277
1060
|
margin: 0;
|
|
1278
|
-
font-size: var(--
|
|
1279
|
-
color: var(--
|
|
1061
|
+
font-size: var(--udb-font-size-xs);
|
|
1062
|
+
color: var(--color-muted-foreground);
|
|
1280
1063
|
}
|
|
1281
|
-
|
|
1282
1064
|
.udb-strength__label--weak {
|
|
1283
|
-
color: var(--
|
|
1065
|
+
color: var(--color-destructive);
|
|
1284
1066
|
}
|
|
1285
|
-
|
|
1286
1067
|
.udb-strength__label--fair {
|
|
1287
|
-
color: var(--
|
|
1068
|
+
color: var(--color-warning);
|
|
1288
1069
|
}
|
|
1289
|
-
|
|
1290
1070
|
.udb-strength__label--good {
|
|
1291
|
-
color: var(--
|
|
1071
|
+
color: var(--color-primary);
|
|
1292
1072
|
}
|
|
1293
|
-
|
|
1294
1073
|
.udb-strength__label--strong {
|
|
1295
|
-
color: var(--
|
|
1074
|
+
color: var(--color-success);
|
|
1296
1075
|
}
|
|
1297
|
-
|
|
1298
|
-
/* Success badge + ordered steps (forgot-password done state). */
|
|
1299
1076
|
.udb-success-badge {
|
|
1300
1077
|
display: flex;
|
|
1301
1078
|
align-items: center;
|
|
1302
1079
|
justify-content: center;
|
|
1303
1080
|
width: 48px;
|
|
1304
1081
|
height: 48px;
|
|
1305
|
-
margin: 0 auto var(--
|
|
1082
|
+
margin: 0 auto var(--udb-space-4);
|
|
1306
1083
|
border-radius: 50%;
|
|
1307
|
-
background: var(--
|
|
1084
|
+
background: var(--color-success-soft, color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent));
|
|
1308
1085
|
}
|
|
1309
|
-
|
|
1310
1086
|
.udb-success-badge__icon {
|
|
1311
1087
|
width: 24px;
|
|
1312
1088
|
height: 24px;
|
|
1313
|
-
color: var(--
|
|
1089
|
+
color: var(--color-success);
|
|
1314
1090
|
}
|
|
1315
|
-
|
|
1316
1091
|
.udb-steps-list {
|
|
1317
1092
|
display: flex;
|
|
1318
1093
|
flex-direction: column;
|
|
1319
|
-
gap: var(--
|
|
1320
|
-
margin: var(--
|
|
1094
|
+
gap: var(--udb-space-3);
|
|
1095
|
+
margin: var(--udb-space-4) 0 0;
|
|
1321
1096
|
padding: 0;
|
|
1322
1097
|
list-style: none;
|
|
1323
1098
|
}
|
|
1324
|
-
|
|
1325
1099
|
.udb-steps-list__item {
|
|
1326
1100
|
display: flex;
|
|
1327
1101
|
align-items: flex-start;
|
|
1328
|
-
gap: var(--
|
|
1329
|
-
font-size: var(--
|
|
1330
|
-
color: var(--
|
|
1102
|
+
gap: var(--udb-space-2);
|
|
1103
|
+
font-size: var(--udb-font-size-md);
|
|
1104
|
+
color: var(--color-foreground);
|
|
1331
1105
|
}
|
|
1332
|
-
|
|
1333
1106
|
.udb-steps-list__icon {
|
|
1334
1107
|
width: 16px;
|
|
1335
1108
|
height: 16px;
|
|
1336
1109
|
flex-shrink: 0;
|
|
1337
1110
|
margin-top: 2px;
|
|
1338
|
-
color: var(--
|
|
1111
|
+
color: var(--color-success);
|
|
1339
1112
|
}
|
|
1340
|
-
|
|
1341
1113
|
.udb-back-link {
|
|
1342
1114
|
display: inline-flex;
|
|
1343
1115
|
align-items: center;
|
|
1344
1116
|
gap: 6px;
|
|
1345
|
-
margin-top: var(--
|
|
1117
|
+
margin-top: var(--udb-space-4);
|
|
1346
1118
|
border: none;
|
|
1347
1119
|
padding: 0;
|
|
1348
1120
|
background: transparent;
|
|
1349
1121
|
font-family: inherit;
|
|
1350
|
-
font-size: var(--
|
|
1351
|
-
color: var(--
|
|
1122
|
+
font-size: var(--udb-font-size-md);
|
|
1123
|
+
color: var(--color-muted-foreground);
|
|
1352
1124
|
cursor: pointer;
|
|
1353
1125
|
}
|
|
1354
|
-
|
|
1355
1126
|
.udb-back-link:hover {
|
|
1356
|
-
color: var(--
|
|
1127
|
+
color: var(--color-foreground);
|
|
1357
1128
|
}
|
|
1358
|
-
|
|
1359
1129
|
.udb-back-link__icon {
|
|
1360
1130
|
width: 14px;
|
|
1361
1131
|
height: 14px;
|
|
1362
1132
|
}
|
|
1363
|
-
|
|
1364
|
-
/* ============================================================
|
|
1365
|
-
* 9. Settings
|
|
1366
|
-
* ============================================================ */
|
|
1367
|
-
|
|
1368
1133
|
.udb-settings {
|
|
1369
1134
|
display: flex;
|
|
1370
1135
|
width: 100%;
|
|
1371
1136
|
height: 100vh;
|
|
1372
1137
|
overflow: hidden;
|
|
1373
|
-
background: var(--
|
|
1138
|
+
background: var(--color-background);
|
|
1374
1139
|
}
|
|
1375
|
-
|
|
1376
1140
|
.udb-settings__sidebar {
|
|
1377
1141
|
display: none;
|
|
1378
1142
|
flex-direction: column;
|
|
1379
1143
|
flex-shrink: 0;
|
|
1380
1144
|
width: 280px;
|
|
1381
|
-
border-right: 1px solid var(--
|
|
1382
|
-
background: var(--
|
|
1145
|
+
border-right: 1px solid var(--color-border);
|
|
1146
|
+
background: var(--color-card);
|
|
1383
1147
|
transition: width 0.3s ease;
|
|
1384
1148
|
}
|
|
1385
|
-
|
|
1386
1149
|
.udb-settings__sidebar--collapsed {
|
|
1387
1150
|
width: 72px;
|
|
1388
1151
|
overflow: hidden;
|
|
1389
1152
|
}
|
|
1390
|
-
|
|
1391
1153
|
.udb-settings__sidebar-header {
|
|
1392
1154
|
display: flex;
|
|
1393
1155
|
align-items: center;
|
|
1394
1156
|
justify-content: space-between;
|
|
1395
|
-
gap: var(--
|
|
1396
|
-
padding: var(--
|
|
1397
|
-
border-bottom: 1px solid var(--
|
|
1157
|
+
gap: var(--udb-space-2);
|
|
1158
|
+
padding: var(--udb-space-4);
|
|
1159
|
+
border-bottom: 1px solid var(--color-border);
|
|
1398
1160
|
}
|
|
1399
|
-
|
|
1400
1161
|
.udb-settings__sidebar-title {
|
|
1401
1162
|
margin: 0;
|
|
1402
|
-
font-size: var(--
|
|
1403
|
-
font-weight: var(--
|
|
1404
|
-
color: var(--
|
|
1163
|
+
font-size: var(--udb-font-size-lg);
|
|
1164
|
+
font-weight: var(--font-weight-bold);
|
|
1165
|
+
color: var(--color-foreground);
|
|
1405
1166
|
white-space: nowrap;
|
|
1406
1167
|
overflow: hidden;
|
|
1407
1168
|
text-overflow: ellipsis;
|
|
1408
1169
|
}
|
|
1409
|
-
|
|
1410
1170
|
.udb-settings__sidebar-toggle {
|
|
1411
1171
|
display: inline-flex;
|
|
1412
1172
|
flex-shrink: 0;
|
|
1413
1173
|
}
|
|
1414
|
-
|
|
1415
1174
|
.udb-settings__toggle-icon {
|
|
1416
1175
|
width: 20px;
|
|
1417
1176
|
height: 20px;
|
|
1418
1177
|
}
|
|
1419
|
-
|
|
1420
1178
|
.udb-settings__toggle-icon-lg {
|
|
1421
1179
|
width: 24px;
|
|
1422
1180
|
height: 24px;
|
|
1423
1181
|
}
|
|
1424
|
-
|
|
1425
1182
|
.udb-settings__nav {
|
|
1426
1183
|
flex: 1;
|
|
1427
1184
|
overflow-y: auto;
|
|
1428
|
-
padding: var(--
|
|
1185
|
+
padding: var(--udb-space-3) var(--udb-space-2);
|
|
1429
1186
|
}
|
|
1430
|
-
|
|
1431
1187
|
.udb-settings__mobile {
|
|
1432
1188
|
position: fixed;
|
|
1433
1189
|
inset: 0;
|
|
1434
1190
|
z-index: 50;
|
|
1435
1191
|
}
|
|
1436
|
-
|
|
1437
1192
|
.udb-settings__mobile-sidebar {
|
|
1438
1193
|
position: absolute;
|
|
1439
1194
|
left: 0;
|
|
@@ -1441,17 +1196,15 @@
|
|
|
1441
1196
|
height: 100%;
|
|
1442
1197
|
width: 280px;
|
|
1443
1198
|
overflow-y: auto;
|
|
1444
|
-
border-right: 1px solid var(--
|
|
1445
|
-
background: var(--
|
|
1446
|
-
box-shadow: var(--
|
|
1199
|
+
border-right: 1px solid var(--color-border);
|
|
1200
|
+
background: var(--color-card);
|
|
1201
|
+
box-shadow: var(--shadow-lg);
|
|
1447
1202
|
}
|
|
1448
|
-
|
|
1449
1203
|
.udb-backdrop {
|
|
1450
1204
|
position: absolute;
|
|
1451
1205
|
inset: 0;
|
|
1452
1206
|
background: rgba(15, 23, 42, 0.45);
|
|
1453
1207
|
}
|
|
1454
|
-
|
|
1455
1208
|
.udb-settings__main {
|
|
1456
1209
|
display: flex;
|
|
1457
1210
|
flex: 1;
|
|
@@ -1459,134 +1212,115 @@
|
|
|
1459
1212
|
overflow: hidden;
|
|
1460
1213
|
min-width: 0;
|
|
1461
1214
|
}
|
|
1462
|
-
|
|
1463
1215
|
.udb-settings__mobile-header {
|
|
1464
1216
|
display: flex;
|
|
1465
1217
|
align-items: center;
|
|
1466
1218
|
justify-content: space-between;
|
|
1467
|
-
gap: var(--
|
|
1468
|
-
padding: var(--
|
|
1469
|
-
border-bottom: 1px solid var(--
|
|
1470
|
-
background: var(--
|
|
1219
|
+
gap: var(--udb-space-3);
|
|
1220
|
+
padding: var(--udb-space-3) var(--udb-space-4);
|
|
1221
|
+
border-bottom: 1px solid var(--color-border);
|
|
1222
|
+
background: var(--color-card);
|
|
1471
1223
|
}
|
|
1472
|
-
|
|
1473
1224
|
.udb-settings__mobile-lead {
|
|
1474
1225
|
display: flex;
|
|
1475
1226
|
align-items: center;
|
|
1476
|
-
gap: var(--
|
|
1227
|
+
gap: var(--udb-space-2);
|
|
1477
1228
|
min-width: 0;
|
|
1478
1229
|
}
|
|
1479
|
-
|
|
1480
1230
|
.udb-settings__mobile-title {
|
|
1481
1231
|
margin: 0;
|
|
1482
|
-
font-size: var(--
|
|
1232
|
+
font-size: var(--udb-font-size-md);
|
|
1483
1233
|
font-weight: 600;
|
|
1484
|
-
color: var(--
|
|
1234
|
+
color: var(--color-foreground);
|
|
1485
1235
|
white-space: nowrap;
|
|
1486
1236
|
overflow: hidden;
|
|
1487
1237
|
text-overflow: ellipsis;
|
|
1488
1238
|
}
|
|
1489
|
-
|
|
1490
1239
|
.udb-settings__content {
|
|
1491
1240
|
flex: 1;
|
|
1492
1241
|
overflow-y: auto;
|
|
1493
|
-
padding: var(--
|
|
1242
|
+
padding: var(--udb-space-5) var(--udb-space-4);
|
|
1494
1243
|
}
|
|
1495
|
-
|
|
1496
1244
|
.udb-settings__skeleton {
|
|
1497
1245
|
display: flex;
|
|
1498
1246
|
flex-direction: column;
|
|
1499
|
-
gap: var(--
|
|
1247
|
+
gap: var(--udb-space-4);
|
|
1500
1248
|
max-width: 640px;
|
|
1501
1249
|
}
|
|
1502
|
-
|
|
1503
1250
|
.udb-settings__skeleton-list {
|
|
1504
1251
|
display: flex;
|
|
1505
1252
|
flex-direction: column;
|
|
1506
|
-
gap: var(--
|
|
1253
|
+
gap: var(--udb-space-2);
|
|
1507
1254
|
}
|
|
1508
|
-
|
|
1509
1255
|
.udb-settings__skeleton-row {
|
|
1510
1256
|
height: 14px;
|
|
1511
1257
|
width: 100%;
|
|
1512
|
-
border-radius: var(--
|
|
1258
|
+
border-radius: var(--radius-sm);
|
|
1513
1259
|
}
|
|
1514
|
-
|
|
1515
1260
|
@media (min-width: 768px) {
|
|
1516
1261
|
.udb-settings__sidebar {
|
|
1517
1262
|
display: flex;
|
|
1518
1263
|
}
|
|
1519
|
-
|
|
1520
1264
|
.udb-settings__mobile,
|
|
1521
1265
|
.udb-settings__mobile-header {
|
|
1522
1266
|
display: none;
|
|
1523
1267
|
}
|
|
1524
|
-
|
|
1525
1268
|
.udb-settings__content {
|
|
1526
|
-
padding: var(--
|
|
1269
|
+
padding: var(--udb-space-8);
|
|
1527
1270
|
}
|
|
1528
1271
|
}
|
|
1529
|
-
|
|
1530
|
-
/* Settings nav sections (shared by desktop & mobile drawers). */
|
|
1531
1272
|
.udb-settings-nav {
|
|
1532
1273
|
display: flex;
|
|
1533
1274
|
flex-direction: column;
|
|
1534
|
-
gap: var(--
|
|
1275
|
+
gap: var(--udb-space-5);
|
|
1535
1276
|
}
|
|
1536
|
-
|
|
1537
1277
|
.udb-settings-nav__title {
|
|
1538
1278
|
margin: 0;
|
|
1539
|
-
padding: 0 var(--
|
|
1279
|
+
padding: 0 var(--udb-space-3);
|
|
1540
1280
|
font-size: 10px;
|
|
1541
|
-
font-weight: var(--
|
|
1281
|
+
font-weight: var(--font-weight-bold);
|
|
1542
1282
|
text-transform: uppercase;
|
|
1543
1283
|
letter-spacing: 0.1em;
|
|
1544
|
-
color: var(--
|
|
1284
|
+
color: var(--color-muted-foreground);
|
|
1545
1285
|
}
|
|
1546
|
-
|
|
1547
1286
|
.udb-settings-nav__items {
|
|
1548
1287
|
display: flex;
|
|
1549
1288
|
flex-direction: column;
|
|
1550
1289
|
gap: 2px;
|
|
1551
1290
|
}
|
|
1552
|
-
|
|
1553
1291
|
.udb-settings-nav__item {
|
|
1554
1292
|
display: flex;
|
|
1555
1293
|
width: 100%;
|
|
1556
1294
|
align-items: center;
|
|
1557
|
-
gap: var(--
|
|
1558
|
-
padding: var(--
|
|
1295
|
+
gap: var(--udb-space-3);
|
|
1296
|
+
padding: var(--udb-space-2) var(--udb-space-3);
|
|
1559
1297
|
border: none;
|
|
1560
|
-
border-radius: var(--
|
|
1298
|
+
border-radius: var(--radius-md);
|
|
1561
1299
|
background: transparent;
|
|
1562
1300
|
font-family: inherit;
|
|
1563
|
-
font-size: var(--
|
|
1564
|
-
color: var(--
|
|
1301
|
+
font-size: var(--udb-font-size-md);
|
|
1302
|
+
color: var(--color-foreground);
|
|
1565
1303
|
opacity: 0.75;
|
|
1566
1304
|
text-align: left;
|
|
1567
1305
|
text-decoration: none;
|
|
1568
1306
|
cursor: pointer;
|
|
1569
1307
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
1570
1308
|
}
|
|
1571
|
-
|
|
1572
1309
|
.udb-settings-nav__item:hover {
|
|
1573
|
-
background: var(--
|
|
1310
|
+
background: var(--color-muted);
|
|
1574
1311
|
opacity: 1;
|
|
1575
1312
|
}
|
|
1576
|
-
|
|
1577
1313
|
.udb-settings-nav__item--active {
|
|
1578
|
-
background: var(--
|
|
1579
|
-
color: var(--
|
|
1314
|
+
background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
|
|
1315
|
+
color: var(--color-primary);
|
|
1580
1316
|
opacity: 1;
|
|
1581
|
-
font-weight: var(--
|
|
1317
|
+
font-weight: var(--font-weight-medium);
|
|
1582
1318
|
}
|
|
1583
|
-
|
|
1584
1319
|
.udb-settings-nav__item-icon {
|
|
1585
1320
|
width: 16px;
|
|
1586
1321
|
height: 16px;
|
|
1587
1322
|
flex-shrink: 0;
|
|
1588
1323
|
}
|
|
1589
|
-
|
|
1590
1324
|
.udb-settings-nav__item-label {
|
|
1591
1325
|
flex: 1;
|
|
1592
1326
|
min-width: 0;
|
|
@@ -1594,273 +1328,222 @@
|
|
|
1594
1328
|
overflow: hidden;
|
|
1595
1329
|
text-overflow: ellipsis;
|
|
1596
1330
|
}
|
|
1597
|
-
|
|
1598
1331
|
.udb-settings-nav__badge {
|
|
1599
|
-
padding: 1px var(--
|
|
1600
|
-
border-radius: var(--
|
|
1601
|
-
background: var(--
|
|
1602
|
-
color: var(--
|
|
1332
|
+
padding: 1px var(--udb-space-2);
|
|
1333
|
+
border-radius: var(--udb-radius-pill);
|
|
1334
|
+
background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
|
|
1335
|
+
color: var(--color-primary);
|
|
1603
1336
|
font-size: 10px;
|
|
1604
|
-
font-weight: var(--
|
|
1337
|
+
font-weight: var(--font-weight-bold);
|
|
1605
1338
|
}
|
|
1606
|
-
|
|
1607
1339
|
.udb-settings-nav__chevron {
|
|
1608
1340
|
width: 14px;
|
|
1609
1341
|
height: 14px;
|
|
1610
|
-
color: var(--
|
|
1342
|
+
color: var(--color-muted-foreground);
|
|
1611
1343
|
flex-shrink: 0;
|
|
1612
1344
|
}
|
|
1613
|
-
|
|
1614
|
-
/* ============================================================
|
|
1615
|
-
* 10. Analytics
|
|
1616
|
-
* ============================================================ */
|
|
1617
|
-
|
|
1618
1345
|
.udb-analytics {
|
|
1619
1346
|
display: flex;
|
|
1620
1347
|
flex-direction: column;
|
|
1621
|
-
gap: var(--
|
|
1348
|
+
gap: var(--udb-space-6);
|
|
1622
1349
|
width: 100%;
|
|
1623
1350
|
}
|
|
1624
|
-
|
|
1625
1351
|
.udb-analytics__header {
|
|
1626
1352
|
display: flex;
|
|
1627
1353
|
align-items: center;
|
|
1628
1354
|
justify-content: space-between;
|
|
1629
1355
|
flex-wrap: wrap;
|
|
1630
|
-
gap: var(--
|
|
1356
|
+
gap: var(--udb-space-3);
|
|
1631
1357
|
}
|
|
1632
|
-
|
|
1633
1358
|
.udb-analytics__heading {
|
|
1634
1359
|
min-width: 0;
|
|
1635
1360
|
}
|
|
1636
|
-
|
|
1637
1361
|
.udb-analytics__title {
|
|
1638
1362
|
margin: 0;
|
|
1639
|
-
font-size: var(--
|
|
1640
|
-
font-weight: var(--
|
|
1363
|
+
font-size: var(--udb-font-size-3xl);
|
|
1364
|
+
font-weight: var(--font-weight-bold);
|
|
1641
1365
|
letter-spacing: -0.02em;
|
|
1642
1366
|
line-height: 1.2;
|
|
1643
|
-
color: var(--
|
|
1367
|
+
color: var(--color-foreground);
|
|
1644
1368
|
}
|
|
1645
|
-
|
|
1646
1369
|
.udb-analytics__description {
|
|
1647
|
-
margin: var(--
|
|
1648
|
-
font-size: var(--
|
|
1649
|
-
color: var(--
|
|
1370
|
+
margin: var(--udb-space-1) 0 0;
|
|
1371
|
+
font-size: var(--udb-font-size-md);
|
|
1372
|
+
color: var(--color-muted-foreground);
|
|
1650
1373
|
}
|
|
1651
|
-
|
|
1652
1374
|
.udb-analytics__actions {
|
|
1653
1375
|
display: flex;
|
|
1654
1376
|
align-items: center;
|
|
1655
1377
|
flex-wrap: wrap;
|
|
1656
|
-
gap: var(--
|
|
1378
|
+
gap: var(--udb-space-2);
|
|
1657
1379
|
}
|
|
1658
|
-
|
|
1659
1380
|
.udb-analytics__action-icon {
|
|
1660
1381
|
width: 16px;
|
|
1661
1382
|
height: 16px;
|
|
1662
1383
|
}
|
|
1663
|
-
|
|
1664
1384
|
.udb-analytics__loading {
|
|
1665
1385
|
display: flex;
|
|
1666
1386
|
align-items: center;
|
|
1667
1387
|
justify-content: center;
|
|
1668
|
-
padding: var(--
|
|
1388
|
+
padding: var(--udb-space-8) 0;
|
|
1669
1389
|
}
|
|
1670
|
-
|
|
1671
1390
|
.udb-analytics__loading-spinner {
|
|
1672
1391
|
width: 48px;
|
|
1673
1392
|
height: 48px;
|
|
1674
|
-
color: var(--
|
|
1393
|
+
color: var(--color-muted-foreground);
|
|
1675
1394
|
}
|
|
1676
|
-
|
|
1677
1395
|
.udb-analytics__metrics {
|
|
1678
1396
|
display: grid;
|
|
1679
1397
|
grid-template-columns: 1fr;
|
|
1680
|
-
gap: var(--
|
|
1398
|
+
gap: var(--udb-space-4);
|
|
1681
1399
|
}
|
|
1682
|
-
|
|
1683
1400
|
.udb-analytics__charts {
|
|
1684
1401
|
display: grid;
|
|
1685
1402
|
grid-template-columns: 1fr;
|
|
1686
|
-
gap: var(--
|
|
1403
|
+
gap: var(--udb-space-6);
|
|
1687
1404
|
}
|
|
1688
|
-
|
|
1689
1405
|
@media (min-width: 640px) {
|
|
1690
1406
|
.udb-analytics__metrics {
|
|
1691
1407
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1692
1408
|
}
|
|
1693
1409
|
}
|
|
1694
|
-
|
|
1695
1410
|
@media (min-width: 1024px) {
|
|
1696
1411
|
.udb-analytics__metrics--wide {
|
|
1697
1412
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1698
1413
|
}
|
|
1699
|
-
|
|
1700
1414
|
.udb-analytics__charts {
|
|
1701
1415
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1702
1416
|
}
|
|
1703
1417
|
}
|
|
1704
|
-
|
|
1705
|
-
/* Period selector chip. */
|
|
1706
1418
|
.udb-period-select {
|
|
1707
1419
|
display: flex;
|
|
1708
1420
|
align-items: center;
|
|
1709
|
-
gap: var(--
|
|
1421
|
+
gap: var(--udb-space-2);
|
|
1710
1422
|
height: 36px;
|
|
1711
|
-
padding: 0 var(--
|
|
1712
|
-
border: 1px solid var(--
|
|
1713
|
-
border-radius: var(--
|
|
1714
|
-
background: var(--
|
|
1423
|
+
padding: 0 var(--udb-space-3);
|
|
1424
|
+
border: 1px solid var(--udb-border-strong);
|
|
1425
|
+
border-radius: var(--radius-md);
|
|
1426
|
+
background: var(--color-card);
|
|
1715
1427
|
}
|
|
1716
|
-
|
|
1717
1428
|
.udb-period-select__icon {
|
|
1718
1429
|
width: 16px;
|
|
1719
1430
|
height: 16px;
|
|
1720
|
-
color: var(--
|
|
1431
|
+
color: var(--color-muted-foreground);
|
|
1721
1432
|
flex-shrink: 0;
|
|
1722
1433
|
}
|
|
1723
|
-
|
|
1724
1434
|
.udb-period-select__select {
|
|
1725
1435
|
height: 100%;
|
|
1726
1436
|
border: none;
|
|
1727
1437
|
background: transparent;
|
|
1728
1438
|
font-family: inherit;
|
|
1729
|
-
font-size: var(--
|
|
1730
|
-
color: var(--
|
|
1439
|
+
font-size: var(--udb-font-size-sm);
|
|
1440
|
+
color: var(--color-foreground);
|
|
1731
1441
|
outline: none;
|
|
1732
1442
|
cursor: pointer;
|
|
1733
1443
|
}
|
|
1734
|
-
|
|
1735
|
-
/* Chart card internals. */
|
|
1736
1444
|
.udb-analytics-card__status {
|
|
1737
1445
|
display: flex;
|
|
1738
1446
|
align-items: center;
|
|
1739
1447
|
justify-content: center;
|
|
1740
|
-
gap: var(--
|
|
1448
|
+
gap: var(--udb-space-3);
|
|
1741
1449
|
min-height: 192px;
|
|
1742
1450
|
}
|
|
1743
|
-
|
|
1744
1451
|
.udb-analytics-card__status--error {
|
|
1745
|
-
color: var(--
|
|
1452
|
+
color: var(--color-destructive);
|
|
1746
1453
|
}
|
|
1747
|
-
|
|
1748
1454
|
.udb-analytics-card__spinner {
|
|
1749
1455
|
width: 32px;
|
|
1750
1456
|
height: 32px;
|
|
1751
|
-
color: var(--
|
|
1457
|
+
color: var(--color-muted-foreground);
|
|
1752
1458
|
}
|
|
1753
|
-
|
|
1754
1459
|
.udb-analytics-card__error-icon {
|
|
1755
1460
|
width: 20px;
|
|
1756
1461
|
height: 20px;
|
|
1757
1462
|
flex-shrink: 0;
|
|
1758
1463
|
}
|
|
1759
|
-
|
|
1760
1464
|
.udb-analytics-card__error-text {
|
|
1761
1465
|
margin: 0;
|
|
1762
|
-
font-size: var(--
|
|
1466
|
+
font-size: var(--udb-font-size-md);
|
|
1763
1467
|
}
|
|
1764
|
-
|
|
1765
1468
|
.udb-analytics-card__header {
|
|
1766
|
-
margin-bottom: var(--
|
|
1469
|
+
margin-bottom: var(--udb-space-6);
|
|
1767
1470
|
}
|
|
1768
|
-
|
|
1769
1471
|
.udb-analytics-card__title {
|
|
1770
1472
|
margin: 0;
|
|
1771
|
-
font-size: var(--
|
|
1473
|
+
font-size: var(--udb-font-size-lg);
|
|
1772
1474
|
font-weight: 600;
|
|
1773
|
-
color: var(--
|
|
1475
|
+
color: var(--color-foreground);
|
|
1774
1476
|
}
|
|
1775
|
-
|
|
1776
1477
|
.udb-analytics-card__description {
|
|
1777
|
-
margin: var(--
|
|
1778
|
-
font-size: var(--
|
|
1779
|
-
color: var(--
|
|
1478
|
+
margin: var(--udb-space-1) 0 0;
|
|
1479
|
+
font-size: var(--udb-font-size-sm);
|
|
1480
|
+
color: var(--color-muted-foreground);
|
|
1780
1481
|
}
|
|
1781
|
-
|
|
1782
1482
|
.udb-analytics-card__metrics {
|
|
1783
1483
|
display: grid;
|
|
1784
1484
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
1785
|
-
gap: var(--
|
|
1786
|
-
margin-top: var(--
|
|
1485
|
+
gap: var(--udb-space-4);
|
|
1486
|
+
margin-top: var(--udb-space-4);
|
|
1787
1487
|
}
|
|
1788
|
-
|
|
1789
|
-
/* Chart container + dependency-free SVG renderer surfaces. */
|
|
1790
1488
|
.udb-chart {
|
|
1791
1489
|
position: relative;
|
|
1792
1490
|
width: 100%;
|
|
1793
1491
|
}
|
|
1794
|
-
|
|
1795
1492
|
.udb-chart__empty {
|
|
1796
1493
|
display: flex;
|
|
1797
1494
|
align-items: center;
|
|
1798
1495
|
justify-content: center;
|
|
1799
1496
|
height: 100%;
|
|
1800
1497
|
min-height: 192px;
|
|
1801
|
-
padding: var(--
|
|
1498
|
+
padding: var(--udb-space-6);
|
|
1802
1499
|
text-align: center;
|
|
1803
|
-
font-size: var(--
|
|
1804
|
-
color: var(--
|
|
1500
|
+
font-size: var(--udb-font-size-md);
|
|
1501
|
+
color: var(--color-muted-foreground);
|
|
1805
1502
|
}
|
|
1806
|
-
|
|
1807
1503
|
.udb-chart__axis {
|
|
1808
|
-
font-size: var(--
|
|
1809
|
-
fill: var(--
|
|
1504
|
+
font-size: var(--udb-font-size-sm);
|
|
1505
|
+
fill: var(--color-muted-foreground);
|
|
1810
1506
|
}
|
|
1811
|
-
|
|
1812
1507
|
.udb-chart__grid {
|
|
1813
|
-
stroke: var(--
|
|
1508
|
+
stroke: var(--color-border);
|
|
1814
1509
|
}
|
|
1815
|
-
|
|
1816
1510
|
.udb-chart__svg {
|
|
1817
1511
|
display: block;
|
|
1818
1512
|
width: 100%;
|
|
1819
1513
|
height: 100%;
|
|
1820
1514
|
overflow: visible;
|
|
1821
1515
|
}
|
|
1822
|
-
|
|
1823
1516
|
.udb-chart__legend {
|
|
1824
1517
|
display: flex;
|
|
1825
1518
|
align-items: center;
|
|
1826
1519
|
justify-content: center;
|
|
1827
1520
|
flex-wrap: wrap;
|
|
1828
|
-
gap: var(--
|
|
1829
|
-
margin-top: var(--
|
|
1521
|
+
gap: var(--udb-space-3);
|
|
1522
|
+
margin-top: var(--udb-space-3);
|
|
1830
1523
|
}
|
|
1831
|
-
|
|
1832
1524
|
.udb-chart__chip {
|
|
1833
1525
|
display: inline-flex;
|
|
1834
1526
|
align-items: center;
|
|
1835
|
-
gap: var(--
|
|
1836
|
-
font-size: var(--
|
|
1837
|
-
color: var(--
|
|
1527
|
+
gap: var(--udb-space-2);
|
|
1528
|
+
font-size: var(--udb-font-size-sm);
|
|
1529
|
+
color: var(--color-muted-foreground);
|
|
1838
1530
|
}
|
|
1839
|
-
|
|
1840
1531
|
.udb-chart__chip-dot {
|
|
1841
1532
|
width: 8px;
|
|
1842
1533
|
height: 8px;
|
|
1843
1534
|
border-radius: 50%;
|
|
1844
1535
|
flex-shrink: 0;
|
|
1845
1536
|
}
|
|
1846
|
-
|
|
1847
|
-
/* ============================================================
|
|
1848
|
-
* 11. Shared blocks — empty state, tables, org switcher, matrix,
|
|
1849
|
-
* audit list (used by guards, session and settings skeletons)
|
|
1850
|
-
* ============================================================ */
|
|
1851
|
-
|
|
1852
|
-
/* Generic empty / forbidden state. */
|
|
1853
1537
|
.udb-empty {
|
|
1854
1538
|
display: flex;
|
|
1855
1539
|
flex-direction: column;
|
|
1856
1540
|
align-items: center;
|
|
1857
1541
|
justify-content: center;
|
|
1858
|
-
gap: var(--
|
|
1859
|
-
padding: var(--
|
|
1542
|
+
gap: var(--udb-space-3);
|
|
1543
|
+
padding: var(--udb-space-8) var(--udb-space-6);
|
|
1860
1544
|
text-align: center;
|
|
1861
|
-
color: var(--
|
|
1545
|
+
color: var(--color-muted-foreground);
|
|
1862
1546
|
}
|
|
1863
|
-
|
|
1864
1547
|
.udb-empty__icon {
|
|
1865
1548
|
display: flex;
|
|
1866
1549
|
align-items: center;
|
|
@@ -1868,109 +1551,90 @@
|
|
|
1868
1551
|
width: 40px;
|
|
1869
1552
|
height: 40px;
|
|
1870
1553
|
border-radius: 50%;
|
|
1871
|
-
background: var(--
|
|
1554
|
+
background: var(--color-muted);
|
|
1872
1555
|
}
|
|
1873
|
-
|
|
1874
1556
|
.udb-empty__glyph {
|
|
1875
1557
|
width: 20px;
|
|
1876
1558
|
height: 20px;
|
|
1877
|
-
color: var(--
|
|
1559
|
+
color: var(--color-muted-foreground);
|
|
1878
1560
|
opacity: 0.7;
|
|
1879
1561
|
}
|
|
1880
|
-
|
|
1881
1562
|
.udb-empty__text {
|
|
1882
1563
|
margin: 0;
|
|
1883
|
-
font-size: var(--
|
|
1884
|
-
font-weight: var(--
|
|
1885
|
-
color: var(--
|
|
1564
|
+
font-size: var(--udb-font-size-md);
|
|
1565
|
+
font-weight: var(--font-weight-medium);
|
|
1566
|
+
color: var(--color-foreground);
|
|
1886
1567
|
}
|
|
1887
|
-
|
|
1888
1568
|
.udb-empty__hint {
|
|
1889
1569
|
margin: 0;
|
|
1890
|
-
font-size: var(--
|
|
1891
|
-
color: var(--
|
|
1570
|
+
font-size: var(--udb-font-size-sm);
|
|
1571
|
+
color: var(--color-muted-foreground);
|
|
1892
1572
|
}
|
|
1893
|
-
|
|
1894
|
-
/* Data tables (user management, permission matrix). */
|
|
1895
1573
|
.udb-table__wrap {
|
|
1896
1574
|
width: 100%;
|
|
1897
1575
|
overflow-x: auto;
|
|
1898
|
-
border: 1px solid var(--
|
|
1899
|
-
border-radius: var(--
|
|
1900
|
-
background: var(--
|
|
1576
|
+
border: 1px solid var(--color-border);
|
|
1577
|
+
border-radius: var(--radius-lg);
|
|
1578
|
+
background: var(--color-card);
|
|
1901
1579
|
}
|
|
1902
|
-
|
|
1903
1580
|
.udb-table {
|
|
1904
1581
|
width: 100%;
|
|
1905
1582
|
border-collapse: collapse;
|
|
1906
|
-
font-size: var(--
|
|
1583
|
+
font-size: var(--udb-font-size-md);
|
|
1907
1584
|
}
|
|
1908
|
-
|
|
1909
1585
|
.udb-table__th {
|
|
1910
|
-
padding: var(--
|
|
1911
|
-
border-bottom: 1px solid var(--
|
|
1586
|
+
padding: var(--udb-space-2) var(--udb-space-3);
|
|
1587
|
+
border-bottom: 1px solid var(--udb-border-strong);
|
|
1912
1588
|
text-align: left;
|
|
1913
|
-
font-size: var(--
|
|
1914
|
-
font-weight: var(--
|
|
1589
|
+
font-size: var(--udb-font-size-xs);
|
|
1590
|
+
font-weight: var(--font-weight-bold);
|
|
1915
1591
|
text-transform: uppercase;
|
|
1916
1592
|
letter-spacing: 0.06em;
|
|
1917
|
-
color: var(--
|
|
1593
|
+
color: var(--color-muted-foreground);
|
|
1918
1594
|
white-space: nowrap;
|
|
1919
1595
|
}
|
|
1920
|
-
|
|
1921
1596
|
.udb-table__th--code {
|
|
1922
1597
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
1923
1598
|
text-transform: none;
|
|
1924
1599
|
letter-spacing: 0;
|
|
1925
1600
|
}
|
|
1926
|
-
|
|
1927
1601
|
.udb-table__td {
|
|
1928
|
-
padding: var(--
|
|
1929
|
-
border-bottom: 1px solid var(--
|
|
1930
|
-
color: var(--
|
|
1602
|
+
padding: var(--udb-space-3);
|
|
1603
|
+
border-bottom: 1px solid var(--color-border);
|
|
1604
|
+
color: var(--color-foreground);
|
|
1931
1605
|
}
|
|
1932
|
-
|
|
1933
1606
|
.udb-table__row:last-child .udb-table__td {
|
|
1934
1607
|
border-bottom: none;
|
|
1935
1608
|
}
|
|
1936
|
-
|
|
1937
1609
|
.udb-table__row:hover .udb-table__td {
|
|
1938
|
-
background: var(--
|
|
1610
|
+
background: var(--color-muted);
|
|
1939
1611
|
}
|
|
1940
|
-
|
|
1941
1612
|
.udb-table__td--strong {
|
|
1942
|
-
font-weight: var(--
|
|
1613
|
+
font-weight: var(--font-weight-medium);
|
|
1943
1614
|
white-space: nowrap;
|
|
1944
1615
|
}
|
|
1945
|
-
|
|
1946
1616
|
.udb-table__td--center {
|
|
1947
1617
|
text-align: center;
|
|
1948
1618
|
}
|
|
1949
|
-
|
|
1950
|
-
/* Org switcher (reuses udb-profile-btn / udb-avatar / udb-menu). */
|
|
1951
1619
|
.udb-org {
|
|
1952
1620
|
display: flex;
|
|
1953
1621
|
flex-direction: column;
|
|
1954
1622
|
align-items: flex-start;
|
|
1955
1623
|
line-height: 1.2;
|
|
1956
1624
|
}
|
|
1957
|
-
|
|
1958
1625
|
.udb-org__name {
|
|
1959
|
-
font-size: var(--
|
|
1960
|
-
font-weight: var(--
|
|
1961
|
-
color: var(--
|
|
1626
|
+
font-size: var(--udb-font-size-md);
|
|
1627
|
+
font-weight: var(--font-weight-medium);
|
|
1628
|
+
color: var(--color-foreground);
|
|
1962
1629
|
}
|
|
1963
|
-
|
|
1964
1630
|
.udb-org__meta {
|
|
1965
1631
|
font-size: 10px;
|
|
1966
1632
|
text-transform: capitalize;
|
|
1967
|
-
color: var(--
|
|
1633
|
+
color: var(--color-muted-foreground);
|
|
1968
1634
|
}
|
|
1969
|
-
|
|
1970
1635
|
.udb-org-menu {
|
|
1971
|
-
padding: var(--
|
|
1636
|
+
padding: var(--udb-space-2);
|
|
1972
1637
|
}
|
|
1973
|
-
|
|
1974
1638
|
.udb-org-menu__label {
|
|
1975
1639
|
flex: 1;
|
|
1976
1640
|
min-width: 0;
|
|
@@ -1978,298 +1642,249 @@
|
|
|
1978
1642
|
text-overflow: ellipsis;
|
|
1979
1643
|
white-space: nowrap;
|
|
1980
1644
|
}
|
|
1981
|
-
|
|
1982
1645
|
.udb-org-menu__check {
|
|
1983
1646
|
width: 14px;
|
|
1984
1647
|
height: 14px;
|
|
1985
|
-
color: var(--
|
|
1648
|
+
color: var(--color-primary);
|
|
1986
1649
|
}
|
|
1987
|
-
|
|
1988
1650
|
.udb-menu__item--active {
|
|
1989
|
-
background: var(--
|
|
1990
|
-
color: var(--
|
|
1991
|
-
font-weight: var(--
|
|
1651
|
+
background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
|
|
1652
|
+
color: var(--color-primary);
|
|
1653
|
+
font-weight: var(--font-weight-medium);
|
|
1992
1654
|
}
|
|
1993
|
-
|
|
1994
|
-
/* Permission matrix cells. */
|
|
1995
1655
|
.udb-matrix__cell {
|
|
1996
1656
|
display: inline-flex;
|
|
1997
1657
|
align-items: center;
|
|
1998
1658
|
justify-content: center;
|
|
1999
1659
|
width: 28px;
|
|
2000
1660
|
height: 28px;
|
|
2001
|
-
border: 1px solid var(--
|
|
2002
|
-
border-radius: var(--
|
|
2003
|
-
background: var(--
|
|
1661
|
+
border: 1px solid var(--udb-border-strong);
|
|
1662
|
+
border-radius: var(--radius-sm);
|
|
1663
|
+
background: var(--color-card);
|
|
2004
1664
|
cursor: pointer;
|
|
2005
1665
|
}
|
|
2006
|
-
|
|
2007
1666
|
.udb-matrix__cell:hover {
|
|
2008
|
-
border-color: var(--
|
|
1667
|
+
border-color: var(--color-primary);
|
|
2009
1668
|
}
|
|
2010
|
-
|
|
2011
1669
|
.udb-matrix__cell--on {
|
|
2012
|
-
border-color: var(--
|
|
2013
|
-
background: var(--
|
|
1670
|
+
border-color: var(--color-primary);
|
|
1671
|
+
background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
|
|
2014
1672
|
}
|
|
2015
|
-
|
|
2016
1673
|
.udb-matrix__check {
|
|
2017
1674
|
width: 14px;
|
|
2018
1675
|
height: 14px;
|
|
2019
|
-
color: var(--
|
|
1676
|
+
color: var(--color-success);
|
|
2020
1677
|
}
|
|
2021
|
-
|
|
2022
1678
|
.udb-matrix__deny {
|
|
2023
1679
|
width: 14px;
|
|
2024
1680
|
height: 14px;
|
|
2025
|
-
color: var(--
|
|
1681
|
+
color: var(--color-muted-foreground);
|
|
2026
1682
|
opacity: 0.5;
|
|
2027
1683
|
}
|
|
2028
|
-
|
|
2029
|
-
/* Audit log rows. */
|
|
2030
1684
|
.udb-audit {
|
|
2031
1685
|
display: flex;
|
|
2032
1686
|
flex-direction: column;
|
|
2033
1687
|
margin: 0;
|
|
2034
1688
|
padding: 0;
|
|
2035
1689
|
list-style: none;
|
|
2036
|
-
border: 1px solid var(--
|
|
2037
|
-
border-radius: var(--
|
|
2038
|
-
background: var(--
|
|
1690
|
+
border: 1px solid var(--color-border);
|
|
1691
|
+
border-radius: var(--radius-lg);
|
|
1692
|
+
background: var(--color-card);
|
|
2039
1693
|
overflow: hidden;
|
|
2040
1694
|
}
|
|
2041
|
-
|
|
2042
1695
|
.udb-audit__item {
|
|
2043
1696
|
display: flex;
|
|
2044
1697
|
align-items: baseline;
|
|
2045
|
-
gap: var(--
|
|
2046
|
-
padding: var(--
|
|
2047
|
-
border-bottom: 1px solid var(--
|
|
2048
|
-
font-size: var(--
|
|
1698
|
+
gap: var(--udb-space-4);
|
|
1699
|
+
padding: var(--udb-space-3) var(--udb-space-4);
|
|
1700
|
+
border-bottom: 1px solid var(--color-border);
|
|
1701
|
+
font-size: var(--udb-font-size-md);
|
|
2049
1702
|
}
|
|
2050
|
-
|
|
2051
1703
|
.udb-audit__item:last-child {
|
|
2052
1704
|
border-bottom: none;
|
|
2053
1705
|
}
|
|
2054
|
-
|
|
2055
1706
|
.udb-audit__at {
|
|
2056
1707
|
flex-shrink: 0;
|
|
2057
1708
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
2058
|
-
font-size: var(--
|
|
2059
|
-
color: var(--
|
|
1709
|
+
font-size: var(--udb-font-size-sm);
|
|
1710
|
+
color: var(--color-muted-foreground);
|
|
2060
1711
|
}
|
|
2061
|
-
|
|
2062
1712
|
.udb-audit__actor {
|
|
2063
1713
|
flex-shrink: 0;
|
|
2064
|
-
font-weight: var(--
|
|
2065
|
-
color: var(--
|
|
1714
|
+
font-weight: var(--font-weight-medium);
|
|
1715
|
+
color: var(--color-foreground);
|
|
2066
1716
|
}
|
|
2067
|
-
|
|
2068
1717
|
.udb-audit__action {
|
|
2069
1718
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
2070
|
-
font-size: var(--
|
|
2071
|
-
color: var(--
|
|
1719
|
+
font-size: var(--udb-font-size-sm);
|
|
1720
|
+
color: var(--color-primary);
|
|
2072
1721
|
}
|
|
2073
|
-
|
|
2074
1722
|
.udb-audit__target {
|
|
2075
1723
|
min-width: 0;
|
|
2076
1724
|
overflow: hidden;
|
|
2077
1725
|
text-overflow: ellipsis;
|
|
2078
1726
|
white-space: nowrap;
|
|
2079
|
-
color: var(--
|
|
1727
|
+
color: var(--color-muted-foreground);
|
|
2080
1728
|
}
|
|
2081
|
-
|
|
2082
|
-
/* ============================================================
|
|
2083
|
-
* 12. Charts — card frame, legend, hover tooltip
|
|
2084
|
-
* ============================================================ */
|
|
2085
|
-
|
|
2086
1729
|
.udb-chartcard {
|
|
2087
1730
|
display: flex;
|
|
2088
1731
|
flex-direction: column;
|
|
2089
1732
|
min-width: 0;
|
|
2090
|
-
background: var(--
|
|
2091
|
-
border: 1px solid var(--
|
|
2092
|
-
border-radius: var(--
|
|
2093
|
-
box-shadow: var(--
|
|
1733
|
+
background: var(--color-card);
|
|
1734
|
+
border: 1px solid var(--color-border);
|
|
1735
|
+
border-radius: var(--radius-lg);
|
|
1736
|
+
box-shadow: var(--shadow-sm);
|
|
2094
1737
|
}
|
|
2095
|
-
|
|
2096
1738
|
.udb-chartcard__head {
|
|
2097
1739
|
display: flex;
|
|
2098
1740
|
align-items: flex-start;
|
|
2099
1741
|
justify-content: space-between;
|
|
2100
|
-
gap: var(--
|
|
1742
|
+
gap: var(--udb-space-3);
|
|
2101
1743
|
padding: 14px 18px 4px;
|
|
2102
1744
|
flex-wrap: wrap;
|
|
2103
1745
|
}
|
|
2104
|
-
|
|
2105
1746
|
.udb-chartcard__heading {
|
|
2106
1747
|
min-width: 0;
|
|
2107
1748
|
}
|
|
2108
|
-
|
|
2109
1749
|
.udb-chartcard__title {
|
|
2110
|
-
font-size: var(--
|
|
1750
|
+
font-size: var(--udb-font-size-md);
|
|
2111
1751
|
font-weight: 600;
|
|
2112
|
-
color: var(--
|
|
1752
|
+
color: var(--color-foreground);
|
|
2113
1753
|
}
|
|
2114
|
-
|
|
2115
1754
|
.udb-chartcard__sub {
|
|
2116
|
-
font-size: var(--
|
|
2117
|
-
color: var(--
|
|
1755
|
+
font-size: var(--udb-font-size-sm);
|
|
1756
|
+
color: var(--color-muted-foreground);
|
|
2118
1757
|
margin-top: 1px;
|
|
2119
1758
|
}
|
|
2120
|
-
|
|
2121
1759
|
.udb-chartcard__tools {
|
|
2122
1760
|
display: flex;
|
|
2123
1761
|
align-items: center;
|
|
2124
1762
|
gap: 12px;
|
|
2125
1763
|
flex-wrap: wrap;
|
|
2126
1764
|
}
|
|
2127
|
-
|
|
2128
1765
|
.udb-chartcard__body {
|
|
2129
1766
|
padding: 10px 14px 14px;
|
|
2130
1767
|
min-width: 0;
|
|
2131
1768
|
}
|
|
2132
|
-
|
|
2133
1769
|
.udb-chartcard__body svg {
|
|
2134
1770
|
display: block;
|
|
2135
1771
|
width: 100%;
|
|
2136
1772
|
height: auto;
|
|
2137
1773
|
}
|
|
2138
|
-
|
|
2139
1774
|
.udb-chartcard__plot {
|
|
2140
1775
|
position: relative;
|
|
2141
1776
|
}
|
|
2142
|
-
|
|
2143
1777
|
.udb-chartlegend {
|
|
2144
1778
|
display: flex;
|
|
2145
1779
|
flex-wrap: wrap;
|
|
2146
1780
|
gap: 5px 14px;
|
|
2147
1781
|
}
|
|
2148
|
-
|
|
2149
1782
|
.udb-chartlegend__item {
|
|
2150
1783
|
display: inline-flex;
|
|
2151
1784
|
align-items: center;
|
|
2152
1785
|
gap: 6px;
|
|
2153
|
-
font-size: var(--
|
|
2154
|
-
color: var(--
|
|
1786
|
+
font-size: var(--udb-font-size-sm);
|
|
1787
|
+
color: var(--color-foreground);
|
|
2155
1788
|
white-space: nowrap;
|
|
2156
1789
|
}
|
|
2157
|
-
|
|
2158
1790
|
.udb-chartlegend__dot {
|
|
2159
1791
|
width: 8px;
|
|
2160
1792
|
height: 8px;
|
|
2161
1793
|
border-radius: 2.5px;
|
|
2162
1794
|
flex: none;
|
|
2163
1795
|
}
|
|
2164
|
-
|
|
2165
1796
|
.udb-chartlegend__value {
|
|
2166
1797
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
2167
|
-
color: var(--
|
|
2168
|
-
font-size: var(--
|
|
1798
|
+
color: var(--color-muted-foreground);
|
|
1799
|
+
font-size: var(--udb-font-size-xs);
|
|
2169
1800
|
}
|
|
2170
|
-
|
|
2171
1801
|
.udb-chartlegend__hint {
|
|
2172
|
-
color: var(--
|
|
2173
|
-
font-size: var(--
|
|
1802
|
+
color: var(--color-muted-foreground);
|
|
1803
|
+
font-size: var(--udb-font-size-xs);
|
|
2174
1804
|
}
|
|
2175
|
-
|
|
2176
1805
|
.udb-charttip {
|
|
2177
1806
|
position: absolute;
|
|
2178
1807
|
pointer-events: none;
|
|
2179
|
-
background: var(--
|
|
2180
|
-
color: var(--
|
|
2181
|
-
border-radius: var(--
|
|
1808
|
+
background: var(--color-foreground);
|
|
1809
|
+
color: var(--color-background);
|
|
1810
|
+
border-radius: var(--radius-md);
|
|
2182
1811
|
padding: 7px 10px;
|
|
2183
|
-
font-size: var(--
|
|
2184
|
-
box-shadow: var(--
|
|
1812
|
+
font-size: var(--udb-font-size-sm);
|
|
1813
|
+
box-shadow: var(--shadow-lg);
|
|
2185
1814
|
z-index: 30;
|
|
2186
1815
|
min-width: 120px;
|
|
2187
1816
|
transform: translate(-50%, calc(-100% - 10px));
|
|
2188
1817
|
}
|
|
2189
|
-
|
|
2190
1818
|
.udb-charttip__title {
|
|
2191
1819
|
font-weight: 600;
|
|
2192
1820
|
margin-bottom: 2px;
|
|
2193
1821
|
white-space: nowrap;
|
|
2194
1822
|
}
|
|
2195
|
-
|
|
2196
1823
|
.udb-charttip__row {
|
|
2197
1824
|
display: flex;
|
|
2198
1825
|
align-items: center;
|
|
2199
1826
|
gap: 6px;
|
|
2200
1827
|
justify-content: space-between;
|
|
2201
1828
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
2202
|
-
font-size: var(--
|
|
1829
|
+
font-size: var(--udb-font-size-xs);
|
|
2203
1830
|
}
|
|
2204
|
-
|
|
2205
1831
|
.udb-charttip__row b {
|
|
2206
1832
|
font-weight: 600;
|
|
2207
1833
|
}
|
|
2208
|
-
|
|
2209
1834
|
.udb-charttip__label {
|
|
2210
1835
|
display: inline-flex;
|
|
2211
1836
|
align-items: center;
|
|
2212
1837
|
gap: 5px;
|
|
2213
1838
|
}
|
|
2214
|
-
|
|
2215
1839
|
.udb-hbars {
|
|
2216
1840
|
display: flex;
|
|
2217
1841
|
flex-direction: column;
|
|
2218
1842
|
gap: 10px;
|
|
2219
1843
|
}
|
|
2220
|
-
|
|
2221
1844
|
.udb-hbars__row {
|
|
2222
1845
|
display: grid;
|
|
2223
1846
|
grid-template-columns: minmax(120px, 1.2fr) 2fr auto;
|
|
2224
1847
|
align-items: center;
|
|
2225
1848
|
gap: 12px;
|
|
2226
1849
|
}
|
|
2227
|
-
|
|
2228
1850
|
.udb-hbars__label {
|
|
2229
1851
|
min-width: 0;
|
|
2230
1852
|
}
|
|
2231
|
-
|
|
2232
1853
|
.udb-hbars__name {
|
|
2233
1854
|
font-weight: 600;
|
|
2234
|
-
font-size: var(--
|
|
1855
|
+
font-size: var(--udb-font-size-sm);
|
|
2235
1856
|
overflow: hidden;
|
|
2236
1857
|
text-overflow: ellipsis;
|
|
2237
1858
|
white-space: nowrap;
|
|
2238
|
-
color: var(--
|
|
1859
|
+
color: var(--color-foreground);
|
|
2239
1860
|
}
|
|
2240
|
-
|
|
2241
1861
|
.udb-hbars__sub {
|
|
2242
|
-
font-size: var(--
|
|
2243
|
-
color: var(--
|
|
1862
|
+
font-size: var(--udb-font-size-xs);
|
|
1863
|
+
color: var(--color-muted-foreground);
|
|
2244
1864
|
}
|
|
2245
|
-
|
|
2246
1865
|
.udb-hbars__track {
|
|
2247
1866
|
height: 8px;
|
|
2248
|
-
background: var(--
|
|
1867
|
+
background: var(--color-border);
|
|
2249
1868
|
border-radius: 999px;
|
|
2250
1869
|
overflow: hidden;
|
|
2251
1870
|
}
|
|
2252
|
-
|
|
2253
1871
|
.udb-hbars__fill {
|
|
2254
1872
|
height: 100%;
|
|
2255
|
-
background: var(--
|
|
1873
|
+
background: var(--color-primary);
|
|
2256
1874
|
border-radius: 999px;
|
|
2257
1875
|
}
|
|
2258
|
-
|
|
2259
1876
|
.udb-hbars__value {
|
|
2260
|
-
font-size: var(--
|
|
2261
|
-
color: var(--
|
|
1877
|
+
font-size: var(--udb-font-size-sm);
|
|
1878
|
+
color: var(--color-foreground);
|
|
2262
1879
|
text-align: right;
|
|
2263
1880
|
font-variant-numeric: tabular-nums;
|
|
2264
1881
|
}
|
|
2265
|
-
|
|
2266
1882
|
.udb-barchart {
|
|
2267
1883
|
display: flex;
|
|
2268
1884
|
align-items: flex-end;
|
|
2269
1885
|
gap: 3px;
|
|
2270
1886
|
width: 100%;
|
|
2271
1887
|
}
|
|
2272
|
-
|
|
2273
1888
|
.udb-barchart__col {
|
|
2274
1889
|
position: relative;
|
|
2275
1890
|
display: flex;
|
|
@@ -2278,7 +1893,6 @@
|
|
|
2278
1893
|
min-width: 0;
|
|
2279
1894
|
height: 100%;
|
|
2280
1895
|
}
|
|
2281
|
-
|
|
2282
1896
|
.udb-barchart__bars {
|
|
2283
1897
|
display: flex;
|
|
2284
1898
|
align-items: flex-end;
|
|
@@ -2287,19 +1901,16 @@
|
|
|
2287
1901
|
width: 100%;
|
|
2288
1902
|
height: 100%;
|
|
2289
1903
|
}
|
|
2290
|
-
|
|
2291
1904
|
.udb-barchart__bars .udb-barchart__bar {
|
|
2292
1905
|
flex: 1;
|
|
2293
1906
|
width: auto;
|
|
2294
1907
|
}
|
|
2295
|
-
|
|
2296
1908
|
.udb-barchart__bar {
|
|
2297
1909
|
width: 100%;
|
|
2298
1910
|
min-height: 2px;
|
|
2299
1911
|
border-radius: 3px 3px 0 0;
|
|
2300
1912
|
transition: opacity 150ms ease, height 300ms ease;
|
|
2301
1913
|
}
|
|
2302
|
-
|
|
2303
1914
|
.udb-barchart__tip {
|
|
2304
1915
|
position: absolute;
|
|
2305
1916
|
bottom: calc(100% + 6px);
|
|
@@ -2308,54 +1919,46 @@
|
|
|
2308
1919
|
padding: 4px 8px;
|
|
2309
1920
|
white-space: nowrap;
|
|
2310
1921
|
pointer-events: none;
|
|
2311
|
-
border: 1px solid var(--
|
|
2312
|
-
border-radius: var(--
|
|
2313
|
-
background: var(--
|
|
2314
|
-
box-shadow: var(--
|
|
2315
|
-
font-size: var(--
|
|
2316
|
-
color: var(--
|
|
1922
|
+
border: 1px solid var(--color-border);
|
|
1923
|
+
border-radius: var(--radius-sm);
|
|
1924
|
+
background: var(--color-card);
|
|
1925
|
+
box-shadow: var(--shadow-sm);
|
|
1926
|
+
font-size: var(--udb-font-size-xs);
|
|
1927
|
+
color: var(--color-muted-foreground);
|
|
2317
1928
|
}
|
|
2318
|
-
|
|
2319
1929
|
.udb-barchart__tiptitle {
|
|
2320
|
-
font-weight: var(--
|
|
2321
|
-
color: var(--
|
|
1930
|
+
font-weight: var(--font-weight-medium);
|
|
1931
|
+
color: var(--color-foreground);
|
|
2322
1932
|
}
|
|
2323
|
-
|
|
2324
1933
|
.udb-barchart__tiprow {
|
|
2325
1934
|
display: flex;
|
|
2326
1935
|
align-items: center;
|
|
2327
1936
|
justify-content: space-between;
|
|
2328
1937
|
gap: 10px;
|
|
2329
1938
|
}
|
|
2330
|
-
|
|
2331
1939
|
.udb-barchart__tiplabel {
|
|
2332
1940
|
display: inline-flex;
|
|
2333
1941
|
align-items: center;
|
|
2334
1942
|
gap: 5px;
|
|
2335
1943
|
}
|
|
2336
|
-
|
|
2337
1944
|
.udb-barchart__tip b {
|
|
2338
1945
|
margin-right: 4px;
|
|
2339
|
-
font-weight: var(--
|
|
2340
|
-
color: var(--
|
|
1946
|
+
font-weight: var(--font-weight-medium);
|
|
1947
|
+
color: var(--color-foreground);
|
|
2341
1948
|
}
|
|
2342
|
-
|
|
2343
1949
|
.udb-donut {
|
|
2344
1950
|
display: flex;
|
|
2345
1951
|
align-items: center;
|
|
2346
1952
|
gap: 20px;
|
|
2347
1953
|
}
|
|
2348
|
-
|
|
2349
1954
|
.udb-donut__wrap {
|
|
2350
1955
|
position: relative;
|
|
2351
1956
|
flex-shrink: 0;
|
|
2352
1957
|
}
|
|
2353
|
-
|
|
2354
1958
|
.udb-donut__seg {
|
|
2355
1959
|
cursor: pointer;
|
|
2356
1960
|
transition: stroke-width 150ms ease, opacity 150ms ease;
|
|
2357
1961
|
}
|
|
2358
|
-
|
|
2359
1962
|
.udb-donut__center {
|
|
2360
1963
|
position: absolute;
|
|
2361
1964
|
inset: 0;
|
|
@@ -2364,20 +1967,17 @@
|
|
|
2364
1967
|
align-items: center;
|
|
2365
1968
|
justify-content: center;
|
|
2366
1969
|
}
|
|
2367
|
-
|
|
2368
1970
|
.udb-donut__value {
|
|
2369
|
-
font-size: var(--
|
|
2370
|
-
font-weight: var(--
|
|
2371
|
-
color: var(--
|
|
1971
|
+
font-size: var(--udb-font-size-lg);
|
|
1972
|
+
font-weight: var(--font-weight-bold);
|
|
1973
|
+
color: var(--color-foreground);
|
|
2372
1974
|
font-variant-numeric: tabular-nums;
|
|
2373
1975
|
}
|
|
2374
|
-
|
|
2375
1976
|
.udb-donut__label {
|
|
2376
1977
|
margin-top: 2px;
|
|
2377
|
-
font-size: var(--
|
|
2378
|
-
color: var(--
|
|
1978
|
+
font-size: var(--udb-font-size-xs);
|
|
1979
|
+
color: var(--color-muted-foreground);
|
|
2379
1980
|
}
|
|
2380
|
-
|
|
2381
1981
|
.udb-donut__list {
|
|
2382
1982
|
display: flex;
|
|
2383
1983
|
min-width: 0;
|
|
@@ -2385,77 +1985,65 @@
|
|
|
2385
1985
|
flex-direction: column;
|
|
2386
1986
|
gap: 6px;
|
|
2387
1987
|
}
|
|
2388
|
-
|
|
2389
1988
|
.udb-donut__item {
|
|
2390
1989
|
display: flex;
|
|
2391
1990
|
align-items: center;
|
|
2392
1991
|
justify-content: space-between;
|
|
2393
1992
|
gap: 8px;
|
|
2394
1993
|
padding: 4px 6px;
|
|
2395
|
-
border-radius: var(--
|
|
1994
|
+
border-radius: var(--radius-sm);
|
|
2396
1995
|
}
|
|
2397
|
-
|
|
2398
1996
|
.udb-donut__item:hover {
|
|
2399
|
-
background: var(--
|
|
1997
|
+
background: var(--color-muted);
|
|
2400
1998
|
}
|
|
2401
|
-
|
|
2402
1999
|
.udb-donut__itemlabel {
|
|
2403
2000
|
display: flex;
|
|
2404
2001
|
min-width: 0;
|
|
2405
2002
|
align-items: center;
|
|
2406
2003
|
gap: 8px;
|
|
2407
|
-
font-size: var(--
|
|
2408
|
-
color: var(--
|
|
2004
|
+
font-size: var(--udb-font-size-sm);
|
|
2005
|
+
color: var(--color-foreground);
|
|
2409
2006
|
}
|
|
2410
|
-
|
|
2411
2007
|
.udb-donut__dot {
|
|
2412
2008
|
width: 8px;
|
|
2413
2009
|
height: 8px;
|
|
2414
2010
|
flex-shrink: 0;
|
|
2415
2011
|
border-radius: 3px;
|
|
2416
2012
|
}
|
|
2417
|
-
|
|
2418
2013
|
.udb-donut__itemvalue {
|
|
2419
2014
|
flex-shrink: 0;
|
|
2420
|
-
font-size: var(--
|
|
2421
|
-
font-weight: var(--
|
|
2422
|
-
color: var(--
|
|
2015
|
+
font-size: var(--udb-font-size-sm);
|
|
2016
|
+
font-weight: var(--font-weight-medium);
|
|
2017
|
+
color: var(--color-foreground);
|
|
2423
2018
|
font-variant-numeric: tabular-nums;
|
|
2424
2019
|
}
|
|
2425
|
-
|
|
2426
2020
|
.udb-donut__pct {
|
|
2427
2021
|
margin-left: 6px;
|
|
2428
|
-
color: var(--
|
|
2022
|
+
color: var(--color-muted-foreground);
|
|
2429
2023
|
}
|
|
2430
|
-
|
|
2431
2024
|
.udb-linechart {
|
|
2432
2025
|
position: relative;
|
|
2433
2026
|
width: 100%;
|
|
2434
2027
|
user-select: none;
|
|
2435
2028
|
}
|
|
2436
|
-
|
|
2437
2029
|
.udb-linechart__svg {
|
|
2438
2030
|
display: block;
|
|
2439
2031
|
width: 100%;
|
|
2440
2032
|
}
|
|
2441
|
-
|
|
2442
2033
|
.udb-linechart__axis {
|
|
2443
|
-
fill: var(--
|
|
2444
|
-
font-size: var(--
|
|
2445
|
-
font-family: var(--
|
|
2034
|
+
fill: var(--color-muted-foreground);
|
|
2035
|
+
font-size: var(--udb-font-size-xs);
|
|
2036
|
+
font-family: var(--font-sans);
|
|
2446
2037
|
}
|
|
2447
|
-
|
|
2448
2038
|
.udb-linechart__grid {
|
|
2449
|
-
stroke: var(--
|
|
2039
|
+
stroke: var(--color-border);
|
|
2450
2040
|
stroke-width: 1;
|
|
2451
2041
|
}
|
|
2452
|
-
|
|
2453
2042
|
.udb-linechart__crosshair {
|
|
2454
|
-
stroke: var(--
|
|
2043
|
+
stroke: var(--udb-border-strong);
|
|
2455
2044
|
stroke-width: 1;
|
|
2456
2045
|
stroke-dasharray: 3 3;
|
|
2457
2046
|
}
|
|
2458
|
-
|
|
2459
2047
|
.udb-linechart__tip {
|
|
2460
2048
|
position: absolute;
|
|
2461
2049
|
top: 8px;
|
|
@@ -2463,67 +2051,57 @@
|
|
|
2463
2051
|
min-width: 132px;
|
|
2464
2052
|
padding: 8px;
|
|
2465
2053
|
pointer-events: none;
|
|
2466
|
-
border: 1px solid var(--
|
|
2467
|
-
border-radius: var(--
|
|
2468
|
-
background: var(--
|
|
2469
|
-
box-shadow: var(--
|
|
2054
|
+
border: 1px solid var(--color-border);
|
|
2055
|
+
border-radius: var(--radius-md);
|
|
2056
|
+
background: var(--color-card);
|
|
2057
|
+
box-shadow: var(--shadow-md);
|
|
2470
2058
|
}
|
|
2471
|
-
|
|
2472
2059
|
.udb-linechart__tiptitle {
|
|
2473
2060
|
margin-bottom: 4px;
|
|
2474
|
-
font-size: var(--
|
|
2475
|
-
color: var(--
|
|
2061
|
+
font-size: var(--udb-font-size-xs);
|
|
2062
|
+
color: var(--color-muted-foreground);
|
|
2476
2063
|
}
|
|
2477
|
-
|
|
2478
2064
|
.udb-linechart__tiprow {
|
|
2479
2065
|
display: flex;
|
|
2480
2066
|
align-items: center;
|
|
2481
2067
|
justify-content: space-between;
|
|
2482
2068
|
gap: 12px;
|
|
2483
|
-
font-size: var(--
|
|
2069
|
+
font-size: var(--udb-font-size-sm);
|
|
2484
2070
|
}
|
|
2485
|
-
|
|
2486
2071
|
.udb-linechart__tiprow span {
|
|
2487
2072
|
display: flex;
|
|
2488
2073
|
align-items: center;
|
|
2489
2074
|
gap: 6px;
|
|
2490
|
-
color: var(--
|
|
2075
|
+
color: var(--color-muted-foreground);
|
|
2491
2076
|
}
|
|
2492
|
-
|
|
2493
2077
|
.udb-linechart__tiprow b {
|
|
2494
|
-
font-weight: var(--
|
|
2495
|
-
color: var(--
|
|
2078
|
+
font-weight: var(--font-weight-medium);
|
|
2079
|
+
color: var(--color-foreground);
|
|
2496
2080
|
font-variant-numeric: tabular-nums;
|
|
2497
2081
|
}
|
|
2498
|
-
|
|
2499
2082
|
.udb-linechart__swatch {
|
|
2500
2083
|
display: inline-block;
|
|
2501
2084
|
width: 12px;
|
|
2502
2085
|
height: 3px;
|
|
2503
2086
|
border-radius: 999px;
|
|
2504
2087
|
}
|
|
2505
|
-
|
|
2506
2088
|
.udb-linechart__legendhost {
|
|
2507
2089
|
margin-top: 4px;
|
|
2508
2090
|
padding: 0 8px;
|
|
2509
2091
|
}
|
|
2510
|
-
|
|
2511
2092
|
.udb-pageheader__breadcrumbs .udb-pageheader__crumb + .udb-pageheader__crumb::before {
|
|
2512
2093
|
content: "/";
|
|
2513
2094
|
margin-right: 0.375rem;
|
|
2514
2095
|
color: var(--color-muted-foreground);
|
|
2515
2096
|
opacity: 0.6;
|
|
2516
2097
|
}
|
|
2517
|
-
|
|
2518
2098
|
.udb-pageheader__breadcrumbs a {
|
|
2519
2099
|
color: inherit;
|
|
2520
2100
|
text-decoration: none;
|
|
2521
2101
|
}
|
|
2522
|
-
|
|
2523
2102
|
.udb-pageheader__breadcrumbs a:hover {
|
|
2524
2103
|
text-decoration: underline;
|
|
2525
2104
|
}
|
|
2526
|
-
|
|
2527
2105
|
.udb-pageheader__breadcrumbs {
|
|
2528
2106
|
display: flex;
|
|
2529
2107
|
align-items: center;
|
|
@@ -2531,7 +2109,6 @@
|
|
|
2531
2109
|
font-size: 0.8125rem;
|
|
2532
2110
|
color: var(--color-muted-foreground);
|
|
2533
2111
|
}
|
|
2534
|
-
|
|
2535
2112
|
.udb-pageheader {
|
|
2536
2113
|
display: flex;
|
|
2537
2114
|
flex-wrap: wrap;
|
|
@@ -2540,11 +2117,9 @@
|
|
|
2540
2117
|
gap: 0.75rem;
|
|
2541
2118
|
margin-bottom: 1.25rem;
|
|
2542
2119
|
}
|
|
2543
|
-
|
|
2544
2120
|
.udb-pageheader__main {
|
|
2545
2121
|
min-width: 0;
|
|
2546
2122
|
}
|
|
2547
|
-
|
|
2548
2123
|
.udb-pageheader__kicker {
|
|
2549
2124
|
margin: 0 0 0.25rem;
|
|
2550
2125
|
font-size: 0.6875rem;
|
|
@@ -2553,7 +2128,6 @@
|
|
|
2553
2128
|
text-transform: uppercase;
|
|
2554
2129
|
color: var(--color-muted-foreground);
|
|
2555
2130
|
}
|
|
2556
|
-
|
|
2557
2131
|
.udb-pageheader__title {
|
|
2558
2132
|
margin: 0;
|
|
2559
2133
|
font-size: 1.375rem;
|
|
@@ -2562,14 +2136,12 @@
|
|
|
2562
2136
|
letter-spacing: -0.01em;
|
|
2563
2137
|
color: var(--color-foreground);
|
|
2564
2138
|
}
|
|
2565
|
-
|
|
2566
2139
|
.udb-pageheader__subtitle {
|
|
2567
2140
|
margin: 0.25rem 0 0;
|
|
2568
2141
|
font-size: 0.875rem;
|
|
2569
2142
|
line-height: 1.45;
|
|
2570
2143
|
color: var(--color-muted-foreground);
|
|
2571
2144
|
}
|
|
2572
|
-
|
|
2573
2145
|
.udb-pageheader__actions {
|
|
2574
2146
|
display: flex;
|
|
2575
2147
|
flex-wrap: wrap;
|