From 4fee85bd225a4b7931e83071d5f8879d4f6af5da Mon Sep 17 00:00:00 2001 From: rene Date: Fri, 22 May 2026 08:59:35 +0200 Subject: [PATCH] =?UTF-8?q?Refactor:=20CSS-Variablen=20f=C3=BCr=20alle=20F?= =?UTF-8?q?arbwerte=20(theme.css)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/lib/styles/theme.css | 59 +++++++ app/src/routes/(app)/+layout.svelte | 18 +-- app/src/routes/(app)/+page.svelte | 24 +-- app/src/routes/(app)/beitraege/+page.svelte | 82 +++++----- .../routes/(app)/einstellungen/+page.svelte | 108 ++++++------- .../routes/(app)/import-export/+page.svelte | 70 ++++----- app/src/routes/(app)/mitglieder/+page.svelte | 40 ++--- .../routes/(app)/mitglieder/[id]/+page.svelte | 78 +++++----- .../routes/(app)/mitglieder/neu/+page.svelte | 30 ++-- app/src/routes/(app)/nachrichten/+page.svelte | 52 +++---- app/src/routes/(app)/neuigkeiten/+page.svelte | 66 ++++---- app/src/routes/(app)/orte/+page.svelte | 70 ++++----- app/src/routes/(app)/termine/+page.svelte | 146 +++++++++--------- app/src/routes/(auth)/+layout.svelte | 6 +- app/src/routes/(auth)/login/+page.svelte | 22 +-- app/src/routes/(auth)/register/+page.svelte | 24 +-- app/src/routes/+layout.svelte | 5 +- app/src/routes/invite/[token]/+page.svelte | 32 ++-- app/src/routes/onboarding/+page.svelte | 50 +++--- 19 files changed, 521 insertions(+), 461 deletions(-) create mode 100644 app/src/lib/styles/theme.css diff --git a/app/src/lib/styles/theme.css b/app/src/lib/styles/theme.css new file mode 100644 index 0000000..220bdcb --- /dev/null +++ b/app/src/lib/styles/theme.css @@ -0,0 +1,59 @@ +:root { + /* Primärfarbe */ + --c-primary: #1e40af; + --c-primary-dark: #1d3a9e; + --c-primary-light: #e0e7ff; + --c-primary-subtle: #eff6ff; + + /* Text */ + --c-text: #1e293b; + --c-text-secondary: #475569; + --c-text-muted: #64748b; + --c-text-hint: #94a3b8; + + /* Hintergrund & Rahmen */ + --c-border: #e2e8f0; + --c-bg: #f1f5f9; + --c-bg-card: #ffffff; + --c-bg-subtle: #f8fafc; + + /* Dunkel (Theme-Farbe, Header, PWA) */ + --c-dark: #0f172a; + + /* Fehler / Rot */ + --c-error: #dc2626; + --c-error-dark: #b91c1c; + --c-error-light: #fca5a5; + --c-error-bg: #fee2e2; + --c-error-subtle: #fef2f2; + + /* Erfolg / Grün */ + --c-success: #16a34a; + --c-success-light: #86efac; + --c-success-bg: #dcfce7; + + /* Warnung / Gelb-Amber */ + --c-warning: #f59e0b; + --c-warning-light: #fde047; + --c-warning-bg: #fef9c3; + --c-warning-subtle: #fffbeb; + --c-warning-dark: #92400e; + --c-warning-darker: #713f12; + + /* Akzent / Lila (Plan-Badges) */ + --c-accent: #7c3aed; + --c-accent-subtle: #ede9fe; + + /* Primärfarbe – weitere Töne */ + --c-primary-100: #bfdbfe; + --c-primary-200: #c7d2fe; + --c-primary-bg: #f0f9ff; + + /* Erfolg – weitere Töne */ + --c-success-dark: #166534; + --c-success-subtle: #f0fdf4; + + /* Warnung – weitere Töne */ + --c-warning-amber: #854d0e; + --c-warning-pale: #fefce8; +} diff --git a/app/src/routes/(app)/+layout.svelte b/app/src/routes/(app)/+layout.svelte index 03e722c..06303db 100644 --- a/app/src/routes/(app)/+layout.svelte +++ b/app/src/routes/(app)/+layout.svelte @@ -103,8 +103,8 @@ align-items: center; justify-content: space-between; padding: 0.75rem 1rem; - background: #fff; - border-bottom: 1px solid #e2e8f0; + background: var(--c-bg-card); + border-bottom: 1px solid var(--c-border); } .logo { @@ -113,19 +113,19 @@ gap: 0.45rem; font-size: 1.05rem; font-weight: 700; - color: #0f172a; + color: var(--c-dark); letter-spacing: -0.02em; text-decoration: none; } .header-icon { - color: #64748b; + color: var(--c-text-muted); display: flex; align-items: center; padding: 0.25rem; transition: color 0.15s; } - .header-icon:hover { color: #1e293b; } + .header-icon:hover { color: var(--c-text); } main { flex: 1; @@ -143,8 +143,8 @@ right: 0; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); - background: #fff; - border-top: 1px solid #e2e8f0; + background: var(--c-bg-card); + border-top: 1px solid var(--c-border); display: flex; z-index: 10; } @@ -156,14 +156,14 @@ align-items: center; justify-content: center; gap: 0.15rem; - color: #94a3b8; + color: var(--c-text-hint); transition: color .15s; font-size: 0.7rem; text-decoration: none; } .bottom-nav a.active { - color: #1e40af; + color: var(--c-primary); } .nav-label { diff --git a/app/src/routes/(app)/+page.svelte b/app/src/routes/(app)/+page.svelte index 0a54389..1074e92 100644 --- a/app/src/routes/(app)/+page.svelte +++ b/app/src/routes/(app)/+page.svelte @@ -64,7 +64,7 @@ align-items: center; gap: 1rem; padding: 1.25rem; - background: #0f172a; + background: var(--c-dark); border-radius: 14px; margin-bottom: 1.5rem; } @@ -79,18 +79,18 @@ h1 { font-size: 1.15rem; font-weight: 700; - color: #fff; + color: var(--c-bg-card); margin: 0; } .verein-ort { font-size: 0.82rem; - color: #94a3b8; + color: var(--c-text-hint); } section { - background: #fff; - border: 1px solid #e2e8f0; + background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; } @@ -98,7 +98,7 @@ h2 { font-size: 0.72rem; font-weight: 700; - color: #94a3b8; + color: var(--c-text-hint); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.85rem 1rem 0.5rem; @@ -116,24 +116,24 @@ flex-direction: column; gap: 0.15rem; padding: 0.7rem 1rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid var(--c-bg); } - .termin-titel { font-size: 0.92rem; font-weight: 600; color: #1e293b; } - .termin-wann { font-size: 0.78rem; color: #64748b; } + .termin-titel { font-size: 0.92rem; font-weight: 600; color: var(--c-text); } + .termin-wann { font-size: 0.78rem; color: var(--c-text-muted); } .alle-link { display: block; padding: 0.7rem 1rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid var(--c-bg); font-size: 0.85rem; - color: #1e40af; + color: var(--c-primary); text-decoration: none; font-weight: 500; } .hint { - color: #94a3b8; + color: var(--c-text-hint); font-size: 0.9rem; text-align: center; margin-top: 2rem; diff --git a/app/src/routes/(app)/beitraege/+page.svelte b/app/src/routes/(app)/beitraege/+page.svelte index e476522..306fc99 100644 --- a/app/src/routes/(app)/beitraege/+page.svelte +++ b/app/src/routes/(app)/beitraege/+page.svelte @@ -350,26 +350,26 @@ margin-bottom: 1.25rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } - h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } + h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); } .plan-hinweis { - background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; - padding: 0.75rem 1rem; font-size: 0.875rem; color: #1e40af; margin-bottom: 1rem; + background: var(--c-primary-subtle); border: 1px solid var(--c-primary-100); border-radius: 8px; + padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--c-primary); margin-bottom: 1rem; } - .plan-hinweis a { color: #1e40af; font-weight: 700; } + .plan-hinweis a { color: var(--c-primary); font-weight: 700; } .hinweis { - background: #fef9c3; - border: 1px solid #fde047; + background: var(--c-warning-bg); + border: 1px solid var(--c-warning-light); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; - color: #713f12; + color: var(--c-warning-darker); margin-bottom: 1rem; } - .hinweis a { color: #713f12; } + .hinweis a { color: var(--c-warning-darker); } - .hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } + .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; } .liste { list-style: none; @@ -384,8 +384,8 @@ align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; - background: #fff; - border: 1px solid #e2e8f0; + background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 10px; } @@ -396,9 +396,9 @@ flex-direction: column; gap: 0.1rem; } - .karte-name { font-weight: 600; font-size: 0.95rem; color: #1e293b; } - .karte-beschr { font-size: 0.78rem; color: #94a3b8; } - .karte-meta { font-size: 0.82rem; color: #475569; } + .karte-name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); } + .karte-beschr { font-size: 0.78rem; color: var(--c-text-hint); } + .karte-meta { font-size: 0.82rem; color: var(--c-text-secondary); } .karte-aktionen { display: flex; @@ -409,8 +409,8 @@ .btn-sepa { padding: 0.35rem 0.7rem; - background: #e0e7ff; - color: #1e40af; + background: var(--c-primary-light); + color: var(--c-primary); border: none; border-radius: 6px; font-size: 0.78rem; @@ -418,7 +418,7 @@ cursor: pointer; transition: background 0.15s; } - .btn-sepa:hover:not(:disabled) { background: #c7d2fe; } + .btn-sepa:hover:not(:disabled) { background: var(--c-primary-200); } .btn-sepa:disabled { opacity: 0.4; cursor: not-allowed; } .btn-icon { @@ -428,15 +428,15 @@ align-items: center; justify-content: center; background: none; - border: 1px solid #e2e8f0; + border: 1px solid var(--c-border); border-radius: 6px; - color: #64748b; + color: var(--c-text-muted); font-size: 0.9rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; } - .btn-icon:hover { border-color: #94a3b8; color: #1e293b; } - .btn-icon-red:hover { border-color: #fca5a5; color: #dc2626; } + .btn-icon:hover { border-color: var(--c-text-hint); color: var(--c-text); } + .btn-icon-red:hover { border-color: var(--c-error-light); color: var(--c-error); } /* Overlay & Sheet */ .overlay { @@ -452,7 +452,7 @@ } .sheet { - background: #fff; + background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem; width: 100%; @@ -461,29 +461,29 @@ overflow-y: auto; } - h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.25rem; } - .sepa-sub { font-size: 0.85rem; color: #64748b; margin-bottom: 1.25rem; } + h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.25rem; } + .sepa-sub { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 1.25rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } - label { font-size: 0.875rem; font-weight: 500; color: #475569; } - .field-hint { font-size: 0.75rem; color: #94a3b8; } + label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); } + .field-hint { font-size: 0.75rem; color: var(--c-text-hint); } input, select { padding: 0.65rem 0.85rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; - background: #fff; + background: var(--c-bg-card); width: 100%; box-sizing: border-box; transition: border-color 0.15s; } - input:focus, select:focus { outline: none; border-color: #1e40af; } + input:focus, select:focus { outline: none; border-color: var(--c-primary); } .sepa-summary { - background: #f8fafc; - border: 1px solid #e2e8f0; + background: var(--c-bg-subtle); + border: 1px solid var(--c-border); border-radius: 8px; margin-bottom: 1rem; overflow: hidden; @@ -493,22 +493,22 @@ justify-content: space-between; padding: 0.65rem 1rem; font-size: 0.9rem; - color: #1e293b; - border-bottom: 1px solid #e2e8f0; + color: var(--c-text); + border-bottom: 1px solid var(--c-border); } .sepa-row:last-child { border-bottom: none; } - .sepa-warn { color: #92400e; background: #fffbeb; } - .sepa-total { font-weight: 700; background: #f0f9ff; } + .sepa-warn { color: var(--c-warning-dark); background: var(--c-warning-subtle); } + .sepa-total { font-weight: 700; background: var(--c-primary-bg); } - .error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } + .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; } .actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .btn-primary { flex: 1; padding: 0.75rem; - background: #1e40af; - color: #fff; + background: var(--c-primary); + color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; @@ -516,16 +516,16 @@ cursor: pointer; transition: background 0.15s; } - .btn-primary:hover:not(:disabled) { background: #1d3a9e; } + .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-ghost { padding: 0.75rem 1rem; background: none; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; - color: #64748b; + color: var(--c-text-muted); cursor: pointer; } diff --git a/app/src/routes/(app)/einstellungen/+page.svelte b/app/src/routes/(app)/einstellungen/+page.svelte index 84a263e..6ec5012 100644 --- a/app/src/routes/(app)/einstellungen/+page.svelte +++ b/app/src/routes/(app)/einstellungen/+page.svelte @@ -41,10 +41,10 @@ let vereinId = $state(''); const planInfo: Record = { - free: { label: 'Kostenlos', farbe: '#64748b', limit: 50, features: ['Bis 50 Mitglieder', 'Termine & Wiederholungen', 'Nachrichten & Push', 'Veranstaltungsorte', 'Durchführende einladen'] }, - starter: { label: 'Starter', farbe: '#1e40af', limit: 150, features: ['Bis 150 Mitglieder', 'SEPA pain.008-Export', 'iCal-Kalender-Abo', 'Alle Free-Features'] }, - wachstum:{ label: 'Verband', farbe: '#7c3aed', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] }, - verband: { label: 'Verband', farbe: '#7c3aed', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] }, + free: { label: 'Kostenlos', farbe: 'var(--c-text-muted)', limit: 50, features: ['Bis 50 Mitglieder', 'Termine & Wiederholungen', 'Nachrichten & Push', 'Veranstaltungsorte', 'Durchführende einladen'] }, + starter: { label: 'Starter', farbe: 'var(--c-primary)', limit: 150, features: ['Bis 150 Mitglieder', 'SEPA pain.008-Export', 'iCal-Kalender-Abo', 'Alle Free-Features'] }, + wachstum:{ label: 'Verband', farbe: 'var(--c-accent)', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] }, + verband: { label: 'Verband', farbe: 'var(--c-accent)', limit: null, features: ['Unbegrenzte Mitglieder', 'Mehrere Admins', 'Prioritäts-Support', 'Alle Starter-Features'] }, }; const istFree = $derived(plan === 'free'); @@ -389,11 +389,11 @@ {/if} diff --git a/app/src/routes/(app)/import-export/+page.svelte b/app/src/routes/(app)/import-export/+page.svelte index ad1ce06..9fe214e 100644 --- a/app/src/routes/(app)/import-export/+page.svelte +++ b/app/src/routes/(app)/import-export/+page.svelte @@ -328,102 +328,102 @@ diff --git a/app/src/routes/(app)/mitglieder/+page.svelte b/app/src/routes/(app)/mitglieder/+page.svelte index 35c6ff7..881b71e 100644 --- a/app/src/routes/(app)/mitglieder/+page.svelte +++ b/app/src/routes/(app)/mitglieder/+page.svelte @@ -31,9 +31,9 @@ } const statusFarbe: Record = { - aktiv: '#16a34a', - passiv: '#f59e0b', - ausgetreten: '#94a3b8' + aktiv: 'var(--c-success)', + passiv: 'var(--c-warning)', + ausgetreten: 'var(--c-text-hint)' }; @@ -69,7 +69,7 @@ {[m.email, gruppenLabel(m.gruppe_ids)].filter(Boolean).join(' · ')} - + {m.status} @@ -87,19 +87,19 @@ gap: 0.5rem; margin-bottom: 1rem; } - h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } - .count { font-size: 1rem; color: #94a3b8; } + h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); } + .count { font-size: 1rem; color: var(--c-text-hint); } .search { width: 100%; padding: 0.6rem 0.85rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; margin-bottom: 1rem; - background: #f8fafc; + background: var(--c-bg-subtle); box-sizing: border-box; } - .search:focus { outline: none; border-color: #1e40af; background: #fff; } + .search:focus { outline: none; border-color: var(--c-primary); background: var(--c-bg-card); } ul { list-style: none; padding: 0; @@ -113,20 +113,20 @@ align-items: center; gap: 0.75rem; padding: 0.85rem; - background: #fff; - border: 1px solid #e2e8f0; + background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color 0.15s; } - a:hover { border-color: #1e40af; } + a:hover { border-color: var(--c-primary); } .avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; - background: #e0e7ff; - color: #1e40af; + background: var(--c-primary-light); + color: var(--c-primary); display: flex; align-items: center; justify-content: center; @@ -142,24 +142,24 @@ flex-direction: column; gap: 0.1rem; } - .name { font-weight: 600; font-size: 0.95rem; color: #1e293b; } + .name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); } .meta { font-size: 0.78rem; - color: #94a3b8; + color: var(--c-text-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { font-size: 0.72rem; font-weight: 600; text-transform: capitalize; flex-shrink: 0; } - .hint { color: #94a3b8; text-align: center; margin-top: 3rem; font-size: 0.95rem; } + .hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; font-size: 0.95rem; } .fab { position: fixed; bottom: calc(60px + env(safe-area-inset-bottom) + 1.25rem); right: 1.25rem; width: 3.5rem; height: 3.5rem; - background: #1e40af; - color: #fff; + background: var(--c-primary); + color: var(--c-bg-card); border-radius: 50%; display: flex; align-items: center; @@ -170,5 +170,5 @@ box-shadow: 0 4px 14px rgba(30, 64, 175, 0.4); transition: background 0.15s; } - .fab:hover { background: #1d3a9e; } + .fab:hover { background: var(--c-primary-dark); } diff --git a/app/src/routes/(app)/mitglieder/[id]/+page.svelte b/app/src/routes/(app)/mitglieder/[id]/+page.svelte index 72721fe..0d33a1a 100644 --- a/app/src/routes/(app)/mitglieder/[id]/+page.svelte +++ b/app/src/routes/(app)/mitglieder/[id]/+page.svelte @@ -128,7 +128,7 @@ } const statusFarbe: Record = { - aktiv: '#16a34a', passiv: '#f59e0b', ausgetreten: '#94a3b8', + aktiv: 'var(--c-success)', passiv: 'var(--c-warning)', ausgetreten: 'var(--c-text-hint)', }; @@ -151,7 +151,7 @@
{vorname[0]}{nachname[0]}

{vorname} {nachname}

- {status} + {status}
@@ -380,105 +380,105 @@ diff --git a/app/src/routes/(app)/mitglieder/neu/+page.svelte b/app/src/routes/(app)/mitglieder/neu/+page.svelte index 455e5d1..7830989 100644 --- a/app/src/routes/(app)/mitglieder/neu/+page.svelte +++ b/app/src/routes/(app)/mitglieder/neu/+page.svelte @@ -204,54 +204,54 @@ diff --git a/app/src/routes/(app)/nachrichten/+page.svelte b/app/src/routes/(app)/nachrichten/+page.svelte index b04a42b..33a6a34 100644 --- a/app/src/routes/(app)/nachrichten/+page.svelte +++ b/app/src/routes/(app)/nachrichten/+page.svelte @@ -201,25 +201,25 @@ margin-bottom: 1.25rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } - h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } + h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); } .success { - background: #dcfce7; - border: 1px solid #86efac; + background: var(--c-success-bg); + border: 1px solid var(--c-success-light); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; - color: #166534; + color: var(--c-success-dark); margin-bottom: 1rem; } - .hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } + .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; } .liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .karte { - background: #fff; - border: 1px solid #e2e8f0; + background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 10px; padding: 0.9rem 1rem; display: flex; @@ -233,10 +233,10 @@ align-items: baseline; gap: 0.5rem; } - .karte-betreff { font-weight: 600; font-size: 0.95rem; color: #1e293b; } - .karte-datum { font-size: 0.75rem; color: #94a3b8; flex-shrink: 0; } - .karte-meta { font-size: 0.78rem; color: #64748b; } - .karte-vorschau { font-size: 0.85rem; color: #475569; margin: 0; } + .karte-betreff { font-weight: 600; font-size: 0.95rem; color: var(--c-text); } + .karte-datum { font-size: 0.75rem; color: var(--c-text-hint); flex-shrink: 0; } + .karte-meta { font-size: 0.78rem; color: var(--c-text-muted); } + .karte-vorschau { font-size: 0.85rem; color: var(--c-text-secondary); margin: 0; } /* Sheet */ .overlay { @@ -251,7 +251,7 @@ padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } .sheet { - background: #fff; + background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem; width: 100%; @@ -259,24 +259,24 @@ max-height: 92dvh; overflow-y: auto; } - h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } + h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } - label, .field-label { font-size: 0.875rem; font-weight: 500; color: #475569; } + label, .field-label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); } input, textarea { padding: 0.65rem 0.85rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; - background: #fff; + background: var(--c-bg-card); width: 100%; box-sizing: border-box; transition: border-color 0.15s; font-family: inherit; resize: vertical; } - input:focus, textarea:focus { outline: none; border-color: #1e40af; } + input:focus, textarea:focus { outline: none; border-color: var(--c-primary); } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .check-label { @@ -284,30 +284,30 @@ align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 20px; font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } - .check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } + .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); } .check-label input { display: none; } .versand-info { font-size: 0.8rem; - color: #94a3b8; + color: var(--c-text-hint); margin-bottom: 0.75rem; } - .error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } + .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .btn-primary { flex: 1; padding: 0.75rem; - background: #1e40af; - color: #fff; + background: var(--c-primary); + color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; @@ -315,16 +315,16 @@ cursor: pointer; transition: background 0.15s; } - .btn-primary:hover:not(:disabled) { background: #1d3a9e; } + .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-ghost { padding: 0.75rem 1rem; background: none; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; - color: #64748b; + color: var(--c-text-muted); cursor: pointer; } diff --git a/app/src/routes/(app)/neuigkeiten/+page.svelte b/app/src/routes/(app)/neuigkeiten/+page.svelte index 0706a18..4ef9432 100644 --- a/app/src/routes/(app)/neuigkeiten/+page.svelte +++ b/app/src/routes/(app)/neuigkeiten/+page.svelte @@ -332,13 +332,13 @@ diff --git a/app/src/routes/(app)/termine/+page.svelte b/app/src/routes/(app)/termine/+page.svelte index 62c1b4a..e872980 100644 --- a/app/src/routes/(app)/termine/+page.svelte +++ b/app/src/routes/(app)/termine/+page.svelte @@ -229,10 +229,10 @@ } const verfuegbarkeitConfig: Record = { - offen: { label: 'Offen', farbe: '#f59e0b' }, - bestaetigt: { label: 'Bestätigt', farbe: '#16a34a' }, - abgesagt: { label: 'Abgesagt', farbe: '#dc2626' }, - vertretung_gesucht: { label: 'Vertretung gesucht', farbe: '#7c3aed' }, + offen: { label: 'Offen', farbe: 'var(--c-warning)' }, + bestaetigt: { label: 'Bestätigt', farbe: 'var(--c-success)' }, + abgesagt: { label: 'Abgesagt', farbe: 'var(--c-error)' }, + vertretung_gesucht: { label: 'Vertretung gesucht', farbe: 'var(--c-accent)' }, }; function istMeinTermin(t: Termin): boolean { @@ -241,10 +241,10 @@ function verfuegbarkeitFarbe(t: Termin): string { switch (t.verfuegbarkeit) { - case 'bestaetigt': return '#16a34a'; - case 'abgesagt': return '#dc2626'; - case 'vertretung_gesucht': return '#7c3aed'; - default: return '#1e40af'; + case 'bestaetigt': return 'var(--c-success)'; + case 'abgesagt': return 'var(--c-error)'; + case 'vertretung_gesucht': return 'var(--c-accent)'; + default: return 'var(--c-primary)'; } } @@ -349,7 +349,7 @@ ● {verfuegbarkeitConfig[t.verfuegbarkeit].label} {:else} - ● Offen + ● Offen {/if} {#if isAdmin() && userName(t.durchfuehrender_id)} → {userName(t.durchfuehrender_id)} @@ -555,69 +555,69 @@ .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; } .top-rechts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } - h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; } + h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); } .btn-orte { padding: 0.5rem 0.85rem; background: none; - border: 1.5px solid #e2e8f0; border-radius: 8px; - font-size: 0.85rem; color: #475569; text-decoration: none; + border: 1.5px solid var(--c-border); border-radius: 8px; + font-size: 0.85rem; color: var(--c-text-secondary); text-decoration: none; } .ansicht-switcher { - display: flex; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; + display: flex; border: 1.5px solid var(--c-border); border-radius: 8px; overflow: hidden; } .ansicht-switcher button { padding: 0.4rem 0.75rem; background: none; border: none; - font-size: 0.82rem; font-weight: 600; color: #64748b; cursor: pointer; + font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } - .ansicht-switcher button + button { border-left: 1px solid #e2e8f0; } - .ansicht-switcher button.aktiv { background: #1e40af; color: #fff; } + .ansicht-switcher button + button { border-left: 1px solid var(--c-border); } + .ansicht-switcher button.aktiv { background: var(--c-primary); color: var(--c-bg-card); } .kalender-wrap { margin-bottom: 1rem; - --ec-today-bg-color: #eff6ff; - --ec-event-bg-color: #1e40af; - --ec-border-color: #e2e8f0; - --ec-text-color: #1e293b; - --ec-button-bg-color: #fff; - --ec-button-border-color: #e2e8f0; - --ec-button-text-color: #475569; - --ec-active-bg-color: #1e40af; - --ec-active-text-color: #fff; + --ec-today-bg-color: var(--c-primary-subtle); + --ec-event-bg-color: var(--c-primary); + --ec-border-color: var(--c-border); + --ec-text-color: var(--c-text); + --ec-button-bg-color: var(--c-bg-card); + --ec-button-border-color: var(--c-border); + --ec-button-text-color: var(--c-text-secondary); + --ec-active-bg-color: var(--c-primary); + --ec-active-text-color: var(--c-bg-card); } - .ausfall-warn { font-size: 0.75rem; color: #dc2626; font-weight: 600; } - .ort-link { font-size: 0.75rem; color: #1e40af; margin-left: 0.5rem; } - .hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; } + .ausfall-warn { font-size: 0.75rem; color: var(--c-error); font-weight: 600; } + .ort-link { font-size: 0.75rem; color: var(--c-primary); margin-left: 0.5rem; } + .hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; } .warnung { - background: #fffbeb; border: 1px solid #fde68a; + background: var(--c-warning-subtle); border: 1px solid var(--c-warning-light); border-radius: 8px; padding: 0.65rem 0.9rem; - font-size: 0.85rem; color: #92400e; margin-bottom: 1rem; + font-size: 0.85rem; color: var(--c-warning-dark); margin-bottom: 1rem; } .liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .karte { display: flex; align-items: flex-start; gap: 0.75rem; - padding: 0.85rem 1rem; background: #fff; - border: 1px solid #e2e8f0; border-radius: 10px; + padding: 0.85rem 1rem; background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 10px; } - .karte-grau { background: #f8fafc; opacity: 0.75; } + .karte-grau { background: var(--c-bg-subtle); opacity: 0.75; } .karte-datum-col { display: flex; flex-direction: column; align-items: center; min-width: 2.2rem; padding-top: 0.1rem; } - .tag { font-size: 0.65rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; } - .tag-zahl { font-size: 1.4rem; font-weight: 700; color: #1e40af; line-height: 1.1; } - .monat { font-size: 0.65rem; color: #94a3b8; text-transform: uppercase; } + .tag { font-size: 0.65rem; font-weight: 600; color: var(--c-text-hint); text-transform: uppercase; } + .tag-zahl { font-size: 1.4rem; font-weight: 700; color: var(--c-primary); line-height: 1.1; } + .monat { font-size: 0.65rem; color: var(--c-text-hint); text-transform: uppercase; } .karte-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .karte-titel-zeile { display: flex; align-items: center; gap: 0.4rem; } - .karte-titel { font-weight: 600; font-size: 0.95rem; color: #1e293b; } - .serie-badge { font-size: 0.75rem; color: #1e40af; font-weight: 700; } - .karte-meta { font-size: 0.78rem; color: #64748b; } - .karte-sub { font-size: 0.72rem; color: #94a3b8; } + .karte-titel { font-weight: 600; font-size: 0.95rem; color: var(--c-text); } + .serie-badge { font-size: 0.75rem; color: var(--c-primary); font-weight: 700; } + .karte-meta { font-size: 0.78rem; color: var(--c-text-muted); } + .karte-sub { font-size: 0.72rem; color: var(--c-text-hint); } .verfueg-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; } .verfueg-badge { font-size: 0.75rem; font-weight: 600; } @@ -628,27 +628,27 @@ .btn-aktion { padding: 0.3rem 0.65rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; cursor: pointer; - border: 1.5px solid #e2e8f0; background: #fff; + border: 1.5px solid var(--c-border); background: var(--c-bg-card); transition: all 0.15s; } - .btn-aktion.bestaetigen { color: #16a34a; } - .btn-aktion.bestaetigen.aktiv { background: #dcfce7; border-color: #16a34a; } - .btn-aktion.absagen { color: #dc2626; } - .btn-aktion.absagen.aktiv { background: #fee2e2; border-color: #dc2626; } - .btn-aktion.vertretung { color: #7c3aed; } - .btn-aktion.vertretung.aktiv { background: #ede9fe; border-color: #7c3aed; } + .btn-aktion.bestaetigen { color: var(--c-success); } + .btn-aktion.bestaetigen.aktiv { background: var(--c-success-bg); border-color: var(--c-success); } + .btn-aktion.absagen { color: var(--c-error); } + .btn-aktion.absagen.aktiv { background: var(--c-error-bg); border-color: var(--c-error); } + .btn-aktion.vertretung { color: var(--c-accent); } + .btn-aktion.vertretung.aktiv { background: var(--c-accent-subtle); border-color: var(--c-accent); } .karte-aktionen { display: flex; gap: 0.35rem; flex-shrink: 0; } .btn-icon { width: 1.9rem; height: 1.9rem; display: flex; align-items: center; - justify-content: center; background: none; border: 1px solid #e2e8f0; - border-radius: 6px; color: #64748b; font-size: 0.85rem; cursor: pointer; + justify-content: center; background: none; border: 1px solid var(--c-border); + border-radius: 6px; color: var(--c-text-muted); font-size: 0.85rem; cursor: pointer; } - .btn-icon:hover { border-color: #94a3b8; color: #1e293b; } - .btn-icon-red:hover { border-color: #fca5a5; color: #dc2626; } + .btn-icon:hover { border-color: var(--c-text-hint); color: var(--c-text); } + .btn-icon-red:hover { border-color: var(--c-error-light); color: var(--c-error); } .vergangen summary { - font-size: 0.85rem; color: #94a3b8; cursor: pointer; + font-size: 0.85rem; color: var(--c-text-hint); cursor: pointer; padding: 0.5rem 0; list-style: none; user-select: none; } .vergangen-liste { margin-top: 0.5rem; } @@ -661,56 +661,56 @@ padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } .sheet { - background: #fff; border-radius: 16px; padding: 1.5rem; + background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; } - h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } + h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } - label, .field-label { font-size: 0.875rem; font-weight: 500; color: #475569; } + label, .field-label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); } input, textarea, select { - padding: 0.65rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 8px; - font-size: 1rem; background: #fff; width: 100%; + padding: 0.65rem 0.85rem; border: 1.5px solid var(--c-border); border-radius: 8px; + font-size: 1rem; background: var(--c-bg-card); width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; transition: border-color 0.15s; } - input:focus, textarea:focus, select:focus { outline: none; border-color: #1e40af; } + input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary); } .checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; } .check-label { display: flex; align-items: center; gap: 0.35rem; - padding: 0.35rem 0.7rem; border: 1.5px solid #e2e8f0; + padding: 0.35rem 0.7rem; border: 1.5px solid var(--c-border); border-radius: 20px; font-size: 0.82rem; cursor: pointer; } - .check-label.active { border-color: #1e40af; background: #e0e7ff; color: #1e40af; } + .check-label.active { border-color: var(--c-primary); background: var(--c-primary-light); color: var(--c-primary); } .check-label input { display: none; } - .error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } + .error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; } .actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .btn-primary { - flex: 1; padding: 0.75rem; background: #1e40af; color: #fff; + flex: 1; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } - .btn-primary:hover:not(:disabled) { background: #1d3a9e; } + .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-ghost { padding: 0.75rem 1rem; background: none; - border: 1.5px solid #e2e8f0; border-radius: 8px; - font-size: 1rem; color: #64748b; cursor: pointer; + border: 1.5px solid var(--c-border); border-radius: 8px; + font-size: 1rem; color: var(--c-text-muted); cursor: pointer; } .dialog { - background: #fff; border-radius: 16px; padding: 1.5rem; + background: var(--c-bg-card); border-radius: 16px; padding: 1.5rem; width: 100%; max-width: 400px; } - .dialog p { font-size: 1rem; color: #1e293b; margin-bottom: 0.4rem; font-weight: 600; } - .dialog-sub { font-weight: 400 !important; font-size: 0.875rem; color: #94a3b8; } + .dialog p { font-size: 1rem; color: var(--c-text); margin-bottom: 0.4rem; font-weight: 600; } + .dialog-sub { font-weight: 400 !important; font-size: 0.875rem; color: var(--c-text-hint); } .radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; } - .radio-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #1e293b; cursor: pointer; } + .radio-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--c-text); cursor: pointer; } .dialog-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } - .toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #475569; cursor: pointer; } - .serie-vorschau { font-size: 0.82rem; color: #1e40af; margin: -0.4rem 0 0.5rem; } + .toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--c-text-secondary); cursor: pointer; } + .serie-vorschau { font-size: 0.82rem; color: var(--c-primary); margin: -0.4rem 0 0.5rem; } .btn-danger { - flex: 1; padding: 0.75rem; background: #dc2626; color: #fff; + flex: 1; padding: 0.75rem; background: var(--c-error); color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; } - .btn-danger:hover { background: #b91c1c; } + .btn-danger:hover { background: var(--c-error-dark); } diff --git a/app/src/routes/(auth)/+layout.svelte b/app/src/routes/(auth)/+layout.svelte index c8165e5..c91c827 100644 --- a/app/src/routes/(auth)/+layout.svelte +++ b/app/src/routes/(auth)/+layout.svelte @@ -27,13 +27,13 @@ align-items: center; justify-content: center; padding: 1.5rem; - background: #f8fafc; + background: var(--c-bg-subtle); } .auth-card { width: 100%; max-width: 400px; - background: #fff; + background: var(--c-bg-card); border-radius: 12px; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06); @@ -43,7 +43,7 @@ display: block; font-size: 1.4rem; font-weight: 700; - color: #1e40af; + color: var(--c-primary); margin-bottom: 1.5rem; letter-spacing: -0.02em; } diff --git a/app/src/routes/(auth)/login/+page.svelte b/app/src/routes/(auth)/login/+page.svelte index f81a677..10aa83b 100644 --- a/app/src/routes/(auth)/login/+page.svelte +++ b/app/src/routes/(auth)/login/+page.svelte @@ -71,7 +71,7 @@ font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; - color: #1e293b; + color: var(--c-text); } .field { @@ -84,25 +84,25 @@ label { font-size: 0.9rem; font-weight: 500; - color: #475569; + color: var(--c-text-secondary); } input { padding: 0.65rem 0.85rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; transition: border-color .15s; - background: #fff; + background: var(--c-bg-card); } input:focus { outline: none; - border-color: #1e40af; + border-color: var(--c-primary); } .error { - color: #dc2626; + color: var(--c-error); font-size: 0.9rem; margin-bottom: 0.75rem; } @@ -110,8 +110,8 @@ button { width: 100%; padding: 0.75rem; - background: #1e40af; - color: #fff; + background: var(--c-primary); + color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; @@ -121,7 +121,7 @@ } button:hover:not(:disabled) { - background: #1d3a9e; + background: var(--c-primary-dark); } button:disabled { @@ -132,12 +132,12 @@ .switch { margin-top: 1.25rem; font-size: 0.9rem; - color: #64748b; + color: var(--c-text-muted); text-align: center; } .switch a { - color: #1e40af; + color: var(--c-primary); font-weight: 500; } diff --git a/app/src/routes/(auth)/register/+page.svelte b/app/src/routes/(auth)/register/+page.svelte index 7e59e2c..1da008f 100644 --- a/app/src/routes/(auth)/register/+page.svelte +++ b/app/src/routes/(auth)/register/+page.svelte @@ -99,13 +99,13 @@ h1 { font-size: 1.4rem; font-weight: 700; - color: #1e293b; + color: var(--c-text); margin-bottom: 0.25rem; } .subtitle { font-size: 0.9rem; - color: #64748b; + color: var(--c-text-muted); margin-bottom: 1.5rem; } @@ -119,25 +119,25 @@ label { font-size: 0.9rem; font-weight: 500; - color: #475569; + color: var(--c-text-secondary); } input { padding: 0.65rem 0.85rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; transition: border-color .15s; - background: #fff; + background: var(--c-bg-card); } input:focus { outline: none; - border-color: #1e40af; + border-color: var(--c-primary); } .error { - color: #dc2626; + color: var(--c-error); font-size: 0.9rem; margin-bottom: 0.75rem; } @@ -145,8 +145,8 @@ button { width: 100%; padding: 0.75rem; - background: #1e40af; - color: #fff; + background: var(--c-primary); + color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; @@ -156,7 +156,7 @@ } button:hover:not(:disabled) { - background: #1d3a9e; + background: var(--c-primary-dark); } button:disabled { @@ -167,12 +167,12 @@ .switch { margin-top: 1.25rem; font-size: 0.9rem; - color: #64748b; + color: var(--c-text-muted); text-align: center; } .switch a { - color: #1e40af; + color: var(--c-primary); font-weight: 500; } diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index c238168..598e805 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -1,4 +1,5 @@ @@ -31,8 +32,8 @@ :global(body) { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - color: #1e293b; - background: #f8fafc; + color: var(--c-text); + background: var(--c-bg-subtle); line-height: 1.6; -webkit-font-smoothing: antialiased; } diff --git a/app/src/routes/invite/[token]/+page.svelte b/app/src/routes/invite/[token]/+page.svelte index 3e2d1cb..e1c36c7 100644 --- a/app/src/routes/invite/[token]/+page.svelte +++ b/app/src/routes/invite/[token]/+page.svelte @@ -120,7 +120,7 @@ align-items: center; justify-content: center; padding: 1.5rem 1rem; - background: #f8fafc; + background: var(--c-bg-subtle); } .logo { display: flex; @@ -128,13 +128,13 @@ gap: 0.5rem; font-size: 1.2rem; font-weight: 700; - color: #0f172a; + color: var(--c-dark); letter-spacing: -0.02em; margin-bottom: 1.5rem; } .card { - background: #fff; - border: 1px solid #e2e8f0; + background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 16px; padding: 2rem 1.5rem; width: 100%; @@ -145,29 +145,29 @@ } .icon-ring { width: 3.5rem; height: 3.5rem; border-radius: 50%; - background: #e0e7ff; display: flex; + background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto; } - .icon-ring.error { background: #fee2e2; } - h1 { font-size: 1.2rem; font-weight: 700; color: #1e293b; text-align: center; margin: 0; } - .beschr { font-size: 0.9rem; color: #64748b; text-align: center; line-height: 1.55; margin: 0; } - .hint { color: #94a3b8; text-align: center; } + .icon-ring.error { background: var(--c-error-bg); } + h1 { font-size: 1.2rem; font-weight: 700; color: var(--c-text); text-align: center; margin: 0; } + .beschr { font-size: 0.9rem; color: var(--c-text-muted); text-align: center; line-height: 1.55; margin: 0; } + .hint { color: var(--c-text-hint); text-align: center; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; } - label { font-size: 0.875rem; font-weight: 500; color: #475569; } + label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); } input { padding: 0.65rem 0.85rem; - border: 1.5px solid #e2e8f0; border-radius: 8px; - font-size: 1rem; background: #fff; width: 100%; box-sizing: border-box; + border: 1.5px solid var(--c-border); border-radius: 8px; + font-size: 1rem; background: var(--c-bg-card); width: 100%; box-sizing: border-box; transition: border-color 0.15s; } - input:focus { outline: none; border-color: #1e40af; } - .error { color: #dc2626; font-size: 0.875rem; margin: 0; } + input:focus { outline: none; border-color: var(--c-primary); } + .error { color: var(--c-error); font-size: 0.875rem; margin: 0; } .btn-primary { - width: 100%; padding: 0.75rem; background: #1e40af; color: #fff; + width: 100%; padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 0.25rem; transition: background 0.15s; } - .btn-primary:hover:not(:disabled) { background: #1d3a9e; } + .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } diff --git a/app/src/routes/onboarding/+page.svelte b/app/src/routes/onboarding/+page.svelte index 4c410b2..de2c257 100644 --- a/app/src/routes/onboarding/+page.svelte +++ b/app/src/routes/onboarding/+page.svelte @@ -174,7 +174,7 @@ align-items: center; justify-content: center; padding: 1.5rem 1rem; - background: #f8fafc; + background: var(--c-bg-subtle); } .logo { @@ -183,14 +183,14 @@ gap: 0.5rem; font-size: 1.2rem; font-weight: 700; - color: #0f172a; + color: var(--c-dark); letter-spacing: -0.02em; margin-bottom: 1.5rem; } .card { - background: #fff; - border: 1px solid #e2e8f0; + background: var(--c-bg-card); + border: 1px solid var(--c-border); border-radius: 16px; padding: 2rem 1.5rem; width: 100%; @@ -207,10 +207,10 @@ width: 0.5rem; height: 0.5rem; border-radius: 50%; - background: #e2e8f0; + background: var(--c-border); transition: background 0.3s; } - .dot.active { background: #1e40af; } + .dot.active { background: var(--c-primary); } .step { display: flex; @@ -222,7 +222,7 @@ width: 3.5rem; height: 3.5rem; border-radius: 50%; - background: #e0e7ff; + background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; @@ -230,8 +230,8 @@ margin: 0 auto 0.25rem; } .icon-ring.success { - background: #dcfce7; - color: #16a34a; + background: var(--c-success-bg); + color: var(--c-success); font-size: 1.6rem; font-weight: 700; } @@ -239,14 +239,14 @@ h1 { font-size: 1.3rem; font-weight: 700; - color: #1e293b; + color: var(--c-text); text-align: center; margin: 0; } .beschr { font-size: 0.9rem; - color: #64748b; + color: var(--c-text-muted); text-align: center; line-height: 1.55; margin: 0; @@ -258,20 +258,20 @@ gap: 0.3rem; margin-bottom: 0.85rem; } - label { font-size: 0.875rem; font-weight: 500; color: #475569; } + label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); } input { padding: 0.65rem 0.85rem; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; - background: #fff; + background: var(--c-bg-card); width: 100%; box-sizing: border-box; transition: border-color 0.15s; } - input:focus { outline: none; border-color: #1e40af; } + input:focus { outline: none; border-color: var(--c-primary); } - .error { color: #dc2626; font-size: 0.875rem; margin: 0; } + .error { color: var(--c-error); font-size: 0.875rem; margin: 0; } .btn-row { display: flex; @@ -282,8 +282,8 @@ .btn-primary { flex: 1; padding: 0.75rem; - background: #1e40af; - color: #fff; + background: var(--c-primary); + color: var(--c-bg-card); border: none; border-radius: 8px; font-size: 1rem; @@ -291,16 +291,16 @@ cursor: pointer; transition: background 0.15s; } - .btn-primary:hover:not(:disabled) { background: #1d3a9e; } + .btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-ghost { padding: 0.75rem 1rem; background: none; - border: 1.5px solid #e2e8f0; + border: 1.5px solid var(--c-border); border-radius: 8px; font-size: 1rem; - color: #64748b; + color: var(--c-text-muted); cursor: pointer; } @@ -310,7 +310,7 @@ display: flex; flex-direction: column; gap: 0; - border: 1px solid #e2e8f0; + border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; margin: 0.25rem 0; @@ -320,7 +320,7 @@ align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--c-bg); } .naechstes li:last-child { border-bottom: none; } .naechstes-icon { font-size: 1.1rem; flex-shrink: 0; } @@ -329,6 +329,6 @@ flex-direction: column; gap: 0.1rem; } - .naechstes strong { font-size: 0.875rem; color: #1e293b; } - .naechstes span { font-size: 0.78rem; color: #94a3b8; } + .naechstes strong { font-size: 0.875rem; color: var(--c-text); } + .naechstes span { font-size: 0.78rem; color: var(--c-text-hint); }