Mercurial

comparison .cms/css/pages.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 #pages {
2 display: grid;
3 height: 100%;
4 grid-template-rows: auto 1fr auto;
5 grid-template-areas:
6 "main-header"
7 "main-main"
8 "main-footer";
9 }
10
11 #pages .main-header {
12 grid-area: main-header;
13 display: grid;
14 gap: 1rem;
15 min-height: 35px;
16 }
17
18 @media (max-width: 1023px) {
19 #pages .main-header {
20 padding: 1rem 0.7rem 1rem 0.4rem;
21 grid-template-columns: 1fr auto auto auto;
22 }
23 }
24 @media (min-width: 1024px) {
25 #pages .main-header {
26 padding: 1rem 2.4rem 1rem 1rem;
27 grid-template-columns: 1fr auto 1fr auto;
28 }
29 }
30
31 /* вернули скролл к стандартной ширине
32 @-moz-document url-prefix() {
33 #pages .main-header {
34 padding-right: 1.4rem;
35 }
36 }
37 */
38
39 #pages .search-wrapper {
40 display: grid;
41 grid-template-columns: 1fr auto auto;
42 min-width: 180px;
43 }
44 #pages .page-search {
45 grid-column: 1/-1;
46 grid-row: 1/2;
47 border-radius: 0.3rem;
48 font-size: 0.875rem;
49 padding: 0 4.7rem 0 0.54rem;
50 height: 100%;
51 width: 100%;
52 background-color: var(--page-search);
53 border: 2px solid var(--input-border);
54 color: var(--text);
55 }
56 #pages .reset {
57 grid-column: 2/3;
58 grid-row: 1/2;
59 cursor: pointer;
60 margin: 4px;
61 border-radius: 50%;
62 outline: none;
63 width: 27px;
64 height: 27px;
65 background-color: transparent;
66 background-repeat: no-repeat;
67 background-position: center center;
68 background-size: 12px;
69 background-image: var(--icon-clear);
70 }
71 @media (max-width: 1023px) {
72 #pages .reset:active {
73 background-color: var(--bg-4);
74 }
75 }
76 @media (min-width: 1024px) {
77 #pages .reset:hover {
78 background-color: var(--bg-4);
79 }
80 }
81
82 #pages .page-search-button {
83 grid-column: 3/4;
84 grid-row: 1/2;
85 border-radius: 3px;
86 cursor: pointer;
87 border: none;
88 outline: none;
89 width: 42px;
90 min-height: unset;
91 background-color: transparent;
92 background-repeat: no-repeat;
93 background-position: center center;
94 background-size: 48%;
95 background-image: var(--search-icon);
96 }
97
98
99 #pages .add-page-btn {
100 display: flex;
101 width: 35px;
102 border-radius: 0.3rem;
103 cursor: pointer;
104 background-color: var(--bg-3);
105 position: relative;
106 }
107 #pages .add-page-btn:hover {
108 background-color: var(--add-page-btn-hover);
109 }
110 #pages .add-page-btn .x1 {
111 width: 2px;
112 height: 16px;
113 border-radius: 2px;
114 position: absolute;
115 top: 50%;
116 left: 50%;
117 transform: rotate(0deg) translate(-50%, -50%);
118 }
119 #pages .add-page-btn .x2 {
120 width: 16px;
121 height: 2px;
122 border-radius: 2px;
123 position: absolute;
124 top: 50%;
125 left: 50%;
126 transform: rotate(0deg) translate(-50%, -50%);
127 }
128 #pages .add-page-btn .x1, #pages .add-page-btn .x2 {
129 background-color: var(--add-page-btn-svg-b-plus);
130 }
131
132 #pages .add-pages {
133 display: grid;
134 grid-auto-flow: column;
135 column-gap: 1rem;
136 align-content: center;
137 }
138
139 #pages .del-pages-btn {
140 display: grid;
141 cursor: pointer;
142 width: 35px;
143 border-radius: 0.3rem;
144 user-select: none;
145 background-repeat: no-repeat;
146 background-position: center center;
147 background-size: 100%;
148 background-image: var(--icon-trash);
149 }
150 @media (max-width: 1023px) {
151 #pages .add-page-btn .add-page-label {
152 display: none;
153 }
154 }
155 @media (min-width: 1024px) {
156 #pages .add-page-btn {
157 width: auto;
158 }
159 #pages .add-page-btn .add-page-label {
160 display: block;
161 width: max-content;
162 padding: 4px 10px 4px 10px;
163 background-color: var(--bg-3);
164 border: 2px solid var(--add-page-btn-br);
165 text-decoration: none;
166 font-size: 0.9rem;
167 color: var(--add-page-btn-font);
168 border-radius: 0.3rem;
169 cursor: pointer;
170 user-select: none;
171 }
172 #pages .add-page-btn .add-page-label:hover {
173 background-color: var(--bg-2);
174 }
175 #pages .add-page-btn .x1, #pages .add-page-btn .x2 {
176 display: none;
177 }
178 #pages .del-pages-btn:hover {
179 background-color: var(--bg-4);
180 }
181 }
182
183
184 #pages .main-main {
185 grid-area: main-main;
186 overflow-y: scroll;
187 }
188 @media (max-width: 1023px) {
189 #pages .main-main {
190 padding: 0 0.4rem 0.3rem 0.4rem;
191 }
192 }
193 @media (min-width: 1024px) {
194 #pages .main-main {
195 padding: 0rem 1rem 0.3rem 1rem;
196 }
197 }
198
199
200
201
202
203 #pages .pages-grid {
204 display: grid;
205 row-gap: 0.3rem;
206 }
207
208 #pages .pages-grid > div {
209 border-radius: 0.3rem;
210 display: grid;
211 padding: 0.7rem;
212 column-gap: 0.7rem;
213 box-shadow: var(--shadows);
214 position: relative;
215 row-gap: 0.5rem;
216 background-color: var(--windows);
217 background-image: var(--noise);
218 }
219 @media (max-width: 1023px) {
220 #pages .pages-grid > div {
221 grid-template-areas:
222 "page-name page-pin page-del"
223 "page-butt published page-del";
224 grid-template-columns: 1fr auto 1.4rem;
225 }
226 }
227 @media (min-width: 1024px) {
228 #pages .pages-grid > div {
229 grid-template-areas:
230 "page-name page-pin page-date page-del"
231 "page-butt published page-date page-del";
232 grid-template-columns: 1fr auto 6rem 1.4rem;
233 }
234 #pages .pages-grid > div:hover {
235 background-color: var(--windows-hover)
236 }
237 }
238 #pages .pages-grid > div.open {
239 background-color: var(--pages-grid-div-open);
240 box-shadow: 0 0 0 2px var(--pages-grid-div-open-shadow) inset;
241 }
242
243 #pages .pages-grid > div.home {
244 box-shadow: 0 0 0 2px var(--pages-grid-div-open-shadow) inset;
245 }
246 #pages .pages-grid > div[data-published="0"] {
247 box-shadow: 0 0 0 2px var(--hidden) inset;
248 }
249
250 @media (max-width: 1023px) {
251 #pages .pages-grid > div.open {
252 grid-template-areas:
253 "page-name page-pin page-del "
254 "page-butt published page-del "
255 "page-prop page-prop page-prop";
256 }
257 }
258 @media (min-width: 1024px) {
259 #pages .pages-grid > div.open {
260 grid-template-areas:
261 "page-name page-pin page-date page-del "
262 "page-butt published page-date page-del "
263 "page-prop page-prop page-prop page-prop";
264 }
265 }
266
267
268 #pages .pages-grid > div.last-edited::before {
269 content: "";
270 position: absolute;
271 left: 3px;
272 top: 3px;
273 z-index: 1;
274 width: 7px;
275 height: 7px;
276 border-radius: 50%;
277 background-color: var(--green-3);
278 }
279
280 #pages .pin {
281 grid-area: page-pin;
282 width: 15px;
283 height: 15px;
284 margin: -11px auto 0 auto;
285 cursor: pointer;
286 background-repeat: no-repeat;
287 background-position: center center;
288 background-size: 84%;
289 background-image: var(--pages-pin-off);
290 }
291 #pages [data-pin="1"] .pin {
292 background-image: var(--pages-pin-on);
293 }
294 @media (min-width: 1024px) {
295 #pages .pages-grid > div .pin {
296 display: none;
297 }
298 #pages .pages-grid > div[data-pin="1"] .pin {
299 display: block;
300 }
301 #pages .pages-grid > div:hover .pin {
302 display: block;
303 }
304 }
305
306 #pages .pages-grid > div > .published {
307 grid-area: published;
308 width: 18px;
309 height: 18px;
310 cursor: pointer;
311 background-size: 100%;
312 background-position: center;
313 background-repeat: no-repeat;
314 background-image: var(--eye-on);
315 grid-row: 2/3;
316 align-self: end;
317 }
318 #pages .pages-grid [data-published="0"] .published {
319 background-image: var(--eye-off);
320 }
321 @media (min-width: 1024px) {
322 #pages .pages-grid > div > .published {
323 opacity: 0;
324 }
325 #pages .pages-grid > div.open > .published {
326 opacity: 1;
327 }
328 #pages .pages-grid > div:hover .published {
329 opacity: 1;
330 }
331 #pages .pages-grid [data-published="0"] .published {
332 opacity: 1;
333 }
334 }
335
336
337 .page-buttons div {
338 cursor: pointer;
339 user-select: none;
340 color: var(--buttons-font);
341 position: relative;
342 }
343 .page-buttons .loading::after {
344 content: "";
345 display: block;
346 width: 100%;
347 height: 2px;
348 position: absolute;
349 left: 0;
350 right: 0;
351 bottom: -3px;
352 border-radius: 2px;
353 background-image: repeating-linear-gradient(90deg, var(--link) -0.2rem, var(--windows) 0rem, var(--link) 0.2rem);
354 animation: barberpole 10s linear infinite;
355 background-size: 300% 300%;
356 }
357 @keyframes barberpole {
358 100% {
359 background-position: 150% 150%;
360 }
361 }
362
363
364 .page-buttons div:hover {
365 color: var(--buttons-hover);
366 }
367 .pages-grid > div.open .page-prop-btn {
368 color: var(--buttons-open);
369 }
370
371 .page-prop-save-btn {
372 display: none;
373 }
374 .pages-grid > div.open .page-prop-save-btn {
375 display: block;
376 }
377 .pages-grid > div.open .page-prop-save-btn.saved {
378 color: var(--saved);
379 }
380
381 .pages-grid a.page-name {
382 grid-area: page-name;
383 width: fit-content;
384 display: flex;
385 margin-top: -5px;
386 font-size: 1rem;
387 min-height: 21px; /* for empty title */
388 text-decoration: none;
389 color: var(--link);
390 font-weight: 600;
391 }
392 .pages-grid a.page-name:hover {
393 color: var(--link-hover);
394 }
395
396
397 .page-buttons {
398 grid-area: page-butt;
399 display: flex;
400 column-gap: 0.7rem;
401 font-size: 0.9rem;
402 }
403 @media (max-width: 320px) {
404 .page-buttons {
405 font-size: 0.7rem;
406 align-self: center;
407 }
408 }
409 @media (min-width: 1024px) {
410 .page-buttons {
411 opacity: 0;
412 }
413 .pages-grid > div:hover .page-buttons {
414 opacity: 1;
415 }
416 .pages-grid > div.open .page-buttons {
417 opacity: 1;
418 }
419 }
420 @media (max-width: 1023px) {
421 .page-date {
422 display: none;
423 }
424 }
425 @media (min-width: 1024px) {
426 .page-date {
427 grid-area: page-date;
428 display: flex;
429 justify-content: center;
430 align-items: center;
431 font-size: 0.8rem;
432 color: var(--page-date);
433 }
434 .page-date.future {
435 color: var(--page-date-planned);
436 }
437 }
438
439 #pages .page-prop {
440 display: none;
441 grid-area: page-prop;
442 }
443 @media (max-width: 1023px) {
444 #pages .pages-grid > div.open .page-prop {
445 display: grid;
446 }
447 }
448 @media (min-width: 1024px) {
449 #pages .page-prop, #pages .page-properties {
450 grid-template-areas:
451 "cTitle vTitle cTemplate vTemplate"
452 "cURL vURL cDate vDate"
453 "cSEO vSEO cTime vTime"
454 "cDesc vDesc cTags vTags";
455 grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%);
456 row-gap: 0.75rem;
457 column-gap: 0.7rem;
458 }
459 #pages .pages-grid > div.open .page-prop {
460 display: grid;
461 padding: 0.5rem 0 0.3rem 0;
462 }
463 }
464
465 #pages .page-prop > .title, #pages .page-properties > .title {
466 font-size: 1rem;
467 line-height: 27px;
468 color: var(--names);
469 }
470
471
472 /* Select */
473 #pages .page-prop .template-select-grid, #pages .page-properties .template-select-grid {
474 position: relative;
475 }
476 #pages .page-prop .field-select, #pages .page-properties .field-select {
477 display: grid;
478 grid-template-columns: 1fr 28px;
479 height: 100%;
480 min-height: 30px;
481 cursor: pointer;
482 background-color: var(--bg-4);
483 border: 1px solid var(--bg-4);
484 border-radius: 4px;
485 user-select: none;
486 }
487 #pages .page-prop .field-select > .value,
488 #pages .page-properties .field-select > .value {
489 padding: 0 0 0 0.44rem;
490 white-space: nowrap;
491 overflow: hidden;
492 line-height: 26px;
493 font-size: 0.94rem;
494 color: var(--text);
495 }
496 #pages .page-prop .field-select > .icon,
497 #pages .page-properties .field-select > .icon {
498 background-image: var(--select-icon);
499 background-repeat: no-repeat;
500 background-position: center;
501 background-size: 12px;
502 }
503
504
505 #pages .page-prop .template-select-grid .field-options, #pages .page-properties .template-select-grid .field-options {
506 display: grid;
507 position: absolute;
508 height: 0;
509 overflow: hidden;
510 width: 100%;
511 border-radius: 0.25rem;
512 box-shadow: 0 2px 3px 0 #00000033;
513 max-height: 17rem;
514 z-index: 7;
515 }
516 #pages .page-prop .template-select-grid .field-options.open, #pages .page-properties .template-select-grid .field-options.open {
517 background-color: var(--bg-3);
518 border: 2px solid var(--bg-4);
519 margin-top: 2px;
520 color: var(--text);
521 overflow: auto;
522 height: auto;
523 }
524 #pages .page-prop .template-select-grid .field-options .option, #pages .page-properties .template-select-grid .field-options .option {
525 padding: 0.4rem 0.44rem;
526 cursor: pointer;
527 font-size: 0.94rem;
528 }
529 #pages .page-prop .template-select-grid .field-options .option:hover, #pages .page-properties .template-select-grid .field-options .option:hover {
530 background-color: var(--bg-2);
531 }
532
533 @media (max-width: 1023px) {
534 #pages .page-prop > .title:not(:first-child), #pages .page-properties > .title:not(:first-child) {
535 padding-top: 0.75rem;
536 }
537 }
538 @media (min-width: 1024px) {
539 #pages .page-prop > .title, #pages .page-properties > .title {
540 text-align: right;
541 }
542 #pages .page-prop .page.title, #pages .page-properties .page.title { grid-area: cTitle; }
543 #pages .page-prop input[name=title], #pages .page-properties input[name=title] { grid-area: vTitle; }
544 #pages .page-prop .seo.title, #pages .page-properties .seo.title { grid-area: cSEO; }
545 #pages .page-prop input[name=seo_title], #pages .page-properties input[name=seo_title] { grid-area: vSEO; }
546 #pages .page-prop .url.title, #pages .page-properties .url.title { grid-area: cURL; }
547 #pages .page-prop .url-input, #pages .page-properties .url-input { grid-area: vURL; }
548 #pages .page-prop .template.title, #pages .page-properties .template.title { grid-area: cTemplate; }
549 #pages .page-prop .template-select-grid, .page-properties .template-select-grid { grid-area: vTemplate; }
550 #pages .page-prop .description.title, #pages .page-properties .description.title { grid-area: cDesc; }
551 #pages .page-prop textarea[name="description"], #pages .page-properties textarea[name="description"] { grid-area: vDesc; }
552 #pages .page-prop .date.title, #pages .page-properties .date.title { grid-area: cDate; }
553 #pages .page-prop input[name=date], .page-properties input[name=date] { grid-area: vDate; max-width: fit-content; }
554 #pages .page-prop .time.title, #pages .page-properties .time.title { grid-area: cTime; }
555 #pages .page-prop input[name=time], #pages .page-properties input[name=time] { grid-area: vTime; max-width: fit-content; }
556 #pages .page-prop .tags.title, #pages .page-properties .tags.title { grid-area: cTags; }
557 #pages .page-prop textarea[name="tags"], #pages .page-properties textarea[name="tags"] { grid-area: vTags; }
558 }
559
560
561 .page-prop .url-input {
562 display: grid;
563 grid-template-columns: 1fr 2.7rem;
564 }
565 @media (max-width: 1023px) {
566 .page-prop > .url-input:not(:first-child), .page-prop > .template-select-grid:not(:first-child) {
567 padding-top: 0;
568 }
569 }
570
571 .page-prop .url-input > input {
572 width: 100%;
573 grid-column: 1/-1;
574 grid-row: 1/-1;
575 padding-right: 3rem;
576 }
577 .page-prop .url-input .url-translit {
578 display: grid;
579 grid-column: 2/3;
580 grid-row: 1/-1;
581 cursor: pointer;
582 background-repeat: no-repeat;
583 background-position: center center;
584 background-size: 54%;
585 background-image: var(--icon-link);
586 }
587
588
589 .pages-grid > div > input[type="checkbox"] {
590 grid-area: page-del;
591 }
592 @media (min-width: 1024px) {
593 .pages-grid > div > input[type="checkbox"] {
594 align-self: center;
595 }
596 }
597
598 .page-prop input,
599 .page-prop textarea{
600 border-radius: 4px;
601 font-size: 0.94rem;
602 padding: 0 0.54rem;
603 min-height: 30px;
604 height: 100%;
605 background-color: var(--bg-4);
606 border: 1px solid var(--bg-4);
607 color: var(--text);
608 }
609
610 .page-prop textarea {
611 font-family: var(--sans-serif);
612 line-height: 1.3em;
613 resize: vertical;
614 display: block;
615 }
616
617 .page-prop select, .page-prop input[type=date], .page-prop input[type=time] {
618 -moz-padding-start: 4px;
619 -moz-padding-end: 4px;
620 }
621
622 #pages .main-footer {
623 grid-area: main-footer;
624 padding: 1rem;
625 display: grid;
626 column-gap: 1rem;
627 grid-auto-flow: column;
628 justify-content: space-between;
629 }
630
631 #pages .main-footer .pager::-webkit-scrollbar {
632 height: 0;
633 }
634
635 #pages .main-footer .pager {
636 scrollbar-width: none;
637 }
638
639 #pages .counters {
640 display: grid;
641 column-gap: 0.5rem;
642 grid-auto-flow: column;
643 }
644 #pages .counters input {
645 border-radius: 4px;
646 font-size: 0.875rem;
647 padding: 0 0.3rem;
648 min-height: 30px;
649 height: 100%;
650 width: 3.2rem;
651 text-align: center;
652 background-color: var(--bg-4);
653 border: 1px solid var(--bg-4);
654 color: var(--text);
655 }
656 #pages .counters span {
657 display: flex;
658 align-items: center;
659 font-size: 0.875rem;
660 color: var(--text);
661 }
662
663
664 #pages .main-footer .pager {
665 display: grid;
666 grid-auto-flow: column;
667 column-gap: 0.5rem;
668 overflow-x: auto;
669 padding: 4px;
670 }
671
672 #pages .main-footer .pager > div {
673 color: var(--text);
674 background-color: var(--bg-3);
675 display: flex;
676 justify-content: center;
677 align-items: center;
678 min-width: 32px;
679 border-radius: 0.7rem;
680 font-size: 0.875rem;
681 cursor: pointer;
682 user-select: none;
683 }
684
685 #pages .main-footer .pager > div.active {
686 color: var(--main-footer-pager-div-active-font);
687 box-shadow: 0 0 0 0.25rem var(--pages-main-footer-pager-div-bg-active);
688 }
689
690 #pages .main-footer .pager > div:hover {
691 color: var(--main-footer-pager-div-hover);
692 }
693
694 #pages .page-editor-bg {
695 display: grid;
696 position: relative;
697 grid-row: 1/-1;
698 grid-column: 1/-1;
699 z-index: 9;
700 background-color: var(--bg-3);
701 background-image: var(--noise);
702 }
703 @media (min-width: 1024px) {
704 #pages .page-editor-bg {
705 padding: 1rem;
706 }
707 }
708 #pages .page-editor-bg.hidden {
709 display: none;
710 }
711
712
713 #pages .page-editor-grid {
714 position: relative;
715 background-color: var(--bg-3);
716 box-shadow: 0 0 3px 0 #00000096;
717 min-height: 0; /*Scroll*/
718 display: grid;
719 grid-template-rows: auto auto auto auto 1fr 1rem;
720 grid-template-areas:
721 "page-editor-header page-editor-header"
722 "page-editor-buttons page-editor-buttons"
723 "page-properties page-properties"
724 "page-editor-panel page-editor-panel"
725 "page-editor tags"
726 "bottom bottom";
727 }
728
729 #pages .page-editor-grid::before {
730 content: "";
731 position: absolute;
732 left: 3px;
733 top: 3px;
734 z-index: 1;
735 width: 7px;
736 height: 7px;
737 border-radius: 50%;
738
739 }
740
741 #pages .page-editor-grid[data-changed="true"]::before {
742 background-color: var(--changes);
743 }
744
745
746
747
748
749
750
751
752
753
754 #pages .page-properties {
755 grid-area: page-properties;
756 display: grid;
757 padding: 0.5rem 0.5rem 1rem 0.5rem;
758 }
759
760 @media (max-width: 414px) {
761 #pages .page-properties {
762 grid-row: 3/-1;
763 z-index: 111;
764 background-color: var(--bg-3);
765 align-content: start;
766 overflow-y: auto;
767 }
768 }
769
770
771
772
773 #pages .page-properties.hidden {
774 display: none;
775 }
776
777
778 /* Options */
779 #pages .page-properties select {
780 appearance: none;
781 background-repeat: no-repeat;
782 background-position: right .37rem center;
783 background-size: 16px 12px;
784 }
785
786 #pages .page-properties select {
787 background-image: var(--select-icon);
788 }
789
790
791
792 #pages .page-properties .url-input {
793 display: grid;
794 grid-template-columns: 1fr 2.7rem;
795 }
796 #pages .page-properties .url-input > input {
797 width: 100%;
798 grid-column: 1/-1;
799 grid-row: 1/-1;
800 padding-right: 3rem;
801 }
802 #pages .page-properties .url-input .url-translit {
803 display: grid;
804 grid-column: 2/3;
805 grid-row: 1/-1;
806 cursor: pointer;
807 background-repeat: no-repeat;
808 background-position: center center;
809 background-size: 54%;
810 background-image: var(--icon-link);
811 }
812
813 #pages .page-properties input,
814 #pages .page-properties textarea {
815 border-radius: 4px;
816 font-size: 0.94rem;
817 padding: 0 0.54rem;
818 min-height: 30px;
819 height: 100%;
820 background-color: var(--bg-4);
821 border: 1px solid var(--bg-4);
822 color: var(--text);
823 }
824
825 #pages .page-properties textarea {
826 font-family: var(--sans-serif);
827 font-size: 0.94rem;
828 line-height: 1.3em;
829 resize: vertical;
830 min-height: 3.75rem;
831 }
832
833 #pages .page-properties select, #pages .page-properties input[type=date], #pages .page-properties input[type=time] {
834 -moz-padding-start: 4px;
835 -moz-padding-end: 4px;
836 }
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857 @media (max-width: 1023px) {
858 #pages .page-editor-grid {
859 grid-template-columns: 1fr 0;
860 }
861 #pages .page-editor-grid.tags-opened {
862 grid-template-columns: 1fr max-content;
863 }
864 #pages .tags {
865 z-index: 3;
866 }
867 }
868 @media (min-width: 1024px) {
869 #pages .page-editor-grid {
870 grid-template-columns: 1fr 0;
871 }
872 #pages .page-editor-grid.tags-opened {
873 grid-template-columns: 1fr max-content;
874 }
875 }
876 @media (min-width: 1024px) {
877 #pages .page-editor-grid {
878 border-radius: 5px;
879 }
880 }
881
882 #pages .page-editor-header {
883 grid-area: page-editor-header;
884 display: grid;
885 }
886 @media (max-width: 1023px) {
887 #pages .page-editor-header {
888 grid-template-areas:
889 "close title";
890 grid-template-columns: auto 1fr;
891 column-gap: 1rem;
892 row-gap: 0.5rem;
893 padding: 10px 10px 0 10px;
894 }
895 }
896 @media (min-width: 1024px) {
897 #pages .page-editor-header {
898 padding: 10px 10px 0 10px;
899 grid-template-columns: max-content 1fr;
900 column-gap: 1rem;
901 }
902 }
903
904 #pages .close-page-button {
905 position: relative;
906 cursor: pointer;
907 width: 2rem;
908 height: 2rem;
909 border-radius: 3px;
910 background-color: var(--bg-3);
911 background-repeat: no-repeat;
912 background-position: center center;
913 background-size: 40%;
914 background-image: var(--icon-close);
915 }
916 #pages .close-page-button:hover {
917 background-color: var(--bg-4);
918 }
919 @media (max-width: 1023px) {
920 #pages .close-page-button {
921 grid-area: close;
922 }
923 }
924
925 #pages .save-page-button {
926 cursor: pointer;
927 user-select: none;
928 }
929
930 #pages .page-editor-buttons .save-page-button.saved {
931 color: var(--saved);
932 }
933 #pages .page-editor-buttons .save-page-button.error {
934 color: var(--error);
935 }
936
937
938 #pages .open-properties {
939 cursor: pointer;
940 user-select: none;
941 }
942 #pages .page-editor-grid.properties .open-properties {
943 color: var(--buttons-open);
944 }
945
946 #pages .page-editor-header a {
947 color: var(--link);
948 text-decoration: none;
949 width: fit-content;
950 align-self: center;
951 font-weight: 600;
952 }
953 #pages .page-editor-header a:hover {
954 color: var(--link-hover);
955 text-decoration: none;
956 }
957
958 @media (max-width: 1023px) {
959 .page-editor-title {
960 grid-area: title;
961 }
962 }
963
964 #pages .page-editor-buttons {
965 display: grid;
966 grid-area: page-editor-buttons;
967 grid-auto-flow: column;
968 gap: 0.7em;
969 justify-content: start;
970 overflow-x: auto;
971 overflow-y: hidden;
972 font-size: 1rem;
973 color: var(--buttons-font);
974 }
975 @media (max-width: 1023px) {
976 #pages .page-editor-buttons {
977 padding: 10px 10px;
978 }
979 }
980 @media (min-width: 1024px) {
981 #pages .page-editor-buttons {
982 padding: 10px 14px;
983 }
984 #pages .page-editor-buttons > div:hover {
985 color: var(--buttons-hover);
986 }
987 }
988 #pages .page-editor-buttons.hidden {
989 display: none;
990 }
991
992
993 #pages .open-mediateka {
994 cursor: pointer;
995 user-select: none;
996 }
997 #pages .page-editor-grid.mediateka .open-mediateka {
998 color: var(--buttons-open);
999 }
1000
1001
1002 #pages .tags-helper {
1003 cursor: pointer;
1004 user-select: none;
1005 }
1006 #pages .page-editor-grid.tags-opened .tags-helper {
1007 color: var(--buttons-open);
1008 }
1009
1010
1011 #pages .codemirror-replace {
1012 cursor: pointer;
1013 user-select: none;
1014 }
1015
1016
1017 #pages .page-editor-buttons a {
1018 color: var(--uni-editor);
1019 text-decoration: none;
1020 }
1021 @media (min-width: 1024px) {
1022 #pages .page-editor-buttons a:hover {
1023 color: var(--buttons-hover);
1024 }
1025 }
1026
1027
1028 #pages .page-editor-panel {
1029 display: grid;
1030 grid-area: page-editor-panel;
1031 padding:10px;
1032 position: relative;
1033 max-width: 100%;
1034 }
1035 #pages .page-editor-panel.hidden {
1036 display: none;
1037 }
1038
1039 #pages .upload-progress {
1040 position: absolute;
1041 width: 0%;
1042 height: 3px;
1043 background-color: tomato;
1044 }
1045 @keyframes barberpole {
1046 100% {
1047 background-position: 100% 100%;
1048 }
1049 }
1050
1051 #pages .mediateka-grid {
1052 display: grid;
1053 grid-template-rows: auto auto;
1054 grid-template-columns: 1fr;
1055 row-gap: 10px;
1056 grid-template-areas:
1057 "mediateka-files-hscroll"
1058 "mediateka-buttons";
1059 }
1060 #pages .mediateka-grid.hidden {
1061 display: none;
1062 }
1063
1064 #pages .mediateka-files-hscroll {
1065 grid-area: mediateka-files-hscroll;
1066 overflow-x: auto;
1067 overflow-y: hidden;
1068 padding-bottom: 4px;
1069 }
1070
1071 #pages .mediateka-files-grid {
1072 display: grid;
1073 column-gap: 5px;
1074 grid-auto-columns: 130px;
1075 grid-auto-flow: column;
1076 }
1077
1078 #pages .file-block {
1079 height: 130px;
1080 background-color: var(--bg-2);
1081 box-shadow: 0 2px 3px 0 #0000004d;
1082 border: 2px solid var(--br-3);
1083 border-radius: 8px;
1084 overflow: hidden;
1085 position: relative;
1086 }
1087
1088 #pages .file-block:hover {
1089 border: 2px solid var(--br-active);
1090 }
1091 #pages .file-block.active-file {
1092 border: 2px solid var(--br-active);
1093 }
1094
1095 #pages .file-block img {
1096 object-fit: contain;
1097 width: 100%;
1098 height: 100%;
1099 display: block;
1100 }
1101
1102 #pages .file-block .media-name {
1103 width: 100%;
1104 font-size: 60%;
1105 position: absolute;
1106 padding: 0 2%;
1107 overflow: hidden;
1108 color: var(--text);
1109 word-break: break-all;
1110 background-color: #0005;
1111 }
1112
1113 #pages .file-block input[type="checkbox"] {
1114 position: absolute;
1115 right: 3px;
1116 top: 5px;
1117 z-index: 1;
1118 width: 1rem;
1119 height: 1rem;
1120 display: none;
1121 border-color: var(--orange);
1122 }
1123
1124 #pages .file-block:hover input[type="checkbox"] {
1125 display: block;
1126 }
1127
1128 #pages .file-block input[type="checkbox"]:checked {
1129 display: block;
1130 }
1131
1132 #pages .file-block .ext {
1133 position: absolute;
1134 z-index: 12;
1135 bottom: 3px;
1136 left: 3px;
1137 font-size: 12px;
1138 padding: 1px 5px 1px 3px;
1139 border-radius: 3px;
1140 cursor: default;
1141 background-color: var(--bg-4);
1142 color: var(--ext);
1143 }
1144
1145 #pages .mediateka-buttons {
1146 display: grid;
1147 grid-area: mediateka-buttons;
1148 }
1149 @media (max-width: 1023px) {
1150 #pages .mediateka-buttons {
1151 grid-template-rows: auto;
1152 grid-template-columns: 1fr 1fr;
1153 gap: 0.9rem;
1154 grid-template-areas:
1155 "upload-files del-uploaded-files"
1156 "link-file link-file";
1157 }
1158 }
1159 @media (min-width: 1024px) {
1160 #pages .mediateka-buttons {
1161 grid-template-columns: auto 1fr auto;
1162 column-gap:15px;
1163 grid-template-areas: "upload-files link-file del-uploaded-files";
1164 }
1165 }
1166 #pages .upload-files {
1167 grid-area: upload-files;
1168 min-height: 2.5rem;
1169 position: relative;
1170 background-color: var(--bg-2);
1171 user-select: none;
1172
1173 }
1174 #pages .mediateka-buttons .inputfile {
1175 width: 100%;
1176 opacity: 0;
1177 position: absolute;
1178 left: 0;
1179 right: 0;
1180 top: 0;
1181 bottom: 0;
1182 overflow: hidden;
1183 }
1184 #pages .mediateka-buttons .inputfile + label {
1185 height: 100%;
1186 padding: 11px 10px 0 10px;
1187 display: flex;
1188 cursor: pointer;
1189 justify-content: center;
1190 border-radius: 4px;
1191 font-size: 1rem;
1192 line-height: 1;
1193 color: var(--buttons-font);
1194 }
1195
1196 #pages .link-file {
1197 grid-area: link-file;
1198 display: grid;
1199 grid-template-columns: 1fr auto;
1200 column-gap: 1rem;
1201 line-height: 2;
1202 min-height: 2.5rem;
1203 align-items: center;
1204 padding-left: 10px;
1205 padding-right: 4px;
1206 border-radius: 5px;
1207 font-size: 1rem;
1208 word-break: break-all;
1209 background-color: var(--bg-2);
1210 color: var(--buttons-font);
1211 }
1212 #pages .link-file a {
1213 color: var(--link);
1214 text-decoration: none;
1215 border-bottom: 1px dashed;
1216 }
1217 #pages .link-file-tag {
1218 line-height: 1.4;
1219 }
1220 #pages .link-file-copy-btn {
1221 cursor: pointer;
1222 z-index: 1;
1223 font-size: 0.8rem;
1224 padding: 0 0.4rem 1px 0.4rem;
1225 border-radius: 0.2rem;
1226 display: flex;
1227 min-height: 2rem;
1228 height: calc(100% - 8px);
1229 user-select: none;
1230 justify-content: center;
1231 align-items: center;
1232 background-color: var(--bg-3);
1233 }
1234
1235 #pages .del-uploaded-files {
1236 grid-area: del-uploaded-files;
1237 display: flex;
1238 justify-content: center;
1239 align-items: center;
1240 padding: 0 10px 2px 10px;
1241 border-radius: 4px;
1242 font-size: 1rem;
1243 cursor: pointer;
1244 line-height: 1;
1245 background-color: var(--orange);
1246 color: var(--white);
1247 user-select: none;
1248 }
1249 #pages .del-uploaded-files:hover {
1250 box-shadow: 0 0 0 0.25rem var(--focus-orange);
1251 }
1252
1253 #pages .del-uploaded-files.disabled {
1254 background-color: var(--bg-2);
1255 color: var(--font-bg);
1256 cursor: context-menu;
1257 }
1258 #pages .del-uploaded-files.disabled:hover {
1259 box-shadow: unset;
1260 }
1261
1262 /* теги, в которые заворачивается html-код */
1263 #pages .page-editor-grid > .tags {
1264 grid-area: tags;
1265 display: none;
1266 width: max-content;
1267 overflow-y: auto;
1268 background-color: var(--tags-bg);
1269 position: relative;
1270 scrollbar-width: none;
1271 }
1272 #pages .page-editor-grid > .tags::-webkit-scrollbar {
1273 display: none;
1274 }
1275 #pages .page-editor-grid.tags-opened > .tags {
1276 display: block;
1277 }
1278
1279 #pages .tags-grid {
1280 display: grid;
1281 position: relative;
1282 padding: 0.3rem 0;
1283 }
1284
1285 #pages .tags-grid > div {
1286 display: flex;
1287 padding: 7px 15px 7px 15px;
1288 color: var(--tags-font);
1289 font-size: 0.9rem;
1290 cursor: pointer;
1291 justify-content: space-between;
1292 }
1293
1294 #pages .tags-grid > div .tag {
1295 color: var(--windows-font);
1296 }
1297 #pages .tags-grid > div:hover {
1298 background-color: var(--codemirror-bg);
1299 }
1300
1301 #pages .no-database, #pages .no-tables {
1302 color: var(--windows-font);
1303 border-radius: 0.4rem;
1304 }
1305
1306
1307 #pages .page-editor {
1308 grid-area: page-editor;
1309 }
1310 @media (max-width: 1023px) {
1311 #pages .page-editor {
1312 grid-column: 1/-1;
1313 }
1314 }
1315 body .CodeMirror {
1316 min-height: 100%;
1317 max-height: 100%;
1318 height: 2rem;
1319 font-family: var(--monospace);
1320 font-weight: normal;
1321 font-size: 1.04rem;
1322 }
1323 body .CodeMirror-dialog input {
1324 font-family: var(--monospace);
1325 font-size: 100%;
1326 }
1327
1328 body .CodeMirror-wrap pre.CodeMirror-line, body .CodeMirror-wrap pre.CodeMirror-line-like {
1329 word-wrap: break-word;
1330 white-space: pre-wrap;
1331 word-break: break-all;
1332 }
1333
1334 /* Codemirror dark and light theme Start */
1335 .cm-s-default.CodeMirror {
1336 background-color: var(--codemirror-bg);
1337 color: var(--codemirror-text);
1338 }
1339 .cm-s-default .CodeMirror-gutters {
1340 background-color: var(--codemirror-bg);
1341 color: var(--codemirror-numbeslines);
1342 border: none;
1343 }
1344 /* Codemirror light theme Start */
1345 .light .CodeMirror .CodeMirror-guttermarker,
1346 .light .CodeMirror .CodeMirror-guttermarker-subtle,
1347 .light .CodeMirror .CodeMirror-linenumber {
1348 color: var(--codemirror-numbeslines);
1349 }
1350 .light .CodeMirror .CodeMirror-cursor {
1351 border-left: 2px solid #ff5100;
1352 }
1353 .light .CodeMirror div.CodeMirror-selected {
1354 background-color: #0663d2;
1355 }
1356 .light .CodeMirror .cm-searching {
1357 background-color: rgb(112 112 100 / 30%);
1358 }
1359 .light .CodeMirror-focused div.CodeMirror-selected {
1360 background-color: #0663d2;
1361 }
1362 .light .CodeMirror .CodeMirror-line::selection,
1363 .light .CodeMirror .CodeMirror-line>span::selection,
1364 .light .CodeMirror .CodeMirror-line>span>span::selection {
1365 background-color: rgba(128, 203, 196, 0.2);
1366 }
1367 .light .CodeMirror .CodeMirror-line::-moz-selection,
1368 .light .CodeMirror .CodeMirror-line>span::-moz-selection,
1369 .light .CodeMirror .CodeMirror-line>span>span::-moz-selection {
1370 background-color: rgba(128, 203, 196, 0.2);
1371 }
1372 .light .CodeMirror .CodeMirror-activeline-background {
1373 background-color: #f5f1efb5;
1374 }
1375 .light .CodeMirror .cm-keyword {
1376 color: #C792EA;
1377 }
1378 .light .CodeMirror .cm-operator {
1379 color: #00a5e8;
1380 }
1381 .light .CodeMirror .cm-variable-2 {
1382 color: #373737;
1383 }
1384 .light .CodeMirror .cm-variable-3,
1385 .light .CodeMirror .cm-type {
1386 color: #f07178;
1387 }
1388 .light .CodeMirror .cm-builtin {
1389 color: #ffa706;
1390 }
1391 .light .CodeMirror .cm-atom {
1392 color: #F78C6C;
1393 }
1394 .light .CodeMirror .cm-number {
1395 color: #FF5370;
1396 }
1397 .light .CodeMirror .cm-def {
1398 color: #03A9F4;
1399 }
1400 .light .CodeMirror .cm-string {
1401 color: #71b199;
1402 }
1403 .light .CodeMirror .cm-string-2 {
1404 color: #f07178;
1405 }
1406 .light .CodeMirror .cm-comment {
1407 color: #546E7A;
1408 }
1409 .light .CodeMirror .cm-variable {
1410 color: #f07178;
1411 }
1412 .light .CodeMirror .cm-tag {
1413 color: #b6745c;
1414 }
1415 .light .CodeMirror .cm-meta {
1416 color: #ff7600;
1417 }
1418 .light .CodeMirror .cm-attribute {
1419 color: #C792EA;
1420 }
1421 .light .CodeMirror .cm-property {
1422 color: #373737;
1423 }
1424 .light .CodeMirror .cm-qualifier {
1425 color: #c868e9;
1426 }
1427 .light .CodeMirror .cm-variable-3,
1428 .light .CodeMirror .cm-type {
1429 color: #f71d1d;
1430 }
1431 .light .CodeMirror .cm-error {
1432 color: rgba(255, 255, 255, 1.0);
1433 background-color: #FF5370;
1434 }
1435 .light .CodeMirror .CodeMirror-matchingbracket {
1436 text-decoration: underline;
1437 color: #0004ff !important;
1438 }
1439 /* Codemirror dark theme Start */
1440 .dark .CodeMirror .CodeMirror-guttermarker,
1441 .dark .CodeMirror .CodeMirror-guttermarker-subtle,
1442 .dark .CodeMirror .CodeMirror-linenumber {
1443 color: var(--codemirror-numbeslines);
1444 }
1445 .dark .CodeMirror .CodeMirror-cursor {
1446 border-left: 2px solid #FFCC00;
1447 }
1448 .dark .CodeMirror div.CodeMirror-selected {
1449 background-color: #0663d2;
1450 }
1451 .dark .CodeMirror .cm-searching {
1452 background-color: rgb(112 112 100 / 30%);
1453 }
1454 .dark .CodeMirror-focused div.CodeMirror-selected {
1455 background-color: #0663d2;
1456 }
1457 .dark .CodeMirror .CodeMirror-line::selection,
1458 .dark .CodeMirror .CodeMirror-line>span::selection,
1459 .dark .CodeMirror .CodeMirror-line>span>span::selection {
1460 background-color: rgba(128, 203, 196, 0.2);
1461 }
1462 .dark .CodeMirror .CodeMirror-line::-moz-selection,
1463 .dark .CodeMirror .CodeMirror-line>span::-moz-selection,
1464 .dark .CodeMirror .CodeMirror-line>span>span::-moz-selection {
1465 background-color: rgba(128, 203, 196, 0.2);
1466 }
1467 .dark .CodeMirror .CodeMirror-activeline-background {
1468 background-color: #2c2929b5;
1469 }
1470 .dark .CodeMirror .cm-keyword {
1471 color: #C792EA;
1472 }
1473 .dark .CodeMirror .cm-operator {
1474 color: #89DDFF;
1475 }
1476 .dark .CodeMirror .cm-variable-2 {
1477 color: #EEFFFF;
1478 }
1479 .dark .CodeMirror .cm-variable-3,
1480 .dark .CodeMirror .cm-type {
1481 color: #f07178;
1482 }
1483 .dark .CodeMirror .cm-builtin {
1484 color: #FFCB6B;
1485 }
1486 .dark .CodeMirror .cm-atom {
1487 color: #F78C6C;
1488 }
1489 .dark .CodeMirror .cm-number {
1490 color: #FF5370;
1491 }
1492 .dark .CodeMirror .cm-def {
1493 color: #82AAFF;
1494 }
1495 .dark .CodeMirror .cm-string {
1496 color: #94af6e;
1497 }
1498 .dark .CodeMirror .cm-string-2 {
1499 color: #f07178;
1500 }
1501 .dark .CodeMirror .cm-comment {
1502 color: #546E7A;
1503 }
1504 .dark .CodeMirror .cm-variable {
1505 color: #f07178;
1506 }
1507 .dark .CodeMirror .cm-tag {
1508 color: #FF5370;
1509 }
1510 .dark .CodeMirror .cm-meta {
1511 color: #FFCB6B;
1512 }
1513 .dark .CodeMirror .cm-attribute {
1514 color: #C792EA;
1515 }
1516 .dark .CodeMirror .cm-property {
1517 color: #C792EA;
1518 }
1519 .dark .CodeMirror .cm-qualifier {
1520 color: #DECB6B;
1521 }
1522 .dark .CodeMirror .cm-variable-3,
1523 .dark .CodeMirror .cm-type {
1524 color: #DECB6B;
1525 }
1526 .dark .CodeMirror .cm-error {
1527 color: rgba(255, 255, 255, 1.0);
1528 background-color: #FF5370;
1529 }
1530 .dark .CodeMirror .CodeMirror-matchingbracket {
1531 text-decoration: underline;
1532 color: white !important;
1533 }
1534 /* Codemirror dark theme End. */
1535
1536
1537 #lbox-window {
1538 position: fixed;
1539 z-index: 999;
1540 cursor: pointer;
1541 background-color: var(--lbox-window);
1542 display: grid;
1543 height: 100vh;
1544 width: 100vw;
1545 grid-template-areas: "lightbox";
1546 }
1547 #lbox-window img, #lbox-window video, #lbox-window audio {
1548 max-width: 100%;
1549 max-height: 100%;
1550 box-shadow: 0 3px 7px 0 #0000004d;
1551 grid-area: lightbox;
1552 align-self: center;
1553 justify-self: center;
1554 overflow: hidden;
1555 }
1556
1557 #lbox-window audio {
1558 width: 97%;
1559 height: 54px;
1560 }
1561
1562
1563
1564
1565
1566
1567 /* Pages Utils */
1568
1569 #pages-utils {
1570 display: grid;
1571 gap: 1rem;
1572 overflow-y: auto;
1573 max-height: 100%;
1574 }
1575
1576 @media (max-width: 1023px) {
1577 #pages-utils {
1578 padding: 1rem 0.4rem 1rem 0.4rem;
1579 }
1580 }
1581
1582 @media (min-width: 1024px) {
1583 #pages-utils {
1584 padding: 1rem;
1585 }
1586 }
1587
1588 #pages-utils .pages-utils-main {
1589 background-color: var(--windows);
1590 background-image: var(--noise);
1591 box-shadow: var(--shadows);
1592 border-radius: 0.3rem;
1593 }
1594 @media (max-width: 1023px) {
1595 #pages-utils .pages-utils-main {
1596 padding: 1rem 0.7rem 1rem 0.7rem;
1597 }
1598 }
1599 @media (min-width: 1024px) {
1600 #pages-utils .pages-utils-main {
1601 padding: 1rem;
1602 }
1603 }
1604
1605 #pages-utils .replace-util {
1606 display: grid;
1607 gap: 1rem;
1608 }
1609 #pages-utils .replace-util > p {
1610 color: var(--text);
1611 font-size: 1rem;
1612 }
1613
1614 #pages-utils .replace-inputs {
1615 display: grid;
1616 }
1617 @media (max-width: 1023px) {
1618 #pages-utils .replace-inputs {
1619 gap: 0.5rem;
1620 }
1621 }
1622 @media (min-width: 1024px) {
1623 #pages-utils .replace-inputs {
1624 grid-template-columns: 1fr 1fr;
1625 gap: 1rem;
1626 }
1627 }
1628
1629 #pages-utils .regex, #pages-utils .replace, #pages-utils .replace_id_col, #pages-utils .replace_column, #pages-utils .replace_table {
1630 display: grid;
1631 row-gap: 0.2rem;
1632 }
1633
1634 #pages-utils .regex .title, #pages-utils .replace .title, #pages-utils .replace_id_col, #pages-utils .replace_column, #pages-utils .replace_table {
1635 font-size: 1rem;
1636 color: var(--windows-font);
1637 }
1638
1639
1640 #pages-utils .replace-inputs input {
1641 border-radius: 4px;
1642 font-size: 0.875rem;
1643 padding: 0 0.54rem;
1644 min-height: 35px;
1645 width: 100%;
1646 color: var(--input-font);
1647 background-color: var(--input-bg);
1648 border: 2px solid var(--input-border);
1649 }
1650
1651 #pages-utils .replace-btn {
1652 width: fit-content;
1653 display: flex;
1654 justify-content: center;
1655 align-items: center;
1656 padding: 0.44rem 0.74rem 0.47rem 0.74rem;
1657 min-height: 35px;
1658 border-radius: 0.25rem;
1659 background-color: var(--button-bg);
1660 border: 1px solid var(--button-border);
1661 color: var(--windows-font);
1662 font-size: 0.875rem;
1663 cursor: pointer;
1664 }