stephan
efd006276d
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>
70 lines
2.2 KiB
CSS
70 lines
2.2 KiB
CSS
/*
|
||
wlkns-dev-standards
|
||
Theme: Watchtower (Dark Glow)
|
||
Version: v1.0
|
||
Based on: minecraft-watchtower UI
|
||
*/
|
||
|
||
:root {
|
||
/* =========================
|
||
Core Palette (Watchtower)
|
||
========================= */
|
||
--wt-bg-dark: #0b0f14;
|
||
--wt-bg-panel: #10151d;
|
||
--wt-accent: #00e08f;
|
||
--wt-warning: #ffb454;
|
||
--wt-danger: #ff5e5e;
|
||
--wt-text: #e6edf5;
|
||
--wt-text-dim: #9aa7b8;
|
||
--wt-glow: rgba(0, 224, 143, 0.35);
|
||
|
||
/* =========================
|
||
Mapping -> Standard Tokens
|
||
========================= */
|
||
|
||
/* Farben – Identity & Status */
|
||
--color-primary: #1a2230; /* Deep Blue/Grey from Gradient */
|
||
--color-accent: var(--wt-accent);
|
||
|
||
--color-success: var(--wt-accent); /* Watchtower uses accent as success */
|
||
--color-warning: var(--wt-warning);
|
||
--color-error: var(--wt-danger);
|
||
|
||
/* Farben – Neutrals (Dark Mode Override) */
|
||
--color-bg: var(--wt-bg-dark);
|
||
--color-surface: var(--wt-bg-panel);
|
||
--color-border: rgba(255, 255, 255, 0.08); /* Subtle white border */
|
||
|
||
--color-text: var(--wt-text);
|
||
--color-text-muted: var(--wt-text-dim);
|
||
|
||
/* Typografie (Optional: Falls Space Grotesk geladen wird) */
|
||
--font-ui: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
|
||
/* Radius & Spacing */
|
||
--radius-sm: 4px;
|
||
--radius-md: 12px; /* Watchtower uses larger radii */
|
||
--radius-lg: 16px;
|
||
|
||
/* Shadows becomes Glows in this theme */
|
||
--shadow-sm: 0 0 10px rgba(0,0,0,0.5);
|
||
--shadow-glow: 0 0 15px var(--wt-glow);
|
||
}
|
||
|
||
/* Global Theme Overrides */
|
||
body {
|
||
background: radial-gradient(circle at top, #1a2230 0%, #0b0f14 55%), linear-gradient(135deg, #0b0f14, #101623 60%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Noise Texture helper class */
|
||
.bg-noise {
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
||
mix-blend-mode: soft-light;
|
||
z-index: -1;
|
||
}
|