daisyui 3.9.4 → 4.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -135
- package/dist/base.js +1 -1
- package/dist/full.css +21018 -26062
- package/dist/styled.css +1063 -1056
- package/dist/styled.js +1 -1
- package/dist/themes.css +620 -744
- package/dist/unstyled.css +188 -113
- package/dist/unstyled.js +1 -1
- package/dist/utilities-styled.js +1 -1
- package/dist/utilities-unstyled.js +1 -1
- package/dist/utilities.js +1 -1
- package/package.json +7 -9
- package/src/index.js +59 -74
- package/src/lib/createPlugin.js +21 -0
- package/src/lib/responsiveRegex.js +2 -2
- package/src/lib/utility-classes.js +7 -0
- package/src/theming/colorNames.js +0 -4
- package/src/theming/functions.js +67 -93
- package/src/theming/index.js +23 -25
- package/src/theming/themes.js +6 -15
- package/dist/styled.rtl.js +0 -1
- package/dist/unstyled.rtl.js +0 -1
package/dist/styled.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
grid-auto-flow: column;
|
|
14
14
|
grid-template-columns: auto minmax(auto,1fr);
|
|
15
15
|
justify-items: start;
|
|
16
|
-
text-align:
|
|
16
|
+
text-align: start
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
.artboard {
|
|
@@ -109,66 +109,52 @@
|
|
|
109
109
|
flex-wrap: wrap;
|
|
110
110
|
align-items: center;
|
|
111
111
|
justify-content: center;
|
|
112
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
112
113
|
border-color: transparent;
|
|
113
114
|
text-align: center;
|
|
114
115
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
115
116
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
116
117
|
transition-duration: 200ms;
|
|
117
118
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
118
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
119
119
|
height: 3rem;
|
|
120
|
+
min-height: 3rem;
|
|
120
121
|
padding-left: 1rem;
|
|
121
122
|
padding-right: 1rem;
|
|
122
|
-
min-height: 3rem;
|
|
123
123
|
font-size: 0.875rem;
|
|
124
|
-
line-height: 1em
|
|
124
|
+
line-height: 1em
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
/* disabled */
|
|
128
128
|
.btn-disabled,
|
|
129
129
|
.btn[disabled],
|
|
130
130
|
.btn:disabled {
|
|
131
|
-
pointer-events: none
|
|
131
|
+
pointer-events: none
|
|
132
132
|
}
|
|
133
133
|
/* shapes */
|
|
134
134
|
.btn-square {
|
|
135
135
|
height: 3rem;
|
|
136
136
|
width: 3rem;
|
|
137
|
-
padding: 0px
|
|
137
|
+
padding: 0px
|
|
138
138
|
}
|
|
139
139
|
.btn-circle {
|
|
140
140
|
height: 3rem;
|
|
141
141
|
width: 3rem;
|
|
142
142
|
border-radius: 9999px;
|
|
143
|
-
padding: 0px
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/* group */
|
|
147
|
-
|
|
148
|
-
.btn-group {
|
|
149
|
-
display: inline-flex;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.btn-group > input[type="radio"].btn {
|
|
153
|
-
appearance: none;
|
|
143
|
+
padding: 0px
|
|
154
144
|
}
|
|
155
145
|
|
|
156
|
-
.btn-group > input[type="radio"].btn:before {
|
|
157
|
-
content: attr(data-title);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
146
|
/* radio input and checkbox as button */
|
|
161
147
|
|
|
162
|
-
.btn:is(input[type="checkbox"]),
|
|
163
|
-
.btn:is(input[type="radio"]) {
|
|
148
|
+
:where(.btn:is(input[type="checkbox"])),
|
|
149
|
+
:where(.btn:is(input[type="radio"])) {
|
|
164
150
|
width: auto;
|
|
165
|
-
appearance: none
|
|
151
|
+
appearance: none
|
|
166
152
|
}
|
|
167
153
|
|
|
168
154
|
.btn:is(input[type="checkbox"]):after,
|
|
169
155
|
.btn:is(input[type="radio"]):after {
|
|
170
156
|
--tw-content: attr(aria-label);
|
|
171
|
-
content: var(--tw-content)
|
|
157
|
+
content: var(--tw-content)
|
|
172
158
|
}
|
|
173
159
|
.card {
|
|
174
160
|
position: relative;
|
|
@@ -392,6 +378,66 @@
|
|
|
392
378
|
white-space: pre;
|
|
393
379
|
top: calc(var(--value) * -1em);
|
|
394
380
|
}
|
|
381
|
+
.diff {
|
|
382
|
+
position: relative;
|
|
383
|
+
display: grid;
|
|
384
|
+
width: 100%;
|
|
385
|
+
overflow: hidden;
|
|
386
|
+
container-type: inline-size;
|
|
387
|
+
grid-template-columns: auto 1fr
|
|
388
|
+
}
|
|
389
|
+
.diff-resizer {
|
|
390
|
+
position: relative;
|
|
391
|
+
top: 50%;
|
|
392
|
+
z-index: 1;
|
|
393
|
+
height: 3rem;
|
|
394
|
+
width: 25rem;
|
|
395
|
+
min-width: 1rem;
|
|
396
|
+
max-width: calc(100cqi - 1rem);
|
|
397
|
+
resize: horizontal;
|
|
398
|
+
overflow: hidden;
|
|
399
|
+
opacity: 0;
|
|
400
|
+
transform-origin: 100% 100%;
|
|
401
|
+
scale: 4;
|
|
402
|
+
translate: 1.5rem -1.5rem;
|
|
403
|
+
clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))
|
|
404
|
+
}
|
|
405
|
+
.diff-resizer,
|
|
406
|
+
.diff-item-1,
|
|
407
|
+
.diff-item-2 {
|
|
408
|
+
position: relative;
|
|
409
|
+
grid-column-start: 1;
|
|
410
|
+
grid-row-start: 1
|
|
411
|
+
}
|
|
412
|
+
.diff-item-1:after {
|
|
413
|
+
pointer-events: none;
|
|
414
|
+
position: absolute;
|
|
415
|
+
bottom: 0px;
|
|
416
|
+
right: 1px;
|
|
417
|
+
top: 50%;
|
|
418
|
+
z-index: 1;
|
|
419
|
+
height: 2rem;
|
|
420
|
+
width: 2rem;
|
|
421
|
+
--tw-content: '';
|
|
422
|
+
content: var(--tw-content);
|
|
423
|
+
translate: 50% -50%
|
|
424
|
+
}
|
|
425
|
+
.diff-item-2 {
|
|
426
|
+
overflow: hidden
|
|
427
|
+
}
|
|
428
|
+
.diff-item-1 > *,
|
|
429
|
+
.diff-item-2 > * {
|
|
430
|
+
pointer-events: none;
|
|
431
|
+
position: absolute;
|
|
432
|
+
bottom: 0px;
|
|
433
|
+
left: 0px;
|
|
434
|
+
top: 0px;
|
|
435
|
+
height: 100%;
|
|
436
|
+
width: 100cqi;
|
|
437
|
+
max-width: none;
|
|
438
|
+
object-fit: cover;
|
|
439
|
+
object-position: center
|
|
440
|
+
}
|
|
395
441
|
.divider {
|
|
396
442
|
display: flex;
|
|
397
443
|
flex-direction: row;
|
|
@@ -417,7 +463,7 @@
|
|
|
417
463
|
.drawer-side {
|
|
418
464
|
pointer-events: none;
|
|
419
465
|
position: fixed;
|
|
420
|
-
|
|
466
|
+
inset-inline-start: 0px;
|
|
421
467
|
top: 0px;
|
|
422
468
|
grid-column-start: 1;
|
|
423
469
|
grid-row-start: 1;
|
|
@@ -453,7 +499,7 @@
|
|
|
453
499
|
transform: translateX(-100%);
|
|
454
500
|
}
|
|
455
501
|
[dir="rtl"] .drawer-side > *:not(.drawer-overlay) {
|
|
456
|
-
transform: translateX(
|
|
502
|
+
transform: translateX(100%);
|
|
457
503
|
}
|
|
458
504
|
.drawer-toggle {
|
|
459
505
|
position: fixed;
|
|
@@ -482,6 +528,9 @@
|
|
|
482
528
|
.drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
|
|
483
529
|
transform: translateX(100%);
|
|
484
530
|
}
|
|
531
|
+
[dir="rtl"] .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
|
|
532
|
+
transform: translateX(-100%);
|
|
533
|
+
}
|
|
485
534
|
.drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
|
|
486
535
|
transform: translateX(0%);
|
|
487
536
|
}
|
|
@@ -501,16 +550,16 @@
|
|
|
501
550
|
opacity: 0
|
|
502
551
|
}
|
|
503
552
|
.dropdown-end .dropdown-content {
|
|
504
|
-
|
|
553
|
+
inset-inline-end: 0px
|
|
505
554
|
}
|
|
506
555
|
.dropdown-left .dropdown-content {
|
|
507
556
|
bottom: auto;
|
|
508
|
-
|
|
557
|
+
inset-inline-end: 100%;
|
|
509
558
|
top: 0px
|
|
510
559
|
}
|
|
511
560
|
.dropdown-right .dropdown-content {
|
|
512
561
|
bottom: auto;
|
|
513
|
-
|
|
562
|
+
inset-inline-start: 100%;
|
|
514
563
|
top: 0px
|
|
515
564
|
}
|
|
516
565
|
.dropdown-bottom .dropdown-content {
|
|
@@ -547,13 +596,13 @@
|
|
|
547
596
|
.file-input {
|
|
548
597
|
height: 3rem;
|
|
549
598
|
flex-shrink: 1;
|
|
550
|
-
padding-
|
|
599
|
+
padding-inline-end: 1rem;
|
|
551
600
|
font-size: 0.875rem;
|
|
552
601
|
line-height: 1.25rem;
|
|
553
602
|
line-height: 2
|
|
554
603
|
}
|
|
555
604
|
.file-input::file-selector-button {
|
|
556
|
-
margin-
|
|
605
|
+
margin-inline-end: 1rem;
|
|
557
606
|
display: inline-flex;
|
|
558
607
|
height: 100%;
|
|
559
608
|
flex-shrink: 0;
|
|
@@ -649,76 +698,8 @@
|
|
|
649
698
|
padding-right: 1rem;
|
|
650
699
|
font-size: 0.875rem;
|
|
651
700
|
line-height: 1.25rem;
|
|
652
|
-
line-height: 2
|
|
653
|
-
}
|
|
654
|
-
.input-group {
|
|
655
|
-
display: flex;
|
|
656
|
-
width: 100%;
|
|
657
|
-
align-items: stretch;
|
|
658
|
-
}
|
|
659
|
-
.input-group > .input {
|
|
660
|
-
isolation: isolate;
|
|
661
|
-
}
|
|
662
|
-
.input-group > *,
|
|
663
|
-
.input-group > .input,
|
|
664
|
-
.input-group > .textarea,
|
|
665
|
-
.input-group > .select {
|
|
666
|
-
border-radius: 0px;
|
|
667
|
-
}
|
|
668
|
-
.input-group-md {
|
|
669
|
-
font-size: 0.875rem;
|
|
670
|
-
line-height: 1.25rem;
|
|
671
|
-
line-height: 2;
|
|
672
|
-
}
|
|
673
|
-
.input-group-lg {
|
|
674
|
-
font-size: 1.125rem;
|
|
675
|
-
line-height: 1.75rem;
|
|
676
|
-
line-height: 2;
|
|
677
|
-
}
|
|
678
|
-
.input-group-sm {
|
|
679
|
-
font-size: 0.875rem;
|
|
680
|
-
line-height: 2rem;
|
|
681
|
-
}
|
|
682
|
-
.input-group-xs {
|
|
683
|
-
font-size: 0.75rem;
|
|
684
|
-
line-height: 1rem;
|
|
685
|
-
line-height: 1.625;
|
|
686
|
-
}
|
|
687
|
-
.input-group :where(span) {
|
|
688
|
-
display: flex;
|
|
689
|
-
align-items: center;
|
|
690
|
-
--tw-bg-opacity: 1;
|
|
691
|
-
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
|
|
692
|
-
padding-left: 1rem;
|
|
693
|
-
padding-right: 1rem;
|
|
694
|
-
}
|
|
695
|
-
.input-group > :first-child {
|
|
696
|
-
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
|
697
|
-
border-top-right-radius: 0;
|
|
698
|
-
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
|
699
|
-
border-bottom-right-radius: 0;
|
|
700
|
-
}
|
|
701
|
-
.input-group > :last-child {
|
|
702
|
-
border-top-left-radius: 0;
|
|
703
|
-
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
|
704
|
-
border-bottom-left-radius: 0;
|
|
705
|
-
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
|
706
|
-
}
|
|
707
|
-
.input-group-vertical {
|
|
708
|
-
flex-direction: column;
|
|
701
|
+
line-height: 2
|
|
709
702
|
}
|
|
710
|
-
.input-group-vertical :first-child {
|
|
711
|
-
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
|
712
|
-
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
|
713
|
-
border-bottom-left-radius: 0;
|
|
714
|
-
border-bottom-right-radius: 0;
|
|
715
|
-
}
|
|
716
|
-
.input-group-vertical :last-child {
|
|
717
|
-
border-top-left-radius: 0;
|
|
718
|
-
border-top-right-radius: 0;
|
|
719
|
-
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
|
720
|
-
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
|
721
|
-
}
|
|
722
703
|
.join {
|
|
723
704
|
display: inline-flex;
|
|
724
705
|
align-items: stretch;
|
|
@@ -799,10 +780,16 @@
|
|
|
799
780
|
mask-size: 200%;
|
|
800
781
|
mask-position: left;
|
|
801
782
|
}
|
|
783
|
+
:is([dir="rtl"] .mask-half-1) {
|
|
784
|
+
mask-position: right;
|
|
785
|
+
}
|
|
802
786
|
.mask-half-2 {
|
|
803
787
|
mask-size: 200%;
|
|
804
788
|
mask-position: right;
|
|
805
789
|
}
|
|
790
|
+
:is([dir="rtl"] .mask-half-2) {
|
|
791
|
+
mask-position: left;
|
|
792
|
+
}
|
|
806
793
|
.menu {
|
|
807
794
|
display: flex;
|
|
808
795
|
flex-direction: column;
|
|
@@ -1019,12 +1006,12 @@
|
|
|
1019
1006
|
user-select: none;
|
|
1020
1007
|
appearance: none;
|
|
1021
1008
|
height: 3rem;
|
|
1009
|
+
min-height: 3rem;
|
|
1022
1010
|
padding-left: 1rem;
|
|
1023
1011
|
padding-right: 2.5rem;
|
|
1024
1012
|
font-size: 0.875rem;
|
|
1025
1013
|
line-height: 1.25rem;
|
|
1026
|
-
line-height: 2
|
|
1027
|
-
min-height: 3rem
|
|
1014
|
+
line-height: 2
|
|
1028
1015
|
}
|
|
1029
1016
|
|
|
1030
1017
|
/* disabled */
|
|
@@ -1149,24 +1136,54 @@
|
|
|
1149
1136
|
opacity: 1
|
|
1150
1137
|
}
|
|
1151
1138
|
.tabs {
|
|
1152
|
-
display:
|
|
1153
|
-
|
|
1154
|
-
|
|
1139
|
+
display: grid;
|
|
1140
|
+
align-items: flex-end;
|
|
1141
|
+
}
|
|
1142
|
+
.tabs:has(.tab-content[class^="rounded-"]) .tab-lifted:first-child:not(.tab-active),
|
|
1143
|
+
.tabs:has(.tab-content[class*=" rounded-"]) .tab-lifted:first-child:not(.tab-active) {
|
|
1144
|
+
border-bottom-color: transparent;
|
|
1155
1145
|
}
|
|
1156
1146
|
.tab {
|
|
1157
1147
|
position: relative;
|
|
1148
|
+
grid-row-start: 1;
|
|
1158
1149
|
display: inline-flex;
|
|
1150
|
+
height: 2rem;
|
|
1159
1151
|
cursor: pointer;
|
|
1160
1152
|
user-select: none;
|
|
1153
|
+
appearance: none;
|
|
1161
1154
|
flex-wrap: wrap;
|
|
1162
1155
|
align-items: center;
|
|
1163
1156
|
justify-content: center;
|
|
1164
1157
|
text-align: center;
|
|
1165
|
-
height: 2rem;
|
|
1166
1158
|
font-size: 0.875rem;
|
|
1167
1159
|
line-height: 1.25rem;
|
|
1168
1160
|
line-height: 2;
|
|
1169
|
-
--tab-padding: 1rem
|
|
1161
|
+
--tab-padding: 1rem;
|
|
1162
|
+
}
|
|
1163
|
+
.tab:is(input[type="radio"]):after {
|
|
1164
|
+
--tw-content: attr(aria-label);
|
|
1165
|
+
content: var(--tw-content);
|
|
1166
|
+
}
|
|
1167
|
+
.tab:not(input):empty {
|
|
1168
|
+
cursor: default;
|
|
1169
|
+
grid-column-start: span 9999;
|
|
1170
|
+
}
|
|
1171
|
+
.tab-content {
|
|
1172
|
+
grid-column: 1 / -1;
|
|
1173
|
+
grid-column-end: span 9999;
|
|
1174
|
+
grid-row-start: 2;
|
|
1175
|
+
margin-top: calc(var(--tab-border) * -1);
|
|
1176
|
+
display: none;
|
|
1177
|
+
border-color: transparent;
|
|
1178
|
+
border-width: var(--tab-border, 0);
|
|
1179
|
+
}
|
|
1180
|
+
:checked + .tab-content:nth-child(2),
|
|
1181
|
+
.tab-active + .tab-content:nth-child(2) {
|
|
1182
|
+
border-start-start-radius: 0px;
|
|
1183
|
+
}
|
|
1184
|
+
input.tab:checked + .tab-content,
|
|
1185
|
+
.tab-active + .tab-content {
|
|
1186
|
+
display: block;
|
|
1170
1187
|
}
|
|
1171
1188
|
.table {
|
|
1172
1189
|
position: relative;
|
|
@@ -1177,29 +1194,29 @@
|
|
|
1177
1194
|
top: 0px;
|
|
1178
1195
|
z-index: 1;
|
|
1179
1196
|
--tw-bg-opacity: 1;
|
|
1180
|
-
background-color:
|
|
1197
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1181
1198
|
}
|
|
1182
1199
|
.table :where(.table-pin-rows tfoot tr) {
|
|
1183
1200
|
position: sticky;
|
|
1184
1201
|
bottom: 0px;
|
|
1185
1202
|
z-index: 1;
|
|
1186
1203
|
--tw-bg-opacity: 1;
|
|
1187
|
-
background-color:
|
|
1204
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1188
1205
|
}
|
|
1189
1206
|
.table :where(.table-pin-cols tr th) {
|
|
1190
1207
|
position: sticky;
|
|
1191
1208
|
left: 0px;
|
|
1192
1209
|
right: 0px;
|
|
1193
1210
|
--tw-bg-opacity: 1;
|
|
1194
|
-
background-color:
|
|
1211
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1195
1212
|
}
|
|
1196
1213
|
.table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
|
|
1197
1214
|
--tw-bg-opacity: 1;
|
|
1198
|
-
background-color:
|
|
1215
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity))
|
|
1199
1216
|
}
|
|
1200
1217
|
.textarea {
|
|
1201
|
-
flex-shrink: 1;
|
|
1202
1218
|
min-height: 3rem;
|
|
1219
|
+
flex-shrink: 1;
|
|
1203
1220
|
padding-left: 1rem;
|
|
1204
1221
|
padding-right: 1rem;
|
|
1205
1222
|
padding-top: 0.5rem;
|
|
@@ -1208,6 +1225,64 @@
|
|
|
1208
1225
|
line-height: 1.25rem;
|
|
1209
1226
|
line-height: 2
|
|
1210
1227
|
}
|
|
1228
|
+
.timeline {
|
|
1229
|
+
position: relative;
|
|
1230
|
+
display: flex;
|
|
1231
|
+
}
|
|
1232
|
+
:where(.timeline > li) {
|
|
1233
|
+
position: relative;
|
|
1234
|
+
display: grid;
|
|
1235
|
+
align-items: center;
|
|
1236
|
+
grid-template-rows: var(--timeline-row-start, 1fr) auto var(--timeline-row-end, 1fr);
|
|
1237
|
+
grid-template-columns: var(--timeline-col-start, 1fr) auto var(--timeline-col-end, 1fr);
|
|
1238
|
+
}
|
|
1239
|
+
:where(.timeline:not(:has(.timeline-start)) > li) {
|
|
1240
|
+
--timeline-row-start: min-content;
|
|
1241
|
+
}
|
|
1242
|
+
:where(.timeline:not(:has(.timeline-end)) > li) {
|
|
1243
|
+
--timeline-row-end: min-content;
|
|
1244
|
+
}
|
|
1245
|
+
:where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
|
|
1246
|
+
--timeline-row-start: min-content;
|
|
1247
|
+
--timeline-row-end: min-content;
|
|
1248
|
+
}
|
|
1249
|
+
.timeline > li > hr {
|
|
1250
|
+
width: 100%;
|
|
1251
|
+
border-width: 0px;
|
|
1252
|
+
}
|
|
1253
|
+
.timeline-snap-icon > li {
|
|
1254
|
+
--timeline-col-start: 0.5rem;
|
|
1255
|
+
}
|
|
1256
|
+
:where(.timeline > li > hr):first-child {
|
|
1257
|
+
grid-column-start: 1;
|
|
1258
|
+
grid-row-start: 2;
|
|
1259
|
+
}
|
|
1260
|
+
:where(.timeline > li > hr):last-child {
|
|
1261
|
+
grid-column-start: 3;
|
|
1262
|
+
grid-row-start: 2;
|
|
1263
|
+
}
|
|
1264
|
+
.timeline-start {
|
|
1265
|
+
grid-column-start: 1;
|
|
1266
|
+
grid-column-end: 4;
|
|
1267
|
+
grid-row-start: 1;
|
|
1268
|
+
grid-row-end: 2;
|
|
1269
|
+
margin: 0.25rem;
|
|
1270
|
+
align-self: flex-end;
|
|
1271
|
+
justify-self: center;
|
|
1272
|
+
}
|
|
1273
|
+
.timeline-middle {
|
|
1274
|
+
grid-column-start: 2;
|
|
1275
|
+
grid-row-start: 2;
|
|
1276
|
+
}
|
|
1277
|
+
.timeline-end {
|
|
1278
|
+
grid-column-start: 1;
|
|
1279
|
+
grid-column-end: 4;
|
|
1280
|
+
grid-row-start: 3;
|
|
1281
|
+
grid-row-end: 4;
|
|
1282
|
+
margin: 0.25rem;
|
|
1283
|
+
align-self: flex-start;
|
|
1284
|
+
justify-self: center;
|
|
1285
|
+
}
|
|
1211
1286
|
.toast {
|
|
1212
1287
|
position: fixed;
|
|
1213
1288
|
display: flex;
|
|
@@ -1219,47 +1294,47 @@
|
|
|
1219
1294
|
flex-shrink: 0
|
|
1220
1295
|
}
|
|
1221
1296
|
.alert {
|
|
1297
|
+
border-radius: var(--rounded-box, 1rem);
|
|
1222
1298
|
border-width: 1px;
|
|
1223
1299
|
--tw-border-opacity: 1;
|
|
1224
|
-
border-color:
|
|
1300
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1225
1301
|
padding: 1rem;
|
|
1226
1302
|
--tw-text-opacity: 1;
|
|
1227
|
-
color:
|
|
1228
|
-
|
|
1229
|
-
--alert-bg:
|
|
1230
|
-
--alert-bg-mix: hsl(var(--b1));
|
|
1303
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1304
|
+
--alert-bg: oklch(var(--b2));
|
|
1305
|
+
--alert-bg-mix: oklch(var(--b1));
|
|
1231
1306
|
background-color: var(--alert-bg)
|
|
1232
1307
|
}
|
|
1233
1308
|
/* @supports (background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix))) {
|
|
1234
1309
|
background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix));
|
|
1235
1310
|
} */
|
|
1236
1311
|
.alert-info {
|
|
1237
|
-
border-color:
|
|
1312
|
+
border-color: oklch(var(--in) / 0.2);
|
|
1238
1313
|
--tw-text-opacity: 1;
|
|
1239
|
-
color:
|
|
1240
|
-
--alert-bg:
|
|
1241
|
-
--alert-bg-mix:
|
|
1314
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1315
|
+
--alert-bg: oklch(var(--in));
|
|
1316
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1242
1317
|
}
|
|
1243
1318
|
.alert-success {
|
|
1244
|
-
border-color:
|
|
1319
|
+
border-color: oklch(var(--su) / 0.2);
|
|
1245
1320
|
--tw-text-opacity: 1;
|
|
1246
|
-
color:
|
|
1247
|
-
--alert-bg:
|
|
1248
|
-
--alert-bg-mix:
|
|
1321
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1322
|
+
--alert-bg: oklch(var(--su));
|
|
1323
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1249
1324
|
}
|
|
1250
1325
|
.alert-warning {
|
|
1251
|
-
border-color:
|
|
1326
|
+
border-color: oklch(var(--wa) / 0.2);
|
|
1252
1327
|
--tw-text-opacity: 1;
|
|
1253
|
-
color:
|
|
1254
|
-
--alert-bg:
|
|
1255
|
-
--alert-bg-mix:
|
|
1328
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1329
|
+
--alert-bg: oklch(var(--wa));
|
|
1330
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1256
1331
|
}
|
|
1257
1332
|
.alert-error {
|
|
1258
|
-
border-color:
|
|
1333
|
+
border-color: oklch(var(--er) / 0.2);
|
|
1259
1334
|
--tw-text-opacity: 1;
|
|
1260
|
-
color:
|
|
1261
|
-
--alert-bg:
|
|
1262
|
-
--alert-bg-mix:
|
|
1335
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1336
|
+
--alert-bg: oklch(var(--er));
|
|
1337
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1263
1338
|
}
|
|
1264
1339
|
.avatar-group {
|
|
1265
1340
|
display: flex;
|
|
@@ -1270,85 +1345,85 @@
|
|
|
1270
1345
|
border-radius: 9999px;
|
|
1271
1346
|
border-width: 4px;
|
|
1272
1347
|
--tw-border-opacity: 1;
|
|
1273
|
-
border-color:
|
|
1348
|
+
border-color: oklch(var(--b1) / var(--tw-border-opacity))
|
|
1274
1349
|
}
|
|
1275
1350
|
.badge {
|
|
1351
|
+
border-radius: var(--rounded-badge, 1.9rem);
|
|
1276
1352
|
border-width: 1px;
|
|
1277
1353
|
--tw-border-opacity: 1;
|
|
1278
|
-
border-color:
|
|
1354
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1279
1355
|
--tw-bg-opacity: 1;
|
|
1280
|
-
background-color:
|
|
1356
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
1281
1357
|
--tw-text-opacity: 1;
|
|
1282
|
-
color:
|
|
1283
|
-
border-radius: var(--rounded-badge, 1.9rem)
|
|
1358
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
1284
1359
|
}
|
|
1285
1360
|
.badge-neutral {
|
|
1286
1361
|
--tw-border-opacity: 1;
|
|
1287
|
-
border-color:
|
|
1362
|
+
border-color: oklch(var(--n) / var(--tw-border-opacity));
|
|
1288
1363
|
--tw-bg-opacity: 1;
|
|
1289
|
-
background-color:
|
|
1364
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1290
1365
|
--tw-text-opacity: 1;
|
|
1291
|
-
color:
|
|
1366
|
+
color: oklch(var(--nc) / var(--tw-text-opacity))
|
|
1292
1367
|
}
|
|
1293
1368
|
.badge-primary {
|
|
1294
1369
|
--tw-border-opacity: 1;
|
|
1295
|
-
border-color:
|
|
1370
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
1296
1371
|
--tw-bg-opacity: 1;
|
|
1297
|
-
background-color:
|
|
1372
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
1298
1373
|
--tw-text-opacity: 1;
|
|
1299
|
-
color:
|
|
1374
|
+
color: oklch(var(--pc) / var(--tw-text-opacity))
|
|
1300
1375
|
}
|
|
1301
1376
|
.badge-secondary {
|
|
1302
1377
|
--tw-border-opacity: 1;
|
|
1303
|
-
border-color:
|
|
1378
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
1304
1379
|
--tw-bg-opacity: 1;
|
|
1305
|
-
background-color:
|
|
1380
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
1306
1381
|
--tw-text-opacity: 1;
|
|
1307
|
-
color:
|
|
1382
|
+
color: oklch(var(--sc) / var(--tw-text-opacity))
|
|
1308
1383
|
}
|
|
1309
1384
|
.badge-accent {
|
|
1310
1385
|
--tw-border-opacity: 1;
|
|
1311
|
-
border-color:
|
|
1386
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
1312
1387
|
--tw-bg-opacity: 1;
|
|
1313
|
-
background-color:
|
|
1388
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
1314
1389
|
--tw-text-opacity: 1;
|
|
1315
|
-
color:
|
|
1390
|
+
color: oklch(var(--ac) / var(--tw-text-opacity))
|
|
1316
1391
|
}
|
|
1317
1392
|
.badge-info {
|
|
1318
1393
|
border-color: transparent;
|
|
1319
1394
|
--tw-bg-opacity: 1;
|
|
1320
|
-
background-color:
|
|
1395
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1321
1396
|
--tw-text-opacity: 1;
|
|
1322
|
-
color:
|
|
1397
|
+
color: oklch(var(--inc) / var(--tw-text-opacity))
|
|
1323
1398
|
}
|
|
1324
1399
|
.badge-success {
|
|
1325
1400
|
border-color: transparent;
|
|
1326
1401
|
--tw-bg-opacity: 1;
|
|
1327
|
-
background-color:
|
|
1402
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1328
1403
|
--tw-text-opacity: 1;
|
|
1329
|
-
color:
|
|
1404
|
+
color: oklch(var(--suc) / var(--tw-text-opacity))
|
|
1330
1405
|
}
|
|
1331
1406
|
.badge-warning {
|
|
1332
1407
|
border-color: transparent;
|
|
1333
1408
|
--tw-bg-opacity: 1;
|
|
1334
|
-
background-color:
|
|
1409
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1335
1410
|
--tw-text-opacity: 1;
|
|
1336
|
-
color:
|
|
1411
|
+
color: oklch(var(--wac) / var(--tw-text-opacity))
|
|
1337
1412
|
}
|
|
1338
1413
|
.badge-error {
|
|
1339
1414
|
border-color: transparent;
|
|
1340
1415
|
--tw-bg-opacity: 1;
|
|
1341
|
-
background-color:
|
|
1416
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1342
1417
|
--tw-text-opacity: 1;
|
|
1343
|
-
color:
|
|
1418
|
+
color: oklch(var(--erc) / var(--tw-text-opacity))
|
|
1344
1419
|
}
|
|
1345
1420
|
.badge-ghost {
|
|
1346
1421
|
--tw-border-opacity: 1;
|
|
1347
|
-
border-color:
|
|
1422
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1348
1423
|
--tw-bg-opacity: 1;
|
|
1349
|
-
background-color:
|
|
1424
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
1350
1425
|
--tw-text-opacity: 1;
|
|
1351
|
-
color:
|
|
1426
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
1352
1427
|
}
|
|
1353
1428
|
.badge-outline {
|
|
1354
1429
|
border-color: currentColor;
|
|
@@ -1358,40 +1433,40 @@
|
|
|
1358
1433
|
}
|
|
1359
1434
|
.badge-outline.badge-neutral {
|
|
1360
1435
|
--tw-text-opacity: 1;
|
|
1361
|
-
color:
|
|
1436
|
+
color: oklch(var(--n) / var(--tw-text-opacity))
|
|
1362
1437
|
}
|
|
1363
1438
|
.badge-outline.badge-primary {
|
|
1364
1439
|
--tw-text-opacity: 1;
|
|
1365
|
-
color:
|
|
1440
|
+
color: oklch(var(--p) / var(--tw-text-opacity))
|
|
1366
1441
|
}
|
|
1367
1442
|
.badge-outline.badge-secondary {
|
|
1368
1443
|
--tw-text-opacity: 1;
|
|
1369
|
-
color:
|
|
1444
|
+
color: oklch(var(--s) / var(--tw-text-opacity))
|
|
1370
1445
|
}
|
|
1371
1446
|
.badge-outline.badge-accent {
|
|
1372
1447
|
--tw-text-opacity: 1;
|
|
1373
|
-
color:
|
|
1448
|
+
color: oklch(var(--a) / var(--tw-text-opacity))
|
|
1374
1449
|
}
|
|
1375
1450
|
.badge-outline.badge-info {
|
|
1376
1451
|
--tw-text-opacity: 1;
|
|
1377
|
-
color:
|
|
1452
|
+
color: oklch(var(--in) / var(--tw-text-opacity))
|
|
1378
1453
|
}
|
|
1379
1454
|
.badge-outline.badge-success {
|
|
1380
1455
|
--tw-text-opacity: 1;
|
|
1381
|
-
color:
|
|
1456
|
+
color: oklch(var(--su) / var(--tw-text-opacity))
|
|
1382
1457
|
}
|
|
1383
1458
|
.badge-outline.badge-warning {
|
|
1384
1459
|
--tw-text-opacity: 1;
|
|
1385
|
-
color:
|
|
1460
|
+
color: oklch(var(--wa) / var(--tw-text-opacity))
|
|
1386
1461
|
}
|
|
1387
1462
|
.badge-outline.badge-error {
|
|
1388
1463
|
--tw-text-opacity: 1;
|
|
1389
|
-
color:
|
|
1464
|
+
color: oklch(var(--er) / var(--tw-text-opacity))
|
|
1390
1465
|
}
|
|
1391
1466
|
.btm-nav {
|
|
1392
1467
|
height: 4rem;
|
|
1393
1468
|
--tw-bg-opacity: 1;
|
|
1394
|
-
background-color:
|
|
1469
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
1395
1470
|
color: currentColor
|
|
1396
1471
|
}
|
|
1397
1472
|
.btm-nav > * {
|
|
@@ -1404,16 +1479,16 @@
|
|
|
1404
1479
|
.btm-nav > *:where(.active) {
|
|
1405
1480
|
border-top-width: 2px;
|
|
1406
1481
|
--tw-bg-opacity: 1;
|
|
1407
|
-
background-color:
|
|
1482
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1408
1483
|
}
|
|
1409
1484
|
/* disabled */
|
|
1410
1485
|
.btm-nav > *.disabled,
|
|
1411
1486
|
.btm-nav > *[disabled] {
|
|
1412
1487
|
pointer-events: none;
|
|
1413
1488
|
--tw-border-opacity: 0;
|
|
1414
|
-
background-color:
|
|
1489
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1415
1490
|
--tw-bg-opacity: 0.1;
|
|
1416
|
-
color:
|
|
1491
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1417
1492
|
--tw-text-opacity: 0.2
|
|
1418
1493
|
}
|
|
1419
1494
|
@media (hover: hover) {
|
|
@@ -1421,9 +1496,9 @@
|
|
|
1421
1496
|
.btm-nav > *[disabled]:hover {
|
|
1422
1497
|
pointer-events: none;
|
|
1423
1498
|
--tw-border-opacity: 0;
|
|
1424
|
-
background-color:
|
|
1499
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1425
1500
|
--tw-bg-opacity: 0.1;
|
|
1426
|
-
color:
|
|
1501
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1427
1502
|
--tw-text-opacity: 0.2
|
|
1428
1503
|
}
|
|
1429
1504
|
}
|
|
@@ -1460,7 +1535,7 @@
|
|
|
1460
1535
|
|
|
1461
1536
|
[dir="rtl"] .breadcrumbs > ul > li + *:before,
|
|
1462
1537
|
[dir="rtl"] .breadcrumbs > ol > li + *:before {
|
|
1463
|
-
--tw-rotate: -
|
|
1538
|
+
--tw-rotate: -135deg;
|
|
1464
1539
|
}
|
|
1465
1540
|
.btn {
|
|
1466
1541
|
gap: 0.5rem;
|
|
@@ -1477,29 +1552,46 @@
|
|
|
1477
1552
|
}
|
|
1478
1553
|
/* default btn */
|
|
1479
1554
|
.btn {
|
|
1480
|
-
--tw-border-opacity: 1;
|
|
1481
|
-
border-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
1482
|
-
--tw-bg-opacity: 1;
|
|
1483
|
-
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
1484
1555
|
--tw-text-opacity: 1;
|
|
1485
|
-
color:
|
|
1556
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1486
1557
|
text-decoration-line: none;
|
|
1487
|
-
|
|
1558
|
+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
1559
|
+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
1560
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1561
|
+
outline-color: oklch(var(--bc) / 1);
|
|
1562
|
+
background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1));
|
|
1563
|
+
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1));
|
|
1488
1564
|
}
|
|
1489
1565
|
@media (hover: hover) {
|
|
1490
1566
|
.btn:hover {
|
|
1491
1567
|
--tw-border-opacity: 1;
|
|
1492
|
-
border-color:
|
|
1568
|
+
border-color: oklch(var(--b3) / var(--tw-border-opacity));
|
|
1493
1569
|
--tw-bg-opacity: 1;
|
|
1494
|
-
background-color:
|
|
1570
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
1571
|
+
background-color: color-mix(
|
|
1572
|
+
in oklab,
|
|
1573
|
+
oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)) 90%,
|
|
1574
|
+
black
|
|
1575
|
+
);
|
|
1576
|
+
border-color: color-mix(
|
|
1577
|
+
in oklab,
|
|
1578
|
+
oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)) 90%,
|
|
1579
|
+
black
|
|
1580
|
+
);
|
|
1495
1581
|
}
|
|
1496
1582
|
}
|
|
1497
1583
|
.btn-active {
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1584
|
+
background-color: color-mix(
|
|
1585
|
+
in oklab,
|
|
1586
|
+
oklch(var(--btn-color, var(--b3)) / var(--tw-bg-opacity)) 90%,
|
|
1587
|
+
black
|
|
1588
|
+
);
|
|
1589
|
+
border-color: color-mix(
|
|
1590
|
+
in oklab,
|
|
1591
|
+
oklch(var(--btn-color, var(--b3)) / var(--tw-border-opacity)) 90%,
|
|
1592
|
+
black
|
|
1593
|
+
);
|
|
1594
|
+
}
|
|
1503
1595
|
.btn:focus-visible {
|
|
1504
1596
|
outline-style: solid;
|
|
1505
1597
|
outline-width: 2px;
|
|
@@ -1507,189 +1599,53 @@
|
|
|
1507
1599
|
}
|
|
1508
1600
|
/* brand colors */
|
|
1509
1601
|
.btn-primary {
|
|
1510
|
-
--tw-border-opacity: 1;
|
|
1511
|
-
border-color: hsl(var(--p) / var(--tw-border-opacity));
|
|
1512
|
-
--tw-bg-opacity: 1;
|
|
1513
|
-
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
1514
1602
|
--tw-text-opacity: 1;
|
|
1515
|
-
color:
|
|
1516
|
-
outline-color:
|
|
1517
|
-
|
|
1518
|
-
@media (hover: hover) {
|
|
1519
|
-
.btn-primary:hover {
|
|
1520
|
-
--tw-border-opacity: 1;
|
|
1521
|
-
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
1522
|
-
--tw-bg-opacity: 1;
|
|
1523
|
-
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
1524
|
-
}
|
|
1525
|
-
}
|
|
1526
|
-
.btn-primary.btn-active {
|
|
1527
|
-
--tw-border-opacity: 1;
|
|
1528
|
-
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
1529
|
-
--tw-bg-opacity: 1;
|
|
1530
|
-
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
1603
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1604
|
+
outline-color: oklch(var(--p) / 1);
|
|
1605
|
+
--btn-color: var(--p);
|
|
1531
1606
|
}
|
|
1532
1607
|
.btn-secondary {
|
|
1533
|
-
--tw-border-opacity: 1;
|
|
1534
|
-
border-color: hsl(var(--s) / var(--tw-border-opacity));
|
|
1535
|
-
--tw-bg-opacity: 1;
|
|
1536
|
-
background-color: hsl(var(--s) / var(--tw-bg-opacity));
|
|
1537
1608
|
--tw-text-opacity: 1;
|
|
1538
|
-
color:
|
|
1539
|
-
outline-color:
|
|
1540
|
-
|
|
1541
|
-
@media (hover: hover) {
|
|
1542
|
-
.btn-secondary:hover {
|
|
1543
|
-
--tw-border-opacity: 1;
|
|
1544
|
-
border-color: hsl(var(--sf) / var(--tw-border-opacity));
|
|
1545
|
-
--tw-bg-opacity: 1;
|
|
1546
|
-
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
|
|
1547
|
-
}
|
|
1548
|
-
}
|
|
1549
|
-
.btn-secondary.btn-active {
|
|
1550
|
-
--tw-border-opacity: 1;
|
|
1551
|
-
border-color: hsl(var(--sf) / var(--tw-border-opacity));
|
|
1552
|
-
--tw-bg-opacity: 1;
|
|
1553
|
-
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
|
|
1609
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
1610
|
+
outline-color: oklch(var(--s) / 1);
|
|
1611
|
+
--btn-color: var(--s);
|
|
1554
1612
|
}
|
|
1555
1613
|
.btn-accent {
|
|
1556
|
-
--tw-border-opacity: 1;
|
|
1557
|
-
border-color: hsl(var(--a) / var(--tw-border-opacity));
|
|
1558
|
-
--tw-bg-opacity: 1;
|
|
1559
|
-
background-color: hsl(var(--a) / var(--tw-bg-opacity));
|
|
1560
1614
|
--tw-text-opacity: 1;
|
|
1561
|
-
color:
|
|
1562
|
-
outline-color:
|
|
1563
|
-
|
|
1564
|
-
@media (hover: hover) {
|
|
1565
|
-
.btn-accent:hover {
|
|
1566
|
-
--tw-border-opacity: 1;
|
|
1567
|
-
border-color: hsl(var(--af) / var(--tw-border-opacity));
|
|
1568
|
-
--tw-bg-opacity: 1;
|
|
1569
|
-
background-color: hsl(var(--af) / var(--tw-bg-opacity));
|
|
1570
|
-
}
|
|
1571
|
-
}
|
|
1572
|
-
.btn-accent.btn-active {
|
|
1573
|
-
--tw-border-opacity: 1;
|
|
1574
|
-
border-color: hsl(var(--af) / var(--tw-border-opacity));
|
|
1575
|
-
--tw-bg-opacity: 1;
|
|
1576
|
-
background-color: hsl(var(--af) / var(--tw-bg-opacity));
|
|
1615
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
1616
|
+
outline-color: oklch(var(--a) / 1);
|
|
1617
|
+
--btn-color: var(--a);
|
|
1577
1618
|
}
|
|
1578
1619
|
.btn-neutral {
|
|
1579
|
-
--tw-border-opacity: 1;
|
|
1580
|
-
border-color: hsl(var(--n) / var(--tw-border-opacity));
|
|
1581
|
-
--tw-bg-opacity: 1;
|
|
1582
|
-
background-color: hsl(var(--n) / var(--tw-bg-opacity));
|
|
1583
1620
|
--tw-text-opacity: 1;
|
|
1584
|
-
color:
|
|
1585
|
-
outline-color:
|
|
1586
|
-
|
|
1587
|
-
@media (hover: hover) {
|
|
1588
|
-
.btn-neutral:hover {
|
|
1589
|
-
--tw-border-opacity: 1;
|
|
1590
|
-
border-color: hsl(var(--nf) / var(--tw-border-opacity));
|
|
1591
|
-
--tw-bg-opacity: 1;
|
|
1592
|
-
background-color: hsl(var(--nf) / var(--tw-bg-opacity));
|
|
1593
|
-
}
|
|
1594
|
-
}
|
|
1595
|
-
.btn-neutral.btn-active {
|
|
1596
|
-
--tw-border-opacity: 1;
|
|
1597
|
-
border-color: hsl(var(--nf) / var(--tw-border-opacity));
|
|
1598
|
-
--tw-bg-opacity: 1;
|
|
1599
|
-
background-color: hsl(var(--nf) / var(--tw-bg-opacity));
|
|
1621
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
1622
|
+
outline-color: oklch(var(--n) / 1);
|
|
1623
|
+
--btn-color: var(--n);
|
|
1600
1624
|
}
|
|
1601
1625
|
/* btn with state colors */
|
|
1602
1626
|
.btn-info {
|
|
1603
|
-
--tw-border-opacity: 1;
|
|
1604
|
-
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
1605
|
-
--tw-bg-opacity: 1;
|
|
1606
|
-
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
1607
1627
|
--tw-text-opacity: 1;
|
|
1608
|
-
color:
|
|
1609
|
-
outline-color:
|
|
1610
|
-
|
|
1611
|
-
@media (hover: hover) {
|
|
1612
|
-
.btn-info:hover {
|
|
1613
|
-
--tw-border-opacity: 1;
|
|
1614
|
-
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
1615
|
-
--tw-bg-opacity: 1;
|
|
1616
|
-
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
1617
|
-
}
|
|
1618
|
-
}
|
|
1619
|
-
.btn-info.btn-active {
|
|
1620
|
-
--tw-border-opacity: 1;
|
|
1621
|
-
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
1622
|
-
--tw-bg-opacity: 1;
|
|
1623
|
-
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
1628
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1629
|
+
outline-color: oklch(var(--in) / 1);
|
|
1630
|
+
--btn-color: var(--in);
|
|
1624
1631
|
}
|
|
1625
1632
|
.btn-success {
|
|
1626
|
-
--tw-border-opacity: 1;
|
|
1627
|
-
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
1628
|
-
--tw-bg-opacity: 1;
|
|
1629
|
-
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
1630
1633
|
--tw-text-opacity: 1;
|
|
1631
|
-
color:
|
|
1632
|
-
outline-color:
|
|
1633
|
-
|
|
1634
|
-
@media (hover: hover) {
|
|
1635
|
-
.btn-success:hover {
|
|
1636
|
-
--tw-border-opacity: 1;
|
|
1637
|
-
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
1638
|
-
--tw-bg-opacity: 1;
|
|
1639
|
-
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
1640
|
-
}
|
|
1641
|
-
}
|
|
1642
|
-
.btn-success.btn-active {
|
|
1643
|
-
--tw-border-opacity: 1;
|
|
1644
|
-
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
1645
|
-
--tw-bg-opacity: 1;
|
|
1646
|
-
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
1634
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1635
|
+
outline-color: oklch(var(--su) / 1);
|
|
1636
|
+
--btn-color: var(--su);
|
|
1647
1637
|
}
|
|
1648
1638
|
.btn-warning {
|
|
1649
|
-
--tw-border-opacity: 1;
|
|
1650
|
-
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
1651
|
-
--tw-bg-opacity: 1;
|
|
1652
|
-
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
1653
1639
|
--tw-text-opacity: 1;
|
|
1654
|
-
color:
|
|
1655
|
-
outline-color:
|
|
1656
|
-
|
|
1657
|
-
@media (hover: hover) {
|
|
1658
|
-
.btn-warning:hover {
|
|
1659
|
-
--tw-border-opacity: 1;
|
|
1660
|
-
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
1661
|
-
--tw-bg-opacity: 1;
|
|
1662
|
-
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
1663
|
-
}
|
|
1664
|
-
}
|
|
1665
|
-
.btn-warning.btn-active {
|
|
1666
|
-
--tw-border-opacity: 1;
|
|
1667
|
-
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
1668
|
-
--tw-bg-opacity: 1;
|
|
1669
|
-
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
1640
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1641
|
+
outline-color: oklch(var(--wa) / 1);
|
|
1642
|
+
--btn-color: var(--wa);
|
|
1670
1643
|
}
|
|
1671
1644
|
.btn-error {
|
|
1672
|
-
--tw-border-opacity: 1;
|
|
1673
|
-
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
1674
|
-
--tw-bg-opacity: 1;
|
|
1675
|
-
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
1676
1645
|
--tw-text-opacity: 1;
|
|
1677
|
-
color:
|
|
1678
|
-
outline-color:
|
|
1679
|
-
|
|
1680
|
-
@media (hover: hover) {
|
|
1681
|
-
.btn-error:hover {
|
|
1682
|
-
--tw-border-opacity: 1;
|
|
1683
|
-
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
1684
|
-
--tw-bg-opacity: 1;
|
|
1685
|
-
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
1686
|
-
}
|
|
1687
|
-
}
|
|
1688
|
-
.btn-error.btn-active {
|
|
1689
|
-
--tw-border-opacity: 1;
|
|
1690
|
-
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
1691
|
-
--tw-bg-opacity: 1;
|
|
1692
|
-
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
1646
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1647
|
+
outline-color: oklch(var(--er) / 1);
|
|
1648
|
+
--btn-color: var(--er);
|
|
1693
1649
|
}
|
|
1694
1650
|
/* glass */
|
|
1695
1651
|
.btn.glass {
|
|
@@ -1722,20 +1678,20 @@
|
|
|
1722
1678
|
@media (hover: hover) {
|
|
1723
1679
|
.btn-ghost:hover {
|
|
1724
1680
|
--tw-border-opacity: 0;
|
|
1725
|
-
background-color:
|
|
1681
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1726
1682
|
--tw-bg-opacity: 0.2;
|
|
1727
1683
|
}
|
|
1728
1684
|
}
|
|
1729
1685
|
.btn-ghost.btn-active {
|
|
1730
1686
|
--tw-border-opacity: 0;
|
|
1731
|
-
background-color:
|
|
1687
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1732
1688
|
--tw-bg-opacity: 0.2;
|
|
1733
1689
|
}
|
|
1734
1690
|
.btn-link {
|
|
1735
1691
|
border-color: transparent;
|
|
1736
1692
|
background-color: transparent;
|
|
1737
1693
|
--tw-text-opacity: 1;
|
|
1738
|
-
color:
|
|
1694
|
+
color: oklch(var(--p) / var(--tw-text-opacity));
|
|
1739
1695
|
text-decoration-line: underline;
|
|
1740
1696
|
--tw-shadow: 0 0 #0000;
|
|
1741
1697
|
--tw-shadow-colored: 0 0 #0000;
|
|
@@ -1759,7 +1715,7 @@
|
|
|
1759
1715
|
border-color: currentColor;
|
|
1760
1716
|
background-color: transparent;
|
|
1761
1717
|
--tw-text-opacity: 1;
|
|
1762
|
-
color:
|
|
1718
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1763
1719
|
--tw-shadow: 0 0 #0000;
|
|
1764
1720
|
--tw-shadow-colored: 0 0 #0000;
|
|
1765
1721
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
@@ -1767,183 +1723,155 @@
|
|
|
1767
1723
|
@media (hover: hover) {
|
|
1768
1724
|
.btn-outline:hover {
|
|
1769
1725
|
--tw-border-opacity: 1;
|
|
1770
|
-
border-color:
|
|
1726
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
1771
1727
|
--tw-bg-opacity: 1;
|
|
1772
|
-
background-color:
|
|
1728
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1773
1729
|
--tw-text-opacity: 1;
|
|
1774
|
-
color:
|
|
1730
|
+
color: oklch(var(--b1) / var(--tw-text-opacity));
|
|
1775
1731
|
}
|
|
1776
1732
|
}
|
|
1777
1733
|
.btn-outline.btn-active {
|
|
1778
1734
|
--tw-border-opacity: 1;
|
|
1779
|
-
border-color:
|
|
1735
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
1780
1736
|
--tw-bg-opacity: 1;
|
|
1781
|
-
background-color:
|
|
1737
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1782
1738
|
--tw-text-opacity: 1;
|
|
1783
|
-
color:
|
|
1739
|
+
color: oklch(var(--b1) / var(--tw-text-opacity));
|
|
1784
1740
|
}
|
|
1785
1741
|
.btn-outline.btn-primary {
|
|
1786
1742
|
--tw-text-opacity: 1;
|
|
1787
|
-
color:
|
|
1743
|
+
color: oklch(var(--p) / var(--tw-text-opacity));
|
|
1788
1744
|
}
|
|
1789
1745
|
@media (hover: hover) {
|
|
1790
1746
|
.btn-outline.btn-primary:hover {
|
|
1791
|
-
--tw-border-opacity: 1;
|
|
1792
|
-
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
1793
|
-
--tw-bg-opacity: 1;
|
|
1794
|
-
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
1795
1747
|
--tw-text-opacity: 1;
|
|
1796
|
-
color:
|
|
1748
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1749
|
+
background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
|
|
1750
|
+
border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
|
|
1797
1751
|
}
|
|
1798
1752
|
}
|
|
1799
1753
|
.btn-outline.btn-primary.btn-active {
|
|
1800
|
-
--tw-border-opacity: 1;
|
|
1801
|
-
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
1802
|
-
--tw-bg-opacity: 1;
|
|
1803
|
-
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
1804
1754
|
--tw-text-opacity: 1;
|
|
1805
|
-
color:
|
|
1755
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1756
|
+
background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
|
|
1757
|
+
border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
|
|
1806
1758
|
}
|
|
1807
1759
|
.btn-outline.btn-secondary {
|
|
1808
1760
|
--tw-text-opacity: 1;
|
|
1809
|
-
color:
|
|
1761
|
+
color: oklch(var(--s) / var(--tw-text-opacity));
|
|
1810
1762
|
}
|
|
1811
1763
|
@media (hover: hover) {
|
|
1812
1764
|
.btn-outline.btn-secondary:hover {
|
|
1813
|
-
--tw-border-opacity: 1;
|
|
1814
|
-
border-color: hsl(var(--sf) / var(--tw-border-opacity));
|
|
1815
|
-
--tw-bg-opacity: 1;
|
|
1816
|
-
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
|
|
1817
1765
|
--tw-text-opacity: 1;
|
|
1818
|
-
color:
|
|
1766
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
1767
|
+
background-color: color-mix(in oklab, oklch(var(--s) / var(--tw-bg-opacity)) 90%, black);
|
|
1768
|
+
border-color: color-mix(in oklab, oklch(var(--s) / var(--tw-border-opacity)) 90%, black);
|
|
1819
1769
|
}
|
|
1820
1770
|
}
|
|
1821
1771
|
.btn-outline.btn-secondary.btn-active {
|
|
1822
|
-
--tw-border-opacity: 1;
|
|
1823
|
-
border-color: hsl(var(--sf) / var(--tw-border-opacity));
|
|
1824
|
-
--tw-bg-opacity: 1;
|
|
1825
|
-
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
|
|
1826
1772
|
--tw-text-opacity: 1;
|
|
1827
|
-
color:
|
|
1773
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
1774
|
+
background-color: color-mix(in oklab, oklch(var(--s) / var(--tw-bg-opacity)) 90%, black);
|
|
1775
|
+
border-color: color-mix(in oklab, oklch(var(--s) / var(--tw-border-opacity)) 90%, black);
|
|
1828
1776
|
}
|
|
1829
1777
|
.btn-outline.btn-accent {
|
|
1830
1778
|
--tw-text-opacity: 1;
|
|
1831
|
-
color:
|
|
1779
|
+
color: oklch(var(--a) / var(--tw-text-opacity));
|
|
1832
1780
|
}
|
|
1833
1781
|
@media (hover: hover) {
|
|
1834
1782
|
.btn-outline.btn-accent:hover {
|
|
1835
|
-
--tw-border-opacity: 1;
|
|
1836
|
-
border-color: hsl(var(--af) / var(--tw-border-opacity));
|
|
1837
|
-
--tw-bg-opacity: 1;
|
|
1838
|
-
background-color: hsl(var(--af) / var(--tw-bg-opacity));
|
|
1839
1783
|
--tw-text-opacity: 1;
|
|
1840
|
-
color:
|
|
1784
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
1785
|
+
background-color: color-mix(in oklab, oklch(var(--a) / var(--tw-bg-opacity)) 90%, black);
|
|
1786
|
+
border-color: color-mix(in oklab, oklch(var(--a) / var(--tw-border-opacity)) 90%, black);
|
|
1841
1787
|
}
|
|
1842
1788
|
}
|
|
1843
1789
|
.btn-outline.btn-accent.btn-active {
|
|
1844
|
-
--tw-border-opacity: 1;
|
|
1845
|
-
border-color: hsl(var(--af) / var(--tw-border-opacity));
|
|
1846
|
-
--tw-bg-opacity: 1;
|
|
1847
|
-
background-color: hsl(var(--af) / var(--tw-bg-opacity));
|
|
1848
1790
|
--tw-text-opacity: 1;
|
|
1849
|
-
color:
|
|
1791
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
1792
|
+
background-color: color-mix(in oklab, oklch(var(--a) / var(--tw-bg-opacity)) 90%, black);
|
|
1793
|
+
border-color: color-mix(in oklab, oklch(var(--a) / var(--tw-border-opacity)) 90%, black);
|
|
1850
1794
|
}
|
|
1851
1795
|
.btn-outline.btn-success {
|
|
1852
1796
|
--tw-text-opacity: 1;
|
|
1853
|
-
color:
|
|
1797
|
+
color: oklch(var(--su) / var(--tw-text-opacity));
|
|
1854
1798
|
}
|
|
1855
1799
|
@media (hover: hover) {
|
|
1856
1800
|
.btn-outline.btn-success:hover {
|
|
1857
|
-
--tw-border-opacity: 1;
|
|
1858
|
-
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
1859
|
-
--tw-bg-opacity: 1;
|
|
1860
|
-
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
1861
1801
|
--tw-text-opacity: 1;
|
|
1862
|
-
color:
|
|
1802
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1803
|
+
background-color: color-mix(in oklab, oklch(var(--su) / var(--tw-bg-opacity)) 90%, black);
|
|
1804
|
+
border-color: color-mix(in oklab, oklch(var(--su) / var(--tw-border-opacity)) 90%, black);
|
|
1863
1805
|
}
|
|
1864
1806
|
}
|
|
1865
1807
|
.btn-outline.btn-success.btn-active {
|
|
1866
|
-
--tw-border-opacity: 1;
|
|
1867
|
-
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
1868
|
-
--tw-bg-opacity: 1;
|
|
1869
|
-
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
1870
1808
|
--tw-text-opacity: 1;
|
|
1871
|
-
color:
|
|
1809
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1810
|
+
background-color: color-mix(in oklab, oklch(var(--su) / var(--tw-bg-opacity)) 90%, black);
|
|
1811
|
+
border-color: color-mix(in oklab, oklch(var(--su) / var(--tw-border-opacity)) 90%, black);
|
|
1872
1812
|
}
|
|
1873
1813
|
.btn-outline.btn-info {
|
|
1874
1814
|
--tw-text-opacity: 1;
|
|
1875
|
-
color:
|
|
1815
|
+
color: oklch(var(--in) / var(--tw-text-opacity));
|
|
1876
1816
|
}
|
|
1877
1817
|
@media (hover: hover) {
|
|
1878
1818
|
.btn-outline.btn-info:hover {
|
|
1879
|
-
--tw-border-opacity: 1;
|
|
1880
|
-
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
1881
|
-
--tw-bg-opacity: 1;
|
|
1882
|
-
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
1883
1819
|
--tw-text-opacity: 1;
|
|
1884
|
-
color:
|
|
1820
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1821
|
+
background-color: color-mix(in oklab, oklch(var(--in) / var(--tw-bg-opacity)) 90%, black);
|
|
1822
|
+
border-color: color-mix(in oklab, oklch(var(--in) / var(--tw-border-opacity)) 90%, black);
|
|
1885
1823
|
}
|
|
1886
1824
|
}
|
|
1887
1825
|
.btn-outline.btn-info.btn-active {
|
|
1888
|
-
--tw-border-opacity: 1;
|
|
1889
|
-
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
1890
|
-
--tw-bg-opacity: 1;
|
|
1891
|
-
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
1892
1826
|
--tw-text-opacity: 1;
|
|
1893
|
-
color:
|
|
1827
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1828
|
+
background-color: color-mix(in oklab, oklch(var(--in) / var(--tw-bg-opacity)) 90%, black);
|
|
1829
|
+
border-color: color-mix(in oklab, oklch(var(--in) / var(--tw-border-opacity)) 90%, black);
|
|
1894
1830
|
}
|
|
1895
1831
|
.btn-outline.btn-warning {
|
|
1896
1832
|
--tw-text-opacity: 1;
|
|
1897
|
-
color:
|
|
1833
|
+
color: oklch(var(--wa) / var(--tw-text-opacity));
|
|
1898
1834
|
}
|
|
1899
1835
|
@media (hover: hover) {
|
|
1900
1836
|
.btn-outline.btn-warning:hover {
|
|
1901
|
-
--tw-border-opacity: 1;
|
|
1902
|
-
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
1903
|
-
--tw-bg-opacity: 1;
|
|
1904
|
-
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
1905
1837
|
--tw-text-opacity: 1;
|
|
1906
|
-
color:
|
|
1838
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1839
|
+
background-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-bg-opacity)) 90%, black);
|
|
1840
|
+
border-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-border-opacity)) 90%, black);
|
|
1907
1841
|
}
|
|
1908
1842
|
}
|
|
1909
1843
|
.btn-outline.btn-warning.btn-active {
|
|
1910
|
-
--tw-border-opacity: 1;
|
|
1911
|
-
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
1912
|
-
--tw-bg-opacity: 1;
|
|
1913
|
-
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
1914
1844
|
--tw-text-opacity: 1;
|
|
1915
|
-
color:
|
|
1845
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1846
|
+
background-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-bg-opacity)) 90%, black);
|
|
1847
|
+
border-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-border-opacity)) 90%, black);
|
|
1916
1848
|
}
|
|
1917
1849
|
.btn-outline.btn-error {
|
|
1918
1850
|
--tw-text-opacity: 1;
|
|
1919
|
-
color:
|
|
1851
|
+
color: oklch(var(--er) / var(--tw-text-opacity));
|
|
1920
1852
|
}
|
|
1921
1853
|
@media (hover: hover) {
|
|
1922
1854
|
.btn-outline.btn-error:hover {
|
|
1923
|
-
--tw-border-opacity: 1;
|
|
1924
|
-
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
1925
|
-
--tw-bg-opacity: 1;
|
|
1926
|
-
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
1927
1855
|
--tw-text-opacity: 1;
|
|
1928
|
-
color:
|
|
1856
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1857
|
+
background-color: color-mix(in oklab, oklch(var(--er) / var(--tw-bg-opacity)) 90%, black);
|
|
1858
|
+
border-color: color-mix(in oklab, oklch(var(--er) / var(--tw-border-opacity)) 90%, black);
|
|
1929
1859
|
}
|
|
1930
1860
|
}
|
|
1931
1861
|
.btn-outline.btn-error.btn-active {
|
|
1932
|
-
--tw-border-opacity: 1;
|
|
1933
|
-
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
1934
|
-
--tw-bg-opacity: 1;
|
|
1935
|
-
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
1936
1862
|
--tw-text-opacity: 1;
|
|
1937
|
-
color:
|
|
1863
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1864
|
+
background-color: color-mix(in oklab, oklch(var(--er) / var(--tw-bg-opacity)) 90%, black);
|
|
1865
|
+
border-color: color-mix(in oklab, oklch(var(--er) / var(--tw-border-opacity)) 90%, black);
|
|
1938
1866
|
}
|
|
1939
1867
|
/* disabled */
|
|
1940
1868
|
.btn.btn-disabled,
|
|
1941
1869
|
.btn[disabled],
|
|
1942
1870
|
.btn:disabled {
|
|
1943
1871
|
--tw-border-opacity: 0;
|
|
1944
|
-
background-color:
|
|
1872
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1945
1873
|
--tw-bg-opacity: 0.2;
|
|
1946
|
-
color:
|
|
1874
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1947
1875
|
--tw-text-opacity: 0.2;
|
|
1948
1876
|
}
|
|
1949
1877
|
@media (hover: hover) {
|
|
@@ -1951,48 +1879,36 @@
|
|
|
1951
1879
|
.btn[disabled]:hover,
|
|
1952
1880
|
.btn:disabled:hover {
|
|
1953
1881
|
--tw-border-opacity: 0;
|
|
1954
|
-
background-color:
|
|
1882
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1955
1883
|
--tw-bg-opacity: 0.2;
|
|
1956
|
-
color:
|
|
1884
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1957
1885
|
--tw-text-opacity: 0.2;
|
|
1958
1886
|
}
|
|
1959
1887
|
}
|
|
1960
|
-
|
|
1961
|
-
.btn-group > input[type="radio"]:checked.btn,
|
|
1962
|
-
.btn-group > .btn-active {
|
|
1963
|
-
--tw-border-opacity: 1;
|
|
1964
|
-
border-color: hsl(var(--p) / var(--tw-border-opacity));
|
|
1965
|
-
--tw-bg-opacity: 1;
|
|
1966
|
-
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
1967
|
-
--tw-text-opacity: 1;
|
|
1968
|
-
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
1969
|
-
}
|
|
1970
|
-
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
|
|
1971
|
-
outline-style: solid;
|
|
1972
|
-
outline-width: 2px;
|
|
1973
|
-
outline-color: hsl(var(--p) / 1);
|
|
1974
|
-
}
|
|
1888
|
+
|
|
1975
1889
|
/* radio input and checkbox as button */
|
|
1890
|
+
|
|
1976
1891
|
.btn:is(input[type="checkbox"]:checked),
|
|
1977
1892
|
.btn:is(input[type="radio"]:checked) {
|
|
1978
1893
|
--tw-border-opacity: 1;
|
|
1979
|
-
border-color:
|
|
1894
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
1980
1895
|
--tw-bg-opacity: 1;
|
|
1981
|
-
background-color:
|
|
1896
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
1982
1897
|
--tw-text-opacity: 1;
|
|
1983
|
-
color:
|
|
1898
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1984
1899
|
}
|
|
1900
|
+
|
|
1985
1901
|
@media (hover: hover) {
|
|
1986
1902
|
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
1991
|
-
}
|
|
1903
|
+
background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
|
|
1904
|
+
border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
|
|
1905
|
+
}
|
|
1992
1906
|
}
|
|
1907
|
+
|
|
1993
1908
|
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
|
|
1994
|
-
outline-color:
|
|
1909
|
+
outline-color: oklch(var(--p) / 1);
|
|
1995
1910
|
}
|
|
1911
|
+
|
|
1996
1912
|
@keyframes button-pop {
|
|
1997
1913
|
0% {
|
|
1998
1914
|
transform: scale(var(--btn-focus-scale, 0.98));
|
|
@@ -2028,12 +1944,12 @@
|
|
|
2028
1944
|
.card.bordered {
|
|
2029
1945
|
border-width: 1px;
|
|
2030
1946
|
--tw-border-opacity: 1;
|
|
2031
|
-
border-color:
|
|
1947
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2032
1948
|
}
|
|
2033
1949
|
.card-bordered {
|
|
2034
1950
|
border-width: 1px;
|
|
2035
1951
|
--tw-border-opacity: 1;
|
|
2036
|
-
border-color:
|
|
1952
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2037
1953
|
}
|
|
2038
1954
|
.card.compact .card-body {
|
|
2039
1955
|
padding: 1rem;
|
|
@@ -2056,15 +1972,15 @@
|
|
|
2056
1972
|
}
|
|
2057
1973
|
.card.image-full:before {
|
|
2058
1974
|
z-index: 10;
|
|
1975
|
+
border-radius: var(--rounded-box, 1rem);
|
|
2059
1976
|
--tw-bg-opacity: 1;
|
|
2060
|
-
background-color:
|
|
1977
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2061
1978
|
opacity: 0.75;
|
|
2062
|
-
border-radius: var(--rounded-box, 1rem);
|
|
2063
1979
|
}
|
|
2064
1980
|
.card.image-full > .card-body {
|
|
2065
1981
|
z-index: 20;
|
|
2066
1982
|
--tw-text-opacity: 1;
|
|
2067
|
-
color:
|
|
1983
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
2068
1984
|
}
|
|
2069
1985
|
.card.image-full :where(figure) {
|
|
2070
1986
|
overflow: hidden;
|
|
@@ -2086,65 +2002,65 @@
|
|
|
2086
2002
|
/* default */
|
|
2087
2003
|
.chat-bubble {
|
|
2088
2004
|
--tw-bg-opacity: 1;
|
|
2089
|
-
background-color:
|
|
2005
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2090
2006
|
--tw-text-opacity: 1;
|
|
2091
|
-
color:
|
|
2007
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
2092
2008
|
}
|
|
2093
2009
|
/* brand colors */
|
|
2094
2010
|
.chat-bubble-primary {
|
|
2095
2011
|
--tw-bg-opacity: 1;
|
|
2096
|
-
background-color:
|
|
2012
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
2097
2013
|
--tw-text-opacity: 1;
|
|
2098
|
-
color:
|
|
2014
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
2099
2015
|
}
|
|
2100
2016
|
.chat-bubble-secondary {
|
|
2101
2017
|
--tw-bg-opacity: 1;
|
|
2102
|
-
background-color:
|
|
2018
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
2103
2019
|
--tw-text-opacity: 1;
|
|
2104
|
-
color:
|
|
2020
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
2105
2021
|
}
|
|
2106
2022
|
.chat-bubble-accent {
|
|
2107
2023
|
--tw-bg-opacity: 1;
|
|
2108
|
-
background-color:
|
|
2024
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
2109
2025
|
--tw-text-opacity: 1;
|
|
2110
|
-
color:
|
|
2026
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
2111
2027
|
}
|
|
2112
2028
|
/* state colors */
|
|
2113
2029
|
.chat-bubble-info {
|
|
2114
2030
|
--tw-bg-opacity: 1;
|
|
2115
|
-
background-color:
|
|
2031
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
2116
2032
|
--tw-text-opacity: 1;
|
|
2117
|
-
color:
|
|
2033
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
2118
2034
|
}
|
|
2119
2035
|
.chat-bubble-success {
|
|
2120
2036
|
--tw-bg-opacity: 1;
|
|
2121
|
-
background-color:
|
|
2037
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
2122
2038
|
--tw-text-opacity: 1;
|
|
2123
|
-
color:
|
|
2039
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
2124
2040
|
}
|
|
2125
2041
|
.chat-bubble-warning {
|
|
2126
2042
|
--tw-bg-opacity: 1;
|
|
2127
|
-
background-color:
|
|
2043
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
2128
2044
|
--tw-text-opacity: 1;
|
|
2129
|
-
color:
|
|
2045
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
2130
2046
|
}
|
|
2131
2047
|
.chat-bubble-error {
|
|
2132
2048
|
--tw-bg-opacity: 1;
|
|
2133
|
-
background-color:
|
|
2049
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
2134
2050
|
--tw-text-opacity: 1;
|
|
2135
|
-
color:
|
|
2051
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
2136
2052
|
}
|
|
2137
2053
|
.chat-start .chat-bubble {
|
|
2138
|
-
border-
|
|
2054
|
+
border-end-start-radius: 0px;
|
|
2139
2055
|
}
|
|
2140
2056
|
.chat-start .chat-bubble:before {
|
|
2141
|
-
|
|
2057
|
+
inset-inline-start: -0.749rem;
|
|
2142
2058
|
}
|
|
2143
2059
|
.chat-end .chat-bubble {
|
|
2144
|
-
border-
|
|
2060
|
+
border-end-end-radius: 0px;
|
|
2145
2061
|
}
|
|
2146
2062
|
.chat-end .chat-bubble:before {
|
|
2147
|
-
|
|
2063
|
+
inset-inline-start: 99.9%;
|
|
2148
2064
|
}
|
|
2149
2065
|
.checkbox {
|
|
2150
2066
|
--chkbg: var(--bc);
|
|
@@ -2153,231 +2069,231 @@
|
|
|
2153
2069
|
width: 1.5rem;
|
|
2154
2070
|
cursor: pointer;
|
|
2155
2071
|
appearance: none;
|
|
2072
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2156
2073
|
border-width: 1px;
|
|
2157
|
-
border-color:
|
|
2074
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2158
2075
|
--tw-border-opacity: 0.2;
|
|
2159
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2160
2076
|
}
|
|
2161
2077
|
.checkbox:focus-visible {
|
|
2162
2078
|
outline-style: solid;
|
|
2163
2079
|
outline-width: 2px;
|
|
2164
2080
|
outline-offset: 2px;
|
|
2165
|
-
outline-color:
|
|
2081
|
+
outline-color: oklch(var(--bc) / 1);
|
|
2166
2082
|
}
|
|
2167
2083
|
.checkbox:checked,
|
|
2168
2084
|
.checkbox[checked="true"],
|
|
2169
2085
|
.checkbox[aria-checked="true"] {
|
|
2170
2086
|
--tw-bg-opacity: 1;
|
|
2171
|
-
background-color:
|
|
2087
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2172
2088
|
background-repeat: no-repeat;
|
|
2173
2089
|
animation: checkmark var(--animation-input, 0.2s) ease-out;
|
|
2174
|
-
background-image: linear-gradient(-45deg, transparent 65%,
|
|
2175
|
-
linear-gradient(45deg, transparent 75%,
|
|
2176
|
-
linear-gradient(-45deg,
|
|
2090
|
+
background-image: linear-gradient(-45deg, transparent 65%, oklch(var(--chkbg)) 65.99%),
|
|
2091
|
+
linear-gradient(45deg, transparent 75%, oklch(var(--chkbg)) 75.99%),
|
|
2092
|
+
linear-gradient(-45deg, oklch(var(--chkbg)) 40%, transparent 40.99%),
|
|
2177
2093
|
linear-gradient(
|
|
2178
2094
|
45deg,
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2095
|
+
oklch(var(--chkbg)) 30%,
|
|
2096
|
+
oklch(var(--chkfg)) 30.99%,
|
|
2097
|
+
oklch(var(--chkfg)) 40%,
|
|
2182
2098
|
transparent 40.99%
|
|
2183
2099
|
),
|
|
2184
|
-
linear-gradient(-45deg,
|
|
2100
|
+
linear-gradient(-45deg, oklch(var(--chkfg)) 50%, oklch(var(--chkbg)) 50.99%);
|
|
2185
2101
|
}
|
|
2186
2102
|
.checkbox:indeterminate {
|
|
2187
2103
|
--tw-bg-opacity: 1;
|
|
2188
|
-
background-color:
|
|
2104
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2189
2105
|
background-repeat: no-repeat;
|
|
2190
2106
|
animation: checkmark var(--animation-input, 0.2s) ease-out;
|
|
2191
|
-
background-image: linear-gradient(90deg, transparent 80%,
|
|
2192
|
-
linear-gradient(-90deg, transparent 80%,
|
|
2107
|
+
background-image: linear-gradient(90deg, transparent 80%, oklch(var(--chkbg)) 80%),
|
|
2108
|
+
linear-gradient(-90deg, transparent 80%, oklch(var(--chkbg)) 80%),
|
|
2193
2109
|
linear-gradient(
|
|
2194
2110
|
0deg,
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2111
|
+
oklch(var(--chkbg)) 43%,
|
|
2112
|
+
oklch(var(--chkfg)) 43%,
|
|
2113
|
+
oklch(var(--chkfg)) 57%,
|
|
2114
|
+
oklch(var(--chkbg)) 57%
|
|
2199
2115
|
);
|
|
2200
2116
|
}
|
|
2201
2117
|
.checkbox-primary {
|
|
2202
2118
|
--chkbg: var(--p);
|
|
2203
2119
|
--chkfg: var(--pc);
|
|
2204
2120
|
--tw-border-opacity: 1;
|
|
2205
|
-
border-color:
|
|
2121
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2206
2122
|
}
|
|
2207
2123
|
@media(hover:hover) {
|
|
2208
2124
|
.checkbox-primary:hover {
|
|
2209
2125
|
--tw-border-opacity: 1;
|
|
2210
|
-
border-color:
|
|
2126
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2211
2127
|
}
|
|
2212
2128
|
}
|
|
2213
2129
|
.checkbox-primary:focus-visible {
|
|
2214
|
-
outline-color:
|
|
2130
|
+
outline-color: oklch(var(--p) / 1);
|
|
2215
2131
|
}
|
|
2216
2132
|
.checkbox-primary:checked,
|
|
2217
2133
|
.checkbox-primary[checked="true"],
|
|
2218
2134
|
.checkbox-primary[aria-checked="true"] {
|
|
2219
2135
|
--tw-border-opacity: 1;
|
|
2220
|
-
border-color:
|
|
2136
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2221
2137
|
--tw-bg-opacity: 1;
|
|
2222
|
-
background-color:
|
|
2138
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
2223
2139
|
--tw-text-opacity: 1;
|
|
2224
|
-
color:
|
|
2140
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
2225
2141
|
}
|
|
2226
2142
|
.checkbox-secondary {
|
|
2227
2143
|
--chkbg: var(--s);
|
|
2228
2144
|
--chkfg: var(--sc);
|
|
2229
2145
|
--tw-border-opacity: 1;
|
|
2230
|
-
border-color:
|
|
2146
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2231
2147
|
}
|
|
2232
2148
|
@media(hover:hover) {
|
|
2233
2149
|
.checkbox-secondary:hover {
|
|
2234
2150
|
--tw-border-opacity: 1;
|
|
2235
|
-
border-color:
|
|
2151
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2236
2152
|
}
|
|
2237
2153
|
}
|
|
2238
2154
|
.checkbox-secondary:focus-visible {
|
|
2239
|
-
outline-color:
|
|
2155
|
+
outline-color: oklch(var(--s) / 1);
|
|
2240
2156
|
}
|
|
2241
2157
|
.checkbox-secondary:checked,
|
|
2242
2158
|
.checkbox-secondary[checked="true"],
|
|
2243
2159
|
.checkbox-secondary[aria-checked="true"] {
|
|
2244
2160
|
--tw-border-opacity: 1;
|
|
2245
|
-
border-color:
|
|
2161
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2246
2162
|
--tw-bg-opacity: 1;
|
|
2247
|
-
background-color:
|
|
2163
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
2248
2164
|
--tw-text-opacity: 1;
|
|
2249
|
-
color:
|
|
2165
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
2250
2166
|
}
|
|
2251
2167
|
.checkbox-accent {
|
|
2252
2168
|
--chkbg: var(--a);
|
|
2253
2169
|
--chkfg: var(--ac);
|
|
2254
2170
|
--tw-border-opacity: 1;
|
|
2255
|
-
border-color:
|
|
2171
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2256
2172
|
}
|
|
2257
2173
|
@media(hover:hover) {
|
|
2258
2174
|
.checkbox-accent:hover {
|
|
2259
2175
|
--tw-border-opacity: 1;
|
|
2260
|
-
border-color:
|
|
2176
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2261
2177
|
}
|
|
2262
2178
|
}
|
|
2263
2179
|
.checkbox-accent:focus-visible {
|
|
2264
|
-
outline-color:
|
|
2180
|
+
outline-color: oklch(var(--a) / 1);
|
|
2265
2181
|
}
|
|
2266
2182
|
.checkbox-accent:checked,
|
|
2267
2183
|
.checkbox-accent[checked="true"],
|
|
2268
2184
|
.checkbox-accent[aria-checked="true"] {
|
|
2269
2185
|
--tw-border-opacity: 1;
|
|
2270
|
-
border-color:
|
|
2186
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2271
2187
|
--tw-bg-opacity: 1;
|
|
2272
|
-
background-color:
|
|
2188
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
2273
2189
|
--tw-text-opacity: 1;
|
|
2274
|
-
color:
|
|
2190
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
2275
2191
|
}
|
|
2276
2192
|
.checkbox-success {
|
|
2277
2193
|
--chkbg: var(--su);
|
|
2278
2194
|
--chkfg: var(--suc);
|
|
2279
2195
|
--tw-border-opacity: 1;
|
|
2280
|
-
border-color:
|
|
2196
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2281
2197
|
}
|
|
2282
2198
|
@media(hover:hover) {
|
|
2283
2199
|
.checkbox-success:hover {
|
|
2284
2200
|
--tw-border-opacity: 1;
|
|
2285
|
-
border-color:
|
|
2201
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2286
2202
|
}
|
|
2287
2203
|
}
|
|
2288
2204
|
.checkbox-success:focus-visible {
|
|
2289
|
-
outline-color:
|
|
2205
|
+
outline-color: oklch(var(--su) / 1);
|
|
2290
2206
|
}
|
|
2291
2207
|
.checkbox-success:checked,
|
|
2292
2208
|
.checkbox-success[checked="true"],
|
|
2293
2209
|
.checkbox-success[aria-checked="true"] {
|
|
2294
2210
|
--tw-border-opacity: 1;
|
|
2295
|
-
border-color:
|
|
2211
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2296
2212
|
--tw-bg-opacity: 1;
|
|
2297
|
-
background-color:
|
|
2213
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
2298
2214
|
--tw-text-opacity: 1;
|
|
2299
|
-
color:
|
|
2215
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
2300
2216
|
}
|
|
2301
2217
|
.checkbox-warning {
|
|
2302
2218
|
--chkbg: var(--wa);
|
|
2303
2219
|
--chkfg: var(--wac);
|
|
2304
2220
|
--tw-border-opacity: 1;
|
|
2305
|
-
border-color:
|
|
2221
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2306
2222
|
}
|
|
2307
2223
|
@media(hover:hover) {
|
|
2308
2224
|
.checkbox-warning:hover {
|
|
2309
2225
|
--tw-border-opacity: 1;
|
|
2310
|
-
border-color:
|
|
2226
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2311
2227
|
}
|
|
2312
2228
|
}
|
|
2313
2229
|
.checkbox-warning:focus-visible {
|
|
2314
|
-
outline-color:
|
|
2230
|
+
outline-color: oklch(var(--wa) / 1);
|
|
2315
2231
|
}
|
|
2316
2232
|
.checkbox-warning:checked,
|
|
2317
2233
|
.checkbox-warning[checked="true"],
|
|
2318
2234
|
.checkbox-warning[aria-checked="true"] {
|
|
2319
2235
|
--tw-border-opacity: 1;
|
|
2320
|
-
border-color:
|
|
2236
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2321
2237
|
--tw-bg-opacity: 1;
|
|
2322
|
-
background-color:
|
|
2238
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
2323
2239
|
--tw-text-opacity: 1;
|
|
2324
|
-
color:
|
|
2240
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
2325
2241
|
}
|
|
2326
2242
|
.checkbox-info {
|
|
2327
2243
|
--chkbg: var(--in);
|
|
2328
2244
|
--chkfg: var(--inc);
|
|
2329
2245
|
--tw-border-opacity: 1;
|
|
2330
|
-
border-color:
|
|
2246
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2331
2247
|
}
|
|
2332
2248
|
@media(hover:hover) {
|
|
2333
2249
|
.checkbox-info:hover {
|
|
2334
2250
|
--tw-border-opacity: 1;
|
|
2335
|
-
border-color:
|
|
2251
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2336
2252
|
}
|
|
2337
2253
|
}
|
|
2338
2254
|
.checkbox-info:focus-visible {
|
|
2339
|
-
outline-color:
|
|
2255
|
+
outline-color: oklch(var(--in) / 1);
|
|
2340
2256
|
}
|
|
2341
2257
|
.checkbox-info:checked,
|
|
2342
2258
|
.checkbox-info[checked="true"],
|
|
2343
2259
|
.checkbox-info[aria-checked="true"] {
|
|
2344
2260
|
--tw-border-opacity: 1;
|
|
2345
|
-
border-color:
|
|
2261
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2346
2262
|
--tw-bg-opacity: 1;
|
|
2347
|
-
background-color:
|
|
2263
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
2348
2264
|
--tw-text-opacity: 1;
|
|
2349
|
-
color:
|
|
2265
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
2350
2266
|
}
|
|
2351
2267
|
.checkbox-error {
|
|
2352
2268
|
--chkbg: var(--er);
|
|
2353
2269
|
--chkfg: var(--erc);
|
|
2354
2270
|
--tw-border-opacity: 1;
|
|
2355
|
-
border-color:
|
|
2271
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2356
2272
|
}
|
|
2357
2273
|
@media(hover:hover) {
|
|
2358
2274
|
.checkbox-error:hover {
|
|
2359
2275
|
--tw-border-opacity: 1;
|
|
2360
|
-
border-color:
|
|
2276
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2361
2277
|
}
|
|
2362
2278
|
}
|
|
2363
2279
|
.checkbox-error:focus-visible {
|
|
2364
|
-
outline-color:
|
|
2280
|
+
outline-color: oklch(var(--er) / 1);
|
|
2365
2281
|
}
|
|
2366
2282
|
.checkbox-error:checked,
|
|
2367
2283
|
.checkbox-error[checked="true"],
|
|
2368
2284
|
.checkbox-error[aria-checked="true"] {
|
|
2369
2285
|
--tw-border-opacity: 1;
|
|
2370
|
-
border-color:
|
|
2286
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2371
2287
|
--tw-bg-opacity: 1;
|
|
2372
|
-
background-color:
|
|
2288
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
2373
2289
|
--tw-text-opacity: 1;
|
|
2374
|
-
color:
|
|
2290
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
2375
2291
|
}
|
|
2376
2292
|
.checkbox:disabled {
|
|
2377
2293
|
cursor: not-allowed;
|
|
2378
2294
|
border-color: transparent;
|
|
2379
2295
|
--tw-bg-opacity: 1;
|
|
2380
|
-
background-color:
|
|
2296
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2381
2297
|
opacity: 0.2;
|
|
2382
2298
|
}
|
|
2383
2299
|
|
|
@@ -2398,22 +2314,6 @@
|
|
|
2398
2314
|
.checkbox-mark {
|
|
2399
2315
|
display: none;
|
|
2400
2316
|
}
|
|
2401
|
-
|
|
2402
|
-
[dir="rtl"] .checkbox:checked,
|
|
2403
|
-
[dir="rtl"] .checkbox[checked="true"],
|
|
2404
|
-
[dir="rtl"] .checkbox[aria-checked="true"] {
|
|
2405
|
-
background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
|
|
2406
|
-
linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
|
|
2407
|
-
linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
|
|
2408
|
-
linear-gradient(
|
|
2409
|
-
-45deg,
|
|
2410
|
-
hsl(var(--chkbg)) 30%,
|
|
2411
|
-
hsl(var(--chkfg)) 30.99%,
|
|
2412
|
-
hsl(var(--chkfg)) 40%,
|
|
2413
|
-
transparent 40.99%
|
|
2414
|
-
),
|
|
2415
|
-
linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
|
|
2416
|
-
}
|
|
2417
2317
|
.collapse {
|
|
2418
2318
|
width: 100%;
|
|
2419
2319
|
border-radius: var(--rounded-box, 1rem);
|
|
@@ -2432,7 +2332,7 @@ details.collapse summary::-webkit-details-marker {
|
|
|
2432
2332
|
outline-style: solid;
|
|
2433
2333
|
outline-width: 2px;
|
|
2434
2334
|
outline-offset: 2px;
|
|
2435
|
-
outline-color:
|
|
2335
|
+
outline-color: oklch(var(--bc) / 1);
|
|
2436
2336
|
}
|
|
2437
2337
|
details.collapse summary {
|
|
2438
2338
|
outline: 2px solid transparent;
|
|
@@ -2444,7 +2344,7 @@ details.collapse summary {
|
|
|
2444
2344
|
outline-style: solid;
|
|
2445
2345
|
outline-width: 2px;
|
|
2446
2346
|
outline-offset: 2px;
|
|
2447
|
-
outline-color:
|
|
2347
|
+
outline-color: oklch(var(--bc) / 1);
|
|
2448
2348
|
}
|
|
2449
2349
|
.collapse-arrow > .collapse-title:after {
|
|
2450
2350
|
position: absolute;
|
|
@@ -2460,15 +2360,12 @@ details.collapse summary {
|
|
|
2460
2360
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2461
2361
|
transition-duration: 0.2s;
|
|
2462
2362
|
top: 50%;
|
|
2463
|
-
|
|
2363
|
+
inset-inline-end: 1.4rem;
|
|
2464
2364
|
content: "";
|
|
2465
2365
|
transform-origin: 75% 75%;
|
|
2466
2366
|
box-shadow: 2px 2px;
|
|
2467
2367
|
pointer-events: none;
|
|
2468
2368
|
}
|
|
2469
|
-
[dir="rtl"] .collapse-arrow > .collapse-title:after {
|
|
2470
|
-
--tw-rotate: -45deg;
|
|
2471
|
-
}
|
|
2472
2369
|
.collapse-plus > .collapse-title:after {
|
|
2473
2370
|
position: absolute;
|
|
2474
2371
|
display: block;
|
|
@@ -2479,7 +2376,7 @@ details.collapse summary {
|
|
|
2479
2376
|
transition-duration: 300ms;
|
|
2480
2377
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2481
2378
|
top: 0.9rem;
|
|
2482
|
-
|
|
2379
|
+
inset-inline-end: 1.4rem;
|
|
2483
2380
|
content: "+";
|
|
2484
2381
|
pointer-events: none;
|
|
2485
2382
|
}
|
|
@@ -2503,7 +2400,7 @@ details.collapse summary {
|
|
|
2503
2400
|
:where(.collapse > input[type="radio"]) {
|
|
2504
2401
|
width: 100%;
|
|
2505
2402
|
padding: 1rem;
|
|
2506
|
-
padding-
|
|
2403
|
+
padding-inline-end: 3rem;
|
|
2507
2404
|
min-height: 3.75rem;
|
|
2508
2405
|
transition: background-color 0.2s ease-out;
|
|
2509
2406
|
}
|
|
@@ -2534,15 +2431,6 @@ details.collapse summary {
|
|
|
2534
2431
|
--tw-rotate: 225deg;
|
|
2535
2432
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2536
2433
|
}
|
|
2537
|
-
[dir="rtl"] .collapse[open].collapse-arrow > .collapse-title:after,
|
|
2538
|
-
[dir="rtl"] .collapse-open.collapse-arrow > .collapse-title:after,
|
|
2539
|
-
[dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
|
|
2540
|
-
[dir="rtl"]
|
|
2541
|
-
.collapse-arrow:not(.collapse-close)
|
|
2542
|
-
input[type="checkbox"]:checked
|
|
2543
|
-
~ .collapse-title:after {
|
|
2544
|
-
--tw-rotate: 135deg;
|
|
2545
|
-
}
|
|
2546
2434
|
.collapse[open].collapse-plus > .collapse-title:after,
|
|
2547
2435
|
.collapse-open.collapse-plus > .collapse-title:after,
|
|
2548
2436
|
.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
|
|
@@ -2554,6 +2442,27 @@ details.collapse summary {
|
|
|
2554
2442
|
text-align: center;
|
|
2555
2443
|
transition: all 1s cubic-bezier(1, 0, 0, 1);
|
|
2556
2444
|
}
|
|
2445
|
+
.diff-item-1:after {
|
|
2446
|
+
border-radius: 9999px;
|
|
2447
|
+
border-width: 2px;
|
|
2448
|
+
--tw-border-opacity: 1;
|
|
2449
|
+
border-color: oklch(var(--b1) / var(--tw-border-opacity));
|
|
2450
|
+
background-color: oklch(var(--b1) / 0.5);
|
|
2451
|
+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
2452
|
+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
2453
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
2454
|
+
outline-style: solid;
|
|
2455
|
+
outline-offset: -3px;
|
|
2456
|
+
outline-color: oklch(var(--bc) / 0.05);
|
|
2457
|
+
--tw-backdrop-blur: blur(8px);
|
|
2458
|
+
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);
|
|
2459
|
+
translate: 50% -50%
|
|
2460
|
+
}
|
|
2461
|
+
.diff-item-2 {
|
|
2462
|
+
border-right-width: 2px;
|
|
2463
|
+
--tw-border-opacity: 1;
|
|
2464
|
+
border-color: oklch(var(--b1) / var(--tw-border-opacity))
|
|
2465
|
+
}
|
|
2557
2466
|
.divider {
|
|
2558
2467
|
margin-top: 1rem;
|
|
2559
2468
|
margin-bottom: 1rem;
|
|
@@ -2561,11 +2470,11 @@ details.collapse summary {
|
|
|
2561
2470
|
white-space: nowrap
|
|
2562
2471
|
}
|
|
2563
2472
|
.divider:before {
|
|
2564
|
-
background-color:
|
|
2473
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2565
2474
|
--tw-bg-opacity: 0.1
|
|
2566
2475
|
}
|
|
2567
2476
|
.divider:after {
|
|
2568
|
-
background-color:
|
|
2477
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2569
2478
|
--tw-bg-opacity: 0.1
|
|
2570
2479
|
}
|
|
2571
2480
|
.divider:not(:empty) {
|
|
@@ -2583,7 +2492,7 @@ details.collapse summary {
|
|
|
2583
2492
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2584
2493
|
}
|
|
2585
2494
|
.drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
|
|
2586
|
-
background-color:
|
|
2495
|
+
background-color: oklch(0 0 0/0.4);
|
|
2587
2496
|
}
|
|
2588
2497
|
.drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
|
|
2589
2498
|
outline-style: solid;
|
|
@@ -2628,25 +2537,25 @@ details.collapse summary {
|
|
|
2628
2537
|
}
|
|
2629
2538
|
.file-input {
|
|
2630
2539
|
overflow: hidden;
|
|
2540
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2631
2541
|
border-width: 1px;
|
|
2632
|
-
border-color:
|
|
2542
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2633
2543
|
--tw-border-opacity: 0;
|
|
2634
2544
|
--tw-bg-opacity: 1;
|
|
2635
|
-
background-color:
|
|
2545
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
2636
2546
|
font-size: 1rem;
|
|
2637
2547
|
line-height: 1.5rem;
|
|
2638
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2639
2548
|
}
|
|
2640
2549
|
.file-input::file-selector-button {
|
|
2641
2550
|
border-style: solid;
|
|
2642
2551
|
--tw-border-opacity: 1;
|
|
2643
|
-
border-color:
|
|
2552
|
+
border-color: oklch(var(--n) / var(--tw-border-opacity));
|
|
2644
2553
|
--tw-bg-opacity: 1;
|
|
2645
|
-
background-color:
|
|
2554
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2646
2555
|
font-weight: 600;
|
|
2647
2556
|
text-transform: uppercase;
|
|
2648
2557
|
--tw-text-opacity: 1;
|
|
2649
|
-
color:
|
|
2558
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
2650
2559
|
text-decoration-line: none;
|
|
2651
2560
|
border-width: var(--border-btn, 1px);
|
|
2652
2561
|
animation: button-pop var(--animation-btn, 0.25s) ease-out;
|
|
@@ -2659,7 +2568,7 @@ details.collapse summary {
|
|
|
2659
2568
|
outline-style: solid;
|
|
2660
2569
|
outline-width: 2px;
|
|
2661
2570
|
outline-offset: 2px;
|
|
2662
|
-
outline-color:
|
|
2571
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
2663
2572
|
}
|
|
2664
2573
|
.file-input-ghost {
|
|
2665
2574
|
--tw-bg-opacity: 0.05;
|
|
@@ -2667,7 +2576,7 @@ details.collapse summary {
|
|
|
2667
2576
|
.file-input-ghost:focus {
|
|
2668
2577
|
--tw-bg-opacity: 1;
|
|
2669
2578
|
--tw-text-opacity: 1;
|
|
2670
|
-
color:
|
|
2579
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
2671
2580
|
box-shadow: none;
|
|
2672
2581
|
}
|
|
2673
2582
|
.file-input-ghost::file-selector-button {
|
|
@@ -2678,128 +2587,128 @@ details.collapse summary {
|
|
|
2678
2587
|
}
|
|
2679
2588
|
.file-input-primary {
|
|
2680
2589
|
--tw-border-opacity: 1;
|
|
2681
|
-
border-color:
|
|
2590
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2682
2591
|
}
|
|
2683
2592
|
.file-input-primary:focus {
|
|
2684
|
-
outline-color:
|
|
2593
|
+
outline-color: oklch(var(--p) / 1);
|
|
2685
2594
|
}
|
|
2686
2595
|
.file-input-primary::file-selector-button {
|
|
2687
2596
|
--tw-border-opacity: 1;
|
|
2688
|
-
border-color:
|
|
2597
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2689
2598
|
--tw-bg-opacity: 1;
|
|
2690
|
-
background-color:
|
|
2599
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
2691
2600
|
--tw-text-opacity: 1;
|
|
2692
|
-
color:
|
|
2601
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
2693
2602
|
}
|
|
2694
2603
|
.file-input-secondary {
|
|
2695
2604
|
--tw-border-opacity: 1;
|
|
2696
|
-
border-color:
|
|
2605
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2697
2606
|
}
|
|
2698
2607
|
.file-input-secondary:focus {
|
|
2699
|
-
outline-color:
|
|
2608
|
+
outline-color: oklch(var(--s) / 1);
|
|
2700
2609
|
}
|
|
2701
2610
|
.file-input-secondary::file-selector-button {
|
|
2702
2611
|
--tw-border-opacity: 1;
|
|
2703
|
-
border-color:
|
|
2612
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2704
2613
|
--tw-bg-opacity: 1;
|
|
2705
|
-
background-color:
|
|
2614
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
2706
2615
|
--tw-text-opacity: 1;
|
|
2707
|
-
color:
|
|
2616
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
2708
2617
|
}
|
|
2709
2618
|
.file-input-accent {
|
|
2710
2619
|
--tw-border-opacity: 1;
|
|
2711
|
-
border-color:
|
|
2620
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2712
2621
|
}
|
|
2713
2622
|
.file-input-accent:focus {
|
|
2714
|
-
outline-color:
|
|
2623
|
+
outline-color: oklch(var(--a) / 1);
|
|
2715
2624
|
}
|
|
2716
2625
|
.file-input-accent::file-selector-button {
|
|
2717
2626
|
--tw-border-opacity: 1;
|
|
2718
|
-
border-color:
|
|
2627
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2719
2628
|
--tw-bg-opacity: 1;
|
|
2720
|
-
background-color:
|
|
2629
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
2721
2630
|
--tw-text-opacity: 1;
|
|
2722
|
-
color:
|
|
2631
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
2723
2632
|
}
|
|
2724
2633
|
.file-input-info {
|
|
2725
2634
|
--tw-border-opacity: 1;
|
|
2726
|
-
border-color:
|
|
2635
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2727
2636
|
}
|
|
2728
2637
|
.file-input-info:focus {
|
|
2729
|
-
outline-color:
|
|
2638
|
+
outline-color: oklch(var(--in) / 1);
|
|
2730
2639
|
}
|
|
2731
2640
|
.file-input-info::file-selector-button {
|
|
2732
2641
|
--tw-border-opacity: 1;
|
|
2733
|
-
border-color:
|
|
2642
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2734
2643
|
--tw-bg-opacity: 1;
|
|
2735
|
-
background-color:
|
|
2644
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
2736
2645
|
--tw-text-opacity: 1;
|
|
2737
|
-
color:
|
|
2646
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
2738
2647
|
}
|
|
2739
2648
|
.file-input-success {
|
|
2740
2649
|
--tw-border-opacity: 1;
|
|
2741
|
-
border-color:
|
|
2650
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2742
2651
|
}
|
|
2743
2652
|
.file-input-success:focus {
|
|
2744
|
-
outline-color:
|
|
2653
|
+
outline-color: oklch(var(--su) / 1);
|
|
2745
2654
|
}
|
|
2746
2655
|
.file-input-success::file-selector-button {
|
|
2747
2656
|
--tw-border-opacity: 1;
|
|
2748
|
-
border-color:
|
|
2657
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2749
2658
|
--tw-bg-opacity: 1;
|
|
2750
|
-
background-color:
|
|
2659
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
2751
2660
|
--tw-text-opacity: 1;
|
|
2752
|
-
color:
|
|
2661
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
2753
2662
|
}
|
|
2754
2663
|
.file-input-warning {
|
|
2755
2664
|
--tw-border-opacity: 1;
|
|
2756
|
-
border-color:
|
|
2665
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2757
2666
|
}
|
|
2758
2667
|
.file-input-warning:focus {
|
|
2759
|
-
outline-color:
|
|
2668
|
+
outline-color: oklch(var(--wa) / 1);
|
|
2760
2669
|
}
|
|
2761
2670
|
.file-input-warning::file-selector-button {
|
|
2762
2671
|
--tw-border-opacity: 1;
|
|
2763
|
-
border-color:
|
|
2672
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2764
2673
|
--tw-bg-opacity: 1;
|
|
2765
|
-
background-color:
|
|
2674
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
2766
2675
|
--tw-text-opacity: 1;
|
|
2767
|
-
color:
|
|
2676
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
2768
2677
|
}
|
|
2769
2678
|
.file-input-error {
|
|
2770
2679
|
--tw-border-opacity: 1;
|
|
2771
|
-
border-color:
|
|
2680
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2772
2681
|
}
|
|
2773
2682
|
.file-input-error:focus {
|
|
2774
|
-
outline-color:
|
|
2683
|
+
outline-color: oklch(var(--er) / 1);
|
|
2775
2684
|
}
|
|
2776
2685
|
.file-input-error::file-selector-button {
|
|
2777
2686
|
--tw-border-opacity: 1;
|
|
2778
|
-
border-color:
|
|
2687
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2779
2688
|
--tw-bg-opacity: 1;
|
|
2780
|
-
background-color:
|
|
2689
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
2781
2690
|
--tw-text-opacity: 1;
|
|
2782
|
-
color:
|
|
2691
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
2783
2692
|
}
|
|
2784
2693
|
.file-input-disabled,
|
|
2785
2694
|
.file-input[disabled] {
|
|
2786
2695
|
cursor: not-allowed;
|
|
2787
2696
|
--tw-border-opacity: 1;
|
|
2788
|
-
border-color:
|
|
2697
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2789
2698
|
--tw-bg-opacity: 1;
|
|
2790
|
-
background-color:
|
|
2699
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
2791
2700
|
--tw-text-opacity: 0.2;
|
|
2792
2701
|
}
|
|
2793
2702
|
.file-input-disabled::placeholder,
|
|
2794
2703
|
.file-input[disabled]::placeholder {
|
|
2795
|
-
color:
|
|
2704
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
2796
2705
|
--tw-placeholder-opacity: 0.2;
|
|
2797
2706
|
}
|
|
2798
2707
|
.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
|
|
2799
2708
|
--tw-border-opacity: 0;
|
|
2800
|
-
background-color:
|
|
2709
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2801
2710
|
--tw-bg-opacity: 0.2;
|
|
2802
|
-
color:
|
|
2711
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
2803
2712
|
--tw-text-opacity: 0.2;
|
|
2804
2713
|
}
|
|
2805
2714
|
.footer {
|
|
@@ -2827,22 +2736,22 @@ details.collapse summary {
|
|
|
2827
2736
|
font-size: 0.875rem;
|
|
2828
2737
|
line-height: 1.25rem;
|
|
2829
2738
|
--tw-text-opacity: 1;
|
|
2830
|
-
color:
|
|
2739
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
2831
2740
|
}
|
|
2832
2741
|
.label-text-alt {
|
|
2833
2742
|
font-size: 0.75rem;
|
|
2834
2743
|
line-height: 1rem;
|
|
2835
2744
|
--tw-text-opacity: 1;
|
|
2836
|
-
color:
|
|
2745
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
2837
2746
|
}
|
|
2838
2747
|
@media(hover:hover) {
|
|
2839
2748
|
.label a:hover {
|
|
2840
2749
|
--tw-text-opacity: 1;
|
|
2841
|
-
color:
|
|
2750
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
2842
2751
|
}
|
|
2843
2752
|
}
|
|
2844
2753
|
.hero-overlay {
|
|
2845
|
-
background-color:
|
|
2754
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2846
2755
|
--tw-bg-opacity: 0.5
|
|
2847
2756
|
}
|
|
2848
2757
|
.hero-content {
|
|
@@ -2851,14 +2760,14 @@ details.collapse summary {
|
|
|
2851
2760
|
padding: 1rem
|
|
2852
2761
|
}
|
|
2853
2762
|
.input {
|
|
2763
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2854
2764
|
border-width: 1px;
|
|
2855
|
-
border-color:
|
|
2765
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2856
2766
|
--tw-border-opacity: 0;
|
|
2857
2767
|
--tw-bg-opacity: 1;
|
|
2858
|
-
background-color:
|
|
2768
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
2859
2769
|
font-size: 1rem;
|
|
2860
2770
|
line-height: 1.5rem;
|
|
2861
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2862
2771
|
/* &::-webkit-calendar-picker-indicator {
|
|
2863
2772
|
display: none;
|
|
2864
2773
|
} */
|
|
@@ -2878,7 +2787,7 @@ details.collapse summary {
|
|
|
2878
2787
|
outline-style: solid;
|
|
2879
2788
|
outline-width: 2px;
|
|
2880
2789
|
outline-offset: 2px;
|
|
2881
|
-
outline-color:
|
|
2790
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
2882
2791
|
}
|
|
2883
2792
|
.input-ghost {
|
|
2884
2793
|
--tw-bg-opacity: 0.05;
|
|
@@ -2887,79 +2796,79 @@ details.collapse summary {
|
|
|
2887
2796
|
.input-ghost:focus-within {
|
|
2888
2797
|
--tw-bg-opacity: 1;
|
|
2889
2798
|
--tw-text-opacity: 1;
|
|
2890
|
-
color:
|
|
2799
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
2891
2800
|
box-shadow: none;
|
|
2892
2801
|
}
|
|
2893
2802
|
.input-primary {
|
|
2894
2803
|
--tw-border-opacity: 1;
|
|
2895
|
-
border-color:
|
|
2804
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2896
2805
|
}
|
|
2897
2806
|
.input-primary:focus,
|
|
2898
2807
|
.input-primary:focus-within {
|
|
2899
|
-
outline-color:
|
|
2808
|
+
outline-color: oklch(var(--p) / 1);
|
|
2900
2809
|
}
|
|
2901
2810
|
.input-secondary {
|
|
2902
2811
|
--tw-border-opacity: 1;
|
|
2903
|
-
border-color:
|
|
2812
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2904
2813
|
}
|
|
2905
2814
|
.input-secondary:focus,
|
|
2906
2815
|
.input-secondary:focus-within {
|
|
2907
|
-
outline-color:
|
|
2816
|
+
outline-color: oklch(var(--s) / 1);
|
|
2908
2817
|
}
|
|
2909
2818
|
.input-accent {
|
|
2910
2819
|
--tw-border-opacity: 1;
|
|
2911
|
-
border-color:
|
|
2820
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2912
2821
|
}
|
|
2913
2822
|
.input-accent:focus,
|
|
2914
2823
|
.input-accent:focus-within {
|
|
2915
|
-
outline-color:
|
|
2824
|
+
outline-color: oklch(var(--a) / 1);
|
|
2916
2825
|
}
|
|
2917
2826
|
.input-info {
|
|
2918
2827
|
--tw-border-opacity: 1;
|
|
2919
|
-
border-color:
|
|
2828
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2920
2829
|
}
|
|
2921
2830
|
.input-info:focus,
|
|
2922
2831
|
.input-info:focus-within {
|
|
2923
|
-
outline-color:
|
|
2832
|
+
outline-color: oklch(var(--in) / 1);
|
|
2924
2833
|
}
|
|
2925
2834
|
.input-success {
|
|
2926
2835
|
--tw-border-opacity: 1;
|
|
2927
|
-
border-color:
|
|
2836
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2928
2837
|
}
|
|
2929
2838
|
.input-success:focus,
|
|
2930
2839
|
.input-success:focus-within {
|
|
2931
|
-
outline-color:
|
|
2840
|
+
outline-color: oklch(var(--su) / 1);
|
|
2932
2841
|
}
|
|
2933
2842
|
.input-warning {
|
|
2934
2843
|
--tw-border-opacity: 1;
|
|
2935
|
-
border-color:
|
|
2844
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2936
2845
|
}
|
|
2937
2846
|
.input-warning:focus,
|
|
2938
2847
|
.input-warning:focus-within {
|
|
2939
|
-
outline-color:
|
|
2848
|
+
outline-color: oklch(var(--wa) / 1);
|
|
2940
2849
|
}
|
|
2941
2850
|
.input-error {
|
|
2942
2851
|
--tw-border-opacity: 1;
|
|
2943
|
-
border-color:
|
|
2852
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2944
2853
|
}
|
|
2945
2854
|
.input-error:focus,
|
|
2946
2855
|
.input-error:focus-within {
|
|
2947
|
-
outline-color:
|
|
2856
|
+
outline-color: oklch(var(--er) / 1);
|
|
2948
2857
|
}
|
|
2949
2858
|
.input-disabled,
|
|
2950
2859
|
.input:disabled,
|
|
2951
2860
|
.input[disabled] {
|
|
2952
2861
|
cursor: not-allowed;
|
|
2953
2862
|
--tw-border-opacity: 1;
|
|
2954
|
-
border-color:
|
|
2863
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2955
2864
|
--tw-bg-opacity: 1;
|
|
2956
|
-
background-color:
|
|
2865
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
2957
2866
|
--tw-text-opacity: 0.2;
|
|
2958
2867
|
}
|
|
2959
2868
|
.input-disabled::placeholder,
|
|
2960
2869
|
.input:disabled::placeholder,
|
|
2961
2870
|
.input[disabled]::placeholder {
|
|
2962
|
-
color:
|
|
2871
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
2963
2872
|
--tw-placeholder-opacity: 0.2;
|
|
2964
2873
|
}
|
|
2965
2874
|
.join {
|
|
@@ -2968,102 +2877,94 @@ details.collapse summary {
|
|
|
2968
2877
|
.join > :where(*:not(:first-child)) {
|
|
2969
2878
|
margin-top: 0px;
|
|
2970
2879
|
margin-bottom: 0px;
|
|
2971
|
-
margin-
|
|
2880
|
+
margin-inline-start: -1px
|
|
2972
2881
|
}
|
|
2973
2882
|
.join-item:focus {
|
|
2974
2883
|
isolation: isolate
|
|
2975
2884
|
}
|
|
2976
2885
|
.kbd {
|
|
2886
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2977
2887
|
border-width: 1px;
|
|
2978
|
-
border-color:
|
|
2888
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2979
2889
|
--tw-border-opacity: 0.2;
|
|
2980
2890
|
--tw-bg-opacity: 1;
|
|
2981
|
-
background-color:
|
|
2891
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
2982
2892
|
padding-left: 0.5rem;
|
|
2983
2893
|
padding-right: 0.5rem;
|
|
2984
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2985
2894
|
border-bottom-width: 2px;
|
|
2986
2895
|
min-height: 2.2em;
|
|
2987
2896
|
min-width: 2.2em
|
|
2988
2897
|
}
|
|
2989
2898
|
.link-primary {
|
|
2990
2899
|
--tw-text-opacity: 1;
|
|
2991
|
-
color:
|
|
2900
|
+
color: oklch(var(--p) / var(--tw-text-opacity));
|
|
2992
2901
|
}
|
|
2993
2902
|
@media(hover:hover) {
|
|
2994
2903
|
.link-primary:hover {
|
|
2995
|
-
--tw-text-opacity
|
|
2996
|
-
color: hsl(var(--pf) / var(--tw-text-opacity));
|
|
2904
|
+
color: color-mix(in oklab,oklch(var(--p)/var(--tw-text-opacity))80%,black);
|
|
2997
2905
|
}
|
|
2998
2906
|
}
|
|
2999
2907
|
.link-secondary {
|
|
3000
2908
|
--tw-text-opacity: 1;
|
|
3001
|
-
color:
|
|
2909
|
+
color: oklch(var(--s) / var(--tw-text-opacity));
|
|
3002
2910
|
}
|
|
3003
2911
|
@media(hover:hover) {
|
|
3004
2912
|
.link-secondary:hover {
|
|
3005
|
-
--tw-text-opacity
|
|
3006
|
-
color: hsl(var(--sf) / var(--tw-text-opacity));
|
|
2913
|
+
color: color-mix(in oklab,oklch(var(--s)/var(--tw-text-opacity))80%,black);
|
|
3007
2914
|
}
|
|
3008
2915
|
}
|
|
3009
2916
|
.link-accent {
|
|
3010
2917
|
--tw-text-opacity: 1;
|
|
3011
|
-
color:
|
|
2918
|
+
color: oklch(var(--a) / var(--tw-text-opacity));
|
|
3012
2919
|
}
|
|
3013
2920
|
@media(hover:hover) {
|
|
3014
2921
|
.link-accent:hover {
|
|
3015
|
-
--tw-text-opacity
|
|
3016
|
-
color: hsl(var(--af) / var(--tw-text-opacity));
|
|
2922
|
+
color: color-mix(in oklab,oklch(var(--a)/var(--tw-text-opacity))80%,black);
|
|
3017
2923
|
}
|
|
3018
2924
|
}
|
|
3019
2925
|
.link-neutral {
|
|
3020
2926
|
--tw-text-opacity: 1;
|
|
3021
|
-
color:
|
|
2927
|
+
color: oklch(var(--n) / var(--tw-text-opacity));
|
|
3022
2928
|
}
|
|
3023
2929
|
@media(hover:hover) {
|
|
3024
2930
|
.link-neutral:hover {
|
|
3025
|
-
--tw-text-opacity
|
|
3026
|
-
color: hsl(var(--nf) / var(--tw-text-opacity));
|
|
2931
|
+
color: color-mix(in oklab,oklch(var(--n)/var(--tw-text-opacity))80%,black);
|
|
3027
2932
|
}
|
|
3028
2933
|
}
|
|
3029
2934
|
.link-success {
|
|
3030
2935
|
--tw-text-opacity: 1;
|
|
3031
|
-
color:
|
|
2936
|
+
color: oklch(var(--su) / var(--tw-text-opacity));
|
|
3032
2937
|
}
|
|
3033
2938
|
@media(hover:hover) {
|
|
3034
2939
|
.link-success:hover {
|
|
3035
|
-
--tw-text-opacity
|
|
3036
|
-
color: hsl(var(--su) / var(--tw-text-opacity));
|
|
2940
|
+
color: color-mix(in oklab,oklch(var(--su)/var(--tw-text-opacity))80%,black);
|
|
3037
2941
|
}
|
|
3038
2942
|
}
|
|
3039
2943
|
.link-info {
|
|
3040
2944
|
--tw-text-opacity: 1;
|
|
3041
|
-
color:
|
|
2945
|
+
color: oklch(var(--in) / var(--tw-text-opacity));
|
|
3042
2946
|
}
|
|
3043
2947
|
@media(hover:hover) {
|
|
3044
2948
|
.link-info:hover {
|
|
3045
|
-
--tw-text-opacity
|
|
3046
|
-
color: hsl(var(--in) / var(--tw-text-opacity));
|
|
2949
|
+
color: color-mix(in oklab,oklch(var(--in)/var(--tw-text-opacity))80%,black);
|
|
3047
2950
|
}
|
|
3048
2951
|
}
|
|
3049
2952
|
.link-warning {
|
|
3050
2953
|
--tw-text-opacity: 1;
|
|
3051
|
-
color:
|
|
2954
|
+
color: oklch(var(--wa) / var(--tw-text-opacity));
|
|
3052
2955
|
}
|
|
3053
2956
|
@media(hover:hover) {
|
|
3054
2957
|
.link-warning:hover {
|
|
3055
|
-
--tw-text-opacity
|
|
3056
|
-
color: hsl(var(--wa) / var(--tw-text-opacity));
|
|
2958
|
+
color: color-mix(in oklab,oklch(var(--wa)/var(--tw-text-opacity))80%,black);
|
|
3057
2959
|
}
|
|
3058
2960
|
}
|
|
3059
2961
|
.link-error {
|
|
3060
2962
|
--tw-text-opacity: 1;
|
|
3061
|
-
color:
|
|
2963
|
+
color: oklch(var(--er) / var(--tw-text-opacity));
|
|
3062
2964
|
}
|
|
3063
2965
|
@media(hover:hover) {
|
|
3064
2966
|
.link-error:hover {
|
|
3065
|
-
--tw-text-opacity
|
|
3066
|
-
color: hsl(var(--er) / var(--tw-text-opacity));
|
|
2967
|
+
color: color-mix(in oklab,oklch(var(--er)/var(--tw-text-opacity))80%,black);
|
|
3067
2968
|
}
|
|
3068
2969
|
}
|
|
3069
2970
|
.link:focus {
|
|
@@ -3176,35 +3077,35 @@ details.collapse summary {
|
|
|
3176
3077
|
padding: 0.5rem;
|
|
3177
3078
|
}
|
|
3178
3079
|
:where(.menu li:empty) {
|
|
3179
|
-
background-color:
|
|
3080
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3180
3081
|
margin: 0.5rem 1rem;
|
|
3181
3082
|
height: 1px;
|
|
3182
3083
|
}
|
|
3183
3084
|
.menu :where(li ul) {
|
|
3184
|
-
margin-
|
|
3185
|
-
padding-
|
|
3085
|
+
margin-inline-start: 1rem;
|
|
3086
|
+
padding-inline-start: 0.5rem;
|
|
3186
3087
|
}
|
|
3187
3088
|
.menu :where(li ul):before {
|
|
3188
3089
|
position: absolute;
|
|
3189
3090
|
bottom: 0.75rem;
|
|
3190
|
-
|
|
3091
|
+
inset-inline-start: 0px;
|
|
3191
3092
|
top: 0.75rem;
|
|
3192
3093
|
width: 1px;
|
|
3193
|
-
background-color:
|
|
3094
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3194
3095
|
content: "";
|
|
3195
3096
|
}
|
|
3196
3097
|
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
|
|
3197
3098
|
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
3099
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
3198
3100
|
padding-left: 1rem;
|
|
3199
3101
|
padding-right: 1rem;
|
|
3200
3102
|
padding-top: 0.5rem;
|
|
3201
3103
|
padding-bottom: 0.5rem;
|
|
3202
|
-
text-align:
|
|
3104
|
+
text-align: start;
|
|
3203
3105
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
3204
3106
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3205
3107
|
transition-duration: 200ms;
|
|
3206
3108
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3207
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
3208
3109
|
text-wrap: balance;
|
|
3209
3110
|
}
|
|
3210
3111
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
|
|
@@ -3214,18 +3115,18 @@ details.collapse summary {
|
|
|
3214
3115
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
|
|
3215
3116
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
|
|
3216
3117
|
cursor: pointer;
|
|
3217
|
-
background-color:
|
|
3118
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3218
3119
|
--tw-text-opacity: 1;
|
|
3219
|
-
color:
|
|
3120
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
3220
3121
|
outline: 2px solid transparent;
|
|
3221
3122
|
outline-offset: 2px;
|
|
3222
3123
|
}
|
|
3223
3124
|
@media (hover: hover) {
|
|
3224
3125
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
|
|
3225
3126
|
cursor: pointer;
|
|
3226
|
-
background-color:
|
|
3127
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3227
3128
|
--tw-text-opacity: 1;
|
|
3228
|
-
color:
|
|
3129
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
3229
3130
|
outline: 2px solid transparent;
|
|
3230
3131
|
outline-offset: 2px;
|
|
3231
3132
|
}
|
|
@@ -3234,22 +3135,22 @@ details.collapse summary {
|
|
|
3234
3135
|
.menu li > *:not(ul):not(.menu-title):not(details).active,
|
|
3235
3136
|
.menu li > details > summary:active {
|
|
3236
3137
|
--tw-bg-opacity: 1;
|
|
3237
|
-
background-color:
|
|
3138
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
3238
3139
|
--tw-text-opacity: 1;
|
|
3239
|
-
color:
|
|
3140
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
3240
3141
|
}
|
|
3241
3142
|
@media(hover:hover) {
|
|
3242
3143
|
.menu li > *:not(ul):not(.menu-title):not(details):active,
|
|
3243
3144
|
.menu li > *:not(ul):not(.menu-title):not(details).active,
|
|
3244
3145
|
.menu li > details > summary:active {
|
|
3245
3146
|
--tw-bg-opacity: 1;
|
|
3246
|
-
background-color:
|
|
3147
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
3247
3148
|
--tw-text-opacity: 1;
|
|
3248
|
-
color:
|
|
3149
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
3249
3150
|
}
|
|
3250
3151
|
}
|
|
3251
3152
|
.menu li.disabled {
|
|
3252
|
-
color:
|
|
3153
|
+
color: oklch(var(--bc) / 0.3);
|
|
3253
3154
|
}
|
|
3254
3155
|
.menu :where(li > details > summary)::-webkit-details-marker {
|
|
3255
3156
|
display: none;
|
|
@@ -3283,17 +3184,18 @@ details.collapse summary {
|
|
|
3283
3184
|
font-size: 0.875rem;
|
|
3284
3185
|
line-height: 1.25rem;
|
|
3285
3186
|
font-weight: 700;
|
|
3286
|
-
color:
|
|
3187
|
+
color: oklch(var(--bc) / 0.4);
|
|
3287
3188
|
}
|
|
3288
3189
|
.mockup-code {
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3190
|
+
min-width: 18rem;
|
|
3191
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3192
|
+
--tw-bg-opacity: 1;
|
|
3193
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
3194
|
+
padding-top: 1.25rem;
|
|
3195
|
+
padding-bottom: 1.25rem;
|
|
3196
|
+
--tw-text-opacity: 1;
|
|
3197
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
3198
|
+
direction: ltr;
|
|
3297
3199
|
}
|
|
3298
3200
|
.mockup-code:before {
|
|
3299
3201
|
content: "";
|
|
@@ -3309,7 +3211,7 @@ details.collapse summary {
|
|
|
3309
3211
|
4.2em 0;
|
|
3310
3212
|
}
|
|
3311
3213
|
.mockup-code pre {
|
|
3312
|
-
|
|
3214
|
+
padding-right: 1.25rem;
|
|
3313
3215
|
}
|
|
3314
3216
|
.mockup-code pre:before {
|
|
3315
3217
|
content: "";
|
|
@@ -3321,8 +3223,10 @@ details.collapse summary {
|
|
|
3321
3223
|
opacity: 0.5;
|
|
3322
3224
|
}
|
|
3323
3225
|
.mockup-window {
|
|
3324
|
-
|
|
3325
|
-
|
|
3226
|
+
display: flex;
|
|
3227
|
+
flex-direction: column;
|
|
3228
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3229
|
+
padding-top: 1.25rem;
|
|
3326
3230
|
}
|
|
3327
3231
|
.mockup-window:before {
|
|
3328
3232
|
content: "";
|
|
@@ -3330,8 +3234,15 @@ details.collapse summary {
|
|
|
3330
3234
|
display: block;
|
|
3331
3235
|
aspect-ratio: 1 / 1;
|
|
3332
3236
|
height: 0.75rem;
|
|
3237
|
+
flex-shrink: 0;
|
|
3238
|
+
align-self: flex-start;
|
|
3333
3239
|
border-radius: 9999px;
|
|
3334
3240
|
opacity: 0.3;
|
|
3241
|
+
}
|
|
3242
|
+
:is([dir="rtl"] .mockup-window):before {
|
|
3243
|
+
align-self: flex-end;
|
|
3244
|
+
}
|
|
3245
|
+
.mockup-window:before {
|
|
3335
3246
|
box-shadow:
|
|
3336
3247
|
1.4em 0,
|
|
3337
3248
|
2.8em 0,
|
|
@@ -3385,15 +3296,18 @@ details.collapse summary {
|
|
|
3385
3296
|
margin-top: -25px;
|
|
3386
3297
|
}
|
|
3387
3298
|
.mockup-browser {
|
|
3388
|
-
|
|
3299
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3389
3300
|
}
|
|
3390
3301
|
.mockup-browser .mockup-browser-toolbar {
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3302
|
+
margin-top: 0.75rem;
|
|
3303
|
+
margin-bottom: 0.75rem;
|
|
3304
|
+
display: inline-flex;
|
|
3305
|
+
width: 100%;
|
|
3306
|
+
align-items: center;
|
|
3307
|
+
padding-right: 1.4em;
|
|
3308
|
+
}
|
|
3309
|
+
:is([dir="rtl"] .mockup-browser .mockup-browser-toolbar) {
|
|
3310
|
+
flex-direction: row-reverse;
|
|
3397
3311
|
}
|
|
3398
3312
|
.mockup-browser .mockup-browser-toolbar:before {
|
|
3399
3313
|
content: "";
|
|
@@ -3409,18 +3323,19 @@ details.collapse summary {
|
|
|
3409
3323
|
4.2em 0;
|
|
3410
3324
|
}
|
|
3411
3325
|
.mockup-browser .mockup-browser-toolbar .input {
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3326
|
+
position: relative;
|
|
3327
|
+
margin-left: auto;
|
|
3328
|
+
margin-right: auto;
|
|
3329
|
+
display: block;
|
|
3330
|
+
height: 1.75rem;
|
|
3331
|
+
width: 24rem;
|
|
3332
|
+
overflow: hidden;
|
|
3333
|
+
text-overflow: ellipsis;
|
|
3334
|
+
white-space: nowrap;
|
|
3335
|
+
--tw-bg-opacity: 1;
|
|
3336
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
3337
|
+
padding-left: 2rem;
|
|
3338
|
+
direction: ltr;
|
|
3424
3339
|
}
|
|
3425
3340
|
.mockup-browser .mockup-browser-toolbar .input:before {
|
|
3426
3341
|
content: "";
|
|
@@ -3481,17 +3396,17 @@ details.collapse summary {
|
|
|
3481
3396
|
--tw-scale-x: .9;
|
|
3482
3397
|
--tw-scale-y: .9;
|
|
3483
3398
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
3399
|
+
border-bottom-right-radius: var(--rounded-box, 1rem);
|
|
3400
|
+
border-bottom-left-radius: var(--rounded-box, 1rem);
|
|
3401
|
+
border-top-left-radius: var(--rounded-box, 1rem);
|
|
3402
|
+
border-top-right-radius: var(--rounded-box, 1rem);
|
|
3484
3403
|
--tw-bg-opacity: 1;
|
|
3485
|
-
background-color:
|
|
3404
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
3486
3405
|
padding: 1.5rem;
|
|
3487
3406
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
3488
3407
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3489
3408
|
transition-duration: 200ms;
|
|
3490
3409
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3491
|
-
border-top-left-radius: var(--rounded-box, 1rem);
|
|
3492
|
-
border-top-right-radius: var(--rounded-box, 1rem);
|
|
3493
|
-
border-bottom-left-radius: var(--rounded-box, 1rem);
|
|
3494
|
-
border-bottom-right-radius: var(--rounded-box, 1rem);
|
|
3495
3410
|
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
|
|
3496
3411
|
overflow-y: auto;
|
|
3497
3412
|
overscroll-behavior: contain;
|
|
@@ -3526,109 +3441,109 @@ details.collapse summary {
|
|
|
3526
3441
|
}
|
|
3527
3442
|
.progress {
|
|
3528
3443
|
height: 0.5rem;
|
|
3529
|
-
background-color: hsl(var(--bc) / 0.2);
|
|
3530
3444
|
border-radius: var(--rounded-box, 1rem);
|
|
3445
|
+
background-color: oklch(var(--bc) / 0.2);
|
|
3531
3446
|
}
|
|
3532
3447
|
.progress::-moz-progress-bar {
|
|
3533
|
-
--tw-bg-opacity: 1;
|
|
3534
|
-
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
3535
3448
|
border-radius: var(--rounded-box, 1rem);
|
|
3449
|
+
--tw-bg-opacity: 1;
|
|
3450
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3536
3451
|
}
|
|
3537
3452
|
.progress-primary::-moz-progress-bar {
|
|
3538
|
-
--tw-bg-opacity: 1;
|
|
3539
|
-
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
3540
3453
|
border-radius: var(--rounded-box, 1rem);
|
|
3454
|
+
--tw-bg-opacity: 1;
|
|
3455
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
3541
3456
|
}
|
|
3542
3457
|
.progress-secondary::-moz-progress-bar {
|
|
3543
|
-
--tw-bg-opacity: 1;
|
|
3544
|
-
background-color: hsl(var(--s) / var(--tw-bg-opacity));
|
|
3545
3458
|
border-radius: var(--rounded-box, 1rem);
|
|
3459
|
+
--tw-bg-opacity: 1;
|
|
3460
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
3546
3461
|
}
|
|
3547
3462
|
.progress-accent::-moz-progress-bar {
|
|
3548
|
-
--tw-bg-opacity: 1;
|
|
3549
|
-
background-color: hsl(var(--a) / var(--tw-bg-opacity));
|
|
3550
3463
|
border-radius: var(--rounded-box, 1rem);
|
|
3464
|
+
--tw-bg-opacity: 1;
|
|
3465
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
3551
3466
|
}
|
|
3552
3467
|
.progress-info::-moz-progress-bar {
|
|
3553
|
-
--tw-bg-opacity: 1;
|
|
3554
|
-
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
3555
3468
|
border-radius: var(--rounded-box, 1rem);
|
|
3469
|
+
--tw-bg-opacity: 1;
|
|
3470
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
3556
3471
|
}
|
|
3557
3472
|
.progress-success::-moz-progress-bar {
|
|
3558
|
-
--tw-bg-opacity: 1;
|
|
3559
|
-
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
3560
3473
|
border-radius: var(--rounded-box, 1rem);
|
|
3474
|
+
--tw-bg-opacity: 1;
|
|
3475
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
3561
3476
|
}
|
|
3562
3477
|
.progress-warning::-moz-progress-bar {
|
|
3563
|
-
--tw-bg-opacity: 1;
|
|
3564
|
-
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
3565
3478
|
border-radius: var(--rounded-box, 1rem);
|
|
3479
|
+
--tw-bg-opacity: 1;
|
|
3480
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
3566
3481
|
}
|
|
3567
3482
|
.progress-error::-moz-progress-bar {
|
|
3568
|
-
--tw-bg-opacity: 1;
|
|
3569
|
-
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
3570
3483
|
border-radius: var(--rounded-box, 1rem);
|
|
3484
|
+
--tw-bg-opacity: 1;
|
|
3485
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
3571
3486
|
}
|
|
3572
3487
|
.progress:indeterminate {
|
|
3573
|
-
--progress-color:
|
|
3488
|
+
--progress-color: oklch(var(--bc));
|
|
3574
3489
|
}
|
|
3575
3490
|
.progress-primary:indeterminate {
|
|
3576
|
-
--progress-color:
|
|
3491
|
+
--progress-color: oklch(var(--p));
|
|
3577
3492
|
}
|
|
3578
3493
|
.progress-secondary:indeterminate {
|
|
3579
|
-
--progress-color:
|
|
3494
|
+
--progress-color: oklch(var(--s));
|
|
3580
3495
|
}
|
|
3581
3496
|
.progress-accent:indeterminate {
|
|
3582
|
-
--progress-color:
|
|
3497
|
+
--progress-color: oklch(var(--a));
|
|
3583
3498
|
}
|
|
3584
3499
|
.progress-info:indeterminate {
|
|
3585
|
-
--progress-color:
|
|
3500
|
+
--progress-color: oklch(var(--in));
|
|
3586
3501
|
}
|
|
3587
3502
|
.progress-success:indeterminate {
|
|
3588
|
-
--progress-color:
|
|
3503
|
+
--progress-color: oklch(var(--su));
|
|
3589
3504
|
}
|
|
3590
3505
|
.progress-warning:indeterminate {
|
|
3591
|
-
--progress-color:
|
|
3506
|
+
--progress-color: oklch(var(--wa));
|
|
3592
3507
|
}
|
|
3593
3508
|
.progress-error:indeterminate {
|
|
3594
|
-
--progress-color:
|
|
3509
|
+
--progress-color: oklch(var(--er));
|
|
3595
3510
|
}
|
|
3596
3511
|
.progress::-webkit-progress-bar {
|
|
3597
|
-
background-color: transparent;
|
|
3598
3512
|
border-radius: var(--rounded-box, 1rem);
|
|
3513
|
+
background-color: transparent;
|
|
3599
3514
|
}
|
|
3600
3515
|
.progress::-webkit-progress-value {
|
|
3601
|
-
--tw-bg-opacity: 1;
|
|
3602
|
-
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
3603
3516
|
border-radius: var(--rounded-box, 1rem);
|
|
3517
|
+
--tw-bg-opacity: 1;
|
|
3518
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3604
3519
|
}
|
|
3605
3520
|
.progress-primary::-webkit-progress-value {
|
|
3606
3521
|
--tw-bg-opacity: 1;
|
|
3607
|
-
background-color:
|
|
3522
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
3608
3523
|
}
|
|
3609
3524
|
.progress-secondary::-webkit-progress-value {
|
|
3610
3525
|
--tw-bg-opacity: 1;
|
|
3611
|
-
background-color:
|
|
3526
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
3612
3527
|
}
|
|
3613
3528
|
.progress-accent::-webkit-progress-value {
|
|
3614
3529
|
--tw-bg-opacity: 1;
|
|
3615
|
-
background-color:
|
|
3530
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
3616
3531
|
}
|
|
3617
3532
|
.progress-info::-webkit-progress-value {
|
|
3618
3533
|
--tw-bg-opacity: 1;
|
|
3619
|
-
background-color:
|
|
3534
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
3620
3535
|
}
|
|
3621
3536
|
.progress-success::-webkit-progress-value {
|
|
3622
3537
|
--tw-bg-opacity: 1;
|
|
3623
|
-
background-color:
|
|
3538
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
3624
3539
|
}
|
|
3625
3540
|
.progress-warning::-webkit-progress-value {
|
|
3626
3541
|
--tw-bg-opacity: 1;
|
|
3627
|
-
background-color:
|
|
3542
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
3628
3543
|
}
|
|
3629
3544
|
.progress-error::-webkit-progress-value {
|
|
3630
3545
|
--tw-bg-opacity: 1;
|
|
3631
|
-
background-color:
|
|
3546
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
3632
3547
|
}
|
|
3633
3548
|
|
|
3634
3549
|
.progress:indeterminate {
|
|
@@ -3679,184 +3594,184 @@ details.collapse summary {
|
|
|
3679
3594
|
appearance: none;
|
|
3680
3595
|
border-radius: 9999px;
|
|
3681
3596
|
border-width: 1px;
|
|
3682
|
-
border-color:
|
|
3597
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
3683
3598
|
--tw-border-opacity: 0.2;
|
|
3684
3599
|
}
|
|
3685
3600
|
.radio:focus-visible {
|
|
3686
3601
|
outline-style: solid;
|
|
3687
3602
|
outline-width: 2px;
|
|
3688
3603
|
outline-offset: 2px;
|
|
3689
|
-
outline-color:
|
|
3604
|
+
outline-color: oklch(var(--bc) / 1);
|
|
3690
3605
|
}
|
|
3691
3606
|
.radio:checked,
|
|
3692
3607
|
.radio[aria-checked="true"] {
|
|
3693
3608
|
--tw-bg-opacity: 1;
|
|
3694
|
-
background-color:
|
|
3609
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3695
3610
|
animation: radiomark var(--animation-input, 0.2s) ease-out;
|
|
3696
3611
|
box-shadow:
|
|
3697
|
-
0 0 0 4px
|
|
3698
|
-
0 0 0 4px
|
|
3612
|
+
0 0 0 4px oklch(var(--b1)) inset,
|
|
3613
|
+
0 0 0 4px oklch(var(--b1)) inset;
|
|
3699
3614
|
}
|
|
3700
3615
|
.radio-primary {
|
|
3701
3616
|
--chkbg: var(--p);
|
|
3702
3617
|
--tw-border-opacity: 1;
|
|
3703
|
-
border-color:
|
|
3618
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
3704
3619
|
}
|
|
3705
3620
|
@media(hover:hover) {
|
|
3706
3621
|
.radio-primary:hover {
|
|
3707
3622
|
--tw-border-opacity: 1;
|
|
3708
|
-
border-color:
|
|
3623
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
3709
3624
|
}
|
|
3710
3625
|
}
|
|
3711
3626
|
.radio-primary:focus-visible {
|
|
3712
|
-
outline-color:
|
|
3627
|
+
outline-color: oklch(var(--p) / 1);
|
|
3713
3628
|
}
|
|
3714
3629
|
.radio-primary:checked,
|
|
3715
3630
|
.radio-primary[aria-checked="true"] {
|
|
3716
3631
|
--tw-border-opacity: 1;
|
|
3717
|
-
border-color:
|
|
3632
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
3718
3633
|
--tw-bg-opacity: 1;
|
|
3719
|
-
background-color:
|
|
3634
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
3720
3635
|
--tw-text-opacity: 1;
|
|
3721
|
-
color:
|
|
3636
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
3722
3637
|
}
|
|
3723
3638
|
.radio-secondary {
|
|
3724
3639
|
--chkbg: var(--s);
|
|
3725
3640
|
--tw-border-opacity: 1;
|
|
3726
|
-
border-color:
|
|
3641
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
3727
3642
|
}
|
|
3728
3643
|
@media(hover:hover) {
|
|
3729
3644
|
.radio-secondary:hover {
|
|
3730
3645
|
--tw-border-opacity: 1;
|
|
3731
|
-
border-color:
|
|
3646
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
3732
3647
|
}
|
|
3733
3648
|
}
|
|
3734
3649
|
.radio-secondary:focus-visible {
|
|
3735
|
-
outline-color:
|
|
3650
|
+
outline-color: oklch(var(--s) / 1);
|
|
3736
3651
|
}
|
|
3737
3652
|
.radio-secondary:checked,
|
|
3738
3653
|
.radio-secondary[aria-checked="true"] {
|
|
3739
3654
|
--tw-border-opacity: 1;
|
|
3740
|
-
border-color:
|
|
3655
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
3741
3656
|
--tw-bg-opacity: 1;
|
|
3742
|
-
background-color:
|
|
3657
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
3743
3658
|
--tw-text-opacity: 1;
|
|
3744
|
-
color:
|
|
3659
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
3745
3660
|
}
|
|
3746
3661
|
.radio-accent {
|
|
3747
3662
|
--chkbg: var(--a);
|
|
3748
3663
|
--tw-border-opacity: 1;
|
|
3749
|
-
border-color:
|
|
3664
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
3750
3665
|
}
|
|
3751
3666
|
@media(hover:hover) {
|
|
3752
3667
|
.radio-accent:hover {
|
|
3753
3668
|
--tw-border-opacity: 1;
|
|
3754
|
-
border-color:
|
|
3669
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
3755
3670
|
}
|
|
3756
3671
|
}
|
|
3757
3672
|
.radio-accent:focus-visible {
|
|
3758
|
-
outline-color:
|
|
3673
|
+
outline-color: oklch(var(--a) / 1);
|
|
3759
3674
|
}
|
|
3760
3675
|
.radio-accent:checked,
|
|
3761
3676
|
.radio-accent[aria-checked="true"] {
|
|
3762
3677
|
--tw-border-opacity: 1;
|
|
3763
|
-
border-color:
|
|
3678
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
3764
3679
|
--tw-bg-opacity: 1;
|
|
3765
|
-
background-color:
|
|
3680
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
3766
3681
|
--tw-text-opacity: 1;
|
|
3767
|
-
color:
|
|
3682
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
3768
3683
|
}
|
|
3769
3684
|
.radio-success {
|
|
3770
3685
|
--chkbg: var(--su);
|
|
3771
3686
|
--tw-border-opacity: 1;
|
|
3772
|
-
border-color:
|
|
3687
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
3773
3688
|
}
|
|
3774
3689
|
@media(hover:hover) {
|
|
3775
3690
|
.radio-success:hover {
|
|
3776
3691
|
--tw-border-opacity: 1;
|
|
3777
|
-
border-color:
|
|
3692
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
3778
3693
|
}
|
|
3779
3694
|
}
|
|
3780
3695
|
.radio-success:focus-visible {
|
|
3781
|
-
outline-color:
|
|
3696
|
+
outline-color: oklch(var(--su) / 1);
|
|
3782
3697
|
}
|
|
3783
3698
|
.radio-success:checked,
|
|
3784
3699
|
.radio-success[aria-checked="true"] {
|
|
3785
3700
|
--tw-border-opacity: 1;
|
|
3786
|
-
border-color:
|
|
3701
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
3787
3702
|
--tw-bg-opacity: 1;
|
|
3788
|
-
background-color:
|
|
3703
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
3789
3704
|
--tw-text-opacity: 1;
|
|
3790
|
-
color:
|
|
3705
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
3791
3706
|
}
|
|
3792
3707
|
.radio-warning {
|
|
3793
3708
|
--chkbg: var(--wa);
|
|
3794
3709
|
--tw-border-opacity: 1;
|
|
3795
|
-
border-color:
|
|
3710
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
3796
3711
|
}
|
|
3797
3712
|
@media(hover:hover) {
|
|
3798
3713
|
.radio-warning:hover {
|
|
3799
3714
|
--tw-border-opacity: 1;
|
|
3800
|
-
border-color:
|
|
3715
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
3801
3716
|
}
|
|
3802
3717
|
}
|
|
3803
3718
|
.radio-warning:focus-visible {
|
|
3804
|
-
outline-color:
|
|
3719
|
+
outline-color: oklch(var(--wa) / 1);
|
|
3805
3720
|
}
|
|
3806
3721
|
.radio-warning:checked,
|
|
3807
3722
|
.radio-warning[aria-checked="true"] {
|
|
3808
3723
|
--tw-border-opacity: 1;
|
|
3809
|
-
border-color:
|
|
3724
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
3810
3725
|
--tw-bg-opacity: 1;
|
|
3811
|
-
background-color:
|
|
3726
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
3812
3727
|
--tw-text-opacity: 1;
|
|
3813
|
-
color:
|
|
3728
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
3814
3729
|
}
|
|
3815
3730
|
.radio-info {
|
|
3816
3731
|
--chkbg: var(--in);
|
|
3817
3732
|
--tw-border-opacity: 1;
|
|
3818
|
-
border-color:
|
|
3733
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
3819
3734
|
}
|
|
3820
3735
|
@media(hover:hover) {
|
|
3821
3736
|
.radio-info:hover {
|
|
3822
3737
|
--tw-border-opacity: 1;
|
|
3823
|
-
border-color:
|
|
3738
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
3824
3739
|
}
|
|
3825
3740
|
}
|
|
3826
3741
|
.radio-info:focus-visible {
|
|
3827
|
-
outline-color:
|
|
3742
|
+
outline-color: oklch(var(--in) / 1);
|
|
3828
3743
|
}
|
|
3829
3744
|
.radio-info:checked,
|
|
3830
3745
|
.radio-info[aria-checked="true"] {
|
|
3831
3746
|
--tw-border-opacity: 1;
|
|
3832
|
-
border-color:
|
|
3747
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
3833
3748
|
--tw-bg-opacity: 1;
|
|
3834
|
-
background-color:
|
|
3749
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
3835
3750
|
--tw-text-opacity: 1;
|
|
3836
|
-
color:
|
|
3751
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
3837
3752
|
}
|
|
3838
3753
|
.radio-error {
|
|
3839
3754
|
--chkbg: var(--er);
|
|
3840
3755
|
--tw-border-opacity: 1;
|
|
3841
|
-
border-color:
|
|
3756
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
3842
3757
|
}
|
|
3843
3758
|
@media(hover:hover) {
|
|
3844
3759
|
.radio-error:hover {
|
|
3845
3760
|
--tw-border-opacity: 1;
|
|
3846
|
-
border-color:
|
|
3761
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
3847
3762
|
}
|
|
3848
3763
|
}
|
|
3849
3764
|
.radio-error:focus-visible {
|
|
3850
|
-
outline-color:
|
|
3765
|
+
outline-color: oklch(var(--er) / 1);
|
|
3851
3766
|
}
|
|
3852
3767
|
.radio-error:checked,
|
|
3853
3768
|
.radio-error[aria-checked="true"] {
|
|
3854
3769
|
--tw-border-opacity: 1;
|
|
3855
|
-
border-color:
|
|
3770
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
3856
3771
|
--tw-bg-opacity: 1;
|
|
3857
|
-
background-color:
|
|
3772
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
3858
3773
|
--tw-text-opacity: 1;
|
|
3859
|
-
color:
|
|
3774
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
3860
3775
|
}
|
|
3861
3776
|
.radio:disabled {
|
|
3862
3777
|
cursor: not-allowed;
|
|
@@ -3866,18 +3781,18 @@ details.collapse summary {
|
|
|
3866
3781
|
@keyframes radiomark {
|
|
3867
3782
|
0% {
|
|
3868
3783
|
box-shadow:
|
|
3869
|
-
0 0 0 12px
|
|
3870
|
-
0 0 0 12px
|
|
3784
|
+
0 0 0 12px oklch(var(--b1)) inset,
|
|
3785
|
+
0 0 0 12px oklch(var(--b1)) inset;
|
|
3871
3786
|
}
|
|
3872
3787
|
50% {
|
|
3873
3788
|
box-shadow:
|
|
3874
|
-
0 0 0 3px
|
|
3875
|
-
0 0 0 3px
|
|
3789
|
+
0 0 0 3px oklch(var(--b1)) inset,
|
|
3790
|
+
0 0 0 3px oklch(var(--b1)) inset;
|
|
3876
3791
|
}
|
|
3877
3792
|
100% {
|
|
3878
3793
|
box-shadow:
|
|
3879
|
-
0 0 0 4px
|
|
3880
|
-
0 0 0 4px
|
|
3794
|
+
0 0 0 4px oklch(var(--b1)) inset,
|
|
3795
|
+
0 0 0 4px oklch(var(--b1)) inset;
|
|
3881
3796
|
}
|
|
3882
3797
|
}
|
|
3883
3798
|
|
|
@@ -3891,44 +3806,44 @@ details.collapse summary {
|
|
|
3891
3806
|
-webkit-appearance: none;
|
|
3892
3807
|
--range-shdw: var(--bc);
|
|
3893
3808
|
overflow: hidden;
|
|
3894
|
-
background-color: transparent;
|
|
3895
3809
|
border-radius: var(--rounded-box, 1rem);
|
|
3810
|
+
background-color: transparent;
|
|
3896
3811
|
}
|
|
3897
3812
|
.range:focus-visible::-webkit-slider-thumb {
|
|
3898
|
-
--focus-shadow: 0 0 0 6px
|
|
3813
|
+
--focus-shadow: 0 0 0 6px oklch(var(--b1)) inset, 0 0 0 2rem oklch(var(--range-shdw)) inset;
|
|
3899
3814
|
}
|
|
3900
3815
|
.range:focus-visible::-moz-range-thumb {
|
|
3901
|
-
--focus-shadow: 0 0 0 6px
|
|
3816
|
+
--focus-shadow: 0 0 0 6px oklch(var(--b1)) inset, 0 0 0 2rem oklch(var(--range-shdw)) inset;
|
|
3902
3817
|
}
|
|
3903
3818
|
.range::-webkit-slider-runnable-track {
|
|
3904
3819
|
height: 0.5rem;
|
|
3905
3820
|
width: 100%;
|
|
3906
|
-
background-color: hsl(var(--bc) / 0.1);
|
|
3907
3821
|
border-radius: var(--rounded-box, 1rem);
|
|
3822
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3908
3823
|
}
|
|
3909
3824
|
.range::-moz-range-track {
|
|
3910
3825
|
height: 0.5rem;
|
|
3911
3826
|
width: 100%;
|
|
3912
|
-
background-color: hsl(var(--bc) / 0.1);
|
|
3913
3827
|
border-radius: var(--rounded-box, 1rem);
|
|
3828
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3914
3829
|
}
|
|
3915
3830
|
.range::-webkit-slider-thumb {
|
|
3916
3831
|
position: relative;
|
|
3917
3832
|
height: 1.5rem;
|
|
3918
3833
|
width: 1.5rem;
|
|
3834
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3919
3835
|
border-style: none;
|
|
3920
3836
|
--tw-bg-opacity: 1;
|
|
3921
|
-
background-color:
|
|
3922
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3837
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
3923
3838
|
appearance: none;
|
|
3924
3839
|
-webkit-appearance: none;
|
|
3925
3840
|
top: 50%;
|
|
3926
|
-
color:
|
|
3841
|
+
color: oklch(var(--range-shdw));
|
|
3927
3842
|
transform: translateY(-50%);
|
|
3928
3843
|
--filler-size: 100rem;
|
|
3929
3844
|
--filler-offset: 0.6rem;
|
|
3930
3845
|
box-shadow:
|
|
3931
|
-
0 0 0 3px
|
|
3846
|
+
0 0 0 3px oklch(var(--range-shdw)) inset,
|
|
3932
3847
|
var(--focus-shadow, 0 0),
|
|
3933
3848
|
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
|
3934
3849
|
}
|
|
@@ -3936,16 +3851,16 @@ details.collapse summary {
|
|
|
3936
3851
|
position: relative;
|
|
3937
3852
|
height: 1.5rem;
|
|
3938
3853
|
width: 1.5rem;
|
|
3854
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3939
3855
|
border-style: none;
|
|
3940
3856
|
--tw-bg-opacity: 1;
|
|
3941
|
-
background-color:
|
|
3942
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3857
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
3943
3858
|
top: 50%;
|
|
3944
|
-
color:
|
|
3859
|
+
color: oklch(var(--range-shdw));
|
|
3945
3860
|
--filler-size: 100rem;
|
|
3946
3861
|
--filler-offset: 0.5rem;
|
|
3947
3862
|
box-shadow:
|
|
3948
|
-
0 0 0 3px
|
|
3863
|
+
0 0 0 3px oklch(var(--range-shdw)) inset,
|
|
3949
3864
|
var(--focus-shadow, 0 0),
|
|
3950
3865
|
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
|
3951
3866
|
}
|
|
@@ -3978,7 +3893,7 @@ details.collapse summary {
|
|
|
3978
3893
|
animation: rating-pop var(--animation-input, 0.25s) ease-out;
|
|
3979
3894
|
height: 1.5rem;
|
|
3980
3895
|
width: 1.5rem;
|
|
3981
|
-
background-color:
|
|
3896
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3982
3897
|
--tw-bg-opacity: 1;
|
|
3983
3898
|
}
|
|
3984
3899
|
.rating .rating-hidden {
|
|
@@ -4015,13 +3930,13 @@ details.collapse summary {
|
|
|
4015
3930
|
}
|
|
4016
3931
|
}
|
|
4017
3932
|
.select {
|
|
3933
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
4018
3934
|
border-width: 1px;
|
|
4019
|
-
border-color:
|
|
3935
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4020
3936
|
--tw-border-opacity: 0;
|
|
4021
3937
|
--tw-bg-opacity: 1;
|
|
4022
|
-
background-color:
|
|
3938
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4023
3939
|
padding-right: 2.5rem;
|
|
4024
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
4025
3940
|
}
|
|
4026
3941
|
.select-bordered {
|
|
4027
3942
|
--tw-border-opacity: 0.2;
|
|
@@ -4041,7 +3956,7 @@ details.collapse summary {
|
|
|
4041
3956
|
outline-style: solid;
|
|
4042
3957
|
outline-width: 2px;
|
|
4043
3958
|
outline-offset: 2px;
|
|
4044
|
-
outline-color:
|
|
3959
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
4045
3960
|
}
|
|
4046
3961
|
.select-ghost {
|
|
4047
3962
|
--tw-bg-opacity: 0.05;
|
|
@@ -4049,71 +3964,71 @@ details.collapse summary {
|
|
|
4049
3964
|
.select-ghost:focus {
|
|
4050
3965
|
--tw-bg-opacity: 1;
|
|
4051
3966
|
--tw-text-opacity: 1;
|
|
4052
|
-
color:
|
|
3967
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4053
3968
|
}
|
|
4054
3969
|
.select-primary {
|
|
4055
3970
|
--tw-border-opacity: 1;
|
|
4056
|
-
border-color:
|
|
3971
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
4057
3972
|
}
|
|
4058
3973
|
.select-primary:focus {
|
|
4059
|
-
outline-color:
|
|
3974
|
+
outline-color: oklch(var(--p) / 1);
|
|
4060
3975
|
}
|
|
4061
3976
|
.select-secondary {
|
|
4062
3977
|
--tw-border-opacity: 1;
|
|
4063
|
-
border-color:
|
|
3978
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
4064
3979
|
}
|
|
4065
3980
|
.select-secondary:focus {
|
|
4066
|
-
outline-color:
|
|
3981
|
+
outline-color: oklch(var(--s) / 1);
|
|
4067
3982
|
}
|
|
4068
3983
|
.select-accent {
|
|
4069
3984
|
--tw-border-opacity: 1;
|
|
4070
|
-
border-color:
|
|
3985
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
4071
3986
|
}
|
|
4072
3987
|
.select-accent:focus {
|
|
4073
|
-
outline-color:
|
|
3988
|
+
outline-color: oklch(var(--a) / 1);
|
|
4074
3989
|
}
|
|
4075
3990
|
.select-info {
|
|
4076
3991
|
--tw-border-opacity: 1;
|
|
4077
|
-
border-color:
|
|
3992
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
4078
3993
|
}
|
|
4079
3994
|
.select-info:focus {
|
|
4080
|
-
outline-color:
|
|
3995
|
+
outline-color: oklch(var(--in) / 1);
|
|
4081
3996
|
}
|
|
4082
3997
|
.select-success {
|
|
4083
3998
|
--tw-border-opacity: 1;
|
|
4084
|
-
border-color:
|
|
3999
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
4085
4000
|
}
|
|
4086
4001
|
.select-success:focus {
|
|
4087
|
-
outline-color:
|
|
4002
|
+
outline-color: oklch(var(--su) / 1);
|
|
4088
4003
|
}
|
|
4089
4004
|
.select-warning {
|
|
4090
4005
|
--tw-border-opacity: 1;
|
|
4091
|
-
border-color:
|
|
4006
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
4092
4007
|
}
|
|
4093
4008
|
.select-warning:focus {
|
|
4094
|
-
outline-color:
|
|
4009
|
+
outline-color: oklch(var(--wa) / 1);
|
|
4095
4010
|
}
|
|
4096
4011
|
.select-error {
|
|
4097
4012
|
--tw-border-opacity: 1;
|
|
4098
|
-
border-color:
|
|
4013
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
4099
4014
|
}
|
|
4100
4015
|
.select-error:focus {
|
|
4101
|
-
outline-color:
|
|
4016
|
+
outline-color: oklch(var(--er) / 1);
|
|
4102
4017
|
}
|
|
4103
4018
|
.select-disabled,
|
|
4104
4019
|
.select:disabled,
|
|
4105
4020
|
.select[disabled] {
|
|
4106
4021
|
cursor: not-allowed;
|
|
4107
4022
|
--tw-border-opacity: 1;
|
|
4108
|
-
border-color:
|
|
4023
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
4109
4024
|
--tw-bg-opacity: 1;
|
|
4110
|
-
background-color:
|
|
4025
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
4111
4026
|
--tw-text-opacity: 0.2;
|
|
4112
4027
|
}
|
|
4113
4028
|
.select-disabled::placeholder,
|
|
4114
4029
|
.select:disabled::placeholder,
|
|
4115
4030
|
.select[disabled]::placeholder {
|
|
4116
|
-
color:
|
|
4031
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
4117
4032
|
--tw-placeholder-opacity: 0.2;
|
|
4118
4033
|
}
|
|
4119
4034
|
.select-multiple,
|
|
@@ -4128,6 +4043,37 @@ details.collapse summary {
|
|
|
4128
4043
|
calc(0% + 12px) calc(1px + 50%),
|
|
4129
4044
|
calc(0% + 16px) calc(1px + 50%);
|
|
4130
4045
|
}
|
|
4046
|
+
.skeleton {
|
|
4047
|
+
border-radius: var(--rounded-box, 1rem);
|
|
4048
|
+
--tw-bg-opacity: 1;
|
|
4049
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
4050
|
+
will-change: background-position;
|
|
4051
|
+
animation: skeleton 2.5s ease-in-out infinite;
|
|
4052
|
+
background-image: linear-gradient(
|
|
4053
|
+
105deg,
|
|
4054
|
+
transparent 0%,
|
|
4055
|
+
transparent 40%,
|
|
4056
|
+
oklch(var(--b1)) 50%,
|
|
4057
|
+
transparent 60%,
|
|
4058
|
+
transparent 100%
|
|
4059
|
+
);
|
|
4060
|
+
background-size: 200% auto;
|
|
4061
|
+
background-repeat: no-repeat;
|
|
4062
|
+
background-position-x: -50%;
|
|
4063
|
+
}
|
|
4064
|
+
@media (prefers-reduced-motion) {
|
|
4065
|
+
.skeleton {
|
|
4066
|
+
animation-duration: 15s;
|
|
4067
|
+
}
|
|
4068
|
+
}
|
|
4069
|
+
@keyframes skeleton {
|
|
4070
|
+
from {
|
|
4071
|
+
background-position: 150%;
|
|
4072
|
+
}
|
|
4073
|
+
to {
|
|
4074
|
+
background-position: -50%;
|
|
4075
|
+
}
|
|
4076
|
+
}
|
|
4131
4077
|
.stack {
|
|
4132
4078
|
place-items: center;
|
|
4133
4079
|
align-items: flex-end
|
|
@@ -4143,47 +4089,50 @@ details.collapse summary {
|
|
|
4143
4089
|
opacity: 1
|
|
4144
4090
|
}
|
|
4145
4091
|
.stats {
|
|
4146
|
-
|
|
4147
|
-
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4092
|
+
border-radius: var(--rounded-box, 1rem);
|
|
4093
|
+
--tw-bg-opacity: 1;
|
|
4094
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4095
|
+
--tw-text-opacity: 1;
|
|
4096
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4151
4097
|
}
|
|
4152
4098
|
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
|
|
4153
|
-
|
|
4154
|
-
|
|
4155
|
-
|
|
4156
|
-
|
|
4157
|
-
|
|
4158
|
-
|
|
4099
|
+
--tw-divide-x-reverse: 0;
|
|
4100
|
+
border-right-width: calc(1px * var(--tw-divide-x-reverse));
|
|
4101
|
+
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
4102
|
+
--tw-divide-y-reverse: 0;
|
|
4103
|
+
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
|
4104
|
+
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
|
|
4159
4105
|
}
|
|
4160
4106
|
:where(.stats) {
|
|
4161
|
-
|
|
4107
|
+
overflow-x: auto;
|
|
4108
|
+
}
|
|
4109
|
+
:is([dir="rtl"] .stats > :not([hidden]) ~ :not([hidden])) {
|
|
4110
|
+
--tw-divide-x-reverse: 1;
|
|
4162
4111
|
}
|
|
4163
4112
|
.stat {
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4113
|
+
column-gap: 1rem;
|
|
4114
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4115
|
+
--tw-border-opacity: 0.1;
|
|
4116
|
+
padding-left: 1.5rem;
|
|
4117
|
+
padding-right: 1.5rem;
|
|
4118
|
+
padding-top: 1rem;
|
|
4119
|
+
padding-bottom: 1rem;
|
|
4171
4120
|
}
|
|
4172
4121
|
.stat-title {
|
|
4173
|
-
|
|
4122
|
+
color: oklch(var(--bc) / 0.6);
|
|
4174
4123
|
}
|
|
4175
4124
|
.stat-value {
|
|
4176
|
-
|
|
4177
|
-
|
|
4178
|
-
|
|
4125
|
+
font-size: 2.25rem;
|
|
4126
|
+
line-height: 2.5rem;
|
|
4127
|
+
font-weight: 800;
|
|
4179
4128
|
}
|
|
4180
4129
|
.stat-desc {
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4130
|
+
font-size: 0.75rem;
|
|
4131
|
+
line-height: 1rem;
|
|
4132
|
+
color: oklch(var(--bc) / 0.6);
|
|
4184
4133
|
}
|
|
4185
4134
|
.stat-actions {
|
|
4186
|
-
|
|
4135
|
+
margin-top: 1rem;
|
|
4187
4136
|
}
|
|
4188
4137
|
/* .stat + .stat {
|
|
4189
4138
|
@apply border-l border-base-content border-opacity-10;
|
|
@@ -4223,11 +4172,11 @@ details.collapse summary {
|
|
|
4223
4172
|
width: 100%;
|
|
4224
4173
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
4225
4174
|
--tw-bg-opacity: 1;
|
|
4226
|
-
background-color:
|
|
4175
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
4227
4176
|
--tw-text-opacity: 1;
|
|
4228
|
-
color:
|
|
4177
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4229
4178
|
content: "";
|
|
4230
|
-
margin-
|
|
4179
|
+
margin-inline-start: -100%;
|
|
4231
4180
|
}
|
|
4232
4181
|
/* } */
|
|
4233
4182
|
.steps .step:after {
|
|
@@ -4244,9 +4193,9 @@ details.collapse summary {
|
|
|
4244
4193
|
place-self: center;
|
|
4245
4194
|
border-radius: 9999px;
|
|
4246
4195
|
--tw-bg-opacity: 1;
|
|
4247
|
-
background-color:
|
|
4196
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
4248
4197
|
--tw-text-opacity: 1;
|
|
4249
|
-
color:
|
|
4198
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4250
4199
|
}
|
|
4251
4200
|
.steps .step:first-child:before {
|
|
4252
4201
|
content: none;
|
|
@@ -4257,70 +4206,70 @@ details.collapse summary {
|
|
|
4257
4206
|
.steps .step-neutral + .step-neutral:before,
|
|
4258
4207
|
.steps .step-neutral:after {
|
|
4259
4208
|
--tw-bg-opacity: 1;
|
|
4260
|
-
background-color:
|
|
4209
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
4261
4210
|
--tw-text-opacity: 1;
|
|
4262
|
-
color:
|
|
4211
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
4263
4212
|
}
|
|
4264
4213
|
.steps .step-primary + .step-primary:before,
|
|
4265
4214
|
.steps .step-primary:after {
|
|
4266
4215
|
--tw-bg-opacity: 1;
|
|
4267
|
-
background-color:
|
|
4216
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
4268
4217
|
--tw-text-opacity: 1;
|
|
4269
|
-
color:
|
|
4218
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4270
4219
|
}
|
|
4271
4220
|
.steps .step-secondary + .step-secondary:before,
|
|
4272
4221
|
.steps .step-secondary:after {
|
|
4273
4222
|
--tw-bg-opacity: 1;
|
|
4274
|
-
background-color:
|
|
4223
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
4275
4224
|
--tw-text-opacity: 1;
|
|
4276
|
-
color:
|
|
4225
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
4277
4226
|
}
|
|
4278
4227
|
.steps .step-accent + .step-accent:before,
|
|
4279
4228
|
.steps .step-accent:after {
|
|
4280
4229
|
--tw-bg-opacity: 1;
|
|
4281
|
-
background-color:
|
|
4230
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
4282
4231
|
--tw-text-opacity: 1;
|
|
4283
|
-
color:
|
|
4232
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
4284
4233
|
}
|
|
4285
4234
|
.steps .step-info + .step-info:before {
|
|
4286
4235
|
--tw-bg-opacity: 1;
|
|
4287
|
-
background-color:
|
|
4236
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
4288
4237
|
}
|
|
4289
4238
|
.steps .step-info:after {
|
|
4290
4239
|
--tw-bg-opacity: 1;
|
|
4291
|
-
background-color:
|
|
4240
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
4292
4241
|
--tw-text-opacity: 1;
|
|
4293
|
-
color:
|
|
4242
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
4294
4243
|
}
|
|
4295
4244
|
.steps .step-success + .step-success:before {
|
|
4296
4245
|
--tw-bg-opacity: 1;
|
|
4297
|
-
background-color:
|
|
4246
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
4298
4247
|
}
|
|
4299
4248
|
.steps .step-success:after {
|
|
4300
4249
|
--tw-bg-opacity: 1;
|
|
4301
|
-
background-color:
|
|
4250
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
4302
4251
|
--tw-text-opacity: 1;
|
|
4303
|
-
color:
|
|
4252
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
4304
4253
|
}
|
|
4305
4254
|
.steps .step-warning + .step-warning:before {
|
|
4306
4255
|
--tw-bg-opacity: 1;
|
|
4307
|
-
background-color:
|
|
4256
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
4308
4257
|
}
|
|
4309
4258
|
.steps .step-warning:after {
|
|
4310
4259
|
--tw-bg-opacity: 1;
|
|
4311
|
-
background-color:
|
|
4260
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
4312
4261
|
--tw-text-opacity: 1;
|
|
4313
|
-
color:
|
|
4262
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
4314
4263
|
}
|
|
4315
4264
|
.steps .step-error + .step-error:before {
|
|
4316
4265
|
--tw-bg-opacity: 1;
|
|
4317
|
-
background-color:
|
|
4266
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
4318
4267
|
}
|
|
4319
4268
|
.steps .step-error:after {
|
|
4320
4269
|
--tw-bg-opacity: 1;
|
|
4321
|
-
background-color:
|
|
4270
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
4322
4271
|
--tw-text-opacity: 1;
|
|
4323
|
-
color:
|
|
4272
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
4324
4273
|
}
|
|
4325
4274
|
.swap {
|
|
4326
4275
|
cursor: pointer;
|
|
@@ -4385,15 +4334,16 @@ details.collapse summary {
|
|
|
4385
4334
|
--tw-text-opacity: 1;
|
|
4386
4335
|
}
|
|
4387
4336
|
}.tab {
|
|
4388
|
-
--tab-color:
|
|
4389
|
-
--tab-bg:
|
|
4390
|
-
--tab-border-color:
|
|
4337
|
+
--tab-color: oklch(var(--bc) / var(--tw-text-opacity, 1));
|
|
4338
|
+
--tab-bg: oklch(var(--b1) / var(--tw-bg-opacity, 1));
|
|
4339
|
+
--tab-border-color: oklch(var(--b3) / var(--tw-bg-opacity, 1));
|
|
4391
4340
|
color: var(--tab-color);
|
|
4392
|
-
padding-
|
|
4393
|
-
padding-
|
|
4341
|
+
padding-inline-start: var(--tab-padding, 1rem);
|
|
4342
|
+
padding-inline-end: var(--tab-padding, 1rem);
|
|
4394
4343
|
}
|
|
4395
|
-
.tab.tab-active:not(.tab-disabled):not([disabled])
|
|
4396
|
-
|
|
4344
|
+
.tab.tab-active:not(.tab-disabled):not([disabled]),
|
|
4345
|
+
.tab:is(input:checked) {
|
|
4346
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4397
4347
|
--tw-border-opacity: 1;
|
|
4398
4348
|
--tw-text-opacity: 1;
|
|
4399
4349
|
}
|
|
@@ -4403,29 +4353,29 @@ details.collapse summary {
|
|
|
4403
4353
|
}
|
|
4404
4354
|
.tab:focus-visible {
|
|
4405
4355
|
outline: 2px solid currentColor;
|
|
4406
|
-
outline-offset: -
|
|
4356
|
+
outline-offset: -5px;
|
|
4407
4357
|
}
|
|
4408
4358
|
.tab:focus-visible.tab-lifted {
|
|
4409
|
-
border-
|
|
4410
|
-
border-
|
|
4359
|
+
border-end-end-radius: 0;
|
|
4360
|
+
border-end-start-radius: 0;
|
|
4411
4361
|
}
|
|
4412
4362
|
/* disabled */
|
|
4413
4363
|
.tab-disabled,
|
|
4414
4364
|
.tab[disabled] {
|
|
4415
4365
|
cursor: not-allowed;
|
|
4416
|
-
color:
|
|
4366
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4417
4367
|
--tw-text-opacity: 0.2;
|
|
4418
4368
|
}
|
|
4419
4369
|
@media (hover: hover) {
|
|
4420
4370
|
.tab[disabled],
|
|
4421
4371
|
.tab[disabled]:hover {
|
|
4422
4372
|
cursor: not-allowed;
|
|
4423
|
-
color:
|
|
4373
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4424
4374
|
--tw-text-opacity: 0.2;
|
|
4425
4375
|
}
|
|
4426
4376
|
}
|
|
4427
4377
|
.tab-bordered {
|
|
4428
|
-
border-color:
|
|
4378
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4429
4379
|
--tw-border-opacity: 0.2;
|
|
4430
4380
|
border-style: solid;
|
|
4431
4381
|
border-bottom-width: calc(var(--tab-border, 1px) + 1px);
|
|
@@ -4433,95 +4383,106 @@ details.collapse summary {
|
|
|
4433
4383
|
.tab-lifted {
|
|
4434
4384
|
border: var(--tab-border, 1px) solid transparent;
|
|
4435
4385
|
border-width: 0 0 var(--tab-border, 1px) 0;
|
|
4436
|
-
border-
|
|
4437
|
-
border-
|
|
4386
|
+
border-start-start-radius: var(--tab-radius, 0.5rem);
|
|
4387
|
+
border-start-end-radius: var(--tab-radius, 0.5rem);
|
|
4438
4388
|
border-bottom-color: var(--tab-border-color);
|
|
4439
|
-
padding-
|
|
4440
|
-
padding-
|
|
4389
|
+
padding-inline-start: var(--tab-padding, 1rem);
|
|
4390
|
+
padding-inline-end: var(--tab-padding, 1rem);
|
|
4441
4391
|
padding-top: var(--tab-border, 1px);
|
|
4442
4392
|
}
|
|
4443
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled])
|
|
4393
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]),
|
|
4394
|
+
.tab-lifted:is(input:checked) {
|
|
4444
4395
|
background-color: var(--tab-bg);
|
|
4445
4396
|
border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
|
|
4446
|
-
border-
|
|
4447
|
-
border-
|
|
4397
|
+
border-inline-start-color: var(--tab-border-color);
|
|
4398
|
+
border-inline-end-color: var(--tab-border-color);
|
|
4448
4399
|
border-top-color: var(--tab-border-color);
|
|
4449
|
-
padding-
|
|
4450
|
-
padding-
|
|
4400
|
+
padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
|
4401
|
+
padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
|
4451
4402
|
padding-bottom: var(--tab-border, 1px);
|
|
4452
4403
|
padding-top: 0;
|
|
4453
4404
|
}
|
|
4454
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before,
|
|
4455
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
|
|
4405
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked):before {
|
|
4456
4406
|
z-index: 1;
|
|
4457
4407
|
content: "";
|
|
4458
4408
|
display: block;
|
|
4459
4409
|
position: absolute;
|
|
4460
|
-
width: var(--tab-radius, 0.5rem);
|
|
4410
|
+
width: calc(100% + var(--tab-radius, 0.5rem) * 2);
|
|
4461
4411
|
height: var(--tab-radius, 0.5rem);
|
|
4462
4412
|
bottom: 0;
|
|
4413
|
+
background-size: var(--tab-radius, 0.5rem);
|
|
4414
|
+
background-position:
|
|
4415
|
+
top left,
|
|
4416
|
+
top right;
|
|
4417
|
+
background-repeat: no-repeat;
|
|
4463
4418
|
--tab-grad: calc(68% - var(--tab-border, 1px));
|
|
4464
|
-
--
|
|
4465
|
-
circle at
|
|
4419
|
+
--radius-start: radial-gradient(
|
|
4420
|
+
circle at top left,
|
|
4466
4421
|
transparent var(--tab-grad),
|
|
4467
4422
|
var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
|
|
4468
4423
|
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
|
4469
4424
|
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
|
|
4470
4425
|
);
|
|
4426
|
+
--radius-end: radial-gradient(
|
|
4427
|
+
circle at top right,
|
|
4428
|
+
transparent var(--tab-grad),
|
|
4429
|
+
var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
|
|
4430
|
+
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
|
4431
|
+
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
|
|
4432
|
+
);
|
|
4433
|
+
background-image: var(--radius-start), var(--radius-end);
|
|
4471
4434
|
}
|
|
4472
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
background-image: var(--tab-corner-bg);
|
|
4435
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tab-lifted:is(input:checked):first-child:before {
|
|
4436
|
+
background-image: var(--radius-end);
|
|
4437
|
+
background-position: top right;
|
|
4476
4438
|
}
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4439
|
+
[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tab-lifted:is(input:checked):first-child:before {
|
|
4440
|
+
background-image: var(--radius-start);
|
|
4441
|
+
background-position: top left;
|
|
4480
4442
|
}
|
|
4481
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
background-image: var(--tab-corner-bg);
|
|
4443
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tab-lifted:is(input:checked):last-child:before {
|
|
4444
|
+
background-image: var(--radius-start);
|
|
4445
|
+
background-position: top left;
|
|
4485
4446
|
}
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4447
|
+
[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tab-lifted:is(input:checked):last-child:before {
|
|
4448
|
+
background-image: var(--radius-end);
|
|
4449
|
+
background-position: top right;
|
|
4489
4450
|
}
|
|
4490
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before {
|
|
4491
|
-
background: none;
|
|
4492
|
-
}
|
|
4493
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:after {
|
|
4494
|
-
background: none;
|
|
4495
|
-
}
|
|
4496
4451
|
.tab-lifted.tab-active:not(.tab-disabled):not([disabled])
|
|
4497
|
-
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
|
|
4498
|
-
background:
|
|
4452
|
+
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked) + .tab-lifted:is(input:checked):before {
|
|
4453
|
+
background-image: var(--radius-end);
|
|
4454
|
+
background-position: top right;
|
|
4499
4455
|
}
|
|
4500
4456
|
.tabs-boxed {
|
|
4457
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
4501
4458
|
--tw-bg-opacity: 1;
|
|
4502
|
-
background-color:
|
|
4459
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
4503
4460
|
padding: 0.25rem;
|
|
4504
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
4505
4461
|
}
|
|
4506
4462
|
.tabs-boxed .tab {
|
|
4507
4463
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
4508
4464
|
}
|
|
4509
|
-
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled])
|
|
4465
|
+
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
|
|
4466
|
+
.tabs-boxed :is(input:checked) {
|
|
4510
4467
|
--tw-bg-opacity: 1;
|
|
4511
|
-
background-color:
|
|
4468
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
4512
4469
|
--tw-text-opacity: 1;
|
|
4513
|
-
color:
|
|
4470
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4514
4471
|
}
|
|
4515
|
-
@media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover
|
|
4472
|
+
@media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
|
|
4473
|
+
.tabs-boxed :is(input:checked):hover {
|
|
4516
4474
|
--tw-text-opacity: 1;
|
|
4517
|
-
color:
|
|
4475
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4518
4476
|
}
|
|
4519
4477
|
}
|
|
4520
4478
|
.table {
|
|
4479
|
+
border-radius: var(--rounded-box, 1rem);
|
|
4521
4480
|
text-align: left;
|
|
4522
4481
|
font-size: 0.875rem;
|
|
4523
|
-
line-height: 1.25rem
|
|
4524
|
-
|
|
4482
|
+
line-height: 1.25rem
|
|
4483
|
+
}
|
|
4484
|
+
:is([dir="rtl"] .table) {
|
|
4485
|
+
text-align: right
|
|
4525
4486
|
}
|
|
4526
4487
|
.table :where(th, td) {
|
|
4527
4488
|
padding-left: 1rem;
|
|
@@ -4534,48 +4495,48 @@ details.collapse summary {
|
|
|
4534
4495
|
.table tr.active:nth-child(even),
|
|
4535
4496
|
.table-zebra tbody tr:nth-child(even) {
|
|
4536
4497
|
--tw-bg-opacity: 1;
|
|
4537
|
-
background-color:
|
|
4498
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity))
|
|
4538
4499
|
}
|
|
4539
4500
|
@media(hover:hover) {
|
|
4540
4501
|
.table tr.hover:hover,
|
|
4541
4502
|
.table tr.hover:nth-child(even):hover {
|
|
4542
4503
|
--tw-bg-opacity: 1;
|
|
4543
|
-
background-color:
|
|
4504
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity))
|
|
4544
4505
|
}
|
|
4545
4506
|
}
|
|
4546
4507
|
.table-zebra tr.active,
|
|
4547
4508
|
.table-zebra tr.active:nth-child(even),
|
|
4548
4509
|
.table-zebra-zebra tbody tr:nth-child(even) {
|
|
4549
4510
|
--tw-bg-opacity: 1;
|
|
4550
|
-
background-color:
|
|
4511
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity))
|
|
4551
4512
|
}
|
|
4552
4513
|
@media(hover:hover) {
|
|
4553
4514
|
.table-zebra tr.hover:hover,
|
|
4554
4515
|
.table-zebra tr.hover:nth-child(even):hover {
|
|
4555
4516
|
--tw-bg-opacity: 1;
|
|
4556
|
-
background-color:
|
|
4517
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity))
|
|
4557
4518
|
}
|
|
4558
4519
|
}
|
|
4559
4520
|
.table :where(thead, tbody) :where(tr:not(:last-child)),
|
|
4560
4521
|
.table :where(thead, tbody) :where(tr:first-child:last-child) {
|
|
4561
4522
|
border-bottom-width: 1px;
|
|
4562
4523
|
--tw-border-opacity: 1;
|
|
4563
|
-
border-bottom-color:
|
|
4524
|
+
border-bottom-color: oklch(var(--b2) / var(--tw-border-opacity))
|
|
4564
4525
|
}
|
|
4565
4526
|
.table :where(thead, tfoot) {
|
|
4566
4527
|
white-space: nowrap;
|
|
4567
4528
|
font-size: 0.75rem;
|
|
4568
4529
|
line-height: 1rem;
|
|
4569
4530
|
font-weight: 700;
|
|
4570
|
-
color:
|
|
4531
|
+
color: oklch(var(--bc) / 0.6)
|
|
4571
4532
|
}
|
|
4572
4533
|
.textarea {
|
|
4534
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
4573
4535
|
border-width: 1px;
|
|
4574
|
-
border-color:
|
|
4536
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4575
4537
|
--tw-border-opacity: 0;
|
|
4576
4538
|
--tw-bg-opacity: 1;
|
|
4577
|
-
background-color:
|
|
4578
|
-
border-radius: var(--rounded-btn, 0.5rem)
|
|
4539
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
4579
4540
|
}
|
|
4580
4541
|
.textarea-bordered {
|
|
4581
4542
|
--tw-border-opacity: 0.2
|
|
@@ -4584,7 +4545,7 @@ details.collapse summary {
|
|
|
4584
4545
|
outline-style: solid;
|
|
4585
4546
|
outline-width: 2px;
|
|
4586
4547
|
outline-offset: 2px;
|
|
4587
|
-
outline-color:
|
|
4548
|
+
outline-color: oklch(var(--bc) / 0.2)
|
|
4588
4549
|
}
|
|
4589
4550
|
.textarea-ghost {
|
|
4590
4551
|
--tw-bg-opacity: 0.05
|
|
@@ -4592,74 +4553,120 @@ details.collapse summary {
|
|
|
4592
4553
|
.textarea-ghost:focus {
|
|
4593
4554
|
--tw-bg-opacity: 1;
|
|
4594
4555
|
--tw-text-opacity: 1;
|
|
4595
|
-
color:
|
|
4556
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4596
4557
|
box-shadow: none
|
|
4597
4558
|
}
|
|
4598
4559
|
.textarea-primary {
|
|
4599
4560
|
--tw-border-opacity: 1;
|
|
4600
|
-
border-color:
|
|
4561
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity))
|
|
4601
4562
|
}
|
|
4602
4563
|
.textarea-primary:focus {
|
|
4603
|
-
outline-color:
|
|
4564
|
+
outline-color: oklch(var(--p) / 1)
|
|
4604
4565
|
}
|
|
4605
4566
|
.textarea-secondary {
|
|
4606
4567
|
--tw-border-opacity: 1;
|
|
4607
|
-
border-color:
|
|
4568
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity))
|
|
4608
4569
|
}
|
|
4609
4570
|
.textarea-secondary:focus {
|
|
4610
|
-
outline-color:
|
|
4571
|
+
outline-color: oklch(var(--s) / 1)
|
|
4611
4572
|
}
|
|
4612
4573
|
.textarea-accent {
|
|
4613
4574
|
--tw-border-opacity: 1;
|
|
4614
|
-
border-color:
|
|
4575
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity))
|
|
4615
4576
|
}
|
|
4616
4577
|
.textarea-accent:focus {
|
|
4617
|
-
outline-color:
|
|
4578
|
+
outline-color: oklch(var(--a) / 1)
|
|
4618
4579
|
}
|
|
4619
4580
|
.textarea-info {
|
|
4620
4581
|
--tw-border-opacity: 1;
|
|
4621
|
-
border-color:
|
|
4582
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity))
|
|
4622
4583
|
}
|
|
4623
4584
|
.textarea-info:focus {
|
|
4624
|
-
outline-color:
|
|
4585
|
+
outline-color: oklch(var(--in) / 1)
|
|
4625
4586
|
}
|
|
4626
4587
|
.textarea-success {
|
|
4627
4588
|
--tw-border-opacity: 1;
|
|
4628
|
-
border-color:
|
|
4589
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity))
|
|
4629
4590
|
}
|
|
4630
4591
|
.textarea-success:focus {
|
|
4631
|
-
outline-color:
|
|
4592
|
+
outline-color: oklch(var(--su) / 1)
|
|
4632
4593
|
}
|
|
4633
4594
|
.textarea-warning {
|
|
4634
4595
|
--tw-border-opacity: 1;
|
|
4635
|
-
border-color:
|
|
4596
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity))
|
|
4636
4597
|
}
|
|
4637
4598
|
.textarea-warning:focus {
|
|
4638
|
-
outline-color:
|
|
4599
|
+
outline-color: oklch(var(--wa) / 1)
|
|
4639
4600
|
}
|
|
4640
4601
|
.textarea-error {
|
|
4641
4602
|
--tw-border-opacity: 1;
|
|
4642
|
-
border-color:
|
|
4603
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity))
|
|
4643
4604
|
}
|
|
4644
4605
|
.textarea-error:focus {
|
|
4645
|
-
outline-color:
|
|
4606
|
+
outline-color: oklch(var(--er) / 1)
|
|
4646
4607
|
}
|
|
4647
4608
|
.textarea-disabled,
|
|
4648
4609
|
.textarea:disabled,
|
|
4649
4610
|
.textarea[disabled] {
|
|
4650
4611
|
cursor: not-allowed;
|
|
4651
4612
|
--tw-border-opacity: 1;
|
|
4652
|
-
border-color:
|
|
4613
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
4653
4614
|
--tw-bg-opacity: 1;
|
|
4654
|
-
background-color:
|
|
4615
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
4655
4616
|
--tw-text-opacity: 0.2
|
|
4656
4617
|
}
|
|
4657
4618
|
.textarea-disabled::placeholder,
|
|
4658
4619
|
.textarea:disabled::placeholder,
|
|
4659
4620
|
.textarea[disabled]::placeholder {
|
|
4660
|
-
color:
|
|
4621
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
4661
4622
|
--tw-placeholder-opacity: 0.2
|
|
4662
4623
|
}
|
|
4624
|
+
.timeline hr {
|
|
4625
|
+
height: 0.25rem
|
|
4626
|
+
}
|
|
4627
|
+
:where(.timeline hr) {
|
|
4628
|
+
--tw-bg-opacity: 1;
|
|
4629
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity))
|
|
4630
|
+
}
|
|
4631
|
+
:where(.timeline:has(.timeline-middle) hr):first-child {
|
|
4632
|
+
border-start-end-radius: var(--rounded-badge, 1.9rem);
|
|
4633
|
+
border-end-end-radius: var(--rounded-badge, 1.9rem);
|
|
4634
|
+
border-start-start-radius: 0px;
|
|
4635
|
+
border-end-start-radius: 0px
|
|
4636
|
+
}
|
|
4637
|
+
:where(.timeline:has(.timeline-middle) hr):last-child {
|
|
4638
|
+
border-start-start-radius: var(--rounded-badge, 1.9rem);
|
|
4639
|
+
border-end-start-radius: var(--rounded-badge, 1.9rem);
|
|
4640
|
+
border-start-end-radius: 0px;
|
|
4641
|
+
border-end-end-radius: 0px
|
|
4642
|
+
}
|
|
4643
|
+
:where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
|
|
4644
|
+
border-start-start-radius: var(--rounded-badge, 1.9rem);
|
|
4645
|
+
border-end-start-radius: var(--rounded-badge, 1.9rem);
|
|
4646
|
+
border-start-end-radius: 0px;
|
|
4647
|
+
border-end-end-radius: 0px
|
|
4648
|
+
}
|
|
4649
|
+
:where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
|
|
4650
|
+
border-start-end-radius: var(--rounded-badge, 1.9rem);
|
|
4651
|
+
border-end-end-radius: var(--rounded-badge, 1.9rem);
|
|
4652
|
+
border-start-start-radius: 0px;
|
|
4653
|
+
border-end-start-radius: 0px
|
|
4654
|
+
}
|
|
4655
|
+
.timeline-box {
|
|
4656
|
+
border-radius: var(--rounded-box, 1rem);
|
|
4657
|
+
border-width: 1px;
|
|
4658
|
+
--tw-border-opacity: 1;
|
|
4659
|
+
border-color: oklch(var(--b3) / var(--tw-border-opacity));
|
|
4660
|
+
--tw-bg-opacity: 1;
|
|
4661
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4662
|
+
padding-left: 1rem;
|
|
4663
|
+
padding-right: 1rem;
|
|
4664
|
+
padding-top: 0.5rem;
|
|
4665
|
+
padding-bottom: 0.5rem;
|
|
4666
|
+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
4667
|
+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
4668
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
|
4669
|
+
}
|
|
4663
4670
|
.toast {
|
|
4664
4671
|
gap: 0.5rem;
|
|
4665
4672
|
padding: 1rem;
|
|
@@ -4679,7 +4686,7 @@ details.collapse summary {
|
|
|
4679
4686
|
}
|
|
4680
4687
|
}
|
|
4681
4688
|
.toggle {
|
|
4682
|
-
--tglbg:
|
|
4689
|
+
--tglbg: oklch(var(--b1));
|
|
4683
4690
|
--handleoffset: 1.5rem;
|
|
4684
4691
|
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
|
4685
4692
|
--togglehandleborder: 0 0;
|
|
@@ -4687,12 +4694,12 @@ details.collapse summary {
|
|
|
4687
4694
|
width: 3rem;
|
|
4688
4695
|
cursor: pointer;
|
|
4689
4696
|
appearance: none;
|
|
4697
|
+
border-radius: var(--rounded-badge, 1.9rem);
|
|
4690
4698
|
border-width: 1px;
|
|
4691
|
-
border-color:
|
|
4699
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4692
4700
|
--tw-border-opacity: 0.2;
|
|
4693
|
-
background-color:
|
|
4701
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
4694
4702
|
--tw-bg-opacity: 0.5;
|
|
4695
|
-
border-radius: var(--rounded-badge, 1.9rem);
|
|
4696
4703
|
transition:
|
|
4697
4704
|
background,
|
|
4698
4705
|
box-shadow var(--animation-input, 0.2s) ease-out;
|
|
@@ -4708,7 +4715,7 @@ details.collapse summary {
|
|
|
4708
4715
|
outline-style: solid;
|
|
4709
4716
|
outline-width: 2px;
|
|
4710
4717
|
outline-offset: 2px;
|
|
4711
|
-
outline-color:
|
|
4718
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
4712
4719
|
}
|
|
4713
4720
|
.toggle:checked,
|
|
4714
4721
|
.toggle[checked="true"],
|
|
@@ -4735,104 +4742,104 @@ details.collapse summary {
|
|
|
4735
4742
|
0 0 0 2px var(--tglbg) inset;
|
|
4736
4743
|
}
|
|
4737
4744
|
.toggle-primary:focus-visible {
|
|
4738
|
-
outline-color:
|
|
4745
|
+
outline-color: oklch(var(--p) / 1);
|
|
4739
4746
|
}
|
|
4740
4747
|
.toggle-primary:checked,
|
|
4741
4748
|
.toggle-primary[checked="true"],
|
|
4742
4749
|
.toggle-primary[aria-checked="true"] {
|
|
4743
|
-
border-color:
|
|
4750
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
4744
4751
|
--tw-border-opacity: 0.1;
|
|
4745
4752
|
--tw-bg-opacity: 1;
|
|
4746
|
-
background-color:
|
|
4753
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
4747
4754
|
--tw-text-opacity: 1;
|
|
4748
|
-
color:
|
|
4755
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4749
4756
|
}
|
|
4750
4757
|
.toggle-secondary:focus-visible {
|
|
4751
|
-
outline-color:
|
|
4758
|
+
outline-color: oklch(var(--s) / 1);
|
|
4752
4759
|
}
|
|
4753
4760
|
.toggle-secondary:checked,
|
|
4754
4761
|
.toggle-secondary[checked="true"],
|
|
4755
4762
|
.toggle-secondary[aria-checked="true"] {
|
|
4756
|
-
border-color:
|
|
4763
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
4757
4764
|
--tw-border-opacity: 0.1;
|
|
4758
4765
|
--tw-bg-opacity: 1;
|
|
4759
|
-
background-color:
|
|
4766
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
4760
4767
|
--tw-text-opacity: 1;
|
|
4761
|
-
color:
|
|
4768
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
4762
4769
|
}
|
|
4763
4770
|
.toggle-accent:focus-visible {
|
|
4764
|
-
outline-color:
|
|
4771
|
+
outline-color: oklch(var(--a) / 1);
|
|
4765
4772
|
}
|
|
4766
4773
|
.toggle-accent:checked,
|
|
4767
4774
|
.toggle-accent[checked="true"],
|
|
4768
4775
|
.toggle-accent[aria-checked="true"] {
|
|
4769
|
-
border-color:
|
|
4776
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
4770
4777
|
--tw-border-opacity: 0.1;
|
|
4771
4778
|
--tw-bg-opacity: 1;
|
|
4772
|
-
background-color:
|
|
4779
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
4773
4780
|
--tw-text-opacity: 1;
|
|
4774
|
-
color:
|
|
4781
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
4775
4782
|
}
|
|
4776
4783
|
.toggle-success:focus-visible {
|
|
4777
|
-
outline-color:
|
|
4784
|
+
outline-color: oklch(var(--su) / 1);
|
|
4778
4785
|
}
|
|
4779
4786
|
.toggle-success:checked,
|
|
4780
4787
|
.toggle-success[checked="true"],
|
|
4781
4788
|
.toggle-success[aria-checked="true"] {
|
|
4782
|
-
border-color:
|
|
4789
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
4783
4790
|
--tw-border-opacity: 0.1;
|
|
4784
4791
|
--tw-bg-opacity: 1;
|
|
4785
|
-
background-color:
|
|
4792
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
4786
4793
|
--tw-text-opacity: 1;
|
|
4787
|
-
color:
|
|
4794
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
4788
4795
|
}
|
|
4789
4796
|
.toggle-warning:focus-visible {
|
|
4790
|
-
outline-color:
|
|
4797
|
+
outline-color: oklch(var(--wa) / 1);
|
|
4791
4798
|
}
|
|
4792
4799
|
.toggle-warning:checked,
|
|
4793
4800
|
.toggle-warning[checked="true"],
|
|
4794
4801
|
.toggle-warning[aria-checked="true"] {
|
|
4795
|
-
border-color:
|
|
4802
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
4796
4803
|
--tw-border-opacity: 0.1;
|
|
4797
4804
|
--tw-bg-opacity: 1;
|
|
4798
|
-
background-color:
|
|
4805
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
4799
4806
|
--tw-text-opacity: 1;
|
|
4800
|
-
color:
|
|
4807
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
4801
4808
|
}
|
|
4802
4809
|
.toggle-info:focus-visible {
|
|
4803
|
-
outline-color:
|
|
4810
|
+
outline-color: oklch(var(--in) / 1);
|
|
4804
4811
|
}
|
|
4805
4812
|
.toggle-info:checked,
|
|
4806
4813
|
.toggle-info[checked="true"],
|
|
4807
4814
|
.toggle-info[aria-checked="true"] {
|
|
4808
|
-
border-color:
|
|
4815
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
4809
4816
|
--tw-border-opacity: 0.1;
|
|
4810
4817
|
--tw-bg-opacity: 1;
|
|
4811
|
-
background-color:
|
|
4818
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
4812
4819
|
--tw-text-opacity: 1;
|
|
4813
|
-
color:
|
|
4820
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
4814
4821
|
}
|
|
4815
4822
|
.toggle-error:focus-visible {
|
|
4816
|
-
outline-color:
|
|
4823
|
+
outline-color: oklch(var(--er) / 1);
|
|
4817
4824
|
}
|
|
4818
4825
|
.toggle-error:checked,
|
|
4819
4826
|
.toggle-error[checked="true"],
|
|
4820
4827
|
.toggle-error[aria-checked="true"] {
|
|
4821
|
-
border-color:
|
|
4828
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
4822
4829
|
--tw-border-opacity: 0.1;
|
|
4823
4830
|
--tw-bg-opacity: 1;
|
|
4824
|
-
background-color:
|
|
4831
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
4825
4832
|
--tw-text-opacity: 1;
|
|
4826
|
-
color:
|
|
4833
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
4827
4834
|
}
|
|
4828
4835
|
.toggle:disabled {
|
|
4829
4836
|
cursor: not-allowed;
|
|
4830
4837
|
--tw-border-opacity: 1;
|
|
4831
|
-
border-color:
|
|
4838
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4832
4839
|
background-color: transparent;
|
|
4833
4840
|
opacity: 0.3;
|
|
4834
|
-
--togglehandleborder: 0 0 0 3px
|
|
4835
|
-
var(--handleoffsetcalculator) 0 0 3px
|
|
4841
|
+
--togglehandleborder: 0 0 0 3px oklch(var(--bc)) inset,
|
|
4842
|
+
var(--handleoffsetcalculator) 0 0 3px oklch(var(--bc)) inset;
|
|
4836
4843
|
}
|
|
4837
4844
|
|
|
4838
4845
|
/* backward compatibility */
|
|
@@ -4841,22 +4848,22 @@ details.collapse summary {
|
|
|
4841
4848
|
display: none;
|
|
4842
4849
|
}
|
|
4843
4850
|
:root .prose {
|
|
4844
|
-
--tw-prose-body:
|
|
4845
|
-
--tw-prose-headings:
|
|
4846
|
-
--tw-prose-lead:
|
|
4847
|
-
--tw-prose-links:
|
|
4848
|
-
--tw-prose-bold:
|
|
4849
|
-
--tw-prose-counters:
|
|
4850
|
-
--tw-prose-bullets:
|
|
4851
|
-
--tw-prose-hr:
|
|
4852
|
-
--tw-prose-quotes:
|
|
4853
|
-
--tw-prose-quote-borders:
|
|
4854
|
-
--tw-prose-captions:
|
|
4855
|
-
--tw-prose-code:
|
|
4856
|
-
--tw-prose-pre-code:
|
|
4857
|
-
--tw-prose-pre-bg:
|
|
4858
|
-
--tw-prose-th-borders:
|
|
4859
|
-
--tw-prose-td-borders:
|
|
4851
|
+
--tw-prose-body: oklch(var(--bc) / 0.8);
|
|
4852
|
+
--tw-prose-headings: oklch(var(--bc));
|
|
4853
|
+
--tw-prose-lead: oklch(var(--bc));
|
|
4854
|
+
--tw-prose-links: oklch(var(--bc));
|
|
4855
|
+
--tw-prose-bold: oklch(var(--bc));
|
|
4856
|
+
--tw-prose-counters: oklch(var(--bc));
|
|
4857
|
+
--tw-prose-bullets: oklch(var(--bc) / 0.5);
|
|
4858
|
+
--tw-prose-hr: oklch(var(--bc) / 0.2);
|
|
4859
|
+
--tw-prose-quotes: oklch(var(--bc));
|
|
4860
|
+
--tw-prose-quote-borders: oklch(var(--bc) / 0.2);
|
|
4861
|
+
--tw-prose-captions: oklch(var(--bc) / 0.5);
|
|
4862
|
+
--tw-prose-code: oklch(var(--bc));
|
|
4863
|
+
--tw-prose-pre-code: oklch(var(--nc));
|
|
4864
|
+
--tw-prose-pre-bg: oklch(var(--n));
|
|
4865
|
+
--tw-prose-th-borders: oklch(var(--bc) / 0.5);
|
|
4866
|
+
--tw-prose-td-borders: oklch(var(--bc) / 0.2);
|
|
4860
4867
|
}
|
|
4861
4868
|
.prose :where(code):not(:where([class~="not-prose"] *)) {
|
|
4862
4869
|
padding: 2px 8px;
|
|
@@ -4871,5 +4878,5 @@ details.collapse summary {
|
|
|
4871
4878
|
padding: 0;
|
|
4872
4879
|
}
|
|
4873
4880
|
.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
|
|
4874
|
-
border-bottom-color:
|
|
4881
|
+
border-bottom-color: oklch(var(--bc) / 20%);
|
|
4875
4882
|
}
|