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