Mercurial

comparison .cms/css/menu.css @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }