manolis-ui 0.11.4 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -1,4 +1,5 @@
1
- /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
2
3
  @layer theme, base, components, utilities;
3
4
  @layer theme {
4
5
  :root, :host {
@@ -6,13 +7,13 @@
6
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
8
9
  "Courier New", monospace;
9
- --color-red-500: oklch(0.637 0.237 25.331);
10
- --color-yellow-400: oklch(0.852 0.199 91.936);
11
- --color-green-500: oklch(0.723 0.219 149.579);
12
- --color-blue-100: oklch(0.932 0.032 255.585);
13
- --color-blue-500: oklch(0.623 0.214 259.815);
14
- --color-blue-800: oklch(0.424 0.199 265.638);
15
- --color-gray-200: oklch(0.928 0.006 264.531);
10
+ --color-red-500: oklch(63.7% 0.237 25.331);
11
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
12
+ --color-green-500: oklch(72.3% 0.219 149.579);
13
+ --color-blue-100: oklch(93.2% 0.032 255.585);
14
+ --color-blue-500: oklch(62.3% 0.214 259.815);
15
+ --color-blue-800: oklch(42.4% 0.199 265.638);
16
+ --color-gray-200: oklch(92.8% 0.006 264.531);
16
17
  --color-black: #000;
17
18
  --spacing: 0.25rem;
18
19
  --container-xs: 20rem;
@@ -36,17 +37,7 @@
36
37
  --default-transition-duration: 150ms;
37
38
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
38
39
  --default-font-family: var(--font-sans);
39
- --default-font-feature-settings: var(--font-sans--font-feature-settings);
40
- --default-font-variation-settings: var(
41
- --font-sans--font-variation-settings
42
- );
43
40
  --default-mono-font-family: var(--font-mono);
44
- --default-mono-font-feature-settings: var(
45
- --font-mono--font-feature-settings
46
- );
47
- --default-mono-font-variation-settings: var(
48
- --font-mono--font-variation-settings
49
- );
50
41
  }
51
42
  }
52
43
  @layer base {
@@ -60,14 +51,11 @@
60
51
  line-height: 1.5;
61
52
  -webkit-text-size-adjust: 100%;
62
53
  tab-size: 4;
63
- 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" );
54
+ 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");
64
55
  font-feature-settings: var(--default-font-feature-settings, normal);
65
- font-variation-settings: var( --default-font-variation-settings, normal );
56
+ font-variation-settings: var(--default-font-variation-settings, normal);
66
57
  -webkit-tap-highlight-color: transparent;
67
58
  }
68
- body {
69
- line-height: inherit;
70
- }
71
59
  hr {
72
60
  height: 0;
73
61
  color: inherit;
@@ -90,9 +78,9 @@
90
78
  font-weight: bolder;
91
79
  }
92
80
  code, kbd, samp, pre {
93
- font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
94
- font-feature-settings: var( --default-mono-font-feature-settings, normal );
95
- font-variation-settings: var( --default-mono-font-variation-settings, normal );
81
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
82
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
83
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
96
84
  font-size: 1em;
97
85
  }
98
86
  small {
@@ -156,7 +144,14 @@
156
144
  }
157
145
  ::placeholder {
158
146
  opacity: 1;
159
- color: color-mix(in oklab, currentColor 50%, transparent);
147
+ }
148
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
149
+ ::placeholder {
150
+ color: currentcolor;
151
+ @supports (color: color-mix(in lab, red, red)) {
152
+ color: color-mix(in oklab, currentcolor 50%, transparent);
153
+ }
154
+ }
160
155
  }
161
156
  textarea {
162
157
  resize: vertical;
@@ -177,6 +172,9 @@
177
172
  ::-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 {
178
173
  padding-block: 0;
179
174
  }
175
+ ::-webkit-calendar-picker-indicator {
176
+ line-height: 1;
177
+ }
180
178
  :-moz-ui-invalid {
181
179
  box-shadow: none;
182
180
  }
@@ -294,7 +292,10 @@
294
292
  }
295
293
  }
296
294
  &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) {
297
- color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
295
+ color: var(--color-base-content);
296
+ @supports (color: color-mix(in lab, red, red)) {
297
+ color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
298
+ }
298
299
  }
299
300
  &:not(input):empty {
300
301
  flex-grow: 1;
@@ -394,7 +395,10 @@
394
395
  :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) {
395
396
  &.menu-focus, &:focus-visible {
396
397
  cursor: pointer;
397
- background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
398
+ background-color: var(--color-base-content);
399
+ @supports (color: color-mix(in lab, red, red)) {
400
+ background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
401
+ }
398
402
  color: var(--color-base-content);
399
403
  outline-style: none;
400
404
  @media (forced-colors: active) {
@@ -405,7 +409,10 @@
405
409
  }
406
410
  :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
407
411
  cursor: pointer;
408
- background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
412
+ background-color: var(--color-base-content);
413
+ @supports (color: color-mix(in lab, red, red)) {
414
+ background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
415
+ }
409
416
  outline-style: none;
410
417
  @media (forced-colors: active) {
411
418
  outline: 2px solid transparent;
@@ -445,7 +452,10 @@
445
452
  }
446
453
  &.menu-disabled {
447
454
  pointer-events: none;
448
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
455
+ color: var(--color-base-content);
456
+ @supports (color: color-mix(in lab, red, red)) {
457
+ color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
458
+ }
449
459
  }
450
460
  }
451
461
  .dropdown:focus-within {
@@ -604,17 +614,30 @@
604
614
  --btn-bg: var(--btn-color, var(--color-base-200));
605
615
  --btn-fg: var(--color-base-content);
606
616
  --btn-p: 1rem;
607
- --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
608
- --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
617
+ --btn-border: var(--btn-bg);
618
+ @supports (color: color-mix(in lab, red, red)) {
619
+ --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
620
+ }
621
+ --btn-shadow: 0 3px 2px -2px var(--btn-bg),
622
+ 0 4px 3px -2px var(--btn-bg);
623
+ @supports (color: color-mix(in lab, red, red)) {
624
+ --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
609
625
  0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
626
+ }
610
627
  --btn-noise: var(--fx-noise);
611
628
  @media (hover: hover) {
612
629
  &:hover {
613
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
630
+ --btn-bg: var(--btn-color, var(--color-base-200));
631
+ @supports (color: color-mix(in lab, red, red)) {
632
+ --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
633
+ }
614
634
  }
615
635
  }
616
636
  &.btn-active {
617
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
637
+ --btn-bg: var(--btn-color, var(--color-base-200));
638
+ @supports (color: color-mix(in lab, red, red)) {
639
+ --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
640
+ }
618
641
  --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
619
642
  isolation: isolate;
620
643
  }
@@ -624,25 +647,43 @@
624
647
  }
625
648
  &:active:not(.btn-active) {
626
649
  translate: 0 0.5px;
627
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
628
- --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
650
+ --btn-bg: var(--btn-color, var(--color-base-200));
651
+ @supports (color: color-mix(in lab, red, red)) {
652
+ --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
653
+ }
654
+ --btn-border: var(--btn-color, var(--color-base-200));
655
+ @supports (color: color-mix(in lab, red, red)) {
656
+ --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
657
+ }
629
658
  --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
630
659
  }
631
660
  &:is(:disabled, [disabled], .btn-disabled) {
632
661
  &:not(.btn-link, .btn-ghost) {
633
- background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
662
+ background-color: var(--color-base-content);
663
+ @supports (color: color-mix(in lab, red, red)) {
664
+ background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
665
+ }
634
666
  box-shadow: none;
635
667
  }
636
668
  pointer-events: none;
637
669
  --btn-border: #0000;
638
670
  --btn-noise: none;
639
- --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
671
+ --btn-fg: var(--color-base-content);
672
+ @supports (color: color-mix(in lab, red, red)) {
673
+ --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
674
+ }
640
675
  @media (hover: hover) {
641
676
  &:hover {
642
677
  pointer-events: none;
643
- background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
678
+ background-color: var(--color-neutral);
679
+ @supports (color: color-mix(in lab, red, red)) {
680
+ background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
681
+ }
644
682
  --btn-border: #0000;
645
- --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
683
+ --btn-fg: var(--color-base-content);
684
+ @supports (color: color-mix(in lab, red, red)) {
685
+ --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
686
+ }
646
687
  }
647
688
  }
648
689
  }
@@ -654,7 +695,10 @@
654
695
  &:checked {
655
696
  outline-width: 2px;
656
697
  outline-style: solid;
657
- --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
698
+ --btn-bg: var(--btn-color, var(--color-base-200));
699
+ @supports (color: color-mix(in lab, red, red)) {
700
+ --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
701
+ }
658
702
  --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
659
703
  isolation: isolate;
660
704
  }
@@ -805,7 +849,6 @@
805
849
  }
806
850
  }
807
851
  .collapse-content {
808
- grid-column-start: 1;
809
852
  grid-row-start: 1;
810
853
  visibility: hidden;
811
854
  grid-column-start: 1;
@@ -841,9 +884,6 @@
841
884
  .collapse {
842
885
  visibility: collapse;
843
886
  }
844
- .visible {
845
- visibility: visible;
846
- }
847
887
  .list {
848
888
  display: flex;
849
889
  flex-direction: column;
@@ -889,7 +929,10 @@
889
929
  inset-inline: var(--radius-box);
890
930
  position: absolute;
891
931
  bottom: calc(0.25rem * 0);
892
- border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
932
+ border-color: var(--color-base-content);
933
+ @supports (color: color-mix(in lab, red, red)) {
934
+ border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
935
+ }
893
936
  }
894
937
  }
895
938
  }
@@ -912,9 +955,15 @@
912
955
  );
913
956
  border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
914
957
  padding: var(--toggle-p);
915
- box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
958
+ box-shadow: 0 1px currentColor inset;
959
+ @supports (color: color-mix(in lab, red, red)) {
960
+ box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
961
+ }
916
962
  transition: color 0.3s, grid-template-columns 0.2s;
917
- --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
963
+ --input-color: var(--color-base-content);
964
+ @supports (color: color-mix(in lab, red, red)) {
965
+ --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
966
+ }
918
967
  --toggle-p: 0.1875rem;
919
968
  --size: calc(var(--size-selector, 0.25rem) * 6);
920
969
  width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
@@ -977,7 +1026,10 @@
977
1026
  --tw-content: "";
978
1027
  content: var(--tw-content);
979
1028
  transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
980
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
1029
+ box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor;
1030
+ @supports (color: color-mix(in lab, red, red)) {
1031
+ box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
1032
+ }
981
1033
  background-size: auto, calc(var(--noise) * 100%);
982
1034
  background-image: none, var(--fx-noise);
983
1035
  @media (forced-colors: active) {
@@ -1034,9 +1086,15 @@
1034
1086
  border-end-start-radius: var(--join-es, var(--radius-field));
1035
1087
  border-end-end-radius: var(--join-ee, var(--radius-field));
1036
1088
  border-color: var(--input-color);
1037
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1089
+ box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1090
+ @supports (color: color-mix(in lab, red, red)) {
1091
+ box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1092
+ }
1038
1093
  --size: calc(var(--size-field, 0.25rem) * 10);
1039
- --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1094
+ --input-color: var(--color-base-content);
1095
+ @supports (color: color-mix(in lab, red, red)) {
1096
+ --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1097
+ }
1040
1098
  &:where(input) {
1041
1099
  display: inline-flex;
1042
1100
  }
@@ -1057,7 +1115,10 @@
1057
1115
  }
1058
1116
  &:focus, &:focus-within {
1059
1117
  --input-color: var(--color-base-content);
1060
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1118
+ box-shadow: 0 1px var(--input-color);
1119
+ @supports (color: color-mix(in lab, red, red)) {
1120
+ box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1121
+ }
1061
1122
  outline: 2px solid var(--input-color);
1062
1123
  outline-offset: 2px;
1063
1124
  isolation: isolate;
@@ -1066,9 +1127,15 @@
1066
1127
  cursor: not-allowed;
1067
1128
  border-color: var(--color-base-200);
1068
1129
  background-color: var(--color-base-200);
1069
- color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1130
+ color: var(--color-base-content);
1131
+ @supports (color: color-mix(in lab, red, red)) {
1132
+ color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1133
+ }
1070
1134
  &::placeholder {
1071
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1135
+ color: var(--color-base-content);
1136
+ @supports (color: color-mix(in lab, red, red)) {
1137
+ color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1138
+ }
1072
1139
  }
1073
1140
  box-shadow: none;
1074
1141
  }
