rene/vereinshaus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: CSS-Variablen für alle Farbwerte (theme.css)

Browse source
This commit is contained in:
rene 2026-05-22 08:59:35 +02:00
parent e2d7655e13
commit 4fee85bd22
19 changed files with 521 additions and 461 deletions
Download patch file Download diff file Expand all files Collapse all files

82
app/src/routes/(app)/beitraege/+page.svelte
View file

@ -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>