Replace Pico CSS with custom Watchtower theme (Sci-Fi Dark Mode): - Add backend/static/ directory with Watchtower CSS files - tokens_watchtower.css: Design tokens (colors, typography, spacing) - theme_watchtower.css: Theme overrides for components Features: - High-contrast dark mode (#0b0f14 background) - Neon accent color (#00e08f teal/cyan) - Glow effects on buttons and inputs - Radial gradient background - SVG noise texture overlay (bg-noise class) - Pill-shaped buttons (border-radius: 999px) - Uppercase labels with letter-spacing - Monospace font for logs UI Enhancements: - FastAPI static files mount added - Custom styling for all components (sections, buttons, inputs, forms) - Accent border-left on header and update status - Improved visual hierarchy with color coding - OIDC button gets secondary style (outline) Complete US_000024 and TASK_000024. Based on minecraft-watchtower UI design. All Pico CSS dependencies removed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
851 B
851 B
ID: US_000024 | Version: 0.1.0 | Status: Done By: Codex (GPT-5)
US_000024: Watchtower Theme fuer Web-UI
Status: Done
Als Admin moechte ich das Watchtower-Design verwenden, damit die Web-UI dem vereinbarten Dark-Mode-Branding entspricht.
Akzeptanzkriterien
- Given die Web-UI wird aus dem Template ausgeliefert
- When das UI geladen wird
- Then das Watchtower-Theme praegt Farben, Typografie und Kontraste der UI
- And die Theme-Assets liegen unter
assets/in einer klaren Design-Struktur (z.B.assets/design/) - And das Theme nutzt die bereitgestellten Dateien
tokens_watchtower.cssundtheme_watchtower.css - And ein Hintergrundrauschen (
bg-noise) ist sichtbar
Notizen
- Assets sind unter
assets/design/abgelegt (noch nicht eingebunden).
Task-Platzhalter
- TASK_000024: Apply Watchtower theme (Details bei Story-Start)