fix: update download button style

This commit is contained in:
2026-09-02 17:37:45 +05:00
parent c590bdf91a
commit ef74cabf1e
4 changed files with 11 additions and 10 deletions
@@ -16,20 +16,21 @@
<style> <style>
.download-btn { .download-btn {
background: var(--blue); background: var(--color-main);
color: #fff; color: var(--color-background);
width: 100%; width: 100%;
height: 42px; height: calc(5 * var(--space-m));
font: 11px var(--font-mono); font-size: var(--font-button);
font-family: var(--font-mono);
border: 0; border: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 9px; gap: var(--space-m);
margin-top: 18px; margin-top: var(--space-xl);
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
} }
.download-btn:hover { .download-btn:hover {
background: color-mix(in srgb, var(--blue) 88%, #000); background: var(--color-main-tint);
} }
</style> </style>
+1 -1
View File
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import ColorField from "$lib/components/kit/ColorField.svelte"; import ColorField from "$lib/components/kit/ColorField.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import FieldGrid from "$lib/components/kit/FieldGrid.svelte"; import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
import IconButton from "$lib/components/kit/IconButton.svelte"; import IconButton from "$lib/components/kit/IconButton.svelte";
import PageGrid from "$lib/components/kit/layout/PageGrid.svelte"; import PageGrid from "$lib/components/kit/layout/PageGrid.svelte";
@@ -14,6 +13,7 @@
import StepCard from "$lib/components/kit/StepCard.svelte"; import StepCard from "$lib/components/kit/StepCard.svelte";
import ToggleRow from "$lib/components/kit/ToggleRow.svelte"; import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
import Badge from "$lib/components/kit/ui/Badge.svelte"; import Badge from "$lib/components/kit/ui/Badge.svelte";
import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
import { import {
ChevronDown, ChevronDown,
Plus, Plus,
+1 -1
View File
@@ -3,7 +3,6 @@
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte"; import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
import CodeBlock from "$lib/components/kit/CodeBlock.svelte"; import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
import ColorField from "$lib/components/kit/ColorField.svelte"; import ColorField from "$lib/components/kit/ColorField.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import EmptyState from "$lib/components/kit/EmptyState.svelte"; import EmptyState from "$lib/components/kit/EmptyState.svelte";
import IconButton from "$lib/components/kit/IconButton.svelte"; import IconButton from "$lib/components/kit/IconButton.svelte";
import ImageCard from "$lib/components/kit/ImageCard.svelte"; import ImageCard from "$lib/components/kit/ImageCard.svelte";
@@ -23,6 +22,7 @@
import ToolCard from "$lib/components/kit/ToolCard.svelte"; import ToolCard from "$lib/components/kit/ToolCard.svelte";
import Badge from "$lib/components/kit/ui/Badge.svelte"; import Badge from "$lib/components/kit/ui/Badge.svelte";
import Button from "$lib/components/kit/ui/Button.svelte"; import Button from "$lib/components/kit/ui/Button.svelte";
import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte"; import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
let mode = $state("preview"); let mode = $state("preview");
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte"; import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import Dropzone from "$lib/components/kit/Dropzone.svelte"; import Dropzone from "$lib/components/kit/Dropzone.svelte";
import EmptyState from "$lib/components/kit/EmptyState.svelte"; import EmptyState from "$lib/components/kit/EmptyState.svelte";
import MetaList from "$lib/components/kit/MetaList.svelte"; import MetaList from "$lib/components/kit/MetaList.svelte";
@@ -10,6 +9,7 @@
import PreviewTile from "$lib/components/kit/PreviewTile.svelte"; import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
import StatusLine from "$lib/components/kit/StatusLine.svelte"; import StatusLine from "$lib/components/kit/StatusLine.svelte";
import Button from "$lib/components/kit/ui/Button.svelte"; import Button from "$lib/components/kit/ui/Button.svelte";
import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
import type { PixelImage } from "$lib/core/types"; import type { PixelImage } from "$lib/core/types";
interface PreviewItem { interface PreviewItem {