|
0
|
1 #menu {
|
|
|
2 display: grid;
|
|
|
3 height: 100%;
|
|
|
4 overflow-y: auto;
|
|
|
5 grid-auto-rows: max-content;
|
|
|
6 }
|
|
|
7
|
|
|
8
|
|
|
9 @media (max-width: 1023px) {
|
|
|
10 #menu .main-main {
|
|
|
11 padding: 0.4rem;
|
|
|
12 }
|
|
|
13 }
|
|
|
14 @media (min-width: 1024px) {
|
|
|
15 #menu .main-main {
|
|
|
16 padding: 1rem 1rem 0.3rem 1rem;
|
|
|
17 }
|
|
|
18 }
|
|
|
19
|
|
|
20 #menu .menu.last-edited::before, #menu .item.last-edited::before {
|
|
|
21 content: "";
|
|
|
22 position: absolute;
|
|
|
23 left: 3px;
|
|
|
24 top: 3px;
|
|
|
25 z-index: 1;
|
|
|
26 width: 7px;
|
|
|
27 height: 7px;
|
|
|
28 border-radius: 50%;
|
|
|
29 background-color: var(--green-3);
|
|
|
30 }
|
|
|
31
|
|
|
32 #menu .menu-grid {
|
|
|
33 display: grid;
|
|
|
34 row-gap: 2rem;
|
|
|
35 color: var(--windows-font);
|
|
|
36 }
|
|
|
37
|
|
|
38 #menu .menu-grid > div {
|
|
|
39 box-shadow: 0 0 3px 0 #00000096;
|
|
|
40 border-radius: 0.3rem;
|
|
|
41 }
|
|
|
42
|
|
|
43 #menu .menu {
|
|
|
44 display: grid;
|
|
|
45 grid-template-areas:
|
|
|
46 "title sort"
|
|
|
47 "buttons buttons";
|
|
|
48 grid-template-columns: 1fr auto;
|
|
|
49 column-gap: 0.5rem;
|
|
|
50 row-gap: 0.5rem;
|
|
|
51 background-color: var(--windows);
|
|
|
52 border-radius: 0.3rem;
|
|
|
53 position: relative;
|
|
|
54 padding: 0.7rem;
|
|
|
55 }
|
|
|
56 #menu .menu.open {
|
|
|
57 grid-template-areas:
|
|
|
58 "title sort"
|
|
|
59 "buttons buttons"
|
|
|
60 "menu-prop menu-prop";
|
|
|
61 }
|
|
|
62 #menu .menu.open .prop {
|
|
|
63 color: var(--menu-menu-open-prop);
|
|
|
64 }
|
|
|
65 #menu .menu.changed {
|
|
|
66 outline: 1px dashed var(--save-menu);
|
|
|
67 outline-offset: 0px;
|
|
|
68 }
|
|
|
69 #menu .menu .save > span {
|
|
|
70 display: none;
|
|
|
71 }
|
|
|
72 #menu .menu.changed .save > span {
|
|
|
73 display: block;
|
|
|
74 color: var(--save-menu);
|
|
|
75 }
|
|
|
76
|
|
|
77
|
|
|
78 #menu .menu .menu-prop {
|
|
|
79 display: none;
|
|
|
80 }
|
|
|
81 #menu .menu.open .menu-prop {
|
|
|
82 display: grid;
|
|
|
83 grid-area: menu-prop;
|
|
|
84 }
|
|
|
85 @media (max-width: 1023px) {
|
|
|
86 #menu .menu.open .menu-prop {
|
|
|
87 grid-template-areas:
|
|
|
88 "area-title"
|
|
|
89 "select"
|
|
|
90 "classes-title"
|
|
|
91 "classes";
|
|
|
92 }
|
|
|
93 #menu .menu .menu-prop > div:not(:first-child) {
|
|
|
94 padding-top: 0.75rem;
|
|
|
95 }
|
|
|
96 #menu .menu .menu-prop > .area-select-grid:not(:first-child) {
|
|
|
97 padding-top: 0;
|
|
|
98 }
|
|
|
99 }
|
|
|
100 @media (min-width: 1024px) {
|
|
|
101 #menu .menu.open .menu-prop {
|
|
|
102 grid-template-areas:
|
|
|
103 "area-title select classes-title classes";
|
|
|
104 grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%);
|
|
|
105 row-gap: 0.75rem;
|
|
|
106 column-gap: 0.7rem;
|
|
|
107 padding: 0.5rem 0 0.3rem 0;
|
|
|
108 }
|
|
|
109 }
|
|
|
110
|
|
|
111 #menu .menu input[name=title] {
|
|
|
112 grid-area: title;
|
|
|
113 line-height: 27px;
|
|
|
114 background-color: var(--menu-input-bg);
|
|
|
115 border: 2px solid var(--menu-input-border);
|
|
|
116 }
|
|
|
117 #menu .menu input[name=sort] {
|
|
|
118 grid-area: sort;
|
|
|
119 width: 4rem;
|
|
|
120 text-align: center;
|
|
|
121 font-size: 0.9rem;
|
|
|
122 background-color: var(--menu-input-bg);
|
|
|
123 border: 2px solid var(--menu-input-border);
|
|
|
124 }
|
|
|
125 #menu .menu .area.title {
|
|
|
126 grid-area: area-title;
|
|
|
127 font-size: 1rem;
|
|
|
128 line-height: 27px;
|
|
|
129 }
|
|
|
130
|
|
|
131 #menu .menu .classes.title {
|
|
|
132 grid-area: classes-title;
|
|
|
133 font-size: 1rem;
|
|
|
134 line-height: 27px;
|
|
|
135 }
|
|
|
136 #menu .menu input[name=classes] {
|
|
|
137 grid-area: classes;
|
|
|
138 font-size: 0.9rem;
|
|
|
139 background-color: var(--menu-input-bg);
|
|
|
140 border: 2px solid var(--menu-input-border);
|
|
|
141 }
|
|
|
142
|
|
|
143
|
|
|
144 @media (min-width: 1024px) {
|
|
|
145 #menu .menu .area.title, #menu .menu .classes.title {
|
|
|
146 justify-self: right;
|
|
|
147 }
|
|
|
148 }
|
|
|
149 #menu input[type="text"] {
|
|
|
150 padding: 0 0.54rem;
|
|
|
151 border-radius: 4px;
|
|
|
152 min-height: 30px;
|
|
|
153 font-size: 0.94rem;
|
|
|
154 height: 100%;
|
|
|
155 background-color: var(--bg-4);
|
|
|
156 border: 1px solid var(--bg-4);
|
|
|
157 color: var(--text);
|
|
|
158 width: 100%;
|
|
|
159 max-width: 100%;
|
|
|
160 }
|
|
|
161
|
|
|
162 #menu .menu-buttons {
|
|
|
163 grid-area: buttons;
|
|
|
164 display: grid;
|
|
|
165 column-gap: 0.7rem;
|
|
|
166 font-size: 0.9rem;
|
|
|
167 }
|
|
|
168 #menu .menu-buttons > div {
|
|
|
169 display: flex; /* Chrome Mobile Browser - Fonts Size */
|
|
|
170 }
|
|
|
171 #menu .menu .menu-buttons {
|
|
|
172 grid-template-columns: auto auto 1fr auto;
|
|
|
173 }
|
|
|
174 #menu .menu-buttons div {
|
|
|
175 cursor: pointer;
|
|
|
176 user-select: none;
|
|
|
177 color: var(--buttons-font);
|
|
|
178 width: max-content;
|
|
|
179 }
|
|
|
180 #menu .menu-buttons div:active {
|
|
|
181 color: var(--buttons-hover);
|
|
|
182 }
|
|
|
183 @media (min-width: 1024px) {
|
|
|
184 #menu .menu-buttons div:hover {
|
|
|
185 color: var(--buttons-hover);
|
|
|
186 }
|
|
|
187 }
|
|
|
188
|
|
|
189
|
|
|
190 /*Items*/
|
|
|
191 #menu .items-grid {
|
|
|
192 display: grid;
|
|
|
193 row-gap: 0.3rem;
|
|
|
194 padding: 0.8rem 0 0.5rem 0.5rem;
|
|
|
195 margin-top: -5px;
|
|
|
196 background-color: var(--windows);
|
|
|
197 border-radius: 0 0 0 0.3rem;
|
|
|
198 }
|
|
|
199 @media (min-width: 768px) {
|
|
|
200 #menu .items-grid .items-grid {
|
|
|
201 padding-left: 1rem;
|
|
|
202 }
|
|
|
203 }
|
|
|
204 #menu .menu-grid > div > .items-grid {
|
|
|
205 border-radius: 0 0 0.3rem 0.3rem;
|
|
|
206 }
|
|
|
207
|
|
|
208 #menu .items-grid .items-grid {
|
|
|
209 box-shadow: inset 0 0 0 1px var(--windows-hover);
|
|
|
210 }
|
|
|
211
|
|
|
212 #menu .item {
|
|
|
213 display: grid;
|
|
|
214 grid-template-areas:
|
|
|
215 "title"
|
|
|
216 "buttons";
|
|
|
217 row-gap: 0.5rem;
|
|
|
218 background-color: var(--bg-3);
|
|
|
219 background-image: var(--noise);
|
|
|
220 border-radius: 0.3rem 0 0 0.3rem;
|
|
|
221 position: relative;
|
|
|
222 padding: 0.7rem;
|
|
|
223 }
|
|
|
224
|
|
|
225
|
|
|
226 /*Lines*/
|
|
|
227 #menu .item.clicked + .items-grid {
|
|
|
228 box-shadow: inset 1px -1px 0 0 var(--green-3);
|
|
|
229 }
|
|
|
230 #menu .items-grid:has(> * > .last-edited) {
|
|
|
231 box-shadow: inset 1px -1px 0 0 var(--green-3);
|
|
|
232 }
|
|
|
233 #menu div:has(> .item > .menu-buttons .append:hover) > .items-grid {
|
|
|
234 box-shadow: inset 1px -1px 0 0 var(--green-3);
|
|
|
235 }
|
|
|
236
|
|
|
237
|
|
|
238 #menu > .main-main .menu-grid > div > .items-grid.highlite-parent > div > .item.highlite-children::after {
|
|
|
239 margin-left: -7px;
|
|
|
240 width: 7px;
|
|
|
241 }
|
|
|
242
|
|
|
243 #menu .items-grid.highlite-parent {
|
|
|
244 box-shadow: inset 1px 0px 0 0 var(--sub-line);
|
|
|
245 }
|
|
|
246
|
|
|
247 #menu .item.highlite-children::after {
|
|
|
248 content: "";
|
|
|
249 position: absolute;
|
|
|
250 margin-left: -15px;
|
|
|
251 top: calc(50% - 1px);
|
|
|
252 border-top: 1px solid var(--sub-line);
|
|
|
253 width: 15px;
|
|
|
254 }
|
|
|
255 @media (max-width: 767px) {
|
|
|
256 #menu .item.highlite-children::after {
|
|
|
257 margin-left: -7px;
|
|
|
258 width: 7px;
|
|
|
259 }
|
|
|
260 }
|
|
|
261 #menu .item.highlite-children + .items-grid {
|
|
|
262 box-shadow: inset 1px -1px 0 0 var(--green-3);
|
|
|
263 }
|
|
|
264 /*Lines End*/
|
|
|
265
|
|
|
266
|
|
|
267 @media (min-width: 1024px) {
|
|
|
268 #menu .item:hover {
|
|
|
269 background-color: var(--open-menu);
|
|
|
270 }
|
|
|
271 }
|
|
|
272 #menu .item.open {
|
|
|
273 grid-template-areas:
|
|
|
274 "title"
|
|
|
275 "buttons"
|
|
|
276 "menu-prop";
|
|
|
277 background-color: var(--open-menu);
|
|
|
278 }
|
|
|
279
|
|
|
280 #menu .item .menu-buttons {
|
|
|
281 grid-template-columns: auto auto 1fr auto;
|
|
|
282 }
|
|
|
283 #menu .item.open .menu-buttons {
|
|
|
284 grid-template-columns: auto auto 1fr auto;
|
|
|
285 }
|
|
|
286
|
|
|
287 #menu .item.changed {
|
|
|
288 outline: 1px dashed var(--save-menu);
|
|
|
289 outline-offset: 0px;
|
|
|
290 }
|
|
|
291 #menu .item .save > span {
|
|
|
292 display: none;
|
|
|
293 }
|
|
|
294 #menu .item.changed .save > span {
|
|
|
295 display: block;
|
|
|
296 color: var(--save-menu);
|
|
|
297 }
|
|
|
298
|
|
|
299
|
|
|
300 #menu .item .menu-prop > .title {
|
|
|
301 font-size: 1rem;
|
|
|
302 line-height: 27px;
|
|
|
303 color: var(--names);
|
|
|
304 }
|
|
|
305
|
|
|
306
|
|
|
307 #menu .menu-grid > div.will-be-deleted {
|
|
|
308 outline: 1px dashed red;
|
|
|
309 outline-offset: 0px;
|
|
|
310 }
|
|
|
311 #menu .menu-grid > div.will-be-deleted .del {
|
|
|
312 outline: 1px dashed red;
|
|
|
313 outline-offset: 2px;
|
|
|
314 border-radius: 1px;
|
|
|
315 }
|
|
|
316
|
|
|
317 #menu .will-be-deleted .item {
|
|
|
318 outline: 1px dashed red;
|
|
|
319 outline-offset: -1px;
|
|
|
320 }
|
|
|
321 #menu .will-be-deleted .item .del {
|
|
|
322 outline: 1px dashed red;
|
|
|
323 outline-offset: 2px;
|
|
|
324 border-radius: 1px;
|
|
|
325 }
|
|
|
326
|
|
|
327 @media (min-width: 1024px) {
|
|
|
328 #menu .item .menu-buttons div {
|
|
|
329 opacity: 0;
|
|
|
330 }
|
|
|
331 #menu .item:hover div {
|
|
|
332 opacity: 1;
|
|
|
333 }
|
|
|
334 #menu .item.open div {
|
|
|
335 opacity: 1;
|
|
|
336 }
|
|
|
337 #menu .item .menu-prop > .title {
|
|
|
338 text-align: right;
|
|
|
339 }
|
|
|
340 }
|
|
|
341
|
|
|
342
|
|
|
343
|
|
|
344 #menu .item .menu-prop {
|
|
|
345 display: none;
|
|
|
346 }
|
|
|
347 #menu .item.open .menu-prop {
|
|
|
348 display: grid;
|
|
|
349 grid-area: menu-prop;
|
|
|
350 }
|
|
|
351 #menu .item.open .prop {
|
|
|
352 color: var(--menu-item-open-prop);
|
|
|
353 }
|
|
|
354
|
|
|
355 #menu .item a {
|
|
|
356 grid-area: title;
|
|
|
357 display: flex;
|
|
|
358 width: fit-content;
|
|
|
359 margin-top: -5px;
|
|
|
360 font-size: 1rem;
|
|
|
361 text-decoration: none;
|
|
|
362 min-height: 21px; /* for empty title */
|
|
|
363 }
|
|
|
364 #menu .item a[href] {
|
|
|
365 color: var(--menu-item-a);
|
|
|
366 }
|
|
|
367 #menu .item a[href]:hover {
|
|
|
368 color: var(--menu-item-a-hover);
|
|
|
369 }
|
|
|
370 #menu .item a:not([href]) {
|
|
|
371 width: fit-content;
|
|
|
372 margin-top: -5px;
|
|
|
373 font-size: 1rem;
|
|
|
374 min-height: 21px;
|
|
|
375 color: var(--menu-item-a-none-link);
|
|
|
376 }
|
|
|
377
|
|
|
378 @media (max-width: 1023px) {
|
|
|
379 #menu .item .menu-prop {
|
|
|
380 grid-template-areas:
|
|
|
381 "page-title"
|
|
|
382 "select-grid"
|
|
|
383 "parent-title"
|
|
|
384 "pid"
|
|
|
385 "title-name"
|
|
|
386 "title"
|
|
|
387 "tag-title"
|
|
|
388 "tag_title"
|
|
|
389 "url-title"
|
|
|
390 "target-blank"
|
|
|
391 "classes-title"
|
|
|
392 "classes"
|
|
|
393 "sort-title"
|
|
|
394 "sort";
|
|
|
395 }
|
|
|
396 }
|
|
|
397 @media (min-width: 1024px) {
|
|
|
398 #menu .item .menu-prop {
|
|
|
399 grid-template-areas:
|
|
|
400 "page-title select-grid parent-title pid"
|
|
|
401 "title-name title tag-title tag_title"
|
|
|
402 "url-title target-blank classes-title classes"
|
|
|
403 ". . sort-title sort";
|
|
|
404 grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%);
|
|
|
405 row-gap: 0.75rem;
|
|
|
406 column-gap: 0.7rem;
|
|
|
407 padding: 0.5rem 0 0.3rem 0;
|
|
|
408 }
|
|
|
409 }
|
|
|
410
|
|
|
411 #menu .item .page.title {
|
|
|
412 grid-area: page-title;
|
|
|
413 }
|
|
|
414 #menu .item .select-grid {
|
|
|
415 grid-area: select-grid;
|
|
|
416 }
|
|
|
417
|
|
|
418
|
|
|
419 #menu .item .parent.title {
|
|
|
420 grid-area: parent-title;
|
|
|
421 }
|
|
|
422
|
|
|
423 #menu .item input[name=pid] {
|
|
|
424 grid-area: pid;
|
|
|
425 }
|
|
|
426
|
|
|
427 #menu .item .title.name {
|
|
|
428 grid-area: title-name;
|
|
|
429 }
|
|
|
430 #menu .item input[name=title] {
|
|
|
431 grid-area: title;
|
|
|
432 }
|
|
|
433
|
|
|
434
|
|
|
435 #menu .item .tag.title {
|
|
|
436 grid-area: tag-title;
|
|
|
437 }
|
|
|
438 #menu .item input[name=tag_title] {
|
|
|
439 grid-area: tag_title;
|
|
|
440 }
|
|
|
441
|
|
|
442
|
|
|
443
|
|
|
444 #menu .item .classes.title {
|
|
|
445 grid-area: classes-title;
|
|
|
446 }
|
|
|
447 #menu .item input[name=classes] {
|
|
|
448 grid-area: classes;
|
|
|
449 }
|
|
|
450
|
|
|
451
|
|
|
452 #menu .item .url.title {
|
|
|
453 grid-area: url-title;
|
|
|
454 }
|
|
|
455 #menu .item .target-blank {
|
|
|
456 grid-area: target-blank;
|
|
|
457 display: grid;
|
|
|
458 grid-template-columns: 1fr 30px;
|
|
|
459 column-gap: 0.5rem;
|
|
|
460 position: relative;
|
|
|
461 }
|
|
|
462 #menu .item input[name=url] {
|
|
|
463 width: 100%;
|
|
|
464 grid-column: 1/-1;
|
|
|
465 grid-row: 1/2;
|
|
|
466 }
|
|
|
467 #menu .item input[name=url][disabled] {
|
|
|
468 color: var(--menu-input-select-font-disabled);
|
|
|
469 }
|
|
|
470
|
|
|
471 #menu .item .sort.title {
|
|
|
472 grid-area: sort-title;
|
|
|
473 }
|
|
|
474 #menu .item input[name=sort] {
|
|
|
475 grid-area: sort;
|
|
|
476 width: 5rem;
|
|
|
477 text-align: center;
|
|
|
478 }
|
|
|
479
|
|
|
480 @media (max-width: 1023px) {
|
|
|
481 #menu .item .parent-title, #menu .item .title, #menu .item .tag-title, #menu .item .url-title, #menu .item .classes-title, #menu .item .sort-title {
|
|
|
482 padding-top: 0.75rem;
|
|
|
483 }
|
|
|
484 }
|
|
|
485
|
|
|
486 #menu .target-blank input[type="checkbox"] {
|
|
|
487 grid-row: 1/2;
|
|
|
488 grid-column: 2/3;
|
|
|
489 align-self: center;
|
|
|
490 justify-self: center;
|
|
|
491 border: 2px solid var(--orange);
|
|
|
492 }
|
|
|
493
|
|
|
494
|
|
|
495 #menu .select-grid .field-options {
|
|
|
496 position: relative;
|
|
|
497 }
|
|
|
498 #menu .select-grid .select-dropdown {
|
|
|
499 display: grid;
|
|
|
500 position: absolute;
|
|
|
501 left: 0;
|
|
|
502 right: 0;
|
|
|
503 top: 2px;
|
|
|
504 background-color: var(--bg-3);
|
|
|
505 border: 2px solid var(--bg-4);
|
|
|
506 color: var(--menu-item-select-dropdown-font);
|
|
|
507 border-radius: 0.25rem;
|
|
|
508 z-index: 7;
|
|
|
509 overflow: hidden;
|
|
|
510 box-shadow: 0 2px 3px 0 #00000033;
|
|
|
511 }
|
|
|
512 #menu .select-grid .field-search {
|
|
|
513 display: grid;
|
|
|
514 padding: 0.37rem;
|
|
|
515 border-bottom: 2px solid var(--bg-4);
|
|
|
516 }
|
|
|
517 #menu .select-grid .field-search input {
|
|
|
518 width: 100%;
|
|
|
519 background-color: var(--menu-item-field-search-input-bg);
|
|
|
520 color: var(--text);
|
|
|
521 border: 2px solid var(--bg-4);
|
|
|
522 font-size: 0.94rem;
|
|
|
523 background-repeat: no-repeat;
|
|
|
524 background-position: right .37rem center;
|
|
|
525 padding: 0.25rem 2rem 0.25rem 0.25rem;
|
|
|
526 background-size: 17px 14px;
|
|
|
527 }
|
|
|
528 #menu .select-grid .field-search input {
|
|
|
529 background-image: var(--search-icon);
|
|
|
530 }
|
|
|
531 #menu .select-grid .field-search input:focus {
|
|
|
532 border: 2px solid var(--menu-item-field-search-input-focus);
|
|
|
533 transition: all .700s ease 0s;
|
|
|
534 }
|
|
|
535 #menu .select-grid ul.list-search, #menu .item .field-search {
|
|
|
536 background-color: var(--bg-3);
|
|
|
537 }
|
|
|
538 #menu .select-grid ul.list-search {
|
|
|
539 display: grid;
|
|
|
540 margin: 0;
|
|
|
541 padding: 0;
|
|
|
542 overflow-y: auto;
|
|
|
543 max-height: 17rem;
|
|
|
544 overscroll-behavior: contain;
|
|
|
545 }
|
|
|
546 #menu .select-grid .list-search li {
|
|
|
547 display: block;
|
|
|
548 list-style-type: none;
|
|
|
549 padding: 0.4rem 0.44rem;
|
|
|
550 cursor: pointer;
|
|
|
551 font-size: 0.94rem;
|
|
|
552 text-align: left;
|
|
|
553 }
|
|
|
554 #menu .select-grid .list-search li:hover {
|
|
|
555 background-color: var(--menu-item-list-search-li-hover-active);
|
|
|
556 }
|
|
|
557 #menu .select-grid .list-search li.active {
|
|
|
558 background-color: var(--menu-item-list-search-li-hover-active);
|
|
|
559 }
|
|
|
560 #menu .select-grid .list-search li.searcher-hidden { display: none; }
|
|
|
561 #menu .select-grid .field-options { overflow: hidden; }
|
|
|
562 #menu .select-grid .field-options.open { overflow: initial; }
|
|
|
563
|
|
|
564 #menu .main-footer {
|
|
|
565 padding: 1rem;
|
|
|
566 }
|
|
|
567
|
|
|
568 @media (max-width: 1023px) {
|
|
|
569 #menu .main-footer {
|
|
|
570 padding: 0.7rem 0.4rem 1rem 0.4rem;
|
|
|
571 }
|
|
|
572 }
|
|
|
573 @media (min-width: 1024px) {
|
|
|
574 #menu .main-footer {
|
|
|
575 padding: 1rem;
|
|
|
576 }
|
|
|
577 }
|
|
|
578
|
|
|
579 #menu .main-footer .create {
|
|
|
580 display: block;
|
|
|
581 width: max-content;
|
|
|
582 padding: 0.4rem 0.7rem 0.5rem 0.7rem;
|
|
|
583 background-color: var(--bg-4);
|
|
|
584 text-decoration: none;
|
|
|
585 font-size: 0.9rem;
|
|
|
586 color: var(--windows-font);
|
|
|
587 border-radius: 0.3rem;
|
|
|
588 cursor: pointer;
|
|
|
589 user-select: none;
|
|
|
590 }
|
|
|
591
|
|
|
592
|
|
|
593 /* Select */
|
|
|
594 #menu .menu-prop .area-select-grid, #menu .item .menu-prop .parent-select-grid {
|
|
|
595 position: relative;
|
|
|
596 }
|
|
|
597
|
|
|
598 #menu .menu-prop .field-select-menu {
|
|
|
599 display: grid;
|
|
|
600 grid-template-columns: 1fr 26px;
|
|
|
601 height: 100%;
|
|
|
602 cursor: pointer;
|
|
|
603 background-color: var(--menu-input-bg);
|
|
|
604 border: 2px solid var(--menu-input-border);
|
|
|
605 border-radius: 4px;
|
|
|
606 user-select: none;
|
|
|
607 line-height: 26px;
|
|
|
608 font-size: 1rem;
|
|
|
609 }
|
|
|
610 #menu .menu-prop .field-select-menu > .value {
|
|
|
611 padding: 0 0 0 0.44rem;
|
|
|
612 white-space: nowrap;
|
|
|
613 overflow: hidden;
|
|
|
614 line-height: 26px;
|
|
|
615 font-size: 0.94rem;
|
|
|
616 color: var(--text);
|
|
|
617 }
|
|
|
618 #menu .menu-prop .field-select-menu > .icon {
|
|
|
619 background-image: var(--select-icon);
|
|
|
620 background-repeat: no-repeat;
|
|
|
621 background-position: center;
|
|
|
622 background-size: 12px;
|
|
|
623 }
|
|
|
624
|
|
|
625 #menu .menu-prop .field-select {
|
|
|
626 display: grid;
|
|
|
627 grid-template-columns: 1fr 26px;
|
|
|
628 height: 100%;
|
|
|
629 min-height: 30px;
|
|
|
630 cursor: pointer;
|
|
|
631 background-color: var(--bg-4);
|
|
|
632 border: 1px solid var(--bg-4);
|
|
|
633 border-radius: 4px;
|
|
|
634 user-select: none;
|
|
|
635 }
|
|
|
636 #menu .menu-prop .field-select > .value {
|
|
|
637 padding: 0 0 0 0.44rem;
|
|
|
638 white-space: nowrap;
|
|
|
639 overflow: hidden;
|
|
|
640 line-height: 26px;
|
|
|
641 font-size: 0.94rem;
|
|
|
642 color: var(--text);
|
|
|
643 }
|
|
|
644 #menu .menu-prop .field-select > .icon {
|
|
|
645 background-image: var(--select-icon);
|
|
|
646 background-repeat: no-repeat;
|
|
|
647 background-position: center;
|
|
|
648 background-size: 12px;
|
|
|
649 }
|
|
|
650
|
|
|
651 #menu .menu-prop .area-select-grid .field-options, #menu .menu-prop .parent-select-grid .field-options {
|
|
|
652 display: grid;
|
|
|
653 position: absolute;
|
|
|
654 height: 0;
|
|
|
655 overflow: hidden;
|
|
|
656 width: 100%;
|
|
|
657 border-radius: 0.25rem;
|
|
|
658 box-shadow: 0 2px 3px 0 #00000033;
|
|
|
659 max-height: 17rem;
|
|
|
660 z-index: 7;
|
|
|
661 }
|
|
|
662 #menu .menu-prop .area-select-grid .field-options.open, #menu .menu-prop .parent-select-grid .field-options.open {
|
|
|
663 background-color: var(--bg-3);
|
|
|
664 border: 2px solid var(--bg-4);
|
|
|
665 color: var(--text);
|
|
|
666 margin-top: 2px;
|
|
|
667 overflow: auto;
|
|
|
668 height: auto;
|
|
|
669 }
|
|
|
670 #menu .menu-prop .area-select-grid .field-options .option, #menu .menu-prop .parent-select-grid .field-options .option {
|
|
|
671 padding: 0.4rem 0.44rem;
|
|
|
672 cursor: pointer;
|
|
|
673 font-size: 0.94rem;
|
|
|
674 }
|
|
|
675 #menu .menu-prop .area-select-grid .field-options .option:hover, #menu .menu-prop .parent-select-grid .field-options .option:hover {
|
|
|
676 background-color: var(--bg-2);
|
|
|
677 }
|
|
|
678
|
|
|
679 #menu .no-database, #menu .no-tables {
|
|
|
680 color: var(--windows-font);
|
|
|
681 border-radius: 0.4rem;
|
|
|
682 }
|
