vibrant-tool 0.1.2 → 0.1.3
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 +36 -36
- package/dist/App.d.ts +1 -5
- package/dist/lib/services/product.service.d.ts +4 -0
- package/dist/lib/services/shape.service.d.ts +5 -1
- package/dist/lib/services/template-design.service.d.ts +35 -0
- package/dist/lib/types/fabric.types.d.ts +6 -0
- package/dist/lib/types/font.types.d.ts +6 -10
- package/dist/lib/types/product.types.d.ts +23 -0
- package/dist/lib/types/shape.types.d.ts +19 -14
- package/dist/lib/utils/canvas-setup.d.ts +7 -4
- package/dist/lib/utils/color-apply.utils.d.ts +13 -0
- package/dist/lib/utils/color-conversions.utils.d.ts +6 -0
- package/dist/lib/utils/fabric-helper.d.ts +2 -0
- package/dist/lib/utils/page-manager.d.ts +3 -2
- package/dist/lib/utils/qr-utils.d.ts +1 -1
- package/dist/lib/utils/query-params.d.ts +28 -0
- package/dist/lib/utils/svg-utils.d.ts +3 -0
- package/dist/modules/canvas/index.d.ts +1 -5
- package/dist/modules/components/color-picker/index.d.ts +8 -1
- package/dist/modules/components/product-not-found/index.d.ts +3 -0
- package/dist/modules/index.d.ts +1 -5
- package/dist/modules/topbar/preview-modal.d.ts +3 -0
- package/dist/vibrant-tool.css +338 -20
- package/dist/vibrant-tool.es.js +45071 -12455
- package/dist/vibrant-tool.umd.js +38713 -6098
- package/dist/zustand/productStore.d.ts +11 -0
- package/package.json +72 -71
package/dist/vibrant-tool.css
CHANGED
|
@@ -76,15 +76,22 @@
|
|
|
76
76
|
:root, :host {
|
|
77
77
|
--color-red-400: oklch(70.4% .191 22.216);
|
|
78
78
|
--color-red-500: oklch(63.7% .237 25.331);
|
|
79
|
+
--color-amber-500: oklch(76.9% .188 70.08);
|
|
79
80
|
--color-yellow-400: oklch(85.2% .199 91.936);
|
|
80
81
|
--color-green-600: oklch(62.7% .194 149.214);
|
|
81
82
|
--color-green-700: oklch(52.7% .154 150.069);
|
|
82
83
|
--color-emerald-200: oklch(90.5% .093 164.15);
|
|
84
|
+
--color-cyan-50: oklch(98.4% .019 200.873);
|
|
85
|
+
--color-cyan-500: oklch(71.5% .143 215.221);
|
|
86
|
+
--color-cyan-600: oklch(60.9% .126 221.723);
|
|
83
87
|
--color-blue-200: oklch(88.2% .059 254.128);
|
|
84
|
-
--color-blue-300: oklch(80.9% .105 251.813);
|
|
85
88
|
--color-blue-400: oklch(70.7% .165 254.624);
|
|
86
89
|
--color-blue-500: oklch(62.3% .214 259.815);
|
|
87
90
|
--color-blue-600: oklch(54.6% .245 262.881);
|
|
91
|
+
--color-rose-600: oklch(58.6% .253 17.585);
|
|
92
|
+
--color-slate-50: oklch(98.4% .003 247.858);
|
|
93
|
+
--color-slate-100: oklch(96.8% .007 247.896);
|
|
94
|
+
--color-gray-50: oklch(98.5% .002 247.839);
|
|
88
95
|
--color-gray-100: oklch(96.7% .003 264.542);
|
|
89
96
|
--color-gray-200: oklch(92.8% .006 264.531);
|
|
90
97
|
--color-gray-300: oklch(87.2% .01 258.338);
|
|
@@ -94,8 +101,10 @@
|
|
|
94
101
|
--color-gray-700: oklch(37.3% .034 259.733);
|
|
95
102
|
--color-gray-800: oklch(27.8% .033 256.848);
|
|
96
103
|
--color-gray-900: oklch(21% .034 264.665);
|
|
104
|
+
--color-neutral-100: oklch(97% 0 0);
|
|
97
105
|
--color-neutral-200: oklch(92.2% 0 0);
|
|
98
106
|
--color-neutral-300: oklch(87% 0 0);
|
|
107
|
+
--color-neutral-400: oklch(70.8% 0 0);
|
|
99
108
|
--color-neutral-600: oklch(43.9% 0 0);
|
|
100
109
|
--color-neutral-700: oklch(37.1% 0 0);
|
|
101
110
|
--color-neutral-800: oklch(26.9% 0 0);
|
|
@@ -104,6 +113,8 @@
|
|
|
104
113
|
--color-black: #000;
|
|
105
114
|
--color-white: #fff;
|
|
106
115
|
--spacing: .25rem;
|
|
116
|
+
--container-md: 28rem;
|
|
117
|
+
--container-4xl: 56rem;
|
|
107
118
|
--text-xs: .75rem;
|
|
108
119
|
--text-xs--line-height: calc(1 / .75);
|
|
109
120
|
--text-sm: .875rem;
|
|
@@ -135,6 +146,9 @@
|
|
|
135
146
|
--radius-3xl: 1.5rem;
|
|
136
147
|
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
|
|
137
148
|
--animate-spin: spin 1s linear infinite;
|
|
149
|
+
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
|
|
150
|
+
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
|
|
151
|
+
--blur-sm: 8px;
|
|
138
152
|
--blur-md: 12px;
|
|
139
153
|
--blur-xl: 24px;
|
|
140
154
|
--default-transition-duration: .15s;
|
|
@@ -436,6 +450,10 @@
|
|
|
436
450
|
inset-inline-end: var(--spacing);
|
|
437
451
|
}
|
|
438
452
|
|
|
453
|
+
.-top-1\.5 {
|
|
454
|
+
top: calc(var(--spacing) * -1.5);
|
|
455
|
+
}
|
|
456
|
+
|
|
439
457
|
.-top-2\.5 {
|
|
440
458
|
top: calc(var(--spacing) * -2.5);
|
|
441
459
|
}
|
|
@@ -460,12 +478,12 @@
|
|
|
460
478
|
top: calc(var(--spacing) * 2);
|
|
461
479
|
}
|
|
462
480
|
|
|
463
|
-
.top-
|
|
464
|
-
top: calc(var(--spacing) *
|
|
481
|
+
.top-4 {
|
|
482
|
+
top: calc(var(--spacing) * 4);
|
|
465
483
|
}
|
|
466
484
|
|
|
467
|
-
.top-
|
|
468
|
-
top: calc(var(--spacing) *
|
|
485
|
+
.top-10 {
|
|
486
|
+
top: calc(var(--spacing) * 10);
|
|
469
487
|
}
|
|
470
488
|
|
|
471
489
|
.top-\[-6px\] {
|
|
@@ -548,6 +566,14 @@
|
|
|
548
566
|
left: 50%;
|
|
549
567
|
}
|
|
550
568
|
|
|
569
|
+
.left-4 {
|
|
570
|
+
left: calc(var(--spacing) * 4);
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.-z-10 {
|
|
574
|
+
z-index: calc(10 * -1);
|
|
575
|
+
}
|
|
576
|
+
|
|
551
577
|
.z-40 {
|
|
552
578
|
z-index: 40;
|
|
553
579
|
}
|
|
@@ -576,6 +602,10 @@
|
|
|
576
602
|
z-index: 9999;
|
|
577
603
|
}
|
|
578
604
|
|
|
605
|
+
.z-\[99999\] {
|
|
606
|
+
z-index: 99999;
|
|
607
|
+
}
|
|
608
|
+
|
|
579
609
|
.col-span-2 {
|
|
580
610
|
grid-column: span 2 / span 2;
|
|
581
611
|
}
|
|
@@ -714,6 +744,10 @@
|
|
|
714
744
|
display: block;
|
|
715
745
|
}
|
|
716
746
|
|
|
747
|
+
.contents {
|
|
748
|
+
display: contents;
|
|
749
|
+
}
|
|
750
|
+
|
|
717
751
|
.flex {
|
|
718
752
|
display: flex;
|
|
719
753
|
}
|
|
@@ -742,6 +776,14 @@
|
|
|
742
776
|
height: calc(var(--spacing) * 1.5);
|
|
743
777
|
}
|
|
744
778
|
|
|
779
|
+
.h-2 {
|
|
780
|
+
height: calc(var(--spacing) * 2);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.h-2\.5 {
|
|
784
|
+
height: calc(var(--spacing) * 2.5);
|
|
785
|
+
}
|
|
786
|
+
|
|
745
787
|
.h-3 {
|
|
746
788
|
height: calc(var(--spacing) * 3);
|
|
747
789
|
}
|
|
@@ -786,6 +828,10 @@
|
|
|
786
828
|
height: calc(var(--spacing) * 14);
|
|
787
829
|
}
|
|
788
830
|
|
|
831
|
+
.h-16 {
|
|
832
|
+
height: calc(var(--spacing) * 16);
|
|
833
|
+
}
|
|
834
|
+
|
|
789
835
|
.h-20 {
|
|
790
836
|
height: calc(var(--spacing) * 20);
|
|
791
837
|
}
|
|
@@ -826,6 +872,10 @@
|
|
|
826
872
|
height: 85dvh;
|
|
827
873
|
}
|
|
828
874
|
|
|
875
|
+
.h-\[85vh\] {
|
|
876
|
+
height: 85vh;
|
|
877
|
+
}
|
|
878
|
+
|
|
829
879
|
.h-\[calc\(100dvh-180px\)\] {
|
|
830
880
|
height: calc(100dvh - 180px);
|
|
831
881
|
}
|
|
@@ -858,6 +908,10 @@
|
|
|
858
908
|
height: calc(100vh - 288px);
|
|
859
909
|
}
|
|
860
910
|
|
|
911
|
+
.h-auto {
|
|
912
|
+
height: auto;
|
|
913
|
+
}
|
|
914
|
+
|
|
861
915
|
.h-full {
|
|
862
916
|
height: 100%;
|
|
863
917
|
}
|
|
@@ -874,10 +928,26 @@
|
|
|
874
928
|
max-height: calc(var(--spacing) * 60);
|
|
875
929
|
}
|
|
876
930
|
|
|
931
|
+
.max-h-\[50vh\] {
|
|
932
|
+
max-height: 50vh;
|
|
933
|
+
}
|
|
934
|
+
|
|
877
935
|
.min-h-0 {
|
|
878
936
|
min-height: calc(var(--spacing) * 0);
|
|
879
937
|
}
|
|
880
938
|
|
|
939
|
+
.min-h-\[500px\] {
|
|
940
|
+
min-height: 500px;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.w-2 {
|
|
944
|
+
width: calc(var(--spacing) * 2);
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.w-2\.5 {
|
|
948
|
+
width: calc(var(--spacing) * 2.5);
|
|
949
|
+
}
|
|
950
|
+
|
|
881
951
|
.w-3 {
|
|
882
952
|
width: calc(var(--spacing) * 3);
|
|
883
953
|
}
|
|
@@ -934,6 +1004,10 @@
|
|
|
934
1004
|
width: calc(var(--spacing) * 40);
|
|
935
1005
|
}
|
|
936
1006
|
|
|
1007
|
+
.w-72 {
|
|
1008
|
+
width: calc(var(--spacing) * 72);
|
|
1009
|
+
}
|
|
1010
|
+
|
|
937
1011
|
.w-80 {
|
|
938
1012
|
width: calc(var(--spacing) * 80);
|
|
939
1013
|
}
|
|
@@ -954,8 +1028,12 @@
|
|
|
954
1028
|
width: 260px;
|
|
955
1029
|
}
|
|
956
1030
|
|
|
957
|
-
.w-\[
|
|
958
|
-
width:
|
|
1031
|
+
.w-\[290px\] {
|
|
1032
|
+
width: 290px;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.w-auto {
|
|
1036
|
+
width: auto;
|
|
959
1037
|
}
|
|
960
1038
|
|
|
961
1039
|
.w-full {
|
|
@@ -970,6 +1048,18 @@
|
|
|
970
1048
|
width: 100vw;
|
|
971
1049
|
}
|
|
972
1050
|
|
|
1051
|
+
.max-w-4xl {
|
|
1052
|
+
max-width: var(--container-4xl);
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
.max-w-full {
|
|
1056
|
+
max-width: 100%;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.max-w-md {
|
|
1060
|
+
max-width: var(--container-md);
|
|
1061
|
+
}
|
|
1062
|
+
|
|
973
1063
|
.min-w-\[52px\] {
|
|
974
1064
|
min-width: 52px;
|
|
975
1065
|
}
|
|
@@ -1009,6 +1099,14 @@
|
|
|
1009
1099
|
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
|
|
1010
1100
|
}
|
|
1011
1101
|
|
|
1102
|
+
.animate-ping {
|
|
1103
|
+
animation: var(--animate-ping);
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
.animate-pulse {
|
|
1107
|
+
animation: var(--animate-pulse);
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1012
1110
|
.animate-spin {
|
|
1013
1111
|
animation: var(--animate-spin);
|
|
1014
1112
|
}
|
|
@@ -1021,6 +1119,14 @@
|
|
|
1021
1119
|
cursor: ew-resize;
|
|
1022
1120
|
}
|
|
1023
1121
|
|
|
1122
|
+
.cursor-grab {
|
|
1123
|
+
cursor: grab;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
.cursor-help {
|
|
1127
|
+
cursor: help;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1024
1130
|
.cursor-not-allowed {
|
|
1025
1131
|
cursor: not-allowed;
|
|
1026
1132
|
}
|
|
@@ -1214,7 +1320,7 @@
|
|
|
1214
1320
|
border-top-right-radius: var(--radius-xl);
|
|
1215
1321
|
}
|
|
1216
1322
|
|
|
1217
|
-
.border
|
|
1323
|
+
.border {
|
|
1218
1324
|
border-style: var(--tw-border-style);
|
|
1219
1325
|
border-width: 1px;
|
|
1220
1326
|
}
|
|
@@ -1248,6 +1354,10 @@
|
|
|
1248
1354
|
border-color: #02bc71;
|
|
1249
1355
|
}
|
|
1250
1356
|
|
|
1357
|
+
.border-\[\#02bc71\]\/40 {
|
|
1358
|
+
border-color: oklab(69.9534% -.154036 .0673199 / .4);
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1251
1361
|
.border-\[\#393939\] {
|
|
1252
1362
|
border-color: #393939;
|
|
1253
1363
|
}
|
|
@@ -1256,6 +1366,10 @@
|
|
|
1256
1366
|
border-color: var(--color-blue-500);
|
|
1257
1367
|
}
|
|
1258
1368
|
|
|
1369
|
+
.border-gray-200 {
|
|
1370
|
+
border-color: var(--color-gray-200);
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1259
1373
|
.border-gray-300 {
|
|
1260
1374
|
border-color: var(--color-gray-300);
|
|
1261
1375
|
}
|
|
@@ -1292,6 +1406,16 @@
|
|
|
1292
1406
|
border-color: var(--color-red-500);
|
|
1293
1407
|
}
|
|
1294
1408
|
|
|
1409
|
+
.border-red-500\/20 {
|
|
1410
|
+
border-color: #fb2c3633;
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1414
|
+
.border-red-500\/20 {
|
|
1415
|
+
border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
|
|
1416
|
+
}
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1295
1419
|
.border-transparent {
|
|
1296
1420
|
border-color: #0000;
|
|
1297
1421
|
}
|
|
@@ -1358,6 +1482,10 @@
|
|
|
1358
1482
|
background-color: #111;
|
|
1359
1483
|
}
|
|
1360
1484
|
|
|
1485
|
+
.bg-\[\#222\] {
|
|
1486
|
+
background-color: #222;
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1361
1489
|
.bg-\[\#F3F4F6\] {
|
|
1362
1490
|
background-color: #f3f4f6;
|
|
1363
1491
|
}
|
|
@@ -1366,10 +1494,24 @@
|
|
|
1366
1494
|
background-color: #e4e6eb;
|
|
1367
1495
|
}
|
|
1368
1496
|
|
|
1497
|
+
.bg-amber-500 {
|
|
1498
|
+
background-color: var(--color-amber-500);
|
|
1499
|
+
}
|
|
1500
|
+
|
|
1369
1501
|
.bg-black {
|
|
1370
1502
|
background-color: var(--color-black);
|
|
1371
1503
|
}
|
|
1372
1504
|
|
|
1505
|
+
.bg-black\/20 {
|
|
1506
|
+
background-color: #0003;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1510
|
+
.bg-black\/20 {
|
|
1511
|
+
background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
|
|
1512
|
+
}
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1373
1515
|
.bg-black\/40 {
|
|
1374
1516
|
background-color: #0006;
|
|
1375
1517
|
}
|
|
@@ -1390,6 +1532,16 @@
|
|
|
1390
1532
|
}
|
|
1391
1533
|
}
|
|
1392
1534
|
|
|
1535
|
+
.bg-black\/60 {
|
|
1536
|
+
background-color: #0009;
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1540
|
+
.bg-black\/60 {
|
|
1541
|
+
background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
1542
|
+
}
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1393
1545
|
.bg-blue-500 {
|
|
1394
1546
|
background-color: var(--color-blue-500);
|
|
1395
1547
|
}
|
|
@@ -1408,6 +1560,24 @@
|
|
|
1408
1560
|
background-color: var(--color-blue-600);
|
|
1409
1561
|
}
|
|
1410
1562
|
|
|
1563
|
+
.bg-cyan-50 {
|
|
1564
|
+
background-color: var(--color-cyan-50);
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.bg-gray-50 {
|
|
1568
|
+
background-color: var(--color-gray-50);
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
.bg-gray-50\/90 {
|
|
1572
|
+
background-color: #f9fafbe6;
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1576
|
+
.bg-gray-50\/90 {
|
|
1577
|
+
background-color: color-mix(in oklab, var(--color-gray-50) 90%, transparent);
|
|
1578
|
+
}
|
|
1579
|
+
}
|
|
1580
|
+
|
|
1411
1581
|
.bg-gray-100 {
|
|
1412
1582
|
background-color: var(--color-gray-100);
|
|
1413
1583
|
}
|
|
@@ -1426,6 +1596,10 @@
|
|
|
1426
1596
|
}
|
|
1427
1597
|
}
|
|
1428
1598
|
|
|
1599
|
+
.bg-gray-300 {
|
|
1600
|
+
background-color: var(--color-gray-300);
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1429
1603
|
.bg-gray-300\/50 {
|
|
1430
1604
|
background-color: #d1d5dc80;
|
|
1431
1605
|
}
|
|
@@ -1536,6 +1710,24 @@
|
|
|
1536
1710
|
background-color: var(--color-neutral-950);
|
|
1537
1711
|
}
|
|
1538
1712
|
|
|
1713
|
+
.bg-red-500\/10 {
|
|
1714
|
+
background-color: #fb2c361a;
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1718
|
+
.bg-red-500\/10 {
|
|
1719
|
+
background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
|
|
1720
|
+
}
|
|
1721
|
+
}
|
|
1722
|
+
|
|
1723
|
+
.bg-rose-600 {
|
|
1724
|
+
background-color: var(--color-rose-600);
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
.bg-slate-50 {
|
|
1728
|
+
background-color: var(--color-slate-50);
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1539
1731
|
.bg-transparent {
|
|
1540
1732
|
background-color: #0000;
|
|
1541
1733
|
}
|
|
@@ -1544,6 +1736,16 @@
|
|
|
1544
1736
|
background-color: var(--color-white);
|
|
1545
1737
|
}
|
|
1546
1738
|
|
|
1739
|
+
.bg-white\/10 {
|
|
1740
|
+
background-color: #ffffff1a;
|
|
1741
|
+
}
|
|
1742
|
+
|
|
1743
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1744
|
+
.bg-white\/10 {
|
|
1745
|
+
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
|
1746
|
+
}
|
|
1747
|
+
}
|
|
1748
|
+
|
|
1547
1749
|
.bg-white\/20 {
|
|
1548
1750
|
background-color: #fff3;
|
|
1549
1751
|
}
|
|
@@ -1574,6 +1776,11 @@
|
|
|
1574
1776
|
}
|
|
1575
1777
|
}
|
|
1576
1778
|
|
|
1779
|
+
.bg-gradient-to-b {
|
|
1780
|
+
--tw-gradient-position: to bottom in oklab;
|
|
1781
|
+
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
1782
|
+
}
|
|
1783
|
+
|
|
1577
1784
|
.bg-gradient-to-r {
|
|
1578
1785
|
--tw-gradient-position: to right in oklab;
|
|
1579
1786
|
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
@@ -1584,11 +1791,21 @@
|
|
|
1584
1791
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
1585
1792
|
}
|
|
1586
1793
|
|
|
1794
|
+
.from-slate-50 {
|
|
1795
|
+
--tw-gradient-from: var(--color-slate-50);
|
|
1796
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
1797
|
+
}
|
|
1798
|
+
|
|
1587
1799
|
.to-\[\#03945a\] {
|
|
1588
1800
|
--tw-gradient-to: #03945a;
|
|
1589
1801
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
1590
1802
|
}
|
|
1591
1803
|
|
|
1804
|
+
.to-slate-100 {
|
|
1805
|
+
--tw-gradient-to: var(--color-slate-100);
|
|
1806
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1592
1809
|
.object-contain {
|
|
1593
1810
|
object-fit: contain;
|
|
1594
1811
|
}
|
|
@@ -1597,6 +1814,10 @@
|
|
|
1597
1814
|
object-fit: cover;
|
|
1598
1815
|
}
|
|
1599
1816
|
|
|
1817
|
+
.p-0\.5 {
|
|
1818
|
+
padding: calc(var(--spacing) * .5);
|
|
1819
|
+
}
|
|
1820
|
+
|
|
1600
1821
|
.p-1 {
|
|
1601
1822
|
padding: calc(var(--spacing) * 1);
|
|
1602
1823
|
}
|
|
@@ -1625,6 +1846,10 @@
|
|
|
1625
1846
|
padding: calc(var(--spacing) * 6);
|
|
1626
1847
|
}
|
|
1627
1848
|
|
|
1849
|
+
.p-8 {
|
|
1850
|
+
padding: calc(var(--spacing) * 8);
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1628
1853
|
.px-1 {
|
|
1629
1854
|
padding-inline: calc(var(--spacing) * 1);
|
|
1630
1855
|
}
|
|
@@ -1641,6 +1866,10 @@
|
|
|
1641
1866
|
padding-inline: calc(var(--spacing) * 3);
|
|
1642
1867
|
}
|
|
1643
1868
|
|
|
1869
|
+
.px-3\.5 {
|
|
1870
|
+
padding-inline: calc(var(--spacing) * 3.5);
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1644
1873
|
.px-4 {
|
|
1645
1874
|
padding-inline: calc(var(--spacing) * 4);
|
|
1646
1875
|
}
|
|
@@ -1780,6 +2009,14 @@
|
|
|
1780
2009
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
1781
2010
|
}
|
|
1782
2011
|
|
|
2012
|
+
.text-\[8px\] {
|
|
2013
|
+
font-size: 8px;
|
|
2014
|
+
}
|
|
2015
|
+
|
|
2016
|
+
.text-\[9px\] {
|
|
2017
|
+
font-size: 9px;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
1783
2020
|
.text-\[10px\] {
|
|
1784
2021
|
font-size: 10px;
|
|
1785
2022
|
}
|
|
@@ -1852,6 +2089,10 @@
|
|
|
1852
2089
|
color: var(--color-blue-400);
|
|
1853
2090
|
}
|
|
1854
2091
|
|
|
2092
|
+
.text-cyan-600 {
|
|
2093
|
+
color: var(--color-cyan-600);
|
|
2094
|
+
}
|
|
2095
|
+
|
|
1855
2096
|
.text-gray-200 {
|
|
1856
2097
|
color: var(--color-gray-200);
|
|
1857
2098
|
}
|
|
@@ -1872,10 +2113,22 @@
|
|
|
1872
2113
|
color: var(--color-gray-600);
|
|
1873
2114
|
}
|
|
1874
2115
|
|
|
2116
|
+
.text-gray-700 {
|
|
2117
|
+
color: var(--color-gray-700);
|
|
2118
|
+
}
|
|
2119
|
+
|
|
1875
2120
|
.text-gray-800 {
|
|
1876
2121
|
color: var(--color-gray-800);
|
|
1877
2122
|
}
|
|
1878
2123
|
|
|
2124
|
+
.text-gray-900 {
|
|
2125
|
+
color: var(--color-gray-900);
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
.text-neutral-100 {
|
|
2129
|
+
color: var(--color-neutral-100);
|
|
2130
|
+
}
|
|
2131
|
+
|
|
1879
2132
|
.text-neutral-200 {
|
|
1880
2133
|
color: var(--color-neutral-200);
|
|
1881
2134
|
}
|
|
@@ -1884,6 +2137,10 @@
|
|
|
1884
2137
|
color: var(--color-neutral-300);
|
|
1885
2138
|
}
|
|
1886
2139
|
|
|
2140
|
+
.text-neutral-400 {
|
|
2141
|
+
color: var(--color-neutral-400);
|
|
2142
|
+
}
|
|
2143
|
+
|
|
1887
2144
|
.text-neutral-800 {
|
|
1888
2145
|
color: var(--color-neutral-800);
|
|
1889
2146
|
}
|
|
@@ -1970,6 +2227,10 @@
|
|
|
1970
2227
|
opacity: 1;
|
|
1971
2228
|
}
|
|
1972
2229
|
|
|
2230
|
+
.mix-blend-overlay {
|
|
2231
|
+
mix-blend-mode: overlay;
|
|
2232
|
+
}
|
|
2233
|
+
|
|
1973
2234
|
.shadow {
|
|
1974
2235
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
|
|
1975
2236
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -2059,6 +2320,11 @@
|
|
|
2059
2320
|
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
|
|
2060
2321
|
}
|
|
2061
2322
|
|
|
2323
|
+
.blur-xl {
|
|
2324
|
+
--tw-blur: blur(var(--blur-xl));
|
|
2325
|
+
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
|
|
2326
|
+
}
|
|
2327
|
+
|
|
2062
2328
|
.grayscale {
|
|
2063
2329
|
--tw-grayscale: grayscale(100%);
|
|
2064
2330
|
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
|
|
@@ -2084,6 +2350,12 @@
|
|
|
2084
2350
|
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
|
|
2085
2351
|
}
|
|
2086
2352
|
|
|
2353
|
+
.backdrop-blur-sm {
|
|
2354
|
+
--tw-backdrop-blur: blur(var(--blur-sm));
|
|
2355
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
|
|
2356
|
+
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2087
2359
|
.backdrop-blur-xl {
|
|
2088
2360
|
--tw-backdrop-blur: blur(var(--blur-xl));
|
|
2089
2361
|
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
|
|
@@ -2140,6 +2412,10 @@
|
|
|
2140
2412
|
transition-timing-function: var(--ease-in-out);
|
|
2141
2413
|
}
|
|
2142
2414
|
|
|
2415
|
+
.will-change-transform {
|
|
2416
|
+
will-change: transform;
|
|
2417
|
+
}
|
|
2418
|
+
|
|
2143
2419
|
.outline-none {
|
|
2144
2420
|
--tw-outline-style: none;
|
|
2145
2421
|
outline-style: none;
|
|
@@ -2150,6 +2426,10 @@
|
|
|
2150
2426
|
user-select: none;
|
|
2151
2427
|
}
|
|
2152
2428
|
|
|
2429
|
+
.\[perspective\:1200px\] {
|
|
2430
|
+
perspective: 1200px;
|
|
2431
|
+
}
|
|
2432
|
+
|
|
2153
2433
|
@media (hover: hover) {
|
|
2154
2434
|
.group-hover\:scale-105:is(:where(.group):hover *) {
|
|
2155
2435
|
--tw-scale-x: 105%;
|
|
@@ -2158,10 +2438,6 @@
|
|
|
2158
2438
|
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
2159
2439
|
}
|
|
2160
2440
|
|
|
2161
|
-
.group-hover\:border-gray-400:is(:where(.group):hover *) {
|
|
2162
|
-
border-color: var(--color-gray-400);
|
|
2163
|
-
}
|
|
2164
|
-
|
|
2165
2441
|
.group-hover\:text-white:is(:where(.group):hover *) {
|
|
2166
2442
|
color: var(--color-white);
|
|
2167
2443
|
}
|
|
@@ -2189,6 +2465,13 @@
|
|
|
2189
2465
|
}
|
|
2190
2466
|
|
|
2191
2467
|
@media (hover: hover) {
|
|
2468
|
+
.hover\:scale-110:hover {
|
|
2469
|
+
--tw-scale-x: 110%;
|
|
2470
|
+
--tw-scale-y: 110%;
|
|
2471
|
+
--tw-scale-z: 110%;
|
|
2472
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
2473
|
+
}
|
|
2474
|
+
|
|
2192
2475
|
.hover\:rounded-sm:hover {
|
|
2193
2476
|
border-radius: var(--radius-sm);
|
|
2194
2477
|
}
|
|
@@ -2213,6 +2496,10 @@
|
|
|
2213
2496
|
background-color: #8f99a826;
|
|
2214
2497
|
}
|
|
2215
2498
|
|
|
2499
|
+
.hover\:bg-\[\#333\]:hover {
|
|
2500
|
+
background-color: #333;
|
|
2501
|
+
}
|
|
2502
|
+
|
|
2216
2503
|
.hover\:bg-\[\#03945a\]:hover {
|
|
2217
2504
|
background-color: #03945a;
|
|
2218
2505
|
}
|
|
@@ -2225,6 +2512,10 @@
|
|
|
2225
2512
|
background-color: var(--color-gray-100);
|
|
2226
2513
|
}
|
|
2227
2514
|
|
|
2515
|
+
.hover\:bg-gray-200:hover {
|
|
2516
|
+
background-color: var(--color-gray-200);
|
|
2517
|
+
}
|
|
2518
|
+
|
|
2228
2519
|
.hover\:bg-gray-700:hover {
|
|
2229
2520
|
background-color: var(--color-gray-700);
|
|
2230
2521
|
}
|
|
@@ -2245,6 +2536,16 @@
|
|
|
2245
2536
|
background-color: var(--color-neutral-800);
|
|
2246
2537
|
}
|
|
2247
2538
|
|
|
2539
|
+
.hover\:bg-white\/15:hover {
|
|
2540
|
+
background-color: #ffffff26;
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2544
|
+
.hover\:bg-white\/15:hover {
|
|
2545
|
+
background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
|
|
2546
|
+
}
|
|
2547
|
+
}
|
|
2548
|
+
|
|
2248
2549
|
.hover\:text-\[\#02bc71\]:hover {
|
|
2249
2550
|
color: #02bc71;
|
|
2250
2551
|
}
|
|
@@ -2287,14 +2588,14 @@
|
|
|
2287
2588
|
}
|
|
2288
2589
|
}
|
|
2289
2590
|
|
|
2290
|
-
.focus\:border-blue-300:focus {
|
|
2291
|
-
border-color: var(--color-blue-300);
|
|
2292
|
-
}
|
|
2293
|
-
|
|
2294
2591
|
.focus\:border-blue-500:focus {
|
|
2295
2592
|
border-color: var(--color-blue-500);
|
|
2296
2593
|
}
|
|
2297
2594
|
|
|
2595
|
+
.focus\:border-cyan-500:focus {
|
|
2596
|
+
border-color: var(--color-cyan-500);
|
|
2597
|
+
}
|
|
2598
|
+
|
|
2298
2599
|
.focus\:border-red-500:focus {
|
|
2299
2600
|
border-color: var(--color-red-500);
|
|
2300
2601
|
}
|
|
@@ -2309,14 +2610,14 @@
|
|
|
2309
2610
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2310
2611
|
}
|
|
2311
2612
|
|
|
2312
|
-
.focus\:ring-blue-300:focus {
|
|
2313
|
-
--tw-ring-color: var(--color-blue-300);
|
|
2314
|
-
}
|
|
2315
|
-
|
|
2316
2613
|
.focus\:ring-blue-500:focus {
|
|
2317
2614
|
--tw-ring-color: var(--color-blue-500);
|
|
2318
2615
|
}
|
|
2319
2616
|
|
|
2617
|
+
.focus\:ring-cyan-500:focus {
|
|
2618
|
+
--tw-ring-color: var(--color-cyan-500);
|
|
2619
|
+
}
|
|
2620
|
+
|
|
2320
2621
|
.focus\:ring-red-500:focus {
|
|
2321
2622
|
--tw-ring-color: var(--color-red-500);
|
|
2322
2623
|
}
|
|
@@ -2344,6 +2645,10 @@
|
|
|
2344
2645
|
scale: .98;
|
|
2345
2646
|
}
|
|
2346
2647
|
|
|
2648
|
+
.active\:cursor-grabbing:active {
|
|
2649
|
+
cursor: grabbing;
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2347
2652
|
.disabled\:cursor-not-allowed:disabled {
|
|
2348
2653
|
cursor: not-allowed;
|
|
2349
2654
|
}
|
|
@@ -3028,4 +3333,17 @@ div[class*="driver-stage"], div[id*="driver-stage"], .driver-active-element, #dr
|
|
|
3028
3333
|
transform: rotate(360deg);
|
|
3029
3334
|
}
|
|
3030
3335
|
}
|
|
3336
|
+
|
|
3337
|
+
@keyframes ping {
|
|
3338
|
+
75%, 100% {
|
|
3339
|
+
opacity: 0;
|
|
3340
|
+
transform: scale(2);
|
|
3341
|
+
}
|
|
3342
|
+
}
|
|
3343
|
+
|
|
3344
|
+
@keyframes pulse {
|
|
3345
|
+
50% {
|
|
3346
|
+
opacity: .5;
|
|
3347
|
+
}
|
|
3348
|
+
}
|
|
3031
3349
|
.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
|