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