├── photoshop
├── js
│ ├── 4.js
│ └── 5.js
├── css
│ ├── 2.css
│ └── 1.css
├── index.html
└── json
│ └── configure.json
└── README.md
/photoshop/js/4.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/photoshop/js/5.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/photoshop/css/2.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | #
3 |
4 | #
5 |
6 |
7 |
8 | in the name of GOD
9 |
10 |
11 |
12 | #
13 |
14 |
15 |
16 | hello people the this project desgined by sahand mohammadrezaii
17 |
18 |
19 |
20 | #
21 |
--------------------------------------------------------------------------------
/photoshop/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/photoshop/json/configure.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Vectorpea",
3 | "short_name": "Vectorpea",
4 | "display": "standalone",
5 | "icons": [
6 | {
7 | "src": "icon512.png",
8 | "type": "image/png",
9 | "sizes": "512x512"
10 | }
11 | ],
12 | "start_url": "/?utm_source=homescreen",
13 | "background_color": "#0f171d",
14 | "theme_color": "#474747",
15 | "file_handlers": [
16 | {
17 | "action": "/",
18 | "accept": {
19 | "image/psd": [
20 | ".psd"
21 | ]
22 | }
23 | },
24 | {
25 | "action": "/",
26 | "accept": {
27 | "image/jpeg": [
28 | ".jpeg",
29 | ".jpg"
30 | ]
31 | }
32 | },
33 | {
34 | "action": "/",
35 | "accept": {
36 | "image/png": [
37 | ".png"
38 | ]
39 | }
40 | },
41 | {
42 | "action": "/",
43 | "accept": {
44 | "image/webp": [
45 | ".webp"
46 | ]
47 | }
48 | },
49 | {
50 | "action": "/",
51 | "accept": {
52 | "image/bmp": [
53 | ".bmp"
54 | ]
55 | }
56 | },
57 | {
58 | "action": "/",
59 | "accept": {
60 | "image/gif": [
61 | ".gif"
62 | ]
63 | }
64 | },
65 | {
66 | "action": "/",
67 | "accept": {
68 | "image/svg+xml": [
69 | ".svg"
70 | ]
71 | }
72 | },
73 | {
74 | "action": "/",
75 | "accept": {
76 | "application/pdf": [
77 | ".pdf"
78 | ]
79 | }
80 | },
81 | {
82 | "action": "/",
83 | "accept": {
84 | "image/tiff": [
85 | ".tif",
86 | ".tiff"
87 | ]
88 | }
89 | },
90 | {
91 | "action": "/",
92 | "accept": {
93 | "image/ai": [
94 | ".ai"
95 | ]
96 | }
97 | },
98 | {
99 | "action": "/",
100 | "accept": {
101 | "image/psb": [
102 | ".psb"
103 | ]
104 | }
105 | },
106 | {
107 | "action": "/",
108 | "accept": {
109 | "image/xcf": [
110 | ".xcf"
111 | ]
112 | }
113 | },
114 | {
115 | "action": "/",
116 | "accept": {
117 | "image/sketch": [
118 | ".sketch"
119 | ]
120 | }
121 | },
122 | {
123 | "action": "/",
124 | "accept": {
125 | "image/xd": [
126 | ".xd"
127 | ]
128 | }
129 | },
130 | {
131 | "action": "/",
132 | "accept": {
133 | "image/pxd": [
134 | ".pxd"
135 | ]
136 | }
137 | },
138 | {
139 | "action": "/",
140 | "accept": {
141 | "image/cdr": [
142 | ".cdr"
143 | ]
144 | }
145 | },
146 | {
147 | "action": "/",
148 | "accept": {
149 | "image/eps": [
150 | ".eps",
151 | ".ps"
152 | ]
153 | }
154 | },
155 | {
156 | "action": "/",
157 | "accept": {
158 | "image/x-icon": [
159 | ".ico"
160 | ]
161 | }
162 | },
163 | {
164 | "action": "/",
165 | "accept": {
166 | "image/jpx": [
167 | ".jpx"
168 | ]
169 | }
170 | },
171 | {
172 | "action": "/",
173 | "accept": {
174 | "image/jp2": [
175 | ".jp2"
176 | ]
177 | }
178 | },
179 | {
180 | "action": "/",
181 | "accept": {
182 | "image/x-tga": [
183 | ".tga"
184 | ]
185 | }
186 | },
187 | {
188 | "action": "/",
189 | "accept": {
190 | "image/vnd-ms.dds": [
191 | ".dds"
192 | ]
193 | }
194 | }
195 | ],
196 | "share_target": {
197 | "action": "/",
198 | "method": "POST",
199 | "enctype": "multipart/form-data",
200 | "params": {
201 | "files": [
202 | {
203 | "name": "image",
204 | "accept": [
205 | "image/jpeg",
206 | "image/png",
207 | "image/webp",
208 | "image/gif"
209 | ]
210 | }
211 | ]
212 | }
213 | }
214 | }
--------------------------------------------------------------------------------
/photoshop/css/1.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | *{
4 | border-style: solid;
5 | border-width: 0;
6 | border-color: var(--brdr);
7 | column-rule-style:solid;
8 | column-rule-color: var(--bg-panel);
9 | }
10 |
11 | body, button, input, textarea, select { font-family: "Open Sans", Sans-Serif; }
12 |
13 | .autoscale
14 | {
15 | width : var(--img20);
16 | height: var(--img20);
17 | }
18 | .miniscale
19 | {
20 | width : var(--img15);
21 | height: var(--img15);
22 | }
23 |
24 | .listitem {
25 | border-bottom-width: 1px;
26 | padding: 0.2em;
27 | }
28 |
29 | .gsicon {
30 | filter: invert( var(--gs-invert) ) /*drop-shadow(0 var(--sh-dy) 0 var(--sh-clr))*/;
31 | -webkit-user-drag: none;
32 | user-drag: none;
33 | -moz-user-drag: none;
34 | }
35 |
36 | .svggallery {
37 | text-shadow:none;
38 | line-height:0;
39 | }
40 | .svggallery svg {
41 | margin:0 4px 4px 0;
42 | cursor: pointer;
43 | }
44 |
45 | .colorpicker .form .flabel, .numlist .flabel {
46 | display: inline-block;
47 | min-width : 17px;
48 | }
49 |
50 | body {overscroll-behavior-x: contain; /* two-finger swipe left can navigate to a previous website */}
51 | body, input, select, button {
52 | font-size: 13px;
53 | }
54 |
55 | body, button{
56 | margin:0;
57 | padding: 0;
58 | background-color: var(--base);
59 |
60 | user-select: none;
61 | -moz-user-select: none;
62 | -webkit-user-select: none;
63 |
64 | cursor: default;
65 | overflow-x: hidden;
66 | /*overflow: hidden;*/
67 | }
68 | /*
69 | .app , button {
70 | text-shadow: 0 var(--sh-dy) 0 var(--sh-clr);
71 | }*/
72 |
73 | .app {
74 | background-color: var(--base);
75 | color: var(--text-color);
76 | position:relative;
77 | }
78 |
79 |
80 | .intro {
81 | box-shadow: 0px 40px 70px rgba(0,0,0,0.35);
82 | border-radius:20px;
83 | color: #e6e6e6;
84 | text-shadow: none;
85 | line-height:1.7em;
86 | }
87 |
88 | .intro .labelitem {
89 | padding: 0.15em 0.3em;
90 | }
91 |
92 | .intro button {
93 | color: #e6e6e6;
94 | font-size: 1em;
95 | margin: 0 0em 0 0;
96 | cursor: pointer;
97 | text-shadow: none;
98 | background-color:rgba(255,255,255,0);
99 | padding: 0.15em 0.4em;
100 | border-radius: 0.4em;
101 | }
102 | .intro button:hover {
103 | background-color:rgba(0,0,0,0.35);
104 | }
105 |
106 |
107 |
108 | hr {
109 | border: 0;
110 | height: 1px;
111 |
112 | background: var(--bg-panel);
113 | }
114 |
115 | .disabled
116 | {
117 | opacity:0.5;
118 | pointer-events: none;
119 | }
120 |
121 | .bordered
122 | {
123 | border: 1px solid rgba(0,0,0,0.33);
124 | }
125 |
126 | .padded
127 | {
128 | padding:0.5em;
129 | }
130 |
131 | .marged
132 | {
133 | margin:0.5em;
134 | }
135 |
136 | .flexrow
137 | {
138 | display:flex;
139 | flex-flow:row;
140 | }
141 |
142 | .cell
143 | {
144 | display:table-cell;
145 | vertical-align:top;
146 | }
147 |
148 | .form
149 | {
150 | line-height:2.3em;
151 | }
152 | .form .fitem {
153 | margin-right: 6px;
154 | }
155 |
156 | .vlist .fitem
157 | {
158 | display:block;
159 | }
160 |
161 | .sbar{
162 | position:relative;
163 | }
164 |
165 | .sbar .top {
166 | font-weight:bold;
167 | background-color: var(--bg-panel); /*#413d39;*/
168 | font-size:0.65em;
169 | text-align: center;
170 | padding: 0px 2px;
171 | cursor:pointer;
172 | height:11px;
173 | }
174 |
175 |
176 | .toolbar .tools {
177 | padding:2px;
178 | display: inline-flex;
179 | flex-flow: column wrap;
180 | }
181 |
182 | .toolbar .tools .toolbtn {
183 | border-radius:6px;
184 | margin:2px 1px 1px 1px;
185 | padding:4px 4px;
186 | }
187 | .toolbar .tools .toolbtn:hover, .toolbar .tools .active {
188 | background-color: var(--bg-bbtn);
189 | }
190 | .toolbar .tools .active {
191 | border-left-width:3px;
192 | border-left-color: var(--accent);
193 | margin-left:-2px;
194 | border-top-left-radius:0;
195 | border-bottom-left-radius:0;
196 | }
197 | .toolbar .tools button { position:relative; }
198 |
199 | .toolbar .tools button img
200 | {
201 | width:var(--img20);
202 | height:var(--img20);
203 | /*width:20px;
204 | height:20px;*/
205 | vertical-align:middle;
206 | }
207 | .toolbar .scont {
208 | margin: 3px 0 -6px 0;
209 | }
210 | .toolbar .switch
211 | {
212 | margin: 0 1px 0 1px;
213 | width: 15px;
214 | height: 16px;
215 | display:inline-block;
216 | padding: 0px;
217 | text-align:center;
218 | border-width: 1px;
219 | border-radius: 4px;
220 | font-size: 12px;
221 | background-color:var(--base);
222 | overflow:hidden;
223 | }
224 |
225 |
226 |
227 | .rightbar {
228 | display:flex;
229 | flex-flow: row;
230 | }
231 | .rightbar .block{
232 | /*min-width: 18em;*/
233 | }
234 | .rightbar .collapsed{
235 | width:3em;
236 | }
237 | .rightbar .collapsed button {
238 | display: block;
239 | margin:0.3em;
240 | }
241 |
242 | .rightbar .float
243 | {
244 | position:absolute;
245 | right: 108%;
246 | /*border-width: 1px;*/
247 | box-shadow: 0px 8px 40px rgba(0,0,0,0.35);
248 | background-color: var(--base);
249 | }
250 |
251 | .alertcont
252 | {
253 | position:absolute;
254 | width:50%;
255 | left:25%;
256 | max-width:700px;
257 | /*pointer-events:none;*/
258 | z-index: 10;
259 | margin-top:1em;
260 | }
261 |
262 | .alertpanel
263 | {
264 | font-size: 1.4em;
265 | margin-bottom:1em;
266 | background-color:#ffffff;
267 | color: #000000;
268 | padding:0.4em;
269 | border-radius:0.5em;
270 | text-align:center;
271 | text-shadow:none;
272 | box-shadow: rgba(0,0,0,0.5) 0 0 1em;
273 | }
274 | .tpanel { /* temporary panel */
275 | transition: all 0.2s cubic-bezier(0.240, 0.575, 0.665, 1.565);
276 | transform: scale(0.6);
277 | opacity:0;
278 | }
279 |
280 | .selected
281 | {
282 | background-color: rgba(0,0,0, var(--alphaDark) );
283 | }
284 |
285 |
286 | .panelblock
287 | {
288 | /*border-top-width:1px;*/
289 | }
290 |
291 | .highlight
292 | {
293 | box-shadow: inset 0 0 10px #33aaff !important;
294 | }
295 |
296 |
297 | .panelblock {
298 | border-bottom-width:4px;
299 | }
300 |
301 | .block .panelhead
302 | {
303 | /*padding:4px 0 0 0;*/
304 | /*background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 100%);*/
305 | background-color: var(--bg-panel);
306 | /*box-shadow: inset 0px -10px 16px rgba(0,0,0,0.08);*/
307 | /*padding-top: 3px; */
308 | /*border-bottom-width: 1px;*/
309 | /*height:1.6em;*/
310 | }
311 | .block .panelhead .label {
312 | pointer-events: none;
313 | margin: 4px 7px 0 7px;
314 | line-height:1.9em;
315 | }
316 |
317 | .mainblock .panelhead, .float .panelhead {
318 | padding: 4px 4px 0 4px;
319 | }
320 | .mainblock .panelhead div {
321 | border-radius: 4px;
322 | }
323 | .mainblock .panelhead {
324 | padding-bottom:4px;
325 | }
326 |
327 |
328 | .block .panelhead div
329 | {
330 | height:26.1px;
331 | /*padding:0.2em 0.5em 0.25em 0.5em;*/
332 | display:inline-block;
333 | border-top-left-radius:4px;
334 | border-top-right-radius:4px;
335 |
336 | opacity: 0.7;
337 |
338 | margin-right:4px;
339 |
340 | transition: background 0.25s ease-in-out;
341 | /*
342 | border-right-width: 1px;
343 | border-right-color: var(--brdrDrk);
344 |
345 | border-top-width: 1px;
346 | border-top-color: var(--brdrLgt);*/
347 | }
348 | .block .panelhead div:hover {
349 | transition: background 0.25s ease-in-out; background-color: var(--base);
350 | }
351 |
352 |
353 | .block .panelhead .active
354 | {
355 | background-color: var(--base);
356 | opacity:1;
357 | }
358 | .block .panelhead .active div
359 | {
360 |
361 | }
362 |
363 | .block .panelhead div .cross
364 | {
365 | cursor: pointer;
366 | display:inline-block;
367 | background-image: var(--icon_cross);
368 | background-size: 10px 10px;
369 | background-repeat: no-repeat;
370 | background-position: center;
371 | width: 26px;
372 | height: 26px;
373 | vertical-align:top;
374 | }
375 |
376 |
377 | .block .pbody .fitem
378 | {
379 | margin-right: 6px;
380 | }
381 |
382 | .mainblock .panelhead {
383 | border-top-left-radius: 7px;
384 | }
385 |
386 | .mainblock .body {
387 | background-color: var(--bg-canvas);
388 | }
389 | .mainblock
390 | {
391 | border-bottom-width:0 !important;
392 | }
393 |
394 |
395 |
396 | .scrollable
397 | {
398 | overflow-x: hidden;
399 | overflow-y: scroll;
400 | /* for Firefox: */
401 | scrollbar-color: var(--brdrDrk) rgba(0,0,0, var(--alphaDark) );
402 | scrollbar-width: thin;
403 | }
404 |
405 |
406 | .scrollable::-webkit-scrollbar {
407 | width: 10px;
408 |
409 | }
410 | .scrollable::-webkit-scrollbar-thumb {
411 | border-radius:3px;
412 | background: var(--brdrDrk);
413 | margin:2px;
414 | }
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 | .lpbody {
427 | /*width: 21em;*/
428 | }
429 |
430 | .lphead, .lpfoot
431 | {
432 | padding:2px;
433 | }
434 | .lpineck {
435 | /*font-size: 12px;*/
436 | }
437 |
438 | .lphead {
439 | border-bottom-width: 1px;
440 | }
441 | .block .pbody .lphead .fitem button {
442 | margin-right:0;
443 | }
444 |
445 | .lpfoot
446 | {
447 | text-align:right;
448 | border-top-width: 1px;
449 | }
450 | .lpfoot button { padding-bottom:0; }
451 |
452 | .head
453 | {
454 | margin-top: -1px;
455 | border-top-width: 1px;
456 | cursor: pointer;
457 | }
458 |
459 |
460 | .styleitem .head
461 | {
462 | border: none;
463 | height:22px;
464 | }
465 |
466 |
467 | .lpbody .artb
468 | {
469 | background-color:rgba(0,0,0,var(--alphaDark));
470 | /*border-right-width: 3px;*/
471 | /*border-bottom-width: 2px;
472 | border-top-width: 2px;*/
473 | /*box-shadow: inset 0 0 4px var(--bg-panel);*/
474 | /*background-color: var(--bg-panel);*/
475 | }
476 |
477 | .lpbody .selected {
478 | background-color:var(--bg-bbtn);
479 | }
480 |
481 |
482 |
483 | .head .headL div, .head .headR div, .styleitem .head div
484 | {
485 | display:inline-block;
486 | height:100%;
487 | background-repeat: no-repeat;
488 | background-position: center;
489 | }
490 |
491 | .head div, .styleitem .head
492 | {
493 | overflow:hidden;
494 | white-space: nowrap;
495 | }
496 |
497 | .head .headL
498 | {
499 | height:100%;
500 | width:100%;
501 | display:inline-block;
502 | }
503 |
504 | .head { position:relative; }
505 | .head .headR
506 | {
507 | position:absolute;
508 | right:0;
509 | display:inline-block;
510 | height:100%;
511 | }
512 |
513 | .head div {
514 | vertical-align:top; /* a bug in Safari */
515 | }
516 |
517 | .head .label
518 | {
519 | padding: 0 7px;
520 | /*max-width: 140px;*/
521 | }
522 |
523 | .head .eye
524 | {
525 | width: 28px;
526 | background-image: var(--icon_eye);
527 | filter: invert( var(--icon_eye_invrt) );
528 | background-size: var(--img15);
529 | }
530 | .head .sqr
531 | {
532 | width: 28px;
533 | background-image: var(--icon_square);
534 | filter: invert( var(--icon_square_invrt) );
535 | background-size: var(--img15);
536 | }
537 |
538 | .head .cmark
539 | {
540 | width: 22px;
541 | background-image: var(--icon_checkmark);
542 | filter: invert( var(--icon_checkmark_invrt) );
543 | }
544 |
545 |
546 | .head .open
547 | {
548 | background-image: var(--icon_arrow_down);
549 | filter: invert( var(--icon_arrow_down_invrt) );
550 | background-size: var(--img15);
551 | width:15px;
552 | }
553 |
554 | .head .closed
555 | {
556 | background-image: var(--icon_arrow_right);
557 | filter: invert( var(--icon_arrow_right_invrt) );
558 | background-size: var(--img15);
559 | width:15px;
560 | }
561 |
562 | .head .chain
563 | {
564 | width:8px;
565 | background-image: var(--icon_chain);
566 | filter: invert( var(--icon_chain_invrt) );
567 | background-size: var(--img18);
568 | }
569 |
570 | .head .clipp
571 | {
572 | width:1em;
573 | background-image: var(--icon_clipping);
574 | filter: invert( var(--icon_clipping_invrt) );
575 | background-size: var(--img15);
576 | }
577 |
578 | .head .link
579 | {
580 | width:var(--img20);
581 | background-image: var(--icon_link);
582 | filter: invert( var(--icon_link_invrt) );
583 | background-size: var(--img18);
584 | }
585 | .head .linkX
586 | {
587 | width:var(--img20);
588 | background-image: var(--icon_linkX);
589 | filter: invert( var(--icon_linkX_invrt) );
590 | background-size: var(--img18);
591 | }
592 |
593 | .head .lock
594 | {
595 | width:1.5em;
596 | background-image: var(--icon_lock);
597 | filter: invert( var(--icon_lock_invrt) );
598 | background-size: var(--img15);
599 | }
600 |
601 | .head .lrfx
602 | {
603 | width:1.5em;
604 | background-image: var(--icon_fx);
605 | filter: invert( var(--icon_fx_invrt) );
606 | background-size: var(--img15);
607 | }
608 |
609 | .head .arfx
610 | {
611 | width:1em;
612 | border-left-width:1px;
613 | }
614 |
615 | .head .folder
616 | {
617 | width:1.7em;
618 | background-image: var(--icon_folder);
619 | filter: invert( var(--icon_folder_invrt) );
620 | background-size: var(--img15);
621 | }
622 | .head canvas
623 | {
624 | border:1px solid black;
625 | margin:3px;
626 | }
627 |
628 | .head .active canvas
629 | {
630 | outline: 2px dashed var(--text-color);
631 | outline-offset:0px;
632 | /*border: 1px dashed var(--text-color);
633 | margin: 3px;*/
634 | }
635 |
636 |
637 |
638 |
639 |
640 |
641 |
642 |
643 |
644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 | .hpbody .listitem { cursor: pointer; padding:0.3em; }
652 |
653 | .topbar{
654 | /*
655 | border-bottom-width: 1px;
656 | border-bottom-color: var(--brdrDrk);
657 | */
658 | /*height:32px;*/
659 | }
660 |
661 | .topbar button {
662 | padding-left:5px;
663 | padding-right:5px;
664 | margin:4px;
665 | }
666 |
667 | .topbar .bbtn {
668 | margin: 3px 4px 2px 4px;
669 | }
670 |
671 |
672 | .contextpanel{
673 | min-width : 10em;
674 | box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
675 | text-shadow: none;
676 | }
677 | .cp_dark {
678 | background-color: var(--base);
679 | color: var(--text-color);
680 | }
681 | .cp_light {
682 | background-color: #fff;
683 | color: #000000;
684 | }
685 | .cp_trsp {
686 | background-color: rgba(var(--abs255),var(--abs255),var(--abs255),0.4);
687 |
688 | color: rgb(calc(255 - var(--abs255)),calc(255 - var(--abs255)),calc(255 - var(--abs255)));
689 | backdrop-filter: blur(24px);
690 | -webkit-backdrop-filter: blur(24px);
691 | border-radius:6px;
692 |
693 | outline: 1px solid rgba(255,255,255,0.12);
694 | outline-offset: -2px;
695 | padding:6px;
696 | /*border: 1px solid rgba(255,255,255,0.15);*/
697 | }
698 |
699 | .contextpanel .check {
700 | display: inline-block;
701 | width:15px;
702 | }
703 |
704 | .contextpanel .thumb
705 | {
706 | width : var(--img20);
707 | height: var(--img20);
708 | vertical-align: middle;
709 | margin: -0.6em 0.8em -0.5em -0.5em;
710 | }
711 | .cp_light .thumb {
712 | filter: invert( 0.2 );
713 | }
714 |
715 | .contextpanel hr{
716 | margin:0.25em 0;
717 | background: #bebebe;
718 | }
719 | .cp_trsp hr { background:rgba(255,255,255,0.15); margin:0.25em 0.65em; }
720 |
721 | .contextpanel div {
722 | padding: 0.5em 1em 0.5em 0.7em;
723 | }
724 | .cp_trsp div {
725 | padding: 0.35em 1em 0.35em 0.7em;
726 | }
727 |
728 | .cp_light .enab:hover, .cp_light .active {
729 | /*color:#fff;*/
730 | background-color: rgba(190,230,255,1);
731 | }
732 | .cp_dark .enab:hover, .cp_dark .active {
733 | /*color:#fff;*/
734 | background-color: rgba(0,0,0, var(--alphaDark) );
735 | }
736 | .cp_trsp .enab:hover, .cp_trsp .active {
737 | /*color:#fff;*/
738 | background-color: #206bcd;
739 | border-radius:6px;
740 | }
741 |
742 | .contextpanel .disab {
743 | opacity:0.4;
744 | pointer-events: none;
745 | }
746 |
747 | .contextpanel .right
748 | {
749 | float:right;
750 | margin-left:2em;
751 | opacity:0.7;
752 | }
753 |
754 | .fitem {
755 | display:inline-block;
756 | }
757 |
758 | label { margin-right:2px; }
759 |
760 | input, textarea, .labelitem {
761 | margin: 2px 0;
762 | padding: 3px;
763 | box-sizing: border-box;
764 | }
765 | /*
766 | input, textarea, select {
767 | background-color: var(--bg-input);
768 | color: var(--text-color);
769 | border-radius: 3px;
770 | }*/
771 | input, textarea, select {
772 | background-color: var(--bg-input);
773 | color: var(--text-color);
774 | border-radius: 3px;
775 | border: 1px solid var(--bg-input);
776 | transition: border 0.5s;
777 | }
778 |
779 | input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus {
780 | border: 1px solid var(--accent); /* perhaps replace with var(--accent-color) */
781 | outline: none!important;
782 | }
783 |
784 | textarea { vertical-align:top; }
785 |
786 |
787 | input[type='range']
788 | {
789 | vertical-align:middle;
790 | height: 1.6em;
791 | padding: 0;
792 | border:none;
793 | /*background-color: #000000;*/
794 | /*box-shadow: inset 0 0 60px rgba(0,0,0,0.5)*/
795 | }
796 |
797 | .rangecontFloat, .floatcont {
798 | background-color: var(--base);
799 | border-radius:6px;
800 | box-shadow: 0px 0px 20px rgba(0,0,0,0.25);
801 | opacity:0; transform: scale(0.95);
802 | }
803 | .rangecontFloat {
804 | padding: 3px 8px 4px 8px;
805 | }
806 | .floatcont {
807 | padding:7px;
808 | /*box-shadow: 0px 8px 40px rgba(0,0,0,0.35);*/
809 | }
810 |
811 | .mbox input {
812 | margin-left: 0.7em;
813 | }
814 |
815 |
816 | .tinput input
817 | {
818 | width:8em;
819 | }
820 |
821 | .brushbutton img, .gradientbutton img .contourbutton img{
822 | display: inline-block;
823 | }
824 |
825 | .brushbutton {
826 |
827 | }
828 |
829 | .contourbutton {
830 | line-height:2.1em;
831 |
832 | }
833 |
834 |
835 | .ddmenu {
836 | display:inline-block;
837 | }
838 |
839 | .multicheck .slabel {
840 | margin-right: 1em;
841 | }
842 |
843 | .colorsample {
844 | cursor:pointer;
845 | width:2.2em;
846 | height: 1.5em;
847 | display:inline-block;
848 | border-width: 3px;
849 | margin-bottom:-0.65em
850 | }
851 |
852 | .cswatch .colorsample {
853 | width:1.3em; height:1.3em;
854 | margin-right: 0.1em;
855 | border-width: 1px;
856 | margin-bottom:-0.3em;
857 | }
858 |
859 |
860 |
861 | .angleinput input { width:3em; }
862 |
863 |
864 | /*button img, button canvas, button svg, .mbox img*/
865 | .fitem img, .fitem canvas, .fitem svg {
866 | vertical-align: middle;
867 | }
868 |
869 | .fillbutton canvas {
870 | vertical-align:middle;
871 | border-radius: 3px;
872 | cursor:pointer;
873 | }
874 |
875 | button {
876 | padding: 2px 5px 3px 5px;
877 | border-radius:3px;
878 | color: var(--text-color);
879 | text-align:center;
880 | white-space: nowrap;
881 | }
882 |
883 | select {
884 | padding: 2px 2px 3px 2px;
885 | }
886 |
887 |
888 | .active {
889 | background-color: rgba(0,0,0, var(--alphaDark) );
890 | }
891 | .bactive {
892 | background-color: var(--bg-input);
893 | }
894 |
895 | @media (hover: hover) and (pointer: fine) {
896 | button:hover {
897 | background-color: rgba(0,0,0, var(--alphaDark) );
898 | }
899 | .bactive:hover {
900 | background-color: var(--bg-input);
901 | }
902 | }
903 |
904 | .bbtn {
905 | /*padding-left:5px;
906 | padding-right:5px;*/
907 | background-color: var(--bg-bbtn);
908 |
909 | border-top-width: 1px;
910 | border-top-color: var(--brdrLgt);
911 | border-bottom-width: 1px;
912 | border-bottom-color: var(--brdrDrk);
913 | overflow:hidden;
914 | }
915 | .bbtn:hover {
916 | background-color: var(--bg-bbtnOver);
917 | }
918 |
919 | .spread {
920 | width: 100%;
921 | }
922 |
923 | .nopadding {
924 | margin: 0;
925 | padding: 0;
926 | }
927 |
928 |
929 |
930 | .imageset
931 | {
932 | /*overflow-y: scroll;*/
933 | background-color: rgba(0,0,0, var(--alphaDark) );
934 | }
935 |
936 | .imageset .image, .imageset canvas
937 | {
938 | border-right: 1px solid rgba(0,0,0,0.2);
939 | border-bottom: 1px solid rgba(0,0,0,0.2);
940 | cursor: pointer;
941 | float:left;
942 | }
943 | .imageset .selected {
944 | outline: 1.5px solid #00aaff;
945 | }
946 |
947 | input[type='checkbox']
948 | {
949 | margin-right: 0.3em;
950 | vertical-align:middle;
951 | }
952 | /*
953 | input[type="checkbox"] + label:before {
954 | border: 1px solid #333;
955 | content: "";
956 | display: inline-block;
957 | font: 12px sans-serif;
958 | font-weight:bold;
959 | height: 12px;
960 | margin-right:4px;
961 | padding: 0;
962 | vertical-align: middle;
963 | width: 12px;
964 | background: #fff;
965 | color: #333;
966 | }
967 | input[type="checkbox"]:checked + label:before { content: "\2713"; }
968 | */
969 |
970 |
971 | .rangedropinput button
972 | {
973 | margin:0;
974 | padding:0.3em 0.1em;
975 | }
976 |
977 | .rangedropinput input
978 | {
979 | margin-right:0;
980 | }
981 |
982 | .trangeinput { width:100%; }
983 | .trangeinput input[type='text']
984 | {
985 | margin-left:0;
986 | margin-right:0;
987 | width:33%;
988 | text-align:right;
989 | }
990 | .trangeinput label
991 | {
992 | display:inline-block;
993 | width:67%;
994 | margin:0px;
995 | }
996 | .trangeinput input[type='range']
997 | {
998 | margin: -10px 0 0 0;
999 | width:100%;
1000 | }
1001 |
1002 |
1003 |
1004 | .cbox
1005 | {
1006 | padding:0em 0;
1007 | }
1008 |
1009 |
1010 | .fontitem
1011 | {
1012 | padding:3px 6px;
1013 | border-radius:0.3em;
1014 | height:21px;
1015 | white-space: nowrap;
1016 | }
1017 | .fontitem:hover {
1018 | /*background-color: rgba(255,255,255, 0.6);*/
1019 | box-shadow: inset 0 0 0.2em rgba(0,0,0,1); /*bottom internal shadow*/
1020 | }
1021 | .fontitem .label
1022 | {
1023 | display:inline-block; width:9em; overflow:hidden; white-space: nowrap;
1024 | }
1025 | .fontitem .thumb
1026 | {
1027 | display:inline-block; width:120px; height:20px; margin-left:0.5em;
1028 | background: url(../rsrc/fonts/fonts.png);
1029 | }
1030 |
1031 | .fontitem .star {
1032 | display: inline-block;
1033 | background-position: center;
1034 | background-repeat: no-repeat;
1035 | background-image: var(--icon_cshape);
1036 | filter: invert( var(--icon_cshape_invrt) );
1037 | background-size: var(--img20) var(--img20);
1038 | width: 20px; height: 20px;
1039 | vertical-align: top;
1040 | margin-right:4px;
1041 | opacity:0.1;
1042 | }
1043 |
1044 |
1045 |
1046 |
1047 | .window
1048 | {
1049 | position:absolute;
1050 | z-index: 10;
1051 | background-color: var(--base);
1052 | /*border: 1px solid;*/
1053 | border-radius:6px;
1054 | min-width : 3em;
1055 | min-height: 2em;
1056 | top: 150px;
1057 | left: 150px;
1058 | box-shadow: 0px 4px 30px rgba(0,0,0,0.25);
1059 | }
1060 |
1061 | .wdisabled {
1062 | pointer-events: none;
1063 | }
1064 |
1065 | .window .vmargin
1066 | {
1067 | margin:0.5em 0;
1068 | }
1069 |
1070 | .window .whead
1071 | {
1072 | border-top-width: 1px;
1073 | border-top-color: var(--brdrLgt);
1074 | border-bottom-width: 1px;
1075 | border-bottom-color:var(--brdrDrk);
1076 | height:30px;
1077 |
1078 | font-size: 1.15em;
1079 | background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 100%);
1080 | /*background: linear-gradient(to bottom, #2b2b2b 0%, #282828 50%, #262626 100%);*/
1081 | /*background: linear-gradient(to bottom, #595959 0%,#626262 3%,#575757 7%,#3c3c3c 90%,#3a3a3a 97%,#2e2e2e 100%);*/
1082 | /*background: linear-gradient(to bottom, #59574e 0%,#626055 3%,#59574f 7%,#403f3a 90%,#41403b 97%,#383734 100%);*/
1083 | border-top-left-radius:6px;
1084 | border-top-right-radius:6px;
1085 | }
1086 |
1087 | .window .whead .wname
1088 | {
1089 | display: inline-block;
1090 | padding: 0.3em 0.5em;
1091 | font-weight: bold;
1092 | }
1093 |
1094 | .window .whead .cross
1095 | {
1096 | cursor: pointer;
1097 | display:inline-block;
1098 | background-image: var(--icon_cross);
1099 | background-size: 10px 10px;
1100 | background-repeat: no-repeat;
1101 | background-position: center;
1102 | width:30px;
1103 | height:30px;
1104 | font-size: 1.3em;
1105 | position:absolute; right:0;
1106 |
1107 | }
1108 |
1109 |
1110 | .window .wide
1111 | {
1112 | font-size: 1.2em;
1113 | display: block;
1114 | }
1115 |
1116 | .window .cbox{
1117 | margin-left:0.4em;
1118 | }
1119 |
1120 | .window .cbox, .window .angleinput {
1121 | display:inline-block;
1122 | }
1123 |
1124 | .window .body
1125 | {
1126 | padding: 1em;
1127 | /*line-height:1.6em;*/
1128 | }
1129 |
1130 | .window .body .form .block
1131 | {
1132 | padding:1em;
1133 | border: 0.1em solid rgba(0,0,0,0.33);
1134 | }
1135 |
1136 |
1137 | .window .hbar > .fitem
1138 | {
1139 | margin-right: 1em;
1140 | }
1141 |
1142 |
1143 |
1144 |
1145 | .window .imgcont
1146 | {
1147 | /*width:512px;
1148 | height:512px;*/
1149 | /*background-color: rgba(0,0,0,0.1);*/
1150 | text-shadow:none;
1151 | /* keep it because of SVG */
1152 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IB2cksfwAAAAZQTFRF////yMjIXOIDQgAAABJJREFUeJxjYPjPgBXhEB7uAABycQ/xMT/uAgAAAABJRU5ErkJggg==);
1153 | }
1154 |
1155 | /*
1156 | .window .body .form .tinput .label, .window .body .form .ddmenu .label
1157 | {
1158 | display:inline-block;
1159 | min-width:4em;
1160 | }
1161 | */
1162 |
1163 | .window .flabel, .labfxd .flabel
1164 | {
1165 | display:inline-block;
1166 | min-width:4em;
1167 | }
1168 | .label6 .flabel
1169 | {
1170 | display:inline-block;
1171 | min-width:6em;
1172 | }
1173 | .label8 .flabel
1174 | {
1175 | display:inline-block;
1176 | min-width:8em;
1177 | }
1178 | .label12 .flabel
1179 | {
1180 | display:inline-block;
1181 | min-width:12em;
1182 | }
1183 |
1184 | .window .noalign .flabel
1185 | {
1186 | min-width:0;
1187 | }
1188 | .window .noalign .fitem
1189 | {
1190 | margin-right:1em;
1191 | }
1192 |
1193 | .window h2 {
1194 | margin-bottom: 0.2em;
1195 | }
1196 |
1197 | .account table {
1198 | border-width:0px;
1199 | border-spacing: 20px 0px;
1200 | width: calc(100% + 40px);
1201 | margin-left: -20px;
1202 | font-size:1.2em;
1203 | text-shadow:none;
1204 | padding-bottom:1em;
1205 | }
1206 |
1207 | .accounttable th, .account table td { box-shadow: 0px 6px 12px rgba(0,0,0,0.25); }
1208 | .account table th {
1209 | padding:10px 20px;
1210 | font-weight:normal;
1211 | font-size:1.25em;
1212 | color:white;
1213 | background-color: #2f6f9f;
1214 | }
1215 | .account table td {
1216 | color:#000;
1217 | background-color:white;
1218 | padding: 4px 11px;
1219 | }
1220 | .account table td ul {
1221 | list-style-type: none; padding:0; margin:0;
1222 | }
1223 |
1224 | /*
1225 | table {
1226 | border-width:2px;
1227 | font-size: 1.2em;
1228 | text-align: center;
1229 | border-collapse: collapse;
1230 | margin: 6px 0 6px 0;
1231 | }
1232 |
1233 | table .left {
1234 | text-align:left;
1235 | width: 240px;
1236 | }
1237 |
1238 | table td, table th {
1239 | width:140px;
1240 | margin:0;
1241 | padding: 3px 8px;
1242 | border-width:1px 2px;
1243 | }
1244 |
1245 | table th { font-size: 1.2em; border-bottom-width: 2px; background-color:rgba(0,0,0, var(--alphaDark) ); }
1246 | table .lastrow { font-weight:bold; }
1247 |
1248 |
1249 | table .yes, table .no { font-weight: bold; font-size:1.6em; }
1250 |
1251 | table .yes { background-color: rgba(0,255,0,0.2); }
1252 |
1253 | */
1254 |
1255 |
1256 |
1257 |
1258 |
1259 |
1260 |
1261 |
1262 | .confbar
1263 | {
1264 | line-height:2.3em;
1265 | }
1266 |
1267 | .toolconf
1268 | {
1269 | display:flex;
1270 | flex-flow: row;
1271 | }
1272 |
1273 | .confbar .toolicon
1274 | {
1275 | width : var(--img20);
1276 | height: var(--img20);
1277 | margin: 5px 12px -4px 12px;
1278 | display: absolute;
1279 | }
1280 |
1281 | .confbar .body
1282 | {
1283 |
1284 | }
1285 |
1286 | .confbar .fitem {
1287 | margin-right: 0.35em;
1288 | }
1289 |
1290 | .confbar .body > .fitem
1291 | {
1292 | margin-right: 1.2em;
1293 | }
1294 |
1295 |
1296 | /* cyrillic-ext */
1297 | @font-face {
1298 | font-display: swap;
1299 | font-family: 'Open Sans';
1300 | font-style: italic;
1301 | font-weight: 400;
1302 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Udc1UAw.woff2) format('woff2');
1303 | unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
1304 | }
1305 | /* cyrillic */
1306 | @font-face {
1307 | font-display: swap;
1308 | font-family: 'Open Sans';
1309 | font-style: italic;
1310 | font-weight: 400;
1311 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0ddc1UAw.woff2) format('woff2');
1312 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
1313 | }
1314 | /* greek-ext */
1315 | @font-face {
1316 | font-display: swap;
1317 | font-family: 'Open Sans';
1318 | font-style: italic;
1319 | font-weight: 400;
1320 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Vdc1UAw.woff2) format('woff2');
1321 | unicode-range: U+1F00-1FFF;
1322 | }
1323 | /* greek */
1324 | @font-face {
1325 | font-display: swap;
1326 | font-family: 'Open Sans';
1327 | font-style: italic;
1328 | font-weight: 400;
1329 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0adc1UAw.woff2) format('woff2');
1330 | unicode-range: U+0370-03FF;
1331 | }
1332 | /* vietnamese */
1333 | @font-face {
1334 | font-display: swap;
1335 | font-family: 'Open Sans';
1336 | font-style: italic;
1337 | font-weight: 400;
1338 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Wdc1UAw.woff2) format('woff2');
1339 | unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
1340 | }
1341 | /* latin-ext */
1342 | @font-face {
1343 | font-display: swap;
1344 | font-family: 'Open Sans';
1345 | font-style: italic;
1346 | font-weight: 400;
1347 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Xdc1UAw.woff2) format('woff2');
1348 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
1349 | }
1350 | /* latin */
1351 | @font-face {
1352 | font-display: swap;
1353 | font-family: 'Open Sans';
1354 | font-style: italic;
1355 | font-weight: 400;
1356 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2) format('woff2');
1357 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1358 | }
1359 | /* cyrillic-ext */
1360 | @font-face {
1361 | font-display: swap;
1362 | font-family: 'Open Sans';
1363 | font-style: italic;
1364 | font-weight: 700;
1365 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhmIqOjjg.woff2) format('woff2');
1366 | unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
1367 | }
1368 | /* cyrillic */
1369 | @font-face {
1370 | font-display: swap;
1371 | font-family: 'Open Sans';
1372 | font-style: italic;
1373 | font-weight: 700;
1374 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhvIqOjjg.woff2) format('woff2');
1375 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
1376 | }
1377 | /* greek-ext */
1378 | @font-face {
1379 | font-display: swap;
1380 | font-family: 'Open Sans';
1381 | font-style: italic;
1382 | font-weight: 700;
1383 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhnIqOjjg.woff2) format('woff2');
1384 | unicode-range: U+1F00-1FFF;
1385 | }
1386 | /* greek */
1387 | @font-face {
1388 | font-display: swap;
1389 | font-family: 'Open Sans';
1390 | font-style: italic;
1391 | font-weight: 700;
1392 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhoIqOjjg.woff2) format('woff2');
1393 | unicode-range: U+0370-03FF;
1394 | }
1395 | /* vietnamese */
1396 | @font-face {
1397 | font-display: swap;
1398 | font-family: 'Open Sans';
1399 | font-style: italic;
1400 | font-weight: 700;
1401 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhkIqOjjg.woff2) format('woff2');
1402 | unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
1403 | }
1404 | /* latin-ext */
1405 | @font-face {
1406 | font-display: swap;
1407 | font-family: 'Open Sans';
1408 | font-style: italic;
1409 | font-weight: 700;
1410 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhlIqOjjg.woff2) format('woff2');
1411 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
1412 | }
1413 | /* latin */
1414 | @font-face {
1415 | font-display: swap;
1416 | font-family: 'Open Sans';
1417 | font-style: italic;
1418 | font-weight: 700;
1419 | src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhrIqM.woff2) format('woff2');
1420 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1421 | }
1422 | /* cyrillic-ext */
1423 | @font-face {
1424 | font-display: swap;
1425 | font-family: 'Open Sans';
1426 | font-style: normal;
1427 | font-weight: 400;
1428 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
1429 | unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
1430 | }
1431 | /* cyrillic */
1432 | @font-face {
1433 | font-display: swap;
1434 | font-family: 'Open Sans';
1435 | font-style: normal;
1436 | font-weight: 400;
1437 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
1438 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
1439 | }
1440 | /* greek-ext */
1441 | @font-face {
1442 | font-display: swap;
1443 | font-family: 'Open Sans';
1444 | font-style: normal;
1445 | font-weight: 400;
1446 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
1447 | unicode-range: U+1F00-1FFF;
1448 | }
1449 | /* greek */
1450 | @font-face {
1451 | font-display: swap;
1452 | font-family: 'Open Sans';
1453 | font-style: normal;
1454 | font-weight: 400;
1455 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
1456 | unicode-range: U+0370-03FF;
1457 | }
1458 | /* vietnamese */
1459 | @font-face {
1460 | font-display: swap;
1461 | font-family: 'Open Sans';
1462 | font-style: normal;
1463 | font-weight: 400;
1464 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
1465 | unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
1466 | }
1467 | /* latin-ext */
1468 | @font-face {
1469 | font-display: swap;
1470 | font-family: 'Open Sans';
1471 | font-style: normal;
1472 | font-weight: 400;
1473 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
1474 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
1475 | }
1476 | /* latin */
1477 | @font-face {
1478 | font-display: swap;
1479 | font-family: 'Open Sans';
1480 | font-style: normal;
1481 | font-weight: 400;
1482 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
1483 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1484 | }
1485 | /* cyrillic-ext */
1486 | @font-face {
1487 | font-display: swap;
1488 | font-family: 'Open Sans';
1489 | font-style: normal;
1490 | font-weight: 700;
1491 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOX-hpOqc.woff2) format('woff2');
1492 | unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
1493 | }
1494 | /* cyrillic */
1495 | @font-face {
1496 | font-display: swap;
1497 | font-family: 'Open Sans';
1498 | font-style: normal;
1499 | font-weight: 700;
1500 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2) format('woff2');
1501 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
1502 | }
1503 | /* greek-ext */
1504 | @font-face {
1505 | font-display: swap;
1506 | font-family: 'Open Sans';
1507 | font-style: normal;
1508 | font-weight: 700;
1509 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOXuhpOqc.woff2) format('woff2');
1510 | unicode-range: U+1F00-1FFF;
1511 | }
1512 | /* greek */
1513 | @font-face {
1514 | font-display: swap;
1515 | font-family: 'Open Sans';
1516 | font-style: normal;
1517 | font-weight: 700;
1518 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUehpOqc.woff2) format('woff2');
1519 | unicode-range: U+0370-03FF;
1520 | }
1521 | /* vietnamese */
1522 | @font-face {
1523 | font-display: swap;
1524 | font-family: 'Open Sans';
1525 | font-style: normal;
1526 | font-weight: 700;
1527 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOXehpOqc.woff2) format('woff2');
1528 | unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
1529 | }
1530 | /* latin-ext */
1531 | @font-face {
1532 | font-display: swap;
1533 | font-family: 'Open Sans';
1534 | font-style: normal;
1535 | font-weight: 700;
1536 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2');
1537 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
1538 | }
1539 | /* latin */
1540 | @font-face {
1541 | font-display: swap;
1542 | font-family: 'Open Sans';
1543 | font-style: normal;
1544 | font-weight: 700;
1545 | src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
1546 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1547 | }
1548 |
1549 |
1550 | .storageset * { text-shadow:none; }
1551 | .storage * {position:relative; }
1552 |
1553 | .storage { background-color:white; color:#222222; }
1554 |
1555 | .storwindow input { background-color:white; color:#333333; }
1556 |
1557 | .storage .cont { padding:4px; }
1558 | .storage img { object-fit: contain; }
1559 | .storage .name { word-break:break-all; line-height:1.35em; overflow:hidden; display:inline-block; vertical-align:middle; }
1560 |
1561 | .storage .ext {
1562 | position:absolute; top:2px; left:2px;
1563 | color:white; padding:2px 3px 2px 3px; line-height:1em; font-weight:bold; border-radius:2px;
1564 | }
1565 |
1566 | .storage .tile {
1567 | display:inline-block;
1568 | margin: 0 10px 10px 0;
1569 | }
1570 | .storage .tile img {
1571 | vertical-align:middle;
1572 | width:44px;
1573 | height:44px;
1574 | margin-right:8px;
1575 | }
1576 | .storage .tile .name {
1577 | height:36px;
1578 | }
1579 |
1580 |
1581 | .storage .icon {
1582 | display:inline-block;
1583 | height:136px;
1584 | text-align:center;
1585 | margin: 0 10px 10px 0;
1586 | }
1587 | .storage .icon img {
1588 | width:100px;
1589 | height:100px;
1590 | display:block;
1591 | }
1592 | .storage .icon .name {
1593 | width:100px; height:36px;
1594 | }
1595 |
1596 |
1597 | .storage .litm {
1598 | width:100%;
1599 | }
1600 | .storage .litm img {
1601 | width:24px; height:24px;
1602 | vertical-align:middle; margin-right:16px;
1603 | }
1604 | .storage .litm .name {
1605 | width:300px;
1606 | }
1607 |
1608 | .storage .active {
1609 | background-color: #ddf0ff;
1610 | }
1611 |
1612 |
1613 | .storage .bar, .storage .fls { padding:10px; }
1614 |
1615 | .storage .bar {
1616 | background-color: rgba(0,0,0,0.05);
1617 | }
1618 |
1619 | .storage .bar span {
1620 | padding: 4px 4px;
1621 | }
1622 |
1623 | .storage .btn {
1624 | cursor:pointer; display:inline-block;
1625 | background-color: #aaccff; padding: 0.3em 0.6em; border-radius: 0.2em; margin:0px 3px;
1626 | }
1627 |
--------------------------------------------------------------------------------