knso/Webklar-Kundenbereich
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kundenansicht neu P1: Konto mit Avatar, Sheet und Popover

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-16 16:09:40 +00:00
1 parent 3241aedc3c
commit 4953c8fd0f
3 files changed
+240
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/neu/huelle.css
+31
View File
@@ -43,3 +43,34 @@
.kn-hat-streifen { --kn-unten: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom) + 44px); }
.kn-hat-streifen .kn-haupt { padding-bottom: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom) + 28px + 44px); }
}
/* ---------- Konto (Popover am Desktop, Sheet am Handy) ---------- */
.kn-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.kn-avatar-kreis { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--kn-grau-bg); color: var(--kn-grau-fg); font-size: 12px; line-height: 16px; font-weight: 600; }
.kn-avatar img { display: none; width: 100%; height: 100%; object-fit: cover; }
.kn-avatar.has-img img { display: block; }
.kn-avatar.has-img .kn-initialen { display: none; }
.kn-konto-wurzel { position: fixed; inset: 0; z-index: 60; }
.kn-konto-wurzel:focus { outline: none; } /* tabindex -1: ein Tipp ins Leere behält die Tasten (Esc, Tab) im Sheet */
.kn-konto-scrim { position: absolute; inset: 0; background: transparent; }
.kn-konto { position: absolute; top: 56px; right: 24px; width: 280px; max-height: calc(100vh - 72px); padding: 8px 20px; overflow-y: auto; overscroll-behavior: contain; background: var(--kn-bg); border-radius: var(--kn-radius-lg); box-shadow: var(--kn-shadow-pop); animation: kn-aufpoppen .14s ease-out; }
.kn-konto-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--kn-line); }
.kn-konto-name { display: block; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.kn-konto-mail { display: block; font-size: 13px; line-height: 18px; color: var(--kn-text-2); overflow-wrap: anywhere; }
.kn-konto-zu { flex: none; min-height: 32px; padding: 0 4px; font-weight: 600; }
.kn-konto-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0; border-bottom: 1px solid var(--kn-line); text-align: left; color: var(--kn-text); }
.kn-konto-zeile:hover .kn-konto-text { text-decoration: underline; text-decoration-color: var(--kn-line-strong); text-underline-offset: 3px; }
.kn-konto-zeile--betont .kn-konto-text { font-weight: 600; }
.kn-konto-zeile[data-konto="abmelden"] { border-bottom: 0; color: var(--kn-text-2); }
.kn-konto-text { display: block; }
.kn-konto-hinweis { display: block; margin-top: 1px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--kn-text-2); }
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
.kn-konto-scrim { background: var(--kn-overlay); animation: kn-einblenden .3s ease-out; }
.kn-konto { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 92vh; padding: 8px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 12px 12px 0 0; animation: kn-sheet-hoch 500ms var(--kn-bremse); }
.kn-konto-zu { min-height: 44px; }
.kn-konto-zeile { min-height: 46px; }
}
@keyframes kn-sheet-hoch { from { transform: translateY(100%); } }