adds shadcn, removes skeleton, implements button after styleguide
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
export function ripple(node: HTMLElement) {
|
||||
function handleClick(event: MouseEvent) {
|
||||
const circle = document.createElement("span");
|
||||
|
||||
const rect = node.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
|
||||
circle.style.width = `${size}px`;
|
||||
circle.style.height = `${size}px`;
|
||||
|
||||
circle.style.left = `${event.clientX - rect.left - size / 2}px`;
|
||||
circle.style.top = `${event.clientY - rect.top - size / 2}px`;
|
||||
|
||||
circle.className =
|
||||
"absolute rounded-full bg-white/30 animate-ripple pointer-events-none";
|
||||
|
||||
node.appendChild(circle);
|
||||
|
||||
circle.addEventListener("animationend", () => {
|
||||
circle.remove();
|
||||
});
|
||||
}
|
||||
|
||||
node.addEventListener("click", handleClick);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener("click", handleClick);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<script lang="ts">
|
||||
// Define the types for your props
|
||||
type ButtonType = 'button' | 'submit' | 'reset'
|
||||
type ButtonVariant = 'primary' | 'secondary'
|
||||
|
||||
// Define the props object including the Snippet for children
|
||||
let {
|
||||
type = 'button',
|
||||
disabled = false,
|
||||
variant = 'primary',
|
||||
children
|
||||
}: {
|
||||
type?: ButtonType;
|
||||
disabled?: boolean;
|
||||
variant?: ButtonVariant
|
||||
children: import('svelte').Snippet
|
||||
} = $props();
|
||||
|
||||
const getBgColor = (variant: ButtonVariant) => {
|
||||
return variant === 'primary' ? '#122f62' : 'transparent'
|
||||
}
|
||||
|
||||
const getTextColor = (variant: ButtonVariant) => {
|
||||
return variant === 'primary' ? 'white': 'primary-900'
|
||||
}
|
||||
|
||||
let bgColor = $derived(getBgColor(variant))
|
||||
let textColor = $derived(getTextColor(variant))
|
||||
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="{type}"
|
||||
class="rounded-container not-disabled:bg-[{bgColor}] disabled:bg-[#0000001f] not-disabled:text-{textColor} disabled:text-[#00000042] whitespace-nowrap text-center text-[14px] leading-9 font-bold px-4 py-0 focus:outline-none focus:ring-2 focus:ring-primary-300 shadow-sm"
|
||||
disabled={disabled}
|
||||
>
|
||||
{@render children()}
|
||||
</button>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type {Snippet} from "svelte";
|
||||
|
||||
type Props = {
|
||||
title?: Snippet
|
||||
content?: Snippet
|
||||
footer?: Snippet
|
||||
class?: string
|
||||
}
|
||||
let {title, content, footer, class: className = ""}: Props = $props()
|
||||
</script>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm py-2 px-2 {className}">
|
||||
{#if title}
|
||||
<header>{@render title()}</header>
|
||||
{/if}
|
||||
{#if content}
|
||||
<main class="flex grow items-center">{@render content()}</main>
|
||||
{/if}
|
||||
{#if footer}
|
||||
<footer>{@render footer()}</footer>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,200 +1,204 @@
|
||||
<script lang="ts">
|
||||
import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
|
||||
import { mergeProcessedZipArchive, type ProcessedZipArchive, type ZipAttachment } from "$lib/zip-processing";
|
||||
import AttachmentPreview from '$lib/components/AttachmentPreview.svelte';
|
||||
import Button from '$lib/components/ui/button.svelte';
|
||||
import {
|
||||
mergeProcessedZipArchive,
|
||||
type ProcessedZipArchive,
|
||||
type ZipAttachment
|
||||
} from '$lib/zip-processing';
|
||||
|
||||
type Props = {
|
||||
archive: ProcessedZipArchive;
|
||||
thumbnailWidth: number;
|
||||
onArchiveChange?: (archive: ProcessedZipArchive) => void;
|
||||
};
|
||||
type Props = {
|
||||
archive: ProcessedZipArchive;
|
||||
thumbnailWidth: number;
|
||||
onArchiveChange?: (archive: ProcessedZipArchive) => void;
|
||||
};
|
||||
|
||||
let {
|
||||
archive,
|
||||
thumbnailWidth = 200,
|
||||
onArchiveChange = () => {
|
||||
}
|
||||
}: Props = $props();
|
||||
let { archive, thumbnailWidth = 200, onArchiveChange = () => {} }: Props = $props();
|
||||
|
||||
let attachments = $state<ZipAttachment[]>([]);
|
||||
let archiveName = $state("");
|
||||
let dragIndex = $state<number | null>(null);
|
||||
let dropIndex = $state<number | null>(null);
|
||||
let isMerging = $state(false);
|
||||
let mergeError = $state<string | null>(null);
|
||||
let attachments = $state<ZipAttachment[]>([]);
|
||||
let archiveName = $state('');
|
||||
let dragIndex = $state<number | null>(null);
|
||||
let dropIndex = $state<number | null>(null);
|
||||
let isMerging = $state(false);
|
||||
let mergeError = $state<string | null>(null);
|
||||
|
||||
const toArrayBuffer = (bytes: Uint8Array) => {
|
||||
const copy = new Uint8Array(bytes.byteLength);
|
||||
copy.set(bytes);
|
||||
return copy.buffer;
|
||||
};
|
||||
const toArrayBuffer = (bytes: Uint8Array) => {
|
||||
const copy = new Uint8Array(bytes.byteLength);
|
||||
copy.set(bytes);
|
||||
return copy.buffer;
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
archiveName = archive.name;
|
||||
attachments = archive.attachments.map((attachment) => ({...attachment}));
|
||||
});
|
||||
$effect(() => {
|
||||
archiveName = archive.name;
|
||||
attachments = archive.attachments.map((attachment) => ({ ...attachment }));
|
||||
});
|
||||
|
||||
const emitArchiveChange = () => {
|
||||
onArchiveChange({
|
||||
...archive,
|
||||
name: archiveName,
|
||||
attachments: attachments.map((attachment) => ({...attachment})),
|
||||
});
|
||||
};
|
||||
const emitArchiveChange = () => {
|
||||
onArchiveChange({
|
||||
...archive,
|
||||
name: archiveName,
|
||||
attachments: attachments.map((attachment) => ({ ...attachment }))
|
||||
});
|
||||
};
|
||||
|
||||
const downloadMergedPdf = async () => {
|
||||
if (attachments.length === 0 || isMerging) {
|
||||
return;
|
||||
}
|
||||
const downloadMergedPdf = async () => {
|
||||
if (attachments.length === 0 || isMerging) {
|
||||
return;
|
||||
}
|
||||
|
||||
isMerging = true;
|
||||
mergeError = null;
|
||||
isMerging = true;
|
||||
mergeError = null;
|
||||
|
||||
try {
|
||||
const mergedBytes = await mergeProcessedZipArchive({
|
||||
...archive,
|
||||
name: archiveName,
|
||||
attachments: attachments.map((attachment) => ({...attachment}))
|
||||
});
|
||||
try {
|
||||
const mergedBytes = await mergeProcessedZipArchive({
|
||||
...archive,
|
||||
name: archiveName,
|
||||
attachments: attachments.map((attachment) => ({ ...attachment }))
|
||||
});
|
||||
|
||||
const pdfBlob = new Blob([toArrayBuffer(mergedBytes)], {type: "application/pdf"});
|
||||
const objectUrl = URL.createObjectURL(pdfBlob);
|
||||
const downloadLink = document.createElement("a");
|
||||
downloadLink.href = objectUrl;
|
||||
downloadLink.download = archiveName.toLowerCase().endsWith(".pdf") ? archiveName : `${archiveName}.pdf`;
|
||||
downloadLink.rel = "noopener";
|
||||
downloadLink.click();
|
||||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||||
} catch (error) {
|
||||
console.error(`Failed to merge archive ${archive.name}`, error);
|
||||
mergeError = "PDF konnte nicht erstellt werden.";
|
||||
} finally {
|
||||
isMerging = false;
|
||||
}
|
||||
};
|
||||
const pdfBlob = new Blob([toArrayBuffer(mergedBytes)], { type: 'application/pdf' });
|
||||
const objectUrl = URL.createObjectURL(pdfBlob);
|
||||
const downloadLink = document.createElement('a');
|
||||
downloadLink.href = objectUrl;
|
||||
downloadLink.download = archiveName.toLowerCase().endsWith('.pdf')
|
||||
? archiveName
|
||||
: `${archiveName}.pdf`;
|
||||
downloadLink.rel = 'noopener';
|
||||
downloadLink.click();
|
||||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||||
} catch (error) {
|
||||
console.error(`Failed to merge archive ${archive.name}`, error);
|
||||
mergeError = 'PDF konnte nicht erstellt werden.';
|
||||
} finally {
|
||||
isMerging = false;
|
||||
}
|
||||
};
|
||||
|
||||
const moveAttachment = (fromIndex: number, toIndex: number) => {
|
||||
if (
|
||||
fromIndex === toIndex ||
|
||||
fromIndex < 0 ||
|
||||
toIndex < 0 ||
|
||||
fromIndex >= attachments.length ||
|
||||
toIndex >= attachments.length
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const moveAttachment = (fromIndex: number, toIndex: number) => {
|
||||
if (
|
||||
fromIndex === toIndex ||
|
||||
fromIndex < 0 ||
|
||||
toIndex < 0 ||
|
||||
fromIndex >= attachments.length ||
|
||||
toIndex >= attachments.length
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextAttachments = [...attachments];
|
||||
const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
|
||||
nextAttachments.splice(toIndex, 0, movedAttachment);
|
||||
const nextAttachments = [...attachments];
|
||||
const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
|
||||
nextAttachments.splice(toIndex, 0, movedAttachment);
|
||||
|
||||
attachments = nextAttachments;
|
||||
emitArchiveChange();
|
||||
};
|
||||
attachments = nextAttachments;
|
||||
emitArchiveChange();
|
||||
};
|
||||
|
||||
const handleDragStart = (index: number, event: DragEvent) => {
|
||||
dragIndex = index;
|
||||
dropIndex = index;
|
||||
const handleDragStart = (index: number, event: DragEvent) => {
|
||||
dragIndex = index;
|
||||
dropIndex = index;
|
||||
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("text/plain", String(index));
|
||||
}
|
||||
};
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
event.dataTransfer.setData('text/plain', String(index));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (index: number, event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
dropIndex = index;
|
||||
};
|
||||
const handleDragOver = (index: number, event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
dropIndex = index;
|
||||
};
|
||||
|
||||
const handleDrop = (index: number, event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
const handleDrop = (index: number, event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
const dataTransferIndex = Number(event.dataTransfer?.getData("text/plain"));
|
||||
const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
|
||||
const dataTransferIndex = Number(event.dataTransfer?.getData('text/plain'));
|
||||
const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
|
||||
|
||||
if (fromIndex === null) {
|
||||
return;
|
||||
}
|
||||
if (fromIndex === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
moveAttachment(fromIndex, index);
|
||||
dragIndex = null;
|
||||
dropIndex = null;
|
||||
};
|
||||
moveAttachment(fromIndex, index);
|
||||
dragIndex = null;
|
||||
dropIndex = null;
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
dragIndex = null;
|
||||
dropIndex = null;
|
||||
};
|
||||
const handleDragEnd = () => {
|
||||
dragIndex = null;
|
||||
dropIndex = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm">
|
||||
<header class="flex flex-wrap items-baseline justify-between gap-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<label class="block min-w-0">
|
||||
<span class="sr-only">Archivname</span>
|
||||
<input
|
||||
class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
|
||||
type="text"
|
||||
value={archiveName}
|
||||
oninput={(event) => {
|
||||
archiveName = (event.currentTarget as HTMLInputElement).value;
|
||||
emitArchiveChange();
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<p class="mt-1 text-[13px] text-primary-700">
|
||||
{attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
|
||||
</p>
|
||||
</div>
|
||||
<section
|
||||
class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm"
|
||||
>
|
||||
<header class="flex flex-wrap items-baseline justify-between gap-2 text-primary">
|
||||
<div class="min-w-0 flex-1">
|
||||
<label class="block min-w-0">
|
||||
<span class="sr-only">Archivname</span>
|
||||
<input
|
||||
class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
|
||||
type="text"
|
||||
value={archiveName}
|
||||
oninput={(event) => {
|
||||
archiveName = (event.currentTarget as HTMLInputElement).value;
|
||||
emitArchiveChange();
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<p class="mt-1 text-[13px] text-primary">
|
||||
{attachments.length} relevante Datei{attachments.length === 1 ? '' : 'en'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="rounded-container whitespace-nowrap bg-primary-900 px-4 py-2 text-[14px] font-bold leading-6 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300"
|
||||
type="button"
|
||||
disabled={attachments.length === 0 || isMerging}
|
||||
onclick={downloadMergedPdf}
|
||||
>
|
||||
{isMerging ? "PDF wird erstellt" : "PDF herunterladen"}
|
||||
</button>
|
||||
</header>
|
||||
<Button
|
||||
class="bg-primary"
|
||||
type="button"
|
||||
disabled={attachments.length === 0 || isMerging}
|
||||
onclick={downloadMergedPdf}
|
||||
>
|
||||
{isMerging ? 'PDF wird erstellt' : 'PDF herunterladen'}
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{#if mergeError}
|
||||
<div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900">
|
||||
{mergeError}
|
||||
</div>
|
||||
{/if}
|
||||
{#if mergeError}
|
||||
<div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900">
|
||||
{mergeError}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ul class="flex gap-3 overflow-x-auto pb-1">
|
||||
{#each attachments as attachment, index (attachment.path)}
|
||||
<li
|
||||
class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${
|
||||
dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
|
||||
} ${dragIndex === index ? "opacity-60" : ""}`}
|
||||
style={`width: ${thumbnailWidth}px;`}
|
||||
draggable="true"
|
||||
ondragstart={(event) => handleDragStart(index, event)}
|
||||
ondragover={(event) => handleDragOver(index, event)}
|
||||
ondrop={(event) => handleDrop(index, event)}
|
||||
ondragend={handleDragEnd}
|
||||
>
|
||||
<div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
|
||||
<button
|
||||
class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
|
||||
draggable="false"
|
||||
type="button"
|
||||
aria-label="Datei verschieben"
|
||||
>
|
||||
::
|
||||
</button>
|
||||
<ul class="flex gap-3 overflow-x-auto pb-1">
|
||||
{#each attachments as attachment, index (attachment.path)}
|
||||
<li
|
||||
class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border text-primary bg-accent p-2 ${
|
||||
dropIndex === index ? 'border-primary-400 ring-1 ring-primary-200' : 'border-primary-100'
|
||||
} ${dragIndex === index ? 'opacity-60' : ''}`}
|
||||
style={`width: ${thumbnailWidth}px;`}
|
||||
draggable="true"
|
||||
ondragstart={(event) => handleDragStart(index, event)}
|
||||
ondragover={(event) => handleDragOver(index, event)}
|
||||
ondrop={(event) => handleDrop(index, event)}
|
||||
ondragend={handleDragEnd}
|
||||
>
|
||||
<div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
|
||||
<button
|
||||
class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
|
||||
draggable="false"
|
||||
type="button"
|
||||
aria-label="Datei verschieben"
|
||||
>
|
||||
::
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="truncate text-[13px] font-medium leading-tight text-primary-900"
|
||||
title={attachment.name}
|
||||
>
|
||||
{attachment.name}
|
||||
</div>
|
||||
</div>
|
||||
<AttachmentPreview {attachment} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div
|
||||
class="truncate text-[13px] font-medium leading-tight text-primary-900"
|
||||
title={attachment.name}
|
||||
>
|
||||
{attachment.name}
|
||||
</div>
|
||||
</div>
|
||||
<AttachmentPreview {attachment} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 bg-transparent p-0 text-center text-inherit appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
|
||||
class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 text-primary bg-transparent p-0 text-center appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
|
||||
aria-label="ZIP-Dateien hinzufügen"
|
||||
onclick={openFileDialog}
|
||||
ondragover={handleDragOver}
|
||||
@@ -70,8 +70,7 @@
|
||||
ondrop={handleDrop}
|
||||
>
|
||||
<div class="flex flex-row items-baseline justify-center gap-2">
|
||||
<!-- Changed h1 to span for better semantic HTML inside a button -->
|
||||
<span class="text-[20px] font-bold text-primary-900">Dateien hinzufügen</span>
|
||||
<span class="text-[20px] font-extrabold text-primary-900">+</span>
|
||||
<span class="text-[20px] font-bold">Dateien hinzufügen</span>
|
||||
<span class="text-[20px] font-extrabold">+</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<script lang="ts" module>
|
||||
import { ripple } from "$lib/actions/ripple";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const buttonVariants = tv({
|
||||
base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]",
|
||||
variants: {
|
||||
variant: {
|
||||
primary: "bg-primary text-primary-foreground",
|
||||
secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
|
||||
bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
|
||||
tertiary: "text-primary hover:bg-[#122F621A]",
|
||||
success: "text-white bg-[#0FAD80]"
|
||||
},
|
||||
size: {
|
||||
standard: "px-6 h-8 rounded-[16px]",
|
||||
large: "px-8 h-12 rounded-[24px]"
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "primary",
|
||||
size: "standard",
|
||||
},
|
||||
});
|
||||
|
||||
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
||||
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
|
||||
|
||||
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
|
||||
WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
let {
|
||||
class: className,
|
||||
variant = "primary",
|
||||
size = "standard",
|
||||
ref = $bindable(null),
|
||||
href = undefined,
|
||||
type = "button",
|
||||
disabled,
|
||||
children,
|
||||
...restProps
|
||||
}: ButtonProps = $props();
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a
|
||||
use:ripple
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
href={disabled ? undefined : href}
|
||||
aria-disabled={disabled}
|
||||
role={disabled ? "link" : undefined}
|
||||
tabindex={disabled ? -1 : undefined}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
use:ripple
|
||||
bind:this={ref}
|
||||
data-slot="button"
|
||||
class={" " + cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{disabled}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-action"
|
||||
class={cn(
|
||||
"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-content"
|
||||
class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
|
||||
</script>
|
||||
|
||||
<p
|
||||
bind:this={ref}
|
||||
data-slot="card-description"
|
||||
class={cn("text-muted-foreground text-sm", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</p>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-footer"
|
||||
class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-header"
|
||||
class={cn(
|
||||
"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card-title"
|
||||
class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
size = "default",
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import Root from "./card.svelte";
|
||||
import Content from "./card-content.svelte";
|
||||
import Description from "./card-description.svelte";
|
||||
import Footer from "./card-footer.svelte";
|
||||
import Header from "./card-header.svelte";
|
||||
import Title from "./card-title.svelte";
|
||||
import Action from "./card-action.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Description,
|
||||
Footer,
|
||||
Header,
|
||||
Title,
|
||||
Action,
|
||||
//
|
||||
Root as Card,
|
||||
Content as CardContent,
|
||||
Description as CardDescription,
|
||||
Footer as CardFooter,
|
||||
Header as CardHeader,
|
||||
Title as CardTitle,
|
||||
Action as CardAction,
|
||||
};
|
||||
@@ -1,108 +0,0 @@
|
||||
[data-theme='nominandum'] {
|
||||
--text-scaling: 1.067;
|
||||
|
||||
--base-font-color: var(--color-surface-900);
|
||||
--base-font-color-dark: var(--color-surface-50);
|
||||
--base-font-family: Nunito, Helvetica Neue, sans-serif;
|
||||
--base-font-size: inherit;
|
||||
--base-line-height: 1.5;
|
||||
--base-font-weight: 400;
|
||||
|
||||
--heading-font-color: var(--color-primary-900);
|
||||
--heading-font-color-dark: var(--color-primary-900);
|
||||
--heading-font-family: Nunito, Helvetica Neue, sans-serif;
|
||||
--heading-font-weight: 400;
|
||||
|
||||
--anchor-font-color: var(--color-primary-600);
|
||||
--anchor-font-color-dark: var(--color-primary-300);
|
||||
--anchor-text-decoration: none;
|
||||
--anchor-text-decoration-hover: underline;
|
||||
|
||||
--spacing: 0.25rem;
|
||||
--radius-base: 0.5rem;
|
||||
--radius-container: 24px;
|
||||
|
||||
--default-border-width: 1px;
|
||||
--default-divide-width: 1px;
|
||||
--default-ring-width: 2px;
|
||||
|
||||
--body-background-color: #EEF4F6;
|
||||
--body-background-color-dark: #0f172a;
|
||||
|
||||
/* Primary: Material Blue */
|
||||
/* Very Light / Ghostly */
|
||||
--color-primary-50: oklch(96.8% 0.010 253deg);
|
||||
--color-primary-100: oklch(92.8% 0.020 253deg);
|
||||
--color-primary-200: oklch(86.5% 0.040 253deg);
|
||||
--color-primary-300: oklch(77.5% 0.060 253deg);
|
||||
--color-primary-400: oklch(68.5% 0.080 253deg);
|
||||
|
||||
/* Mid-range / Muted Tones */
|
||||
--color-primary-500: oklch(59.5% 0.090 253deg);
|
||||
--color-primary-600: oklch(52.5% 0.095 253deg);
|
||||
--color-primary-700: oklch(45.5% 0.095 253deg);
|
||||
|
||||
/* Dark Range (Matching your base color) */
|
||||
--color-primary-800: oklch(38.5% 0.090 253deg);
|
||||
--color-primary-900: oklch(31.5% 0.090 253deg); /* YOUR BASE COLOR */
|
||||
--color-primary-950: oklch(23.5% 0.070 253deg);
|
||||
|
||||
--color-primary-contrast-dark: var(--color-primary-950);
|
||||
--color-primary-contrast-light: white;
|
||||
--color-primary-contrast-50: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-100: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-200: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-300: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-400: white;
|
||||
--color-primary-contrast-500: white;
|
||||
--color-primary-contrast-600: white;
|
||||
--color-primary-contrast-700: white;
|
||||
--color-primary-contrast-800: white;
|
||||
--color-primary-contrast-900: white;
|
||||
--color-primary-contrast-950: white;
|
||||
|
||||
/* Secondary: dezentes Blau-Grau */
|
||||
--color-secondary-50: oklch(97% 0.01 250deg);
|
||||
--color-secondary-100: oklch(93.5% 0.015 250deg);
|
||||
--color-secondary-200: oklch(88.5% 0.022 250deg);
|
||||
--color-secondary-300: oklch(80% 0.035 250deg);
|
||||
--color-secondary-400: oklch(68% 0.045 250deg);
|
||||
--color-secondary-500: oklch(56% 0.055 250deg);
|
||||
--color-secondary-600: oklch(48% 0.05 250deg);
|
||||
--color-secondary-700: oklch(40% 0.045 250deg);
|
||||
--color-secondary-800: oklch(32% 0.04 250deg);
|
||||
--color-secondary-900: oklch(24% 0.035 250deg);
|
||||
--color-secondary-950: oklch(17% 0.03 250deg);
|
||||
|
||||
--color-secondary-contrast-dark: var(--color-secondary-950);
|
||||
--color-secondary-contrast-light: white;
|
||||
|
||||
/* Tertiary: Akzent Cyan */
|
||||
--color-tertiary-50: oklch(97% 0.025 220deg);
|
||||
--color-tertiary-100: oklch(93% 0.045 220deg);
|
||||
--color-tertiary-200: oklch(87% 0.07 220deg);
|
||||
--color-tertiary-300: oklch(78% 0.105 220deg);
|
||||
--color-tertiary-400: oklch(69% 0.135 220deg);
|
||||
--color-tertiary-500: oklch(60% 0.15 220deg);
|
||||
--color-tertiary-600: oklch(52% 0.135 220deg);
|
||||
--color-tertiary-700: oklch(44% 0.115 220deg);
|
||||
--color-tertiary-800: oklch(36% 0.09 220deg);
|
||||
--color-tertiary-900: oklch(29% 0.065 220deg);
|
||||
--color-tertiary-950: oklch(21% 0.045 220deg);
|
||||
|
||||
/* Surface: Material-nahe kühle Grautöne */
|
||||
--color-surface-50: oklch(98.5% 0.004 255deg);
|
||||
--color-surface-100: oklch(96.5% 0.006 255deg);
|
||||
--color-surface-200: oklch(92.5% 0.01 255deg);
|
||||
--color-surface-300: oklch(86.5% 0.015 255deg);
|
||||
--color-surface-400: oklch(74% 0.02 255deg);
|
||||
--color-surface-500: oklch(62% 0.025 255deg);
|
||||
--color-surface-600: oklch(50% 0.025 255deg);
|
||||
--color-surface-700: oklch(39% 0.025 255deg);
|
||||
--color-surface-800: oklch(29% 0.025 255deg);
|
||||
--color-surface-900: oklch(21% 0.025 255deg);
|
||||
--color-surface-950: oklch(14% 0.025 255deg);
|
||||
|
||||
--color-surface-contrast-dark: var(--color-surface-950);
|
||||
--color-surface-contrast-light: white;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
|
||||
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
|
||||
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
|
||||
+44
-25
@@ -1,11 +1,16 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte";
|
||||
import Card from "$lib/components/Card.svelte";
|
||||
import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
|
||||
import ZipDropzone from "$lib/components/ZipDropzone.svelte";
|
||||
import {extractZipArchives, mergeProcessedZipArchive, type ProcessedZipArchive} from "$lib/zip-processing";
|
||||
import {onMount} from 'svelte';
|
||||
import Button from '$lib/components/ui/button.svelte';
|
||||
import ProcessedZipArchiveEditor from '$lib/components/ProcessedZipArchiveEditor.svelte';
|
||||
import ZipDropzone from '$lib/components/ZipDropzone.svelte';
|
||||
import {
|
||||
extractZipArchives,
|
||||
mergeProcessedZipArchive,
|
||||
type ProcessedZipArchive
|
||||
} from '$lib/zip-processing';
|
||||
import * as Card from "$lib/components/ui/card/index";
|
||||
|
||||
const THUMBNAIL_WIDTH_STORAGE_KEY = "thumbnailWidth";
|
||||
const THUMBNAIL_WIDTH_STORAGE_KEY = 'thumbnailWidth';
|
||||
|
||||
let selectedZipFiles: File[] = $state([]);
|
||||
let processedZipFiles: ProcessedZipArchive[] = $state([]);
|
||||
@@ -45,13 +50,13 @@
|
||||
};
|
||||
|
||||
const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => {
|
||||
const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: "application/pdf"});
|
||||
const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: 'application/pdf'});
|
||||
const objectUrl = URL.createObjectURL(pdfBlob);
|
||||
const downloadLink = document.createElement("a");
|
||||
const downloadLink = document.createElement('a');
|
||||
|
||||
downloadLink.href = objectUrl;
|
||||
downloadLink.download = fileName.toLowerCase().endsWith(".pdf") ? fileName : `${fileName}.pdf`;
|
||||
downloadLink.rel = "noopener";
|
||||
downloadLink.download = fileName.toLowerCase().endsWith('.pdf') ? fileName : `${fileName}.pdf`;
|
||||
downloadLink.rel = 'noopener';
|
||||
downloadLink.click();
|
||||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||||
};
|
||||
@@ -86,7 +91,7 @@
|
||||
|
||||
const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
|
||||
processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
|
||||
existingIndex === index ? archive : existingArchive,
|
||||
existingIndex === index ? archive : existingArchive
|
||||
);
|
||||
};
|
||||
|
||||
@@ -111,39 +116,49 @@
|
||||
|
||||
{#snippet content()}
|
||||
{#if selectedZipFiles.length === 0}
|
||||
<ZipDropzone onFilesSelected={handleFilesSelected}/>
|
||||
<Card.Root>
|
||||
<Card.Content>
|
||||
<ZipDropzone onFilesSelected={handleFilesSelected}/>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<details class="fixed bottom-4 right-4 z-20">
|
||||
<summary
|
||||
class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50">
|
||||
class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50"
|
||||
>
|
||||
<span class="sr-only">Settings</span>
|
||||
<span>⚙️</span>
|
||||
</summary>
|
||||
|
||||
<div class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg">
|
||||
<div
|
||||
class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg"
|
||||
>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 rounded-container bg-primary-900 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300"
|
||||
<Button
|
||||
class="flex-1"
|
||||
type="button"
|
||||
disabled={processedZipFiles.length === 0}
|
||||
onclick={exportAllZipArchivesAsPdf}
|
||||
>
|
||||
Alle ZIP-Archive als PDF exportieren
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
class="flex-1 rounded-container bg-red-600 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-red-300"
|
||||
<Button
|
||||
class="flex-1"
|
||||
type="button"
|
||||
disabled={selectedZipFiles.length === 0}
|
||||
variant="secondary"
|
||||
onclick={deleteAllZipArchives}
|
||||
>
|
||||
Alle ZIP-Archive löschen
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<label class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900">
|
||||
<div
|
||||
class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900"
|
||||
>
|
||||
<span>Thumbnail Breite</span>
|
||||
<span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
|
||||
</div>
|
||||
@@ -160,11 +175,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
<div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6">
|
||||
<div
|
||||
class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6"
|
||||
>
|
||||
<div class="mx-auto flex w-full flex-col gap-3">
|
||||
{#if pendingZipCount > 0}
|
||||
<div class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
|
||||
Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung.
|
||||
<div
|
||||
class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"
|
||||
>
|
||||
Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? '' : 'en'} in Bearbeitung.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -188,5 +207,5 @@
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 py-6">
|
||||
<h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
|
||||
</div>
|
||||
<Card {content} class="h-full"/>
|
||||
{@render content()}
|
||||
</section>
|
||||
|
||||
+155
-7
@@ -1,13 +1,161 @@
|
||||
@import 'tailwindcss';
|
||||
@import '../lib/nom-theme.css';
|
||||
/*@import '../globals.css';*/
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn-svelte/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format("truetype");
|
||||
}
|
||||
:root {
|
||||
--background: #EEF4F6;
|
||||
--foreground: #122F62;
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: #122f62;
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: #EA544B;
|
||||
--secondary-end: #FF6F6D;
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: #d6dce5;
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: #ff0027;
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 16px;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #212121;
|
||||
--foreground: #FFFFFF;
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: #92b2eb;
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: linear-gradient(90deg, #EA544B 0%, #FF6F6D 100%);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: #ff0027;
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: 'Nunito', sans-serif;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ripple */
|
||||
|
||||
@keyframes ripple {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-ripple {
|
||||
animation: ripple 600ms ease-out;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user