Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix cdp audit css selectors specifity

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-30 21:21:31 +05:00
parent 87dbb200d9
commit 11b4c87486
7 changed files with 132 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/audit/cdp-audit-1440x900.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit
2026-08-30T14:39:15.774Z
2026-08-30T16:20:46.243Z
viewport 1440x900, tolerance 1px, theme light
=== [1440x900] /preview/demo (vs demo.html) — 173 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
font-size: inherit → 16px
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
align-items: center → flex-end
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
max-width: 700px → —
line-height: 1 → 0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px
column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project
=== [1440x900] /preview/list-tools (vs list-tools.html) — 126 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1) [catalog-head]
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
✗ present in reference, absent in project
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1892,7 +1849,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -2558,7 +2502,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
display: flex → —
justify-content: space-between → —
justify-content: flex-start → —
row-gap: 8px → —
column-gap: 8px → —
margin-top: 10px → —
web/audit/cdp-audit-1920x1080.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit
2026-08-30T14:39:15.772Z
2026-08-30T16:20:46.240Z
viewport 1920x1080, tolerance 1px, theme light
=== [1920x1080] /preview/demo (vs demo.html) — 173 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1920x1080] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
font-size: inherit → 16px
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
align-items: center → flex-end
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
max-width: 700px → —
line-height: 1 → 0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px
column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project
=== [1920x1080] /preview/list-tools (vs list-tools.html) — 126 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1920x1080] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1) [catalog-head]
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
✗ present in reference, absent in project
=== [1920x1080] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1920x1080] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1892,7 +1849,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project
=== [1920x1080] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1920x1080] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -2558,7 +2502,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
display: flex → —
justify-content: space-between → —
justify-content: flex-start → —
row-gap: 8px → —
column-gap: 8px → —
margin-top: 10px → —
web/audit/cdp-audit-2560x1440.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit
2026-08-30T14:39:15.766Z
2026-08-30T16:20:46.232Z
viewport 2560x1440, tolerance 1px, theme light
=== [2560x1440] /preview/demo (vs demo.html) — 173 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [2560x1440] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
font-size: inherit → 16px
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
align-items: center → flex-end
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
max-width: 700px → —
line-height: 1 → 0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px
column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project
=== [2560x1440] /preview/list-tools (vs list-tools.html) — 126 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [2560x1440] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1) [catalog-head]
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
✗ present in reference, absent in project
=== [2560x1440] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [2560x1440] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1892,7 +1849,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project
=== [2560x1440] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [2560x1440] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -2558,7 +2502,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
display: flex → —
justify-content: space-between → —
justify-content: flex-start → —
row-gap: 8px → —
column-gap: 8px → —
margin-top: 10px → —
web/audit/cdp-audit-390x844.txt
+20 -52
View File
@@ -1,26 +1,19 @@
CDP visual audit
2026-08-30T14:39:15.778Z
2026-08-30T16:20:46.248Z
viewport 390x844, tolerance 1px, theme light
=== [390x844] /preview/demo (vs demo.html) — 174 differences ===
=== [390x844] /preview/demo (vs demo.html) — 172 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 4.7 (+4.7px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -492,12 +485,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
font-size: inherit → 16px
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
align-items: center → flex-end
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
max-width: 700px → —
line-height: 1 → 0.9
@@ -1063,11 +1056,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px
column-gap: — → 16px
@@ -1125,25 +1113,18 @@ body >div
✗ present in reference, absent in project
=== [390x844] /preview/list-tools (vs list-tools.html) — 155 differences ===
=== [390x844] /preview/list-tools (vs list-tools.html) — 154 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 3.3 (+3.3px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1228,6 +1209,7 @@ body > main > div > div:nth-of-type(1) [catalog-head]
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
@@ -1896,25 +1878,18 @@ body >div
✗ present in reference, absent in project
=== [390x844] /preview/tools/linear-gradient-png (vs gradient.html) — 93 differences ===
=== [390x844] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 4.7 (+4.7px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1992,7 +1967,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2566,25 +2541,18 @@ body >div
✗ present in reference, absent in project
=== [390x844] /preview/tools/remove-background-png (vs background-remover.html) — 101 differences ===
=== [390x844] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 4.8 (+4.8px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -2662,7 +2630,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2816,7 +2784,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
display: flex → —
justify-content: space-between → —
justify-content: flex-start → —
row-gap: 8px → —
column-gap: 8px → —
margin-top: 10px → —
web/audit/cdp-audit-768x1024.txt
+21 -53
View File
@@ -1,26 +1,19 @@
CDP visual audit
2026-08-30T14:39:15.776Z
2026-08-30T16:20:46.245Z
viewport 768x1024, tolerance 1px, theme light
=== [768x1024] /preview/demo (vs demo.html) — 174 differences ===
=== [768x1024] /preview/demo (vs demo.html) — 172 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 4.7 (+4.7px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -492,12 +485,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
font-size: inherit → 16px
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
align-items: center → flex-end
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
max-width: 700px → —
line-height: 1 → 0.9
@@ -1063,11 +1056,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px
column-gap: — → 16px
@@ -1125,25 +1113,18 @@ body >div
✗ present in reference, absent in project
=== [768x1024] /preview/list-tools (vs list-tools.html) — 155 differences ===
=== [768x1024] /preview/list-tools (vs list-tools.html) — 154 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 15 (-15px)
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
w: 30 → 15.4 (-14.6px)
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 3.3 (+3.3px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1228,6 +1209,7 @@ body > main > div > div:nth-of-type(1) [catalog-head]
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
@@ -1896,25 +1878,18 @@ body >div
✗ present in reference, absent in project
=== [768x1024] /preview/tools/linear-gradient-png (vs gradient.html) — 93 differences ===
=== [768x1024] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 4.7 (+4.7px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1992,7 +1967,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2566,25 +2541,18 @@ body >div
✗ present in reference, absent in project
=== [768x1024] /preview/tools/remove-background-png (vs background-remover.html) — 101 differences ===
=== [768x1024] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px)
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
display: — → inline-block
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
w: 0 → 4.8 (+4.8px)
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -2662,7 +2630,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2816,7 +2784,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
display: flex → —
justify-content: space-between → —
justify-content: flex-start → —
row-gap: 8px → —
column-gap: 8px → —
margin-top: 10px → —
web/audit/cdp-audit.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit
2026-08-30T09:31:56.937Z
2026-08-30T16:17:42.059Z
viewport 1440x900, tolerance 1px, theme light
=== [1440x900] /preview/demo (vs demo.html) — 173 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
font-size: inherit → 16px
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
align-items: center → flex-end
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
max-width: 700px → —
line-height: 1 → 0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
line-height: inherit → 1.5
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px
column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project
=== [1440x900] /preview/list-tools (vs list-tools.html) — 126 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1) [catalog-head]
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
✗ present in reference, absent in project
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -1892,7 +1849,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
body > main > header > div > span > i [status-dot]
width: 6px → 8px
height: 6px → 8px
box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex
@@ -2558,7 +2502,7 @@ body > main > div [tool-page]
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → —
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px
line-height: — → 1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
display: flex → —
justify-content: space-between → —
justify-content: flex-start → —
row-gap: 8px → —
column-gap: 8px → —
margin-top: 10px → —
web/scripts/audit-cdp.mjs
+43 -31
View File
@@ -284,17 +284,24 @@ async function capture(browser, target, viewport) {
} else {
i++;
const name = readName();
if (comp[i] === "(") {
const inner = comp.slice(i + 1, endParen());
if (name !== "where") {
for (const arg of splitTop(inner, ",")) {
const [a, b, c] = specCompound(arg);
A += a;
B += b;
C += c;
}
if (comp[i] === "(") {
const inner = comp.slice(i + 1, endParen());
// :is/:not/:has take the most specific argument.
if (name !== "where") {
let a = 0,
b = 0,
c = 0;
for (const arg of splitTop(inner, ",")) {
const [aa, bb, cc] = specCompound(arg);
a = Math.max(a, aa);
b = Math.max(b, bb);
c = Math.max(c, cc);
}
} else B++;
A += a;
B += b;
C += c;
}
} else B++;
}
} else if (/[a-zA-Z]/.test(ch)) {
C++;
@@ -311,28 +318,33 @@ async function capture(browser, target, viewport) {
for (const { rule, order } of rules) {
const sel = rule.selectorText;
if (!sel) continue;
let ok = false;
try {
ok = el.matches(sel.replace(STATE, ""));
} catch {
// Specificity is per complex selector: a comma list like
// ".a, .b .c" does NOT sum. Match each complex selector on its
// own and use its specificity; ties are broken by source order.
for (const cs of splitTop(sel.replace(STATE, ""), ",")) {
let ok = false;
try {
ok = el.matches(sel);
} catch {}
}
if (!ok) continue;
const [a, b, c] = specCompound(sel);
const st = rule.style;
for (let k = 0; k < st.length; k++) {
const name = st.item(k);
out.push({
name,
value: st.getPropertyValue(name).trim(),
important: st.getPropertyPriority(name) === "important",
a,
b,
c,
order,
});
ok = el.matches(cs);
} catch {
try {
ok = el.matches(sel);
} catch {}
}
if (!ok) continue;
const [a, b, c] = specCompound(cs);
const st = rule.style;
for (let k = 0; k < st.length; k++) {
const name = st.item(k);
out.push({
name,
value: st.getPropertyValue(name).trim(),
important: st.getPropertyPriority(name) === "important",
a,
b,
c,
order,
});
}
}
}
const inline = el.getAttribute("style");