mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-11-13 17:08:20 +00:00
feat: some refactor, fix some design
This commit is contained in:
+112
-487
File diff suppressed because it is too large
Load Diff
+109
-202
@@ -2,13 +2,13 @@
|
||||
|
||||
vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
|
||||
|
||||
_2026-08-27T18:45:14.461Z_
|
||||
_2026-08-28T07:02:47.972Z_
|
||||
|
||||
## Сводка
|
||||
|
||||
- Токены light: **12** расх.
|
||||
- Токены dark: **18** расх.
|
||||
- Элементы (стиль/геометрия): **48** расх.
|
||||
- Токены light: **10** расх.
|
||||
- Токены dark: **16** расх.
|
||||
- Элементы (стиль/геометрия): **47** расх.
|
||||
- Только у нас: 14, только в рефе: 7
|
||||
|
||||
## Токены — Light
|
||||
@@ -17,8 +17,6 @@ _2026-08-27T18:45:14.461Z_
|
||||
|---|---|---|
|
||||
| `--danger` | #e5484d | — |
|
||||
| `--success` | #25a96a | — |
|
||||
| `--font-sans` | "IBM Plex Sans", system-ui, -apple-system, sans-serif | "IBM Plex Sans", sans-serif |
|
||||
| `--font-mono` | "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace | "IBM Plex Mono", monospace |
|
||||
| `--text-sm--line-height` | — | calc(1.25 / .875) |
|
||||
| `--text-xs--line-height` | — | calc(1 / .75) |
|
||||
| `--font-weight-medium` | — | 500 |
|
||||
@@ -40,8 +38,6 @@ _2026-08-27T18:45:14.461Z_
|
||||
| `--foreground` | #e8eef2 | #17212b |
|
||||
| `--success` | #25a96a | — |
|
||||
| `--line` | #33414c | #cbd3da |
|
||||
| `--font-sans` | "IBM Plex Sans", system-ui, -apple-system, sans-serif | "IBM Plex Sans", sans-serif |
|
||||
| `--font-mono` | "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace | "IBM Plex Mono", monospace |
|
||||
| `--text-sm--line-height` | — | calc(1.25 / .875) |
|
||||
| `--text-xs--line-height` | — | calc(1 / .75) |
|
||||
| `--font-weight-medium` | — | 500 |
|
||||
@@ -51,103 +47,25 @@ _2026-08-27T18:45:14.461Z_
|
||||
| `--radius-lg` | — | .5rem |
|
||||
| `--text-sm` | — | .875rem |
|
||||
|
||||
## Расхождения элементов (топ 48)
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
|
||||
- **padding**: `2.4px 7.2px` → `0px`
|
||||
- **letterSpacing**: `0.8px` → `1.2px`
|
||||
- **borderRadius**: `4px` → `0px`
|
||||
- **display**: `flex` → `inline`
|
||||
- **gap**: `4.8px` → `normal`
|
||||
- **rect**: `116,507 84x20` → `143,489 67x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
|
||||
- **padding**: `2.4px 7.2px` → `0px`
|
||||
- **letterSpacing**: `0.8px` → `1.2px`
|
||||
- **borderRadius**: `4px` → `0px`
|
||||
- **display**: `flex` → `inline`
|
||||
- **gap**: `4.8px` → `normal`
|
||||
- **rect**: `116,670 78x20` → `143,651 60x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
|
||||
- **padding**: `2.4px 7.2px` → `0px`
|
||||
- **letterSpacing**: `0.8px` → `1.2px`
|
||||
- **borderRadius**: `4px` → `0px`
|
||||
- **display**: `flex` → `inline`
|
||||
- **gap**: `4.8px` → `normal`
|
||||
- **rect**: `116,785 50x20` → `143,799 34x12`
|
||||
## Расхождения элементов (топ 47)
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)` — "RU"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `11px` → `10px`
|
||||
- **color**: `rgb(255, 255, 255)` → `rgb(238, 241, 244)`
|
||||
- **backgroundColor**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)`
|
||||
- **padding**: `4.8px 11.2px` → `6px 9px`
|
||||
- **letterSpacing**: `0.66px` → `normal`
|
||||
- **rect**: `1307,20 37x24` → `1323,20 29x24`
|
||||
- **padding**: `0px 11.2px` → `6px 9px`
|
||||
- **letterSpacing**: `0.6px` → `normal`
|
||||
- **display**: `flex` → `block`
|
||||
- **rect**: `1309,17 36x30` → `1323,20 29x24`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "COLOR"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontWeight**: `500` → `400`
|
||||
- **margin**: `0px` → `0px 0px 8px`
|
||||
- **letterSpacing**: `1px` → `0.8px`
|
||||
- **lineHeight**: `12px` → `normal`
|
||||
- **display**: `block` → `flex`
|
||||
- **rect**: `71,576 203x12` → `143,546 189x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **fontWeight**: `500` → `400`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **lineHeight**: `12px` → `normal`
|
||||
- **rect**: `806,320 262x12` → `808,663 30x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **fontWeight**: `500` → `400`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **lineHeight**: `12px` → `normal`
|
||||
- **rect**: `1094,320 262x12` → `1096,663 35x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **fontWeight**: `500` → `400`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **lineHeight**: `12px` → `normal`
|
||||
- **rect**: `806,752 262x12` → `808,1021 35x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **fontWeight**: `500` → `400`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **lineHeight**: `12px` → `normal`
|
||||
- **rect**: `1094,752 262x12` → `1096,1021 35x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **fontWeight**: `500` → `400`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **lineHeight**: `12px` → `normal`
|
||||
- **rect**: `806,1183 262x12` → `808,1378 59x10`
|
||||
- **rect**: `71,575 203x12` → `143,546 189x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `11px`
|
||||
- **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
|
||||
- **margin**: `0px` → `5px 0px 0px`
|
||||
@@ -155,196 +73,185 @@ _2026-08-27T18:45:14.461Z_
|
||||
- **rect**: `1090,240 36x13` → `1246,291 79x13`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)` — "EN"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `11px` → `10px`
|
||||
- **padding**: `4.8px 11.2px` → `6px 9px`
|
||||
- **letterSpacing**: `0.66px` → `normal`
|
||||
- **rect**: `1344,20 38x24` → `1352,20 29x24`
|
||||
- **padding**: `0px 11.2px` → `6px 9px`
|
||||
- **letterSpacing**: `0.6px` → `normal`
|
||||
- **display**: `flex` → `block`
|
||||
- **rect**: `1345,17 37x30` → `1352,20 29x24`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `11px` → `10px`
|
||||
- **padding**: `4.8px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.66px` → `normal`
|
||||
- **rect**: `491,597 44x24` → `520,567 46x30`
|
||||
- **padding**: `0px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.6px` → `normal`
|
||||
- **display**: `flex` → `block`
|
||||
- **rect**: `491,596 42x30` → `520,567 46x30`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)` — "75"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `11px` → `10px`
|
||||
- **padding**: `4.8px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.66px` → `normal`
|
||||
- **rect**: `535,597 38x24` → `566,567 46x30`
|
||||
- **padding**: `0px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.6px` → `normal`
|
||||
- **display**: `flex` → `block`
|
||||
- **rect**: `533,596 37x30` → `566,567 46x30`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)` — "50"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `11px` → `10px`
|
||||
- **padding**: `4.8px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.66px` → `normal`
|
||||
- **rect**: `573,597 38x24` → `612,567 46x30`
|
||||
- **padding**: `0px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.6px` → `normal`
|
||||
- **display**: `flex` → `block`
|
||||
- **rect**: `569,596 37x30` → `612,567 46x30`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)` — "25"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `11px` → `10px`
|
||||
- **padding**: `4.8px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.66px` → `normal`
|
||||
- **rect**: `611,597 38x24` → `658,567 46x30`
|
||||
- **padding**: `0px 11.2px` → `0px`
|
||||
- **letterSpacing**: `0.6px` → `normal`
|
||||
- **display**: `flex` → `block`
|
||||
- **rect**: `606,596 37x30` → `658,567 46x30`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
|
||||
- **fontSize**: `13.6px` → `16px`
|
||||
- **lineHeight**: `normal` → `24px`
|
||||
- **display**: `block` → `inline`
|
||||
- **rect**: `399,1036 129x18` → `432,1021 156x17`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,510 13x14` → `59,466 46x150`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `14.4px` → `15px`
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `208,508 467x19` → `143,510 157x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,673 13x14` → `59,628 46x136`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `14.4px` → `15px`
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `201,671 473x19` → `143,672 140x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,788 13x14` → `59,776 46x150`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `14.4px` → `15px`
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `174,785 501x19` → `143,820 91x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,951 13x14` → `59,938 46x142`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `14.4px` → `15px`
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `174,948 501x19` → `143,982 107x18`
|
||||
- **rect**: `399,1032 129x18` → `432,1021 156x17`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **rect**: `1150,215 70x13` → `1073,271 79x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **rect**: `1150,239 42x13` → `1159,271 79x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `1px` → `normal`
|
||||
- **rect**: `1150,264 28x13` → `1246,271 79x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)`
|
||||
- **rect**: `98,23 118x18` → `98,23 108x17`
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `0.8px` → `normal`
|
||||
- **rect**: `806,320 262x13` → `808,663 30x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01"
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `0.8px` → `normal`
|
||||
- **rect**: `1094,320 262x13` → `1096,663 35x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02"
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `0.8px` → `normal`
|
||||
- **rect**: `806,753 262x13` → `808,1021 35x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03"
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `0.8px` → `normal`
|
||||
- **rect**: `1094,753 262x13` → `1096,1021 35x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT"
|
||||
- **fontSize**: `10px` → `9px`
|
||||
- **letterSpacing**: `0.8px` → `normal`
|
||||
- **rect**: `806,1185 262x13` → `808,1378 59x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
|
||||
- **rect**: `173,124 7x13` → `165,124 13x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>h1:nth-child(1)` — "Build your image pipeline."
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
|
||||
- **lineHeight**: `normal` → `57.6px`
|
||||
- **rect**: `58,155 474x150` → `58,154 482x115`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,510 13x14` → `59,466 46x150`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
|
||||
- **display**: `block` → `inline`
|
||||
- **rect**: `116,510 72x13` → `143,489 67x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `196,507 171x19` → `143,510 157x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,672 13x14` → `59,628 46x136`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
|
||||
- **display**: `block` → `inline`
|
||||
- **rect**: `116,672 65x13` → `143,651 60x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `189,669 153x19` → `143,672 140x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,786 13x14` → `59,776 46x150`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
|
||||
- **display**: `block` → `inline`
|
||||
- **rect**: `116,786 36x13` → `143,799 34x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `160,783 99x19` → `143,820 91x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
|
||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||
- **rect**: `95,948 13x14` → `59,938 46x142`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
|
||||
- **margin**: `0px` → `5px 0px 18px`
|
||||
- **rect**: `160,945 117x19` → `143,982 107x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **margin**: `0px` → `5px 0px 0px`
|
||||
- **rect**: `1236,214 86x14` → `1073,291 79x13`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **margin**: `0px` → `5px 0px 0px`
|
||||
- **rect**: `1282,238 40x14` → `1159,291 79x13`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
|
||||
- **rect**: `98,23 118x18` → `98,23 108x17`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(2)` — "Chain simple tools together. Every chang"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
|
||||
- **rect**: `58,321 474x51` → `58,285 482x51`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "source.png"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `597,347 66x14` → `606,311 60x13`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `671,347 40x14` → `674,311 36x13`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `58,434 137x13` → `58,400 127x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `184,457 36x13` → `173,425 33x12`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `799,177 58x33` → `799,188 54x36`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `799,216 93x36` → `799,233 87x34`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `923,498 28x19` → `923,478 27x18`
|
||||
- **rect**: `923,499 28x19` → `923,478 27x18`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "original.png · 1200 × 800"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `925,706 135x11` → `942,663 124x10`
|
||||
- **rect**: `925,707 135x11` → `942,663 124x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `1262,706 86x11` → `1275,663 79x10`
|
||||
- **rect**: `1262,707 86x11` → `1275,663 79x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `962,1138 97x11` → `977,1021 89x10`
|
||||
- **rect**: `962,1140 97x11` → `977,1021 89x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `1278,1138 70x11` → `1290,1021 64x10`
|
||||
- **rect**: `1278,1140 70x11` → `1290,1021 64x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "ready · PNG-24"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `984,1569 76x11` → `997,1378 69x10`
|
||||
- **rect**: `984,1572 76x11` → `997,1378 69x10`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
|
||||
- **fontFamily**: `"IBM Plex Sans", system-ui, -apple-system, sans-serif` → `"IBM Plex Sans", sans-serif`
|
||||
- **rect**: `799,1624 565x17` → `799,1425 565x17`
|
||||
|
||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "EP"
|
||||
- **fontFamily**: `"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace` → `"IBM Plex Mono", monospace`
|
||||
- **rect**: `799,1627 565x17` → `799,1425 565x17`
|
||||
|
||||
## Только у нас (структурно)
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import MonoLabel from "./MonoLabel.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
@@ -10,7 +9,7 @@
|
||||
</script>
|
||||
|
||||
<div class="preview-tile">
|
||||
<MonoLabel>{label}</MonoLabel>
|
||||
<span class="tile-label">{label}</span>
|
||||
<div class="tile-canvas">{@render children()}</div>
|
||||
</div>
|
||||
|
||||
@@ -24,6 +23,12 @@
|
||||
padding: 0.4rem;
|
||||
background: var(--panel);
|
||||
}
|
||||
.tile-label {
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--blue);
|
||||
}
|
||||
.tile-canvas {
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
<style>
|
||||
.segmented {
|
||||
display: inline-flex;
|
||||
height: 32px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
@@ -44,11 +45,13 @@
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 0.3rem 0.7rem;
|
||||
padding: 0 0.7rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.segment + .segment {
|
||||
border-left: 1px solid var(--line);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import { GripVertical, X } from "@lucide/svelte";
|
||||
import Badge from "./Badge.svelte";
|
||||
|
||||
interface Props {
|
||||
index: number;
|
||||
@@ -17,7 +16,7 @@
|
||||
<div class="step-heading">
|
||||
<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
|
||||
<span class="step-index">{index.toString().padStart(2, "0")}</span>
|
||||
{#if type}<Badge tone="accent">{type}</Badge>{/if}
|
||||
{#if type}<span class="step-type">{type}</span>{/if}
|
||||
{#if title}<span class="step-title">{title}</span>{/if}
|
||||
<button
|
||||
type="button"
|
||||
@@ -54,13 +53,18 @@
|
||||
.step-index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
color: var(--blue);
|
||||
}
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font: 600 15px var(--font-mono);
|
||||
color: var(--foreground);
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.step-type {
|
||||
color: var(--muted);
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.step-remove {
|
||||
margin-left: auto;
|
||||
|
||||
@@ -55,6 +55,7 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font: 600 14px var(--font-mono);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.brand-mark {
|
||||
background: var(--blue);
|
||||
|
||||
@@ -31,8 +31,8 @@ optgroup {
|
||||
глобально не конфликтует со старым app.css. */
|
||||
|
||||
:root {
|
||||
--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
|
||||
--font-sans: "IBM Plex Sans", sans-serif;
|
||||
--font-mono: "IBM Plex Mono", monospace;
|
||||
|
||||
--background: #eef1f4;
|
||||
--panel: #f8fafb;
|
||||
|
||||
Reference in New Issue
Block a user