alexei.dolgolyov
3ad8ddaa25
All checks were successful
Validate / Hassfest (push) Successful in 3s
New teal-accent color system, DM Sans + JetBrains Mono typography, glow effects, animated gradient login page, animated dashboard counters with gradient-border stat cards, event timeline, sidebar with active glow indicators, and polished components (modals, cards, snackbar). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
66 lines
1.4 KiB
Svelte
66 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import MdiIcon from './MdiIcon.svelte';
|
|
|
|
let { icon, title = '', onclick, disabled = false, variant = 'default', size = 16, class: className = '' } = $props<{
|
|
icon: string;
|
|
title?: string;
|
|
onclick?: (e: MouseEvent) => void;
|
|
disabled?: boolean;
|
|
variant?: 'default' | 'danger' | 'success';
|
|
size?: number;
|
|
class?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<button type="button" {title} {onclick} {disabled}
|
|
class="icon-btn icon-btn-{variant} {className}"
|
|
>
|
|
<MdiIcon name={icon} {size} />
|
|
</button>
|
|
|
|
<style>
|
|
.icon-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.icon-btn:disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.icon-btn-default {
|
|
color: var(--color-muted-foreground);
|
|
}
|
|
.icon-btn-default:hover {
|
|
color: var(--color-foreground);
|
|
background: var(--color-muted);
|
|
}
|
|
|
|
.icon-btn-danger {
|
|
color: var(--color-muted-foreground);
|
|
}
|
|
.icon-btn-danger:hover {
|
|
color: var(--color-destructive);
|
|
background: var(--color-error-bg);
|
|
box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
.icon-btn-success {
|
|
color: var(--color-muted-foreground);
|
|
}
|
|
.icon-btn-success:hover {
|
|
color: var(--color-success-fg);
|
|
background: var(--color-success-bg);
|
|
box-shadow: 0 0 8px rgba(5, 150, 105, 0.15);
|
|
}
|
|
</style>
|