8417 lines
358 KiB
Plaintext
8417 lines
358 KiB
Plaintext
CDP visual audit
|
||
2026-08-30T00:17:44.119Z
|
||
viewport 1440x900, tolerance 1px, theme light
|
||
|
||
=== /preview/demo (vs demo.html) — 216 differences ===
|
||
|
||
body
|
||
h: 1578.9 → 2338.9 (+760px)
|
||
height: 1578.89px → 2338.89px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main [preview-root]
|
||
h: 1578.9 → 2338.9 (+760px)
|
||
height: 1578.89px → 2338.89px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header [topbar]
|
||
position: static → sticky
|
||
top: auto → 0px
|
||
z-index: auto → 20
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a [brand]
|
||
w: 231.5 → 246.8 (+15.3px)
|
||
width: 231.469px → 246.812px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255)
|
||
|
||
body > main > header > a > span:nth-of-type(2) "easy-png-tools"
|
||
w: 107.8 → 117.6 (+9.8px)
|
||
width: 107.766px → 117.609px
|
||
height: 17px → 18px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE"
|
||
x: 215.4 → 225.2 (+9.8px)
|
||
w: 73.7 → 79.2 (+5.5px)
|
||
width: 73.7031px → 79.2031px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
|
||
body > main > header > div [top-actions]
|
||
x: 1117.1 → 1104.6 (-12.5px)
|
||
w: 265.3 → 277.8 (+12.5px)
|
||
width: 265.328px → 277.812px
|
||
height: 29px → 28px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > div > span [status] "AUTO PIPELINE"
|
||
x: 1117.1 → 1104.6 (-12.5px)
|
||
w: 94.9 → 103.4 (+8.5px)
|
||
width: 94.875px → 103.406px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
x: 1117.1 → 1104.6 (-12.5px)
|
||
w: 6 → 8 (+2px)
|
||
h: 6 → 8 (+2px)
|
||
width: 6px → 8px
|
||
height: 6px → 8px
|
||
box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
x: 1228 → 1224 (-4px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
x: 1234 → 1230 (-4px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
x: 1273 → 1268 (-5px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
x: 1279 → 1274 (-5px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > div [lang]
|
||
x: 1318 → 1312 (-6px)
|
||
w: 64.5 → 70.4 (+5.9px)
|
||
align-items: center → normal
|
||
width: 64.4531px → 70.4062px
|
||
height: 26px → 27px
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
x: 1348 → 1344.2 (-3.8px)
|
||
y: 19.5 → 25 (+5.5px)
|
||
w: 4.5 → 6 (+1.5px)
|
||
h: 24 → 13 (-11px)
|
||
align-self: auto → center
|
||
width: 4.45312px → 6px
|
||
height: 24px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 33, 43) → rgb(109, 120, 131)
|
||
font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace
|
||
font-size: 16px → 10px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
x: 1352.4 → 1350.2 (-2.2px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
x: 1319 → 1313 (-6px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > nav [nav]
|
||
x: 792.1 → 528.2 (-263.9px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 296.9 → 376.6 (+79.7px)
|
||
h: 12 → 15 (+3px)
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → 0px
|
||
margin-left: 503.078px → 24px
|
||
width: 296.938px → 376.594px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
x: 792.1 → 528.2 (-263.9px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 49.5 → 69.1 (+19.6px)
|
||
h: 12 → 15 (+3px)
|
||
width: 49.4844px → 69.125px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
x: 863.6 → 615.3 (-248.3px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 38.5 → 53.8 (+15.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 38.5px → 53.7656px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
x: 924.1 → 687.1 (-237px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 44 → 61.5 (+17.5px)
|
||
h: 12 → 15 (+3px)
|
||
width: 43.9844px → 61.4531px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
x: 990.1 → 766.5 (-223.6px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 99 → 138.3 (+39.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 98.9688px → 138.25px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div [ws]
|
||
h: 1468.9 → 2228.9 (+760px)
|
||
grid-template-rows: 1336.89px → 2096.89px
|
||
height: 1468.89px → 2228.89px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) [preview-panel]
|
||
h: 1336.9 → 2096.9 (+760px)
|
||
align-self: start → auto
|
||
height: 1336.89px → 2096.89px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack]
|
||
y: 320 → 301.3 (-18.7px)
|
||
h: 1093.4 → 1872.1 (+778.7px)
|
||
grid-template-columns: 276.328px 276.344px → 564.672px
|
||
grid-template-rows: 345.797px 345.797px 345.797px → 358.422px 358.422px 358.422px 358.422px 358.422px
|
||
height: 1093.39px → 1872.11px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile]
|
||
y: 336 → 317.3 (-18.7px)
|
||
w: 276.3 → 564.7 (+288.4px)
|
||
h: 345.8 → 358.4 (+12.6px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 4.8px
|
||
column-gap: normal → 4.8px
|
||
padding-top: 0px → 6.4px
|
||
padding-right: 0px → 6.4px
|
||
padding-bottom: 0px → 6.4px
|
||
padding-left: 0px → 6.4px
|
||
width: 276.328px → 564.672px
|
||
height: 345.797px → 358.422px
|
||
min-width: 0px → auto
|
||
overflow: hidden → visible
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(238, 241, 244) → rgb(248, 250, 251)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas]
|
||
x: 799.7 → 806.1 (+6.4px)
|
||
y: 337 → 324.7 (-12.3px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 316.8 → 325.8 (+9px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 242.328px → none
|
||
grid-template-rows: 284.797px → none
|
||
padding-top: 16px → 0px
|
||
padding-right: 16px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 16px → 0px
|
||
width: 274.328px → 549.891px
|
||
height: 316.797px → 325.844px
|
||
min-width: 0px → auto
|
||
min-height: 316.8px → 120px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0)
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none
|
||
background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto
|
||
background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph]
|
||
x: 840 → 806.1 (-33.9px)
|
||
y: 430.8 → 324.7 (-106.1px)
|
||
w: 193.9 → 439.9 (+246px)
|
||
h: 129.2 → 325.8 (+196.6px)
|
||
width: 193.859px → 439.906px
|
||
height: 129.234px → 325.844px
|
||
min-height: auto → 0px
|
||
max-width: 100% → none
|
||
overflow: hidden → visible
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG"
|
||
x: 923.5 → 1012 (+88.5px)
|
||
y: 477.9 → 469.1 (-8.8px)
|
||
w: 26.9 → 28.2 (+1.3px)
|
||
width: 26.8594px → 28.2031px
|
||
height: 18px → 19px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools"
|
||
x: 898.4 → 984.1 (+85.7px)
|
||
y: 500.9 → 493.1 (-7.8px)
|
||
w: 77 → 84 (+7px)
|
||
width: 76.9844px → 84px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label]
|
||
x: 799.7 → 806.1 (+6.4px)
|
||
y: 653.8 → 655.3 (+1.5px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 27 → 13 (-14px)
|
||
align-items: normal → baseline
|
||
padding-top: 8px → 0px
|
||
padding-right: 8px → 0px
|
||
padding-bottom: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 274.328px → 549.891px
|
||
height: 27px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE"
|
||
x: 807.7 → 806.1 (-1.6px)
|
||
y: 662.8 → 655.3 (-7.5px)
|
||
w: 29.7 → 40.8 (+11.1px)
|
||
h: 10 → 13 (+3px)
|
||
width: 29.7031px → 40.8125px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 9px → 10px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800"
|
||
x: 942.3 → 1206 (+263.7px)
|
||
y: 662.8 → 655.3 (-7.5px)
|
||
w: 123.7 → 150 (+26.3px)
|
||
h: 10 → 13 (+3px)
|
||
width: 123.719px → 150px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 9px → 10px
|
||
text-align: right → start
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile]
|
||
x: 1087 → 798.7 (-288.3px)
|
||
y: 336 → 687.7 (+351.7px)
|
||
w: 276.3 → 564.7 (+288.4px)
|
||
h: 345.8 → 358.4 (+12.6px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 4.8px
|
||
column-gap: normal → 4.8px
|
||
padding-top: 0px → 6.4px
|
||
padding-right: 0px → 6.4px
|
||
padding-bottom: 0px → 6.4px
|
||
padding-left: 0px → 6.4px
|
||
width: 276.344px → 564.672px
|
||
height: 345.797px → 358.422px
|
||
min-width: 0px → auto
|
||
overflow: hidden → visible
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(238, 241, 244) → rgb(248, 250, 251)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas]
|
||
x: 1088 → 806.1 (-281.9px)
|
||
y: 337 → 695.1 (+358.1px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 316.8 → 325.8 (+9px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 242.344px → none
|
||
grid-template-rows: 284.797px → none
|
||
padding-top: 16px → 0px
|
||
padding-right: 16px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 16px → 0px
|
||
width: 274.344px → 549.891px
|
||
height: 316.797px → 325.844px
|
||
min-width: 0px → auto
|
||
min-height: 316.8px → 120px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0)
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none
|
||
background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto
|
||
background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph]
|
||
x: 1128.3 → 806.1 (-322.2px)
|
||
y: 430.8 → 695.1 (+264.3px)
|
||
w: 193.9 → 439.9 (+246px)
|
||
h: 129.3 → 325.8 (+196.5px)
|
||
width: 193.875px → 439.906px
|
||
height: 129.25px → 325.844px
|
||
min-height: auto → 0px
|
||
max-width: 100% → none
|
||
overflow: hidden → visible
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG"
|
||
x: 1211.8 → 1012 (-199.8px)
|
||
y: 477.9 → 839.5 (+361.6px)
|
||
w: 26.9 → 28.2 (+1.3px)
|
||
width: 26.8594px → 28.2031px
|
||
height: 18px → 19px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools"
|
||
x: 1186.7 → 984.1 (-202.6px)
|
||
y: 500.9 → 863.5 (+362.6px)
|
||
w: 77 → 84 (+7px)
|
||
width: 76.9844px → 84px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label]
|
||
x: 1088 → 806.1 (-281.9px)
|
||
y: 653.8 → 1025.7 (+371.9px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 27 → 13 (-14px)
|
||
align-items: normal → baseline
|
||
padding-top: 8px → 0px
|
||
padding-right: 8px → 0px
|
||
padding-bottom: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 274.344px → 549.891px
|
||
height: 27px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01"
|
||
x: 1096 → 806.1 (-289.9px)
|
||
y: 662.8 → 1025.7 (+362.9px)
|
||
w: 34.6 → 47.6 (+13px)
|
||
h: 10 → 13 (+3px)
|
||
width: 34.6406px → 47.6094px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 9px → 10px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied"
|
||
x: 1275.2 → 1260 (-15.2px)
|
||
y: 662.8 → 1025.7 (+362.9px)
|
||
w: 79.2 → 96 (+16.8px)
|
||
h: 10 → 13 (+3px)
|
||
width: 79.1719px → 96px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 9px → 10px
|
||
text-align: right → start
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile]
|
||
y: 693.8 → 1058.1 (+364.3px)
|
||
w: 276.3 → 564.7 (+288.4px)
|
||
h: 345.8 → 358.4 (+12.6px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 4.8px
|
||
column-gap: normal → 4.8px
|
||
padding-top: 0px → 6.4px
|
||
padding-right: 0px → 6.4px
|
||
padding-bottom: 0px → 6.4px
|
||
padding-left: 0px → 6.4px
|
||
width: 276.328px → 564.672px
|
||
height: 345.797px → 358.422px
|
||
min-width: 0px → auto
|
||
overflow: hidden → visible
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(238, 241, 244) → rgb(248, 250, 251)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas]
|
||
x: 799.7 → 806.1 (+6.4px)
|
||
y: 694.8 → 1065.5 (+370.7px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 316.8 → 325.8 (+9px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 242.328px → none
|
||
grid-template-rows: 284.797px → none
|
||
padding-top: 16px → 0px
|
||
padding-right: 16px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 16px → 0px
|
||
width: 274.328px → 549.891px
|
||
height: 316.797px → 325.844px
|
||
min-width: 0px → auto
|
||
min-height: 316.8px → 120px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0)
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none
|
||
background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto
|
||
background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph]
|
||
x: 840 → 806.1 (-33.9px)
|
||
y: 788.6 → 1065.5 (+276.9px)
|
||
w: 193.9 → 439.9 (+246px)
|
||
h: 129.2 → 325.8 (+196.6px)
|
||
width: 193.859px → 439.906px
|
||
height: 129.234px → 325.844px
|
||
min-height: auto → 0px
|
||
max-width: 100% → none
|
||
overflow: hidden → visible
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG"
|
||
x: 923.5 → 1012 (+88.5px)
|
||
y: 835.7 → 1209.9 (+374.2px)
|
||
w: 26.9 → 28.2 (+1.3px)
|
||
width: 26.8594px → 28.2031px
|
||
height: 18px → 19px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools"
|
||
x: 898.4 → 984.1 (+85.7px)
|
||
y: 858.7 → 1233.9 (+375.2px)
|
||
w: 77 → 84 (+7px)
|
||
width: 76.9844px → 84px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label]
|
||
x: 799.7 → 806.1 (+6.4px)
|
||
y: 1011.6 → 1396.2 (+384.6px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 27 → 13 (-14px)
|
||
align-items: normal → baseline
|
||
padding-top: 8px → 0px
|
||
padding-right: 8px → 0px
|
||
padding-bottom: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 274.328px → 549.891px
|
||
height: 27px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02"
|
||
x: 807.7 → 806.1 (-1.6px)
|
||
y: 1020.6 → 1396.2 (+375.6px)
|
||
w: 34.6 → 47.6 (+13px)
|
||
h: 10 → 13 (+3px)
|
||
width: 34.6406px → 47.6094px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 9px → 10px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed"
|
||
x: 977 → 1248 (+271px)
|
||
y: 1020.6 → 1396.2 (+375.6px)
|
||
w: 89.1 → 108 (+18.9px)
|
||
h: 10 → 13 (+3px)
|
||
width: 89.0781px → 108px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 9px → 10px
|
||
text-align: right → start
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile]
|
||
x: 1087 → 798.7 (-288.3px)
|
||
y: 693.8 → 1428.5 (+734.7px)
|
||
w: 276.3 → 564.7 (+288.4px)
|
||
h: 345.8 → 358.4 (+12.6px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 4.8px
|
||
column-gap: normal → 4.8px
|
||
padding-top: 0px → 6.4px
|
||
padding-right: 0px → 6.4px
|
||
padding-bottom: 0px → 6.4px
|
||
padding-left: 0px → 6.4px
|
||
width: 276.344px → 564.672px
|
||
height: 345.797px → 358.422px
|
||
min-width: 0px → auto
|
||
overflow: hidden → visible
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(238, 241, 244) → rgb(248, 250, 251)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas]
|
||
x: 1088 → 806.1 (-281.9px)
|
||
y: 694.8 → 1435.9 (+741.1px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 316.8 → 325.8 (+9px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 242.344px → none
|
||
grid-template-rows: 284.797px → none
|
||
padding-top: 16px → 0px
|
||
padding-right: 16px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 16px → 0px
|
||
width: 274.344px → 549.891px
|
||
height: 316.797px → 325.844px
|
||
min-width: 0px → auto
|
||
min-height: 316.8px → 120px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0)
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none
|
||
background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto
|
||
background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph]
|
||
x: 1128.3 → 806.1 (-322.2px)
|
||
y: 788.6 → 1435.9 (+647.3px)
|
||
w: 193.9 → 439.9 (+246px)
|
||
h: 129.3 → 325.8 (+196.5px)
|
||
width: 193.875px → 439.906px
|
||
height: 129.25px → 325.844px
|
||
min-height: auto → 0px
|
||
max-width: 100% → none
|
||
overflow: hidden → visible
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG"
|
||
x: 1211.8 → 1012 (-199.8px)
|
||
y: 835.7 → 1580.4 (+744.7px)
|
||
w: 26.9 → 28.2 (+1.3px)
|
||
width: 26.8594px → 28.2031px
|
||
height: 18px → 19px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools"
|
||
x: 1186.7 → 984.1 (-202.6px)
|
||
y: 858.7 → 1604.4 (+745.7px)
|
||
w: 77 → 84 (+7px)
|
||
width: 76.9844px → 84px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label]
|
||
x: 1088 → 806.1 (-281.9px)
|
||
y: 1011.6 → 1766.6 (+755px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 27 → 13 (-14px)
|
||
align-items: normal → baseline
|
||
padding-top: 8px → 0px
|
||
padding-right: 8px → 0px
|
||
padding-bottom: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 274.344px → 549.891px
|
||
height: 27px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03"
|
||
x: 1096 → 806.1 (-289.9px)
|
||
y: 1020.6 → 1766.6 (+746px)
|
||
w: 34.6 → 47.6 (+13px)
|
||
h: 10 → 13 (+3px)
|
||
width: 34.6406px → 47.6094px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 9px → 10px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added"
|
||
x: 1290.1 → 1278 (-12.1px)
|
||
y: 1020.6 → 1766.6 (+746px)
|
||
w: 64.3 → 78 (+13.7px)
|
||
h: 10 → 13 (+3px)
|
||
width: 64.3281px → 78px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 9px → 10px
|
||
text-align: right → start
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile]
|
||
y: 1051.6 → 1799 (+747.4px)
|
||
w: 276.3 → 564.7 (+288.4px)
|
||
h: 345.8 → 358.4 (+12.6px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 4.8px
|
||
column-gap: normal → 4.8px
|
||
padding-top: 0px → 6.4px
|
||
padding-right: 0px → 6.4px
|
||
padding-bottom: 0px → 6.4px
|
||
padding-left: 0px → 6.4px
|
||
width: 276.328px → 564.672px
|
||
height: 345.797px → 358.422px
|
||
min-width: 0px → auto
|
||
overflow: hidden → visible
|
||
border-top-color: rgb(23, 105, 210) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(238, 241, 244) → rgb(248, 250, 251)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas]
|
||
x: 799.7 → 806.1 (+6.4px)
|
||
y: 1052.6 → 1806.4 (+753.8px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 316.8 → 325.8 (+9px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 242.328px → none
|
||
grid-template-rows: 284.797px → none
|
||
padding-top: 16px → 0px
|
||
padding-right: 16px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 16px → 0px
|
||
width: 274.328px → 549.891px
|
||
height: 316.797px → 325.844px
|
||
min-width: 0px → auto
|
||
min-height: 316.8px → 120px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 0px → 4px
|
||
background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0)
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none
|
||
background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto
|
||
background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph]
|
||
x: 840 → 806.1 (-33.9px)
|
||
y: 1146.4 → 1806.4 (+660px)
|
||
w: 193.9 → 439.9 (+246px)
|
||
h: 129.2 → 325.8 (+196.6px)
|
||
width: 193.859px → 439.906px
|
||
height: 129.234px → 325.844px
|
||
min-height: auto → 0px
|
||
max-width: 100% → none
|
||
overflow: hidden → visible
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG"
|
||
x: 923.5 → 1012 (+88.5px)
|
||
y: 1193.5 → 1950.8 (+757.3px)
|
||
w: 26.9 → 28.2 (+1.3px)
|
||
width: 26.8594px → 28.2031px
|
||
height: 18px → 19px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools"
|
||
x: 898.4 → 984.1 (+85.7px)
|
||
y: 1216.5 → 1974.8 (+758.3px)
|
||
w: 77 → 84 (+7px)
|
||
width: 76.9844px → 84px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label]
|
||
x: 799.7 → 806.1 (+6.4px)
|
||
y: 1369.4 → 2137 (+767.6px)
|
||
w: 274.3 → 549.9 (+275.6px)
|
||
h: 27 → 13 (-14px)
|
||
align-items: normal → baseline
|
||
padding-top: 8px → 0px
|
||
padding-right: 8px → 0px
|
||
padding-bottom: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 274.328px → 549.891px
|
||
height: 27px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT"
|
||
x: 807.7 → 806.1 (-1.6px)
|
||
y: 1378.4 → 2137 (+758.6px)
|
||
w: 59.4 → 81.6 (+22.2px)
|
||
h: 10 → 13 (+3px)
|
||
width: 59.3906px → 81.6094px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 9px → 10px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24"
|
||
x: 996.8 → 1272 (+275.2px)
|
||
y: 1378.4 → 2137 (+758.6px)
|
||
w: 69.3 → 84 (+14.7px)
|
||
h: 10 → 13 (+3px)
|
||
width: 69.2812px → 84px
|
||
height: 10px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 9px → 10px
|
||
text-align: right → start
|
||
|
||
body > main > div > section:nth-of-type(2) > p [preview-note] "Output is generated in-browser. Your fil"
|
||
y: 1425.4 → 2185.4 (+760px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label]
|
||
h: 177 → 158.3 (-18.7px)
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 15px → 12px
|
||
height: 177px → 158.281px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text]
|
||
y: 180 → 182.1 (+2.1px)
|
||
w: 86.6 → 92.5 (+5.9px)
|
||
h: 87 → 67 (-20px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 2px
|
||
column-gap: normal → 2px
|
||
width: 86.6094px → 92.5156px
|
||
height: 87px → 67px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "Visual history"
|
||
y: 233 → 213.1 (-19.9px)
|
||
w: 86.6 → 92.5 (+5.9px)
|
||
h: 34 → 36 (+2px)
|
||
width: 86.6094px → 92.5156px
|
||
height: 34px → 36px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS"
|
||
y: 188 → 182.1 (-5.9px)
|
||
w: 53.6 → 92.5 (+38.9px)
|
||
h: 36 → 24 (-12px)
|
||
display: inline → block
|
||
width: auto → 92.5156px
|
||
height: auto → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: normal → 12px
|
||
letter-spacing: 1.2px → 1px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [section-actions]
|
||
x: 885.3 → 907.2 (+21.9px)
|
||
w: 478.1 → 456.2 (-21.9px)
|
||
h: 161 → 145.3 (-15.7px)
|
||
width: 478.062px → 456.156px
|
||
height: 161px → 145.281px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result"
|
||
x: 885.3 → 955.4 (+70.1px)
|
||
y: 204 → 231.1 (+27.1px)
|
||
w: 478.1 → 191.2 (-286.9px)
|
||
h: 42 → 36 (-6px)
|
||
justify-content: center → normal
|
||
row-gap: 9px → 8px
|
||
column-gap: 9px → 8px
|
||
margin-top: 18px → 0px
|
||
padding-top: 0px → 9px
|
||
padding-right: 0px → 14px
|
||
padding-bottom: 0px → 9px
|
||
padding-left: 0px → 14px
|
||
width: 478.062px → 191.203px
|
||
height: 42px → 36px
|
||
border-top-width: 0px → 1px
|
||
border-top-style: none → solid
|
||
border-top-color: rgb(255, 255, 255) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
font-size: 11px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon]
|
||
x: 1055 → 970.4 (-84.6px)
|
||
y: 217 → 241.1 (+24.1px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255)
|
||
font-size: 11px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon]
|
||
x: 1179.7 → 1117.6 (-62.1px)
|
||
y: 218 → 242.1 (+24.1px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255)
|
||
font-size: 11px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate"
|
||
x: 1218.1 → 907.2 (-310.9px)
|
||
y: 143 → 161 (+18px)
|
||
w: 145.3 → 456.2 (+310.9px)
|
||
h: 33 → 39 (+6px)
|
||
margin-top: 0px → 18px
|
||
padding-top: 8px → 11px
|
||
padding-right: 10px → 14px
|
||
padding-bottom: 8px → 11px
|
||
padding-left: 10px → 14px
|
||
width: 145.281px → 456.156px
|
||
height: 33px → 39px
|
||
background-position: 0px 0px → 0% 0%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon]
|
||
x: 1337.4 → 1186.2 (-151.2px)
|
||
y: 152 → 173 (+21px)
|
||
transform: matrix(-1, 0, 0, -1, 0, 0) → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list]
|
||
x: 1072.5 → 1156.6 (+84.1px)
|
||
y: 256 → 210 (-46px)
|
||
w: 251.9 → 164.8 (-87.1px)
|
||
h: 48 → 78.3 (+30.3px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2.4px
|
||
column-gap: 8px → 2.4px
|
||
grid-template-columns: 78.625px 78.625px 78.625px → none
|
||
grid-template-rows: 33px → none
|
||
padding-top: 14px → 0px
|
||
width: 251.875px → 164.812px
|
||
height: 48px → 78.2812px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row]
|
||
x: 1072.5 → 1156.6 (+84.1px)
|
||
y: 271 → 210 (-61px)
|
||
w: 78.6 → 164.8 (+86.2px)
|
||
h: 33 → 24.5 (-8.5px)
|
||
display: grid → flex
|
||
justify-content: normal → space-between
|
||
align-items: normal → baseline
|
||
row-gap: 5px → 16px
|
||
column-gap: 5px → 16px
|
||
grid-template-columns: 78.625px → none
|
||
grid-template-rows: 10px 18px → none
|
||
padding-top: 0px → 4px
|
||
padding-bottom: 0px → 4px
|
||
width: 78.625px → 164.812px
|
||
height: 33px → 24.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS"
|
||
x: 1072.5 → 1156.6 (+84.1px)
|
||
y: 271 → 216 (-55px)
|
||
w: 78.6 → 63 (-15.6px)
|
||
h: 10 → 13.5 (+3.5px)
|
||
width: 78.625px → 63px
|
||
height: 10px → 13.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: normal → 13.5px
|
||
letter-spacing: normal → 0.9px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px"
|
||
x: 1072.5 → 1235.6 (+163.1px)
|
||
y: 291 → 214 (-77px)
|
||
w: 78.6 → 85.8 (+7.2px)
|
||
h: 13 → 16.5 (+3.5px)
|
||
margin-top: 5px → 0px
|
||
width: 78.625px → 85.8125px
|
||
height: 13px → 16.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-weight: 400 → 700
|
||
line-height: normal → 16.5px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row]
|
||
x: 1159.1 → 1156.6 (-2.5px)
|
||
y: 271 → 236.9 (-34.1px)
|
||
w: 78.6 → 164.8 (+86.2px)
|
||
h: 33 → 24.5 (-8.5px)
|
||
display: grid → flex
|
||
justify-content: normal → space-between
|
||
align-items: normal → baseline
|
||
row-gap: 5px → 16px
|
||
column-gap: 5px → 16px
|
||
grid-template-columns: 78.625px → none
|
||
grid-template-rows: 10px 18px → none
|
||
padding-top: 0px → 4px
|
||
padding-bottom: 0px → 4px
|
||
width: 78.625px → 164.812px
|
||
height: 33px → 24.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT"
|
||
x: 1159.1 → 1156.6 (-2.5px)
|
||
y: 271 → 242.9 (-28.1px)
|
||
w: 78.6 → 37.8 (-40.8px)
|
||
h: 10 → 13.5 (+3.5px)
|
||
width: 78.625px → 37.8125px
|
||
height: 10px → 13.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: normal → 13.5px
|
||
letter-spacing: normal → 0.9px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24"
|
||
x: 1159.1 → 1281.8 (+122.7px)
|
||
y: 291 → 240.9 (-50.1px)
|
||
w: 78.6 → 39.6 (-39px)
|
||
h: 13 → 16.5 (+3.5px)
|
||
margin-top: 5px → 0px
|
||
width: 78.625px → 39.6094px
|
||
height: 13px → 16.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-weight: 400 → 700
|
||
line-height: normal → 16.5px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row]
|
||
x: 1245.8 → 1156.6 (-89.2px)
|
||
y: 271 → 263.8 (-7.2px)
|
||
w: 78.6 → 164.8 (+86.2px)
|
||
h: 33 → 24.5 (-8.5px)
|
||
display: grid → flex
|
||
justify-content: normal → space-between
|
||
align-items: normal → baseline
|
||
row-gap: 5px → 16px
|
||
column-gap: 5px → 16px
|
||
grid-template-columns: 78.625px → none
|
||
grid-template-rows: 10px 18px → none
|
||
padding-top: 0px → 4px
|
||
padding-bottom: 0px → 4px
|
||
width: 78.625px → 164.812px
|
||
height: 33px → 24.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE"
|
||
x: 1245.8 → 1156.6 (-89.2px)
|
||
y: 271 → 269.8 (-1.2px)
|
||
w: 78.6 → 25.2 (-53.4px)
|
||
h: 10 → 13.5 (+3.5px)
|
||
width: 78.625px → 25.2031px
|
||
height: 10px → 13.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: normal → 13.5px
|
||
letter-spacing: normal → 0.9px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB"
|
||
x: 1245.8 → 1281.8 (+36px)
|
||
y: 291 → 267.8 (-23.2px)
|
||
w: 78.6 → 39.6 (-39px)
|
||
h: 13 → 16.5 (+3.5px)
|
||
margin-top: 5px → 0px
|
||
width: 78.625px → 39.6094px
|
||
height: 13px → 16.5px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-weight: 400 → 700
|
||
line-height: normal → 16.5px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost]
|
||
x: 1334.4 → 1331.4 (-3px)
|
||
y: 265.5 → 233.1 (-32.4px)
|
||
w: 29 → 32 (+3px)
|
||
h: 29 → 32 (+3px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
padding-top: 6px → 1px
|
||
padding-bottom: 6px → 1px
|
||
width: 29px → 32px
|
||
height: 29px → 32px
|
||
border-top-width: 0px → 1px
|
||
border-top-style: none → solid
|
||
border-top-color: rgb(109, 120, 131) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2]
|
||
y: 271.5 → 241.1 (-30.4px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) [ws-settings]
|
||
h: 993.4 → 893 (-100.4px)
|
||
height: 993.375px → 893.031px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 105, 210) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
|
||
x: 165.1 → 172.6 (+7.5px)
|
||
w: 13.4 → 7.2 (-6.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
color: rgb(109, 120, 131) → rgb(23, 105, 210)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row]
|
||
h: 182.4 → 170.8 (-11.6px)
|
||
height: 182.375px → 170.844px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1)
|
||
w: 482.3 → 473.5 (-8.8px)
|
||
h: 182.4 → 170.8 (-11.6px)
|
||
width: 482.344px → 473.516px
|
||
height: 182.375px → 170.844px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
|
||
w: 482.3 → 473.5 (-8.8px)
|
||
h: 115.2 → 103.7 (-11.5px)
|
||
width: 482.344px → 473.516px
|
||
height: 115.188px → 103.656px
|
||
max-width: 700px → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
line-height: 57.6px → 51.84px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > p [lede] "Chain simple tools together. Every chang"
|
||
y: 285.2 → 274.7 (-10.5px)
|
||
w: 482.3 → 473.5 (-8.8px)
|
||
width: 482.344px → 473.516px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [file-chip]
|
||
x: 569.9 → 561.1 (-8.8px)
|
||
y: 299.4 → 288.8 (-10.6px)
|
||
w: 153.8 → 162.6 (+8.8px)
|
||
width: 153.781px → 162.609px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > svg [lucide lucide-icon lucide-upload]
|
||
x: 582.9 → 574.1 (-8.8px)
|
||
y: 310.4 → 299.8 (-10.6px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span "source.png"
|
||
x: 605.9 → 597.1 (-8.8px)
|
||
y: 311.4 → 300.3 (-11.1px)
|
||
w: 60.5 → 66 (+5.5px)
|
||
width: 60.4844px → 66px
|
||
height: 13px → 14px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > b "1.8 MB"
|
||
x: 674.4 → 671.1 (-3.3px)
|
||
y: 311.4 → 300.3 (-11.1px)
|
||
w: 36.3 → 39.6 (+3.3px)
|
||
width: 36.2969px → 39.6094px
|
||
height: 13px → 14px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) [steps-list]
|
||
y: 451.4 → 431.8 (-19.6px)
|
||
h: 630 → 550.2 (-79.8px)
|
||
grid-template-rows: 152px 138px 152px 144px → 149px 89px 141.188px 127px
|
||
height: 630px → 550.188px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card]
|
||
y: 465.4 → 445.8 (-19.6px)
|
||
h: 152 → 149 (-3px)
|
||
grid-template-columns: 46px 20px 598.125px → 46px 618.125px
|
||
grid-template-rows: 150px → 45px 102px
|
||
height: 152px → 149px
|
||
min-height: 138px → auto
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01"
|
||
y: 466.4 → 446.8 (-19.6px)
|
||
h: 150 → 45 (-105px)
|
||
padding-bottom: 0px → 6px
|
||
height: 150px → 45px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 11px → 22px
|
||
font-weight: 400 → 600
|
||
line-height: normal → 22px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
x: 104.6 → 58.6 (-46px)
|
||
y: 483.4 → 491.8 (+8.4px)
|
||
margin-top: 17px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body]
|
||
x: 124.6 → 104.6 (-20px)
|
||
y: 466.4 → 446.8 (-19.6px)
|
||
w: 598.1 → 618.1 (+20px)
|
||
h: 150 → 147 (-3px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
padding-top: 15px → 0px
|
||
padding-right: 18px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 18px → 0px
|
||
width: 598.125px → 618.125px
|
||
height: 150px → 147px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 481.4 → 446.8 (-34.6px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 65 → 72 (+7px)
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 8px
|
||
column-gap: 15px → 8px
|
||
padding-top: 0px → 8px
|
||
padding-right: 0px → 12px
|
||
padding-bottom: 0px → 8px
|
||
padding-left: 0px → 12px
|
||
width: 562.125px → 618.125px
|
||
height: 65px → 72px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 481.4 → 454.8 (-26.6px)
|
||
w: 156.7 → 171 (+14.3px)
|
||
h: 65 → 55 (-10px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
width: 156.703px → 171px
|
||
height: 65px → 55px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 489.4 → 454.8 (-34.6px)
|
||
w: 67 → 171 (+104px)
|
||
display: inline → block
|
||
width: auto → 171px
|
||
height: auto → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Gradient background"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 510.4 → 472.8 (-37.6px)
|
||
w: 156.7 → 171 (+14.3px)
|
||
width: 156.703px → 171px
|
||
height: 18px → 19px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 505.4 → 454.8 (-50.6px)
|
||
w: 97 → 121.4 (+24.4px)
|
||
h: 17 → 21.8 (+4.8px)
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
width: 97px → 121.375px
|
||
height: 17px → 21.7812px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
y: 505.9 → 456.7 (-49.2px)
|
||
w: 16 → 28 (+12px)
|
||
h: 16 → 18 (+2px)
|
||
display: block → flex
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 16px → 28px
|
||
height: 16px → 18px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
x: 658.7 → 663.7 (+5px)
|
||
y: 505.9 → 457.7 (-48.2px)
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon]
|
||
x: 687.7 → 693.7 (+6px)
|
||
y: 505.4 → 457.2 (-48.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 507.9 → 454.8 (-53.1px)
|
||
w: 38 → 60.4 (+22.4px)
|
||
h: 12 → 21.8 (+9.8px)
|
||
row-gap: 4px → 4.8px
|
||
column-gap: 4px → 4.8px
|
||
padding-top: 0px → 2.4px
|
||
padding-right: 0px → 7.2px
|
||
padding-bottom: 0px → 2.4px
|
||
padding-left: 0px → 7.2px
|
||
width: 38px → 60.375px
|
||
height: 12px → 21.7812px
|
||
border-top-width: 0px → 1px
|
||
border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216)
|
||
border-radius: 0px → 4px
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
x: 607.7 → 597.5 (-10.2px)
|
||
y: 507.9 → 459.7 (-48.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106)
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 546.4 → 518.8 (-27.6px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 52 → 75 (+23px)
|
||
row-gap: 16px → 0px
|
||
column-gap: 16px → 24px
|
||
grid-template-columns: 189px 155.047px 186.078px → 190.031px 190.047px 190.047px
|
||
grid-template-rows: 52px → 75px
|
||
width: 562.125px → 618.125px
|
||
height: 52px → 75px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 546.4 → 518.8 (-27.6px)
|
||
h: 52 → 75 (+23px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
padding-top: 0px → 10px
|
||
width: 189px → 190.031px
|
||
height: 52px → 75px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR"
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 546.4 → 529.8 (-16.6px)
|
||
align-items: normal → baseline
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
width: 189px → 190.031px
|
||
height: 12px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 566.4 → 558.8 (-7.6px)
|
||
h: 32 → 27.2 (-4.8px)
|
||
row-gap: 8px → 6.4px
|
||
column-gap: 8px → 6.4px
|
||
padding-right: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 189px → 190.031px
|
||
height: 32px → 27.1875px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch]
|
||
x: 151.6 → 104.6 (-47px)
|
||
y: 575.4 → 559.6 (-15.8px)
|
||
w: 14 → 25.6 (+11.6px)
|
||
h: 14 → 25.6 (+11.6px)
|
||
width: 14px → 25.5938px
|
||
height: 14px → 25.5938px
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input
|
||
x: 173.6 → 136.6 (-37px)
|
||
y: 575.9 → 558.8 (-17.1px)
|
||
w: 127 → 137.7 (+10.7px)
|
||
h: 13 → 27.2 (+14.2px)
|
||
padding-top: 0px → 5.6px
|
||
padding-right: 0px → 8px
|
||
padding-bottom: 0px → 5.6px
|
||
padding-left: 0px → 8px
|
||
width: 127px → 137.656px
|
||
height: 13px → 27.1875px
|
||
border-top-width: 0px → 1px
|
||
border-top-style: none → solid
|
||
border-top-color: rgb(23, 33, 43) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244)
|
||
background-position: 0px 0px → 0% 0%
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon]
|
||
x: 308.6 → 280.6 (-28px)
|
||
y: 575.4 → 565.4 (-10px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 33, 43) → rgb(109, 120, 131)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block]
|
||
x: 347.6 → 318.6 (-29px)
|
||
y: 546.4 → 518.8 (-27.6px)
|
||
w: 155 → 190 (+35px)
|
||
h: 52 → 75 (+23px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 0px
|
||
column-gap: normal → 0px
|
||
padding-top: 0px → 10px
|
||
width: 155.047px → 190.047px
|
||
height: 52px → 75px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION"
|
||
x: 347.6 → 318.6 (-29px)
|
||
y: 546.4 → 529.8 (-16.6px)
|
||
w: 155 → 190 (+35px)
|
||
h: 12 → 14 (+2px)
|
||
align-items: normal → center
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
width: 155.047px → 190.047px
|
||
height: 12px → 14px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °"
|
||
x: 471.1 → 473.2 (+2.1px)
|
||
y: 546.4 → 529.8 (-16.6px)
|
||
w: 31.5 → 35.5 (+4px)
|
||
h: 12 → 14 (+2px)
|
||
width: 31.5156px → 35.5px
|
||
height: 12px → 14px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 10px → 11px
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input
|
||
x: 347.6 → 320.6 (-27px)
|
||
y: 567.4 → 553.8 (-13.6px)
|
||
w: 155 → 190 (+35px)
|
||
display: inline-block → block
|
||
margin-top: 0px → 2px
|
||
margin-right: 0px → 2px
|
||
margin-bottom: 0px → 2px
|
||
margin-left: 0px → 2px
|
||
width: 155.047px → 190.047px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(16, 16, 16)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block]
|
||
x: 518.6 → 532.7 (+14.1px)
|
||
y: 546.4 → 518.8 (-27.6px)
|
||
w: 186.1 → 190 (+3.9px)
|
||
h: 52 → 75 (+23px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
padding-top: 0px → 10px
|
||
width: 186.078px → 190.047px
|
||
height: 52px → 75px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY"
|
||
x: 518.6 → 532.7 (+14.1px)
|
||
y: 546.4 → 529.8 (-16.6px)
|
||
w: 186.1 → 190 (+3.9px)
|
||
h: 12 → 24 (+12px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
margin-bottom: 8px → 0px
|
||
width: 186.078px → 190.047px
|
||
height: 12px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 0.8px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%"
|
||
x: 679.5 → 601.7 (-77.8px)
|
||
y: 546.4 → 531.8 (-14.6px)
|
||
w: 25.2 → 43.6 (+18.4px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 25.2031px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 0.8px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented]
|
||
x: 518.6 → 532.7 (+14.1px)
|
||
y: 566.4 → 561.8 (-4.6px)
|
||
w: 186.1 → 190 (+3.9px)
|
||
width: 186.078px → 190.047px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100"
|
||
x: 565.7 → 533.7 (-32px)
|
||
y: 567.4 → 562.8 (-4.6px)
|
||
w: 46 → 42.2 (-3.8px)
|
||
display: block → flex
|
||
align-items: normal → center
|
||
padding-right: 0px → 11.2px
|
||
padding-left: 0px → 11.2px
|
||
width: 46.0312px → 42.1875px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75"
|
||
x: 611.7 → 575.9 (-35.8px)
|
||
y: 567.4 → 562.8 (-4.6px)
|
||
w: 46 → 36.6 (-9.4px)
|
||
display: block → flex
|
||
align-items: normal → center
|
||
padding-right: 0px → 11.2px
|
||
padding-left: 0px → 11.2px
|
||
width: 46.0156px → 36.5781px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50"
|
||
x: 657.7 → 612.4 (-45.3px)
|
||
y: 567.4 → 562.8 (-4.6px)
|
||
w: 46 → 36.6 (-9.4px)
|
||
display: block → flex
|
||
align-items: normal → center
|
||
padding-right: 0px → 11.2px
|
||
padding-left: 0px → 11.2px
|
||
width: 46.0156px → 36.5781px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25"
|
||
x: 519.6 → 649 (+129.4px)
|
||
y: 567.4 → 562.8 (-4.6px)
|
||
w: 46 → 36.6 (-9.4px)
|
||
display: block → flex
|
||
align-items: normal → center
|
||
padding-right: 0px → 11.2px
|
||
padding-left: 0px → 11.2px
|
||
width: 46.0156px → 36.5781px
|
||
border-top-color: rgb(255, 255, 255) → rgb(109, 120, 131)
|
||
background-color: rgb(23, 105, 210) → rgba(0, 0, 0, 0)
|
||
color: rgb(255, 255, 255) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.6px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card]
|
||
y: 627.4 → 604.8 (-22.6px)
|
||
h: 138 → 89 (-49px)
|
||
grid-template-columns: 46px 20px 598.125px → 46px 618.125px
|
||
grid-template-rows: 136px → 45px 42px
|
||
height: 138px → 89px
|
||
min-height: 138px → auto
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02"
|
||
y: 628.4 → 605.8 (-22.6px)
|
||
h: 136 → 45 (-91px)
|
||
padding-bottom: 0px → 6px
|
||
height: 136px → 45px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 11px → 22px
|
||
font-weight: 400 → 600
|
||
line-height: normal → 22px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
x: 104.6 → 58.6 (-46px)
|
||
y: 645.4 → 650.8 (+5.4px)
|
||
margin-top: 17px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body]
|
||
x: 124.6 → 104.6 (-20px)
|
||
y: 628.4 → 605.8 (-22.6px)
|
||
w: 598.1 → 618.1 (+20px)
|
||
h: 136 → 87 (-49px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
padding-top: 15px → 0px
|
||
padding-right: 18px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 18px → 0px
|
||
width: 598.125px → 618.125px
|
||
height: 136px → 87px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 643.4 → 605.8 (-37.6px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 65 → 72 (+7px)
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 8px
|
||
column-gap: 15px → 8px
|
||
padding-top: 0px → 8px
|
||
padding-right: 0px → 12px
|
||
padding-bottom: 0px → 8px
|
||
padding-left: 0px → 12px
|
||
width: 562.125px → 618.125px
|
||
height: 65px → 72px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 643.4 → 613.8 (-29.6px)
|
||
w: 140.2 → 153 (+12.8px)
|
||
h: 65 → 55 (-10px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
width: 140.203px → 153px
|
||
height: 65px → 55px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 651.4 → 613.8 (-37.6px)
|
||
w: 60.3 → 153 (+92.7px)
|
||
display: inline → block
|
||
width: auto → 153px
|
||
height: auto → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Remove background"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 672.4 → 631.8 (-40.6px)
|
||
w: 140.2 → 153 (+12.8px)
|
||
width: 140.203px → 153px
|
||
height: 18px → 19px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 667.4 → 613.8 (-53.6px)
|
||
w: 97 → 121.4 (+24.4px)
|
||
h: 17 → 21.8 (+4.8px)
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
width: 97px → 121.375px
|
||
height: 17px → 21.7812px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
y: 667.9 → 615.7 (-52.2px)
|
||
w: 16 → 28 (+12px)
|
||
h: 16 → 18 (+2px)
|
||
display: block → flex
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 16px → 28px
|
||
height: 16px → 18px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
x: 658.7 → 663.7 (+5px)
|
||
y: 667.9 → 616.7 (-51.2px)
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon]
|
||
x: 687.7 → 693.7 (+6px)
|
||
y: 667.4 → 616.2 (-51.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 669.9 → 613.8 (-56.1px)
|
||
w: 38 → 60.4 (+22.4px)
|
||
h: 12 → 21.8 (+9.8px)
|
||
row-gap: 4px → 4.8px
|
||
column-gap: 4px → 4.8px
|
||
padding-top: 0px → 2.4px
|
||
padding-right: 0px → 7.2px
|
||
padding-bottom: 0px → 2.4px
|
||
padding-left: 0px → 7.2px
|
||
width: 38px → 60.375px
|
||
height: 12px → 21.7812px
|
||
border-top-width: 0px → 1px
|
||
border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216)
|
||
border-radius: 0px → 4px
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
x: 607.7 → 597.5 (-10.2px)
|
||
y: 669.9 → 618.7 (-51.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106)
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [transform-note] "Automatic subject detection enabled"
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 708.4 → 677.8 (-30.6px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
width: 562.125px → 618.125px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > svg [lucide lucide-icon lucide-sliders-horizontal]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 708.4 → 677.8 (-30.6px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card]
|
||
y: 775.4 → 703.8 (-71.6px)
|
||
h: 152 → 141.2 (-10.8px)
|
||
grid-template-columns: 46px 20px 598.125px → 46px 618.125px
|
||
grid-template-rows: 150px → 45px 94.1875px
|
||
height: 152px → 141.188px
|
||
min-height: 138px → auto
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03"
|
||
y: 776.4 → 704.8 (-71.6px)
|
||
h: 150 → 45 (-105px)
|
||
padding-bottom: 0px → 6px
|
||
height: 150px → 45px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 11px → 22px
|
||
font-weight: 400 → 600
|
||
line-height: normal → 22px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
x: 104.6 → 58.6 (-46px)
|
||
y: 793.4 → 749.8 (-43.6px)
|
||
margin-top: 17px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body]
|
||
x: 124.6 → 104.6 (-20px)
|
||
y: 776.4 → 704.8 (-71.6px)
|
||
w: 598.1 → 618.1 (+20px)
|
||
h: 150 → 139.2 (-10.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
padding-top: 15px → 0px
|
||
padding-right: 18px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 18px → 0px
|
||
width: 598.125px → 618.125px
|
||
height: 150px → 139.188px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 791.4 → 704.8 (-86.6px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 65 → 72 (+7px)
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 8px
|
||
column-gap: 15px → 8px
|
||
padding-top: 0px → 8px
|
||
padding-right: 0px → 12px
|
||
padding-bottom: 0px → 8px
|
||
padding-left: 0px → 12px
|
||
width: 562.125px → 618.125px
|
||
height: 65px → 72px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 791.4 → 712.8 (-78.6px)
|
||
w: 90.7 → 99 (+8.3px)
|
||
h: 65 → 55 (-10px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
width: 90.7188px → 99px
|
||
height: 65px → 55px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 799.4 → 712.8 (-86.6px)
|
||
w: 33.5 → 99 (+65.5px)
|
||
display: inline → block
|
||
width: auto → 99px
|
||
height: auto → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Add outline"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 820.4 → 730.8 (-89.6px)
|
||
w: 90.7 → 99 (+8.3px)
|
||
width: 90.7188px → 99px
|
||
height: 18px → 19px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 815.4 → 712.8 (-102.6px)
|
||
w: 97 → 121.4 (+24.4px)
|
||
h: 17 → 21.8 (+4.8px)
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
width: 97px → 121.375px
|
||
height: 17px → 21.7812px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
y: 815.9 → 714.7 (-101.2px)
|
||
w: 16 → 28 (+12px)
|
||
h: 16 → 18 (+2px)
|
||
display: block → flex
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 16px → 28px
|
||
height: 16px → 18px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
x: 658.7 → 663.7 (+5px)
|
||
y: 815.9 → 715.7 (-100.2px)
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon]
|
||
x: 687.7 → 693.7 (+6px)
|
||
y: 815.4 → 715.2 (-100.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 817.9 → 712.8 (-105.1px)
|
||
w: 38 → 60.4 (+22.4px)
|
||
h: 12 → 21.8 (+9.8px)
|
||
row-gap: 4px → 4.8px
|
||
column-gap: 4px → 4.8px
|
||
padding-top: 0px → 2.4px
|
||
padding-right: 0px → 7.2px
|
||
padding-bottom: 0px → 2.4px
|
||
padding-left: 0px → 7.2px
|
||
width: 38px → 60.375px
|
||
height: 12px → 21.7812px
|
||
border-top-width: 0px → 1px
|
||
border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216)
|
||
border-radius: 0px → 4px
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
x: 607.7 → 597.5 (-10.2px)
|
||
y: 817.9 → 717.7 (-100.2px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106)
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 856.4 → 776.8 (-79.6px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 52 → 67.2 (+15.2px)
|
||
row-gap: 16px → 0px
|
||
grid-template-columns: 273.062px 273.062px → 301.062px 301.062px
|
||
grid-template-rows: 52px → 67.1875px
|
||
width: 562.125px → 618.125px
|
||
height: 52px → 67.1875px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 856.4 → 776.8 (-79.6px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 52 → 67.2 (+15.2px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 0px
|
||
column-gap: normal → 0px
|
||
padding-top: 0px → 10px
|
||
width: 273.062px → 301.062px
|
||
height: 52px → 67.1875px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH"
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 856.4 → 787.8 (-68.6px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 12 → 14 (+2px)
|
||
align-items: normal → center
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
width: 273.062px → 301.062px
|
||
height: 12px → 14px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px"
|
||
x: 390.4 → 377.3 (-13.1px)
|
||
y: 856.4 → 787.8 (-68.6px)
|
||
w: 25.2 → 28.4 (+3.2px)
|
||
h: 12 → 14 (+2px)
|
||
width: 25.2188px → 28.4062px
|
||
height: 12px → 14px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 10px → 11px
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input
|
||
x: 142.6 → 106.6 (-36px)
|
||
y: 877.4 → 811.8 (-65.6px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
display: inline-block → block
|
||
margin-top: 0px → 2px
|
||
margin-right: 0px → 2px
|
||
margin-bottom: 0px → 2px
|
||
margin-left: 0px → 2px
|
||
width: 273.062px → 301.062px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(16, 16, 16)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block]
|
||
x: 431.7 → 421.7 (-10px)
|
||
y: 856.4 → 776.8 (-79.6px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 52 → 67.2 (+15.2px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
padding-top: 0px → 10px
|
||
width: 273.062px → 301.062px
|
||
height: 52px → 67.1875px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR"
|
||
x: 431.7 → 421.7 (-10px)
|
||
y: 856.4 → 787.8 (-68.6px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
align-items: normal → baseline
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
width: 273.062px → 301.062px
|
||
height: 12px → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field]
|
||
x: 431.7 → 421.7 (-10px)
|
||
y: 876.4 → 816.8 (-59.6px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 32 → 27.2 (-4.8px)
|
||
row-gap: 8px → 6.4px
|
||
column-gap: 8px → 6.4px
|
||
padding-right: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 273.062px → 301.062px
|
||
height: 32px → 27.1875px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch]
|
||
x: 440.7 → 421.7 (-19px)
|
||
y: 885.4 → 817.6 (-67.8px)
|
||
w: 14 → 25.6 (+11.6px)
|
||
h: 14 → 25.6 (+11.6px)
|
||
width: 14px → 25.5938px
|
||
height: 14px → 25.5938px
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input
|
||
x: 462.7 → 453.6 (-9.1px)
|
||
y: 885.9 → 816.8 (-69.1px)
|
||
w: 233.1 → 269.1 (+36px)
|
||
h: 13 → 27.2 (+14.2px)
|
||
padding-top: 0px → 5.6px
|
||
padding-right: 0px → 8px
|
||
padding-bottom: 0px → 5.6px
|
||
padding-left: 0px → 8px
|
||
width: 233.062px → 269.078px
|
||
height: 13px → 27.1875px
|
||
border-top-width: 0px → 1px
|
||
border-top-style: none → solid
|
||
border-top-color: rgb(23, 33, 43) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244)
|
||
background-position: 0px 0px → 0% 0%
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card]
|
||
y: 937.4 → 855 (-82.4px)
|
||
h: 144 → 127 (-17px)
|
||
grid-template-columns: 46px 20px 598.125px → 46px 618.125px
|
||
grid-template-rows: 142px → 45px 80px
|
||
height: 144px → 127px
|
||
min-height: 138px → auto
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04"
|
||
y: 938.4 → 856 (-82.4px)
|
||
h: 142 → 45 (-97px)
|
||
padding-bottom: 0px → 6px
|
||
height: 142px → 45px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-size: 11px → 22px
|
||
font-weight: 400 → 600
|
||
line-height: normal → 22px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
x: 104.6 → 58.6 (-46px)
|
||
y: 955.4 → 901 (-54.4px)
|
||
margin-top: 17px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body]
|
||
x: 124.6 → 104.6 (-20px)
|
||
y: 938.4 → 856 (-82.4px)
|
||
w: 598.1 → 618.1 (+20px)
|
||
h: 142 → 125 (-17px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
padding-top: 15px → 0px
|
||
padding-right: 18px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 18px → 0px
|
||
width: 598.125px → 618.125px
|
||
height: 142px → 125px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 953.4 → 856 (-97.4px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 65 → 72 (+7px)
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 8px
|
||
column-gap: 15px → 8px
|
||
padding-top: 0px → 8px
|
||
padding-right: 0px → 12px
|
||
padding-bottom: 0px → 8px
|
||
padding-left: 0px → 12px
|
||
width: 562.125px → 618.125px
|
||
height: 65px → 72px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 953.4 → 864 (-89.4px)
|
||
w: 107.2 → 117 (+9.8px)
|
||
h: 65 → 55 (-10px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
width: 107.219px → 117px
|
||
height: 65px → 55px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 961.4 → 864 (-97.4px)
|
||
w: 33.5 → 117 (+83.5px)
|
||
display: inline → block
|
||
width: auto → 117px
|
||
height: auto → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Round corners"
|
||
x: 142.6 → 116.6 (-26px)
|
||
y: 982.4 → 882 (-100.4px)
|
||
w: 107.2 → 117 (+9.8px)
|
||
width: 107.219px → 117px
|
||
height: 18px → 19px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 977.4 → 864 (-113.4px)
|
||
w: 97 → 121.4 (+24.4px)
|
||
h: 17 → 21.8 (+4.8px)
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
width: 97px → 121.375px
|
||
height: 17px → 21.7812px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
y: 977.9 → 865.9 (-112px)
|
||
w: 16 → 28 (+12px)
|
||
h: 16 → 18 (+2px)
|
||
display: block → flex
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 16px → 28px
|
||
height: 16px → 18px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
x: 658.7 → 663.7 (+5px)
|
||
y: 977.9 → 866.9 (-111px)
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon]
|
||
x: 687.7 → 693.7 (+6px)
|
||
y: 977.4 → 866.4 (-111px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
x: 607.7 → 589.3 (-18.4px)
|
||
y: 979.9 → 864 (-115.9px)
|
||
w: 38 → 60.4 (+22.4px)
|
||
h: 12 → 21.8 (+9.8px)
|
||
row-gap: 4px → 4.8px
|
||
column-gap: 4px → 4.8px
|
||
padding-top: 0px → 2.4px
|
||
padding-right: 0px → 7.2px
|
||
padding-bottom: 0px → 2.4px
|
||
padding-left: 0px → 7.2px
|
||
width: 38px → 60.375px
|
||
height: 12px → 21.7812px
|
||
border-top-width: 0px → 1px
|
||
border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216)
|
||
border-radius: 0px → 4px
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
x: 607.7 → 597.5 (-10.2px)
|
||
y: 979.9 → 868.9 (-111px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106)
|
||
color: rgb(35, 131, 84) → rgb(37, 169, 106)
|
||
line-height: normal → 15px
|
||
letter-spacing: normal → 0.8px
|
||
text-transform: none → uppercase
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 1018.4 → 928 (-90.4px)
|
||
w: 562.1 → 618.1 (+56px)
|
||
h: 44 → 53 (+9px)
|
||
row-gap: 16px → 0px
|
||
grid-template-columns: 273.062px 273.062px → 301.062px 301.062px
|
||
grid-template-rows: 44px → 53px
|
||
width: 562.125px → 618.125px
|
||
height: 44px → 53px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block]
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 1018.4 → 928 (-90.4px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 44 → 53 (+9px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 0px
|
||
column-gap: normal → 0px
|
||
padding-top: 0px → 10px
|
||
width: 273.062px → 301.062px
|
||
height: 44px → 53px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS"
|
||
x: 142.6 → 104.6 (-38px)
|
||
y: 1018.4 → 939 (-79.4px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 12 → 14 (+2px)
|
||
align-items: normal → center
|
||
row-gap: normal → 8px
|
||
column-gap: normal → 8px
|
||
width: 273.062px → 301.062px
|
||
height: 12px → 14px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px"
|
||
x: 384.1 → 370.2 (-13.9px)
|
||
y: 1018.4 → 939 (-79.4px)
|
||
w: 31.5 → 35.5 (+4px)
|
||
h: 12 → 14 (+2px)
|
||
width: 31.5156px → 35.5px
|
||
height: 12px → 14px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 10px → 11px
|
||
letter-spacing: 0.8px → 0.5px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input
|
||
x: 142.6 → 106.6 (-36px)
|
||
y: 1039.4 → 963 (-76.4px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
display: inline-block → block
|
||
margin-top: 0px → 2px
|
||
margin-right: 0px → 2px
|
||
margin-bottom: 0px → 2px
|
||
margin-left: 0px → 2px
|
||
width: 273.062px → 301.062px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(16, 16, 16)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row]
|
||
x: 431.7 → 421.7 (-10px)
|
||
y: 1018.4 → 928 (-90.4px)
|
||
w: 273.1 → 301.1 (+28px)
|
||
h: 44 → 53 (+9px)
|
||
display: block → flex
|
||
justify-content: normal → space-between
|
||
align-items: normal → center
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-top: 0px → 10px
|
||
width: 273.062px → 301.062px
|
||
height: 44px → 53px
|
||
min-width: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
font-size: 16px → 13.6px
|
||
line-height: 24px → 20.4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio"
|
||
x: 431.7 → 421.7 (-10px)
|
||
y: 1021.4 → 949.8 (-71.6px)
|
||
w: 155.6 → 129 (-26.6px)
|
||
h: 17 → 20.4 (+3.4px)
|
||
display: inline → block
|
||
width: auto → 129.031px
|
||
height: auto → 20.3906px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 16px → 13.6px
|
||
line-height: 24px → 20.4px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle]
|
||
x: 587.3 → 684.3 (+97px)
|
||
y: 1018.4 → 949.6 (-68.8px)
|
||
w: 32 → 38.4 (+6.4px)
|
||
h: 18 → 20.8 (+2.8px)
|
||
display: inline-block → block
|
||
width: 32px → 38.3906px
|
||
height: 18px → 20.7969px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 999px
|
||
background-color: rgba(0, 0, 0, 0) → rgb(23, 105, 210)
|
||
color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob]
|
||
x: 603.3 → 703.9 (+100.6px)
|
||
y: 1027.4 → 951.6 (-75.8px)
|
||
w: 0 → 16.8 (+16.8px)
|
||
h: 0 → 16.8 (+16.8px)
|
||
display: inline → block
|
||
position: static → absolute
|
||
top: auto → 1px
|
||
right: auto → 18.5938px
|
||
bottom: auto → 1px
|
||
left: auto → 1px
|
||
width: auto → 16.7969px
|
||
height: auto → 16.7969px
|
||
transform: none → matrix(1, 0, 0, 1, 17.6, 0)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
border-radius: 0px → 50%
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) [pipeline-footer]
|
||
y: 1081.4 → 982 (-99.4px)
|
||
height: 36px → 35px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline"
|
||
y: 1099.4 → 1000 (-99.4px)
|
||
w: 97.1 → 109.8 (+12.7px)
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 97.0625px → 109.75px
|
||
height: 18px → 17px
|
||
background-position: 0px 0px → 0% 0%
|
||
line-height: 18px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
|
||
x: 57.6 → 63.6 (+6px)
|
||
y: 1101.4 → 1001.5 (-99.9px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
line-height: 18px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span [auto-note] "changes are applied automatically"
|
||
x: 510.1 → 489.9 (-20.2px)
|
||
y: 1101.9 → 1001.5 (-100.4px)
|
||
w: 213.6 → 233.8 (+20.2px)
|
||
width: 213.594px → 233.812px
|
||
height: 13px → 14px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot]
|
||
x: 510.1 → 489.9 (-20.2px)
|
||
y: 1105.4 → 1004.5 (-100.9px)
|
||
w: 6 → 8 (+2px)
|
||
h: 6 → 8 (+2px)
|
||
width: 6px → 8px
|
||
height: 6px → 8px
|
||
box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
|
||
y: 392.4 → 381.8 (-10.6px)
|
||
h: 59 → 50 (-9px)
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
height: 59px → 50px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text]
|
||
y: 392.4 → 381.8 (-10.6px)
|
||
w: 148.5 → 153.6 (+5.1px)
|
||
h: 46 → 37 (-9px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 2px
|
||
column-gap: normal → 2px
|
||
width: 148.484px → 153.609px
|
||
height: 46px → 37px
|
||
min-width: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > strong "4 active steps"
|
||
y: 421.4 → 400.8 (-20.6px)
|
||
w: 148.5 → 153.6 (+5.1px)
|
||
width: 148.484px → 153.609px
|
||
height: 17px → 18px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > strong > em "• LIVE"
|
||
x: 173.1 → 175.2 (+2.1px)
|
||
y: 425.4 → 404.8 (-20.6px)
|
||
w: 33 → 36 (+3px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE"
|
||
y: 400.4 → 381.8 (-18.6px)
|
||
w: 127.3 → 153.6 (+26.3px)
|
||
display: inline → block
|
||
width: auto → 153.609px
|
||
height: auto → 12px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: normal → 12px
|
||
letter-spacing: 1.2px → 1px
|
||
text-transform: none → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool"
|
||
x: 657.7 → 644.4 (-13.3px)
|
||
y: 406.4 → 391.8 (-14.6px)
|
||
w: 66 → 79.3 (+13.3px)
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 66.0469px → 79.3125px
|
||
height: 18px → 17px
|
||
background-position: 0px 0px → 0% 0%
|
||
line-height: 18px → normal
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus]
|
||
x: 657.7 → 650.4 (-7.3px)
|
||
y: 407.9 → 392.8 (-15.1px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
line-height: 18px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > footer [preview-footer]
|
||
y: 1532.9 → 2292.9 (+760px)
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(1) "easy-png-tools"
|
||
y: 1550.4 → 2309.9 (+759.5px)
|
||
w: 117 → 142.8 (+25.8px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
width: 116.984px → 142.812px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0"
|
||
x: 141.6 → 159.6 (+18px)
|
||
y: 1550.4 → 2309.9 (+759.5px)
|
||
w: 33 → 40.8 (+7.8px)
|
||
display: block → inline
|
||
width: 33px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-weight: 400 → 700
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(2) "© 2024"
|
||
x: 691.5 → 1341.6 (+650.1px)
|
||
y: 1549.9 → 2309.9 (+760px)
|
||
w: 141 → 40.8 (-100.2px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
width: 140.969px → 40.8125px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2]
|
||
✗ present in reference, absent in project
|
||
|
||
body >main >footer >span:nth-of-type(3) "© 2024"
|
||
✗ present in reference, absent in project
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|
||
|
||
|
||
=== /preview/list-tools (vs list-tools.html) — 305 differences ===
|
||
|
||
body
|
||
h: 2416.4 → 2361.6 (-54.8px)
|
||
height: 2416.38px → 2361.59px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main [preview-root]
|
||
h: 2416.4 → 2361.6 (-54.8px)
|
||
height: 2416.38px → 2361.59px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header [topbar]
|
||
position: static → sticky
|
||
top: auto → 0px
|
||
z-index: auto → 20
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a [brand]
|
||
w: 218.1 → 232.4 (+14.3px)
|
||
width: 218.062px → 232.422px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255)
|
||
|
||
body > main > header > a > span:nth-of-type(2) "easy-png-tools"
|
||
w: 107.8 → 117.6 (+9.8px)
|
||
width: 107.766px → 117.609px
|
||
height: 17px → 18px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG"
|
||
x: 215.4 → 225.2 (+9.8px)
|
||
w: 60.3 → 64.8 (+4.5px)
|
||
width: 60.2969px → 64.8125px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
|
||
body > main > header > div [top-actions]
|
||
x: 1085.6 → 1070.6 (-15px)
|
||
w: 296.8 → 311.8 (+15px)
|
||
width: 296.828px → 311.812px
|
||
height: 29px → 28px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > div > span [status] "LOCAL MODE / READY"
|
||
x: 1085.6 → 1070.6 (-15px)
|
||
w: 126.4 → 137.4 (+11px)
|
||
width: 126.375px → 137.406px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
x: 1085.6 → 1070.6 (-15px)
|
||
w: 6 → 8 (+2px)
|
||
h: 6 → 8 (+2px)
|
||
width: 6px → 8px
|
||
height: 6px → 8px
|
||
box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
x: 1228 → 1224 (-4px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
x: 1234 → 1230 (-4px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
x: 1273 → 1268 (-5px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
x: 1279 → 1274 (-5px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > div [lang]
|
||
x: 1318 → 1312 (-6px)
|
||
w: 64.5 → 70.4 (+5.9px)
|
||
align-items: center → normal
|
||
width: 64.4531px → 70.4062px
|
||
height: 26px → 27px
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
x: 1348 → 1344.2 (-3.8px)
|
||
y: 19.5 → 25 (+5.5px)
|
||
w: 4.5 → 6 (+1.5px)
|
||
h: 24 → 13 (-11px)
|
||
align-self: auto → center
|
||
width: 4.45312px → 6px
|
||
height: 24px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 33, 43) → rgb(109, 120, 131)
|
||
font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace
|
||
font-size: 16px → 10px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
x: 1352.4 → 1350.2 (-2.2px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
x: 1319 → 1313 (-6px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > nav [nav]
|
||
x: 760.6 → 504 (-256.6px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 296.9 → 376.6 (+79.7px)
|
||
h: 12 → 15 (+3px)
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → 0px
|
||
margin-left: 484.984px → 24px
|
||
width: 296.938px → 376.594px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
x: 760.6 → 504 (-256.6px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 49.5 → 69.1 (+19.6px)
|
||
h: 12 → 15 (+3px)
|
||
width: 49.4844px → 69.125px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
x: 832.1 → 591.1 (-241px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 38.5 → 53.8 (+15.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 38.5px → 53.7656px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 105, 210) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
x: 892.6 → 662.9 (-229.7px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 44 → 61.5 (+17.5px)
|
||
h: 12 → 15 (+3px)
|
||
width: 43.9844px → 61.4531px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
x: 958.6 → 742.4 (-216.2px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 99 → 138.3 (+39.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 98.9688px → 138.25px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div [catalog-page]
|
||
h: 2352.4 → 2251.6 (-100.8px)
|
||
height: 2352.38px → 2251.59px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(1) [catalog-head]
|
||
h: 189.4 → 124.6 (-64.8px)
|
||
flex-wrap: nowrap → wrap
|
||
row-gap: 40px → 24px
|
||
column-gap: 40px → 24px
|
||
padding-bottom: 42px → 0px
|
||
height: 189.375px → 124.594px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1)
|
||
w: 660 → 510.7 (-149.3px)
|
||
h: 146.4 → 124.6 (-21.8px)
|
||
width: 660px → 510.719px
|
||
height: 146.375px → 124.594px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
|
||
w: 660 → 510.7 (-149.3px)
|
||
h: 12 → 15 (+3px)
|
||
margin-bottom: 18px → 8px
|
||
width: 660px → 510.719px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 105, 210) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: 1.2px → 2.16px
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
|
||
y: 154 → 147 (-7px)
|
||
w: 660 → 510.7 (-149.3px)
|
||
h: 57.6 → 48 (-9.6px)
|
||
margin-top: 12px → 0px
|
||
margin-bottom: 14px → 0px
|
||
width: 660px → 510.719px
|
||
height: 57.5938px → 48px
|
||
max-width: 700px → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 57.6px → 32px
|
||
font-weight: 650 → 700
|
||
line-height: 57.6px → 48px
|
||
letter-spacing: -3.456px → normal
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. "
|
||
y: 225.6 → 203 (-22.6px)
|
||
w: 660 → 510.7 (-149.3px)
|
||
margin-top: 0px → 8px
|
||
width: 660px → 510.719px
|
||
height: 44.7812px → 45.5938px
|
||
max-width: 660px → 510.72px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 15.2px
|
||
line-height: 22.4px → 22.8px
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total]
|
||
x: 1251.3 → 1321.2 (+69.9px)
|
||
y: 205.6 → 175 (-30.6px)
|
||
w: 131.1 → 61.2 (-69.9px)
|
||
h: 64.8 → 73.6 (+8.8px)
|
||
flex-direction: row → column
|
||
align-items: center → flex-end
|
||
row-gap: 14px → normal
|
||
column-gap: 14px → normal
|
||
width: 131.141px → 61.2031px
|
||
height: 64.7969px → 73.5938px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: 14px → 16px
|
||
text-align: right → start
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32"
|
||
x: 1251.3 → 1344 (+92.7px)
|
||
y: 205.6 → 175 (-30.6px)
|
||
w: 67.7 → 38.4 (-29.3px)
|
||
h: 64.8 → 42 (-22.8px)
|
||
width: 67.6562px → 38.4062px
|
||
height: 64.7969px → 42px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-size: 72px → 32px
|
||
font-weight: 400 → 700
|
||
line-height: 64.8px → normal
|
||
letter-spacing: -5.76px → normal
|
||
text-align: right → start
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE"
|
||
x: 1332.9 → 1321.2 (-11.7px)
|
||
y: 224 → 222.6 (-1.4px)
|
||
w: 49.5 → 61.2 (+11.7px)
|
||
h: 28 → 26 (-2px)
|
||
margin-top: 0px → 5.6px
|
||
width: 49.4844px → 61.2031px
|
||
height: 28px → 26px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: 14px → normal
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br
|
||
y: 225 → 222.6 (-2.4px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
line-height: 14px → normal
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(2) [catalog-toolbar]
|
||
y: 313.4 → 248.6 (-64.8px)
|
||
h: 108 → 75 (-33px)
|
||
flex-wrap: nowrap → wrap
|
||
row-gap: 24px → 16px
|
||
column-gap: 24px → 16px
|
||
padding-top: 24px → 20px
|
||
padding-bottom: 42px → 20px
|
||
height: 108px → 75px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(2) > label [catalog-search]
|
||
y: 337.4 → 268.6 (-68.8px)
|
||
w: 420 → 202 (-218px)
|
||
h: 42 → 35 (-7px)
|
||
row-gap: 12px → 8px
|
||
column-gap: 12px → 8px
|
||
padding-top: 12px → 8px
|
||
padding-right: 14px → 12px
|
||
padding-bottom: 12px → 8px
|
||
padding-left: 14px → 12px
|
||
width: 420px → 202px
|
||
height: 42px → 35px
|
||
border-radius: 0px → 4px
|
||
background-color: rgba(0, 0, 0, 0) → rgb(248, 250, 251)
|
||
|
||
body > main > div > div:nth-of-type(2) > label > svg [lucide lucide-icon lucide-search]
|
||
x: 72.6 → 70.6 (-2px)
|
||
y: 350.4 → 278.1 (-72.3px)
|
||
w: 14.9 → 16 (+1.1px)
|
||
width: 14.8906px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(2) > label > input
|
||
x: 99.5 → 94.6 (-4.9px)
|
||
y: 351.4 → 277.6 (-73.8px)
|
||
w: 363.1 → 152 (-211.1px)
|
||
h: 14 → 17 (+3px)
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 2px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 2px
|
||
width: 363.109px → 152px
|
||
height: 14px → 17px
|
||
background-position: 0px 0px → 0% 0%
|
||
|
||
body > main > div > div:nth-of-type(2) > div [catalog-filters]
|
||
x: 901.9 → 850.9 (-51px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 480.5 → 531.5 (+51px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
row-gap: 6px → 6.4px
|
||
column-gap: 6px → 6.4px
|
||
width: 480.469px → 531.484px
|
||
height: 30px → 27.7812px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(2) > div > svg [lucide lucide-funnel lucide-icon]
|
||
x: 901.9 → 850.9 (-51px)
|
||
y: 350.9 → 278.6 (-72.3px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL"
|
||
x: 922.9 → 872.3 (-50.6px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 38.5 → 41 (+2.5px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 38.5px → 41px
|
||
height: 30px → 27.7812px
|
||
border-radius: 0px → 4px
|
||
background-color: rgba(0, 0, 0, 0) → rgb(23, 105, 210)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 105, 210) → rgb(255, 255, 255)
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
|
||
x: 967.4 → 919.7 (-47.7px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 60.5 → 67.4 (+6.9px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 60.5px → 67.3906px
|
||
height: 30px → 27.7812px
|
||
border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
|
||
x: 1033.9 → 993.5 (-40.4px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 88 → 100.4 (+12.4px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 87.9844px → 100.391px
|
||
height: 30px → 27.7812px
|
||
border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
|
||
x: 1127.9 → 1100.3 (-27.6px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 49.5 → 54.2 (+4.7px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 49.5px → 54.1875px
|
||
height: 30px → 27.7812px
|
||
border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
|
||
x: 1183.4 → 1160.8 (-22.6px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 66 → 74 (+8px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 65.9844px → 74px
|
||
height: 30px → 27.7812px
|
||
border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
|
||
x: 1255.4 → 1241.2 (-14.2px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 60.5 → 67.4 (+6.9px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 60.5px → 67.3906px
|
||
height: 30px → 27.7812px
|
||
border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
|
||
x: 1321.9 → 1315 (-6.9px)
|
||
y: 343.4 → 272.2 (-71.2px)
|
||
w: 60.5 → 67.4 (+6.9px)
|
||
h: 30 → 27.8 (-2.2px)
|
||
padding-top: 8px → 6.4px
|
||
padding-right: 10px → 9.6px
|
||
padding-bottom: 8px → 6.4px
|
||
padding-left: 10px → 9.6px
|
||
width: 60.5px → 67.3906px
|
||
height: 30px → 27.7812px
|
||
border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218)
|
||
border-radius: 0px → 4px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > div > div:nth-of-type(3) [catalog-groups]
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
min-width: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title]
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
h: 26 → 24 (-2px)
|
||
align-items: center → baseline
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 12px → 8px
|
||
height: 26px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.32px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT"
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
w: 51.6 → 62.2 (+10.6px)
|
||
h: 13 → 15 (+2px)
|
||
width: 51.5781px → 62.1719px
|
||
height: 13px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 11px → 12px
|
||
font-weight: 600 → 400
|
||
letter-spacing: 1.32px → 1.68px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS"
|
||
y: 421.9 → 325.6 (-96.3px)
|
||
width: 54.5625px → 54.4062px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 1.32px → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards]
|
||
y: 447.4 → 363.6 (-83.8px)
|
||
h: 584 → 570 (-14px)
|
||
padding-top: 14px → 0px
|
||
height: 584px → 570px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card]
|
||
y: 461.4 → 363.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
y: 493.4 → 395.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon]
|
||
y: 504.9 → 407.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
y: 493.9 → 398.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Convert JPG to PNG"
|
||
y: 493.9 → 398.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Re-encode JPEG files as lossless PNG whi"
|
||
y: 516.9 → 417.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01"
|
||
y: 478.4 → 380.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 506.4 → 408.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card]
|
||
y: 577.4 → 479.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
y: 609.4 → 511.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon]
|
||
y: 620.9 → 523.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
y: 609.9 → 514.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Convert WebP to PNG"
|
||
y: 609.9 → 514.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Turn WebP images into a universal PNG fo"
|
||
y: 632.9 → 533.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02"
|
||
y: 594.4 → 496.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 622.4 → 524.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card]
|
||
y: 693.4 → 595.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
y: 725.4 → 627.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-binary lucide-icon]
|
||
y: 736.9 → 639.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
y: 725.9 → 630.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "PNG to Base64"
|
||
y: 725.9 → 630.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Encode an image as a base64 string for e"
|
||
y: 748.9 → 649.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03"
|
||
y: 710.4 → 612.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 738.4 → 640.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card]
|
||
y: 809.4 → 711.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
y: 841.4 → 743.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-link-2]
|
||
y: 852.9 → 755.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
y: 841.9 → 746.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "PNG to Data URI"
|
||
y: 841.9 → 746.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Build a complete data URI ready for HTML"
|
||
y: 864.9 → 765.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04"
|
||
y: 826.4 → 728.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 854.4 → 756.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card]
|
||
y: 925.4 → 827.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
y: 957.4 → 859.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon]
|
||
y: 968.9 → 871.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
y: 957.9 → 862.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Convert PNG to JPG"
|
||
y: 957.9 → 862.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Composite transparency over a selected b"
|
||
y: 980.9 → 881.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05"
|
||
y: 942.4 → 844.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 970.4 → 872.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group]
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
min-width: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title]
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
h: 26 → 24 (-2px)
|
||
align-items: center → baseline
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 12px → 8px
|
||
height: 26px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.32px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY"
|
||
y: 421.4 → 323.6 (-97.8px)
|
||
w: 88.4 → 106.6 (+18.2px)
|
||
h: 13 → 15 (+2px)
|
||
width: 88.4219px → 106.562px
|
||
height: 13px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 11px → 12px
|
||
font-weight: 600 → 400
|
||
letter-spacing: 1.32px → 1.68px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS"
|
||
y: 421.9 → 325.6 (-96.3px)
|
||
width: 54.5625px → 54.4062px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 1.32px → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards]
|
||
y: 447.4 → 363.6 (-83.8px)
|
||
h: 584 → 570 (-14px)
|
||
padding-top: 14px → 0px
|
||
height: 584px → 570px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card]
|
||
y: 461.4 → 363.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
y: 493.4 → 395.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-scissors]
|
||
y: 504.9 → 407.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
y: 493.9 → 389.1 (-104.8px)
|
||
h: 41 → 55 (+14px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 55px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Remove background PNG"
|
||
y: 493.9 → 389.1 (-104.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Remove a solid background by color, tole"
|
||
y: 516.9 → 408.1 (-108.8px)
|
||
h: 18 → 36 (+18px)
|
||
height: 18px → 36px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01"
|
||
y: 478.4 → 380.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 506.4 → 408.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card]
|
||
y: 577.4 → 479.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
y: 609.4 → 511.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-layers]
|
||
y: 620.9 → 523.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
y: 609.9 → 514.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Extract alpha mask"
|
||
y: 609.9 → 514.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Turn the alpha channel into a clean blac"
|
||
y: 632.9 → 533.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02"
|
||
y: 594.4 → 496.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 622.4 → 524.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card]
|
||
y: 693.4 → 595.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
y: 725.4 → 627.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-frame lucide-icon]
|
||
y: 736.9 → 639.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
y: 725.9 → 630.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Round corners PNG"
|
||
y: 725.9 → 630.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Clip the image corners by a precise radi"
|
||
y: 748.9 → 649.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03"
|
||
y: 710.4 → 612.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 738.4 → 640.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card]
|
||
y: 809.4 → 711.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
y: 841.4 → 743.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-square]
|
||
y: 852.9 → 755.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
y: 841.9 → 746.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Outline PNG"
|
||
y: 841.9 → 746.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Add a colored ring around opaque content"
|
||
y: 864.9 → 765.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04"
|
||
y: 826.4 → 728.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 854.4 → 756.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card]
|
||
y: 925.4 → 827.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
y: 957.4 → 859.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-droplet lucide-icon]
|
||
y: 968.9 → 871.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
y: 957.9 → 853.1 (-104.8px)
|
||
h: 41 → 55 (+14px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 55px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Change PNG opacity"
|
||
y: 957.9 → 853.1 (-104.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Multiply the alpha channel while keeping"
|
||
y: 980.9 → 872.1 (-108.8px)
|
||
h: 18 → 36 (+18px)
|
||
height: 18px → 36px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05"
|
||
y: 942.4 → 844.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 970.4 → 872.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group]
|
||
y: 1087.4 → 989.6 (-97.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
min-width: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title]
|
||
y: 1087.4 → 989.6 (-97.8px)
|
||
h: 26 → 24 (-2px)
|
||
align-items: center → baseline
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 12px → 8px
|
||
height: 26px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.32px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR"
|
||
y: 1087.4 → 989.6 (-97.8px)
|
||
w: 36.8 → 44.4 (+7.6px)
|
||
h: 13 → 15 (+2px)
|
||
width: 36.8438px → 44.4062px
|
||
height: 13px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 11px → 12px
|
||
font-weight: 600 → 400
|
||
letter-spacing: 1.32px → 1.68px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS"
|
||
y: 1087.9 → 991.6 (-96.3px)
|
||
width: 54.5625px → 54.4062px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 1.32px → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards]
|
||
y: 1113.4 → 1029.6 (-83.8px)
|
||
h: 584 → 570 (-14px)
|
||
padding-top: 14px → 0px
|
||
height: 584px → 570px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card]
|
||
y: 1127.4 → 1029.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
y: 1159.4 → 1061.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun]
|
||
y: 1170.9 → 1073.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
y: 1159.9 → 1055.1 (-104.8px)
|
||
h: 41 → 55 (+14px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 55px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Create gradient PNG"
|
||
y: 1159.9 → 1055.1 (-104.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Generate a smooth transition between two"
|
||
y: 1182.9 → 1074.1 (-108.8px)
|
||
h: 18 → 36 (+18px)
|
||
height: 18px → 36px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01"
|
||
y: 1144.4 → 1046.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1172.4 → 1074.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card]
|
||
y: 1243.4 → 1145.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
y: 1275.4 → 1177.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-contrast lucide-icon]
|
||
y: 1286.9 → 1189.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
y: 1275.9 → 1180.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Grayscale PNG"
|
||
y: 1275.9 → 1180.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Convert the image to luminance-based sha"
|
||
y: 1298.9 → 1199.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02"
|
||
y: 1260.4 → 1162.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1288.4 → 1190.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card]
|
||
y: 1359.4 → 1261.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
y: 1391.4 → 1293.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-blend lucide-icon]
|
||
y: 1402.9 → 1305.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
y: 1391.9 → 1296.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Invert colors PNG"
|
||
y: 1391.9 → 1296.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Invert every color channel while leaving"
|
||
y: 1414.9 → 1315.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03"
|
||
y: 1376.4 → 1278.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1404.4 → 1306.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card]
|
||
y: 1475.4 → 1377.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
y: 1507.4 → 1409.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun]
|
||
y: 1518.9 → 1421.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
y: 1507.9 → 1412.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Brightness & contrast"
|
||
y: 1507.9 → 1412.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Adjust brightness and contrast across a "
|
||
y: 1530.9 → 1431.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04"
|
||
y: 1492.4 → 1394.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1520.4 → 1422.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card]
|
||
y: 1591.4 → 1493.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
y: 1623.4 → 1525.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun]
|
||
y: 1634.9 → 1537.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
y: 1623.9 → 1528.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Temperature PNG"
|
||
y: 1623.9 → 1528.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Make an image warmer or cooler with a si"
|
||
y: 1646.9 → 1547.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05"
|
||
y: 1608.4 → 1510.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1636.4 → 1538.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group]
|
||
y: 1087.4 → 989.6 (-97.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
min-width: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title]
|
||
y: 1087.4 → 989.6 (-97.8px)
|
||
h: 26 → 24 (-2px)
|
||
align-items: center → baseline
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 12px → 8px
|
||
height: 26px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.32px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY"
|
||
y: 1087.4 → 989.6 (-97.8px)
|
||
w: 59 → 71 (+12px)
|
||
h: 13 → 15 (+2px)
|
||
width: 58.9531px → 71.0469px
|
||
height: 13px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 11px → 12px
|
||
font-weight: 600 → 400
|
||
letter-spacing: 1.32px → 1.68px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS"
|
||
y: 1087.9 → 991.6 (-96.3px)
|
||
width: 54.5625px → 54.4062px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 1.32px → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards]
|
||
y: 1113.4 → 1029.6 (-83.8px)
|
||
h: 584 → 570 (-14px)
|
||
padding-top: 14px → 0px
|
||
height: 584px → 570px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card]
|
||
y: 1127.4 → 1029.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
y: 1159.4 → 1061.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-scaling]
|
||
y: 1170.9 → 1073.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
y: 1159.9 → 1055.1 (-104.8px)
|
||
h: 41 → 55 (+14px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 55px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Resize PNG"
|
||
y: 1159.9 → 1055.1 (-104.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Scale an image with bilinear interpolati"
|
||
y: 1182.9 → 1074.1 (-108.8px)
|
||
h: 18 → 36 (+18px)
|
||
height: 18px → 36px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01"
|
||
y: 1144.4 → 1046.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1172.4 → 1074.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card]
|
||
y: 1243.4 → 1145.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
y: 1275.4 → 1177.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-crop lucide-icon]
|
||
y: 1286.9 → 1189.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
y: 1275.9 → 1180.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Crop PNG"
|
||
y: 1275.9 → 1180.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Cut a rectangular area with exact coordi"
|
||
y: 1298.9 → 1199.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02"
|
||
y: 1260.4 → 1162.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1288.4 → 1190.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card]
|
||
y: 1359.4 → 1261.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
y: 1391.4 → 1293.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-rotate-cw]
|
||
y: 1402.9 → 1305.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
y: 1391.9 → 1296.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Rotate PNG"
|
||
y: 1391.9 → 1296.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Rotate by 90, 180, or 270 degrees withou"
|
||
y: 1414.9 → 1315.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03"
|
||
y: 1376.4 → 1278.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1404.4 → 1306.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card]
|
||
y: 1475.4 → 1377.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
y: 1507.4 → 1409.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-flip-horizontal-2 lucide-icon]
|
||
y: 1518.9 → 1421.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
y: 1507.9 → 1412.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Flip PNG"
|
||
y: 1507.9 → 1412.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Mirror the image horizontally or vertica"
|
||
y: 1530.9 → 1431.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04"
|
||
y: 1492.4 → 1394.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1520.4 → 1422.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card]
|
||
y: 1591.4 → 1493.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
y: 1623.4 → 1525.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-maximize-2]
|
||
y: 1634.9 → 1537.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
y: 1623.9 → 1528.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Add padding to PNG"
|
||
y: 1623.9 → 1528.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Expand the canvas on all sides by a chos"
|
||
y: 1646.9 → 1547.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05"
|
||
y: 1608.4 → 1510.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1636.4 → 1538.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group]
|
||
y: 1753.4 → 1655.6 (-97.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
min-width: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title]
|
||
y: 1753.4 → 1655.6 (-97.8px)
|
||
h: 26 → 24 (-2px)
|
||
align-items: center → baseline
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 12px → 8px
|
||
height: 26px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.32px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS"
|
||
y: 1753.4 → 1655.6 (-97.8px)
|
||
w: 51.6 → 62.2 (+10.6px)
|
||
h: 13 → 15 (+2px)
|
||
width: 51.5781px → 62.1719px
|
||
height: 13px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 11px → 12px
|
||
font-weight: 600 → 400
|
||
letter-spacing: 1.32px → 1.68px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS"
|
||
y: 1753.9 → 1657.6 (-96.3px)
|
||
width: 54.5625px → 54.4062px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 1.32px → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards]
|
||
y: 1779.4 → 1695.6 (-83.8px)
|
||
h: 468 → 454 (-14px)
|
||
padding-top: 14px → 0px
|
||
height: 468px → 454px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card]
|
||
y: 1793.4 → 1695.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
y: 1825.4 → 1727.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-droplets lucide-icon]
|
||
y: 1836.9 → 1739.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
y: 1825.9 → 1730.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Blur PNG"
|
||
y: 1825.9 → 1730.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Apply a fast Gaussian-style blur with tr"
|
||
y: 1848.9 → 1749.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01"
|
||
y: 1810.4 → 1712.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1838.4 → 1740.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card]
|
||
y: 1909.4 → 1811.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
y: 1941.4 → 1843.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-focus lucide-icon]
|
||
y: 1952.9 → 1855.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
y: 1941.9 → 1846.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Sharpen PNG"
|
||
y: 1941.9 → 1846.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Emphasize edges with an adjustable sharp"
|
||
y: 1964.9 → 1865.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02"
|
||
y: 1926.4 → 1828.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1954.4 → 1856.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card]
|
||
y: 2025.4 → 1927.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
y: 2057.4 → 1959.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun]
|
||
y: 2068.9 → 1971.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
y: 2057.9 → 1962.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Vignette PNG"
|
||
y: 2057.9 → 1962.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Smoothly darken the image edges while pr"
|
||
y: 2080.9 → 1981.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03"
|
||
y: 2042.4 → 1944.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 2070.4 → 1972.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card]
|
||
y: 2141.4 → 2043.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
y: 2173.4 → 2075.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-layers]
|
||
y: 2184.9 → 2087.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
y: 2173.9 → 2078.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "JPEG artifacts"
|
||
y: 2173.9 → 2078.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Simulate low-quality JPEG recompression "
|
||
y: 2196.9 → 2097.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04"
|
||
y: 2158.4 → 2060.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 2186.4 → 2088.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group]
|
||
y: 1753.4 → 1655.6 (-97.8px)
|
||
display: block → flex
|
||
flex-direction: row → column
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
min-width: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title]
|
||
y: 1753.4 → 1655.6 (-97.8px)
|
||
h: 26 → 24 (-2px)
|
||
align-items: center → baseline
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
padding-bottom: 12px → 8px
|
||
height: 26px → 24px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.32px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE"
|
||
y: 1753.4 → 1655.6 (-97.8px)
|
||
w: 51.6 → 62.2 (+10.6px)
|
||
h: 13 → 15 (+2px)
|
||
width: 51.5781px → 62.1719px
|
||
height: 13px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 11px → 12px
|
||
font-weight: 600 → 400
|
||
letter-spacing: 1.32px → 1.68px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS"
|
||
y: 1753.9 → 1657.6 (-96.3px)
|
||
width: 54.5625px → 54.4062px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: 1.32px → 0.8px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards]
|
||
y: 1779.4 → 1695.6 (-83.8px)
|
||
h: 468 → 454 (-14px)
|
||
padding-top: 14px → 0px
|
||
height: 468px → 454px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card]
|
||
y: 1793.4 → 1695.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
y: 1825.4 → 1727.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-info]
|
||
y: 1836.9 → 1739.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
y: 1825.9 → 1730.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "PNG info"
|
||
y: 1825.9 → 1730.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Inspect dimensions, alpha presence, and "
|
||
y: 1848.9 → 1749.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01"
|
||
y: 1810.4 → 1712.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1838.4 → 1740.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card]
|
||
y: 1909.4 → 1811.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
y: 1941.4 → 1843.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-search-check]
|
||
y: 1952.9 → 1855.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
y: 1941.9 → 1846.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Check grayscale"
|
||
y: 1941.9 → 1846.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Report whether the image contains only s"
|
||
y: 1964.9 → 1865.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02"
|
||
y: 1926.4 → 1828.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 1954.4 → 1856.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card]
|
||
y: 2025.4 → 1927.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
y: 2057.4 → 1959.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-eye lucide-icon]
|
||
y: 2068.9 → 1971.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
y: 2057.9 → 1962.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Check transparency"
|
||
y: 2057.9 → 1962.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Detect transparent and semi-transparent "
|
||
y: 2080.9 → 1981.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03"
|
||
y: 2042.4 → 1944.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 2070.4 → 1972.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card]
|
||
y: 2141.4 → 2043.6 (-97.8px)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
y: 2173.4 → 2075.6 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-ruler]
|
||
y: 2184.9 → 2087.1 (-97.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
y: 2173.9 → 2078.1 (-95.8px)
|
||
h: 41 → 37 (-4px)
|
||
display: grid → flex
|
||
flex-direction: row → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
grid-template-columns: 488.406px → none
|
||
grid-template-rows: 15px 18px → none
|
||
height: 41px → 37px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "PNG orientation"
|
||
y: 2173.9 → 2078.1 (-95.8px)
|
||
h: 15 → 17 (+2px)
|
||
height: 15px → 17px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Classify the image as portrait, landscap"
|
||
y: 2196.9 → 2097.1 (-99.8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04"
|
||
y: 2158.4 → 2060.6 (-97.8px)
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
y: 2186.4 → 2088.6 (-97.8px)
|
||
opacity: 0 → 1
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
|
||
y: 2311.4 → 2205.6 (-105.8px)
|
||
h: 33 → 38 (+5px)
|
||
display: block → flex
|
||
flex-wrap: nowrap → wrap
|
||
row-gap: normal → 24px
|
||
column-gap: normal → 24px
|
||
margin-top: 64px → 56px
|
||
padding-top: 20px → 24px
|
||
height: 33px → 38px
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > div > footer > span "•"
|
||
x: 214 → 258.4 (+44.4px)
|
||
y: 2332.4 → 2230.6 (-101.8px)
|
||
w: 11 → 6.8 (-4.2px)
|
||
display: inline → block
|
||
margin-right: 8px → 0px
|
||
margin-left: 8px → 0px
|
||
width: auto → 6.8125px
|
||
height: auto → 13px
|
||
min-width: 0px → auto
|
||
min-height: 0px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 105, 210) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body >main >footer [preview-footer]
|
||
+ present in project, absent in reference
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|
||
|
||
|
||
=== /preview/tools/linear-gradient-png (vs gradient.html) — 104 differences ===
|
||
|
||
body
|
||
h: 1373 → 900 (-473px)
|
||
height: 1372.95px → 900px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main [preview-root]
|
||
h: 1373 → 900 (-473px)
|
||
height: 1372.95px → 900px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header [topbar]
|
||
position: static → sticky
|
||
top: auto → 0px
|
||
z-index: auto → 20
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a [brand]
|
||
w: 224.8 → 239.6 (+14.8px)
|
||
width: 224.766px → 239.609px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255)
|
||
|
||
body > main > header > a > span:nth-of-type(2) "easy-png-tools"
|
||
w: 107.8 → 117.6 (+9.8px)
|
||
width: 107.766px → 117.609px
|
||
height: 17px → 18px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT"
|
||
x: 215.4 → 225.2 (+9.8px)
|
||
w: 67 → 72 (+5px)
|
||
width: 67px → 72px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
|
||
body > main > header > div [top-actions]
|
||
x: 1123.4 → 1111.4 (-12px)
|
||
w: 259 → 271 (+12px)
|
||
width: 259.031px → 271.016px
|
||
height: 29px → 28px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > div > span [status] "LIVE PREVIEW"
|
||
x: 1123.4 → 1111.4 (-12px)
|
||
w: 88.6 → 96.6 (+8px)
|
||
width: 88.5781px → 96.6094px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
x: 1123.4 → 1111.4 (-12px)
|
||
w: 6 → 8 (+2px)
|
||
h: 6 → 8 (+2px)
|
||
width: 6px → 8px
|
||
height: 6px → 8px
|
||
box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
x: 1228 → 1224 (-4px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
x: 1234 → 1230 (-4px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
x: 1273 → 1268 (-5px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
x: 1279 → 1274 (-5px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > div [lang]
|
||
x: 1318 → 1312 (-6px)
|
||
w: 64.5 → 70.4 (+5.9px)
|
||
align-items: center → normal
|
||
width: 64.4531px → 70.4062px
|
||
height: 26px → 27px
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
x: 1348 → 1344.2 (-3.8px)
|
||
y: 19.5 → 25 (+5.5px)
|
||
w: 4.5 → 6 (+1.5px)
|
||
h: 24 → 13 (-11px)
|
||
align-self: auto → center
|
||
width: 4.45312px → 6px
|
||
height: 24px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 33, 43) → rgb(109, 120, 131)
|
||
font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace
|
||
font-size: 16px → 10px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
x: 1352.4 → 1350.2 (-2.2px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
x: 1319 → 1313 (-6px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > nav [nav]
|
||
x: 798.4 → 528 (-270.4px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 296.9 → 376.6 (+79.7px)
|
||
h: 12 → 15 (+3px)
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → 0px
|
||
margin-left: 516.078px → 24px
|
||
width: 296.938px → 376.594px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
x: 798.4 → 528 (-270.4px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 49.5 → 69.1 (+19.6px)
|
||
h: 12 → 15 (+3px)
|
||
width: 49.4844px → 69.125px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
x: 869.9 → 615.1 (-254.8px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 38.5 → 53.8 (+15.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 38.5px → 53.7656px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
x: 930.4 → 686.9 (-243.5px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 44 → 61.5 (+17.5px)
|
||
h: 12 → 15 (+3px)
|
||
width: 43.9844px → 61.4531px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 105, 210) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
x: 996.4 → 766.3 (-230.1px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 99 → 138.3 (+39.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 98.9688px → 138.25px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div [tool-page]
|
||
h: 1264 → 657.9 (-606.1px)
|
||
padding-top: 60px → 0px
|
||
padding-right: 57.6px → 0px
|
||
padding-bottom: 72px → 0px
|
||
padding-left: 57.6px → 0px
|
||
height: 1263.95px → 657.875px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 124 → 64 (-60px)
|
||
w: 1324.8 → 1440 (+115.2px)
|
||
h: 12 → 24 (+12px)
|
||
margin-bottom: 18px → 0px
|
||
width: 1324.81px → 1440px
|
||
height: 12px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(1) > span "/"
|
||
x: 165.1 → 137.3 (-27.8px)
|
||
y: 124 → 66 (-58px)
|
||
w: 13.4 → 6.1 (-7.3px)
|
||
h: 12 → 20 (+8px)
|
||
margin-right: 7px → 0px
|
||
margin-left: 7px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(2) [tool-title]
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 154 → 109.4 (-44.6px)
|
||
w: 1324.8 → 1440 (+115.2px)
|
||
h: 122.8 → 133.4 (+10.6px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: end → normal
|
||
row-gap: 32px → normal
|
||
column-gap: 32px → normal
|
||
margin-bottom: 48px → 0px
|
||
width: 1324.81px → 1440px
|
||
height: 122.781px → 133.438px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(2) > div
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 154 → 109.4 (-44.6px)
|
||
w: 550 → 1440 (+890px)
|
||
h: 122.8 → 93.4 (-29.4px)
|
||
width: 550px → 1440px
|
||
height: 122.781px → 93.4375px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(2) > div > h1 "Gradient background."
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 154 → 109.4 (-44.6px)
|
||
w: 550 → 1440 (+890px)
|
||
h: 57.6 → 48 (-9.6px)
|
||
margin-top: 0px → 21.44px
|
||
margin-bottom: 14px → 21.44px
|
||
width: 550px → 1440px
|
||
height: 57.5938px → 48px
|
||
max-width: 700px → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 57.6px → 32px
|
||
font-weight: 650 → 700
|
||
line-height: 57.6px → 48px
|
||
letter-spacing: -3.456px → normal
|
||
|
||
body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi"
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 225.6 → 178.9 (-46.7px)
|
||
w: 550 → 1440 (+890px)
|
||
h: 51.2 → 24 (-27.2px)
|
||
margin-top: 0px → 16px
|
||
margin-bottom: 0px → 16px
|
||
width: 550px → 1440px
|
||
height: 51.1875px → 24px
|
||
max-width: 550px → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
line-height: 25.6px → 24px
|
||
|
||
body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW"
|
||
x: 1302.4 → 0 (-1302.4px)
|
||
y: 264.8 → 220.9 (-43.9px)
|
||
w: 80 → 106.1 (+26.1px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
width: 79.9844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(37, 169, 106) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > div:nth-of-type(2) > span > i
|
||
x: 1302.4 → 0 (-1302.4px)
|
||
y: 267.8 → 220.9 (-46.9px)
|
||
w: 6 → 0 (-6px)
|
||
h: 6 → 20 (+14px)
|
||
display: block → inline
|
||
width: 6px → auto
|
||
height: 6px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 50% → 0px
|
||
background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0)
|
||
color: rgb(37, 169, 106) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > div:nth-of-type(3) [gradient-layout]
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 324.8 → 242.9 (-81.9px)
|
||
w: 1324.8 → 1440 (+115.2px)
|
||
h: 931.2 → 479 (-452.2px)
|
||
display: grid → block
|
||
align-items: start → normal
|
||
row-gap: 56px → normal
|
||
column-gap: 56px → normal
|
||
grid-template-columns: 444.078px 824.734px → none
|
||
grid-template-rows: 931.172px → none
|
||
width: 1324.81px → 1440px
|
||
height: 931.172px → 479px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [settings-panel]
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 324.8 → 242.9 (-81.9px)
|
||
w: 444.1 → 1440 (+995.9px)
|
||
h: 635 → 293 (-342px)
|
||
width: 444.078px → 1440px
|
||
height: 635px → 293px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 325.8 → 242.9 (-82.9px)
|
||
w: 442.1 → 1440 (+997.9px)
|
||
h: 83 → 48 (-35px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
padding-top: 18px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 442.078px → 1440px
|
||
height: 83px → 48px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 343.8 → 242.9 (-100.9px)
|
||
w: 123.2 → 1440 (+1316.8px)
|
||
h: 46 → 24 (-22px)
|
||
width: 123.156px → 1440px
|
||
height: 46px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 351.8 → 244.9 (-106.9px)
|
||
w: 113.9 → 157.6 (+43.7px)
|
||
h: 12 → 20 (+8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output"
|
||
x: 78.6 → 161.4 (+82.8px)
|
||
y: 372.8 → 244.9 (-127.9px)
|
||
w: 123.2 → 126.9 (+3.7px)
|
||
h: 17 → 20 (+3px)
|
||
display: block → inline
|
||
margin-top: 5px → 0px
|
||
width: 123.156px → auto
|
||
height: 17px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01"
|
||
x: 433.8 → 0 (-433.8px)
|
||
y: 360.8 → 268.9 (-91.9px)
|
||
w: 46.9 → 62.5 (+15.6px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 46.8906px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 408.8 → 290.9 (-117.9px)
|
||
w: 442.1 → 1440 (+997.9px)
|
||
h: 101 → 49 (-52px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 442.078px → 1440px
|
||
height: 101px → 49px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 430.8 → 292.9 (-137.9px)
|
||
w: 402.1 → 120.1 (-282px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 402.078px → auto
|
||
height: 12px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 454.8 → 314.9 (-139.9px)
|
||
w: 402.1 → 1440 (+1037.9px)
|
||
h: 32 → 25 (-7px)
|
||
display: flex → block
|
||
width: 402.078px → 1440px
|
||
height: 32px → 25px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear"
|
||
x: 79.6 → 0 (-79.6px)
|
||
y: 455.8 → 315.9 (-139.9px)
|
||
w: 200 → 52.9 (-147.1px)
|
||
h: 30 → 24 (-6px)
|
||
display: block → inline-block
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 200.031px → 52.9219px
|
||
height: 30px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
background-color: rgb(23, 105, 210) → rgb(240, 240, 240)
|
||
color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial"
|
||
x: 279.6 → 52.9 (-226.7px)
|
||
y: 455.8 → 315.9 (-139.9px)
|
||
w: 200 → 53.3 (-146.7px)
|
||
h: 30 → 24 (-6px)
|
||
display: block → inline-block
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 200.047px → 53.3281px
|
||
height: 30px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 509.8 → 339.9 (-169.9px)
|
||
w: 442.1 → 1440 (+997.9px)
|
||
h: 129 → 98 (-31px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 442.078px → 1440px
|
||
height: 129px → 98px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 531.8 → 341.9 (-189.9px)
|
||
w: 402.1 → 102.2 (-299.9px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 402.078px → auto
|
||
height: 12px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 555.8 → 363.9 (-191.9px)
|
||
w: 402.1 → 1440 (+1037.9px)
|
||
h: 32 → 74 (+42px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 10px → normal
|
||
column-gap: 10px → normal
|
||
width: 402.078px → 1440px
|
||
height: 32px → 74px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 555.8 → 363.9 (-191.9px)
|
||
w: 183 → 1440 (+1257px)
|
||
h: 32 → 25 (-7px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
padding-right: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 183.031px → 1440px
|
||
height: 32px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch]
|
||
x: 87.6 → 0 (-87.6px)
|
||
y: 564.8 → 365.9 (-198.9px)
|
||
w: 14 → 0 (-14px)
|
||
h: 14 → 20 (+6px)
|
||
display: block → inline
|
||
width: 14px → auto
|
||
height: 14px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input
|
||
x: 109.6 → 0 (-109.6px)
|
||
y: 565.3 → 364.9 (-200.4px)
|
||
w: 143 → 157 (+14px)
|
||
h: 13 → 24 (+11px)
|
||
display: block → inline-block
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 2px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 2px
|
||
width: 143.031px → 157px
|
||
height: 13px → 24px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → inset
|
||
border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→"
|
||
x: 271.6 → 0 (-271.6px)
|
||
y: 559.8 → 390.9 (-168.9px)
|
||
h: 24 → 20 (-4px)
|
||
display: block → inline
|
||
width: 16px → auto
|
||
height: 24px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field]
|
||
x: 297.6 → 0 (-297.6px)
|
||
y: 555.8 → 412.9 (-142.9px)
|
||
w: 183 → 1440 (+1257px)
|
||
h: 32 → 25 (-7px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
padding-right: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 183.047px → 1440px
|
||
height: 32px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch]
|
||
x: 306.6 → 0 (-306.6px)
|
||
y: 564.8 → 414.9 (-149.9px)
|
||
w: 14 → 0 (-14px)
|
||
h: 14 → 20 (+6px)
|
||
display: block → inline
|
||
width: 14px → auto
|
||
height: 14px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input
|
||
x: 328.6 → 0 (-328.6px)
|
||
y: 565.3 → 413.9 (-151.4px)
|
||
w: 143 → 157 (+14px)
|
||
h: 13 → 24 (+11px)
|
||
display: block → inline-block
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 2px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 2px
|
||
width: 143.047px → 157px
|
||
height: 13px → 24px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → inset
|
||
border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 601.8 → 437.9 (-163.9px)
|
||
w: 402.1 → 1440 (+1037.9px)
|
||
h: 14 → 0 (-14px)
|
||
margin-top: 14px → 0px
|
||
width: 402.078px → 1440px
|
||
height: 14px → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 638.8 → 437.9 (-200.9px)
|
||
w: 442.1 → 1440 (+997.9px)
|
||
h: 177 → 49 (-128px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 442.078px → 1440px
|
||
height: 177px → 49px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 660.8 → 439.9 (-220.9px)
|
||
w: 402.1 → 128.6 (-273.5px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 402.078px → auto
|
||
height: 12px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °"
|
||
x: 448.2 → 88.5 (-359.7px)
|
||
y: 660.8 → 439.9 (-220.9px)
|
||
w: 32.5 → 40.1 (+7.6px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 32.5px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input
|
||
x: 78.6 → 134.4 (+55.8px)
|
||
y: 685.8 → 439.9 (-245.9px)
|
||
margin-top: 0px → 2px
|
||
margin-right: 0px → 2px
|
||
margin-bottom: 0px → 2px
|
||
margin-left: 0px → 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(16, 16, 16)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 722.8 → 461.9 (-260.9px)
|
||
w: 402.1 → 1440 (+1037.9px)
|
||
h: 70 → 25 (-45px)
|
||
display: grid → block
|
||
row-gap: 6px → normal
|
||
column-gap: 6px → normal
|
||
grid-template-columns: 96.0156px 96.0156px 96.0156px 96.0312px → none
|
||
grid-template-rows: 32px 32px → none
|
||
margin-top: 14px → 0px
|
||
width: 402.078px → 1440px
|
||
height: 70px → 25px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 722.8 → 462.9 (-259.9px)
|
||
w: 96 → 46.7 (-49.3px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0156px → 46.7188px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗"
|
||
x: 180.6 → 46.7 (-133.9px)
|
||
y: 722.8 → 462.9 (-259.9px)
|
||
w: 96 → 51.1 (-44.9px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0156px → 51.1406px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑"
|
||
x: 282.6 → 97.9 (-184.7px)
|
||
y: 722.8 → 462.9 (-259.9px)
|
||
w: 96 → 52.3 (-43.7px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0156px → 52.3125px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖"
|
||
x: 384.6 → 150.2 (-234.4px)
|
||
y: 722.8 → 462.9 (-259.9px)
|
||
w: 96 → 59.2 (-36.8px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0312px → 59.1562px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgb(23, 33, 43) → rgb(240, 240, 240)
|
||
color: rgb(238, 241, 244) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←"
|
||
x: 78.6 → 209.3 (+130.7px)
|
||
y: 760.8 → 462.9 (-297.9px)
|
||
w: 96 → 62.7 (-33.3px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0156px → 62.7188px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙"
|
||
x: 180.6 → 272 (+91.4px)
|
||
y: 760.8 → 462.9 (-297.9px)
|
||
w: 96 → 59.2 (-36.8px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0156px → 59.1562px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓"
|
||
x: 282.6 → 331.2 (+48.6px)
|
||
y: 760.8 → 462.9 (-297.9px)
|
||
w: 96 → 60.3 (-35.7px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0156px → 60.3125px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘"
|
||
x: 384.6 → 391.5 (+6.9px)
|
||
y: 760.8 → 462.9 (-297.9px)
|
||
w: 96 → 59.2 (-36.8px)
|
||
h: 32 → 24 (-8px)
|
||
display: block → inline-block
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 96.0312px → 59.1562px
|
||
height: 32px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 815.8 → 486.9 (-328.9px)
|
||
w: 442.1 → 1440 (+997.9px)
|
||
h: 93 → 24 (-69px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 442.078px → 1440px
|
||
height: 93px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 837.8 → 488.9 (-348.9px)
|
||
w: 402.1 → 116.5 (-285.6px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 402.078px → auto
|
||
height: 12px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %"
|
||
x: 448.2 → 69 (-379.2px)
|
||
y: 837.8 → 488.9 (-348.9px)
|
||
w: 32.5 → 47.4 (+14.9px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 32.5px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input
|
||
x: 78.6 → 122.3 (+43.7px)
|
||
y: 862.8 → 488.9 (-373.9px)
|
||
margin-top: 0px → 2px
|
||
margin-right: 0px → 2px
|
||
margin-bottom: 0px → 2px
|
||
margin-left: 0px → 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(16, 16, 16)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 908.8 → 510.9 (-397.9px)
|
||
w: 442.1 → 1440 (+997.9px)
|
||
h: 50 → 25 (-25px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
padding-top: 16px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 442.078px → 1440px
|
||
height: 50px → 25px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 924.8 → 511.9 (-412.9px)
|
||
w: 52.4 → 67.3 (+14.9px)
|
||
h: 18 → 24 (+6px)
|
||
display: flex → inline-block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 52.3594px → 67.2969px
|
||
height: 18px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(23, 105, 210) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 105, 210) → rgb(0, 0, 0)
|
||
font-size: 12px → 13.3333px
|
||
line-height: 18px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw]
|
||
x: 78.6 → 8 (-70.6px)
|
||
y: 926.8 → 514.9 (-411.9px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(23, 105, 210) → rgb(0, 0, 0)
|
||
font-size: 12px → 13.3333px
|
||
line-height: 18px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically"
|
||
x: 339.7 → 71.1 (-268.6px)
|
||
y: 927.3 → 512.9 (-414.4px)
|
||
w: 141 → 159.4 (+18.4px)
|
||
h: 13 → 20 (+7px)
|
||
display: flex → inline
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
width: 141.016px → auto
|
||
height: 13px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i
|
||
x: 339.7 → 71.1 (-268.6px)
|
||
y: 930.8 → 512.9 (-417.9px)
|
||
w: 6 → 0 (-6px)
|
||
h: 6 → 20 (+14px)
|
||
display: block → inline
|
||
width: 6px → auto
|
||
height: 6px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 50% → 0px
|
||
background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [gradient-preview]
|
||
x: 557.7 → 0 (-557.7px)
|
||
y: 324.8 → 535.9 (+211.1px)
|
||
w: 824.7 → 1440 (+615.3px)
|
||
h: 931.2 → 186 (-745.2px)
|
||
width: 824.734px → 1440px
|
||
height: 931.172px → 186px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar]
|
||
x: 558.7 → 0 (-558.7px)
|
||
y: 325.8 → 535.9 (+210.1px)
|
||
w: 822.7 → 1440 (+617.3px)
|
||
h: 140 → 49 (-91px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
padding-top: 18px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 822.734px → 1440px
|
||
height: 140px → 49px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)
|
||
x: 578.7 → 0 (-578.7px)
|
||
y: 372.3 → 535.9 (+163.6px)
|
||
w: 93.8 → 1440 (+1346.2px)
|
||
h: 46 → 24 (-22px)
|
||
width: 93.7812px → 1440px
|
||
height: 46px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW"
|
||
x: 578.7 → 0 (-578.7px)
|
||
y: 380.3 → 537.9 (+157.6px)
|
||
w: 93.8 → 133.6 (+39.8px)
|
||
h: 12 → 20 (+8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png"
|
||
x: 578.7 → 137.4 (-441.3px)
|
||
y: 401.3 → 537.9 (+136.6px)
|
||
w: 93.8 → 96.2 (+2.4px)
|
||
h: 17 → 20 (+3px)
|
||
display: block → inline
|
||
margin-top: 5px → 0px
|
||
width: 93.7812px → auto
|
||
height: 17px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions]
|
||
x: 1150.8 → 0 (-1150.8px)
|
||
y: 343.8 → 559.9 (+216.1px)
|
||
w: 210.6 → 1440 (+1229.4px)
|
||
h: 103 → 25 (-78px)
|
||
display: flex → block
|
||
flex-wrap: wrap → nowrap
|
||
justify-content: flex-end → normal
|
||
align-items: center → normal
|
||
row-gap: 10px → normal
|
||
column-gap: 10px → normal
|
||
width: 210.562px → 1440px
|
||
height: 103px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS"
|
||
x: 1280.4 → 0 (-1280.4px)
|
||
y: 343.8 → 559.9 (+216.1px)
|
||
w: 81 → 91 (+10px)
|
||
h: 33 → 25 (-8px)
|
||
display: flex → inline-block
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
padding-top: 8px → 1px
|
||
padding-bottom: 8px → 1px
|
||
width: 80.9844px → 91px
|
||
height: 33px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 2px
|
||
border-top-style: solid → outset
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
|
||
x: 1287.4 → 8 (-1279.4px)
|
||
y: 352.8 → 562.9 (+210.1px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 13.3333px
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG"
|
||
x: 1150.8 → 94.8 (-1056px)
|
||
y: 404.8 → 559.9 (+155.1px)
|
||
w: 210.6 → 141.3 (-69.3px)
|
||
h: 42 → 25 (-17px)
|
||
display: flex → inline-block
|
||
justify-content: center → normal
|
||
align-items: center → normal
|
||
row-gap: 9px → normal
|
||
column-gap: 9px → normal
|
||
margin-top: 18px → 0px
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 210.562px → 141.297px
|
||
height: 42px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
background-color: rgb(23, 105, 210) → rgb(240, 240, 240)
|
||
color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon]
|
||
x: 1196.3 → 102.8 (-1093.5px)
|
||
y: 418.3 → 562.9 (+144.6px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
white-space: nowrap → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon]
|
||
x: 1301.9 → 214.1 (-1087.8px)
|
||
y: 418.8 → 563.9 (+145.1px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
white-space: nowrap → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas]
|
||
x: 558.7 → 0 (-558.7px)
|
||
y: 465.8 → 584.9 (+119.1px)
|
||
w: 822.7 → 1440 (+617.3px)
|
||
h: 652.8 → 48 (-604.8px)
|
||
padding-top: 24px → 0px
|
||
padding-right: 24px → 0px
|
||
padding-bottom: 24px → 0px
|
||
padding-left: 24px → 0px
|
||
width: 822.734px → 1440px
|
||
height: 652.797px → 48px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(32, 42, 49) → rgba(0, 0, 0, 0)
|
||
background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → none
|
||
background-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px → auto
|
||
background-position: 0px 0px, 0px 14px, 14px -14px, -14px 0px → 0% 0%
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art]
|
||
x: 582.7 → 0 (-582.7px)
|
||
y: 489.8 → 584.9 (+95.1px)
|
||
w: 774.7 → 1440 (+665.3px)
|
||
h: 604.8 → 48 (-556.8px)
|
||
display: grid → block
|
||
justify-content: center → normal
|
||
grid-template-columns: 92.375px → none
|
||
grid-template-rows: 82px 14px → none
|
||
width: 774.734px → 1440px
|
||
height: 604.797px → 48px
|
||
min-height: 604.8px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(255, 255, 255) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 12px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG"
|
||
x: 935 → 0 (-935px)
|
||
y: 744.2 → 584.9 (-159.3px)
|
||
w: 70 → 1440 (+1370px)
|
||
h: 70 → 24 (-46px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 68px → none
|
||
grid-template-rows: 68px → none
|
||
margin-bottom: 12px → 0px
|
||
width: 70px → 1440px
|
||
height: 70px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgba(255, 255, 255, 0.65) → rgb(23, 33, 43)
|
||
color: rgb(255, 255, 255) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools"
|
||
x: 923.8 → 0 (-923.8px)
|
||
y: 826.2 → 610.9 (-215.3px)
|
||
w: 92.4 → 107.9 (+15.5px)
|
||
h: 14 → 20 (+6px)
|
||
display: block → inline
|
||
width: 92.375px → auto
|
||
height: 14px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(255, 255, 255) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 12px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block]
|
||
x: 558.7 → 0 (-558.7px)
|
||
y: 1118.6 → 632.9 (-485.7px)
|
||
w: 822.7 → 1440 (+617.3px)
|
||
h: 136.4 → 89 (-47.4px)
|
||
padding-top: 16px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 822.734px → 1440px
|
||
height: 136.375px → 89px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div
|
||
x: 578.7 → 0 (-578.7px)
|
||
y: 1134.6 → 632.9 (-501.7px)
|
||
w: 782.7 → 1440 (+657.3px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
width: 782.734px → 1440px
|
||
height: 26px → 25px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS"
|
||
x: 578.7 → 0 (-578.7px)
|
||
y: 1141.6 → 634.9 (-506.7px)
|
||
w: 87.1 → 121.9 (+34.8px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 87.0781px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn]
|
||
x: 1335.4 → 125.7 (-1209.7px)
|
||
y: 1134.6 → 633.9 (-500.7px)
|
||
w: 26 → 30 (+4px)
|
||
h: 26 → 24 (-2px)
|
||
display: grid → inline-block
|
||
align-items: center → normal
|
||
grid-template-columns: 14px → none
|
||
grid-template-rows: 14px → none
|
||
padding-top: 6px → 1px
|
||
padding-bottom: 6px → 1px
|
||
width: 26px → 30px
|
||
height: 26px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon]
|
||
x: 1341.4 → 133.7 (-1207.7px)
|
||
y: 1140.6 → 636.9 (-503.7px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(109, 120, 131) → rgb(0, 0, 0)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176"
|
||
x: 578.7 → 0 (-578.7px)
|
||
y: 1172.6 → 673.9 (-498.7px)
|
||
w: 782.7 → 1440 (+657.3px)
|
||
h: 66.4 → 48 (-18.4px)
|
||
margin-top: 12px → 16px
|
||
margin-bottom: 0px → 16px
|
||
padding-top: 14px → 0px
|
||
padding-right: 14px → 0px
|
||
padding-bottom: 14px → 0px
|
||
padding-left: 14px → 0px
|
||
width: 782.734px → 1440px
|
||
height: 66.375px → 48px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(238, 241, 244) → rgba(0, 0, 0, 0)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → monospace
|
||
font-size: 12px → 16px
|
||
line-height: 19.2px → 24px
|
||
white-space: pre-wrap → pre
|
||
|
||
body > main > footer [preview-footer]
|
||
y: 1328 → 737.9 (-590.1px)
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
height: 45px → 46px
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(1) "easy-png-tools"
|
||
y: 1345 → 754.9 (-590.1px)
|
||
w: 117 → 142.8 (+25.8px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
width: 116.984px → 142.812px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0"
|
||
x: 141.6 → 159.6 (+18px)
|
||
y: 1345 → 754.9 (-590.1px)
|
||
w: 33 → 40.8 (+7.8px)
|
||
display: block → inline
|
||
width: 33px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-weight: 400 → 700
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(2) "© 2024"
|
||
x: 690.5 → 1341.6 (+651.1px)
|
||
y: 1345 → 754.9 (-590.1px)
|
||
w: 143 → 40.8 (-102.2px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
width: 142.953px → 40.8125px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body >main >footer >span:nth-of-type(3) "© 2024"
|
||
✗ present in reference, absent in project
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|
||
|
||
|
||
=== /preview/tools/remove-background-png (vs background-remover.html) — 111 differences ===
|
||
|
||
body
|
||
h: 1103.8 → 900 (-203.8px)
|
||
height: 1103.78px → 900px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main [preview-root]
|
||
h: 1103.8 → 900 (-203.8px)
|
||
height: 1103.78px → 900px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header [topbar]
|
||
position: static → sticky
|
||
top: auto → 0px
|
||
z-index: auto → 20
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a [brand]
|
||
w: 291.8 → 311.6 (+19.8px)
|
||
width: 291.75px → 311.609px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255)
|
||
|
||
body > main > header > a > span:nth-of-type(2) "easy-png-tools"
|
||
w: 107.8 → 117.6 (+9.8px)
|
||
width: 107.766px → 117.609px
|
||
height: 17px → 18px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER"
|
||
x: 215.4 → 225.2 (+9.8px)
|
||
w: 134 → 144 (+10px)
|
||
width: 133.984px → 144px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
|
||
body > main > header > div [top-actions]
|
||
x: 1104.5 → 1091 (-13.5px)
|
||
w: 277.9 → 291.4 (+13.5px)
|
||
width: 277.938px → 291.406px
|
||
height: 29px → 28px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > div > span [status] "AUTO PROCESSING"
|
||
x: 1104.5 → 1091 (-13.5px)
|
||
w: 107.5 → 117 (+9.5px)
|
||
width: 107.484px → 117px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
x: 1104.5 → 1091 (-13.5px)
|
||
w: 6 → 8 (+2px)
|
||
h: 6 → 8 (+2px)
|
||
width: 6px → 8px
|
||
height: 6px → 8px
|
||
box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
x: 1228 → 1224 (-4px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
x: 1234 → 1230 (-4px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
x: 1273 → 1268 (-5px)
|
||
display: grid → flex
|
||
justify-content: normal → center
|
||
grid-template-columns: 17px → none
|
||
grid-template-rows: 17px → none
|
||
width: 29px → 28px
|
||
height: 29px → 28px
|
||
background-position: 0px 0px → 0% 0%
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
x: 1279 → 1274 (-5px)
|
||
width: 17px → 16px
|
||
height: 17px → 16px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > header > div > div [lang]
|
||
x: 1318 → 1312 (-6px)
|
||
w: 64.5 → 70.4 (+5.9px)
|
||
align-items: center → normal
|
||
width: 64.4531px → 70.4062px
|
||
height: 26px → 27px
|
||
overflow: visible → hidden
|
||
border-radius: 0px → 4px
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
x: 1348 → 1344.2 (-3.8px)
|
||
y: 19.5 → 25 (+5.5px)
|
||
w: 4.5 → 6 (+1.5px)
|
||
h: 24 → 13 (-11px)
|
||
align-self: auto → center
|
||
width: 4.45312px → 6px
|
||
height: 24px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 33, 43) → rgb(109, 120, 131)
|
||
font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace
|
||
font-size: 16px → 10px
|
||
line-height: 24px → normal
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
x: 1352.4 → 1350.2 (-2.2px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
background-position: 0px 0px → 0% 0%
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
x: 1319 → 1313 (-6px)
|
||
w: 29 → 31.2 (+2.2px)
|
||
width: 29px → 31.2031px
|
||
height: 24px → 25px
|
||
letter-spacing: normal → 0.6px
|
||
|
||
body > main > header > nav [nav]
|
||
x: 779.5 → 553.8 (-225.7px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 296.9 → 376.6 (+79.7px)
|
||
h: 12 → 15 (+3px)
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → 0px
|
||
margin-left: 430.188px → 24px
|
||
width: 296.938px → 376.594px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
x: 779.5 → 553.8 (-225.7px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 49.5 → 69.1 (+19.6px)
|
||
h: 12 → 15 (+3px)
|
||
width: 49.4844px → 69.125px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
x: 851 → 640.9 (-210.1px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 38.5 → 53.8 (+15.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 38.5px → 53.7656px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
x: 911.5 → 712.7 (-198.8px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 44 → 61.5 (+17.5px)
|
||
h: 12 → 15 (+3px)
|
||
width: 43.9844px → 61.4531px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
x: 977.5 → 792.2 (-185.3px)
|
||
y: 25.5 → 24 (-1.5px)
|
||
w: 99 → 138.3 (+39.3px)
|
||
h: 12 → 15 (+3px)
|
||
width: 98.9688px → 138.25px
|
||
height: 12px → 15px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
color: rgb(23, 105, 210) → rgb(109, 120, 131)
|
||
font-size: 10px → 12px
|
||
letter-spacing: normal → 0.48px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div [tool-page]
|
||
h: 994.8 → 752.9 (-241.9px)
|
||
padding-top: 60px → 0px
|
||
padding-right: 57.6px → 0px
|
||
padding-bottom: 72px → 0px
|
||
padding-left: 57.6px → 0px
|
||
height: 994.781px → 752.875px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 124 → 64 (-60px)
|
||
w: 1324.8 → 1440 (+115.2px)
|
||
h: 12 → 24 (+12px)
|
||
margin-bottom: 18px → 0px
|
||
width: 1324.81px → 1440px
|
||
height: 12px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(1) > span "/"
|
||
x: 165.1 → 137.3 (-27.8px)
|
||
y: 124 → 66 (-58px)
|
||
w: 13.4 → 6.1 (-7.3px)
|
||
h: 12 → 20 (+8px)
|
||
margin-right: 7px → 0px
|
||
margin-left: 7px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(2) [tool-title]
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 154 → 109.4 (-44.6px)
|
||
w: 1324.8 → 1440 (+115.2px)
|
||
h: 122.8 → 133.4 (+10.6px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: end → normal
|
||
row-gap: 32px → normal
|
||
column-gap: 32px → normal
|
||
margin-bottom: 48px → 0px
|
||
width: 1324.81px → 1440px
|
||
height: 122.781px → 133.438px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(2) > div
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 154 → 109.4 (-44.6px)
|
||
w: 550 → 1440 (+890px)
|
||
h: 122.8 → 93.4 (-29.4px)
|
||
width: 550px → 1440px
|
||
height: 122.781px → 93.4375px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(2) > div > h1 "Remove background."
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 154 → 109.4 (-44.6px)
|
||
w: 550 → 1440 (+890px)
|
||
h: 57.6 → 48 (-9.6px)
|
||
margin-top: 0px → 21.44px
|
||
margin-bottom: 14px → 21.44px
|
||
width: 550px → 1440px
|
||
height: 57.5938px → 48px
|
||
max-width: 700px → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-size: 57.6px → 32px
|
||
font-weight: 650 → 700
|
||
line-height: 57.6px → 48px
|
||
letter-spacing: -3.456px → normal
|
||
|
||
body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e"
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 225.6 → 178.9 (-46.7px)
|
||
w: 550 → 1440 (+890px)
|
||
h: 51.2 → 24 (-27.2px)
|
||
margin-top: 0px → 16px
|
||
margin-bottom: 0px → 16px
|
||
width: 550px → 1440px
|
||
height: 51.1875px → 24px
|
||
max-width: 550px → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
line-height: 25.6px → 24px
|
||
|
||
body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW"
|
||
x: 1302.4 → 0 (-1302.4px)
|
||
y: 264.8 → 220.9 (-43.9px)
|
||
w: 80 → 106.1 (+26.1px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
width: 79.9844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(37, 169, 106) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > div:nth-of-type(2) > span > i
|
||
x: 1302.4 → 0 (-1302.4px)
|
||
y: 267.8 → 220.9 (-46.9px)
|
||
w: 6 → 0 (-6px)
|
||
h: 6 → 20 (+14px)
|
||
display: block → inline
|
||
width: 6px → auto
|
||
height: 6px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 50% → 0px
|
||
background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0)
|
||
color: rgb(37, 169, 106) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > div:nth-of-type(3) [remover-layout]
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 324.8 → 242.9 (-81.9px)
|
||
w: 1324.8 → 1440 (+115.2px)
|
||
h: 662 → 574 (-88px)
|
||
display: grid → block
|
||
align-items: start → normal
|
||
row-gap: 56px → normal
|
||
column-gap: 56px → normal
|
||
grid-template-columns: 393.328px 875.484px → none
|
||
grid-template-rows: 662px → none
|
||
width: 1324.81px → 1440px
|
||
height: 662px → 574px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [settings-panel]
|
||
x: 57.6 → 0 (-57.6px)
|
||
y: 324.8 → 242.9 (-81.9px)
|
||
w: 393.3 → 1440 (+1046.7px)
|
||
h: 559 → 357 (-202px)
|
||
width: 393.328px → 1440px
|
||
height: 559px → 357px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 325.8 → 242.9 (-82.9px)
|
||
w: 391.3 → 1440 (+1048.7px)
|
||
h: 83 → 48 (-35px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
padding-top: 18px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 391.328px → 1440px
|
||
height: 83px → 48px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 343.8 → 242.9 (-100.9px)
|
||
w: 146.3 → 1440 (+1293.7px)
|
||
h: 46 → 24 (-22px)
|
||
width: 146.25px → 1440px
|
||
height: 46px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 351.8 → 244.9 (-106.9px)
|
||
w: 107.2 → 152.1 (+44.9px)
|
||
h: 12 → 20 (+8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection"
|
||
x: 78.6 → 155.9 (+77.3px)
|
||
y: 372.8 → 244.9 (-127.9px)
|
||
w: 146.3 → 148.1 (+1.8px)
|
||
h: 17 → 20 (+3px)
|
||
display: block → inline
|
||
margin-top: 5px → 0px
|
||
width: 146.25px → auto
|
||
height: 17px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02"
|
||
x: 383 → 0 (-383px)
|
||
y: 360.8 → 268.9 (-91.9px)
|
||
w: 46.9 → 62.5 (+15.6px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 46.8906px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 408.8 → 290.9 (-117.9px)
|
||
w: 391.3 → 1440 (+1048.7px)
|
||
h: 123 → 76 (-47px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 391.328px → 1440px
|
||
height: 123px → 76px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 430.8 → 292.9 (-137.9px)
|
||
w: 351.3 → 159.4 (-191.9px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 351.328px → auto
|
||
height: 12px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 454.8 → 314.9 (-139.9px)
|
||
w: 351.3 → 1440 (+1088.7px)
|
||
h: 32 → 28 (-4px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
padding-right: 8px → 0px
|
||
padding-left: 8px → 0px
|
||
width: 351.328px → 1440px
|
||
height: 32px → 28px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch]
|
||
x: 87.6 → 0 (-87.6px)
|
||
y: 463.8 → 319.9 (-143.9px)
|
||
w: 14 → 0 (-14px)
|
||
h: 14 → 20 (+6px)
|
||
display: block → inline
|
||
width: 14px → auto
|
||
height: 14px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1)
|
||
x: 109.6 → 0 (-109.6px)
|
||
y: 464.3 → 318.9 (-145.4px)
|
||
w: 151.7 → 157 (+5.3px)
|
||
h: 13 → 24 (+11px)
|
||
display: block → inline-block
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 2px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 2px
|
||
width: 151.656px → 157px
|
||
height: 13px → 24px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → inset
|
||
border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color]
|
||
x: 269.3 → 160.8 (-108.5px)
|
||
y: 457.3 → 314.9 (-142.4px)
|
||
w: 151.7 → 50 (-101.7px)
|
||
display: block → inline-block
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 2px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 2px
|
||
width: 151.672px → 50px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 1px
|
||
border-top-style: none → solid
|
||
border-top-color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 33, 43) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
|
||
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"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 496.8 → 342.9 (-153.9px)
|
||
w: 351.3 → 1440 (+1088.7px)
|
||
h: 12 → 24 (+12px)
|
||
display: flex → block
|
||
justify-content: flex-start → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
margin-top: 10px → 0px
|
||
width: 351.328px → 1440px
|
||
height: 12px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 496.8 → 344.9 (-151.9px)
|
||
w: 9 → 0 (-9px)
|
||
h: 9 → 20 (+11px)
|
||
display: block → inline
|
||
width: 9px → auto
|
||
height: 9px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 531.8 → 366.9 (-164.9px)
|
||
w: 391.3 → 1440 (+1048.7px)
|
||
h: 115 → 48 (-67px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 391.328px → 1440px
|
||
height: 115px → 48px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 553.8 → 368.9 (-184.9px)
|
||
w: 351.3 → 184.4 (-166.9px)
|
||
h: 12 → 20 (+8px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 351.328px → auto
|
||
height: 12px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %"
|
||
x: 403.9 → 146.6 (-257.3px)
|
||
y: 553.8 → 368.9 (-184.9px)
|
||
w: 26 → 37.8 (+11.8px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 26px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input
|
||
x: 78.6 → 190.2 (+111.6px)
|
||
y: 578.8 → 368.9 (-209.9px)
|
||
margin-top: 0px → 2px
|
||
margin-right: 0px → 2px
|
||
margin-bottom: 0px → 2px
|
||
margin-left: 0px → 2px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255)
|
||
color: rgb(23, 33, 43) → rgb(16, 16, 16)
|
||
font-size: 16px → 13.3333px
|
||
line-height: 24px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints]
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 611.8 → 390.9 (-220.9px)
|
||
w: 351.3 → 1440 (+1088.7px)
|
||
h: 12 → 24 (+12px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
margin-top: 10px → 0px
|
||
width: 351.328px → 1440px
|
||
height: 12px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 611.8 → 392.9 (-218.9px)
|
||
w: 66 → 83.6 (+17.6px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 65.9844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal"
|
||
x: 363.9 → 87.4 (-276.5px)
|
||
y: 611.8 → 392.9 (-218.9px)
|
||
w: 66 → 99.3 (+33.3px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 65.9844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 646.8 → 414.9 (-231.9px)
|
||
w: 391.3 → 1440 (+1048.7px)
|
||
h: 93 → 64 (-29px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 391.328px → 1440px
|
||
height: 93px → 64px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 668.8 → 416.9 (-251.9px)
|
||
w: 351.3 → 147.6 (-203.7px)
|
||
h: 18 → 20 (+2px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 351.328px → auto
|
||
height: 18px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 671.8 → 416.9 (-254.9px)
|
||
w: 104 → 147.6 (+43.6px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 103.969px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle]
|
||
x: 397.9 → 147.6 (-250.3px)
|
||
y: 668.8 → 416.9 (-251.9px)
|
||
w: 32 → 0 (-32px)
|
||
h: 18 → 20 (+2px)
|
||
display: block → inline
|
||
position: relative → static
|
||
top: 0px → auto
|
||
right: 0px → auto
|
||
bottom: 0px → auto
|
||
left: 0px → auto
|
||
width: 32px → auto
|
||
height: 18px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
background-color: rgb(23, 105, 210) → rgba(0, 0, 0, 0)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input
|
||
✗ present in reference, absent in project
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels "
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 698.8 → 454.9 (-243.9px)
|
||
w: 351.3 → 1440 (+1088.7px)
|
||
h: 18 → 24 (+6px)
|
||
margin-top: 8px → 16px
|
||
margin-bottom: 0px → 16px
|
||
width: 351.328px → 1440px
|
||
height: 18px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-size: 12px → 16px
|
||
line-height: 18px → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 739.8 → 494.9 (-244.9px)
|
||
w: 391.3 → 1440 (+1048.7px)
|
||
h: 93 → 64 (-29px)
|
||
padding-top: 22px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 22px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 391.328px → 1440px
|
||
height: 93px → 64px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 761.8 → 496.9 (-264.9px)
|
||
w: 351.3 → 92.7 (-258.6px)
|
||
h: 18 → 20 (+2px)
|
||
display: flex → inline
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
margin-bottom: 12px → 0px
|
||
width: 351.328px → auto
|
||
height: 18px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 764.8 → 496.9 (-267.9px)
|
||
w: 58.5 → 92.7 (+34.2px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 58.4844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle]
|
||
x: 397.9 → 92.7 (-305.2px)
|
||
y: 761.8 → 496.9 (-264.9px)
|
||
w: 32 → 0 (-32px)
|
||
h: 18 → 20 (+2px)
|
||
display: block → inline
|
||
position: relative → static
|
||
top: 0px → auto
|
||
right: 0px → auto
|
||
bottom: 0px → auto
|
||
left: 0px → auto
|
||
width: 32px → auto
|
||
height: 18px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1px → normal
|
||
|
||
body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input
|
||
✗ present in reference, absent in project
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask."
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 791.8 → 534.9 (-256.9px)
|
||
w: 351.3 → 1440 (+1088.7px)
|
||
h: 18 → 24 (+6px)
|
||
margin-top: 8px → 16px
|
||
margin-bottom: 0px → 16px
|
||
width: 351.328px → 1440px
|
||
height: 18px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-size: 12px → 16px
|
||
line-height: 18px → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer]
|
||
x: 58.6 → 0 (-58.6px)
|
||
y: 832.8 → 574.9 (-257.9px)
|
||
w: 391.3 → 1440 (+1048.7px)
|
||
h: 50 → 25 (-25px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
padding-top: 16px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 391.328px → 1440px
|
||
height: 50px → 25px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset"
|
||
x: 78.6 → 0 (-78.6px)
|
||
y: 848.8 → 575.9 (-272.9px)
|
||
w: 52.4 → 67.3 (+14.9px)
|
||
h: 18 → 24 (+6px)
|
||
display: flex → inline-block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 52.3594px → 67.2969px
|
||
height: 18px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(23, 105, 210) → rgb(0, 0, 0)
|
||
background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240)
|
||
background-position: 0px 0px → 0% 0%
|
||
color: rgb(23, 105, 210) → rgb(0, 0, 0)
|
||
font-size: 12px → 13.3333px
|
||
line-height: 18px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw]
|
||
x: 78.6 → 8 (-70.6px)
|
||
y: 850.8 → 578.9 (-271.9px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(23, 105, 210) → rgb(0, 0, 0)
|
||
font-size: 12px → 13.3333px
|
||
line-height: 18px → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically"
|
||
x: 288.9 → 71.1 (-217.8px)
|
||
y: 851.3 → 576.9 (-274.4px)
|
||
w: 141 → 159.4 (+18.4px)
|
||
h: 13 → 20 (+7px)
|
||
display: flex → inline
|
||
align-items: center → normal
|
||
row-gap: 8px → normal
|
||
column-gap: 8px → normal
|
||
width: 141.016px → auto
|
||
height: 13px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i
|
||
x: 288.9 → 71.1 (-217.8px)
|
||
y: 854.8 → 576.9 (-277.9px)
|
||
w: 6 → 0 (-6px)
|
||
h: 6 → 20 (+14px)
|
||
display: block → inline
|
||
width: 6px → auto
|
||
height: 6px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
border-radius: 50% → 0px
|
||
background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview]
|
||
x: 506.9 → 0 (-506.9px)
|
||
y: 324.8 → 599.9 (+275.1px)
|
||
w: 875.5 → 1440 (+564.5px)
|
||
h: 662 → 217 (-445px)
|
||
width: 875.484px → 1440px
|
||
height: 662px → 217px
|
||
min-height: auto → 0px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar]
|
||
x: 507.9 → 0 (-507.9px)
|
||
y: 325.8 → 599.9 (+274.1px)
|
||
w: 873.5 → 1440 (+566.5px)
|
||
h: 121 → 49 (-72px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
align-items: center → normal
|
||
padding-top: 18px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 18px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 873.484px → 1440px
|
||
height: 121px → 49px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 362.8 → 599.9 (+237.1px)
|
||
w: 107.8 → 1440 (+1332.2px)
|
||
h: 46 → 24 (-22px)
|
||
width: 107.766px → 1440px
|
||
height: 46px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT"
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 370.8 → 601.9 (+231.1px)
|
||
w: 100.5 → 130.3 (+29.8px)
|
||
h: 12 → 20 (+8px)
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
letter-spacing: 1.2px → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png"
|
||
x: 527.9 → 134 (-393.9px)
|
||
y: 391.8 → 601.9 (+210.1px)
|
||
w: 107.8 → 121.1 (+13.3px)
|
||
h: 17 → 20 (+3px)
|
||
display: block → inline
|
||
margin-top: 5px → 0px
|
||
width: 107.766px → auto
|
||
height: 17px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions]
|
||
x: 1168.2 → 0 (-1168.2px)
|
||
y: 343.8 → 623.9 (+280.1px)
|
||
w: 193.2 → 1440 (+1246.8px)
|
||
h: 84 → 25 (-59px)
|
||
display: flex → block
|
||
flex-wrap: wrap → nowrap
|
||
justify-content: flex-end → normal
|
||
align-items: center → normal
|
||
row-gap: 10px → normal
|
||
column-gap: 10px → normal
|
||
width: 193.203px → 1440px
|
||
height: 84px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed"
|
||
x: 1292.9 → 0 (-1292.9px)
|
||
y: 343.8 → 625.9 (+282.1px)
|
||
w: 68.5 → 92.1 (+23.6px)
|
||
h: 14 → 20 (+6px)
|
||
display: flex → inline
|
||
align-items: center → normal
|
||
row-gap: 5px → normal
|
||
column-gap: 5px → normal
|
||
width: 68.4844px → auto
|
||
height: 14px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(37, 169, 106) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
x: 1292.9 → 0 (-1292.9px)
|
||
y: 343.8 → 627.9 (+284.1px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(37, 169, 106) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result"
|
||
x: 1168.2 → 95.9 (-1072.3px)
|
||
y: 385.8 → 623.9 (+238.1px)
|
||
w: 193.2 → 131.8 (-61.4px)
|
||
h: 42 → 25 (-17px)
|
||
display: flex → inline-block
|
||
justify-content: center → normal
|
||
align-items: center → normal
|
||
row-gap: 9px → normal
|
||
column-gap: 9px → normal
|
||
margin-top: 18px → 0px
|
||
padding-top: 0px → 1px
|
||
padding-right: 0px → 6px
|
||
padding-bottom: 0px → 1px
|
||
padding-left: 0px → 6px
|
||
width: 193.203px → 131.828px
|
||
height: 42px → 25px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-width: 0px → 2px
|
||
border-top-style: none → outset
|
||
border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
background-color: rgb(23, 105, 210) → rgb(240, 240, 240)
|
||
color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
white-space: nowrap → normal
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon]
|
||
x: 1207.4 → 103.9 (-1103.5px)
|
||
y: 399.3 → 626.9 (+227.6px)
|
||
display: block → inline
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0)
|
||
color: rgb(255, 255, 255) → rgb(0, 0, 0)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 11px → 13.3333px
|
||
white-space: nowrap → normal
|
||
vertical-align: middle → baseline
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid]
|
||
x: 507.9 → 0 (-507.9px)
|
||
y: 446.8 → 648.9 (+202.1px)
|
||
w: 873.5 → 1440 (+566.5px)
|
||
h: 494 → 144 (-350px)
|
||
display: grid → block
|
||
row-gap: 18px → normal
|
||
column-gap: 18px → normal
|
||
grid-template-columns: 407.734px 407.75px → none
|
||
grid-template-rows: 454px → none
|
||
padding-top: 20px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 20px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 873.484px → 1440px
|
||
height: 494px → 144px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card]
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 466.8 → 648.9 (+182.1px)
|
||
w: 407.7 → 1440 (+1032.3px)
|
||
h: 454 → 72 (-382px)
|
||
width: 407.734px → 1440px
|
||
height: 454px → 72px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label]
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 466.8 → 648.9 (+182.1px)
|
||
w: 407.7 → 1440 (+1032.3px)
|
||
h: 12 → 24 (+12px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
margin-bottom: 10px → 0px
|
||
width: 407.734px → 1440px
|
||
height: 12px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE"
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 466.8 → 650.9 (+184.1px)
|
||
w: 33 → 60.8 (+27.8px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 33px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png"
|
||
x: 869.7 → 60.8 (-808.9px)
|
||
y: 466.8 → 650.9 (+184.1px)
|
||
w: 66 → 90.2 (+24.2px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 65.9844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
font-weight: 400 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas]
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 488.8 → 672.9 (+184.1px)
|
||
w: 407.7 → 1440 (+1032.3px)
|
||
h: 432 → 48 (-384px)
|
||
display: grid → block
|
||
position: relative → static
|
||
top: 0px → auto
|
||
right: 0px → auto
|
||
bottom: 0px → auto
|
||
left: 0px → auto
|
||
align-items: center → normal
|
||
grid-template-columns: 405.734px → none
|
||
grid-template-rows: 430px → none
|
||
width: 407.734px → 1440px
|
||
height: 432px → 48px
|
||
min-height: 432px → 0px
|
||
overflow: hidden → visible
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
background-color: rgb(232, 238, 242) → rgba(0, 0, 0, 0)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source]
|
||
x: 574.2 → 0 (-574.2px)
|
||
y: 550.9 → 672.9 (+122px)
|
||
w: 315.1 → 1440 (+1124.9px)
|
||
h: 307.7 → 24 (-283.7px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 300.234px → none
|
||
grid-template-rows: 292.391px → none
|
||
width: 300.234px → 1440px
|
||
height: 292.391px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
transform: matrix(0.99863, -0.052336, 0.052336, 0.99863, 0, 0) → none
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT"
|
||
x: 708.3 → 0 (-708.3px)
|
||
y: 695.1 → 674.9 (-20.2px)
|
||
w: 47 → 58.2 (+11.2px)
|
||
display: block → inline
|
||
width: 46.1875px → auto
|
||
height: 17px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800"
|
||
x: 875.2 → 0 (-875.2px)
|
||
y: 900.8 → 698.9 (-201.9px)
|
||
w: 49.5 → 84.4 (+34.9px)
|
||
h: 10 → 20 (+10px)
|
||
display: block → inline
|
||
position: absolute → static
|
||
top: 411px → auto
|
||
right: 10px → auto
|
||
bottom: 9px → auto
|
||
left: 346.25px → auto
|
||
width: 49.4844px → auto
|
||
height: 10px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card]
|
||
x: 953.7 → 0 (-953.7px)
|
||
y: 466.8 → 720.9 (+254.1px)
|
||
w: 407.8 → 1440 (+1032.2px)
|
||
h: 454 → 72 (-382px)
|
||
width: 407.75px → 1440px
|
||
height: 454px → 72px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label]
|
||
x: 953.7 → 0 (-953.7px)
|
||
y: 466.8 → 720.9 (+254.1px)
|
||
w: 407.8 → 1440 (+1032.2px)
|
||
h: 12 → 24 (+12px)
|
||
display: flex → block
|
||
justify-content: space-between → normal
|
||
margin-bottom: 10px → 0px
|
||
width: 407.75px → 1440px
|
||
height: 12px → 24px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT"
|
||
x: 953.7 → 0 (-953.7px)
|
||
y: 466.8 → 722.9 (+256.1px)
|
||
w: 33 → 55.8 (+22.8px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 33px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(23, 105, 210) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png"
|
||
x: 1284.4 → 55.8 (-1228.6px)
|
||
y: 466.8 → 722.9 (+256.1px)
|
||
w: 77 → 123.9 (+46.9px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 76.9844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
font-weight: 400 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas]
|
||
x: 953.7 → 0 (-953.7px)
|
||
y: 488.8 → 744.9 (+256.1px)
|
||
w: 407.8 → 1440 (+1032.2px)
|
||
h: 432 → 48 (-384px)
|
||
display: grid → block
|
||
position: relative → static
|
||
top: 0px → auto
|
||
right: 0px → auto
|
||
bottom: 0px → auto
|
||
left: 0px → auto
|
||
align-items: center → normal
|
||
grid-template-columns: 405.75px → none
|
||
grid-template-rows: 430px → none
|
||
width: 407.75px → 1440px
|
||
height: 432px → 48px
|
||
min-height: 432px → 0px
|
||
overflow: hidden → visible
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject]
|
||
x: 1007.4 → 0 (-1007.4px)
|
||
y: 558.6 → 744.9 (+186.3px)
|
||
w: 300.3 → 1440 (+1139.7px)
|
||
h: 292.4 → 24 (-268.4px)
|
||
display: grid → block
|
||
align-items: center → normal
|
||
grid-template-columns: 300.25px → none
|
||
grid-template-rows: 292.391px → none
|
||
width: 300.25px → 1440px
|
||
height: 292.391px → 24px
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG"
|
||
x: 1146 → 0 (-1146px)
|
||
y: 696.3 → 746.9 (+50.6px)
|
||
w: 23.1 → 32.1 (+9px)
|
||
h: 17 → 20 (+3px)
|
||
display: block → inline
|
||
width: 23.0938px → auto
|
||
height: 17px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 14px → 16px
|
||
font-weight: 600 → 400
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800"
|
||
x: 1300.9 → 0 (-1300.9px)
|
||
y: 900.8 → 770.9 (-129.9px)
|
||
w: 49.5 → 84.4 (+34.9px)
|
||
h: 10 → 20 (+10px)
|
||
display: block → inline
|
||
position: absolute → static
|
||
top: 411px → auto
|
||
right: 10px → auto
|
||
bottom: 9px → auto
|
||
left: 346.266px → auto
|
||
width: 49.4844px → auto
|
||
height: 10px → auto
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 9px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta]
|
||
x: 507.9 → 0 (-507.9px)
|
||
y: 940.8 → 792.9 (-147.9px)
|
||
w: 873.5 → 1440 (+566.5px)
|
||
h: 45 → 24 (-21px)
|
||
display: flex → block
|
||
row-gap: 24px → normal
|
||
column-gap: 24px → normal
|
||
padding-top: 16px → 0px
|
||
padding-right: 20px → 0px
|
||
padding-bottom: 16px → 0px
|
||
padding-left: 20px → 0px
|
||
width: 873.484px → 1440px
|
||
height: 45px → 24px
|
||
border-top-width: 1px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT"
|
||
x: 527.9 → 0 (-527.9px)
|
||
y: 957.8 → 794.9 (-162.9px)
|
||
w: 77.5 → 124.8 (+47.3px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 77.5px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24"
|
||
x: 572.4 → 65.4 (-507px)
|
||
y: 957.8 → 794.9 (-162.9px)
|
||
w: 33 → 59.4 (+26.4px)
|
||
h: 12 → 20 (+8px)
|
||
margin-left: 6px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA"
|
||
x: 629.4 → 128.6 (-500.8px)
|
||
y: 957.8 → 794.9 (-162.9px)
|
||
w: 77.5 → 125.6 (+48.1px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 77.5px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED"
|
||
x: 668.4 → 181.9 (-486.5px)
|
||
y: 957.8 → 794.9 (-162.9px)
|
||
w: 38.5 → 72.3 (+33.8px)
|
||
h: 12 → 20 (+8px)
|
||
margin-left: 6px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY"
|
||
x: 730.9 → 258 (-472.9px)
|
||
y: 957.8 → 794.9 (-162.9px)
|
||
w: 88.5 → 131.3 (+42.8px)
|
||
h: 12 → 20 (+8px)
|
||
display: block → inline
|
||
width: 88.4844px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
color: rgb(109, 120, 131) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
line-height: normal → 24px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %"
|
||
x: 797.4 → 350.7 (-446.7px)
|
||
y: 957.8 → 794.9 (-162.9px)
|
||
w: 22 → 38.6 (+16.6px)
|
||
h: 12 → 20 (+8px)
|
||
margin-left: 6px → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43)
|
||
font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif
|
||
font-size: 10px → 16px
|
||
font-weight: 600 → 700
|
||
line-height: normal → 24px
|
||
|
||
body > main > footer [preview-footer]
|
||
y: 1058.8 → 816.9 (-241.9px)
|
||
row-gap: normal → 16px
|
||
column-gap: normal → 16px
|
||
height: 45px → 46px
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(1) "easy-png-tools"
|
||
y: 1075.8 → 833.9 (-241.9px)
|
||
w: 117 → 142.8 (+25.8px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
width: 116.984px → 142.812px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0"
|
||
x: 141.6 → 159.6 (+18px)
|
||
y: 1075.8 → 833.9 (-241.9px)
|
||
w: 33 → 40.8 (+7.8px)
|
||
display: block → inline
|
||
width: 33px → auto
|
||
height: 12px → auto
|
||
min-width: auto → 0px
|
||
min-height: auto → 0px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210)
|
||
font-weight: 400 → 700
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body > main > footer > span:nth-of-type(2) "© 2024"
|
||
x: 676.8 → 1341.6 (+664.8px)
|
||
y: 1075.8 → 833.9 (-241.9px)
|
||
w: 170.5 → 40.8 (-129.7px)
|
||
display: flex → block
|
||
align-items: center → normal
|
||
row-gap: 7px → normal
|
||
column-gap: 7px → normal
|
||
width: 170.453px → 40.8125px
|
||
height: 12px → 13px
|
||
border-top-style: solid → none
|
||
border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131)
|
||
letter-spacing: normal → 0.8px
|
||
|
||
body >main >footer >span:nth-of-type(3) "© 2024"
|
||
✗ present in reference, absent in project
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|