@aortl/admin-react 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/admin.css DELETED
@@ -1,3477 +0,0 @@
1
- /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
7
- --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
8
- monospace;
9
- --spacing: 0.25rem;
10
- --container-xs: 20rem;
11
- --text-xs: 0.75rem;
12
- --text-xs--line-height: calc(1 / 0.75);
13
- --text-sm: 0.875rem;
14
- --text-sm--line-height: calc(1.25 / 0.875);
15
- --text-base: 1rem;
16
- --text-base--line-height: calc(1.5 / 1);
17
- --text-lg: 1.125rem;
18
- --text-lg--line-height: calc(1.75 / 1.125);
19
- --text-xl: 1.25rem;
20
- --text-xl--line-height: calc(1.75 / 1.25);
21
- --font-weight-medium: 500;
22
- --font-weight-semibold: 600;
23
- --tracking-wide: 0.025em;
24
- --leading-tight: 1.25;
25
- --leading-snug: 1.375;
26
- --leading-relaxed: 1.625;
27
- --radius-sm: 0.25rem;
28
- --radius-md: 0.375rem;
29
- --radius-lg: 0.5rem;
30
- --radius-xl: 0.75rem;
31
- --default-transition-duration: 150ms;
32
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
33
- --default-font-family: var(--font-sans);
34
- --default-mono-font-family: var(--font-mono);
35
- --color-paper: #fffcf0;
36
- --color-black: #100f0f;
37
- --color-base-50: #f2f0e5;
38
- --color-base-100: #e6e4d9;
39
- --color-base-150: #dad8ce;
40
- --color-base-200: #cecdc3;
41
- --color-base-300: #b7b5ac;
42
- --color-base-400: #9f9d96;
43
- --color-base-500: #878580;
44
- --color-base-600: #6f6e69;
45
- --color-base-700: #575653;
46
- --color-base-800: #403e3c;
47
- --color-base-850: #343331;
48
- --color-base-900: #282726;
49
- --color-base-950: #1c1b1a;
50
- --color-red-50: #ffe1d5;
51
- --color-red-100: #ffcabb;
52
- --color-red-150: #fdb2a2;
53
- --color-red-200: #f89a8a;
54
- --color-red-300: #e8705f;
55
- --color-red-400: #d14d41;
56
- --color-red-500: #c03e35;
57
- --color-red-600: #af3029;
58
- --color-red-700: #942822;
59
- --color-red-800: #6c201c;
60
- --color-red-850: #551b18;
61
- --color-red-900: #3e1715;
62
- --color-red-950: #261312;
63
- --color-orange-50: #ffe7ce;
64
- --color-orange-100: #fed3af;
65
- --color-orange-150: #fcc192;
66
- --color-orange-200: #f9ae77;
67
- --color-orange-300: #ec8b49;
68
- --color-orange-400: #da702c;
69
- --color-orange-500: #cb6120;
70
- --color-orange-600: #bc5215;
71
- --color-orange-700: #9d4310;
72
- --color-orange-800: #71320d;
73
- --color-orange-850: #59290d;
74
- --color-orange-900: #40200d;
75
- --color-orange-950: #27180e;
76
- --color-yellow-50: #faeec6;
77
- --color-yellow-100: #f6e2a0;
78
- --color-yellow-150: #f1d67e;
79
- --color-yellow-200: #eccb60;
80
- --color-yellow-300: #dfb431;
81
- --color-yellow-400: #d0a215;
82
- --color-yellow-500: #be9207;
83
- --color-yellow-600: #ad8301;
84
- --color-yellow-700: #8e6b01;
85
- --color-yellow-800: #664d01;
86
- --color-yellow-850: #503d02;
87
- --color-yellow-900: #3a2d04;
88
- --color-yellow-950: #241e08;
89
- --color-green-50: #edeecf;
90
- --color-green-100: #dde2b2;
91
- --color-green-150: #cdd597;
92
- --color-green-200: #bec97e;
93
- --color-green-300: #a0af54;
94
- --color-green-400: #879a39;
95
- --color-green-500: #768d21;
96
- --color-green-600: #66800b;
97
- --color-green-700: #536907;
98
- --color-green-800: #3d4c07;
99
- --color-green-850: #313d07;
100
- --color-green-900: #252d09;
101
- --color-green-950: #1a1e0c;
102
- --color-cyan-50: #ddf1e4;
103
- --color-cyan-100: #bfe8d9;
104
- --color-cyan-150: #a2dece;
105
- --color-cyan-200: #87d3c3;
106
- --color-cyan-300: #5abdac;
107
- --color-cyan-400: #3aa99f;
108
- --color-cyan-500: #2f968d;
109
- --color-cyan-600: #24837b;
110
- --color-cyan-700: #1c6c66;
111
- --color-cyan-800: #164f4a;
112
- --color-cyan-850: #143f3c;
113
- --color-cyan-900: #122f2c;
114
- --color-cyan-950: #101f1d;
115
- --color-blue-50: #e1eceb;
116
- --color-blue-100: #c6dde8;
117
- --color-blue-150: #abcfe2;
118
- --color-blue-200: #92bfdb;
119
- --color-blue-300: #66a0c8;
120
- --color-blue-400: #4385be;
121
- --color-blue-500: #3171b2;
122
- --color-blue-600: #205ea6;
123
- --color-blue-700: #1a4f8c;
124
- --color-blue-800: #163b66;
125
- --color-blue-850: #133051;
126
- --color-blue-900: #12253b;
127
- --color-blue-950: #101a24;
128
- --color-purple-50: #f0eaec;
129
- --color-purple-100: #e2d9e9;
130
- --color-purple-150: #d3cae6;
131
- --color-purple-200: #c4b9e0;
132
- --color-purple-300: #a699d0;
133
- --color-purple-400: #8b7ec8;
134
- --color-purple-500: #735eb5;
135
- --color-purple-600: #5e409d;
136
- --color-purple-700: #4f3685;
137
- --color-purple-800: #3c2a62;
138
- --color-purple-850: #31234e;
139
- --color-purple-900: #261c39;
140
- --color-purple-950: #1a1623;
141
- --color-magenta-50: #fee4e5;
142
- --color-magenta-100: #fccfda;
143
- --color-magenta-150: #f9b9cf;
144
- --color-magenta-200: #f4a4c2;
145
- --color-magenta-300: #e47da8;
146
- --color-magenta-400: #ce5d97;
147
- --color-magenta-500: #b74583;
148
- --color-magenta-600: #a02f6f;
149
- --color-magenta-700: #87285e;
150
- --color-magenta-800: #641f46;
151
- --color-magenta-850: #4f1b39;
152
- --color-magenta-900: #39172b;
153
- --color-magenta-950: #24131d;
154
- --color-surface: light-dark(var(--color-paper), var(--color-black));
155
- --color-surface-muted: light-dark(var(--color-base-50), var(--color-base-950));
156
- --color-surface-strong: light-dark(var(--color-base-100), var(--color-base-900));
157
- --color-text: light-dark(var(--color-black), var(--color-base-200));
158
- --color-text-muted: light-dark(var(--color-base-600), var(--color-base-500));
159
- --color-border: light-dark(var(--color-base-150), var(--color-base-850));
160
- --color-border-strong: light-dark(var(--color-base-300), var(--color-base-700));
161
- --color-primary: light-dark(var(--color-blue-600), var(--color-blue-400));
162
- --color-primary-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
163
- --color-primary-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
164
- --color-primary-content: light-dark(var(--color-paper), var(--color-black));
165
- --color-system-accent: light-dark(var(--color-base-600), var(--color-base-400));
166
- --color-system-accent-hover: color-mix(
167
- in oklch,
168
- light-dark(var(--color-base-600), var(--color-base-400)),
169
- light-dark(var(--color-black), var(--color-base-200)) 12%
170
- );
171
- @supports (color: color-mix(in lab, red, red)) {
172
- --color-system-accent-hover: color-mix(
173
- in oklch,
174
- var(--color-system-accent),
175
- var(--color-text) 12%
176
- );
177
- }
178
- --color-system-accent-muted: color-mix(
179
- in oklch,
180
- light-dark(var(--color-base-600), var(--color-base-400)) 12%,
181
- light-dark(var(--color-paper), var(--color-black))
182
- );
183
- @supports (color: color-mix(in lab, red, red)) {
184
- --color-system-accent-muted: color-mix(
185
- in oklch,
186
- var(--color-system-accent) 12%,
187
- var(--color-surface)
188
- );
189
- }
190
- --color-system-accent-content: light-dark(var(--color-paper), var(--color-black));
191
- --color-danger: light-dark(var(--color-red-600), var(--color-red-400));
192
- --color-danger-hover: light-dark(var(--color-red-700), var(--color-red-300));
193
- --color-danger-muted: light-dark(var(--color-red-50), var(--color-red-950));
194
- --color-danger-content: light-dark(var(--color-paper), var(--color-black));
195
- --color-success: light-dark(var(--color-green-600), var(--color-green-400));
196
- --color-success-hover: light-dark(var(--color-green-700), var(--color-green-300));
197
- --color-success-muted: light-dark(var(--color-green-50), var(--color-green-950));
198
- --color-success-content: light-dark(var(--color-paper), var(--color-black));
199
- --color-warning: var(--color-yellow-400);
200
- --color-warning-hover: light-dark(var(--color-yellow-500), var(--color-yellow-300));
201
- --color-warning-muted: light-dark(var(--color-yellow-50), var(--color-yellow-950));
202
- --color-warning-content: var(--color-black);
203
- --color-info: light-dark(var(--color-cyan-600), var(--color-cyan-400));
204
- --color-info-hover: light-dark(var(--color-cyan-700), var(--color-cyan-300));
205
- --color-info-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
206
- --color-info-content: light-dark(var(--color-paper), var(--color-black));
207
- }
208
- }
209
- @layer base {
210
- *, ::after, ::before, ::backdrop, ::file-selector-button {
211
- box-sizing: border-box;
212
- margin: 0;
213
- padding: 0;
214
- border: 0 solid;
215
- }
216
- html, :host {
217
- line-height: 1.5;
218
- -webkit-text-size-adjust: 100%;
219
- tab-size: 4;
220
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
221
- font-feature-settings: var(--default-font-feature-settings, normal);
222
- font-variation-settings: var(--default-font-variation-settings, normal);
223
- -webkit-tap-highlight-color: transparent;
224
- }
225
- hr {
226
- height: 0;
227
- color: inherit;
228
- border-top-width: 1px;
229
- }
230
- abbr:where([title]) {
231
- -webkit-text-decoration: underline dotted;
232
- text-decoration: underline dotted;
233
- }
234
- h1, h2, h3, h4, h5, h6 {
235
- font-size: inherit;
236
- font-weight: inherit;
237
- }
238
- a {
239
- color: inherit;
240
- -webkit-text-decoration: inherit;
241
- text-decoration: inherit;
242
- }
243
- b, strong {
244
- font-weight: bolder;
245
- }
246
- code, kbd, samp, pre {
247
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
248
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
249
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
250
- font-size: 1em;
251
- }
252
- small {
253
- font-size: 80%;
254
- }
255
- sub, sup {
256
- font-size: 75%;
257
- line-height: 0;
258
- position: relative;
259
- vertical-align: baseline;
260
- }
261
- sub {
262
- bottom: -0.25em;
263
- }
264
- sup {
265
- top: -0.5em;
266
- }
267
- table {
268
- text-indent: 0;
269
- border-color: inherit;
270
- border-collapse: collapse;
271
- }
272
- :-moz-focusring {
273
- outline: auto;
274
- }
275
- progress {
276
- vertical-align: baseline;
277
- }
278
- summary {
279
- display: list-item;
280
- }
281
- ol, ul, menu {
282
- list-style: none;
283
- }
284
- img, svg, video, canvas, audio, iframe, embed, object {
285
- display: block;
286
- vertical-align: middle;
287
- }
288
- img, video {
289
- max-width: 100%;
290
- height: auto;
291
- }
292
- button, input, select, optgroup, textarea, ::file-selector-button {
293
- font: inherit;
294
- font-feature-settings: inherit;
295
- font-variation-settings: inherit;
296
- letter-spacing: inherit;
297
- color: inherit;
298
- border-radius: 0;
299
- background-color: transparent;
300
- opacity: 1;
301
- }
302
- :where(select:is([multiple], [size])) optgroup {
303
- font-weight: bolder;
304
- }
305
- :where(select:is([multiple], [size])) optgroup option {
306
- padding-inline-start: 20px;
307
- }
308
- ::file-selector-button {
309
- margin-inline-end: 4px;
310
- }
311
- ::placeholder {
312
- opacity: 1;
313
- }
314
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
315
- ::placeholder {
316
- color: currentcolor;
317
- @supports (color: color-mix(in lab, red, red)) {
318
- color: color-mix(in oklab, currentcolor 50%, transparent);
319
- }
320
- }
321
- }
322
- textarea {
323
- resize: vertical;
324
- }
325
- ::-webkit-search-decoration {
326
- -webkit-appearance: none;
327
- }
328
- ::-webkit-date-and-time-value {
329
- min-height: 1lh;
330
- text-align: inherit;
331
- }
332
- ::-webkit-datetime-edit {
333
- display: inline-flex;
334
- }
335
- ::-webkit-datetime-edit-fields-wrapper {
336
- padding: 0;
337
- }
338
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
339
- padding-block: 0;
340
- }
341
- ::-webkit-calendar-picker-indicator {
342
- line-height: 1;
343
- }
344
- :-moz-ui-invalid {
345
- box-shadow: none;
346
- }
347
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
348
- appearance: button;
349
- }
350
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
351
- height: auto;
352
- }
353
- [hidden]:where(:not([hidden="until-found"])) {
354
- display: none !important;
355
- }
356
- }
357
- @layer utilities {
358
- .shadow {
359
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
360
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
361
- }
362
- }
363
- @font-face {
364
- font-family: "IBM Plex Sans";
365
- font-style: normal;
366
- font-weight: 400 600;
367
- font-display: optional;
368
- src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format("woff2");
369
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
370
- }
371
- @font-face {
372
- font-family: "IBM Plex Sans";
373
- font-style: normal;
374
- font-weight: 400 600;
375
- font-display: optional;
376
- src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format("woff2");
377
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
378
- }
379
- @font-face {
380
- font-family: "IBM Plex Mono";
381
- font-style: normal;
382
- font-weight: 400;
383
- font-display: optional;
384
- src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format("woff2");
385
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
386
- }
387
- @font-face {
388
- font-family: "IBM Plex Mono";
389
- font-style: normal;
390
- font-weight: 400;
391
- font-display: optional;
392
- src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format("woff2");
393
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
394
- }
395
- @font-face {
396
- font-family: "IBM Plex Mono";
397
- font-style: normal;
398
- font-weight: 500;
399
- font-display: optional;
400
- src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2) format("woff2");
401
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
402
- }
403
- @font-face {
404
- font-family: "IBM Plex Mono";
405
- font-style: normal;
406
- font-weight: 500;
407
- font-display: optional;
408
- src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2");
409
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
410
- }
411
- :root {
412
- color-scheme: light dark;
413
- }
414
- [data-theme="dark"] {
415
- color-scheme: dark;
416
- }
417
- [data-theme="light"] {
418
- color-scheme: light;
419
- }
420
- @layer base {
421
- html {
422
- color: var(--color-text);
423
- background-color: var(--color-surface);
424
- -webkit-text-size-adjust: 100%;
425
- }
426
- body {
427
- font-family: var(--font-sans);
428
- font-size: var(--text-sm);
429
- line-height: var(--tw-leading, var(--text-sm--line-height));
430
- line-height: 1.5;
431
- }
432
- h1 {
433
- font-size: var(--text-xl);
434
- line-height: var(--tw-leading, var(--text-xl--line-height));
435
- --tw-leading: var(--leading-tight);
436
- line-height: var(--leading-tight);
437
- --tw-font-weight: var(--font-weight-semibold);
438
- font-weight: var(--font-weight-semibold);
439
- }
440
- h2 {
441
- font-size: var(--text-base);
442
- line-height: var(--tw-leading, var(--text-base--line-height));
443
- --tw-leading: var(--leading-tight);
444
- line-height: var(--leading-tight);
445
- --tw-font-weight: var(--font-weight-semibold);
446
- font-weight: var(--font-weight-semibold);
447
- }
448
- h3 {
449
- font-size: var(--text-sm);
450
- line-height: var(--tw-leading, var(--text-sm--line-height));
451
- --tw-leading: var(--leading-snug);
452
- line-height: var(--leading-snug);
453
- --tw-font-weight: var(--font-weight-semibold);
454
- font-weight: var(--font-weight-semibold);
455
- }
456
- }
457
- @layer components {
458
- .accordion {
459
- display: flex;
460
- flex-direction: column;
461
- }
462
- .accordion-item {
463
- border-style: var(--tw-border-style);
464
- border-width: 1px;
465
- border-color: var(--color-border);
466
- background-color: var(--color-surface);
467
- interpolate-size: allow-keywords;
468
- }
469
- .accordion-item:first-child {
470
- border-top-left-radius: var(--radius-lg);
471
- border-top-right-radius: var(--radius-lg);
472
- }
473
- .accordion-item:last-child {
474
- border-bottom-right-radius: var(--radius-lg);
475
- border-bottom-left-radius: var(--radius-lg);
476
- }
477
- .accordion-item + .accordion-item {
478
- border-top: 0;
479
- }
480
- .accordion-summary {
481
- display: flex;
482
- cursor: pointer;
483
- align-items: center;
484
- gap: calc(var(--spacing) * 2);
485
- padding-inline: calc(var(--spacing) * 4);
486
- padding-block: calc(var(--spacing) * 3);
487
- font-size: var(--text-sm);
488
- line-height: var(--tw-leading, var(--text-sm--line-height));
489
- --tw-font-weight: var(--font-weight-medium);
490
- font-weight: var(--font-weight-medium);
491
- color: var(--color-text);
492
- -webkit-user-select: none;
493
- user-select: none;
494
- &:hover {
495
- @media (hover: hover) {
496
- background-color: var(--color-surface-muted);
497
- }
498
- }
499
- &:focus-visible {
500
- outline-style: var(--tw-outline-style);
501
- outline-width: 2px;
502
- }
503
- &:focus-visible {
504
- outline-offset: 2px;
505
- }
506
- &:focus-visible {
507
- outline-color: var(--color-primary);
508
- }
509
- list-style: none;
510
- }
511
- .accordion-summary::-webkit-details-marker {
512
- display: none;
513
- }
514
- .accordion-summary::after {
515
- content: "";
516
- width: 0.5rem;
517
- height: 0.5rem;
518
- border-right: 2px solid currentColor;
519
- border-bottom: 2px solid currentColor;
520
- transform: rotate(45deg);
521
- transition: transform 150ms ease;
522
- flex-shrink: 0;
523
- margin-left: auto;
524
- }
525
- .accordion-item[open] > .accordion-summary::after {
526
- transform: rotate(-135deg);
527
- }
528
- .accordion-content {
529
- border-top-style: var(--tw-border-style);
530
- border-top-width: 1px;
531
- border-color: var(--color-border);
532
- padding-inline: calc(var(--spacing) * 4);
533
- padding-block: calc(var(--spacing) * 3);
534
- font-size: var(--text-sm);
535
- line-height: var(--tw-leading, var(--text-sm--line-height));
536
- color: var(--color-text);
537
- }
538
- .accordion-item::details-content {
539
- opacity: 0;
540
- height: 0;
541
- overflow: clip;
542
- content-visibility: visible;
543
- transition: opacity 200ms ease, height 200ms ease;
544
- }
545
- .accordion-item[open]::details-content {
546
- opacity: 1;
547
- height: auto;
548
- }
549
- }
550
- @layer components {
551
- .alert {
552
- display: flex;
553
- width: 100%;
554
- flex-direction: column;
555
- gap: calc(var(--spacing) * 1);
556
- border-radius: var(--radius-md);
557
- border-style: var(--tw-border-style);
558
- border-width: 1px;
559
- padding-inline: calc(var(--spacing) * 3);
560
- padding-block: calc(var(--spacing) * 2);
561
- font-size: var(--text-sm);
562
- line-height: var(--tw-leading, var(--text-sm--line-height));
563
- color: var(--color-text);
564
- }
565
- .alert:has(> :is(i, svg):first-child) {
566
- display: grid;
567
- grid-template-columns: auto 1fr;
568
- column-gap: 0.5rem;
569
- row-gap: 0.25rem;
570
- align-items: center;
571
- }
572
- .alert > :is(i, svg):first-child {
573
- font-size: 1rem;
574
- line-height: 1.25;
575
- }
576
- .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
577
- grid-template-rows: auto auto;
578
- align-items: start;
579
- }
580
- .alert:has(> .alert-title) > :is(i, svg):first-child {
581
- grid-row: 1 / -1;
582
- }
583
- .alert > :is(.alert-title, .alert-description) {
584
- grid-column: 2;
585
- }
586
- .alert-info {
587
- border-color: var(--color-info-muted);
588
- background-color: var(--color-info-muted);
589
- }
590
- .alert-success {
591
- border-color: var(--color-success-muted);
592
- background-color: var(--color-success-muted);
593
- }
594
- .alert-warning {
595
- border-color: var(--color-warning-muted);
596
- background-color: var(--color-warning-muted);
597
- }
598
- .alert-danger {
599
- border-color: var(--color-danger-muted);
600
- background-color: var(--color-danger-muted);
601
- }
602
- .alert-title {
603
- --tw-font-weight: var(--font-weight-medium);
604
- font-weight: var(--font-weight-medium);
605
- }
606
- .alert-info .alert-title, .alert-info > :is(i, svg):first-child {
607
- color: var(--color-info);
608
- }
609
- .alert-success .alert-title, .alert-success > :is(i, svg):first-child {
610
- color: var(--color-success);
611
- }
612
- .alert-warning .alert-title, .alert-warning > :is(i, svg):first-child {
613
- color: var(--color-warning);
614
- }
615
- .alert-danger .alert-title, .alert-danger > :is(i, svg):first-child {
616
- color: var(--color-danger);
617
- }
618
- .alert-description {
619
- color: var(--color-text-muted);
620
- }
621
- }
622
- @layer components {
623
- .app-shell {
624
- --app-shell-sidebar-w: 240px;
625
- --app-shell-sidebar-w-collapsed: 56px;
626
- display: grid;
627
- min-height: 100vh;
628
- width: 100%;
629
- background-color: var(--color-surface);
630
- color: var(--color-text);
631
- grid-template-columns: 1fr;
632
- grid-template-rows: auto 1fr auto;
633
- grid-template-areas: "header" "main" "footer";
634
- }
635
- .app-shell > .navbar {
636
- grid-area: header;
637
- }
638
- .app-shell > main, .app-shell-main {
639
- grid-area: main;
640
- min-width: 0;
641
- }
642
- .app-shell > .footer {
643
- grid-area: footer;
644
- }
645
- .app-shell-with-sidebar {
646
- grid-template-columns: auto 1fr;
647
- grid-template-areas: "header header" "sidebar main" "footer footer";
648
- }
649
- .app-shell-with-sidebar > .sidebar {
650
- grid-area: sidebar;
651
- }
652
- @media (max-width: 48rem) {
653
- .app-shell-with-sidebar {
654
- grid-template-columns: 1fr;
655
- grid-template-areas: "header" "main" "footer";
656
- }
657
- .app-shell-with-sidebar > .sidebar {
658
- display: none;
659
- }
660
- }
661
- }
662
- @layer components {
663
- .badge {
664
- display: inline-flex;
665
- height: calc(var(--spacing) * 5);
666
- align-items: center;
667
- justify-content: center;
668
- gap: calc(var(--spacing) * 1);
669
- border-radius: calc(infinity * 1px);
670
- border-style: var(--tw-border-style);
671
- border-width: 1px;
672
- border-color: transparent;
673
- padding-inline: calc(var(--spacing) * 2);
674
- font-size: var(--text-xs);
675
- line-height: var(--tw-leading, var(--text-xs--line-height));
676
- --tw-leading: 1;
677
- line-height: 1;
678
- --tw-font-weight: var(--font-weight-medium);
679
- font-weight: var(--font-weight-medium);
680
- white-space: nowrap;
681
- }
682
- .badge-neutral {
683
- background-color: var(--color-surface-strong);
684
- color: var(--color-text);
685
- }
686
- .badge-info {
687
- border-color: var(--color-info-muted);
688
- background-color: var(--color-info-muted);
689
- color: var(--color-info);
690
- }
691
- .badge-success {
692
- border-color: var(--color-success-muted);
693
- background-color: var(--color-success-muted);
694
- color: var(--color-success);
695
- }
696
- .badge-warning {
697
- border-color: var(--color-warning-muted);
698
- background-color: var(--color-warning-muted);
699
- color: var(--color-warning);
700
- }
701
- .badge-danger {
702
- border-color: var(--color-danger-muted);
703
- background-color: var(--color-danger-muted);
704
- color: var(--color-danger);
705
- }
706
- .badge-primary {
707
- background-color: var(--color-primary);
708
- color: var(--color-primary-content);
709
- }
710
- .badge-sm {
711
- height: calc(var(--spacing) * 4);
712
- gap: calc(var(--spacing) * 0.5);
713
- padding-inline: calc(var(--spacing) * 1.5);
714
- font-size: 0.625rem;
715
- }
716
- .badge-lg {
717
- height: calc(var(--spacing) * 6);
718
- gap: calc(var(--spacing) * 1.5);
719
- padding-inline: calc(var(--spacing) * 2.5);
720
- font-size: var(--text-sm);
721
- line-height: var(--tw-leading, var(--text-sm--line-height));
722
- }
723
- }
724
- @layer components {
725
- .brand-tile {
726
- display: inline-flex;
727
- width: calc(var(--spacing) * 6);
728
- height: calc(var(--spacing) * 6);
729
- flex-shrink: 0;
730
- align-items: center;
731
- justify-content: center;
732
- border-radius: 0.25rem;
733
- background-color: var(--color-system-accent);
734
- font-size: 11px;
735
- --tw-leading: 1;
736
- line-height: 1;
737
- --tw-font-weight: var(--font-weight-semibold);
738
- font-weight: var(--font-weight-semibold);
739
- color: var(--color-system-accent-content);
740
- -webkit-user-select: none;
741
- user-select: none;
742
- }
743
- }
744
- @layer components {
745
- .spinner {
746
- display: inline-block;
747
- width: 1rem;
748
- height: 1rem;
749
- flex-shrink: 0;
750
- border-radius: 9999px;
751
- border: 2px solid currentColor;
752
- @supports (color: color-mix(in lab, red, red)) {
753
- border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
754
- }
755
- border-top-color: currentColor;
756
- animation: spinner-spin 0.6s linear infinite;
757
- }
758
- .spinner-sm {
759
- width: 0.75rem;
760
- height: 0.75rem;
761
- border-width: 1.5px;
762
- }
763
- .spinner-lg {
764
- width: 1.5rem;
765
- height: 1.5rem;
766
- border-width: 3px;
767
- }
768
- @media (prefers-reduced-motion: reduce) {
769
- .spinner {
770
- animation-duration: 2s;
771
- }
772
- }
773
- @keyframes spinner-spin {
774
- to {
775
- transform: rotate(360deg);
776
- }
777
- }
778
- }
779
- @layer components {
780
- .progress {
781
- appearance: none;
782
- -webkit-appearance: none;
783
- display: block;
784
- width: 100%;
785
- height: 0.375rem;
786
- border: 0;
787
- border-radius: 9999px;
788
- overflow: hidden;
789
- background-color: var(--color-surface-strong);
790
- color: var(--color-primary);
791
- }
792
- .progress::-webkit-progress-bar {
793
- background-color: var(--color-surface-strong);
794
- border-radius: 9999px;
795
- }
796
- .progress::-webkit-progress-value {
797
- background-color: currentColor;
798
- border-radius: 9999px;
799
- transition: inline-size 200ms ease;
800
- }
801
- .progress::-moz-progress-bar {
802
- background-color: currentColor;
803
- border-radius: 9999px;
804
- transition: inline-size 200ms ease;
805
- }
806
- .progress-sm {
807
- height: 0.25rem;
808
- }
809
- .progress-lg {
810
- height: 0.5rem;
811
- }
812
- .progress-success {
813
- color: var(--color-success);
814
- }
815
- .progress-warning {
816
- color: var(--color-warning);
817
- }
818
- .progress-danger {
819
- color: var(--color-danger);
820
- }
821
- .progress:indeterminate {
822
- background-image: linear-gradient( 90deg, var(--color-surface-strong) 0%, var(--color-surface-strong) 40%, currentColor 50%, var(--color-surface-strong) 60%, var(--color-surface-strong) 100% );
823
- background-size: 250% 100%;
824
- background-repeat: no-repeat;
825
- animation: progress-indeterminate 1.2s linear infinite;
826
- }
827
- .progress:indeterminate::-webkit-progress-bar {
828
- background-color: transparent;
829
- }
830
- .progress:indeterminate::-webkit-progress-value, .progress:indeterminate::-moz-progress-bar {
831
- background-color: transparent;
832
- }
833
- @media (prefers-reduced-motion: reduce) {
834
- .progress:indeterminate {
835
- animation-duration: 3s;
836
- }
837
- }
838
- @keyframes progress-indeterminate {
839
- from {
840
- background-position: 100% 0;
841
- }
842
- to {
843
- background-position: 0 0;
844
- }
845
- }
846
- }
847
- @layer components {
848
- .breadcrumbs {
849
- font-size: var(--text-sm);
850
- line-height: var(--tw-leading, var(--text-sm--line-height));
851
- color: var(--color-text-muted);
852
- }
853
- .breadcrumbs > ol {
854
- margin: calc(var(--spacing) * 0);
855
- display: inline-flex;
856
- list-style-type: none;
857
- flex-wrap: wrap;
858
- align-items: center;
859
- gap: calc(var(--spacing) * 1.5);
860
- padding: calc(var(--spacing) * 0);
861
- }
862
- .breadcrumb-item {
863
- display: inline-flex;
864
- align-items: center;
865
- gap: calc(var(--spacing) * 1.5);
866
- color: var(--color-text-muted);
867
- text-decoration-line: none;
868
- &:hover {
869
- @media (hover: hover) {
870
- color: var(--color-text);
871
- }
872
- }
873
- &:focus-visible {
874
- outline-style: var(--tw-outline-style);
875
- outline-width: 2px;
876
- }
877
- &:focus-visible {
878
- outline-offset: 2px;
879
- }
880
- &:focus-visible {
881
- outline-color: var(--color-primary);
882
- }
883
- }
884
- .breadcrumb-item[aria-current="page"] {
885
- pointer-events: none;
886
- --tw-font-weight: var(--font-weight-medium);
887
- font-weight: var(--font-weight-medium);
888
- color: var(--color-text);
889
- }
890
- .breadcrumb-separator {
891
- display: inline-flex;
892
- align-items: center;
893
- color: color-mix(in srgb, light-dark(var(--color-base-600), var(--color-base-500)) 60%, transparent);
894
- @supports (color: color-mix(in lab, red, red)) {
895
- color: color-mix(in oklab, var(--color-text-muted) 60%, transparent);
896
- }
897
- -webkit-user-select: none;
898
- user-select: none;
899
- }
900
- .breadcrumb-separator:empty::before {
901
- content: "/";
902
- }
903
- .breadcrumb-separator > :is(i, svg) {
904
- width: 0.875rem;
905
- height: 0.875rem;
906
- }
907
- }
908
- @layer components {
909
- .pagination > ol, .pagination > ul {
910
- margin: calc(var(--spacing) * 0);
911
- display: inline-flex;
912
- list-style-type: none;
913
- align-items: center;
914
- gap: calc(var(--spacing) * 1);
915
- padding: calc(var(--spacing) * 0);
916
- }
917
- .page-item {
918
- display: inline-flex;
919
- }
920
- .page-link {
921
- display: inline-flex;
922
- height: calc(var(--spacing) * 8);
923
- min-width: calc(var(--spacing) * 8);
924
- cursor: pointer;
925
- align-items: center;
926
- justify-content: center;
927
- border-radius: var(--radius-md);
928
- border-style: var(--tw-border-style);
929
- border-width: 1px;
930
- border-color: transparent;
931
- background-color: transparent;
932
- padding-inline: calc(var(--spacing) * 2);
933
- font-size: var(--text-sm);
934
- line-height: var(--tw-leading, var(--text-sm--line-height));
935
- --tw-leading: 1;
936
- line-height: 1;
937
- --tw-font-weight: var(--font-weight-medium);
938
- font-weight: var(--font-weight-medium);
939
- color: var(--color-text);
940
- text-decoration-line: none;
941
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
942
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
943
- transition-duration: var(--tw-duration, var(--default-transition-duration));
944
- --tw-duration: 150ms;
945
- transition-duration: 150ms;
946
- -webkit-user-select: none;
947
- user-select: none;
948
- &:hover {
949
- @media (hover: hover) {
950
- background-color: var(--color-surface-muted);
951
- }
952
- }
953
- &:focus-visible {
954
- outline-style: var(--tw-outline-style);
955
- outline-width: 2px;
956
- }
957
- &:focus-visible {
958
- outline-offset: 2px;
959
- }
960
- &:focus-visible {
961
- outline-color: var(--color-primary);
962
- }
963
- &:disabled {
964
- pointer-events: none;
965
- }
966
- &:disabled {
967
- cursor: not-allowed;
968
- }
969
- &:disabled {
970
- opacity: 50%;
971
- }
972
- }
973
- .page-link.active, .page-link[aria-current="page"] {
974
- border-color: var(--color-primary-muted);
975
- background-color: var(--color-primary-muted);
976
- color: var(--color-primary);
977
- }
978
- .page-link[aria-disabled="true"] {
979
- pointer-events: none;
980
- cursor: not-allowed;
981
- opacity: 50%;
982
- }
983
- .page-ellipsis {
984
- display: inline-flex;
985
- height: calc(var(--spacing) * 8);
986
- min-width: calc(var(--spacing) * 8);
987
- align-items: center;
988
- justify-content: center;
989
- padding-inline: calc(var(--spacing) * 2);
990
- font-size: var(--text-sm);
991
- line-height: var(--tw-leading, var(--text-sm--line-height));
992
- color: var(--color-text-muted);
993
- -webkit-user-select: none;
994
- user-select: none;
995
- }
996
- }
997
- @layer components {
998
- .btn {
999
- display: inline-flex;
1000
- cursor: pointer;
1001
- align-items: center;
1002
- justify-content: center;
1003
- gap: calc(var(--spacing) * 2);
1004
- border-radius: var(--radius-lg);
1005
- border-style: var(--tw-border-style);
1006
- border-width: 1px;
1007
- border-color: transparent;
1008
- padding-inline: calc(var(--spacing) * 4);
1009
- padding-block: calc(var(--spacing) * 2);
1010
- font-size: var(--text-sm);
1011
- line-height: var(--tw-leading, var(--text-sm--line-height));
1012
- --tw-leading: 1;
1013
- line-height: 1;
1014
- --tw-font-weight: var(--font-weight-medium);
1015
- font-weight: var(--font-weight-medium);
1016
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1017
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1018
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1019
- --tw-duration: 150ms;
1020
- transition-duration: 150ms;
1021
- -webkit-user-select: none;
1022
- user-select: none;
1023
- &:focus-visible {
1024
- outline-style: var(--tw-outline-style);
1025
- outline-width: 2px;
1026
- }
1027
- &:focus-visible {
1028
- outline-offset: 2px;
1029
- }
1030
- &:focus-visible {
1031
- outline-color: var(--color-primary);
1032
- }
1033
- &:disabled {
1034
- pointer-events: none;
1035
- }
1036
- &:disabled {
1037
- cursor: not-allowed;
1038
- }
1039
- &:disabled {
1040
- opacity: 50%;
1041
- }
1042
- }
1043
- .btn-primary {
1044
- background-color: var(--color-primary);
1045
- color: var(--color-primary-content);
1046
- &:hover {
1047
- @media (hover: hover) {
1048
- background-color: var(--color-primary-hover);
1049
- }
1050
- }
1051
- }
1052
- .btn-secondary {
1053
- border-color: var(--color-border);
1054
- background-color: var(--color-surface-muted);
1055
- color: var(--color-text);
1056
- &:hover {
1057
- @media (hover: hover) {
1058
- background-color: var(--color-surface-strong);
1059
- }
1060
- }
1061
- }
1062
- .btn-ghost {
1063
- background-color: transparent;
1064
- color: var(--color-text);
1065
- &:hover {
1066
- @media (hover: hover) {
1067
- background-color: var(--color-surface-muted);
1068
- }
1069
- }
1070
- }
1071
- .btn-danger {
1072
- background-color: var(--color-danger);
1073
- color: var(--color-danger-content);
1074
- &:hover {
1075
- @media (hover: hover) {
1076
- opacity: 90%;
1077
- }
1078
- }
1079
- }
1080
- .btn-sm {
1081
- gap: calc(var(--spacing) * 1.5);
1082
- padding-inline: calc(var(--spacing) * 3);
1083
- padding-block: calc(var(--spacing) * 1.5);
1084
- font-size: var(--text-xs);
1085
- line-height: var(--tw-leading, var(--text-xs--line-height));
1086
- }
1087
- .btn-lg {
1088
- gap: calc(var(--spacing) * 2.5);
1089
- padding-inline: calc(var(--spacing) * 5);
1090
- padding-block: calc(var(--spacing) * 2.5);
1091
- font-size: var(--text-base);
1092
- line-height: var(--tw-leading, var(--text-base--line-height));
1093
- }
1094
- .btn-full-width {
1095
- width: 100%;
1096
- }
1097
- .btn-square {
1098
- padding-inline: calc(var(--spacing) * 2);
1099
- }
1100
- .btn-sm.btn-square {
1101
- padding-inline: calc(var(--spacing) * 1.5);
1102
- }
1103
- .btn-lg.btn-square {
1104
- padding-inline: calc(var(--spacing) * 2.5);
1105
- }
1106
- .btn-loading {
1107
- pointer-events: none;
1108
- cursor: not-allowed;
1109
- opacity: 50%;
1110
- }
1111
- .btn-loading::before {
1112
- content: "";
1113
- display: inline-block;
1114
- width: 1em;
1115
- height: 1em;
1116
- flex-shrink: 0;
1117
- border-radius: 9999px;
1118
- border: 0.125em solid currentColor;
1119
- @supports (color: color-mix(in lab, red, red)) {
1120
- border: 0.125em solid color-mix(in oklab, currentColor 25%, transparent);
1121
- }
1122
- border-top-color: currentColor;
1123
- animation: spinner-spin 0.6s linear infinite;
1124
- }
1125
- .btn-loading > :is(i, svg):first-child {
1126
- display: none;
1127
- }
1128
- @media (prefers-reduced-motion: reduce) {
1129
- .btn-loading::before {
1130
- animation-duration: 2s;
1131
- }
1132
- }
1133
- }
1134
- @layer components {
1135
- .btn-group {
1136
- display: inline-flex;
1137
- }
1138
- .btn-group > .btn {
1139
- position: relative;
1140
- border-radius: 0;
1141
- &:focus-visible {
1142
- z-index: 10;
1143
- }
1144
- }
1145
- .btn-group > .btn:not(:first-child) {
1146
- margin-left: -1px;
1147
- }
1148
- .btn-group > .btn:first-child {
1149
- border-top-left-radius: var(--radius-lg);
1150
- border-bottom-left-radius: var(--radius-lg);
1151
- }
1152
- .btn-group > .btn:last-child {
1153
- border-top-right-radius: var(--radius-lg);
1154
- border-bottom-right-radius: var(--radius-lg);
1155
- }
1156
- .btn-group > .menu {
1157
- position: relative;
1158
- &:focus-visible {
1159
- z-index: 10;
1160
- }
1161
- display: inline-flex;
1162
- }
1163
- .btn-group > .menu:not(:first-child) {
1164
- margin-left: -1px;
1165
- }
1166
- .btn-group > .menu > .menu-trigger {
1167
- border-radius: 0;
1168
- }
1169
- .btn-group > .menu:first-child > .menu-trigger {
1170
- border-top-left-radius: var(--radius-lg);
1171
- border-bottom-left-radius: var(--radius-lg);
1172
- }
1173
- .btn-group > .menu:last-child > .menu-trigger {
1174
- border-top-right-radius: var(--radius-lg);
1175
- border-bottom-right-radius: var(--radius-lg);
1176
- }
1177
- .btn-group > .btn:not(:first-child), .btn-group > .menu:not(:first-child) > .menu-trigger {
1178
- border-left-color: currentColor;
1179
- @supports (color: color-mix(in lab, red, red)) {
1180
- border-left-color: color-mix(in srgb, currentColor 25%, transparent);
1181
- }
1182
- }
1183
- .btn-group-vertical {
1184
- display: inline-flex;
1185
- flex-direction: column;
1186
- }
1187
- .btn-group-vertical > .btn:not(:first-child) {
1188
- margin-top: -1px;
1189
- margin-left: calc(var(--spacing) * 0);
1190
- }
1191
- .btn-group-vertical > .btn:first-child {
1192
- border-top-left-radius: var(--radius-lg);
1193
- border-top-right-radius: var(--radius-lg);
1194
- border-bottom-left-radius: 0;
1195
- }
1196
- .btn-group-vertical > .btn:last-child {
1197
- border-top-right-radius: 0;
1198
- border-bottom-right-radius: var(--radius-lg);
1199
- border-bottom-left-radius: var(--radius-lg);
1200
- }
1201
- }
1202
- @layer components {
1203
- .input {
1204
- display: inline-flex;
1205
- width: 100%;
1206
- align-items: center;
1207
- border-radius: var(--radius-lg);
1208
- border-style: var(--tw-border-style);
1209
- border-width: 1px;
1210
- border-color: transparent;
1211
- background-color: var(--color-surface);
1212
- padding-inline: calc(var(--spacing) * 3);
1213
- padding-block: calc(var(--spacing) * 2);
1214
- font-size: var(--text-sm);
1215
- line-height: var(--tw-leading, var(--text-sm--line-height));
1216
- --tw-leading: 1;
1217
- line-height: 1;
1218
- color: var(--color-text);
1219
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1220
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1221
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1222
- --tw-duration: 150ms;
1223
- transition-duration: 150ms;
1224
- &::placeholder {
1225
- color: var(--color-text-muted);
1226
- }
1227
- &:focus-visible {
1228
- outline-style: var(--tw-outline-style);
1229
- outline-width: 2px;
1230
- }
1231
- &:focus-visible {
1232
- outline-offset: 2px;
1233
- }
1234
- &:focus-visible {
1235
- outline-color: var(--color-primary);
1236
- }
1237
- &:disabled {
1238
- cursor: not-allowed;
1239
- }
1240
- &:disabled {
1241
- opacity: 50%;
1242
- }
1243
- }
1244
- .input-bordered {
1245
- border-color: var(--color-border);
1246
- &:hover {
1247
- @media (hover: hover) {
1248
- border-color: var(--color-border-strong);
1249
- }
1250
- }
1251
- }
1252
- .input-ghost {
1253
- background-color: transparent;
1254
- &:hover {
1255
- @media (hover: hover) {
1256
- background-color: var(--color-surface-muted);
1257
- }
1258
- }
1259
- }
1260
- .input-danger {
1261
- border-color: var(--color-danger);
1262
- &:focus-visible {
1263
- outline-color: var(--color-danger);
1264
- }
1265
- }
1266
- .input-sm {
1267
- padding-inline: calc(var(--spacing) * 2.5);
1268
- padding-block: calc(var(--spacing) * 1.5);
1269
- font-size: var(--text-xs);
1270
- line-height: var(--tw-leading, var(--text-xs--line-height));
1271
- }
1272
- .input-lg {
1273
- padding-inline: calc(var(--spacing) * 4);
1274
- padding-block: calc(var(--spacing) * 2.5);
1275
- font-size: var(--text-base);
1276
- line-height: var(--tw-leading, var(--text-base--line-height));
1277
- }
1278
- .input::-webkit-calendar-picker-indicator {
1279
- cursor: pointer;
1280
- opacity: 60%;
1281
- &:hover {
1282
- @media (hover: hover) {
1283
- opacity: 100%;
1284
- }
1285
- }
1286
- }
1287
- }
1288
- @layer components {
1289
- .input-group {
1290
- display: inline-flex;
1291
- width: 100%;
1292
- }
1293
- .input-group > * {
1294
- border-radius: 0;
1295
- }
1296
- .input-group > :first-child {
1297
- border-top-left-radius: var(--radius-lg);
1298
- border-bottom-left-radius: var(--radius-lg);
1299
- }
1300
- .input-group > :last-child {
1301
- border-top-right-radius: var(--radius-lg);
1302
- border-bottom-right-radius: var(--radius-lg);
1303
- }
1304
- .input-group > :not(:first-child) {
1305
- margin-left: -1px;
1306
- }
1307
- .input-group > :focus, .input-group > :focus-within {
1308
- position: relative;
1309
- z-index: 10;
1310
- }
1311
- .input-group-addon {
1312
- display: inline-flex;
1313
- align-items: center;
1314
- border-style: var(--tw-border-style);
1315
- border-width: 1px;
1316
- border-color: var(--color-border);
1317
- background-color: var(--color-surface-muted);
1318
- padding-inline: calc(var(--spacing) * 3);
1319
- font-size: var(--text-sm);
1320
- line-height: var(--tw-leading, var(--text-sm--line-height));
1321
- --tw-leading: 1;
1322
- line-height: 1;
1323
- white-space: nowrap;
1324
- color: var(--color-text-muted);
1325
- }
1326
- }
1327
- @layer components {
1328
- .textarea {
1329
- display: block;
1330
- min-height: calc(var(--spacing) * 20);
1331
- width: 100%;
1332
- resize: vertical;
1333
- border-radius: var(--radius-lg);
1334
- border-style: var(--tw-border-style);
1335
- border-width: 1px;
1336
- border-color: transparent;
1337
- background-color: var(--color-surface);
1338
- padding-inline: calc(var(--spacing) * 3);
1339
- padding-block: calc(var(--spacing) * 2);
1340
- font-size: var(--text-sm);
1341
- line-height: var(--tw-leading, var(--text-sm--line-height));
1342
- color: var(--color-text);
1343
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1344
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1345
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1346
- --tw-duration: 150ms;
1347
- transition-duration: 150ms;
1348
- &::placeholder {
1349
- color: var(--color-text-muted);
1350
- }
1351
- &:focus-visible {
1352
- outline-style: var(--tw-outline-style);
1353
- outline-width: 2px;
1354
- }
1355
- &:focus-visible {
1356
- outline-offset: 2px;
1357
- }
1358
- &:focus-visible {
1359
- outline-color: var(--color-primary);
1360
- }
1361
- &:disabled {
1362
- cursor: not-allowed;
1363
- }
1364
- &:disabled {
1365
- opacity: 50%;
1366
- }
1367
- }
1368
- .textarea-bordered {
1369
- border-color: var(--color-border);
1370
- &:hover {
1371
- @media (hover: hover) {
1372
- border-color: var(--color-border-strong);
1373
- }
1374
- }
1375
- }
1376
- .textarea-ghost {
1377
- background-color: transparent;
1378
- &:hover {
1379
- @media (hover: hover) {
1380
- background-color: var(--color-surface-muted);
1381
- }
1382
- }
1383
- }
1384
- .textarea-danger {
1385
- border-color: var(--color-danger);
1386
- &:focus-visible {
1387
- outline-color: var(--color-danger);
1388
- }
1389
- }
1390
- .textarea-sm {
1391
- min-height: calc(var(--spacing) * 16);
1392
- padding-inline: calc(var(--spacing) * 2.5);
1393
- padding-block: calc(var(--spacing) * 1.5);
1394
- font-size: var(--text-xs);
1395
- line-height: var(--tw-leading, var(--text-xs--line-height));
1396
- }
1397
- .textarea-lg {
1398
- min-height: calc(var(--spacing) * 24);
1399
- padding-inline: calc(var(--spacing) * 4);
1400
- padding-block: calc(var(--spacing) * 2.5);
1401
- font-size: var(--text-base);
1402
- line-height: var(--tw-leading, var(--text-base--line-height));
1403
- }
1404
- }
1405
- @layer components {
1406
- .checkbox {
1407
- display: inline-flex;
1408
- width: calc(var(--spacing) * 4);
1409
- height: calc(var(--spacing) * 4);
1410
- flex-shrink: 0;
1411
- cursor: pointer;
1412
- align-items: center;
1413
- justify-content: center;
1414
- border-radius: var(--radius-sm);
1415
- border-style: var(--tw-border-style);
1416
- border-width: 1px;
1417
- background-color: var(--color-surface);
1418
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1419
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1420
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1421
- --tw-duration: 150ms;
1422
- transition-duration: 150ms;
1423
- &:focus-visible {
1424
- outline-style: var(--tw-outline-style);
1425
- outline-width: 2px;
1426
- }
1427
- &:focus-visible {
1428
- outline-offset: 2px;
1429
- }
1430
- &:focus-visible {
1431
- outline-color: var(--color-primary);
1432
- }
1433
- &:disabled {
1434
- cursor: not-allowed;
1435
- }
1436
- &:disabled {
1437
- opacity: 50%;
1438
- }
1439
- }
1440
- .checkbox[data-unchecked] {
1441
- border-color: var(--color-border-strong);
1442
- &:hover {
1443
- @media (hover: hover) {
1444
- border-color: var(--color-text-muted);
1445
- }
1446
- }
1447
- }
1448
- .checkbox[data-checked], .checkbox[data-indeterminate] {
1449
- border-color: var(--color-primary);
1450
- background-color: var(--color-primary);
1451
- &:hover {
1452
- @media (hover: hover) {
1453
- background-color: var(--color-primary-hover);
1454
- }
1455
- }
1456
- }
1457
- .checkbox[data-disabled] {
1458
- cursor: not-allowed;
1459
- opacity: 50%;
1460
- }
1461
- .checkbox-indicator {
1462
- display: inline-flex;
1463
- width: calc(var(--spacing) * 3);
1464
- height: calc(var(--spacing) * 3);
1465
- align-items: center;
1466
- justify-content: center;
1467
- color: var(--color-primary-content);
1468
- }
1469
- label:has(> .checkbox) {
1470
- display: inline-flex;
1471
- cursor: pointer;
1472
- align-items: center;
1473
- gap: calc(var(--spacing) * 2);
1474
- }
1475
- label:has(> .checkbox:disabled), label:has(> .checkbox[data-disabled]) {
1476
- cursor: not-allowed;
1477
- opacity: 60%;
1478
- }
1479
- }
1480
- @layer components {
1481
- .radio {
1482
- display: inline-flex;
1483
- width: calc(var(--spacing) * 4);
1484
- height: calc(var(--spacing) * 4);
1485
- flex-shrink: 0;
1486
- cursor: pointer;
1487
- align-items: center;
1488
- justify-content: center;
1489
- border-radius: calc(infinity * 1px);
1490
- border-style: var(--tw-border-style);
1491
- border-width: 1px;
1492
- background-color: var(--color-surface);
1493
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1494
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1495
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1496
- --tw-duration: 150ms;
1497
- transition-duration: 150ms;
1498
- &:focus-visible {
1499
- outline-style: var(--tw-outline-style);
1500
- outline-width: 2px;
1501
- }
1502
- &:focus-visible {
1503
- outline-offset: 2px;
1504
- }
1505
- &:focus-visible {
1506
- outline-color: var(--color-primary);
1507
- }
1508
- &:disabled {
1509
- cursor: not-allowed;
1510
- }
1511
- &:disabled {
1512
- opacity: 50%;
1513
- }
1514
- }
1515
- .radio[data-unchecked] {
1516
- border-color: var(--color-border-strong);
1517
- &:hover {
1518
- @media (hover: hover) {
1519
- border-color: var(--color-text-muted);
1520
- }
1521
- }
1522
- }
1523
- .radio[data-checked] {
1524
- border-color: var(--color-primary);
1525
- background-color: var(--color-primary);
1526
- &:hover {
1527
- @media (hover: hover) {
1528
- background-color: var(--color-primary-hover);
1529
- }
1530
- }
1531
- }
1532
- .radio[data-disabled] {
1533
- cursor: not-allowed;
1534
- opacity: 50%;
1535
- }
1536
- .radio-indicator {
1537
- display: inline-flex;
1538
- width: calc(var(--spacing) * 1.5);
1539
- height: calc(var(--spacing) * 1.5);
1540
- border-radius: calc(infinity * 1px);
1541
- background-color: var(--color-primary-content);
1542
- }
1543
- .radio-group {
1544
- display: inline-flex;
1545
- flex-wrap: wrap;
1546
- gap: calc(var(--spacing) * 4);
1547
- }
1548
- .radio-group-vertical {
1549
- flex-direction: column;
1550
- align-items: flex-start;
1551
- gap: calc(var(--spacing) * 2);
1552
- }
1553
- label:has(> .radio) {
1554
- display: inline-flex;
1555
- cursor: pointer;
1556
- align-items: center;
1557
- gap: calc(var(--spacing) * 2);
1558
- }
1559
- label:has(> .radio:disabled), label:has(> .radio[data-disabled]) {
1560
- cursor: not-allowed;
1561
- opacity: 60%;
1562
- }
1563
- }
1564
- @layer components {
1565
- .switch {
1566
- position: relative;
1567
- display: inline-flex;
1568
- height: calc(var(--spacing) * 5);
1569
- width: calc(var(--spacing) * 9);
1570
- flex-shrink: 0;
1571
- cursor: pointer;
1572
- align-items: center;
1573
- border-radius: calc(infinity * 1px);
1574
- border-style: var(--tw-border-style);
1575
- border-width: 1px;
1576
- border-color: transparent;
1577
- padding: calc(var(--spacing) * 0.5);
1578
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1579
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1580
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1581
- --tw-duration: 150ms;
1582
- transition-duration: 150ms;
1583
- &:focus-visible {
1584
- outline-style: var(--tw-outline-style);
1585
- outline-width: 2px;
1586
- }
1587
- &:focus-visible {
1588
- outline-offset: 2px;
1589
- }
1590
- &:focus-visible {
1591
- outline-color: var(--color-primary);
1592
- }
1593
- &:disabled {
1594
- cursor: not-allowed;
1595
- }
1596
- &:disabled {
1597
- opacity: 50%;
1598
- }
1599
- }
1600
- .switch[data-unchecked] {
1601
- background-color: var(--color-border-strong);
1602
- }
1603
- .switch[data-checked] {
1604
- background-color: var(--color-primary);
1605
- }
1606
- .switch[data-disabled] {
1607
- cursor: not-allowed;
1608
- opacity: 50%;
1609
- }
1610
- .switch-thumb {
1611
- width: calc(var(--spacing) * 4);
1612
- height: calc(var(--spacing) * 4);
1613
- border-radius: calc(infinity * 1px);
1614
- background-color: var(--color-paper);
1615
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1616
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1617
- transition-property: transform, translate, scale, rotate;
1618
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1619
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1620
- --tw-duration: 150ms;
1621
- transition-duration: 150ms;
1622
- }
1623
- .switch[data-checked] .switch-thumb {
1624
- --tw-translate-x: calc(var(--spacing) * 4);
1625
- translate: var(--tw-translate-x) var(--tw-translate-y);
1626
- }
1627
- input.switch {
1628
- margin: calc(var(--spacing) * 0);
1629
- appearance: none;
1630
- background-color: var(--color-border-strong);
1631
- }
1632
- input.switch:checked {
1633
- background-color: var(--color-primary);
1634
- }
1635
- input.switch::before {
1636
- content: "";
1637
- width: calc(var(--spacing) * 4);
1638
- height: calc(var(--spacing) * 4);
1639
- border-radius: calc(infinity * 1px);
1640
- background-color: var(--color-paper);
1641
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1642
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1643
- transition-property: transform, translate, scale, rotate;
1644
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1645
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1646
- --tw-duration: 150ms;
1647
- transition-duration: 150ms;
1648
- }
1649
- input.switch:checked::before {
1650
- --tw-translate-x: calc(var(--spacing) * 4);
1651
- translate: var(--tw-translate-x) var(--tw-translate-y);
1652
- }
1653
- label:has(> .switch) {
1654
- display: inline-flex;
1655
- cursor: pointer;
1656
- align-items: center;
1657
- gap: calc(var(--spacing) * 3);
1658
- }
1659
- label:has(> .switch:disabled), label:has(> .switch[data-disabled]) {
1660
- cursor: not-allowed;
1661
- opacity: 60%;
1662
- }
1663
- }
1664
- @layer components {
1665
- .select {
1666
- display: inline-flex;
1667
- width: 100%;
1668
- cursor: pointer;
1669
- align-items: center;
1670
- justify-content: space-between;
1671
- gap: calc(var(--spacing) * 2);
1672
- border-radius: var(--radius-lg);
1673
- border-style: var(--tw-border-style);
1674
- border-width: 1px;
1675
- border-color: transparent;
1676
- background-color: var(--color-surface);
1677
- padding-inline: calc(var(--spacing) * 3);
1678
- padding-block: calc(var(--spacing) * 2);
1679
- text-align: left;
1680
- font-size: var(--text-sm);
1681
- line-height: var(--tw-leading, var(--text-sm--line-height));
1682
- --tw-leading: 1;
1683
- line-height: 1;
1684
- color: var(--color-text);
1685
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1686
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1687
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1688
- --tw-duration: 150ms;
1689
- transition-duration: 150ms;
1690
- -webkit-user-select: none;
1691
- user-select: none;
1692
- &:focus-visible {
1693
- outline-style: var(--tw-outline-style);
1694
- outline-width: 2px;
1695
- }
1696
- &:focus-visible {
1697
- outline-offset: 2px;
1698
- }
1699
- &:focus-visible {
1700
- outline-color: var(--color-primary);
1701
- }
1702
- &:disabled {
1703
- cursor: not-allowed;
1704
- }
1705
- &:disabled {
1706
- opacity: 50%;
1707
- }
1708
- }
1709
- .select[data-popup-open] {
1710
- outline-style: var(--tw-outline-style);
1711
- outline-width: 2px;
1712
- outline-offset: 2px;
1713
- outline-color: var(--color-primary);
1714
- }
1715
- .select[data-placeholder] {
1716
- color: var(--color-text-muted);
1717
- }
1718
- .select-bordered {
1719
- border-color: var(--color-border);
1720
- &:hover {
1721
- @media (hover: hover) {
1722
- border-color: var(--color-border-strong);
1723
- }
1724
- }
1725
- }
1726
- .select-ghost {
1727
- background-color: transparent;
1728
- &:hover {
1729
- @media (hover: hover) {
1730
- background-color: var(--color-surface-muted);
1731
- }
1732
- }
1733
- }
1734
- .select-danger {
1735
- border-color: var(--color-danger);
1736
- &:focus-visible {
1737
- outline-color: var(--color-danger);
1738
- }
1739
- }
1740
- .select-sm {
1741
- padding-inline: calc(var(--spacing) * 2.5);
1742
- padding-block: calc(var(--spacing) * 1.5);
1743
- font-size: var(--text-xs);
1744
- line-height: var(--tw-leading, var(--text-xs--line-height));
1745
- }
1746
- .select-lg {
1747
- padding-inline: calc(var(--spacing) * 4);
1748
- padding-block: calc(var(--spacing) * 2.5);
1749
- font-size: var(--text-base);
1750
- line-height: var(--tw-leading, var(--text-base--line-height));
1751
- }
1752
- select.select {
1753
- appearance: none;
1754
- padding-right: 2rem;
1755
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
1756
- background-repeat: no-repeat;
1757
- background-position: right 0.5rem center;
1758
- background-size: 1rem;
1759
- }
1760
- select.select-sm {
1761
- padding-right: 1.75rem;
1762
- background-size: 0.875rem;
1763
- }
1764
- select.select-lg {
1765
- padding-right: 2.25rem;
1766
- }
1767
- .select-icon {
1768
- display: inline-flex;
1769
- width: calc(var(--spacing) * 4);
1770
- height: calc(var(--spacing) * 4);
1771
- flex-shrink: 0;
1772
- align-items: center;
1773
- justify-content: center;
1774
- color: var(--color-text-muted);
1775
- transition-property: transform, translate, scale, rotate;
1776
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1777
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1778
- --tw-duration: 150ms;
1779
- transition-duration: 150ms;
1780
- }
1781
- .select[data-popup-open] .select-icon {
1782
- rotate: 180deg;
1783
- }
1784
- .select-popup {
1785
- max-height: calc(var(--spacing) * 72);
1786
- min-width: var(--anchor-width);
1787
- overflow: auto;
1788
- border-radius: var(--radius-lg);
1789
- border-style: var(--tw-border-style);
1790
- border-width: 1px;
1791
- border-color: var(--color-border);
1792
- background-color: var(--color-surface);
1793
- padding-block: calc(var(--spacing) * 1);
1794
- color: var(--color-text);
1795
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1796
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1797
- transition-property: opacity,transform;
1798
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1799
- transition-duration: var(--tw-duration, var(--default-transition-duration));
1800
- --tw-duration: 100ms;
1801
- transition-duration: 100ms;
1802
- --tw-outline-style: none;
1803
- outline-style: none;
1804
- }
1805
- .select-popup[data-starting-style], .select-popup[data-ending-style] {
1806
- opacity: 0%;
1807
- }
1808
- .select-popup[data-starting-style] {
1809
- --tw-translate-y: calc(var(--spacing) * -1);
1810
- translate: var(--tw-translate-x) var(--tw-translate-y);
1811
- }
1812
- .select-item {
1813
- display: flex;
1814
- cursor: pointer;
1815
- align-items: center;
1816
- gap: calc(var(--spacing) * 2);
1817
- padding-inline: calc(var(--spacing) * 3);
1818
- padding-block: calc(var(--spacing) * 1.5);
1819
- font-size: var(--text-sm);
1820
- line-height: var(--tw-leading, var(--text-sm--line-height));
1821
- --tw-outline-style: none;
1822
- outline-style: none;
1823
- -webkit-user-select: none;
1824
- user-select: none;
1825
- }
1826
- .select-item[data-highlighted] {
1827
- background-color: var(--color-surface-muted);
1828
- }
1829
- .select-item[data-selected] {
1830
- --tw-font-weight: var(--font-weight-medium);
1831
- font-weight: var(--font-weight-medium);
1832
- }
1833
- .select-item[data-disabled] {
1834
- cursor: not-allowed;
1835
- opacity: 50%;
1836
- }
1837
- .select-item-indicator {
1838
- margin-left: auto;
1839
- display: inline-flex;
1840
- width: calc(var(--spacing) * 4);
1841
- height: calc(var(--spacing) * 4);
1842
- align-items: center;
1843
- justify-content: center;
1844
- color: var(--color-primary);
1845
- }
1846
- .select-group-label {
1847
- padding-inline: calc(var(--spacing) * 3);
1848
- padding-top: calc(var(--spacing) * 2);
1849
- padding-bottom: calc(var(--spacing) * 1);
1850
- font-size: var(--text-xs);
1851
- line-height: var(--tw-leading, var(--text-xs--line-height));
1852
- --tw-tracking: var(--tracking-wide);
1853
- letter-spacing: var(--tracking-wide);
1854
- color: var(--color-text-muted);
1855
- text-transform: uppercase;
1856
- }
1857
- }
1858
- @layer components {
1859
- .card {
1860
- display: flex;
1861
- flex-direction: column;
1862
- overflow: hidden;
1863
- border-radius: var(--radius-xl);
1864
- border-style: var(--tw-border-style);
1865
- border-width: 1px;
1866
- border-color: var(--color-border);
1867
- background-color: var(--color-surface);
1868
- color: var(--color-text);
1869
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1870
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1871
- }
1872
- .card-body {
1873
- display: flex;
1874
- flex-direction: column;
1875
- gap: calc(var(--spacing) * 3);
1876
- padding: calc(var(--spacing) * 5);
1877
- }
1878
- .card-title {
1879
- display: flex;
1880
- align-items: center;
1881
- gap: calc(var(--spacing) * 2);
1882
- font-size: var(--text-lg);
1883
- line-height: var(--tw-leading, var(--text-lg--line-height));
1884
- --tw-leading: var(--leading-tight);
1885
- line-height: var(--leading-tight);
1886
- --tw-font-weight: var(--font-weight-semibold);
1887
- font-weight: var(--font-weight-semibold);
1888
- }
1889
- .card-description {
1890
- font-size: var(--text-sm);
1891
- line-height: var(--tw-leading, var(--text-sm--line-height));
1892
- color: var(--color-text-muted);
1893
- }
1894
- .card-actions {
1895
- margin-top: auto;
1896
- display: flex;
1897
- flex-wrap: wrap;
1898
- align-items: center;
1899
- gap: calc(var(--spacing) * 2);
1900
- padding-top: calc(var(--spacing) * 2);
1901
- }
1902
- .card-compact .card-body {
1903
- gap: calc(var(--spacing) * 2);
1904
- padding: calc(var(--spacing) * 3);
1905
- }
1906
- .card-bordered {
1907
- border-color: var(--color-border-strong);
1908
- --tw-shadow: 0 0 #0000;
1909
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1910
- }
1911
- }
1912
- @layer components {
1913
- .dialog {
1914
- margin: auto;
1915
- flex-direction: column;
1916
- overflow: hidden;
1917
- border-radius: var(--radius-xl);
1918
- border-style: var(--tw-border-style);
1919
- border-width: 1px;
1920
- border-color: var(--color-border);
1921
- background-color: var(--color-surface);
1922
- padding: calc(var(--spacing) * 0);
1923
- color: var(--color-text);
1924
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1925
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1926
- width: calc(100% - 2rem);
1927
- max-width: 32rem;
1928
- max-height: calc(100dvh - 2rem);
1929
- opacity: 1;
1930
- transform: translateY(0) scale(1);
1931
- transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
1932
- }
1933
- .dialog[open] {
1934
- display: flex;
1935
- }
1936
- .dialog::backdrop {
1937
- background: rgb(0 0 0 / 0.4);
1938
- transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
1939
- }
1940
- @starting-style {
1941
- .dialog[open] {
1942
- opacity: 0;
1943
- transform: translateY(-0.5rem) scale(0.98);
1944
- }
1945
- .dialog[open]::backdrop {
1946
- background: rgb(0 0 0 / 0);
1947
- }
1948
- }
1949
- .dialog-sm {
1950
- max-width: 24rem;
1951
- }
1952
- .dialog-lg {
1953
- max-width: 48rem;
1954
- }
1955
- .dialog-header {
1956
- display: flex;
1957
- align-items: flex-start;
1958
- gap: calc(var(--spacing) * 3);
1959
- padding-inline: calc(var(--spacing) * 5);
1960
- padding-top: calc(var(--spacing) * 5);
1961
- padding-bottom: calc(var(--spacing) * 3);
1962
- }
1963
- .dialog-title {
1964
- margin: calc(var(--spacing) * 0);
1965
- display: flex;
1966
- flex: 1;
1967
- align-items: center;
1968
- gap: calc(var(--spacing) * 2);
1969
- font-size: var(--text-lg);
1970
- line-height: var(--tw-leading, var(--text-lg--line-height));
1971
- --tw-leading: var(--leading-tight);
1972
- line-height: var(--leading-tight);
1973
- --tw-font-weight: var(--font-weight-semibold);
1974
- font-weight: var(--font-weight-semibold);
1975
- }
1976
- .dialog-description {
1977
- margin-top: calc(var(--spacing) * -2);
1978
- margin-bottom: calc(var(--spacing) * 3);
1979
- padding-inline: calc(var(--spacing) * 5);
1980
- font-size: var(--text-sm);
1981
- line-height: var(--tw-leading, var(--text-sm--line-height));
1982
- color: var(--color-text-muted);
1983
- }
1984
- .dialog-body {
1985
- display: flex;
1986
- flex-direction: column;
1987
- gap: calc(var(--spacing) * 3);
1988
- overflow-y: auto;
1989
- padding-inline: calc(var(--spacing) * 5);
1990
- padding-block: calc(var(--spacing) * 3);
1991
- }
1992
- .dialog-footer {
1993
- display: flex;
1994
- flex-wrap: wrap;
1995
- align-items: center;
1996
- justify-content: flex-end;
1997
- gap: calc(var(--spacing) * 2);
1998
- border-top-style: var(--tw-border-style);
1999
- border-top-width: 1px;
2000
- border-color: var(--color-border);
2001
- background-color: var(--color-surface-muted);
2002
- padding-inline: calc(var(--spacing) * 5);
2003
- padding-block: calc(var(--spacing) * 3);
2004
- }
2005
- .dialog-close {
2006
- display: inline-flex;
2007
- width: calc(var(--spacing) * 7);
2008
- height: calc(var(--spacing) * 7);
2009
- flex-shrink: 0;
2010
- cursor: pointer;
2011
- align-items: center;
2012
- justify-content: center;
2013
- border-radius: var(--radius-md);
2014
- background-color: transparent;
2015
- color: var(--color-text-muted);
2016
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2017
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2018
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2019
- --tw-duration: 150ms;
2020
- transition-duration: 150ms;
2021
- &:hover {
2022
- @media (hover: hover) {
2023
- background-color: var(--color-surface-strong);
2024
- }
2025
- }
2026
- &:hover {
2027
- @media (hover: hover) {
2028
- color: var(--color-text);
2029
- }
2030
- }
2031
- &:focus-visible {
2032
- outline-style: var(--tw-outline-style);
2033
- outline-width: 2px;
2034
- }
2035
- &:focus-visible {
2036
- outline-offset: 2px;
2037
- }
2038
- &:focus-visible {
2039
- outline-color: var(--color-primary);
2040
- }
2041
- }
2042
- }
2043
- @layer components {
2044
- .field {
2045
- display: flex;
2046
- flex-direction: column;
2047
- gap: calc(var(--spacing) * 1.5);
2048
- }
2049
- .field-row {
2050
- flex-direction: row;
2051
- align-items: center;
2052
- gap: calc(var(--spacing) * 3);
2053
- }
2054
- .field-label {
2055
- font-size: var(--text-sm);
2056
- line-height: var(--tw-leading, var(--text-sm--line-height));
2057
- --tw-leading: 1;
2058
- line-height: 1;
2059
- --tw-font-weight: var(--font-weight-medium);
2060
- font-weight: var(--font-weight-medium);
2061
- color: var(--color-text);
2062
- }
2063
- .field-label[data-required]::after {
2064
- content: " *";
2065
- color: var(--color-danger);
2066
- }
2067
- .asteriskField {
2068
- color: var(--color-danger);
2069
- }
2070
- .field-description {
2071
- font-size: var(--text-xs);
2072
- line-height: var(--tw-leading, var(--text-xs--line-height));
2073
- --tw-leading: var(--leading-relaxed);
2074
- line-height: var(--leading-relaxed);
2075
- color: var(--color-text-muted);
2076
- }
2077
- .field-error {
2078
- font-size: var(--text-xs);
2079
- line-height: var(--tw-leading, var(--text-xs--line-height));
2080
- --tw-leading: var(--leading-relaxed);
2081
- line-height: var(--leading-relaxed);
2082
- color: var(--color-danger);
2083
- }
2084
- .field[data-invalid] .input, .field[data-invalid] .textarea, .field[data-invalid] .select, .field[data-invalid] .file-input {
2085
- border-color: var(--color-danger);
2086
- }
2087
- .field[data-invalid] .checkbox[data-unchecked], .field[data-invalid] .radio[data-unchecked] {
2088
- border-color: var(--color-danger);
2089
- }
2090
- .field[data-invalid] .switch[data-unchecked] {
2091
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2092
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2093
- --tw-ring-color: var(--color-danger);
2094
- }
2095
- }
2096
- @layer components {
2097
- .file-input {
2098
- display: inline-flex;
2099
- width: 100%;
2100
- align-items: center;
2101
- overflow: hidden;
2102
- border-radius: var(--radius-lg);
2103
- border-style: var(--tw-border-style);
2104
- border-width: 1px;
2105
- border-color: transparent;
2106
- background-color: var(--color-surface);
2107
- padding-right: calc(var(--spacing) * 3);
2108
- font-size: var(--text-sm);
2109
- line-height: var(--tw-leading, var(--text-sm--line-height));
2110
- --tw-leading: 1;
2111
- line-height: 1;
2112
- color: var(--color-text);
2113
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2114
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2115
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2116
- --tw-duration: 150ms;
2117
- transition-duration: 150ms;
2118
- &::file-selector-button {
2119
- margin-right: calc(var(--spacing) * 3);
2120
- }
2121
- &::file-selector-button {
2122
- cursor: pointer;
2123
- }
2124
- &::file-selector-button {
2125
- border-style: var(--tw-border-style);
2126
- border-width: 0px;
2127
- }
2128
- &::file-selector-button {
2129
- border-right-style: var(--tw-border-style);
2130
- border-right-width: 1px;
2131
- }
2132
- &::file-selector-button {
2133
- border-color: var(--color-border);
2134
- }
2135
- &::file-selector-button {
2136
- background-color: var(--color-surface-muted);
2137
- }
2138
- &::file-selector-button {
2139
- padding-inline: calc(var(--spacing) * 3);
2140
- }
2141
- &::file-selector-button {
2142
- padding-block: calc(var(--spacing) * 2);
2143
- }
2144
- &::file-selector-button {
2145
- font-size: var(--text-sm);
2146
- line-height: var(--tw-leading, var(--text-sm--line-height));
2147
- }
2148
- &::file-selector-button {
2149
- --tw-leading: 1;
2150
- line-height: 1;
2151
- }
2152
- &::file-selector-button {
2153
- --tw-font-weight: var(--font-weight-medium);
2154
- font-weight: var(--font-weight-medium);
2155
- }
2156
- &::file-selector-button {
2157
- color: var(--color-text);
2158
- }
2159
- &:hover {
2160
- @media (hover: hover) {
2161
- &::file-selector-button {
2162
- background-color: var(--color-surface-strong);
2163
- }
2164
- }
2165
- }
2166
- &:focus-visible {
2167
- outline-style: var(--tw-outline-style);
2168
- outline-width: 2px;
2169
- }
2170
- &:focus-visible {
2171
- outline-offset: 2px;
2172
- }
2173
- &:focus-visible {
2174
- outline-color: var(--color-primary);
2175
- }
2176
- &:disabled {
2177
- cursor: not-allowed;
2178
- }
2179
- &:disabled {
2180
- opacity: 50%;
2181
- }
2182
- }
2183
- .file-input-bordered {
2184
- border-color: var(--color-border);
2185
- &:hover {
2186
- @media (hover: hover) {
2187
- border-color: var(--color-border-strong);
2188
- }
2189
- }
2190
- }
2191
- .file-input-ghost {
2192
- background-color: transparent;
2193
- &:hover {
2194
- @media (hover: hover) {
2195
- background-color: var(--color-surface-muted);
2196
- }
2197
- }
2198
- }
2199
- .file-input-danger {
2200
- border-color: var(--color-danger);
2201
- &:focus-visible {
2202
- outline-color: var(--color-danger);
2203
- }
2204
- }
2205
- .file-input-sm {
2206
- font-size: var(--text-xs);
2207
- line-height: var(--tw-leading, var(--text-xs--line-height));
2208
- &::file-selector-button {
2209
- margin-right: calc(var(--spacing) * 2.5);
2210
- }
2211
- &::file-selector-button {
2212
- padding-inline: calc(var(--spacing) * 2.5);
2213
- }
2214
- &::file-selector-button {
2215
- padding-block: calc(var(--spacing) * 1.5);
2216
- }
2217
- &::file-selector-button {
2218
- font-size: var(--text-xs);
2219
- line-height: var(--tw-leading, var(--text-xs--line-height));
2220
- }
2221
- }
2222
- .file-input-lg {
2223
- font-size: var(--text-base);
2224
- line-height: var(--tw-leading, var(--text-base--line-height));
2225
- &::file-selector-button {
2226
- margin-right: calc(var(--spacing) * 4);
2227
- }
2228
- &::file-selector-button {
2229
- padding-inline: calc(var(--spacing) * 4);
2230
- }
2231
- &::file-selector-button {
2232
- padding-block: calc(var(--spacing) * 2.5);
2233
- }
2234
- &::file-selector-button {
2235
- font-size: var(--text-base);
2236
- line-height: var(--tw-leading, var(--text-base--line-height));
2237
- }
2238
- }
2239
- }
2240
- @layer components {
2241
- .footer {
2242
- display: flex;
2243
- flex-wrap: wrap;
2244
- align-items: center;
2245
- justify-content: space-between;
2246
- gap: calc(var(--spacing) * 3);
2247
- border-top-style: var(--tw-border-style);
2248
- border-top-width: 2px;
2249
- border-color: var(--color-system-accent);
2250
- background-color: var(--color-surface-muted);
2251
- padding-inline: calc(var(--spacing) * 4);
2252
- padding-block: calc(var(--spacing) * 3);
2253
- font-size: var(--text-xs);
2254
- line-height: var(--tw-leading, var(--text-xs--line-height));
2255
- color: var(--color-text-muted);
2256
- }
2257
- .footer-links {
2258
- display: flex;
2259
- flex-wrap: wrap;
2260
- align-items: center;
2261
- gap: calc(var(--spacing) * 3);
2262
- }
2263
- .footer-link {
2264
- border-radius: var(--radius-sm);
2265
- color: var(--color-text-muted);
2266
- text-decoration-line: none;
2267
- &:hover {
2268
- @media (hover: hover) {
2269
- color: var(--color-text);
2270
- }
2271
- }
2272
- &:hover {
2273
- @media (hover: hover) {
2274
- text-decoration-line: underline;
2275
- }
2276
- }
2277
- &:focus-visible {
2278
- outline-style: var(--tw-outline-style);
2279
- outline-width: 2px;
2280
- }
2281
- &:focus-visible {
2282
- outline-offset: 2px;
2283
- }
2284
- &:focus-visible {
2285
- outline-color: var(--color-primary);
2286
- }
2287
- }
2288
- .footer-meta {
2289
- color: var(--color-text-muted);
2290
- }
2291
- }
2292
- @layer components {
2293
- .menu {
2294
- position: relative;
2295
- display: inline-block;
2296
- }
2297
- .menu-trigger {
2298
- display: inline-flex;
2299
- cursor: pointer;
2300
- align-items: center;
2301
- gap: calc(var(--spacing) * 1.5);
2302
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2303
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2304
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2305
- --tw-duration: 150ms;
2306
- transition-duration: 150ms;
2307
- -webkit-user-select: none;
2308
- user-select: none;
2309
- &:focus-visible {
2310
- outline-style: var(--tw-outline-style);
2311
- outline-width: 2px;
2312
- }
2313
- &:focus-visible {
2314
- outline-offset: 2px;
2315
- }
2316
- &:focus-visible {
2317
- outline-color: var(--color-primary);
2318
- }
2319
- list-style: none;
2320
- }
2321
- .menu-trigger::-webkit-details-marker {
2322
- display: none;
2323
- }
2324
- .menu-trigger:not(.btn) {
2325
- border-radius: var(--radius-md);
2326
- background-color: transparent;
2327
- padding-inline: calc(var(--spacing) * 2.5);
2328
- padding-block: calc(var(--spacing) * 1.5);
2329
- font-size: var(--text-sm);
2330
- line-height: var(--tw-leading, var(--text-sm--line-height));
2331
- --tw-leading: 1;
2332
- line-height: 1;
2333
- color: var(--color-text);
2334
- &:hover {
2335
- @media (hover: hover) {
2336
- background-color: var(--color-surface-strong);
2337
- }
2338
- }
2339
- }
2340
- .menu-trigger::after {
2341
- content: "";
2342
- width: 0.5em;
2343
- height: 0.5em;
2344
- border-right: 2px solid currentColor;
2345
- border-bottom: 2px solid currentColor;
2346
- transform: rotate(45deg);
2347
- transition: transform 150ms ease;
2348
- flex-shrink: 0;
2349
- }
2350
- .menu-trigger:empty {
2351
- justify-content: center;
2352
- }
2353
- .menu[open] > .menu-trigger::after {
2354
- transform: rotate(-135deg);
2355
- }
2356
- .menu-popup {
2357
- position: absolute;
2358
- top: 100%;
2359
- left: calc(var(--spacing) * 0);
2360
- z-index: 30;
2361
- margin-top: calc(var(--spacing) * 1);
2362
- max-height: calc(var(--spacing) * 72);
2363
- min-width: calc(var(--spacing) * 44);
2364
- overflow: auto;
2365
- border-radius: var(--radius-lg);
2366
- border-style: var(--tw-border-style);
2367
- border-width: 1px;
2368
- border-color: var(--color-border);
2369
- background-color: var(--color-surface);
2370
- padding-block: calc(var(--spacing) * 1);
2371
- color: var(--color-text);
2372
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2373
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2374
- }
2375
- .menu-item {
2376
- display: flex;
2377
- width: 100%;
2378
- cursor: pointer;
2379
- align-items: center;
2380
- gap: calc(var(--spacing) * 2);
2381
- border-style: var(--tw-border-style);
2382
- border-width: 0px;
2383
- background-color: transparent;
2384
- padding-inline: calc(var(--spacing) * 3);
2385
- padding-block: calc(var(--spacing) * 1.5);
2386
- text-align: left;
2387
- font-size: var(--text-sm);
2388
- line-height: var(--tw-leading, var(--text-sm--line-height));
2389
- --tw-leading: 1;
2390
- line-height: 1;
2391
- color: var(--color-text);
2392
- text-decoration-line: none;
2393
- -webkit-user-select: none;
2394
- user-select: none;
2395
- &:hover {
2396
- @media (hover: hover) {
2397
- background-color: var(--color-surface-muted);
2398
- }
2399
- }
2400
- &:focus-visible {
2401
- background-color: var(--color-surface-muted);
2402
- }
2403
- &:focus-visible {
2404
- --tw-outline-style: none;
2405
- outline-style: none;
2406
- }
2407
- &:disabled {
2408
- cursor: not-allowed;
2409
- }
2410
- &:disabled {
2411
- opacity: 50%;
2412
- }
2413
- }
2414
- .menu-item[aria-disabled="true"] {
2415
- cursor: not-allowed;
2416
- opacity: 50%;
2417
- }
2418
- .menu-separator {
2419
- margin-block: calc(var(--spacing) * 1);
2420
- height: 1px;
2421
- border-style: var(--tw-border-style);
2422
- border-width: 0px;
2423
- background-color: var(--color-border);
2424
- }
2425
- .menu-group {
2426
- display: flex;
2427
- flex-direction: column;
2428
- }
2429
- .menu-group-label {
2430
- padding-inline: calc(var(--spacing) * 3);
2431
- padding-top: calc(var(--spacing) * 2);
2432
- padding-bottom: calc(var(--spacing) * 1);
2433
- font-size: var(--text-xs);
2434
- line-height: var(--tw-leading, var(--text-xs--line-height));
2435
- --tw-tracking: var(--tracking-wide);
2436
- letter-spacing: var(--tracking-wide);
2437
- color: var(--color-text-muted);
2438
- text-transform: uppercase;
2439
- }
2440
- }
2441
- @layer components {
2442
- .navbar {
2443
- display: flex;
2444
- height: calc(var(--spacing) * 12);
2445
- align-items: center;
2446
- gap: calc(var(--spacing) * 3);
2447
- border-bottom-style: var(--tw-border-style);
2448
- border-bottom-width: 2px;
2449
- border-color: var(--color-system-accent);
2450
- background-color: var(--color-surface-muted);
2451
- padding-inline: calc(var(--spacing) * 4);
2452
- color: var(--color-text);
2453
- }
2454
- .navbar-brand {
2455
- display: flex;
2456
- flex-shrink: 0;
2457
- align-items: center;
2458
- gap: calc(var(--spacing) * 2);
2459
- font-size: var(--text-sm);
2460
- line-height: var(--tw-leading, var(--text-sm--line-height));
2461
- --tw-font-weight: var(--font-weight-semibold);
2462
- font-weight: var(--font-weight-semibold);
2463
- color: var(--color-text);
2464
- }
2465
- .navbar-items {
2466
- display: flex;
2467
- align-items: center;
2468
- gap: calc(var(--spacing) * 0.5);
2469
- }
2470
- .navbar-item {
2471
- display: inline-flex;
2472
- cursor: pointer;
2473
- align-items: center;
2474
- gap: calc(var(--spacing) * 1.5);
2475
- border-radius: var(--radius-md);
2476
- background-color: transparent;
2477
- padding-inline: calc(var(--spacing) * 2.5);
2478
- padding-block: calc(var(--spacing) * 1.5);
2479
- font-size: var(--text-sm);
2480
- line-height: var(--tw-leading, var(--text-sm--line-height));
2481
- --tw-leading: 1;
2482
- line-height: 1;
2483
- color: var(--color-text);
2484
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2485
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2486
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2487
- --tw-duration: 150ms;
2488
- transition-duration: 150ms;
2489
- -webkit-user-select: none;
2490
- user-select: none;
2491
- &:hover {
2492
- @media (hover: hover) {
2493
- background-color: var(--color-surface-strong);
2494
- }
2495
- }
2496
- &:focus-visible {
2497
- outline-style: var(--tw-outline-style);
2498
- outline-width: 2px;
2499
- }
2500
- &:focus-visible {
2501
- outline-offset: 2px;
2502
- }
2503
- &:focus-visible {
2504
- outline-color: var(--color-primary);
2505
- }
2506
- }
2507
- .navbar-item[aria-current="page"], .navbar-item[data-active] {
2508
- background-color: var(--color-primary-muted);
2509
- color: var(--color-primary);
2510
- }
2511
- .navbar-actions {
2512
- margin-left: auto;
2513
- display: flex;
2514
- align-items: center;
2515
- gap: calc(var(--spacing) * 2);
2516
- }
2517
- .navbar-mobile-toggle {
2518
- margin-left: calc(var(--spacing) * -2);
2519
- display: inline-flex;
2520
- width: calc(var(--spacing) * 9);
2521
- height: calc(var(--spacing) * 9);
2522
- cursor: pointer;
2523
- align-items: center;
2524
- justify-content: center;
2525
- border-radius: var(--radius-md);
2526
- background-color: transparent;
2527
- color: var(--color-text);
2528
- &:hover {
2529
- @media (hover: hover) {
2530
- background-color: var(--color-surface-strong);
2531
- }
2532
- }
2533
- &:focus-visible {
2534
- outline-style: var(--tw-outline-style);
2535
- outline-width: 2px;
2536
- }
2537
- &:focus-visible {
2538
- outline-offset: 2px;
2539
- }
2540
- &:focus-visible {
2541
- outline-color: var(--color-primary);
2542
- }
2543
- }
2544
- .navbar-mobile-toggle::before {
2545
- content: "";
2546
- display: block;
2547
- width: 18px;
2548
- height: 2px;
2549
- background: currentColor;
2550
- border-radius: 1px;
2551
- box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
2552
- }
2553
- @media (min-width: 48rem) {
2554
- .navbar-mobile-toggle {
2555
- display: none;
2556
- }
2557
- }
2558
- }
2559
- @layer components {
2560
- .sidebar {
2561
- display: flex;
2562
- flex-shrink: 0;
2563
- flex-direction: column;
2564
- border-right-style: var(--tw-border-style);
2565
- border-right-width: 1px;
2566
- border-color: var(--color-border);
2567
- background-color: var(--color-surface-muted);
2568
- color: var(--color-text);
2569
- width: var(--app-shell-sidebar-w, 240px);
2570
- transition: width 150ms ease;
2571
- }
2572
- .sidebar-toggle {
2573
- position: absolute;
2574
- width: 1px;
2575
- height: 1px;
2576
- margin: 0;
2577
- padding: 0;
2578
- border: 0;
2579
- opacity: 0;
2580
- pointer-events: none;
2581
- }
2582
- .sidebar:has(.sidebar-toggle:checked) {
2583
- width: var(--app-shell-sidebar-w-collapsed, 56px);
2584
- }
2585
- .sidebar:has(.sidebar-toggle:checked) .sidebar-label, .sidebar:has(.sidebar-toggle:checked) .sidebar-group-label, .sidebar:has(.sidebar-toggle:checked) .sidebar-badge, .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-panel, .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger::after {
2586
- display: none;
2587
- }
2588
- .sidebar:has(.sidebar-toggle:checked) .sidebar-item, .sidebar:has(.sidebar-toggle:checked) .sidebar-subitem, .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger {
2589
- justify-content: center;
2590
- padding-inline: calc(var(--spacing) * 1);
2591
- }
2592
- .sidebar-header {
2593
- display: flex;
2594
- height: calc(var(--spacing) * 12);
2595
- flex-shrink: 0;
2596
- align-items: center;
2597
- gap: calc(var(--spacing) * 2);
2598
- border-bottom-style: var(--tw-border-style);
2599
- border-bottom-width: 1px;
2600
- border-color: var(--color-border);
2601
- padding-inline: calc(var(--spacing) * 3);
2602
- }
2603
- .sidebar-nav {
2604
- display: flex;
2605
- flex: 1;
2606
- flex-direction: column;
2607
- gap: calc(var(--spacing) * 0.5);
2608
- overflow: auto;
2609
- padding-inline: calc(var(--spacing) * 2);
2610
- padding-block: calc(var(--spacing) * 2);
2611
- }
2612
- .sidebar-group {
2613
- display: flex;
2614
- flex-direction: column;
2615
- gap: calc(var(--spacing) * 0.5);
2616
- }
2617
- .sidebar-group + .sidebar-group {
2618
- margin-top: calc(var(--spacing) * 2);
2619
- }
2620
- .sidebar-group-label {
2621
- padding-inline: calc(var(--spacing) * 2);
2622
- padding-top: calc(var(--spacing) * 2);
2623
- padding-bottom: calc(var(--spacing) * 1);
2624
- font-size: var(--text-xs);
2625
- line-height: var(--tw-leading, var(--text-xs--line-height));
2626
- --tw-tracking: var(--tracking-wide);
2627
- letter-spacing: var(--tracking-wide);
2628
- color: var(--color-text-muted);
2629
- text-transform: uppercase;
2630
- }
2631
- .sidebar-item {
2632
- display: flex;
2633
- cursor: pointer;
2634
- align-items: center;
2635
- gap: calc(var(--spacing) * 2);
2636
- border-radius: var(--radius-md);
2637
- background-color: transparent;
2638
- padding-inline: calc(var(--spacing) * 2);
2639
- padding-block: calc(var(--spacing) * 1.5);
2640
- font-size: var(--text-sm);
2641
- line-height: var(--tw-leading, var(--text-sm--line-height));
2642
- --tw-leading: 1;
2643
- line-height: 1;
2644
- color: var(--color-text);
2645
- text-decoration-line: none;
2646
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2647
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2648
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2649
- --tw-duration: 150ms;
2650
- transition-duration: 150ms;
2651
- -webkit-user-select: none;
2652
- user-select: none;
2653
- &:hover {
2654
- @media (hover: hover) {
2655
- background-color: var(--color-surface-strong);
2656
- }
2657
- }
2658
- &:focus-visible {
2659
- outline-style: var(--tw-outline-style);
2660
- outline-width: 2px;
2661
- }
2662
- &:focus-visible {
2663
- outline-offset: 2px;
2664
- }
2665
- &:focus-visible {
2666
- outline-color: var(--color-primary);
2667
- }
2668
- }
2669
- .sidebar-item[aria-current="page"], .sidebar-item[data-active] {
2670
- background-color: var(--color-primary-muted);
2671
- --tw-font-weight: var(--font-weight-medium);
2672
- font-weight: var(--font-weight-medium);
2673
- color: var(--color-primary);
2674
- }
2675
- .sidebar-icon {
2676
- display: inline-flex;
2677
- width: calc(var(--spacing) * 4);
2678
- height: calc(var(--spacing) * 4);
2679
- flex-shrink: 0;
2680
- align-items: center;
2681
- justify-content: center;
2682
- color: var(--color-text-muted);
2683
- }
2684
- .sidebar-item[aria-current="page"] .sidebar-icon, .sidebar-item[data-active] .sidebar-icon {
2685
- color: var(--color-primary);
2686
- }
2687
- .sidebar-label {
2688
- min-width: calc(var(--spacing) * 0);
2689
- flex: 1;
2690
- overflow: hidden;
2691
- text-overflow: ellipsis;
2692
- white-space: nowrap;
2693
- }
2694
- .sidebar-badge {
2695
- margin-left: auto;
2696
- display: inline-flex;
2697
- height: calc(var(--spacing) * 5);
2698
- min-width: calc(var(--spacing) * 5);
2699
- align-items: center;
2700
- justify-content: center;
2701
- border-radius: calc(infinity * 1px);
2702
- background-color: var(--color-surface-strong);
2703
- padding-inline: calc(var(--spacing) * 1.5);
2704
- font-size: var(--text-xs);
2705
- line-height: var(--tw-leading, var(--text-xs--line-height));
2706
- --tw-font-weight: var(--font-weight-medium);
2707
- font-weight: var(--font-weight-medium);
2708
- color: var(--color-text-muted);
2709
- }
2710
- .sidebar-collapsible {
2711
- display: flex;
2712
- flex-direction: column;
2713
- interpolate-size: allow-keywords;
2714
- }
2715
- .sidebar-collapsible-trigger {
2716
- display: flex;
2717
- width: 100%;
2718
- cursor: pointer;
2719
- align-items: center;
2720
- gap: calc(var(--spacing) * 2);
2721
- border-radius: var(--radius-md);
2722
- background-color: transparent;
2723
- padding-inline: calc(var(--spacing) * 2);
2724
- padding-block: calc(var(--spacing) * 1.5);
2725
- text-align: left;
2726
- font-size: var(--text-sm);
2727
- line-height: var(--tw-leading, var(--text-sm--line-height));
2728
- --tw-leading: 1;
2729
- line-height: 1;
2730
- color: var(--color-text);
2731
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2732
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2733
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2734
- --tw-duration: 150ms;
2735
- transition-duration: 150ms;
2736
- -webkit-user-select: none;
2737
- user-select: none;
2738
- &:hover {
2739
- @media (hover: hover) {
2740
- background-color: var(--color-surface-strong);
2741
- }
2742
- }
2743
- &:focus-visible {
2744
- outline-style: var(--tw-outline-style);
2745
- outline-width: 2px;
2746
- }
2747
- &:focus-visible {
2748
- outline-offset: 2px;
2749
- }
2750
- &:focus-visible {
2751
- outline-color: var(--color-primary);
2752
- }
2753
- list-style: none;
2754
- }
2755
- .sidebar-collapsible-trigger::-webkit-details-marker {
2756
- display: none;
2757
- }
2758
- .sidebar-collapsible-trigger::after {
2759
- content: "";
2760
- margin-left: auto;
2761
- width: 0.375rem;
2762
- height: 0.375rem;
2763
- border-right: 2px solid currentColor;
2764
- border-bottom: 2px solid currentColor;
2765
- color: var(--color-text-muted);
2766
- transform: rotate(-45deg);
2767
- transition: transform 150ms ease;
2768
- flex-shrink: 0;
2769
- }
2770
- .sidebar-collapsible[open] > .sidebar-collapsible-trigger::after {
2771
- transform: rotate(45deg);
2772
- }
2773
- .sidebar-collapsible-panel {
2774
- margin-top: calc(var(--spacing) * 0.5);
2775
- display: flex;
2776
- flex-direction: column;
2777
- gap: calc(var(--spacing) * 0.5);
2778
- padding-left: calc(var(--spacing) * 4);
2779
- overflow: hidden;
2780
- }
2781
- .sidebar-collapsible::details-content {
2782
- opacity: 0;
2783
- height: 0;
2784
- overflow: clip;
2785
- transition: opacity 150ms ease, height 150ms ease, content-visibility 150ms;
2786
- transition-behavior: allow-discrete;
2787
- }
2788
- .sidebar-collapsible[open]::details-content {
2789
- opacity: 1;
2790
- height: auto;
2791
- }
2792
- .sidebar-subitem {
2793
- display: flex;
2794
- cursor: pointer;
2795
- align-items: center;
2796
- gap: calc(var(--spacing) * 2);
2797
- border-radius: var(--radius-md);
2798
- background-color: transparent;
2799
- padding-inline: calc(var(--spacing) * 2);
2800
- padding-block: calc(var(--spacing) * 1);
2801
- font-size: var(--text-sm);
2802
- line-height: var(--tw-leading, var(--text-sm--line-height));
2803
- --tw-leading: 1;
2804
- line-height: 1;
2805
- color: var(--color-text);
2806
- text-decoration-line: none;
2807
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2808
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2809
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2810
- --tw-duration: 150ms;
2811
- transition-duration: 150ms;
2812
- -webkit-user-select: none;
2813
- user-select: none;
2814
- &:hover {
2815
- @media (hover: hover) {
2816
- background-color: var(--color-surface-strong);
2817
- }
2818
- }
2819
- &:focus-visible {
2820
- outline-style: var(--tw-outline-style);
2821
- outline-width: 2px;
2822
- }
2823
- &:focus-visible {
2824
- outline-offset: 2px;
2825
- }
2826
- &:focus-visible {
2827
- outline-color: var(--color-primary);
2828
- }
2829
- }
2830
- .sidebar-subitem[aria-current="page"], .sidebar-subitem[data-active] {
2831
- background-color: var(--color-primary-muted);
2832
- --tw-font-weight: var(--font-weight-medium);
2833
- font-weight: var(--font-weight-medium);
2834
- color: var(--color-primary);
2835
- }
2836
- .sidebar-footer {
2837
- display: flex;
2838
- flex-direction: column;
2839
- gap: calc(var(--spacing) * 1);
2840
- border-top-style: var(--tw-border-style);
2841
- border-top-width: 1px;
2842
- border-color: var(--color-border);
2843
- padding-inline: calc(var(--spacing) * 2);
2844
- padding-block: calc(var(--spacing) * 2);
2845
- }
2846
- .sidebar-collapse-toggle {
2847
- position: relative;
2848
- display: inline-flex;
2849
- width: calc(var(--spacing) * 7);
2850
- height: calc(var(--spacing) * 7);
2851
- cursor: pointer;
2852
- align-items: center;
2853
- justify-content: center;
2854
- border-radius: var(--radius-md);
2855
- background-color: transparent;
2856
- color: var(--color-text-muted);
2857
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2858
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2859
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2860
- --tw-duration: 150ms;
2861
- transition-duration: 150ms;
2862
- -webkit-user-select: none;
2863
- user-select: none;
2864
- &:hover {
2865
- @media (hover: hover) {
2866
- background-color: var(--color-surface-strong);
2867
- }
2868
- }
2869
- &:hover {
2870
- @media (hover: hover) {
2871
- color: var(--color-text);
2872
- }
2873
- }
2874
- }
2875
- .sidebar-collapse-toggle:has(.sidebar-toggle:focus-visible) {
2876
- outline-style: var(--tw-outline-style);
2877
- outline-width: 2px;
2878
- outline-offset: 2px;
2879
- outline-color: var(--color-primary);
2880
- }
2881
- .sidebar-collapse-toggle::before {
2882
- content: "";
2883
- width: 0.5rem;
2884
- height: 0.5rem;
2885
- border-left: 2px solid currentColor;
2886
- border-bottom: 2px solid currentColor;
2887
- transform: rotate(45deg);
2888
- transition: transform 150ms ease;
2889
- }
2890
- .sidebar:has(.sidebar-toggle:checked) .sidebar-collapse-toggle::before {
2891
- transform: rotate(-135deg);
2892
- }
2893
- .sidebar-drawer-backdrop {
2894
- position: fixed;
2895
- inset: calc(var(--spacing) * 0);
2896
- z-index: 40;
2897
- background-color: color-mix(in srgb, #100f0f 40%, transparent);
2898
- @supports (color: color-mix(in lab, red, red)) {
2899
- background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
2900
- }
2901
- transition-property: opacity;
2902
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2903
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2904
- --tw-duration: 150ms;
2905
- transition-duration: 150ms;
2906
- }
2907
- .sidebar-drawer-backdrop[data-starting-style], .sidebar-drawer-backdrop[data-ending-style] {
2908
- opacity: 0%;
2909
- }
2910
- .sidebar-drawer {
2911
- position: fixed;
2912
- inset-block: calc(var(--spacing) * 0);
2913
- left: calc(var(--spacing) * 0);
2914
- z-index: 50;
2915
- display: flex;
2916
- flex-direction: column;
2917
- border-right-style: var(--tw-border-style);
2918
- border-right-width: 1px;
2919
- border-color: var(--color-border);
2920
- background-color: var(--color-surface-muted);
2921
- color: var(--color-text);
2922
- transition-property: transform, translate, scale, rotate;
2923
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2924
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2925
- --tw-duration: 150ms;
2926
- transition-duration: 150ms;
2927
- width: min(var(--app-shell-sidebar-w, 240px), 80vw);
2928
- }
2929
- .sidebar-drawer[data-starting-style], .sidebar-drawer[data-ending-style] {
2930
- --tw-translate-x: -100%;
2931
- translate: var(--tw-translate-x) var(--tw-translate-y);
2932
- }
2933
- }
2934
- @layer components {
2935
- .tabs {
2936
- display: flex;
2937
- flex-direction: column;
2938
- }
2939
- .tabs .tab-list {
2940
- display: inline-flex;
2941
- align-items: center;
2942
- gap: calc(var(--spacing) * 1);
2943
- border-bottom-style: var(--tw-border-style);
2944
- border-bottom-width: 1px;
2945
- border-color: var(--color-border);
2946
- position: relative;
2947
- }
2948
- .tabs .tab {
2949
- display: inline-flex;
2950
- height: calc(var(--spacing) * 9);
2951
- cursor: pointer;
2952
- align-items: center;
2953
- gap: calc(var(--spacing) * 1.5);
2954
- border-style: var(--tw-border-style);
2955
- border-width: 0px;
2956
- background-color: transparent;
2957
- padding-inline: calc(var(--spacing) * 3);
2958
- font-size: var(--text-sm);
2959
- line-height: var(--tw-leading, var(--text-sm--line-height));
2960
- --tw-leading: 1;
2961
- line-height: 1;
2962
- --tw-font-weight: var(--font-weight-medium);
2963
- font-weight: var(--font-weight-medium);
2964
- color: var(--color-text-muted);
2965
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2966
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2967
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2968
- --tw-duration: 150ms;
2969
- transition-duration: 150ms;
2970
- -webkit-user-select: none;
2971
- user-select: none;
2972
- &:hover {
2973
- @media (hover: hover) {
2974
- color: var(--color-text);
2975
- }
2976
- }
2977
- &:focus-visible {
2978
- outline-style: var(--tw-outline-style);
2979
- outline-width: 2px;
2980
- }
2981
- &:focus-visible {
2982
- outline-offset: 2px;
2983
- }
2984
- &:focus-visible {
2985
- outline-color: var(--color-primary);
2986
- }
2987
- &:disabled {
2988
- cursor: not-allowed;
2989
- }
2990
- &:disabled {
2991
- opacity: 50%;
2992
- }
2993
- }
2994
- .tabs .tab[data-selected], .tabs .tab[aria-selected="true"] {
2995
- color: var(--color-text);
2996
- }
2997
- .tabs .tab-input {
2998
- position: absolute;
2999
- width: 1px;
3000
- height: 1px;
3001
- margin: 0;
3002
- padding: 0;
3003
- border: 0;
3004
- opacity: 0;
3005
- pointer-events: none;
3006
- }
3007
- .tabs .tab-input:checked + .tab {
3008
- color: var(--color-text);
3009
- }
3010
- .tabs .tab-input:focus-visible + .tab {
3011
- outline-style: var(--tw-outline-style);
3012
- outline-width: 2px;
3013
- outline-offset: 2px;
3014
- outline-color: var(--color-primary);
3015
- }
3016
- .tabs-bordered .tab, .tabs:not(.tabs-boxed) .tab {
3017
- position: relative;
3018
- }
3019
- .tabs-bordered .tab::after, .tabs:not(.tabs-boxed) .tab::after {
3020
- content: "";
3021
- position: absolute;
3022
- inset-inline: 0;
3023
- inset-block-end: -1px;
3024
- block-size: 2px;
3025
- background-color: var(--color-primary);
3026
- transform: scaleX(0);
3027
- transition: transform 150ms ease;
3028
- }
3029
- .tabs-bordered .tab[data-selected]::after, .tabs-bordered .tab[aria-selected="true"]::after, .tabs-bordered .tab-input:checked + .tab::after, .tabs:not(.tabs-boxed) .tab[data-selected]::after, .tabs:not(.tabs-boxed) .tab[aria-selected="true"]::after, .tabs:not(.tabs-boxed) .tab-input:checked + .tab::after {
3030
- transform: scaleX(1);
3031
- }
3032
- .tabs-boxed .tab-list {
3033
- gap: calc(var(--spacing) * 0);
3034
- border-radius: var(--radius-md);
3035
- border-style: var(--tw-border-style);
3036
- border-width: 1px;
3037
- border-color: var(--color-border);
3038
- background-color: var(--color-surface-muted);
3039
- padding: calc(var(--spacing) * 0.5);
3040
- }
3041
- .tabs-boxed .tab {
3042
- border-radius: 0.25rem;
3043
- }
3044
- .tabs-boxed .tab[data-selected], .tabs-boxed .tab[aria-selected="true"], .tabs-boxed .tab-input:checked + .tab {
3045
- background-color: var(--color-surface);
3046
- color: var(--color-text);
3047
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3048
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3049
- }
3050
- .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
3051
- display: flex;
3052
- width: 100%;
3053
- }
3054
- .tabs-full-width:not([data-orientation="vertical"]) .tab {
3055
- flex: 1;
3056
- justify-content: center;
3057
- }
3058
- .tabs-sm .tab {
3059
- height: calc(var(--spacing) * 7);
3060
- padding-inline: calc(var(--spacing) * 2);
3061
- font-size: var(--text-xs);
3062
- line-height: var(--tw-leading, var(--text-xs--line-height));
3063
- }
3064
- .tabs-lg .tab {
3065
- height: calc(var(--spacing) * 11);
3066
- padding-inline: calc(var(--spacing) * 4);
3067
- font-size: var(--text-base);
3068
- line-height: var(--tw-leading, var(--text-base--line-height));
3069
- }
3070
- .tabs .tab-panel {
3071
- padding-top: calc(var(--spacing) * 3);
3072
- --tw-outline-style: none;
3073
- outline-style: none;
3074
- }
3075
- .tabs .tab-panel {
3076
- display: none;
3077
- }
3078
- .tabs:has(.tab-input[value="1"]:checked) .tab-panel[data-value="1"], .tabs:has(.tab-input[value="2"]:checked) .tab-panel[data-value="2"], .tabs:has(.tab-input[value="3"]:checked) .tab-panel[data-value="3"], .tabs:has(.tab-input[value="4"]:checked) .tab-panel[data-value="4"], .tabs:has(.tab-input[value="5"]:checked) .tab-panel[data-value="5"], .tabs:has(.tab-input[value="6"]:checked) .tab-panel[data-value="6"] {
3079
- display: block;
3080
- }
3081
- .tabs .tab-panel:not([hidden]):not([data-value]) {
3082
- display: block;
3083
- }
3084
- .tabs[data-orientation="vertical"] {
3085
- flex-direction: row;
3086
- gap: calc(var(--spacing) * 3);
3087
- }
3088
- .tabs[data-orientation="vertical"] .tab-list {
3089
- flex-direction: column;
3090
- align-items: stretch;
3091
- border-right-style: var(--tw-border-style);
3092
- border-right-width: 1px;
3093
- border-bottom-style: var(--tw-border-style);
3094
- border-bottom-width: 0px;
3095
- border-color: var(--color-border);
3096
- }
3097
- .tabs[data-orientation="vertical"] .tab {
3098
- width: 100%;
3099
- justify-content: flex-start;
3100
- }
3101
- .tabs[data-orientation="vertical"].tabs-bordered .tab::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab::after {
3102
- inset-inline: auto;
3103
- inset-inline-end: -1px;
3104
- inset-block: 0;
3105
- inline-size: 2px;
3106
- block-size: auto;
3107
- transform: scaleY(0);
3108
- }
3109
- .tabs[data-orientation="vertical"].tabs-bordered .tab[data-selected]::after, .tabs[data-orientation="vertical"].tabs-bordered .tab[aria-selected="true"]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[data-selected]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
3110
- transform: scaleY(1);
3111
- }
3112
- }
3113
- @layer components {
3114
- .table {
3115
- width: 100%;
3116
- border-collapse: collapse;
3117
- font-size: var(--text-sm);
3118
- line-height: var(--tw-leading, var(--text-sm--line-height));
3119
- color: var(--color-text);
3120
- }
3121
- .table :where(th, td), .table-cell, .table-header-cell {
3122
- border-bottom-style: var(--tw-border-style);
3123
- border-bottom-width: 1px;
3124
- border-color: var(--color-border);
3125
- padding-inline: calc(var(--spacing) * 3);
3126
- padding-block: calc(var(--spacing) * 1.5);
3127
- text-align: left;
3128
- vertical-align: middle;
3129
- }
3130
- .table :where(thead th), .table-header-cell {
3131
- border-bottom-color: var(--color-border-strong);
3132
- background-color: var(--color-surface-muted);
3133
- --tw-font-weight: var(--font-weight-medium);
3134
- font-weight: var(--font-weight-medium);
3135
- white-space: nowrap;
3136
- color: var(--color-text-muted);
3137
- }
3138
- .table > :last-child > tr:last-child :where(td), .table > :last-child > tr:last-child .table-cell {
3139
- border-bottom-style: var(--tw-border-style);
3140
- border-bottom-width: 0px;
3141
- }
3142
- .table :where(th, td)[data-align="right"] {
3143
- text-align: right;
3144
- }
3145
- .table :where(th, td)[data-align="center"] {
3146
- text-align: center;
3147
- }
3148
- .table-cell-numeric {
3149
- text-align: right;
3150
- --tw-numeric-spacing: tabular-nums;
3151
- font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3152
- }
3153
- .table-cell-gutter {
3154
- width: calc(var(--spacing) * 6);
3155
- padding-inline: calc(var(--spacing) * 0);
3156
- text-align: center;
3157
- color: var(--color-text-muted);
3158
- }
3159
- .table-cell-gutter > :is(i, svg) {
3160
- font-size: 1rem;
3161
- line-height: 1;
3162
- vertical-align: middle;
3163
- }
3164
- .table-striped tbody tr:nth-child(even) :where(td) {
3165
- background-color: var(--color-surface-muted);
3166
- }
3167
- .table-bordered {
3168
- border-style: var(--tw-border-style);
3169
- border-width: 1px;
3170
- border-color: var(--color-border);
3171
- }
3172
- .table-bordered :where(th, td) {
3173
- border-style: var(--tw-border-style);
3174
- border-width: 1px;
3175
- border-color: var(--color-border);
3176
- }
3177
- .table-relaxed :where(th, td) {
3178
- padding-inline: calc(var(--spacing) * 4);
3179
- padding-block: calc(var(--spacing) * 3);
3180
- }
3181
- .table-sticky thead :where(th) {
3182
- position: sticky;
3183
- top: calc(var(--spacing) * 0);
3184
- z-index: 10;
3185
- background-color: var(--color-surface-muted);
3186
- }
3187
- .table tbody tr {
3188
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3189
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3190
- transition-duration: var(--tw-duration, var(--default-transition-duration));
3191
- --tw-duration: 75ms;
3192
- transition-duration: 75ms;
3193
- }
3194
- .table tbody tr:hover :where(td) {
3195
- background-color: var(--color-surface-muted);
3196
- }
3197
- .table tbody tr:has(input[type="checkbox"]:checked), .table tbody tr:has(.checkbox[data-checked]), .table tbody tr[data-selected] {
3198
- background-color: var(--color-primary-muted);
3199
- }
3200
- .table tbody tr:has(input[type="checkbox"]:checked):hover :where(td), .table tbody tr:has(.checkbox[data-checked]):hover :where(td), .table tbody tr[data-selected]:hover :where(td) {
3201
- background-color: var(--color-primary-muted);
3202
- }
3203
- .table-row-link {
3204
- position: relative;
3205
- cursor: pointer;
3206
- }
3207
- .table-row-link:hover :where(td) {
3208
- background-color: var(--color-surface-muted);
3209
- }
3210
- .table-row-link a:first-of-type::after {
3211
- content: "";
3212
- position: absolute;
3213
- inset: calc(var(--spacing) * 0);
3214
- }
3215
- .table-row-link:focus-within {
3216
- outline-style: var(--tw-outline-style);
3217
- outline-width: 2px;
3218
- outline-offset: calc(2px * -1);
3219
- outline-color: var(--color-primary);
3220
- }
3221
- }
3222
- @layer components {
3223
- .tooltip {
3224
- pointer-events: none;
3225
- display: inline-block;
3226
- max-width: var(--container-xs);
3227
- border-radius: var(--radius-md);
3228
- background-color: var(--color-text);
3229
- padding-inline: calc(var(--spacing) * 2);
3230
- padding-block: calc(var(--spacing) * 1);
3231
- font-size: var(--text-xs);
3232
- line-height: var(--tw-leading, var(--text-xs--line-height));
3233
- --tw-leading: var(--leading-snug);
3234
- line-height: var(--leading-snug);
3235
- --tw-font-weight: var(--font-weight-medium);
3236
- font-weight: var(--font-weight-medium);
3237
- color: var(--color-surface);
3238
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3239
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3240
- text-wrap: balance;
3241
- }
3242
- .tooltip-sm {
3243
- padding-inline: calc(var(--spacing) * 1.5);
3244
- padding-block: calc(var(--spacing) * 0.5);
3245
- }
3246
- .tooltip {
3247
- transition: opacity 150ms ease-out, transform 150ms ease-out;
3248
- }
3249
- .tooltip[data-starting-style], .tooltip[data-ending-style] {
3250
- opacity: 0;
3251
- }
3252
- .tooltip[data-side="top"][data-starting-style], .tooltip[data-side="top"][data-ending-style] {
3253
- transform: translateY(0.25rem);
3254
- }
3255
- .tooltip[data-side="bottom"][data-starting-style], .tooltip[data-side="bottom"][data-ending-style] {
3256
- transform: translateY(-0.25rem);
3257
- }
3258
- .tooltip[data-side="left"][data-starting-style], .tooltip[data-side="left"][data-ending-style] {
3259
- transform: translateX(0.25rem);
3260
- }
3261
- .tooltip[data-side="right"][data-starting-style], .tooltip[data-side="right"][data-ending-style] {
3262
- transform: translateX(-0.25rem);
3263
- }
3264
- .tooltip-wrap {
3265
- position: relative;
3266
- display: inline-flex;
3267
- align-items: center;
3268
- }
3269
- .tooltip-wrap > .tooltip {
3270
- visibility: hidden;
3271
- position: absolute;
3272
- opacity: 0%;
3273
- left: 50%;
3274
- bottom: 100%;
3275
- margin-bottom: calc(var(--spacing) * 1.5);
3276
- transform: translateX(-50%);
3277
- transition: opacity 150ms ease-out 0ms, visibility 0s linear 150ms;
3278
- }
3279
- .tooltip-wrap-bottom > .tooltip {
3280
- top: 100%;
3281
- right: auto;
3282
- bottom: auto;
3283
- left: 50%;
3284
- margin-top: calc(var(--spacing) * 1.5);
3285
- margin-right: 0;
3286
- margin-bottom: 0;
3287
- margin-left: 0;
3288
- transform: translateX(-50%);
3289
- }
3290
- .tooltip-wrap-left > .tooltip {
3291
- top: 50%;
3292
- right: 100%;
3293
- bottom: auto;
3294
- left: auto;
3295
- margin-top: 0;
3296
- margin-right: calc(var(--spacing) * 1.5);
3297
- margin-bottom: 0;
3298
- margin-left: 0;
3299
- transform: translateY(-50%);
3300
- }
3301
- .tooltip-wrap-right > .tooltip {
3302
- top: 50%;
3303
- right: auto;
3304
- bottom: auto;
3305
- left: 100%;
3306
- margin-top: 0;
3307
- margin-right: 0;
3308
- margin-bottom: 0;
3309
- margin-left: calc(var(--spacing) * 1.5);
3310
- transform: translateY(-50%);
3311
- }
3312
- .tooltip-wrap:hover > .tooltip, .tooltip-wrap:focus-within > .tooltip {
3313
- visibility: visible;
3314
- opacity: 100%;
3315
- transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
3316
- }
3317
- }
3318
- @property --tw-shadow {
3319
- syntax: "*";
3320
- inherits: false;
3321
- initial-value: 0 0 #0000;
3322
- }
3323
- @property --tw-shadow-color {
3324
- syntax: "*";
3325
- inherits: false;
3326
- }
3327
- @property --tw-shadow-alpha {
3328
- syntax: "<percentage>";
3329
- inherits: false;
3330
- initial-value: 100%;
3331
- }
3332
- @property --tw-inset-shadow {
3333
- syntax: "*";
3334
- inherits: false;
3335
- initial-value: 0 0 #0000;
3336
- }
3337
- @property --tw-inset-shadow-color {
3338
- syntax: "*";
3339
- inherits: false;
3340
- }
3341
- @property --tw-inset-shadow-alpha {
3342
- syntax: "<percentage>";
3343
- inherits: false;
3344
- initial-value: 100%;
3345
- }
3346
- @property --tw-ring-color {
3347
- syntax: "*";
3348
- inherits: false;
3349
- }
3350
- @property --tw-ring-shadow {
3351
- syntax: "*";
3352
- inherits: false;
3353
- initial-value: 0 0 #0000;
3354
- }
3355
- @property --tw-inset-ring-color {
3356
- syntax: "*";
3357
- inherits: false;
3358
- }
3359
- @property --tw-inset-ring-shadow {
3360
- syntax: "*";
3361
- inherits: false;
3362
- initial-value: 0 0 #0000;
3363
- }
3364
- @property --tw-ring-inset {
3365
- syntax: "*";
3366
- inherits: false;
3367
- }
3368
- @property --tw-ring-offset-width {
3369
- syntax: "<length>";
3370
- inherits: false;
3371
- initial-value: 0px;
3372
- }
3373
- @property --tw-ring-offset-color {
3374
- syntax: "*";
3375
- inherits: false;
3376
- initial-value: #fff;
3377
- }
3378
- @property --tw-ring-offset-shadow {
3379
- syntax: "*";
3380
- inherits: false;
3381
- initial-value: 0 0 #0000;
3382
- }
3383
- @property --tw-leading {
3384
- syntax: "*";
3385
- inherits: false;
3386
- }
3387
- @property --tw-font-weight {
3388
- syntax: "*";
3389
- inherits: false;
3390
- }
3391
- @property --tw-border-style {
3392
- syntax: "*";
3393
- inherits: false;
3394
- initial-value: solid;
3395
- }
3396
- @property --tw-outline-style {
3397
- syntax: "*";
3398
- inherits: false;
3399
- initial-value: solid;
3400
- }
3401
- @property --tw-duration {
3402
- syntax: "*";
3403
- inherits: false;
3404
- }
3405
- @property --tw-translate-x {
3406
- syntax: "*";
3407
- inherits: false;
3408
- initial-value: 0;
3409
- }
3410
- @property --tw-translate-y {
3411
- syntax: "*";
3412
- inherits: false;
3413
- initial-value: 0;
3414
- }
3415
- @property --tw-translate-z {
3416
- syntax: "*";
3417
- inherits: false;
3418
- initial-value: 0;
3419
- }
3420
- @property --tw-tracking {
3421
- syntax: "*";
3422
- inherits: false;
3423
- }
3424
- @property --tw-ordinal {
3425
- syntax: "*";
3426
- inherits: false;
3427
- }
3428
- @property --tw-slashed-zero {
3429
- syntax: "*";
3430
- inherits: false;
3431
- }
3432
- @property --tw-numeric-figure {
3433
- syntax: "*";
3434
- inherits: false;
3435
- }
3436
- @property --tw-numeric-spacing {
3437
- syntax: "*";
3438
- inherits: false;
3439
- }
3440
- @property --tw-numeric-fraction {
3441
- syntax: "*";
3442
- inherits: false;
3443
- }
3444
- @layer properties {
3445
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3446
- *, ::before, ::after, ::backdrop {
3447
- --tw-shadow: 0 0 #0000;
3448
- --tw-shadow-color: initial;
3449
- --tw-shadow-alpha: 100%;
3450
- --tw-inset-shadow: 0 0 #0000;
3451
- --tw-inset-shadow-color: initial;
3452
- --tw-inset-shadow-alpha: 100%;
3453
- --tw-ring-color: initial;
3454
- --tw-ring-shadow: 0 0 #0000;
3455
- --tw-inset-ring-color: initial;
3456
- --tw-inset-ring-shadow: 0 0 #0000;
3457
- --tw-ring-inset: initial;
3458
- --tw-ring-offset-width: 0px;
3459
- --tw-ring-offset-color: #fff;
3460
- --tw-ring-offset-shadow: 0 0 #0000;
3461
- --tw-leading: initial;
3462
- --tw-font-weight: initial;
3463
- --tw-border-style: solid;
3464
- --tw-outline-style: solid;
3465
- --tw-duration: initial;
3466
- --tw-translate-x: 0;
3467
- --tw-translate-y: 0;
3468
- --tw-translate-z: 0;
3469
- --tw-tracking: initial;
3470
- --tw-ordinal: initial;
3471
- --tw-slashed-zero: initial;
3472
- --tw-numeric-figure: initial;
3473
- --tw-numeric-spacing: initial;
3474
- --tw-numeric-fraction: initial;
3475
- }
3476
- }
3477
- }