Refactor: CSS-Variablen für alle Farbwerte (theme.css)
This commit is contained in:
parent
e2d7655e13
commit
4fee85bd22
19 changed files with 521 additions and 461 deletions
59
app/src/lib/styles/theme.css
Normal file
59
app/src/lib/styles/theme.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,10 +41,10 @@
|
|||
let vereinId = $state('');
|
||||
|
||||
const planInfo: Record<string, { label: string; farbe: string; features: string[]; limit: number | null }> = {
|
||||
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}
|
||||
|
||||
<style>
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
|
||||
|
||||
/* Plan */
|
||||
.plan-card {
|
||||
background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
|
||||
background: var(--c-bg-card); border: 1.5px solid var(--c-border); border-radius: 12px;
|
||||
padding: 1rem 1.1rem; margin-bottom: 1.5rem;
|
||||
}
|
||||
.plan-header {
|
||||
|
|
@ -401,41 +401,41 @@
|
|||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.plan-label { font-size: 1rem; font-weight: 700; }
|
||||
.plan-limit { font-size: 0.78rem; color: #94a3b8; margin-left: 0.4rem; }
|
||||
.plan-mitglieder { font-size: 0.82rem; color: #64748b; }
|
||||
.plan-mitglieder.warn { color: #dc2626; font-weight: 700; }
|
||||
.plan-limit { font-size: 0.78rem; color: var(--c-text-hint); margin-left: 0.4rem; }
|
||||
.plan-mitglieder { font-size: 0.82rem; color: var(--c-text-muted); }
|
||||
.plan-mitglieder.warn { color: var(--c-error); font-weight: 700; }
|
||||
.plan-warn {
|
||||
background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px;
|
||||
padding: 0.6rem 0.8rem; font-size: 0.82rem; color: #dc2626; margin-bottom: 0.75rem;
|
||||
background: var(--c-error-subtle); border: 1px solid var(--c-error-light); border-radius: 8px;
|
||||
padding: 0.6rem 0.8rem; font-size: 0.82rem; color: var(--c-error); margin-bottom: 0.75rem;
|
||||
}
|
||||
.plan-features {
|
||||
list-style: none; padding: 0; margin: 0 0 0.85rem;
|
||||
display: flex; flex-direction: column; gap: 0.25rem;
|
||||
}
|
||||
.plan-features li { font-size: 0.85rem; color: #475569; }
|
||||
.plan-features li.gesperrt { color: #94a3b8; }
|
||||
.plan-features li { font-size: 0.85rem; color: var(--c-text-secondary); }
|
||||
.plan-features li.gesperrt { color: var(--c-text-hint); }
|
||||
.upgrade-hint {
|
||||
display: inline-block; font-size: 0.7rem; font-weight: 700;
|
||||
background: #e0e7ff; color: #1e40af; border-radius: 4px;
|
||||
background: var(--c-primary-light); color: var(--c-primary); border-radius: 4px;
|
||||
padding: 0.05rem 0.35rem; margin-left: 0.3rem;
|
||||
}
|
||||
.btn-upgrade {
|
||||
display: block; width: 100%; padding: 0.65rem;
|
||||
background: #1e40af; color: #fff; border: none; border-radius: 8px;
|
||||
background: var(--c-primary); color: var(--c-bg-card); border: none; border-radius: 8px;
|
||||
font-size: 0.9rem; font-weight: 600; text-align: center;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.btn-upgrade:hover { background: #1d3a9e; }
|
||||
.btn-upgrade:hover { background: var(--c-primary-dark); }
|
||||
|
||||
section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--c-bg);
|
||||
}
|
||||
h2 {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
color: var(--c-text-hint);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 0.85rem;
|
||||
|
|
@ -443,46 +443,46 @@
|
|||
|
||||
.sepa-hint {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
color: var(--c-text-hint);
|
||||
margin-bottom: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||||
.field { display: flex; flex-direction: column; 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, 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); }
|
||||
|
||||
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; }
|
||||
.success { color: #16a34a; font-size: 0.875rem; margin-bottom: 0.75rem; }
|
||||
.err { color: #dc2626; font-size: 0.875rem; margin: 0.5rem 0; }
|
||||
.ok { color: #16a34a; font-size: 0.875rem; margin: 0.5rem 0; }
|
||||
.error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.75rem; }
|
||||
.success { color: var(--c-success); font-size: 0.875rem; margin-bottom: 0.75rem; }
|
||||
.err { color: var(--c-error); font-size: 0.875rem; margin: 0.5rem 0; }
|
||||
.ok { color: var(--c-success); font-size: 0.875rem; margin: 0.5rem 0; }
|
||||
.btn-save {
|
||||
padding: 0.65rem 1.25rem;
|
||||
background: #1e40af; color: #fff;
|
||||
background: var(--c-primary); color: var(--c-bg-card);
|
||||
border: none; border-radius: 8px;
|
||||
font-size: 0.95rem; font-weight: 600; cursor: pointer;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.btn-save:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
.hint { color: #94a3b8; font-size: 0.95rem; }
|
||||
.hint { color: var(--c-text-hint); font-size: 0.95rem; }
|
||||
|
||||
.btn-primary {
|
||||
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;
|
||||
|
|
@ -491,80 +491,80 @@
|
|||
transition: background 0.15s;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.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; }
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #f1f5f9;
|
||||
background: var(--c-bg);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ical-url {
|
||||
font-family: monospace; font-size: 0.78rem; color: #1e293b;
|
||||
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
|
||||
font-family: monospace; font-size: 0.78rem; color: var(--c-text);
|
||||
background: var(--c-bg-subtle); border: 1px solid var(--c-border); border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem; word-break: break-all; margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.trainer-liste {
|
||||
list-style: none; padding: 0; margin: 0 0 0.75rem;
|
||||
border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
|
||||
border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden;
|
||||
}
|
||||
.trainer-liste li {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 0.75rem; padding: 0.7rem 0.85rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--c-bg);
|
||||
}
|
||||
.trainer-liste li:last-child { border-bottom: none; }
|
||||
.trainer-info { display: flex; flex-direction: column; gap: 0.1rem; }
|
||||
.trainer-name { font-size: 0.9rem; font-weight: 600; color: #1e293b; }
|
||||
.trainer-gruppen { font-size: 0.75rem; color: #94a3b8; }
|
||||
.trainer-name { font-size: 0.9rem; font-weight: 600; color: var(--c-text); }
|
||||
.trainer-gruppen { font-size: 0.75rem; color: var(--c-text-hint); }
|
||||
.btn-remove {
|
||||
padding: 0.3rem 0.65rem; background: none;
|
||||
border: 1px solid #fca5a5; border-radius: 6px;
|
||||
font-size: 0.78rem; color: #dc2626; cursor: pointer; flex-shrink: 0;
|
||||
border: 1px solid var(--c-error-light); border-radius: 6px;
|
||||
font-size: 0.78rem; color: var(--c-error); cursor: pointer; flex-shrink: 0;
|
||||
}
|
||||
.btn-einladen {
|
||||
width: 100%; padding: 0.65rem; background: none;
|
||||
border: 1.5px dashed #e2e8f0; border-radius: 8px;
|
||||
font-size: 0.9rem; color: #1e40af; cursor: pointer;
|
||||
border: 1.5px dashed var(--c-border); border-radius: 8px;
|
||||
font-size: 0.9rem; color: var(--c-primary); cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.btn-einladen:hover { border-color: #1e40af; }
|
||||
.btn-einladen:hover { border-color: var(--c-primary); }
|
||||
.invite-box {
|
||||
margin-top: 0.75rem; padding: 0.85rem;
|
||||
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
|
||||
background: var(--c-bg-subtle); border: 1px solid var(--c-border); border-radius: 8px;
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
.invite-label { font-size: 0.78rem; color: #64748b; margin: 0; }
|
||||
.invite-label { font-size: 0.78rem; color: var(--c-text-muted); margin: 0; }
|
||||
.invite-url {
|
||||
font-size: 0.78rem; font-family: monospace;
|
||||
color: #1e293b; word-break: break-all;
|
||||
color: var(--c-text); word-break: break-all;
|
||||
}
|
||||
.btn-kopieren {
|
||||
padding: 0.4rem 0.75rem; background: #1e40af; color: #fff;
|
||||
padding: 0.4rem 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
|
||||
border: none; border-radius: 6px; font-size: 0.82rem;
|
||||
cursor: pointer; align-self: flex-start;
|
||||
}
|
||||
|
||||
.btn-importexport {
|
||||
display: block; width: 100%; padding: 0.75rem;
|
||||
background: none; border: 1.5px solid #e2e8f0; border-radius: 8px;
|
||||
font-size: 0.95rem; color: #1e40af; text-align: center;
|
||||
background: none; border: 1.5px solid var(--c-border); border-radius: 8px;
|
||||
font-size: 0.95rem; color: var(--c-primary); text-align: center;
|
||||
text-decoration: none; margin-bottom: 0;
|
||||
}
|
||||
.btn-importexport:hover { border-color: #1e40af; background: #f0f9ff; }
|
||||
.btn-importexport:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
|
||||
|
||||
.btn-logout {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: none;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border: 1.5px solid var(--c-border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
color: #64748b;
|
||||
color: var(--c-text-muted);
|
||||
cursor: pointer;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.btn-logout:hover { border-color: #94a3b8; color: #1e293b; }
|
||||
.btn-logout:hover { border-color: var(--c-text-hint); color: var(--c-text); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -328,102 +328,102 @@
|
|||
|
||||
<style>
|
||||
.top { margin-bottom: 1.25rem; }
|
||||
.back { font-size: 0.85rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.25rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; }
|
||||
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; }
|
||||
.back { font-size: 0.85rem; color: var(--c-primary); text-decoration: none; display: block; margin-bottom: 0.25rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
|
||||
.hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; }
|
||||
|
||||
section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--c-bg);
|
||||
}
|
||||
h2 {
|
||||
font-size: 0.72rem; font-weight: 700; color: #94a3b8;
|
||||
font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint);
|
||||
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem;
|
||||
}
|
||||
.hinweis-text { font-size: 0.85rem; color: #64748b; margin-bottom: 0.85rem; line-height: 1.5; }
|
||||
.hinweis-text { font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.85rem; line-height: 1.5; }
|
||||
|
||||
/* Export */
|
||||
.export-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
|
||||
|
||||
.export-btn {
|
||||
display: flex; align-items: center; gap: 0.85rem;
|
||||
padding: 0.85rem 1rem; background: #fff;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 10px;
|
||||
padding: 0.85rem 1rem; background: var(--c-bg-card);
|
||||
border: 1.5px solid var(--c-border); border-radius: 10px;
|
||||
cursor: pointer; text-align: left; width: 100%;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.export-btn:hover { border-color: #1e40af; }
|
||||
.export-btn:hover { border-color: var(--c-primary); }
|
||||
.export-btn.breit { width: 100%; }
|
||||
.export-icon { font-size: 1.2rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
|
||||
.export-label { font-weight: 600; font-size: 0.9rem; color: #1e293b; flex: 1; }
|
||||
.export-sub { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; }
|
||||
.export-label { font-weight: 600; font-size: 0.9rem; color: var(--c-text); flex: 1; }
|
||||
.export-sub { font-size: 0.75rem; color: var(--c-text-hint); white-space: nowrap; }
|
||||
|
||||
.status-ok { font-size: 0.85rem; color: #16a34a; }
|
||||
.status-ok { font-size: 0.85rem; color: var(--c-success); }
|
||||
|
||||
/* Upload */
|
||||
.upload-label {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
|
||||
padding: 2rem 1rem; border: 2px dashed #e2e8f0; border-radius: 10px;
|
||||
cursor: pointer; color: #64748b; transition: border-color 0.15s; text-align: center;
|
||||
padding: 2rem 1rem; border: 2px dashed var(--c-border); border-radius: 10px;
|
||||
cursor: pointer; color: var(--c-text-muted); transition: border-color 0.15s; text-align: center;
|
||||
}
|
||||
.upload-label:hover { border-color: #1e40af; color: #1e40af; }
|
||||
.upload-label:hover { border-color: var(--c-primary); color: var(--c-primary); }
|
||||
.file-input { display: none; }
|
||||
.upload-icon { font-size: 1.5rem; }
|
||||
.upload-sub { font-size: 0.75rem; color: #94a3b8; }
|
||||
.upload-sub { font-size: 0.75rem; color: var(--c-text-hint); }
|
||||
|
||||
/* Mapping */
|
||||
.mapping-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 0.75rem; font-size: 0.85rem; color: #64748b;
|
||||
margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--c-text-muted);
|
||||
}
|
||||
.btn-ghost-sm {
|
||||
padding: 0.3rem 0.65rem; background: none;
|
||||
border: 1px solid #e2e8f0; border-radius: 6px;
|
||||
font-size: 0.8rem; color: #64748b; cursor: pointer;
|
||||
border: 1px solid var(--c-border); border-radius: 6px;
|
||||
font-size: 0.8rem; color: var(--c-text-muted); cursor: pointer;
|
||||
}
|
||||
|
||||
.mapping-tabelle {
|
||||
border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
|
||||
border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden;
|
||||
margin-bottom: 1rem; overflow-x: auto;
|
||||
}
|
||||
.mapping-row {
|
||||
display: grid; grid-template-columns: 1fr 1.4fr 1fr;
|
||||
gap: 0.5rem; padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #f1f5f9; align-items: center;
|
||||
border-bottom: 1px solid var(--c-bg); align-items: center;
|
||||
}
|
||||
.mapping-row:last-child { border-bottom: none; }
|
||||
.mapping-row.header { background: #f8fafc; font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
|
||||
.col-name { font-size: 0.82rem; color: #1e293b; font-weight: 500; }
|
||||
.col-preview { font-size: 0.75rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mapping-row.header { background: var(--c-bg-subtle); font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint); text-transform: uppercase; }
|
||||
.col-name { font-size: 0.82rem; color: var(--c-text); font-weight: 500; }
|
||||
.col-preview { font-size: 0.75rem; color: var(--c-text-hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mapping-row select {
|
||||
padding: 0.3rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 6px;
|
||||
font-size: 0.8rem; background: #fff; width: 100%;
|
||||
padding: 0.3rem 0.5rem; border: 1px solid var(--c-border); border-radius: 6px;
|
||||
font-size: 0.8rem; background: var(--c-bg-card); width: 100%;
|
||||
}
|
||||
|
||||
.mapping-actions { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
|
||||
/* Ergebnis */
|
||||
.import-result {
|
||||
background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px;
|
||||
background: var(--c-success-subtle); border: 1px solid var(--c-success-light); border-radius: 10px;
|
||||
padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
.import-result.hat-fehler { background: #fefce8; border-color: #fde047; }
|
||||
.result-ok { font-weight: 700; color: #16a34a; font-size: 0.95rem; }
|
||||
.result-fehler-titel { font-size: 0.85rem; color: #92400e; font-weight: 600; }
|
||||
.import-result.hat-fehler { background: var(--c-warning-pale); border-color: var(--c-warning-light); }
|
||||
.result-ok { font-weight: 700; color: var(--c-success); font-size: 0.95rem; }
|
||||
.result-fehler-titel { font-size: 0.85rem; color: var(--c-warning-dark); font-weight: 600; }
|
||||
.fehler-liste { margin: 0; padding-left: 1.2rem; }
|
||||
.fehler-liste li { font-size: 0.78rem; color: #92400e; }
|
||||
.fehler-liste li { font-size: 0.78rem; color: var(--c-warning-dark); }
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.75rem; background: #1e40af; color: #fff;
|
||||
padding: 0.75rem; background: var(--c-primary); color: var(--c-bg-card);
|
||||
border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
|
||||
cursor: pointer; transition: background 0.15s; width: 100%;
|
||||
}
|
||||
.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.6rem 1rem; background: none;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 8px;
|
||||
font-size: 0.9rem; color: #64748b; cursor: pointer; align-self: flex-start;
|
||||
border: 1.5px solid var(--c-border); border-radius: 8px;
|
||||
font-size: 0.9rem; color: var(--c-text-muted); cursor: pointer; align-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@
|
|||
}
|
||||
|
||||
const statusFarbe: Record<string, string> = {
|
||||
aktiv: '#16a34a',
|
||||
passiv: '#f59e0b',
|
||||
ausgetreten: '#94a3b8'
|
||||
aktiv: 'var(--c-success)',
|
||||
passiv: 'var(--c-warning)',
|
||||
ausgetreten: 'var(--c-text-hint)'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
{[m.email, gruppenLabel(m.gruppe_ids)].filter(Boolean).join(' · ')}
|
||||
</span>
|
||||
</div>
|
||||
<span class="badge" style="color:{statusFarbe[m.status] ?? '#94a3b8'}">
|
||||
<span class="badge" style="color:{statusFarbe[m.status] ?? 'var(--c-text-hint)'}">
|
||||
{m.status}
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -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); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
|
||||
const statusFarbe: Record<string, string> = {
|
||||
aktiv: '#16a34a', passiv: '#f59e0b', ausgetreten: '#94a3b8',
|
||||
aktiv: 'var(--c-success)', passiv: 'var(--c-warning)', ausgetreten: 'var(--c-text-hint)',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
<div class="hero">
|
||||
<div class="avatar-lg">{vorname[0]}{nachname[0]}</div>
|
||||
<h1>{vorname} {nachname}</h1>
|
||||
<span class="status-badge" style="color:{statusFarbe[status] ?? '#94a3b8'}">{status}</span>
|
||||
<span class="status-badge" style="color:{statusFarbe[status] ?? 'var(--c-text-hint)'}">{status}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-block">
|
||||
|
|
@ -380,105 +380,105 @@
|
|||
|
||||
<style>
|
||||
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
|
||||
.back { font-size: 0.9rem; color: #1e40af; text-decoration: none; }
|
||||
.back { font-size: 0.9rem; color: var(--c-primary); text-decoration: none; }
|
||||
.edit-btn {
|
||||
background: none; border: 1.5px solid #e2e8f0; border-radius: 8px;
|
||||
padding: 0.4rem 0.85rem; font-size: 0.875rem; color: #475569; cursor: pointer;
|
||||
background: none; border: 1.5px solid var(--c-border); border-radius: 8px;
|
||||
padding: 0.4rem 0.85rem; font-size: 0.875rem; color: var(--c-text-secondary); cursor: pointer;
|
||||
}
|
||||
h1 { font-size: 1.3rem; font-weight: 700; color: #1e293b; }
|
||||
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; }
|
||||
h1 { font-size: 1.3rem; font-weight: 700; color: var(--c-text); }
|
||||
.hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; }
|
||||
|
||||
.hero {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
|
||||
padding: 1.5rem 1rem; background: #fff;
|
||||
border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 1rem;
|
||||
padding: 1.5rem 1rem; background: var(--c-bg-card);
|
||||
border: 1px solid var(--c-border); border-radius: 12px; margin-bottom: 1rem;
|
||||
}
|
||||
.avatar-lg {
|
||||
width: 4rem; height: 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;
|
||||
font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
|
||||
}
|
||||
.status-badge { font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
|
||||
|
||||
.detail-block {
|
||||
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||||
background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px;
|
||||
overflow: hidden; margin-bottom: 0.75rem; padding: 0.75rem 1rem;
|
||||
}
|
||||
.detail-block h2 {
|
||||
font-size: 0.72rem; font-weight: 700; color: #94a3b8;
|
||||
font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint);
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.row-detail {
|
||||
display: flex; justify-content: space-between; align-items: baseline;
|
||||
gap: 1rem; padding: 0.45rem 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--c-bg);
|
||||
}
|
||||
.row-detail:last-child { border-bottom: none; }
|
||||
.dl { font-size: 0.82rem; color: #94a3b8; flex-shrink: 0; }
|
||||
.dv { font-size: 0.88rem; color: #1e293b; text-align: right; }
|
||||
.dv.link { color: #1e40af; text-decoration: none; }
|
||||
.dl { font-size: 0.82rem; color: var(--c-text-hint); flex-shrink: 0; }
|
||||
.dv { font-size: 0.88rem; color: var(--c-text); text-align: right; }
|
||||
.dv.link { color: var(--c-primary); text-decoration: none; }
|
||||
.dv.mono { font-family: monospace; font-size: 0.82rem; }
|
||||
.leer { font-size: 0.85rem; color: #94a3b8; }
|
||||
.notiz-text { font-size: 0.875rem; color: #475569; white-space: pre-wrap; }
|
||||
.leer { font-size: 0.85rem; color: var(--c-text-hint); }
|
||||
.notiz-text { font-size: 0.875rem; color: var(--c-text-secondary); white-space: pre-wrap; }
|
||||
|
||||
.btn-delete {
|
||||
width: 100%; padding: 0.75rem; background: none;
|
||||
border: 1.5px solid #fca5a5; border-radius: 8px;
|
||||
color: #dc2626; font-size: 0.9rem; cursor: pointer;
|
||||
border: 1.5px solid var(--c-error-light); border-radius: 8px;
|
||||
color: var(--c-error); font-size: 0.9rem; cursor: pointer;
|
||||
transition: background 0.15s; margin-bottom: 5rem;
|
||||
}
|
||||
.btn-delete:hover { background: #fef2f2; }
|
||||
.btn-delete:hover { background: var(--c-error-subtle); }
|
||||
|
||||
/* Formular */
|
||||
section {
|
||||
margin-bottom: 1.5rem; padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--c-bg);
|
||||
}
|
||||
section:last-of-type { border-bottom: none; }
|
||||
section h2 {
|
||||
font-size: 0.72rem; font-weight: 700; color: #94a3b8;
|
||||
font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint);
|
||||
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem;
|
||||
}
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||||
.field { display: flex; flex-direction: column; 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, select, textarea {
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 8px;
|
||||
font-size: 1rem; background: #fff; width: 100%;
|
||||
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, select:focus, textarea:focus { outline: none; border-color: #1e40af; }
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); }
|
||||
|
||||
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.check-label {
|
||||
display: flex; align-items: center; gap: 0.4rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 20px;
|
||||
border: 1.5px solid var(--c-border); border-radius: 20px;
|
||||
font-size: 0.875rem; 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; }
|
||||
|
||||
.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: 1rem; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
@ -488,16 +488,16 @@
|
|||
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
.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.5rem; }
|
||||
.dialog-sub { font-size: 0.875rem !important; color: #94a3b8; }
|
||||
.dialog p { font-size: 1rem; color: var(--c-text); margin-bottom: 0.5rem; }
|
||||
.dialog-sub { font-size: 0.875rem !important; color: var(--c-text-hint); }
|
||||
.dialog-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
|
||||
.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; transition: background 0.15s;
|
||||
}
|
||||
.btn-danger:hover { background: #b91c1c; }
|
||||
.btn-danger:hover { background: var(--c-error-dark); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -204,54 +204,54 @@
|
|||
|
||||
<style>
|
||||
.top { margin-bottom: 1.25rem; }
|
||||
.back { font-size: 0.9rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.5rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; }
|
||||
.back { font-size: 0.9rem; color: var(--c-primary); text-decoration: none; display: block; margin-bottom: 0.5rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
|
||||
|
||||
section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--c-bg);
|
||||
}
|
||||
section:last-of-type { border-bottom: none; }
|
||||
h2 { font-size: 0.8rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
|
||||
h2 { font-size: 0.8rem; font-weight: 700; color: var(--c-text-hint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
|
||||
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||||
.field { display: flex; flex-direction: column; 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, select, textarea {
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 8px;
|
||||
font-size: 1rem; background: #fff; width: 100%;
|
||||
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, select:focus, textarea:focus { outline: none; border-color: #1e40af; }
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); }
|
||||
|
||||
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.check-label {
|
||||
display: flex; align-items: center; gap: 0.4rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1.5px solid #e2e8f0; border-radius: 20px;
|
||||
border: 1.5px solid var(--c-border); border-radius: 20px;
|
||||
font-size: 0.875rem; 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; }
|
||||
|
||||
.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.5rem; margin-bottom: 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; text-decoration: none; text-align: center;
|
||||
border: 1.5px solid var(--c-border); border-radius: 8px;
|
||||
font-size: 1rem; color: var(--c-text-muted); text-decoration: none; text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -332,13 +332,13 @@
|
|||
<style>
|
||||
.top { display: flex; align-items: center; justify-content: space-between; 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; }
|
||||
.hint { color: #94a3b8; text-align: center; margin-top: 3rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
|
||||
.hint { color: var(--c-text-hint); text-align: center; margin-top: 3rem; }
|
||||
|
||||
.feed { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 5rem; }
|
||||
|
||||
.beitrag {
|
||||
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||||
background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: 12px;
|
||||
overflow: hidden; padding: 0.9rem 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -347,27 +347,27 @@
|
|||
}
|
||||
.avatar {
|
||||
width: 2.2rem; height: 2.2rem; border-radius: 50%;
|
||||
background: #e0e7ff; color: #1e40af;
|
||||
background: var(--c-primary-light); color: var(--c-primary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
|
||||
}
|
||||
.beitrag-meta { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; }
|
||||
.autor { font-weight: 600; font-size: 0.875rem; color: #1e293b; }
|
||||
.zeit { font-size: 0.72rem; color: #94a3b8; }
|
||||
.autor { font-weight: 600; font-size: 0.875rem; color: var(--c-text); }
|
||||
.zeit { font-size: 0.72rem; color: var(--c-text-hint); }
|
||||
.btn-del {
|
||||
background: none; border: none; color: #94a3b8;
|
||||
background: none; border: none; color: var(--c-text-hint);
|
||||
font-size: 0.85rem; cursor: pointer; padding: 0.2rem;
|
||||
}
|
||||
.btn-del:hover { color: #dc2626; }
|
||||
.btn-del:hover { color: var(--c-error); }
|
||||
|
||||
.termin-tag {
|
||||
font-size: 0.75rem; color: #1e40af; background: #eff6ff;
|
||||
font-size: 0.75rem; color: var(--c-primary); background: var(--c-primary-subtle);
|
||||
border-radius: 20px; padding: 0.2rem 0.65rem;
|
||||
display: inline-block; margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.beitrag-text {
|
||||
font-size: 0.92rem; color: #1e293b; line-height: 1.55;
|
||||
font-size: 0.92rem; color: var(--c-text); line-height: 1.55;
|
||||
white-space: pre-wrap; margin: 0 0 0.6rem;
|
||||
}
|
||||
|
||||
|
|
@ -393,15 +393,15 @@
|
|||
|
||||
.beitrag-fuss {
|
||||
display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem;
|
||||
border-top: 1px solid #f1f5f9; margin-top: 0.25rem;
|
||||
border-top: 1px solid var(--c-bg); margin-top: 0.25rem;
|
||||
}
|
||||
.btn-like {
|
||||
background: none; border: 1px solid #e2e8f0; border-radius: 20px;
|
||||
background: none; border: 1px solid var(--c-border); border-radius: 20px;
|
||||
padding: 0.25rem 0.75rem; font-size: 0.82rem; cursor: pointer;
|
||||
transition: all 0.15s; color: #64748b;
|
||||
transition: all 0.15s; color: var(--c-text-muted);
|
||||
}
|
||||
.btn-like.aktiv { background: #fef9c3; border-color: #fbbf24; color: #92400e; }
|
||||
.gruppe-tag { font-size: 0.72rem; color: #94a3b8; }
|
||||
.btn-like.aktiv { background: var(--c-warning-bg); border-color: var(--c-warning); color: var(--c-warning-dark); }
|
||||
.gruppe-tag { font-size: 0.72rem; color: var(--c-text-hint); }
|
||||
|
||||
/* Formular */
|
||||
.overlay {
|
||||
|
|
@ -410,61 +410,61 @@
|
|||
z-index: 100; padding: 1rem; 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; }
|
||||
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
|
||||
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); }
|
||||
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;
|
||||
}
|
||||
textarea:focus, select:focus { outline: none; border-color: #1e40af; }
|
||||
textarea:focus, select:focus { outline: none; border-color: var(--c-primary); }
|
||||
|
||||
.upload-area { margin-bottom: 0.85rem; }
|
||||
.upload-label {
|
||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
padding: 0.5rem 0.85rem; border: 1.5px dashed #e2e8f0; border-radius: 8px;
|
||||
font-size: 0.875rem; color: #64748b; cursor: pointer;
|
||||
padding: 0.5rem 0.85rem; border: 1.5px dashed var(--c-border); border-radius: 8px;
|
||||
font-size: 0.875rem; color: var(--c-text-muted); cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.upload-label:hover { border-color: #1e40af; color: #1e40af; }
|
||||
.upload-label:hover { border-color: var(--c-primary); color: var(--c-primary); }
|
||||
.file-input { display: none; }
|
||||
.preview-grid {
|
||||
display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;
|
||||
}
|
||||
.preview-img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
|
||||
.preview-video {
|
||||
width: 72px; height: 72px; background: #f1f5f9; border-radius: 6px;
|
||||
width: 72px; height: 72px; background: var(--c-bg); border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 0.75rem; color: #64748b;
|
||||
font-size: 0.75rem; color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
.checkboxes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
|
||||
.check-label {
|
||||
display: flex; align-items: center; gap: 0.35rem;
|
||||
padding: 0.3rem 0.65rem; border: 1.5px solid #e2e8f0; border-radius: 20px;
|
||||
padding: 0.3rem 0.65rem; 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.5rem; }
|
||||
.error { color: var(--c-error); font-size: 0.875rem; margin-bottom: 0.5rem; }
|
||||
.actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
|
||||
.btn-primary-full {
|
||||
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;
|
||||
}
|
||||
.btn-primary-full: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;
|
||||
}
|
||||
.btn-primary { background: #1e40af; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
|
||||
.btn-primary { background: var(--c-primary); color: var(--c-bg-card); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* Lightbox */
|
||||
.lightbox {
|
||||
|
|
|
|||
|
|
@ -258,55 +258,55 @@
|
|||
<style>
|
||||
.top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
|
||||
.top .btn-primary { flex: none; padding: 0.45rem 0.9rem; font-size: 0.875rem; }
|
||||
.back { font-size: 0.85rem; color: #1e40af; text-decoration: none; display: block; margin-bottom: 0.25rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: #1e293b; }
|
||||
.hint { color: #94a3b8; font-size: 0.95rem; text-align: center; margin-top: 3rem; }
|
||||
.section-title { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; }
|
||||
.back { font-size: 0.85rem; color: var(--c-primary); text-decoration: none; display: block; margin-bottom: 0.25rem; }
|
||||
h1 { font-size: 1.4rem; font-weight: 700; color: var(--c-text); }
|
||||
.hint { color: var(--c-text-hint); font-size: 0.95rem; text-align: center; margin-top: 3rem; }
|
||||
.section-title { font-size: 0.72rem; font-weight: 700; color: var(--c-text-hint); text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; }
|
||||
|
||||
.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.inaktiv { opacity: 0.55; }
|
||||
|
||||
.ort-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
|
||||
.ort-name-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.ort-name { font-weight: 600; font-size: 0.95rem; color: #1e293b; }
|
||||
.ort-meta { font-size: 0.78rem; color: #64748b; }
|
||||
.gesperrt-hinweis { font-size: 0.75rem; color: #dc2626; font-weight: 500; }
|
||||
.ort-name { font-weight: 600; font-size: 0.95rem; color: var(--c-text); }
|
||||
.ort-meta { font-size: 0.78rem; color: var(--c-text-muted); }
|
||||
.gesperrt-hinweis { font-size: 0.75rem; color: var(--c-error); font-weight: 500; }
|
||||
|
||||
.badge { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 20px; }
|
||||
.badge.gruen { background: #dcfce7; color: #16a34a; }
|
||||
.badge.rot { background: #fee2e2; color: #dc2626; }
|
||||
.badge.grau { background: #f1f5f9; color: #64748b; }
|
||||
.badge.gruen { background: var(--c-success-bg); color: var(--c-success); }
|
||||
.badge.rot { background: var(--c-error-bg); color: var(--c-error); }
|
||||
.badge.grau { background: var(--c-bg); color: var(--c-text-muted); }
|
||||
|
||||
.ort-aktionen { display: flex; gap: 0.35rem; flex-shrink: 0; align-items: flex-start; }
|
||||
|
||||
.btn-ausfall {
|
||||
padding: 0.3rem 0.6rem; background: #fef9c3; border: 1px solid #fde047;
|
||||
border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: #854d0e; cursor: pointer;
|
||||
padding: 0.3rem 0.6rem; background: var(--c-warning-bg); border: 1px solid var(--c-warning-light);
|
||||
border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: var(--c-warning-amber); cursor: pointer;
|
||||
}
|
||||
|
||||
.ausfall-karte {
|
||||
display: flex; align-items: center; gap: 0.75rem;
|
||||
padding: 0.7rem 1rem; background: #fff;
|
||||
border: 1px solid #fca5a5; border-radius: 8px;
|
||||
padding: 0.7rem 1rem; background: var(--c-bg-card);
|
||||
border: 1px solid var(--c-error-light); border-radius: 8px;
|
||||
}
|
||||
.ausfall-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
|
||||
.ausfall-ort { font-weight: 600; font-size: 0.88rem; color: #1e293b; }
|
||||
.ausfall-zeitraum { font-size: 0.78rem; color: #dc2626; }
|
||||
.ausfall-grund { font-size: 0.75rem; color: #94a3b8; }
|
||||
.ausfall-ort { font-weight: 600; font-size: 0.88rem; color: var(--c-text); }
|
||||
.ausfall-zeitraum { font-size: 0.78rem; color: var(--c-error); }
|
||||
.ausfall-grund { font-size: 0.75rem; color: var(--c-text-hint); }
|
||||
|
||||
.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); }
|
||||
|
||||
.overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
|
||||
|
|
@ -314,32 +314,32 @@
|
|||
z-index: 100; padding: 1rem; 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: 90dvh; overflow-y: auto;
|
||||
}
|
||||
h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.25rem; }
|
||||
.sheet-sub { font-size: 0.85rem; color: #64748b; margin-bottom: 1rem; }
|
||||
h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.25rem; }
|
||||
.sheet-sub { font-size: 0.85rem; color: var(--c-text-muted); 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.85rem; }
|
||||
label { font-size: 0.875rem; font-weight: 500; color: #475569; }
|
||||
label { font-size: 0.875rem; font-weight: 500; color: var(--c-text-secondary); }
|
||||
.toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
|
||||
input, select {
|
||||
padding: 0.65rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 8px;
|
||||
font-size: 1rem; background: #fff; width: 100%; box-sizing: border-box;
|
||||
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;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
input:focus, select:focus { outline: none; border-color: #1e40af; }
|
||||
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; }
|
||||
input:focus, select:focus { outline: none; border-color: var(--c-primary); }
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -229,10 +229,10 @@
|
|||
}
|
||||
|
||||
const verfuegbarkeitConfig: Record<Verfuegbarkeit, { label: string; farbe: string }> = {
|
||||
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}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="verfueg-badge" style="color:#f59e0b">● Offen</span>
|
||||
<span class="verfueg-badge" style="color:var(--c-warning)">● Offen</span>
|
||||
{/if}
|
||||
{#if isAdmin() && userName(t.durchfuehrender_id)}
|
||||
<span class="karte-sub">→ {userName(t.durchfuehrender_id)}</span>
|
||||
|
|
@ -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); }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import '$lib/styles/theme.css';
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue