Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: complete UI redesign with DaisyUI + Tailwind CSS v4

Browse Source 
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)
This commit is contained in:
root
2026-04-11 19:46:52 +00:00
parent 87f245d3fc
commit 4101d98a41
28 changed files with 2534 additions and 2808 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/toast_container.html
+30 -44
View File
@@ -1,59 +1,45 @@
<div id="toast-container"
class="toast-container"
<!-- 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="toast"
<div class="alert shadow-lg max-w-sm animate-slide-in"
style="pointer-events: auto;"
:class="'toast-' + toast.type"
:class="{
'alert-success': toast.type === 'success',
'alert-error': toast.type === 'error',
'alert-info': toast.type === 'info'
}"
x-show="true"
x-transition:enter="toast-enter"
x-transition:leave="toast-leave">
<div class="toast-content">
<i class="fas" :class="{
'fa-check-circle': toast.type === 'success',
'fa-exclamation-circle': toast.type === 'error',
'fa-info-circle': toast.type === 'info'
}"></i>
<span x-text="toast.message"></span>
</div>
<button class="toast-close" @click="toasts = toasts.filter(t => t.id !== toast.id)">
<i class="fas fa-times"></i>
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>
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-height: 80vh;
overflow: hidden;
@keyframes slide-in {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
.toast {
min-width: 250px;
padding: 12px 16px;
border-radius: 4px;
background: var(--bg-card);
color: var(--text-main);
border: 1px solid var(--secondary);
display: flex;
justify-content: space-between;
align-items: center;
border-left: 4px solid var(--secondary);
.animate-slide-in {
animation: slide-in 0.3s ease-out;
}
.toast-success { border-left-color: #2d936c; }
.toast-error { border-left-color: #e63946; }
.toast-info { border-left-color: #FFBF69; }
.toast-content { display: flex; align-items: center; gap: 10px; }
.toast-close { background: none; border: none; color: #aaa; cursor: pointer; }
</style>