1- /* Code Preview */
1+ /* DataSelector target*/
2+ .vp-ds-box {
3+ display : inline-block;
4+ }
5+ .vp-ds-filter {
6+ position : relative;
7+ width : 20px ;
8+ height : 20px ;
9+ right : 25px ;
10+ cursor : pointer;
11+ }
12+ .vp-ds-box input .vp-ds-target {
13+ padding-right : 23px ;
14+ }
15+ .vp-ds-box input .vp-ds-target : disabled {
16+ background : var (--light-gray-color )!important ;
17+ cursor : not-allowed;
18+ }
19+ .vp-ds-box input .vp-ds-target : disabled + .vp-ds-filter {
20+ cursor : not-allowed;
21+ }
22+ .vp-ds-item : hover {
23+ background : var (--light-gray-color );
24+ color : var (--font-highlight );
25+ cursor : pointer;
26+ }
27+ /* DataSelector popup */
228.vp-dataselector {
29+ display : none;
330position : absolute;
4- top : calc (50% - 200 px );
5- left : calc (50% - 200 px );
6- width : 400 px ;
7- height : 400 px ;
31+ top : calc (50% - 225 px );
32+ left : calc (50% - 300 px );
33+ width : 600 px ;
34+ height : 450 px ;
835background : white;
936border : 1px solidvar (--border-gray-color );
1037z-index : 999 ;
1340font-size : 14px ;
1441color : var (--font-primary );
1542}
43+ .vp-ds-data-box {
44+ width : 100% ;
45+ height : 100px ;
46+ align-content : baseline;
47+ align-items : center;
48+ }
49+ .vp-ds-type-box ,
1650.vp-ds-variable-box {
17- border : 1 px solidvar (--border-gray-color );
51+ border : 0.25 px solidvar (--border-gray-color );
1852height : 100px ;
1953grid-row-gap : 0px ;
54+ align-content : baseline;
2055}
56+ .vp-ds-type-item ,
2157.vp-ds-var-item {
58+ padding-left : 5px ;
2259height : 25px ;
60+ line-height : 25px ;
2361border-bottom : 1px solidvar (--border-gray-color );
2462}
63+ .vp-ds-type-item : hover ,
2564.vp-ds-var-item : hover {
2665background : var (--light-gray-color );
2766color : var (--font-highlight );
2867cursor : pointer;
2968}
69+ .vp-ds-type-item .selected ,
3070.vp-ds-var-item .selected {
3171background : var (--light-gray-color );
3272color : var (--font-highlight );
3373font-weight : bold;
3474}
35- .vp-ds-var-data {
36- padding-left : 5px ;
37- }
38- .vp-ds-var-type {
39- border-left : 1px solidvar (--border-gray-color );
40- padding-left : 5px ;
41- }
4275.vp-ds-option-box {
43-
44- }
45- .vp-ds-preview {
46- width : 100% ;
47- height : 35px ;
48- background-image : repeating-linear-gradient ( to right, var (--grid-line-color )0 , var (--grid-line-color )0.25px , transparent1px , transparent5px ), repeating-linear-gradient ( to bottom, var (--grid-line-color )0 , var (--grid-line-color )0.25px , transparent1px , transparent5px );
49- background-color : white;
50- border : 0.25px solid# E4E4E4 ;
51- }
52- .vp-ds-preview textarea {
53- display : none;
76+ height : calc (100% - 140px );
77+ margin-top : 10px ;
5478}
55- .vp-ds-preview . CodeMirror-code . cm-variable {
56- background-color : rgba ( 47 , 133 , 90 , 0.2 );
79+ .vp-ds-option-inner-box {
80+ height : calc ( 100 % - 30 px );
5781}
58- .vp-ds-preview .CodeMirror-code .cm-string {
59- background-color : rgba (246 , 173 , 85 , 0.2 );
82+ .vp-nd-row-box ,
83+ .vp-nd-col-box {
84+ height : 160px ;
6085}