daisyui 4.0.0-alpha.2 → 4.0.0-alpha.4
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 +1 -50
- package/dist/base.js +1 -1
- package/dist/full.css +23482 -23193
- package/dist/styled.css +850 -707
- package/dist/styled.js +1 -1
- package/dist/styled.rtl.js +1 -0
- package/dist/themes.css +744 -744
- package/dist/unstyled.css +106 -13
- package/dist/unstyled.js +1 -1
- package/dist/unstyled.rtl.js +1 -0
- package/dist/utilities-styled.js +1 -1
- package/dist/utilities-unstyled.js +1 -1
- package/dist/utilities.js +1 -1
- package/package.json +2 -1
- package/src/index.js +14 -8
- package/src/theming/functions.js +71 -83
- package/src/theming/index.js +15 -36
- package/src/theming/themes.js +6 -12
package/dist/styled.css
CHANGED
|
@@ -109,13 +109,13 @@
|
|
|
109
109
|
flex-wrap: wrap;
|
|
110
110
|
align-items: center;
|
|
111
111
|
justify-content: center;
|
|
112
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
113
112
|
border-color: transparent;
|
|
114
113
|
text-align: center;
|
|
115
114
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
116
115
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
117
116
|
transition-duration: 200ms;
|
|
118
117
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
118
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
119
119
|
height: 3rem;
|
|
120
120
|
min-height: 3rem;
|
|
121
121
|
padding-left: 1rem;
|
|
@@ -691,7 +691,7 @@
|
|
|
691
691
|
display: flex;
|
|
692
692
|
align-items: center;
|
|
693
693
|
--tw-bg-opacity: 1;
|
|
694
|
-
background-color:
|
|
694
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
695
695
|
padding-left: 1rem;
|
|
696
696
|
padding-right: 1rem;
|
|
697
697
|
}
|
|
@@ -764,8 +764,17 @@
|
|
|
764
764
|
border-start-end-radius: inherit;
|
|
765
765
|
border-end-end-radius: inherit;
|
|
766
766
|
}
|
|
767
|
-
|
|
768
|
-
|
|
767
|
+
|
|
768
|
+
@supports not selector(:has(*)) {
|
|
769
|
+
:where(.join *) {
|
|
770
|
+
border-radius: inherit;
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
@supports selector(:has(*)) {
|
|
775
|
+
:where(.join *:has(.join-item)) {
|
|
776
|
+
border-radius: inherit;
|
|
777
|
+
}
|
|
769
778
|
}
|
|
770
779
|
.kbd {
|
|
771
780
|
display: inline-flex;
|
|
@@ -1149,24 +1158,54 @@
|
|
|
1149
1158
|
opacity: 1
|
|
1150
1159
|
}
|
|
1151
1160
|
.tabs {
|
|
1152
|
-
display:
|
|
1153
|
-
|
|
1154
|
-
|
|
1161
|
+
display: grid;
|
|
1162
|
+
align-items: flex-end;
|
|
1163
|
+
}
|
|
1164
|
+
.tabs:has(.tab-content[class^="rounded-"]) .tab-lifted:first-child:not(.tab-active),
|
|
1165
|
+
.tabs:has(.tab-content[class*=" rounded-"]) .tab-lifted:first-child:not(.tab-active) {
|
|
1166
|
+
border-bottom-color: transparent;
|
|
1155
1167
|
}
|
|
1156
1168
|
.tab {
|
|
1157
1169
|
position: relative;
|
|
1170
|
+
grid-row-start: 1;
|
|
1158
1171
|
display: inline-flex;
|
|
1172
|
+
height: 2rem;
|
|
1159
1173
|
cursor: pointer;
|
|
1160
1174
|
user-select: none;
|
|
1175
|
+
appearance: none;
|
|
1161
1176
|
flex-wrap: wrap;
|
|
1162
1177
|
align-items: center;
|
|
1163
1178
|
justify-content: center;
|
|
1164
1179
|
text-align: center;
|
|
1165
|
-
height: 2rem;
|
|
1166
1180
|
font-size: 0.875rem;
|
|
1167
1181
|
line-height: 1.25rem;
|
|
1168
1182
|
line-height: 2;
|
|
1169
|
-
--tab-padding: 1rem
|
|
1183
|
+
--tab-padding: 1rem;
|
|
1184
|
+
}
|
|
1185
|
+
.tab:is(input[type="radio"]):after {
|
|
1186
|
+
--tw-content: attr(aria-label);
|
|
1187
|
+
content: var(--tw-content);
|
|
1188
|
+
}
|
|
1189
|
+
.tab:not(input):empty {
|
|
1190
|
+
cursor: default;
|
|
1191
|
+
grid-column-start: span 9999;
|
|
1192
|
+
}
|
|
1193
|
+
.tab-content {
|
|
1194
|
+
grid-column: 1 / -1;
|
|
1195
|
+
grid-column-end: span 9999;
|
|
1196
|
+
grid-row-start: 2;
|
|
1197
|
+
margin-top: calc(var(--tab-border) * -1);
|
|
1198
|
+
display: none;
|
|
1199
|
+
border-color: transparent;
|
|
1200
|
+
border-width: var(--tab-border, 0);
|
|
1201
|
+
}
|
|
1202
|
+
:checked + .tab-content:nth-child(2),
|
|
1203
|
+
.tab-active + .tab-content:nth-child(2) {
|
|
1204
|
+
border-start-start-radius: 0px;
|
|
1205
|
+
}
|
|
1206
|
+
input.tab:checked + .tab-content,
|
|
1207
|
+
.tab-active + .tab-content {
|
|
1208
|
+
display: block;
|
|
1170
1209
|
}
|
|
1171
1210
|
.table {
|
|
1172
1211
|
position: relative;
|
|
@@ -1177,25 +1216,25 @@
|
|
|
1177
1216
|
top: 0px;
|
|
1178
1217
|
z-index: 1;
|
|
1179
1218
|
--tw-bg-opacity: 1;
|
|
1180
|
-
background-color:
|
|
1219
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1181
1220
|
}
|
|
1182
1221
|
.table :where(.table-pin-rows tfoot tr) {
|
|
1183
1222
|
position: sticky;
|
|
1184
1223
|
bottom: 0px;
|
|
1185
1224
|
z-index: 1;
|
|
1186
1225
|
--tw-bg-opacity: 1;
|
|
1187
|
-
background-color:
|
|
1226
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1188
1227
|
}
|
|
1189
1228
|
.table :where(.table-pin-cols tr th) {
|
|
1190
1229
|
position: sticky;
|
|
1191
1230
|
left: 0px;
|
|
1192
1231
|
right: 0px;
|
|
1193
1232
|
--tw-bg-opacity: 1;
|
|
1194
|
-
background-color:
|
|
1233
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1195
1234
|
}
|
|
1196
1235
|
.table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
|
|
1197
1236
|
--tw-bg-opacity: 1;
|
|
1198
|
-
background-color:
|
|
1237
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity))
|
|
1199
1238
|
}
|
|
1200
1239
|
.textarea {
|
|
1201
1240
|
min-height: 3rem;
|
|
@@ -1208,6 +1247,60 @@
|
|
|
1208
1247
|
line-height: 1.25rem;
|
|
1209
1248
|
line-height: 2
|
|
1210
1249
|
}
|
|
1250
|
+
.timeline {
|
|
1251
|
+
position: relative;
|
|
1252
|
+
display: flex;
|
|
1253
|
+
}
|
|
1254
|
+
:where(.timeline li) {
|
|
1255
|
+
position: relative;
|
|
1256
|
+
display: grid;
|
|
1257
|
+
align-items: center;
|
|
1258
|
+
grid-template-rows: 1fr auto 1fr;
|
|
1259
|
+
grid-template-columns: 1fr auto 1fr;
|
|
1260
|
+
}
|
|
1261
|
+
:where(.timeline:not(:has(.timeline-start)) li) {
|
|
1262
|
+
grid-template-rows: min-content auto 1fr;
|
|
1263
|
+
}
|
|
1264
|
+
:where(.timeline:not(:has(.timeline-end)) li) {
|
|
1265
|
+
grid-template-rows: 1fr auto min-content;
|
|
1266
|
+
}
|
|
1267
|
+
:where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
|
|
1268
|
+
grid-template-rows: min-content auto min-content;
|
|
1269
|
+
}
|
|
1270
|
+
.timeline hr {
|
|
1271
|
+
width: 100%;
|
|
1272
|
+
border-width: 0px;
|
|
1273
|
+
}
|
|
1274
|
+
:where(.timeline hr):first-child {
|
|
1275
|
+
grid-column-start: 1;
|
|
1276
|
+
grid-row-start: 2;
|
|
1277
|
+
}
|
|
1278
|
+
:where(.timeline hr):last-child {
|
|
1279
|
+
grid-column-start: 3;
|
|
1280
|
+
grid-row-start: 2;
|
|
1281
|
+
}
|
|
1282
|
+
.timeline-start {
|
|
1283
|
+
grid-column-start: 1;
|
|
1284
|
+
grid-column-end: 4;
|
|
1285
|
+
grid-row-start: 1;
|
|
1286
|
+
grid-row-end: 2;
|
|
1287
|
+
margin: 0.25rem;
|
|
1288
|
+
align-self: flex-end;
|
|
1289
|
+
justify-self: center;
|
|
1290
|
+
}
|
|
1291
|
+
.timeline-middle {
|
|
1292
|
+
grid-column-start: 2;
|
|
1293
|
+
grid-row-start: 2;
|
|
1294
|
+
}
|
|
1295
|
+
.timeline-end {
|
|
1296
|
+
grid-column-start: 1;
|
|
1297
|
+
grid-column-end: 4;
|
|
1298
|
+
grid-row-start: 3;
|
|
1299
|
+
grid-row-end: 4;
|
|
1300
|
+
margin: 0.25rem;
|
|
1301
|
+
align-self: flex-start;
|
|
1302
|
+
justify-self: center;
|
|
1303
|
+
}
|
|
1211
1304
|
.toast {
|
|
1212
1305
|
position: fixed;
|
|
1213
1306
|
display: flex;
|
|
@@ -1219,47 +1312,47 @@
|
|
|
1219
1312
|
flex-shrink: 0
|
|
1220
1313
|
}
|
|
1221
1314
|
.alert {
|
|
1222
|
-
border-radius: var(--rounded-box, 1rem);
|
|
1223
1315
|
border-width: 1px;
|
|
1224
1316
|
--tw-border-opacity: 1;
|
|
1225
|
-
border-color:
|
|
1317
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1226
1318
|
padding: 1rem;
|
|
1227
1319
|
--tw-text-opacity: 1;
|
|
1228
|
-
color:
|
|
1229
|
-
|
|
1230
|
-
--alert-bg
|
|
1320
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1321
|
+
border-radius: var(--rounded-box, 1rem);
|
|
1322
|
+
--alert-bg: oklch(var(--b2));
|
|
1323
|
+
--alert-bg-mix: oklch(var(--b1));
|
|
1231
1324
|
background-color: var(--alert-bg)
|
|
1232
1325
|
}
|
|
1233
1326
|
/* @supports (background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix))) {
|
|
1234
1327
|
background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix));
|
|
1235
1328
|
} */
|
|
1236
1329
|
.alert-info {
|
|
1237
|
-
border-color:
|
|
1330
|
+
border-color: oklch(var(--in) / 0.2);
|
|
1238
1331
|
--tw-text-opacity: 1;
|
|
1239
|
-
color:
|
|
1240
|
-
--alert-bg:
|
|
1241
|
-
--alert-bg-mix:
|
|
1332
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1333
|
+
--alert-bg: oklch(var(--in));
|
|
1334
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1242
1335
|
}
|
|
1243
1336
|
.alert-success {
|
|
1244
|
-
border-color:
|
|
1337
|
+
border-color: oklch(var(--su) / 0.2);
|
|
1245
1338
|
--tw-text-opacity: 1;
|
|
1246
|
-
color:
|
|
1247
|
-
--alert-bg:
|
|
1248
|
-
--alert-bg-mix:
|
|
1339
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1340
|
+
--alert-bg: oklch(var(--su));
|
|
1341
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1249
1342
|
}
|
|
1250
1343
|
.alert-warning {
|
|
1251
|
-
border-color:
|
|
1344
|
+
border-color: oklch(var(--wa) / 0.2);
|
|
1252
1345
|
--tw-text-opacity: 1;
|
|
1253
|
-
color:
|
|
1254
|
-
--alert-bg:
|
|
1255
|
-
--alert-bg-mix:
|
|
1346
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1347
|
+
--alert-bg: oklch(var(--wa));
|
|
1348
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1256
1349
|
}
|
|
1257
1350
|
.alert-error {
|
|
1258
|
-
border-color:
|
|
1351
|
+
border-color: oklch(var(--er) / 0.2);
|
|
1259
1352
|
--tw-text-opacity: 1;
|
|
1260
|
-
color:
|
|
1261
|
-
--alert-bg:
|
|
1262
|
-
--alert-bg-mix:
|
|
1353
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1354
|
+
--alert-bg: oklch(var(--er));
|
|
1355
|
+
--alert-bg-mix: oklch(var(--b1))
|
|
1263
1356
|
}
|
|
1264
1357
|
.avatar-group {
|
|
1265
1358
|
display: flex;
|
|
@@ -1270,85 +1363,85 @@
|
|
|
1270
1363
|
border-radius: 9999px;
|
|
1271
1364
|
border-width: 4px;
|
|
1272
1365
|
--tw-border-opacity: 1;
|
|
1273
|
-
border-color:
|
|
1366
|
+
border-color: oklch(var(--b1) / var(--tw-border-opacity))
|
|
1274
1367
|
}
|
|
1275
1368
|
.badge {
|
|
1276
|
-
border-radius: var(--rounded-badge, 1.9rem);
|
|
1277
1369
|
border-width: 1px;
|
|
1278
1370
|
--tw-border-opacity: 1;
|
|
1279
|
-
border-color:
|
|
1371
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1280
1372
|
--tw-bg-opacity: 1;
|
|
1281
|
-
background-color:
|
|
1373
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
1282
1374
|
--tw-text-opacity: 1;
|
|
1283
|
-
color:
|
|
1375
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1376
|
+
border-radius: var(--rounded-badge, 1.9rem)
|
|
1284
1377
|
}
|
|
1285
1378
|
.badge-neutral {
|
|
1286
1379
|
--tw-border-opacity: 1;
|
|
1287
|
-
border-color:
|
|
1380
|
+
border-color: oklch(var(--n) / var(--tw-border-opacity));
|
|
1288
1381
|
--tw-bg-opacity: 1;
|
|
1289
|
-
background-color:
|
|
1382
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1290
1383
|
--tw-text-opacity: 1;
|
|
1291
|
-
color:
|
|
1384
|
+
color: oklch(var(--nc) / var(--tw-text-opacity))
|
|
1292
1385
|
}
|
|
1293
1386
|
.badge-primary {
|
|
1294
1387
|
--tw-border-opacity: 1;
|
|
1295
|
-
border-color:
|
|
1388
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
1296
1389
|
--tw-bg-opacity: 1;
|
|
1297
|
-
background-color:
|
|
1390
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
1298
1391
|
--tw-text-opacity: 1;
|
|
1299
|
-
color:
|
|
1392
|
+
color: oklch(var(--pc) / var(--tw-text-opacity))
|
|
1300
1393
|
}
|
|
1301
1394
|
.badge-secondary {
|
|
1302
1395
|
--tw-border-opacity: 1;
|
|
1303
|
-
border-color:
|
|
1396
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
1304
1397
|
--tw-bg-opacity: 1;
|
|
1305
|
-
background-color:
|
|
1398
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
1306
1399
|
--tw-text-opacity: 1;
|
|
1307
|
-
color:
|
|
1400
|
+
color: oklch(var(--sc) / var(--tw-text-opacity))
|
|
1308
1401
|
}
|
|
1309
1402
|
.badge-accent {
|
|
1310
1403
|
--tw-border-opacity: 1;
|
|
1311
|
-
border-color:
|
|
1404
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
1312
1405
|
--tw-bg-opacity: 1;
|
|
1313
|
-
background-color:
|
|
1406
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
1314
1407
|
--tw-text-opacity: 1;
|
|
1315
|
-
color:
|
|
1408
|
+
color: oklch(var(--ac) / var(--tw-text-opacity))
|
|
1316
1409
|
}
|
|
1317
1410
|
.badge-info {
|
|
1318
1411
|
border-color: transparent;
|
|
1319
1412
|
--tw-bg-opacity: 1;
|
|
1320
|
-
background-color:
|
|
1413
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1321
1414
|
--tw-text-opacity: 1;
|
|
1322
|
-
color:
|
|
1415
|
+
color: oklch(var(--inc) / var(--tw-text-opacity))
|
|
1323
1416
|
}
|
|
1324
1417
|
.badge-success {
|
|
1325
1418
|
border-color: transparent;
|
|
1326
1419
|
--tw-bg-opacity: 1;
|
|
1327
|
-
background-color:
|
|
1420
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1328
1421
|
--tw-text-opacity: 1;
|
|
1329
|
-
color:
|
|
1422
|
+
color: oklch(var(--suc) / var(--tw-text-opacity))
|
|
1330
1423
|
}
|
|
1331
1424
|
.badge-warning {
|
|
1332
1425
|
border-color: transparent;
|
|
1333
1426
|
--tw-bg-opacity: 1;
|
|
1334
|
-
background-color:
|
|
1427
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1335
1428
|
--tw-text-opacity: 1;
|
|
1336
|
-
color:
|
|
1429
|
+
color: oklch(var(--wac) / var(--tw-text-opacity))
|
|
1337
1430
|
}
|
|
1338
1431
|
.badge-error {
|
|
1339
1432
|
border-color: transparent;
|
|
1340
1433
|
--tw-bg-opacity: 1;
|
|
1341
|
-
background-color:
|
|
1434
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1342
1435
|
--tw-text-opacity: 1;
|
|
1343
|
-
color:
|
|
1436
|
+
color: oklch(var(--erc) / var(--tw-text-opacity))
|
|
1344
1437
|
}
|
|
1345
1438
|
.badge-ghost {
|
|
1346
1439
|
--tw-border-opacity: 1;
|
|
1347
|
-
border-color:
|
|
1440
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1348
1441
|
--tw-bg-opacity: 1;
|
|
1349
|
-
background-color:
|
|
1442
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
1350
1443
|
--tw-text-opacity: 1;
|
|
1351
|
-
color:
|
|
1444
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
1352
1445
|
}
|
|
1353
1446
|
.badge-outline {
|
|
1354
1447
|
border-color: currentColor;
|
|
@@ -1358,40 +1451,40 @@
|
|
|
1358
1451
|
}
|
|
1359
1452
|
.badge-outline.badge-neutral {
|
|
1360
1453
|
--tw-text-opacity: 1;
|
|
1361
|
-
color:
|
|
1454
|
+
color: oklch(var(--n) / var(--tw-text-opacity))
|
|
1362
1455
|
}
|
|
1363
1456
|
.badge-outline.badge-primary {
|
|
1364
1457
|
--tw-text-opacity: 1;
|
|
1365
|
-
color:
|
|
1458
|
+
color: oklch(var(--p) / var(--tw-text-opacity))
|
|
1366
1459
|
}
|
|
1367
1460
|
.badge-outline.badge-secondary {
|
|
1368
1461
|
--tw-text-opacity: 1;
|
|
1369
|
-
color:
|
|
1462
|
+
color: oklch(var(--s) / var(--tw-text-opacity))
|
|
1370
1463
|
}
|
|
1371
1464
|
.badge-outline.badge-accent {
|
|
1372
1465
|
--tw-text-opacity: 1;
|
|
1373
|
-
color:
|
|
1466
|
+
color: oklch(var(--a) / var(--tw-text-opacity))
|
|
1374
1467
|
}
|
|
1375
1468
|
.badge-outline.badge-info {
|
|
1376
1469
|
--tw-text-opacity: 1;
|
|
1377
|
-
color:
|
|
1470
|
+
color: oklch(var(--in) / var(--tw-text-opacity))
|
|
1378
1471
|
}
|
|
1379
1472
|
.badge-outline.badge-success {
|
|
1380
1473
|
--tw-text-opacity: 1;
|
|
1381
|
-
color:
|
|
1474
|
+
color: oklch(var(--su) / var(--tw-text-opacity))
|
|
1382
1475
|
}
|
|
1383
1476
|
.badge-outline.badge-warning {
|
|
1384
1477
|
--tw-text-opacity: 1;
|
|
1385
|
-
color:
|
|
1478
|
+
color: oklch(var(--wa) / var(--tw-text-opacity))
|
|
1386
1479
|
}
|
|
1387
1480
|
.badge-outline.badge-error {
|
|
1388
1481
|
--tw-text-opacity: 1;
|
|
1389
|
-
color:
|
|
1482
|
+
color: oklch(var(--er) / var(--tw-text-opacity))
|
|
1390
1483
|
}
|
|
1391
1484
|
.btm-nav {
|
|
1392
1485
|
height: 4rem;
|
|
1393
1486
|
--tw-bg-opacity: 1;
|
|
1394
|
-
background-color:
|
|
1487
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
1395
1488
|
color: currentColor
|
|
1396
1489
|
}
|
|
1397
1490
|
.btm-nav > * {
|
|
@@ -1404,16 +1497,16 @@
|
|
|
1404
1497
|
.btm-nav > *:where(.active) {
|
|
1405
1498
|
border-top-width: 2px;
|
|
1406
1499
|
--tw-bg-opacity: 1;
|
|
1407
|
-
background-color:
|
|
1500
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity))
|
|
1408
1501
|
}
|
|
1409
1502
|
/* disabled */
|
|
1410
1503
|
.btm-nav > *.disabled,
|
|
1411
1504
|
.btm-nav > *[disabled] {
|
|
1412
1505
|
pointer-events: none;
|
|
1413
1506
|
--tw-border-opacity: 0;
|
|
1414
|
-
background-color:
|
|
1507
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1415
1508
|
--tw-bg-opacity: 0.1;
|
|
1416
|
-
color:
|
|
1509
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1417
1510
|
--tw-text-opacity: 0.2
|
|
1418
1511
|
}
|
|
1419
1512
|
@media (hover: hover) {
|
|
@@ -1421,9 +1514,9 @@
|
|
|
1421
1514
|
.btm-nav > *[disabled]:hover {
|
|
1422
1515
|
pointer-events: none;
|
|
1423
1516
|
--tw-border-opacity: 0;
|
|
1424
|
-
background-color:
|
|
1517
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1425
1518
|
--tw-bg-opacity: 0.1;
|
|
1426
|
-
color:
|
|
1519
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1427
1520
|
--tw-text-opacity: 0.2
|
|
1428
1521
|
}
|
|
1429
1522
|
}
|
|
@@ -1478,27 +1571,27 @@
|
|
|
1478
1571
|
/* default btn */
|
|
1479
1572
|
.btn {
|
|
1480
1573
|
--tw-border-opacity: 1;
|
|
1481
|
-
border-color:
|
|
1574
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
1482
1575
|
--tw-bg-opacity: 1;
|
|
1483
|
-
background-color:
|
|
1576
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
1484
1577
|
--tw-text-opacity: 1;
|
|
1485
|
-
color:
|
|
1578
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1486
1579
|
text-decoration-line: none;
|
|
1487
|
-
outline-color:
|
|
1580
|
+
outline-color: oklch(var(--bc) / 1);
|
|
1488
1581
|
}
|
|
1489
1582
|
@media (hover: hover) {
|
|
1490
1583
|
.btn:hover {
|
|
1491
1584
|
--tw-border-opacity: 1;
|
|
1492
|
-
border-color:
|
|
1585
|
+
border-color: oklch(var(--b3) / var(--tw-border-opacity));
|
|
1493
1586
|
--tw-bg-opacity: 1;
|
|
1494
|
-
background-color:
|
|
1587
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
1495
1588
|
}
|
|
1496
1589
|
}
|
|
1497
1590
|
.btn-active {
|
|
1498
1591
|
--tw-border-opacity: 1;
|
|
1499
|
-
border-color:
|
|
1592
|
+
border-color: oklch(var(--b3) / var(--tw-border-opacity));
|
|
1500
1593
|
--tw-bg-opacity: 1;
|
|
1501
|
-
background-color:
|
|
1594
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
1502
1595
|
}
|
|
1503
1596
|
.btn:focus-visible {
|
|
1504
1597
|
outline-style: solid;
|
|
@@ -1508,188 +1601,188 @@
|
|
|
1508
1601
|
/* brand colors */
|
|
1509
1602
|
.btn-primary {
|
|
1510
1603
|
--tw-border-opacity: 1;
|
|
1511
|
-
border-color:
|
|
1604
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
1512
1605
|
--tw-bg-opacity: 1;
|
|
1513
|
-
background-color:
|
|
1606
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
1514
1607
|
--tw-text-opacity: 1;
|
|
1515
|
-
color:
|
|
1516
|
-
outline-color:
|
|
1608
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1609
|
+
outline-color: oklch(var(--p) / 1);
|
|
1517
1610
|
}
|
|
1518
1611
|
@media (hover: hover) {
|
|
1519
1612
|
.btn-primary:hover {
|
|
1520
1613
|
--tw-border-opacity: 1;
|
|
1521
|
-
border-color:
|
|
1614
|
+
border-color: oklch(var(--pf) / var(--tw-border-opacity));
|
|
1522
1615
|
--tw-bg-opacity: 1;
|
|
1523
|
-
background-color:
|
|
1616
|
+
background-color: oklch(var(--pf) / var(--tw-bg-opacity));
|
|
1524
1617
|
}
|
|
1525
1618
|
}
|
|
1526
1619
|
.btn-primary.btn-active {
|
|
1527
1620
|
--tw-border-opacity: 1;
|
|
1528
|
-
border-color:
|
|
1621
|
+
border-color: oklch(var(--pf) / var(--tw-border-opacity));
|
|
1529
1622
|
--tw-bg-opacity: 1;
|
|
1530
|
-
background-color:
|
|
1623
|
+
background-color: oklch(var(--pf) / var(--tw-bg-opacity));
|
|
1531
1624
|
}
|
|
1532
1625
|
.btn-secondary {
|
|
1533
1626
|
--tw-border-opacity: 1;
|
|
1534
|
-
border-color:
|
|
1627
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
1535
1628
|
--tw-bg-opacity: 1;
|
|
1536
|
-
background-color:
|
|
1629
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
1537
1630
|
--tw-text-opacity: 1;
|
|
1538
|
-
color:
|
|
1539
|
-
outline-color:
|
|
1631
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
1632
|
+
outline-color: oklch(var(--s) / 1);
|
|
1540
1633
|
}
|
|
1541
1634
|
@media (hover: hover) {
|
|
1542
1635
|
.btn-secondary:hover {
|
|
1543
1636
|
--tw-border-opacity: 1;
|
|
1544
|
-
border-color:
|
|
1637
|
+
border-color: oklch(var(--sf) / var(--tw-border-opacity));
|
|
1545
1638
|
--tw-bg-opacity: 1;
|
|
1546
|
-
background-color:
|
|
1639
|
+
background-color: oklch(var(--sf) / var(--tw-bg-opacity));
|
|
1547
1640
|
}
|
|
1548
1641
|
}
|
|
1549
1642
|
.btn-secondary.btn-active {
|
|
1550
1643
|
--tw-border-opacity: 1;
|
|
1551
|
-
border-color:
|
|
1644
|
+
border-color: oklch(var(--sf) / var(--tw-border-opacity));
|
|
1552
1645
|
--tw-bg-opacity: 1;
|
|
1553
|
-
background-color:
|
|
1646
|
+
background-color: oklch(var(--sf) / var(--tw-bg-opacity));
|
|
1554
1647
|
}
|
|
1555
1648
|
.btn-accent {
|
|
1556
1649
|
--tw-border-opacity: 1;
|
|
1557
|
-
border-color:
|
|
1650
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
1558
1651
|
--tw-bg-opacity: 1;
|
|
1559
|
-
background-color:
|
|
1652
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
1560
1653
|
--tw-text-opacity: 1;
|
|
1561
|
-
color:
|
|
1562
|
-
outline-color:
|
|
1654
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
1655
|
+
outline-color: oklch(var(--a) / 1);
|
|
1563
1656
|
}
|
|
1564
1657
|
@media (hover: hover) {
|
|
1565
1658
|
.btn-accent:hover {
|
|
1566
1659
|
--tw-border-opacity: 1;
|
|
1567
|
-
border-color:
|
|
1660
|
+
border-color: oklch(var(--af) / var(--tw-border-opacity));
|
|
1568
1661
|
--tw-bg-opacity: 1;
|
|
1569
|
-
background-color:
|
|
1662
|
+
background-color: oklch(var(--af) / var(--tw-bg-opacity));
|
|
1570
1663
|
}
|
|
1571
1664
|
}
|
|
1572
1665
|
.btn-accent.btn-active {
|
|
1573
1666
|
--tw-border-opacity: 1;
|
|
1574
|
-
border-color:
|
|
1667
|
+
border-color: oklch(var(--af) / var(--tw-border-opacity));
|
|
1575
1668
|
--tw-bg-opacity: 1;
|
|
1576
|
-
background-color:
|
|
1669
|
+
background-color: oklch(var(--af) / var(--tw-bg-opacity));
|
|
1577
1670
|
}
|
|
1578
1671
|
.btn-neutral {
|
|
1579
1672
|
--tw-border-opacity: 1;
|
|
1580
|
-
border-color:
|
|
1673
|
+
border-color: oklch(var(--n) / var(--tw-border-opacity));
|
|
1581
1674
|
--tw-bg-opacity: 1;
|
|
1582
|
-
background-color:
|
|
1675
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1583
1676
|
--tw-text-opacity: 1;
|
|
1584
|
-
color:
|
|
1585
|
-
outline-color:
|
|
1677
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
1678
|
+
outline-color: oklch(var(--n) / 1);
|
|
1586
1679
|
}
|
|
1587
1680
|
@media (hover: hover) {
|
|
1588
1681
|
.btn-neutral:hover {
|
|
1589
1682
|
--tw-border-opacity: 1;
|
|
1590
|
-
border-color:
|
|
1683
|
+
border-color: oklch(var(--nf) / var(--tw-border-opacity));
|
|
1591
1684
|
--tw-bg-opacity: 1;
|
|
1592
|
-
background-color:
|
|
1685
|
+
background-color: oklch(var(--nf) / var(--tw-bg-opacity));
|
|
1593
1686
|
}
|
|
1594
1687
|
}
|
|
1595
1688
|
.btn-neutral.btn-active {
|
|
1596
1689
|
--tw-border-opacity: 1;
|
|
1597
|
-
border-color:
|
|
1690
|
+
border-color: oklch(var(--nf) / var(--tw-border-opacity));
|
|
1598
1691
|
--tw-bg-opacity: 1;
|
|
1599
|
-
background-color:
|
|
1692
|
+
background-color: oklch(var(--nf) / var(--tw-bg-opacity));
|
|
1600
1693
|
}
|
|
1601
1694
|
/* btn with state colors */
|
|
1602
1695
|
.btn-info {
|
|
1603
1696
|
--tw-border-opacity: 1;
|
|
1604
|
-
border-color:
|
|
1697
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
1605
1698
|
--tw-bg-opacity: 1;
|
|
1606
|
-
background-color:
|
|
1699
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1607
1700
|
--tw-text-opacity: 1;
|
|
1608
|
-
color:
|
|
1609
|
-
outline-color:
|
|
1701
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1702
|
+
outline-color: oklch(var(--in) / 1);
|
|
1610
1703
|
}
|
|
1611
1704
|
@media (hover: hover) {
|
|
1612
1705
|
.btn-info:hover {
|
|
1613
1706
|
--tw-border-opacity: 1;
|
|
1614
|
-
border-color:
|
|
1707
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
1615
1708
|
--tw-bg-opacity: 1;
|
|
1616
|
-
background-color:
|
|
1709
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1617
1710
|
}
|
|
1618
1711
|
}
|
|
1619
1712
|
.btn-info.btn-active {
|
|
1620
1713
|
--tw-border-opacity: 1;
|
|
1621
|
-
border-color:
|
|
1714
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
1622
1715
|
--tw-bg-opacity: 1;
|
|
1623
|
-
background-color:
|
|
1716
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1624
1717
|
}
|
|
1625
1718
|
.btn-success {
|
|
1626
1719
|
--tw-border-opacity: 1;
|
|
1627
|
-
border-color:
|
|
1720
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
1628
1721
|
--tw-bg-opacity: 1;
|
|
1629
|
-
background-color:
|
|
1722
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1630
1723
|
--tw-text-opacity: 1;
|
|
1631
|
-
color:
|
|
1632
|
-
outline-color:
|
|
1724
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1725
|
+
outline-color: oklch(var(--su) / 1);
|
|
1633
1726
|
}
|
|
1634
1727
|
@media (hover: hover) {
|
|
1635
1728
|
.btn-success:hover {
|
|
1636
1729
|
--tw-border-opacity: 1;
|
|
1637
|
-
border-color:
|
|
1730
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
1638
1731
|
--tw-bg-opacity: 1;
|
|
1639
|
-
background-color:
|
|
1732
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1640
1733
|
}
|
|
1641
1734
|
}
|
|
1642
1735
|
.btn-success.btn-active {
|
|
1643
1736
|
--tw-border-opacity: 1;
|
|
1644
|
-
border-color:
|
|
1737
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
1645
1738
|
--tw-bg-opacity: 1;
|
|
1646
|
-
background-color:
|
|
1739
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1647
1740
|
}
|
|
1648
1741
|
.btn-warning {
|
|
1649
1742
|
--tw-border-opacity: 1;
|
|
1650
|
-
border-color:
|
|
1743
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
1651
1744
|
--tw-bg-opacity: 1;
|
|
1652
|
-
background-color:
|
|
1745
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1653
1746
|
--tw-text-opacity: 1;
|
|
1654
|
-
color:
|
|
1655
|
-
outline-color:
|
|
1747
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1748
|
+
outline-color: oklch(var(--wa) / 1);
|
|
1656
1749
|
}
|
|
1657
1750
|
@media (hover: hover) {
|
|
1658
1751
|
.btn-warning:hover {
|
|
1659
1752
|
--tw-border-opacity: 1;
|
|
1660
|
-
border-color:
|
|
1753
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
1661
1754
|
--tw-bg-opacity: 1;
|
|
1662
|
-
background-color:
|
|
1755
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1663
1756
|
}
|
|
1664
1757
|
}
|
|
1665
1758
|
.btn-warning.btn-active {
|
|
1666
1759
|
--tw-border-opacity: 1;
|
|
1667
|
-
border-color:
|
|
1760
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
1668
1761
|
--tw-bg-opacity: 1;
|
|
1669
|
-
background-color:
|
|
1762
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1670
1763
|
}
|
|
1671
1764
|
.btn-error {
|
|
1672
1765
|
--tw-border-opacity: 1;
|
|
1673
|
-
border-color:
|
|
1766
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
1674
1767
|
--tw-bg-opacity: 1;
|
|
1675
|
-
background-color:
|
|
1768
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1676
1769
|
--tw-text-opacity: 1;
|
|
1677
|
-
color:
|
|
1678
|
-
outline-color:
|
|
1770
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1771
|
+
outline-color: oklch(var(--er) / 1);
|
|
1679
1772
|
}
|
|
1680
1773
|
@media (hover: hover) {
|
|
1681
1774
|
.btn-error:hover {
|
|
1682
1775
|
--tw-border-opacity: 1;
|
|
1683
|
-
border-color:
|
|
1776
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
1684
1777
|
--tw-bg-opacity: 1;
|
|
1685
|
-
background-color:
|
|
1778
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1686
1779
|
}
|
|
1687
1780
|
}
|
|
1688
1781
|
.btn-error.btn-active {
|
|
1689
1782
|
--tw-border-opacity: 1;
|
|
1690
|
-
border-color:
|
|
1783
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
1691
1784
|
--tw-bg-opacity: 1;
|
|
1692
|
-
background-color:
|
|
1785
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1693
1786
|
}
|
|
1694
1787
|
/* glass */
|
|
1695
1788
|
.btn.glass {
|
|
@@ -1722,20 +1815,20 @@
|
|
|
1722
1815
|
@media (hover: hover) {
|
|
1723
1816
|
.btn-ghost:hover {
|
|
1724
1817
|
--tw-border-opacity: 0;
|
|
1725
|
-
background-color:
|
|
1818
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1726
1819
|
--tw-bg-opacity: 0.2;
|
|
1727
1820
|
}
|
|
1728
1821
|
}
|
|
1729
1822
|
.btn-ghost.btn-active {
|
|
1730
1823
|
--tw-border-opacity: 0;
|
|
1731
|
-
background-color:
|
|
1824
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1732
1825
|
--tw-bg-opacity: 0.2;
|
|
1733
1826
|
}
|
|
1734
1827
|
.btn-link {
|
|
1735
1828
|
border-color: transparent;
|
|
1736
1829
|
background-color: transparent;
|
|
1737
1830
|
--tw-text-opacity: 1;
|
|
1738
|
-
color:
|
|
1831
|
+
color: oklch(var(--p) / var(--tw-text-opacity));
|
|
1739
1832
|
text-decoration-line: underline;
|
|
1740
1833
|
--tw-shadow: 0 0 #0000;
|
|
1741
1834
|
--tw-shadow-colored: 0 0 #0000;
|
|
@@ -1759,7 +1852,7 @@
|
|
|
1759
1852
|
border-color: currentColor;
|
|
1760
1853
|
background-color: transparent;
|
|
1761
1854
|
--tw-text-opacity: 1;
|
|
1762
|
-
color:
|
|
1855
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1763
1856
|
--tw-shadow: 0 0 #0000;
|
|
1764
1857
|
--tw-shadow-colored: 0 0 #0000;
|
|
1765
1858
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
@@ -1767,183 +1860,183 @@
|
|
|
1767
1860
|
@media (hover: hover) {
|
|
1768
1861
|
.btn-outline:hover {
|
|
1769
1862
|
--tw-border-opacity: 1;
|
|
1770
|
-
border-color:
|
|
1863
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
1771
1864
|
--tw-bg-opacity: 1;
|
|
1772
|
-
background-color:
|
|
1865
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1773
1866
|
--tw-text-opacity: 1;
|
|
1774
|
-
color:
|
|
1867
|
+
color: oklch(var(--b1) / var(--tw-text-opacity));
|
|
1775
1868
|
}
|
|
1776
1869
|
}
|
|
1777
1870
|
.btn-outline.btn-active {
|
|
1778
1871
|
--tw-border-opacity: 1;
|
|
1779
|
-
border-color:
|
|
1872
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
1780
1873
|
--tw-bg-opacity: 1;
|
|
1781
|
-
background-color:
|
|
1874
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
1782
1875
|
--tw-text-opacity: 1;
|
|
1783
|
-
color:
|
|
1876
|
+
color: oklch(var(--b1) / var(--tw-text-opacity));
|
|
1784
1877
|
}
|
|
1785
1878
|
.btn-outline.btn-primary {
|
|
1786
1879
|
--tw-text-opacity: 1;
|
|
1787
|
-
color:
|
|
1880
|
+
color: oklch(var(--p) / var(--tw-text-opacity));
|
|
1788
1881
|
}
|
|
1789
1882
|
@media (hover: hover) {
|
|
1790
1883
|
.btn-outline.btn-primary:hover {
|
|
1791
1884
|
--tw-border-opacity: 1;
|
|
1792
|
-
border-color:
|
|
1885
|
+
border-color: oklch(var(--pf) / var(--tw-border-opacity));
|
|
1793
1886
|
--tw-bg-opacity: 1;
|
|
1794
|
-
background-color:
|
|
1887
|
+
background-color: oklch(var(--pf) / var(--tw-bg-opacity));
|
|
1795
1888
|
--tw-text-opacity: 1;
|
|
1796
|
-
color:
|
|
1889
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1797
1890
|
}
|
|
1798
1891
|
}
|
|
1799
1892
|
.btn-outline.btn-primary.btn-active {
|
|
1800
1893
|
--tw-border-opacity: 1;
|
|
1801
|
-
border-color:
|
|
1894
|
+
border-color: oklch(var(--pf) / var(--tw-border-opacity));
|
|
1802
1895
|
--tw-bg-opacity: 1;
|
|
1803
|
-
background-color:
|
|
1896
|
+
background-color: oklch(var(--pf) / var(--tw-bg-opacity));
|
|
1804
1897
|
--tw-text-opacity: 1;
|
|
1805
|
-
color:
|
|
1898
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1806
1899
|
}
|
|
1807
1900
|
.btn-outline.btn-secondary {
|
|
1808
1901
|
--tw-text-opacity: 1;
|
|
1809
|
-
color:
|
|
1902
|
+
color: oklch(var(--s) / var(--tw-text-opacity));
|
|
1810
1903
|
}
|
|
1811
1904
|
@media (hover: hover) {
|
|
1812
1905
|
.btn-outline.btn-secondary:hover {
|
|
1813
1906
|
--tw-border-opacity: 1;
|
|
1814
|
-
border-color:
|
|
1907
|
+
border-color: oklch(var(--sf) / var(--tw-border-opacity));
|
|
1815
1908
|
--tw-bg-opacity: 1;
|
|
1816
|
-
background-color:
|
|
1909
|
+
background-color: oklch(var(--sf) / var(--tw-bg-opacity));
|
|
1817
1910
|
--tw-text-opacity: 1;
|
|
1818
|
-
color:
|
|
1911
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
1819
1912
|
}
|
|
1820
1913
|
}
|
|
1821
1914
|
.btn-outline.btn-secondary.btn-active {
|
|
1822
1915
|
--tw-border-opacity: 1;
|
|
1823
|
-
border-color:
|
|
1916
|
+
border-color: oklch(var(--sf) / var(--tw-border-opacity));
|
|
1824
1917
|
--tw-bg-opacity: 1;
|
|
1825
|
-
background-color:
|
|
1918
|
+
background-color: oklch(var(--sf) / var(--tw-bg-opacity));
|
|
1826
1919
|
--tw-text-opacity: 1;
|
|
1827
|
-
color:
|
|
1920
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
1828
1921
|
}
|
|
1829
1922
|
.btn-outline.btn-accent {
|
|
1830
1923
|
--tw-text-opacity: 1;
|
|
1831
|
-
color:
|
|
1924
|
+
color: oklch(var(--a) / var(--tw-text-opacity));
|
|
1832
1925
|
}
|
|
1833
1926
|
@media (hover: hover) {
|
|
1834
1927
|
.btn-outline.btn-accent:hover {
|
|
1835
1928
|
--tw-border-opacity: 1;
|
|
1836
|
-
border-color:
|
|
1929
|
+
border-color: oklch(var(--af) / var(--tw-border-opacity));
|
|
1837
1930
|
--tw-bg-opacity: 1;
|
|
1838
|
-
background-color:
|
|
1931
|
+
background-color: oklch(var(--af) / var(--tw-bg-opacity));
|
|
1839
1932
|
--tw-text-opacity: 1;
|
|
1840
|
-
color:
|
|
1933
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
1841
1934
|
}
|
|
1842
1935
|
}
|
|
1843
1936
|
.btn-outline.btn-accent.btn-active {
|
|
1844
1937
|
--tw-border-opacity: 1;
|
|
1845
|
-
border-color:
|
|
1938
|
+
border-color: oklch(var(--af) / var(--tw-border-opacity));
|
|
1846
1939
|
--tw-bg-opacity: 1;
|
|
1847
|
-
background-color:
|
|
1940
|
+
background-color: oklch(var(--af) / var(--tw-bg-opacity));
|
|
1848
1941
|
--tw-text-opacity: 1;
|
|
1849
|
-
color:
|
|
1942
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
1850
1943
|
}
|
|
1851
1944
|
.btn-outline.btn-success {
|
|
1852
1945
|
--tw-text-opacity: 1;
|
|
1853
|
-
color:
|
|
1946
|
+
color: oklch(var(--su) / var(--tw-text-opacity));
|
|
1854
1947
|
}
|
|
1855
1948
|
@media (hover: hover) {
|
|
1856
1949
|
.btn-outline.btn-success:hover {
|
|
1857
1950
|
--tw-border-opacity: 1;
|
|
1858
|
-
border-color:
|
|
1951
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
1859
1952
|
--tw-bg-opacity: 1;
|
|
1860
|
-
background-color:
|
|
1953
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1861
1954
|
--tw-text-opacity: 1;
|
|
1862
|
-
color:
|
|
1955
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1863
1956
|
}
|
|
1864
1957
|
}
|
|
1865
1958
|
.btn-outline.btn-success.btn-active {
|
|
1866
1959
|
--tw-border-opacity: 1;
|
|
1867
|
-
border-color:
|
|
1960
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
1868
1961
|
--tw-bg-opacity: 1;
|
|
1869
|
-
background-color:
|
|
1962
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
1870
1963
|
--tw-text-opacity: 1;
|
|
1871
|
-
color:
|
|
1964
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
1872
1965
|
}
|
|
1873
1966
|
.btn-outline.btn-info {
|
|
1874
1967
|
--tw-text-opacity: 1;
|
|
1875
|
-
color:
|
|
1968
|
+
color: oklch(var(--in) / var(--tw-text-opacity));
|
|
1876
1969
|
}
|
|
1877
1970
|
@media (hover: hover) {
|
|
1878
1971
|
.btn-outline.btn-info:hover {
|
|
1879
1972
|
--tw-border-opacity: 1;
|
|
1880
|
-
border-color:
|
|
1973
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
1881
1974
|
--tw-bg-opacity: 1;
|
|
1882
|
-
background-color:
|
|
1975
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1883
1976
|
--tw-text-opacity: 1;
|
|
1884
|
-
color:
|
|
1977
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1885
1978
|
}
|
|
1886
1979
|
}
|
|
1887
1980
|
.btn-outline.btn-info.btn-active {
|
|
1888
1981
|
--tw-border-opacity: 1;
|
|
1889
|
-
border-color:
|
|
1982
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
1890
1983
|
--tw-bg-opacity: 1;
|
|
1891
|
-
background-color:
|
|
1984
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
1892
1985
|
--tw-text-opacity: 1;
|
|
1893
|
-
color:
|
|
1986
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
1894
1987
|
}
|
|
1895
1988
|
.btn-outline.btn-warning {
|
|
1896
1989
|
--tw-text-opacity: 1;
|
|
1897
|
-
color:
|
|
1990
|
+
color: oklch(var(--wa) / var(--tw-text-opacity));
|
|
1898
1991
|
}
|
|
1899
1992
|
@media (hover: hover) {
|
|
1900
1993
|
.btn-outline.btn-warning:hover {
|
|
1901
1994
|
--tw-border-opacity: 1;
|
|
1902
|
-
border-color:
|
|
1995
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
1903
1996
|
--tw-bg-opacity: 1;
|
|
1904
|
-
background-color:
|
|
1997
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1905
1998
|
--tw-text-opacity: 1;
|
|
1906
|
-
color:
|
|
1999
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1907
2000
|
}
|
|
1908
2001
|
}
|
|
1909
2002
|
.btn-outline.btn-warning.btn-active {
|
|
1910
2003
|
--tw-border-opacity: 1;
|
|
1911
|
-
border-color:
|
|
2004
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
1912
2005
|
--tw-bg-opacity: 1;
|
|
1913
|
-
background-color:
|
|
2006
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
1914
2007
|
--tw-text-opacity: 1;
|
|
1915
|
-
color:
|
|
2008
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
1916
2009
|
}
|
|
1917
2010
|
.btn-outline.btn-error {
|
|
1918
2011
|
--tw-text-opacity: 1;
|
|
1919
|
-
color:
|
|
2012
|
+
color: oklch(var(--er) / var(--tw-text-opacity));
|
|
1920
2013
|
}
|
|
1921
2014
|
@media (hover: hover) {
|
|
1922
2015
|
.btn-outline.btn-error:hover {
|
|
1923
2016
|
--tw-border-opacity: 1;
|
|
1924
|
-
border-color:
|
|
2017
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
1925
2018
|
--tw-bg-opacity: 1;
|
|
1926
|
-
background-color:
|
|
2019
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1927
2020
|
--tw-text-opacity: 1;
|
|
1928
|
-
color:
|
|
2021
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1929
2022
|
}
|
|
1930
2023
|
}
|
|
1931
2024
|
.btn-outline.btn-error.btn-active {
|
|
1932
2025
|
--tw-border-opacity: 1;
|
|
1933
|
-
border-color:
|
|
2026
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
1934
2027
|
--tw-bg-opacity: 1;
|
|
1935
|
-
background-color:
|
|
2028
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
1936
2029
|
--tw-text-opacity: 1;
|
|
1937
|
-
color:
|
|
2030
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
1938
2031
|
}
|
|
1939
2032
|
/* disabled */
|
|
1940
2033
|
.btn.btn-disabled,
|
|
1941
2034
|
.btn[disabled],
|
|
1942
2035
|
.btn:disabled {
|
|
1943
2036
|
--tw-border-opacity: 0;
|
|
1944
|
-
background-color:
|
|
2037
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1945
2038
|
--tw-bg-opacity: 0.2;
|
|
1946
|
-
color:
|
|
2039
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1947
2040
|
--tw-text-opacity: 0.2;
|
|
1948
2041
|
}
|
|
1949
2042
|
@media (hover: hover) {
|
|
@@ -1951,9 +2044,9 @@
|
|
|
1951
2044
|
.btn[disabled]:hover,
|
|
1952
2045
|
.btn:disabled:hover {
|
|
1953
2046
|
--tw-border-opacity: 0;
|
|
1954
|
-
background-color:
|
|
2047
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
1955
2048
|
--tw-bg-opacity: 0.2;
|
|
1956
|
-
color:
|
|
2049
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
1957
2050
|
--tw-text-opacity: 0.2;
|
|
1958
2051
|
}
|
|
1959
2052
|
}
|
|
@@ -1961,37 +2054,37 @@
|
|
|
1961
2054
|
.btn-group > input[type="radio"]:checked.btn,
|
|
1962
2055
|
.btn-group > .btn-active {
|
|
1963
2056
|
--tw-border-opacity: 1;
|
|
1964
|
-
border-color:
|
|
2057
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
1965
2058
|
--tw-bg-opacity: 1;
|
|
1966
|
-
background-color:
|
|
2059
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
1967
2060
|
--tw-text-opacity: 1;
|
|
1968
|
-
color:
|
|
2061
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1969
2062
|
}
|
|
1970
2063
|
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
|
|
1971
2064
|
outline-style: solid;
|
|
1972
2065
|
outline-width: 2px;
|
|
1973
|
-
outline-color:
|
|
2066
|
+
outline-color: oklch(var(--p) / 1);
|
|
1974
2067
|
}
|
|
1975
2068
|
/* radio input and checkbox as button */
|
|
1976
2069
|
.btn:is(input[type="checkbox"]:checked),
|
|
1977
2070
|
.btn:is(input[type="radio"]:checked) {
|
|
1978
2071
|
--tw-border-opacity: 1;
|
|
1979
|
-
border-color:
|
|
2072
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
1980
2073
|
--tw-bg-opacity: 1;
|
|
1981
|
-
background-color:
|
|
2074
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
1982
2075
|
--tw-text-opacity: 1;
|
|
1983
|
-
color:
|
|
2076
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
1984
2077
|
}
|
|
1985
2078
|
@media (hover: hover) {
|
|
1986
2079
|
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
|
|
1987
2080
|
--tw-border-opacity: 1;
|
|
1988
|
-
border-color:
|
|
2081
|
+
border-color: oklch(var(--pf) / var(--tw-border-opacity));
|
|
1989
2082
|
--tw-bg-opacity: 1;
|
|
1990
|
-
background-color:
|
|
2083
|
+
background-color: oklch(var(--pf) / var(--tw-bg-opacity));
|
|
1991
2084
|
}
|
|
1992
2085
|
}
|
|
1993
2086
|
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
|
|
1994
|
-
outline-color:
|
|
2087
|
+
outline-color: oklch(var(--p) / 1);
|
|
1995
2088
|
}
|
|
1996
2089
|
@keyframes button-pop {
|
|
1997
2090
|
0% {
|
|
@@ -2028,12 +2121,12 @@
|
|
|
2028
2121
|
.card.bordered {
|
|
2029
2122
|
border-width: 1px;
|
|
2030
2123
|
--tw-border-opacity: 1;
|
|
2031
|
-
border-color:
|
|
2124
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2032
2125
|
}
|
|
2033
2126
|
.card-bordered {
|
|
2034
2127
|
border-width: 1px;
|
|
2035
2128
|
--tw-border-opacity: 1;
|
|
2036
|
-
border-color:
|
|
2129
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2037
2130
|
}
|
|
2038
2131
|
.card.compact .card-body {
|
|
2039
2132
|
padding: 1rem;
|
|
@@ -2056,15 +2149,15 @@
|
|
|
2056
2149
|
}
|
|
2057
2150
|
.card.image-full:before {
|
|
2058
2151
|
z-index: 10;
|
|
2059
|
-
border-radius: var(--rounded-box, 1rem);
|
|
2060
2152
|
--tw-bg-opacity: 1;
|
|
2061
|
-
background-color:
|
|
2153
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2062
2154
|
opacity: 0.75;
|
|
2155
|
+
border-radius: var(--rounded-box, 1rem);
|
|
2063
2156
|
}
|
|
2064
2157
|
.card.image-full > .card-body {
|
|
2065
2158
|
z-index: 20;
|
|
2066
2159
|
--tw-text-opacity: 1;
|
|
2067
|
-
color:
|
|
2160
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
2068
2161
|
}
|
|
2069
2162
|
.card.image-full :where(figure) {
|
|
2070
2163
|
overflow: hidden;
|
|
@@ -2086,53 +2179,53 @@
|
|
|
2086
2179
|
/* default */
|
|
2087
2180
|
.chat-bubble {
|
|
2088
2181
|
--tw-bg-opacity: 1;
|
|
2089
|
-
background-color:
|
|
2182
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2090
2183
|
--tw-text-opacity: 1;
|
|
2091
|
-
color:
|
|
2184
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
2092
2185
|
}
|
|
2093
2186
|
/* brand colors */
|
|
2094
2187
|
.chat-bubble-primary {
|
|
2095
2188
|
--tw-bg-opacity: 1;
|
|
2096
|
-
background-color:
|
|
2189
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
2097
2190
|
--tw-text-opacity: 1;
|
|
2098
|
-
color:
|
|
2191
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
2099
2192
|
}
|
|
2100
2193
|
.chat-bubble-secondary {
|
|
2101
2194
|
--tw-bg-opacity: 1;
|
|
2102
|
-
background-color:
|
|
2195
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
2103
2196
|
--tw-text-opacity: 1;
|
|
2104
|
-
color:
|
|
2197
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
2105
2198
|
}
|
|
2106
2199
|
.chat-bubble-accent {
|
|
2107
2200
|
--tw-bg-opacity: 1;
|
|
2108
|
-
background-color:
|
|
2201
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
2109
2202
|
--tw-text-opacity: 1;
|
|
2110
|
-
color:
|
|
2203
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
2111
2204
|
}
|
|
2112
2205
|
/* state colors */
|
|
2113
2206
|
.chat-bubble-info {
|
|
2114
2207
|
--tw-bg-opacity: 1;
|
|
2115
|
-
background-color:
|
|
2208
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
2116
2209
|
--tw-text-opacity: 1;
|
|
2117
|
-
color:
|
|
2210
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
2118
2211
|
}
|
|
2119
2212
|
.chat-bubble-success {
|
|
2120
2213
|
--tw-bg-opacity: 1;
|
|
2121
|
-
background-color:
|
|
2214
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
2122
2215
|
--tw-text-opacity: 1;
|
|
2123
|
-
color:
|
|
2216
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
2124
2217
|
}
|
|
2125
2218
|
.chat-bubble-warning {
|
|
2126
2219
|
--tw-bg-opacity: 1;
|
|
2127
|
-
background-color:
|
|
2220
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
2128
2221
|
--tw-text-opacity: 1;
|
|
2129
|
-
color:
|
|
2222
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
2130
2223
|
}
|
|
2131
2224
|
.chat-bubble-error {
|
|
2132
2225
|
--tw-bg-opacity: 1;
|
|
2133
|
-
background-color:
|
|
2226
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
2134
2227
|
--tw-text-opacity: 1;
|
|
2135
|
-
color:
|
|
2228
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
2136
2229
|
}
|
|
2137
2230
|
.chat-start .chat-bubble {
|
|
2138
2231
|
border-end-start-radius: 0px;
|
|
@@ -2153,231 +2246,231 @@
|
|
|
2153
2246
|
width: 1.5rem;
|
|
2154
2247
|
cursor: pointer;
|
|
2155
2248
|
appearance: none;
|
|
2156
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2157
2249
|
border-width: 1px;
|
|
2158
|
-
border-color:
|
|
2250
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2159
2251
|
--tw-border-opacity: 0.2;
|
|
2252
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2160
2253
|
}
|
|
2161
2254
|
.checkbox:focus-visible {
|
|
2162
2255
|
outline-style: solid;
|
|
2163
2256
|
outline-width: 2px;
|
|
2164
2257
|
outline-offset: 2px;
|
|
2165
|
-
outline-color:
|
|
2258
|
+
outline-color: oklch(var(--bc) / 1);
|
|
2166
2259
|
}
|
|
2167
2260
|
.checkbox:checked,
|
|
2168
2261
|
.checkbox[checked="true"],
|
|
2169
2262
|
.checkbox[aria-checked="true"] {
|
|
2170
2263
|
--tw-bg-opacity: 1;
|
|
2171
|
-
background-color:
|
|
2264
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2172
2265
|
background-repeat: no-repeat;
|
|
2173
2266
|
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,
|
|
2267
|
+
background-image: linear-gradient(-45deg, transparent 65%, oklch(var(--chkbg)) 65.99%),
|
|
2268
|
+
linear-gradient(45deg, transparent 75%, oklch(var(--chkbg)) 75.99%),
|
|
2269
|
+
linear-gradient(-45deg, oklch(var(--chkbg)) 40%, transparent 40.99%),
|
|
2177
2270
|
linear-gradient(
|
|
2178
2271
|
45deg,
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2272
|
+
oklch(var(--chkbg)) 30%,
|
|
2273
|
+
oklch(var(--chkfg)) 30.99%,
|
|
2274
|
+
oklch(var(--chkfg)) 40%,
|
|
2182
2275
|
transparent 40.99%
|
|
2183
2276
|
),
|
|
2184
|
-
linear-gradient(-45deg,
|
|
2277
|
+
linear-gradient(-45deg, oklch(var(--chkfg)) 50%, oklch(var(--chkbg)) 50.99%);
|
|
2185
2278
|
}
|
|
2186
2279
|
.checkbox:indeterminate {
|
|
2187
2280
|
--tw-bg-opacity: 1;
|
|
2188
|
-
background-color:
|
|
2281
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2189
2282
|
background-repeat: no-repeat;
|
|
2190
2283
|
animation: checkmark var(--animation-input, 0.2s) ease-out;
|
|
2191
|
-
background-image: linear-gradient(90deg, transparent 80%,
|
|
2192
|
-
linear-gradient(-90deg, transparent 80%,
|
|
2284
|
+
background-image: linear-gradient(90deg, transparent 80%, oklch(var(--chkbg)) 80%),
|
|
2285
|
+
linear-gradient(-90deg, transparent 80%, oklch(var(--chkbg)) 80%),
|
|
2193
2286
|
linear-gradient(
|
|
2194
2287
|
0deg,
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2288
|
+
oklch(var(--chkbg)) 43%,
|
|
2289
|
+
oklch(var(--chkfg)) 43%,
|
|
2290
|
+
oklch(var(--chkfg)) 57%,
|
|
2291
|
+
oklch(var(--chkbg)) 57%
|
|
2199
2292
|
);
|
|
2200
2293
|
}
|
|
2201
2294
|
.checkbox-primary {
|
|
2202
2295
|
--chkbg: var(--p);
|
|
2203
2296
|
--chkfg: var(--pc);
|
|
2204
2297
|
--tw-border-opacity: 1;
|
|
2205
|
-
border-color:
|
|
2298
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2206
2299
|
}
|
|
2207
2300
|
@media(hover:hover) {
|
|
2208
2301
|
.checkbox-primary:hover {
|
|
2209
2302
|
--tw-border-opacity: 1;
|
|
2210
|
-
border-color:
|
|
2303
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2211
2304
|
}
|
|
2212
2305
|
}
|
|
2213
2306
|
.checkbox-primary:focus-visible {
|
|
2214
|
-
outline-color:
|
|
2307
|
+
outline-color: oklch(var(--p) / 1);
|
|
2215
2308
|
}
|
|
2216
2309
|
.checkbox-primary:checked,
|
|
2217
2310
|
.checkbox-primary[checked="true"],
|
|
2218
2311
|
.checkbox-primary[aria-checked="true"] {
|
|
2219
2312
|
--tw-border-opacity: 1;
|
|
2220
|
-
border-color:
|
|
2313
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2221
2314
|
--tw-bg-opacity: 1;
|
|
2222
|
-
background-color:
|
|
2315
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
2223
2316
|
--tw-text-opacity: 1;
|
|
2224
|
-
color:
|
|
2317
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
2225
2318
|
}
|
|
2226
2319
|
.checkbox-secondary {
|
|
2227
2320
|
--chkbg: var(--s);
|
|
2228
2321
|
--chkfg: var(--sc);
|
|
2229
2322
|
--tw-border-opacity: 1;
|
|
2230
|
-
border-color:
|
|
2323
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2231
2324
|
}
|
|
2232
2325
|
@media(hover:hover) {
|
|
2233
2326
|
.checkbox-secondary:hover {
|
|
2234
2327
|
--tw-border-opacity: 1;
|
|
2235
|
-
border-color:
|
|
2328
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2236
2329
|
}
|
|
2237
2330
|
}
|
|
2238
2331
|
.checkbox-secondary:focus-visible {
|
|
2239
|
-
outline-color:
|
|
2332
|
+
outline-color: oklch(var(--s) / 1);
|
|
2240
2333
|
}
|
|
2241
2334
|
.checkbox-secondary:checked,
|
|
2242
2335
|
.checkbox-secondary[checked="true"],
|
|
2243
2336
|
.checkbox-secondary[aria-checked="true"] {
|
|
2244
2337
|
--tw-border-opacity: 1;
|
|
2245
|
-
border-color:
|
|
2338
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2246
2339
|
--tw-bg-opacity: 1;
|
|
2247
|
-
background-color:
|
|
2340
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
2248
2341
|
--tw-text-opacity: 1;
|
|
2249
|
-
color:
|
|
2342
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
2250
2343
|
}
|
|
2251
2344
|
.checkbox-accent {
|
|
2252
2345
|
--chkbg: var(--a);
|
|
2253
2346
|
--chkfg: var(--ac);
|
|
2254
2347
|
--tw-border-opacity: 1;
|
|
2255
|
-
border-color:
|
|
2348
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2256
2349
|
}
|
|
2257
2350
|
@media(hover:hover) {
|
|
2258
2351
|
.checkbox-accent:hover {
|
|
2259
2352
|
--tw-border-opacity: 1;
|
|
2260
|
-
border-color:
|
|
2353
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2261
2354
|
}
|
|
2262
2355
|
}
|
|
2263
2356
|
.checkbox-accent:focus-visible {
|
|
2264
|
-
outline-color:
|
|
2357
|
+
outline-color: oklch(var(--a) / 1);
|
|
2265
2358
|
}
|
|
2266
2359
|
.checkbox-accent:checked,
|
|
2267
2360
|
.checkbox-accent[checked="true"],
|
|
2268
2361
|
.checkbox-accent[aria-checked="true"] {
|
|
2269
2362
|
--tw-border-opacity: 1;
|
|
2270
|
-
border-color:
|
|
2363
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2271
2364
|
--tw-bg-opacity: 1;
|
|
2272
|
-
background-color:
|
|
2365
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
2273
2366
|
--tw-text-opacity: 1;
|
|
2274
|
-
color:
|
|
2367
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
2275
2368
|
}
|
|
2276
2369
|
.checkbox-success {
|
|
2277
2370
|
--chkbg: var(--su);
|
|
2278
2371
|
--chkfg: var(--suc);
|
|
2279
2372
|
--tw-border-opacity: 1;
|
|
2280
|
-
border-color:
|
|
2373
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2281
2374
|
}
|
|
2282
2375
|
@media(hover:hover) {
|
|
2283
2376
|
.checkbox-success:hover {
|
|
2284
2377
|
--tw-border-opacity: 1;
|
|
2285
|
-
border-color:
|
|
2378
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2286
2379
|
}
|
|
2287
2380
|
}
|
|
2288
2381
|
.checkbox-success:focus-visible {
|
|
2289
|
-
outline-color:
|
|
2382
|
+
outline-color: oklch(var(--su) / 1);
|
|
2290
2383
|
}
|
|
2291
2384
|
.checkbox-success:checked,
|
|
2292
2385
|
.checkbox-success[checked="true"],
|
|
2293
2386
|
.checkbox-success[aria-checked="true"] {
|
|
2294
2387
|
--tw-border-opacity: 1;
|
|
2295
|
-
border-color:
|
|
2388
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2296
2389
|
--tw-bg-opacity: 1;
|
|
2297
|
-
background-color:
|
|
2390
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
2298
2391
|
--tw-text-opacity: 1;
|
|
2299
|
-
color:
|
|
2392
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
2300
2393
|
}
|
|
2301
2394
|
.checkbox-warning {
|
|
2302
2395
|
--chkbg: var(--wa);
|
|
2303
2396
|
--chkfg: var(--wac);
|
|
2304
2397
|
--tw-border-opacity: 1;
|
|
2305
|
-
border-color:
|
|
2398
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2306
2399
|
}
|
|
2307
2400
|
@media(hover:hover) {
|
|
2308
2401
|
.checkbox-warning:hover {
|
|
2309
2402
|
--tw-border-opacity: 1;
|
|
2310
|
-
border-color:
|
|
2403
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2311
2404
|
}
|
|
2312
2405
|
}
|
|
2313
2406
|
.checkbox-warning:focus-visible {
|
|
2314
|
-
outline-color:
|
|
2407
|
+
outline-color: oklch(var(--wa) / 1);
|
|
2315
2408
|
}
|
|
2316
2409
|
.checkbox-warning:checked,
|
|
2317
2410
|
.checkbox-warning[checked="true"],
|
|
2318
2411
|
.checkbox-warning[aria-checked="true"] {
|
|
2319
2412
|
--tw-border-opacity: 1;
|
|
2320
|
-
border-color:
|
|
2413
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2321
2414
|
--tw-bg-opacity: 1;
|
|
2322
|
-
background-color:
|
|
2415
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
2323
2416
|
--tw-text-opacity: 1;
|
|
2324
|
-
color:
|
|
2417
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
2325
2418
|
}
|
|
2326
2419
|
.checkbox-info {
|
|
2327
2420
|
--chkbg: var(--in);
|
|
2328
2421
|
--chkfg: var(--inc);
|
|
2329
2422
|
--tw-border-opacity: 1;
|
|
2330
|
-
border-color:
|
|
2423
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2331
2424
|
}
|
|
2332
2425
|
@media(hover:hover) {
|
|
2333
2426
|
.checkbox-info:hover {
|
|
2334
2427
|
--tw-border-opacity: 1;
|
|
2335
|
-
border-color:
|
|
2428
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2336
2429
|
}
|
|
2337
2430
|
}
|
|
2338
2431
|
.checkbox-info:focus-visible {
|
|
2339
|
-
outline-color:
|
|
2432
|
+
outline-color: oklch(var(--in) / 1);
|
|
2340
2433
|
}
|
|
2341
2434
|
.checkbox-info:checked,
|
|
2342
2435
|
.checkbox-info[checked="true"],
|
|
2343
2436
|
.checkbox-info[aria-checked="true"] {
|
|
2344
2437
|
--tw-border-opacity: 1;
|
|
2345
|
-
border-color:
|
|
2438
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2346
2439
|
--tw-bg-opacity: 1;
|
|
2347
|
-
background-color:
|
|
2440
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
2348
2441
|
--tw-text-opacity: 1;
|
|
2349
|
-
color:
|
|
2442
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
2350
2443
|
}
|
|
2351
2444
|
.checkbox-error {
|
|
2352
2445
|
--chkbg: var(--er);
|
|
2353
2446
|
--chkfg: var(--erc);
|
|
2354
2447
|
--tw-border-opacity: 1;
|
|
2355
|
-
border-color:
|
|
2448
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2356
2449
|
}
|
|
2357
2450
|
@media(hover:hover) {
|
|
2358
2451
|
.checkbox-error:hover {
|
|
2359
2452
|
--tw-border-opacity: 1;
|
|
2360
|
-
border-color:
|
|
2453
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2361
2454
|
}
|
|
2362
2455
|
}
|
|
2363
2456
|
.checkbox-error:focus-visible {
|
|
2364
|
-
outline-color:
|
|
2457
|
+
outline-color: oklch(var(--er) / 1);
|
|
2365
2458
|
}
|
|
2366
2459
|
.checkbox-error:checked,
|
|
2367
2460
|
.checkbox-error[checked="true"],
|
|
2368
2461
|
.checkbox-error[aria-checked="true"] {
|
|
2369
2462
|
--tw-border-opacity: 1;
|
|
2370
|
-
border-color:
|
|
2463
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2371
2464
|
--tw-bg-opacity: 1;
|
|
2372
|
-
background-color:
|
|
2465
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
2373
2466
|
--tw-text-opacity: 1;
|
|
2374
|
-
color:
|
|
2467
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
2375
2468
|
}
|
|
2376
2469
|
.checkbox:disabled {
|
|
2377
2470
|
cursor: not-allowed;
|
|
2378
2471
|
border-color: transparent;
|
|
2379
2472
|
--tw-bg-opacity: 1;
|
|
2380
|
-
background-color:
|
|
2473
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2381
2474
|
opacity: 0.2;
|
|
2382
2475
|
}
|
|
2383
2476
|
|
|
@@ -2416,7 +2509,7 @@ details.collapse summary::-webkit-details-marker {
|
|
|
2416
2509
|
outline-style: solid;
|
|
2417
2510
|
outline-width: 2px;
|
|
2418
2511
|
outline-offset: 2px;
|
|
2419
|
-
outline-color:
|
|
2512
|
+
outline-color: oklch(var(--bc) / 1);
|
|
2420
2513
|
}
|
|
2421
2514
|
details.collapse summary {
|
|
2422
2515
|
outline: 2px solid transparent;
|
|
@@ -2428,7 +2521,7 @@ details.collapse summary {
|
|
|
2428
2521
|
outline-style: solid;
|
|
2429
2522
|
outline-width: 2px;
|
|
2430
2523
|
outline-offset: 2px;
|
|
2431
|
-
outline-color:
|
|
2524
|
+
outline-color: oklch(var(--bc) / 1);
|
|
2432
2525
|
}
|
|
2433
2526
|
.collapse-arrow > .collapse-title:after {
|
|
2434
2527
|
position: absolute;
|
|
@@ -2533,11 +2626,11 @@ details.collapse summary {
|
|
|
2533
2626
|
white-space: nowrap
|
|
2534
2627
|
}
|
|
2535
2628
|
.divider:before {
|
|
2536
|
-
background-color:
|
|
2629
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2537
2630
|
--tw-bg-opacity: 0.1
|
|
2538
2631
|
}
|
|
2539
2632
|
.divider:after {
|
|
2540
|
-
background-color:
|
|
2633
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
2541
2634
|
--tw-bg-opacity: 0.1
|
|
2542
2635
|
}
|
|
2543
2636
|
.divider:not(:empty) {
|
|
@@ -2555,7 +2648,7 @@ details.collapse summary {
|
|
|
2555
2648
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2556
2649
|
}
|
|
2557
2650
|
.drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
|
|
2558
|
-
background-color:
|
|
2651
|
+
background-color: oklch(0 0% 0%/0.4);
|
|
2559
2652
|
}
|
|
2560
2653
|
.drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
|
|
2561
2654
|
outline-style: solid;
|
|
@@ -2600,25 +2693,25 @@ details.collapse summary {
|
|
|
2600
2693
|
}
|
|
2601
2694
|
.file-input {
|
|
2602
2695
|
overflow: hidden;
|
|
2603
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2604
2696
|
border-width: 1px;
|
|
2605
|
-
border-color:
|
|
2697
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2606
2698
|
--tw-border-opacity: 0;
|
|
2607
2699
|
--tw-bg-opacity: 1;
|
|
2608
|
-
background-color:
|
|
2700
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
2609
2701
|
font-size: 1rem;
|
|
2610
2702
|
line-height: 1.5rem;
|
|
2703
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2611
2704
|
}
|
|
2612
2705
|
.file-input::file-selector-button {
|
|
2613
2706
|
border-style: solid;
|
|
2614
2707
|
--tw-border-opacity: 1;
|
|
2615
|
-
border-color:
|
|
2708
|
+
border-color: oklch(var(--n) / var(--tw-border-opacity));
|
|
2616
2709
|
--tw-bg-opacity: 1;
|
|
2617
|
-
background-color:
|
|
2710
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2618
2711
|
font-weight: 600;
|
|
2619
2712
|
text-transform: uppercase;
|
|
2620
2713
|
--tw-text-opacity: 1;
|
|
2621
|
-
color:
|
|
2714
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
2622
2715
|
text-decoration-line: none;
|
|
2623
2716
|
border-width: var(--border-btn, 1px);
|
|
2624
2717
|
animation: button-pop var(--animation-btn, 0.25s) ease-out;
|
|
@@ -2631,7 +2724,7 @@ details.collapse summary {
|
|
|
2631
2724
|
outline-style: solid;
|
|
2632
2725
|
outline-width: 2px;
|
|
2633
2726
|
outline-offset: 2px;
|
|
2634
|
-
outline-color:
|
|
2727
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
2635
2728
|
}
|
|
2636
2729
|
.file-input-ghost {
|
|
2637
2730
|
--tw-bg-opacity: 0.05;
|
|
@@ -2639,7 +2732,7 @@ details.collapse summary {
|
|
|
2639
2732
|
.file-input-ghost:focus {
|
|
2640
2733
|
--tw-bg-opacity: 1;
|
|
2641
2734
|
--tw-text-opacity: 1;
|
|
2642
|
-
color:
|
|
2735
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
2643
2736
|
box-shadow: none;
|
|
2644
2737
|
}
|
|
2645
2738
|
.file-input-ghost::file-selector-button {
|
|
@@ -2650,128 +2743,128 @@ details.collapse summary {
|
|
|
2650
2743
|
}
|
|
2651
2744
|
.file-input-primary {
|
|
2652
2745
|
--tw-border-opacity: 1;
|
|
2653
|
-
border-color:
|
|
2746
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2654
2747
|
}
|
|
2655
2748
|
.file-input-primary:focus {
|
|
2656
|
-
outline-color:
|
|
2749
|
+
outline-color: oklch(var(--p) / 1);
|
|
2657
2750
|
}
|
|
2658
2751
|
.file-input-primary::file-selector-button {
|
|
2659
2752
|
--tw-border-opacity: 1;
|
|
2660
|
-
border-color:
|
|
2753
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2661
2754
|
--tw-bg-opacity: 1;
|
|
2662
|
-
background-color:
|
|
2755
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
2663
2756
|
--tw-text-opacity: 1;
|
|
2664
|
-
color:
|
|
2757
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
2665
2758
|
}
|
|
2666
2759
|
.file-input-secondary {
|
|
2667
2760
|
--tw-border-opacity: 1;
|
|
2668
|
-
border-color:
|
|
2761
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2669
2762
|
}
|
|
2670
2763
|
.file-input-secondary:focus {
|
|
2671
|
-
outline-color:
|
|
2764
|
+
outline-color: oklch(var(--s) / 1);
|
|
2672
2765
|
}
|
|
2673
2766
|
.file-input-secondary::file-selector-button {
|
|
2674
2767
|
--tw-border-opacity: 1;
|
|
2675
|
-
border-color:
|
|
2768
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2676
2769
|
--tw-bg-opacity: 1;
|
|
2677
|
-
background-color:
|
|
2770
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
2678
2771
|
--tw-text-opacity: 1;
|
|
2679
|
-
color:
|
|
2772
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
2680
2773
|
}
|
|
2681
2774
|
.file-input-accent {
|
|
2682
2775
|
--tw-border-opacity: 1;
|
|
2683
|
-
border-color:
|
|
2776
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2684
2777
|
}
|
|
2685
2778
|
.file-input-accent:focus {
|
|
2686
|
-
outline-color:
|
|
2779
|
+
outline-color: oklch(var(--a) / 1);
|
|
2687
2780
|
}
|
|
2688
2781
|
.file-input-accent::file-selector-button {
|
|
2689
2782
|
--tw-border-opacity: 1;
|
|
2690
|
-
border-color:
|
|
2783
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2691
2784
|
--tw-bg-opacity: 1;
|
|
2692
|
-
background-color:
|
|
2785
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
2693
2786
|
--tw-text-opacity: 1;
|
|
2694
|
-
color:
|
|
2787
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
2695
2788
|
}
|
|
2696
2789
|
.file-input-info {
|
|
2697
2790
|
--tw-border-opacity: 1;
|
|
2698
|
-
border-color:
|
|
2791
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2699
2792
|
}
|
|
2700
2793
|
.file-input-info:focus {
|
|
2701
|
-
outline-color:
|
|
2794
|
+
outline-color: oklch(var(--in) / 1);
|
|
2702
2795
|
}
|
|
2703
2796
|
.file-input-info::file-selector-button {
|
|
2704
2797
|
--tw-border-opacity: 1;
|
|
2705
|
-
border-color:
|
|
2798
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2706
2799
|
--tw-bg-opacity: 1;
|
|
2707
|
-
background-color:
|
|
2800
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
2708
2801
|
--tw-text-opacity: 1;
|
|
2709
|
-
color:
|
|
2802
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
2710
2803
|
}
|
|
2711
2804
|
.file-input-success {
|
|
2712
2805
|
--tw-border-opacity: 1;
|
|
2713
|
-
border-color:
|
|
2806
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2714
2807
|
}
|
|
2715
2808
|
.file-input-success:focus {
|
|
2716
|
-
outline-color:
|
|
2809
|
+
outline-color: oklch(var(--su) / 1);
|
|
2717
2810
|
}
|
|
2718
2811
|
.file-input-success::file-selector-button {
|
|
2719
2812
|
--tw-border-opacity: 1;
|
|
2720
|
-
border-color:
|
|
2813
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2721
2814
|
--tw-bg-opacity: 1;
|
|
2722
|
-
background-color:
|
|
2815
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
2723
2816
|
--tw-text-opacity: 1;
|
|
2724
|
-
color:
|
|
2817
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
2725
2818
|
}
|
|
2726
2819
|
.file-input-warning {
|
|
2727
2820
|
--tw-border-opacity: 1;
|
|
2728
|
-
border-color:
|
|
2821
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2729
2822
|
}
|
|
2730
2823
|
.file-input-warning:focus {
|
|
2731
|
-
outline-color:
|
|
2824
|
+
outline-color: oklch(var(--wa) / 1);
|
|
2732
2825
|
}
|
|
2733
2826
|
.file-input-warning::file-selector-button {
|
|
2734
2827
|
--tw-border-opacity: 1;
|
|
2735
|
-
border-color:
|
|
2828
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2736
2829
|
--tw-bg-opacity: 1;
|
|
2737
|
-
background-color:
|
|
2830
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
2738
2831
|
--tw-text-opacity: 1;
|
|
2739
|
-
color:
|
|
2832
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
2740
2833
|
}
|
|
2741
2834
|
.file-input-error {
|
|
2742
2835
|
--tw-border-opacity: 1;
|
|
2743
|
-
border-color:
|
|
2836
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2744
2837
|
}
|
|
2745
2838
|
.file-input-error:focus {
|
|
2746
|
-
outline-color:
|
|
2839
|
+
outline-color: oklch(var(--er) / 1);
|
|
2747
2840
|
}
|
|
2748
2841
|
.file-input-error::file-selector-button {
|
|
2749
2842
|
--tw-border-opacity: 1;
|
|
2750
|
-
border-color:
|
|
2843
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2751
2844
|
--tw-bg-opacity: 1;
|
|
2752
|
-
background-color:
|
|
2845
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
2753
2846
|
--tw-text-opacity: 1;
|
|
2754
|
-
color:
|
|
2847
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
2755
2848
|
}
|
|
2756
2849
|
.file-input-disabled,
|
|
2757
2850
|
.file-input[disabled] {
|
|
2758
2851
|
cursor: not-allowed;
|
|
2759
2852
|
--tw-border-opacity: 1;
|
|
2760
|
-
border-color:
|
|
2853
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2761
2854
|
--tw-bg-opacity: 1;
|
|
2762
|
-
background-color:
|
|
2855
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
2763
2856
|
--tw-text-opacity: 0.2;
|
|
2764
2857
|
}
|
|
2765
2858
|
.file-input-disabled::placeholder,
|
|
2766
2859
|
.file-input[disabled]::placeholder {
|
|
2767
|
-
color:
|
|
2860
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
2768
2861
|
--tw-placeholder-opacity: 0.2;
|
|
2769
2862
|
}
|
|
2770
2863
|
.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
|
|
2771
2864
|
--tw-border-opacity: 0;
|
|
2772
|
-
background-color:
|
|
2865
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2773
2866
|
--tw-bg-opacity: 0.2;
|
|
2774
|
-
color:
|
|
2867
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
2775
2868
|
--tw-text-opacity: 0.2;
|
|
2776
2869
|
}
|
|
2777
2870
|
.footer {
|
|
@@ -2799,22 +2892,22 @@ details.collapse summary {
|
|
|
2799
2892
|
font-size: 0.875rem;
|
|
2800
2893
|
line-height: 1.25rem;
|
|
2801
2894
|
--tw-text-opacity: 1;
|
|
2802
|
-
color:
|
|
2895
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
2803
2896
|
}
|
|
2804
2897
|
.label-text-alt {
|
|
2805
2898
|
font-size: 0.75rem;
|
|
2806
2899
|
line-height: 1rem;
|
|
2807
2900
|
--tw-text-opacity: 1;
|
|
2808
|
-
color:
|
|
2901
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
2809
2902
|
}
|
|
2810
2903
|
@media(hover:hover) {
|
|
2811
2904
|
.label a:hover {
|
|
2812
2905
|
--tw-text-opacity: 1;
|
|
2813
|
-
color:
|
|
2906
|
+
color: oklch(var(--bc) / var(--tw-text-opacity))
|
|
2814
2907
|
}
|
|
2815
2908
|
}
|
|
2816
2909
|
.hero-overlay {
|
|
2817
|
-
background-color:
|
|
2910
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
2818
2911
|
--tw-bg-opacity: 0.5
|
|
2819
2912
|
}
|
|
2820
2913
|
.hero-content {
|
|
@@ -2823,14 +2916,14 @@ details.collapse summary {
|
|
|
2823
2916
|
padding: 1rem
|
|
2824
2917
|
}
|
|
2825
2918
|
.input {
|
|
2826
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2827
2919
|
border-width: 1px;
|
|
2828
|
-
border-color:
|
|
2920
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2829
2921
|
--tw-border-opacity: 0;
|
|
2830
2922
|
--tw-bg-opacity: 1;
|
|
2831
|
-
background-color:
|
|
2923
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
2832
2924
|
font-size: 1rem;
|
|
2833
2925
|
line-height: 1.5rem;
|
|
2926
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2834
2927
|
/* &::-webkit-calendar-picker-indicator {
|
|
2835
2928
|
display: none;
|
|
2836
2929
|
} */
|
|
@@ -2850,7 +2943,7 @@ details.collapse summary {
|
|
|
2850
2943
|
outline-style: solid;
|
|
2851
2944
|
outline-width: 2px;
|
|
2852
2945
|
outline-offset: 2px;
|
|
2853
|
-
outline-color:
|
|
2946
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
2854
2947
|
}
|
|
2855
2948
|
.input-ghost {
|
|
2856
2949
|
--tw-bg-opacity: 0.05;
|
|
@@ -2859,79 +2952,79 @@ details.collapse summary {
|
|
|
2859
2952
|
.input-ghost:focus-within {
|
|
2860
2953
|
--tw-bg-opacity: 1;
|
|
2861
2954
|
--tw-text-opacity: 1;
|
|
2862
|
-
color:
|
|
2955
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
2863
2956
|
box-shadow: none;
|
|
2864
2957
|
}
|
|
2865
2958
|
.input-primary {
|
|
2866
2959
|
--tw-border-opacity: 1;
|
|
2867
|
-
border-color:
|
|
2960
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
2868
2961
|
}
|
|
2869
2962
|
.input-primary:focus,
|
|
2870
2963
|
.input-primary:focus-within {
|
|
2871
|
-
outline-color:
|
|
2964
|
+
outline-color: oklch(var(--p) / 1);
|
|
2872
2965
|
}
|
|
2873
2966
|
.input-secondary {
|
|
2874
2967
|
--tw-border-opacity: 1;
|
|
2875
|
-
border-color:
|
|
2968
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
2876
2969
|
}
|
|
2877
2970
|
.input-secondary:focus,
|
|
2878
2971
|
.input-secondary:focus-within {
|
|
2879
|
-
outline-color:
|
|
2972
|
+
outline-color: oklch(var(--s) / 1);
|
|
2880
2973
|
}
|
|
2881
2974
|
.input-accent {
|
|
2882
2975
|
--tw-border-opacity: 1;
|
|
2883
|
-
border-color:
|
|
2976
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
2884
2977
|
}
|
|
2885
2978
|
.input-accent:focus,
|
|
2886
2979
|
.input-accent:focus-within {
|
|
2887
|
-
outline-color:
|
|
2980
|
+
outline-color: oklch(var(--a) / 1);
|
|
2888
2981
|
}
|
|
2889
2982
|
.input-info {
|
|
2890
2983
|
--tw-border-opacity: 1;
|
|
2891
|
-
border-color:
|
|
2984
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
2892
2985
|
}
|
|
2893
2986
|
.input-info:focus,
|
|
2894
2987
|
.input-info:focus-within {
|
|
2895
|
-
outline-color:
|
|
2988
|
+
outline-color: oklch(var(--in) / 1);
|
|
2896
2989
|
}
|
|
2897
2990
|
.input-success {
|
|
2898
2991
|
--tw-border-opacity: 1;
|
|
2899
|
-
border-color:
|
|
2992
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
2900
2993
|
}
|
|
2901
2994
|
.input-success:focus,
|
|
2902
2995
|
.input-success:focus-within {
|
|
2903
|
-
outline-color:
|
|
2996
|
+
outline-color: oklch(var(--su) / 1);
|
|
2904
2997
|
}
|
|
2905
2998
|
.input-warning {
|
|
2906
2999
|
--tw-border-opacity: 1;
|
|
2907
|
-
border-color:
|
|
3000
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
2908
3001
|
}
|
|
2909
3002
|
.input-warning:focus,
|
|
2910
3003
|
.input-warning:focus-within {
|
|
2911
|
-
outline-color:
|
|
3004
|
+
outline-color: oklch(var(--wa) / 1);
|
|
2912
3005
|
}
|
|
2913
3006
|
.input-error {
|
|
2914
3007
|
--tw-border-opacity: 1;
|
|
2915
|
-
border-color:
|
|
3008
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
2916
3009
|
}
|
|
2917
3010
|
.input-error:focus,
|
|
2918
3011
|
.input-error:focus-within {
|
|
2919
|
-
outline-color:
|
|
3012
|
+
outline-color: oklch(var(--er) / 1);
|
|
2920
3013
|
}
|
|
2921
3014
|
.input-disabled,
|
|
2922
3015
|
.input:disabled,
|
|
2923
3016
|
.input[disabled] {
|
|
2924
3017
|
cursor: not-allowed;
|
|
2925
3018
|
--tw-border-opacity: 1;
|
|
2926
|
-
border-color:
|
|
3019
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
2927
3020
|
--tw-bg-opacity: 1;
|
|
2928
|
-
background-color:
|
|
3021
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
2929
3022
|
--tw-text-opacity: 0.2;
|
|
2930
3023
|
}
|
|
2931
3024
|
.input-disabled::placeholder,
|
|
2932
3025
|
.input:disabled::placeholder,
|
|
2933
3026
|
.input[disabled]::placeholder {
|
|
2934
|
-
color:
|
|
3027
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
2935
3028
|
--tw-placeholder-opacity: 0.2;
|
|
2936
3029
|
}
|
|
2937
3030
|
.join {
|
|
@@ -2946,96 +3039,96 @@ details.collapse summary {
|
|
|
2946
3039
|
isolation: isolate
|
|
2947
3040
|
}
|
|
2948
3041
|
.kbd {
|
|
2949
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
2950
3042
|
border-width: 1px;
|
|
2951
|
-
border-color:
|
|
3043
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
2952
3044
|
--tw-border-opacity: 0.2;
|
|
2953
3045
|
--tw-bg-opacity: 1;
|
|
2954
|
-
background-color:
|
|
3046
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
2955
3047
|
padding-left: 0.5rem;
|
|
2956
3048
|
padding-right: 0.5rem;
|
|
3049
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
2957
3050
|
border-bottom-width: 2px;
|
|
2958
3051
|
min-height: 2.2em;
|
|
2959
3052
|
min-width: 2.2em
|
|
2960
3053
|
}
|
|
2961
3054
|
.link-primary {
|
|
2962
3055
|
--tw-text-opacity: 1;
|
|
2963
|
-
color:
|
|
3056
|
+
color: oklch(var(--p) / var(--tw-text-opacity));
|
|
2964
3057
|
}
|
|
2965
3058
|
@media(hover:hover) {
|
|
2966
3059
|
.link-primary:hover {
|
|
2967
3060
|
--tw-text-opacity: 1;
|
|
2968
|
-
color:
|
|
3061
|
+
color: oklch(var(--pf) / var(--tw-text-opacity));
|
|
2969
3062
|
}
|
|
2970
3063
|
}
|
|
2971
3064
|
.link-secondary {
|
|
2972
3065
|
--tw-text-opacity: 1;
|
|
2973
|
-
color:
|
|
3066
|
+
color: oklch(var(--s) / var(--tw-text-opacity));
|
|
2974
3067
|
}
|
|
2975
3068
|
@media(hover:hover) {
|
|
2976
3069
|
.link-secondary:hover {
|
|
2977
3070
|
--tw-text-opacity: 1;
|
|
2978
|
-
color:
|
|
3071
|
+
color: oklch(var(--sf) / var(--tw-text-opacity));
|
|
2979
3072
|
}
|
|
2980
3073
|
}
|
|
2981
3074
|
.link-accent {
|
|
2982
3075
|
--tw-text-opacity: 1;
|
|
2983
|
-
color:
|
|
3076
|
+
color: oklch(var(--a) / var(--tw-text-opacity));
|
|
2984
3077
|
}
|
|
2985
3078
|
@media(hover:hover) {
|
|
2986
3079
|
.link-accent:hover {
|
|
2987
3080
|
--tw-text-opacity: 1;
|
|
2988
|
-
color:
|
|
3081
|
+
color: oklch(var(--af) / var(--tw-text-opacity));
|
|
2989
3082
|
}
|
|
2990
3083
|
}
|
|
2991
3084
|
.link-neutral {
|
|
2992
3085
|
--tw-text-opacity: 1;
|
|
2993
|
-
color:
|
|
3086
|
+
color: oklch(var(--n) / var(--tw-text-opacity));
|
|
2994
3087
|
}
|
|
2995
3088
|
@media(hover:hover) {
|
|
2996
3089
|
.link-neutral:hover {
|
|
2997
3090
|
--tw-text-opacity: 1;
|
|
2998
|
-
color:
|
|
3091
|
+
color: oklch(var(--nf) / var(--tw-text-opacity));
|
|
2999
3092
|
}
|
|
3000
3093
|
}
|
|
3001
3094
|
.link-success {
|
|
3002
3095
|
--tw-text-opacity: 1;
|
|
3003
|
-
color:
|
|
3096
|
+
color: oklch(var(--su) / var(--tw-text-opacity));
|
|
3004
3097
|
}
|
|
3005
3098
|
@media(hover:hover) {
|
|
3006
3099
|
.link-success:hover {
|
|
3007
3100
|
--tw-text-opacity: 1;
|
|
3008
|
-
color:
|
|
3101
|
+
color: oklch(var(--su) / var(--tw-text-opacity));
|
|
3009
3102
|
}
|
|
3010
3103
|
}
|
|
3011
3104
|
.link-info {
|
|
3012
3105
|
--tw-text-opacity: 1;
|
|
3013
|
-
color:
|
|
3106
|
+
color: oklch(var(--in) / var(--tw-text-opacity));
|
|
3014
3107
|
}
|
|
3015
3108
|
@media(hover:hover) {
|
|
3016
3109
|
.link-info:hover {
|
|
3017
3110
|
--tw-text-opacity: 1;
|
|
3018
|
-
color:
|
|
3111
|
+
color: oklch(var(--in) / var(--tw-text-opacity));
|
|
3019
3112
|
}
|
|
3020
3113
|
}
|
|
3021
3114
|
.link-warning {
|
|
3022
3115
|
--tw-text-opacity: 1;
|
|
3023
|
-
color:
|
|
3116
|
+
color: oklch(var(--wa) / var(--tw-text-opacity));
|
|
3024
3117
|
}
|
|
3025
3118
|
@media(hover:hover) {
|
|
3026
3119
|
.link-warning:hover {
|
|
3027
3120
|
--tw-text-opacity: 1;
|
|
3028
|
-
color:
|
|
3121
|
+
color: oklch(var(--wa) / var(--tw-text-opacity));
|
|
3029
3122
|
}
|
|
3030
3123
|
}
|
|
3031
3124
|
.link-error {
|
|
3032
3125
|
--tw-text-opacity: 1;
|
|
3033
|
-
color:
|
|
3126
|
+
color: oklch(var(--er) / var(--tw-text-opacity));
|
|
3034
3127
|
}
|
|
3035
3128
|
@media(hover:hover) {
|
|
3036
3129
|
.link-error:hover {
|
|
3037
3130
|
--tw-text-opacity: 1;
|
|
3038
|
-
color:
|
|
3131
|
+
color: oklch(var(--er) / var(--tw-text-opacity));
|
|
3039
3132
|
}
|
|
3040
3133
|
}
|
|
3041
3134
|
.link:focus {
|
|
@@ -3148,7 +3241,7 @@ details.collapse summary {
|
|
|
3148
3241
|
padding: 0.5rem;
|
|
3149
3242
|
}
|
|
3150
3243
|
:where(.menu li:empty) {
|
|
3151
|
-
background-color:
|
|
3244
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3152
3245
|
margin: 0.5rem 1rem;
|
|
3153
3246
|
height: 1px;
|
|
3154
3247
|
}
|
|
@@ -3162,12 +3255,11 @@ details.collapse summary {
|
|
|
3162
3255
|
inset-inline-start: 0px;
|
|
3163
3256
|
top: 0.75rem;
|
|
3164
3257
|
width: 1px;
|
|
3165
|
-
background-color:
|
|
3258
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3166
3259
|
content: "";
|
|
3167
3260
|
}
|
|
3168
3261
|
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
|
|
3169
3262
|
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
3170
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
3171
3263
|
padding-left: 1rem;
|
|
3172
3264
|
padding-right: 1rem;
|
|
3173
3265
|
padding-top: 0.5rem;
|
|
@@ -3177,6 +3269,7 @@ details.collapse summary {
|
|
|
3177
3269
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3178
3270
|
transition-duration: 200ms;
|
|
3179
3271
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3272
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
3180
3273
|
text-wrap: balance;
|
|
3181
3274
|
}
|
|
3182
3275
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
|
|
@@ -3186,18 +3279,18 @@ details.collapse summary {
|
|
|
3186
3279
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
|
|
3187
3280
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
|
|
3188
3281
|
cursor: pointer;
|
|
3189
|
-
background-color:
|
|
3282
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3190
3283
|
--tw-text-opacity: 1;
|
|
3191
|
-
color:
|
|
3284
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
3192
3285
|
outline: 2px solid transparent;
|
|
3193
3286
|
outline-offset: 2px;
|
|
3194
3287
|
}
|
|
3195
3288
|
@media (hover: hover) {
|
|
3196
3289
|
: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 {
|
|
3197
3290
|
cursor: pointer;
|
|
3198
|
-
background-color:
|
|
3291
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3199
3292
|
--tw-text-opacity: 1;
|
|
3200
|
-
color:
|
|
3293
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
3201
3294
|
outline: 2px solid transparent;
|
|
3202
3295
|
outline-offset: 2px;
|
|
3203
3296
|
}
|
|
@@ -3206,22 +3299,22 @@ details.collapse summary {
|
|
|
3206
3299
|
.menu li > *:not(ul):not(.menu-title):not(details).active,
|
|
3207
3300
|
.menu li > details > summary:active {
|
|
3208
3301
|
--tw-bg-opacity: 1;
|
|
3209
|
-
background-color:
|
|
3302
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
3210
3303
|
--tw-text-opacity: 1;
|
|
3211
|
-
color:
|
|
3304
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
3212
3305
|
}
|
|
3213
3306
|
@media(hover:hover) {
|
|
3214
3307
|
.menu li > *:not(ul):not(.menu-title):not(details):active,
|
|
3215
3308
|
.menu li > *:not(ul):not(.menu-title):not(details).active,
|
|
3216
3309
|
.menu li > details > summary:active {
|
|
3217
3310
|
--tw-bg-opacity: 1;
|
|
3218
|
-
background-color:
|
|
3311
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
3219
3312
|
--tw-text-opacity: 1;
|
|
3220
|
-
color:
|
|
3313
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
3221
3314
|
}
|
|
3222
3315
|
}
|
|
3223
3316
|
.menu li.disabled {
|
|
3224
|
-
color:
|
|
3317
|
+
color: oklch(var(--bc) / 0.3);
|
|
3225
3318
|
}
|
|
3226
3319
|
.menu :where(li > details > summary)::-webkit-details-marker {
|
|
3227
3320
|
display: none;
|
|
@@ -3255,17 +3348,17 @@ details.collapse summary {
|
|
|
3255
3348
|
font-size: 0.875rem;
|
|
3256
3349
|
line-height: 1.25rem;
|
|
3257
3350
|
font-weight: 700;
|
|
3258
|
-
color:
|
|
3351
|
+
color: oklch(var(--bc) / 0.4);
|
|
3259
3352
|
}
|
|
3260
3353
|
.mockup-code {
|
|
3261
3354
|
min-width: 18rem;
|
|
3262
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3263
3355
|
--tw-bg-opacity: 1;
|
|
3264
|
-
background-color:
|
|
3356
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
3265
3357
|
padding-top: 1.25rem;
|
|
3266
3358
|
padding-bottom: 1.25rem;
|
|
3267
3359
|
--tw-text-opacity: 1;
|
|
3268
|
-
color:
|
|
3360
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
3361
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3269
3362
|
direction: ltr;
|
|
3270
3363
|
}
|
|
3271
3364
|
.mockup-code:before {
|
|
@@ -3296,8 +3389,8 @@ details.collapse summary {
|
|
|
3296
3389
|
.mockup-window {
|
|
3297
3390
|
display: flex;
|
|
3298
3391
|
flex-direction: column;
|
|
3299
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3300
3392
|
padding-top: 1.25rem;
|
|
3393
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3301
3394
|
}
|
|
3302
3395
|
.mockup-window:before {
|
|
3303
3396
|
content: "";
|
|
@@ -3305,6 +3398,7 @@ details.collapse summary {
|
|
|
3305
3398
|
display: block;
|
|
3306
3399
|
aspect-ratio: 1 / 1;
|
|
3307
3400
|
height: 0.75rem;
|
|
3401
|
+
flex-shrink: 0;
|
|
3308
3402
|
align-self: flex-start;
|
|
3309
3403
|
border-radius: 9999px;
|
|
3310
3404
|
opacity: 0.3;
|
|
@@ -3403,7 +3497,7 @@ details.collapse summary {
|
|
|
3403
3497
|
text-overflow: ellipsis;
|
|
3404
3498
|
white-space: nowrap;
|
|
3405
3499
|
--tw-bg-opacity: 1;
|
|
3406
|
-
background-color:
|
|
3500
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
3407
3501
|
padding-left: 2rem;
|
|
3408
3502
|
direction: ltr;
|
|
3409
3503
|
}
|
|
@@ -3466,17 +3560,17 @@ details.collapse summary {
|
|
|
3466
3560
|
--tw-scale-x: .9;
|
|
3467
3561
|
--tw-scale-y: .9;
|
|
3468
3562
|
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));
|
|
3469
|
-
border-bottom-right-radius: var(--rounded-box, 1rem);
|
|
3470
|
-
border-bottom-left-radius: var(--rounded-box, 1rem);
|
|
3471
|
-
border-top-left-radius: var(--rounded-box, 1rem);
|
|
3472
|
-
border-top-right-radius: var(--rounded-box, 1rem);
|
|
3473
3563
|
--tw-bg-opacity: 1;
|
|
3474
|
-
background-color:
|
|
3564
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
3475
3565
|
padding: 1.5rem;
|
|
3476
3566
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
3477
3567
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3478
3568
|
transition-duration: 200ms;
|
|
3479
3569
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
3570
|
+
border-top-left-radius: var(--rounded-box, 1rem);
|
|
3571
|
+
border-top-right-radius: var(--rounded-box, 1rem);
|
|
3572
|
+
border-bottom-left-radius: var(--rounded-box, 1rem);
|
|
3573
|
+
border-bottom-right-radius: var(--rounded-box, 1rem);
|
|
3480
3574
|
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
|
|
3481
3575
|
overflow-y: auto;
|
|
3482
3576
|
overscroll-behavior: contain;
|
|
@@ -3511,109 +3605,109 @@ details.collapse summary {
|
|
|
3511
3605
|
}
|
|
3512
3606
|
.progress {
|
|
3513
3607
|
height: 0.5rem;
|
|
3608
|
+
background-color: oklch(var(--bc) / 0.2);
|
|
3514
3609
|
border-radius: var(--rounded-box, 1rem);
|
|
3515
|
-
background-color: hsl(var(--bc) / 0.2);
|
|
3516
3610
|
}
|
|
3517
3611
|
.progress::-moz-progress-bar {
|
|
3518
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3519
3612
|
--tw-bg-opacity: 1;
|
|
3520
|
-
background-color:
|
|
3613
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3614
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3521
3615
|
}
|
|
3522
3616
|
.progress-primary::-moz-progress-bar {
|
|
3523
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3524
3617
|
--tw-bg-opacity: 1;
|
|
3525
|
-
background-color:
|
|
3618
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
3619
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3526
3620
|
}
|
|
3527
3621
|
.progress-secondary::-moz-progress-bar {
|
|
3528
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3529
3622
|
--tw-bg-opacity: 1;
|
|
3530
|
-
background-color:
|
|
3623
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
3624
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3531
3625
|
}
|
|
3532
3626
|
.progress-accent::-moz-progress-bar {
|
|
3533
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3534
3627
|
--tw-bg-opacity: 1;
|
|
3535
|
-
background-color:
|
|
3628
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
3629
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3536
3630
|
}
|
|
3537
3631
|
.progress-info::-moz-progress-bar {
|
|
3538
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3539
3632
|
--tw-bg-opacity: 1;
|
|
3540
|
-
background-color:
|
|
3633
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
3634
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3541
3635
|
}
|
|
3542
3636
|
.progress-success::-moz-progress-bar {
|
|
3543
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3544
3637
|
--tw-bg-opacity: 1;
|
|
3545
|
-
background-color:
|
|
3638
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
3639
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3546
3640
|
}
|
|
3547
3641
|
.progress-warning::-moz-progress-bar {
|
|
3548
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3549
3642
|
--tw-bg-opacity: 1;
|
|
3550
|
-
background-color:
|
|
3643
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
3644
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3551
3645
|
}
|
|
3552
3646
|
.progress-error::-moz-progress-bar {
|
|
3553
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3554
3647
|
--tw-bg-opacity: 1;
|
|
3555
|
-
background-color:
|
|
3648
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
3649
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3556
3650
|
}
|
|
3557
3651
|
.progress:indeterminate {
|
|
3558
|
-
--progress-color:
|
|
3652
|
+
--progress-color: oklch(var(--bc));
|
|
3559
3653
|
}
|
|
3560
3654
|
.progress-primary:indeterminate {
|
|
3561
|
-
--progress-color:
|
|
3655
|
+
--progress-color: oklch(var(--p));
|
|
3562
3656
|
}
|
|
3563
3657
|
.progress-secondary:indeterminate {
|
|
3564
|
-
--progress-color:
|
|
3658
|
+
--progress-color: oklch(var(--s));
|
|
3565
3659
|
}
|
|
3566
3660
|
.progress-accent:indeterminate {
|
|
3567
|
-
--progress-color:
|
|
3661
|
+
--progress-color: oklch(var(--a));
|
|
3568
3662
|
}
|
|
3569
3663
|
.progress-info:indeterminate {
|
|
3570
|
-
--progress-color:
|
|
3664
|
+
--progress-color: oklch(var(--in));
|
|
3571
3665
|
}
|
|
3572
3666
|
.progress-success:indeterminate {
|
|
3573
|
-
--progress-color:
|
|
3667
|
+
--progress-color: oklch(var(--su));
|
|
3574
3668
|
}
|
|
3575
3669
|
.progress-warning:indeterminate {
|
|
3576
|
-
--progress-color:
|
|
3670
|
+
--progress-color: oklch(var(--wa));
|
|
3577
3671
|
}
|
|
3578
3672
|
.progress-error:indeterminate {
|
|
3579
|
-
--progress-color:
|
|
3673
|
+
--progress-color: oklch(var(--er));
|
|
3580
3674
|
}
|
|
3581
3675
|
.progress::-webkit-progress-bar {
|
|
3582
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3583
3676
|
background-color: transparent;
|
|
3677
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3584
3678
|
}
|
|
3585
3679
|
.progress::-webkit-progress-value {
|
|
3586
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3587
3680
|
--tw-bg-opacity: 1;
|
|
3588
|
-
background-color:
|
|
3681
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3682
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3589
3683
|
}
|
|
3590
3684
|
.progress-primary::-webkit-progress-value {
|
|
3591
3685
|
--tw-bg-opacity: 1;
|
|
3592
|
-
background-color:
|
|
3686
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
3593
3687
|
}
|
|
3594
3688
|
.progress-secondary::-webkit-progress-value {
|
|
3595
3689
|
--tw-bg-opacity: 1;
|
|
3596
|
-
background-color:
|
|
3690
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
3597
3691
|
}
|
|
3598
3692
|
.progress-accent::-webkit-progress-value {
|
|
3599
3693
|
--tw-bg-opacity: 1;
|
|
3600
|
-
background-color:
|
|
3694
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
3601
3695
|
}
|
|
3602
3696
|
.progress-info::-webkit-progress-value {
|
|
3603
3697
|
--tw-bg-opacity: 1;
|
|
3604
|
-
background-color:
|
|
3698
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
3605
3699
|
}
|
|
3606
3700
|
.progress-success::-webkit-progress-value {
|
|
3607
3701
|
--tw-bg-opacity: 1;
|
|
3608
|
-
background-color:
|
|
3702
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
3609
3703
|
}
|
|
3610
3704
|
.progress-warning::-webkit-progress-value {
|
|
3611
3705
|
--tw-bg-opacity: 1;
|
|
3612
|
-
background-color:
|
|
3706
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
3613
3707
|
}
|
|
3614
3708
|
.progress-error::-webkit-progress-value {
|
|
3615
3709
|
--tw-bg-opacity: 1;
|
|
3616
|
-
background-color:
|
|
3710
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
3617
3711
|
}
|
|
3618
3712
|
|
|
3619
3713
|
.progress:indeterminate {
|
|
@@ -3664,184 +3758,184 @@ details.collapse summary {
|
|
|
3664
3758
|
appearance: none;
|
|
3665
3759
|
border-radius: 9999px;
|
|
3666
3760
|
border-width: 1px;
|
|
3667
|
-
border-color:
|
|
3761
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
3668
3762
|
--tw-border-opacity: 0.2;
|
|
3669
3763
|
}
|
|
3670
3764
|
.radio:focus-visible {
|
|
3671
3765
|
outline-style: solid;
|
|
3672
3766
|
outline-width: 2px;
|
|
3673
3767
|
outline-offset: 2px;
|
|
3674
|
-
outline-color:
|
|
3768
|
+
outline-color: oklch(var(--bc) / 1);
|
|
3675
3769
|
}
|
|
3676
3770
|
.radio:checked,
|
|
3677
3771
|
.radio[aria-checked="true"] {
|
|
3678
3772
|
--tw-bg-opacity: 1;
|
|
3679
|
-
background-color:
|
|
3773
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3680
3774
|
animation: radiomark var(--animation-input, 0.2s) ease-out;
|
|
3681
3775
|
box-shadow:
|
|
3682
|
-
0 0 0 4px
|
|
3683
|
-
0 0 0 4px
|
|
3776
|
+
0 0 0 4px oklch(var(--b1)) inset,
|
|
3777
|
+
0 0 0 4px oklch(var(--b1)) inset;
|
|
3684
3778
|
}
|
|
3685
3779
|
.radio-primary {
|
|
3686
3780
|
--chkbg: var(--p);
|
|
3687
3781
|
--tw-border-opacity: 1;
|
|
3688
|
-
border-color:
|
|
3782
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
3689
3783
|
}
|
|
3690
3784
|
@media(hover:hover) {
|
|
3691
3785
|
.radio-primary:hover {
|
|
3692
3786
|
--tw-border-opacity: 1;
|
|
3693
|
-
border-color:
|
|
3787
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
3694
3788
|
}
|
|
3695
3789
|
}
|
|
3696
3790
|
.radio-primary:focus-visible {
|
|
3697
|
-
outline-color:
|
|
3791
|
+
outline-color: oklch(var(--p) / 1);
|
|
3698
3792
|
}
|
|
3699
3793
|
.radio-primary:checked,
|
|
3700
3794
|
.radio-primary[aria-checked="true"] {
|
|
3701
3795
|
--tw-border-opacity: 1;
|
|
3702
|
-
border-color:
|
|
3796
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
3703
3797
|
--tw-bg-opacity: 1;
|
|
3704
|
-
background-color:
|
|
3798
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
3705
3799
|
--tw-text-opacity: 1;
|
|
3706
|
-
color:
|
|
3800
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
3707
3801
|
}
|
|
3708
3802
|
.radio-secondary {
|
|
3709
3803
|
--chkbg: var(--s);
|
|
3710
3804
|
--tw-border-opacity: 1;
|
|
3711
|
-
border-color:
|
|
3805
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
3712
3806
|
}
|
|
3713
3807
|
@media(hover:hover) {
|
|
3714
3808
|
.radio-secondary:hover {
|
|
3715
3809
|
--tw-border-opacity: 1;
|
|
3716
|
-
border-color:
|
|
3810
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
3717
3811
|
}
|
|
3718
3812
|
}
|
|
3719
3813
|
.radio-secondary:focus-visible {
|
|
3720
|
-
outline-color:
|
|
3814
|
+
outline-color: oklch(var(--s) / 1);
|
|
3721
3815
|
}
|
|
3722
3816
|
.radio-secondary:checked,
|
|
3723
3817
|
.radio-secondary[aria-checked="true"] {
|
|
3724
3818
|
--tw-border-opacity: 1;
|
|
3725
|
-
border-color:
|
|
3819
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
3726
3820
|
--tw-bg-opacity: 1;
|
|
3727
|
-
background-color:
|
|
3821
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
3728
3822
|
--tw-text-opacity: 1;
|
|
3729
|
-
color:
|
|
3823
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
3730
3824
|
}
|
|
3731
3825
|
.radio-accent {
|
|
3732
3826
|
--chkbg: var(--a);
|
|
3733
3827
|
--tw-border-opacity: 1;
|
|
3734
|
-
border-color:
|
|
3828
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
3735
3829
|
}
|
|
3736
3830
|
@media(hover:hover) {
|
|
3737
3831
|
.radio-accent:hover {
|
|
3738
3832
|
--tw-border-opacity: 1;
|
|
3739
|
-
border-color:
|
|
3833
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
3740
3834
|
}
|
|
3741
3835
|
}
|
|
3742
3836
|
.radio-accent:focus-visible {
|
|
3743
|
-
outline-color:
|
|
3837
|
+
outline-color: oklch(var(--a) / 1);
|
|
3744
3838
|
}
|
|
3745
3839
|
.radio-accent:checked,
|
|
3746
3840
|
.radio-accent[aria-checked="true"] {
|
|
3747
3841
|
--tw-border-opacity: 1;
|
|
3748
|
-
border-color:
|
|
3842
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
3749
3843
|
--tw-bg-opacity: 1;
|
|
3750
|
-
background-color:
|
|
3844
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
3751
3845
|
--tw-text-opacity: 1;
|
|
3752
|
-
color:
|
|
3846
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
3753
3847
|
}
|
|
3754
3848
|
.radio-success {
|
|
3755
3849
|
--chkbg: var(--su);
|
|
3756
3850
|
--tw-border-opacity: 1;
|
|
3757
|
-
border-color:
|
|
3851
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
3758
3852
|
}
|
|
3759
3853
|
@media(hover:hover) {
|
|
3760
3854
|
.radio-success:hover {
|
|
3761
3855
|
--tw-border-opacity: 1;
|
|
3762
|
-
border-color:
|
|
3856
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
3763
3857
|
}
|
|
3764
3858
|
}
|
|
3765
3859
|
.radio-success:focus-visible {
|
|
3766
|
-
outline-color:
|
|
3860
|
+
outline-color: oklch(var(--su) / 1);
|
|
3767
3861
|
}
|
|
3768
3862
|
.radio-success:checked,
|
|
3769
3863
|
.radio-success[aria-checked="true"] {
|
|
3770
3864
|
--tw-border-opacity: 1;
|
|
3771
|
-
border-color:
|
|
3865
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
3772
3866
|
--tw-bg-opacity: 1;
|
|
3773
|
-
background-color:
|
|
3867
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
3774
3868
|
--tw-text-opacity: 1;
|
|
3775
|
-
color:
|
|
3869
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
3776
3870
|
}
|
|
3777
3871
|
.radio-warning {
|
|
3778
3872
|
--chkbg: var(--wa);
|
|
3779
3873
|
--tw-border-opacity: 1;
|
|
3780
|
-
border-color:
|
|
3874
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
3781
3875
|
}
|
|
3782
3876
|
@media(hover:hover) {
|
|
3783
3877
|
.radio-warning:hover {
|
|
3784
3878
|
--tw-border-opacity: 1;
|
|
3785
|
-
border-color:
|
|
3879
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
3786
3880
|
}
|
|
3787
3881
|
}
|
|
3788
3882
|
.radio-warning:focus-visible {
|
|
3789
|
-
outline-color:
|
|
3883
|
+
outline-color: oklch(var(--wa) / 1);
|
|
3790
3884
|
}
|
|
3791
3885
|
.radio-warning:checked,
|
|
3792
3886
|
.radio-warning[aria-checked="true"] {
|
|
3793
3887
|
--tw-border-opacity: 1;
|
|
3794
|
-
border-color:
|
|
3888
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
3795
3889
|
--tw-bg-opacity: 1;
|
|
3796
|
-
background-color:
|
|
3890
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
3797
3891
|
--tw-text-opacity: 1;
|
|
3798
|
-
color:
|
|
3892
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
3799
3893
|
}
|
|
3800
3894
|
.radio-info {
|
|
3801
3895
|
--chkbg: var(--in);
|
|
3802
3896
|
--tw-border-opacity: 1;
|
|
3803
|
-
border-color:
|
|
3897
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
3804
3898
|
}
|
|
3805
3899
|
@media(hover:hover) {
|
|
3806
3900
|
.radio-info:hover {
|
|
3807
3901
|
--tw-border-opacity: 1;
|
|
3808
|
-
border-color:
|
|
3902
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
3809
3903
|
}
|
|
3810
3904
|
}
|
|
3811
3905
|
.radio-info:focus-visible {
|
|
3812
|
-
outline-color:
|
|
3906
|
+
outline-color: oklch(var(--in) / 1);
|
|
3813
3907
|
}
|
|
3814
3908
|
.radio-info:checked,
|
|
3815
3909
|
.radio-info[aria-checked="true"] {
|
|
3816
3910
|
--tw-border-opacity: 1;
|
|
3817
|
-
border-color:
|
|
3911
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
3818
3912
|
--tw-bg-opacity: 1;
|
|
3819
|
-
background-color:
|
|
3913
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
3820
3914
|
--tw-text-opacity: 1;
|
|
3821
|
-
color:
|
|
3915
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
3822
3916
|
}
|
|
3823
3917
|
.radio-error {
|
|
3824
3918
|
--chkbg: var(--er);
|
|
3825
3919
|
--tw-border-opacity: 1;
|
|
3826
|
-
border-color:
|
|
3920
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
3827
3921
|
}
|
|
3828
3922
|
@media(hover:hover) {
|
|
3829
3923
|
.radio-error:hover {
|
|
3830
3924
|
--tw-border-opacity: 1;
|
|
3831
|
-
border-color:
|
|
3925
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
3832
3926
|
}
|
|
3833
3927
|
}
|
|
3834
3928
|
.radio-error:focus-visible {
|
|
3835
|
-
outline-color:
|
|
3929
|
+
outline-color: oklch(var(--er) / 1);
|
|
3836
3930
|
}
|
|
3837
3931
|
.radio-error:checked,
|
|
3838
3932
|
.radio-error[aria-checked="true"] {
|
|
3839
3933
|
--tw-border-opacity: 1;
|
|
3840
|
-
border-color:
|
|
3934
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
3841
3935
|
--tw-bg-opacity: 1;
|
|
3842
|
-
background-color:
|
|
3936
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
3843
3937
|
--tw-text-opacity: 1;
|
|
3844
|
-
color:
|
|
3938
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
3845
3939
|
}
|
|
3846
3940
|
.radio:disabled {
|
|
3847
3941
|
cursor: not-allowed;
|
|
@@ -3851,18 +3945,18 @@ details.collapse summary {
|
|
|
3851
3945
|
@keyframes radiomark {
|
|
3852
3946
|
0% {
|
|
3853
3947
|
box-shadow:
|
|
3854
|
-
0 0 0 12px
|
|
3855
|
-
0 0 0 12px
|
|
3948
|
+
0 0 0 12px oklch(var(--b1)) inset,
|
|
3949
|
+
0 0 0 12px oklch(var(--b1)) inset;
|
|
3856
3950
|
}
|
|
3857
3951
|
50% {
|
|
3858
3952
|
box-shadow:
|
|
3859
|
-
0 0 0 3px
|
|
3860
|
-
0 0 0 3px
|
|
3953
|
+
0 0 0 3px oklch(var(--b1)) inset,
|
|
3954
|
+
0 0 0 3px oklch(var(--b1)) inset;
|
|
3861
3955
|
}
|
|
3862
3956
|
100% {
|
|
3863
3957
|
box-shadow:
|
|
3864
|
-
0 0 0 4px
|
|
3865
|
-
0 0 0 4px
|
|
3958
|
+
0 0 0 4px oklch(var(--b1)) inset,
|
|
3959
|
+
0 0 0 4px oklch(var(--b1)) inset;
|
|
3866
3960
|
}
|
|
3867
3961
|
}
|
|
3868
3962
|
|
|
@@ -3876,44 +3970,44 @@ details.collapse summary {
|
|
|
3876
3970
|
-webkit-appearance: none;
|
|
3877
3971
|
--range-shdw: var(--bc);
|
|
3878
3972
|
overflow: hidden;
|
|
3879
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3880
3973
|
background-color: transparent;
|
|
3974
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3881
3975
|
}
|
|
3882
3976
|
.range:focus-visible::-webkit-slider-thumb {
|
|
3883
|
-
--focus-shadow: 0 0 0 6px
|
|
3977
|
+
--focus-shadow: 0 0 0 6px oklch(var(--b1)) inset, 0 0 0 2rem oklch(var(--range-shdw)) inset;
|
|
3884
3978
|
}
|
|
3885
3979
|
.range:focus-visible::-moz-range-thumb {
|
|
3886
|
-
--focus-shadow: 0 0 0 6px
|
|
3980
|
+
--focus-shadow: 0 0 0 6px oklch(var(--b1)) inset, 0 0 0 2rem oklch(var(--range-shdw)) inset;
|
|
3887
3981
|
}
|
|
3888
3982
|
.range::-webkit-slider-runnable-track {
|
|
3889
3983
|
height: 0.5rem;
|
|
3890
3984
|
width: 100%;
|
|
3985
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3891
3986
|
border-radius: var(--rounded-box, 1rem);
|
|
3892
|
-
background-color: hsl(var(--bc) / 0.1);
|
|
3893
3987
|
}
|
|
3894
3988
|
.range::-moz-range-track {
|
|
3895
3989
|
height: 0.5rem;
|
|
3896
3990
|
width: 100%;
|
|
3991
|
+
background-color: oklch(var(--bc) / 0.1);
|
|
3897
3992
|
border-radius: var(--rounded-box, 1rem);
|
|
3898
|
-
background-color: hsl(var(--bc) / 0.1);
|
|
3899
3993
|
}
|
|
3900
3994
|
.range::-webkit-slider-thumb {
|
|
3901
3995
|
position: relative;
|
|
3902
3996
|
height: 1.5rem;
|
|
3903
3997
|
width: 1.5rem;
|
|
3904
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3905
3998
|
border-style: none;
|
|
3906
3999
|
--tw-bg-opacity: 1;
|
|
3907
|
-
background-color:
|
|
4000
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4001
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3908
4002
|
appearance: none;
|
|
3909
4003
|
-webkit-appearance: none;
|
|
3910
4004
|
top: 50%;
|
|
3911
|
-
color:
|
|
4005
|
+
color: oklch(var(--range-shdw));
|
|
3912
4006
|
transform: translateY(-50%);
|
|
3913
4007
|
--filler-size: 100rem;
|
|
3914
4008
|
--filler-offset: 0.6rem;
|
|
3915
4009
|
box-shadow:
|
|
3916
|
-
0 0 0 3px
|
|
4010
|
+
0 0 0 3px oklch(var(--range-shdw)) inset,
|
|
3917
4011
|
var(--focus-shadow, 0 0),
|
|
3918
4012
|
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
|
3919
4013
|
}
|
|
@@ -3921,16 +4015,16 @@ details.collapse summary {
|
|
|
3921
4015
|
position: relative;
|
|
3922
4016
|
height: 1.5rem;
|
|
3923
4017
|
width: 1.5rem;
|
|
3924
|
-
border-radius: var(--rounded-box, 1rem);
|
|
3925
4018
|
border-style: none;
|
|
3926
4019
|
--tw-bg-opacity: 1;
|
|
3927
|
-
background-color:
|
|
4020
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4021
|
+
border-radius: var(--rounded-box, 1rem);
|
|
3928
4022
|
top: 50%;
|
|
3929
|
-
color:
|
|
4023
|
+
color: oklch(var(--range-shdw));
|
|
3930
4024
|
--filler-size: 100rem;
|
|
3931
4025
|
--filler-offset: 0.5rem;
|
|
3932
4026
|
box-shadow:
|
|
3933
|
-
0 0 0 3px
|
|
4027
|
+
0 0 0 3px oklch(var(--range-shdw)) inset,
|
|
3934
4028
|
var(--focus-shadow, 0 0),
|
|
3935
4029
|
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
|
3936
4030
|
}
|
|
@@ -3963,7 +4057,7 @@ details.collapse summary {
|
|
|
3963
4057
|
animation: rating-pop var(--animation-input, 0.25s) ease-out;
|
|
3964
4058
|
height: 1.5rem;
|
|
3965
4059
|
width: 1.5rem;
|
|
3966
|
-
background-color:
|
|
4060
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
3967
4061
|
--tw-bg-opacity: 1;
|
|
3968
4062
|
}
|
|
3969
4063
|
.rating .rating-hidden {
|
|
@@ -4000,13 +4094,13 @@ details.collapse summary {
|
|
|
4000
4094
|
}
|
|
4001
4095
|
}
|
|
4002
4096
|
.select {
|
|
4003
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
4004
4097
|
border-width: 1px;
|
|
4005
|
-
border-color:
|
|
4098
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4006
4099
|
--tw-border-opacity: 0;
|
|
4007
4100
|
--tw-bg-opacity: 1;
|
|
4008
|
-
background-color:
|
|
4101
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4009
4102
|
padding-right: 2.5rem;
|
|
4103
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
4010
4104
|
}
|
|
4011
4105
|
.select-bordered {
|
|
4012
4106
|
--tw-border-opacity: 0.2;
|
|
@@ -4026,7 +4120,7 @@ details.collapse summary {
|
|
|
4026
4120
|
outline-style: solid;
|
|
4027
4121
|
outline-width: 2px;
|
|
4028
4122
|
outline-offset: 2px;
|
|
4029
|
-
outline-color:
|
|
4123
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
4030
4124
|
}
|
|
4031
4125
|
.select-ghost {
|
|
4032
4126
|
--tw-bg-opacity: 0.05;
|
|
@@ -4034,71 +4128,71 @@ details.collapse summary {
|
|
|
4034
4128
|
.select-ghost:focus {
|
|
4035
4129
|
--tw-bg-opacity: 1;
|
|
4036
4130
|
--tw-text-opacity: 1;
|
|
4037
|
-
color:
|
|
4131
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4038
4132
|
}
|
|
4039
4133
|
.select-primary {
|
|
4040
4134
|
--tw-border-opacity: 1;
|
|
4041
|
-
border-color:
|
|
4135
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
4042
4136
|
}
|
|
4043
4137
|
.select-primary:focus {
|
|
4044
|
-
outline-color:
|
|
4138
|
+
outline-color: oklch(var(--p) / 1);
|
|
4045
4139
|
}
|
|
4046
4140
|
.select-secondary {
|
|
4047
4141
|
--tw-border-opacity: 1;
|
|
4048
|
-
border-color:
|
|
4142
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
4049
4143
|
}
|
|
4050
4144
|
.select-secondary:focus {
|
|
4051
|
-
outline-color:
|
|
4145
|
+
outline-color: oklch(var(--s) / 1);
|
|
4052
4146
|
}
|
|
4053
4147
|
.select-accent {
|
|
4054
4148
|
--tw-border-opacity: 1;
|
|
4055
|
-
border-color:
|
|
4149
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
4056
4150
|
}
|
|
4057
4151
|
.select-accent:focus {
|
|
4058
|
-
outline-color:
|
|
4152
|
+
outline-color: oklch(var(--a) / 1);
|
|
4059
4153
|
}
|
|
4060
4154
|
.select-info {
|
|
4061
4155
|
--tw-border-opacity: 1;
|
|
4062
|
-
border-color:
|
|
4156
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
4063
4157
|
}
|
|
4064
4158
|
.select-info:focus {
|
|
4065
|
-
outline-color:
|
|
4159
|
+
outline-color: oklch(var(--in) / 1);
|
|
4066
4160
|
}
|
|
4067
4161
|
.select-success {
|
|
4068
4162
|
--tw-border-opacity: 1;
|
|
4069
|
-
border-color:
|
|
4163
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
4070
4164
|
}
|
|
4071
4165
|
.select-success:focus {
|
|
4072
|
-
outline-color:
|
|
4166
|
+
outline-color: oklch(var(--su) / 1);
|
|
4073
4167
|
}
|
|
4074
4168
|
.select-warning {
|
|
4075
4169
|
--tw-border-opacity: 1;
|
|
4076
|
-
border-color:
|
|
4170
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
4077
4171
|
}
|
|
4078
4172
|
.select-warning:focus {
|
|
4079
|
-
outline-color:
|
|
4173
|
+
outline-color: oklch(var(--wa) / 1);
|
|
4080
4174
|
}
|
|
4081
4175
|
.select-error {
|
|
4082
4176
|
--tw-border-opacity: 1;
|
|
4083
|
-
border-color:
|
|
4177
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
4084
4178
|
}
|
|
4085
4179
|
.select-error:focus {
|
|
4086
|
-
outline-color:
|
|
4180
|
+
outline-color: oklch(var(--er) / 1);
|
|
4087
4181
|
}
|
|
4088
4182
|
.select-disabled,
|
|
4089
4183
|
.select:disabled,
|
|
4090
4184
|
.select[disabled] {
|
|
4091
4185
|
cursor: not-allowed;
|
|
4092
4186
|
--tw-border-opacity: 1;
|
|
4093
|
-
border-color:
|
|
4187
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
4094
4188
|
--tw-bg-opacity: 1;
|
|
4095
|
-
background-color:
|
|
4189
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
4096
4190
|
--tw-text-opacity: 0.2;
|
|
4097
4191
|
}
|
|
4098
4192
|
.select-disabled::placeholder,
|
|
4099
4193
|
.select:disabled::placeholder,
|
|
4100
4194
|
.select[disabled]::placeholder {
|
|
4101
|
-
color:
|
|
4195
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
4102
4196
|
--tw-placeholder-opacity: 0.2;
|
|
4103
4197
|
}
|
|
4104
4198
|
.select-multiple,
|
|
@@ -4128,11 +4222,11 @@ details.collapse summary {
|
|
|
4128
4222
|
opacity: 1
|
|
4129
4223
|
}
|
|
4130
4224
|
.stats {
|
|
4131
|
-
border-radius: var(--rounded-box, 1rem);
|
|
4132
4225
|
--tw-bg-opacity: 1;
|
|
4133
|
-
background-color:
|
|
4226
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4134
4227
|
--tw-text-opacity: 1;
|
|
4135
|
-
color:
|
|
4228
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4229
|
+
border-radius: var(--rounded-box, 1rem);
|
|
4136
4230
|
}
|
|
4137
4231
|
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
|
|
4138
4232
|
--tw-divide-x-reverse: 0;
|
|
@@ -4150,7 +4244,7 @@ details.collapse summary {
|
|
|
4150
4244
|
}
|
|
4151
4245
|
.stat {
|
|
4152
4246
|
column-gap: 1rem;
|
|
4153
|
-
border-color:
|
|
4247
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4154
4248
|
--tw-border-opacity: 0.1;
|
|
4155
4249
|
padding-left: 1.5rem;
|
|
4156
4250
|
padding-right: 1.5rem;
|
|
@@ -4158,7 +4252,7 @@ details.collapse summary {
|
|
|
4158
4252
|
padding-bottom: 1rem;
|
|
4159
4253
|
}
|
|
4160
4254
|
.stat-title {
|
|
4161
|
-
color:
|
|
4255
|
+
color: oklch(var(--bc) / 0.6);
|
|
4162
4256
|
}
|
|
4163
4257
|
.stat-value {
|
|
4164
4258
|
font-size: 2.25rem;
|
|
@@ -4168,7 +4262,7 @@ details.collapse summary {
|
|
|
4168
4262
|
.stat-desc {
|
|
4169
4263
|
font-size: 0.75rem;
|
|
4170
4264
|
line-height: 1rem;
|
|
4171
|
-
color:
|
|
4265
|
+
color: oklch(var(--bc) / 0.6);
|
|
4172
4266
|
}
|
|
4173
4267
|
.stat-actions {
|
|
4174
4268
|
margin-top: 1rem;
|
|
@@ -4211,9 +4305,9 @@ details.collapse summary {
|
|
|
4211
4305
|
width: 100%;
|
|
4212
4306
|
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));
|
|
4213
4307
|
--tw-bg-opacity: 1;
|
|
4214
|
-
background-color:
|
|
4308
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
4215
4309
|
--tw-text-opacity: 1;
|
|
4216
|
-
color:
|
|
4310
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4217
4311
|
content: "";
|
|
4218
4312
|
margin-inline-start: -100%;
|
|
4219
4313
|
}
|
|
@@ -4232,9 +4326,9 @@ details.collapse summary {
|
|
|
4232
4326
|
place-self: center;
|
|
4233
4327
|
border-radius: 9999px;
|
|
4234
4328
|
--tw-bg-opacity: 1;
|
|
4235
|
-
background-color:
|
|
4329
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity));
|
|
4236
4330
|
--tw-text-opacity: 1;
|
|
4237
|
-
color:
|
|
4331
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4238
4332
|
}
|
|
4239
4333
|
.steps .step:first-child:before {
|
|
4240
4334
|
content: none;
|
|
@@ -4245,70 +4339,70 @@ details.collapse summary {
|
|
|
4245
4339
|
.steps .step-neutral + .step-neutral:before,
|
|
4246
4340
|
.steps .step-neutral:after {
|
|
4247
4341
|
--tw-bg-opacity: 1;
|
|
4248
|
-
background-color:
|
|
4342
|
+
background-color: oklch(var(--n) / var(--tw-bg-opacity));
|
|
4249
4343
|
--tw-text-opacity: 1;
|
|
4250
|
-
color:
|
|
4344
|
+
color: oklch(var(--nc) / var(--tw-text-opacity));
|
|
4251
4345
|
}
|
|
4252
4346
|
.steps .step-primary + .step-primary:before,
|
|
4253
4347
|
.steps .step-primary:after {
|
|
4254
4348
|
--tw-bg-opacity: 1;
|
|
4255
|
-
background-color:
|
|
4349
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
4256
4350
|
--tw-text-opacity: 1;
|
|
4257
|
-
color:
|
|
4351
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4258
4352
|
}
|
|
4259
4353
|
.steps .step-secondary + .step-secondary:before,
|
|
4260
4354
|
.steps .step-secondary:after {
|
|
4261
4355
|
--tw-bg-opacity: 1;
|
|
4262
|
-
background-color:
|
|
4356
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
4263
4357
|
--tw-text-opacity: 1;
|
|
4264
|
-
color:
|
|
4358
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
4265
4359
|
}
|
|
4266
4360
|
.steps .step-accent + .step-accent:before,
|
|
4267
4361
|
.steps .step-accent:after {
|
|
4268
4362
|
--tw-bg-opacity: 1;
|
|
4269
|
-
background-color:
|
|
4363
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
4270
4364
|
--tw-text-opacity: 1;
|
|
4271
|
-
color:
|
|
4365
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
4272
4366
|
}
|
|
4273
4367
|
.steps .step-info + .step-info:before {
|
|
4274
4368
|
--tw-bg-opacity: 1;
|
|
4275
|
-
background-color:
|
|
4369
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
4276
4370
|
}
|
|
4277
4371
|
.steps .step-info:after {
|
|
4278
4372
|
--tw-bg-opacity: 1;
|
|
4279
|
-
background-color:
|
|
4373
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
4280
4374
|
--tw-text-opacity: 1;
|
|
4281
|
-
color:
|
|
4375
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
4282
4376
|
}
|
|
4283
4377
|
.steps .step-success + .step-success:before {
|
|
4284
4378
|
--tw-bg-opacity: 1;
|
|
4285
|
-
background-color:
|
|
4379
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
4286
4380
|
}
|
|
4287
4381
|
.steps .step-success:after {
|
|
4288
4382
|
--tw-bg-opacity: 1;
|
|
4289
|
-
background-color:
|
|
4383
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
4290
4384
|
--tw-text-opacity: 1;
|
|
4291
|
-
color:
|
|
4385
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
4292
4386
|
}
|
|
4293
4387
|
.steps .step-warning + .step-warning:before {
|
|
4294
4388
|
--tw-bg-opacity: 1;
|
|
4295
|
-
background-color:
|
|
4389
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
4296
4390
|
}
|
|
4297
4391
|
.steps .step-warning:after {
|
|
4298
4392
|
--tw-bg-opacity: 1;
|
|
4299
|
-
background-color:
|
|
4393
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
4300
4394
|
--tw-text-opacity: 1;
|
|
4301
|
-
color:
|
|
4395
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
4302
4396
|
}
|
|
4303
4397
|
.steps .step-error + .step-error:before {
|
|
4304
4398
|
--tw-bg-opacity: 1;
|
|
4305
|
-
background-color:
|
|
4399
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
4306
4400
|
}
|
|
4307
4401
|
.steps .step-error:after {
|
|
4308
4402
|
--tw-bg-opacity: 1;
|
|
4309
|
-
background-color:
|
|
4403
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
4310
4404
|
--tw-text-opacity: 1;
|
|
4311
|
-
color:
|
|
4405
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
4312
4406
|
}
|
|
4313
4407
|
.swap {
|
|
4314
4408
|
cursor: pointer;
|
|
@@ -4373,15 +4467,16 @@ details.collapse summary {
|
|
|
4373
4467
|
--tw-text-opacity: 1;
|
|
4374
4468
|
}
|
|
4375
4469
|
}.tab {
|
|
4376
|
-
--tab-color:
|
|
4377
|
-
--tab-bg:
|
|
4378
|
-
--tab-border-color:
|
|
4470
|
+
--tab-color: oklch(var(--bc) / var(--tw-text-opacity, 1));
|
|
4471
|
+
--tab-bg: oklch(var(--b1) / var(--tw-bg-opacity, 1));
|
|
4472
|
+
--tab-border-color: oklch(var(--b3) / var(--tw-bg-opacity, 1));
|
|
4379
4473
|
color: var(--tab-color);
|
|
4380
4474
|
padding-inline-start: var(--tab-padding, 1rem);
|
|
4381
4475
|
padding-inline-end: var(--tab-padding, 1rem);
|
|
4382
4476
|
}
|
|
4383
|
-
.tab.tab-active:not(.tab-disabled):not([disabled])
|
|
4384
|
-
|
|
4477
|
+
.tab.tab-active:not(.tab-disabled):not([disabled]),
|
|
4478
|
+
.tab:is(input:checked) {
|
|
4479
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4385
4480
|
--tw-border-opacity: 1;
|
|
4386
4481
|
--tw-text-opacity: 1;
|
|
4387
4482
|
}
|
|
@@ -4391,29 +4486,29 @@ details.collapse summary {
|
|
|
4391
4486
|
}
|
|
4392
4487
|
.tab:focus-visible {
|
|
4393
4488
|
outline: 2px solid currentColor;
|
|
4394
|
-
outline-offset: -
|
|
4489
|
+
outline-offset: -5px;
|
|
4395
4490
|
}
|
|
4396
4491
|
.tab:focus-visible.tab-lifted {
|
|
4397
|
-
border-end-end-radius:
|
|
4398
|
-
border-end-start-radius:
|
|
4492
|
+
border-end-end-radius: 0;
|
|
4493
|
+
border-end-start-radius: 0;
|
|
4399
4494
|
}
|
|
4400
4495
|
/* disabled */
|
|
4401
4496
|
.tab-disabled,
|
|
4402
4497
|
.tab[disabled] {
|
|
4403
4498
|
cursor: not-allowed;
|
|
4404
|
-
color:
|
|
4499
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4405
4500
|
--tw-text-opacity: 0.2;
|
|
4406
4501
|
}
|
|
4407
4502
|
@media (hover: hover) {
|
|
4408
4503
|
.tab[disabled],
|
|
4409
4504
|
.tab[disabled]:hover {
|
|
4410
4505
|
cursor: not-allowed;
|
|
4411
|
-
color:
|
|
4506
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4412
4507
|
--tw-text-opacity: 0.2;
|
|
4413
4508
|
}
|
|
4414
4509
|
}
|
|
4415
4510
|
.tab-bordered {
|
|
4416
|
-
border-color:
|
|
4511
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4417
4512
|
--tw-border-opacity: 0.2;
|
|
4418
4513
|
border-style: solid;
|
|
4419
4514
|
border-bottom-width: calc(var(--tab-border, 1px) + 1px);
|
|
@@ -4428,7 +4523,8 @@ details.collapse summary {
|
|
|
4428
4523
|
padding-inline-end: var(--tab-padding, 1rem);
|
|
4429
4524
|
padding-top: var(--tab-border, 1px);
|
|
4430
4525
|
}
|
|
4431
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled])
|
|
4526
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]),
|
|
4527
|
+
.tab-lifted:is(input:checked) {
|
|
4432
4528
|
background-color: var(--tab-bg);
|
|
4433
4529
|
border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
|
|
4434
4530
|
border-inline-start-color: var(--tab-border-color);
|
|
@@ -4439,75 +4535,76 @@ details.collapse summary {
|
|
|
4439
4535
|
padding-bottom: var(--tab-border, 1px);
|
|
4440
4536
|
padding-top: 0;
|
|
4441
4537
|
}
|
|
4442
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before,
|
|
4443
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
|
|
4538
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked):before {
|
|
4444
4539
|
z-index: 1;
|
|
4445
4540
|
content: "";
|
|
4446
4541
|
display: block;
|
|
4447
4542
|
position: absolute;
|
|
4448
|
-
width: var(--tab-radius, 0.5rem);
|
|
4543
|
+
width: calc(100% + var(--tab-radius, 0.5rem) * 2);
|
|
4449
4544
|
height: var(--tab-radius, 0.5rem);
|
|
4450
4545
|
bottom: 0;
|
|
4546
|
+
background-size: var(--tab-radius, 0.5rem);
|
|
4547
|
+
background-position:
|
|
4548
|
+
top left,
|
|
4549
|
+
top right;
|
|
4550
|
+
background-repeat: no-repeat;
|
|
4451
4551
|
--tab-grad: calc(68% - var(--tab-border, 1px));
|
|
4452
|
-
--
|
|
4453
|
-
circle at
|
|
4552
|
+
--radius-start: radial-gradient(
|
|
4553
|
+
circle at top left,
|
|
4454
4554
|
transparent var(--tab-grad),
|
|
4455
4555
|
var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
|
|
4456
4556
|
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
|
4457
4557
|
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
|
|
4458
4558
|
);
|
|
4559
|
+
--radius-end: radial-gradient(
|
|
4560
|
+
circle at top right,
|
|
4561
|
+
transparent var(--tab-grad),
|
|
4562
|
+
var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
|
|
4563
|
+
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
|
4564
|
+
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
|
|
4565
|
+
);
|
|
4566
|
+
background-image: var(--radius-start), var(--radius-end);
|
|
4459
4567
|
}
|
|
4460
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
background-image: var(--tab-corner-bg);
|
|
4464
|
-
}
|
|
4465
|
-
[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
|
|
4466
|
-
--circle-pos: top right;
|
|
4467
|
-
}
|
|
4468
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
|
|
4469
|
-
inset-inline-end: calc(var(--tab-radius, 0.5rem) * -1);
|
|
4470
|
-
--circle-pos: top right;
|
|
4471
|
-
background-image: var(--tab-corner-bg);
|
|
4472
|
-
}
|
|
4473
|
-
[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
|
|
4474
|
-
--circle-pos: top left;
|
|
4475
|
-
}
|
|
4476
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before {
|
|
4477
|
-
background: none;
|
|
4568
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tab-lifted:is(input:checked):first-child:before {
|
|
4569
|
+
background-image: var(--radius-end);
|
|
4570
|
+
background-position: top right;
|
|
4478
4571
|
}
|
|
4479
|
-
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:
|
|
4480
|
-
background:
|
|
4572
|
+
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tab-lifted:is(input:checked):last-child:before {
|
|
4573
|
+
background-image: var(--radius-start);
|
|
4574
|
+
background-position: top left;
|
|
4481
4575
|
}
|
|
4482
4576
|
.tab-lifted.tab-active:not(.tab-disabled):not([disabled])
|
|
4483
|
-
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
|
|
4484
|
-
background:
|
|
4577
|
+
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked) + .tab-lifted:is(input:checked):before {
|
|
4578
|
+
background-image: var(--radius-end);
|
|
4579
|
+
background-position: top right;
|
|
4485
4580
|
}
|
|
4486
4581
|
.tabs-boxed {
|
|
4487
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
4488
4582
|
--tw-bg-opacity: 1;
|
|
4489
|
-
background-color:
|
|
4583
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
4490
4584
|
padding: 0.25rem;
|
|
4585
|
+
border-radius: var(--rounded-btn, 0.5rem);
|
|
4491
4586
|
}
|
|
4492
4587
|
.tabs-boxed .tab {
|
|
4493
4588
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
4494
4589
|
}
|
|
4495
|
-
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled])
|
|
4590
|
+
.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
|
|
4591
|
+
.tabs-boxed :is(input:checked) {
|
|
4496
4592
|
--tw-bg-opacity: 1;
|
|
4497
|
-
background-color:
|
|
4593
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
4498
4594
|
--tw-text-opacity: 1;
|
|
4499
|
-
color:
|
|
4595
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4500
4596
|
}
|
|
4501
|
-
@media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover
|
|
4597
|
+
@media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
|
|
4598
|
+
.tabs-boxed :is(input:checked):hover {
|
|
4502
4599
|
--tw-text-opacity: 1;
|
|
4503
|
-
color:
|
|
4600
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4504
4601
|
}
|
|
4505
4602
|
}
|
|
4506
4603
|
.table {
|
|
4507
|
-
border-radius: var(--rounded-box, 1rem);
|
|
4508
4604
|
text-align: left;
|
|
4509
4605
|
font-size: 0.875rem;
|
|
4510
|
-
line-height: 1.25rem
|
|
4606
|
+
line-height: 1.25rem;
|
|
4607
|
+
border-radius: var(--rounded-box, 1rem)
|
|
4511
4608
|
}
|
|
4512
4609
|
:is([dir="rtl"] .table) {
|
|
4513
4610
|
text-align: right
|
|
@@ -4523,48 +4620,48 @@ details.collapse summary {
|
|
|
4523
4620
|
.table tr.active:nth-child(even),
|
|
4524
4621
|
.table-zebra tbody tr:nth-child(even) {
|
|
4525
4622
|
--tw-bg-opacity: 1;
|
|
4526
|
-
background-color:
|
|
4623
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity))
|
|
4527
4624
|
}
|
|
4528
4625
|
@media(hover:hover) {
|
|
4529
4626
|
.table tr.hover:hover,
|
|
4530
4627
|
.table tr.hover:nth-child(even):hover {
|
|
4531
4628
|
--tw-bg-opacity: 1;
|
|
4532
|
-
background-color:
|
|
4629
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity))
|
|
4533
4630
|
}
|
|
4534
4631
|
}
|
|
4535
4632
|
.table-zebra tr.active,
|
|
4536
4633
|
.table-zebra tr.active:nth-child(even),
|
|
4537
4634
|
.table-zebra-zebra tbody tr:nth-child(even) {
|
|
4538
4635
|
--tw-bg-opacity: 1;
|
|
4539
|
-
background-color:
|
|
4636
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity))
|
|
4540
4637
|
}
|
|
4541
4638
|
@media(hover:hover) {
|
|
4542
4639
|
.table-zebra tr.hover:hover,
|
|
4543
4640
|
.table-zebra tr.hover:nth-child(even):hover {
|
|
4544
4641
|
--tw-bg-opacity: 1;
|
|
4545
|
-
background-color:
|
|
4642
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity))
|
|
4546
4643
|
}
|
|
4547
4644
|
}
|
|
4548
4645
|
.table :where(thead, tbody) :where(tr:not(:last-child)),
|
|
4549
4646
|
.table :where(thead, tbody) :where(tr:first-child:last-child) {
|
|
4550
4647
|
border-bottom-width: 1px;
|
|
4551
4648
|
--tw-border-opacity: 1;
|
|
4552
|
-
border-bottom-color:
|
|
4649
|
+
border-bottom-color: oklch(var(--b2) / var(--tw-border-opacity))
|
|
4553
4650
|
}
|
|
4554
4651
|
.table :where(thead, tfoot) {
|
|
4555
4652
|
white-space: nowrap;
|
|
4556
4653
|
font-size: 0.75rem;
|
|
4557
4654
|
line-height: 1rem;
|
|
4558
4655
|
font-weight: 700;
|
|
4559
|
-
color:
|
|
4656
|
+
color: oklch(var(--bc) / 0.6)
|
|
4560
4657
|
}
|
|
4561
4658
|
.textarea {
|
|
4562
|
-
border-radius: var(--rounded-btn, 0.5rem);
|
|
4563
4659
|
border-width: 1px;
|
|
4564
|
-
border-color:
|
|
4660
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4565
4661
|
--tw-border-opacity: 0;
|
|
4566
4662
|
--tw-bg-opacity: 1;
|
|
4567
|
-
background-color:
|
|
4663
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4664
|
+
border-radius: var(--rounded-btn, 0.5rem)
|
|
4568
4665
|
}
|
|
4569
4666
|
.textarea-bordered {
|
|
4570
4667
|
--tw-border-opacity: 0.2
|
|
@@ -4573,7 +4670,7 @@ details.collapse summary {
|
|
|
4573
4670
|
outline-style: solid;
|
|
4574
4671
|
outline-width: 2px;
|
|
4575
4672
|
outline-offset: 2px;
|
|
4576
|
-
outline-color:
|
|
4673
|
+
outline-color: oklch(var(--bc) / 0.2)
|
|
4577
4674
|
}
|
|
4578
4675
|
.textarea-ghost {
|
|
4579
4676
|
--tw-bg-opacity: 0.05
|
|
@@ -4581,74 +4678,120 @@ details.collapse summary {
|
|
|
4581
4678
|
.textarea-ghost:focus {
|
|
4582
4679
|
--tw-bg-opacity: 1;
|
|
4583
4680
|
--tw-text-opacity: 1;
|
|
4584
|
-
color:
|
|
4681
|
+
color: oklch(var(--bc) / var(--tw-text-opacity));
|
|
4585
4682
|
box-shadow: none
|
|
4586
4683
|
}
|
|
4587
4684
|
.textarea-primary {
|
|
4588
4685
|
--tw-border-opacity: 1;
|
|
4589
|
-
border-color:
|
|
4686
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity))
|
|
4590
4687
|
}
|
|
4591
4688
|
.textarea-primary:focus {
|
|
4592
|
-
outline-color:
|
|
4689
|
+
outline-color: oklch(var(--p) / 1)
|
|
4593
4690
|
}
|
|
4594
4691
|
.textarea-secondary {
|
|
4595
4692
|
--tw-border-opacity: 1;
|
|
4596
|
-
border-color:
|
|
4693
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity))
|
|
4597
4694
|
}
|
|
4598
4695
|
.textarea-secondary:focus {
|
|
4599
|
-
outline-color:
|
|
4696
|
+
outline-color: oklch(var(--s) / 1)
|
|
4600
4697
|
}
|
|
4601
4698
|
.textarea-accent {
|
|
4602
4699
|
--tw-border-opacity: 1;
|
|
4603
|
-
border-color:
|
|
4700
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity))
|
|
4604
4701
|
}
|
|
4605
4702
|
.textarea-accent:focus {
|
|
4606
|
-
outline-color:
|
|
4703
|
+
outline-color: oklch(var(--a) / 1)
|
|
4607
4704
|
}
|
|
4608
4705
|
.textarea-info {
|
|
4609
4706
|
--tw-border-opacity: 1;
|
|
4610
|
-
border-color:
|
|
4707
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity))
|
|
4611
4708
|
}
|
|
4612
4709
|
.textarea-info:focus {
|
|
4613
|
-
outline-color:
|
|
4710
|
+
outline-color: oklch(var(--in) / 1)
|
|
4614
4711
|
}
|
|
4615
4712
|
.textarea-success {
|
|
4616
4713
|
--tw-border-opacity: 1;
|
|
4617
|
-
border-color:
|
|
4714
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity))
|
|
4618
4715
|
}
|
|
4619
4716
|
.textarea-success:focus {
|
|
4620
|
-
outline-color:
|
|
4717
|
+
outline-color: oklch(var(--su) / 1)
|
|
4621
4718
|
}
|
|
4622
4719
|
.textarea-warning {
|
|
4623
4720
|
--tw-border-opacity: 1;
|
|
4624
|
-
border-color:
|
|
4721
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity))
|
|
4625
4722
|
}
|
|
4626
4723
|
.textarea-warning:focus {
|
|
4627
|
-
outline-color:
|
|
4724
|
+
outline-color: oklch(var(--wa) / 1)
|
|
4628
4725
|
}
|
|
4629
4726
|
.textarea-error {
|
|
4630
4727
|
--tw-border-opacity: 1;
|
|
4631
|
-
border-color:
|
|
4728
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity))
|
|
4632
4729
|
}
|
|
4633
4730
|
.textarea-error:focus {
|
|
4634
|
-
outline-color:
|
|
4731
|
+
outline-color: oklch(var(--er) / 1)
|
|
4635
4732
|
}
|
|
4636
4733
|
.textarea-disabled,
|
|
4637
4734
|
.textarea:disabled,
|
|
4638
4735
|
.textarea[disabled] {
|
|
4639
4736
|
cursor: not-allowed;
|
|
4640
4737
|
--tw-border-opacity: 1;
|
|
4641
|
-
border-color:
|
|
4738
|
+
border-color: oklch(var(--b2) / var(--tw-border-opacity));
|
|
4642
4739
|
--tw-bg-opacity: 1;
|
|
4643
|
-
background-color:
|
|
4740
|
+
background-color: oklch(var(--b2) / var(--tw-bg-opacity));
|
|
4644
4741
|
--tw-text-opacity: 0.2
|
|
4645
4742
|
}
|
|
4646
4743
|
.textarea-disabled::placeholder,
|
|
4647
4744
|
.textarea:disabled::placeholder,
|
|
4648
4745
|
.textarea[disabled]::placeholder {
|
|
4649
|
-
color:
|
|
4746
|
+
color: oklch(var(--bc) / var(--tw-placeholder-opacity));
|
|
4650
4747
|
--tw-placeholder-opacity: 0.2
|
|
4651
4748
|
}
|
|
4749
|
+
.timeline hr {
|
|
4750
|
+
height: 0.25rem
|
|
4751
|
+
}
|
|
4752
|
+
:where(.timeline hr) {
|
|
4753
|
+
--tw-bg-opacity: 1;
|
|
4754
|
+
background-color: oklch(var(--b3) / var(--tw-bg-opacity))
|
|
4755
|
+
}
|
|
4756
|
+
:where(.timeline:has(.timeline-middle) hr):first-child {
|
|
4757
|
+
border-start-end-radius: var(--rounded-badge, 1.9rem);
|
|
4758
|
+
border-end-end-radius: var(--rounded-badge, 1.9rem);
|
|
4759
|
+
border-start-start-radius: 0px;
|
|
4760
|
+
border-end-start-radius: 0px
|
|
4761
|
+
}
|
|
4762
|
+
:where(.timeline:has(.timeline-middle) hr):last-child {
|
|
4763
|
+
border-start-start-radius: var(--rounded-badge, 1.9rem);
|
|
4764
|
+
border-end-start-radius: var(--rounded-badge, 1.9rem);
|
|
4765
|
+
border-start-end-radius: 0px;
|
|
4766
|
+
border-end-end-radius: 0px
|
|
4767
|
+
}
|
|
4768
|
+
:where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
|
|
4769
|
+
border-start-start-radius: var(--rounded-badge, 1.9rem);
|
|
4770
|
+
border-end-start-radius: var(--rounded-badge, 1.9rem);
|
|
4771
|
+
border-start-end-radius: 0px;
|
|
4772
|
+
border-end-end-radius: 0px
|
|
4773
|
+
}
|
|
4774
|
+
:where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
|
|
4775
|
+
border-start-end-radius: var(--rounded-badge, 1.9rem);
|
|
4776
|
+
border-end-end-radius: var(--rounded-badge, 1.9rem);
|
|
4777
|
+
border-start-start-radius: 0px;
|
|
4778
|
+
border-end-start-radius: 0px
|
|
4779
|
+
}
|
|
4780
|
+
.timeline-box {
|
|
4781
|
+
border-width: 1px;
|
|
4782
|
+
--tw-border-opacity: 1;
|
|
4783
|
+
border-color: oklch(var(--b3) / var(--tw-border-opacity));
|
|
4784
|
+
--tw-bg-opacity: 1;
|
|
4785
|
+
background-color: oklch(var(--b1) / var(--tw-bg-opacity));
|
|
4786
|
+
padding-left: 1rem;
|
|
4787
|
+
padding-right: 1rem;
|
|
4788
|
+
padding-top: 0.5rem;
|
|
4789
|
+
padding-bottom: 0.5rem;
|
|
4790
|
+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
4791
|
+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
4792
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
4793
|
+
border-radius: var(--rounded-box, 1rem)
|
|
4794
|
+
}
|
|
4652
4795
|
.toast {
|
|
4653
4796
|
gap: 0.5rem;
|
|
4654
4797
|
padding: 1rem;
|
|
@@ -4668,7 +4811,7 @@ details.collapse summary {
|
|
|
4668
4811
|
}
|
|
4669
4812
|
}
|
|
4670
4813
|
.toggle {
|
|
4671
|
-
--tglbg:
|
|
4814
|
+
--tglbg: oklch(var(--b1));
|
|
4672
4815
|
--handleoffset: 1.5rem;
|
|
4673
4816
|
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
|
4674
4817
|
--togglehandleborder: 0 0;
|
|
@@ -4676,12 +4819,12 @@ details.collapse summary {
|
|
|
4676
4819
|
width: 3rem;
|
|
4677
4820
|
cursor: pointer;
|
|
4678
4821
|
appearance: none;
|
|
4679
|
-
border-radius: var(--rounded-badge, 1.9rem);
|
|
4680
4822
|
border-width: 1px;
|
|
4681
|
-
border-color:
|
|
4823
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4682
4824
|
--tw-border-opacity: 0.2;
|
|
4683
|
-
background-color:
|
|
4825
|
+
background-color: oklch(var(--bc) / var(--tw-bg-opacity));
|
|
4684
4826
|
--tw-bg-opacity: 0.5;
|
|
4827
|
+
border-radius: var(--rounded-badge, 1.9rem);
|
|
4685
4828
|
transition:
|
|
4686
4829
|
background,
|
|
4687
4830
|
box-shadow var(--animation-input, 0.2s) ease-out;
|
|
@@ -4697,7 +4840,7 @@ details.collapse summary {
|
|
|
4697
4840
|
outline-style: solid;
|
|
4698
4841
|
outline-width: 2px;
|
|
4699
4842
|
outline-offset: 2px;
|
|
4700
|
-
outline-color:
|
|
4843
|
+
outline-color: oklch(var(--bc) / 0.2);
|
|
4701
4844
|
}
|
|
4702
4845
|
.toggle:checked,
|
|
4703
4846
|
.toggle[checked="true"],
|
|
@@ -4724,104 +4867,104 @@ details.collapse summary {
|
|
|
4724
4867
|
0 0 0 2px var(--tglbg) inset;
|
|
4725
4868
|
}
|
|
4726
4869
|
.toggle-primary:focus-visible {
|
|
4727
|
-
outline-color:
|
|
4870
|
+
outline-color: oklch(var(--p) / 1);
|
|
4728
4871
|
}
|
|
4729
4872
|
.toggle-primary:checked,
|
|
4730
4873
|
.toggle-primary[checked="true"],
|
|
4731
4874
|
.toggle-primary[aria-checked="true"] {
|
|
4732
|
-
border-color:
|
|
4875
|
+
border-color: oklch(var(--p) / var(--tw-border-opacity));
|
|
4733
4876
|
--tw-border-opacity: 0.1;
|
|
4734
4877
|
--tw-bg-opacity: 1;
|
|
4735
|
-
background-color:
|
|
4878
|
+
background-color: oklch(var(--p) / var(--tw-bg-opacity));
|
|
4736
4879
|
--tw-text-opacity: 1;
|
|
4737
|
-
color:
|
|
4880
|
+
color: oklch(var(--pc) / var(--tw-text-opacity));
|
|
4738
4881
|
}
|
|
4739
4882
|
.toggle-secondary:focus-visible {
|
|
4740
|
-
outline-color:
|
|
4883
|
+
outline-color: oklch(var(--s) / 1);
|
|
4741
4884
|
}
|
|
4742
4885
|
.toggle-secondary:checked,
|
|
4743
4886
|
.toggle-secondary[checked="true"],
|
|
4744
4887
|
.toggle-secondary[aria-checked="true"] {
|
|
4745
|
-
border-color:
|
|
4888
|
+
border-color: oklch(var(--s) / var(--tw-border-opacity));
|
|
4746
4889
|
--tw-border-opacity: 0.1;
|
|
4747
4890
|
--tw-bg-opacity: 1;
|
|
4748
|
-
background-color:
|
|
4891
|
+
background-color: oklch(var(--s) / var(--tw-bg-opacity));
|
|
4749
4892
|
--tw-text-opacity: 1;
|
|
4750
|
-
color:
|
|
4893
|
+
color: oklch(var(--sc) / var(--tw-text-opacity));
|
|
4751
4894
|
}
|
|
4752
4895
|
.toggle-accent:focus-visible {
|
|
4753
|
-
outline-color:
|
|
4896
|
+
outline-color: oklch(var(--a) / 1);
|
|
4754
4897
|
}
|
|
4755
4898
|
.toggle-accent:checked,
|
|
4756
4899
|
.toggle-accent[checked="true"],
|
|
4757
4900
|
.toggle-accent[aria-checked="true"] {
|
|
4758
|
-
border-color:
|
|
4901
|
+
border-color: oklch(var(--a) / var(--tw-border-opacity));
|
|
4759
4902
|
--tw-border-opacity: 0.1;
|
|
4760
4903
|
--tw-bg-opacity: 1;
|
|
4761
|
-
background-color:
|
|
4904
|
+
background-color: oklch(var(--a) / var(--tw-bg-opacity));
|
|
4762
4905
|
--tw-text-opacity: 1;
|
|
4763
|
-
color:
|
|
4906
|
+
color: oklch(var(--ac) / var(--tw-text-opacity));
|
|
4764
4907
|
}
|
|
4765
4908
|
.toggle-success:focus-visible {
|
|
4766
|
-
outline-color:
|
|
4909
|
+
outline-color: oklch(var(--su) / 1);
|
|
4767
4910
|
}
|
|
4768
4911
|
.toggle-success:checked,
|
|
4769
4912
|
.toggle-success[checked="true"],
|
|
4770
4913
|
.toggle-success[aria-checked="true"] {
|
|
4771
|
-
border-color:
|
|
4914
|
+
border-color: oklch(var(--su) / var(--tw-border-opacity));
|
|
4772
4915
|
--tw-border-opacity: 0.1;
|
|
4773
4916
|
--tw-bg-opacity: 1;
|
|
4774
|
-
background-color:
|
|
4917
|
+
background-color: oklch(var(--su) / var(--tw-bg-opacity));
|
|
4775
4918
|
--tw-text-opacity: 1;
|
|
4776
|
-
color:
|
|
4919
|
+
color: oklch(var(--suc) / var(--tw-text-opacity));
|
|
4777
4920
|
}
|
|
4778
4921
|
.toggle-warning:focus-visible {
|
|
4779
|
-
outline-color:
|
|
4922
|
+
outline-color: oklch(var(--wa) / 1);
|
|
4780
4923
|
}
|
|
4781
4924
|
.toggle-warning:checked,
|
|
4782
4925
|
.toggle-warning[checked="true"],
|
|
4783
4926
|
.toggle-warning[aria-checked="true"] {
|
|
4784
|
-
border-color:
|
|
4927
|
+
border-color: oklch(var(--wa) / var(--tw-border-opacity));
|
|
4785
4928
|
--tw-border-opacity: 0.1;
|
|
4786
4929
|
--tw-bg-opacity: 1;
|
|
4787
|
-
background-color:
|
|
4930
|
+
background-color: oklch(var(--wa) / var(--tw-bg-opacity));
|
|
4788
4931
|
--tw-text-opacity: 1;
|
|
4789
|
-
color:
|
|
4932
|
+
color: oklch(var(--wac) / var(--tw-text-opacity));
|
|
4790
4933
|
}
|
|
4791
4934
|
.toggle-info:focus-visible {
|
|
4792
|
-
outline-color:
|
|
4935
|
+
outline-color: oklch(var(--in) / 1);
|
|
4793
4936
|
}
|
|
4794
4937
|
.toggle-info:checked,
|
|
4795
4938
|
.toggle-info[checked="true"],
|
|
4796
4939
|
.toggle-info[aria-checked="true"] {
|
|
4797
|
-
border-color:
|
|
4940
|
+
border-color: oklch(var(--in) / var(--tw-border-opacity));
|
|
4798
4941
|
--tw-border-opacity: 0.1;
|
|
4799
4942
|
--tw-bg-opacity: 1;
|
|
4800
|
-
background-color:
|
|
4943
|
+
background-color: oklch(var(--in) / var(--tw-bg-opacity));
|
|
4801
4944
|
--tw-text-opacity: 1;
|
|
4802
|
-
color:
|
|
4945
|
+
color: oklch(var(--inc) / var(--tw-text-opacity));
|
|
4803
4946
|
}
|
|
4804
4947
|
.toggle-error:focus-visible {
|
|
4805
|
-
outline-color:
|
|
4948
|
+
outline-color: oklch(var(--er) / 1);
|
|
4806
4949
|
}
|
|
4807
4950
|
.toggle-error:checked,
|
|
4808
4951
|
.toggle-error[checked="true"],
|
|
4809
4952
|
.toggle-error[aria-checked="true"] {
|
|
4810
|
-
border-color:
|
|
4953
|
+
border-color: oklch(var(--er) / var(--tw-border-opacity));
|
|
4811
4954
|
--tw-border-opacity: 0.1;
|
|
4812
4955
|
--tw-bg-opacity: 1;
|
|
4813
|
-
background-color:
|
|
4956
|
+
background-color: oklch(var(--er) / var(--tw-bg-opacity));
|
|
4814
4957
|
--tw-text-opacity: 1;
|
|
4815
|
-
color:
|
|
4958
|
+
color: oklch(var(--erc) / var(--tw-text-opacity));
|
|
4816
4959
|
}
|
|
4817
4960
|
.toggle:disabled {
|
|
4818
4961
|
cursor: not-allowed;
|
|
4819
4962
|
--tw-border-opacity: 1;
|
|
4820
|
-
border-color:
|
|
4963
|
+
border-color: oklch(var(--bc) / var(--tw-border-opacity));
|
|
4821
4964
|
background-color: transparent;
|
|
4822
4965
|
opacity: 0.3;
|
|
4823
|
-
--togglehandleborder: 0 0 0 3px
|
|
4824
|
-
var(--handleoffsetcalculator) 0 0 3px
|
|
4966
|
+
--togglehandleborder: 0 0 0 3px oklch(var(--bc)) inset,
|
|
4967
|
+
var(--handleoffsetcalculator) 0 0 3px oklch(var(--bc)) inset;
|
|
4825
4968
|
}
|
|
4826
4969
|
|
|
4827
4970
|
/* backward compatibility */
|
|
@@ -4830,22 +4973,22 @@ details.collapse summary {
|
|
|
4830
4973
|
display: none;
|
|
4831
4974
|
}
|
|
4832
4975
|
:root .prose {
|
|
4833
|
-
--tw-prose-body:
|
|
4834
|
-
--tw-prose-headings:
|
|
4835
|
-
--tw-prose-lead:
|
|
4836
|
-
--tw-prose-links:
|
|
4837
|
-
--tw-prose-bold:
|
|
4838
|
-
--tw-prose-counters:
|
|
4839
|
-
--tw-prose-bullets:
|
|
4840
|
-
--tw-prose-hr:
|
|
4841
|
-
--tw-prose-quotes:
|
|
4842
|
-
--tw-prose-quote-borders:
|
|
4843
|
-
--tw-prose-captions:
|
|
4844
|
-
--tw-prose-code:
|
|
4845
|
-
--tw-prose-pre-code:
|
|
4846
|
-
--tw-prose-pre-bg:
|
|
4847
|
-
--tw-prose-th-borders:
|
|
4848
|
-
--tw-prose-td-borders:
|
|
4976
|
+
--tw-prose-body: oklch(var(--bc) / 0.8);
|
|
4977
|
+
--tw-prose-headings: oklch(var(--bc));
|
|
4978
|
+
--tw-prose-lead: oklch(var(--bc));
|
|
4979
|
+
--tw-prose-links: oklch(var(--bc));
|
|
4980
|
+
--tw-prose-bold: oklch(var(--bc));
|
|
4981
|
+
--tw-prose-counters: oklch(var(--bc));
|
|
4982
|
+
--tw-prose-bullets: oklch(var(--bc) / 0.5);
|
|
4983
|
+
--tw-prose-hr: oklch(var(--bc) / 0.2);
|
|
4984
|
+
--tw-prose-quotes: oklch(var(--bc));
|
|
4985
|
+
--tw-prose-quote-borders: oklch(var(--bc) / 0.2);
|
|
4986
|
+
--tw-prose-captions: oklch(var(--bc) / 0.5);
|
|
4987
|
+
--tw-prose-code: oklch(var(--bc));
|
|
4988
|
+
--tw-prose-pre-code: oklch(var(--nc));
|
|
4989
|
+
--tw-prose-pre-bg: oklch(var(--n));
|
|
4990
|
+
--tw-prose-th-borders: oklch(var(--bc) / 0.5);
|
|
4991
|
+
--tw-prose-td-borders: oklch(var(--bc) / 0.2);
|
|
4849
4992
|
}
|
|
4850
4993
|
.prose :where(code):not(:where([class~="not-prose"] *)) {
|
|
4851
4994
|
padding: 2px 8px;
|
|
@@ -4860,5 +5003,5 @@ details.collapse summary {
|
|
|
4860
5003
|
padding: 0;
|
|
4861
5004
|
}
|
|
4862
5005
|
.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
|
|
4863
|
-
border-bottom-color:
|
|
5006
|
+
border-bottom-color: oklch(var(--bc) / 20%);
|
|
4864
5007
|
}
|