vrembem 4.0.0-next.13 → 4.0.0-next.15
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/dev/{components.css → base.css} +29 -500
- package/dev/base.css.map +1 -0
- package/dev/index.css +447 -540
- package/dev/index.css.map +1 -1
- package/dev/root.css +29 -8
- package/dev/root.css.map +1 -1
- package/dist/base.css +1 -0
- package/dist/base.css.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/root.css +1 -1
- package/dist/root.css.map +1 -1
- package/package.json +23 -23
- package/dev/components.css.map +0 -1
- package/dist/components.css +0 -1
- package/dist/components.css.map +0 -1
package/dev/index.css
CHANGED
|
@@ -671,72 +671,6 @@ input::-moz-placeholder {
|
|
|
671
671
|
--vb-button-line-height: var(--vb-line-height-lg);
|
|
672
672
|
}
|
|
673
673
|
|
|
674
|
-
:root {
|
|
675
|
-
--vb-button-size: var(--vb-form-control-size);
|
|
676
|
-
--vb-button-padding: calc(0.5em - 1px) 1em;
|
|
677
|
-
--vb-button-gap: 0.5rem;
|
|
678
|
-
--vb-button-border-width: 1px;
|
|
679
|
-
--vb-button-border-radius: var(--vb-border-radius);
|
|
680
|
-
--vb-button-font-size: 1em;
|
|
681
|
-
--vb-button-font-weight: inherit;
|
|
682
|
-
--vb-button-line-height: 1.6;
|
|
683
|
-
--vb-button-disabled-opacity: 0.6;
|
|
684
|
-
--vb-button-transition-property: background, color, border-color, box-shadow;
|
|
685
|
-
--vb-button-transition-duration: var(--vb-transition-duration);
|
|
686
|
-
--vb-button-transition-timing-function: var(--vb-transition-timing-function);
|
|
687
|
-
--vb-button-loading-size: 1em;
|
|
688
|
-
--vb-button-loading-border: 2px solid;
|
|
689
|
-
--vb-button-loading-animation-duration: 0.6s;
|
|
690
|
-
--vb-button-loading-animation-timing-function: linear;
|
|
691
|
-
}
|
|
692
|
-
|
|
693
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
694
|
-
--vb-button-background: transparent;
|
|
695
|
-
--vb-button-background-hover: transparent;
|
|
696
|
-
--vb-button-background-focus: transparent;
|
|
697
|
-
--vb-button-foreground: var(--vb-foreground);
|
|
698
|
-
--vb-button-foreground-hover: var(--vb-foreground);
|
|
699
|
-
--vb-button-foreground-focus: var(--vb-foreground);
|
|
700
|
-
--vb-button-border-color: var(--vb-border-color-dark);
|
|
701
|
-
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
702
|
-
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
703
|
-
--vb-button-loading-border-color: var(--vb-foreground);
|
|
704
|
-
--vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
705
|
-
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
@media (prefers-color-scheme: dark) {
|
|
709
|
-
:root, .vb-theme-root {
|
|
710
|
-
--vb-button-background: transparent;
|
|
711
|
-
--vb-button-background-hover: transparent;
|
|
712
|
-
--vb-button-background-focus: transparent;
|
|
713
|
-
--vb-button-foreground: var(--vb-foreground);
|
|
714
|
-
--vb-button-foreground-hover: var(--vb-foreground);
|
|
715
|
-
--vb-button-foreground-focus: var(--vb-foreground);
|
|
716
|
-
--vb-button-border-color: var(--vb-border-color-dark);
|
|
717
|
-
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
718
|
-
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
719
|
-
--vb-button-loading-border-color: var(--vb-foreground);
|
|
720
|
-
--vb-button-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
721
|
-
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
|
|
722
|
-
}
|
|
723
|
-
}
|
|
724
|
-
|
|
725
|
-
.vb-theme-dark {
|
|
726
|
-
--vb-button-background: transparent;
|
|
727
|
-
--vb-button-background-hover: transparent;
|
|
728
|
-
--vb-button-background-focus: transparent;
|
|
729
|
-
--vb-button-foreground: var(--vb-foreground);
|
|
730
|
-
--vb-button-foreground-hover: var(--vb-foreground);
|
|
731
|
-
--vb-button-foreground-focus: var(--vb-foreground);
|
|
732
|
-
--vb-button-border-color: var(--vb-border-color-dark);
|
|
733
|
-
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
734
|
-
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
735
|
-
--vb-button-loading-border-color: var(--vb-foreground);
|
|
736
|
-
--vb-button-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
737
|
-
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
|
|
738
|
-
}
|
|
739
|
-
|
|
740
674
|
.card {
|
|
741
675
|
position: relative;
|
|
742
676
|
display: flex;
|
|
@@ -842,53 +776,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
842
776
|
opacity: var(--vb-card-screen-opacity);
|
|
843
777
|
}
|
|
844
778
|
|
|
845
|
-
:root {
|
|
846
|
-
--vb-card-padding: 1.25em;
|
|
847
|
-
--vb-card-border-radius: var(--vb-border-radius);
|
|
848
|
-
--vb-card-box-shadow: var(--vb-box-shadow-1);
|
|
849
|
-
--vb-card-link-box-shadow: var(--vb-box-shadow-2);
|
|
850
|
-
--vb-card-link-box-shadow-hover: var(--vb-box-shadow-3);
|
|
851
|
-
--vb-card-link-offset: -0.25em;
|
|
852
|
-
--vb-card-title-font-size: var(--vb-font-size-lg);
|
|
853
|
-
--vb-card-title-line-height: var(--vb-line-height-lg);
|
|
854
|
-
--vb-card-title-font-weight: var(--vb-font-weight-semi-bold);
|
|
855
|
-
--vb-card-transition-property: background-color, border-color, box-shadow, transform;
|
|
856
|
-
--vb-card-transition-duration: var(--vb-transition-duration);
|
|
857
|
-
--vb-card-transition-timing-function: var(--vb-transition-timing-function);
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
861
|
-
--vb-card-background: var(--vb-background);
|
|
862
|
-
--vb-card-foreground: var(--vb-foreground-light);
|
|
863
|
-
--vb-card-border: 1px solid var(--vb-border-color);
|
|
864
|
-
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
865
|
-
--vb-card-title-color: var(--vb-foreground);
|
|
866
|
-
--vb-card-screen-background: var(--vb-background);
|
|
867
|
-
--vb-card-screen-opacity: 0.9;
|
|
868
|
-
}
|
|
869
|
-
|
|
870
|
-
@media (prefers-color-scheme: dark) {
|
|
871
|
-
:root, .vb-theme-root {
|
|
872
|
-
--vb-card-background: var(--vb-background-darker);
|
|
873
|
-
--vb-card-foreground: var(--vb-foreground-light);
|
|
874
|
-
--vb-card-border: 1px solid var(--vb-border-color);
|
|
875
|
-
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
876
|
-
--vb-card-title-color: var(--vb-foreground);
|
|
877
|
-
--vb-card-screen-background: var(--vb-background-darker);
|
|
878
|
-
--vb-card-screen-opacity: 0.8;
|
|
879
|
-
}
|
|
880
|
-
}
|
|
881
|
-
|
|
882
|
-
.vb-theme-dark {
|
|
883
|
-
--vb-card-background: var(--vb-background-darker);
|
|
884
|
-
--vb-card-foreground: var(--vb-foreground-light);
|
|
885
|
-
--vb-card-border: 1px solid var(--vb-border-color);
|
|
886
|
-
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
887
|
-
--vb-card-title-color: var(--vb-foreground);
|
|
888
|
-
--vb-card-screen-background: var(--vb-background-darker);
|
|
889
|
-
--vb-card-screen-opacity: 0.8;
|
|
890
|
-
}
|
|
891
|
-
|
|
892
779
|
.checkbox {
|
|
893
780
|
position: relative;
|
|
894
781
|
display: inline-flex;
|
|
@@ -907,7 +794,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
907
794
|
align-items: center;
|
|
908
795
|
justify-content: center;
|
|
909
796
|
border-radius: var(--vb-checkbox-background-border-radius);
|
|
910
|
-
background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity));
|
|
797
|
+
background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity));
|
|
911
798
|
}
|
|
912
799
|
|
|
913
800
|
.checkbox__box {
|
|
@@ -944,21 +831,21 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
944
831
|
cursor: pointer;
|
|
945
832
|
}
|
|
946
833
|
.checkbox__native:hover + .checkbox__background {
|
|
947
|
-
background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity-hover));
|
|
834
|
+
background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity-hover));
|
|
948
835
|
}
|
|
949
836
|
.checkbox__native:hover + .checkbox__background .checkbox__box {
|
|
950
837
|
border-color: var(--vb-checkbox-color);
|
|
951
838
|
background-color: var(--vb-checkbox-fill);
|
|
952
839
|
}
|
|
953
840
|
.checkbox__native:focus + .checkbox__background {
|
|
954
|
-
background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity-focus));
|
|
841
|
+
background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity-focus));
|
|
955
842
|
}
|
|
956
843
|
.checkbox__native:focus + .checkbox__background .checkbox__box {
|
|
957
844
|
border-color: var(--vb-checkbox-color);
|
|
958
845
|
background-color: var(--vb-checkbox-fill);
|
|
959
846
|
}
|
|
960
847
|
.checkbox__native:focus-visible + .checkbox__background, .checkbox__native:active + .checkbox__background {
|
|
961
|
-
background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity-active));
|
|
848
|
+
background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity-active));
|
|
962
849
|
}
|
|
963
850
|
.checkbox__native:focus-visible + .checkbox__background .checkbox__box, .checkbox__native:active + .checkbox__background .checkbox__box {
|
|
964
851
|
border-color: var(--vb-checkbox-color);
|
|
@@ -1017,43 +904,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
1017
904
|
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
|
|
1018
905
|
}
|
|
1019
906
|
|
|
1020
|
-
:root {
|
|
1021
|
-
--vb-checkbox-size: var(--vb-form-control-size);
|
|
1022
|
-
--vb-checkbox-box-size: 18px;
|
|
1023
|
-
--vb-checkbox-icon-size: 12px;
|
|
1024
|
-
--vb-checkbox-icon-stroke: 2.5;
|
|
1025
|
-
--vb-checkbox-color: var(--vb-primary-50);
|
|
1026
|
-
--vb-checkbox-border-width: 2px;
|
|
1027
|
-
--vb-checkbox-border-radius: var(--vb-border-radius);
|
|
1028
|
-
--vb-checkbox-background-border-radius: var(--vb-border-radius-circle);
|
|
1029
|
-
--vb-checkbox-background-opacity: 0%;
|
|
1030
|
-
--vb-checkbox-background-opacity-hover: 20%;
|
|
1031
|
-
--vb-checkbox-background-opacity-focus: 20%;
|
|
1032
|
-
--vb-checkbox-background-opacity-active: 30%;
|
|
1033
|
-
--vb-checkbox-transition-duration: var(--vb-transition-duration-short);
|
|
1034
|
-
--vb-checkbox-transition-timing-function: var(--vb-transition-timing-function);
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
1038
|
-
--vb-checkbox-fill: white;
|
|
1039
|
-
--vb-checkbox-border-color: var(--vb-neutral-50);
|
|
1040
|
-
--vb-checkbox-icon-color: white;
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
@media (prefers-color-scheme: dark) {
|
|
1044
|
-
:root, .vb-theme-root {
|
|
1045
|
-
--vb-checkbox-fill: var(--vb-neutral-10);
|
|
1046
|
-
--vb-checkbox-border-color: var(--vb-neutral-80);
|
|
1047
|
-
--vb-checkbox-icon-color: var(--vb-neutral-10);
|
|
1048
|
-
}
|
|
1049
|
-
}
|
|
1050
|
-
|
|
1051
|
-
.vb-theme-dark {
|
|
1052
|
-
--vb-checkbox-fill: var(--vb-neutral-10);
|
|
1053
|
-
--vb-checkbox-border-color: var(--vb-neutral-80);
|
|
1054
|
-
--vb-checkbox-icon-color: var(--vb-neutral-10);
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
907
|
.dialog {
|
|
1058
908
|
position: relative;
|
|
1059
909
|
display: flex;
|
|
@@ -1110,39 +960,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
1110
960
|
line-height: var(--vb-dialog-title-line-height);
|
|
1111
961
|
}
|
|
1112
962
|
|
|
1113
|
-
:root {
|
|
1114
|
-
--vb-dialog-padding: 1em;
|
|
1115
|
-
--vb-dialog-gap: 0.5em;
|
|
1116
|
-
--vb-dialog-border-radius: var(--vb-border-radius);
|
|
1117
|
-
--vb-dialog-box-shadow: var(--vb-box-shadow-4);
|
|
1118
|
-
--vb-dialog-title-font-size: var(--vb-font-size-lg);
|
|
1119
|
-
--vb-dialog-title-line-height: var(--vb-line-height-lg);
|
|
1120
|
-
--vb-dialog-title-font-weight: var(--vb-font-weight-semi-bold);
|
|
1121
|
-
}
|
|
1122
|
-
|
|
1123
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
1124
|
-
--vb-dialog-foreground: var(--vb-foreground);
|
|
1125
|
-
--vb-dialog-background: var(--vb-background);
|
|
1126
|
-
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
1127
|
-
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
1128
|
-
}
|
|
1129
|
-
|
|
1130
|
-
@media (prefers-color-scheme: dark) {
|
|
1131
|
-
:root, .vb-theme-root {
|
|
1132
|
-
--vb-dialog-foreground: var(--vb-foreground);
|
|
1133
|
-
--vb-dialog-background: var(--vb-background);
|
|
1134
|
-
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
1135
|
-
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
1136
|
-
}
|
|
1137
|
-
}
|
|
1138
|
-
|
|
1139
|
-
.vb-theme-dark {
|
|
1140
|
-
--vb-dialog-foreground: var(--vb-foreground);
|
|
1141
|
-
--vb-dialog-background: var(--vb-background);
|
|
1142
|
-
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
1143
|
-
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
1144
|
-
}
|
|
1145
|
-
|
|
1146
963
|
/**
|
|
1147
964
|
* Required structure styles
|
|
1148
965
|
*/
|
|
@@ -1373,11 +1190,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
1373
1190
|
transform: translateX(100%);
|
|
1374
1191
|
}
|
|
1375
1192
|
|
|
1376
|
-
:root {
|
|
1377
|
-
--vb-drawer-transition-duration: var(--vb-transition-duration);
|
|
1378
|
-
--vb-drawer-transition-timing-function: var(--vb-transition-timing-function);
|
|
1379
|
-
}
|
|
1380
|
-
|
|
1381
1193
|
.flex {
|
|
1382
1194
|
display: flex;
|
|
1383
1195
|
gap: var(--vb-flex-gap-y, var(--vb-flex-gap)) var(--vb-flex-gap-x, var(--vb-flex-gap));
|
|
@@ -2180,11 +1992,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
2180
1992
|
flex-basis: 100%;
|
|
2181
1993
|
}
|
|
2182
1994
|
|
|
2183
|
-
:root {
|
|
2184
|
-
--vb-flex-gap: 1em;
|
|
2185
|
-
--vb-flex-wrap: wrap;
|
|
2186
|
-
}
|
|
2187
|
-
|
|
2188
1995
|
.grid {
|
|
2189
1996
|
display: grid;
|
|
2190
1997
|
grid-auto-flow: var(--vb-grid-flow);
|
|
@@ -3673,13 +3480,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
3673
3480
|
grid-row-end: 7;
|
|
3674
3481
|
}
|
|
3675
3482
|
}
|
|
3676
|
-
:root {
|
|
3677
|
-
--vb-grid-cols: 1;
|
|
3678
|
-
--vb-grid-rows: 1;
|
|
3679
|
-
--vb-grid-flow: dense;
|
|
3680
|
-
--vb-grid-gap: 2em;
|
|
3681
|
-
}
|
|
3682
|
-
|
|
3683
3483
|
.icon {
|
|
3684
3484
|
stroke: var(--vb-icon-color);
|
|
3685
3485
|
stroke-width: var(--vb-icon-stroke-width);
|
|
@@ -3731,12 +3531,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
3731
3531
|
fill: var(--vb-icon-color);
|
|
3732
3532
|
}
|
|
3733
3533
|
|
|
3734
|
-
:root {
|
|
3735
|
-
--vb-icon-size: 1.5em;
|
|
3736
|
-
--vb-icon-stroke-width: 2;
|
|
3737
|
-
--vb-icon-color: currentcolor;
|
|
3738
|
-
}
|
|
3739
|
-
|
|
3740
3534
|
.input {
|
|
3741
3535
|
position: relative;
|
|
3742
3536
|
display: block;
|
|
@@ -3845,57 +3639,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
3845
3639
|
min-height: var(--vb-input-size);
|
|
3846
3640
|
}
|
|
3847
3641
|
|
|
3848
|
-
:root {
|
|
3849
|
-
--vb-input-size: var(--vb-form-control-size);
|
|
3850
|
-
--vb-input-padding: calc(0.5em - 1px);
|
|
3851
|
-
--vb-input-background-readonly: var(--vb-background-dark);
|
|
3852
|
-
--vb-input-background-disabled: var(--vb-background-darker);
|
|
3853
|
-
--vb-input-border-width: 1px;
|
|
3854
|
-
--vb-input-border-radius: var(--vb-border-radius);
|
|
3855
|
-
--vb-input-box-shadow: hsl(var(--vb-primary-hs) 50% / 0%);
|
|
3856
|
-
--vb-input-box-shadow-focus: hsl(var(--vb-primary-hs) 50% / 50%);
|
|
3857
|
-
--vb-input-box-shadow-inset: rgba(0, 0, 0, 0.1);
|
|
3858
|
-
--vb-input-box-shadow-inset-focus: rgba(0, 0, 0, 0);
|
|
3859
|
-
--vb-input-font-size: var(--vb-font-size);
|
|
3860
|
-
--vb-input-line-height: var(--vb-line-height);
|
|
3861
|
-
--vb-input-outline: none;
|
|
3862
|
-
--vb-input-transition-property: box-shadow, outline, outline-offset;
|
|
3863
|
-
--vb-input-transition-duration: 0.15s;
|
|
3864
|
-
--vb-input-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3865
|
-
}
|
|
3866
|
-
|
|
3867
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
3868
|
-
--vb-input-background: var(--vb-background);
|
|
3869
|
-
--vb-input-foreground: var(--vb-foreground);
|
|
3870
|
-
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
3871
|
-
--vb-input-border-color: var(--vb-border-color-dark);
|
|
3872
|
-
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
3873
|
-
--vb-input-border-color-focus: var(--vb-primary-50);
|
|
3874
|
-
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="black"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
3875
|
-
}
|
|
3876
|
-
|
|
3877
|
-
@media (prefers-color-scheme: dark) {
|
|
3878
|
-
:root, .vb-theme-root {
|
|
3879
|
-
--vb-input-background: var(--vb-background);
|
|
3880
|
-
--vb-input-foreground: var(--vb-foreground);
|
|
3881
|
-
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
3882
|
-
--vb-input-border-color: var(--vb-border-color-dark);
|
|
3883
|
-
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
3884
|
-
--vb-input-border-color-focus: var(--vb-primary-60);
|
|
3885
|
-
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="white"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
3886
|
-
}
|
|
3887
|
-
}
|
|
3888
|
-
|
|
3889
|
-
.vb-theme-dark {
|
|
3890
|
-
--vb-input-background: var(--vb-background);
|
|
3891
|
-
--vb-input-foreground: var(--vb-foreground);
|
|
3892
|
-
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
3893
|
-
--vb-input-border-color: var(--vb-border-color-dark);
|
|
3894
|
-
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
3895
|
-
--vb-input-border-color-focus: var(--vb-primary-60);
|
|
3896
|
-
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="white"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
3897
|
-
}
|
|
3898
|
-
|
|
3899
3642
|
.menu {
|
|
3900
3643
|
display: flex;
|
|
3901
3644
|
gap: var(--vb-menu-gap);
|
|
@@ -3995,49 +3738,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
3995
3738
|
--vb-menu-line-height: var(--vb-line-height-lg);
|
|
3996
3739
|
}
|
|
3997
3740
|
|
|
3998
|
-
:root {
|
|
3999
|
-
--vb-menu-size: var(--vb-form-control-size);
|
|
4000
|
-
--vb-menu-padding: var(--vb-form-control-padding);
|
|
4001
|
-
--vb-menu-padding-x: 0.5em;
|
|
4002
|
-
--vb-menu-gap: 1px;
|
|
4003
|
-
--vb-menu-border-width: 1px;
|
|
4004
|
-
--vb-menu-border-radius: var(--vb-border-radius);
|
|
4005
|
-
--vb-menu-outline-focus: 2px solid var(--vb-focus-visible);
|
|
4006
|
-
--vb-menu-font-size: var(--vb-font-size);
|
|
4007
|
-
--vb-menu-line-height: var(--vb-line-height);
|
|
4008
|
-
--vb-menu-action-gap: 0.5em;
|
|
4009
|
-
--vb-menu-sep-size: 1px;
|
|
4010
|
-
--vb-menu-sep-gap: 0.5em;
|
|
4011
|
-
--vb-menu-sep-background: var(--vb-border-color);
|
|
4012
|
-
--vb-menu-active-background: none;
|
|
4013
|
-
--vb-menu-active-foreground: var(--vb-primary-50);
|
|
4014
|
-
--vb-menu-disabled-background: none;
|
|
4015
|
-
--vb-menu-disabled-foreground: var(--vb-foreground-lighter);
|
|
4016
|
-
}
|
|
4017
|
-
|
|
4018
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
4019
|
-
--vb-menu-background: none;
|
|
4020
|
-
--vb-menu-background-hover: var(--vb-background-hover);
|
|
4021
|
-
--vb-menu-background-active: var(--vb-background-active);
|
|
4022
|
-
--vb-menu-foreground: var(--vb-foreground);
|
|
4023
|
-
}
|
|
4024
|
-
|
|
4025
|
-
@media (prefers-color-scheme: dark) {
|
|
4026
|
-
:root, .vb-theme-root {
|
|
4027
|
-
--vb-menu-background: none;
|
|
4028
|
-
--vb-menu-background-hover: var(--vb-background-hover);
|
|
4029
|
-
--vb-menu-background-active: var(--vb-background-active);
|
|
4030
|
-
--vb-menu-foreground: var(--vb-foreground);
|
|
4031
|
-
}
|
|
4032
|
-
}
|
|
4033
|
-
|
|
4034
|
-
.vb-theme-dark {
|
|
4035
|
-
--vb-menu-background: none;
|
|
4036
|
-
--vb-menu-background-hover: var(--vb-background-hover);
|
|
4037
|
-
--vb-menu-background-active: var(--vb-background-active);
|
|
4038
|
-
--vb-menu-foreground: var(--vb-foreground);
|
|
4039
|
-
}
|
|
4040
|
-
|
|
4041
3741
|
.modal {
|
|
4042
3742
|
position: fixed;
|
|
4043
3743
|
z-index: 1000;
|
|
@@ -4194,11 +3894,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4194
3894
|
width: 60em;
|
|
4195
3895
|
}
|
|
4196
3896
|
|
|
4197
|
-
:root {
|
|
4198
|
-
--vb-modal-transition-duration: var(--vb-transition-duration);
|
|
4199
|
-
--vb-modal-transition-timing-function: var(--vb-transition-timing-function);
|
|
4200
|
-
}
|
|
4201
|
-
|
|
4202
3897
|
.notice {
|
|
4203
3898
|
padding: var(--vb-notice-padding);
|
|
4204
3899
|
border: var(--vb-notice-border);
|
|
@@ -4237,32 +3932,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4237
3932
|
--vb-notice-foreground: var(--vb-important-30);
|
|
4238
3933
|
}
|
|
4239
3934
|
|
|
4240
|
-
:root {
|
|
4241
|
-
--vb-notice-gap: 0.5em;
|
|
4242
|
-
--vb-notice-padding: 1em;
|
|
4243
|
-
--vb-notice-border-radius: var(--vb-border-radius);
|
|
4244
|
-
--vb-notice-title-font-size: var(--vb-font-size-lg);
|
|
4245
|
-
--vb-notice-title-line-height: var(--vb-line-height-lg);
|
|
4246
|
-
--vb-notice-title-font-weight: var(--vb-font-weight-semi-bold);
|
|
4247
|
-
}
|
|
4248
|
-
|
|
4249
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
4250
|
-
--vb-notice-background: var(--vb-neutral-95);
|
|
4251
|
-
--vb-notice-foreground: var(--vb-neutral-20);
|
|
4252
|
-
}
|
|
4253
|
-
|
|
4254
|
-
@media (prefers-color-scheme: dark) {
|
|
4255
|
-
:root, .vb-theme-root {
|
|
4256
|
-
--vb-notice-background: var(--vb-neutral-20);
|
|
4257
|
-
--vb-notice-foreground: var(--vb-neutral-95);
|
|
4258
|
-
}
|
|
4259
|
-
}
|
|
4260
|
-
|
|
4261
|
-
.vb-theme-dark {
|
|
4262
|
-
--vb-notice-background: var(--vb-neutral-20);
|
|
4263
|
-
--vb-notice-foreground: var(--vb-neutral-95);
|
|
4264
|
-
}
|
|
4265
|
-
|
|
4266
3935
|
.popover {
|
|
4267
3936
|
position: absolute;
|
|
4268
3937
|
z-index: 10;
|
|
@@ -4403,13 +4072,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4403
4072
|
color: var(--vb-background);
|
|
4404
4073
|
}
|
|
4405
4074
|
|
|
4406
|
-
:root {
|
|
4407
|
-
--vb-popover-offset: 8;
|
|
4408
|
-
--vb-popover-overflow-padding: 10;
|
|
4409
|
-
--vb-popover-flip-padding: 10;
|
|
4410
|
-
--vb-popover-arrow-padding: 10;
|
|
4411
|
-
}
|
|
4412
|
-
|
|
4413
4075
|
.radio {
|
|
4414
4076
|
position: relative;
|
|
4415
4077
|
display: inline-flex;
|
|
@@ -4428,7 +4090,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4428
4090
|
align-items: center;
|
|
4429
4091
|
justify-content: center;
|
|
4430
4092
|
border-radius: var(--vb-radio-background-border-radius);
|
|
4431
|
-
background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity));
|
|
4093
|
+
background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity));
|
|
4432
4094
|
}
|
|
4433
4095
|
|
|
4434
4096
|
.radio__circle {
|
|
@@ -4462,21 +4124,21 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4462
4124
|
cursor: pointer;
|
|
4463
4125
|
}
|
|
4464
4126
|
.radio__native:hover + .radio__background {
|
|
4465
|
-
background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity-hover));
|
|
4127
|
+
background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity-hover));
|
|
4466
4128
|
}
|
|
4467
4129
|
.radio__native:hover + .radio__background .radio__circle {
|
|
4468
4130
|
border-color: var(--vb-radio-color);
|
|
4469
4131
|
background-color: var(--vb-radio-fill);
|
|
4470
4132
|
}
|
|
4471
4133
|
.radio__native:focus + .radio__background {
|
|
4472
|
-
background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity-focus));
|
|
4134
|
+
background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity-focus));
|
|
4473
4135
|
}
|
|
4474
4136
|
.radio__native:focus + .radio__background .radio__circle {
|
|
4475
4137
|
border-color: var(--vb-radio-color);
|
|
4476
4138
|
background-color: var(--vb-radio-fill);
|
|
4477
4139
|
}
|
|
4478
4140
|
.radio__native:focus-visible + .radio__background, .radio__native:active + .radio__background {
|
|
4479
|
-
background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity-active));
|
|
4141
|
+
background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity-active));
|
|
4480
4142
|
}
|
|
4481
4143
|
.radio__native:focus-visible + .radio__background .radio__circle, .radio__native:active + .radio__background .radio__circle {
|
|
4482
4144
|
border-color: var(--vb-radio-color);
|
|
@@ -4510,42 +4172,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4510
4172
|
--vb-radio-dot-size: 10px;
|
|
4511
4173
|
}
|
|
4512
4174
|
|
|
4513
|
-
:root {
|
|
4514
|
-
--vb-radio-size: var(--vb-form-control-size);
|
|
4515
|
-
--vb-radio-circle-size: 20px;
|
|
4516
|
-
--vb-radio-dot-size: 8px;
|
|
4517
|
-
--vb-radio-color: var(--vb-primary-50);
|
|
4518
|
-
--vb-radio-border-width: 2px;
|
|
4519
|
-
--vb-radio-background-border-radius: var(--vb-border-radius-circle);
|
|
4520
|
-
--vb-radio-background-opacity: 0%;
|
|
4521
|
-
--vb-radio-background-opacity-hover: 20%;
|
|
4522
|
-
--vb-radio-background-opacity-focus: 20%;
|
|
4523
|
-
--vb-radio-background-opacity-active: 30%;
|
|
4524
|
-
--vb-radio-transition-duration: var(--vb-transition-duration-short);
|
|
4525
|
-
--vb-radio-transition-timing-function: var(--vb-transition-timing-function);
|
|
4526
|
-
}
|
|
4527
|
-
|
|
4528
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
4529
|
-
--vb-radio-fill: white;
|
|
4530
|
-
--vb-radio-border-color: var(--vb-neutral-50);
|
|
4531
|
-
--vb-radio-dot-color: white;
|
|
4532
|
-
}
|
|
4533
|
-
|
|
4534
|
-
@media (prefers-color-scheme: dark) {
|
|
4535
|
-
:root, .vb-theme-root {
|
|
4536
|
-
--vb-radio-fill: var(--vb-neutral-10);
|
|
4537
|
-
--vb-radio-border-color: var(--vb-neutral-80);
|
|
4538
|
-
--vb-radio-dot-color: var(--vb-neutral-10);
|
|
4539
|
-
}
|
|
4540
|
-
}
|
|
4541
|
-
|
|
4542
|
-
.vb-theme-dark {
|
|
4543
|
-
--vb-radio-fill: var(--vb-neutral-10);
|
|
4544
|
-
--vb-radio-border-color: var(--vb-neutral-80);
|
|
4545
|
-
--vb-radio-dot-color: var(--vb-neutral-10);
|
|
4546
|
-
}
|
|
4547
|
-
|
|
4548
4175
|
.section {
|
|
4176
|
+
--vb-section-padding: 1.5em;
|
|
4549
4177
|
position: relative;
|
|
4550
4178
|
display: flex;
|
|
4551
4179
|
flex-direction: column;
|
|
@@ -4553,6 +4181,16 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4553
4181
|
background: var(--vb-section-background);
|
|
4554
4182
|
color: var(--vb-section-foreground);
|
|
4555
4183
|
}
|
|
4184
|
+
@media (min-width: 760px) {
|
|
4185
|
+
.section {
|
|
4186
|
+
--vb-section-padding: 2em 1.5em;
|
|
4187
|
+
}
|
|
4188
|
+
}
|
|
4189
|
+
@media (min-width: 990px) {
|
|
4190
|
+
.section {
|
|
4191
|
+
--vb-section-padding: 3em 1.5em;
|
|
4192
|
+
}
|
|
4193
|
+
}
|
|
4556
4194
|
|
|
4557
4195
|
.section__container {
|
|
4558
4196
|
position: relative;
|
|
@@ -4633,45 +4271,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4633
4271
|
}
|
|
4634
4272
|
}
|
|
4635
4273
|
|
|
4636
|
-
:root {
|
|
4637
|
-
--vb-section-max-width: 70rem;
|
|
4638
|
-
--vb-section-image-opacity: 1;
|
|
4639
|
-
--vb-section-padding: 1.5em;
|
|
4640
|
-
}
|
|
4641
|
-
@media (min-width: 760px) {
|
|
4642
|
-
:root {
|
|
4643
|
-
--vb-section-padding: 2em 1.5em;
|
|
4644
|
-
}
|
|
4645
|
-
}
|
|
4646
|
-
@media (min-width: 990px) {
|
|
4647
|
-
:root {
|
|
4648
|
-
--vb-section-padding: 3em 1.5em;
|
|
4649
|
-
}
|
|
4650
|
-
}
|
|
4651
|
-
|
|
4652
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
4653
|
-
--vb-section-background: transparent;
|
|
4654
|
-
--vb-section-foreground: var(--vb-foreground);
|
|
4655
|
-
--vb-section-screen-background: var(--vb-background);
|
|
4656
|
-
--vb-section-screen-opacity: 0.8;
|
|
4657
|
-
}
|
|
4658
|
-
|
|
4659
|
-
@media (prefers-color-scheme: dark) {
|
|
4660
|
-
:root, .vb-theme-root {
|
|
4661
|
-
--vb-section-background: transparent;
|
|
4662
|
-
--vb-section-foreground: var(--vb-foreground);
|
|
4663
|
-
--vb-section-screen-background: var(--vb-background);
|
|
4664
|
-
--vb-section-screen-opacity: 0.7;
|
|
4665
|
-
}
|
|
4666
|
-
}
|
|
4667
|
-
|
|
4668
|
-
.vb-theme-dark {
|
|
4669
|
-
--vb-section-background: transparent;
|
|
4670
|
-
--vb-section-foreground: var(--vb-foreground);
|
|
4671
|
-
--vb-section-screen-background: var(--vb-background);
|
|
4672
|
-
--vb-section-screen-opacity: 0.7;
|
|
4673
|
-
}
|
|
4674
|
-
|
|
4675
4274
|
.switch {
|
|
4676
4275
|
position: relative;
|
|
4677
4276
|
display: inline-flex;
|
|
@@ -4701,7 +4300,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4701
4300
|
left: calc(var(--vb-switch-size) * 0.25 * -1);
|
|
4702
4301
|
transition: left var(--vb-switch-transition-duration) var(--vb-switch-transition-timing-function);
|
|
4703
4302
|
border-radius: var(--vb-switch-background-border-radius);
|
|
4704
|
-
background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity));
|
|
4303
|
+
background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity));
|
|
4705
4304
|
}
|
|
4706
4305
|
|
|
4707
4306
|
.switch__track {
|
|
@@ -4739,7 +4338,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4739
4338
|
cursor: pointer;
|
|
4740
4339
|
}
|
|
4741
4340
|
.switch__native:hover + .switch__background::after {
|
|
4742
|
-
background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity-hover));
|
|
4341
|
+
background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity-hover));
|
|
4743
4342
|
}
|
|
4744
4343
|
.switch__native:hover + .switch__background .switch__track {
|
|
4745
4344
|
border-color: var(--vb-switch-border-color);
|
|
@@ -4749,7 +4348,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4749
4348
|
box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
|
|
4750
4349
|
}
|
|
4751
4350
|
.switch__native:focus + .switch__background::after {
|
|
4752
|
-
background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity-focus));
|
|
4351
|
+
background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity-focus));
|
|
4753
4352
|
}
|
|
4754
4353
|
.switch__native:focus + .switch__background .switch__track {
|
|
4755
4354
|
border-color: var(--vb-switch-border-color);
|
|
@@ -4759,7 +4358,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4759
4358
|
box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
|
|
4760
4359
|
}
|
|
4761
4360
|
.switch__native:focus-visible + .switch__background::after, .switch__native:active + .switch__background::after {
|
|
4762
|
-
background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity-active));
|
|
4361
|
+
background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity-active));
|
|
4763
4362
|
}
|
|
4764
4363
|
.switch__native:focus-visible + .switch__background .switch__track, .switch__native:active + .switch__background .switch__track {
|
|
4765
4364
|
border-color: var(--vb-switch-border-color);
|
|
@@ -4792,41 +4391,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
4792
4391
|
--vb-switch-track-size: 26px;
|
|
4793
4392
|
}
|
|
4794
4393
|
|
|
4795
|
-
:root {
|
|
4796
|
-
--vb-switch-size: var(--vb-form-control-size);
|
|
4797
|
-
--vb-switch-track-size: 20px;
|
|
4798
|
-
--vb-switch-color: var(--vb-primary-50);
|
|
4799
|
-
--vb-switch-border-width: 2px;
|
|
4800
|
-
--vb-switch-border-radius: var(--vb-border-radius-circle);
|
|
4801
|
-
--vb-switch-background-border-radius: var(--vb-border-radius-circle);
|
|
4802
|
-
--vb-switch-background-opacity: 0%;
|
|
4803
|
-
--vb-switch-background-opacity-hover: 20%;
|
|
4804
|
-
--vb-switch-background-opacity-focus: 20%;
|
|
4805
|
-
--vb-switch-background-opacity-active: 30%;
|
|
4806
|
-
--vb-switch-transition-duration: var(--vb-transition-duration-short);
|
|
4807
|
-
--vb-switch-transition-timing-function: var(--vb-transition-timing-function);
|
|
4808
|
-
}
|
|
4809
|
-
|
|
4810
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
4811
|
-
--vb-switch-thumb-fill: white;
|
|
4812
|
-
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
4813
|
-
--vb-switch-border-color: var(--vb-neutral-50);
|
|
4814
|
-
}
|
|
4815
|
-
|
|
4816
|
-
@media (prefers-color-scheme: dark) {
|
|
4817
|
-
:root, .vb-theme-root {
|
|
4818
|
-
--vb-switch-thumb-fill: var(--vb-neutral-10);
|
|
4819
|
-
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
4820
|
-
--vb-switch-border-color: var(--vb-neutral-80);
|
|
4821
|
-
}
|
|
4822
|
-
}
|
|
4823
|
-
|
|
4824
|
-
.vb-theme-dark {
|
|
4825
|
-
--vb-switch-thumb-fill: var(--vb-neutral-10);
|
|
4826
|
-
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
4827
|
-
--vb-switch-border-color: var(--vb-neutral-80);
|
|
4828
|
-
}
|
|
4829
|
-
|
|
4830
4394
|
.table {
|
|
4831
4395
|
width: 100%;
|
|
4832
4396
|
background-color: var(--vb-table-background);
|
|
@@ -5222,41 +4786,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
5222
4786
|
background-color: var(--vb-table-background-zebra);
|
|
5223
4787
|
}
|
|
5224
4788
|
|
|
5225
|
-
:root {
|
|
5226
|
-
--vb-table-padding: 0.5em 0.75em;
|
|
5227
|
-
--vb-table-mobile-label-width: 8em;
|
|
5228
|
-
--vb-table-mobile-label-spacing: 0.75em;
|
|
5229
|
-
}
|
|
5230
|
-
|
|
5231
|
-
:root, .vb-theme-root, .vb-theme-light {
|
|
5232
|
-
--vb-table-background: var(--vb-background);
|
|
5233
|
-
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 6%);
|
|
5234
|
-
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
5235
|
-
--vb-table-border: 1px solid var(--vb-border-color);
|
|
5236
|
-
--vb-table-border-alt: 1px dotted var(--vb-border-color);
|
|
5237
|
-
--vb-table-foreground: var(--vb-foreground);
|
|
5238
|
-
}
|
|
5239
|
-
|
|
5240
|
-
@media (prefers-color-scheme: dark) {
|
|
5241
|
-
:root, .vb-theme-root {
|
|
5242
|
-
--vb-table-background: var(--vb-background);
|
|
5243
|
-
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 10%);
|
|
5244
|
-
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
5245
|
-
--vb-table-border: 1px solid var(--vb-border-color-dark);
|
|
5246
|
-
--vb-table-border-alt: 1px dotted var(--vb-border-color-dark);
|
|
5247
|
-
--vb-table-foreground: var(--vb-foreground);
|
|
5248
|
-
}
|
|
5249
|
-
}
|
|
5250
|
-
|
|
5251
|
-
.vb-theme-dark {
|
|
5252
|
-
--vb-table-background: var(--vb-background);
|
|
5253
|
-
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 10%);
|
|
5254
|
-
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
5255
|
-
--vb-table-border: 1px solid var(--vb-border-color-dark);
|
|
5256
|
-
--vb-table-border-alt: 1px dotted var(--vb-border-color-dark);
|
|
5257
|
-
--vb-table-foreground: var(--vb-foreground);
|
|
5258
|
-
}
|
|
5259
|
-
|
|
5260
4789
|
.background-clip-border {
|
|
5261
4790
|
background-clip: border-box !important;
|
|
5262
4791
|
}
|
|
@@ -5862,23 +5391,23 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
5862
5391
|
}
|
|
5863
5392
|
|
|
5864
5393
|
.border {
|
|
5865
|
-
border:
|
|
5394
|
+
border: var(--vb-border) !important;
|
|
5866
5395
|
}
|
|
5867
5396
|
|
|
5868
5397
|
.border-top {
|
|
5869
|
-
border-top:
|
|
5398
|
+
border-top: var(--vb-border) !important;
|
|
5870
5399
|
}
|
|
5871
5400
|
|
|
5872
5401
|
.border-bottom {
|
|
5873
|
-
border-bottom:
|
|
5402
|
+
border-bottom: var(--vb-border) !important;
|
|
5874
5403
|
}
|
|
5875
5404
|
|
|
5876
5405
|
.border-left {
|
|
5877
|
-
border-left:
|
|
5406
|
+
border-left: var(--vb-border) !important;
|
|
5878
5407
|
}
|
|
5879
5408
|
|
|
5880
5409
|
.border-right {
|
|
5881
|
-
border-right:
|
|
5410
|
+
border-right: var(--vb-border) !important;
|
|
5882
5411
|
}
|
|
5883
5412
|
|
|
5884
5413
|
.border-none {
|
|
@@ -7641,7 +7170,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
7641
7170
|
--vb-important-100: hsl(var(--vb-important-hs) 100%);
|
|
7642
7171
|
}
|
|
7643
7172
|
|
|
7644
|
-
:root, .vb-theme-root
|
|
7173
|
+
:root, .vb-theme-root {
|
|
7645
7174
|
--vb-background: var(--vb-neutral-100);
|
|
7646
7175
|
--vb-background-dark: var(--vb-neutral-98);
|
|
7647
7176
|
--vb-background-darker: var(--vb-neutral-95);
|
|
@@ -7659,40 +7188,225 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
7659
7188
|
--vb-shadow-color: hsl(var(--vb-neutral-hs) 20% / 20%);
|
|
7660
7189
|
--vb-focus-visible: var(--vb-primary-50);
|
|
7661
7190
|
color-scheme: light;
|
|
7662
|
-
|
|
7663
|
-
|
|
7664
|
-
|
|
7665
|
-
:
|
|
7666
|
-
|
|
7667
|
-
|
|
7668
|
-
|
|
7669
|
-
|
|
7670
|
-
|
|
7671
|
-
|
|
7672
|
-
|
|
7673
|
-
|
|
7674
|
-
|
|
7675
|
-
|
|
7676
|
-
|
|
7677
|
-
|
|
7678
|
-
|
|
7679
|
-
|
|
7680
|
-
|
|
7681
|
-
|
|
7682
|
-
|
|
7683
|
-
|
|
7684
|
-
|
|
7685
|
-
|
|
7686
|
-
|
|
7687
|
-
--vb-
|
|
7688
|
-
--vb-background
|
|
7689
|
-
--vb-
|
|
7690
|
-
--vb-
|
|
7691
|
-
--vb-
|
|
7692
|
-
--vb-
|
|
7693
|
-
--vb-
|
|
7694
|
-
--vb-
|
|
7695
|
-
--vb-
|
|
7191
|
+
--vb-button-background: transparent;
|
|
7192
|
+
--vb-button-background-hover: transparent;
|
|
7193
|
+
--vb-button-background-focus: transparent;
|
|
7194
|
+
--vb-button-foreground: var(--vb-foreground);
|
|
7195
|
+
--vb-button-foreground-hover: var(--vb-foreground);
|
|
7196
|
+
--vb-button-foreground-focus: var(--vb-foreground);
|
|
7197
|
+
--vb-button-border-color: var(--vb-border-color-dark);
|
|
7198
|
+
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
7199
|
+
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
7200
|
+
--vb-button-loading-border-color: var(--vb-foreground);
|
|
7201
|
+
--vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
7202
|
+
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
|
|
7203
|
+
--vb-card-background: var(--vb-background);
|
|
7204
|
+
--vb-card-foreground: var(--vb-foreground-light);
|
|
7205
|
+
--vb-card-border: 1px solid var(--vb-border-color);
|
|
7206
|
+
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
7207
|
+
--vb-card-title-color: var(--vb-foreground);
|
|
7208
|
+
--vb-card-screen-background: var(--vb-background);
|
|
7209
|
+
--vb-card-screen-opacity: 0.9;
|
|
7210
|
+
--vb-checkbox-fill: white;
|
|
7211
|
+
--vb-checkbox-border-color: var(--vb-neutral-50);
|
|
7212
|
+
--vb-checkbox-icon-color: white;
|
|
7213
|
+
--vb-dialog-background: var(--vb-background);
|
|
7214
|
+
--vb-dialog-foreground: var(--vb-foreground);
|
|
7215
|
+
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
7216
|
+
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
7217
|
+
--vb-input-background: var(--vb-background);
|
|
7218
|
+
--vb-input-foreground: var(--vb-foreground);
|
|
7219
|
+
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
7220
|
+
--vb-input-border-color: var(--vb-border-color-dark);
|
|
7221
|
+
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
7222
|
+
--vb-input-border-color-focus: var(--vb-primary-50);
|
|
7223
|
+
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="black"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
7224
|
+
--vb-menu-background: none;
|
|
7225
|
+
--vb-menu-background-hover: var(--vb-background-hover);
|
|
7226
|
+
--vb-menu-background-active: var(--vb-background-active);
|
|
7227
|
+
--vb-menu-foreground: var(--vb-foreground);
|
|
7228
|
+
--vb-notice-background: var(--vb-neutral-95);
|
|
7229
|
+
--vb-notice-foreground: var(--vb-neutral-20);
|
|
7230
|
+
--vb-radio-fill: white;
|
|
7231
|
+
--vb-radio-border-color: var(--vb-neutral-50);
|
|
7232
|
+
--vb-radio-dot-color: white;
|
|
7233
|
+
--vb-section-background: transparent;
|
|
7234
|
+
--vb-section-foreground: var(--vb-foreground);
|
|
7235
|
+
--vb-section-screen-background: var(--vb-background);
|
|
7236
|
+
--vb-section-screen-opacity: 0.8;
|
|
7237
|
+
--vb-switch-thumb-fill: white;
|
|
7238
|
+
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
7239
|
+
--vb-switch-border-color: var(--vb-neutral-50);
|
|
7240
|
+
--vb-table-background: var(--vb-background);
|
|
7241
|
+
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 6%);
|
|
7242
|
+
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
7243
|
+
--vb-table-border: 1px solid var(--vb-border-color);
|
|
7244
|
+
--vb-table-border-alt: 1px dotted var(--vb-border-color);
|
|
7245
|
+
--vb-table-foreground: var(--vb-foreground);
|
|
7246
|
+
}
|
|
7247
|
+
@media (prefers-color-scheme: dark) {
|
|
7248
|
+
:root, .vb-theme-root {
|
|
7249
|
+
--vb-background: var(--vb-neutral-10);
|
|
7250
|
+
--vb-background-dark: var(--vb-neutral-12);
|
|
7251
|
+
--vb-background-darker: var(--vb-neutral-15);
|
|
7252
|
+
--vb-background-alt: hsl(var(--vb-secondary-hs) 70% / 10%);
|
|
7253
|
+
--vb-background-hover: rgba(255, 255, 255, 0.05);
|
|
7254
|
+
--vb-background-focus: rgba(255, 255, 255, 0.05);
|
|
7255
|
+
--vb-background-active: rgba(255, 255, 255, 0.01);
|
|
7256
|
+
--vb-foreground: var(--vb-neutral-90);
|
|
7257
|
+
--vb-foreground-light: var(--vb-neutral-70);
|
|
7258
|
+
--vb-foreground-lighter: var(--vb-neutral-50);
|
|
7259
|
+
--vb-foreground-alt: var(--vb-secondary-60);
|
|
7260
|
+
--vb-border-color: rgba(255, 255, 255, 0.1);
|
|
7261
|
+
--vb-border-color-dark: rgba(255, 255, 255, 0.2);
|
|
7262
|
+
--vb-border-color-darker: rgba(255, 255, 255, 0.3);
|
|
7263
|
+
--vb-shadow-color: hsl(var(--vb-neutral-hs) 0% / 20%);
|
|
7264
|
+
--vb-focus-visible: var(--vb-primary-50);
|
|
7265
|
+
--vb-color-scheme: light;
|
|
7266
|
+
color-scheme: dark;
|
|
7267
|
+
--vb-button-background: transparent;
|
|
7268
|
+
--vb-button-background-hover: transparent;
|
|
7269
|
+
--vb-button-background-focus: transparent;
|
|
7270
|
+
--vb-button-foreground: var(--vb-foreground);
|
|
7271
|
+
--vb-button-foreground-hover: var(--vb-foreground);
|
|
7272
|
+
--vb-button-foreground-focus: var(--vb-foreground);
|
|
7273
|
+
--vb-button-border-color: var(--vb-border-color-dark);
|
|
7274
|
+
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
7275
|
+
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
7276
|
+
--vb-button-loading-border-color: var(--vb-foreground);
|
|
7277
|
+
--vb-button-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
7278
|
+
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
|
|
7279
|
+
--vb-card-background: var(--vb-background-darker);
|
|
7280
|
+
--vb-card-foreground: var(--vb-foreground-light);
|
|
7281
|
+
--vb-card-border: 1px solid var(--vb-border-color);
|
|
7282
|
+
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
7283
|
+
--vb-card-title-color: var(--vb-foreground);
|
|
7284
|
+
--vb-card-screen-background: var(--vb-background-darker);
|
|
7285
|
+
--vb-card-screen-opacity: 0.8;
|
|
7286
|
+
--vb-checkbox-fill: var(--vb-neutral-10);
|
|
7287
|
+
--vb-checkbox-border-color: var(--vb-neutral-80);
|
|
7288
|
+
--vb-checkbox-icon-color: var(--vb-neutral-10);
|
|
7289
|
+
--vb-dialog-background: var(--vb-background);
|
|
7290
|
+
--vb-dialog-foreground: var(--vb-foreground);
|
|
7291
|
+
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
7292
|
+
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
7293
|
+
--vb-input-background: var(--vb-background);
|
|
7294
|
+
--vb-input-foreground: var(--vb-foreground);
|
|
7295
|
+
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
7296
|
+
--vb-input-border-color: var(--vb-border-color-dark);
|
|
7297
|
+
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
7298
|
+
--vb-input-border-color-focus: var(--vb-primary-60);
|
|
7299
|
+
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="white"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
7300
|
+
--vb-menu-background: none;
|
|
7301
|
+
--vb-menu-background-hover: var(--vb-background-hover);
|
|
7302
|
+
--vb-menu-background-active: var(--vb-background-active);
|
|
7303
|
+
--vb-menu-foreground: var(--vb-foreground);
|
|
7304
|
+
--vb-notice-background: var(--vb-neutral-20);
|
|
7305
|
+
--vb-notice-foreground: var(--vb-neutral-95);
|
|
7306
|
+
--vb-radio-fill: var(--vb-neutral-10);
|
|
7307
|
+
--vb-radio-border-color: var(--vb-neutral-80);
|
|
7308
|
+
--vb-radio-dot-color: var(--vb-neutral-10);
|
|
7309
|
+
--vb-section-background: transparent;
|
|
7310
|
+
--vb-section-foreground: var(--vb-foreground);
|
|
7311
|
+
--vb-section-screen-background: var(--vb-background);
|
|
7312
|
+
--vb-section-screen-opacity: 0.7;
|
|
7313
|
+
--vb-switch-thumb-fill: var(--vb-neutral-10);
|
|
7314
|
+
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
7315
|
+
--vb-switch-border-color: var(--vb-neutral-80);
|
|
7316
|
+
--vb-table-background: var(--vb-background);
|
|
7317
|
+
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 10%);
|
|
7318
|
+
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
7319
|
+
--vb-table-border: 1px solid var(--vb-border-color-dark);
|
|
7320
|
+
--vb-table-border-alt: 1px dotted var(--vb-border-color-dark);
|
|
7321
|
+
--vb-table-foreground: var(--vb-foreground);
|
|
7322
|
+
}
|
|
7323
|
+
}
|
|
7324
|
+
|
|
7325
|
+
.vb-theme-light {
|
|
7326
|
+
--vb-background: var(--vb-neutral-100);
|
|
7327
|
+
--vb-background-dark: var(--vb-neutral-98);
|
|
7328
|
+
--vb-background-darker: var(--vb-neutral-95);
|
|
7329
|
+
--vb-background-alt: hsl(var(--vb-secondary-hs) 60% / 10%);
|
|
7330
|
+
--vb-background-hover: rgba(0, 0, 0, 0.05);
|
|
7331
|
+
--vb-background-focus: rgba(0, 0, 0, 0.05);
|
|
7332
|
+
--vb-background-active: rgba(0, 0, 0, 0.1);
|
|
7333
|
+
--vb-foreground: var(--vb-neutral-20);
|
|
7334
|
+
--vb-foreground-light: var(--vb-neutral-40);
|
|
7335
|
+
--vb-foreground-lighter: var(--vb-neutral-60);
|
|
7336
|
+
--vb-foreground-alt: var(--vb-secondary-50);
|
|
7337
|
+
--vb-border-color: rgba(0, 0, 0, 0.1);
|
|
7338
|
+
--vb-border-color-dark: rgba(0, 0, 0, 0.2);
|
|
7339
|
+
--vb-border-color-darker: rgba(0, 0, 0, 0.3);
|
|
7340
|
+
--vb-shadow-color: hsl(var(--vb-neutral-hs) 20% / 20%);
|
|
7341
|
+
--vb-focus-visible: var(--vb-primary-50);
|
|
7342
|
+
color-scheme: light;
|
|
7343
|
+
--vb-button-background: transparent;
|
|
7344
|
+
--vb-button-background-hover: transparent;
|
|
7345
|
+
--vb-button-background-focus: transparent;
|
|
7346
|
+
--vb-button-foreground: var(--vb-foreground);
|
|
7347
|
+
--vb-button-foreground-hover: var(--vb-foreground);
|
|
7348
|
+
--vb-button-foreground-focus: var(--vb-foreground);
|
|
7349
|
+
--vb-button-border-color: var(--vb-border-color-dark);
|
|
7350
|
+
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
7351
|
+
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
7352
|
+
--vb-button-loading-border-color: var(--vb-foreground);
|
|
7353
|
+
--vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
7354
|
+
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
|
|
7355
|
+
--vb-card-background: var(--vb-background);
|
|
7356
|
+
--vb-card-foreground: var(--vb-foreground-light);
|
|
7357
|
+
--vb-card-border: 1px solid var(--vb-border-color);
|
|
7358
|
+
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
7359
|
+
--vb-card-title-color: var(--vb-foreground);
|
|
7360
|
+
--vb-card-screen-background: var(--vb-background);
|
|
7361
|
+
--vb-card-screen-opacity: 0.9;
|
|
7362
|
+
--vb-checkbox-fill: white;
|
|
7363
|
+
--vb-checkbox-border-color: var(--vb-neutral-50);
|
|
7364
|
+
--vb-checkbox-icon-color: white;
|
|
7365
|
+
--vb-dialog-background: var(--vb-background);
|
|
7366
|
+
--vb-dialog-foreground: var(--vb-foreground);
|
|
7367
|
+
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
7368
|
+
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
7369
|
+
--vb-input-background: var(--vb-background);
|
|
7370
|
+
--vb-input-foreground: var(--vb-foreground);
|
|
7371
|
+
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
7372
|
+
--vb-input-border-color: var(--vb-border-color-dark);
|
|
7373
|
+
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
7374
|
+
--vb-input-border-color-focus: var(--vb-primary-50);
|
|
7375
|
+
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="black"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
7376
|
+
--vb-menu-background: none;
|
|
7377
|
+
--vb-menu-background-hover: var(--vb-background-hover);
|
|
7378
|
+
--vb-menu-background-active: var(--vb-background-active);
|
|
7379
|
+
--vb-menu-foreground: var(--vb-foreground);
|
|
7380
|
+
--vb-notice-background: var(--vb-neutral-95);
|
|
7381
|
+
--vb-notice-foreground: var(--vb-neutral-20);
|
|
7382
|
+
--vb-radio-fill: white;
|
|
7383
|
+
--vb-radio-border-color: var(--vb-neutral-50);
|
|
7384
|
+
--vb-radio-dot-color: white;
|
|
7385
|
+
--vb-section-background: transparent;
|
|
7386
|
+
--vb-section-foreground: var(--vb-foreground);
|
|
7387
|
+
--vb-section-screen-background: var(--vb-background);
|
|
7388
|
+
--vb-section-screen-opacity: 0.8;
|
|
7389
|
+
--vb-switch-thumb-fill: white;
|
|
7390
|
+
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
7391
|
+
--vb-switch-border-color: var(--vb-neutral-50);
|
|
7392
|
+
--vb-table-background: var(--vb-background);
|
|
7393
|
+
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 6%);
|
|
7394
|
+
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
7395
|
+
--vb-table-border: 1px solid var(--vb-border-color);
|
|
7396
|
+
--vb-table-border-alt: 1px dotted var(--vb-border-color);
|
|
7397
|
+
--vb-table-foreground: var(--vb-foreground);
|
|
7398
|
+
}
|
|
7399
|
+
|
|
7400
|
+
.vb-theme-dark {
|
|
7401
|
+
--vb-background: var(--vb-neutral-10);
|
|
7402
|
+
--vb-background-dark: var(--vb-neutral-12);
|
|
7403
|
+
--vb-background-darker: var(--vb-neutral-15);
|
|
7404
|
+
--vb-background-alt: hsl(var(--vb-secondary-hs) 70% / 10%);
|
|
7405
|
+
--vb-background-hover: rgba(255, 255, 255, 0.05);
|
|
7406
|
+
--vb-background-focus: rgba(255, 255, 255, 0.05);
|
|
7407
|
+
--vb-background-active: rgba(255, 255, 255, 0.01);
|
|
7408
|
+
--vb-foreground: var(--vb-neutral-90);
|
|
7409
|
+
--vb-foreground-light: var(--vb-neutral-70);
|
|
7696
7410
|
--vb-foreground-lighter: var(--vb-neutral-50);
|
|
7697
7411
|
--vb-foreground-alt: var(--vb-secondary-60);
|
|
7698
7412
|
--vb-border-color: rgba(255, 255, 255, 0.1);
|
|
@@ -7700,7 +7414,63 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
7700
7414
|
--vb-border-color-darker: rgba(255, 255, 255, 0.3);
|
|
7701
7415
|
--vb-shadow-color: hsl(var(--vb-neutral-hs) 0% / 20%);
|
|
7702
7416
|
--vb-focus-visible: var(--vb-primary-50);
|
|
7417
|
+
--vb-color-scheme: light;
|
|
7703
7418
|
color-scheme: dark;
|
|
7419
|
+
--vb-button-background: transparent;
|
|
7420
|
+
--vb-button-background-hover: transparent;
|
|
7421
|
+
--vb-button-background-focus: transparent;
|
|
7422
|
+
--vb-button-foreground: var(--vb-foreground);
|
|
7423
|
+
--vb-button-foreground-hover: var(--vb-foreground);
|
|
7424
|
+
--vb-button-foreground-focus: var(--vb-foreground);
|
|
7425
|
+
--vb-button-border-color: var(--vb-border-color-dark);
|
|
7426
|
+
--vb-button-border-color-hover: var(--vb-border-color-darker);
|
|
7427
|
+
--vb-button-border-color-focus: var(--vb-border-color-darker);
|
|
7428
|
+
--vb-button-loading-border-color: var(--vb-foreground);
|
|
7429
|
+
--vb-button-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
7430
|
+
--vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
|
|
7431
|
+
--vb-card-background: var(--vb-background-darker);
|
|
7432
|
+
--vb-card-foreground: var(--vb-foreground-light);
|
|
7433
|
+
--vb-card-border: 1px solid var(--vb-border-color);
|
|
7434
|
+
--vb-card-sep-border: 1px solid var(--vb-border-color);
|
|
7435
|
+
--vb-card-title-color: var(--vb-foreground);
|
|
7436
|
+
--vb-card-screen-background: var(--vb-background-darker);
|
|
7437
|
+
--vb-card-screen-opacity: 0.8;
|
|
7438
|
+
--vb-checkbox-fill: var(--vb-neutral-10);
|
|
7439
|
+
--vb-checkbox-border-color: var(--vb-neutral-80);
|
|
7440
|
+
--vb-checkbox-icon-color: var(--vb-neutral-10);
|
|
7441
|
+
--vb-dialog-background: var(--vb-background);
|
|
7442
|
+
--vb-dialog-foreground: var(--vb-foreground);
|
|
7443
|
+
--vb-dialog-border: 1px solid var(--vb-border-color);
|
|
7444
|
+
--vb-dialog-sep-border: 1px solid var(--vb-border-color);
|
|
7445
|
+
--vb-input-background: var(--vb-background);
|
|
7446
|
+
--vb-input-foreground: var(--vb-foreground);
|
|
7447
|
+
--vb-input-foreground-placeholder: var(--vb-foreground-lighter);
|
|
7448
|
+
--vb-input-border-color: var(--vb-border-color-dark);
|
|
7449
|
+
--vb-input-border-color-hover: var(--vb-border-color-darker);
|
|
7450
|
+
--vb-input-border-color-focus: var(--vb-primary-60);
|
|
7451
|
+
--vb-input-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="white"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
|
|
7452
|
+
--vb-menu-background: none;
|
|
7453
|
+
--vb-menu-background-hover: var(--vb-background-hover);
|
|
7454
|
+
--vb-menu-background-active: var(--vb-background-active);
|
|
7455
|
+
--vb-menu-foreground: var(--vb-foreground);
|
|
7456
|
+
--vb-notice-background: var(--vb-neutral-20);
|
|
7457
|
+
--vb-notice-foreground: var(--vb-neutral-95);
|
|
7458
|
+
--vb-radio-fill: var(--vb-neutral-10);
|
|
7459
|
+
--vb-radio-border-color: var(--vb-neutral-80);
|
|
7460
|
+
--vb-radio-dot-color: var(--vb-neutral-10);
|
|
7461
|
+
--vb-section-background: transparent;
|
|
7462
|
+
--vb-section-foreground: var(--vb-foreground);
|
|
7463
|
+
--vb-section-screen-background: var(--vb-background);
|
|
7464
|
+
--vb-section-screen-opacity: 0.7;
|
|
7465
|
+
--vb-switch-thumb-fill: var(--vb-neutral-10);
|
|
7466
|
+
--vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
|
|
7467
|
+
--vb-switch-border-color: var(--vb-neutral-80);
|
|
7468
|
+
--vb-table-background: var(--vb-background);
|
|
7469
|
+
--vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 10%);
|
|
7470
|
+
--vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
|
|
7471
|
+
--vb-table-border: 1px solid var(--vb-border-color-dark);
|
|
7472
|
+
--vb-table-border-alt: 1px dotted var(--vb-border-color-dark);
|
|
7473
|
+
--vb-table-foreground: var(--vb-foreground);
|
|
7704
7474
|
}
|
|
7705
7475
|
|
|
7706
7476
|
:root {
|
|
@@ -7717,6 +7487,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
7717
7487
|
--vb-gap-md: 1em;
|
|
7718
7488
|
--vb-gap-lg: 1.5em;
|
|
7719
7489
|
--vb-gap-xl: 2em;
|
|
7490
|
+
--vb-form-control-padding: 0.5em 1em;
|
|
7491
|
+
--vb-form-control-padding-sm: 0.25em 0.75em;
|
|
7492
|
+
--vb-form-control-padding-lg: 0.648rem 1.5rem;
|
|
7493
|
+
--vb-form-control-size: 2.5rem;
|
|
7494
|
+
--vb-form-control-size-sm: 1.875rem;
|
|
7495
|
+
--vb-form-control-size-lg: 3.125rem;
|
|
7720
7496
|
--vb-border: 1px solid var(--vb-border-color);
|
|
7721
7497
|
--vb-border-width: 1px;
|
|
7722
7498
|
--vb-border-style: solid;
|
|
@@ -7750,16 +7526,147 @@ a.card:hover, a.card:focus, a.card:focus-within {
|
|
|
7750
7526
|
--vb-font-weight-bold: 700;
|
|
7751
7527
|
--vb-font-weight-extra-bold: 800;
|
|
7752
7528
|
--vb-font-weight-black: 900;
|
|
7753
|
-
--vb-form-control-padding: 0.5em 1em;
|
|
7754
|
-
--vb-form-control-padding-sm: 0.25em 0.75em;
|
|
7755
|
-
--vb-form-control-padding-lg: 0.648rem 1.5rem;
|
|
7756
|
-
--vb-form-control-size: 2.5rem;
|
|
7757
|
-
--vb-form-control-size-sm: 1.875rem;
|
|
7758
|
-
--vb-form-control-size-lg: 3.125rem;
|
|
7759
7529
|
--vb-transition-duration: 0.3s;
|
|
7760
7530
|
--vb-transition-duration-short: 0.15s;
|
|
7761
7531
|
--vb-transition-duration-long: 0.6s;
|
|
7762
7532
|
--vb-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
7533
|
+
--vb-button-size: var(--vb-form-control-size);
|
|
7534
|
+
--vb-button-padding: calc(0.5em - 1px) 1em;
|
|
7535
|
+
--vb-button-gap: 0.5rem;
|
|
7536
|
+
--vb-button-border-width: 1px;
|
|
7537
|
+
--vb-button-border-radius: var(--vb-border-radius);
|
|
7538
|
+
--vb-button-font-size: 1em;
|
|
7539
|
+
--vb-button-font-weight: inherit;
|
|
7540
|
+
--vb-button-line-height: 1.6;
|
|
7541
|
+
--vb-button-disabled-opacity: 0.6;
|
|
7542
|
+
--vb-button-transition-property: background, color, border-color, box-shadow;
|
|
7543
|
+
--vb-button-transition-duration: var(--vb-transition-duration);
|
|
7544
|
+
--vb-button-transition-timing-function: var(--vb-transition-timing-function);
|
|
7545
|
+
--vb-button-loading-size: 1em;
|
|
7546
|
+
--vb-button-loading-border: 2px solid;
|
|
7547
|
+
--vb-button-loading-animation-duration: 0.6s;
|
|
7548
|
+
--vb-button-loading-animation-timing-function: linear;
|
|
7549
|
+
--vb-card-padding: 1.25em;
|
|
7550
|
+
--vb-card-border-radius: var(--vb-border-radius);
|
|
7551
|
+
--vb-card-box-shadow: var(--vb-box-shadow-1);
|
|
7552
|
+
--vb-card-link-box-shadow: var(--vb-box-shadow-2);
|
|
7553
|
+
--vb-card-link-box-shadow-hover: var(--vb-box-shadow-3);
|
|
7554
|
+
--vb-card-link-offset: -0.25em;
|
|
7555
|
+
--vb-card-title-font-size: var(--vb-font-size-lg);
|
|
7556
|
+
--vb-card-title-line-height: var(--vb-line-height-lg);
|
|
7557
|
+
--vb-card-title-font-weight: var(--vb-font-weight-semi-bold);
|
|
7558
|
+
--vb-card-transition-property: background-color, border-color, box-shadow, transform;
|
|
7559
|
+
--vb-card-transition-duration: var(--vb-transition-duration);
|
|
7560
|
+
--vb-card-transition-timing-function: var(--vb-transition-timing-function);
|
|
7561
|
+
--vb-checkbox-size: var(--vb-form-control-size);
|
|
7562
|
+
--vb-checkbox-box-size: 18px;
|
|
7563
|
+
--vb-checkbox-icon-size: 12px;
|
|
7564
|
+
--vb-checkbox-icon-stroke: 2.5;
|
|
7565
|
+
--vb-checkbox-color: var(--vb-primary-50);
|
|
7566
|
+
--vb-checkbox-border-width: 2px;
|
|
7567
|
+
--vb-checkbox-border-radius: var(--vb-border-radius);
|
|
7568
|
+
--vb-checkbox-background-color: var(--vb-primary-50);
|
|
7569
|
+
--vb-checkbox-background-border-radius: var(--vb-border-radius-circle);
|
|
7570
|
+
--vb-checkbox-background-opacity: 0%;
|
|
7571
|
+
--vb-checkbox-background-opacity-hover: 20%;
|
|
7572
|
+
--vb-checkbox-background-opacity-focus: 20%;
|
|
7573
|
+
--vb-checkbox-background-opacity-active: 30%;
|
|
7574
|
+
--vb-checkbox-transition-duration: var(--vb-transition-duration-short);
|
|
7575
|
+
--vb-checkbox-transition-timing-function: var(--vb-transition-timing-function);
|
|
7576
|
+
--vb-dialog-padding: 1em;
|
|
7577
|
+
--vb-dialog-gap: 0.5em;
|
|
7578
|
+
--vb-dialog-border-radius: var(--vb-border-radius);
|
|
7579
|
+
--vb-dialog-box-shadow: var(--vb-box-shadow-4);
|
|
7580
|
+
--vb-dialog-title-font-size: var(--vb-font-size-lg);
|
|
7581
|
+
--vb-dialog-title-line-height: var(--vb-line-height-lg);
|
|
7582
|
+
--vb-dialog-title-font-weight: var(--vb-font-weight-semi-bold);
|
|
7583
|
+
--vb-drawer-transition-duration: var(--vb-transition-duration);
|
|
7584
|
+
--vb-drawer-transition-timing-function: var(--vb-transition-timing-function);
|
|
7585
|
+
--vb-flex-gap: 1em;
|
|
7586
|
+
--vb-flex-wrap: wrap;
|
|
7587
|
+
--vb-grid-cols: 1;
|
|
7588
|
+
--vb-grid-rows: 1;
|
|
7589
|
+
--vb-grid-flow: dense;
|
|
7590
|
+
--vb-grid-gap: 2em;
|
|
7591
|
+
--vb-icon-size: 1.5em;
|
|
7592
|
+
--vb-icon-stroke-width: 2;
|
|
7593
|
+
--vb-icon-color: currentcolor;
|
|
7594
|
+
--vb-input-size: var(--vb-form-control-size);
|
|
7595
|
+
--vb-input-padding: calc(0.5em - 1px);
|
|
7596
|
+
--vb-input-background-readonly: var(--vb-background-dark);
|
|
7597
|
+
--vb-input-background-disabled: var(--vb-background-darker);
|
|
7598
|
+
--vb-input-border-width: 1px;
|
|
7599
|
+
--vb-input-border-radius: var(--vb-border-radius);
|
|
7600
|
+
--vb-input-box-shadow: hsl(var(--vb-primary-hs) 50% / 0%);
|
|
7601
|
+
--vb-input-box-shadow-focus: hsl(var(--vb-primary-hs) 50% / 50%);
|
|
7602
|
+
--vb-input-box-shadow-inset: rgba(0, 0, 0, 0.1);
|
|
7603
|
+
--vb-input-box-shadow-inset-focus: rgba(0, 0, 0, 0);
|
|
7604
|
+
--vb-input-font-size: var(--vb-font-size);
|
|
7605
|
+
--vb-input-line-height: var(--vb-line-height);
|
|
7606
|
+
--vb-input-outline: none;
|
|
7607
|
+
--vb-input-transition-property: box-shadow, outline, outline-offset;
|
|
7608
|
+
--vb-input-transition-duration: 0.15s;
|
|
7609
|
+
--vb-input-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
7610
|
+
--vb-menu-size: var(--vb-form-control-size);
|
|
7611
|
+
--vb-menu-padding: var(--vb-form-control-padding);
|
|
7612
|
+
--vb-menu-padding-x: 0.5em;
|
|
7613
|
+
--vb-menu-gap: 1px;
|
|
7614
|
+
--vb-menu-border-width: 1px;
|
|
7615
|
+
--vb-menu-border-radius: var(--vb-border-radius);
|
|
7616
|
+
--vb-menu-outline-focus: 2px solid var(--vb-focus-visible);
|
|
7617
|
+
--vb-menu-font-size: var(--vb-font-size);
|
|
7618
|
+
--vb-menu-line-height: var(--vb-line-height);
|
|
7619
|
+
--vb-menu-action-gap: 0.5em;
|
|
7620
|
+
--vb-menu-sep-size: 1px;
|
|
7621
|
+
--vb-menu-sep-gap: 0.5em;
|
|
7622
|
+
--vb-menu-sep-background: var(--vb-border-color);
|
|
7623
|
+
--vb-menu-active-background: none;
|
|
7624
|
+
--vb-menu-active-foreground: var(--vb-primary-50);
|
|
7625
|
+
--vb-menu-disabled-background: none;
|
|
7626
|
+
--vb-menu-disabled-foreground: var(--vb-foreground-lighter);
|
|
7627
|
+
--vb-modal-transition-duration: var(--vb-transition-duration);
|
|
7628
|
+
--vb-modal-transition-timing-function: var(--vb-transition-timing-function);
|
|
7629
|
+
--vb-notice-gap: 0.5em;
|
|
7630
|
+
--vb-notice-padding: 1em;
|
|
7631
|
+
--vb-notice-border-radius: var(--vb-border-radius);
|
|
7632
|
+
--vb-notice-title-font-size: var(--vb-font-size-lg);
|
|
7633
|
+
--vb-notice-title-line-height: var(--vb-line-height-lg);
|
|
7634
|
+
--vb-notice-title-font-weight: var(--vb-font-weight-semi-bold);
|
|
7635
|
+
--vb-popover-offset: 8;
|
|
7636
|
+
--vb-popover-overflow-padding: 10;
|
|
7637
|
+
--vb-popover-flip-padding: 10;
|
|
7638
|
+
--vb-popover-arrow-padding: 10;
|
|
7639
|
+
--vb-radio-size: var(--vb-form-control-size);
|
|
7640
|
+
--vb-radio-circle-size: 20px;
|
|
7641
|
+
--vb-radio-dot-size: 8px;
|
|
7642
|
+
--vb-radio-color: var(--vb-primary-50);
|
|
7643
|
+
--vb-radio-border-width: 2px;
|
|
7644
|
+
--vb-radio-background-color: var(--vb-primary-50);
|
|
7645
|
+
--vb-radio-background-border-radius: var(--vb-border-radius-circle);
|
|
7646
|
+
--vb-radio-background-opacity: 0%;
|
|
7647
|
+
--vb-radio-background-opacity-hover: 20%;
|
|
7648
|
+
--vb-radio-background-opacity-focus: 20%;
|
|
7649
|
+
--vb-radio-background-opacity-active: 30%;
|
|
7650
|
+
--vb-radio-transition-duration: var(--vb-transition-duration-short);
|
|
7651
|
+
--vb-radio-transition-timing-function: var(--vb-transition-timing-function);
|
|
7652
|
+
--vb-section-max-width: 70rem;
|
|
7653
|
+
--vb-section-image-opacity: 1;
|
|
7654
|
+
--vb-switch-size: var(--vb-form-control-size);
|
|
7655
|
+
--vb-switch-track-size: 20px;
|
|
7656
|
+
--vb-switch-color: var(--vb-primary-50);
|
|
7657
|
+
--vb-switch-border-width: 2px;
|
|
7658
|
+
--vb-switch-border-radius: var(--vb-border-radius-circle);
|
|
7659
|
+
--vb-switch-background-color: var(--vb-primary-50);
|
|
7660
|
+
--vb-switch-background-border-radius: var(--vb-border-radius-circle);
|
|
7661
|
+
--vb-switch-background-opacity: 0%;
|
|
7662
|
+
--vb-switch-background-opacity-hover: 20%;
|
|
7663
|
+
--vb-switch-background-opacity-focus: 20%;
|
|
7664
|
+
--vb-switch-background-opacity-active: 30%;
|
|
7665
|
+
--vb-switch-transition-duration: var(--vb-transition-duration-short);
|
|
7666
|
+
--vb-switch-transition-timing-function: var(--vb-transition-timing-function);
|
|
7667
|
+
--vb-table-padding: 0.5em 0.75em;
|
|
7668
|
+
--vb-table-mobile-label-width: 8em;
|
|
7669
|
+
--vb-table-mobile-label-spacing: 0.75em;
|
|
7763
7670
|
}
|
|
7764
7671
|
|
|
7765
7672
|
/*# sourceMappingURL=index.css.map */
|