projects/papa-kind-treff.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup
All checks were successful
Deploy / deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-27 02:26:08 +02:00
parent da942a76aa
commit f59d50f778
128 changed files with 122 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/assets/css/app.css
View File

@@ -256,21 +256,31 @@ body {
.avatar-component-panel { display: none; width: 100%; gap: 10px; }
.avatar-component-panel.is-active { display: grid; }
.avatar-component-panel__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.avatar-component-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-height: 460px; overflow: auto; padding-right: 4px; }
.avatar-component-card { position: relative; display: grid; gap: 8px; padding: 10px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; }
.avatar-component-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-height: 420px; overflow: auto; padding-right: 4px; }
.avatar-component-card { position: relative; display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; }
.avatar-component-card input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-component-card__thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f7efe6, #f0e4d7); border: 1px solid rgba(74, 52, 38, 0.08); }
.avatar-component-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transform-origin: center; }
.avatar-component-card__label { font-size: 12px; font-weight: 700; color: var(--color-text); text-align: center; }
.avatar-component-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
.avatar-component-panel--eyes .avatar-component-card__thumb img,
.avatar-component-panel--eyebrows .avatar-component-card__thumb img { transform: scale(2.5) translateY(-14%); }
.avatar-component-panel--mouth .avatar-component-card__thumb img { transform: scale(2.45) translateY(14%); }
.avatar-component-panel--glasses .avatar-component-card__thumb img { transform: scale(2.25) translateY(-6%); }
.avatar-component-panel--hair .avatar-component-card__thumb img { transform: scale(2.2) translateY(-26%); }
.avatar-component-panel--beard .avatar-component-card__thumb img { transform: scale(2.3) translateY(8%); }
.avatar-component-panel--earrings .avatar-component-card__thumb img { transform: scale(2.15) translateY(-2%); }
@media (max-width: 860px){ .avatar-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avatar-component-panel--eyebrows .avatar-component-card__thumb img { transform: scale(2.05) translateY(-12%); }
.avatar-component-panel--mouth .avatar-component-card__thumb img { transform: scale(2.0) translateY(10%); }
.avatar-component-panel--glasses .avatar-component-card__thumb img { transform: scale(1.95) translateY(-4%); }
.avatar-component-panel--hair .avatar-component-card__thumb img { transform: scale(1.9) translateY(-20%); }
.avatar-component-panel--beard .avatar-component-card__thumb img { transform: scale(1.95) translateY(7%); }
.avatar-component-panel--earrings .avatar-component-card__thumb img { transform: scale(1.85) translateY(-1%); }
.avatar-seed-picker { width: 100%; display: grid; gap: 12px; padding: 18px; background: rgba(255,255,255,0.82); border: 1px solid var(--color-border); border-radius: 18px; }
.avatar-seed-picker[hidden] { display: none; }
.avatar-seed-picker__head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.avatar-seed-picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.avatar-seed-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; cursor: pointer; }
.avatar-seed-card:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.08); }
.avatar-seed-card__thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f7efe6, #f0e4d7); border: 1px solid rgba(74, 52, 38, 0.08); }
.avatar-seed-card__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-seed-card__label { text-align: center; font-size: 12px; font-weight: 700; }
@media (max-width: 980px){ .avatar-component-grid, .avatar-seed-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px){ .avatar-component-grid, .avatar-seed-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avatar-swatch-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.avatar-swatch { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; cursor: pointer; }
.avatar-swatch__color { width: 18px; height: 18px; border-radius: 999px; background: var(--swatch-color); border: 1px solid rgba(0,0,0,0.12); }