feat(design): centralize design system with CSS variables and semantic classes in index.css
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 52s
This commit is contained in:
sandrodach committed
1 parent
94123c9424
commit
ec9ba8fd9f
9 files changed
+428
-304
No files matched your search
+192
-27
@@ -2,29 +2,44 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ==========================================================================
|
||||
MINDFSIFT DESIGN SYSTEM - ZENTRALE STEUERUNG
|
||||
Hier können Farben, Blauton, Kontraste und Rundungen zentral angepasst werden!
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* Template Dark Palette */
|
||||
--bg-canvas: #16171a;
|
||||
--bg-surface: #222428;
|
||||
--bg-surface-elevated: #282a2f;
|
||||
--bg-surface-hover: #32353b;
|
||||
/* --- 1. AKZENTFARBE (Blauton hier regeln) --- */
|
||||
--accent-primary: #1d8cf8; /* Haupt-Akzentblau */
|
||||
--accent-hover: #3b9cfc; /* Hellere Nuance beim Hover */
|
||||
--accent-dim: rgba(29, 140, 248, 0.14); /* Dezenter Hintergrund für Badges */
|
||||
--accent-border: rgba(29, 140, 248, 0.35);/* Rand für aktive Badges */
|
||||
|
||||
--border-subtle: rgba(255, 255, 255, 0.07);
|
||||
--border-active-green: rgba(34, 197, 94, 0.65);
|
||||
--border-focus: #1d8cf8;
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
|
||||
--bg-app: #16171a; /* Gesamte Canvas-Hintergrundfarbe */
|
||||
--bg-panel: #222428; /* Karten, Sidebar, Header, Modals */
|
||||
--bg-panel-elevated: #282a2f; /* Ausgewählte Menüpunkte, Toolbars, Hover */
|
||||
--bg-panel-hover: #32353b; /* Stärkerer Hover-Effekt */
|
||||
--bg-input: #16171a; /* Eingabefelder und Quick-Inputs */
|
||||
|
||||
--color-primary: #1d8cf8;
|
||||
--color-primary-hover: #3b9cfc;
|
||||
--color-on-primary: #ffffff;
|
||||
/* --- 3. RAHMEN & TRENNLINIEN --- */
|
||||
--border-color: rgba(255, 255, 255, 0.08); /* Subtile Linien & Kanten */
|
||||
--border-subtle: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* --- 4. TEXTFARBEN --- */
|
||||
--text-main: #ffffff; /* Haupttext */
|
||||
--text-muted: #a1a1aa; /* Sekundärtext (Grau) */
|
||||
--text-faint: #71717a; /* Platzhalter & Hilfetexte */
|
||||
|
||||
/* --- 5. STATUS- UND SIGNALFARBEN --- */
|
||||
--color-success: #22c55e;
|
||||
--color-danger: #ef4444;
|
||||
--color-warning: #f97316;
|
||||
--color-purple: #a855f7;
|
||||
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-tertiary: #71717a;
|
||||
/* --- 6. RUNDUNGEN (Zentral konfigurierbar) --- */
|
||||
--radius-card: 0px; /* Karten & Panels (0px = eckig) */
|
||||
--radius-btn: 0px; /* Standard-Buttons & Tabs */
|
||||
--radius-input: 0px; /* Textfelder für Optionen & Eigenschaften */
|
||||
--radius-pill: 9999px; /* Runde Elemente (z.B. Quick-Capture) */
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -33,16 +48,16 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-app);
|
||||
color: var(--text-main);
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Subtle clean scrollbar */
|
||||
/* Subtiler monochromer Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@@ -51,18 +66,168 @@ body {
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 9999px;
|
||||
border-radius: var(--radius-btn);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.border-subtle {
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
/* ==========================================================================
|
||||
WIEDERVERWENDBARE SEMANTISCHE KLASSEN
|
||||
========================================================================== */
|
||||
|
||||
.card-surface {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
@layer components {
|
||||
/* Haupt-Karten, Sidebars und Container */
|
||||
.panel-surface {
|
||||
background-color: var(--bg-panel);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Monochromer, eckiger Standard-Aktionsbutton */
|
||||
.btn-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.375rem;
|
||||
height: 1.75rem;
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
background-color: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 120ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-action:hover {
|
||||
background-color: var(--bg-panel-elevated);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Primärer Akzent-Button */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.375rem;
|
||||
height: 1.75rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
background-color: var(--accent-primary);
|
||||
border-radius: var(--radius-btn);
|
||||
color: #ffffff;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 120ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Kleiner eckiger Icon-Button */
|
||||
.btn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
background-color: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--text-muted);
|
||||
transition: all 120ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-icon:hover {
|
||||
background-color: var(--bg-panel-elevated);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.btn-icon-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
background-color: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--text-muted);
|
||||
transition: all 120ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-icon-danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.15);
|
||||
color: var(--color-danger);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
/* Zentrales Texteingabefeld */
|
||||
.input-field {
|
||||
background-color: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-input);
|
||||
color: var(--text-main);
|
||||
font-size: 0.75rem;
|
||||
transition: border-color 120ms ease;
|
||||
}
|
||||
.input-field:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
.input-field::placeholder {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* Header Tabs */
|
||||
.tab-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 120ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab-btn:hover {
|
||||
color: var(--text-main);
|
||||
background-color: var(--bg-panel-elevated);
|
||||
}
|
||||
.tab-btn-active {
|
||||
color: var(--accent-primary);
|
||||
border-bottom-color: var(--accent-primary);
|
||||
background-color: var(--bg-panel-elevated);
|
||||
}
|
||||
|
||||
/* Status Badge */
|
||||
.badge-accent {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
background-color: var(--accent-dim);
|
||||
border: 1px solid var(--accent-border);
|
||||
color: var(--accent-primary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* File Tree Item */
|
||||
.tree-node-active {
|
||||
background-color: var(--bg-panel-elevated);
|
||||
border-left: 2px solid var(--accent-primary);
|
||||
color: var(--text-main);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user