/* Sidebar chat XAF: pannello laterale destro 420px (analogo a NotificationSidebar). Si apre a sinistra del rail verticale (--vp-rail-width). Quando pinned, l'overlay scompare e la sidebar resta aperta su click esterno. */ .vp-chatsidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 1080; } .vp-chatsidebar { position: fixed; top: 0; right: var(--vp-rail-width, 48px); bottom: 0; width: 100%; max-width: var(--vp-smart-panel-width, 420px); background: #ffffff; box-shadow: -2px 0 16px rgba(0,0,0,0.18); z-index: 1081; display: flex; flex-direction: column; transform: translateX(0); } .vp-chatsidebar-open { transform: translateX(0); } /* Animazione di espansione: SOLO da nascosto -> visibile (apertura da zero). Negli switch fra sezioni la classe non viene aggiunta -> contenuto diretto. */ @keyframes vp-chatsidebar-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .vp-chatsidebar.vp-chatsidebar-animate { animation: vp-chatsidebar-slide-in 200ms ease-in-out; } .vp-chatsidebar-pinned { /* Pinned: bordo accent per indicare lo stato "bloccato". */ box-shadow: -2px 0 16px rgba(0,0,0,0.12); border-left: 3px solid #0078d4; } /* Pinned mode: il push del body (padding-right) e' centralizzato in side-rail.css (body.vp-chat-pinned-mode). Anche il riposizionamento dei popup XAF dell'header (account-main, settings-bar) sopra lo Smart Panel e' centralizzato in side-rail.css per TUTTI gli stati (rail/pin/hide), non solo per la chat pinned. Qui non resta nulla di specifico. */ /* L'icona theme-settings dell'header XAF e' nascosta perche' la voce "Impostazioni" e' stata spostata nel popup user (user-menu-extras.js). Il bottone DOM resta presente ma invisibile: cosi' il click programmatico dal menu utente puo' aprire il pannello temi nativo XAF. */ .theme-settings { visibility: hidden; width: 0 !important; overflow: hidden; padding: 0 !important; margin: 0 !important; } .vp-chatsidebar-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e1e1e1; } .vp-chatsidebar-title { margin: 0; font-size: 16px; font-weight: 600; } .vp-chatsidebar-actions { display: flex; gap: 4px; } .vp-chatsidebar-iconbtn { width: 30px; height: 30px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: #555; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .vp-chatsidebar-iconbtn:hover { background: #f3f4f6; color: #111; } .vp-chatsidebar-iconbtn.is-active { background: #0078d4; color: #ffffff; border-color: #0078d4; } .vp-chatsidebar-iconbtn.is-active:hover { background: #0064b3; color: #ffffff; } .vp-chatsidebar-body { flex: 1 1 auto; overflow: hidden; display: flex; } .vp-chatsidebar-body > * { flex: 1 1 auto; min-width: 0; } @media (min-width: 768px) { .vp-chatsidebar { width: var(--vp-smart-panel-width, 420px); } } /* ============================================================ DARK MODE Lo script dashboard-theme-sync.js setta data-vp-theme="dark|light" sull'elemento . In parallelo XAF Blazor / Bootstrap 5 puo' gia' aver impostato data-bs-theme="dark" su : per evitare il "lampo bianco" durante la finestra in cui lo script non ha ancora aggiornato data-vp-theme, ogni regola accetta entrambi i selettori. 1) Chrome esterno della sidebar (header + iconbtn). 2) Propagazione delle CSS variables interne di .vp-app (definite in WebChat.UI/wwwroot/css/webchat.css) cosi' che il ChatView annidato renderizzi in dark senza dover toccare il modulo WebChat condiviso col widget standalone. ============================================================ */ [data-vp-theme="dark"] .vp-chatsidebar, [data-bs-theme="dark"] .vp-chatsidebar { background: #1e293b; box-shadow: -2px 0 16px rgba(0, 0, 0, 0.55); } [data-vp-theme="dark"] .vp-chatsidebar-overlay, [data-bs-theme="dark"] .vp-chatsidebar-overlay { background: rgba(0, 0, 0, 0.55); } [data-vp-theme="dark"] .vp-chatsidebar-pinned, [data-bs-theme="dark"] .vp-chatsidebar-pinned { border-left-color: #4dabf7; box-shadow: -2px 0 16px rgba(0, 0, 0, 0.45); } [data-vp-theme="dark"] .vp-chatsidebar-header, [data-bs-theme="dark"] .vp-chatsidebar-header { border-bottom-color: #334155; } [data-vp-theme="dark"] .vp-chatsidebar-title, [data-bs-theme="dark"] .vp-chatsidebar-title { color: #e5e9f0; } [data-vp-theme="dark"] .vp-chatsidebar-iconbtn, [data-bs-theme="dark"] .vp-chatsidebar-iconbtn { color: #b8c1cf; } [data-vp-theme="dark"] .vp-chatsidebar-iconbtn:hover, [data-bs-theme="dark"] .vp-chatsidebar-iconbtn:hover { background: #334155; color: #ffffff; } [data-vp-theme="dark"] .vp-chatsidebar-iconbtn.is-active, [data-bs-theme="dark"] .vp-chatsidebar-iconbtn.is-active { background: #1971c2; color: #ffffff; border-color: #1971c2; } [data-vp-theme="dark"] .vp-chatsidebar-iconbtn.is-active:hover, [data-bs-theme="dark"] .vp-chatsidebar-iconbtn.is-active:hover { background: #1864ab; } /* Propagazione tema dark al ChatView (WebChat.UI) annidato nella sidebar: override delle CSS variables sull'elemento .vp-app, cosi' tutti gli stili interni di webchat.css (var(--bg), var(--surface), var(--text), ecc.) adottano la palette dark senza modificare il selettore esplicito .vp-app[data-theme="dark"] che resta riservato al widget standalone. */ [data-vp-theme="dark"] .vp-chatsidebar .vp-app, [data-bs-theme="dark"] .vp-chatsidebar .vp-app { --bg: #0f1115; --surface: #15181e; --surface-2: #1b1f26; --border: #262a33; --border-strong: #353a45; /* Palette testi calibrata per dark mode portale: testo primario bianco puro per contrasto massimo (label combo topic, header), secondari e terziari schiariti rispetto al widget standalone perche' i messaggi "empty state" (.vp-empty-search) usano --text-3 e devono restare leggibili sul fondo scuro #0f1115. */ --text: #ffffff; --text-2: #cbd5e1; --text-3: #94a3b8; --bubble-other: #232831; --bubble-other-text: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5); --accent-soft: color-mix(in srgb, var(--accent) 25%, #0f1115); } /* Override esplicito del color ereditato: alcuni selettori interni di webchat.css non riferiscono var(--text) direttamente (es. .vp-combo-title, .vp-combo-trigger) o usano var(--text-3) come l'empty state, e finiscono poco contrastati in dark mode. Forziamo il bianco sui contenitori e label principali in dark mode. */ [data-vp-theme="dark"] .vp-chatsidebar .vp-app, [data-bs-theme="dark"] .vp-chatsidebar .vp-app, [data-vp-theme="dark"] .vp-chatsidebar .vp-combo-trigger, [data-bs-theme="dark"] .vp-chatsidebar .vp-combo-trigger, [data-vp-theme="dark"] .vp-chatsidebar .vp-combo-title, [data-bs-theme="dark"] .vp-chatsidebar .vp-combo-title, [data-vp-theme="dark"] .vp-chatsidebar .vp-empty-search, [data-bs-theme="dark"] .vp-chatsidebar .vp-empty-search { color: #ffffff; } /* Replica della regola .vp-app[data-theme="dark"] .vp-messages (webchat.css): il dot grid del pannello messaggi ha un contrasto ricalibrato in dark. */ [data-vp-theme="dark"] .vp-chatsidebar .vp-app .vp-messages, [data-bs-theme="dark"] .vp-chatsidebar .vp-app .vp-messages { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 0); }