feat: ordre naturel des sections Configurations et avatar utilisateur #113
CI / lint (push) Successful in 1m59s
CI / security (push) Successful in 1m28s
CI / test (push) Successful in 4m14s
CI / build (push) Successful in 1m20s
CI / e2e (push) Successful in 13m43s

This commit is contained in:
2026-09-23 22:18:29 -04:00
parent a726ad8511
commit 33fe1a3439
24 changed files with 1078 additions and 296 deletions
+62
View File
@@ -2616,6 +2616,60 @@ select {
}
.profile-hint { display: block; font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; }
.profile-saved { font-size: 0.7rem; color: var(--accent-green); margin-left: 10px; }
/* Profile picture picker (#113) */
.profile-avatar-field { margin-bottom: 18px; }
.profile-avatar-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.profile-avatar-row { display: flex; align-items: center; gap: 16px; }
.profile-avatar-preview {
position: relative;
width: 88px;
height: 88px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
border: 2px solid var(--border);
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-avatar-preview:hover,
.profile-avatar-preview:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-initials {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
user-select: none;
}
.profile-avatar-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.45);
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
}
.profile-avatar-preview:hover .profile-avatar-overlay,
.profile-avatar-overlay:focus-visible { opacity: 1; }
.profile-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.profile-avatar-actions .config-btn-secondary { font-size: 0.75rem; padding: 6px 14px; }
.profile-avatar-remove-btn { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger) !important; }
.profile-avatar-error { font-size: 0.7rem; color: var(--danger); margin-top: 8px; }
.profile-avatar-error.hidden { display: none; }
.config-save-btn {
padding: 6px 18px; font-size: 0.75rem; font-weight: 600;
background: var(--accent); color: #fff;
@@ -6086,6 +6140,14 @@ body.resizing-v {
color: #fff;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
}
/* #113 — custom avatar image fills the circle; initials stay the fallback */
.sidebar-user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.sidebar-user-meta {
display: flex;
flex-direction: column;