|
0
|
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 } |
