1+ /* UDF Editor - CodeMirror */
2+ .vp-pm-body .CodeMirror {border : 1px solid silver; }
3+ .vp-pm-body .CodeMirror .CodeMirror-focused {border : 1px solidvar (--vp-highlight-color ); }
4+ .vp-pm-body .CodeMirror-empty {outline : 1px solid# c22 ; }
5+ .vp-pm-body .CodeMirror-empty .CodeMirror-focused {outline : none; }
6+ .vp-pm-body .CodeMirror pre .CodeMirror-placeholder {color : # 999 ; }
7+ .vp-pm-body .CodeMirror-scroll {min-height : 80px ;max-height : 250px ;}
8+
9+ .vp-pm-body {
10+ padding : 10px ;
11+ }
12+ .vp-pm-header {
13+ height : 30px ;
14+ }
15+ .vp-pm-header label {
16+ font-weight : bold;
17+ font-size : 14px ;
18+ line-height : 16px ;
19+ }
20+ .vp-pm-menu {
21+ float : right;
22+ cursor : pointer;
23+ position : relative;
24+ }
25+ .vp-pm-menu-box {
26+ display : none;
27+ position : absolute;
28+ width : 130px ;
29+ top : 23px ;
30+ right : 0px ;
31+ border : 0.25px solidvar (--vp-border-gray-color );
32+ border-radius : 3px ;
33+ background : var (--vp-background-color );
34+ padding : 5px ;
35+ z-index : 5 ;
36+ }
37+ .vp-pm-menu-item {
38+ height : 30px ;
39+ font-size : 14px ;
40+ line-height : 30px ;
41+ padding : 0px 5px ;
42+ cursor : pointer;
43+ }
44+ .vp-pm-menu-item : hover {
45+ color : var (--vp-font-highlight );
46+ }
47+ .vp-pm-search-box {
48+ position : relative;
49+ }
50+ .vp-pm-search-box .vp-pm-search {
51+ width : 100% !important ;
52+ height : 30px ;
53+ padding-right : 30px !important ;
54+ }
55+ .vp-pm-search-box .vp-pm-search-icon {
56+ position : absolute;
57+ color : # C4C4C4 ;
58+ right : 10px ;
59+ padding-top : 4px ;
60+
61+ /* LAB: img to background-image */
62+ background : center/ contain no-repeat url(../ ../ img/search.svg);
63+ width : 20px ;
64+ height : 20px ;
65+ top : 5px ;
66+ }
67+ .vp-pm-func-box {
68+ height : 50px ;
69+ padding : 10px 0px ;
70+ }
71+ .vp-pm-func-left {
72+ float : left;
73+ position : relative;
74+ }
75+ .vp-pm-func-right {
76+ float : right;
77+ }
78+ .vp-pm-sort {
79+ cursor : pointer;
80+ /* LAB: img to background-image */
81+ background : top/ contain no-repeat url(../ ../ img/snippets/sort.svg);
82+ height : 22px ;
83+ width : 22px ;
84+ }
85+ .vp-pm-sort-menu-box {
86+ display : none;
87+ position : absolute;
88+ width : 100px ;
89+ border : 0.25px solidvar (--vp-border-gray-color );
90+ background : var (--vp-background-color );
91+ padding : 5px ;
92+ z-index : 5 ;
93+ }
94+ .vp-pm-sort-menu-item {
95+ height : 25px ;
96+ line-height : 25px ;
97+ padding : 0px 5px ;
98+ cursor : pointer;
99+ }
100+ .vp-pm-sort-menu-item : hover {
101+ color : var (--vp-font-highlight );
102+ }
103+ /* Empty List */
104+ .vp-pm-table {
105+ margin-top : 10px ;
106+ display : grid;
107+ grid-row-gap : 5px ;
108+ }
109+ .vp-pm-table : empty ::after {
110+ content : '(No saved snippets)' ;
111+ color : # C4C4C4 ;
112+ }
113+ .vp-pm-table-header {
114+ height : 20px ;
115+ line-height : 20px ;
116+ padding : 0px 7px ;
117+ box-sizing : border-box;
118+ display : grid;
119+ grid-template-columns : 1fr 1fr 0.5fr ;
120+ }
121+ .vp-pm-item {
122+ min-height : 35px ;
123+ display : grid;
124+ grid-template-columns : calc (100% - 25px )25px ;
125+ }
126+ .vp-pm-item .selected {
127+ background : # F5F5F5 ;
128+ }
129+ .vp-pm-item-header {
130+ height : 35px ;
131+ line-height : 35px ;
132+ padding : 0px 7px ;
133+ border : 0.25px solidvar (--vp-border-gray-color );
134+ box-sizing : border-box;
135+ cursor : pointer;
136+ display : grid;
137+ grid-template-columns : 1fr 1fr 0.5fr ;
138+ }
139+ .vp-pm-item-header .selected {
140+ background : # F5F5F5 ;
141+ }
142+ .vp-pm-item-header .vp-pm-indicator {
143+ display : inline-block;
144+ cursor : pointer;
145+ background-image : url(../ ../ img/chevron_big_right.svg);
146+ background-size : contain;
147+ background-repeat : no-repeat;
148+ width : 10px ;
149+ height : 10px ;
150+ }
151+ .vp-pm-item-header .vp-pm-indicator .open {
152+ background-image : url(../ ../ img/chevron_big_down.svg)!important ;
153+ }
154+ .vp-pm-item-header input .vp-pm-item-title {
155+ width : calc (100% - 110px );
156+ outline : none;
157+ background : transparent;
158+ border : 0.5px solid transparent;
159+ cursor : pointer;
160+ }
161+ .vp-pm-item-header .selected input .vp-pm-item-title {
162+ color : var (--vp-font-highlight );
163+ }
164+ .vp-pm-item-header input .vp-pm-item-title : focus {
165+ transition : 0.7s ;
166+ border : 0.5px solidvar (--vp-highlight-color )!important ;
167+ cursor : text;
168+ }
169+ .vp-pm-item-menu {
170+ text-align : right;
171+ padding-right : 5px ;
172+ }
173+ .vp-pm-item-menu-item {
174+ display : inline-block;
175+ cursor : pointer;
176+ margin-left : 5px ;
177+ }
178+ .vp-pm-item-menu-item .vp-icon-install .disabled {
179+ background : center/ contain no-repeat url(../ ../ img/import_disabled.svg);
180+ cursor : not-allowed;
181+ }
182+ .vp-pm-item-menu-item .vp-icon-install : not (.disabled ): hover {
183+ background : center/ contain no-repeat url(../ ../ img/import_activated.svg);
184+ }
185+ .vp-pm-item-menu-item .vp-icon-upgrade .disabled {
186+ background : center/ contain no-repeat url(../ ../ img/upgrade_disabled.svg);
187+ cursor : not-allowed;
188+ }
189+ .vp-pm-item-menu-item .vp-icon-upgrade : not (.disabled ): hover {
190+ background : center/ contain no-repeat url(../ ../ img/upgrade_activated.svg);
191+ }
192+ .vp-pm-item-menu-item .vp-icon-delete {
193+ background : center/ contain no-repeat url(../ ../ img/delete.svg);
194+ }
195+ .vp-pm-item-menu-item .vp-icon-delete .disabled {
196+ background : center/ contain no-repeat url(../ ../ img/delete_disabled.svg);
197+ cursor : not-allowed;
198+ }
199+ .vp-pm-item-menu-item .vp-icon-delete : not (.disabled ): hover {
200+ background : center/ contain no-repeat url(../ ../ img/delete_activated.svg);
201+ }
202+ .vp-pm-item-delete {
203+ display : inline-block;
204+ cursor : pointer;
205+ margin-left : 5px ;
206+ margin-top : 8px ;
207+ }