feat(themes): colour families with light/dark, follow system, corners, frames, accent
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m30s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m30s
- Fjord (new), Polarized Hell and Suri Hell complete the families Klassik, Fjord, Terrakotta, Polarized, Suri - settings: family table, follow-system, corners, button frames and an own accent colour (per device); compact quick picker in the user menus - code colours in index.css are fallbacks only chore(release): v0.14.0 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed
1 parent
2c9b4762fc
commit
3f0e596356
16 files changed
+949
-58
No files matched your search
@@ -0,0 +1,69 @@
|
||||
/* ==========================================================================
|
||||
MINDSIFT THEME: FJORD NACHT (Tiefsee & Mondlicht)
|
||||
Das dunkle Gegenstück zu Fjord: tiefes Nachtblau statt Schwarz,
|
||||
mondhelle Schrift, leuchtendes Gletscherblau, weiche Ecken.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="fjord-night"] {
|
||||
/* --- 1. AKZENTFARBE (Leuchtendes Gletscherblau) --- */
|
||||
--accent-primary: #5b9bdf;
|
||||
--accent-hover: #7db2ea;
|
||||
--accent-dim: rgba(91, 155, 223, 0.16);
|
||||
--accent-border: rgba(91, 155, 223, 0.40);
|
||||
--text-on-accent: #0b1622;
|
||||
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Tiefsee) --- */
|
||||
--bg-app: #0e1621;
|
||||
--bg-panel: #152131;
|
||||
--bg-panel-elevated: #1c2b3e;
|
||||
--bg-panel-hover: #24364c;
|
||||
--bg-input: #101a26;
|
||||
--bg-overlay: rgba(5, 10, 16, 0.72);
|
||||
--bg-code: #0b121b;
|
||||
--bg-editor: #121d2a;
|
||||
--bg-sidebar: #0e1621;
|
||||
|
||||
/* --- 3. TEXT & KONTRASTE (Mondlicht) --- */
|
||||
--text-main: #e6eef8;
|
||||
--text-muted: #9fb1c6;
|
||||
--text-faint: #6b7d93;
|
||||
|
||||
/* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
|
||||
--border-color: rgba(180, 205, 235, 0.12);
|
||||
--border-subtle: rgba(180, 205, 235, 0.06);
|
||||
--border-strong: rgba(180, 205, 235, 0.24);
|
||||
--shadow-panel: 0 12px 32px rgba(2, 6, 12, 0.55);
|
||||
--scrollbar-thumb: rgba(91, 155, 223, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(91, 155, 223, 0.38);
|
||||
|
||||
/* --- 5. STATUS- & SIGNALFARBEN --- */
|
||||
--color-success: #6fcf97;
|
||||
--bg-success: rgba(111, 207, 151, 0.14);
|
||||
--border-success: rgba(111, 207, 151, 0.36);
|
||||
|
||||
--color-danger: #f28b82;
|
||||
--bg-danger: rgba(242, 139, 130, 0.14);
|
||||
--border-danger: rgba(242, 139, 130, 0.36);
|
||||
|
||||
--color-warning: #f6c177;
|
||||
--bg-warning: rgba(246, 193, 119, 0.14);
|
||||
--border-warning: rgba(246, 193, 119, 0.36);
|
||||
|
||||
/* --- 6. RUNDUNGEN (Weich) --- */
|
||||
--radius-card: 12px;
|
||||
--radius-btn: 8px;
|
||||
--radius-input: 8px;
|
||||
--radius-checkbox: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* --- 7. CODE-SYNTAX-HIGHLIGHTING --- */
|
||||
--code-keyword: #7db2ea;
|
||||
--code-string: #9fd4a3;
|
||||
--code-number: #f6c177;
|
||||
--code-comment: #6b7d93;
|
||||
--code-property: #c3d8f0;
|
||||
--code-function: #c4a7f5;
|
||||
--code-type: #6fd3c8;
|
||||
--code-punctuation: #9fb1c6;
|
||||
--code-variable: #c3d8f0;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/* ==========================================================================
|
||||
MINDSIFT THEME: FJORD (Kühles Papier & Gletscherblau)
|
||||
Bläulich-weißes Papier, nebelgraue Seitenleiste, tintenblaue Schrift,
|
||||
klares Fjordblau als Akzent und weiche Ecken.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="fjord"] {
|
||||
/* --- 1. AKZENTFARBE (Fjordblau) --- */
|
||||
--accent-primary: #2b6cb0;
|
||||
--accent-hover: #1f5590;
|
||||
--accent-dim: rgba(43, 108, 176, 0.10);
|
||||
--accent-border: rgba(43, 108, 176, 0.34);
|
||||
--text-on-accent: #ffffff;
|
||||
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Papier, Nebel, Eis) --- */
|
||||
--bg-app: #e9eef5;
|
||||
--bg-panel: #f7f9fc;
|
||||
--bg-panel-elevated: #dde5ef;
|
||||
--bg-panel-hover: #cfd9e6;
|
||||
--bg-input: #fbfcfe;
|
||||
--bg-overlay: rgba(14, 24, 38, 0.45);
|
||||
--bg-code: #eef2f8;
|
||||
--bg-editor: #fafcff;
|
||||
--bg-sidebar: #edf2f8;
|
||||
|
||||
/* --- 3. TEXT & KONTRASTE (Tintenblau) --- */
|
||||
--text-main: #14202e;
|
||||
--text-muted: #45556a;
|
||||
--text-faint: #7a8798;
|
||||
|
||||
/* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
|
||||
--border-color: rgba(30, 55, 90, 0.16);
|
||||
--border-subtle: rgba(30, 55, 90, 0.08);
|
||||
--border-strong: rgba(30, 55, 90, 0.30);
|
||||
--shadow-panel: 0 10px 28px rgba(20, 40, 70, 0.10);
|
||||
--scrollbar-thumb: rgba(30, 55, 90, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(30, 55, 90, 0.38);
|
||||
|
||||
/* --- 5. STATUS- & SIGNALFARBEN --- */
|
||||
--color-success: #2f855a;
|
||||
--bg-success: rgba(47, 133, 90, 0.11);
|
||||
--border-success: rgba(47, 133, 90, 0.34);
|
||||
|
||||
--color-danger: #c53030;
|
||||
--bg-danger: rgba(197, 48, 48, 0.09);
|
||||
--border-danger: rgba(197, 48, 48, 0.34);
|
||||
|
||||
--color-warning: #b7791f;
|
||||
--bg-warning: rgba(183, 121, 31, 0.11);
|
||||
--border-warning: rgba(183, 121, 31, 0.34);
|
||||
|
||||
/* --- 6. RUNDUNGEN (Weich) --- */
|
||||
--radius-card: 12px;
|
||||
--radius-btn: 8px;
|
||||
--radius-input: 8px;
|
||||
--radius-checkbox: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* --- 7. CODE-SYNTAX-HIGHLIGHTING (kühle Töne auf Papier) --- */
|
||||
--code-keyword: #2b6cb0;
|
||||
--code-string: #2f855a;
|
||||
--code-number: #b7791f;
|
||||
--code-comment: #7a8798;
|
||||
--code-property: #1a4e7a;
|
||||
--code-function: #6b46c1;
|
||||
--code-type: #0e7490;
|
||||
--code-punctuation: #45556a;
|
||||
--code-variable: #1a4e7a;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/* ==========================================================================
|
||||
MINDSIFT THEME: POLARIZED HELL (Lagune & Kreide)
|
||||
Das helle Gegenstück zu Polarized: kreidiges Mintweiß, tiefes Petrol als
|
||||
Akzent, dunkle Schiefer-Schrift, klar und eckig wie das Original.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="polarized-light"] {
|
||||
/* --- 1. AKZENTFARBE (Tiefes Petrol) --- */
|
||||
--accent-primary: #0f766e;
|
||||
--accent-hover: #115e59;
|
||||
--accent-dim: rgba(15, 118, 110, 0.10);
|
||||
--accent-border: rgba(15, 118, 110, 0.34);
|
||||
--text-on-accent: #ffffff;
|
||||
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Kreide, Lagune) --- */
|
||||
--bg-app: #e6f0ef;
|
||||
--bg-panel: #f6fbfa;
|
||||
--bg-panel-elevated: #d8e8e6;
|
||||
--bg-panel-hover: #c7dcd9;
|
||||
--bg-input: #fbfefd;
|
||||
--bg-overlay: rgba(8, 30, 28, 0.45);
|
||||
--bg-code: #eaf3f2;
|
||||
--bg-editor: #f9fdfc;
|
||||
--bg-sidebar: #ebf4f3;
|
||||
|
||||
/* --- 3. TEXT & KONTRASTE --- */
|
||||
--text-main: #0f2422;
|
||||
--text-muted: #3f5c59;
|
||||
--text-faint: #728a87;
|
||||
|
||||
/* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
|
||||
--border-color: rgba(15, 80, 75, 0.17);
|
||||
--border-subtle: rgba(15, 80, 75, 0.08);
|
||||
--border-strong: rgba(15, 80, 75, 0.32);
|
||||
--shadow-panel: 0 8px 24px rgba(10, 45, 42, 0.09);
|
||||
--scrollbar-thumb: rgba(15, 80, 75, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(15, 80, 75, 0.38);
|
||||
|
||||
/* --- 5. STATUS- & SIGNALFARBEN --- */
|
||||
--color-success: #15803d;
|
||||
--bg-success: rgba(21, 128, 61, 0.10);
|
||||
--border-success: rgba(21, 128, 61, 0.34);
|
||||
|
||||
--color-danger: #be123c;
|
||||
--bg-danger: rgba(190, 18, 60, 0.09);
|
||||
--border-danger: rgba(190, 18, 60, 0.34);
|
||||
|
||||
--color-warning: #b45309;
|
||||
--bg-warning: rgba(180, 83, 9, 0.10);
|
||||
--border-warning: rgba(180, 83, 9, 0.34);
|
||||
|
||||
/* --- 6. RUNDUNGEN (Klar & eckig wie Polarized) --- */
|
||||
--radius-card: 0px;
|
||||
--radius-btn: 2px;
|
||||
--radius-input: 2px;
|
||||
--radius-checkbox: 0px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* --- 7. CODE-SYNTAX-HIGHLIGHTING --- */
|
||||
--code-keyword: #0f766e;
|
||||
--code-string: #9a3412;
|
||||
--code-number: #b45309;
|
||||
--code-comment: #728a87;
|
||||
--code-property: #155e75;
|
||||
--code-function: #7e22ce;
|
||||
--code-type: #0e7490;
|
||||
--code-punctuation: #3f5c59;
|
||||
--code-variable: #155e75;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/* ==========================================================================
|
||||
MINDSIFT THEME: SURI HELL (Lavendel & Pflaume)
|
||||
Das helle Gegenstück zu Suri: lavendelhelles Papier, pflaumendunkle
|
||||
Schrift, samtiger Orchideen-Akzent und weich gerundete Ecken.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="suri-light"] {
|
||||
/* --- 1. AKZENTFARBE (Orchidee) --- */
|
||||
--accent-primary: #8e44c9;
|
||||
--accent-hover: #7431a8;
|
||||
--accent-dim: rgba(142, 68, 201, 0.10);
|
||||
--accent-border: rgba(142, 68, 201, 0.34);
|
||||
--text-on-accent: #ffffff;
|
||||
|
||||
/* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Lavendel) --- */
|
||||
--bg-app: #efe9f4;
|
||||
--bg-panel: #fbf8fd;
|
||||
--bg-panel-elevated: #e6dcef;
|
||||
--bg-panel-hover: #d9cce6;
|
||||
--bg-input: #fdfbfe;
|
||||
--bg-overlay: rgba(30, 18, 40, 0.45);
|
||||
--bg-code: #f2ecf7;
|
||||
--bg-editor: #fdfaff;
|
||||
--bg-sidebar: #f2ecf7;
|
||||
|
||||
/* --- 3. TEXT & KONTRASTE (Pflaume) --- */
|
||||
--text-main: #23182e;
|
||||
--text-muted: #574a68;
|
||||
--text-faint: #8a7c9c;
|
||||
|
||||
/* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
|
||||
--border-color: rgba(70, 40, 100, 0.16);
|
||||
--border-subtle: rgba(70, 40, 100, 0.08);
|
||||
--border-strong: rgba(70, 40, 100, 0.30);
|
||||
--shadow-panel: 0 10px 28px rgba(50, 25, 75, 0.10);
|
||||
--scrollbar-thumb: rgba(70, 40, 100, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(70, 40, 100, 0.38);
|
||||
|
||||
/* --- 5. STATUS- & SIGNALFARBEN --- */
|
||||
--color-success: #2f855a;
|
||||
--bg-success: rgba(47, 133, 90, 0.11);
|
||||
--border-success: rgba(47, 133, 90, 0.34);
|
||||
|
||||
--color-danger: #c2185b;
|
||||
--bg-danger: rgba(194, 24, 91, 0.09);
|
||||
--border-danger: rgba(194, 24, 91, 0.34);
|
||||
|
||||
--color-warning: #b7791f;
|
||||
--bg-warning: rgba(183, 121, 31, 0.11);
|
||||
--border-warning: rgba(183, 121, 31, 0.34);
|
||||
|
||||
/* --- 6. RUNDUNGEN (Weich wie Suri) --- */
|
||||
--radius-card: 10px;
|
||||
--radius-btn: 6px;
|
||||
--radius-input: 6px;
|
||||
--radius-checkbox: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* --- 7. CODE-SYNTAX-HIGHLIGHTING --- */
|
||||
--code-keyword: #7431a8;
|
||||
--code-string: #2f855a;
|
||||
--code-number: #b7791f;
|
||||
--code-comment: #8a7c9c;
|
||||
--code-property: #5b2a86;
|
||||
--code-function: #b4235f;
|
||||
--code-type: #0e7490;
|
||||
--code-punctuation: #574a68;
|
||||
--code-variable: #5b2a86;
|
||||
}
|
||||
Reference in new issue
Block a user