Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: css fixes

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-08 18:29:56 +05:00
parent 3f21f1c024
commit 420d03f58c
16 changed files with 130 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/CatalogGroup.svelte
+1
View File
@@ -46,6 +46,7 @@
}
.tool-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-m);
}
</style>
web/src/lib/components/kit/CatalogToolbar.svelte
+8 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Filter, Search } from "@lucide/svelte";
import { Funnel, Search } from "@lucide/svelte";
interface Props {
query: string;
@@ -18,6 +18,8 @@
{ value: "analyze", label: "ANALYZE" },
{ value: "generate", label: "GENERATE" },
];
// TODO: Button component
</script>
<div class="catalog-toolbar">
@@ -30,13 +32,15 @@
/>
</label>
<div class="catalog-filters">
<Filter size={15} />
<Funnel size={15} />
{#each FILTERS as f (f.value)}
<button
type="button"
class:active={category === f.value}
onclick={() => (category = f.value)}>{f.label}</button
onclick={() => (category = f.value)}
>
{f.label}
</button>
{/each}
</div>
</div>
@@ -79,7 +83,7 @@
}
.catalog-filters button {
border: var(--size-border) solid var(--color-border);
background: transparent;
background: var(--color-panel);
color: var(--color-text-muted);
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-m);
web/src/lib/components/kit/Dropzone.svelte
+2 -2
View File
@@ -73,8 +73,8 @@
cursor: pointer;
text-align: center;
transition:
border-color var(--duration-m) ease,
background var(--duration-m) ease;
border-color var(--duration-s) ease,
background var(--duration-s) ease;
}
.dropzone:hover,
.dropzone:focus-visible,
web/src/lib/components/kit/PanelHeading.svelte
+1
View File
@@ -26,6 +26,7 @@
gap: var(--space-xl);
padding: var(--space-l) var(--space-xl);
border-bottom: var(--size-border) solid var(--color-border);
margin-bottom: var(--space-m);
}
.heading-text {
display: flex;
web/src/lib/components/kit/SchemaResultTile.svelte
+23 -4
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import SchemaTextResult from "./SchemaTextResult.svelte";
import { toDataUrl } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types";
import { Check } from "@lucide/svelte";
import { Check, RefreshCw } from "@lucide/svelte";
import SchemaTextResult from "./SchemaTextResult.svelte";
interface Props {
resultKind?: "image" | "text" | "verdict";
@@ -27,7 +27,14 @@
</script>
<figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
<figcaption>
<span>
RESULT
{#if running}
<RefreshCw class="rotating" size="16" />
{/if}
</span>
</figcaption>
<div class="canvas" class:checker={resultKind === "image"}>
{#if resultKind === "text" && textResult}
<div class="text-result-wrap">
@@ -65,6 +72,9 @@
margin-bottom: var(--space-m);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text-muted);
& :global(.rotating) {
animation: rotate var(--duration-l) linear infinite;
}
}
.canvas {
display: flex;
@@ -72,7 +82,7 @@
justify-content: center;
min-height: clamp(var(--space-brand), 30vh, 60vh);
border: var(--size-border) solid var(--color-border);
border-radius: var(--radius-m);
border-radius: var(--radius-s);
overflow: hidden;
background: var(--color-background-muted);
color: var(--color-text-muted);
@@ -98,4 +108,13 @@
padding: var(--space-l);
box-sizing: border-box;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
web/src/lib/components/kit/SchemaSourceTile.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import SchemaTextSource from "./SchemaTextSource.svelte";
import { toDataUrl } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types";
import SchemaTextSource from "./SchemaTextSource.svelte";
interface Props {
mode: "file" | "text";
@@ -58,7 +58,7 @@
justify-content: center;
min-height: clamp(var(--space-brand), 30vh, 60vh);
border: var(--size-border) solid var(--color-border);
border-radius: var(--radius-m);
border-radius: var(--radius-s);
overflow: hidden;
background: var(--color-background-muted);
color: var(--color-text-muted);
web/src/lib/components/kit/SchemaToolView.svelte
+1
View File
@@ -221,6 +221,7 @@
.schema-tool {
padding: calc(var(--space-xxxl) + var(--space-l))
clamp(var(--space-m), 4vw, var(--space-xxxl));
flex: 1;
}
.header {
display: flex;
web/src/lib/components/kit/ToolCard.svelte
+3 -3
View File
@@ -29,9 +29,9 @@
<style>
.tool-card {
display: grid;
grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) var(
--space-xxl
) var(--size-tool-arrow);
grid-template-columns:
var(--size-tool-icon) minmax(0, 1fr) var(--space-xxl)
var(--size-tool-arrow);
align-items: center;
gap: var(--space-l);
min-height: var(--size-tool-min-height);
web/src/lib/components/kit/layout/Footer.svelte
+1
View File
@@ -13,6 +13,7 @@
align-items: center;
justify-content: space-between;
padding: var(--space-xl);
background: var(--color-background);
border-top: var(--size-border) solid var(--color-border);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text-muted);
web/src/lib/components/kit/ui/LangToggle.svelte
+4 -2
View File
@@ -9,8 +9,10 @@
type="button"
class="lang-btn"
class:active={lang === "RU"}
onclick={() => (lang = "RU")}>RU</button
><span class="lang-div">/</span>
onclick={() => (lang = "RU")}
>
RU
</button>
<button
type="button"
class="lang-btn"
web/src/lib/components/kit/ui/TopNav.svelte
+1 -4
View File
@@ -3,11 +3,8 @@
</script>
<nav class="nav">
<a href={resolve("/preview")}>Home page</a>
<a href={resolve("/preview/list-tools")}>Catalog</a>
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
<a href={resolve("/preview/tools/remove-background-png")}>
Background remover
</a>
<a href={resolve("/preview/kit")}> UI Kit </a>
</nav>
web/src/lib/registry.ts
+7 -6
View File
@@ -2,14 +2,16 @@
import type { OutputMime } from "./core/io";
import type { PixelImage } from "./core/types";
import { convertEntries } from "./registry/convert";
import { geometryEntries } from "./registry/geometry";
import { alphaEntries } from "./registry/alpha";
import { colorEntries } from "./registry/color";
import { analyzeEntries } from "./registry/analyze";
import { generateEntries } from "./registry/generate";
import { textEntries } from "./registry/text";
import { colorEntries } from "./registry/color";
import { convertEntries } from "./registry/convert";
import { filterEntries } from "./registry/filters";
import { generateEntries } from "./registry/generate";
import { geometryEntries } from "./registry/geometry";
import { textEntries } from "./registry/text";
// TODO: remove convert tools - move to load image \ download button flow
export type ParamDef =
| {
@@ -119,7 +121,6 @@ export const TOOLS: ToolEntry[] = [
..._analyze.slice(11, 13),
];
import { TOOL_ICONS } from "./tools/tool-icons";
import { TOOL_POPULARITY } from "./tools/tool-popularity";
for (const entry of TOOLS) {