From 749b97cb4f55b145067bc169da8d4d08848ee4e3 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Mon, 31 Aug 2026 18:07:34 +0500 Subject: [PATCH] fix: change style, demo page visual looks as done --- web/src/lib/components/kit/Badge.svelte | 2 +- web/src/lib/components/kit/ColorField.svelte | 1 + web/src/lib/components/kit/DownloadButton.svelte | 1 + web/src/lib/components/kit/PreviewTile.svelte | 8 ++++++-- web/src/lib/components/kit/Segmented.svelte | 2 -- web/src/lib/components/kit/StepCard.svelte | 4 +--- web/src/lib/components/kit/Toggle.svelte | 4 +--- web/src/lib/components/kit/TopBar.svelte | 2 +- web/src/routes/preview/demo/+page.svelte | 9 ++++++--- 9 files changed, 18 insertions(+), 15 deletions(-) diff --git a/web/src/lib/components/kit/Badge.svelte b/web/src/lib/components/kit/Badge.svelte index 4559aca..8743de2 100644 --- a/web/src/lib/components/kit/Badge.svelte +++ b/web/src/lib/components/kit/Badge.svelte @@ -25,7 +25,7 @@ line-height: normal; font-family: var(--font-mono); font-size: 10px; - border: 1px solid var(--line); + border: 0px solid var(--line); color: var(--muted); } .badge--accent { diff --git a/web/src/lib/components/kit/ColorField.svelte b/web/src/lib/components/kit/ColorField.svelte index cce353c..ac69403 100644 --- a/web/src/lib/components/kit/ColorField.svelte +++ b/web/src/lib/components/kit/ColorField.svelte @@ -56,6 +56,7 @@ padding-left: 8px; padding-right: 8px; height: 32px; + border: 1px solid var(--line); } .swatch { width: 14px; diff --git a/web/src/lib/components/kit/DownloadButton.svelte b/web/src/lib/components/kit/DownloadButton.svelte index fd3895a..d14c196 100644 --- a/web/src/lib/components/kit/DownloadButton.svelte +++ b/web/src/lib/components/kit/DownloadButton.svelte @@ -27,6 +27,7 @@ gap: 9px; margin-top: 18px; display: flex; + white-space: nowrap; } .download-btn:hover { background: color-mix(in srgb, var(--blue) 88%, #000); diff --git a/web/src/lib/components/kit/PreviewTile.svelte b/web/src/lib/components/kit/PreviewTile.svelte index 2b64e67..d78170b 100644 --- a/web/src/lib/components/kit/PreviewTile.svelte +++ b/web/src/lib/components/kit/PreviewTile.svelte @@ -4,13 +4,14 @@ interface Props { label: string; caption: string; + active: boolean; children: Snippet; } - let { label, caption, children }: Props = $props(); + let { label, caption, active, children }: Props = $props(); -
+
{@render children()}
{label} @@ -25,6 +26,9 @@ overflow: hidden; border: 1px solid var(--line); background: var(--background); + &.active { + border-color: var(--blue); + } } .tile-canvas { width: 100%; diff --git a/web/src/lib/components/kit/Segmented.svelte b/web/src/lib/components/kit/Segmented.svelte index 860febe..1e425fb 100644 --- a/web/src/lib/components/kit/Segmented.svelte +++ b/web/src/lib/components/kit/Segmented.svelte @@ -36,8 +36,6 @@ display: flex; height: 32px; border: 1px solid var(--line); - overflow: hidden; - background: var(--background); } .segment { border: 0; diff --git a/web/src/lib/components/kit/StepCard.svelte b/web/src/lib/components/kit/StepCard.svelte index edb9a04..4b7304b 100644 --- a/web/src/lib/components/kit/StepCard.svelte +++ b/web/src/lib/components/kit/StepCard.svelte @@ -49,13 +49,11 @@ min-height: 138px; border: 1px solid var(--line); background: var(--panel); - overflow: hidden; } .step-index { font: 11px var(--font-mono); color: var(--blue); padding: 17px 0 0px 15px; - border-right: 1px solid var(--line); } .step-body { padding: 15px 18px 18px; @@ -65,7 +63,7 @@ align-items: center; justify-content: space-between; gap: 15px; - border-bottom: 1px solid var(--line); + border-color: var(--line); } .step-type { color: var(--muted); diff --git a/web/src/lib/components/kit/Toggle.svelte b/web/src/lib/components/kit/Toggle.svelte index cb4cdad..eb0ee15 100644 --- a/web/src/lib/components/kit/Toggle.svelte +++ b/web/src/lib/components/kit/Toggle.svelte @@ -30,7 +30,7 @@ width: 32px; height: 18px; border: 1px solid var(--line); - border-radius: 999px; + border-radius: 0; background: var(--background); cursor: pointer; padding: 0; @@ -40,8 +40,6 @@ border-color: var(--blue); } .toggle-knob { - border-radius: 50%; - background: var(--foreground); transition: transform 0.12s ease; } .toggle.on .toggle-knob { diff --git a/web/src/lib/components/kit/TopBar.svelte b/web/src/lib/components/kit/TopBar.svelte index 393c458..085137c 100644 --- a/web/src/lib/components/kit/TopBar.svelte +++ b/web/src/lib/components/kit/TopBar.svelte @@ -103,6 +103,7 @@ .nav a { color: var(--muted); font: 10px var(--font-mono); + white-space: nowrap; text-decoration: none; } .nav a:hover { @@ -125,7 +126,6 @@ display: flex; align-items: center; border: 1px solid var(--line); - overflow: hidden; } .lang-btn { border: 0; diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte index fc12549..70a3bc2 100644 --- a/web/src/routes/preview/demo/+page.svelte +++ b/web/src/routes/preview/demo/+page.svelte @@ -28,7 +28,7 @@ let outlineWidth = $state(2); let outlineColor = $state("#16202B"); let radius = $state(18); - let preserveAspect = $state(true); + let preserveAspect = $state(false); const previewTiles = [ { label: "SOURCE", caption: "original.png · 1200 × 800", bg: "#8d9aa5" }, @@ -204,10 +204,13 @@ {#each previewTiles as tile (tile.label)} - +