fix: update download button style
This commit is contained in:
+8
-7
@@ -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,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,
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user