diff --git a/AGENTS.md b/AGENTS.md
index 69bd077..018914b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -215,19 +215,21 @@ Siehe `docs/DIRECTUS-SCHEMA.md` für vollständiges Schema.
## Farbpalette
```
-Monochrome Theme - reine Graustufen
+Warm Teal Theme
Light Mode:
-- BG: #FAFAFA
-- Text: #1A1A1A
-- Primary: #555555
-- Border: #D0D0D0
+- BG: #FAFAF9 (warm white)
+- Text: #1C1917
+- Accent: #0D9488 (Teal)
+- Border: #D6D3D1
+- Success: #16A34A / Warning: #D97706 / Error: #DC2626
Dark Mode:
-- BG: #141414
-- Text: #F0F0F0
-- Primary: #AAAAAA
-- Border: #3A3A3A
+- BG: #171717 (warm black)
+- Text: #F5F5F4
+- Accent: #2DD4BF (Teal light)
+- Border: #3D3836
+- Success: #4ADE80 / Warning: #FBBF24 / Error: #F87171
```
## Ansprechpartner
diff --git a/assets/logo-dark.svg b/assets/logo-dark.svg
index 0f9a773..b2931ff 100644
--- a/assets/logo-dark.svg
+++ b/assets/logo-dark.svg
@@ -7,6 +7,6 @@
}
- kashilo
+ kashilo
diff --git a/assets/logo-light.svg b/assets/logo-light.svg
index ae379bb..45157d2 100644
--- a/assets/logo-light.svg
+++ b/assets/logo-light.svg
@@ -7,6 +7,6 @@
}
- kashilo
+ kashilo
diff --git a/css/variables.css b/css/variables.css
index 249237d..fb84687 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -1,37 +1,37 @@
:root {
/*
- * Monochrome Theme - kashilo.com
- * Pure grayscale with neon green accent
+ * Warm Teal Theme - kashilo.com
+ * Clean, trustworthy, privacy-focused
*/
/* Colors - Light Mode */
- --color-primary: #555555;
- --color-primary-hover: #404040;
- --color-primary-light: #E8E8E8;
+ --color-primary: #525252;
+ --color-primary-hover: #3F3F3F;
+ --color-primary-light: #E7E5E4;
- --color-secondary: #777777;
- --color-secondary-hover: #5A5A5A;
+ --color-secondary: #737373;
+ --color-secondary-hover: #525252;
- --color-accent: #059669;
- --color-accent-hover: #047857;
+ --color-accent: #0D9488;
+ --color-accent-hover: #0F766E;
--color-accent-text: #fff;
- --color-success: #666666;
- --color-warning: #888888;
- --color-error: #444444;
+ --color-success: #16A34A;
+ --color-warning: #D97706;
+ --color-error: #DC2626;
- --color-bg: #FAFAFA;
- --color-bg-secondary: #F0F0F0;
- --color-bg-tertiary: #E5E5E5;
+ --color-bg: #FAFAF9;
+ --color-bg-secondary: #F5F5F4;
+ --color-bg-tertiary: #E7E5E4;
- --color-text: #1A1A1A;
- --color-text-secondary: #4A4A4A;
- --color-text-muted: #737373;
+ --color-text: #1C1917;
+ --color-text-secondary: #44403C;
+ --color-text-muted: #78716C;
- --color-border: #D0D0D0;
- --color-border-focus: #555555;
+ --color-border: #D6D3D1;
+ --color-border-focus: #0D9488;
- --color-shadow: rgba(0, 0, 0, 0.1);
+ --color-shadow: rgba(0, 0, 0, 0.08);
--color-overlay: rgba(0, 0, 0, 0.5);
/* Spacing */
@@ -97,31 +97,31 @@
/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
- --color-primary: #AAAAAA;
- --color-primary-hover: #C0C0C0;
- --color-primary-light: #2A2A2A;
+ --color-primary: #A8A29E;
+ --color-primary-hover: #D6D3D1;
+ --color-primary-light: #292524;
- --color-secondary: #909090;
- --color-secondary-hover: #A5A5A5;
+ --color-secondary: #A8A29E;
+ --color-secondary-hover: #D6D3D1;
- --color-accent: #10B981;
- --color-accent-hover: #34D399;
- --color-accent-text: #052e16;
+ --color-accent: #2DD4BF;
+ --color-accent-hover: #5EEAD4;
+ --color-accent-text: #042F2E;
- --color-success: #999999;
- --color-warning: #AAAAAA;
- --color-error: #888888;
+ --color-success: #4ADE80;
+ --color-warning: #FBBF24;
+ --color-error: #F87171;
- --color-bg: #141414;
- --color-bg-secondary: #1E1E1E;
- --color-bg-tertiary: #2A2A2A;
+ --color-bg: #171717;
+ --color-bg-secondary: #1C1917;
+ --color-bg-tertiary: #292524;
- --color-text: #F0F0F0;
- --color-text-secondary: #C0C0C0;
- --color-text-muted: #949494;
+ --color-text: #F5F5F4;
+ --color-text-secondary: #D6D3D1;
+ --color-text-muted: #A8A29E;
- --color-border: #3A3A3A;
- --color-border-focus: #AAAAAA;
+ --color-border: #3D3836;
+ --color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.7);
@@ -130,33 +130,32 @@
/* Dark Mode - Manual Override */
[data-theme="dark"] {
- --color-primary: #AAAAAA;
- --color-primary-hover: #C0C0C0;
- --color-primary-light: #2A2A2A;
+ --color-primary: #A8A29E;
+ --color-primary-hover: #D6D3D1;
+ --color-primary-light: #292524;
- --color-secondary: #909090;
- --color-secondary-hover: #A5A5A5;
+ --color-secondary: #A8A29E;
+ --color-secondary-hover: #D6D3D1;
- --color-accent: #10B981;
- --color-accent-hover: #34D399;
- --color-accent-text: #052e16;
+ --color-accent: #2DD4BF;
+ --color-accent-hover: #5EEAD4;
+ --color-accent-text: #042F2E;
- --color-success: #999999;
- --color-warning: #AAAAAA;
- --color-error: #888888;
+ --color-success: #4ADE80;
+ --color-warning: #FBBF24;
+ --color-error: #F87171;
- --color-bg: #141414;
- --color-bg-secondary: #1E1E1E;
- --color-bg-tertiary: #2A2A2A;
+ --color-bg: #171717;
+ --color-bg-secondary: #1C1917;
+ --color-bg-tertiary: #292524;
- --color-text: #F0F0F0;
- --color-text-secondary: #C0C0C0;
- --color-text-muted: #949494;
+ --color-text: #F5F5F4;
+ --color-text-secondary: #D6D3D1;
+ --color-text-muted: #A8A29E;
- --color-border: #3A3A3A;
- --color-border-focus: #AAAAAA;
+ --color-border: #3D3836;
+ --color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.7);
}
-
diff --git a/index.html b/index.html
index d63ea40..1d2ca3f 100644
--- a/index.html
+++ b/index.html
@@ -60,14 +60,14 @@
/* variables.css */
:root {
- --color-primary: #555555; --color-primary-hover: #404040; --color-primary-light: #E8E8E8;
- --color-secondary: #777777; --color-secondary-hover: #5A5A5A;
- --color-accent: #059669; --color-accent-hover: #047857; --color-accent-text: #fff;
- --color-success: #666666; --color-warning: #888888; --color-error: #444444;
- --color-bg: #FAFAFA; --color-bg-secondary: #F0F0F0; --color-bg-tertiary: #E5E5E5;
- --color-text: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-muted: #737373;
- --color-border: #D0D0D0; --color-border-focus: #555555;
- --color-shadow: rgba(0, 0, 0, 0.1); --color-overlay: rgba(0, 0, 0, 0.5);
+ --color-primary: #525252; --color-primary-hover: #3F3F3F; --color-primary-light: #E7E5E4;
+ --color-secondary: #737373; --color-secondary-hover: #525252;
+ --color-accent: #0D9488; --color-accent-hover: #0F766E; --color-accent-text: #fff;
+ --color-success: #16A34A; --color-warning: #D97706; --color-error: #DC2626;
+ --color-bg: #FAFAF9; --color-bg-secondary: #F5F5F4; --color-bg-tertiary: #E7E5E4;
+ --color-text: #1C1917; --color-text-secondary: #44403C; --color-text-muted: #78716C;
+ --color-border: #D6D3D1; --color-border-focus: #0D9488;
+ --color-shadow: rgba(0, 0, 0, 0.08); --color-overlay: rgba(0, 0, 0, 0.5);
--space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -82,24 +82,24 @@
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
- --color-primary: #AAAAAA; --color-primary-hover: #C0C0C0; --color-primary-light: #2A2A2A;
- --color-secondary: #909090; --color-secondary-hover: #A5A5A5;
- --color-accent: #10B981; --color-accent-hover: #34D399; --color-accent-text: #052e16;
- --color-success: #999999; --color-warning: #AAAAAA; --color-error: #888888;
- --color-bg: #141414; --color-bg-secondary: #1E1E1E; --color-bg-tertiary: #2A2A2A;
- --color-text: #F0F0F0; --color-text-secondary: #C0C0C0; --color-text-muted: #949494;
- --color-border: #3A3A3A; --color-border-focus: #AAAAAA;
+ --color-primary: #A8A29E; --color-primary-hover: #D6D3D1; --color-primary-light: #292524;
+ --color-secondary: #A8A29E; --color-secondary-hover: #D6D3D1;
+ --color-accent: #2DD4BF; --color-accent-hover: #5EEAD4; --color-accent-text: #042F2E;
+ --color-success: #4ADE80; --color-warning: #FBBF24; --color-error: #F87171;
+ --color-bg: #171717; --color-bg-secondary: #1C1917; --color-bg-tertiary: #292524;
+ --color-text: #F5F5F4; --color-text-secondary: #D6D3D1; --color-text-muted: #A8A29E;
+ --color-border: #3D3836; --color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
}
}
[data-theme="dark"] {
- --color-primary: #AAAAAA; --color-primary-hover: #C0C0C0; --color-primary-light: #2A2A2A;
- --color-secondary: #909090; --color-secondary-hover: #A5A5A5;
- --color-accent: #10B981; --color-accent-hover: #34D399; --color-accent-text: #052e16;
- --color-success: #999999; --color-warning: #AAAAAA; --color-error: #888888;
- --color-bg: #141414; --color-bg-secondary: #1E1E1E; --color-bg-tertiary: #2A2A2A;
- --color-text: #F0F0F0; --color-text-secondary: #C0C0C0; --color-text-muted: #949494;
- --color-border: #3A3A3A; --color-border-focus: #AAAAAA;
+ --color-primary: #A8A29E; --color-primary-hover: #D6D3D1; --color-primary-light: #292524;
+ --color-secondary: #A8A29E; --color-secondary-hover: #D6D3D1;
+ --color-accent: #2DD4BF; --color-accent-hover: #5EEAD4; --color-accent-text: #042F2E;
+ --color-success: #4ADE80; --color-warning: #FBBF24; --color-error: #F87171;
+ --color-bg: #171717; --color-bg-secondary: #1C1917; --color-bg-tertiary: #292524;
+ --color-text: #F5F5F4; --color-text-secondary: #D6D3D1; --color-text-muted: #A8A29E;
+ --color-border: #3D3836; --color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
}
diff --git a/js/components/pages/page-settings.js b/js/components/pages/page-settings.js
index 990aa35..04a2b3b 100644
--- a/js/components/pages/page-settings.js
+++ b/js/components/pages/page-settings.js
@@ -500,6 +500,10 @@ style.textContent = /* css */`
color: white;
}
+ #clear-all-data {
+ white-space: nowrap;
+ }
+
page-settings .about-links {
display: flex;
flex-wrap: wrap;