Frontend-Erneuerung: Mobile, Diät, Tempo, UI-Politur (10-Punkte-Paket)
- Fix: 'Interaktives Terminal' im Cockpit führte ins Leere (#terminal) → Konsole - Mobile: Off-Canvas-Sidebar mit Hamburger unter md, Inhalt volle Breite (vorher: 240px starre Sidebar, 135px Rest mit Quer-Scroll auf dem Handy) - Dead Weight raus: src/mc3/ (verworfener Prototyp), DashboardView (alte Zentrale) + 6 nur dort genutzte Karten, 8 ungenutzte npm-Pakete (three, three-vrm, react-three fiber/drei, sigma, graphology ×2, @types/three) - Code-Splitting: alle Views außer Cockpit per React.lazy → Haupt-Bundle 983 → 739 KB, jede View ein eigenes Chunk - Fonts lokal (@fontsource) statt Google-CDN → UI offline identisch - Polling harmonisiert: EINE Takt-Tabelle in queries.ts (Graphen 3s, Rest 8-60s), keine Override-Intervalle mehr in Komponenten; Updates-Check (apt/git!) von 4s auf 60s - CSS-Hack-Layer aufgelöst: !important-Klassen-Sniffing → explizite .mc-card/.mc-card-sm/.nav-active-Klassen (Look identisch, ungeschichtete Regeln statt Utility-Raten); totes .light-Theme raus; Scrollbars 1× definiert - Aurora: animierte Fullscreen-Blur-Filter → statische radial-gradients (gleicher Look, keine Dauer-GPU-Last) - Sicherheit: Sudo-Passwort/HF-Token nur noch bei mutierenden Requests, nicht mehr auf jedem GET-Poll - Strg+K statt ⌘K auf Windows; dist neu gebaut Live gegen die Box verifiziert: alle 10 Views + Mobile-Flow, 0 Konsolen-Fehler. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
+123
-150
@@ -1,8 +1,20 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
/* Fonts lokal gebündelt (@fontsource) — die Box-UI braucht kein Internet für Schrift. */
|
||||
@import "@fontsource/inter/300.css";
|
||||
@import "@fontsource/inter/400.css";
|
||||
@import "@fontsource/inter/500.css";
|
||||
@import "@fontsource/inter/600.css";
|
||||
@import "@fontsource/inter/700.css";
|
||||
@import "@fontsource/space-grotesk/400.css";
|
||||
@import "@fontsource/space-grotesk/500.css";
|
||||
@import "@fontsource/space-grotesk/600.css";
|
||||
@import "@fontsource/space-grotesk/700.css";
|
||||
@import "@fontsource/jetbrains-mono/400.css";
|
||||
@import "@fontsource/jetbrains-mono/500.css";
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Design-System: EINE Akzentfarbe Teal. Dark als Default.
|
||||
Glassmorphismus & Aurora Keyframes für den Vibe 2026. */
|
||||
/* Design-System: EINE Akzentfarbe Teal, bewusst dark-only (Glassmorphismus-Look).
|
||||
Karten-Optik lebt in .mc-card / .mc-card-sm (unten) — Komponenten sagen es explizit,
|
||||
statt dass CSS Utility-Klassen-Kombinationen errät. */
|
||||
|
||||
:root {
|
||||
--background: 224 30% 6%;
|
||||
@@ -24,25 +36,6 @@
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.light {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222 22% 12%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 22% 12%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 22% 12%;
|
||||
--primary: 172 70% 38%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 220 14% 95%;
|
||||
--muted-foreground: 220 9% 42%;
|
||||
--accent: 220 14% 94%;
|
||||
--accent-foreground: 222 22% 12%;
|
||||
--border: 220 13% 88%;
|
||||
--input: 220 13% 88%;
|
||||
--ring: 172 66% 50%;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
@@ -67,55 +60,6 @@
|
||||
--font-space: "Space Grotesk", sans-serif;
|
||||
}
|
||||
|
||||
@keyframes aurora {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.animate-aurora {
|
||||
background-size: 200% 200%;
|
||||
animation: aurora 25s ease infinite;
|
||||
}
|
||||
|
||||
/* Custom Scrollbars im Glassmorphismus-Design */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--primary) / 0.4);
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border) / 0.85);
|
||||
outline-color: hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* Sichtbarer Fokus für Tastatur-Nutzer auf allen interaktiven Elementen
|
||||
(Inputs haben ihren eigenen Ring unten via box-shadow). */
|
||||
:focus-visible {
|
||||
outline: 2px solid hsl(var(--primary) / 0.7);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Bewegungs-Sensibilität respektieren: Animationen/Transitions praktisch aus. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
@@ -131,11 +75,109 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border) / 0.85);
|
||||
outline-color: hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* Sichtbarer Fokus für Tastatur-Nutzer auf allen interaktiven Elementen. */
|
||||
:focus-visible {
|
||||
outline: 2px solid hsl(var(--primary) / 0.7);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Eingabefelder: Teal-Fokus statt Browser-Default (ungeschichtet → gewinnt ohne !important). */
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Schmale Teal-Scrollbars im Glas-Look (EINE Definition). */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--primary) / 0.25);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Model Control HUD 3.0 & Rework Visual Enhancements (Vibrant & Structured)
|
||||
Karten-Optik (ehem. „HUD 3.0"-Layer, jetzt explizite Klassen ohne !important;
|
||||
ungeschichtete Regeln schlagen Tailwind-Utilities von selbst)
|
||||
========================================================================== */
|
||||
|
||||
/* SVG Bezier Flow Animation */
|
||||
/* Große Inhalts-Karte: Glas-Grund, Farbverlaufs-Linie oben, sanftes Anheben bei Hover. */
|
||||
.mc-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid hsl(var(--border) / 0.95);
|
||||
background-color: hsl(var(--card) / 0.85);
|
||||
box-shadow: 0 10px 30px -15px rgb(0 0 0 / 0.45), inset 0 1px 0 0 rgb(255 255 255 / 0.05);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.mc-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.5px;
|
||||
background: linear-gradient(90deg, hsl(var(--primary)), #6366f1, #a855f7);
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.mc-card:hover {
|
||||
transform: translateY(-3px);
|
||||
background-color: hsl(var(--card) / 0.92);
|
||||
border-color: hsl(var(--primary) / 0.35);
|
||||
box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.65), 0 0 18px 2px hsl(var(--primary) / 0.05);
|
||||
}
|
||||
.mc-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Kleine Karte / Listen-Container: ruhiger, ohne Verlaufs-Linie und Anheben. */
|
||||
.mc-card-sm {
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(var(--border) / 0.9);
|
||||
background-color: hsl(var(--card) / 0.88);
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.mc-card-sm:hover {
|
||||
background-color: hsl(var(--card) / 0.95);
|
||||
border-color: hsl(var(--primary) / 0.3);
|
||||
}
|
||||
|
||||
/* Aktiver Navigations-Eintrag in der Sidebar (ausgeklappt / eingeklappt). */
|
||||
.nav-active {
|
||||
background: linear-gradient(90deg, hsl(var(--primary) / 0.18), rgb(99 102 241 / 0.12));
|
||||
color: hsl(var(--primary));
|
||||
border-left: 3.5px solid hsl(var(--primary));
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
padding-left: calc(0.75rem - 3.5px);
|
||||
box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.02);
|
||||
}
|
||||
.nav-active-collapsed {
|
||||
background: hsl(var(--primary) / 0.18);
|
||||
color: hsl(var(--primary));
|
||||
box-shadow: 0 0 12px 1px hsl(var(--primary) / 0.1);
|
||||
border: 1px solid hsl(var(--primary) / 0.3);
|
||||
}
|
||||
|
||||
/* SVG-Fluss-Animation (Modell-Cockpit-Verdrahtung). */
|
||||
@keyframes flow-cyan {
|
||||
0% {
|
||||
stroke-dasharray: 6 3;
|
||||
@@ -151,83 +193,14 @@ body {
|
||||
animation: flow-cyan 1.2s linear infinite;
|
||||
}
|
||||
|
||||
/* Base enhancement for major cards to make them clearly visible and pop out */
|
||||
.rounded-2xl.border.bg-card\/45 {
|
||||
background-color: hsl(var(--card) / 0.85) !important;
|
||||
border-color: hsl(var(--border) / 0.95) !important;
|
||||
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
/* Gorgeous gradient top accent line to all main cards to inject color and structure */
|
||||
.rounded-2xl.border.bg-card\/45::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.5px;
|
||||
background: linear-gradient(90deg, hsl(var(--primary)), #6366f1, #a855f7);
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
/* Smooth hover lifting effect */
|
||||
.rounded-2xl.border.bg-card\/45:hover {
|
||||
transform: translateY(-3px);
|
||||
background-color: hsl(var(--card) / 0.92) !important;
|
||||
border-color: hsl(var(--primary) / 0.35) !important;
|
||||
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.65), 0 0 18px 2px hsl(var(--primary) / 0.05) !important;
|
||||
}
|
||||
|
||||
.rounded-2xl.border.bg-card\/45:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Enhancements for smaller cards / lists */
|
||||
.rounded-xl.border.bg-card\/45 {
|
||||
background-color: hsl(var(--card) / 0.88) !important;
|
||||
border-color: hsl(var(--border) / 0.9) !important;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease !important;
|
||||
}
|
||||
.rounded-xl.border.bg-card\/45:hover {
|
||||
background-color: hsl(var(--card) / 0.95) !important;
|
||||
border-color: hsl(var(--primary) / 0.3) !important;
|
||||
}
|
||||
|
||||
/* Sidebar active link styling */
|
||||
aside nav a[class*="bg-primary/15"]:not([class*="justify-center"]) {
|
||||
background: linear-gradient(90deg, hsl(var(--primary) / 0.18), rgba(99, 102, 241, 0.12)) !important;
|
||||
color: hsl(var(--primary)) !important;
|
||||
border-left: 3.5px solid hsl(var(--primary)) !important;
|
||||
border-radius: 0 var(--radius) var(--radius) 0 !important;
|
||||
padding-left: calc(0.75rem - 3.5px) !important;
|
||||
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.02) !important;
|
||||
}
|
||||
|
||||
aside nav a[class*="bg-primary/15"][class*="justify-center"] {
|
||||
background: hsl(var(--primary) / 0.18) !important;
|
||||
color: hsl(var(--primary)) !important;
|
||||
box-shadow: 0 0 12px 1px hsl(var(--primary) / 0.1) !important;
|
||||
border: 1px solid hsl(var(--primary) / 0.3) !important;
|
||||
}
|
||||
|
||||
/* Colorful scrollbars */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--primary) / 0.25) !important;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--primary) / 0.5) !important;
|
||||
}
|
||||
|
||||
/* Dynamic input focus styling */
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color: hsl(var(--primary)) !important;
|
||||
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15) !important;
|
||||
outline: none;
|
||||
/* Bewegungs-Sensibilität respektieren: Animationen/Transitions praktisch aus. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* WQHD & 4K Monitor Responsive Scaling (Fluid Typography & UI Scaling) */
|
||||
|
||||
Reference in New Issue
Block a user