@solidxai/core-ui 0.1.5-beta.10 → 0.1.5-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/dist/components/auth/SolidOTPVerify.d.ts +3 -0
  2. package/dist/components/auth/SolidOTPVerify.d.ts.map +1 -0
  3. package/dist/components/auth/SolidOTPVerify.js +67 -0
  4. package/dist/components/auth/SolidOTPVerify.js.map +1 -0
  5. package/dist/components/auth/SolidOTPVerify.tsx +133 -0
  6. package/dist/components/common/AuthBanner.js.map +1 -1
  7. package/dist/components/core/common/LoadDynamicJsxComponent.d.ts +2 -0
  8. package/dist/components/core/common/LoadDynamicJsxComponent.d.ts.map +1 -0
  9. package/dist/components/core/common/LoadDynamicJsxComponent.js +50 -0
  10. package/dist/components/core/common/LoadDynamicJsxComponent.js.map +1 -0
  11. package/dist/components/core/common/LoadDynamicJsxComponent.tsx +70 -0
  12. package/dist/components/core/form/fields/SolidMediaSingleField.d.ts.map +1 -1
  13. package/dist/components/core/form/fields/SolidMediaSingleField.js +22 -15
  14. package/dist/components/core/form/fields/SolidMediaSingleField.js.map +1 -1
  15. package/dist/components/core/form/fields/SolidMediaSingleField.tsx +14 -2
  16. package/dist/nextAuth/authProviders.d.ts +4 -0
  17. package/dist/nextAuth/authProviders.d.ts.map +1 -0
  18. package/dist/nextAuth/authProviders.js +198 -0
  19. package/dist/nextAuth/authProviders.js.map +1 -0
  20. package/dist/nextAuth/authProviders.tsx +232 -0
  21. package/dist/nextAuth/handleLogout.d.ts +2 -0
  22. package/dist/nextAuth/handleLogout.d.ts.map +1 -0
  23. package/dist/nextAuth/handleLogout.js +36 -0
  24. package/dist/nextAuth/handleLogout.js.map +1 -0
  25. package/dist/nextAuth/handleLogout.tsx +39 -0
  26. package/dist/nextAuth/refreshAccessToken.d.ts +2 -0
  27. package/dist/nextAuth/refreshAccessToken.d.ts.map +1 -0
  28. package/dist/nextAuth/refreshAccessToken.js +24 -0
  29. package/dist/nextAuth/refreshAccessToken.js.map +1 -0
  30. package/dist/nextAuth/refreshAccessToken.tsx +28 -0
  31. package/dist/redux/features/settingsSlice.d.ts +20 -0
  32. package/dist/redux/features/settingsSlice.d.ts.map +1 -0
  33. package/dist/redux/features/settingsSlice.js +39 -0
  34. package/dist/redux/features/settingsSlice.js.map +1 -0
  35. package/dist/redux/features/settingsSlice.ts +60 -0
  36. package/package.json +1 -1
  37. package/dist/components/auth/AuthTabs.d.ts +0 -14
  38. package/dist/components/auth/AuthTabs.d.ts.map +0 -1
  39. package/dist/components/auth/AuthTabs.js +0 -19
  40. package/dist/components/auth/AuthTabs.js.map +0 -1
  41. package/dist/components/auth/AuthTabs.tsx +0 -38
  42. package/dist/components/common/SolidErrorStatePage.d.ts +0 -12
  43. package/dist/components/common/SolidErrorStatePage.d.ts.map +0 -1
  44. package/dist/components/common/SolidErrorStatePage.js +0 -16
  45. package/dist/components/common/SolidErrorStatePage.js.map +0 -1
  46. package/dist/components/common/SolidErrorStatePage.tsx +0 -55
  47. package/dist/components/core/list/PLAN.md +0 -92
  48. package/dist/components/core/list/SolidDataTable.d.ts +0 -58
  49. package/dist/components/core/list/SolidDataTable.d.ts.map +0 -1
  50. package/dist/components/core/list/SolidDataTable.js +0 -141
  51. package/dist/components/core/list/SolidDataTable.js.map +0 -1
  52. package/dist/components/core/list/SolidDataTable.tsx +0 -314
  53. package/dist/components/core/list/SolidDataTablePagination.d.ts +0 -15
  54. package/dist/components/core/list/SolidDataTablePagination.d.ts.map +0 -1
  55. package/dist/components/core/list/SolidDataTablePagination.js +0 -22
  56. package/dist/components/core/list/SolidDataTablePagination.js.map +0 -1
  57. package/dist/components/core/list/SolidDataTablePagination.tsx +0 -71
  58. package/dist/components/layout/AdminTopHeader.d.ts +0 -2
  59. package/dist/components/layout/AdminTopHeader.d.ts.map +0 -1
  60. package/dist/components/layout/AdminTopHeader.js +0 -68
  61. package/dist/components/layout/AdminTopHeader.js.map +0 -1
  62. package/dist/components/layout/AdminTopHeader.tsx +0 -135
  63. package/dist/components/shad-cn-ui/SolidAutocomplete.d.ts +0 -24
  64. package/dist/components/shad-cn-ui/SolidAutocomplete.d.ts.map +0 -1
  65. package/dist/components/shad-cn-ui/SolidAutocomplete.js +0 -224
  66. package/dist/components/shad-cn-ui/SolidAutocomplete.js.map +0 -1
  67. package/dist/components/shad-cn-ui/SolidAutocomplete.tsx +0 -339
  68. package/dist/components/shad-cn-ui/SolidButton.d.ts +0 -14
  69. package/dist/components/shad-cn-ui/SolidButton.d.ts.map +0 -1
  70. package/dist/components/shad-cn-ui/SolidButton.js +0 -36
  71. package/dist/components/shad-cn-ui/SolidButton.js.map +0 -1
  72. package/dist/components/shad-cn-ui/SolidButton.tsx +0 -54
  73. package/dist/components/shad-cn-ui/SolidInput.d.ts +0 -5
  74. package/dist/components/shad-cn-ui/SolidInput.d.ts.map +0 -1
  75. package/dist/components/shad-cn-ui/SolidInput.js +0 -35
  76. package/dist/components/shad-cn-ui/SolidInput.js.map +0 -1
  77. package/dist/components/shad-cn-ui/SolidInput.tsx +0 -12
  78. package/dist/components/shad-cn-ui/SolidNumberInput.d.ts +0 -10
  79. package/dist/components/shad-cn-ui/SolidNumberInput.d.ts.map +0 -1
  80. package/dist/components/shad-cn-ui/SolidNumberInput.js +0 -33
  81. package/dist/components/shad-cn-ui/SolidNumberInput.js.map +0 -1
  82. package/dist/components/shad-cn-ui/SolidNumberInput.tsx +0 -24
  83. package/dist/components/shad-cn-ui/SolidSelect.d.ts +0 -16
  84. package/dist/components/shad-cn-ui/SolidSelect.d.ts.map +0 -1
  85. package/dist/components/shad-cn-ui/SolidSelect.js +0 -26
  86. package/dist/components/shad-cn-ui/SolidSelect.js.map +0 -1
  87. package/dist/components/shad-cn-ui/SolidSelect.tsx +0 -65
  88. package/dist/components/shad-cn-ui/SolidTabs.d.ts +0 -18
  89. package/dist/components/shad-cn-ui/SolidTabs.d.ts.map +0 -1
  90. package/dist/components/shad-cn-ui/SolidTabs.js +0 -22
  91. package/dist/components/shad-cn-ui/SolidTabs.js.map +0 -1
  92. package/dist/components/shad-cn-ui/SolidTabs.tsx +0 -73
  93. package/dist/components/shad-cn-ui/index.d.ts +0 -7
  94. package/dist/components/shad-cn-ui/index.d.ts.map +0 -1
  95. package/dist/components/shad-cn-ui/index.js +0 -7
  96. package/dist/components/shad-cn-ui/index.js.map +0 -1
  97. package/dist/components/shad-cn-ui/index.ts +0 -6
  98. package/dist/components/solid-ui/SolidButton.d.ts +0 -14
  99. package/dist/components/solid-ui/SolidButton.d.ts.map +0 -1
  100. package/dist/components/solid-ui/SolidButton.js +0 -36
  101. package/dist/components/solid-ui/SolidButton.js.map +0 -1
  102. package/dist/components/solid-ui/SolidButton.tsx +0 -54
  103. package/dist/components/solid-ui/SolidTabs.d.ts +0 -18
  104. package/dist/components/solid-ui/SolidTabs.d.ts.map +0 -1
  105. package/dist/components/solid-ui/SolidTabs.js +0 -22
  106. package/dist/components/solid-ui/SolidTabs.js.map +0 -1
  107. package/dist/components/solid-ui/SolidTabs.tsx +0 -73
  108. package/dist/components/solid-ui/index.d.ts +0 -3
  109. package/dist/components/solid-ui/index.d.ts.map +0 -1
  110. package/dist/components/solid-ui/index.js +0 -3
  111. package/dist/components/solid-ui/index.js.map +0 -1
  112. package/dist/components/solid-ui/index.ts +0 -2
  113. package/dist/resources/images/errors/error-astronaut-404.png +0 -0
  114. package/dist/resources/shadcn-base.css +0 -3200
