Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete UI/UX Rework into Sleek Glassmorphic AI OS (June 2026)

Browse Source
This commit is contained in:
Hitonabi
2026-06-25 22:18:51 +02:00
parent e1da5c797d
commit 6a8e55cc43
18 changed files with 2362 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+55 -24
View File
@@ -1,28 +1,10 @@
@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');
@import "tailwindcss";
/* Design-System (von v3 übernommen): EINE Akzentfarbe Teal #2dd4bf.
Dark als Default; Light als Fallback. Tokens als CSS-Variablen → shadcn-Style. */
/* Design-System: EINE Akzentfarbe Teal. Dark als Default.
Glassmorphismus & Aurora Keyframes für den Vibe 2026. */
:root {
--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%;
--radius: 0.65rem;
}
.dark {
--background: 222 24% 7%;
--foreground: 210 20% 92%;
--card: 222 22% 10%;
@@ -38,10 +20,27 @@
--border: 220 14% 19%;
--input: 220 14% 19%;
--ring: 172 66% 50%;
--radius: 0.75rem;
}
.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%;
}
/* Tailwind-v4-Mapping: macht bg-background, text-foreground, border-border … nutzbar
und an die obigen (themable) Variablen gebunden. */
@theme inline {
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
@@ -61,22 +60,54 @@
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--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));
outline-color: hsl(var(--primary) / 0.5);
}
html,
body,
#root {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}