Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 13:36:36 +00:00
Code Issues 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 CDP visual audit
2026-08-30T14:39:15.774Z 2026-08-30T16:20:46.243Z
viewport 1440x900, tolerance 1px, theme light viewport 1440x900, tolerance 1px, theme light
=== [1440x900] /preview/demo (vs demo.html) — 173 differences === === [1440x900] /preview/demo (vs demo.html) — 169 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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 font-size: inherit → 16px
line-height: inherit → 1.5 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 "/" body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] 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." 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 → — max-width: 700px → —
line-height: 1 → 0.9 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] 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 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] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px row-gap: — → 16px
column-gap: — → 16px column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [1440x900] /preview/list-tools (vs list-tools.html) — 126 differences === === [1440x900] /preview/list-tools (vs list-tools.html) — 123 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" 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 ✗ present in reference, absent in project
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === === [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 89 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === === [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 97 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 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" 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 → — display: flex → —
justify-content: space-between → — justify-content: flex-start → —
row-gap: 8px → — row-gap: 8px → —
column-gap: 8px → — column-gap: 8px → —
margin-top: 10px → — margin-top: 10px → —
web/audit/cdp-audit-1920x1080.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit CDP visual audit
2026-08-30T14:39:15.772Z 2026-08-30T16:20:46.240Z
viewport 1920x1080, tolerance 1px, theme light viewport 1920x1080, tolerance 1px, theme light
=== [1920x1080] /preview/demo (vs demo.html) — 173 differences === === [1920x1080] /preview/demo (vs demo.html) — 169 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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 font-size: inherit → 16px
line-height: inherit → 1.5 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 "/" body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] 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." 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 → — max-width: 700px → —
line-height: 1 → 0.9 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] 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 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] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px row-gap: — → 16px
column-gap: — → 16px column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [1920x1080] /preview/list-tools (vs list-tools.html) — 126 differences === === [1920x1080] /preview/list-tools (vs list-tools.html) — 123 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" 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 ✗ present in reference, absent in project
=== [1920x1080] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === === [1920x1080] /preview/tools/linear-gradient-png (vs gradient.html) — 89 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [1920x1080] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === === [1920x1080] /preview/tools/remove-background-png (vs background-remover.html) — 97 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 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" 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 → — display: flex → —
justify-content: space-between → — justify-content: flex-start → —
row-gap: 8px → — row-gap: 8px → —
column-gap: 8px → — column-gap: 8px → —
margin-top: 10px → — margin-top: 10px → —
web/audit/cdp-audit-2560x1440.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit CDP visual audit
2026-08-30T14:39:15.766Z 2026-08-30T16:20:46.232Z
viewport 2560x1440, tolerance 1px, theme light viewport 2560x1440, tolerance 1px, theme light
=== [2560x1440] /preview/demo (vs demo.html) — 173 differences === === [2560x1440] /preview/demo (vs demo.html) — 169 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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 font-size: inherit → 16px
line-height: inherit → 1.5 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 "/" body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] 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." 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 → — max-width: 700px → —
line-height: 1 → 0.9 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] 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 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] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px row-gap: — → 16px
column-gap: — → 16px column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [2560x1440] /preview/list-tools (vs list-tools.html) — 126 differences === === [2560x1440] /preview/list-tools (vs list-tools.html) — 123 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" 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 ✗ present in reference, absent in project
=== [2560x1440] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === === [2560x1440] /preview/tools/linear-gradient-png (vs gradient.html) — 89 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [2560x1440] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === === [2560x1440] /preview/tools/remove-background-png (vs background-remover.html) — 97 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 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" 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 → — display: flex → —
justify-content: space-between → — justify-content: flex-start → —
row-gap: 8px → — row-gap: 8px → —
column-gap: 8px → — column-gap: 8px → —
margin-top: 10px → — margin-top: 10px → —
web/audit/cdp-audit-390x844.txt
+20 -52
View File
@@ -1,26 +1,19 @@
CDP visual audit CDP visual audit
2026-08-30T14:39:15.778Z 2026-08-30T16:20:46.248Z
viewport 390x844, tolerance 1px, theme light 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px) h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 4.7 (+4.7px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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 font-size: inherit → 16px
line-height: inherit → 1.5 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 "/" body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] 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." 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 → — max-width: 700px → —
line-height: 1 → 0.9 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] 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 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] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px row-gap: — → 16px
column-gap: — → 16px column-gap: — → 16px
@@ -1125,25 +1113,18 @@ body >div
✗ present in reference, absent in project ✗ 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px) h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 3.3 (+3.3px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" 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 ✗ 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px) h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 4.7 (+4.7px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 line-height: — → 1.5
@@ -2566,25 +2541,18 @@ body >div
✗ present in reference, absent in project ✗ 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 120 → 64 (-56px) h: 120 → 64 (-56px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 4.8 (+4.8px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 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" 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 → — display: flex → —
justify-content: space-between → — justify-content: flex-start → —
row-gap: 8px → — row-gap: 8px → —
column-gap: 8px → — column-gap: 8px → —
margin-top: 10px → — margin-top: 10px → —
web/audit/cdp-audit-768x1024.txt
+21 -53
View File
@@ -1,26 +1,19 @@
CDP visual audit CDP visual audit
2026-08-30T14:39:15.776Z 2026-08-30T16:20:46.245Z
viewport 768x1024, tolerance 1px, theme light 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px) h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 4.7 (+4.7px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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 font-size: inherit → 16px
line-height: inherit → 1.5 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 "/" body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] 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." 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 → — max-width: 700px → —
line-height: 1 → 0.9 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] 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 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] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px row-gap: — → 16px
column-gap: — → 16px column-gap: — → 16px
@@ -1125,25 +1113,18 @@ body >div
✗ present in reference, absent in project ✗ 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px) h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 15 (-15px) w: 30 → 15.4 (-14.6px)
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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 3.3 (+3.3px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" 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 ✗ 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px) h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 4.7 (+4.7px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 line-height: — → 1.5
@@ -2566,25 +2541,18 @@ body >div
✗ present in reference, absent in project ✗ 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] body > main > header [topbar]
position: — → sticky
top: — → 0px
z-index: — → 20
h: 79 → 64 (-15px) h: 79 → 64 (-15px)
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
w: 30 → 14.6 (-15.4px) 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] body > main > header > div > span > i [status-dot]
display: — → inline-block display: — → inline-block
width: 6px → 8px w: 0 → 4.8 (+4.8px)
height: 6px → 8px h: 0 → 6 (+6px)
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 > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 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" 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 → — display: flex → —
justify-content: space-between → — justify-content: flex-start → —
row-gap: 8px → — row-gap: 8px → —
column-gap: 8px → — column-gap: 8px → —
margin-top: 10px → — margin-top: 10px → —
web/audit/cdp-audit.txt
+12 -68
View File
@@ -1,21 +1,8 @@
CDP visual audit CDP visual audit
2026-08-30T09:31:56.937Z 2026-08-30T16:17:42.059Z
viewport 1440x900, tolerance 1px, theme light viewport 1440x900, tolerance 1px, theme light
=== [1440x900] /preview/demo (vs demo.html) — 173 differences === === [1440x900] /preview/demo (vs demo.html) — 169 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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 font-size: inherit → 16px
line-height: inherit → 1.5 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 "/" body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] 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." 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 → — max-width: 700px → —
line-height: 1 → 0.9 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] 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 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] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
row-gap: — → 16px row-gap: — → 16px
column-gap: — → 16px column-gap: — → 16px
@@ -1119,20 +1101,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [1440x900] /preview/list-tools (vs list-tools.html) — 126 differences === === [1440x900] /preview/list-tools (vs list-tools.html) — 123 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
margin-bottom: 18px → 0.5rem margin-bottom: 18px → 0.5rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: 0.12em → 0.18em letter-spacing: 0.12em → 0.18em
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" 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 ✗ present in reference, absent in project
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === === [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 89 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 line-height: — → 1.5
@@ -2467,20 +2424,7 @@ body >div
✗ present in reference, absent in project ✗ present in reference, absent in project
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === === [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 97 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)]
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
display: grid → inline-flex 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" body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
margin-bottom: 18px → — 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-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
font-size: — → 16px font-size: — → 16px
line-height: — → 1.5 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" 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 → — display: flex → —
justify-content: space-between → — justify-content: flex-start → —
row-gap: 8px → — row-gap: 8px → —
column-gap: 8px → — column-gap: 8px → —
margin-top: 10px → — margin-top: 10px → —
web/scripts/audit-cdp.mjs
+43 -31
View File
@@ -284,17 +284,24 @@ async function capture(browser, target, viewport) {
} else { } else {
i++; i++;
const name = readName(); const name = readName();
if (comp[i] === "(") { if (comp[i] === "(") {
const inner = comp.slice(i + 1, endParen()); const inner = comp.slice(i + 1, endParen());
if (name !== "where") { // :is/:not/:has take the most specific argument.
for (const arg of splitTop(inner, ",")) { if (name !== "where") {
const [a, b, c] = specCompound(arg); let a = 0,
A += a; b = 0,
B += b; c = 0;
C += c; 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)) { } else if (/[a-zA-Z]/.test(ch)) {
C++; C++;
@@ -311,28 +318,33 @@ async function capture(browser, target, viewport) {
for (const { rule, order } of rules) { for (const { rule, order } of rules) {
const sel = rule.selectorText; const sel = rule.selectorText;
if (!sel) continue; if (!sel) continue;
let ok = false; // Specificity is per complex selector: a comma list like
try { // ".a, .b .c" does NOT sum. Match each complex selector on its
ok = el.matches(sel.replace(STATE, "")); // own and use its specificity; ties are broken by source order.
} catch { for (const cs of splitTop(sel.replace(STATE, ""), ",")) {
let ok = false;
try { try {
ok = el.matches(sel); ok = el.matches(cs);
} catch {} } catch {
} try {
if (!ok) continue; ok = el.matches(sel);
const [a, b, c] = specCompound(sel); } catch {}
const st = rule.style; }
for (let k = 0; k < st.length; k++) { if (!ok) continue;
const name = st.item(k); const [a, b, c] = specCompound(cs);
out.push({ const st = rule.style;
name, for (let k = 0; k < st.length; k++) {
value: st.getPropertyValue(name).trim(), const name = st.item(k);
important: st.getPropertyPriority(name) === "important", out.push({
a, name,
b, value: st.getPropertyValue(name).trim(),
c, important: st.getPropertyPriority(name) === "important",
order, a,
}); b,
c,
order,
});
}
} }
} }
const inline = el.getAttribute("style"); const inline = el.getAttribute("style");