Integrate consistent card styling
Document the shared card appearance. Validation: 431 tests, API/web builds, scripts and Next typechecks passed. GUI retest waived by the user.
This commit is contained in:
commit
3ffa50be4c
3 changed files with 31 additions and 5 deletions
|
|
@ -688,12 +688,29 @@ a.kpi:hover {
|
|||
color: var(--color-accent-pale);
|
||||
}
|
||||
|
||||
/* Flächen-Look wie in der PM-App (Vorbild grow-monitor): gleichmäßiger
|
||||
1-px-Rahmen statt farbigem Balken an der Oberkante, größerer Radius und ein
|
||||
weicher Streuschatten mit feiner heller Innenkante oben. Der Akzent kommt
|
||||
über Kopfzeile und Inhalt, nicht über die Kante. Bootstraps shadow-sm
|
||||
setzt box-shadow mit !important aus --bs-box-shadow-sm; die Karte legt diese
|
||||
Variable auf denselben Schatten, damit Karten mit und ohne shadow-sm gleich
|
||||
aussehen. */
|
||||
.card {
|
||||
border-radius: var(--radius);
|
||||
border-top: 3px solid var(--color-primary);
|
||||
box-shadow:
|
||||
0 1px 2px var(--shadow-soft),
|
||||
0 10px 24px -14px var(--shadow-strong);
|
||||
--lb-card-shadow:
|
||||
0 4px 24px var(--shadow-soft),
|
||||
0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
||||
--bs-box-shadow-sm: var(--lb-card-shadow);
|
||||
--bs-card-border-radius: 16px;
|
||||
--bs-card-border-color: var(--color-border);
|
||||
box-shadow: var(--lb-card-shadow);
|
||||
}
|
||||
|
||||
/* Auf dunklem Grund ein kräftigerer Streuschatten und nur eine schwache
|
||||
Innenkante, sonst wirkt sie wie ein harter weißer Strich. */
|
||||
:root[data-bs-theme="dark"] .card {
|
||||
--lb-card-shadow:
|
||||
0 4px 24px rgba(0, 0, 0, 0.4),
|
||||
0 1px 0 rgba(255, 255, 255, 0.05) inset;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue