easy-png-tools2/refs/app/globals.css

@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--line); --font-sans: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; }
:root { 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 { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-sans); } button,input { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; background-color:var(--background); background-image:linear-gradient(#dce2e7 1px,transparent 1px),linear-gradient(90deg,#dce2e7 1px,transparent 1px); background-size:32px 32px; }.dark-mode { --background:#11171d; --foreground:#e8eef2; --panel:#182129; --line:#33414c; --muted:#91a0ac; --blue:#54a2ff; background-image:linear-gradient(rgba(30,42,52,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(30,42,52,.28) 1px,transparent 1px); }
.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer { display:flex; align-items:center; }.topbar { height:64px; border-bottom:1px solid var(--line); background:var(--panel); justify-content:space-between; padding:0 clamp(20px,4vw,64px); }.topbar > .brand { color:var(--foreground); text-decoration:none; }.top-nav { display:flex; align-items:center; gap:22px; margin-left:auto; margin-right:28px; }.top-nav a { color:var(--muted); font:10px var(--font-mono); text-decoration:none; white-space:nowrap; }.top-nav a:hover,.top-nav a.active { color:var(--blue); }.brand { gap:10px; font:600 14px var(--font-mono); }.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--blue); color:white; font-size:11px; }.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 { gap:7px; color:var(--muted); font:10px var(--font-mono); letter-spacing:.08em; }.status i,.auto-note i { width:6px; height:6px; background:#25a96a; border-radius:50%; }.icon-btn { display:grid; place-items:center; border:0; background:transparent; color:var(--muted); padding:6px; }.language { border:1px solid var(--line); }.language button { border:0; background:transparent; padding:6px 9px; color:var(--muted); font:10px var(--font-mono); }.language .active { background:var(--foreground); color:var(--background); }
.page-grid { width:100%; max-width:none; margin:auto; padding:60px clamp(24px,4vw,72px) 72px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr); gap:56px; align-items:start; }.preview-panel { position:sticky; top:24px; margin-top:0; min-width:0; }.preview-top { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; }.preview-actions { display:flex; align-items:center; gap:18px; }.preview-meta { display:flex; gap:24px; }.preview-meta div { display:grid; gap:5px; }.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 { display:grid; width:100%; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.preview-tile { width:100%; min-width:0; overflow:hidden; }.history-toggle { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:18px; padding:11px 14px; border:1px solid var(--line); background:transparent; color:var(--muted); font:10px var(--font-mono); letter-spacing:.04em; }.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 { max-width:100%; min-width:0; 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 { font-size:clamp(36px,4vw,64px); line-height:1; letter-spacing:-.06em; margin:0 0 16px; max-width:700px; font-weight:650; }.lede { color:var(--muted); margin:0; max-width:550px; line-height:1.6; }.file-chip { white-space:nowrap; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel); padding:10px 12px; font:11px var(--font-mono); color:var(--muted); }.file-chip b { color:var(--blue); font-weight:500; }.pipeline-head { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; }.pipeline-head strong,.preview-top strong { display:block; font:600 14px var(--font-mono); margin-top:5px; }.pipeline-head em { color:#25a96a; font-style:normal; font-size:10px; }.add-btn,.reset-btn { border:0; background:transparent; color:var(--blue); display:flex; align-items:center; gap:7px; font-size:12px; }.steps-list { padding-top:14px; display:grid; gap:10px; }.step-card { display:grid; grid-template-columns:46px 20px 1fr; min-height:138px; border:1px solid var(--line); background:var(--panel); }.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 { border:0; background:none; color:var(--muted); }.check { color:#238354; font:10px var(--font-mono); display:flex; align-items:center; gap:4px; }.controls { display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:16px; }.controls.compact { grid-template-columns:1fr 1fr; }.control-block label { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font:10px var(--font-mono); letter-spacing:.08em; }.control-block output { color:var(--foreground); }.color-field { display:flex; align-items:center; gap:8px; border:1px solid var(--line); height:32px; padding:0 8px; }.swatch { width:14px; height:14px; border:1px solid var(--line); }.swatch.dark { background:#16202b; }.color-field input { min-width:0; flex:1; border:0; outline:0; color:var(--foreground); background:transparent; font:11px var(--font-mono); }.control-block input[type=range] { width:100%; accent-color:var(--blue); }.segmented { display:flex; border:1px solid var(--line); height:32px; }.segmented button { flex:1; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); font:10px var(--font-mono); }.segmented .selected { background:var(--blue); color:white; }.transform-note,.auto-note { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px var(--font-mono); }.pipeline-footer { justify-content:space-between; padding-top:18px; }.auto-note { color:var(--muted); }.auto-note i { display:inline-block; }.preview-panel { position:sticky; top:24px; align-self:start; border:1px solid var(--line); background:var(--panel); padding:18px; }.preview-top { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:15px; }.preview-stack { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 0; }.preview-tile { border:1px solid var(--line); background:var(--background); }.preview-tile.active { border-color:var(--blue); }.tile-canvas { aspect-ratio:1.35; display:grid; place-items:center; padding:16px; background-color:#e4e8eb; background-image:linear-gradient(45deg,#d2d8dc 25%,transparent 25%),linear-gradient(-45deg,#d2d8dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2d8dc 75%),linear-gradient(-45deg,transparent 75%,#d2d8dc 75%); background-size:14px 14px; background-position:0 0,0 7px,7px -7px,-7px 0; }.image-preview { width:80%; aspect-ratio:1.5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#16202b; font:600 10px var(--font-mono); }.sample-icon { border:1px solid currentColor; padding:3px 5px; font-size:9px; }.tile-label { display:flex; justify-content:space-between; gap:8px; padding:8px; border-top:1px solid var(--line); font:9px var(--font-mono); color:var(--blue); }.tile-label b { color:var(--muted); font-weight:400; text-align:right; }.preview-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--line); padding-top:14px; }.preview-meta span { display:block; color:var(--muted); font:9px var(--font-mono); }.preview-meta b { display:block; margin-top:5px; font:11px var(--font-mono); }.download-btn { width:100%; margin-top:18px; height:42px; display:flex; justify-content:center; align-items:center; gap:9px; border:0; background:var(--blue); color:white; font:11px var(--font-mono); }.preview-note { color:var(--muted); font-size:11px; line-height:1.5; margin:12px 0 0; }.footer { justify-content:space-between; border-top:1px solid var(--line); padding:16px clamp(20px,4vw,72px); color:var(--muted); font:10px var(--font-mono); }.footer span { display:flex; gap:7px; align-items:center; }.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(rgba(30,42,52,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(30,42,52,.28) 1px,transparent 1px); }.dark-mode .tile-canvas { background-color:#202a31; background-image:linear-gradient(45deg,#29343c 25%,transparent 25%),linear-gradient(-45deg,#29343c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#29343c 75%),linear-gradient(-45deg,transparent 75%,#29343c 75%); }.dark-mode .image-preview { color:#16202b; }
@media (max-width:800px) { .topbar { height:auto; min-height:64px; padding:12px 16px; flex-wrap:wrap; gap:12px; }.top-nav { order:3; width:100%; margin:0; gap:12px; overflow:auto; padding-bottom:2px; }.top-nav a { font-size:9px; }.status { display:none; }.page-grid { display:block; padding:36px 16px 48px; }.title-row { display:block; margin-bottom:40px; }.file-chip { margin-top:22px; width:max-content; }.controls,.controls.compact { grid-template-columns:1fr; }.preview-panel { position:static; margin-top:36px; }.footer { padding:0 16px 20px; gap:12px; flex-wrap:wrap; }.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 { align-items:flex-start; flex-direction:column; gap:18px; }.preview-actions { width:100%; justify-content:space-between; }.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 { width:100%; justify-content:space-between; }.title-row h1 { font-size:40px; }.pipeline-footer { align-items:flex-start; flex-direction:column; gap:12px; } }
.tool-page { width:100%; padding:60px clamp(24px,4vw,72px) 72px; }.tool-title { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:48px; }.tool-title h1 { margin-bottom:14px; }.tool-status { display:flex; align-items:center; gap:8px; color:#25a96a; font:10px var(--font-mono); white-space:nowrap; }.tool-status i,.auto-note i { width:6px; height:6px; background:#25a96a; border-radius:50%; }.gradient-layout { display:grid; grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr); gap:56px; align-items:start; }.settings-panel,.gradient-preview { background:var(--panel); border:1px solid var(--line); }.panel-heading,.preview-toolbar { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }.panel-heading strong,.preview-toolbar strong { display:block; margin-top:5px; font:600 14px var(--font-mono); }.setting-group { padding:22px 20px; border-bottom:1px solid var(--line); }.setting-group label { display:flex; justify-content:space-between; margin-bottom:12px; font:10px var(--font-mono); letter-spacing:.1em; color:var(--muted); }.setting-group output { color:var(--blue); }.color-row { display:flex; align-items:center; gap:10px; }.color-row .color-field { flex:1; }.stop-arrow { color:var(--muted); }.gradient-bar { height:14px; margin-top:14px; border:1px solid var(--line); }.direction-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; }.direction-grid button,.secondary-btn { border:1px solid var(--line); background:transparent; color:var(--muted); padding:8px 6px; font:10px var(--font-mono); }.direction-grid button.selected,.secondary-btn:hover { background:var(--foreground); color:var(--background); }.wide { width:100%; }.settings-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }.large-canvas { padding:24px; background-color:#202a31; background-image:linear-gradient(45deg,#29343c 25%,transparent 25%),linear-gradient(-45deg,#29343c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#29343c 75%),linear-gradient(-45deg,transparent 75%,#29343c 75%); background-size:28px 28px; background-position:0 0,0 14px,14px -14px,-14px 0; }.gradient-art { min-height:clamp(420px,42vw,680px); display:grid; place-content:center; justify-items:center; color:#fff; font:12px var(--font-mono); }.art-mark { display:grid; place-items:center; width:70px; height:70px; margin-bottom:12px; border:1px solid rgba(255,255,255,.65); font-size:16px; }.code-block { padding:16px 20px; }.code-block > div { display:flex; justify-content:space-between; align-items:center; }.code-block pre { margin:12px 0 0; padding:14px; background:var(--background); color:var(--blue); font:12px/1.6 var(--font-mono); white-space:pre-wrap; }.preview-actions { display:flex; align-items:center; gap:10px; }.secondary-btn { display:flex; align-items:center; gap:8px; }.dark-mode .large-canvas { background-color:#202a31; }
.remover-layout { display:grid; grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr); gap:56px; align-items:start; }.remover-preview { min-width:0; background:var(--panel); border:1px solid var(--line); }.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:20px; }.image-card { min-width:0; }.image-label { display:flex; justify-content:space-between; margin-bottom:10px; font:10px var(--font-mono); color:var(--muted); }.image-label span { color:var(--blue); }.image-label b { font-weight:400; }.remover-canvas { position:relative; min-height:clamp(360px,30vw,560px); overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); }.source-canvas { background:#e8eef2; }.subject { width:74%; height:68%; display:grid; place-items:center; color:rgba(255,255,255,.85); font:600 14px var(--font-mono); text-shadow:0 1px 2px #17212b; transition:all .2s ease; }.subject-source { transform:rotate(-3deg); }.canvas-size { position:absolute; right:10px; bottom:9px; font:9px var(--font-mono); color:var(--muted); }.result-meta { display:flex; gap:24px; padding:16px 20px; border-top:1px solid var(--line); font:10px var(--font-mono); color:var(--muted); }.result-meta b { color:var(--foreground); font-weight:600; margin-left:6px; }.processed { display:flex; align-items:center; gap:5px; color:#25a96a; font:10px var(--font-mono); }.color-reference,.range-hints { display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); font:10px var(--font-mono); }.color-reference { justify-content:flex-start; gap:8px; }.color-reference span { width:9px; height:9px; border:1px solid var(--line); }.native-color { width:30px; padding:0!important; border:0!important; }.toggle-group label { align-items:center; cursor:pointer; }.toggle-group input { display:none; }.toggle { width:32px; height:18px; border:1px solid var(--line); position:relative; }.toggle:after { content:''; position:absolute; width:10px; height:10px; background:var(--muted); top:3px; left:3px; transition:transform .2s; }.toggle-group input:checked + .toggle { background:var(--blue); border-color:var(--blue); }.toggle-group input:checked + .toggle:after { background:white; transform:translateX(14px); }.toggle-group p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.catalog-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:-64px 0 64px; padding:18px 0; border-bottom:1px solid var(--line); }.catalog-brand { color:var(--foreground); font:600 14px var(--font-mono); text-decoration:none; }.catalog-nav nav { display:flex; gap:24px; }.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 { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:42px; border-bottom:1px solid var(--line); }.catalog-head h1 { margin:12px 0 14px; }.catalog-head p { max-width:660px; margin:0; color:var(--muted); font:14px/1.6 var(--font-mono); }.catalog-total { display:flex; align-items:center; gap:14px; color:var(--muted); font:10px/1.4 var(--font-mono); text-align:right; }.catalog-total b { color:var(--blue); font:400 clamp(48px,5vw,76px)/.9 var(--font-mono); letter-spacing:-.08em; }.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0 42px; }.catalog-search { display:flex; align-items:center; gap:12px; width:min(420px,100%); padding:12px 14px; border:1px solid var(--line); color:var(--muted); }.catalog-search input { width:100%; border:0; outline:0; background:transparent; color:var(--foreground); font:12px var(--font-mono); }.catalog-filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--muted); }.catalog-filters button { padding:8px 10px; border:1px solid transparent; background:transparent; color:var(--muted); font:10px var(--font-mono); }.catalog-filters button:hover,.catalog-filters button.active { border-color:var(--blue); color:var(--blue); }.catalog-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 28px; }.catalog-group { min-width:0; }.group-title { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--foreground); font:600 11px var(--font-mono); letter-spacing:.12em; }.group-title i { color:var(--muted); font:10px var(--font-mono); font-style:normal; }.tool-cards { display:grid; gap:10px; padding-top:14px; }.tool-card { display:grid; grid-template-columns:42px minmax(0,1fr) 24px 18px; align-items:center; gap:14px; min-height:106px; padding:16px; border:1px solid var(--line); background:var(--panel); color:var(--foreground); text-decoration:none; transition:border-color .18s,transform .18s,background .18s; }.tool-card:hover { border-color:var(--blue); background:var(--panel-strong); transform:translateY(-2px); }.tool-icon { display:grid; place-items:center; width:42px; height:42px; background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue); }.tool-copy { min-width:0; display:grid; gap:8px; }.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 { display:flex; gap:10px; align-items:center; padding:40px; border:1px dashed var(--line); color:var(--muted); font:12px var(--font-mono); }.catalog-footer { margin-top:64px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font:10px var(--font-mono); }.catalog-footer span { margin:0 8px; color:var(--blue); } @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 { align-items:flex-start; flex-direction:column; gap:24px; }.catalog-total { text-align:left; }.catalog-toolbar { align-items:stretch; flex-direction:column; padding-bottom:30px; }.catalog-search { width:100%; }.catalog-groups { grid-template-columns:1fr; gap:36px; }.tool-card { min-height:96px; grid-template-columns:38px minmax(0,1fr) 18px; gap:12px; }.tool-icon { width:38px; height:38px; }.tool-index { display:none; }.tool-arrow { opacity:1; } }
@media (max-width:800px) { .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 { align-items:flex-start; flex-direction:column; gap:16px; }.preview-actions { width:100%; justify-content:flex-end; }.comparison-grid { grid-template-columns:1fr; } .remover-canvas { min-height:300px; } .result-meta { flex-wrap:wrap; gap:12px 18px; } }