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

Tagebuch: Hunde-Picker als Einstiegsseite bei mehreren Hunden

Browse source
This commit is contained in:
rene 2026-04-13 19:41:33 +02:00
parent 5ecd14a625
commit 56ab20a705
3 changed files with 139 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

81
backend/static/css/components.css
View file

@ -1219,3 +1219,84 @@ textarea.form-control {
color: var(--c-primary-dark);
font-weight: var(--weight-semibold);
}
/* ============================================================
TAGEBUCH — HUNDE-PICKER (Einstiegsseite bei mehreren Hunden)
============================================================ */
.diary-picker-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-8) var(--space-4) var(--space-4);
gap: var(--space-5);
}
.diary-picker-hint {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--c-text-secondary);
margin: 0;
}
.diary-picker-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
}
.diary-picker-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
width: 140px;
background: var(--c-surface);
border: 2px solid var(--c-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast),
border-color var(--transition-fast);
touch-action: manipulation;
}
.diary-picker-card:active {
transform: scale(0.96);
}
.diary-picker-card--active {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-subtle);
}
.diary-picker-av {
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
background: var(--c-surface-2);
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--c-border);
}
.diary-picker-card--active .diary-picker-av {
border-color: var(--c-primary);
}
.diary-picker-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.diary-picker-name {
font-weight: var(--weight-semibold);
font-size: var(--text-base);
color: var(--c-text);
text-align: center;
}
.diary-picker-rasse {
font-size: var(--text-xs);
color: var(--c-text-secondary);
text-align: center;
}