Mercurial
comparison .cms/css/pages.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 #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 } |