@@ -1129,12 +1196,18 @@
1129
1196
  }
1130
1197
  :where(thead, tfoot) {
1131
1198
  white-space: nowrap;
1132
- color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
1199
+ color: var(--color-base-content);
1200
+ @supports (color: color-mix(in lab, red, red)) {
1201
+ color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
1202
+ }
1133
1203
  font-size: 0.875rem;
1134
1204
  font-weight: 600;
1135
1205
  }
1136
1206
  :where(tfoot) {
1137
- border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1207
+ border-top: var(--border) solid var(--color-base-content);
1208
+ @supports (color: color-mix(in lab, red, red)) {
1209
+ border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1210
+ }
1138
1211
  }
1139
1212
  :where(.table-pin-rows thead tr) {
1140
1213
  position: sticky;
@@ -1155,7 +1228,10 @@
1155
1228
  background-color: var(--color-base-100);
1156
1229
  }
1157
1230
  :where(thead tr, tbody tr:not(:last-child)) {
1158
- border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1231
+ border-bottom: var(--border) solid var(--color-base-content);
1232
+ @supports (color: color-mix(in lab, red, red)) {
1233
+ border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
1234
+ }
1159
1235
  }
1160
1236
  }
1161
1237
  .avatar-offline {
@@ -1300,7 +1376,10 @@
1300
1376
  --range-progress: currentColor;
1301
1377
  --range-fill: 1;
1302
1378
  --range-p: 0.25rem;
1303
- --range-bg: color-mix(in oklab, currentColor 10%, #0000);
1379
+ --range-bg: currentColor;
1380
+ @supports (color: color-mix(in lab, red, red)) {
1381
+ --range-bg: color-mix(in oklab, currentColor 10%, #0000);
1382
+ }
1304
1383
  cursor: pointer;
1305
1384
  overflow: hidden;
1306
1385
  background-color: transparent;
@@ -1344,7 +1423,10 @@
1344
1423
  top: 50%;
1345
1424
  color: var(--range-progress);
1346
1425
  transform: translateY(-50%);
1347
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1426
+ box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1427
+ @supports (color: color-mix(in lab, red, red)) {
1428
+ box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1429
+ }
1348
1430
  }
1349
1431
  &::-moz-range-track {
1350
1432
  width: 100%;
@@ -1365,7 +1447,10 @@
1365
1447
  border: var(--range-p) solid;
1366
1448
  top: 50%;
1367
1449
  color: var(--range-progress);
1368
- box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1450
+ box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1451
+ @supports (color: color-mix(in lab, red, red)) {
1452
+ box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
1453
+ }
1369
1454
  }
1370
1455
  &:disabled {
1371
1456
  cursor: not-allowed;
@@ -1517,9 +1602,15 @@
1517
1602
  background-size: 4px 4px, 4px 4px;
1518
1603
  background-repeat: no-repeat;
1519
1604
  text-overflow: ellipsis;
1520
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1605
+ box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1606
+ @supports (color: color-mix(in lab, red, red)) {
1607
+ box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
1608
+ }
1521
1609
  border-color: var(--input-color);
1522
- --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1610
+ --input-color: var(--color-base-content);
1611
+ @supports (color: color-mix(in lab, red, red)) {
1612
+ --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
1613
+ }
1523
1614
  --size: calc(var(--size-field, 0.25rem) * 10);
1524
1615
  [dir="rtl"] & {
1525
1616
  background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
@@ -1545,7 +1636,10 @@
1545
1636
  }
1546
1637
  &:focus, &:focus-within {
1547
1638
  --input-color: var(--color-base-content);
1548
- box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1639
+ box-shadow: 0 1px var(--input-color);
1640
+ @supports (color: color-mix(in lab, red, red)) {
1641
+ box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
1642
+ }
1549
1643
  outline: 2px solid var(--input-color);
1550
1644
  outline-offset: 2px;
1551
1645
  }
@@ -1553,9 +1647,15 @@
1553
1647
  cursor: not-allowed;
1554
1648
  border-color: var(--color-base-200);
1555
1649
  background-color: var(--color-base-200);
1556
- color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1650
+ color: var(--color-base-content);
1651
+ @supports (color: color-mix(in lab, red, red)) {
1652
+ color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
1653
+ }
1557
1654
  &::placeholder {
1558
- color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1655
+ color: var(--color-base-content);
1656
+ @supports (color: color-mix(in lab, red, red)) {
1657
+ color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
1658
+ }
1559
1659
  }
1560
1660
  }
1561
1661
  &:has(> select[disabled]) > select[disabled] {
@@ -1578,7 +1678,10 @@
1578
1678
  }
1579
1679
  }
1580
1680
  .checkbox {
1581
- border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
1681
+ border: var(--border) solid var(--input-color, var(--color-base-content));
1682
+ @supports (color: color-mix(in lab, red, red)) {
1683
+ border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
1684
+ }
1582
1685
  position: relative;
1583
1686
  flex-shrink: 0;
1584
1687
  cursor: pointer;
@@ -1661,7 +1764,10 @@
1661
1764
  border-radius: calc(infinity * 1px);
1662
1765
  padding: calc(0.25rem * 1);
1663
1766
  vertical-align: middle;
1664
- border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
1767
+ border: var(--border) solid var(--input-color, currentColor);
1768
+ @supports (color: color-mix(in lab, red, red)) {
1769
+ border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
1770
+ }
1665
1771
  box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
1666
1772
  --size: calc(var(--size-selector, 0.25rem) * 6);
1667
1773
  width: var(--size);
@@ -1772,7 +1878,10 @@
1772
1878
  appearance: none;
1773
1879
  overflow: hidden;
1774
1880
  border-radius: var(--radius-box);
1775
- background-color: color-mix(in oklab, currentColor 20%, transparent);
1881
+ background-color: currentColor;
1882
+ @supports (color: color-mix(in lab, red, red)) {
1883
+ background-color: color-mix(in oklab, currentColor 20%, transparent);
1884
+ }
1776
1885
  color: var(--color-base-content);
1777
1886
  &:indeterminate {
1778
1887
  background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
@@ -1891,6 +2000,9 @@
1891
2000
  .bottom-5 {
1892
2001
  bottom: calc(var(--spacing) * 5);
1893
2002
  }
2003
+ .left-0 {
2004
+ left: calc(var(--spacing) * 0);
2005
+ }
1894
2006
  .left-5 {
1895
2007
  left: calc(var(--spacing) * 5);
1896
2008
  }
@@ -2081,6 +2193,9 @@
2081
2193
  }
2082
2194
  }
2083
2195
  }
2196
+ .my-2 {
2197
+ margin-block: calc(var(--spacing) * 2);
2198
+ }
2084
2199
  .my-4 {
2085
2200
  margin-block: calc(var(--spacing) * 4);
2086
2201
  }
@@ -2089,7 +2204,10 @@
2089
2204
  align-items: center;
2090
2205
  gap: calc(0.25rem * 1.5);
2091
2206
  white-space: nowrap;
2092
- color: color-mix(in oklab, currentColor 60%, transparent);
2207
+ color: currentColor;
2208
+ @supports (color: color-mix(in lab, red, red)) {
2209
+ color: color-mix(in oklab, currentColor 60%, transparent);
2210
+ }
2093
2211
  &:has(input) {
2094
2212
  cursor: pointer;
2095
2213
  }
@@ -2103,12 +2221,18 @@
2103
2221
  &:first-child {
2104
2222
  margin-inline-start: calc(0.25rem * -3);
2105
2223
  margin-inline-end: calc(0.25rem * 3);
2106
- border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2224
+ border-inline-end: var(--border) solid currentColor;
2225
+ @supports (color: color-mix(in lab, red, red)) {
2226
+ border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2227
+ }
2107
2228
  }
2108
2229
  &:last-child {
2109
2230
  margin-inline-start: calc(0.25rem * 3);
2110
2231
  margin-inline-end: calc(0.25rem * -3);
2111
- border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2232
+ border-inline-start: var(--border) solid currentColor;
2233
+ @supports (color: color-mix(in lab, red, red)) {
2234
+ border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
2235
+ }
2112
2236
  }
2113
2237
  }
2114
2238
  }
@@ -2155,6 +2279,9 @@
2155
2279
  .mt-1 {
2156
2280
  margin-top: calc(var(--spacing) * 1);
2157
2281
  }
2282
+ .mt-2 {
2283
+ margin-top: calc(var(--spacing) * 2);
2284
+ }
2158
2285
  .mt-4 {
2159
2286
  margin-top: calc(var(--spacing) * 4);
2160
2287
  }
@@ -2179,9 +2306,6 @@
2179
2306
  .mb-2 {
2180
2307
  margin-bottom: calc(var(--spacing) * 2);
2181
2308
  }
2182
- .mb-4 {
2183
- margin-bottom: calc(var(--spacing) * 4);
2184
- }
2185
2309
  .ml-1 {
2186
2310
  margin-left: calc(var(--spacing) * 1);
2187
2311
  }
@@ -2200,13 +2324,22 @@
2200
2324
  width: calc(0.25rem * 2);
2201
2325
  height: calc(0.25rem * 2);
2202
2326
  border-radius: var(--radius-selector);
2203
- background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
2327
+ background-color: var(--color-base-content);
2328
+ @supports (color: color-mix(in lab, red, red)) {
2329
+ background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
2330
+ }
2204
2331
  background-position: center;
2205
2332
  background-repeat: no-repeat;
2206
2333
  vertical-align: middle;
2207
- color: color-mix(in oklab, var(--color-black) 30%, transparent);
2334
+ color: color-mix(in srgb, #000 30%, transparent);
2335
+ @supports (color: color-mix(in lab, red, red)) {
2336
+ color: color-mix(in oklab, var(--color-black) 30%, transparent);
2337
+ }
2208
2338
  background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 );
2209
- box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
2339
+ box-shadow: 0 2px 3px -1px currentColor;
2340
+ @supports (color: color-mix(in lab, red, red)) {
2341
+ box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
2342
+ }
2210
2343
  }
2211
2344
  .badge {
2212
2345
  display: inline-flex;
@@ -2241,8 +2374,14 @@
2241
2374
  }
2242
2375
  &.badge-soft {
2243
2376
  color: var(--badge-color, var(--color-base-content));
2244
- background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
2245
- border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
2377
+ background-color: var(--badge-color, var(--color-base-content));
2378
+ @supports (color: color-mix(in lab, red, red)) {
2379
+ background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
2380
+ }
2381
+ border-color: var(--badge-color, var(--color-base-content));
2382
+ @supports (color: color-mix(in lab, red, red)) {
2383
+ border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
2384
+ }
2246
2385
  background-image: none;
2247
2386
  box-shadow: none;
2248
2387
  }
@@ -2399,18 +2538,15 @@
2399
2538
  mask-repeat: no-repeat;
2400
2539
  mask-position: center;
2401
2540
  }
2402
- .\!contents {
2403
- display: contents !important;
2404
- }
2405
2541
  .block {
2406
2542
  display: block;
2407
2543
  }
2544
+ .contents\! {
2545
+ display: contents !important;
2546
+ }
2408
2547
  .flex {
2409
2548
  display: flex;
2410
2549
  }
2411
- .grid {
2412
- display: grid;
2413
- }
2414
2550
  .hidden {
2415
2551
  display: none;
2416
2552
  }
@@ -2508,6 +2644,14 @@
2508
2644
  width: var(--size);
2509
2645
  height: var(--size);
2510
2646
  }
