schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

style: switch from monochrome to warm teal theme with proper success/warning/error colors

Browse Source
This commit is contained in:
Schmidt
2026-02-11 06:31:34 +01:00
parent 9069404942
commit 825aee192b
6 changed files with 98 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
AGENTS.md
View File

@@ -215,19 +215,21 @@ Siehe `docs/DIRECTUS-SCHEMA.md` für vollständiges Schema.
## Farbpalette ## Farbpalette
``` ```
Monochrome Theme - reine Graustufen Warm Teal Theme
Light Mode: Light Mode:
- BG: #FAFAFA - BG: #FAFAF9 (warm white)
- Text: #1A1A1A - Text: #1C1917
- Primary: #555555 - Accent: #0D9488 (Teal)
- Border: #D0D0D0 - Border: #D6D3D1
- Success: #16A34A / Warning: #D97706 / Error: #DC2626
Dark Mode: Dark Mode:
- BG: #141414 - BG: #171717 (warm black)
- Text: #F0F0F0 - Text: #F5F5F4
- Primary: #AAAAAA - Accent: #2DD4BF (Teal light)
- Border: #3A3A3A - Border: #3D3836
- Success: #4ADE80 / Warning: #FBBF24 / Error: #F87171
``` ```
## Ansprechpartner ## Ansprechpartner

2
assets/logo-dark.svg
View File

@@ -7,6 +7,6 @@
} }
</style> </style>
<text x="2" y="28" class="logo-text"> <text x="2" y="28" class="logo-text">
<tspan fill="#10B981">k</tspan><tspan fill="#AAAAAA">ashilo</tspan> <tspan fill="#2DD4BF">k</tspan><tspan fill="#A8A29E">ashilo</tspan>
</text> </text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 341 B

2
assets/logo-light.svg
View File

@@ -7,6 +7,6 @@
} }
</style> </style>
<text x="2" y="28" class="logo-text"> <text x="2" y="28" class="logo-text">
<tspan fill="#059669">k</tspan><tspan fill="#555555">ashilo</tspan> <tspan fill="#0D9488">k</tspan><tspan fill="#525252">ashilo</tspan>
</text> </text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 341 B

119
css/variables.css
View File

@@ -1,37 +1,37 @@
:root { :root {
/* /*
* Monochrome Theme - kashilo.com * Warm Teal Theme - kashilo.com
* Pure grayscale with neon green accent * Clean, trustworthy, privacy-focused
*/ */
/* Colors - Light Mode */ /* Colors - Light Mode */
--color-primary: #555555; --color-primary: #525252;
--color-primary-hover: #404040; --color-primary-hover: #3F3F3F;
--color-primary-light: #E8E8E8; --color-primary-light: #E7E5E4;
--color-secondary: #777777; --color-secondary: #737373;
--color-secondary-hover: #5A5A5A; --color-secondary-hover: #525252;
--color-accent: #059669; --color-accent: #0D9488;
--color-accent-hover: #047857; --color-accent-hover: #0F766E;
--color-accent-text: #fff; --color-accent-text: #fff;
--color-success: #666666; --color-success: #16A34A;
--color-warning: #888888; --color-warning: #D97706;
--color-error: #444444; --color-error: #DC2626;
--color-bg: #FAFAFA; --color-bg: #FAFAF9;
--color-bg-secondary: #F0F0F0; --color-bg-secondary: #F5F5F4;
--color-bg-tertiary: #E5E5E5; --color-bg-tertiary: #E7E5E4;
--color-text: #1A1A1A; --color-text: #1C1917;
--color-text-secondary: #4A4A4A; --color-text-secondary: #44403C;
--color-text-muted: #737373; --color-text-muted: #78716C;
--color-border: #D0D0D0; --color-border: #D6D3D1;
--color-border-focus: #555555; --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); --color-overlay: rgba(0, 0, 0, 0.5);
/* Spacing */ /* Spacing */
@@ -97,31 +97,31 @@
/* Dark Mode - System Preference */ /* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--color-primary: #AAAAAA; --color-primary: #A8A29E;
--color-primary-hover: #C0C0C0; --color-primary-hover: #D6D3D1;
--color-primary-light: #2A2A2A; --color-primary-light: #292524;
--color-secondary: #909090; --color-secondary: #A8A29E;
--color-secondary-hover: #A5A5A5; --color-secondary-hover: #D6D3D1;
--color-accent: #10B981; --color-accent: #2DD4BF;
--color-accent-hover: #34D399; --color-accent-hover: #5EEAD4;
--color-accent-text: #052e16; --color-accent-text: #042F2E;
--color-success: #999999; --color-success: #4ADE80;
--color-warning: #AAAAAA; --color-warning: #FBBF24;
--color-error: #888888; --color-error: #F87171;
--color-bg: #141414; --color-bg: #171717;
--color-bg-secondary: #1E1E1E; --color-bg-secondary: #1C1917;
--color-bg-tertiary: #2A2A2A; --color-bg-tertiary: #292524;
--color-text: #F0F0F0; --color-text: #F5F5F4;
--color-text-secondary: #C0C0C0; --color-text-secondary: #D6D3D1;
--color-text-muted: #949494; --color-text-muted: #A8A29E;
--color-border: #3A3A3A; --color-border: #3D3836;
--color-border-focus: #AAAAAA; --color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4); --color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.7); --color-overlay: rgba(0, 0, 0, 0.7);
@@ -130,33 +130,32 @@
/* Dark Mode - Manual Override */ /* Dark Mode - Manual Override */
[data-theme="dark"] { [data-theme="dark"] {
--color-primary: #AAAAAA; --color-primary: #A8A29E;
--color-primary-hover: #C0C0C0; --color-primary-hover: #D6D3D1;
--color-primary-light: #2A2A2A; --color-primary-light: #292524;
--color-secondary: #909090; --color-secondary: #A8A29E;
--color-secondary-hover: #A5A5A5; --color-secondary-hover: #D6D3D1;
--color-accent: #10B981; --color-accent: #2DD4BF;
--color-accent-hover: #34D399; --color-accent-hover: #5EEAD4;
--color-accent-text: #052e16; --color-accent-text: #042F2E;
--color-success: #999999; --color-success: #4ADE80;
--color-warning: #AAAAAA; --color-warning: #FBBF24;
--color-error: #888888; --color-error: #F87171;
--color-bg: #141414; --color-bg: #171717;
--color-bg-secondary: #1E1E1E; --color-bg-secondary: #1C1917;
--color-bg-tertiary: #2A2A2A; --color-bg-tertiary: #292524;
--color-text: #F0F0F0; --color-text: #F5F5F4;
--color-text-secondary: #C0C0C0; --color-text-secondary: #D6D3D1;
--color-text-muted: #949494; --color-text-muted: #A8A29E;
--color-border: #3A3A3A; --color-border: #3D3836;
--color-border-focus: #AAAAAA; --color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4); --color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.7); --color-overlay: rgba(0, 0, 0, 0.7);
} }

44
index.html
View File

@@ -60,14 +60,14 @@
/* variables.css */ /* variables.css */
:root { :root {
--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-text: #fff; --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-overlay: rgba(0, 0, 0, 0.5); --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; --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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'Space Grotesk', -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) { @media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :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); --color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
} }
} }
[data-theme="dark"] { [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); --color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
} }

4
js/components/pages/page-settings.js
View File

@@ -500,6 +500,10 @@ style.textContent = /* css */`
color: white; color: white;
} }
#clear-all-data {
white-space: nowrap;
}
page-settings .about-links { page-settings .about-links {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;