-
-
-
- Profilbild -
-
+ diff --git a/assets/css/login.css b/assets/css/login.css index eb7c9e7..3549193 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -439,6 +439,173 @@ line-height: 1.5; } +/* ========================================================== + ACCOUNT PAGE – Profile + Settings Layout + ========================================================== */ + +/* ─── Main Grid ─── */ +.account { + display: grid; + grid-template-columns: 300px 1fr; + gap: 1.5rem; + width: min(960px, 100%); + margin: 0 auto; + align-items: start; +} + +/* Toast spans full width */ +.account__toast { + grid-column: 1 / -1; +} + +/* ─── Profile Sidebar ─── */ +.account__profile { + position: sticky; + top: 5rem; + text-align: center; + padding: 2rem 1.5rem !important; +} + +.account__avatar-wrapper { + width: 140px; + height: 140px; + margin: 0 auto 1.25rem; + border-radius: 50%; + overflow: hidden; + border: 3px solid var(--border-default); + box-shadow: 0 0 30px rgba(59, 130, 246, 0.1); + transition: all var(--transition-smooth); +} + +.account__avatar-wrapper:hover { + border-color: var(--color-primary); + box-shadow: 0 0 40px rgba(59, 130, 246, 0.2); + transform: scale(1.03); +} + +.account__avatar { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.account__displayname { + margin: 0 0 1.25rem; + font-size: 1.35rem; + font-weight: 700; + letter-spacing: -0.3px; + background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ─── Detail Rows (User info) ─── */ +.account__details { + margin: 0; + text-align: left; +} + +.account__detail-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.65rem 0; + border-top: 1px solid var(--border-subtle); +} + +.account__detail-row:last-child { + border-bottom: 1px solid var(--border-subtle); +} + +.account__detail-row dt { + font-size: 0.82rem; + font-weight: 500; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.account__detail-row dd { + margin: 0; + font-size: 0.9rem; + color: var(--text-secondary); + font-weight: 500; +} + +/* ─── Settings Column ─── */ +.account__settings { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +/* ─── Section Cards ─── */ +.account__section { + padding: 1.5rem !important; +} + +.account__section-title { + display: flex; + align-items: center; + gap: 0.6rem; + margin: 0 0 1rem; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); +} + +.account__section-title svg { + color: var(--color-primary); + flex-shrink: 0; +} + +.account__section-title--danger svg { + color: var(--color-danger); +} + +/* ─── Quick Actions ─── */ +.account__quick-actions { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.account__action-link { + display: block; + text-align: center; + text-decoration: none !important; + color: #ffffff !important; + -webkit-text-fill-color: #ffffff; +} + +.account__action-link--secondary { + background: linear-gradient(135deg, var(--color-accent), #059669) !important; + box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important; +} + +.account__action-link--secondary:hover { + box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4) !important; +} + +/* ─── Danger Section ─── */ +.account__section--danger { + border-color: rgba(239, 68, 68, 0.1); +} + +.account__section--danger:hover { + border-color: rgba(239, 68, 68, 0.2); + box-shadow: var(--shadow-md), 0 0 40px rgba(239, 68, 68, 0.08); +} + +.account__danger-text { + margin: 0 0 0.5rem; + color: var(--text-muted); + font-size: 0.85rem; + line-height: 1.5; +} + /* ========================================================== RESPONSIVE ========================================================== */ @@ -482,6 +649,21 @@ .auth__sideCard { display: none; } + + /* Account page responsive */ + .account { + grid-template-columns: 1fr; + width: min(520px, 100%); + } + + .account__profile { + position: static; + } + + .account__avatar-wrapper { + width: 110px; + height: 110px; + } } @media (max-width: 520px) { diff --git a/header.php b/header.php index 287c888..37cde7b 100644 --- a/header.php +++ b/header.php @@ -93,7 +93,7 @@