Mercurial

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:78edf6b517a0
1 #template {
2 display: grid;
3 height: 100%;
4 }
5
6 #template > .settings {
7 display: grid;
8 gap: 1rem;
9 overflow-y: auto;
10 grid-column: 1/-1;
11 grid-row: 1/-1;
12 }
13
14 @media (max-width: 1023px) {
15 #template > .settings {
16 grid-template-areas:
17 "template-install"
18 "template-switch"
19 "template-files"
20 "template-manual"
21 "template-headers"
22 "milk";
23 grid-template-rows: auto auto auto auto 1fr;
24 padding: 1rem 0.4rem 1rem 0.4rem;
25 display: grid;
26 }
27 }
28
29 @media (min-width: 1024px) {
30 #template > .settings {
31 grid-template-areas:
32 "template-install template-headers template-manual"
33 "template-switch template-headers template-manual"
34 "template-files template-files template-files"
35 "milk milk milk";
36 grid-template-columns: 17rem 1fr 1fr;
37 grid-template-rows: auto auto auto 1fr;
38 padding: 1rem;
39 }
40 }
41
42 #template .template {
43 grid-area: template-switch;
44 display: grid;
45 align-content: start;
46 row-gap: 1rem;
47 box-shadow: var(--shadows);
48 background-color: var(--windows);
49 background-image: var(--noise);
50 border-radius: 0.3rem;
51 }
52
53 #template .template label {
54 display: grid;
55 grid-template-columns: auto 1fr;
56 column-gap: 0.5rem;
57 cursor: pointer;
58 line-height: 1.3;
59 color: var(--windows-font);
60 user-select: none;
61 }
62
63 #template .template form {
64 display: grid;
65 row-gap: 1rem;
66 }
67
68 @media (max-width: 1023px) {
69 #template .template {
70 padding: 1rem 0.7rem 1rem 0.7rem;
71 }
72 }
73 @media (min-width: 1024px) {
74 #template .template {
75 padding: 1rem;
76 }
77 }
78
79 #template form > div {
80 position: relative;
81 color: var(--windows-font);
82 }
83
84 #template .template-install {
85 grid-area: template-install;
86 padding: 10px;
87 border-radius: 0.3rem;
88 background-color: var(--windows);
89 }
90 #template .upload_dnd {
91 display: grid;
92 position: relative;
93 text-align: center;
94 padding: 0.4rem 0.7rem 0.5rem 0.7rem;
95 white-space: nowrap;
96 cursor: pointer;
97 border-radius: 0.3rem;
98 background-color: var(--button-bg);
99 color: var(--windows-font);
100 font-size: 1rem;
101 justify-content: center;
102 display: block;
103 }
104 #template .upload_dnd #template-upload {
105 width: 100%;
106 height: 100%;
107 left: 0;
108 right: 0;
109 top: 0;
110 bottom: 0;
111 opacity: 0;
112 overflow: hidden;
113 position: absolute;
114 z-index: 7;
115 cursor: pointer;
116 }
117
118
119 #template .template-headers {
120 grid-area: template-headers;
121 display: grid;
122 grid-template-rows: auto 1fr auto;
123 padding: 1rem;
124 row-gap: 0.7rem;
125 box-shadow: var(--shadows);
126 border-radius: 0.3rem;
127 background-color: var(--windows);
128 background-image: var(--noise);
129 }
130 #template .template-headers textarea {
131 line-height: 1.3em;
132 resize: none;
133 background-color: var(--input-bg);
134 border: 2px solid var(--input-border);
135 border-radius: 4px;
136 font-family: var(--monospace);
137 font-size: 1rem;
138 color: var(--input-font);
139 padding: 0 8px;
140 min-height: 30px;
141 }
142
143 #template .template-manual {
144 grid-area: template-manual;
145 display: grid;
146 grid-auto-rows: max-content;
147 gap: 1rem;
148 border-radius: 0.3rem;
149 box-shadow: var(--shadows);
150 background-color: var(--windows);
151 background-image: var(--noise);
152 }
153 #template .template-manual div {
154 color: var(--windows-font);
155 }
156 #template .template-manual p {
157 font-size: 1rem;
158 color: var(--text);
159 }
160 #template .template-manual p a {
161 color: var(--link);
162 }
163
164 @media (max-width: 1023px) {
165 #template .template-manual {
166 padding: 1rem 0.7rem 1rem 0.7rem;
167 }
168 }
169 @media (min-width: 1024px) {
170 #template .template-manual {
171 padding: 1rem;
172 }
173 }
174
175 #template .template-files {
176 grid-area: template-files;
177 display: grid;
178 align-content: start;
179 row-gap: 1rem;
180 background-color: var(--windows);
181 background-image: var(--noise);
182 box-shadow: var(--shadows);
183 border-radius: 0.3rem;
184 }
185 @media (max-width: 1023px) {
186 #template .template-files {
187 padding: 1rem 0.7rem 1rem 0.7rem;
188 }
189 }
190 @media (min-width: 1024px) {
191 #template .template-files {
192 padding: 1rem;
193 }
194 }
195
196 .template-files .title {
197 color: var(--windows-font);
198 padding-bottom: 0.2rem;
199 }
200 .template-files .file {
201 font-size: 1rem;
202 font-family: var(--monospace);
203 color: var(--template-files-file);
204 width: fit-content;
205 display: flex; /* Mobile Browser - fit-content inline */
206 cursor: pointer;
207 }
208 .template-files .file:hover {
209 color: var(--template-files-file-hover);
210 }
211 .template-files .no-files {
212 font-size: 1rem;
213 color: var(--text);
214 }
215
216
217
218 /* Проверить */
219
220 #template .template-editor-bg {
221 display: grid;
222 position: relative;
223 grid-row: 1/-1;
224 grid-column: 1/-1;
225 z-index: 9;
226 background-color: var(--bg-3);
227 background-image: var(--noise);
228 }
229 @media (min-width: 1024px) {
230 #template .template-editor-bg {
231 padding: 1rem;
232 }
233 }
234 #template .template-editor-bg.hidden {
235 display: none;
236 }
237
238 #template .template-editor-grid {
239 background-color: var(--bg-3);
240 display: grid;
241 position: relative;
242 box-shadow: 0 0 3px 0 #00000096;
243 grid-template-rows: auto 1fr 1rem;
244 grid-template-columns: 1fr auto;
245 grid-template-areas:
246 "template-editor-header template-editor-header"
247 "template-editor snip"
248 "bottom bottom";
249 }
250 #template .template-editor-grid::before {
251 content: "";
252 position: absolute;
253 left: 3px;
254 top: 3px;
255 z-index: 1;
256 width: 7px;
257 height: 7px;
258 border-radius: 50%;
259 }
260 #template .template-editor-grid[data-changed="true"]::before {
261 background-color: var(--changes);
262 }
263 @media (min-width: 1024px) {
264 #template .template-editor-grid {
265 border-radius: 5px;
266 }
267 }
268
269 .template-editor-header {
270 grid-area: template-editor-header;
271 display: grid;
272 }
273 @media (max-width: 1023px) {
274 .template-editor-header {
275 grid-template-areas:
276 "close save title";
277 grid-template-columns: max-content max-content 1fr;
278 grid-column-gap: 1rem;
279 grid-row-gap: 0.5rem;
280 padding: 10px;
281 }
282 }
283 @media (min-width: 1024px) {
284 .template-editor-header {
285 padding: 10px;
286 grid-template-columns: max-content max-content 1fr;
287 gap: 1rem;
288 }
289 }
290
291 #template .snip-grid {
292 grid-area: snip;
293 display: grid;
294 gap: 15px;
295 align-content: start;
296 width: max-content;
297 overflow-y: auto;
298 background-color: var(--tags-bg);
299 position: relative;
300 scrollbar-width: none;
301 }
302 @media (max-width: 500px) {
303 #template .snip-grid {
304 display: none;
305 }
306 }
307
308 #template .snip-grid > .html > div, #template .snip-grid > .css > div, #template .snip-grid > .php > div {
309 display: flex;
310 gap: 7px;
311 padding: 7px 15px 7px 15px;
312 color: var(--tags-font);
313 font-size: 0.9rem;
314 cursor: pointer;
315 justify-content: space-between;
316 }
317 #template .snip-grid a {
318 padding: 7px 15px 7px 15px;
319 color: var(--link);
320 font-size: 0.9rem;
321 text-underline-offset: 0.22rem;
322 text-decoration-color: var(--link);
323 }
324
325 #template .html, #template .css, #template .php {
326 display: grid;
327 }
328 #template .html.hidden, #template .css.hidden, #template .php.hidden {
329 display: none;
330 }
331
332 .close-template-button {
333 position: relative;
334 cursor: pointer;
335 width: 2rem;
336 height: 2rem;
337 border-radius: 3px;
338 background-color: var(--bg-3);
339 background-repeat: no-repeat;
340 background-position: center center;
341 background-size: 40%;
342 background-image: var(--icon-close);
343 }
344 .close-template-button:hover {
345 background-color: var(--bg-4);
346 }
347 @media (max-width: 1023px) {
348 .close-template-button {
349 grid-area: close;
350 }
351 }
352
353 .save-template-button {
354 cursor: pointer;
355 width: 2rem;
356 height: 2rem;
357 position: relative;
358 background-color: var(--bg-3);
359 background-repeat: no-repeat;
360 background-position: center center;
361 background-size: 55%;
362 background-image: var(--icon-save);
363 border-radius: 3px;
364 }
365 .save-template-button:hover {
366 background-color: var(--bg-4);
367 }
368 .save-template-button.saved {
369 background-color: var(--saved-bg);
370 }
371 @media (max-width: 1023px) {
372 .save-template-button {
373 grid-area: save;
374 justify-self: right;
375 }
376 }
377
378 @media (max-width: 1023px) {
379 .template-editor-title {
380 grid-area: title;
381 }
382 }
383
384 .template-editor-title {
385 font-family: var(--monospace);
386 color: var(--template-files-file);
387 width: fit-content;
388 align-self: center;
389 }
390
391 .template-editor {
392 grid-area: template-editor;
393 }
394 .template-editor .CodeMirror {
395 min-height: 100%;
396 max-height: 100%;
397 height: 1rem;
398 font-family: var(--monospace);
399 font-weight: normal;
400 font-size: 1.04rem;
401 }
402 .CodeMirror-dialog input {
403 font-family: var(--monospace);
404 font-size: 100%;
405 }
406
407 #template .CodeMirror-wrap pre.CodeMirror-line, #template .CodeMirror-wrap pre.CodeMirror-line-like {
408 word-wrap: break-word;
409 white-space: pre-wrap;
410 word-break: break-all;
411 }
412
413 /* Select */
414 #template .template-select-grid {
415 text-align: left;
416 }
417 #template .field-select {
418 display: grid;
419 grid-template-columns: 1fr 32px;
420 height: 100%;
421 min-height: 30px;
422 cursor: pointer;
423 background-color: var(--menu-input-bg);
424 border: 2px solid var(--menu-input-border);
425 border-radius: 4px;
426 user-select: none;
427 }
428 #template .field-select > .value {
429 padding: 0 0 0 0.44rem;
430 white-space: nowrap;
431 overflow: hidden;
432 line-height: 32px;
433 font-size: 1rem;
434 color: var(--text);
435 }
436 #template .field-select > .icon {
437 background-image: var(--select-icon);
438 background-repeat: no-repeat;
439 background-position: center;
440 background-size: 12px;
441 }
442 #template .template-select-grid .field-options {
443 display: grid;
444 position: absolute;
445 height: 0;
446 overflow: hidden;
447 width: 100%;
448 border-radius: 0.25rem;
449 box-shadow: 0 2px 3px 0 #00000033;
450 max-height: 17rem;
451 z-index: 7;
452 }
453 #template .template-select-grid .field-options.open {
454 background-color: var(--bg-3);
455 border: 2px solid var(--bg-4);
456 color: var(--text);
457 overflow: auto;
458 height: auto;
459 margin-top: 2px;
460 }
461 #template .template-select-grid .field-options .option {
462 padding: 0.4rem 0.44rem;
463 cursor: pointer;
464 font-size: 0.94rem;
465 }
466 #template .template-select-grid .field-options .option:hover {
467 background-color: var(--bg-2);
468 }