2647
+ .size-4 {
2648
+ width: calc(var(--spacing) * 4);
2649
+ height: calc(var(--spacing) * 4);
2650
+ }
2651
+ .size-6 {
2652
+ width: calc(var(--spacing) * 6);
2653
+ height: calc(var(--spacing) * 6);
2654
+ }
2511
2655
  .tabs-lg {
2512
2656
  :where(.tab) {
2513
2657
  height: calc(var(--size-field, 0.25rem) * 12);
@@ -2706,6 +2850,63 @@
2706
2850
  width: 100%;
2707
2851
  max-width: calc(0.25rem * 64);
2708
2852
  }
2853
+ .cally {
2854
+ font-size: 0.7rem;
2855
+ &::part(container) {
2856
+ padding: 0.5rem 1rem;
2857
+ user-select: none;
2858
+ }
2859
+ ::part(th) {
2860
+ font-weight: normal;
2861
+ block-size: auto;
2862
+ }
2863
+ &::part(header) {
2864
+ direction: ltr;
2865
+ }
2866
+ ::part(head) {
2867
+ opacity: 0.5;
2868
+ font-size: 0.7rem;
2869
+ }
2870
+ &::part(button) {
2871
+ border-radius: var(--radius-field);
2872
+ border: none;
2873
+ padding: 0.5rem;
2874
+ background: #0000;
2875
+ }
2876
+ &::part(button):hover {
2877
+ background: var(--color-base-200);
2878
+ }
2879
+ ::part(day) {
2880
+ border-radius: var(--radius-field);
2881
+ font-size: 0.7rem;
2882
+ }
2883
+ ::part(button day today) {
2884
+ background: var(--color-primary);
2885
+ color: var(--color-primary-content);
2886
+ }
2887
+ ::part(selected) {
2888
+ color: var(--color-base-100);
2889
+ background: var(--color-base-content);
2890
+ border-radius: var(--radius-field);
2891
+ }
2892
+ ::part(range-inner) {
2893
+ border-radius: 0;
2894
+ }
2895
+ ::part(range-start) {
2896
+ border-start-end-radius: 0;
2897
+ border-end-end-radius: 0;
2898
+ }
2899
+ ::part(range-end) {
2900
+ border-start-start-radius: 0;
2901
+ border-end-start-radius: 0;
2902
+ }
2903
+ ::part(range-start range-end) {
2904
+ border-radius: var(--radius-field);
2905
+ }
2906
+ calendar-month {
2907
+ width: 100%;
2908
+ }
2909
+ }
2709
2910
  .rating-half {
2710
2911
  :where(*:not(.rating-hidden)) {
2711
2912
  width: calc(0.25rem * 3);
@@ -2945,6 +3146,9 @@
2945
3146
  .flex-grow {
2946
3147
  flex-grow: 1;
2947
3148
  }
3149
+ .grow {
3150
+ flex-grow: 1;
3151
+ }
2948
3152
  .-translate-y-1\/2 {
2949
3153
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
2950
3154
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2964,7 +3168,7 @@
2964
3168
  rotate: 180deg;
2965
3169
  }
2966
3170
  .transform {
2967
- transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
3171
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
2968
3172
  }
2969
3173
  .skeleton {
2970
3174
  border-radius: var(--radius-box);
@@ -3013,9 +3217,6 @@
3013
3217
  overflow-y: scroll;
3014
3218
  scroll-snap-type: y mandatory;
3015
3219
  }
3016
- .grid-cols-7 {
3017
- grid-template-columns: repeat(7, minmax(0, 1fr));
3018
- }
3019
3220
  .flex-col {
3020
3221
  flex-direction: column;
3021
3222
  }
@@ -3157,10 +3358,16 @@
3157
3358
  border-color: var(--color-base-300);
3158
3359
  }
3159
3360
  .border-base-300\/25 {
3160
- border-color: color-mix(in oklab, var(--color-base-300) 25%, transparent);
3361
+ border-color: var(--color-base-300);
3362
+ @supports (color: color-mix(in lab, red, red)) {
3363
+ border-color: color-mix(in oklab, var(--color-base-300) 25%, transparent);
3364
+ }
3161
3365
  }
3162
3366
  .border-base-content\/20 {
3163
- border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
3367
+ border-color: var(--color-base-content);
3368
+ @supports (color: color-mix(in lab, red, red)) {
3369
+ border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
3370
+ }
3164
3371
  }
3165
3372
  .border-primary {
3166
3373
  border-color: var(--color-primary);
@@ -3189,9 +3396,6 @@
3189
3396
  .bg-primary {
3190
3397
  background-color: var(--color-primary);
3191
3398
  }
3192
- .bg-primary\/20 {
3193
- background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
3194
- }
3195
3399
  .bg-secondary {
3196
3400
  background-color: var(--color-secondary);
3197
3401
  }
@@ -3207,8 +3411,73 @@
3207
3411
  .bg-yellow-400 {
3208
3412
  background-color: var(--color-yellow-400);
3209
3413
  }
3414
+ .loading-bars {
3415
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
3416
+ }
3417
+ .loading-dots {
3418
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");
3419
+ }
3420
+ .loading-infinity {
3421
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");
3422
+ }
3423
+ .loading-ring {
3424
+ mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3425
+ }
3426
+ .loading-spinner {
3427
+ mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3428
+ }
3429
+ .mask-decagon {
3430
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
3431
+ }
3432
+ .mask-diamond {
3433
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
3434
+ }
3435
+ .mask-heart {
3436
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3437
+ }
3438
+ .mask-hexagon {
3439
+ mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3440
+ }
3441
+ .mask-hexagon-2 {
3442
+ mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3443
+ }
3444
+ .mask-pentagon {
3445
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
3446
+ }
3447
+ .mask-star {
3448
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
3449
+ }
3450
+ .mask-star-2 {
3451
+ mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
3452
+ }
3453
+ .mask-triangle {
3454
+ mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
3455
+ }
3456
+ .mask-triangle-2 {
3457
+ mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
3458
+ }
3459
+ .mask-triangle-3 {
3460
+ mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
3461
+ }
3462
+ .mask-triangle-4 {
3463
+ mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3464
+ }
3465
+ .mask-half-1 {
3466
+ mask-size: 200%;
3467
+ mask-position: left;
3468
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
3469
+ mask-position: right;
3470
+ }
3471
+ }
3472
+ .mask-half-2 {
3473
+ mask-size: 200%;
3474
+ mask-position: right;
3475
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
3476
+ mask-position: left;
3477
+ }
3478
+ }
3210
3479
  .fill-current {
3211
- fill: currentColor;
3480
+ fill: currentcolor;
3212
3481
  }
3213
3482
  .object-cover {
3214
3483
  object-fit: cover;
@@ -3251,12 +3520,12 @@
3251
3520
  font-size: 0.625rem;
3252
3521
  padding-inline: calc(0.25rem * 2 - var(--border));
3253
3522
  }
3254
- .\!px-1 {
3255
- padding-inline: calc(var(--spacing) * 1) !important;
3256
- }
3257
3523
  .px-0\! {
3258
3524
  padding-inline: calc(var(--spacing) * 0) !important;
3259
3525
  }
3526
+ .px-1\! {
3527
+ padding-inline: calc(var(--spacing) * 1) !important;
3528
+ }
3260
3529
  .px-3 {
3261
3530
  padding-inline: calc(var(--spacing) * 3);
3262
3531
  }
@@ -3266,7 +3535,7 @@
3266
3535
  .px-5 {
3267
3536
  padding-inline: calc(var(--spacing) * 5);
3268
3537
  }
3269
- .\!py-0 {
3538
+ .py-0\! {
3270
3539
  padding-block: calc(var(--spacing) * 0) !important;
3271
3540
  }
3272
3541
  .py-1 {
@@ -3395,7 +3664,10 @@
3395
3664
  color: var(--color-base-content);
3396
3665
  }
3397
3666
  .text-base-content\/50 {
3398
- color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
3667
+ color: var(--color-base-content);
3668
+ @supports (color: color-mix(in lab, red, red)) {
3669
+ color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
3670
+ }
3399
3671
  }
3400
3672
  .text-blue-500 {
3401
3673
  color: var(--color-blue-500);
@@ -3500,7 +3772,7 @@
3500
3772
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3501
3773
  }
3502
3774
  .ring {
3503
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
3775
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3504
3776
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3505
3777
  }
3506
3778
  .ring-blue-500 {
@@ -3530,7 +3802,7 @@
3530
3802
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
3531
3803
  }
3532
3804
  .transition {
3533
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
3805
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3534
3806
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3535
3807
  transition-duration: var(--tw-duration, var(--default-transition-duration));
3536
3808
  }
@@ -3548,22 +3820,6 @@
3548
3820
  --btn-noise: none;
3549
3821
  }
3550
3822
  }
