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

adasd
All checks were successful
Deploy / deploy (push) Successful in 1m1s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-29 21:27:36 +02:00
parent ae34348b29
commit f0ff95679b
6 changed files with 82 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -248,25 +248,38 @@ body {
.profile-avatar-panel__content h3 { margin: 0 0 8px; }
.profile-avatar-panel__content p { margin: 0 0 14px; }
.avatar-builder { height: 100%; min-height: 0; }
.avatar-builder__shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.avatar-builder__top { display: grid; gap: 16px; padding: 18px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
.avatar-builder__shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.avatar-builder__top { display: grid; gap: 14px; padding: 14px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
.avatar-builder__hero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; }
.avatar-builder__hero-preview { display: flex; align-items: center; justify-content: center; }
.avatar-builder__hero-content { display: grid; gap: 14px; min-width: 0; }
.avatar-builder__actions { justify-content: flex-start; }
.avatar-builder__body { min-height: 0; overflow: auto; padding-right: 6px; display: grid; gap: 16px; }
.avatar-component-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.avatar-builder__body { min-height: 0; overflow: hidden; display: grid; }
.avatar-style-group { min-height: 0; display: none; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.avatar-style-group.is-active { display: grid; }
.avatar-component-nav { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 2px 0 10px; background: linear-gradient(180deg, rgba(246, 240, 228, 0.98), rgba(246, 240, 228, 0.92)); border-bottom: 1px solid rgba(196, 169, 120, 0.25); }
.avatar-component-nav__button { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.avatar-component-nav__button.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.avatar-loader { width: 100%; display: grid; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--color-border); border-radius: 14px; }
.avatar-loader__bar { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #ece2d4; }
.avatar-loader__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #37485a, #68819a); transition: width 180ms ease; }
.avatar-loader__meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.avatar-component-panels { width: 100%; display: grid; }
.avatar-component-panel { display: none; width: 100%; gap: 10px; }
.avatar-component-panels { width: 100%; min-height: 0; display: grid; }
.avatar-component-panel { display: none; width: 100%; min-height: 0; gap: 12px; grid-template-rows: auto auto minmax(0, 1fr); }
.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(4, minmax(0, 1fr)); gap: 12px; }
.avatar-component-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.72); border: 1px solid rgba(196, 169, 120, 0.35); border-radius: 16px; }
.avatar-color-control { display: grid; gap: 6px; align-content: start; }
.avatar-color-control__label { font-size: 12px; font-weight: 700; color: var(--color-text); }
.avatar-color-control__row { display: flex; align-items: center; gap: 8px; }
.avatar-color-control__picker { width: 38px; min-width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; cursor: pointer; }
.avatar-color-control__picker::-webkit-color-swatch-wrapper { padding: 4px; }
.avatar-color-control__picker::-webkit-color-swatch { border: 0; border-radius: 7px; }
.avatar-color-control__picker::-moz-color-swatch { border: 0; border-radius: 7px; }
.avatar-color-control__reset { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.avatar-color-control__samples { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-color-sample { width: 24px; height: 24px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.avatar-component-grid { min-height: 0; overflow: auto; padding-right: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
.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); }
@@ -274,7 +287,7 @@ body {
.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); }
@media (max-width: 980px){ .avatar-component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px){ .avatar-builder__hero { grid-template-columns: 1fr; } .avatar-builder__actions { justify-content: center; } .avatar-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px){ .avatar-builder__hero { grid-template-columns: 1fr; } .avatar-builder__actions { justify-content: center; } .avatar-component-colors { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .avatar-component-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); }
@@ -393,10 +406,10 @@ body {
.form-grid.single { grid-template-columns: 1fr; }
@media (max-width: 900px){ .auth-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }
.modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 70px 16px 24px; background: rgba(0,0,0,0.4); z-index: 200; overflow: auto; }
.modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 16px 8px; background: rgba(0,0,0,0.4); z-index: 200; overflow: auto; }
.modal.open { display: flex; }
.modal .panel { background:#fff; border-radius: var(--radius-md); padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.25); width: min(960px, 100%); }
.modal .panel--avatar { width: min(1120px, 100%); height: calc(100vh - 96px); max-height: calc(100vh - 96px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.modal .panel--avatar { width: min(1240px, 100%); height: calc(100vh - 32px); max-height: calc(100vh - 32px); padding: 12px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dash-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.dash-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }