phoenix_duskmoon 6.1.3 → 6.3.2
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/CHANGELOG.md +195 -0
- package/assets/css/neumorphic/button.css +270 -0
- package/assets/css/neumorphic/checkbox.css +80 -0
- package/assets/css/neumorphic/radio.css +56 -0
- package/assets/css/neumorphic/range.css +87 -0
- package/assets/css/neumorphic/table.css +30 -0
- package/assets/css/neumorphic.css +121 -0
- package/assets/css/phoenix_duskmoon.css +14 -1
- package/package.json +4 -3
- package/priv/static/phoenix_duskmoon.css +913 -442
- package/priv/static/phoenix_duskmoon.js +38 -36
- package/assets/tailwind.config.js +0 -28
|
@@ -694,6 +694,19 @@
|
|
|
694
694
|
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
|
|
695
695
|
}
|
|
696
696
|
}
|
|
697
|
+
.dropdown:focus-within {
|
|
698
|
+
.menu-dropdown-toggle:after {
|
|
699
|
+
rotate: 45deg;
|
|
700
|
+
translate: 0 1px;
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
.dropdown-content {
|
|
704
|
+
margin-top: calc(0.25rem * 2);
|
|
705
|
+
padding: calc(0.25rem * 2);
|
|
706
|
+
&:before {
|
|
707
|
+
display: none;
|
|
708
|
+
}
|
|
709
|
+
}
|
|
697
710
|
}
|
|
698
711
|
.btn {
|
|
699
712
|
display: inline-flex;
|
|
@@ -738,8 +751,10 @@
|
|
|
738
751
|
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
|
|
739
752
|
0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
|
|
740
753
|
--btn-noise: var(--fx-noise);
|
|
741
|
-
|
|
742
|
-
|
|
754
|
+
@media (hover: hover) {
|
|
755
|
+
&:hover {
|
|
756
|
+
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
|
|
757
|
+
}
|
|
743
758
|
}
|
|
744
759
|
&.btn-active {
|
|
745
760
|
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
|
|
@@ -765,11 +780,13 @@
|
|
|
765
780
|
--btn-border: #0000;
|
|
766
781
|
--btn-noise: none;
|
|
767
782
|
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
783
|
+
@media (hover: hover) {
|
|
784
|
+
&:hover {
|
|
785
|
+
pointer-events: none;
|
|
786
|
+
background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
|
|
787
|
+
--btn-border: #0000;
|
|
788
|
+
--btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
|
|
789
|
+
}
|
|
773
790
|
}
|
|
774
791
|
}
|
|
775
792
|
&:is(input[type="checkbox"], input[type="radio"]) {
|
|
@@ -778,66 +795,11 @@
|
|
|
778
795
|
content: attr(aria-label);
|
|
779
796
|
}
|
|
780
797
|
&:checked {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
--btn-
|
|
784
|
-
--btn-
|
|
785
|
-
|
|
786
|
-
outline-color: var(--color-primary);
|
|
787
|
-
}
|
|
788
|
-
&:hover {
|
|
789
|
-
--btn-bg: color-mix(in oklab, var(--color-primary) 90%, #000);
|
|
790
|
-
--btn-border: color-mix(in oklab, var(--color-primary) 90%, #000);
|
|
791
|
-
}
|
|
792
|
-
}
|
|
793
|
-
}
|
|
794
|
-
}
|
|
795
|
-
.modal {
|
|
796
|
-
pointer-events: none;
|
|
797
|
-
visibility: hidden;
|
|
798
|
-
position: fixed;
|
|
799
|
-
inset: calc(0.25rem * 0);
|
|
800
|
-
margin: calc(0.25rem * 0);
|
|
801
|
-
display: grid;
|
|
802
|
-
height: 100%;
|
|
803
|
-
max-height: none;
|
|
804
|
-
width: 100%;
|
|
805
|
-
max-width: none;
|
|
806
|
-
align-items: center;
|
|
807
|
-
justify-items: center;
|
|
808
|
-
background-color: transparent;
|
|
809
|
-
padding: calc(0.25rem * 0);
|
|
810
|
-
color: inherit;
|
|
811
|
-
overflow-x: hidden;
|
|
812
|
-
transition: transform 0.3s ease-out, visibility 0s allow-discrete, opacity 0.1s ease-out;
|
|
813
|
-
overflow-y: hidden;
|
|
814
|
-
overscroll-behavior: contain;
|
|
815
|
-
z-index: 999;
|
|
816
|
-
&:not(dialog:not(.modal-open)), &::backdrop {
|
|
817
|
-
opacity: 100%;
|
|
818
|
-
@starting-style {
|
|
819
|
-
visibility: hidden;
|
|
820
|
-
}
|
|
821
|
-
@starting-style {
|
|
822
|
-
opacity: 0%;
|
|
823
|
-
}
|
|
824
|
-
background-color: oklch(0% 0 0/ 0.4);
|
|
825
|
-
transition: display 0.3s ease-out allow-discrete, opacity 0.3s ease-out, visibility 0.3s ease-out allow-discrete;
|
|
826
|
-
}
|
|
827
|
-
&.modal-open, &[open], &:target {
|
|
828
|
-
pointer-events: auto;
|
|
829
|
-
visibility: visible;
|
|
830
|
-
opacity: 100%;
|
|
831
|
-
@starting-style {
|
|
832
|
-
visibility: hidden;
|
|
833
|
-
}
|
|
834
|
-
@starting-style {
|
|
835
|
-
opacity: 0%;
|
|
836
|
-
}
|
|
837
|
-
.modal-box {
|
|
838
|
-
translate: 0 0;
|
|
839
|
-
scale: 1;
|
|
840
|
-
opacity: 1;
|
|
798
|
+
outline-width: 2px;
|
|
799
|
+
outline-style: solid;
|
|
800
|
+
--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
|
|
801
|
+
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
|
|
802
|
+
isolation: isolate;
|
|
841
803
|
}
|
|
842
804
|
}
|
|
843
805
|
}
|
|
@@ -878,13 +840,23 @@
|
|
|
878
840
|
content: attr(aria-label);
|
|
879
841
|
}
|
|
880
842
|
}
|
|
881
|
-
&:
|
|
843
|
+
&:is(label) {
|
|
844
|
+
position: relative;
|
|
845
|
+
input {
|
|
846
|
+
position: absolute;
|
|
847
|
+
inset: calc(0.25rem * 0);
|
|
848
|
+
cursor: pointer;
|
|
849
|
+
appearance: none;
|
|
850
|
+
opacity: 0%;
|
|
851
|
+
}
|
|
852
|
+
}
|
|
853
|
+
&:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) {
|
|
882
854
|
& + .tab-content {
|
|
883
855
|
display: block;
|
|
884
856
|
height: 100%;
|
|
885
857
|
}
|
|
886
858
|
}
|
|
887
|
-
&:not(:checked, :hover, .tab-active, [aria-selected="true"]) {
|
|
859
|
+
&:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) {
|
|
888
860
|
color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
|
|
889
861
|
}
|
|
890
862
|
&:not(input):empty {
|
|
@@ -898,7 +870,7 @@
|
|
|
898
870
|
outline-offset: 2px;
|
|
899
871
|
}
|
|
900
872
|
}
|
|
901
|
-
&:focus-visible {
|
|
873
|
+
&:focus-visible, &:is(label:has(:checked:focus-visible)) {
|
|
902
874
|
outline: 2px solid currentColor;
|
|
903
875
|
outline-offset: -5px;
|
|
904
876
|
}
|
|
@@ -907,6 +879,55 @@
|
|
|
907
879
|
opacity: 40%;
|
|
908
880
|
}
|
|
909
881
|
}
|
|
882
|
+
.modal {
|
|
883
|
+
pointer-events: none;
|
|
884
|
+
visibility: hidden;
|
|
885
|
+
position: fixed;
|
|
886
|
+
inset: calc(0.25rem * 0);
|
|
887
|
+
margin: calc(0.25rem * 0);
|
|
888
|
+
display: grid;
|
|
889
|
+
height: 100%;
|
|
890
|
+
max-height: none;
|
|
891
|
+
width: 100%;
|
|
892
|
+
max-width: none;
|
|
893
|
+
align-items: center;
|
|
894
|
+
justify-items: center;
|
|
895
|
+
background-color: transparent;
|
|
896
|
+
padding: calc(0.25rem * 0);
|
|
897
|
+
color: inherit;
|
|
898
|
+
overflow-x: hidden;
|
|
899
|
+
transition: transform 0.3s ease-out, visibility 0.3s allow-discrete, opacity 0.1s ease-out;
|
|
900
|
+
overflow-y: hidden;
|
|
901
|
+
overscroll-behavior: contain;
|
|
902
|
+
z-index: 999;
|
|
903
|
+
&:not(dialog:not(.modal-open)), &::backdrop {
|
|
904
|
+
opacity: 100%;
|
|
905
|
+
@starting-style {
|
|
906
|
+
visibility: hidden;
|
|
907
|
+
}
|
|
908
|
+
@starting-style {
|
|
909
|
+
opacity: 0%;
|
|
910
|
+
}
|
|
911
|
+
background-color: oklch(0% 0 0/ 0.4);
|
|
912
|
+
transition: display 0.3s ease-out allow-discrete, opacity 0.3s ease-out, visibility 0.3s ease-out allow-discrete;
|
|
913
|
+
}
|
|
914
|
+
&.modal-open, &[open], &:target {
|
|
915
|
+
pointer-events: auto;
|
|
916
|
+
visibility: visible;
|
|
917
|
+
opacity: 100%;
|
|
918
|
+
@starting-style {
|
|
919
|
+
visibility: hidden;
|
|
920
|
+
}
|
|
921
|
+
@starting-style {
|
|
922
|
+
opacity: 0%;
|
|
923
|
+
}
|
|
924
|
+
.modal-box {
|
|
925
|
+
translate: 0 0;
|
|
926
|
+
scale: 1;
|
|
927
|
+
opacity: 1;
|
|
928
|
+
}
|
|
929
|
+
}
|
|
930
|
+
}
|
|
910
931
|
.dropdown {
|
|
911
932
|
position: relative;
|
|
912
933
|
display: inline-block;
|
|
@@ -999,9 +1020,9 @@
|
|
|
999
1020
|
pointer-events: none;
|
|
1000
1021
|
display: inline-block;
|
|
1001
1022
|
aspect-ratio: 1 / 1;
|
|
1002
|
-
width: calc(0.25rem * 6);
|
|
1003
1023
|
background-color: currentColor;
|
|
1004
1024
|
vertical-align: middle;
|
|
1025
|
+
width: calc(var(--size-selector, 0.25rem) * 6);
|
|
1005
1026
|
mask-size: 100%;
|
|
1006
1027
|
mask-repeat: no-repeat;
|
|
1007
1028
|
mask-position: center;
|
|
@@ -1041,11 +1062,11 @@
|
|
|
1041
1062
|
select {
|
|
1042
1063
|
margin-inline-start: calc(0.25rem * -4);
|
|
1043
1064
|
margin-inline-end: calc(0.25rem * -7);
|
|
1044
|
-
height: 100%;
|
|
1045
1065
|
width: calc(100% + 2.75rem);
|
|
1046
1066
|
appearance: none;
|
|
1047
1067
|
padding-inline-start: calc(0.25rem * 4);
|
|
1048
1068
|
padding-inline-end: calc(0.25rem * 7);
|
|
1069
|
+
height: calc(100% - 2px);
|
|
1049
1070
|
background: inherit;
|
|
1050
1071
|
border-radius: inherit;
|
|
1051
1072
|
border-style: none;
|
|
@@ -1089,7 +1110,10 @@
|
|
|
1089
1110
|
webkit-user-select: none;
|
|
1090
1111
|
user-select: none;
|
|
1091
1112
|
grid-template-columns: 0fr 1fr 1fr;
|
|
1092
|
-
|
|
1113
|
+
--radius-selector-max: calc(
|
|
1114
|
+
var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
|
|
1115
|
+
);
|
|
1116
|
+
border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
|
|
1093
1117
|
padding: var(--toggle-p);
|
|
1094
1118
|
box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
|
|
1095
1119
|
transition: color 0.3s, grid-template-columns 0.2s;
|
|
@@ -1192,6 +1216,82 @@
|
|
|
1192
1216
|
}
|
|
1193
1217
|
}
|
|
1194
1218
|
}
|
|
1219
|
+
.input {
|
|
1220
|
+
cursor: text;
|
|
1221
|
+
border: var(--border) solid #0000;
|
|
1222
|
+
position: relative;
|
|
1223
|
+
display: inline-flex;
|
|
1224
|
+
flex-shrink: 1;
|
|
1225
|
+
appearance: none;
|
|
1226
|
+
align-items: center;
|
|
1227
|
+
gap: calc(0.25rem * 2);
|
|
1228
|
+
background-color: var(--color-base-100);
|
|
1229
|
+
padding-inline: calc(0.25rem * 3);
|
|
1230
|
+
vertical-align: middle;
|
|
1231
|
+
white-space: nowrap;
|
|
1232
|
+
width: clamp(3rem, 20rem, 100%);
|
|
1233
|
+
height: var(--size);
|
|
1234
|
+
font-size: 0.875rem;
|
|
1235
|
+
border-start-start-radius: var(--join-ss, var(--radius-field));
|
|
1236
|
+
border-start-end-radius: var(--join-se, var(--radius-field));
|
|
1237
|
+
border-end-start-radius: var(--join-es, var(--radius-field));
|
|
1238
|
+
border-end-end-radius: var(--join-ee, var(--radius-field));
|
|
1239
|
+
border-color: var(--input-color);
|
|
1240
|
+
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
|
|
1241
|
+
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
1242
|
+
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
|
|
1243
|
+
&:where(input) {
|
|
1244
|
+
display: inline-flex;
|
|
1245
|
+
}
|
|
1246
|
+
:where(input) {
|
|
1247
|
+
display: inline-flex;
|
|
1248
|
+
height: 100%;
|
|
1249
|
+
width: 100%;
|
|
1250
|
+
appearance: none;
|
|
1251
|
+
background-color: transparent;
|
|
1252
|
+
border: none;
|
|
1253
|
+
&:focus, &:focus-within {
|
|
1254
|
+
outline-style: none;
|
|
1255
|
+
@media (forced-colors: active) {
|
|
1256
|
+
outline: 2px solid transparent;
|
|
1257
|
+
outline-offset: 2px;
|
|
1258
|
+
}
|
|
1259
|
+
}
|
|
1260
|
+
}
|
|
1261
|
+
&:focus, &:focus-within {
|
|
1262
|
+
--input-color: var(--color-base-content);
|
|
1263
|
+
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
|
|
1264
|
+
outline: 2px solid var(--input-color);
|
|
1265
|
+
outline-offset: 2px;
|
|
1266
|
+
isolation: isolate;
|
|
1267
|
+
}
|
|
1268
|
+
&:has(> input[disabled]), &:is(:disabled, [disabled]) {
|
|
1269
|
+
cursor: not-allowed;
|
|
1270
|
+
border-color: var(--color-base-200);
|
|
1271
|
+
background-color: var(--color-base-200);
|
|
1272
|
+
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
|
|
1273
|
+
&::placeholder {
|
|
1274
|
+
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
|
|
1275
|
+
}
|
|
1276
|
+
box-shadow: none;
|
|
1277
|
+
}
|
|
1278
|
+
&:has(> input[disabled]) > input[disabled] {
|
|
1279
|
+
cursor: not-allowed;
|
|
1280
|
+
}
|
|
1281
|
+
&::-webkit-date-and-time-value {
|
|
1282
|
+
text-align: inherit;
|
|
1283
|
+
}
|
|
1284
|
+
&[type="number"] {
|
|
1285
|
+
&::-webkit-inner-spin-button {
|
|
1286
|
+
margin-block: calc(0.25rem * -3);
|
|
1287
|
+
margin-inline-end: calc(0.25rem * -3);
|
|
1288
|
+
}
|
|
1289
|
+
}
|
|
1290
|
+
&::-webkit-calendar-picker-indicator {
|
|
1291
|
+
position: absolute;
|
|
1292
|
+
inset-inline-end: 0.75em;
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1195
1295
|
.card {
|
|
1196
1296
|
position: relative;
|
|
1197
1297
|
display: flex;
|
|
@@ -1414,7 +1514,10 @@
|
|
|
1414
1514
|
background-color: transparent;
|
|
1415
1515
|
vertical-align: middle;
|
|
1416
1516
|
width: clamp(3rem, 20rem, 100%);
|
|
1417
|
-
|
|
1517
|
+
--radius-selector-max: calc(
|
|
1518
|
+
var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
|
|
1519
|
+
);
|
|
1520
|
+
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
|
|
1418
1521
|
border: none;
|
|
1419
1522
|
height: var(--range-thumb-size);
|
|
1420
1523
|
[dir="rtl"] & {
|
|
@@ -1439,7 +1542,7 @@
|
|
|
1439
1542
|
&::-webkit-slider-thumb {
|
|
1440
1543
|
position: relative;
|
|
1441
1544
|
box-sizing: border-box;
|
|
1442
|
-
border-radius: calc(
|
|
1545
|
+
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
|
|
1443
1546
|
background-color: currentColor;
|
|
1444
1547
|
height: var(--range-thumb-size);
|
|
1445
1548
|
width: var(--range-thumb-size);
|
|
@@ -1463,7 +1566,7 @@
|
|
|
1463
1566
|
&::-moz-range-thumb {
|
|
1464
1567
|
position: relative;
|
|
1465
1568
|
box-sizing: border-box;
|
|
1466
|
-
border-radius: calc(
|
|
1569
|
+
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
|
|
1467
1570
|
background-color: currentColor;
|
|
1468
1571
|
height: var(--range-thumb-size);
|
|
1469
1572
|
width: var(--range-thumb-size);
|
|
@@ -1661,9 +1764,6 @@
|
|
|
1661
1764
|
.top-12 {
|
|
1662
1765
|
top: calc(var(--spacing) * 12);
|
|
1663
1766
|
}
|
|
1664
|
-
.top-14 {
|
|
1665
|
-
top: calc(var(--spacing) * 14);
|
|
1666
|
-
}
|
|
1667
1767
|
.right-0 {
|
|
1668
1768
|
right: calc(var(--spacing) * 0);
|
|
1669
1769
|
}
|
|
@@ -1680,6 +1780,7 @@
|
|
|
1680
1780
|
display: inline-flex;
|
|
1681
1781
|
appearance: none;
|
|
1682
1782
|
align-items: center;
|
|
1783
|
+
background-color: var(--color-base-100);
|
|
1683
1784
|
vertical-align: middle;
|
|
1684
1785
|
webkit-user-select: none;
|
|
1685
1786
|
user-select: none;
|
|
@@ -1752,36 +1853,23 @@
|
|
|
1752
1853
|
}
|
|
1753
1854
|
}
|
|
1754
1855
|
}
|
|
1755
|
-
.
|
|
1756
|
-
cursor: text;
|
|
1856
|
+
.textarea {
|
|
1757
1857
|
border: var(--border) solid #0000;
|
|
1758
|
-
|
|
1858
|
+
min-height: calc(0.25rem * 20);
|
|
1759
1859
|
flex-shrink: 1;
|
|
1760
1860
|
appearance: none;
|
|
1761
|
-
|
|
1762
|
-
gap: calc(0.25rem * 2);
|
|
1861
|
+
border-radius: var(--radius-field);
|
|
1763
1862
|
background-color: var(--color-base-100);
|
|
1764
|
-
padding-
|
|
1863
|
+
padding-block: calc(0.25rem * 2);
|
|
1765
1864
|
vertical-align: middle;
|
|
1766
|
-
white-space: nowrap;
|
|
1767
1865
|
width: clamp(3rem, 20rem, 100%);
|
|
1768
|
-
|
|
1866
|
+
padding-inline-start: 0.75rem;
|
|
1867
|
+
padding-inline-end: 0.75rem;
|
|
1769
1868
|
font-size: 0.875rem;
|
|
1770
|
-
border-start-start-radius: var(--join-ss, var(--radius-field));
|
|
1771
|
-
border-start-end-radius: var(--join-se, var(--radius-field));
|
|
1772
|
-
border-end-start-radius: var(--join-es, var(--radius-field));
|
|
1773
|
-
border-end-end-radius: var(--join-ee, var(--radius-field));
|
|
1774
1869
|
border-color: var(--input-color);
|
|
1775
1870
|
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
|
|
1776
|
-
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
1777
1871
|
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
|
|
1778
|
-
|
|
1779
|
-
display: inline-block;
|
|
1780
|
-
}
|
|
1781
|
-
:where(input) {
|
|
1782
|
-
display: inline-block;
|
|
1783
|
-
height: 100%;
|
|
1784
|
-
width: 100%;
|
|
1872
|
+
textarea {
|
|
1785
1873
|
appearance: none;
|
|
1786
1874
|
background-color: transparent;
|
|
1787
1875
|
border: none;
|
|
@@ -1800,7 +1888,7 @@
|
|
|
1800
1888
|
outline-offset: 2px;
|
|
1801
1889
|
isolation: isolate;
|
|
1802
1890
|
}
|
|
1803
|
-
&:has(>
|
|
1891
|
+
&:has(> textarea[disabled]), &:is(:disabled, [disabled]) {
|
|
1804
1892
|
cursor: not-allowed;
|
|
1805
1893
|
border-color: var(--color-base-200);
|
|
1806
1894
|
background-color: var(--color-base-200);
|
|
@@ -1810,86 +1898,25 @@
|
|
|
1810
1898
|
}
|
|
1811
1899
|
box-shadow: none;
|
|
1812
1900
|
}
|
|
1813
|
-
&:has(>
|
|
1901
|
+
&:has(> textarea[disabled]) > textarea[disabled] {
|
|
1814
1902
|
cursor: not-allowed;
|
|
1815
1903
|
}
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
border: var(--border) solid #0000;
|
|
1828
|
-
min-height: calc(0.25rem * 20);
|
|
1829
|
-
flex-shrink: 1;
|
|
1830
|
-
appearance: none;
|
|
1831
|
-
border-radius: var(--radius-field);
|
|
1832
|
-
background-color: var(--color-base-100);
|
|
1833
|
-
padding-block: calc(0.25rem * 2);
|
|
1834
|
-
vertical-align: middle;
|
|
1835
|
-
width: clamp(3rem, 20rem, 100%);
|
|
1836
|
-
padding-inline-start: 0.75rem;
|
|
1837
|
-
padding-inline-end: 0.75rem;
|
|
1838
|
-
font-size: 0.875rem;
|
|
1839
|
-
border-color: var(--input-color);
|
|
1840
|
-
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
|
|
1841
|
-
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
|
|
1842
|
-
textarea {
|
|
1843
|
-
appearance: none;
|
|
1844
|
-
background-color: transparent;
|
|
1845
|
-
border: none;
|
|
1846
|
-
&:focus, &:focus-within {
|
|
1847
|
-
outline-style: none;
|
|
1848
|
-
@media (forced-colors: active) {
|
|
1849
|
-
outline: 2px solid transparent;
|
|
1850
|
-
outline-offset: 2px;
|
|
1851
|
-
}
|
|
1852
|
-
}
|
|
1853
|
-
}
|
|
1854
|
-
&:focus, &:focus-within {
|
|
1855
|
-
--input-color: var(--color-base-content);
|
|
1856
|
-
box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
|
|
1857
|
-
outline: 2px solid var(--input-color);
|
|
1858
|
-
outline-offset: 2px;
|
|
1859
|
-
isolation: isolate;
|
|
1860
|
-
}
|
|
1861
|
-
&:has(> textarea[disabled]), &:is(:disabled, [disabled]) {
|
|
1862
|
-
cursor: not-allowed;
|
|
1863
|
-
border-color: var(--color-base-200);
|
|
1864
|
-
background-color: var(--color-base-200);
|
|
1865
|
-
color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
|
|
1866
|
-
&::placeholder {
|
|
1867
|
-
color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
|
|
1868
|
-
}
|
|
1869
|
-
box-shadow: none;
|
|
1870
|
-
}
|
|
1871
|
-
&:has(> textarea[disabled]) > textarea[disabled] {
|
|
1872
|
-
cursor: not-allowed;
|
|
1873
|
-
}
|
|
1874
|
-
}
|
|
1875
|
-
.modal-backdrop {
|
|
1876
|
-
grid-column-start: 1;
|
|
1877
|
-
grid-row-start: 1;
|
|
1878
|
-
display: grid;
|
|
1879
|
-
align-self: stretch;
|
|
1880
|
-
justify-self: stretch;
|
|
1881
|
-
color: transparent;
|
|
1882
|
-
z-index: -1;
|
|
1883
|
-
button {
|
|
1884
|
-
cursor: pointer;
|
|
1904
|
+
}
|
|
1905
|
+
.modal-backdrop {
|
|
1906
|
+
grid-column-start: 1;
|
|
1907
|
+
grid-row-start: 1;
|
|
1908
|
+
display: grid;
|
|
1909
|
+
align-self: stretch;
|
|
1910
|
+
justify-self: stretch;
|
|
1911
|
+
color: transparent;
|
|
1912
|
+
z-index: -1;
|
|
1913
|
+
button {
|
|
1914
|
+
cursor: pointer;
|
|
1885
1915
|
}
|
|
1886
1916
|
}
|
|
1887
1917
|
.z-1 {
|
|
1888
1918
|
z-index: 1;
|
|
1889
1919
|
}
|
|
1890
|
-
.z-50 {
|
|
1891
|
-
z-index: 50;
|
|
1892
|
-
}
|
|
1893
1920
|
.z-\[1000\] {
|
|
1894
1921
|
z-index: 1000;
|
|
1895
1922
|
}
|
|
@@ -1930,6 +1957,33 @@
|
|
|
1930
1957
|
max-width: 96rem;
|
|
1931
1958
|
}
|
|
1932
1959
|
}
|
|
1960
|
+
.divider {
|
|
1961
|
+
display: flex;
|
|
1962
|
+
height: calc(0.25rem * 4);
|
|
1963
|
+
flex-direction: row;
|
|
1964
|
+
align-items: center;
|
|
1965
|
+
align-self: stretch;
|
|
1966
|
+
white-space: nowrap;
|
|
1967
|
+
margin: var(--divider-m, 1rem 0);
|
|
1968
|
+
&:before, &:after {
|
|
1969
|
+
content: "";
|
|
1970
|
+
height: calc(0.25rem * 0.5);
|
|
1971
|
+
width: 100%;
|
|
1972
|
+
flex-grow: 1;
|
|
1973
|
+
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
|
|
1974
|
+
}
|
|
1975
|
+
@media print {
|
|
1976
|
+
&:before, &:after {
|
|
1977
|
+
border: 0.5px solid;
|
|
1978
|
+
}
|
|
1979
|
+
}
|
|
1980
|
+
&:not(:empty) {
|
|
1981
|
+
gap: calc(0.25rem * 4);
|
|
1982
|
+
}
|
|
1983
|
+
}
|
|
1984
|
+
.m-0 {
|
|
1985
|
+
margin: calc(var(--spacing) * 0);
|
|
1986
|
+
}
|
|
1933
1987
|
.filter {
|
|
1934
1988
|
display: flex;
|
|
1935
1989
|
flex-wrap: wrap;
|
|
@@ -1991,31 +2045,21 @@
|
|
|
1991
2045
|
.my-2 {
|
|
1992
2046
|
margin-block: calc(var(--spacing) * 2);
|
|
1993
2047
|
}
|
|
1994
|
-
.
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
margin-inline-start: calc(0.25rem * -3);
|
|
2003
|
-
margin-inline-end: calc(0.25rem * 3);
|
|
2004
|
-
border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
|
|
2005
|
-
}
|
|
2006
|
-
&:last-child {
|
|
2007
|
-
margin-inline-start: calc(0.25rem * 3);
|
|
2008
|
-
margin-inline-end: calc(0.25rem * -3);
|
|
2009
|
-
border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
|
|
2010
|
-
}
|
|
2048
|
+
.label {
|
|
2049
|
+
display: inline-flex;
|
|
2050
|
+
align-items: center;
|
|
2051
|
+
gap: calc(0.25rem * 1.5);
|
|
2052
|
+
white-space: nowrap;
|
|
2053
|
+
color: color-mix(in oklab, currentColor 60%, transparent);
|
|
2054
|
+
&:has(input) {
|
|
2055
|
+
cursor: pointer;
|
|
2011
2056
|
}
|
|
2012
|
-
|
|
2013
|
-
.select {
|
|
2014
|
-
.label {
|
|
2057
|
+
&:is(.input > *, .select > *) {
|
|
2015
2058
|
display: flex;
|
|
2016
2059
|
height: calc(100% - 0.5rem);
|
|
2017
2060
|
align-items: center;
|
|
2018
2061
|
padding-inline: calc(0.25rem * 3);
|
|
2062
|
+
white-space: nowrap;
|
|
2019
2063
|
font-size: inherit;
|
|
2020
2064
|
&:first-child {
|
|
2021
2065
|
margin-inline-start: calc(0.25rem * -3);
|
|
@@ -2048,7 +2092,7 @@
|
|
|
2048
2092
|
max-width: 100%;
|
|
2049
2093
|
overflow-x: auto;
|
|
2050
2094
|
padding-block: calc(0.25rem * 2);
|
|
2051
|
-
> ul, > ol {
|
|
2095
|
+
> menu, > ul, > ol {
|
|
2052
2096
|
display: flex;
|
|
2053
2097
|
min-height: min-content;
|
|
2054
2098
|
align-items: center;
|
|
@@ -2199,7 +2243,7 @@
|
|
|
2199
2243
|
flex: auto;
|
|
2200
2244
|
flex-direction: column;
|
|
2201
2245
|
gap: calc(0.25rem * 2);
|
|
2202
|
-
padding: var(--card-p,
|
|
2246
|
+
padding: var(--card-p, 1.5rem);
|
|
2203
2247
|
font-size: var(--card-fs, 0.875rem);
|
|
2204
2248
|
:where(p) {
|
|
2205
2249
|
flex-grow: 1;
|
|
@@ -2253,16 +2297,6 @@
|
|
|
2253
2297
|
}
|
|
2254
2298
|
}
|
|
2255
2299
|
}
|
|
2256
|
-
.label {
|
|
2257
|
-
display: inline-flex;
|
|
2258
|
-
align-items: center;
|
|
2259
|
-
gap: calc(0.25rem * 1.5);
|
|
2260
|
-
white-space: nowrap;
|
|
2261
|
-
color: color-mix(in oklab, currentColor 60%, transparent);
|
|
2262
|
-
&:has(input) {
|
|
2263
|
-
cursor: pointer;
|
|
2264
|
-
}
|
|
2265
|
-
}
|
|
2266
2300
|
.card-title {
|
|
2267
2301
|
display: flex;
|
|
2268
2302
|
align-items: center;
|
|
@@ -2270,12 +2304,31 @@
|
|
|
2270
2304
|
font-size: var(--cardtitle-fs, 1.125rem);
|
|
2271
2305
|
font-weight: 600;
|
|
2272
2306
|
}
|
|
2307
|
+
.navbar {
|
|
2308
|
+
display: flex;
|
|
2309
|
+
width: 100%;
|
|
2310
|
+
align-items: center;
|
|
2311
|
+
padding: 0.5rem;
|
|
2312
|
+
min-height: 4rem;
|
|
2313
|
+
}
|
|
2273
2314
|
.card-actions {
|
|
2274
2315
|
display: flex;
|
|
2275
2316
|
flex-wrap: wrap;
|
|
2276
2317
|
align-items: flex-start;
|
|
2277
2318
|
gap: calc(0.25rem * 2);
|
|
2278
2319
|
}
|
|
2320
|
+
.navbar-end {
|
|
2321
|
+
display: inline-flex;
|
|
2322
|
+
align-items: center;
|
|
2323
|
+
width: 50%;
|
|
2324
|
+
justify-content: flex-end;
|
|
2325
|
+
}
|
|
2326
|
+
.navbar-start {
|
|
2327
|
+
display: inline-flex;
|
|
2328
|
+
align-items: center;
|
|
2329
|
+
width: 50%;
|
|
2330
|
+
justify-content: flex-start;
|
|
2331
|
+
}
|
|
2279
2332
|
.tabs {
|
|
2280
2333
|
display: flex;
|
|
2281
2334
|
flex-wrap: wrap;
|
|
@@ -2284,6 +2337,11 @@
|
|
|
2284
2337
|
height: var(--tabs-height);
|
|
2285
2338
|
flex-direction: var(--tabs-direction);
|
|
2286
2339
|
}
|
|
2340
|
+
.navbar-center {
|
|
2341
|
+
display: inline-flex;
|
|
2342
|
+
align-items: center;
|
|
2343
|
+
flex-shrink: 0;
|
|
2344
|
+
}
|
|
2287
2345
|
.block {
|
|
2288
2346
|
display: block;
|
|
2289
2347
|
}
|
|
@@ -2356,6 +2414,9 @@
|
|
|
2356
2414
|
.btn-block {
|
|
2357
2415
|
width: 100%;
|
|
2358
2416
|
}
|
|
2417
|
+
.loading-xs {
|
|
2418
|
+
width: calc(var(--size-selector, 0.25rem) * 4);
|
|
2419
|
+
}
|
|
2359
2420
|
.w-2 {
|
|
2360
2421
|
width: calc(var(--spacing) * 2);
|
|
2361
2422
|
}
|
|
@@ -2392,12 +2453,18 @@
|
|
|
2392
2453
|
.min-w-36 {
|
|
2393
2454
|
min-width: calc(var(--spacing) * 36);
|
|
2394
2455
|
}
|
|
2456
|
+
.min-w-full {
|
|
2457
|
+
min-width: 100%;
|
|
2458
|
+
}
|
|
2395
2459
|
.min-w-max {
|
|
2396
2460
|
min-width: max-content;
|
|
2397
2461
|
}
|
|
2398
2462
|
.flex-1 {
|
|
2399
2463
|
flex: 1;
|
|
2400
2464
|
}
|
|
2465
|
+
.flex-\[0_0_3\.5rem\] {
|
|
2466
|
+
flex: 0 0 3.5rem;
|
|
2467
|
+
}
|
|
2401
2468
|
.flex-none {
|
|
2402
2469
|
flex: none;
|
|
2403
2470
|
}
|
|
@@ -2594,9 +2661,6 @@
|
|
|
2594
2661
|
.text-center {
|
|
2595
2662
|
text-align: center;
|
|
2596
2663
|
}
|
|
2597
|
-
.text-right {
|
|
2598
|
-
text-align: right;
|
|
2599
|
-
}
|
|
2600
2664
|
.text-2xl {
|
|
2601
2665
|
font-size: var(--text-2xl);
|
|
2602
2666
|
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
@@ -2749,6 +2813,9 @@
|
|
|
2749
2813
|
--input-color: var(--color-error);
|
|
2750
2814
|
}
|
|
2751
2815
|
}
|
|
2816
|
+
.loading-spinner {
|
|
2817
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
|
|
2818
|
+
}
|
|
2752
2819
|
.select-error {
|
|
2753
2820
|
&, &:focus, &:focus-within {
|
|
2754
2821
|
--input-color: var(--color-error);
|
|
@@ -2805,6 +2872,16 @@
|
|
|
2805
2872
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
2806
2873
|
}
|
|
2807
2874
|
}
|
|
2875
|
+
.md\:flex-row {
|
|
2876
|
+
@media (width >= 48rem) {
|
|
2877
|
+
flex-direction: row;
|
|
2878
|
+
}
|
|
2879
|
+
}
|
|
2880
|
+
.md\:justify-center {
|
|
2881
|
+
@media (width >= 48rem) {
|
|
2882
|
+
justify-content: center;
|
|
2883
|
+
}
|
|
2884
|
+
}
|
|
2808
2885
|
.lg\:flex {
|
|
2809
2886
|
@media (width >= 64rem) {
|
|
2810
2887
|
display: flex;
|
|
@@ -2860,6 +2937,7 @@
|
|
|
2860
2937
|
.dm-fun-spotlight-input {
|
|
2861
2938
|
cursor: text;
|
|
2862
2939
|
border: var(--border) solid #0000;
|
|
2940
|
+
position: relative;
|
|
2863
2941
|
display: inline-flex;
|
|
2864
2942
|
flex-shrink: 1;
|
|
2865
2943
|
appearance: none;
|
|
@@ -2881,10 +2959,10 @@
|
|
|
2881
2959
|
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
2882
2960
|
--input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
|
|
2883
2961
|
&:where(input) {
|
|
2884
|
-
display: inline-
|
|
2962
|
+
display: inline-flex;
|
|
2885
2963
|
}
|
|
2886
2964
|
:where(input) {
|
|
2887
|
-
display: inline-
|
|
2965
|
+
display: inline-flex;
|
|
2888
2966
|
height: 100%;
|
|
2889
2967
|
width: 100%;
|
|
2890
2968
|
appearance: none;
|
|
@@ -2927,6 +3005,10 @@
|
|
|
2927
3005
|
margin-inline-end: calc(0.25rem * -3);
|
|
2928
3006
|
}
|
|
2929
3007
|
}
|
|
3008
|
+
&::-webkit-calendar-picker-indicator {
|
|
3009
|
+
position: absolute;
|
|
3010
|
+
inset-inline-end: 0.75em;
|
|
3011
|
+
}
|
|
2930
3012
|
--size: calc(var(--size-field, 0.25rem) * 14);
|
|
2931
3013
|
font-size: 1.375rem;
|
|
2932
3014
|
&[type="number"] {
|
|
@@ -2935,23 +3017,6 @@
|
|
|
2935
3017
|
margin-inline-end: calc(0.25rem * -3);
|
|
2936
3018
|
}
|
|
2937
3019
|
}
|
|
2938
|
-
.label {
|
|
2939
|
-
display: flex;
|
|
2940
|
-
height: calc(100% - 0.5rem);
|
|
2941
|
-
align-items: center;
|
|
2942
|
-
padding-inline: calc(0.25rem * 3);
|
|
2943
|
-
font-size: inherit;
|
|
2944
|
-
&:first-child {
|
|
2945
|
-
margin-inline-start: calc(0.25rem * -3);
|
|
2946
|
-
margin-inline-end: calc(0.25rem * 3);
|
|
2947
|
-
border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
|
|
2948
|
-
}
|
|
2949
|
-
&:last-child {
|
|
2950
|
-
margin-inline-start: calc(0.25rem * 3);
|
|
2951
|
-
margin-inline-end: calc(0.25rem * -3);
|
|
2952
|
-
border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
|
|
2953
|
-
}
|
|
2954
|
-
}
|
|
2955
3020
|
display: flex;
|
|
2956
3021
|
align-items: center;
|
|
2957
3022
|
gap: calc(var(--spacing) * 2);
|
|
@@ -2978,9 +3043,9 @@
|
|
|
2978
3043
|
pointer-events: none;
|
|
2979
3044
|
display: inline-block;
|
|
2980
3045
|
aspect-ratio: 1 / 1;
|
|
2981
|
-
width: calc(0.25rem * 6);
|
|
2982
3046
|
background-color: currentColor;
|
|
2983
3047
|
vertical-align: middle;
|
|
3048
|
+
width: calc(var(--size-selector, 0.25rem) * 6);
|
|
2984
3049
|
mask-size: 100%;
|
|
2985
3050
|
mask-repeat: no-repeat;
|
|
2986
3051
|
mask-position: center;
|
|
@@ -4443,107 +4508,630 @@
|
|
|
4443
4508
|
}
|
|
4444
4509
|
}
|
|
4445
4510
|
}
|
|
4446
|
-
|
|
4447
|
-
:
|
|
4448
|
-
|
|
4449
|
-
|
|
4450
|
-
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
--
|
|
4459
|
-
|
|
4460
|
-
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
|
|
4476
|
-
|
|
4477
|
-
|
|
4511
|
+
:root {
|
|
4512
|
+
--neumorphic-color: hsl(0, 0%, 66.7%);
|
|
4513
|
+
--neumorphic-color: #aaa;
|
|
4514
|
+
--neumorphic-text-color: #444;
|
|
4515
|
+
--neumorphic-light: #fff8;
|
|
4516
|
+
--neumorphic-dark: #3338;
|
|
4517
|
+
--neumorphic-concave: linear-gradient(145deg, #999999, #b6b6b6);
|
|
4518
|
+
--neumorphic-convex: linear-gradient(145deg, #b6b6b6, #999999);
|
|
4519
|
+
--neumorphic-size: 1;
|
|
4520
|
+
--neumorphic-shadow: calc(1em * var(--neumorphic-size))
|
|
4521
|
+
calc(1em * var(--neumorphic-size))
|
|
4522
|
+
calc(1em * var(--neumorphic-size) * 1.5) var(--neumorphic-dark),
|
|
4523
|
+
calc(1em * var(--neumorphic-size) * -1)
|
|
4524
|
+
calc(1em * var(--neumorphic-size) * -1)
|
|
4525
|
+
calc(1em * var(--neumorphic-size) * 1.5) var(--neumorphic-light);
|
|
4526
|
+
--neumorphic-shadow-inset: inset calc(1em * var(--neumorphic-size))
|
|
4527
|
+
calc(1em * var(--neumorphic-size))
|
|
4528
|
+
calc(1em * var(--neumorphic-size) * 1.5) var(--neumorphic-dark),
|
|
4529
|
+
inset calc(1em * var(--neumorphic-size) * -1)
|
|
4530
|
+
calc(1em * var(--neumorphic-size) * -1)
|
|
4531
|
+
calc(1em * var(--neumorphic-size) * 1.5) var(--neumorphic-light);
|
|
4532
|
+
--neumorphic-filter: drop-shadow(
|
|
4533
|
+
calc(1em * var(--neumorphic-size)) calc(1em * var(--neumorphic-size))
|
|
4534
|
+
calc(1em * var(--neumorphic-size) * 1.5) var(--neumorphic-dark)
|
|
4535
|
+
)
|
|
4536
|
+
drop-shadow(
|
|
4537
|
+
calc(1em * var(--neumorphic-size) * -1)
|
|
4538
|
+
calc(1em * var(--neumorphic-size) * -1)
|
|
4539
|
+
calc(1em * var(--neumorphic-size) * 1.5) var(--neumorphic-light)
|
|
4540
|
+
);
|
|
4541
|
+
--text-dark-shadow: 0.1em 0.1em 0.12em var(--neumorphic-dark);
|
|
4542
|
+
--text-light-shadow: -0.1em -0.1em 0.12em var(--neumorphic-light);
|
|
4478
4543
|
}
|
|
4479
|
-
@layer
|
|
4480
|
-
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
--radius-field: 0.25rem;
|
|
4505
|
-
--radius-box: 0.5rem;
|
|
4506
|
-
--size-selector: 0.25rem;
|
|
4507
|
-
--size-field: 0.25rem;
|
|
4508
|
-
--border: 1px;
|
|
4509
|
-
--depth: 1;
|
|
4510
|
-
--noise: 0;
|
|
4544
|
+
@layer components {
|
|
4545
|
+
.neumorphic-tabel {
|
|
4546
|
+
thead {
|
|
4547
|
+
tr {
|
|
4548
|
+
th {
|
|
4549
|
+
box-shadow: calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-dark), calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4550
|
+
color: var(--neumorphic-text-color);
|
|
4551
|
+
padding: 0.5rem;
|
|
4552
|
+
text-align: left;
|
|
4553
|
+
}
|
|
4554
|
+
}
|
|
4555
|
+
}
|
|
4556
|
+
tbody {
|
|
4557
|
+
tr {
|
|
4558
|
+
&:hover {
|
|
4559
|
+
box-shadow: calc(1rem * 6 * 0.01) calc(1rem * 6 * 0.01) calc(1rem * 6 * 0.01 * 1.5) var(--neumorphic-dark), calc(1rem * 6 * 0.01 * -1) calc(1rem * 6 * 0.01 * -1) calc(1rem * 6 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4560
|
+
}
|
|
4561
|
+
td {
|
|
4562
|
+
box-shadow: inset calc(1rem * 6 * 0.01) calc(1rem * 6 * 0.01) calc(1rem * 6 * 0.01 * 1.5) var(--neumorphic-dark), inset calc(1rem * 6 * 0.01 * -1) calc(1rem * 6 * 0.01 * -1) calc(1rem * 6 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4563
|
+
padding: 0.25rem 0.5rem;
|
|
4564
|
+
td:hover {
|
|
4565
|
+
background-image: radial-gradient( circle at center, color-mix(in srgb, var(--neumorphic-color) 80%, #fff), color-mix(in srgb, var(--neumorphic-color) 90%, #fff), var(--neumorphic-color), color-mix(in srgb, var(--neumorphic-color) 90%, #000), color-mix(in srgb, var(--neumorphic-color) 80%, #000) );
|
|
4566
|
+
}
|
|
4567
|
+
}
|
|
4568
|
+
}
|
|
4511
4569
|
}
|
|
4512
4570
|
}
|
|
4513
4571
|
}
|
|
4514
|
-
@layer
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
--radius-
|
|
4538
|
-
--radius-field
|
|
4539
|
-
--
|
|
4540
|
-
--
|
|
4541
|
-
--
|
|
4542
|
-
--
|
|
4543
|
-
--
|
|
4544
|
-
--
|
|
4545
|
-
|
|
4546
|
-
|
|
4572
|
+
@layer components {
|
|
4573
|
+
.neumorphic-button {
|
|
4574
|
+
display: inline-flex;
|
|
4575
|
+
flex-shrink: 0;
|
|
4576
|
+
cursor: pointer;
|
|
4577
|
+
flex-wrap: nowrap;
|
|
4578
|
+
align-items: center;
|
|
4579
|
+
justify-content: center;
|
|
4580
|
+
gap: calc(var(--spacing) * 1.5);
|
|
4581
|
+
text-align: center;
|
|
4582
|
+
vertical-align: middle;
|
|
4583
|
+
text-decoration-line: none;
|
|
4584
|
+
-webkit-user-select: none;
|
|
4585
|
+
user-select: none;
|
|
4586
|
+
padding-inline: var(--btn-p);
|
|
4587
|
+
height: var(--size);
|
|
4588
|
+
font-size: 0.875rem;
|
|
4589
|
+
font-weight: 600;
|
|
4590
|
+
transition-property: color, background-color, border-color, box-shadow;
|
|
4591
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
4592
|
+
transition-duration: 0.2s;
|
|
4593
|
+
border-start-start-radius: var(--join-ss, var(--radius-field));
|
|
4594
|
+
border-start-end-radius: var(--join-se, var(--radius-field));
|
|
4595
|
+
border-end-start-radius: var(--join-es, var(--radius-field));
|
|
4596
|
+
border-end-end-radius: var(--join-ee, var(--radius-field));
|
|
4597
|
+
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
4598
|
+
--btn-bg: var(--btn-color, var(--neumorphic-color));
|
|
4599
|
+
--btn-fg: var(--neumorphic-text-color);
|
|
4600
|
+
--btn-p: 1rem;
|
|
4601
|
+
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
|
|
4602
|
+
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
|
|
4603
|
+
0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
|
|
4604
|
+
--btn-noise: var(--fx-noise);
|
|
4605
|
+
--btn-color: var(--neumorphic-color);
|
|
4606
|
+
color: var(--btn-fg);
|
|
4607
|
+
background-color: var(--btn-bg);
|
|
4608
|
+
box-shadow: calc(1rem * 16 * 0.01) calc(1rem * 16 * 0.01) calc(1rem * 16 * 0.01 * 1.5) var(--neumorphic-dark), calc(1rem * 16 * 0.01 * -1) calc(1rem * 16 * 0.01 * -1) calc(1rem * 16 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4609
|
+
text-shadow: calc(1rem * 0.01 * 4) calc(1rem * 0.01 * 4) calc(1rem * 0.01 * 4) var(--neumorphic-dark), calc(1rem * 0.01 * 4 * -1) calc(1rem * 0.01 * 4 * -1) calc(1rem * 0.01 * 4) var(--neumorphic-light);
|
|
4610
|
+
@media (hover: hover) {
|
|
4611
|
+
&:hover {
|
|
4612
|
+
--btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
|
|
4613
|
+
color: transparent;
|
|
4614
|
+
background-clip: text;
|
|
4615
|
+
text-shadow: calc(1rem * 0.01 * 4) calc(1rem * 0.01 * 4) calc(1rem * 0.01 * 4) var(--neumorphic-dark), calc(1rem * 0.01 * 4 * -1) calc(1rem * 0.01 * 4 * -1) calc(1rem * 0.01 * 4) var(--neumorphic-light);
|
|
4616
|
+
box-shadow: calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-dark), calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4617
|
+
}
|
|
4618
|
+
}
|
|
4619
|
+
&.btn-active {
|
|
4620
|
+
--btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
|
|
4621
|
+
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
|
|
4622
|
+
isolation: isolate;
|
|
4623
|
+
box-shadow: inset calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-dark), inset calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4624
|
+
}
|
|
4625
|
+
&:focus-visible {
|
|
4626
|
+
outline-width: 2px;
|
|
4627
|
+
outline-style: solid;
|
|
4628
|
+
}
|
|
4629
|
+
&:active:not(.btn-active) {
|
|
4630
|
+
box-shadow: inset calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-dark), inset calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * -1) calc(1rem * 12 * 0.01 * 1.5) var(--neumorphic-light);
|
|
4631
|
+
translate: 0 0.5px;
|
|
4632
|
+
--btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 5%);
|
|
4633
|
+
--btn-border: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
|
|
4634
|
+
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
|
|
4635
|
+
}
|
|
4636
|
+
&:is(:disabled, [disabled], .btn-disabled) {
|
|
4637
|
+
&:not(.btn-link, .btn-ghost) {
|
|
4638
|
+
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
|
|
4639
|
+
box-shadow: none;
|
|
4640
|
+
}
|
|
4641
|
+
pointer-events: none;
|
|
4642
|
+
--btn-border: #0000;
|
|
4643
|
+
--btn-noise: none;
|
|
4644
|
+
--btn-fg: color-mix(in oklch, var(--neumorphic-text-color) 20%, #0000);
|
|
4645
|
+
@media (hover: hover) {
|
|
4646
|
+
&:hover {
|
|
4647
|
+
pointer-events: none;
|
|
4648
|
+
background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
|
|
4649
|
+
--btn-border: #0000;
|
|
4650
|
+
--btn-fg: color-mix(in oklch, var(--neumorphic-text-color) 20%, #0000);
|
|
4651
|
+
}
|
|
4652
|
+
}
|
|
4653
|
+
}
|
|
4654
|
+
&:is(input[type="checkbox"], input[type="radio"]) {
|
|
4655
|
+
appearance: none;
|
|
4656
|
+
&::after {
|
|
4657
|
+
content: attr(aria-label);
|
|
4658
|
+
}
|
|
4659
|
+
&:checked {
|
|
4660
|
+
outline-width: 2px;
|
|
4661
|
+
outline-style: solid;
|
|
4662
|
+
--btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
|
|
4663
|
+
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
|
|
4664
|
+
isolation: isolate;
|
|
4665
|
+
}
|
|
4666
|
+
}
|
|
4667
|
+
}
|
|
4668
|
+
.btn-primary {
|
|
4669
|
+
--btn-color: var(--color-primary);
|
|
4670
|
+
--btn-fg: var(--color-primary-content);
|
|
4671
|
+
}
|
|
4672
|
+
.btn-secondary {
|
|
4673
|
+
--btn-color: var(--color-secondary);
|
|
4674
|
+
--btn-fg: var(--color-secondary-content);
|
|
4675
|
+
}
|
|
4676
|
+
.btn-accent {
|
|
4677
|
+
--btn-color: var(--color-accent);
|
|
4678
|
+
--btn-fg: var(--color-accent-content);
|
|
4679
|
+
}
|
|
4680
|
+
.btn-neutral {
|
|
4681
|
+
--btn-color: var(--color-neutral);
|
|
4682
|
+
--btn-fg: var(--color-neutral-content);
|
|
4683
|
+
}
|
|
4684
|
+
.btn-info {
|
|
4685
|
+
--btn-color: var(--color-info);
|
|
4686
|
+
--btn-fg: var(--color-info-content);
|
|
4687
|
+
}
|
|
4688
|
+
.btn-success {
|
|
4689
|
+
--btn-color: var(--color-success);
|
|
4690
|
+
--btn-fg: var(--color-success-content);
|
|
4691
|
+
}
|
|
4692
|
+
.btn-warning {
|
|
4693
|
+
--btn-color: var(--color-warning);
|
|
4694
|
+
--btn-fg: var(--color-warning-content);
|
|
4695
|
+
}
|
|
4696
|
+
.btn-error {
|
|
4697
|
+
--btn-color: var(--color-error);
|
|
4698
|
+
--btn-fg: var(--color-error-content);
|
|
4699
|
+
}
|
|
4700
|
+
.btn-ghost {
|
|
4701
|
+
&:not(.btn-active, :hover, :active:focus, :focus-visible) {
|
|
4702
|
+
--btn-shadow: "";
|
|
4703
|
+
--btn-bg: #0000;
|
|
4704
|
+
--btn-border: #0000;
|
|
4705
|
+
--btn-noise: none;
|
|
4706
|
+
&:not(:disabled, [disabled], .btn-disabled) {
|
|
4707
|
+
outline-color: currentColor;
|
|
4708
|
+
--btn-fg: currentColor;
|
|
4709
|
+
}
|
|
4710
|
+
}
|
|
4711
|
+
}
|
|
4712
|
+
.neumorphic-btn-ghost {
|
|
4713
|
+
&:not(.btn-active, :active:focus, :focus-visible) {
|
|
4714
|
+
--btn-shadow: "";
|
|
4715
|
+
--btn-bg: #0000;
|
|
4716
|
+
--btn-border: #0000;
|
|
4717
|
+
--btn-noise: none;
|
|
4718
|
+
box-shadow: none;
|
|
4719
|
+
&:not(:disabled, [disabled], .btn-disabled) {
|
|
4720
|
+
outline-color: currentColor;
|
|
4721
|
+
--btn-fg: currentColor;
|
|
4722
|
+
}
|
|
4723
|
+
}
|
|
4724
|
+
}
|
|
4725
|
+
.btn-link {
|
|
4726
|
+
text-decoration-line: underline;
|
|
4727
|
+
outline-color: currentColor;
|
|
4728
|
+
--btn-border: #0000;
|
|
4729
|
+
--btn-bg: #0000;
|
|
4730
|
+
--btn-fg: var(--color-primary);
|
|
4731
|
+
--btn-noise: none;
|
|
4732
|
+
--btn-shadow: "";
|
|
4733
|
+
&:is(.btn-active, :hover, :active:focus, :focus-visible) {
|
|
4734
|
+
text-decoration-line: underline;
|
|
4735
|
+
--btn-border: #0000;
|
|
4736
|
+
--btn-bg: #0000;
|
|
4737
|
+
}
|
|
4738
|
+
}
|
|
4739
|
+
.btn-outline {
|
|
4740
|
+
&:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled, :checked, [checked]) {
|
|
4741
|
+
--btn-shadow: "";
|
|
4742
|
+
--btn-bg: #0000;
|
|
4743
|
+
--btn-fg: var(--btn-color);
|
|
4744
|
+
--btn-border: var(--btn-color);
|
|
4745
|
+
--btn-noise: none;
|
|
4746
|
+
}
|
|
4747
|
+
}
|
|
4748
|
+
.btn-dash {
|
|
4749
|
+
&:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
|
|
4750
|
+
--btn-shadow: "";
|
|
4751
|
+
border-style: dashed;
|
|
4752
|
+
--btn-bg: #0000;
|
|
4753
|
+
--btn-fg: var(--btn-color);
|
|
4754
|
+
--btn-border: var(--btn-color);
|
|
4755
|
+
--btn-noise: none;
|
|
4756
|
+
}
|
|
4757
|
+
}
|
|
4758
|
+
.btn-soft {
|
|
4759
|
+
&:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
|
|
4760
|
+
--btn-shadow: "";
|
|
4761
|
+
--btn-fg: var(--btn-color, var(--neumorphic-text-color));
|
|
4762
|
+
--btn-bg: color-mix(
|
|
4763
|
+
in oklab,
|
|
4764
|
+
var(--btn-color, var(--neumorphic-text-color)) 8%,
|
|
4765
|
+
var(--color-base-100)
|
|
4766
|
+
);
|
|
4767
|
+
--btn-border: color-mix(
|
|
4768
|
+
in oklab,
|
|
4769
|
+
var(--btn-color, var(--neumorphic-text-color)) 10%,
|
|
4770
|
+
var(--color-base-100)
|
|
4771
|
+
);
|
|
4772
|
+
--btn-noise: none;
|
|
4773
|
+
}
|
|
4774
|
+
}
|
|
4775
|
+
.btn-xs {
|
|
4776
|
+
font-size: 0.6875rem;
|
|
4777
|
+
--btn-p: 0.5rem;
|
|
4778
|
+
--size: calc(var(--size-field, 0.25rem) * 6);
|
|
4779
|
+
}
|
|
4780
|
+
.btn-sm {
|
|
4781
|
+
font-size: 0.75rem;
|
|
4782
|
+
--btn-p: 0.75rem;
|
|
4783
|
+
--size: calc(var(--size-field, 0.25rem) * 8);
|
|
4784
|
+
}
|
|
4785
|
+
.btn-md {
|
|
4786
|
+
font-size: 0.875rem;
|
|
4787
|
+
--btn-p: 1rem;
|
|
4788
|
+
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
4789
|
+
}
|
|
4790
|
+
.btn-lg {
|
|
4791
|
+
font-size: 1.125rem;
|
|
4792
|
+
--btn-p: 1.25rem;
|
|
4793
|
+
--size: calc(var(--size-field, 0.25rem) * 12);
|
|
4794
|
+
}
|
|
4795
|
+
.btn-xl {
|
|
4796
|
+
font-size: 1.375rem;
|
|
4797
|
+
--btn-p: 1.5rem;
|
|
4798
|
+
--size: calc(var(--size-field, 0.25rem) * 14);
|
|
4799
|
+
}
|
|
4800
|
+
.btn-square {
|
|
4801
|
+
padding-inline: calc(var(--spacing) * 0);
|
|
4802
|
+
width: var(--size);
|
|
4803
|
+
height: var(--size);
|
|
4804
|
+
}
|
|
4805
|
+
.btn-circle {
|
|
4806
|
+
border-radius: calc(infinity * 1px);
|
|
4807
|
+
padding-inline: calc(var(--spacing) * 0);
|
|
4808
|
+
width: var(--size);
|
|
4809
|
+
height: var(--size);
|
|
4810
|
+
}
|
|
4811
|
+
.btn-wide {
|
|
4812
|
+
width: 100%;
|
|
4813
|
+
max-width: calc(var(--spacing) * 64);
|
|
4814
|
+
}
|
|
4815
|
+
.btn-block {
|
|
4816
|
+
width: 100%;
|
|
4817
|
+
}
|
|
4818
|
+
}
|
|
4819
|
+
@layer components {
|
|
4820
|
+
.neumorphic-range {
|
|
4821
|
+
appearance: none;
|
|
4822
|
+
-webkit-appearance: none;
|
|
4823
|
+
--range-thumb: var(--neumorphic-color);
|
|
4824
|
+
--range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
|
|
4825
|
+
--range-progress: currentColor;
|
|
4826
|
+
--range-fill: 1;
|
|
4827
|
+
--range-p: 0.25rem;
|
|
4828
|
+
--range-bg: color-mix(in oklab, currentColor 20%, #0000);
|
|
4829
|
+
cursor: pointer;
|
|
4830
|
+
overflow: hidden;
|
|
4831
|
+
background-color: transparent;
|
|
4832
|
+
vertical-align: middle;
|
|
4833
|
+
width: clamp(3rem, 20rem, 100%);
|
|
4834
|
+
--radius-selector-max: calc(
|
|
4835
|
+
var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
|
|
4836
|
+
);
|
|
4837
|
+
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
|
|
4838
|
+
border: none;
|
|
4839
|
+
height: var(--range-thumb-size);
|
|
4840
|
+
[dir="rtl"] & {
|
|
4841
|
+
--range-dir: -1;
|
|
4842
|
+
}
|
|
4843
|
+
&:focus {
|
|
4844
|
+
outline: none;
|
|
4845
|
+
}
|
|
4846
|
+
&:focus-visible {
|
|
4847
|
+
outline: 2px solid;
|
|
4848
|
+
outline-offset: 2px;
|
|
4849
|
+
}
|
|
4850
|
+
&::-webkit-slider-runnable-track {
|
|
4851
|
+
width: 100%;
|
|
4852
|
+
background-color: var(--range-bg);
|
|
4853
|
+
border-radius: var(--radius-selector);
|
|
4854
|
+
height: calc(var(--range-thumb-size) * 0.5);
|
|
4855
|
+
@media (forced-colors: active) {
|
|
4856
|
+
border: 1px solid;
|
|
4857
|
+
}
|
|
4858
|
+
}
|
|
4859
|
+
&::-webkit-slider-thumb {
|
|
4860
|
+
position: relative;
|
|
4861
|
+
box-sizing: border-box;
|
|
4862
|
+
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
|
|
4863
|
+
background-color: currentColor;
|
|
4864
|
+
height: var(--range-thumb-size);
|
|
4865
|
+
width: var(--range-thumb-size);
|
|
4866
|
+
border: var(--range-p) solid;
|
|
4867
|
+
appearance: none;
|
|
4868
|
+
-webkit-appearance: none;
|
|
4869
|
+
top: 50%;
|
|
4870
|
+
color: var(--range-progress);
|
|
4871
|
+
transform: translateY(-50%);
|
|
4872
|
+
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
|
|
4873
|
+
}
|
|
4874
|
+
&::-moz-range-track {
|
|
4875
|
+
width: 100%;
|
|
4876
|
+
background-color: var(--range-bg);
|
|
4877
|
+
border-radius: var(--radius-selector);
|
|
4878
|
+
height: calc(var(--range-thumb-size) * 0.5);
|
|
4879
|
+
@media (forced-colors: active) {
|
|
4880
|
+
border: 1px solid;
|
|
4881
|
+
}
|
|
4882
|
+
}
|
|
4883
|
+
&::-moz-range-thumb {
|
|
4884
|
+
position: relative;
|
|
4885
|
+
box-sizing: border-box;
|
|
4886
|
+
border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
|
|
4887
|
+
background-color: currentColor;
|
|
4888
|
+
height: var(--range-thumb-size);
|
|
4889
|
+
width: var(--range-thumb-size);
|
|
4890
|
+
border: var(--range-p) solid;
|
|
4891
|
+
top: 50%;
|
|
4892
|
+
color: var(--range-progress);
|
|
4893
|
+
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
|
|
4894
|
+
}
|
|
4895
|
+
&:disabled {
|
|
4896
|
+
cursor: not-allowed;
|
|
4897
|
+
opacity: 30%;
|
|
4898
|
+
}
|
|
4899
|
+
}
|
|
4900
|
+
}
|
|
4901
|
+
@layer components {
|
|
4902
|
+
.neumorphic-checkbox {
|
|
4903
|
+
display: inline-grid;
|
|
4904
|
+
place-items: center;
|
|
4905
|
+
position: relative;
|
|
4906
|
+
flex-shrink: 0;
|
|
4907
|
+
cursor: pointer;
|
|
4908
|
+
appearance: none;
|
|
4909
|
+
border-radius: var(--radius-selector);
|
|
4910
|
+
padding: calc(0.25rem * 1);
|
|
4911
|
+
vertical-align: middle;
|
|
4912
|
+
color: var(--color-base-content);
|
|
4913
|
+
box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
|
|
4914
|
+
transition: background-color 0.2s, box-shadow 0.2s;
|
|
4915
|
+
--size: calc(var(--size-selector, 0.25rem) * 6);
|
|
4916
|
+
width: var(--size);
|
|
4917
|
+
height: var(--size);
|
|
4918
|
+
background-size: auto, calc(var(--noise) * 100%);
|
|
4919
|
+
background-image: none, var(--fx-noise);
|
|
4920
|
+
&:before {
|
|
4921
|
+
--tw-content: "";
|
|
4922
|
+
content: var(--tw-content);
|
|
4923
|
+
display: block;
|
|
4924
|
+
width: 100%;
|
|
4925
|
+
height: 100%;
|
|
4926
|
+
rotate: 45deg;
|
|
4927
|
+
background-color: currentColor;
|
|
4928
|
+
opacity: 0%;
|
|
4929
|
+
transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
|
|
4930
|
+
transition-delay: 0.1s;
|
|
4931
|
+
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
|
|
4932
|
+
box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
|
|
4933
|
+
font-size: 1rem;
|
|
4934
|
+
line-height: 0.75;
|
|
4935
|
+
}
|
|
4936
|
+
&:focus-visible {
|
|
4937
|
+
outline: 2px solid var(--input-color, currentColor);
|
|
4938
|
+
outline-offset: 2px;
|
|
4939
|
+
}
|
|
4940
|
+
&:checked, &[aria-checked="true"] {
|
|
4941
|
+
background-color: var(--input-color, #0000);
|
|
4942
|
+
box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
|
|
4943
|
+
&:before {
|
|
4944
|
+
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
|
|
4945
|
+
opacity: 100%;
|
|
4946
|
+
@media print {
|
|
4947
|
+
rotate: 0deg;
|
|
4948
|
+
}
|
|
4949
|
+
@media print {
|
|
4950
|
+
background-color: transparent;
|
|
4951
|
+
}
|
|
4952
|
+
@media print {
|
|
4953
|
+
--tw-content: "✔︎";
|
|
4954
|
+
}
|
|
4955
|
+
@media print {
|
|
4956
|
+
clip-path: none;
|
|
4957
|
+
}
|
|
4958
|
+
@media (forced-colors: active) {
|
|
4959
|
+
rotate: 0deg;
|
|
4960
|
+
background-color: transparent;
|
|
4961
|
+
--tw-content: "✔︎";
|
|
4962
|
+
clip-path: none;
|
|
4963
|
+
}
|
|
4964
|
+
}
|
|
4965
|
+
}
|
|
4966
|
+
&:indeterminate {
|
|
4967
|
+
&:before {
|
|
4968
|
+
rotate: 0deg;
|
|
4969
|
+
opacity: 100%;
|
|
4970
|
+
translate: 0 -35%;
|
|
4971
|
+
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
|
|
4972
|
+
}
|
|
4973
|
+
}
|
|
4974
|
+
&:disabled {
|
|
4975
|
+
cursor: not-allowed;
|
|
4976
|
+
opacity: 20%;
|
|
4977
|
+
}
|
|
4978
|
+
}
|
|
4979
|
+
}
|
|
4980
|
+
@layer components {
|
|
4981
|
+
.neumorphic-radio {
|
|
4982
|
+
display: inline-grid;
|
|
4983
|
+
place-items: center;
|
|
4984
|
+
position: relative;
|
|
4985
|
+
flex-shrink: 0;
|
|
4986
|
+
cursor: pointer;
|
|
4987
|
+
appearance: none;
|
|
4988
|
+
border-radius: calc(infinity * 1px);
|
|
4989
|
+
padding: calc(0.25rem * 1);
|
|
4990
|
+
vertical-align: middle;
|
|
4991
|
+
--size: calc(var(--size-selector, 0.25rem) * 6);
|
|
4992
|
+
width: var(--size);
|
|
4993
|
+
height: var(--size);
|
|
4994
|
+
color: var(--input-color, currentColor);
|
|
4995
|
+
&:before {
|
|
4996
|
+
display: block;
|
|
4997
|
+
width: 100%;
|
|
4998
|
+
aspect-ratio: 1 / 1;
|
|
4999
|
+
border-radius: calc(infinity * 1px);
|
|
5000
|
+
--tw-content: "";
|
|
5001
|
+
content: var(--tw-content);
|
|
5002
|
+
background-size: auto, calc(var(--noise) * 100%);
|
|
5003
|
+
background-image: none, var(--fx-noise);
|
|
5004
|
+
}
|
|
5005
|
+
&:focus-visible {
|
|
5006
|
+
outline: 2px solid currentColor;
|
|
5007
|
+
}
|
|
5008
|
+
&:checked, &[aria-checked="true"] {
|
|
5009
|
+
animation: radio 0.2s ease-out;
|
|
5010
|
+
border-color: currentColor;
|
|
5011
|
+
background-color: var(--neumorphic-text-color);
|
|
5012
|
+
&:before {
|
|
5013
|
+
background-color: currentColor;
|
|
5014
|
+
@media print {
|
|
5015
|
+
outline: .25rem solid;
|
|
5016
|
+
}
|
|
5017
|
+
@media print {
|
|
5018
|
+
outline-offset: -1rem;
|
|
5019
|
+
}
|
|
5020
|
+
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
|
|
5021
|
+
@media (forced-colors: active) {
|
|
5022
|
+
outline-style: var(--tw-outline-style);
|
|
5023
|
+
outline-width: 1px;
|
|
5024
|
+
outline-offset: calc(1px * -1);
|
|
5025
|
+
}
|
|
5026
|
+
}
|
|
5027
|
+
}
|
|
5028
|
+
&:disabled {
|
|
5029
|
+
cursor: not-allowed;
|
|
5030
|
+
opacity: 20%;
|
|
5031
|
+
}
|
|
5032
|
+
}
|
|
5033
|
+
}
|
|
5034
|
+
@layer base {
|
|
5035
|
+
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
|
|
5036
|
+
color-scheme: light;
|
|
5037
|
+
--color-base-100: oklch(100% 0 0);
|
|
5038
|
+
--color-base-200: oklch(98% 0 0);
|
|
5039
|
+
--color-base-300: oklch(95% 0 0);
|
|
5040
|
+
--color-base-content: oklch(21% 0.006 285.885);
|
|
5041
|
+
--color-primary: oklch(45% 0.24 277.023);
|
|
5042
|
+
--color-primary-content: oklch(93% 0.034 272.788);
|
|
5043
|
+
--color-secondary: oklch(65% 0.241 354.308);
|
|
5044
|
+
--color-secondary-content: oklch(94% 0.028 342.258);
|
|
5045
|
+
--color-accent: oklch(77% 0.152 181.912);
|
|
5046
|
+
--color-accent-content: oklch(38% 0.063 188.416);
|
|
5047
|
+
--color-neutral: oklch(14% 0.005 285.823);
|
|
5048
|
+
--color-neutral-content: oklch(92% 0.004 286.32);
|
|
5049
|
+
--color-info: oklch(74% 0.16 232.661);
|
|
5050
|
+
--color-info-content: oklch(29% 0.066 243.157);
|
|
5051
|
+
--color-success: oklch(76% 0.177 163.223);
|
|
5052
|
+
--color-success-content: oklch(37% 0.077 168.94);
|
|
5053
|
+
--color-warning: oklch(82% 0.189 84.429);
|
|
5054
|
+
--color-warning-content: oklch(41% 0.112 45.904);
|
|
5055
|
+
--color-error: oklch(71% 0.194 13.428);
|
|
5056
|
+
--color-error-content: oklch(27% 0.105 12.094);
|
|
5057
|
+
--radius-selector: 0.5rem;
|
|
5058
|
+
--radius-field: 0.25rem;
|
|
5059
|
+
--radius-box: 0.5rem;
|
|
5060
|
+
--size-selector: 0.25rem;
|
|
5061
|
+
--size-field: 0.25rem;
|
|
5062
|
+
--border: 1px;
|
|
5063
|
+
--depth: 1;
|
|
5064
|
+
--noise: 0;
|
|
5065
|
+
}
|
|
5066
|
+
}
|
|
5067
|
+
@layer base {
|
|
5068
|
+
@media (prefers-color-scheme: dark) {
|
|
5069
|
+
:root {
|
|
5070
|
+
color-scheme: dark;
|
|
5071
|
+
--color-base-100: oklch(25.33% 0.016 252.42);
|
|
5072
|
+
--color-base-200: oklch(23.26% 0.014 253.1);
|
|
5073
|
+
--color-base-300: oklch(21.15% 0.012 254.09);
|
|
5074
|
+
--color-base-content: oklch(97.807% 0.029 256.847);
|
|
5075
|
+
--color-primary: oklch(58% 0.233 277.117);
|
|
5076
|
+
--color-primary-content: oklch(96% 0.018 272.314);
|
|
5077
|
+
--color-secondary: oklch(65% 0.241 354.308);
|
|
5078
|
+
--color-secondary-content: oklch(94% 0.028 342.258);
|
|
5079
|
+
--color-accent: oklch(77% 0.152 181.912);
|
|
5080
|
+
--color-accent-content: oklch(38% 0.063 188.416);
|
|
5081
|
+
--color-neutral: oklch(14% 0.005 285.823);
|
|
5082
|
+
--color-neutral-content: oklch(92% 0.004 286.32);
|
|
5083
|
+
--color-info: oklch(74% 0.16 232.661);
|
|
5084
|
+
--color-info-content: oklch(29% 0.066 243.157);
|
|
5085
|
+
--color-success: oklch(76% 0.177 163.223);
|
|
5086
|
+
--color-success-content: oklch(37% 0.077 168.94);
|
|
5087
|
+
--color-warning: oklch(82% 0.189 84.429);
|
|
5088
|
+
--color-warning-content: oklch(41% 0.112 45.904);
|
|
5089
|
+
--color-error: oklch(71% 0.194 13.428);
|
|
5090
|
+
--color-error-content: oklch(27% 0.105 12.094);
|
|
5091
|
+
--radius-selector: 0.5rem;
|
|
5092
|
+
--radius-field: 0.25rem;
|
|
5093
|
+
--radius-box: 0.5rem;
|
|
5094
|
+
--size-selector: 0.25rem;
|
|
5095
|
+
--size-field: 0.25rem;
|
|
5096
|
+
--border: 1px;
|
|
5097
|
+
--depth: 1;
|
|
5098
|
+
--noise: 0;
|
|
5099
|
+
}
|
|
5100
|
+
}
|
|
5101
|
+
}
|
|
5102
|
+
@layer base {
|
|
5103
|
+
:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
|
|
5104
|
+
color-scheme: light;
|
|
5105
|
+
--color-base-100: oklch(100% 0 0);
|
|
5106
|
+
--color-base-200: oklch(98% 0 0);
|
|
5107
|
+
--color-base-300: oklch(95% 0 0);
|
|
5108
|
+
--color-base-content: oklch(21% 0.006 285.885);
|
|
5109
|
+
--color-primary: oklch(45% 0.24 277.023);
|
|
5110
|
+
--color-primary-content: oklch(93% 0.034 272.788);
|
|
5111
|
+
--color-secondary: oklch(65% 0.241 354.308);
|
|
5112
|
+
--color-secondary-content: oklch(94% 0.028 342.258);
|
|
5113
|
+
--color-accent: oklch(77% 0.152 181.912);
|
|
5114
|
+
--color-accent-content: oklch(38% 0.063 188.416);
|
|
5115
|
+
--color-neutral: oklch(14% 0.005 285.823);
|
|
5116
|
+
--color-neutral-content: oklch(92% 0.004 286.32);
|
|
5117
|
+
--color-info: oklch(74% 0.16 232.661);
|
|
5118
|
+
--color-info-content: oklch(29% 0.066 243.157);
|
|
5119
|
+
--color-success: oklch(76% 0.177 163.223);
|
|
5120
|
+
--color-success-content: oklch(37% 0.077 168.94);
|
|
5121
|
+
--color-warning: oklch(82% 0.189 84.429);
|
|
5122
|
+
--color-warning-content: oklch(41% 0.112 45.904);
|
|
5123
|
+
--color-error: oklch(71% 0.194 13.428);
|
|
5124
|
+
--color-error-content: oklch(27% 0.105 12.094);
|
|
5125
|
+
--radius-selector: 0.5rem;
|
|
5126
|
+
--radius-field: 0.25rem;
|
|
5127
|
+
--radius-box: 0.5rem;
|
|
5128
|
+
--size-selector: 0.25rem;
|
|
5129
|
+
--size-field: 0.25rem;
|
|
5130
|
+
--border: 1px;
|
|
5131
|
+
--depth: 1;
|
|
5132
|
+
--noise: 0;
|
|
5133
|
+
}
|
|
5134
|
+
}
|
|
4547
5135
|
@layer base {
|
|
4548
5136
|
:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {
|
|
4549
5137
|
color-scheme: dark;
|
|
@@ -4584,9 +5172,6 @@
|
|
|
4584
5172
|
.chat {
|
|
4585
5173
|
--mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
|
|
4586
5174
|
}
|
|
4587
|
-
.tooltip {
|
|
4588
|
-
--mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
|
|
4589
|
-
}
|
|
4590
5175
|
}
|
|
4591
5176
|
@layer base {
|
|
4592
5177
|
:root,
|
|
@@ -4595,120 +5180,6 @@
|
|
|
4595
5180
|
color: var(--color-base-content);
|
|
4596
5181
|
}
|
|
4597
5182
|
}
|
|
4598
|
-
@layer base {
|
|
4599
|
-
*,
|
|
4600
|
-
::after,
|
|
4601
|
-
::backdrop,
|
|
4602
|
-
::before,
|
|
4603
|
-
::file-selector-button {
|
|
4604
|
-
box-sizing: border-box;
|
|
4605
|
-
margin: 0;
|
|
4606
|
-
padding: 0;
|
|
4607
|
-
border: 0 solid;
|
|
4608
|
-
}
|
|
4609
|
-
:host,
|
|
4610
|
-
html {
|
|
4611
|
-
line-height: 1.5;
|
|
4612
|
-
font-family: var(
|
|
4613
|
-
--default-font-family,
|
|
4614
|
-
ui-sans-serif,
|
|
4615
|
-
system-ui,
|
|
4616
|
-
sans-serif,
|
|
4617
|
-
"Apple Color Emoji",
|
|
4618
|
-
"Segoe UI Emoji",
|
|
4619
|
-
"Segoe UI Symbol",
|
|
4620
|
-
"Noto Color Emoji"
|
|
4621
|
-
);
|
|
4622
|
-
webkit-tap-highlight-color: #0000;
|
|
4623
|
-
}
|
|
4624
|
-
body {
|
|
4625
|
-
line-height: inherit;
|
|
4626
|
-
}
|
|
4627
|
-
hr {
|
|
4628
|
-
height: 0;
|
|
4629
|
-
color: inherit;
|
|
4630
|
-
border-top-width: 1px;
|
|
4631
|
-
}
|
|
4632
|
-
h1,
|
|
4633
|
-
h2,
|
|
4634
|
-
h3,
|
|
4635
|
-
h4,
|
|
4636
|
-
h5,
|
|
4637
|
-
h6 {
|
|
4638
|
-
font-size: inherit;
|
|
4639
|
-
font-weight: inherit;
|
|
4640
|
-
}
|
|
4641
|
-
a {
|
|
4642
|
-
color: inherit;
|
|
4643
|
-
webkit-text-decoration: inherit;
|
|
4644
|
-
text-decoration: inherit;
|
|
4645
|
-
}
|
|
4646
|
-
table {
|
|
4647
|
-
text-indent: 0;
|
|
4648
|
-
border-color: inherit;
|
|
4649
|
-
border-collapse: collapse;
|
|
4650
|
-
}
|
|
4651
|
-
::file-selector-button,
|
|
4652
|
-
button,
|
|
4653
|
-
input,
|
|
4654
|
-
optgroup,
|
|
4655
|
-
select,
|
|
4656
|
-
textarea {
|
|
4657
|
-
font: inherit;
|
|
4658
|
-
font-feature-settings: inherit;
|
|
4659
|
-
font-variation-settings: inherit;
|
|
4660
|
-
letter-spacing: inherit;
|
|
4661
|
-
color: inherit;
|
|
4662
|
-
background: 0 0;
|
|
4663
|
-
}
|
|
4664
|
-
input:where(:not([type="button"], [type="reset"], [type="submit"])),
|
|
4665
|
-
select,
|
|
4666
|
-
textarea {
|
|
4667
|
-
border-width: 1px;
|
|
4668
|
-
}
|
|
4669
|
-
::file-selector-button,
|
|
4670
|
-
button,
|
|
4671
|
-
input:where([type="button"], [type="reset"], [type="submit"]) {
|
|
4672
|
-
appearance: button;
|
|
4673
|
-
}
|
|
4674
|
-
:-moz-focusring {
|
|
4675
|
-
outline: auto;
|
|
4676
|
-
}
|
|
4677
|
-
:-moz-ui-invalid {
|
|
4678
|
-
box-shadow: none;
|
|
4679
|
-
}
|
|
4680
|
-
::-webkit-search-decoration {
|
|
4681
|
-
webkit-appearance: none;
|
|
4682
|
-
}
|
|
4683
|
-
menu,
|
|
4684
|
-
ol,
|
|
4685
|
-
ul {
|
|
4686
|
-
list-style: none;
|
|
4687
|
-
}
|
|
4688
|
-
textarea {
|
|
4689
|
-
resize: vertical;
|
|
4690
|
-
}
|
|
4691
|
-
::placeholder {
|
|
4692
|
-
opacity: 1;
|
|
4693
|
-
color: color-mix(in oklch, currentColor 50%, #0000);
|
|
4694
|
-
}
|
|
4695
|
-
audio,
|
|
4696
|
-
canvas,
|
|
4697
|
-
embed,
|
|
4698
|
-
iframe,
|
|
4699
|
-
img,
|
|
4700
|
-
object,
|
|
4701
|
-
svg,
|
|
4702
|
-
video {
|
|
4703
|
-
display: block;
|
|
4704
|
-
vertical-align: middle;
|
|
4705
|
-
}
|
|
4706
|
-
img,
|
|
4707
|
-
video {
|
|
4708
|
-
max-width: 100%;
|
|
4709
|
-
height: auto;
|
|
4710
|
-
}
|
|
4711
|
-
}
|
|
4712
5183
|
@layer base {
|
|
4713
5184
|
:where(
|
|
4714
5185
|
:root:has(
|