3551
- .mask-half-1 {
3552
- mask-size: 200%;
3553
- mask-position: left;
3554
- mask-position: left;
3555
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
3556
- mask-position: right;
3557
- }
3558
- }
3559
- .mask-half-2 {
3560
- mask-size: 200%;
3561
- mask-position: right;
3562
- mask-position: right;
3563
- &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
3564
- mask-position: left;
3565
- }
3566
- }
3567
3823
  .btn-accent {
3568
3824
  --btn-color: var(--color-accent);
3569
3825
  --btn-fg: var(--color-accent-content);
@@ -3636,57 +3892,6 @@
3636
3892
  --input-color: var(--color-warning);
3637
3893
  }
3638
3894
  }
3639
- .loading-bars {
3640
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");
3641
- }
3642
- .loading-dots {
3643
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");
3644
- }
3645
- .loading-infinity {
3646
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");
3647
- }
3648
- .loading-ring {
3649
- mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3650
- }
3651
- .loading-spinner {
3652
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
3653
- }
3654
- .mask-decagon {
3655
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 58.779 19.098 36.327 50v61.804l-36.327 50L96 200l-58.779-19.098-36.327-50V69.098l36.327-50z' fill-rule='evenodd'/%3e%3c/svg%3e");
3656
- }
3657
- .mask-diamond {
3658
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m100 0 100 100-100 100L0 100z' fill-rule='evenodd'/%3e%3c/svg%3e");
3659
- }
3660
- .mask-heart {
3661
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3662
- }
3663
- .mask-hexagon {
3664
- mask-image: url("data:image/svg+xml,%3csvg width='182' height='201' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0L14.51 161.62C6.151 157.44.3 145.737.3 136.54V65.486Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3665
- }
3666
- .mask-hexagon-2 {
3667
- mask-image: url("data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");
3668
- }
3669
- .mask-pentagon {
3670
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='181' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 0 95.106 69.098-36.327 111.804H37.22L.894 69.098z' fill-rule='evenodd'/%3e%3c/svg%3e");
3671
- }
3672
- .mask-star {
3673
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");
3674
- }
3675
- .mask-star-2 {
3676
- mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
3677
- }
3678
- .mask-triangle {
3679
- mask-image: url("data:image/svg+xml,%3csvg width='174' height='149' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 148.476-86.603.185L43.86 74.423 87 0l43.14 74.423 43.463 74.238z' fill-rule='evenodd'/%3e%3c/svg%3e");
3680
- }
3681
- .mask-triangle-2 {
3682
- mask-image: url("data:image/svg+xml,%3csvg width='174' height='150' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m87 .738 86.603-.184-43.463 74.238L87 149.214 43.86 74.792.397.554z' fill-rule='evenodd'/%3e%3c/svg%3e");
3683
- }
3684
- .mask-triangle-3 {
3685
- mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m149.369 87.107.185 86.603-74.239-43.463L.893 87.107l74.422-43.14L149.554.505z' fill-rule='evenodd'/%3e%3c/svg%3e");
3686
- }
3687
- .mask-triangle-4 {
3688
- mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3689
- }
3690
3895
  .group-hover\:text-primary {
3691
3896
  &:is(:where(.group):hover *) {
3692
3897
  @media (hover: hover) {
@@ -3718,7 +3923,7 @@
3718
3923
  height: calc(var(--spacing) * 10);
3719
3924
  }
3720
3925
  }
3721
- .after\:w-\[1px\] {
3926
+ .after\:w-px {
3722
3927
  &::after {
3723
3928
  content: var(--tw-content);
3724
3929
  width: 1px;
@@ -3762,24 +3967,55 @@
3762
3967
  }
3763
3968
  }
3764
3969
  }
3765
- .hover\:bg-base-200 {
3970
+ .open\:-m-0\.5 {
3971
+ &:is([open], :popover-open, :open) {
3972
+ margin: calc(var(--spacing) * -0.5);
3973
+ }
3974
+ }
3975
+ .open\:rounded {
3976
+ &:is([open], :popover-open, :open) {
3977
+ border-radius: 0.25rem;
3978
+ }
3979
+ }
3980
+ .open\:bg-primary {
3981
+ &:is([open], :popover-open, :open) {
3982
+ background-color: var(--color-primary);
3983
+ }
3984
+ }
3985
+ .open\:p-1 {
3986
+ &:is([open], :popover-open, :open) {
3987
+ padding: calc(var(--spacing) * 1);
3988
+ }
3989
+ }
3990
+ .hover\:-mb-0\.5 {
3766
3991
  &:hover {
3767
3992
  @media (hover: hover) {
3768
- background-color: var(--color-base-200);
3993
+ margin-bottom: calc(var(--spacing) * -0.5);
3994
+ }
3995
+ }
3996
+ }
3997
+ .hover\:border-b-2 {
3998
+ &:hover {
3999
+ @media (hover: hover) {
4000
+ border-bottom-style: var(--tw-border-style);
4001
+ border-bottom-width: 2px;
3769
4002
  }
3770
4003
  }
3771
4004
  }
3772
- .hover\:bg-primary\/10 {
4005
+ .hover\:bg-base-200 {
3773
4006
  &:hover {
3774
4007
  @media (hover: hover) {
3775
- background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
4008
+ background-color: var(--color-base-200);
3776
4009
  }
3777
4010
  }
3778
4011
  }
3779
4012
  .hover\:text-base-content\/80 {
3780
4013
  &:hover {
3781
4014
  @media (hover: hover) {
3782
- color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
4015
+ color: var(--color-base-content);
4016
+ @supports (color: color-mix(in lab, red, red)) {
4017
+ color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
4018
+ }
3783
4019
  }
3784
4020
  }
3785
4021
  }
@@ -3789,6 +4025,104 @@
3789
4025
  outline-style: none;
3790
4026
  }
3791
4027
  }
4028
+ .max-md\:input {
4029
+ @media (width < 48rem) {
4030
+ cursor: text;
4031
+ border: var(--border) solid #0000;
4032
+ position: relative;
4033
+ display: inline-flex;
4034
+ flex-shrink: 1;
4035
+ appearance: none;
4036
+ align-items: center;
4037
+ gap: calc(0.25rem * 2);
4038
+ background-color: var(--color-base-100);
4039
+ padding-inline: calc(0.25rem * 3);
4040
+ vertical-align: middle;
4041
+ white-space: nowrap;
4042
+ width: clamp(3rem, 20rem, 100%);
4043
+ height: var(--size);
4044
+ font-size: 0.875rem;
4045
+ border-start-start-radius: var(--join-ss, var(--radius-field));
4046
+ border-start-end-radius: var(--join-se, var(--radius-field));
4047
+ border-end-start-radius: var(--join-es, var(--radius-field));
4048
+ border-end-end-radius: var(--join-ee, var(--radius-field));
4049
+ border-color: var(--input-color);
4050
+ box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
4051
+ @supports (color: color-mix(in lab, red, red)) {
4052
+ box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
4053
+ }
4054
+ --size: calc(var(--size-field, 0.25rem) * 10);
4055
+ --input-color: var(--color-base-content);
4056
+ @supports (color: color-mix(in lab, red, red)) {
4057
+ --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
4058
+ }
4059
+ &:where(input) {
4060
+ display: inline-flex;
4061
+ }
4062
+ :where(input) {
4063
+ display: inline-flex;
4064
+ height: 100%;
4065
+ width: 100%;
4066
+ appearance: none;
4067
+ background-color: transparent;
4068
+ border: none;
4069
+ &:focus, &:focus-within {
4070
+ outline-style: none;
4071
+ @media (forced-colors: active) {
4072
+ outline: 2px solid transparent;
4073
+ outline-offset: 2px;
4074
+ }
4075
+ }
4076
+ }
4077
+ &:focus, &:focus-within {
4078
+ --input-color: var(--color-base-content);
4079
+ box-shadow: 0 1px var(--input-color);
4080
+ @supports (color: color-mix(in lab, red, red)) {
4081
+ box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
4082
+ }
4083
+ outline: 2px solid var(--input-color);
4084
+ outline-offset: 2px;
4085
+ isolation: isolate;
4086
+ }
4087
+ &:has(> input[disabled]), &:is(:disabled, [disabled]) {
4088
+ cursor: not-allowed;
4089
+ border-color: var(--color-base-200);
4090
+ background-color: var(--color-base-200);
4091
+ color: var(--color-base-content);
4092
+ @supports (color: color-mix(in lab, red, red)) {
4093
+ color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
4094
+ }
4095
+ &::placeholder {
4096
+ color: var(--color-base-content);
4097
+ @supports (color: color-mix(in lab, red, red)) {
4098
+ color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
4099
+ }
4100
+ }
4101
+ box-shadow: none;
4102
+ }
4103
+ &:has(> input[disabled]) > input[disabled] {
4104
+ cursor: not-allowed;
4105
+ }
4106
+ &::-webkit-date-and-time-value {
4107
+ text-align: inherit;
4108
+ }
4109
+ &[type="number"] {
4110
+ &::-webkit-inner-spin-button {
4111
+ margin-block: calc(0.25rem * -3);
4112
+ margin-inline-end: calc(0.25rem * -3);
4113
+ }
4114
+ }
4115
+ &::-webkit-calendar-picker-indicator {
4116
+ position: absolute;
4117
+ inset-inline-end: 0.75em;
4118
+ }
4119
+ }
4120
+ }
4121
+ .max-md\:max-w-xs {
4122
+ @media (width < 48rem) {
4123
+ max-width: var(--container-xs);
4124
+ }
4125
+ }
3792
4126
  .sm\:grid {
3793
4127
  @media (width >= 40rem) {
3794
4128
  display: grid;
@@ -3807,11 +4141,6 @@
3807
4141
  }
3808
4142
  }
3809
4143
  }
3810
- .md\:mt-2 {
3811
- @media (width >= 48rem) {
3812
- margin-top: calc(var(--spacing) * 2);
3813
- }
3814
- }
3815
4144
  .md\:block {
3816
4145
  @media (width >= 48rem) {
3817
4146
  display: block;
@@ -3847,17 +4176,9 @@
3847
4176
  padding-inline: calc(var(--spacing) * 10);
3848
4177
  }
3849
4178
  }
3850
- .md\:btn-sm {
3851
- @media (width >= 48rem) {
3852
- font-size: 0.75rem;
3853
- --btn-p: 0.75rem;
3854
- --size: calc(var(--size-field, 0.25rem) * 8);
3855
- }
3856
- }
3857
4179
  .md\:after\:content-\[\'\'\] {
3858
4180
  @media (width >= 48rem) {
3859
4181
  &::after {
3860
- content: var(--tw-content);
3861
4182
  --tw-content: '';
3862
4183
  content: var(--tw-content);
3863
4184
  }
@@ -3892,14 +4213,9 @@
3892
4213
  }
3893
4214
  }
3894
4215
  }
