feat: complete UI redesign with DaisyUI + Tailwind CSS v4

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
+13 -23
View File
@@ -1,15 +1,18 @@
<div class="section-container">
<div class="section-header">
<h2>Telechargements <span id="activeDownloadsCount" class="active-downloads-counter" style="display:none;">(0 actif)</span></h2>
<div class="header-actions">
<button class="btn btn-sm btn-secondary"
<div class="mb-10">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold flex items-center gap-2">
Téléchargements
<span id="activeDownloadsCount" class="badge badge-primary badge-sm" style="display:none;">0 actif</span>
</h2>
<div class="flex gap-2">
<button class="btn btn-sm btn-ghost"
hx-post="/api/downloads/cleanup"
hx-swap="none"
hx-confirm="Nettoyer tous les telechargements termines ?"
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
<i class="fas fa-broom"></i> Nettoyer termines
</button>
<button class="btn btn-sm btn-danger"
<button class="btn btn-sm btn-error"
hx-post="/api/downloads/cancel-all"
hx-swap="none"
hx-confirm="Annuler tous les telechargements actifs ?"
@@ -23,22 +26,9 @@
<div id="downloads-container-inner"
hx-get="/api/downloads?html=1"
hx-trigger="load, refresh, every 3s"
hx-swap="innerHTML">
<div class="loading-placeholder">
<div class="spinner"></div> Chargement des telechargements...
</div>
hx-swap="innerHTML"
class="flex justify-center py-8 text-base-content/50">
<span class="loading loading-spinner loading-lg"></span>
<span class="ml-2">Chargement des telechargements...</span>
</div>
</div>
<style>
.section-container { margin-bottom: 40px; }
.active-downloads-counter {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
background: rgba(241, 80, 37, 0.1);
padding: 2px 10px;
border-radius: 12px;
margin-left: 10px;
}
</style>