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