3895
- .lg\:w-80 {
4216
+ .lg\:w-full {
3896
4217
  @media (width >= 64rem) {
3897
- width: calc(var(--spacing) * 80);
3898
- }
3899
- }
3900
- .lg\:w-\[360px\] {
3901
- @media (width >= 64rem) {
3902
- width: 360px;
4218
+ width: 100%;
3903
4219
  }
3904
4220
  }
3905
4221
  .lg\:text-4xl {
@@ -4080,7 +4396,10 @@
4080
4396
  ) {
4081
4397
  scrollbar-gutter: stable;
4082
4398
  background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
4083
- --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
4399
+ --root-bg: var(--color-base-100);
4400
+ @supports (color: color-mix(in lab, red, red)) {
4401
+ --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
4402
+ }
4084
4403
  }
4085
4404
  }
4086
4405
  @layer base {
@@ -4097,7 +4416,10 @@
4097
4416
  }
4098
4417
  @layer base {
4099
4418
  :root {
4100
- scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
4419
+ scrollbar-color: currentColor #0000;
4420
+ @supports (color: color-mix(in lab, red, red)) {
4421
+ scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
4422
+ }
4101
4423
  }
4102
4424
  }
4103
4425
  @keyframes dropdown {
@@ -4193,27 +4515,22 @@
4193
4515
  @property --tw-rotate-x {
4194
4516
  syntax: "*";
4195
4517
  inherits: false;
4196
- initial-value: rotateX(0);
4197
4518
  }
4198
4519
  @property --tw-rotate-y {
4199
4520
  syntax: "*";
4200
4521
  inherits: false;
4201
- initial-value: rotateY(0);
4202
4522
  }
4203
4523
  @property --tw-rotate-z {
4204
4524
  syntax: "*";
4205
4525
  inherits: false;
4206
- initial-value: rotateZ(0);
4207
4526
  }
4208
4527
  @property --tw-skew-x {
4209
4528
  syntax: "*";
4210
4529
  inherits: false;
4211
- initial-value: skewX(0);
4212
4530
  }
4213
4531
  @property --tw-skew-y {
4214
4532
  syntax: "*";
4215
4533
  inherits: false;
4216
- initial-value: skewY(0);
4217
4534
  }
4218
4535
  @property --tw-border-style {
4219
4536
  syntax: "*";
@@ -4233,6 +4550,11 @@
4233
4550
  syntax: "*";
4234
4551
  inherits: false;
4235
4552
  }
4553
+ @property --tw-shadow-alpha {
4554
+ syntax: "<percentage>";
4555
+ inherits: false;
4556
+ initial-value: 100%;
4557
+ }
4236
4558
  @property --tw-inset-shadow {
4237
4559
  syntax: "*";
4238
4560
  inherits: false;
@@ -4242,6 +4564,11 @@
4242
4564
  syntax: "*";
4243
4565
  inherits: false;
4244
4566
  }
4567
+ @property --tw-inset-shadow-alpha {
4568
+ syntax: "<percentage>";
4569
+ inherits: false;
4570
+ initial-value: 100%;
4571
+ }
4245
4572
  @property --tw-ring-color {
4246
4573
  syntax: "*";
4247
4574
  inherits: false;
@@ -4324,8 +4651,66 @@
4324
4651
  syntax: "*";
4325
4652
  inherits: false;
4326
4653
  }
4654
+ @property --tw-drop-shadow-color {
4655
+ syntax: "*";
4656
+ inherits: false;
4657
+ }
4658
+ @property --tw-drop-shadow-alpha {
4659
+ syntax: "<percentage>";
4660
+ inherits: false;
4661
+ initial-value: 100%;
4662
+ }
4663
+ @property --tw-drop-shadow-size {
4664
+ syntax: "*";
4665
+ inherits: false;
4666
+ }
4327
4667
  @property --tw-content {
4328
4668
  syntax: "*";
4329
4669
  initial-value: "";
4330
4670
  inherits: false;
4331
4671
  }
4672
+ @layer properties {
4673
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
4674
+ *, ::before, ::after, ::backdrop {
4675
+ --tw-translate-x: 0;
4676
+ --tw-translate-y: 0;
4677
+ --tw-translate-z: 0;
4678
+ --tw-rotate-x: initial;
4679
+ --tw-rotate-y: initial;
4680
+ --tw-rotate-z: initial;
4681
+ --tw-skew-x: initial;
4682
+ --tw-skew-y: initial;
4683
+ --tw-border-style: solid;
4684
+ --tw-font-weight: initial;
4685
+ --tw-shadow: 0 0 #0000;
4686
+ --tw-shadow-color: initial;
4687
+ --tw-shadow-alpha: 100%;
4688
+ --tw-inset-shadow: 0 0 #0000;
4689
+ --tw-inset-shadow-color: initial;
4690
+ --tw-inset-shadow-alpha: 100%;
4691
+ --tw-ring-color: initial;
4692
+ --tw-ring-shadow: 0 0 #0000;
4693
+ --tw-inset-ring-color: initial;
4694
+ --tw-inset-ring-shadow: 0 0 #0000;
4695
+ --tw-ring-inset: initial;
4696
+ --tw-ring-offset-width: 0px;
4697
+ --tw-ring-offset-color: #fff;
4698
+ --tw-ring-offset-shadow: 0 0 #0000;
4699
+ --tw-outline-style: solid;
4700
+ --tw-blur: initial;
4701
+ --tw-brightness: initial;
4702
+ --tw-contrast: initial;
4703
+ --tw-grayscale: initial;
4704
+ --tw-hue-rotate: initial;
4705
+ --tw-invert: initial;
4706
+ --tw-opacity: initial;
4707
+ --tw-saturate: initial;
4708
+ --tw-sepia: initial;
4709
+ --tw-drop-shadow: initial;
4710
+ --tw-drop-shadow-color: initial;
4711
+ --tw-drop-shadow-alpha: 100%;
4712
+ --tw-drop-shadow-size: initial;
4713
+ --tw-content: "";
4714
+ }
4715
+ }
4716
+ }