@@ -1,3200 +0,0 @@
1
- :root {
2
- --solid-surface-0: #f6f8fc;
3
- --solid-surface-1: #ffffff;
4
- --solid-surface-2: #eef2ff;
5
- --solid-surface-3: #f8fafc;
6
- --solid-surface-elevated: #ffffff;
7
- --solid-text-primary: #0f172a;
8
- --solid-text-secondary: #475569;
9
- --solid-text-muted: #64748b;
10
- --solid-border-default: #e2e8f0;
11
- --solid-border-strong: #cbd5e1;
12
- --solid-interactive-bg: #2563eb;
13
- --solid-interactive-fg: #ffffff;
14
- --solid-focus-ring: rgba(37, 99, 235, 0.35);
15
- --background: #f6f8fc;
16
- --foreground: #0f172a;
17
- --card: #ffffff;
18
- --card-foreground: #0f172a;
19
- --border: #e2e8f0;
20
- --muted: #64748b;
21
- --muted-foreground: #475569;
22
- --accent: #eef2ff;
23
- --accent-foreground: #3730a3;
24
- --primary: #2563eb;
25
- --primary-foreground: #ffffff;
26
- --ring: rgba(37, 99, 235, 0.35);
27
- --sidebar-background: #f8fafc;
28
- --sidebar-foreground: #0f172a;
29
- --sidebar-border: #e2e8f0;
30
- --sidebar-accent: #f1f5f9;
31
- --sidebar-accent-foreground: #0f172a;
32
- --sidebar-primary: #2563eb;
33
- --sidebar-primary-foreground: #ffffff;
34
- --sidebar-width: 272px;
35
- --sidebar-width-collapsed: 76px;
36
- --solid-sidebar-width: 272px;
37
- --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.1);
38
- }
39
-
40
- html.dark,
41
- [data-theme="dark"] {
42
- --solid-surface-0: #090f1d;
43
- --solid-surface-1: #111827;
44
- --solid-surface-2: #172554;
45
- --solid-surface-3: #020817;
46
- --solid-surface-elevated: #111827;
47
- --solid-text-primary: #f8fafc;
48
- --solid-text-secondary: #cbd5e1;
49
- --solid-text-muted: #94a3b8;
50
- --solid-border-default: #1f2937;
51
- --solid-border-strong: #374151;
52
- --solid-interactive-bg: #60a5fa;
53
- --solid-interactive-fg: #0b1220;
54
- --solid-focus-ring: rgba(96, 165, 250, 0.35);
55
- --background: #090f1d;
56
- --foreground: #e5e7eb;
57
- --card: #111827;
58
- --card-foreground: #f8fafc;
59
- --border: #1f2937;
60
- --muted: #94a3b8;
61
- --muted-foreground: #cbd5e1;
62
- --accent: #172554;
63
- --accent-foreground: #dbeafe;
64
- --primary: #60a5fa;
65
- --primary-foreground: #0b1220;
66
- --ring: rgba(96, 165, 250, 0.35);
67
- --sidebar-background: #020817;
68
- --sidebar-foreground: #e2e8f0;
69
- --sidebar-border: #111827;
70
- --sidebar-accent: #0f172a;
71
- --sidebar-accent-foreground: #f8fafc;
72
- --sidebar-primary: #1d4ed8;
73
- --sidebar-primary-foreground: #e5efff;
74
- --shadow-soft: 0 18px 30px rgba(2, 6, 23, 0.6);
75
- }
76
-
77
- html,
78
- body {
79
- background: var(--background);
80
- color: var(--foreground);
81
- }
82
-
83
- .solid-shell {
84
- min-height: 100vh;
85
- background: radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.08), transparent 38%), var(--background);
86
- }
87
-
88
- .solid-main {
89
- min-height: 100vh;
90
- margin-left: var(--solid-sidebar-width);
91
- transition: margin-left 200ms ease;
92
- display: flex;
93
- flex-direction: column;
94
- }
95
-
96
- .solid-main-content {
97
- flex: 1;
98
- min-height: 0;
99
- display: flex;
100
- flex-direction: column;
101
- overflow: hidden;
102
- }
103
-
104
- .solid-admin-header {
105
- position: sticky;
106
- top: 0;
107
- z-index: 58;
108
- height: 46px;
109
- border-bottom: 1px solid var(--border);
110
- background: color-mix(in srgb, var(--background) 88%, transparent);
111
- backdrop-filter: blur(8px);
112
- }
113
-
114
- .solid-admin-header-inner {
115
- height: 100%;
116
- display: flex;
117
- align-items: center;
118
- gap: 10px;
119
- padding: 0 12px;
120
- }
121
-
122
- .solid-admin-sidebar-trigger {
123
- width: 28px;
124
- height: 28px;
125
- border-radius: 8px;
126
- border: 1px solid var(--border);
127
- background: var(--card);
128
- color: var(--card-foreground);
129
- display: grid;
130
- place-items: center;
131
- }
132
-
133
- .solid-admin-sidebar-trigger:hover,
134
- .solid-admin-sidebar-trigger:focus-visible {
135
- box-shadow: 0 0 0 3px var(--ring);
136
- outline: none;
137
- }
138
-
139
- .solid-admin-header-sep {
140
- width: 1px;
141
- height: 16px;
142
- background: var(--border);
143
- }
144
-
145
- .solid-admin-breadcrumbs {
146
- display: flex;
147
- align-items: center;
148
- gap: 8px;
149
- min-width: 0;
150
- flex: 1;
151
- }
152
-
153
- .solid-admin-crumb {
154
- display: inline-flex;
155
- align-items: center;
156
- gap: 8px;
157
- font-size: 13px;
158
- color: var(--muted-foreground);
159
- white-space: nowrap;
160
- }
161
-
162
- .solid-admin-crumb:last-child {
163
- color: var(--foreground);
164
- }
165
-
166
- .solid-admin-crumb-sep {
167
- color: var(--muted);
168
- }
169
-
170
- .solid-admin-back-btn {
171
- height: 28px;
172
- border-radius: 8px;
173
- border: 1px solid var(--border);
174
- background: var(--card);
175
- color: var(--card-foreground);
176
- font-size: 12px;
177
- padding: 0 10px;
178
- }
179
-
180
- .solid-admin-header-actions {
181
- display: inline-flex;
182
- align-items: center;
183
- gap: 8px;
184
- }
185
-
186
- .solid-admin-theme-toggle {
187
- width: 32px;
188
- height: 32px;
189
- border: 0;
190
- border-radius: 8px;
191
- background: transparent;
192
- color: var(--muted-foreground);
193
- display: inline-flex;
194
- align-items: center;
195
- justify-content: center;
196
- cursor: pointer;
197
- transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
198
- }
199
-
200
- .solid-admin-theme-toggle:hover {
201
- background: var(--accent);
202
- color: var(--accent-foreground);
203
- }
204
-
205
- .solid-admin-theme-toggle:focus-visible {
206
- outline: none;
207
- box-shadow: 0 0 0 3px var(--ring);
208
- }
209
-
210
- .solid-sr-only {
211
- position: absolute;
212
- width: 1px;
213
- height: 1px;
214
- padding: 0;
215
- margin: -1px;
216
- overflow: hidden;
217
- clip: rect(0, 0, 0, 0);
218
- border: 0;
219
- }
220
-
221
- .solid-sidebar-backdrop {
222
- position: fixed;
223
- inset: 0;
224
- background: rgba(2, 6, 23, 0.4);
225
- z-index: 59;
226
- }
227
-
228
- .solid-sidebar-mobile-trigger {
229
- position: fixed;
230
- top: 14px;
231
- left: 12px;
232
- width: 38px;
233
- height: 38px;
234
- border-radius: 10px;
235
- border: 1px solid var(--sidebar-border);
236
- background: var(--card);
237
- color: var(--card-foreground);
238
- z-index: 61;
239
- }
240
-
241
- .solid-sidebar {
242
- position: fixed;
243
- inset: 0 auto 0 0;
244
- width: var(--sidebar-width);
245
- background: var(--sidebar-background);
246
- color: var(--sidebar-foreground);
247
- border-right: 1px solid var(--sidebar-border);
248
- z-index: 60;
249
- display: flex;
250
- flex-direction: column;
251
- transition: width 200ms ease, transform 200ms ease;
252
- box-shadow: var(--shadow-soft);
253
- }
254
-
255
- .solid-sidebar.is-collapsed {
256
- transform: translateX(calc(-1 * var(--sidebar-width)));
257
- box-shadow: none;
258
- }
259
-
260
- .solid-sidebar-header {
261
- border-bottom: 0;
262
- padding: 10px 10px 8px;
263
- display: flex;
264
- align-items: center;
265
- gap: 10px;
266
- }
267
-
268
- .solid-workspace-switcher {
269
- position: relative;
270
- flex: 1;
271
- }
272
-
273
- .solid-workspace-trigger {
274
- width: 100%;
275
- border: 1px solid var(--sidebar-border);
276
- background: var(--card);
277
- color: var(--card-foreground);
278
- min-height: 40px;
279
- border-radius: 10px;
280
- display: flex;
281
- align-items: center;
282
- gap: 9px;
283
- padding: 6px 9px;
284
- text-align: left;
285
- }
286
-
287
- .solid-workspace-avatar {
288
- width: 24px;
289
- height: 24px;
290
- border-radius: 8px;
291
- background: linear-gradient(135deg, var(--sidebar-primary), #6366f1);
292
- color: var(--sidebar-primary-foreground);
293
- display: grid;
294
- place-items: center;
295
- font-size: 12px;
296
- font-weight: 700;
297
- }
298
-
299
- .solid-workspace-label-wrap {
300
- display: flex;
301
- flex-direction: column;
302
- min-width: 0;
303
- flex: 1;
304
- }
305
-
306
- .solid-workspace-label-top {
307
- font-size: 10px;
308
- text-transform: uppercase;
309
- letter-spacing: 0.06em;
310
- color: var(--muted);
311
- line-height: 1.1;
312
- }
313
-
314
- .solid-workspace-label {
315
- font-size: 13px;
316
- font-weight: 600;
317
- line-height: 1.2;
318
- white-space: nowrap;
319
- overflow: hidden;
320
- text-overflow: ellipsis;
321
- }
322
-
323
- .solid-workspace-chevron-dual {
324
- width: 26px;
325
- height: 26px;
326
- border-radius: 999px;
327
- border: 1px solid var(--sidebar-border);
328
- display: inline-flex;
329
- align-items: center;
330
- justify-content: center;
331
- color: var(--muted-foreground);
332
- transition: transform 140ms ease, color 140ms ease, border-color 140ms ease;
333
- }
334
-
335
- .solid-workspace-chevron-dual.is-open {
336
- transform: rotate(180deg);
337
- }
338
-
339
- .solid-workspace-trigger:hover .solid-workspace-chevron-dual {
340
- color: var(--foreground);
341
- border-color: color-mix(in srgb, var(--sidebar-border) 70%, var(--primary));
342
- }
343
-
344
- .solid-workspace-menu {
345
- position: absolute;
346
- left: 0;
347
- right: 0;
348
- top: calc(100% + 6px);
349
- border: 1px solid var(--sidebar-border);
350
- background: var(--card);
351
- border-radius: 12px;
352
- padding: 6px;
353
- box-shadow: var(--shadow-soft);
354
- z-index: 80;
355
- }
356
-
357
- .solid-workspace-item {
358
- width: 100%;
359
- border: 0;
360
- border-radius: 8px;
361
- height: 34px;
362
- background: transparent;
363
- color: var(--card-foreground);
364
- display: flex;
365
- align-items: center;
366
- gap: 8px;
367
- padding: 0 8px;
368
- text-align: left;
369
- }
370
-
371
- .solid-workspace-item:hover {
372
- background: var(--sidebar-accent);
373
- }
374
-
375
- .solid-workspace-item.is-active {
376
- background: var(--accent);
377
- color: var(--accent-foreground);
378
- }
379
-
380
- .solid-workspace-item-avatar {
381
- width: 18px;
382
- height: 18px;
383
- border-radius: 6px;
384
- background: var(--sidebar-primary);
385
- color: var(--sidebar-primary-foreground);
386
- display: grid;
387
- place-items: center;
388
- font-size: 10px;
389
- font-weight: 700;
390
- }
391
-
392
- .solid-workspace-item-label {
393
- font-size: 12px;
394
- }
395
-
396
- .solid-sidebar-external-trigger {
397
- position: fixed;
398
- top: 14px;
399
- left: calc(var(--solid-sidebar-width) + 8px);
400
- width: 30px;
401
- height: 30px;
402
- border-radius: 8px;
403
- border: 1px solid var(--sidebar-border);
404
- background: var(--card);
405
- color: var(--card-foreground);
406
- display: grid;
407
- place-items: center;
408
- z-index: 61;
409
- transition: left 200ms ease, box-shadow 150ms ease;
410
- }
411
-
412
- .solid-sidebar-external-trigger:hover {
413
- box-shadow: 0 0 0 3px var(--ring);
414
- }
415
-
416
- .solid-sidebar-hotspot {
417
- position: fixed;
418
- top: 0;
419
- left: 0;
420
- width: 14px;
421
- height: 100vh;
422
- border: 0;
423
- background: transparent;
424
- z-index: 61;
425
- cursor: e-resize;
426
- }
427
-
428
- .solid-sidebar-hotspot::after {
429
- content: "";
430
- position: absolute;
431
- top: 50%;
432
- left: 4px;
433
- transform: translateY(-50%);
434
- width: 2px;
435
- height: 88px;
436
- border-radius: 999px;
437
- background: rgba(100, 116, 139, 0.45);
438
- opacity: 0;
439
- transition: opacity 120ms ease;
440
- }
441
-
442
- .solid-sidebar-hotspot:hover::after {
443
- opacity: 1;
444
- }
445
-
446
- .solid-sidebar-search-wrap {
447
- padding: 8px 10px 6px;
448
- }
449
-
450
- .solid-sidebar-search {
451
- width: 100%;
452
- border: 1px solid var(--sidebar-border);
453
- background: var(--card);
454
- color: var(--card-foreground);
455
- border-radius: 9px;
456
- height: 34px;
457
- padding: 0 10px;
458
- outline: none;
459
- font-size: 12px;
460
- line-height: 1.2;
461
- font-weight: 500;
462
- letter-spacing: 0.01em;
463
- }
464
-
465
- .solid-sidebar-search::placeholder {
466
- color: color-mix(in srgb, var(--muted-foreground) 82%, transparent);
467
- font-size: 11.5px;
468
- font-weight: 500;
469
- }
470
-
471
- .solid-sidebar-search:focus {
472
- box-shadow: 0 0 0 3px var(--ring);
473
- }
474
-
475
- .solid-sidebar-tree-wrap {
476
- padding: 2px 8px 8px;
477
- overflow: auto;
478
- flex: 1;
479
- }
480
-
481
- .solid-sidebar-tree-list {
482
- list-style: none;
483
- margin: 0;
484
- padding: 0;
485
- }
486
-
487
- .solid-sidebar-tree-row {
488
- min-height: 34px;
489
- border-radius: 8px;
490
- display: flex;
491
- align-items: center;
492
- gap: 8px;
493
- }
494
-
495
- .solid-sidebar-tree-row:hover {
496
- background: var(--sidebar-accent);
497
- }
498
-
499
- .solid-sidebar-tree-row.is-active {
500
- background: var(--accent);
501
- color: var(--accent-foreground);
502
- }
503
-
504
- .solid-sidebar-tree-link {
505
- color: inherit;
506
- flex: 1;
507
- min-width: 0;
508
- }
509
-
510
- .solid-sidebar-tree-parent {
511
- border: 0;
512
- background: transparent;
513
- color: inherit;
514
- flex: 1;
515
- min-width: 0;
516
- text-align: left;
517
- height: 100%;
518
- padding: 0;
519
- cursor: pointer;
520
- }
521
-
522
- .solid-sidebar-tree-label {
523
- font-size: 13px;
524
- line-height: 1.2;
525
- }
526
-
527
- .solid-sidebar-tree-toggle {
528
- border: 0;
529
- background: transparent;
530
- width: 26px;
531
- height: 26px;
532
- border-radius: 6px;
533
- display: grid;
534
- place-items: center;
535
- }
536
-
537
- .solid-sidebar-tree-toggle:hover {
538
- background: rgba(148, 163, 184, 0.2);
539
- }
540
-
541
- .solid-tree-plusminus {
542
- font-size: 16px;
543
- line-height: 1;
544
- font-weight: 500;
545
- color: var(--muted);
546
- }
547
-
548
- .solid-sidebar-tree-children {
549
- margin-top: 2px;
550
- }
551
-
552
- .solid-sidebar-collapsed-nav {
553
- flex: 1;
554
- display: flex;
555
- flex-direction: column;
556
- gap: 8px;
557
- padding: 10px;
558
- overflow: auto;
559
- }
560
-
561
- .solid-collapsed-item {
562
- width: 40px;
563
- height: 40px;
564
- border-radius: 12px;
565
- border: 1px solid transparent;
566
- display: grid;
567
- place-items: center;
568
- font-size: 12px;
569
- font-weight: 700;
570
- color: var(--sidebar-foreground);
571
- background: transparent;
572
- margin-inline: auto;
573
- }
574
-
575
- .solid-collapsed-item:hover {
576
- background: var(--sidebar-accent);
577
- }
578
-
579
- .solid-collapsed-item.is-active {
580
- background: var(--sidebar-primary);
581
- color: var(--sidebar-primary-foreground);
582
- }
583
-
584
- .solid-sidebar-footer {
585
- border-top: 0;
586
- padding: 6px 6px 8px;
587
- }
588
-
589
- .solid-user-menu {
590
- position: relative;
591
- }
592
-
593
- .solid-sidebar-footer .userProfile {
594
- display: block;
595
- margin: 0;
596
- text-align: left;
597
- }
598
-
599
- .solid-user-menu-trigger {
600
- width: 100%;
601
- border: 1px solid color-mix(in srgb, var(--sidebar-border) 88%, transparent);
602
- background: color-mix(in srgb, var(--sidebar-accent) 52%, transparent);
603
- color: var(--sidebar-foreground);
604
- border-radius: 9px;
605
- min-height: 38px;
606
- display: flex;
607
- align-items: center;
608
- justify-content: space-between;
609
- gap: 7px;
610
- padding: 4px 8px;
611
- cursor: pointer;
612
- }
613
-
614
- .solid-user-menu-trigger:hover {
615
- background: color-mix(in srgb, var(--sidebar-accent) 75%, transparent);
616
- border-color: color-mix(in srgb, var(--sidebar-border) 70%, var(--primary));
617
- }
618
-
619
- .solid-user-menu-trigger-left {
620
- min-width: 0;
621
- display: flex;
622
- align-items: center;
623
- gap: 8px;
624
- }
625
-
626
- .solid-user-menu-trigger-meta {
627
- min-width: 0;
628
- display: flex;
629
- flex-direction: column;
630
- }
631
-
632
- .solid-user-menu-trigger-name {
633
- font-size: 12.5px;
634
- line-height: 1.1;
635
- font-weight: 650;
636
- white-space: nowrap;
637
- overflow: hidden;
638
- text-overflow: ellipsis;
639
- }
640
-
641
- .solid-user-menu-trigger-role {
642
- font-size: 10.5px;
643
- line-height: 1.1;
644
- color: var(--muted);
645
- }
646
-
647
- .solid-user-avatar {
648
- width: 30px;
649
- height: 30px;
650
- border-radius: 999px;
651
- display: grid;
652
- place-items: center;
653
- color: #fff;
654
- background: linear-gradient(135deg, #84cc16, #65a30d);
655
- overflow: hidden;
656
- }
657
-
658
- .solid-user-avatar.is-compact {
659
- width: 26px;
660
- height: 26px;
661
- }
662
-
663
- .solid-user-avatar-image {
664
- width: 100%;
665
- height: 100%;
666
- object-fit: cover;
667
- display: block;
668
- }
669
-
670
- .solid-user-avatar-text {
671
- font-size: 14px;
672
- font-weight: 700;
673
- line-height: 1;
674
- }
675
-
676
- .solid-user-menu-content {
677
- position: absolute;
678
- left: 2px;
679
- right: auto;
680
- bottom: calc(100% + 8px);
681
- width: 232px;
682
- max-width: min(232px, calc(100vw - 24px));
683
- border: 1px solid var(--border);
684
- border-radius: 10px;
685
- background: var(--card);
686
- color: var(--card-foreground);
687
- box-shadow: 0 18px 42px rgba(2, 6, 23, 0.32);
688
- padding: 5px;
689
- z-index: 70;
690
- }
691
-
692
- .solid-user-menu-header {
693
- display: flex;
694
- align-items: center;
695
- gap: 8px;
696
- padding: 8px 8px;
697
- }
698
-
699
- .solid-user-menu-meta {
700
- min-width: 0;
701
- display: flex;
702
- flex-direction: column;
703
- gap: 2px;
704
- }
705
-
706
- .solid-user-menu-title {
707
- font-size: 12.5px;
708
- font-weight: 650;
709
- line-height: 1.2;
710
- white-space: nowrap;
711
- overflow: hidden;
712
- text-overflow: ellipsis;
713
- }
714
-
715
- .solid-user-menu-subtitle {
716
- font-size: 10.5px;
717
- color: var(--muted-foreground);
718
- line-height: 1.2;
719
- white-space: nowrap;
720
- overflow: hidden;
721
- text-overflow: ellipsis;
722
- }
723
-
724
- .solid-user-menu-sep {
725
- height: 1px;
726
- background: var(--border);
727
- margin: 5px 0;
728
- }
729
-
730
- .solid-user-menu-item {
731
- width: 100%;
732
- border: 0;
733
- background: transparent;
734
- color: var(--card-foreground);
735
- border-radius: 8px;
736
- min-height: 31px;
737
- display: flex;
738
- align-items: center;
739
- gap: 8px;
740
- padding: 0 8px;
741
- text-align: left;
742
- font-size: 12.5px;
743
- font-weight: 500;
744
- cursor: pointer;
745
- }
746
-
747
- .solid-user-menu-item:hover {
748
- background: var(--accent);
749
- color: var(--accent-foreground);
750
- }
751
-
752
- .solid-user-menu-item i {
753
- font-size: 12px;
754
- }
755
-
756
- .solid-user-menu-item svg {
757
- flex: 0 0 auto;
758
- color: inherit;
759
- }
760
-
761
- .solid-user-menu-item.is-danger {
762
- color: #ef4444;
763
- }
764
-
765
- .solid-user-menu-item.is-danger:hover {
766
- background: rgba(239, 68, 68, 0.12);
767
- color: #ef4444;
768
- }
769
-
770
- .solid-inline-toast {
771
- display: flex;
772
- align-items: flex-start;
773
- justify-content: space-between;
774
- gap: 10px;
775
- padding: 10px 11px;
776
- border-radius: 10px;
777
- border: 1px solid var(--border);
778
- background: var(--card);
779
- color: var(--card-foreground);
780
- margin-bottom: 8px;
781
- }
782
-
783
- .solid-inline-toast.is-error {
784
- border-color: color-mix(in srgb, #ef4444 45%, var(--border));
785
- }
786
-
787
- .solid-inline-toast.is-success {
788
- border-color: color-mix(in srgb, #22c55e 45%, var(--border));
789
- }
790
-
791
- .solid-inline-toast.is-warn {
792
- border-color: color-mix(in srgb, #f59e0b 45%, var(--border));
793
- }
794
-
795
- .solid-inline-toast.is-info {
796
- border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
797
- }
798
-
799
- .solid-inline-toast-body {
800
- min-width: 0;
801
- display: flex;
802
- flex-direction: column;
803
- gap: 2px;
804
- }
805
-
806
- .solid-inline-toast-title {
807
- font-size: 12px;
808
- font-weight: 650;
809
- line-height: 1.25;
810
- }
811
-
812
- .solid-inline-toast-detail {
813
- font-size: 12px;
814
- color: var(--muted-foreground);
815
- line-height: 1.25;
816
- }
817
-
818
- .solid-inline-toast-close {
819
- width: 22px;
820
- height: 22px;
821
- border: 0;
822
- border-radius: 6px;
823
- background: transparent;
824
- color: var(--muted-foreground);
825
- font-size: 16px;
826
- line-height: 1;
827
- cursor: pointer;
828
- }
829
-
830
- .solid-inline-toast-close:hover {
831
- background: var(--accent);
832
- color: var(--accent-foreground);
833
- }
834
-
835
- .solid-dialog-backdrop {
836
- position: fixed;
837
- inset: 0;
838
- background: rgba(2, 6, 23, 0.42);
839
- backdrop-filter: blur(2px);
840
- z-index: 1000;
841
- display: grid;
842
- place-items: center;
843
- padding: 16px;
844
- }
845
-
846
- .solid-shadcn-confirm-dialog {
847
- width: min(360px, calc(100vw - 32px));
848
- border: 1px solid var(--border);
849
- border-radius: 12px;
850
- background: var(--card);
851
- color: var(--card-foreground);
852
- box-shadow: 0 18px 44px rgba(2, 6, 23, 0.35);
853
- }
854
-
855
- .solid-shadcn-dialog-head {
856
- padding: 12px 14px;
857
- }
858
-
859
- .solid-shadcn-dialog-head h3 {
860
- margin: 0;
861
- font-size: 14px;
862
- line-height: 1.2;
863
- font-weight: 600;
864
- }
865
-
866
- .solid-shadcn-dialog-sep {
867
- height: 1px;
868
- background: var(--border);
869
- }
870
-
871
- .solid-shadcn-dialog-body {
872
- padding: 14px;
873
- }
874
-
875
- .solid-shadcn-dialog-text {
876
- margin: 0;
877
- font-size: 13px;
878
- color: var(--muted-foreground);
879
- }
880
-
881
- .solid-shadcn-dialog-actions {
882
- display: flex;
883
- justify-content: flex-end;
884
- gap: 8px;
885
- padding: 0 14px 14px;
886
- }
887
-
888
- .solid-popup-backdrop {
889
- position: fixed;
890
- inset: 0;
891
- z-index: 1000;
892
- background: rgba(2, 6, 23, 0.45);
893
- backdrop-filter: blur(2px);
894
- display: grid;
895
- place-items: center;
896
- padding: 16px;
897
- }
898
-
899
- .solid-popup-surface.solid-common-dialog {
900
- max-width: min(92vw, 1100px);
901
- max-height: calc(100vh - 32px);
902
- overflow: auto;
903
- border-radius: 8px;
904
- border: 1px solid var(--border);
905
- background: var(--card);
906
- color: var(--card-foreground);
907
- box-shadow: 0 18px 48px rgba(2, 6, 23, 0.35);
908
- }
909
-
910
- @media (max-width: 1199px) {
911
- .solid-main {
912
- margin-left: 0;
913
- }
914
-
915
- .solid-admin-header-inner {
916
- padding-inline: 10px;
917
- }
918
-
919
- .solid-sidebar {
920
- width: min(88vw, 320px);
921
- transform: translateX(-104%);
922
- }
923
-
924
- .solid-sidebar.is-open {
925
- transform: translateX(0);
926
- }
927
-
928
- .solid-sidebar.is-collapsed {
929
- width: min(88vw, 320px);
930
- }
931
-
932
- .solid-sidebar-hotspot {
933
- display: none;
934
- }
935
-
936
- .solid-user-menu-content {
937
- left: 0;
938
- right: auto;
939
- width: min(270px, calc(100vw - 24px));
940
- }
941
-
942
- .solid-shadcn-confirm-dialog {
943
- width: min(360px, calc(100vw - 24px));
944
- }
945
- }
946
-
947
- /* Reusable Solid UI primitives */
948
- .solid-btn {
949
- --solid-btn-bg: var(--primary);
950
- --solid-btn-fg: var(--primary-foreground);
951
- --solid-btn-border: transparent;
952
- height: 36px;
953
- border-radius: 9px;
954
- border: 1px solid var(--solid-btn-border);
955
- background: var(--solid-btn-bg);
956
- color: var(--solid-btn-fg);
957
- display: inline-flex;
958
- align-items: center;
959
- justify-content: center;
960
- gap: 8px;
961
- padding: 0 12px;
962
- font-size: 13px;
963
- font-weight: 500;
964
- line-height: 1;
965
- cursor: pointer;
966
- transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
967
- }
968
-
969
- .solid-btn:hover {
970
- box-shadow: 0 0 0 3px var(--ring);
971
- }
972
-
973
- .solid-btn:focus-visible {
974
- outline: none;
975
- box-shadow: 0 0 0 3px var(--ring);
976
- }
977
-
978
- .solid-btn:disabled {
979
- opacity: 0.6;
980
- cursor: not-allowed;
981
- }
982
-
983
- .solid-btn--sm {
984
- height: 32px;
985
- padding: 0 10px;
986
- border-radius: 8px;
987
- font-size: 12px;
988
- }
989
-
990
- .solid-btn--lg {
991
- height: 40px;
992
- padding: 0 16px;
993
- border-radius: 10px;
994
- font-size: 14px;
995
- }
996
-
997
- .solid-btn--full {
998
- width: 100%;
999
- }
1000
-
1001
- .solid-btn--primary {
1002
- --solid-btn-bg: var(--primary);
1003
- --solid-btn-fg: var(--primary-foreground);
1004
- --solid-btn-border: transparent;
1005
- }
1006
-
1007
- .solid-btn--secondary {
1008
- --solid-btn-bg: var(--accent);
1009
- --solid-btn-fg: var(--accent-foreground);
1010
- --solid-btn-border: transparent;
1011
- }
1012
-
1013
- .solid-btn--ghost {
1014
- --solid-btn-bg: transparent;
1015
- --solid-btn-fg: var(--foreground);
1016
- --solid-btn-border: transparent;
1017
- }
1018
-
1019
- .solid-btn--outline {
1020
- --solid-btn-bg: var(--card);
1021
- --solid-btn-fg: var(--card-foreground);
1022
- --solid-btn-border: var(--border);
1023
- }
1024
-
1025
- .solid-btn--destructive {
1026
- --solid-btn-bg: #ef4444;
1027
- --solid-btn-fg: #fff;
1028
- --solid-btn-border: transparent;
1029
- }
1030
-
1031
- .solid-btn-spinner {
1032
- width: 14px;
1033
- height: 14px;
1034
- border-radius: 999px;
1035
- border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
1036
- border-top-color: currentColor;
1037
- animation: solid-spin 0.8s linear infinite;
1038
- }
1039
-
1040
- .solid-btn-icon {
1041
- display: inline-flex;
1042
- align-items: center;
1043
- justify-content: center;
1044
- }
1045
-
1046
- .solid-btn-label {
1047
- white-space: nowrap;
1048
- }
1049
-
1050
- .solid-select-wrap {
1051
- position: relative;
1052
- width: 100%;
1053
- }
1054
-
1055
- .solid-select {
1056
- width: 100%;
1057
- min-height: 32px;
1058
- border-radius: 8px;
1059
- border: 1px solid var(--border);
1060
- background: var(--card);
1061
- color: var(--card-foreground);
1062
- font-size: 12px;
1063
- line-height: 1.2;
1064
- padding: 0 30px 0 10px;
1065
- appearance: none;
1066
- }
1067
-
1068
- .solid-select:focus-visible {
1069
- outline: none;
1070
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent);
1071
- border-color: color-mix(in srgb, var(--ring) 56%, transparent);
1072
- }
1073
-
1074
- .solid-select:disabled {
1075
- opacity: 0.6;
1076
- cursor: not-allowed;
1077
- }
1078
-
1079
- .solid-select-icon {
1080
- position: absolute;
1081
- right: 8px;
1082
- top: 50%;
1083
- transform: translateY(-50%);
1084
- pointer-events: none;
1085
- color: color-mix(in srgb, var(--foreground) 62%, transparent);
1086
- font-size: 10px;
1087
- }
1088
-
1089
- .solid-input {
1090
- width: 100%;
1091
- min-height: 32px;
1092
- border-radius: 8px;
1093
- border: 1px solid var(--border);
1094
- background: var(--card);
1095
- color: var(--card-foreground);
1096
- font-size: 12px;
1097
- line-height: 1.2;
1098
- padding: 0 10px;
1099
- }
1100
-
1101
- .solid-input::placeholder {
1102
- color: var(--muted-foreground);
1103
- }
1104
-
1105
- .solid-input:focus-visible {
1106
- outline: none;
1107
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent);
1108
- border-color: color-mix(in srgb, var(--ring) 56%, transparent);
1109
- }
1110
-
1111
- .solid-input:disabled {
1112
- opacity: 0.6;
1113
- cursor: not-allowed;
1114
- }
1115
-
1116
- .solid-autocomplete {
1117
- position: relative;
1118
- width: 100%;
1119
- }
1120
-
1121
- .solid-autocomplete-control {
1122
- position: relative;
1123
- display: flex;
1124
- align-items: center;
1125
- width: 100%;
1126
- }
1127
-
1128
- .solid-autocomplete-chip-control {
1129
- min-height: 32px;
1130
- border: 1px solid var(--border);
1131
- border-radius: 8px;
1132
- background: var(--card);
1133
- padding: 2px 26px 2px 4px;
1134
- gap: 4px;
1135
- flex-wrap: wrap;
1136
- }
1137
-
1138
- .solid-autocomplete-chip-control.is-focused {
1139
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent);
1140
- border-color: color-mix(in srgb, var(--ring) 56%, transparent);
1141
- }
1142
-
1143
- .solid-autocomplete-input {
1144
- padding-right: 30px;
1145
- }
1146
-
1147
- .solid-autocomplete-inline-input {
1148
- border: 0;
1149
- box-shadow: none !important;
1150
- background: transparent;
1151
- min-height: 24px;
1152
- height: 24px;
1153
- flex: 1 1 110px;
1154
- padding: 0 4px;
1155
- }
1156
-
1157
- .solid-autocomplete-inline-input:focus-visible {
1158
- box-shadow: none;
1159
- border-color: transparent;
1160
- }
1161
-
1162
- .solid-autocomplete-trigger {
1163
- position: absolute;
1164
- right: 2px;
1165
- top: 2px;
1166
- height: calc(100% - 4px);
1167
- width: 24px;
1168
- min-width: 24px;
1169
- border: 0;
1170
- border-radius: 6px;
1171
- background: transparent;
1172
- color: color-mix(in srgb, var(--foreground) 65%, transparent);
1173
- cursor: pointer;
1174
- }
1175
-
1176
- .solid-autocomplete-trigger:hover {
1177
- background: color-mix(in srgb, var(--accent) 66%, transparent);
1178
- }
1179
-
1180
- .solid-autocomplete-panel {
1181
- position: absolute;
1182
- top: calc(100% + 4px);
1183
- left: 0;
1184
- right: 0;
1185
- z-index: 40;
1186
- border: 1px solid var(--border);
1187
- border-radius: 8px;
1188
- background: var(--card);
1189
- box-shadow: 0 12px 26px rgba(2, 6, 23, 0.16);
1190
- max-height: 220px;
1191
- overflow-y: auto;
1192
- padding: 4px;
1193
- }
1194
-
1195
- .solid-autocomplete-option {
1196
- width: 100%;
1197
- text-align: left;
1198
- border: 0;
1199
- background: transparent;
1200
- color: var(--foreground);
1201
- font-size: 12px;
1202
- border-radius: 6px;
1203
- min-height: 26px;
1204
- padding: 4px 8px;
1205
- cursor: pointer;
1206
- }
1207
-
1208
- .solid-autocomplete-option:hover,
1209
- .solid-autocomplete-option.is-active {
1210
- background: color-mix(in srgb, var(--accent) 70%, transparent);
1211
- }
1212
-
1213
- .solid-autocomplete-chip {
1214
- display: inline-flex;
1215
- align-items: center;
1216
- gap: 4px;
1217
- min-height: 22px;
1218
- border-radius: 999px;
1219
- border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
1220
- background: color-mix(in srgb, var(--primary) 10%, transparent);
1221
- color: color-mix(in srgb, var(--foreground) 90%, transparent);
1222
- padding: 0 6px;
1223
- font-size: 11px;
1224
- }
1225
-
1226
- .solid-autocomplete-chip-label {
1227
- max-width: 130px;
1228
- overflow: hidden;
1229
- text-overflow: ellipsis;
1230
- white-space: nowrap;
1231
- }
1232
-
1233
- .solid-autocomplete-chip-remove {
1234
- border: 0;
1235
- background: transparent;
1236
- width: 14px;
1237
- height: 14px;
1238
- border-radius: 999px;
1239
- padding: 0;
1240
- display: inline-flex;
1241
- align-items: center;
1242
- justify-content: center;
1243
- cursor: pointer;
1244
- color: color-mix(in srgb, var(--foreground) 68%, transparent);
1245
- }
1246
-
1247
- .solid-autocomplete-chip-remove:hover {
1248
- background: color-mix(in srgb, var(--accent) 76%, transparent);
1249
- color: color-mix(in srgb, var(--foreground) 92%, transparent);
1250
- }
1251
-
1252
- .solid-autocomplete-chip-manage {
1253
- border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
1254
- background: color-mix(in srgb, var(--accent) 60%, transparent);
1255
- color: color-mix(in srgb, var(--foreground) 82%, transparent);
1256
- border-radius: 999px;
1257
- min-height: 22px;
1258
- padding: 0 6px;
1259
- font-size: 10px;
1260
- cursor: pointer;
1261
- }
1262
-
1263
- .solid-autocomplete-manager-panel {
1264
- position: absolute;
1265
- top: calc(100% + 4px);
1266
- left: 0;
1267
- width: min(360px, 100%);
1268
- z-index: 45;
1269
- border: 1px solid var(--border);
1270
- border-radius: 8px;
1271
- background: var(--card);
1272
- box-shadow: 0 12px 26px rgba(2, 6, 23, 0.16);
1273
- overflow: hidden;
1274
- }
1275
-
1276
- .solid-autocomplete-manager-header {
1277
- display: flex;
1278
- align-items: center;
1279
- justify-content: space-between;
1280
- border-bottom: 1px solid var(--border);
1281
- padding: 8px 10px;
1282
- }
1283
-
1284
- .solid-autocomplete-manager-title {
1285
- font-size: 11px;
1286
- font-weight: 600;
1287
- }
1288
-
1289
- .solid-autocomplete-manager-clear {
1290
- border: 0;
1291
- background: transparent;
1292
- font-size: 11px;
1293
- color: color-mix(in srgb, var(--primary) 84%, var(--foreground) 16%);
1294
- cursor: pointer;
1295
- }
1296
-
1297
- .solid-autocomplete-manager-body {
1298
- padding: 8px 10px;
1299
- display: flex;
1300
- flex-wrap: wrap;
1301
- gap: 6px;
1302
- max-height: 220px;
1303
- overflow-y: auto;
1304
- }
1305
-
1306
- .solid-tabs {}
1307
-
1308
- .solid-tabs-list {
1309
- display: inline-flex;
1310
- }
1311
-
1312
- .solid-tabs-trigger {}
1313
-
1314
- .solid-tabs-panel {}
1315
-
1316
- @keyframes solid-spin {
1317
- to {
1318
- transform: rotate(360deg);
1319
- }
1320
- }
1321
-
1322
- .solid-error-page {
1323
- min-height: 100vh;
1324
- display: grid;
1325
- grid-template-columns: 1fr;
1326
- background: var(--background);
1327
- }
1328
-
1329
- .solid-error-page__content {
1330
- display: flex;
1331
- align-items: center;
1332
- justify-content: center;
1333
- padding: 32px 28px;
1334
- }
1335
-
1336
- .solid-error-page__copy {
1337
- text-align: center;
1338
- max-width: 460px;
1339
- }
1340
-
1341
- .solid-error-page__eyebrow {
1342
- margin: 0 0 12px;
1343
- font-size: clamp(30px, 4vw, 52px);
1344
- font-weight: 700;
1345
- color: var(--foreground);
1346
- }
1347
-
1348
- .solid-error-page__title {
1349
- margin: 0 0 8px;
1350
- font-size: clamp(26px, 2.4vw, 34px);
1351
- line-height: 1.2;
1352
- color: var(--foreground);
1353
- }
1354
-
1355
- .solid-error-page__description {
1356
- margin: 0 auto 20px;
1357
- max-width: 420px;
1358
- font-size: 15px;
1359
- line-height: 1.55;
1360
- color: var(--muted-foreground);
1361
- }
1362
-
1363
- .solid-error-page__cta {
1364
- border-radius: 10px;
1365
- }
1366
-
1367
- .solid-error-page__visual {
1368
- display: none;
1369
- position: relative;
1370
- padding: 32px 28px;
1371
- align-items: center;
1372
- justify-content: center;
1373
- }
1374
-
1375
- .solid-error-page__visual-card {
1376
- width: min(100%, 620px);
1377
- height: min(82vh, 640px);
1378
- border-radius: 20px;
1379
- background: #050505;
1380
- display: flex;
1381
- align-items: center;
1382
- justify-content: center;
1383
- position: relative;
1384
- overflow: hidden;
1385
- }
1386
-
1387
- .solid-error-page__code {
1388
- position: absolute;
1389
- inset: 50% auto auto 50%;
1390
- transform: translate(-50%, -50%);
1391
- font-size: clamp(140px, 18vw, 270px);
1392
- line-height: 0.9;
1393
- font-weight: 800;
1394
- letter-spacing: 0.02em;
1395
- color: rgba(255, 255, 255, 0.18);
1396
- user-select: none;
1397
- }
1398
-
1399
- .solid-error-page__icon {
1400
- width: clamp(96px, 10vw, 160px);
1401
- height: clamp(96px, 10vw, 160px);
1402
- color: #ffffff;
1403
- z-index: 1;
1404
- }
1405
-
1406
- @media (min-width: 1024px) {
1407
- .solid-error-page {
1408
- grid-template-columns: 1fr 1fr;
1409
- }
1410
-
1411
- .solid-error-page__visual {
1412
- display: flex;
1413
- }
1414
- }
1415
-
1416
- /* Auth (ShadCN-style shell while preserving existing auth logic) */
1417
- .solid-auth-theme-wrapper {
1418
- min-height: 100vh;
1419
- position: relative;
1420
- display: grid;
1421
- place-items: center;
1422
- background:
1423
- radial-gradient(900px 500px at 10% -20%, color-mix(in srgb, var(--primary) 18%, transparent), transparent),
1424
- radial-gradient(700px 420px at 100% 0, color-mix(in srgb, var(--primary) 12%, transparent), transparent),
1425
- var(--background);
1426
- padding: 24px;
1427
- }
1428
-
1429
- .solid-auth-theme-wrapper.center {
1430
- place-items: center;
1431
- }
1432
-
1433
- .solid-auth-theme-wrapper.left > .grid,
1434
- .solid-auth-theme-wrapper.right > .grid {
1435
- display: grid !important;
1436
- grid-template-columns: 1fr 1fr;
1437
- width: min(1180px, 100%);
1438
- min-height: min(760px, calc(100vh - 48px));
1439
- border: 1px solid var(--border);
1440
- border-radius: 16px;
1441
- overflow: hidden;
1442
- background: var(--card);
1443
- box-shadow: var(--shadow-soft);
1444
- }
1445
-
1446
- .solid-auth-theme-wrapper.left .solid-login-dark-bg,
1447
- .solid-auth-theme-wrapper.right .solid-login-dark-bg {
1448
- background: var(--card);
1449
- color: var(--card-foreground);
1450
- padding: 36px 44px;
1451
- }
1452
-
1453
- .solid-auth-theme-wrapper.left .solid-left-layout,
1454
- .solid-auth-theme-wrapper.right .solid-right-layout {
1455
- position: relative;
1456
- background-size: cover;
1457
- background-position: center;
1458
- overflow: hidden;
1459
- }
1460
-
1461
- .solid-auth-theme-wrapper.left .solid-left-layout::after,
1462
- .solid-auth-theme-wrapper.right .solid-right-layout::after {
1463
- content: "";
1464
- position: absolute;
1465
- inset: 0;
1466
- background: linear-gradient(180deg, rgba(2, 6, 23, 0.24), rgba(2, 6, 23, 0.48));
1467
- }
1468
-
1469
- .solid-auth-theme-wrapper.left .solid-left-layout > *,
1470
- .solid-auth-theme-wrapper.right .solid-right-layout > * {
1471
- position: relative;
1472
- z-index: 1;
1473
- }
1474
-
1475
- .solid-auth-theme-wrapper.left .solid-logo.in_image_view,
1476
- .solid-auth-theme-wrapper.right .solid-logo.in_image_view {
1477
- top: 24px;
1478
- left: 24px;
1479
- right: auto;
1480
- }
1481
-
1482
- .solid-center-layout {
1483
- width: min(460px, calc(100vw - 32px));
1484
- }
1485
-
1486
- .auth-container {
1487
- width: 100%;
1488
- max-width: 460px;
1489
- border: 1px solid var(--border);
1490
- border-radius: 14px;
1491
- background: var(--card);
1492
- color: var(--card-foreground);
1493
- padding: 24px;
1494
- box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
1495
- }
1496
-
1497
- .auth-container.side {
1498
- width: 100%;
1499
- max-width: 460px;
1500
- }
1501
-
1502
- .solid-auth-title {
1503
- font-size: 1.625rem;
1504
- font-weight: 600;
1505
- line-height: 1.15;
1506
- letter-spacing: -0.01em;
1507
- }
1508
-
1509
- .solid-auth-input-label {
1510
- font-size: 12.5px;
1511
- font-weight: 500;
1512
- color: var(--muted-foreground);
1513
- }
1514
-
1515
- .auth-container .p-inputtext,
1516
- .auth-container .p-password .p-inputtext,
1517
- .auth-container .p-password-input {
1518
- width: 100%;
1519
- height: 40px;
1520
- border-radius: 10px;
1521
- border: 1px solid var(--border);
1522
- background: var(--background);
1523
- color: var(--foreground);
1524
- padding: 0 12px;
1525
- box-shadow: none;
1526
- }
1527
-
1528
- .auth-container .p-password {
1529
- width: 100%;
1530
- }
1531
-
1532
- .auth-container .p-inputtext:focus,
1533
- .auth-container .p-password .p-inputtext:focus {
1534
- border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
1535
- box-shadow: 0 0 0 3px var(--ring);
1536
- }
1537
-
1538
- .auth-container .p-password .p-password-toggle-mask-icon {
1539
- color: var(--muted);
1540
- }
1541
-
1542
- .auth-container .p-message {
1543
- border-radius: 8px;
1544
- margin-top: 4px;
1545
- padding: 8px 10px;
1546
- }
1547
-
1548
- .auth-container .p-message-text {
1549
- font-size: 12px;
1550
- }
1551
-
1552
- .auth-submit-button.p-button,
1553
- .auth-back-button.p-button {
1554
- width: 100%;
1555
- min-height: 40px;
1556
- border-radius: 10px;
1557
- font-weight: 500;
1558
- }
1559
-
1560
- .auth-submit-button.p-button .p-button-label,
1561
- .auth-back-button.p-button .p-button-label {
1562
- font-weight: 500;
1563
- }
1564
-
1565
- .auth-back-button.p-button.p-button-link {
1566
- justify-content: flex-start;
1567
- color: var(--muted-foreground);
1568
- }
1569
-
1570
- .auth-back-button.p-button.p-button-link:hover {
1571
- color: var(--foreground);
1572
- text-decoration: none;
1573
- }
1574
-
1575
- .solid-auth-tabs {
1576
- margin-top: 10px;
1577
- }
1578
-
1579
- .solid-auth-tabs-list {
1580
- display: grid;
1581
- grid-template-columns: 1fr 1fr;
1582
- gap: 4px;
1583
- padding: 4px;
1584
- border: 1px solid var(--border);
1585
- border-radius: 10px;
1586
- background: color-mix(in srgb, var(--muted) 12%, transparent);
1587
- }
1588
-
1589
- .solid-auth-tabs-trigger {
1590
- border: 0;
1591
- background: transparent;
1592
- color: var(--muted-foreground);
1593
- border-radius: 8px;
1594
- height: 34px;
1595
- font-size: 12.5px;
1596
- font-weight: 500;
1597
- cursor: pointer;
1598
- }
1599
-
1600
- .solid-auth-tabs-trigger.is-active {
1601
- background: var(--card);
1602
- color: var(--foreground);
1603
- box-shadow: 0 1px 0 rgba(2, 6, 23, 0.08);
1604
- }
1605
-
1606
- .solid-auth-tabs-panel {
1607
- margin-top: 8px;
1608
- }
1609
-
1610
- .auth-container .p-divider.p-divider-horizontal {
1611
- margin: 18px 0 10px;
1612
- }
1613
-
1614
- .auth-container .p-divider .p-divider-content {
1615
- border: 1px solid var(--border);
1616
- border-radius: 999px;
1617
- background: var(--card);
1618
- color: var(--muted-foreground);
1619
- font-size: 11px;
1620
- font-weight: 600;
1621
- letter-spacing: 0.08em;
1622
- padding: 4px 10px;
1623
- }
1624
-
1625
- .google-auth-button {
1626
- width: 100%;
1627
- height: 40px;
1628
- border-radius: 10px;
1629
- border: 1px solid var(--border);
1630
- background: var(--card);
1631
- color: var(--card-foreground);
1632
- display: inline-flex;
1633
- align-items: center;
1634
- justify-content: center;
1635
- gap: 8px;
1636
- font-size: 13px;
1637
- font-weight: 500;
1638
- transition: box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
1639
- }
1640
-
1641
- .google-auth-button:hover {
1642
- border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
1643
- background: color-mix(in srgb, var(--accent) 55%, var(--card));
1644
- }
1645
-
1646
- .google-auth-button:focus-visible {
1647
- outline: none;
1648
- box-shadow: 0 0 0 3px var(--ring);
1649
- }
1650
-
1651
- .solid-auth-social-grid {
1652
- display: grid;
1653
- grid-template-columns: repeat(3, minmax(0, 1fr));
1654
- gap: 8px;
1655
- }
1656
-
1657
- .solid-auth-social-btn.solid-btn {
1658
- width: 100%;
1659
- height: 36px;
1660
- min-height: 36px;
1661
- border-radius: 8px;
1662
- padding: 0;
1663
- display: inline-flex;
1664
- align-items: center;
1665
- justify-content: center;
1666
- border: 1px solid #2f2f37;
1667
- background: #18181b;
1668
- color: #f4f4f5;
1669
- }
1670
-
1671
- .solid-auth-social-btn.solid-btn:hover {
1672
- background: #1f1f23;
1673
- border-color: #3f3f46;
1674
- }
1675
-
1676
- .solid-auth-social-btn.solid-btn:focus-visible {
1677
- box-shadow: 0 0 0 2px rgba(244, 244, 245, 0.08);
1678
- }
1679
-
1680
- .solid-shadcn-toast.p-toast-message {
1681
- border: 1px solid #27272a;
1682
- border-radius: 10px;
1683
- background: #111113;
1684
- color: #fafafa;
1685
- box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35);
1686
- }
1687
-
1688
- .solid-shadcn-toast .p-toast-message-content {
1689
- padding: 10px 12px;
1690
- }
1691
-
1692
- .solid-shadcn-toast .p-toast-message-icon,
1693
- .solid-shadcn-toast .p-toast-icon-close {
1694
- color: #a1a1aa;
1695
- }
1696
-
1697
- .solid-shadcn-toast-content {
1698
- display: flex;
1699
- flex-direction: column;
1700
- gap: 2px;
1701
- }
1702
-
1703
- .solid-shadcn-toast-title {
1704
- font-size: 12px;
1705
- font-weight: 600;
1706
- line-height: 1.2;
1707
- color: #fafafa;
1708
- }
1709
-
1710
- .solid-shadcn-toast-description {
1711
- font-size: 11px;
1712
- line-height: 1.3;
1713
- color: #a1a1aa;
1714
- }
1715
-
1716
- .solid-auth-footer,
1717
- .solid-auth-footer-2 {
1718
- color: var(--muted-foreground);
1719
- }
1720
-
1721
- .solid-auth-theme-wrapper.left .solid-auth-footer,
1722
- .solid-auth-theme-wrapper.left .solid-auth-footer-2,
1723
- .solid-auth-theme-wrapper.right .solid-auth-footer,
1724
- .solid-auth-theme-wrapper.right .solid-auth-footer-2 {
1725
- width: min(1180px, 100%);
1726
- left: 50%;
1727
- transform: translateX(-50%);
1728
- }
1729
-
1730
- .solid-auth-image-title {
1731
- font-size: clamp(2rem, 4vw, 3.5rem);
1732
- line-height: 1.05;
1733
- }
1734
-
1735
- .solid-auth-image-subtitle {
1736
- font-size: clamp(1.25rem, 2.4vw, 2rem);
1737
- line-height: 1.1;
1738
- }
1739
-
1740
- .solid-auth-image-helper-text {
1741
- font-size: 0.925rem;
1742
- max-width: 40ch;
1743
- }
1744
-
1745
- @media (max-width: 1199px) {
1746
- .solid-auth-theme-wrapper {
1747
- padding: 14px;
1748
- }
1749
-
1750
- .solid-auth-theme-wrapper.left > .grid,
1751
- .solid-auth-theme-wrapper.right > .grid {
1752
- grid-template-columns: 1fr;
1753
- min-height: auto;
1754
- border-radius: 14px;
1755
- }
1756
-
1757
- .solid-auth-theme-wrapper.left .solid-left-layout,
1758
- .solid-auth-theme-wrapper.right .solid-right-layout {
1759
- display: none !important;
1760
- }
1761
-
1762
- .solid-auth-theme-wrapper.left .solid-login-dark-bg,
1763
- .solid-auth-theme-wrapper.right .solid-login-dark-bg {
1764
- padding: 16px;
1765
- }
1766
-
1767
- .auth-container {
1768
- max-width: 100%;
1769
- padding: 18px;
1770
- }
1771
-
1772
- .solid-center-layout {
1773
- width: 100%;
1774
- max-width: 460px;
1775
- }
1776
- }
1777
-
1778
- /* Auth visual alignment (match shadcn login blocks) */
1779
- .solid-auth-theme-wrapper {
1780
- min-height: 100vh;
1781
- background: #020204;
1782
- color: #f4f4f5;
1783
- padding: 0;
1784
- }
1785
-
1786
- .solid-auth-theme-wrapper.center {
1787
- display: grid;
1788
- place-items: center;
1789
- padding: 24px;
1790
- }
1791
-
1792
- .solid-auth-theme-wrapper.center .solid-center-layout {
1793
- width: min(380px, calc(100vw - 28px));
1794
- }
1795
-
1796
- .solid-auth-theme-wrapper.center .auth-container {
1797
- margin: 0 auto;
1798
- }
1799
-
1800
- .solid-auth-theme-wrapper.left > .grid,
1801
- .solid-auth-theme-wrapper.right > .grid {
1802
- width: 100%;
1803
- min-height: 100vh;
1804
- display: grid !important;
1805
- grid-template-columns: 1fr 1fr;
1806
- border: 0;
1807
- border-radius: 0;
1808
- background: #020204;
1809
- box-shadow: none;
1810
- }
1811
-
1812
- .solid-auth-theme-wrapper.left .solid-login-dark-bg,
1813
- .solid-auth-theme-wrapper.right .solid-login-dark-bg {
1814
- display: flex;
1815
- align-items: flex-start;
1816
- justify-content: center;
1817
- padding: 36px 40px;
1818
- background: #020204;
1819
- }
1820
-
1821
- .solid-auth-theme-wrapper.left .solid-left-layout,
1822
- .solid-auth-theme-wrapper.right .solid-right-layout {
1823
- background-color: #27272a;
1824
- background-size: cover;
1825
- background-position: center;
1826
- border-left: 1px solid #18181b;
1827
- }
1828
-
1829
- .solid-auth-theme-wrapper.left .solid-left-layout::after,
1830
- .solid-auth-theme-wrapper.right .solid-right-layout::after {
1831
- content: "";
1832
- position: absolute;
1833
- inset: 0;
1834
- background: rgba(24, 24, 27, 0.62);
1835
- }
1836
-
1837
- .solid-auth-theme-wrapper.left .solid-left-layout > *,
1838
- .solid-auth-theme-wrapper.right .solid-right-layout > * {
1839
- position: relative;
1840
- z-index: 2;
1841
- }
1842
-
1843
- .solid-auth-theme-wrapper.left .solid-logo.in_image_view,
1844
- .solid-auth-theme-wrapper.right .solid-logo.in_image_view {
1845
- top: 24px;
1846
- left: 24px;
1847
- right: auto;
1848
- }
1849
-
1850
- .auth-container {
1851
- width: 100%;
1852
- max-width: 360px;
1853
- border: 1px solid #27272a;
1854
- border-radius: 14px;
1855
- background: #111113;
1856
- color: #f4f4f5;
1857
- padding: 18px;
1858
- box-shadow: none;
1859
- }
1860
-
1861
- .auth-container.side {
1862
- max-width: 360px;
1863
- }
1864
-
1865
- .solid-auth-title {
1866
- font-size: 1.2rem;
1867
- font-weight: 700;
1868
- line-height: 1.25;
1869
- letter-spacing: -0.01em;
1870
- color: #fafafa;
1871
- text-align: left;
1872
- }
1873
-
1874
- .solid-auth-helper {
1875
- font-size: 11px;
1876
- line-height: 1.4;
1877
- color: #a1a1aa;
1878
- text-align: left;
1879
- }
1880
-
1881
- .solid-auth-input-label {
1882
- color: #e4e4e7;
1883
- font-size: 13px;
1884
- font-weight: 500;
1885
- }
1886
-
1887
- .solid-auth-inline-link {
1888
- color: #d4d4d8;
1889
- font-size: 13px;
1890
- text-decoration: none;
1891
- }
1892
-
1893
- .solid-auth-inline-link:hover {
1894
- color: #fafafa;
1895
- text-decoration: underline;
1896
- }
1897
-
1898
- .auth-container .p-inputtext,
1899
- .auth-container .p-password .p-inputtext,
1900
- .auth-container .p-password-input {
1901
- width: 100%;
1902
- height: 36px;
1903
- border: 1px solid #27272a;
1904
- border-radius: 10px;
1905
- background: #18181b;
1906
- color: #fafafa;
1907
- }
1908
-
1909
- .auth-container .p-inputtext::placeholder,
1910
- .auth-container .p-password .p-inputtext::placeholder {
1911
- color: #71717a;
1912
- }
1913
-
1914
- .auth-container .p-inputtext:focus,
1915
- .auth-container .p-password .p-inputtext:focus {
1916
- border-color: #3f3f46;
1917
- box-shadow: 0 0 0 2px rgba(244, 244, 245, 0.08);
1918
- }
1919
-
1920
- .auth-container .p-password .p-password-toggle-mask-icon {
1921
- color: #a1a1aa;
1922
- }
1923
-
1924
- .auth-container .p-message {
1925
- background: rgba(239, 68, 68, 0.12);
1926
- border-color: rgba(239, 68, 68, 0.3);
1927
- color: #fca5a5;
1928
- }
1929
-
1930
- .solid-auth-tabs-list {
1931
- border: 1px solid #27272a;
1932
- background: #18181b;
1933
- border-radius: 10px;
1934
- padding: 4px;
1935
- }
1936
-
1937
- .solid-auth-tabs .solid-tabs-trigger {
1938
- border: 0;
1939
- background: transparent;
1940
- color: #a1a1aa;
1941
- border-radius: 8px;
1942
- height: 30px;
1943
- font-size: 11px;
1944
- font-weight: 500;
1945
- cursor: pointer;
1946
- }
1947
-
1948
- .solid-auth-tabs .solid-tabs-trigger.is-active {
1949
- background: #27272a;
1950
- color: #fafafa;
1951
- box-shadow: none;
1952
- }
1953
-
1954
- .auth-submit-button.p-button {
1955
- min-height: 36px;
1956
- background: #f4f4f5;
1957
- border-color: #f4f4f5;
1958
- color: #09090b;
1959
- }
1960
-
1961
- .auth-submit-button.p-button .p-button-label {
1962
- color: #09090b;
1963
- font-weight: 600;
1964
- }
1965
-
1966
- .auth-submit-button.p-button:not(:disabled):hover {
1967
- background: #e4e4e7;
1968
- border-color: #e4e4e7;
1969
- }
1970
-
1971
- .auth-back-button.p-button.p-button-link {
1972
- color: #a1a1aa;
1973
- }
1974
-
1975
- .auth-back-button.p-button.p-button-link:hover {
1976
- color: #fafafa;
1977
- }
1978
-
1979
- .auth-container .p-divider {
1980
- margin: 16px 0 10px;
1981
- }
1982
-
1983
- .auth-container .p-divider .p-divider-content {
1984
- background: #111113;
1985
- color: #a1a1aa;
1986
- border: 0;
1987
- border-radius: 0;
1988
- padding: 0 10px;
1989
- font-size: 12px;
1990
- letter-spacing: 0;
1991
- text-transform: none;
1992
- }
1993
-
1994
- .auth-container .p-divider.p-divider-horizontal::before {
1995
- border-top-color: #27272a;
1996
- }
1997
-
1998
- .google-auth-button.solid-btn,
1999
- .google-auth-button {
2000
- width: 100%;
2001
- height: 36px;
2002
- border: 1px solid #27272a;
2003
- border-radius: 10px;
2004
- background: #18181b;
2005
- color: #fafafa;
2006
- font-size: 13px;
2007
- font-weight: 500;
2008
- box-shadow: none;
2009
- }
2010
-
2011
- .solid-auth-center-stack {
2012
- display: flex;
2013
- flex-direction: column;
2014
- gap: 12px;
2015
- }
2016
-
2017
- .solid-auth-brand {
2018
- display: inline-flex;
2019
- align-items: center;
2020
- gap: 8px;
2021
- color: #e4e4e7;
2022
- text-decoration: none;
2023
- font-size: 13px;
2024
- font-weight: 500;
2025
- }
2026
-
2027
- .solid-auth-brand.is-center {
2028
- align-self: center;
2029
- }
2030
-
2031
- .solid-auth-brand-icon {
2032
- width: 24px;
2033
- height: 24px;
2034
- border-radius: 7px;
2035
- border: 1px solid #27272a;
2036
- background: #18181b;
2037
- display: grid;
2038
- place-items: center;
2039
- overflow: hidden;
2040
- }
2041
-
2042
- .solid-auth-brand-icon img {
2043
- width: 100%;
2044
- height: 100%;
2045
- object-fit: contain;
2046
- display: block;
2047
- }
2048
-
2049
- .solid-auth-brand-fallback {
2050
- font-size: 12px;
2051
- font-weight: 700;
2052
- color: #fafafa;
2053
- }
2054
-
2055
- .solid-auth-brand-text {
2056
- color: #f4f4f5;
2057
- line-height: 1;
2058
- }
2059
-
2060
- .google-auth-button.solid-btn:hover,
2061
- .google-auth-button:hover {
2062
- background: #1f1f23;
2063
- border-color: #3f3f46;
2064
- box-shadow: none;
2065
- }
2066
-
2067
- .google-auth-button.solid-btn:focus-visible,
2068
- .google-auth-button:focus-visible {
2069
- box-shadow: 0 0 0 2px rgba(244, 244, 245, 0.08);
2070
- }
2071
-
2072
- .solid-auth-footer,
2073
- .solid-auth-footer-2 {
2074
- color: #a1a1aa;
2075
- }
2076
-
2077
- .solid-auth-subtitle a,
2078
- .solid-auth-footer a,
2079
- .solid-auth-footer-2 a {
2080
- color: #d4d4d8;
2081
- }
2082
-
2083
- @media (max-width: 1199px) {
2084
- .solid-auth-theme-wrapper.center {
2085
- padding: 16px;
2086
- }
2087
-
2088
- .solid-auth-theme-wrapper.left > .grid,
2089
- .solid-auth-theme-wrapper.right > .grid {
2090
- grid-template-columns: 1fr;
2091
- }
2092
-
2093
- .solid-auth-theme-wrapper.left .solid-left-layout,
2094
- .solid-auth-theme-wrapper.right .solid-right-layout {
2095
- display: none !important;
2096
- }
2097
-
2098
- .solid-auth-theme-wrapper.left .solid-login-dark-bg,
2099
- .solid-auth-theme-wrapper.right .solid-login-dark-bg {
2100
- padding: 20px;
2101
- }
2102
-
2103
- .auth-container {
2104
- max-width: 100%;
2105
- padding: 20px;
2106
- }
2107
- }
2108
-
2109
- /* Final auth isolation overrides against legacy global auth CSS */
2110
- .solid-auth-theme-wrapper .auth-container,
2111
- .solid-auth-theme-wrapper .auth-container.side {
2112
- min-width: 0 !important;
2113
- width: min(100%, 388px) !important;
2114
- max-width: 388px !important;
2115
- padding: 18px !important;
2116
- border-radius: 12px !important;
2117
- backdrop-filter: none !important;
2118
- box-shadow: none !important;
2119
- }
2120
-
2121
- .solid-auth-theme-wrapper.left .auth-container,
2122
- .solid-auth-theme-wrapper.right .auth-container {
2123
- width: min(100%, 392px) !important;
2124
- max-width: 392px !important;
2125
- }
2126
-
2127
- .solid-auth-theme-wrapper.center .solid-center-layout {
2128
- width: min(388px, calc(100vw - 24px)) !important;
2129
- }
2130
-
2131
- .solid-auth-theme-wrapper .auth-container form .mt-3 {
2132
- margin-top: 0.9rem !important;
2133
- }
2134
-
2135
- .solid-auth-theme-wrapper .auth-container form .mt-4 {
2136
- margin-top: 1.1rem !important;
2137
- }
2138
-
2139
- .solid-auth-theme-wrapper .solid-auth-title {
2140
- margin-top: 0 !important;
2141
- font-size: 1rem !important;
2142
- line-height: 1.25 !important;
2143
- letter-spacing: -0.01em !important;
2144
- }
2145
-
2146
- .solid-auth-theme-wrapper .solid-auth-helper {
2147
- margin-top: 0.5rem !important;
2148
- margin-bottom: 0.5rem !important;
2149
- font-size: 11px !important;
2150
- line-height: 1.35 !important;
2151
- }
2152
-
2153
- .solid-auth-theme-wrapper .solid-auth-tabs-list {
2154
- display: grid !important;
2155
- grid-template-columns: 1fr 1fr !important;
2156
- gap: 4px !important;
2157
- padding: 3px !important;
2158
- border-radius: 10px !important;
2159
- border: 1px solid #27272a !important;
2160
- background: #18181b !important;
2161
- }
2162
-
2163
- .solid-auth-theme-wrapper .solid-auth-tabs .solid-tabs-trigger {
2164
- appearance: none;
2165
- -webkit-appearance: none;
2166
- border: 0 !important;
2167
- outline: 0;
2168
- box-shadow: none;
2169
- min-height: 30px !important;
2170
- padding: 0 8px !important;
2171
- font-size: 12px !important;
2172
- line-height: 1 !important;
2173
- border-radius: 7px !important;
2174
- background: transparent !important;
2175
- color: #a1a1aa !important;
2176
- font-weight: 500 !important;
2177
- }
2178
-
2179
- .solid-auth-theme-wrapper .solid-auth-tabs .solid-tabs-trigger.is-active {
2180
- background: #2a2a2f !important;
2181
- color: #fafafa !important;
2182
- }
2183
-
2184
- .solid-auth-theme-wrapper .auth-container .p-inputtext,
2185
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext,
2186
- .solid-auth-theme-wrapper .auth-container .p-password-input {
2187
- height: 36px !important;
2188
- border-radius: 8px !important;
2189
- padding: 0 10px !important;
2190
- border: 1px solid #2f2f37 !important;
2191
- border-color: #2f2f37 !important;
2192
- border-top-color: #2f2f37 !important;
2193
- border-right-color: #2f2f37 !important;
2194
- border-bottom-color: #2f2f37 !important;
2195
- border-left-color: #2f2f37 !important;
2196
- background: #18181b !important;
2197
- color: #fafafa !important;
2198
- outline: 0 !important;
2199
- box-shadow: none !important;
2200
- }
2201
-
2202
- .solid-auth-theme-wrapper .auth-container .p-inputtext:hover,
2203
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:hover,
2204
- .solid-auth-theme-wrapper .auth-container .p-password-input:hover {
2205
- border-color: #2f2f37 !important;
2206
- border-top-color: #2f2f37 !important;
2207
- border-right-color: #2f2f37 !important;
2208
- border-bottom-color: #2f2f37 !important;
2209
- border-left-color: #2f2f37 !important;
2210
- }
2211
-
2212
- .solid-auth-theme-wrapper .auth-container .p-inputtext:focus,
2213
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:focus,
2214
- .solid-auth-theme-wrapper .auth-container .p-password-input:focus {
2215
- border-color: #2f2f37 !important;
2216
- border-top-color: #2f2f37 !important;
2217
- border-right-color: #2f2f37 !important;
2218
- border-bottom-color: #2f2f37 !important;
2219
- border-left-color: #2f2f37 !important;
2220
- box-shadow: none !important;
2221
- }
2222
-
2223
- .solid-auth-theme-wrapper .auth-container .p-inputtext.p-invalid,
2224
- .solid-auth-theme-wrapper .auth-container .p-password.p-invalid .p-inputtext,
2225
- .solid-auth-theme-wrapper .auth-container .p-password-input.p-invalid,
2226
- .solid-auth-theme-wrapper .auth-container .p-inputtext.p-invalid:enabled:hover,
2227
- .solid-auth-theme-wrapper .auth-container .p-password.p-invalid .p-inputtext:enabled:hover,
2228
- .solid-auth-theme-wrapper .auth-container .p-password-input.p-invalid:enabled:hover {
2229
- border-color: var(--solid-danger, #ef4444) !important;
2230
- border-top-color: var(--solid-danger, #ef4444) !important;
2231
- border-right-color: var(--solid-danger, #ef4444) !important;
2232
- border-bottom-color: var(--solid-danger, #ef4444) !important;
2233
- border-left-color: var(--solid-danger, #ef4444) !important;
2234
- box-shadow: 0 0 0 3px var(--solid-danger-soft, rgba(239, 68, 68, 0.2)) !important;
2235
- }
2236
-
2237
- .solid-auth-theme-wrapper .auth-container .p-inputtext:enabled:hover,
2238
- .solid-auth-theme-wrapper .auth-container .p-inputtext:enabled:focus,
2239
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:enabled:hover,
2240
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:enabled:focus,
2241
- .solid-auth-theme-wrapper .auth-container .p-password-input:enabled:hover,
2242
- .solid-auth-theme-wrapper .auth-container .p-password-input:enabled:focus {
2243
- border-color: #2f2f37 !important;
2244
- border-top-color: #2f2f37 !important;
2245
- border-right-color: #2f2f37 !important;
2246
- border-bottom-color: #2f2f37 !important;
2247
- border-left-color: #2f2f37 !important;
2248
- box-shadow: none !important;
2249
- }
2250
-
2251
- .solid-auth-theme-wrapper .auth-container .p-password.p-component {
2252
- border: 0 !important;
2253
- box-shadow: none !important;
2254
- background: transparent !important;
2255
- }
2256
-
2257
- .solid-auth-theme-wrapper .auth-container .p-inputtext:-webkit-autofill,
2258
- .solid-auth-theme-wrapper .auth-container .p-inputtext:-webkit-autofill:hover,
2259
- .solid-auth-theme-wrapper .auth-container .p-inputtext:-webkit-autofill:focus,
2260
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:-webkit-autofill,
2261
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:-webkit-autofill:hover,
2262
- .solid-auth-theme-wrapper .auth-container .p-password .p-inputtext:-webkit-autofill:focus {
2263
- -webkit-text-fill-color: #fafafa !important;
2264
- -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
2265
- box-shadow: 0 0 0 1000px #18181b inset !important;
2266
- border-color: #2f2f37 !important;
2267
- }
2268
-
2269
- .solid-auth-theme-wrapper .auth-submit-button.p-button,
2270
- .solid-auth-theme-wrapper .google-auth-button.solid-btn,
2271
- .solid-auth-theme-wrapper .google-auth-button {
2272
- min-height: 36px !important;
2273
- height: 36px !important;
2274
- border-radius: 8px !important;
2275
- }
2276
-
2277
- .solid-auth-theme-wrapper .auth-container .p-message {
2278
- margin-top: 6px !important;
2279
- padding: 0 !important;
2280
- background: transparent !important;
2281
- border: 0 !important;
2282
- box-shadow: none !important;
2283
- min-height: unset !important;
2284
- }
2285
-
2286
- .solid-auth-theme-wrapper .auth-container .p-inline-message {
2287
- margin-top: 6px !important;
2288
- padding: 0 !important;
2289
- background: transparent !important;
2290
- border: 0 !important;
2291
- box-shadow: none !important;
2292
- min-height: unset !important;
2293
- }
2294
-
2295
- .solid-auth-theme-wrapper .auth-container .p-message-wrapper,
2296
- .solid-auth-theme-wrapper .auth-container .p-inline-message-text {
2297
- background: transparent !important;
2298
- border: 0 !important;
2299
- box-shadow: none !important;
2300
- padding: 0 !important;
2301
- }
2302
-
2303
- .solid-auth-theme-wrapper .auth-container .p-message .p-message-text {
2304
- font-size: 12px !important;
2305
- line-height: 1.35 !important;
2306
- color: var(--solid-danger, #ef4444) !important;
2307
- font-weight: 500 !important;
2308
- }
2309
-
2310
- .solid-auth-theme-wrapper .auth-container .p-inline-message .p-inline-message-text,
2311
- .solid-auth-theme-wrapper .auth-container .p-message-text,
2312
- .solid-auth-theme-wrapper .auth-container .p-inline-message-text,
2313
- .solid-auth-theme-wrapper .auth-container .p-message-content,
2314
- .solid-auth-theme-wrapper .auth-container .p-message-content > * {
2315
- color: var(--solid-danger, #ef4444) !important;
2316
- }
2317
-
2318
- .solid-auth-theme-wrapper .auth-container .text-red-500,
2319
- .solid-auth-theme-wrapper .auth-container [class*="text-red"] {
2320
- color: var(--solid-danger, #ef4444) !important;
2321
- }
2322
-
2323
- .solid-auth-theme-wrapper .auth-container .p-message .p-message-icon,
2324
- .solid-auth-theme-wrapper .auth-container .p-message .p-inline-message-icon {
2325
- display: none !important;
2326
- }
2327
-
2328
- /* Side auth layout shell (left/right) */
2329
- .solid-auth-theme-wrapper.left,
2330
- .solid-auth-theme-wrapper.right {
2331
- padding: 0 !important;
2332
- display: block !important;
2333
- }
2334
-
2335
- .solid-auth-theme-wrapper .solid-auth-split {
2336
- width: 100%;
2337
- min-height: 100vh;
2338
- display: grid;
2339
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
2340
- background: #020204;
2341
- }
2342
-
2343
- .solid-auth-theme-wrapper .solid-auth-form-pane {
2344
- display: flex;
2345
- align-items: center;
2346
- justify-content: center;
2347
- padding: 36px 40px;
2348
- background: #020204;
2349
- }
2350
-
2351
- .solid-auth-theme-wrapper .solid-auth-form-pane-inner {
2352
- width: 100%;
2353
- max-width: 440px;
2354
- display: flex;
2355
- flex-direction: column;
2356
- align-items: stretch;
2357
- }
2358
-
2359
- .solid-auth-theme-wrapper.left .solid-auth-form-pane,
2360
- .solid-auth-theme-wrapper.right .solid-auth-form-pane {
2361
- align-items: center !important;
2362
- justify-content: center !important;
2363
- }
2364
-
2365
- .solid-auth-theme-wrapper.left .solid-auth-form-pane .solid-auth-brand,
2366
- .solid-auth-theme-wrapper.right .solid-auth-form-pane .solid-auth-brand {
2367
- align-self: flex-start;
2368
- margin-bottom: 10px;
2369
- }
2370
-
2371
- .solid-auth-theme-wrapper .solid-auth-image-pane {
2372
- position: relative;
2373
- min-height: 100vh;
2374
- background-color: #27272a;
2375
- background-size: cover;
2376
- background-position: center;
2377
- overflow: hidden;
2378
- }
2379
-
2380
- .solid-auth-theme-wrapper .solid-auth-image-pane.pane-on-right {
2381
- border-left: 1px solid #18181b;
2382
- }
2383
-
2384
- .solid-auth-theme-wrapper .solid-auth-image-pane.pane-on-left {
2385
- border-right: 1px solid #18181b;
2386
- }
2387
-
2388
- @media (max-width: 1199px) {
2389
- .solid-auth-theme-wrapper .solid-auth-split {
2390
- grid-template-columns: 1fr;
2391
- }
2392
-
2393
- .solid-auth-theme-wrapper .solid-auth-image-pane {
2394
- display: none;
2395
- }
2396
-
2397
- .solid-auth-theme-wrapper .solid-auth-form-pane {
2398
- min-height: 100vh;
2399
- padding: 20px;
2400
- }
2401
- }
2402
-
2403
- /* Auth theme contract (triggered by API value: authPagesTheme) */
2404
- .solid-auth-theme-wrapper {
2405
- --solid-surface-base: #020204;
2406
- --solid-surface-pane: #020204;
2407
- --solid-surface-image: #27272a;
2408
- --solid-surface-card: #111113;
2409
- --solid-surface-input: #18181b;
2410
- --solid-surface-tab: #18181b;
2411
- --solid-surface-tab-active: #2a2a2f;
2412
- --solid-surface-social: #18181b;
2413
- --solid-text-primary: #fafafa;
2414
- --solid-text-secondary: #e4e4e7;
2415
- --solid-text-muted: #a1a1aa;
2416
- --solid-input-placeholder: #71717a;
2417
- --solid-border-default: #27272a;
2418
- --solid-border-strong: #2f2f37;
2419
- --solid-image-border: #18181b;
2420
- --solid-danger: #ef4444;
2421
- --solid-danger-soft: rgba(239, 68, 68, 0.22);
2422
- }
2423
-
2424
- .solid-auth-theme-wrapper.auth-theme-light {
2425
- --solid-surface-base: #f5f6f8;
2426
- --solid-surface-pane: #f5f6f8;
2427
- --solid-surface-image: #e5e7eb;
2428
- --solid-surface-card: #ffffff;
2429
- --solid-surface-input: #ffffff;
2430
- --solid-surface-tab: #f3f4f6;
2431
- --solid-surface-tab-active: #ffffff;
2432
- --solid-surface-social: #ffffff;
2433
- --solid-text-primary: #111827;
2434
- --solid-text-secondary: #374151;
2435
- --solid-text-muted: #6b7280;
2436
- --solid-input-placeholder: #9ca3af;
2437
- --solid-border-default: #d1d5db;
2438
- --solid-border-strong: #cbd5e1;
2439
- --solid-image-border: #d1d5db;
2440
- --solid-danger: #ef4444;
2441
- --solid-danger-soft: rgba(239, 68, 68, 0.18);
2442
- }
2443
-
2444
- .solid-auth-theme-wrapper.auth-theme-light,
2445
- .solid-auth-theme-wrapper.auth-theme-dark {
2446
- background: var(--solid-surface-base) !important;
2447
- color: var(--solid-text-secondary) !important;
2448
- }
2449
-
2450
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-split,
2451
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-split {
2452
- background: var(--solid-surface-base) !important;
2453
- }
2454
-
2455
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-form-pane,
2456
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-form-pane {
2457
- background: var(--solid-surface-pane) !important;
2458
- }
2459
-
2460
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-image-pane,
2461
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-image-pane {
2462
- background-color: var(--solid-surface-image) !important;
2463
- }
2464
-
2465
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-image-pane.pane-on-right,
2466
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-image-pane.pane-on-right {
2467
- border-left-color: var(--solid-image-border) !important;
2468
- }
2469
-
2470
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-image-pane.pane-on-left,
2471
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-image-pane.pane-on-left {
2472
- border-right-color: var(--solid-image-border) !important;
2473
- }
2474
-
2475
- .solid-auth-theme-wrapper.auth-theme-light .auth-container,
2476
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container {
2477
- background: var(--solid-surface-card) !important;
2478
- border-color: var(--solid-border-default) !important;
2479
- }
2480
-
2481
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-title,
2482
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-title {
2483
- color: var(--solid-text-primary) !important;
2484
- }
2485
-
2486
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-helper,
2487
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-helper,
2488
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-input-label,
2489
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-input-label,
2490
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-brand,
2491
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-brand,
2492
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-brand-text,
2493
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-brand-text {
2494
- color: var(--solid-text-secondary) !important;
2495
- }
2496
-
2497
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-inline-link,
2498
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-inline-link,
2499
- .solid-auth-theme-wrapper.auth-theme-light .p-divider .p-divider-content,
2500
- .solid-auth-theme-wrapper.auth-theme-dark .p-divider .p-divider-content {
2501
- color: var(--solid-text-muted) !important;
2502
- }
2503
-
2504
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-tabs-list,
2505
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-tabs-list {
2506
- background: var(--solid-surface-tab) !important;
2507
- border-color: var(--solid-border-default) !important;
2508
- }
2509
-
2510
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-tabs .solid-tabs-trigger,
2511
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-tabs .solid-tabs-trigger {
2512
- color: var(--solid-text-muted) !important;
2513
- }
2514
-
2515
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-tabs .solid-tabs-trigger.is-active,
2516
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-tabs .solid-tabs-trigger.is-active {
2517
- background: var(--solid-surface-tab-active) !important;
2518
- color: var(--solid-text-primary) !important;
2519
- }
2520
-
2521
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-inputtext,
2522
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-inputtext,
2523
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-password .p-inputtext,
2524
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-password .p-inputtext,
2525
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-password-input,
2526
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-password-input {
2527
- background: var(--solid-surface-input) !important;
2528
- color: var(--solid-text-primary) !important;
2529
- border-color: var(--solid-border-strong) !important;
2530
- border-top-color: var(--solid-border-strong) !important;
2531
- border-right-color: var(--solid-border-strong) !important;
2532
- border-bottom-color: var(--solid-border-strong) !important;
2533
- border-left-color: var(--solid-border-strong) !important;
2534
- }
2535
-
2536
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-inputtext::placeholder,
2537
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-inputtext::placeholder,
2538
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-password .p-inputtext::placeholder,
2539
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-password .p-inputtext::placeholder {
2540
- color: var(--solid-input-placeholder) !important;
2541
- }
2542
-
2543
- .solid-auth-theme-wrapper.auth-theme-light .solid-auth-social-btn.solid-btn,
2544
- .solid-auth-theme-wrapper.auth-theme-dark .solid-auth-social-btn.solid-btn {
2545
- background: var(--solid-surface-social) !important;
2546
- border-color: var(--solid-border-strong) !important;
2547
- color: var(--solid-text-primary) !important;
2548
- }
2549
-
2550
- .solid-auth-theme-wrapper .solid-auth-helper-emphasis {
2551
- color: var(--solid-text-primary);
2552
- font-weight: 600;
2553
- }
2554
-
2555
- .solid-auth-theme-wrapper .solid-auth-otp-field {
2556
- display: flex;
2557
- flex-direction: column;
2558
- gap: 10px;
2559
- margin-top: 12px;
2560
- }
2561
-
2562
- .solid-auth-theme-wrapper .solid-auth-otp-top {
2563
- display: flex;
2564
- align-items: center;
2565
- justify-content: space-between;
2566
- gap: 8px;
2567
- }
2568
-
2569
- .solid-auth-theme-wrapper .solid-auth-otp-resend.solid-btn {
2570
- min-height: 28px;
2571
- height: 28px;
2572
- padding: 0 8px;
2573
- border-radius: 6px;
2574
- font-size: 11px;
2575
- line-height: 1;
2576
- gap: 6px;
2577
- }
2578
-
2579
- .solid-auth-theme-wrapper .solid-auth-otp-time {
2580
- margin: 0;
2581
- font-size: 11px;
2582
- line-height: 1.3;
2583
- color: var(--solid-text-muted);
2584
- }
2585
-
2586
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp {
2587
- display: flex;
2588
- align-items: center;
2589
- justify-content: center;
2590
- gap: 8px;
2591
- width: 100%;
2592
- }
2593
-
2594
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp .p-inputotp-input {
2595
- width: 42px;
2596
- min-width: 42px;
2597
- height: 46px;
2598
- border-radius: 10px;
2599
- border: 1px solid var(--solid-border-strong) !important;
2600
- background: var(--solid-surface-input) !important;
2601
- color: var(--solid-text-primary) !important;
2602
- text-align: center;
2603
- font-size: 1.15rem;
2604
- font-weight: 600;
2605
- }
2606
-
2607
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp .p-inputotp-input:focus {
2608
- outline: none;
2609
- border-color: var(--solid-border-strong) !important;
2610
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--solid-focus-ring) 60%, transparent);
2611
- }
2612
-
2613
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp .p-inputotp-input:nth-child(3) {
2614
- margin-right: 10px;
2615
- }
2616
-
2617
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp .p-inputotp-input:nth-child(4) {
2618
- margin-left: 10px;
2619
- }
2620
-
2621
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp.p-invalid .p-inputotp-input {
2622
- border-color: #ef4444 !important;
2623
- }
2624
-
2625
- @media (max-width: 480px) {
2626
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp {
2627
- gap: 6px;
2628
- }
2629
-
2630
- .solid-auth-theme-wrapper .solid-auth-otp-input.p-inputotp .p-inputotp-input {
2631
- width: 36px;
2632
- min-width: 36px;
2633
- height: 42px;
2634
- font-size: 1rem;
2635
- }
2636
- }
2637
-
2638
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-divider .p-divider-content,
2639
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-divider .p-divider-content {
2640
- background: var(--solid-surface-card) !important;
2641
- color: var(--solid-text-muted) !important;
2642
- border: 0 !important;
2643
- box-shadow: none !important;
2644
- font-size: 12px !important;
2645
- font-weight: 500 !important;
2646
- letter-spacing: 0 !important;
2647
- text-transform: none !important;
2648
- }
2649
-
2650
- .solid-auth-theme-wrapper.auth-theme-light .auth-container .p-divider.p-divider-horizontal::before,
2651
- .solid-auth-theme-wrapper.auth-theme-dark .auth-container .p-divider.p-divider-horizontal::before {
2652
- border-top: 1px solid var(--solid-border-default) !important;
2653
- }
2654
-
2655
- /* Unified ambient auth glow across center/left/right layouts */
2656
- .solid-auth-theme-wrapper {
2657
- isolation: isolate;
2658
- overflow: hidden;
2659
- }
2660
-
2661
- .solid-auth-theme-wrapper::before,
2662
- .solid-auth-theme-wrapper::after {
2663
- content: "";
2664
- position: absolute;
2665
- pointer-events: none;
2666
- z-index: 0;
2667
- border-radius: 999px;
2668
- filter: blur(6px);
2669
- }
2670
-
2671
- .solid-auth-theme-wrapper::before {
2672
- width: min(280px, 36vw);
2673
- height: min(280px, 36vw);
2674
- top: -120px;
2675
- left: -70px;
2676
- background:
2677
- radial-gradient(circle at center,
2678
- color-mix(in srgb, #a855f7 78%, #c084fc 22%) 0%,
2679
- color-mix(in srgb, #7c3aed 60%, transparent) 42%,
2680
- transparent 72%);
2681
- opacity: 0.9;
2682
- }
2683
-
2684
- .solid-auth-theme-wrapper::after {
2685
- width: min(340px, 44vw);
2686
- height: min(340px, 44vw);
2687
- right: -130px;
2688
- bottom: -170px;
2689
- background:
2690
- radial-gradient(circle at center,
2691
- color-mix(in srgb, #9333ea 68%, #6366f1 32%) 0%,
2692
- color-mix(in srgb, #6d28d9 58%, transparent) 46%,
2693
- transparent 75%);
2694
- opacity: 0.62;
2695
- }
2696
-
2697
- .solid-auth-theme-wrapper.auth-theme-light::before {
2698
- opacity: 0.48;
2699
- }
2700
-
2701
- .solid-auth-theme-wrapper.auth-theme-light::after {
2702
- opacity: 0.34;
2703
- }
2704
-
2705
- .solid-auth-theme-wrapper > * {
2706
- position: relative;
2707
- z-index: 1;
2708
- }
2709
-
2710
- /* List table (non-Prime table layer) */
2711
- .solid-list-page-wrapper {
2712
- height: calc(100dvh - 46px) !important;
2713
- max-height: calc(100dvh - 46px) !important;
2714
- min-height: 0;
2715
- flex: 1 1 auto;
2716
- overflow: hidden !important;
2717
- background-color: var(--background) !important;
2718
- padding: 12px;
2719
- }
2720
-
2721
- .solid-list-page-wrapper .page-header {
2722
- flex-shrink: 0;
2723
- }
2724
-
2725
- .solid-list-content {
2726
- display: flex;
2727
- flex-direction: column;
2728
- flex: 1 1 auto;
2729
- min-height: 0;
2730
- height: 100%;
2731
- }
2732
-
2733
- .solid-list-surface {
2734
- width: 100%;
2735
- height: 100%;
2736
- min-height: 0;
2737
- display: flex;
2738
- flex-direction: column;
2739
- flex: 1 1 auto;
2740
- background: var(--card);
2741
- border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
2742
- border-radius: 12px;
2743
- box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
2744
- overflow: hidden;
2745
- }
2746
-
2747
- .solid-list-toolbar {
2748
- padding: 10px 12px;
2749
- border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
2750
- background: color-mix(in srgb, var(--card) 94%, var(--background) 6%);
2751
- }
2752
-
2753
- .solid-list-toolbar .view-title {
2754
- font-size: 15px;
2755
- font-weight: 600;
2756
- line-height: 1.2;
2757
- color: var(--foreground);
2758
- }
2759
-
2760
- .solid-list-toolbar .solid-list-toolbar-actions {
2761
- gap: 8px !important;
2762
- }
2763
-
2764
- .solid-list-toolbar .solid-global-search-element {
2765
- height: 36px;
2766
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
2767
- border-radius: 10px;
2768
- background: var(--background);
2769
- padding: 0 0 0 6px;
2770
- }
2771
-
2772
- .solid-list-toolbar .solid-global-search-element:focus-within {
2773
- border-color: color-mix(in srgb, var(--ring) 60%, var(--border) 40%);
2774
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 18%, transparent);
2775
- }
2776
-
2777
- .solid-list-toolbar .solid-global-search-element-wrapper {
2778
- width: min(460px, 42vw);
2779
- }
2780
-
2781
- .solid-list-toolbar .solid-global-search-element input {
2782
- height: 34px;
2783
- max-width: none !important;
2784
- width: 100%;
2785
- border: 0;
2786
- background: transparent;
2787
- font-size: 13px;
2788
- color: var(--foreground);
2789
- padding-left: 8px;
2790
- padding-right: 40px;
2791
- }
2792
-
2793
- .solid-list-toolbar .solid-global-search-element input::placeholder {
2794
- color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
2795
- }
2796
-
2797
- .solid-list-toolbar .custom-filter-button {
2798
- border: 0;
2799
- background: transparent;
2800
- height: 34px;
2801
- width: 34px;
2802
- border-radius: 8px;
2803
- right: 1px;
2804
- }
2805
-
2806
- .solid-list-toolbar .custom-filter-button:hover {
2807
- background: color-mix(in srgb, var(--accent) 65%, transparent);
2808
- }
2809
-
2810
- .solid-list-toolbar .p-button {
2811
- height: 32px;
2812
- border-radius: 8px;
2813
- font-size: 12px;
2814
- font-weight: 500;
2815
- }
2816
-
2817
- .solid-list-toolbar .p-button.p-button-secondary,
2818
- .solid-list-toolbar .p-button.p-button-outlined,
2819
- .solid-list-toolbar .solid-icon-button {
2820
- border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
2821
- background: var(--background);
2822
- color: var(--foreground);
2823
- }
2824
-
2825
- .solid-list-toolbar .solid-icon-button {
2826
- width: 32px !important;
2827
- min-width: 32px !important;
2828
- padding: 0 !important;
2829
- }
2830
-
2831
- .solid-list-table-area {
2832
- display: flex;
2833
- flex-direction: column;
2834
- flex: 1;
2835
- min-height: 0;
2836
- padding: 0 10px 0;
2837
- }
2838
-
2839
- .solid-list-page-wrapper .solid-datatable-wrapper {
2840
- height: 100% !important;
2841
- min-height: 0;
2842
- }
2843
-
2844
- .solid-list-table-area > .solid-data-table-root {
2845
- flex: 1 1 auto;
2846
- min-height: 0;
2847
- }
2848
-
2849
- .solid-data-table-root {
2850
- height: 100%;
2851
- display: grid;
2852
- grid-template-rows: minmax(0, 1fr) auto;
2853
- min-height: 0;
2854
- overflow: hidden;
2855
- }
2856
-
2857
- .solid-data-table-viewport {
2858
- min-height: 0;
2859
- height: 100%;
2860
- overflow-y: auto;
2861
- overflow-x: auto;
2862
- }
2863
-
2864
- .solid-datatable-wrapper table {
2865
- width: 100%;
2866
- min-width: max-content;
2867
- table-layout: auto;
2868
- }
2869
-
2870
- .solid-datatable-wrapper th,
2871
- .solid-datatable-wrapper td {
2872
- font-size: 13px;
2873
- line-height: 1.35;
2874
- white-space: nowrap;
2875
- color: var(--foreground);
2876
- }
2877
-
2878
- .solid-data-table-head {
2879
- background: color-mix(in srgb, var(--card) 88%, var(--background) 12%);
2880
- }
2881
-
2882
- .solid-data-table-th {
2883
- font-weight: 600;
2884
- color: color-mix(in srgb, var(--foreground) 90%, transparent);
2885
- border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
2886
- }
2887
-
2888
- .solid-data-table-td {
2889
- color: color-mix(in srgb, var(--foreground) 94%, transparent);
2890
- }
2891
-
2892
- .solid-data-table-row {
2893
- border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
2894
- transition: background-color 140ms ease;
2895
- }
2896
-
2897
- .solid-data-table-row:hover {
2898
- background: color-mix(in srgb, var(--accent) 46%, transparent);
2899
- }
2900
-
2901
- .solid-table-density-compact .solid-data-table-th,
2902
- .solid-table-density-compact .solid-data-table-td {
2903
- height: 34px;
2904
- padding: 0.3125rem 0.5625rem;
2905
- }
2906
-
2907
- .solid-table-density-cozy .solid-data-table-th,
2908
- .solid-table-density-cozy .solid-data-table-td {
2909
- height: 38px;
2910
- padding: 0.375rem 0.625rem;
2911
- }
2912
-
2913
- .solid-table-density-comfortable .solid-data-table-th,
2914
- .solid-table-density-comfortable .solid-data-table-td {
2915
- height: 46px;
2916
- padding: 0.5rem 0.875rem;
2917
- }
2918
-
2919
- .solid-data-table-selection-col {
2920
- width: 48px;
2921
- min-width: 48px;
2922
- max-width: 48px;
2923
- text-align: center;
2924
- padding-left: 0.75rem !important;
2925
- padding-right: 0.75rem !important;
2926
- }
2927
-
2928
- .solid-table-cell-numeric {
2929
- text-align: right;
2930
- font-variant-numeric: tabular-nums;
2931
- }
2932
-
2933
- .solid-table-header-numeric {
2934
- text-align: right;
2935
- font-variant-numeric: tabular-nums;
2936
- }
2937
-
2938
- .solid-table-header-button {
2939
- all: unset;
2940
- display: inline-flex;
2941
- align-items: center;
2942
- gap: 5px;
2943
- font-weight: 600;
2944
- color: inherit;
2945
- font-size: 12px;
2946
- line-height: 1.2;
2947
- }
2948
-
2949
- .solid-table-header-button.is-sortable {
2950
- cursor: pointer;
2951
- }
2952
-
2953
- .solid-table-header-button i {
2954
- font-size: 11px;
2955
- }
2956
-
2957
- .solid-data-table-root input[type="checkbox"] {
2958
- width: 15px;
2959
- height: 15px;
2960
- accent-color: var(--primary);
2961
- }
2962
-
2963
- .solid-table-paginator {
2964
- flex-shrink: 0;
2965
- min-height: 44px;
2966
- position: relative;
2967
- z-index: 1;
2968
- background: var(--card);
2969
- border-color: color-mix(in srgb, var(--border) 86%, transparent) !important;
2970
- border-bottom: 0;
2971
- border-bottom-left-radius: 0;
2972
- border-bottom-right-radius: 0;
2973
- padding-top: 8px;
2974
- padding-bottom: 8px;
2975
- }
2976
-
2977
- .solid-table-paginator-align-end {
2978
- align-self: end;
2979
- }
2980
-
2981
- .solid-paginator-meta {
2982
- align-items: center;
2983
- }
2984
-
2985
- .solid-paginator-label,
2986
- .solid-paginator-report {
2987
- font-size: 12px;
2988
- line-height: 1;
2989
- color: color-mix(in srgb, var(--foreground) 82%, transparent);
2990
- font-weight: 500;
2991
- }
2992
-
2993
- .solid-paginator-select {
2994
- height: 32px;
2995
- min-width: 46px;
2996
- border-radius: 8px;
2997
- border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
2998
- background: var(--background);
2999
- color: var(--foreground);
3000
- font-size: 12px;
3001
- font-weight: 500;
3002
- line-height: 1;
3003
- padding: 0 26px 0 8px;
3004
- }
3005
-
3006
- .solid-paginator-btn {
3007
- height: 32px;
3008
- min-width: 72px;
3009
- display: inline-flex;
3010
- align-items: center;
3011
- justify-content: center;
3012
- border-radius: 8px;
3013
- border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
3014
- background: var(--background);
3015
- color: var(--foreground);
3016
- font-size: 12px;
3017
- font-weight: 500;
3018
- line-height: 1;
3019
- padding: 0 12px;
3020
- transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
3021
- }
3022
-
3023
- .solid-paginator-btn:hover:not(:disabled) {
3024
- background: var(--accent);
3025
- border-color: color-mix(in srgb, var(--border) 74%, transparent);
3026
- }
3027
-
3028
- .solid-paginator-btn:disabled {
3029
- opacity: 0.46;
3030
- cursor: not-allowed;
3031
- }
3032
-
3033
- .solid-data-table-viewport {
3034
- scrollbar-width: thin;
3035
- scrollbar-color: color-mix(in srgb, var(--foreground) 26%, transparent) color-mix(in srgb, var(--background) 86%, transparent);
3036
- }
3037
-
3038
- .solid-data-table-viewport::-webkit-scrollbar {
3039
- width: 10px;
3040
- height: 10px;
3041
- }
3042
-
3043
- .solid-data-table-viewport::-webkit-scrollbar-track {
3044
- background: color-mix(in srgb, var(--background) 86%, transparent);
3045
- border-radius: 999px;
3046
- }
3047
-
3048
- .solid-data-table-viewport::-webkit-scrollbar-thumb {
3049
- background: color-mix(in srgb, var(--foreground) 26%, transparent);
3050
- border-radius: 999px;
3051
- border: 2px solid color-mix(in srgb, var(--background) 86%, transparent);
3052
- }
3053
-
3054
- .solid-data-table-viewport::-webkit-scrollbar-thumb:hover {
3055
- background: color-mix(in srgb, var(--foreground) 36%, transparent);
3056
- }
3057
-
3058
- .solid-datatable-wrapper .greyed-out-row {
3059
- opacity: 0.55;
3060
- }
3061
-
3062
- .solid-datatable-wrapper a {
3063
- color: color-mix(in srgb, var(--primary) 84%, var(--foreground) 16%);
3064
- font-weight: 500;
3065
- }
3066
-
3067
- .solid-list-external-link {
3068
- border: 0;
3069
- background: transparent;
3070
- color: color-mix(in srgb, var(--primary) 84%, var(--foreground) 16%);
3071
- display: inline-flex;
3072
- align-items: center;
3073
- gap: 6px;
3074
- font-size: 13px;
3075
- line-height: 1.25;
3076
- font-weight: 500;
3077
- padding: 0;
3078
- cursor: pointer;
3079
- }
3080
-
3081
- .solid-list-external-link:hover {
3082
- color: color-mix(in srgb, var(--primary) 94%, var(--foreground) 6%);
3083
- }
3084
-
3085
- .solid-list-external-link-text {
3086
- white-space: nowrap;
3087
- }
3088
-
3089
- .solid-list-external-link-icon {
3090
- opacity: 0.9;
3091
- }
3092
-
3093
- .solid-data-table-viewport {
3094
- border-width: 1px !important;
3095
- }
3096
-
3097
- .solid-row-menu-trigger.p-button,
3098
- .solid-row-menu-trigger {
3099
- width: 28px;
3100
- height: 28px;
3101
- min-width: 28px;
3102
- border-radius: 8px;
3103
- border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
3104
- background: var(--background);
3105
- color: color-mix(in srgb, var(--foreground) 78%, transparent);
3106
- display: inline-flex;
3107
- align-items: center;
3108
- justify-content: center;
3109
- cursor: pointer;
3110
- transition: background 120ms ease, color 120ms ease;
3111
- }
3112
-
3113
- .solid-row-menu-trigger.p-button:hover,
3114
- .solid-row-menu-trigger:hover {
3115
- background: var(--accent);
3116
- color: var(--accent-foreground);
3117
- }
3118
-
3119
- .solid-row-menu-trigger .p-button-label {
3120
- display: none;
3121
- }
3122
-
3123
- .solid-custom-overlay .p-overlaypanel-content {
3124
- padding: 3px;
3125
- border-radius: 8px;
3126
- border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
3127
- background: var(--card);
3128
- box-shadow: 0 10px 24px color-mix(in srgb, hsl(222 47% 11%) 18%, transparent);
3129
- }
3130
-
3131
- .solid-row-actions-menu {
3132
- min-width: 152px;
3133
- }
3134
-
3135
- .solid-row-action-button.p-button {
3136
- width: 100%;
3137
- justify-content: flex-start;
3138
- border: 1px solid transparent;
3139
- background: transparent;
3140
- color: var(--foreground);
3141
- border-radius: 6px;
3142
- min-height: 27px;
3143
- padding: 0 8px;
3144
- font-size: 12px;
3145
- font-weight: 500;
3146
- line-height: 1.1;
3147
- }
3148
-
3149
- .solid-row-action-button.p-button .p-button-label {
3150
- flex: 1;
3151
- text-align: left;
3152
- line-height: 1.1;
3153
- }
3154
-
3155
- .solid-row-action-button.p-button .p-button-icon {
3156
- font-size: 11px;
3157
- margin-right: 6px;
3158
- }
3159
-
3160
- .solid-row-action-button.p-button:hover {
3161
- background: var(--accent);
3162
- border-color: color-mix(in srgb, var(--border) 82%, transparent);
3163
- }
3164
-
3165
- .solid-row-action-button.p-button:focus-visible {
3166
- outline: none;
3167
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
3168
- }
3169
-
3170
- .solid-row-action-button.p-button.solid-row-action-button-danger {
3171
- color: hsl(0 72% 45%);
3172
- }
3173
-
3174
- .solid-row-action-button.p-button.solid-row-action-button-danger:hover {
3175
- background: color-mix(in srgb, hsl(0 72% 45%) 11%, transparent);
3176
- border-color: color-mix(in srgb, hsl(0 72% 45%) 40%, transparent);
3177
- }
3178
-
3179
- .solid-inline-row-button.p-button {
3180
- min-height: 28px;
3181
- border-radius: 8px;
3182
- border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
3183
- background: transparent;
3184
- color: var(--foreground);
3185
- font-size: 12px;
3186
- font-weight: 500;
3187
- padding: 0 9px;
3188
- }
3189
-
3190
- .solid-inline-row-button.p-button:hover {
3191
- background: var(--accent);
3192
- border-color: color-mix(in srgb, var(--border) 78%, transparent);
3193
- }
3194
-
3195
- .solid-inline-row-button.solid-inline-row-button-icon.p-button {
3196
- width: 28px;
3197
- min-width: 28px;
3198
- padding: 0;
3199
- justify-content: center;
3200
- }