mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
2250 lines
48 KiB
HTML
2250 lines
48 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" class="bg-background">
|
||
<head>
|
||
<meta charSet="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
<style>
|
||
@layer properties {
|
||
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
|
||
*,:before,:after,::backdrop {
|
||
--tw-border-style:solid;
|
||
--tw-font-weight:initial;
|
||
--tw-shadow:0 0 #0000;
|
||
--tw-shadow-color:initial;
|
||
--tw-shadow-alpha:100%;
|
||
--tw-inset-shadow:0 0 #0000;
|
||
--tw-inset-shadow-color:initial;
|
||
--tw-inset-shadow-alpha:100%;
|
||
--tw-ring-color:initial;
|
||
--tw-ring-shadow:0 0 #0000;
|
||
--tw-inset-ring-color:initial;
|
||
--tw-inset-ring-shadow:0 0 #0000;
|
||
--tw-ring-inset:initial;
|
||
--tw-ring-offset-width:0px;
|
||
--tw-ring-offset-color:#fff;
|
||
--tw-ring-offset-shadow:0 0 #0000;
|
||
--tw-outline-style:solid;
|
||
--tw-blur:initial;
|
||
--tw-brightness:initial;
|
||
--tw-contrast:initial;
|
||
--tw-grayscale:initial;
|
||
--tw-hue-rotate:initial;
|
||
--tw-invert:initial;
|
||
--tw-opacity:initial;
|
||
--tw-saturate:initial;
|
||
--tw-sepia:initial;
|
||
--tw-drop-shadow:initial;
|
||
--tw-drop-shadow-color:initial;
|
||
--tw-drop-shadow-alpha:100%;
|
||
--tw-drop-shadow-size:initial;
|
||
--tw-translate-x:0;
|
||
--tw-translate-y:0;
|
||
--tw-translate-z:0;
|
||
--tw-animation-delay:0s;
|
||
--tw-animation-direction:normal;
|
||
--tw-animation-duration:initial;
|
||
--tw-animation-fill-mode:none;
|
||
--tw-animation-iteration-count:1;
|
||
--tw-enter-blur:0;
|
||
--tw-enter-opacity:1;
|
||
--tw-enter-rotate:0;
|
||
--tw-enter-scale:1;
|
||
--tw-enter-translate-x:0;
|
||
--tw-enter-translate-y:0;
|
||
--tw-exit-blur:0;
|
||
--tw-exit-opacity:1;
|
||
--tw-exit-rotate:0;
|
||
--tw-exit-scale:1;
|
||
--tw-exit-translate-x:0;
|
||
--tw-exit-translate-y:0
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
@layer theme {
|
||
:root,:host {
|
||
--font-sans:"IBM Plex Sans", sans-serif;
|
||
--font-mono:"IBM Plex Mono", monospace;
|
||
--spacing:.25rem;
|
||
--text-xs:.75rem;
|
||
--text-xs--line-height:calc(1 / .75);
|
||
--text-sm:.875rem;
|
||
--text-sm--line-height:calc(1.25 / .875);
|
||
--font-weight-medium:500;
|
||
--radius-md:.375rem;
|
||
--radius-lg:.5rem;
|
||
--default-transition-duration:.15s;
|
||
--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
|
||
--default-font-family:"IBM Plex Sans", sans-serif;
|
||
--default-mono-font-family:"IBM Plex Mono", monospace
|
||
}
|
||
|
||
}
|
||
@layer base {
|
||
*,:after,:before,::backdrop {
|
||
box-sizing:border-box;
|
||
border:0 solid;
|
||
margin:0;
|
||
padding:0
|
||
}
|
||
::file-selector-button {
|
||
box-sizing:border-box;
|
||
border:0 solid;
|
||
margin:0;
|
||
padding:0
|
||
}
|
||
html,:host {
|
||
-webkit-text-size-adjust:100%;
|
||
tab-size:4;
|
||
line-height:1.5;
|
||
font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||
font-feature-settings:var(--default-font-feature-settings,normal);
|
||
font-variation-settings:var(--default-font-variation-settings,normal);
|
||
-webkit-tap-highlight-color:transparent
|
||
}
|
||
hr {
|
||
height:0;
|
||
color:inherit;
|
||
border-top-width:1px
|
||
}
|
||
abbr:where([title]) {
|
||
-webkit-text-decoration:underline dotted;
|
||
text-decoration:underline dotted
|
||
}
|
||
h1,h2,h3,h4,h5,h6 {
|
||
font-size:inherit;
|
||
font-weight:inherit
|
||
}
|
||
a {
|
||
color:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
-webkit-text-decoration:inherit;
|
||
text-decoration:inherit
|
||
}
|
||
b,strong {
|
||
font-weight:bolder
|
||
}
|
||
code,kbd,samp,pre {
|
||
font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||
font-feature-settings:var(--default-mono-font-feature-settings,normal);
|
||
font-variation-settings:var(--default-mono-font-variation-settings,normal);
|
||
font-size:1em
|
||
}
|
||
small {
|
||
font-size:80%
|
||
}
|
||
sub,sup {
|
||
vertical-align:baseline;
|
||
font-size:75%;
|
||
line-height:0;
|
||
position:relative
|
||
}
|
||
sub {
|
||
bottom:-.25em
|
||
}
|
||
sup {
|
||
top:-.5em
|
||
}
|
||
table {
|
||
text-indent:0;
|
||
border-color:inherit;
|
||
border-collapse:collapse
|
||
}
|
||
:-moz-focusring:where(:not(iframe)) {
|
||
outline:auto
|
||
}
|
||
progress {
|
||
vertical-align:baseline
|
||
}
|
||
summary {
|
||
display:list-item
|
||
}
|
||
ol,ul,menu {
|
||
list-style:none
|
||
}
|
||
img,svg,video,canvas,audio,iframe,embed,object {
|
||
vertical-align:middle;
|
||
display:block
|
||
}
|
||
img,video {
|
||
max-width:100%;
|
||
height:auto
|
||
}
|
||
button,input,select,optgroup,textarea {
|
||
font:inherit;
|
||
font-feature-settings:inherit;
|
||
font-variation-settings:inherit;
|
||
letter-spacing:inherit;
|
||
color:inherit;
|
||
opacity:1;
|
||
background-color:#0000;
|
||
border-radius:0
|
||
}
|
||
::file-selector-button {
|
||
font:inherit;
|
||
font-feature-settings:inherit;
|
||
font-variation-settings:inherit;
|
||
letter-spacing:inherit;
|
||
color:inherit;
|
||
opacity:1;
|
||
background-color:#0000;
|
||
border-radius:0
|
||
}
|
||
:where(select:is([multiple],[size])) optgroup {
|
||
font-weight:bolder
|
||
}
|
||
:where(select:is([multiple],[size])) optgroup option {
|
||
padding-inline-start:20px
|
||
}
|
||
::file-selector-button {
|
||
margin-inline-end:4px
|
||
}
|
||
::placeholder {
|
||
opacity:1
|
||
}
|
||
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
|
||
::placeholder {
|
||
color:currentColor
|
||
}
|
||
@supports (color:color-mix(in lab, red, red)) {
|
||
::placeholder {
|
||
color:color-mix(in oklab, currentcolor 50%, transparent)
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
textarea {
|
||
resize:vertical
|
||
}
|
||
::-webkit-search-decoration {
|
||
-webkit-appearance:none
|
||
}
|
||
::-webkit-date-and-time-value {
|
||
min-height:1lh;
|
||
text-align:inherit
|
||
}
|
||
::-webkit-datetime-edit {
|
||
display:inline-flex
|
||
}
|
||
::-webkit-datetime-edit-fields-wrapper {
|
||
padding:0
|
||
}
|
||
::-webkit-datetime-edit {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-year-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-month-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-day-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-hour-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-minute-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-second-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-millisecond-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-datetime-edit-meridiem-field {
|
||
padding-block:0
|
||
}
|
||
::-webkit-calendar-picker-indicator {
|
||
line-height:1
|
||
}
|
||
:-moz-ui-invalid {
|
||
box-shadow:none
|
||
}
|
||
button,input:where([type=button],[type=reset],[type=submit]) {
|
||
appearance:button
|
||
}
|
||
::file-selector-button {
|
||
appearance:button
|
||
}
|
||
::-webkit-inner-spin-button {
|
||
height:auto
|
||
}
|
||
::-webkit-outer-spin-button {
|
||
height:auto
|
||
}
|
||
[hidden]:where(:not([hidden=until-found])) {
|
||
display:none!important
|
||
}
|
||
|
||
}
|
||
@layer components;
|
||
@layer utilities {
|
||
.inline-flex {
|
||
display:inline-flex
|
||
}
|
||
.size-6 {
|
||
width:calc(var(--spacing) * 6);
|
||
height:calc(var(--spacing) * 6)
|
||
}
|
||
.size-7 {
|
||
width:calc(var(--spacing) * 7);
|
||
height:calc(var(--spacing) * 7)
|
||
}
|
||
.size-8 {
|
||
width:calc(var(--spacing) * 8);
|
||
height:calc(var(--spacing) * 8)
|
||
}
|
||
.size-9 {
|
||
width:calc(var(--spacing) * 9);
|
||
height:calc(var(--spacing) * 9)
|
||
}
|
||
.h-6 {
|
||
height:calc(var(--spacing) * 6)
|
||
}
|
||
.h-7 {
|
||
height:calc(var(--spacing) * 7)
|
||
}
|
||
.h-8 {
|
||
height:calc(var(--spacing) * 8)
|
||
}
|
||
.h-9 {
|
||
height:calc(var(--spacing) * 9)
|
||
}
|
||
.shrink-0 {
|
||
flex-shrink:0
|
||
}
|
||
.items-center {
|
||
align-items:center
|
||
}
|
||
.justify-center {
|
||
justify-content:center
|
||
}
|
||
.gap-1 {
|
||
gap:var(--spacing)
|
||
}
|
||
.gap-1\.5 {
|
||
gap:calc(var(--spacing) * 1.5)
|
||
}
|
||
.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
|
||
border-radius:min(var(--radius-md), 10px)
|
||
}
|
||
.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
|
||
border-radius:min(var(--radius-md), 12px)
|
||
}
|
||
.rounded-lg {
|
||
border-radius:var(--radius-lg)
|
||
}
|
||
.border {
|
||
border-style:var(--tw-border-style);
|
||
border-width:1px
|
||
}
|
||
.border-border {
|
||
border-color:var(--line)
|
||
}
|
||
.border-transparent {
|
||
border-color:#0000
|
||
}
|
||
.bg-background {
|
||
background-color:var(--background)
|
||
}
|
||
.bg-clip-padding {
|
||
background-clip:padding-box
|
||
}
|
||
.px-2 {
|
||
padding-inline:calc(var(--spacing) * 2)
|
||
}
|
||
.px-2\.5 {
|
||
padding-inline:calc(var(--spacing) * 2.5)
|
||
}
|
||
.text-sm {
|
||
font-size:var(--text-sm);
|
||
line-height:var(--tw-leading,var(--text-sm--line-height))
|
||
}
|
||
.text-xs {
|
||
font-size:var(--text-xs);
|
||
line-height:var(--tw-leading,var(--text-xs--line-height))
|
||
}
|
||
.text-\[0\.8rem\] {
|
||
font-size:.8rem
|
||
}
|
||
.font-medium {
|
||
--tw-font-weight:var(--font-weight-medium);
|
||
font-weight:var(--font-weight-medium)
|
||
}
|
||
.whitespace-nowrap {
|
||
white-space:nowrap
|
||
}
|
||
.underline-offset-4 {
|
||
text-underline-offset:4px
|
||
}
|
||
.antialiased {
|
||
-webkit-font-smoothing:antialiased;
|
||
-moz-osx-font-smoothing:grayscale
|
||
}
|
||
.ring {
|
||
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
||
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
||
}
|
||
.outline {
|
||
outline-style:var(--tw-outline-style);
|
||
outline-width:1px
|
||
}
|
||
.blur {
|
||
--tw-blur:blur(8px);
|
||
filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
|
||
}
|
||
.grayscale {
|
||
--tw-grayscale:grayscale(100%);
|
||
filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
|
||
}
|
||
.transition {
|
||
transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
|
||
transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
|
||
transition-duration:var(--tw-duration,var(--default-transition-duration))
|
||
}
|
||
.transition-all {
|
||
transition-property:all;
|
||
transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
|
||
transition-duration:var(--tw-duration,var(--default-transition-duration))
|
||
}
|
||
.outline-none {
|
||
--tw-outline-style:none;
|
||
outline-style:none
|
||
}
|
||
.select-none {
|
||
-webkit-user-select:none;
|
||
user-select:none
|
||
}
|
||
@media (hover:hover) {
|
||
.hover\:text-foreground:hover {
|
||
color:var(--foreground)
|
||
}
|
||
.hover\:underline:hover {
|
||
text-decoration-line:underline
|
||
}
|
||
|
||
}
|
||
.focus-visible\:ring-3:focus-visible {
|
||
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
||
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
||
}
|
||
.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
|
||
--tw-translate-y:1px;
|
||
translate:var(--tw-translate-x) var(--tw-translate-y)
|
||
}
|
||
.disabled\:pointer-events-none:disabled {
|
||
pointer-events:none
|
||
}
|
||
.disabled\:opacity-50:disabled {
|
||
opacity:.5
|
||
}
|
||
:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
|
||
border-radius:var(--radius-lg)
|
||
}
|
||
.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
|
||
padding-right:calc(var(--spacing) * 1.5)
|
||
}
|
||
.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
|
||
padding-right:calc(var(--spacing) * 2)
|
||
}
|
||
.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
|
||
padding-left:calc(var(--spacing) * 1.5)
|
||
}
|
||
.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
|
||
padding-left:calc(var(--spacing) * 2)
|
||
}
|
||
.aria-expanded\:text-foreground[aria-expanded=true] {
|
||
color:var(--foreground)
|
||
}
|
||
.aria-invalid\:ring-3[aria-invalid=true] {
|
||
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
||
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
||
}
|
||
.\[\&_svg\]\:pointer-events-none svg {
|
||
pointer-events:none
|
||
}
|
||
.\[\&_svg\]\:shrink-0 svg {
|
||
flex-shrink:0
|
||
}
|
||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
|
||
width:calc(var(--spacing) * 3);
|
||
height:calc(var(--spacing) * 3)
|
||
}
|
||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
|
||
width:calc(var(--spacing) * 3.5);
|
||
height:calc(var(--spacing) * 3.5)
|
||
}
|
||
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
|
||
width:calc(var(--spacing) * 4);
|
||
height:calc(var(--spacing) * 4)
|
||
}
|
||
|
||
}
|
||
@property --tw-animation-delay {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0s
|
||
}
|
||
@property --tw-animation-direction {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:normal
|
||
}
|
||
@property --tw-animation-duration {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-animation-fill-mode {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:none
|
||
}
|
||
@property --tw-animation-iteration-count {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-enter-blur {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-enter-opacity {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-enter-rotate {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-enter-scale {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-enter-translate-x {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-enter-translate-y {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-blur {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-opacity {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-exit-rotate {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-scale {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:1
|
||
}
|
||
@property --tw-exit-translate-x {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-exit-translate-y {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
:root {
|
||
--lightningcss-light:initial;
|
||
--lightningcss-dark: ;
|
||
color-scheme:light;
|
||
--background:#eef1f4;
|
||
--foreground:#17212b;
|
||
--panel:#f8fafb;
|
||
--line:#cbd3da;
|
||
--muted:#6d7883;
|
||
--blue:#1769d2;
|
||
--cyan:#00a8c7;
|
||
--amber:#bd7411;
|
||
--radius:4px
|
||
}
|
||
* {
|
||
box-sizing:border-box;
|
||
border-color:var(--line)
|
||
}
|
||
html {
|
||
background:var(--background)
|
||
}
|
||
body {
|
||
background:var(--background);
|
||
color:var(--foreground);
|
||
font-family:var(--font-sans);
|
||
margin:0
|
||
}
|
||
button,input {
|
||
font:inherit
|
||
}
|
||
button {
|
||
cursor:pointer
|
||
}
|
||
.app-shell {
|
||
background-color:var(--background);
|
||
background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
|
||
background-size:32px 32px;
|
||
min-height:100vh
|
||
}
|
||
.dark-mode {
|
||
--background:#11171d;
|
||
--foreground:#e8eef2;
|
||
--panel:#182129;
|
||
--line:#33414c;
|
||
--muted:#91a0ac;
|
||
--blue:#54a2ff;
|
||
background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
|
||
}
|
||
.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
|
||
align-items:center;
|
||
display:flex
|
||
}
|
||
.topbar {
|
||
border-bottom:1px solid var(--line);
|
||
background:var(--panel);
|
||
justify-content:space-between;
|
||
height:64px;
|
||
padding:0 clamp(20px,4vw,64px)
|
||
}
|
||
.topbar>.brand {
|
||
color:var(--foreground);
|
||
text-decoration:none
|
||
}
|
||
.top-nav {
|
||
align-items:center;
|
||
gap:22px;
|
||
margin-left:auto;
|
||
margin-right:28px;
|
||
display:flex
|
||
}
|
||
.top-nav a {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
white-space:nowrap;
|
||
text-decoration:none
|
||
}
|
||
.top-nav a:hover,.top-nav a.active {
|
||
color:var(--blue)
|
||
}
|
||
.brand {
|
||
font:600 14px var(--font-mono);
|
||
gap:10px
|
||
}
|
||
.brand-mark {
|
||
background:var(--blue);
|
||
color:#fff;
|
||
place-items:center;
|
||
width:30px;
|
||
height:30px;
|
||
font-size:11px;
|
||
display:grid
|
||
}
|
||
.version,.label,.step-type,.eyebrow {
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.12em;
|
||
color:var(--muted)
|
||
}
|
||
.version,.eyebrow {
|
||
color:var(--blue)
|
||
}
|
||
.top-actions {
|
||
gap:16px
|
||
}
|
||
.status {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.08em;
|
||
gap:7px
|
||
}
|
||
.status i,.auto-note i {
|
||
background:#25a96a;
|
||
border-radius:50%;
|
||
width:6px;
|
||
height:6px
|
||
}
|
||
.icon-btn {
|
||
color:var(--muted);
|
||
background:0 0;
|
||
border:0;
|
||
place-items:center;
|
||
padding:6px;
|
||
display:grid
|
||
}
|
||
.language {
|
||
border:1px solid var(--line)
|
||
}
|
||
.language button {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
border:0;
|
||
padding:6px 9px
|
||
}
|
||
.language .active {
|
||
background:var(--foreground);
|
||
color:var(--background)
|
||
}
|
||
.page-grid {
|
||
grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
|
||
align-items:start;
|
||
gap:56px;
|
||
width:100%;
|
||
max-width:none;
|
||
margin:auto;
|
||
padding:60px clamp(24px,4vw,72px) 72px;
|
||
display:grid
|
||
}
|
||
.preview-panel {
|
||
min-width:0;
|
||
margin-top:0;
|
||
position:sticky;
|
||
top:24px
|
||
}
|
||
.preview-meta {
|
||
gap:24px;
|
||
display:flex
|
||
}
|
||
.preview-meta div {
|
||
gap:5px;
|
||
display:grid
|
||
}
|
||
.preview-meta span {
|
||
font:10px var(--font-mono);
|
||
color:var(--muted)
|
||
}
|
||
.preview-meta b {
|
||
font:600 11px var(--font-mono)
|
||
}
|
||
.workspace,.preview-panel {
|
||
min-width:0
|
||
}
|
||
.preview-stack {
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:18px;
|
||
width:100%;
|
||
min-width:0;
|
||
display:grid
|
||
}
|
||
.preview-tile {
|
||
width:100%;
|
||
min-width:0;
|
||
overflow:hidden
|
||
}
|
||
.history-toggle {
|
||
border:1px solid var(--line);
|
||
width:100%;
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.04em;
|
||
background:0 0;
|
||
justify-content:center;
|
||
align-items:center;
|
||
gap:8px;
|
||
margin-top:18px;
|
||
padding:11px 14px;
|
||
display:flex
|
||
}
|
||
.history-toggle:hover {
|
||
color:var(--foreground);
|
||
background:var(--panel)
|
||
}
|
||
.top-toggle {
|
||
width:auto;
|
||
margin:0;
|
||
padding:8px 10px
|
||
}
|
||
.history-toggle .rotated {
|
||
transform:rotate(180deg)
|
||
}
|
||
.tile-canvas {
|
||
width:100%;
|
||
min-width:0;
|
||
min-height:clamp(300px,22vw,430px);
|
||
overflow:hidden
|
||
}
|
||
.image-preview {
|
||
min-width:0;
|
||
max-width:100%;
|
||
overflow:hidden
|
||
}
|
||
.eyebrow {
|
||
margin-bottom:18px
|
||
}
|
||
.eyebrow span {
|
||
color:var(--muted);
|
||
margin:0 7px
|
||
}
|
||
.title-row {
|
||
justify-content:space-between;
|
||
align-items:flex-end;
|
||
gap:30px;
|
||
margin-bottom:56px
|
||
}
|
||
h1 {
|
||
letter-spacing:-.06em;
|
||
max-width:700px;
|
||
margin:0 0 16px;
|
||
font-size:clamp(36px,4vw,64px);
|
||
font-weight:650;
|
||
line-height:1
|
||
}
|
||
.lede {
|
||
color:var(--muted);
|
||
max-width:550px;
|
||
margin:0;
|
||
line-height:1.6
|
||
}
|
||
.file-chip {
|
||
white-space:nowrap;
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
font:11px var(--font-mono);
|
||
color:var(--muted);
|
||
align-items:center;
|
||
gap:8px;
|
||
padding:10px 12px;
|
||
display:flex
|
||
}
|
||
.file-chip b {
|
||
color:var(--blue);
|
||
font-weight:500
|
||
}
|
||
.pipeline-head {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
padding-bottom:12px
|
||
}
|
||
.pipeline-head strong,.preview-top strong {
|
||
font:600 14px var(--font-mono);
|
||
margin-top:5px;
|
||
display:block
|
||
}
|
||
.pipeline-head em {
|
||
color:#25a96a;
|
||
font-size:10px;
|
||
font-style:normal
|
||
}
|
||
.add-btn,.reset-btn {
|
||
color:var(--blue);
|
||
background:0 0;
|
||
border:0;
|
||
align-items:center;
|
||
gap:7px;
|
||
font-size:12px;
|
||
display:flex
|
||
}
|
||
.steps-list {
|
||
gap:10px;
|
||
padding-top:14px;
|
||
display:grid
|
||
}
|
||
.step-card {
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
grid-template-columns:46px 20px 1fr;
|
||
min-height:138px;
|
||
display:grid
|
||
}
|
||
.step-index {
|
||
font:11px var(--font-mono);
|
||
color:var(--blue);
|
||
padding:17px 0 0 15px
|
||
}
|
||
.drag {
|
||
color:var(--line);
|
||
margin-top:17px
|
||
}
|
||
.step-body {
|
||
padding:15px 18px 18px
|
||
}
|
||
.step-heading {
|
||
justify-content:space-between;
|
||
gap:15px
|
||
}
|
||
.step-heading h2 {
|
||
font:600 15px var(--font-mono);
|
||
margin:5px 0 18px
|
||
}
|
||
.step-tools {
|
||
gap:13px
|
||
}
|
||
.step-tools button {
|
||
color:var(--muted);
|
||
background:0 0;
|
||
border:0
|
||
}
|
||
.check {
|
||
color:#238354;
|
||
font:10px var(--font-mono);
|
||
align-items:center;
|
||
gap:4px;
|
||
display:flex
|
||
}
|
||
.controls {
|
||
grid-template-columns:1.1fr 1fr 1.2fr;
|
||
gap:16px;
|
||
display:grid
|
||
}
|
||
.controls.compact {
|
||
grid-template-columns:1fr 1fr
|
||
}
|
||
.control-block label {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.08em;
|
||
justify-content:space-between;
|
||
margin-bottom:8px;
|
||
display:flex
|
||
}
|
||
.control-block output {
|
||
color:var(--foreground)
|
||
}
|
||
.color-field {
|
||
border:1px solid var(--line);
|
||
align-items:center;
|
||
gap:8px;
|
||
height:32px;
|
||
padding:0 8px;
|
||
display:flex
|
||
}
|
||
.swatch {
|
||
border:1px solid var(--line);
|
||
width:14px;
|
||
height:14px
|
||
}
|
||
.swatch.dark {
|
||
background:#16202b
|
||
}
|
||
.color-field input {
|
||
min-width:0;
|
||
color:var(--foreground);
|
||
font:11px var(--font-mono);
|
||
background:0 0;
|
||
border:0;
|
||
outline:0;
|
||
flex:1
|
||
}
|
||
.control-block input[type=range] {
|
||
width:100%;
|
||
accent-color:var(--blue)
|
||
}
|
||
.segmented {
|
||
border:1px solid var(--line);
|
||
height:32px;
|
||
display:flex
|
||
}
|
||
.segmented button {
|
||
border:0;
|
||
border-right:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
flex:1
|
||
}
|
||
.segmented .selected {
|
||
background:var(--blue);
|
||
color:#fff
|
||
}
|
||
.transform-note,.auto-note {
|
||
color:var(--muted);
|
||
font:11px var(--font-mono);
|
||
align-items:center;
|
||
gap:8px;
|
||
display:flex
|
||
}
|
||
.pipeline-footer {
|
||
justify-content:space-between;
|
||
padding-top:18px
|
||
}
|
||
.auto-note {
|
||
color:var(--muted)
|
||
}
|
||
.auto-note i {
|
||
display:inline-block
|
||
}
|
||
.preview-panel {
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
align-self:start;
|
||
padding:18px;
|
||
position:sticky;
|
||
top:24px
|
||
}
|
||
.preview-top {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
padding-bottom:15px
|
||
}
|
||
.preview-stack {
|
||
grid-template-columns:1fr 1fr;
|
||
gap:12px;
|
||
padding:16px 0;
|
||
display:grid
|
||
}
|
||
.preview-tile {
|
||
border:1px solid var(--line);
|
||
background:var(--background)
|
||
}
|
||
.preview-tile.active {
|
||
border-color:var(--blue)
|
||
}
|
||
.tile-canvas {
|
||
aspect-ratio:1.35;
|
||
background-color:#e4e8eb;
|
||
background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
|
||
background-position:0 0,0 7px,7px -7px,-7px 0;
|
||
background-size:14px 14px;
|
||
place-items:center;
|
||
padding:16px;
|
||
display:grid
|
||
}
|
||
.image-preview {
|
||
aspect-ratio:1.5;
|
||
color:#16202b;
|
||
width:80%;
|
||
font:600 10px var(--font-mono);
|
||
flex-direction:column;
|
||
justify-content:center;
|
||
align-items:center;
|
||
gap:5px;
|
||
display:flex
|
||
}
|
||
.sample-icon {
|
||
border:1px solid;
|
||
padding:3px 5px;
|
||
font-size:9px
|
||
}
|
||
.tile-label {
|
||
border-top:1px solid var(--line);
|
||
font:9px var(--font-mono);
|
||
color:var(--blue);
|
||
justify-content:space-between;
|
||
gap:8px;
|
||
padding:8px;
|
||
display:flex
|
||
}
|
||
.tile-label b {
|
||
color:var(--muted);
|
||
text-align:right;
|
||
font-weight:400
|
||
}
|
||
.preview-meta {
|
||
border-top:1px solid var(--line);
|
||
grid-template-columns:repeat(3,1fr);
|
||
gap:8px;
|
||
padding-top:14px;
|
||
display:grid
|
||
}
|
||
.preview-meta span {
|
||
color:var(--muted);
|
||
font:9px var(--font-mono);
|
||
display:block
|
||
}
|
||
.preview-meta b {
|
||
font:11px var(--font-mono);
|
||
margin-top:5px;
|
||
display:block
|
||
}
|
||
.download-btn {
|
||
background:var(--blue);
|
||
color:#fff;
|
||
width:100%;
|
||
height:42px;
|
||
font:11px var(--font-mono);
|
||
border:0;
|
||
justify-content:center;
|
||
align-items:center;
|
||
gap:9px;
|
||
margin-top:18px;
|
||
display:flex
|
||
}
|
||
.preview-note {
|
||
color:var(--muted);
|
||
margin:12px 0 0;
|
||
font-size:11px;
|
||
line-height:1.5
|
||
}
|
||
.footer {
|
||
border-top:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
justify-content:space-between;
|
||
padding:16px clamp(20px,4vw,72px)
|
||
}
|
||
.footer span {
|
||
align-items:center;
|
||
gap:7px;
|
||
display:flex
|
||
}
|
||
.footer b {
|
||
color:var(--blue);
|
||
font-weight:400
|
||
}
|
||
@media (max-width:1200px) {
|
||
.page-grid {
|
||
grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
|
||
gap:32px
|
||
}
|
||
|
||
}
|
||
.dark-mode .app-shell {
|
||
background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
|
||
}
|
||
.dark-mode .tile-canvas {
|
||
background-color:#202a31;
|
||
background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
|
||
}
|
||
.dark-mode .image-preview {
|
||
color:#16202b
|
||
}
|
||
@media (max-width:800px) {
|
||
.topbar {
|
||
flex-wrap:wrap;
|
||
gap:12px;
|
||
height:auto;
|
||
min-height:64px;
|
||
padding:12px 16px
|
||
}
|
||
.top-nav {
|
||
order:3;
|
||
gap:12px;
|
||
width:100%;
|
||
margin:0;
|
||
padding-bottom:2px;
|
||
overflow:auto
|
||
}
|
||
.top-nav a {
|
||
font-size:9px
|
||
}
|
||
.status {
|
||
display:none
|
||
}
|
||
.page-grid {
|
||
padding:36px 16px 48px;
|
||
display:block
|
||
}
|
||
.title-row {
|
||
margin-bottom:40px;
|
||
display:block
|
||
}
|
||
.file-chip {
|
||
width:max-content;
|
||
margin-top:22px
|
||
}
|
||
.controls,.controls.compact {
|
||
grid-template-columns:1fr
|
||
}
|
||
.preview-panel {
|
||
margin-top:36px;
|
||
position:static
|
||
}
|
||
.footer {
|
||
flex-wrap:wrap;
|
||
gap:12px;
|
||
padding:0 16px 20px
|
||
}
|
||
.footer span:last-child {
|
||
display:none
|
||
}
|
||
|
||
}
|
||
@media (max-width:1100px) {
|
||
.preview-stack {
|
||
grid-template-columns:repeat(3,minmax(220px,1fr))
|
||
}
|
||
|
||
}
|
||
.preview-actions {
|
||
flex-wrap:wrap;
|
||
justify-content:flex-end
|
||
}
|
||
.download-btn {
|
||
white-space:nowrap
|
||
}
|
||
@media (max-width:800px) {
|
||
.preview-top {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:18px
|
||
}
|
||
.preview-actions {
|
||
justify-content:space-between;
|
||
width:100%
|
||
}
|
||
.preview-meta {
|
||
gap:14px
|
||
}
|
||
.preview-stack {
|
||
grid-template-columns:repeat(2,minmax(0,1fr))
|
||
}
|
||
.tile-canvas {
|
||
min-height:260px
|
||
}
|
||
|
||
}
|
||
@media (max-width:480px) {
|
||
.preview-stack {
|
||
grid-template-columns:1fr
|
||
}
|
||
.preview-meta {
|
||
justify-content:space-between;
|
||
width:100%
|
||
}
|
||
.title-row h1 {
|
||
font-size:40px
|
||
}
|
||
.pipeline-footer {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:12px
|
||
}
|
||
|
||
}
|
||
.tool-page {
|
||
width:100%;
|
||
padding:60px clamp(24px,4vw,72px) 72px
|
||
}
|
||
.tool-title {
|
||
justify-content:space-between;
|
||
align-items:end;
|
||
gap:32px;
|
||
margin-bottom:48px;
|
||
display:flex
|
||
}
|
||
.tool-title h1 {
|
||
margin-bottom:14px
|
||
}
|
||
.tool-status {
|
||
color:#25a96a;
|
||
font:10px var(--font-mono);
|
||
white-space:nowrap;
|
||
align-items:center;
|
||
gap:8px;
|
||
display:flex
|
||
}
|
||
.tool-status i,.auto-note i {
|
||
background:#25a96a;
|
||
border-radius:50%;
|
||
width:6px;
|
||
height:6px
|
||
}
|
||
.gradient-layout {
|
||
grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
|
||
align-items:start;
|
||
gap:56px;
|
||
display:grid
|
||
}
|
||
.settings-panel,.gradient-preview {
|
||
background:var(--panel);
|
||
border:1px solid var(--line)
|
||
}
|
||
.panel-heading,.preview-toolbar {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding:18px 20px;
|
||
display:flex
|
||
}
|
||
.panel-heading strong,.preview-toolbar strong {
|
||
font:600 14px var(--font-mono);
|
||
margin-top:5px;
|
||
display:block
|
||
}
|
||
.setting-group {
|
||
border-bottom:1px solid var(--line);
|
||
padding:22px 20px
|
||
}
|
||
.setting-group label {
|
||
font:10px var(--font-mono);
|
||
letter-spacing:.1em;
|
||
color:var(--muted);
|
||
justify-content:space-between;
|
||
margin-bottom:12px;
|
||
display:flex
|
||
}
|
||
.setting-group output {
|
||
color:var(--blue)
|
||
}
|
||
.color-row {
|
||
align-items:center;
|
||
gap:10px;
|
||
display:flex
|
||
}
|
||
.color-row .color-field {
|
||
flex:1
|
||
}
|
||
.stop-arrow {
|
||
color:var(--muted)
|
||
}
|
||
.gradient-bar {
|
||
border:1px solid var(--line);
|
||
height:14px;
|
||
margin-top:14px
|
||
}
|
||
.direction-grid {
|
||
grid-template-columns:repeat(4,1fr);
|
||
gap:6px;
|
||
margin-top:14px;
|
||
display:grid
|
||
}
|
||
.direction-grid button,.secondary-btn {
|
||
border:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
padding:8px 6px
|
||
}
|
||
.direction-grid button.selected,.secondary-btn:hover {
|
||
background:var(--foreground);
|
||
color:var(--background)
|
||
}
|
||
.wide {
|
||
width:100%
|
||
}
|
||
.settings-footer {
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding:16px 20px;
|
||
display:flex
|
||
}
|
||
.large-canvas {
|
||
background-color:#202a31;
|
||
background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
|
||
background-position:0 0,0 14px,14px -14px,-14px 0;
|
||
background-size:28px 28px;
|
||
padding:24px
|
||
}
|
||
.gradient-art {
|
||
color:#fff;
|
||
min-height:clamp(420px,42vw,680px);
|
||
font:12px var(--font-mono);
|
||
place-content:center;
|
||
justify-items:center;
|
||
display:grid
|
||
}
|
||
.art-mark {
|
||
border:1px solid #ffffffa6;
|
||
place-items:center;
|
||
width:70px;
|
||
height:70px;
|
||
margin-bottom:12px;
|
||
font-size:16px;
|
||
display:grid
|
||
}
|
||
.code-block {
|
||
padding:16px 20px
|
||
}
|
||
.code-block>div {
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
display:flex
|
||
}
|
||
.code-block pre {
|
||
background:var(--background);
|
||
color:var(--blue);
|
||
font:12px/1.6 var(--font-mono);
|
||
white-space:pre-wrap;
|
||
margin:12px 0 0;
|
||
padding:14px
|
||
}
|
||
.preview-actions {
|
||
align-items:center;
|
||
gap:10px;
|
||
display:flex
|
||
}
|
||
.secondary-btn {
|
||
align-items:center;
|
||
gap:8px;
|
||
display:flex
|
||
}
|
||
.dark-mode .large-canvas {
|
||
background-color:#202a31
|
||
}
|
||
.remover-layout {
|
||
grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
|
||
align-items:start;
|
||
gap:56px;
|
||
display:grid
|
||
}
|
||
.remover-preview {
|
||
background:var(--panel);
|
||
border:1px solid var(--line);
|
||
min-width:0
|
||
}
|
||
.comparison-grid {
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:18px;
|
||
padding:20px;
|
||
display:grid
|
||
}
|
||
.image-card {
|
||
min-width:0
|
||
}
|
||
.image-label {
|
||
font:10px var(--font-mono);
|
||
color:var(--muted);
|
||
justify-content:space-between;
|
||
margin-bottom:10px;
|
||
display:flex
|
||
}
|
||
.image-label span {
|
||
color:var(--blue)
|
||
}
|
||
.image-label b {
|
||
font-weight:400
|
||
}
|
||
.remover-canvas {
|
||
border:1px solid var(--line);
|
||
place-items:center;
|
||
min-height:clamp(360px,30vw,560px);
|
||
display:grid;
|
||
position:relative;
|
||
overflow:hidden
|
||
}
|
||
.source-canvas {
|
||
background:#e8eef2
|
||
}
|
||
.subject {
|
||
color:#ffffffd9;
|
||
width:74%;
|
||
height:68%;
|
||
font:600 14px var(--font-mono);
|
||
text-shadow:0 1px 2px #17212b;
|
||
place-items:center;
|
||
transition:all .2s;
|
||
display:grid
|
||
}
|
||
.subject-source {
|
||
transform:rotate(-3deg)
|
||
}
|
||
.canvas-size {
|
||
font:9px var(--font-mono);
|
||
color:var(--muted);
|
||
position:absolute;
|
||
bottom:9px;
|
||
right:10px
|
||
}
|
||
.result-meta {
|
||
border-top:1px solid var(--line);
|
||
font:10px var(--font-mono);
|
||
color:var(--muted);
|
||
gap:24px;
|
||
padding:16px 20px;
|
||
display:flex
|
||
}
|
||
.result-meta b {
|
||
color:var(--foreground);
|
||
margin-left:6px;
|
||
font-weight:600
|
||
}
|
||
.processed {
|
||
color:#25a96a;
|
||
font:10px var(--font-mono);
|
||
align-items:center;
|
||
gap:5px;
|
||
display:flex
|
||
}
|
||
.color-reference,.range-hints {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
justify-content:space-between;
|
||
margin-top:10px;
|
||
display:flex
|
||
}
|
||
.color-reference {
|
||
justify-content:flex-start;
|
||
gap:8px
|
||
}
|
||
.color-reference span {
|
||
border:1px solid var(--line);
|
||
width:9px;
|
||
height:9px
|
||
}
|
||
.native-color {
|
||
width:30px;
|
||
border:0!important;
|
||
padding:0!important
|
||
}
|
||
.toggle-group label {
|
||
cursor:pointer;
|
||
align-items:center
|
||
}
|
||
.toggle-group input {
|
||
display:none
|
||
}
|
||
.toggle {
|
||
border:1px solid var(--line);
|
||
width:32px;
|
||
height:18px;
|
||
position:relative
|
||
}
|
||
.toggle:after {
|
||
content:"";
|
||
background:var(--muted);
|
||
width:10px;
|
||
height:10px;
|
||
transition:transform .2s;
|
||
position:absolute;
|
||
top:3px;
|
||
left:3px
|
||
}
|
||
.toggle-group input:checked+.toggle {
|
||
background:var(--blue);
|
||
border-color:var(--blue)
|
||
}
|
||
.toggle-group input:checked+.toggle:after {
|
||
background:#fff;
|
||
transform:translate(14px)
|
||
}
|
||
.toggle-group p {
|
||
color:var(--muted);
|
||
margin:8px 0 0;
|
||
font-size:12px;
|
||
line-height:1.5
|
||
}
|
||
.catalog-nav {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
gap:24px;
|
||
margin:-64px 0 64px;
|
||
padding:18px 0;
|
||
display:flex
|
||
}
|
||
.catalog-brand {
|
||
color:var(--foreground);
|
||
font:600 14px var(--font-mono);
|
||
text-decoration:none
|
||
}
|
||
.catalog-nav nav {
|
||
gap:24px;
|
||
display:flex
|
||
}
|
||
.catalog-nav nav a,.catalog-nav-status {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
text-decoration:none
|
||
}
|
||
.catalog-nav nav a:hover,.catalog-nav nav a.current {
|
||
color:var(--blue)
|
||
}
|
||
.catalog-nav-status {
|
||
color:#25a96a
|
||
}
|
||
.catalog-page {
|
||
width:100%;
|
||
max-width:none;
|
||
margin:0;
|
||
padding:60px clamp(24px,4vw,72px) 72px
|
||
}
|
||
.catalog-head {
|
||
border-bottom:1px solid var(--line);
|
||
justify-content:space-between;
|
||
align-items:flex-end;
|
||
gap:40px;
|
||
padding-bottom:42px;
|
||
display:flex
|
||
}
|
||
.catalog-head h1 {
|
||
margin:12px 0 14px
|
||
}
|
||
.catalog-head p {
|
||
max-width:660px;
|
||
color:var(--muted);
|
||
font:14px/1.6 var(--font-mono);
|
||
margin:0
|
||
}
|
||
.catalog-total {
|
||
color:var(--muted);
|
||
font:10px/1.4 var(--font-mono);
|
||
text-align:right;
|
||
align-items:center;
|
||
gap:14px;
|
||
display:flex
|
||
}
|
||
.catalog-total b {
|
||
color:var(--blue);
|
||
font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
|
||
letter-spacing:-.08em
|
||
}
|
||
.catalog-toolbar {
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
gap:24px;
|
||
padding:24px 0 42px;
|
||
display:flex
|
||
}
|
||
.catalog-search {
|
||
border:1px solid var(--line);
|
||
width:min(420px,100%);
|
||
color:var(--muted);
|
||
align-items:center;
|
||
gap:12px;
|
||
padding:12px 14px;
|
||
display:flex
|
||
}
|
||
.catalog-search input {
|
||
width:100%;
|
||
color:var(--foreground);
|
||
font:12px var(--font-mono);
|
||
background:0 0;
|
||
border:0;
|
||
outline:0
|
||
}
|
||
.catalog-filters {
|
||
color:var(--muted);
|
||
flex-wrap:wrap;
|
||
align-items:center;
|
||
gap:6px;
|
||
display:flex
|
||
}
|
||
.catalog-filters button {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
background:0 0;
|
||
border:1px solid #0000;
|
||
padding:8px 10px
|
||
}
|
||
.catalog-filters button:hover,.catalog-filters button.active {
|
||
border-color:var(--blue);
|
||
color:var(--blue)
|
||
}
|
||
.catalog-groups {
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:56px 28px;
|
||
display:grid
|
||
}
|
||
.catalog-group {
|
||
min-width:0
|
||
}
|
||
.group-title {
|
||
border-bottom:1px solid var(--line);
|
||
color:var(--foreground);
|
||
font:600 11px var(--font-mono);
|
||
letter-spacing:.12em;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding-bottom:12px;
|
||
display:flex
|
||
}
|
||
.group-title i {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
font-style:normal
|
||
}
|
||
.tool-cards {
|
||
gap:10px;
|
||
padding-top:14px;
|
||
display:grid
|
||
}
|
||
.tool-card {
|
||
border:1px solid var(--line);
|
||
background:var(--panel);
|
||
min-height:106px;
|
||
color:var(--foreground);
|
||
grid-template-columns:42px minmax(0,1fr) 24px 18px;
|
||
align-items:center;
|
||
gap:14px;
|
||
padding:16px;
|
||
text-decoration:none;
|
||
transition:border-color .18s,transform .18s,background .18s;
|
||
display:grid
|
||
}
|
||
.tool-card:hover {
|
||
border-color:var(--blue);
|
||
background:var(--panel-strong);
|
||
transform:translateY(-2px)
|
||
}
|
||
.tool-icon {
|
||
background:var(--blue);
|
||
place-items:center;
|
||
width:42px;
|
||
height:42px;
|
||
display:grid
|
||
}
|
||
@supports (color:color-mix(in lab, red, red)) {
|
||
.tool-icon {
|
||
background:color-mix(in srgb,var(--blue) 12%,transparent)
|
||
}
|
||
|
||
}
|
||
.tool-icon {
|
||
color:var(--blue)
|
||
}
|
||
.tool-copy {
|
||
gap:8px;
|
||
min-width:0;
|
||
display:grid
|
||
}
|
||
.tool-copy strong {
|
||
font:600 13px var(--font-mono)
|
||
}
|
||
.tool-copy span {
|
||
color:var(--muted);
|
||
font:12px/1.5 var(--font-mono)
|
||
}
|
||
.tool-index {
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
align-self:start
|
||
}
|
||
.tool-arrow {
|
||
color:var(--blue);
|
||
opacity:0;
|
||
transition:opacity .18s,transform .18s
|
||
}
|
||
.tool-card:hover .tool-arrow {
|
||
opacity:1;
|
||
transform:translate(2px,-2px)
|
||
}
|
||
.catalog-empty {
|
||
border:1px dashed var(--line);
|
||
color:var(--muted);
|
||
font:12px var(--font-mono);
|
||
align-items:center;
|
||
gap:10px;
|
||
padding:40px;
|
||
display:flex
|
||
}
|
||
.catalog-footer {
|
||
border-top:1px solid var(--line);
|
||
color:var(--muted);
|
||
font:10px var(--font-mono);
|
||
margin-top:64px;
|
||
padding-top:20px
|
||
}
|
||
.catalog-footer span {
|
||
color:var(--blue);
|
||
margin:0 8px
|
||
}
|
||
@media (max-width:800px) {
|
||
.catalog-nav {
|
||
margin:-36px 0 36px
|
||
}
|
||
.catalog-nav-status {
|
||
display:none
|
||
}
|
||
.catalog-nav nav {
|
||
gap:14px
|
||
}
|
||
.catalog-page {
|
||
padding:36px 16px 48px
|
||
}
|
||
.catalog-head {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:24px
|
||
}
|
||
.catalog-total {
|
||
text-align:left
|
||
}
|
||
.catalog-toolbar {
|
||
flex-direction:column;
|
||
align-items:stretch;
|
||
padding-bottom:30px
|
||
}
|
||
.catalog-search {
|
||
width:100%
|
||
}
|
||
.catalog-groups {
|
||
grid-template-columns:1fr;
|
||
gap:36px
|
||
}
|
||
.tool-card {
|
||
grid-template-columns:38px minmax(0,1fr) 18px;
|
||
gap:12px;
|
||
min-height:96px
|
||
}
|
||
.tool-icon {
|
||
width:38px;
|
||
height:38px
|
||
}
|
||
.tool-index {
|
||
display:none
|
||
}
|
||
.tool-arrow {
|
||
opacity:1
|
||
}
|
||
.tool-page {
|
||
padding:36px 16px 48px
|
||
}
|
||
.tool-title {
|
||
display:block
|
||
}
|
||
.tool-status {
|
||
margin-top:22px
|
||
}
|
||
.gradient-layout,.remover-layout {
|
||
grid-template-columns:1fr;
|
||
gap:24px
|
||
}
|
||
.gradient-preview,.remover-preview {
|
||
order:-1
|
||
}
|
||
.gradient-art {
|
||
min-height:340px
|
||
}
|
||
.preview-toolbar {
|
||
flex-direction:column;
|
||
align-items:flex-start;
|
||
gap:16px
|
||
}
|
||
.preview-actions {
|
||
justify-content:flex-end;
|
||
width:100%
|
||
}
|
||
.comparison-grid {
|
||
grid-template-columns:1fr
|
||
}
|
||
.remover-canvas {
|
||
min-height:300px
|
||
}
|
||
.result-meta {
|
||
flex-wrap:wrap;
|
||
gap:12px 18px
|
||
}
|
||
|
||
}
|
||
@property --tw-border-style {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:solid
|
||
}
|
||
@property --tw-font-weight {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-shadow-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-shadow-alpha {
|
||
syntax:"<percentage>";
|
||
inherits:false;
|
||
initial-value:100%
|
||
}
|
||
@property --tw-inset-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-inset-shadow-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-inset-shadow-alpha {
|
||
syntax:"<percentage>";
|
||
inherits:false;
|
||
initial-value:100%
|
||
}
|
||
@property --tw-ring-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-ring-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-inset-ring-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-inset-ring-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-ring-inset {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-ring-offset-width {
|
||
syntax:"<length>";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-ring-offset-color {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:#fff
|
||
}
|
||
@property --tw-ring-offset-shadow {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0 0 #0000
|
||
}
|
||
@property --tw-outline-style {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:solid
|
||
}
|
||
@property --tw-blur {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-brightness {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-contrast {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-grayscale {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-hue-rotate {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-invert {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-opacity {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-saturate {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-sepia {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-drop-shadow {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-drop-shadow-color {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-drop-shadow-alpha {
|
||
syntax:"<percentage>";
|
||
inherits:false;
|
||
initial-value:100%
|
||
}
|
||
@property --tw-drop-shadow-size {
|
||
syntax:"*";
|
||
inherits:false
|
||
}
|
||
@property --tw-translate-x {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-translate-y {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
@property --tw-translate-z {
|
||
syntax:"*";
|
||
inherits:false;
|
||
initial-value:0
|
||
}
|
||
</style>
|
||
<meta name="theme-color" content="#eef1f4"/>
|
||
<meta name="color-scheme" content="light"/>
|
||
<title>easy-png-tools / Demo
|
||
</title>
|
||
<meta name="description" content="Technical workspace for building PNG processing pipelines."/>
|
||
<meta name="generator" content="easy-png-tools"/>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div hidden="">
|
||
<!--$-->
|
||
<!--/$-->
|
||
</div>
|
||
<main class="app-shell">
|
||
<header class="topbar">
|
||
<a class="brand" href="/">
|
||
<span class="brand-mark">EP
|
||
</span>
|
||
<span>easy-png-tools
|
||
</span>
|
||
<span class="version">/
|
||
<!-- -->BACKGROUND REMOVER
|
||
</span>
|
||
</a>
|
||
<nav class="top-nav" aria-label="Primary navigation">
|
||
<a class="" href="/">Workspace
|
||
</a>
|
||
<a class="" href="/easy-png-tools/list-tools">Catalog
|
||
</a>
|
||
<a class="" href="/easy-png-tools/gradient">Gradient
|
||
</a>
|
||
<a class="active" href="/easy-png-tools/background-remover">Background remover
|
||
</a>
|
||
</nav>
|
||
<div class="top-actions">
|
||
<span class="status">
|
||
<i>
|
||
</i>
|
||
<!-- -->AUTO PROCESSING
|
||
</span>
|
||
<button class="icon-btn" aria-label="Help">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="10">
|
||
</circle>
|
||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3">
|
||
</path>
|
||
<path d="M12 17h.01">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<button class="icon-btn" aria-label="Toggle theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true">
|
||
<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
<div class="language">
|
||
<button class="active">RU
|
||
</button>
|
||
<span>/
|
||
</span>
|
||
<button>EN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="tool-page">
|
||
<div class="eyebrow">PNG PROCESSING
|
||
<span>/
|
||
</span> SINGLE TOOL
|
||
</div>
|
||
<div class="tool-title">
|
||
<div>
|
||
<h1>Remove background.
|
||
</h1>
|
||
<p class="lede">Select a background color and tune the edge detection. Changes are processed automatically in your browser.
|
||
</p>
|
||
</div>
|
||
<span class="tool-status">
|
||
<i>
|
||
</i> LIVE PREVIEW
|
||
</span>
|
||
</div>
|
||
<div class="remover-layout">
|
||
<section class="settings-panel">
|
||
<div class="panel-heading">
|
||
<div>
|
||
<span class="label">REMOVER SETTINGS
|
||
</span>
|
||
<strong>Configure detection
|
||
</strong>
|
||
</div>
|
||
<span class="step-type">TOOL 02
|
||
</span>
|
||
</div>
|
||
<div class="setting-group">
|
||
<label>BACKGROUND COLOR
|
||
</label>
|
||
<div class="color-field">
|
||
<span class="swatch" style="background:#E8EEF2">
|
||
</span>
|
||
<input value="#E8EEF2"/>
|
||
<input class="native-color" type="color" aria-label="Choose background color" value="#E8EEF2"/>
|
||
</div>
|
||
<div class="color-reference">
|
||
<span style="background:#E8EEF2">
|
||
</span> sampled from image background
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<label>COLOR SIMILARITY
|
||
<output>72
|
||
<!-- -->%
|
||
</output>
|
||
</label>
|
||
<input type="range" min="0" max="100" value="72"/>
|
||
<div class="range-hints">
|
||
<span>strict edges
|
||
</span>
|
||
<span>more removal
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group toggle-group">
|
||
<label>
|
||
<span>OUTER COLOR ONLY
|
||
</span>
|
||
<input type="checkbox" checked=""/>
|
||
<b class="toggle">
|
||
</b>
|
||
</label>
|
||
<p>Only remove connected background pixels from the edges.
|
||
</p>
|
||
</div>
|
||
<div class="setting-group toggle-group">
|
||
<label>
|
||
<span>SHOW MASK
|
||
</span>
|
||
<input type="checkbox"/>
|
||
<b class="toggle">
|
||
</b>
|
||
</label>
|
||
<p>Preview the detected transparency mask.
|
||
</p>
|
||
</div>
|
||
<div class="settings-footer">
|
||
<button class="reset-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true">
|
||
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8">
|
||
</path>
|
||
<path d="M3 3v5h5">
|
||
</path>
|
||
</svg> Reset
|
||
</button>
|
||
<span class="auto-note">
|
||
<i>
|
||
</i> updates automatically
|
||
</span>
|
||
</div>
|
||
</section>
|
||
<section class="remover-preview">
|
||
<div class="preview-toolbar">
|
||
<div>
|
||
<span class="label">SOURCE / RESULT
|
||
</span>
|
||
<strong>comparison.png
|
||
</strong>
|
||
</div>
|
||
<div class="preview-actions">
|
||
<span class="processed">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5">
|
||
</path>
|
||
</svg> processed
|
||
</span>
|
||
<button class="download-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true">
|
||
<path d="M12 15V3">
|
||
</path>
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
|
||
</path>
|
||
<path d="m7 10 5 5 5-5">
|
||
</path>
|
||
</svg>
|
||
<!-- -->Download result
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="comparison-grid">
|
||
<div class="image-card">
|
||
<div class="image-label">
|
||
<span>SOURCE
|
||
</span>
|
||
<b>original.png
|
||
</b>
|
||
</div>
|
||
<div class="remover-canvas source-canvas">
|
||
<div class="subject subject-source" style="background:linear-gradient(145deg,#1769d2 0 38%,#00a8c7 38% 66%,#bd7411 66%);opacity:1;clip-path:polygon(23% 11%, 73% 8%, 89% 30%, 79% 81%, 52% 93%, 17% 78%, 8% 39%)">
|
||
<span>OBJECT
|
||
</span>
|
||
</div>
|
||
<span class="canvas-size">1200 × 800
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="image-card">
|
||
<div class="image-label">
|
||
<span>RESULT
|
||
</span>
|
||
<b>removed-bg.png
|
||
</b>
|
||
</div>
|
||
<div class="remover-canvas" style="background:repeating-conic-gradient(#d7dce0 0 25%, #f3f5f6 0 50%) 50% / 28px 28px">
|
||
<div class="subject" style="background:linear-gradient(145deg,#1769d2 0 38%,#00a8c7 38% 66%,#bd7411 66%);opacity:1;clip-path:polygon(23% 11%, 73% 8%, 89% 30%, 79% 81%, 52% 93%, 17% 78%, 8% 39%)">
|
||
<span>PNG
|
||
</span>
|
||
</div>
|
||
<span class="canvas-size">1200 × 800
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="result-meta">
|
||
<span>FORMAT
|
||
<b>PNG-24
|
||
</b>
|
||
</span>
|
||
<span>ALPHA
|
||
<b>ENABLED
|
||
</b>
|
||
</span>
|
||
<span>SIMILARITY
|
||
<b>72
|
||
<!-- -->%
|
||
</b>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<footer class="footer">
|
||
<span>easy-png-tools
|
||
<b>v2.4.0
|
||
</b>
|
||
</span>
|
||
<span>background remover · local-only
|
||
</span>
|
||
<span>© 2024
|
||
</span>
|
||
</footer>
|
||
</main>
|
||
<!--$-->
|
||
<!--/$-->
|
||
<!--$!-->
|
||
<template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
|
||
</template>
|
||
<!--/$-->
|
||
|
||
<script>
|
||
(function () {
|
||
var btn = document.querySelector('button[aria-label="Toggle theme"]');
|
||
var shell = document.querySelector('.app-shell');
|
||
if (!btn || window.__themeToggleInjected) return;
|
||
window.__themeToggleInjected = true;
|
||
btn.addEventListener('click', function () {
|
||
document.documentElement.classList.toggle('dark-mode');
|
||
if (shell) shell.classList.toggle('dark-mode');
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html> |