/* ========================================================== GEST PRO — navbar-user.css Stili per il "chip utente" nella navbar quando loggato. Da aggiungere in coda a style.css oppure includere come foglio separato nell' di index.php. ========================================================== */ /* * Il "chip utente" è il componente che appare nella navbar * al posto dei pulsanti "Login" e "Area Riservata" quando * l'utente è autenticato. Mostra: * - Un piccolo avatar circolare con le iniziali * - Il nome completo dell'utente * - Una freccia verso il basso (indica che è cliccabile) */ .nav-user-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35em 0.85em 0.35em 0.45em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.88); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.22s ease; white-space: nowrap; max-width: 220px; /* evita che un nome lunghissimo rompa il layout */ } .nav-user-chip:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.35); color: #fff; } /* * Avatar con le iniziali. * Dimensione e colore di sfondo coerenti con il design token * dell'accent principale (ciano elettrico). */ .nav-user-avatar { width: 28px; height: 28px; min-width: 28px; /* non restringersi in spazi stretti */ border-radius: 50%; background: var(--c-accent); color: var(--c-mid); font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: 0; flex-shrink: 0; } /* * Il nome dell'utente all'interno del chip. * Tronca con "…" se il nome è troppo lungo. */ .nav-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } /* * Pulsante "Esci" accanto al chip. * Riusa la classe .btn-login già definita in style.css * per coerenza visiva, ma aggiungiamo un'icona rossa al hover. */ .nav-logout-btn { color: rgba(255, 255, 255, 0.55) !important; padding: 0.4em 0.7em !important; font-size: 0.9rem; transition: color 0.2s ease, border-color 0.2s ease !important; } .nav-logout-btn:hover { color: #F87171 !important; /* rosso tenue */ border-color: rgba(248, 113, 113, 0.4) !important; } /* * Su schermi piccoli (hamburger attivo) il chip * si adatta: sparisce il nome, resta solo l'avatar. */ @media (max-width: 900px) { /* * Quando il menu hamburger è chiuso, .nav-actions * è nascosto (display:none). Quando è aperto (.open), * il chip deve mostrarsi come riga verticale. */ .nav-actions.open .nav-user-chip { border-radius: var(--r-sm); width: 100%; max-width: 100%; justify-content: flex-start; } .nav-actions.open .nav-logout-btn { width: 100%; text-align: left; } }