sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): implement single-file CSS theming engine with dark, light, high-contrast, and soft themes
MindSift CI & Docker Release / Build, Test in Container & Push (push) Failing after 16s
Details

Browse Source
This commit is contained in:
sandrodach committed 2026-10-24 23:26:31 +02:00
1 parent 0f24cbdbf4
commit b3e651b3b9
18 files changed
+1455 -804
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/index.css
+123 -50
View File
@@ -1,47 +1,23 @@
/* ==========================================================================
MINDSIFT THEME ENGINE — ZENTRALE EINBINDUNG
Jedes Theme ist eine eigenständige CSS-Datei unter src/themes/ mit 6 Gruppen:
1. Akzentfarbe
2. Oberflächen & Hintergründe
3. Text & Kontraste
4. Rahmen, Linien & Schatten
5. Status- & Signalfarben
6. Rundungen (Geometrie)
========================================================================== */
@import './themes/theme-dark.css';
@import './themes/theme-light.css';
@import './themes/theme-high-contrast.css';
@import './themes/theme-soft.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ==========================================================================
MINDFSIFT DESIGN SYSTEM - ZENTRALE STEUERUNG
Hier können Farben, Blauton, Kontraste und Rundungen zentral angepasst werden!
========================================================================== */
:root {
/* --- 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 */
/* --- 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 */
/* --- 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;
/* --- 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) */
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
@@ -52,9 +28,10 @@ body {
color: var(--text-main);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow-x: hidden;
transition: background-color 140ms ease, color 140ms ease;
}
/* Subtiler monochromer Scrollbar */
/* Scrollbar über Theme-Variablen */
::-webkit-scrollbar {
width: 5px;
height: 5px;
@@ -65,16 +42,16 @@ body {
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
background: var(--scrollbar-thumb);
border-radius: var(--radius-btn);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
background: var(--scrollbar-thumb-hover);
}
/* ==========================================================================
WIEDERVERWENDBARE SEMANTISCHE KLASSEN
SEMANTISCHE KOMPONENTEN-KLASSEN (100% Theme-gesteuert)
========================================================================== */
@layer components {
@@ -85,11 +62,33 @@ body {
border-radius: var(--radius-card);
}
.panel-elevated {
background-color: var(--bg-panel-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-card);
}
.panel-header {
border-bottom: 1px solid var(--border-color);
}
/* Monochromer, eckiger Standard-Aktionsbutton */
/* Automatische Übernahme von --radius-card auf gerahmten Panels & Boxen */
.bg-panel.border,
.bg-canvas.border {
border-radius: var(--radius-card);
}
/* Quick-Capture-Blase & Profil-Pill im Header */
.capture-pill {
border-radius: var(--radius-pill);
}
/* Aufgaben-Checkboxen */
.checkbox-square {
border-radius: var(--radius-checkbox);
}
/* Standard-Aktionsbutton */
.btn-action {
display: inline-flex;
align-items: center;
@@ -122,8 +121,9 @@ body {
padding-left: 0.75rem;
padding-right: 0.75rem;
background-color: var(--accent-primary);
border: 1px solid var(--accent-border);
border-radius: var(--radius-btn);
color: #ffffff;
color: var(--text-on-accent);
font-size: 0.75rem;
font-weight: 500;
transition: all 120ms ease;
@@ -133,7 +133,7 @@ body {
background-color: var(--accent-hover);
}
/* Kleiner eckiger Icon-Button */
/* Kleiner Icon-Button */
.btn-icon {
display: inline-flex;
align-items: center;
@@ -166,9 +166,9 @@ body {
cursor: pointer;
}
.btn-icon-danger:hover {
background-color: rgba(239, 68, 68, 0.15);
background-color: var(--bg-danger);
color: var(--color-danger);
border-color: rgba(239, 68, 68, 0.3);
border-color: var(--border-danger);
}
/* Zentrales Texteingabefeld */
@@ -211,7 +211,7 @@ body {
background-color: var(--bg-panel-elevated);
}
/* Status Badge */
/* Status Badges */
.badge-accent {
display: inline-flex;
align-items: center;
@@ -219,11 +219,84 @@ body {
padding: 0.125rem 0.5rem;
background-color: var(--accent-dim);
border: 1px solid var(--accent-border);
border-radius: var(--radius-btn);
color: var(--accent-primary);
font-size: 0.75rem;
font-weight: 500;
}
.badge-neutral {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.375rem;
background-color: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-btn);
color: var(--text-muted);
font-size: 0.65rem;
font-weight: 500;
}
.badge-ok {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.375rem;
background-color: var(--bg-success);
border: 1px solid var(--border-success);
border-radius: var(--radius-btn);
color: var(--color-success);
font-size: 0.65rem;
font-weight: 500;
}
.badge-err {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.375rem;
background-color: var(--bg-danger);
border: 1px solid var(--border-danger);
border-radius: var(--radius-btn);
color: var(--color-danger);
font-size: 0.65rem;
font-weight: 500;
}
/* Status Alert Boxen */
.alert-ok {
padding: 0.75rem;
background-color: var(--bg-success);
border: 1px solid var(--border-success);
border-radius: var(--radius-card);
color: var(--text-main);
font-size: 0.75rem;
}
.alert-err {
padding: 0.75rem;
background-color: var(--bg-danger);
border: 1px solid var(--border-danger);
border-radius: var(--radius-card);
color: var(--color-danger);
font-size: 0.75rem;
}
/* Code- & Terminal-Blöcke */
.code-block {
background-color: var(--bg-code);
border: 1px solid var(--border-color);
border-radius: var(--radius-card);
color: var(--text-main);
}
/* Modal-Hintergrund-Overlay */
.modal-overlay {
background-color: var(--bg-overlay);
backdrop-filter: blur(4px);
}
/* File Tree Item */
.tree-node-active {
background-color: var(--bg-panel-elevated);