alexei.dolgolyov/haos-hacs-immich-album-watcher
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Redesign frontend UI with Observatory theme
All checks were successful
Validate / Hassfest (push) Successful in 3s
Details

Browse Source 
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>
This commit is contained in:
Admin
2026-03-19 22:10:06 +03:00
parent ff43e006d8
commit 3ad8ddaa25
14 changed files with 1261 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/lib/components/IconButton.svelte
View File

@@ -10,17 +10,56 @@
size?: number;
class?: string;
}>();
const variantClasses = {
default: 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]',
danger: 'text-[var(--color-muted-foreground)] hover:text-[var(--color-destructive)] hover:bg-[var(--color-error-bg)]',
success: 'text-[var(--color-muted-foreground)] hover:text-[var(--color-success-fg)] hover:bg-[var(--color-success-bg)]',
};
</script>
<button type="button" {title} {onclick} {disabled}
class="inline-flex items-center justify-center w-7 h-7 rounded-md transition-colors
disabled:opacity-40 disabled:pointer-events-none {variantClasses[variant]} {className}"
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>