|
4 | 4 | left: 0;
|
5 | 5 | width: 100%;
|
6 | 6 | height: 100%;
|
7 |
| - |
8 | 7 | z-index: 1200;
|
9 |
| - |
10 | 8 | background-color: rgba(0,0,0,.4);
|
11 | 9 | }
|
12 |
| - |
13 | 10 | .vp-fe-button {
|
14 | 11 | width: 45px;
|
15 | 12 | }
|
16 |
| - |
17 | 13 | .vp-fe-container {
|
18 | 14 | position: relative;
|
19 | 15 | left: 50%;
|
20 | 16 | top: 50%;
|
21 | 17 | transform:translate(-50%, -50%);
|
22 |
| - |
23 | 18 | min-width: 400px;
|
24 | 19 | min-height: 400px;
|
25 | 20 | width: 95%;
|
26 | 21 | height: 95%;
|
27 |
| - |
28 | 22 | background-color: white;
|
29 | 23 | }
|
30 |
| - |
31 | 24 | .vp-fe-title {
|
32 |
| - height: 30px; |
| 25 | + height: 40px; |
33 | 26 | padding: 5px 0px 5px 10px;
|
34 |
| - |
35 | 27 | background-color: #EEE;
|
36 | 28 | border: 1px solid #ddd;;
|
37 | 29 | display: flex;
|
38 | 30 | flex-direction: row;
|
39 | 31 | position: relative;
|
40 |
| - |
| 32 | + align-items: center; |
| 33 | + font-size: 16px; |
41 | 34 | font-weight: 700;
|
42 | 35 | }
|
43 |
| - |
44 | 36 | .vp-fe-close,
|
45 | 37 | .vp-fe-popup-close {
|
46 | 38 | position: fixed;
|
47 | 39 | z-index: 3;
|
48 | 40 | right: 5px;
|
49 |
| - width: 20px; |
| 41 | + width: 30px; |
50 | 42 | height: 20px;
|
51 | 43 | line-height: 20px;
|
52 |
| - top: 5px; |
| 44 | + top: 10px; |
53 | 45 | text-align: center;
|
54 | 46 | cursor: pointer;
|
55 | 47 | }
|
56 |
| - |
57 | 48 | .vp-fe-body {
|
58 | 49 | width: 100%;
|
59 | 50 | height: calc(100% - 80px);
|
|
64 | 55 | /* grid-template-rows: 35px 30px 60% calc(40% - 80px); */
|
65 | 56 | }
|
66 | 57 |
|
67 |
| -/* preview code */ |
| 58 | +/* Code Preview */ |
68 | 59 | .vp-fe-preview {
|
69 | 60 | width: 100%;
|
70 | 61 | height: 35px;
|
|
75 | 66 | .vp-fe-preview textarea {
|
76 | 67 | display: none;
|
77 | 68 | }
|
78 |
| - |
79 | 69 | .vp-fe-preview .CodeMirror-code .cm-variable {
|
80 | 70 | background-color: rgba(47, 133, 90, 0.2);
|
81 | 71 | }
|
82 |
| - |
83 | 72 | .vp-fe-preview .CodeMirror-code .cm-string {
|
84 | 73 | background-color: rgba(246, 173, 85, 0.2);
|
85 | 74 | }
|
86 |
| - |
87 | 75 | .vp-fe #vp_feVariable {
|
88 | 76 | width: 125px;
|
89 | 77 | margin-left: 5px;
|
90 | 78 | }
|
91 |
| - |
92 | 79 | .vp-fe-df-refresh {
|
93 | 80 | cursor: pointer;
|
94 | 81 | }
|
95 |
| - |
96 | 82 | .vp-fe-df-showinfo {
|
97 | 83 | cursor: pointer;
|
98 | 84 | float: right;
|
99 |
| - /* margin-top: 5px; |
100 |
| - margin-right: 5px; */ |
101 | 85 | width: fit-content;
|
102 | 86 | }
|
103 |
| - |
104 |
| - |
105 | 87 | .vp-fe-menu-box {
|
106 | 88 | position: fixed;
|
107 | 89 | top: 0;
|
|
111 | 93 | /* display: grid;
|
112 | 94 | grid-template-columns: repeat(6, 1fr); */
|
113 | 95 | }
|
114 |
| - |
115 | 96 | .vp-fe-menu-box .vp-fe-menu-item {
|
116 | 97 | height: 25px;
|
117 | 98 | line-height: 25px;
|
|
130 | 111 | -moz-user-select: none;
|
131 | 112 | -ms-user-select: none;
|
132 | 113 | user-select: none;
|
133 |
| - |
134 | 114 | text-overflow: ellipsis;
|
135 | 115 | /* overflow: hidden; */
|
136 | 116 | white-space: nowrap;
|
137 | 117 | padding: 0px 5px;
|
138 | 118 | }
|
139 |
| - |
140 | 119 | .vp-fe-menu-box .vp-fe-menu-item:hover {
|
141 | 120 | background: #F8F8F8;
|
142 | 121 | }
|
143 |
| - |
144 | 122 | .vp-fe-menu-sub-box {
|
145 | 123 | display: none;
|
146 | 124 | position: absolute;
|
147 | 125 | left: 100%;
|
148 | 126 | }
|
149 |
| - |
150 | 127 | .vp-fe-menu-item:hover .vp-fe-menu-sub-box {
|
151 | 128 | display: block;
|
152 | 129 | }
|
153 |
| - |
154 | 130 | .vp-fe-popup-box {
|
155 | 131 | position: absolute;
|
156 | 132 | left: 50%;
|
|
165 | 141 | border: 0.25px solid var(--border-gray-color);
|
166 | 142 | box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
|
167 | 143 | }
|
168 |
| - |
169 | 144 | .vp-fe-popup-body {
|
170 | 145 | padding: 10px;
|
171 | 146 | }
|
172 |
| - |
173 | 147 | .vp-fe-popup-button-box {
|
174 | 148 | float: right;
|
175 | 149 | padding: 5px;
|
176 | 150 | }
|
177 |
| - |
178 | 151 | .vp-fe-table {
|
179 | 152 | height: 100%;
|
180 | 153 | background: var(--border-gray-color);
|
| 154 | + padding: 5px; |
181 | 155 | overflow: auto;
|
182 | 156 | }
|
183 | 157 | .vp-fe-table table {
|
|
191 | 165 | background: #FFFFFF;
|
192 | 166 | border-bottom: 1px solid #000000;
|
193 | 167 | }
|
194 |
| - |
195 | 168 | .vp-fe-table tbody tr:nth-child(odd) {
|
196 | 169 | background: #F5F5F5;
|
197 | 170 | }
|
198 | 171 | .vp-fe-table tbody tr:nth-child(even) {
|
199 | 172 | background: #FFFFFF;
|
200 | 173 | }
|
201 |
| - |
202 | 174 | .vp-fe-table th.selected {
|
203 | 175 | /* color: var(--hightlight-color); */
|
204 | 176 | background: #add3fd;
|
205 | 177 | }
|
206 |
| - |
207 | 178 | .vp-fe-table th:hover {
|
208 | 179 | cursor: pointer;
|
209 | 180 | /* background: var(--light-gray-color); */
|
210 | 181 | /* background: rgba(66, 165, 245, 0.2); */
|
211 | 182 | }
|
212 | 183 |
|
213 |
| -/* row hover */ |
| 184 | +/* Row Hover */ |
214 | 185 | .vp-fe-table tbody tr:hover {
|
215 | 186 | background-color: rgba(66, 165, 245, 0.2);
|
216 | 187 | }
|
217 | 188 |
|
218 |
| -/* column hover */ |
| 189 | +/* Column Hover */ |
219 | 190 | /* .vp-fe-table thead th:not(:first-child):hover::after {
|
220 | 191 | background: rgba(66, 165, 245, 0.2);
|
221 | 192 | content: '';
|
|
230 | 201 | .vp-fe-table-more {
|
231 | 202 | margin: 5px;
|
232 | 203 | }
|
233 |
| - |
234 | 204 | .vp-fe-info {
|
235 | 205 | display: none;
|
236 | 206 | /* width: 100%;
|
237 | 207 | height: 100%;
|
238 | 208 | margin: 0px; */
|
239 |
| - |
240 | 209 | position: absolute;
|
241 | 210 | width: 70%;
|
242 | 211 | height: 70%;
|
|
247 | 216 | border: 0.25px solid #C4C4C4;
|
248 | 217 | box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
|
249 | 218 | }
|
250 |
| - |
251 | 219 | .vp-fe-info-title {
|
252 | 220 | width: 100%;
|
253 | 221 | height: 20px;
|
|
256 | 224 | background: #F5F5F5;
|
257 | 225 | padding: 0px 10px;
|
258 | 226 | }
|
259 |
| - |
260 | 227 | .vp-fe-info-content {
|
261 | 228 | width: 100%;
|
262 | 229 | height: calc(100% - 20px);
|
263 | 230 | overflow: auto;
|
264 | 231 | }
|
265 |
| - |
266 | 232 | .vp-fe-info-content pre {
|
267 | 233 | /* width: 300px; */
|
268 | 234 | padding:10px;
|
|
274 | 240 | white-space: -o-pre-wrap; /* Opera 7 */
|
275 | 241 | word-wrap: break-all; /* Internet Explorer 5.5+ */
|
276 | 242 | }
|
277 |
| - |
278 | 243 | .vp-fe-info-error-box {
|
279 | 244 | margin: 7px;
|
280 | 245 | padding: 10px;
|
|
295 | 260 | margin: 0px;
|
296 | 261 | padding: 7px;
|
297 | 262 | }
|
298 |
| - |
299 | 263 | .vp-fe-preview-box {
|
300 | 264 | display: none;
|
301 | 265 | width: 100%;
|
302 | 266 | height: 100px;
|
303 | 267 | position: absolute;
|
304 | 268 | bottom: 50px;
|
305 |
| - |
306 | 269 | background: #F7F7F7;
|
307 | 270 | border: 0.25px solid #E4E4E4;
|
308 | 271 | padding: 10px;
|
309 | 272 | }
|
310 | 273 |
|
311 |
| -/** buttons */ |
| 274 | +/* Buttons */ |
312 | 275 | .vp-fe-btn-box {
|
313 |
| - /* position: absolute; |
314 |
| - bottom: 25px; |
315 |
| - right: 25px; */ |
316 | 276 | position: relative;
|
317 | 277 | height: 50px;
|
318 | 278 | border-top: 0.25px solid var(--border-gray-color);
|
|
322 | 282 | }
|
323 | 283 | .vp-fe-btn-preview {
|
324 | 284 | left: 15px;
|
325 |
| - top: 11px; |
| 285 | + top: 4px; |
326 | 286 | }
|
327 | 287 | .vp-fe-btn-cancel {
|
328 |
| - top: 11px; |
| 288 | + top: 4px; |
329 | 289 | right: 105px;
|
330 | 290 | }
|
331 | 291 | .vp-fe-btn-runadd {
|
332 | 292 | position: absolute;
|
333 |
| - top: 11px; |
| 293 | + top: 4px; |
334 | 294 | right: 15px;
|
335 | 295 | width: fit-content;
|
336 | 296 | height: 30px;
|
|
353 | 313 | background: white;
|
354 | 314 | border: 0.25px solid var(--border-gray-color);
|
355 | 315 | position: absolute;
|
356 |
| - bottom: 35px; |
| 316 | + bottom: 34px; |
357 | 317 | right: 1px;
|
358 | 318 | width: 84px;
|
359 | 319 | height: 30px;
|
| 320 | + font-size: 13px; |
360 | 321 | text-align: center;
|
361 | 322 | line-height: 30px;
|
362 | 323 | }
|
|
0 commit comments