root
4101d98a41
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<!-- Toast notification container -->
|
|
<div id="toast-container"
|
|
class="fixed top-4 right-4 z-[9999] flex flex-col gap-2 max-h-[80vh] overflow-hidden"
|
|
style="pointer-events: none;"
|
|
x-data="{ toasts: [] }"
|
|
@show-toast.window="toasts.push({ id: Date.now(), message: $event.detail.message, type: $event.detail.type || 'info' }); setTimeout(() => { toasts = toasts.filter(t => t.id !== toasts[0].id) }, 5000)">
|
|
|
|
<template x-for="toast in toasts" :key="toast.id">
|
|
<div class="alert shadow-lg max-w-sm animate-slide-in"
|
|
style="pointer-events: auto;"
|
|
:class="{
|
|
'alert-success': toast.type === 'success',
|
|
'alert-error': toast.type === 'error',
|
|
'alert-info': toast.type === 'info'
|
|
}"
|
|
x-show="true"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-x-8"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 translate-x-8">
|
|
<i class="fa-solid"
|
|
:class="{
|
|
'fa-circle-check': toast.type === 'success',
|
|
'fa-circle-exclamation': toast.type === 'error',
|
|
'fa-circle-info': toast.type === 'info'
|
|
}"></i>
|
|
<span class="text-sm" x-text="toast.message"></span>
|
|
<button class="btn btn-ghost btn-xs" @click="toasts = toasts.filter(t => t.id !== toast.id)">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes slide-in {
|
|
from { opacity: 0; transform: translateX(100%); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
.animate-slide-in {
|
|
animation: slide-in 0.3s ease-out;
|
|
}
|
|
</style>
|