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

ycyxcx
All checks were successful
Deploy / deploy (push) Successful in 1m13s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-24 21:43:37 +02:00
parent 9a5f1b1a5d
commit 0956a984cb
31 changed files with 326 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,84 +114,22 @@ body {
.step { text-align: left; }
.step__icon { width: 34px; height:34px; border-radius: 10px; background: var(--color-accent); color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom: 8px; }
.pkt-avatar { --avatar-size: 52px; --avatar-skin: #efc1a3; --avatar-hair: #5b392b; --avatar-eye: #5f4431; --avatar-hat: #38475f; --avatar-outfit: #5f7387; position: relative; display: inline-block; width: var(--avatar-size); height: var(--avatar-size); border-radius: 20px; overflow: hidden; background: #f7efe6; border: 1px solid rgba(74, 52, 38, 0.12); box-shadow: 0 10px 24px rgba(39, 28, 21, 0.08); }
.pkt-avatar { --avatar-size: 52px; --avatar-skin: #efc1a3; --avatar-hair: #5b392b; --avatar-eye: #5f4431; --avatar-hat: #38475f; --avatar-outfit: #5f7387; position: relative; display: inline-block; width: var(--avatar-size); height: var(--avatar-size); border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 22%, #fffdfa 0%, #f7efe6 62%, #ecdac6 100%); border: 1px solid rgba(74, 52, 38, 0.12); box-shadow: 0 10px 24px rgba(39, 28, 21, 0.08); isolation: isolate; }
.pkt-avatar--nav { --avatar-size: 34px; border-radius: 999px; }
.pkt-avatar--forum-list { --avatar-size: 42px; border-radius: 14px; }
.pkt-avatar--forum { --avatar-size: 52px; border-radius: 16px; }
.pkt-avatar--xl { --avatar-size: 120px; border-radius: 28px; }
.pkt-avatar--xxl { --avatar-size: 168px; border-radius: 36px; }
.pkt-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pkt-avatar__svg { display: block; width: 100%; height: 100%; }
.pkt-avatar__bg { fill: url(#none); }
.pkt-avatar__bg { fill: #f7efe6; }
.pkt-avatar__shadow { fill: rgba(70, 52, 40, 0.10); }
.pkt-avatar__outfit { fill: color-mix(in srgb, var(--avatar-outfit) 88%, black 12%); }
.pkt-avatar__outfit-detail { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 3.5; stroke-linecap: round; }
.pkt-avatar__neck,
.pkt-avatar__ear,
.pkt-avatar__face { fill: var(--avatar-skin); }
.pkt-avatar__face-shade { fill: rgba(88, 58, 35, 0.10); }
.pkt-avatar__cheek { fill: rgba(204, 112, 100, 0.12); }
.pkt-avatar__hair-base,
.pkt-avatar__hair-short,
.pkt-avatar__hair-fade,
.pkt-avatar__hair-parted,
.pkt-avatar__hair-curly,
.pkt-avatar__hair-waves,
.pkt-avatar__beard-mustache,
.pkt-avatar__beard-short,
.pkt-avatar__beard-full,
.pkt-avatar__brow { fill: var(--avatar-hair); stroke: none; }
.pkt-avatar__hair-base { opacity: .15; }
.pkt-avatar__hair-short,
.pkt-avatar__hair-fade,
.pkt-avatar__hair-parted,
.pkt-avatar__hair-curly,
.pkt-avatar__hair-waves { display: none; }
.pkt-avatar--hair-short .pkt-avatar__hair-short,
.pkt-avatar--hair-fade .pkt-avatar__hair-fade,
.pkt-avatar--hair-parted .pkt-avatar__hair-parted,
.pkt-avatar--hair-curly .pkt-avatar__hair-curly,
.pkt-avatar--hair-waves .pkt-avatar__hair-waves { display: block; }
.pkt-avatar--hair-bald .pkt-avatar__hair-base,
.pkt-avatar--hair-bald .pkt-avatar__hair-short,
.pkt-avatar--hair-bald .pkt-avatar__hair-fade,
.pkt-avatar--hair-bald .pkt-avatar__hair-parted,
.pkt-avatar--hair-bald .pkt-avatar__hair-curly,
.pkt-avatar--hair-bald .pkt-avatar__hair-waves { display: none; }
.pkt-avatar__hat-beanie,
.pkt-avatar__hat-beanie-rib,
.pkt-avatar__hat-cap,
.pkt-avatar__hat-cap-brim { display: none; fill: var(--avatar-hat); }
.pkt-avatar__hat-beanie-rib,
.pkt-avatar__hat-cap-brim { fill: color-mix(in srgb, var(--avatar-hat) 86%, black 14%); }
.pkt-avatar--hat-beanie .pkt-avatar__hat-beanie,
.pkt-avatar--hat-beanie .pkt-avatar__hat-beanie-rib,
.pkt-avatar--hat-cap .pkt-avatar__hat-cap,
.pkt-avatar--hat-cap .pkt-avatar__hat-cap-brim { display: block; }
.pkt-avatar__brow { fill: none; stroke: color-mix(in srgb, var(--avatar-hair) 92%, black 8%); stroke-width: 4; stroke-linecap: round; opacity: .9; }
.pkt-avatar__eye-shell { fill: #fff; }
.pkt-avatar__eye { fill: var(--avatar-eye); }
.pkt-avatar__eye-highlight { fill: rgba(255,255,255,0.9); }
.pkt-avatar__nose { fill: none; stroke: rgba(113, 76, 49, 0.18); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pkt-avatar__mouth { fill: none; stroke: rgba(102, 66, 42, 0.7); stroke-width: 3; stroke-linecap: round; }
.pkt-avatar__beard-mustache,
.pkt-avatar__beard-short,
.pkt-avatar__beard-full { display: none; }
.pkt-avatar--beard-mustache .pkt-avatar__beard-mustache,
.pkt-avatar--beard-short .pkt-avatar__beard-short,
.pkt-avatar--beard-full .pkt-avatar__beard-full { display: block; }
.pkt-avatar__glasses-round-left,
.pkt-avatar__glasses-round-right,
.pkt-avatar__glasses-square-left,
.pkt-avatar__glasses-square-right,
.pkt-avatar__glasses-bridge { display: none; fill: none; stroke: rgba(41, 41, 41, 0.78); stroke-width: 2.8; stroke-linecap: round; }
.pkt-avatar--glasses-round .pkt-avatar__glasses-round-left,
.pkt-avatar--glasses-round .pkt-avatar__glasses-round-right,
.pkt-avatar--glasses-round .pkt-avatar__glasses-bridge { display: block; }
.pkt-avatar--glasses-square .pkt-avatar__glasses-square-left,
.pkt-avatar--glasses-square .pkt-avatar__glasses-square-right,
.pkt-avatar--glasses-square .pkt-avatar__glasses-bridge { display: block; }
.pkt-avatar--layered::before { content: ""; position: absolute; inset: auto 8% -8% 8%; height: 28%; border-radius: 50%; background: radial-gradient(circle at center, rgba(74, 52, 38, 0.16), transparent 70%); filter: blur(10px); z-index: 0; pointer-events: none; }
.pkt-avatar__layer { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; }
.pkt-avatar__layer--outfit { z-index: 1; }
.pkt-avatar__layer--head { z-index: 2; }
.pkt-avatar__layer--hair { z-index: 3; }
.pkt-avatar__layer--hat { z-index: 4; }
.pkt-avatar__layer--features { z-index: 5; }
.pkt-avatar__layer--beard { z-index: 6; }
.pkt-avatar__layer--glasses { z-index: 7; }
.pkt-avatar__layer svg { display: block; width: 100%; height: 100%; }
.faq details { border:1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; }
.faq summary { cursor:pointer; font-weight: 600; }
@@ -311,18 +249,11 @@ body {
.avatar-builder__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.avatar-builder__preview { position: sticky; top: 0; display: grid; justify-items: center; gap: 12px; padding: 18px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
.avatar-builder__controls { display: grid; gap: 18px; }
.avatar-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
.avatar-preset-card { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.avatar-preset-card:hover { border-color: var(--color-primary); box-shadow: 0 10px 20px rgba(41, 31, 22, 0.08); transform: translateY(-1px); }
.avatar-preset-card input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-preset-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-preset-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.avatar-preset-card__label { font-size: 13px; font-weight: 700; color: var(--color-text); }
.avatar-preset-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
.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); }
.avatar-swatch input { margin: 0; }
.avatar-swatch:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
.settings-help { display: grid; gap: 14px; }
.settings-help details { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; background: #fff; }
.settings-help summary { cursor: pointer; font-weight: 700; }