Mercurial
comparison .cms/css/menu.css @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
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 } |