diff --git a/frontend/static/css/sidebar.css b/frontend/static/css/sidebar.css index 9fd74153..a0d34d11 100644 --- a/frontend/static/css/sidebar.css +++ b/frontend/static/css/sidebar.css @@ -646,6 +646,100 @@ box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); } +/* ===== SIDEBAR USER PROFILE ===== */ +.sidebar-user-profile { + width: 100%; + margin-bottom: 6px; +} + +.sidebar-user-link { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 10px; + border-radius: 8px; + text-decoration: none; + color: inherit; + transition: background 0.15s ease; +} + +.sidebar-user-link:hover { + background: rgba(99, 102, 241, 0.08); + text-decoration: none; +} + +.sidebar-user-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + flex-shrink: 0; + overflow: hidden; +} + +.sidebar-user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.sidebar-avatar-fallback { + width: 32px; + height: 32px; + border-radius: 50%; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.4)); + border: 1px solid rgba(99, 102, 241, 0.3); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.85rem; + font-weight: 700; + color: #e2e8f0; +} + +.sidebar-user-info { + display: flex; + flex-direction: column; + min-width: 0; + flex: 1; +} + +.sidebar-user-name { + font-size: 0.8rem; + font-weight: 600; + color: #e2e8f0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.sidebar-user-role { + font-size: 0.65rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: #64748b; +} + +.sidebar-user-role-owner { + color: #eab308; +} + +.sidebar-user-role-user { + color: #818cf8; +} + +.sidebar-user-settings-icon { + font-size: 0.75rem; + color: #475569; + flex-shrink: 0; + transition: color 0.15s ease; +} + +.sidebar-user-link:hover .sidebar-user-settings-icon { + color: #94a3b8; +} + /* ===== SIDEBAR FOOTER ===== */ .sidebar-footer { flex-shrink: 0; diff --git a/frontend/templates/components/sidebar.html b/frontend/templates/components/sidebar.html index a9b337c0..8d1f2e2a 100644 --- a/frontend/templates/components/sidebar.html +++ b/frontend/templates/components/sidebar.html @@ -326,6 +326,16 @@