html, body { height: 100%; } app { display: block; height: 100%; } .header-logo { flex-shrink: 0; background-image: url('../images/LogoHorizontal.svg'); background-position: center left; background-size: contain; background-repeat: no-repeat; width: 200px; height: 44px; } #blazor-error-ui { background: inherit; bottom: 0; display: none; position: fixed; width: 100%; height: 100%; z-index: 100001; } /* Campo in attesa di approvazione ERP (ValidationFieldLock attivo) */ .field-pending-approval, .field-pending-approval .form-control, .field-pending-approval .dxbl-text-edit { background-color: var(--highlight-validation-color, #FFFFE0) !important; } /* ======================================================================== DetailView: foreground nero forzato su campi con background di highlight Problema: in dark mode il testo bianco del tema diventa illeggibile sugli sfondi chiari applicati dai controller di highlight (DirtyFieldHighlightController, FieldValidationLockController, ErpChangedFieldsHighlightController). Causa radice: i componenti DevExpress Blazor (DxTextBox, DxComboBox, ecc.) usano variabili CSS interne (--dxbl-text-edit-color, --dxbl-input-color) per il colore del testo degli input. Il tema dark imposta queste variabili a bianco. format.FontColor = Color.Black (impostato dai controller Module) genera un inline style color:rgb(0,0,0) sul container, ma gli input interni leggono il colore dalla variabile CSS, ignorando l'ereditarieta. Soluzione a 3 livelli: 1) Override variabili CSS DevExpress sui container con background inline -> gli input interni ereditano la variabile sovrascritta = nero 2) Override diretto color + -webkit-text-fill-color con !important -> fallback per componenti che non usano variabili CSS 3) Selettori multipli: [style*="background-color"] e [style*="background:"] -> copre sia la forma estesa che la shorthand background Nota: XAF Blazor puo applicare BackColor come "background-color: ..." oppure come "background: ..." (shorthand). Entrambe le varianti sono coperte dai selettori. Il selettore .dxbl-fl-ctrl limita lo scope ai soli form layout control delle DetailView. La classe .vp-highlight-bg e aggiunta dal companion controller Blazor (DetailViewHighlightCssBlazorController) come meccanismo aggiuntivo. ======================================================================== */ /* Livello 1: Override variabili CSS DevExpress su container con background */ .dxbl-fl-ctrl[style*="background-color"], .dxbl-fl-ctrl[style*="background:"], .dxbl-fl-ctrl [style*="background-color"], .dxbl-fl-ctrl [style*="background:"], .vp-highlight-bg, .field-pending-approval, .field-erp-changed { --dxbl-text-edit-color: #000000; --dxbl-text-edit-focus-color: #000000; --dxbl-input-color: #000000; --dxbl-checkbox-label-color: #000000; } /* Livello 2: Override diretto color su tutti gli elementi interni */ .vp-highlight-bg, .vp-highlight-bg *, .field-pending-approval input, .field-pending-approval textarea, .field-pending-approval .dxbl-text-edit-input, .field-pending-approval .dxbl-text, .field-pending-approval select, .field-erp-changed input, .field-erp-changed textarea, .field-erp-changed .dxbl-text-edit-input, .field-erp-changed .dxbl-text, .field-erp-changed select, .dxbl-fl-ctrl[style*="background-color"] input, .dxbl-fl-ctrl[style*="background-color"] textarea, .dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-input, .dxbl-fl-ctrl[style*="background-color"] .dxbl-text, .dxbl-fl-ctrl[style*="background-color"] select, .dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled, .dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled *, .dxbl-fl-ctrl[style*="background:"] input, .dxbl-fl-ctrl[style*="background:"] textarea, .dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-input, .dxbl-fl-ctrl[style*="background:"] .dxbl-text, .dxbl-fl-ctrl[style*="background:"] select, .dxbl-fl-ctrl[style*="background:"] .dxbl-disabled, .dxbl-fl-ctrl[style*="background:"] .dxbl-disabled *, .dxbl-fl-ctrl [style*="background-color"] input, .dxbl-fl-ctrl [style*="background-color"] textarea, .dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-input, .dxbl-fl-ctrl [style*="background-color"] .dxbl-text, .dxbl-fl-ctrl [style*="background-color"] select, .dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled, .dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled *, .dxbl-fl-ctrl [style*="background:"] input, .dxbl-fl-ctrl [style*="background:"] textarea, .dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-input, .dxbl-fl-ctrl [style*="background:"] .dxbl-text, .dxbl-fl-ctrl [style*="background:"] select, .dxbl-fl-ctrl [style*="background:"] .dxbl-disabled, .dxbl-fl-ctrl [style*="background:"] .dxbl-disabled * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Livello 2b: Stato :focus — i componenti DevExpress possono applicare regole di colore specifiche per lo stato focused che sovrascrivono le regole precedenti. Copriamo esplicitamente gli input in focus. */ .dxbl-fl-ctrl[style*="background-color"] input:focus, .dxbl-fl-ctrl[style*="background:"] input:focus, .dxbl-fl-ctrl [style*="background-color"] input:focus, .dxbl-fl-ctrl [style*="background:"] input:focus, .dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-input:focus, .dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-input:focus, .dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-input:focus, .dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-input:focus, .vp-highlight-bg input:focus, .vp-highlight-bg .dxbl-text-edit-input:focus { color: #000000 !important; -webkit-text-fill-color: #000000 !important; caret-color: #000000; } /* Campi puntati delle reference 1:1 (es. VendorAddress.Addr1) con modifiche pendenti. Diversamente dall'inline BackColor (saltato da Blazor sui campi read-only/disabled), questa classe colora il background anche sui campi non editabili: cosi' i campi indirizzo modificati appaiono evidenziati sul Vendor (Vendor + VendorAddress = una sola entita'). Colore = dirty light-blue (#BBDEFB), testo nero per leggibilita'. */ .vp-related-dirty-bg, .vp-related-dirty-bg .dxbl-text-edit, .vp-related-dirty-bg .dxbl-textbox, .vp-related-dirty-bg .dxbl-text-edit-input, .vp-related-dirty-bg input, .vp-related-dirty-bg textarea, .vp-related-dirty-bg select, .vp-related-dirty-bg .dxbl-text, .vp-related-dirty-bg .dxbl-disabled, .vp-related-dirty-bg .dxbl-disabled * { background-color: #BBDEFB !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Campi editabili dal fornitore: sfondo indigo tenue (Material Indigo 50). La classe "vp-editable-bg" e' applicata da DetailViewHighlightCssBlazorController sui PropertyEditor con AllowEdit runtime = true e nessun altro highlight attivo (dirty, validazione, ERP change, stati whole-record). All'apertura della DetailView il fornitore riconosce subito i campi che puo' modificare. Colore personalizzabile via --field-editable-bg. Priorita' minima nella palette: ogni altro stato rimuove la classe (gestito dal controller). */ .vp-editable-bg, .vp-editable-bg .dxbl-text-edit, .vp-editable-bg .dxbl-textbox, .vp-editable-bg .dxbl-text-edit-input, .vp-editable-bg input, .vp-editable-bg textarea, .vp-editable-bg select, .vp-editable-bg .dxbl-text { background-color: var(--field-editable-bg, #E8EAF6) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Override variabili CSS DevExpress: testo nero leggibile anche in dark mode */ .vp-editable-bg { --dxbl-text-edit-color: #000000; --dxbl-text-edit-focus-color: #000000; --dxbl-input-color: #000000; --dxbl-checkbox-label-color: #000000; } /* Stato :focus dei campi editabili evidenziati: testo e caret neri */ .vp-editable-bg input:focus, .vp-editable-bg .dxbl-text-edit-input:focus { color: #000000 !important; -webkit-text-fill-color: #000000 !important; caret-color: #000000; } /* User Fields: forza la colonna etichette (caption) dei campi UF alla stessa larghezza dei property editor standard XAF. --uf-caption-width (default 200px) e regolabile per singola vista con un selettore padre. Esempio: .my-detail-view { --uf-caption-width: 250px; } !important garantisce priorita sulle regole del tema DevExpress. flex-shrink: 0 impedisce il restringimento in contesti flexbox. */ .uf-fields-layout .dxbl-fl-cpt { min-width: var(--uf-caption-width, 235px) !important; flex-shrink: 0; } /* ======================================================================== Campi obbligatori (ImportFieldRule.IsRequired): asterisco rosso Controller DetailView: RequiredImportFieldDetailViewCaptionController Controller ListView: RequiredImportFieldListViewHeaderController Dati per tenant: RequiredImportFieldResolver (Module) DetailView: la classe "vp-required-field" e' applicata al DxFormLayoutItem del campo; l'asterisco e' aggiunto via ::after sulla caption (.dxbl-fl-cpt). ListView: la classe "vp-required-header" e' applicata alla cella di intestazione () della colonna; l'asterisco e' aggiunto via ::after sul primo span di .dxbl-grid-header-content (la caption), cosi resta in linea col testo invece di andare a capo sotto il div flex. ======================================================================== */ .vp-required-field .dxbl-fl-cpt::after { content: " *"; color: #d32f2f; font-weight: 700; } .vp-required-header .dxbl-grid-header-content > span:first-child::after { content: " *"; color: #d32f2f; font-weight: 700; } /* ======================================================================== ListView: semantica colori stato record — palette unificata Controller: RecordStateHighlightBlazorController (Blazor.Server) Dati: DirtyRecordHighlightController + ErpNewChangesHighlightController (Module) Logica: RecordVisualStateResolver (Module/Helpers) Ogni riga ha un solo colore di sfondo dominante, determinato dalla matrice di precedenza (dal piu critico al meno critico): 1. record-state-mixed — 2+ stati attivi (arancione tenue) 2. record-state-dirty — modifiche locali non convalidate (azzurro tenue) 3. record-state-validation — convalida ERP in corso (giallo tenue) 4. record-state-erp-new-changes — nuove modifiche ERP ricevute (verde tenue) Palette: Material Design 50-weight per massimo contrasto testo e accessibilita. Nessun bordo riga come segnale principale. Gli stati secondari sono visibili tramite badge nella colonna "Stato" con dot colorati + label testuale. Le variabili CSS custom (--record-state-*-bg) consentono override da appsettings.json o da selettore padre senza modificare questo file. ======================================================================== */ /* Modifiche locali non convalidate: azzurro tenue (informativo, non allarmante) */ .record-state-dirty > td { background-color: var(--record-state-dirty-bg, #E3F2FD) !important; } /* Convalida ERP in corso: giallo tenue */ .record-state-validation > td { background-color: var(--record-state-validation-bg, #FFF8E1) !important; } /* Stato misto (2+ stati attivi contemporaneamente): arancione tenue */ .record-state-mixed > td { background-color: var(--record-state-mixed-bg, #FFF3E0) !important; } /* Nuove modifiche ERP ricevute: verde tenue */ .record-state-erp-new-changes > td { background-color: var(--record-state-erp-new-changes-bg, #E8F5E9) !important; } /* Cancellazione in attesa di approvazione ERP: rosso piu marcato */ .record-state-pending-delete > td { background-color: var(--record-state-pending-delete-bg, #FFCDD2) !important; } /* Inserimento in attesa di approvazione ERP: viola tenue */ .record-state-pending-insert > td { background-color: var(--record-state-pending-insert-bg, #E1BEE7) !important; } /* Inserito su portale, convalida non ancora avviata: teal tenue */ .record-state-insert-draft > td { background-color: var(--record-state-insert-draft-bg, #E0F7FA) !important; } /* ======================================================================== ListView: foreground nero forzato su righe evidenziate (record-state-*) Problema: con tema DevExpress Fluent Dark, il testo delle celle eredita il colore bianco del tema. Le righe evidenziate usano background chiari (Material Design 50-weight), quindi il testo bianco risulta illeggibile. Soluzione: forzare color #000000 su td e su tutti gli elementi figli delle sole righe con classe record-state-*. L'override e limitato esclusivamente a queste righe; le righe non evidenziate continuano ad usare il colore testo del tema corrente (Light o Dark). !important e necessario per vincere la specificita delle regole del tema DevExpress Fluent che applicano color via selettori interni del componente DxGrid (.dxbl-grid td, .dxbl-grid a, ecc.). I badge della colonna Stato (status-badge-icon img SVG) non sono impattati: le icone sono immagini inline base64 senza proprieta color. Il separatore badge (.status-badge-separator) e nascosto (display: none) in quanto il layout verticale rende ridondante il dot separatore. ======================================================================== */ .record-state-dirty > td, .record-state-dirty > td *, .record-state-validation > td, .record-state-validation > td *, .record-state-mixed > td, .record-state-mixed > td *, .record-state-erp-new-changes > td, .record-state-erp-new-changes > td *, .record-state-pending-delete > td, .record-state-pending-delete > td *, .record-state-pending-insert > td, .record-state-pending-insert > td *, .record-state-insert-draft > td, .record-state-insert-draft > td * { color: #000000 !important; } /* ======================================================================== Colonna Stato: badge tipizzati con icona XAF SVG + label Renderizzati da RecordStateHighlightBlazorController.RenderTypedBadges tramite DataColumnCellDisplayTemplate. La scelta di quale badge mostrare e determinata dall'enum RecordVisualBadgeKind (tipizzato), non da parsing di stringhe. Le icone sono risolte a runtime via ImageLoader.Instance (pattern demo CS/MainDemo: enum con [ImageName] + ImageLoader). Struttura HTML generata: Pending . Waiting ERP Layout verticale: i badge sono impilati uno sotto l'altro per evitare che la colonna Stato tronchi il contenuto quando sono presenti piu stati. Il separatore " . " viene nascosto perche ridondante in layout verticale. ======================================================================== */ .status-badges-container { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .status-badge { display: inline-flex; align-items: center; white-space: nowrap; } .status-badge-icon { width: 14px; height: 14px; vertical-align: middle; flex-shrink: 0; margin-right: 2px; } /* Separatore nascosto: in layout verticale i badge sono gia separati visivamente dalla disposizione a colonna, il dot non serve. */ .status-badge-separator { display: none; } /* ======================================================================== Completion %: barra visuale nella colonna opt-in "CompletionPercentage" delle ListView OdA/GRN/RFQ. Renderizzata da CompletionBarBlazorController (CustomizeCellDisplayTemplate). Classi namespaced vp-completion-* per evitare collisioni con i CSS globali dello shell XAF. ======================================================================== */ /* Barra a pillola con label centrata sopra (stile Fluent): riempimento blu arrotondato, testo percentuale bianco dentro la barra. */ .vp-completion-track { position: relative; display: block; width: 100%; min-width: 70px; max-width: 180px; height: 18px; border-radius: 9px; background-color: rgba(0, 0, 0, 0.06); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); overflow: hidden; } .vp-completion-fill { display: block; height: 100%; border-radius: 9px; background-color: #0078d4; transition: width 0.2s ease-in-out; } .vp-completion-fill-full { background-color: #2e7d32; } .vp-completion-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: 600; line-height: 1; color: #ffffff; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; } /* Sotto il 50% il centro della barra cade sul binario chiaro: label scura per mantenere il contrasto. */ .vp-completion-label-dark { color: #333333; } /* ======================================================================== Dynamic Lookup: stile per editor runtime ComboBox Applicato dal DynamicLookupPropertyEditor per le proprieta configurate come lookup dinamici in LookupDefinition. Solo presentazionale: nessun impatto funzionale. ======================================================================== */ /* ======================================================================== DetailView: evidenziazione editor campi modificati dall'ERP (NewChanges) Bordo verde sugli editor delle property presenti nei dettagli ack aperto. Gestito da ErpChangedFieldsHighlightController (Module) ======================================================================== */ .field-erp-changed, .field-erp-changed .form-control, .field-erp-changed .dxbl-text-edit { border-color: var(--highlight-erp-new-changes-color, #4CAF50) !important; border-width: 2px !important; border-style: solid !important; } .vp-runtime-lookup { border-color: var(--vp-lookup-border-color, #B0C4DE) !important; } /* ======================================================================== Campi non editabili (read-only / disabled): aspetto uniforme Tutti i campi in sola lettura devono avere lo stesso aspetto dei campi editabili. L'unica differenza: il contenuto non puo essere modificato. Nessun colore grigio, nessuna opacita ridotta, nessuno sfondo diverso. Origine read-only: - ImportFieldRule.IsEditable = false (ImportFieldEditableController) - XAF AllowEdit = false su PropertyEditor - Appearance rules con Enabled = false - IdoLookupDisplayPropertyEditor (read-only by design) I selettori coprono TUTTI i componenti DevExpress Blazor: DxTextBox, DxComboBox, DxSpinEdit, DxDateEdit, DxMemo, DxCheckBox. ======================================================================== */ /* --- Componenti DevExpress Blazor in stato disabled --- */ .dxbl-disabled, .dxbl-disabled *, .dxbl-text-edit.dxbl-disabled, .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input, .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input-area, .dxbl-combobox.dxbl-disabled, .dxbl-combobox.dxbl-disabled .dxbl-text-edit-input, .dxbl-spin-edit.dxbl-disabled, .dxbl-spin-edit.dxbl-disabled .dxbl-text-edit-input, .dxbl-date-edit.dxbl-disabled, .dxbl-date-edit.dxbl-disabled .dxbl-text-edit-input, .dxbl-memo.dxbl-disabled, .dxbl-memo.dxbl-disabled textarea, .dxbl-checkbox.dxbl-disabled, .dxbl-checkbox.dxbl-disabled .dxbl-checkbox-label, .dxbl-checkbox.dxbl-disabled .dxbl-checkbox-check-element { opacity: 1 !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } /* --- Componenti DevExpress Blazor in stato readonly --- */ .dxbl-text-edit-readonly, .dxbl-text-edit-readonly .dxbl-text-edit-input, .dxbl-text-edit-readonly .dxbl-text-edit-input-area { opacity: 1 !important; color: inherit !important; background-color: inherit !important; -webkit-text-fill-color: inherit !important; } /* ======================================================================== Override foreground nero per campi disabled/readonly con highlight attivo. Le regole disabled/readonly sopra usano "color: inherit !important" che in dark mode eredita il bianco del tema. Questo blocco viene DOPO e forza esplicitamente #000000 solo per i campi con highlight. Copertura: CSS variable override + direct color override su tutti i possibili container con background inline (background-color e background). ======================================================================== */ /* Override variabili CSS anche su elementi disabled/readonly dentro highlight */ .dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled, .dxbl-fl-ctrl[style*="background:"] .dxbl-disabled, .dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled, .dxbl-fl-ctrl [style*="background:"] .dxbl-disabled, .vp-highlight-bg .dxbl-disabled, .vp-highlight-bg.dxbl-disabled { --dxbl-text-edit-color: #000000; --dxbl-input-color: #000000; } .vp-highlight-bg.dxbl-disabled, .vp-highlight-bg.dxbl-disabled *, .vp-highlight-bg .dxbl-disabled, .vp-highlight-bg .dxbl-disabled *, .vp-highlight-bg.dxbl-text-edit-readonly, .vp-highlight-bg.dxbl-text-edit-readonly .dxbl-text-edit-input, .vp-highlight-bg.dxbl-text-edit-readonly .dxbl-text-edit-input-area, .vp-highlight-bg input[readonly], .vp-highlight-bg input:disabled, .vp-highlight-bg textarea[readonly], .vp-highlight-bg textarea:disabled, .vp-highlight-bg select:disabled, .dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled, .dxbl-fl-ctrl[style*="background-color"] .dxbl-disabled *, .dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-readonly, .dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input, .dxbl-fl-ctrl[style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area, .dxbl-fl-ctrl[style*="background-color"] input[readonly], .dxbl-fl-ctrl[style*="background-color"] input:disabled, .dxbl-fl-ctrl[style*="background-color"] textarea[readonly], .dxbl-fl-ctrl[style*="background-color"] textarea:disabled, .dxbl-fl-ctrl[style*="background-color"] select:disabled, .dxbl-fl-ctrl[style*="background:"] .dxbl-disabled, .dxbl-fl-ctrl[style*="background:"] .dxbl-disabled *, .dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-readonly, .dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input, .dxbl-fl-ctrl[style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area, .dxbl-fl-ctrl[style*="background:"] input[readonly], .dxbl-fl-ctrl[style*="background:"] input:disabled, .dxbl-fl-ctrl[style*="background:"] textarea[readonly], .dxbl-fl-ctrl[style*="background:"] textarea:disabled, .dxbl-fl-ctrl[style*="background:"] select:disabled, .dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled, .dxbl-fl-ctrl [style*="background-color"] .dxbl-disabled *, .dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-readonly, .dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input, .dxbl-fl-ctrl [style*="background-color"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area, .dxbl-fl-ctrl [style*="background-color"] input[readonly], .dxbl-fl-ctrl [style*="background-color"] input:disabled, .dxbl-fl-ctrl [style*="background-color"] textarea[readonly], .dxbl-fl-ctrl [style*="background-color"] textarea:disabled, .dxbl-fl-ctrl [style*="background-color"] select:disabled, .dxbl-fl-ctrl [style*="background:"] .dxbl-disabled, .dxbl-fl-ctrl [style*="background:"] .dxbl-disabled *, .dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-readonly, .dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input, .dxbl-fl-ctrl [style*="background:"] .dxbl-text-edit-readonly .dxbl-text-edit-input-area, .dxbl-fl-ctrl [style*="background:"] input[readonly], .dxbl-fl-ctrl [style*="background:"] input:disabled, .dxbl-fl-ctrl [style*="background:"] textarea[readonly], .dxbl-fl-ctrl [style*="background:"] textarea:disabled, .dxbl-fl-ctrl [style*="background:"] select:disabled { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* --- Input HTML nativi: readonly e disabled --- */ input[readonly], input:disabled, textarea[readonly], textarea:disabled, select:disabled { opacity: 1 !important; color: inherit !important; background-color: inherit !important; -webkit-text-fill-color: inherit !important; } /* --- Editor IDO lookup display --- */ .vp-ido-display, .vp-ido-display.dxbl-text-edit, .vp-ido-display .dxbl-text-edit-input { opacity: 1 !important; color: inherit !important; background-color: inherit !important; -webkit-text-fill-color: inherit !important; } /* ======================================================================== Notification Sidebar Pannello laterale destro per la lista notifiche. Componente: NotificationSidebar.razor Controller: NotificationSidebarBlazorController Struttura: - Overlay semi-trasparente (click-outside chiude) - Pannello fixed destro con slide-in da destra - Header con titolo e pulsante chiudi - Body scrollabile con lista notifiche ======================================================================== */ /* Overlay backdrop */ .notification-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 10000; } /* Pannello sidebar - si apre a sinistra del rail verticale (--vp-rail-width), a tutta altezza pagina. */ .notification-sidebar { position: fixed; top: 0; right: var(--vp-rail-width, 48px); width: var(--vp-smart-panel-width, 420px); max-width: 90vw; height: 100vh; background-color: var(--notification-sidebar-bg, #ffffff); /* Stesso stile grafico del widget chat (vp-chatsidebar). */ box-shadow: -2px 0 16px rgba(0, 0, 0, 0.18); z-index: 10001; display: flex; flex-direction: column; } /* Animazione di espansione: applicata SOLO quando lo Smart Panel passa da nascosto a visibile (apertura da zero). Negli switch fra sezioni la classe non viene aggiunta -> il contenuto cambia diretto senza animazione. */ .notification-sidebar.notification-sidebar-animate { animation: notification-sidebar-slide-in 0.25s ease-out; } /* Stato pinned: bordo accent come la chat per indicare "bloccato aperto". Il push del body (padding-right) e' centralizzato in side-rail.css (body.vp-notif-pinned-mode) per evitare conflitti di ordine fra i CSS. */ .notification-sidebar.notification-sidebar-pinned { border-left: 3px solid #0078d4; } @keyframes notification-sidebar-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Header - markup condiviso SidePanelShell (titolo + azioni in riga unica), stesso stile del widget chat (padding 12px 16px, bordo #e1e1e1). */ .notification-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--notification-sidebar-border, #e1e1e1); flex-shrink: 0; } .notification-sidebar-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--notification-sidebar-title-color, #323130); } /* ----- Toolbar filtri (stile InforOS): ricerca + chip categoria ----- */ .notification-sidebar-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--notification-sidebar-border, #e1e1e1); flex-shrink: 0; } /* Campo di ricerca */ .notification-sidebar-search { position: relative; display: flex; align-items: center; } .notification-sidebar-search-icon { position: absolute; left: 10px; color: #8A8886; pointer-events: none; } .notification-sidebar-search-input { width: 100%; box-sizing: border-box; height: 34px; padding: 0 32px 0 34px; font-size: 13px; color: #323130; background-color: #FFFFFF; border: 1px solid #C8C6C4; border-radius: 18px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .notification-sidebar-search-input::placeholder { color: #A19F9D; } .notification-sidebar-search-input:focus { border-color: #0078D4; box-shadow: 0 0 0 1px #0078D4; } .notification-sidebar-search-clear { position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #8A8886; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .notification-sidebar-search-clear:hover { background-color: #F3F2F1; color: #323130; } /* Chip categoria segmentati */ .notification-sidebar-chips { display: flex; flex-wrap: wrap; gap: 6px; } .notification-sidebar-chip { font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 12px; border: 1px solid #D2D0CE; border-radius: 16px; /* I chip tipizzati ereditano background-color + color dalle classi notification-type-* (definite piu' avanti, stessa specificita' -> vincono): cosi' ogni chip assomiglia al badge della propria tipologia. */ background-color: #FFFFFF; color: #605E5C; cursor: pointer; white-space: nowrap; transition: box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease; } /* Hover: leggera enfasi senza perdere il colore tipo del chip. */ .notification-sidebar-chip:hover { filter: brightness(0.95); } /* Chip attivo (tipizzato): anello + bordo nel colore corrente del tipo. Non tocca background/color cosi' resta il colore del badge. */ .notification-sidebar-chip.is-active { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; } /* Chip "All": neutro da inattivo, accent blu da attivo. */ .notification-sidebar-chip.notification-chip-all.is-active { background-color: #DEECF9; color: #0a3d66; border-color: #0078D4; box-shadow: 0 0 0 1px #0078D4 inset; } /* Sub-header (sotto l'header dello shell): azioni di selezione, visibile solo quando ci sono notifiche selezionate. */ .notification-sidebar-header-actions { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--notification-sidebar-border, #e1e1e1); flex-shrink: 0; } /* Conteggio selezionate a sinistra della riga azioni. */ .notification-sidebar-selected-count { font-size: 12px; font-weight: 600; color: #605E5C; white-space: nowrap; } .notification-sidebar-actions-spacer { flex: 1 1 auto; } /* Pulsanti azione (pillola, icona + testo) coerenti con chip e ricerca. */ .notification-sidebar-select-all, .notification-sidebar-mark-selected-read { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; border: 1px solid transparent; border-radius: 16px; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .notification-sidebar-select-all svg, .notification-sidebar-mark-selected-read svg { flex-shrink: 0; } /* Ghost: azione secondaria (seleziona/deseleziona). */ .notification-sidebar-select-all { background-color: #FFFFFF; color: var(--notification-sidebar-select-all-color, #323130); border-color: var(--notification-sidebar-select-all-border, #C8C6C4); } .notification-sidebar-select-all:hover { background-color: var(--notification-sidebar-select-all-hover-bg, #F3F2F1); color: var(--notification-sidebar-select-all-hover-color, #201F1E); border-color: var(--notification-sidebar-select-all-hover-border, #8A8886); } /* Primary: azione principale (segna come lette). */ .notification-sidebar-mark-selected-read { background-color: var(--notification-sidebar-mark-selected-bg, #0078D4); color: var(--notification-sidebar-mark-selected-color, #FFFFFF); border-color: var(--notification-sidebar-mark-selected-border, #0078D4); } .notification-sidebar-mark-selected-read:hover { background-color: var(--notification-sidebar-mark-selected-hover-bg, #106EBE); color: var(--notification-sidebar-mark-selected-hover-color, #FFFFFF); border-color: var(--notification-sidebar-mark-selected-hover-border, #106EBE); box-shadow: 0 1px 4px rgba(0, 120, 212, 0.35); } /* Contenitore azioni header dello shell (pin + chiudi). */ .notification-sidebar-actions { display: flex; align-items: center; gap: 4px; } /* Bottoni icona header - stesso stile del widget chat (vp-chatsidebar-iconbtn): 30x30, radius 6px, hover grigio chiaro. Classe generata da SidePanelShell. */ .notification-sidebar-iconbtn { background: transparent; border: 1px solid transparent; font-size: 18px; cursor: pointer; color: var(--notification-sidebar-close-color, #555); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .notification-sidebar-iconbtn:hover { background-color: var(--notification-sidebar-close-hover-bg, #f3f4f6); color: var(--notification-sidebar-close-hover, #111); } .notification-sidebar-iconbtn.is-active { background-color: #0078d4; color: #ffffff; border-color: #0078d4; } .notification-sidebar-iconbtn.is-active:hover { background-color: #0064b3; color: #ffffff; } /* Body scrollabile */ .notification-sidebar-body { flex: 1; overflow-y: auto; padding: 0; } /* Stato vuoto */ .notification-sidebar-empty { padding: 40px 20px; text-align: center; color: var(--notification-sidebar-empty-color, #A19F9D); font-size: 14px; } /* Intestazione gruppo per data (Oggi / Ieri / data) - sticky stile InforOS */ .notification-sidebar-group-header { position: sticky; top: 0; z-index: 1; padding: 6px 16px; font-size: 12px; font-weight: 600; color: #605E5C; background-color: #F3F2F1; border-bottom: 1px solid var(--notification-sidebar-border, #EDEBE9); } /* Singolo item notifica */ .notification-sidebar-item { display: flex; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--notification-sidebar-border, #EDEBE9); transition: background-color 0.15s ease; } /* Avatar icona tipo (stile InforOS): quadrato arrotondato tinta + icona colorata. I colori (background tint + colore stroke) derivano dalle classi notification-type-*. */ .notification-sidebar-item-icon { flex-shrink: 0; width: 32px; height: 32px; margin: 12px 0 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .notification-sidebar-item:hover { background-color: var(--notification-sidebar-item-hover, #FAF9F8); } /* Area checkbox (sinistra, non propagante il click) */ .notification-sidebar-item-checkbox-area { display: flex; align-items: center; justify-content: center; padding: 14px 6px 14px 12px; flex-shrink: 0; cursor: default; } .notification-sidebar-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--notification-sidebar-checkbox-accent, #0078D4); flex-shrink: 0; } /* Area contenuto (destra, clickabile) */ .notification-sidebar-item-content { flex: 1; padding: 12px 16px 12px 10px; cursor: pointer; min-width: 0; } /* Item non letto: indicatore visivo */ .notification-sidebar-item-unread { background-color: var(--notification-sidebar-item-unread-bg, #DEECF9); border-left: 3px solid var(--notification-sidebar-item-unread-border, #0078D4); } .notification-sidebar-item-unread:hover { background-color: var(--notification-sidebar-item-unread-hover, #C7E0F4); } /* Item selezionato */ .notification-sidebar-item-selected { background-color: var(--notification-sidebar-item-selected-bg, #DEECF9); } .notification-sidebar-item-selected:hover { background-color: var(--notification-sidebar-item-selected-hover, #C7E0F4); } .notification-sidebar-item-selected.notification-sidebar-item-unread { background-color: var(--notification-sidebar-item-selected-unread-bg, #B3D7F2); } /* Header item: tipo + data */ .notification-sidebar-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .notification-sidebar-item-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #8A8886; } .notification-sidebar-item-date { font-size: 11px; color: var(--notification-sidebar-date-color, #A19F9D); flex-shrink: 0; } /* Colori per tipo notifica */ .notification-type-ok { background-color: #E8F5E9; color: #2E7D32; } .notification-type-ko { background-color: #FFEBEE; color: #C62828; } .notification-type-erp-change { background-color: #FFF3E0; color: #E65100; } .notification-type-idm { background-color: #E3F2FD; color: #1565C0; } .notification-type-email { background-color: #F3E5F5; color: #6A1B9A; } .notification-type-chat { background-color: #E0F7FA; color: #006064; } .notification-type-validation { background-color: #ECEFF1; color: #455A64; } /* Subject */ .notification-sidebar-item-subject { font-size: 13px; font-weight: 500; color: var(--notification-sidebar-subject-color, #323130); margin-bottom: 2px; line-height: 1.3; } /* Body preview */ .notification-sidebar-item-body { font-size: 12px; color: var(--notification-sidebar-body-color, #605E5C); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } /* Indicatore caricamento */ .notification-sidebar-loading { padding: 16px 20px; text-align: center; color: var(--notification-sidebar-empty-color, #A19F9D); font-size: 13px; } /* ======================================================================== Notification Sidebar — Dark mode Lo script dashboard-theme-sync.js setta data-vp-theme="dark|light" sull'elemento in base al tema XAF Fluent corrente. In parallelo XAF Blazor / Bootstrap 5 imposta data-bs-theme="dark" su : ogni regola accetta entrambi i selettori cosi' il dark mode si applica immediatamente anche prima che lo script aggiorni data-vp-theme. Tutti i colori della sidebar sono parametrizzati tramite CSS variables, quindi qui basta sovrascrivere le variabili sull'elemento .notification-sidebar. ======================================================================== */ [data-vp-theme="dark"] .notification-sidebar, [data-bs-theme="dark"] .notification-sidebar { --notification-sidebar-bg: #1e293b; --notification-sidebar-border: #334155; --notification-sidebar-title-color: #e5e9f0; --notification-sidebar-select-all-color: #e5e9f0; --notification-sidebar-select-all-border: #475569; --notification-sidebar-select-all-hover-bg: #334155; --notification-sidebar-select-all-hover-color: #ffffff; --notification-sidebar-select-all-hover-border: #94a3b8; --notification-sidebar-mark-selected-bg: #1971c2; --notification-sidebar-mark-selected-color: #ffffff; --notification-sidebar-mark-selected-border: #1971c2; --notification-sidebar-mark-selected-hover-bg: #1864ab; --notification-sidebar-mark-selected-hover-color: #ffffff; --notification-sidebar-mark-selected-hover-border: #1864ab; --notification-sidebar-close-color: #b8c1cf; --notification-sidebar-close-hover-bg: #334155; --notification-sidebar-close-hover: #ffffff; --notification-sidebar-empty-color: #8694a8; --notification-sidebar-item-hover: #273548; --notification-sidebar-checkbox-accent: #4dabf7; --notification-sidebar-item-unread-bg: #1e2f4a; --notification-sidebar-item-unread-border: #4dabf7; --notification-sidebar-item-unread-hover: #243a5c; --notification-sidebar-item-selected-bg: #1e2f4a; --notification-sidebar-item-selected-hover: #243a5c; --notification-sidebar-item-selected-unread-bg: #2a4570; --notification-sidebar-date-color: #8694a8; --notification-sidebar-subject-color: #e5e9f0; --notification-sidebar-body-color: #b8c1cf; } [data-vp-theme="dark"] .notification-sidebar-overlay, [data-bs-theme="dark"] .notification-sidebar-overlay { background-color: rgba(0, 0, 0, 0.55); } [data-vp-theme="dark"] .notification-sidebar, [data-bs-theme="dark"] .notification-sidebar { box-shadow: -4px 0 16px rgba(0, 0, 0, 0.55); } [data-vp-theme="dark"] .notification-sidebar.notification-sidebar-pinned, [data-bs-theme="dark"] .notification-sidebar.notification-sidebar-pinned { border-left-color: #4dabf7; } /* Badge tipo notifica: tinte saturate ricalibrate per fondo scuro */ [data-vp-theme="dark"] .notification-type-ok, [data-bs-theme="dark"] .notification-type-ok { background-color: rgba(81, 207, 102, 0.18); color: #b2f2bb; } [data-vp-theme="dark"] .notification-type-ko, [data-bs-theme="dark"] .notification-type-ko { background-color: rgba(255, 107, 107, 0.18); color: #ffc9c9; } [data-vp-theme="dark"] .notification-type-erp-change, [data-bs-theme="dark"] .notification-type-erp-change { background-color: rgba(255, 169, 77, 0.18); color: #ffd591; } [data-vp-theme="dark"] .notification-type-idm, [data-bs-theme="dark"] .notification-type-idm { background-color: rgba(77, 171, 247, 0.18); color: #a5d8ff; } [data-vp-theme="dark"] .notification-type-email, [data-bs-theme="dark"] .notification-type-email { background-color: rgba(177, 151, 252, 0.18); color: #d0bfff; } [data-vp-theme="dark"] .notification-type-chat, [data-bs-theme="dark"] .notification-type-chat { background-color: rgba(102, 217, 232, 0.18); color: #99e9f2; } [data-vp-theme="dark"] .notification-type-validation, [data-bs-theme="dark"] .notification-type-validation { background-color: rgba(206, 212, 218, 0.16); color: #cbd5e1; } /* ======================================================================== Notification Toast Notifiche toast in stile Windows che compaiono in basso a destra quando arriva una nuova notifica. Auto-dismiss dopo N secondi. Componente: NotificationToast.razor ======================================================================== */ /* Container fisso in basso a destra. Offset a sinistra della larghezza del rail Smart Panel (--vp-rail-width), cosi i toast non si sovrappongono alle icone del rail sul bordo destro. */ .notification-toast-container { position: fixed; bottom: 20px; right: calc(var(--vp-rail-width, 48px) + 20px); z-index: 10002; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 380px; pointer-events: none; } /* Singolo toast */ .notification-toast { background-color: var(--notification-toast-bg, #ffffff); border: 1px solid var(--notification-toast-border, #e0e0e0); border-left: 4px solid var(--notification-toast-accent, #0078D4); border-radius: 6px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); padding: 12px 16px; cursor: pointer; pointer-events: auto; transition: opacity 0.3s ease, transform 0.3s ease; } .notification-toast:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24); } /* Animazione entrata: slide-in da destra */ .notification-toast-enter { animation: toast-slide-in 0.35s ease-out; } @keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } /* Animazione uscita: fade-out verso destra */ .notification-toast-exit { animation: toast-slide-out 0.3s ease-in forwards; } @keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* Header toast: tipo + dismiss */ .notification-toast-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .notification-toast-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 4px; } .notification-toast-dismiss { background: none; border: 1px solid transparent; font-size: 16px; cursor: pointer; color: var(--notification-toast-dismiss-color, #605E5C); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease; } .notification-toast-dismiss:hover { background-color: var(--notification-toast-dismiss-hover-bg, #FAF9F8); color: var(--notification-toast-dismiss-hover, #323130); } /* Subject */ .notification-toast-subject { font-size: 13px; font-weight: 600; color: var(--notification-toast-subject-color, #323130); margin-bottom: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Body preview */ .notification-toast-body { font-size: 12px; color: var(--notification-toast-body-color, #605E5C); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Notification Toast — dark mode override (vedi .notification-sidebar) */ [data-vp-theme="dark"] .notification-toast, [data-bs-theme="dark"] .notification-toast { --notification-toast-bg: #1e293b; --notification-toast-border: #334155; --notification-toast-accent: #4dabf7; --notification-toast-dismiss-color: #b8c1cf; --notification-toast-dismiss-hover-bg: #334155; --notification-toast-dismiss-hover: #ffffff; --notification-toast-subject-color: #e5e9f0; --notification-toast-body-color: #b8c1cf; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } [data-vp-theme="dark"] .notification-toast:hover, [data-bs-theme="dark"] .notification-toast:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65); } /* ======================================================================== Drillback Link Link inline nelle notifiche che navigano al DetailView di un BO. Componente: DrillbackText.razor Parser: DrillbackParser.cs ======================================================================== */ .drillback-link { color: var(--drillback-link-color, #0078D4); text-decoration: underline; cursor: pointer; font-weight: 500; } .drillback-link:hover { color: var(--drillback-link-hover, #005A9E); text-decoration: underline; } /* ======================================================================== Action Badge: contatore numerico sopra le icone delle azioni toolbar. Gestito da action-badges.js tramite MutationObserver. Si attiva su qualunque SimpleAction la cui caption contenga "(N)". Target principali: ShowSpecificNotes, LoadIdmDocuments. ======================================================================== */ /* Portal container: non interagisce con il mouse. Parte nascosto (opacity 0) per evitare flash durante il caricamento. La classe "ready" viene aggiunta dal JS quando la view e completamente caricata. */ #action-badges-portal { pointer-events: none; position: absolute; top: 0; left: 0; z-index: 9999; opacity: 0; transition: opacity 0.2s ease; } #action-badges-portal.action-badges-ready { opacity: 1; } /* Stato dimmed: quando un popup/modal e aperto, i badge si nascondono per non sovrapporsi al contenuto del popup */ #action-badges-portal.action-badges-dimmed { opacity: 0; } .action-badge-count { position: absolute; display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; font-weight: 600; line-height: 15px; text-align: center; color: var(--action-badge-color, #605E5C) !important; background-color: var(--action-badge-bg, #FAF9F8); border: 1px solid var(--action-badge-border, #8A8886); border-radius: 8px; pointer-events: none; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; } /* ======================================================================== Logon Page: link recupero password e username Iniettati da logon-recovery-links.js sotto il pulsante "Log In" della pagina di login XAF Blazor. Container: .logon-main .card-body (struttura XAF standard) ======================================================================== */ .vp-logon-recovery-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 8px; font-size: 13px; } .vp-logon-link { color: #337ab7; text-decoration: none; cursor: pointer; transition: color 0.2s ease; } .vp-logon-link:hover { color: #23527c; text-decoration: underline; } .vp-logon-link-separator { color: #999; font-size: 12px; user-select: none; } /* ======================================================================== Toggle Switch - Modalita accesso nella pagina di logon Renderizzato dal componente ToggleSwitchEditor.razor con DxCheckBox Switch. La caption XAF "Modalita accesso" viene nascosta dal LogonFormLayoutController; il toggle con etichette laterali e testo descrittivo e autosufficiente. ======================================================================== */ .vp-toggle-switch-container { display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px 0; } .vp-toggle-switch-row { display: flex; align-items: center; gap: 10px; } .vp-toggle-label { font-size: 13px; color: #999; transition: color 0.25s ease, font-weight 0.25s ease; user-select: none; cursor: default; } .vp-toggle-label--active { font-weight: 600; color: #333; } .vp-toggle-hint { margin-top: 6px; font-size: 11.5px; color: #888; text-align: center; font-style: italic; line-height: 1.4; } /* ======================================================================== InlineCheckBoxEditor - DxCheckBox con caption testuale inline a destra. Renderizzato dal componente Editors/InlineCheckBoxEditor.razor (pattern ToggleSwitchEditor). Usato per il flag "Ricordami su questo dispositivo" sulla pagina di login: il form layout XAF nasconde la caption sopra (LogonFormLayoutController) e il DxCheckBox la mostra inline come ChildContent. ======================================================================== */ .vp-inline-checkbox { padding: 6px 0 4px 0; } .vp-inline-checkbox-caption { font-weight: 400; color: #333; font-size: 14px; margin-left: 6px; cursor: pointer; user-select: none; } /* ======================================================================== ListView: nasconde i pulsanti spin (frecce su/giu) sui campi numerici nelle griglie DevExpress Blazor (DxSpinEdit inline editing). ======================================================================== */ .dxbl-grid .dxbl-spin-edit .dxbl-btn-group { display: none !important; } /* ======================================================================== DetailView: highlight whole-record per stati Pending Delete/Insert tramite classe CSS sul gestita via JS interop. Problema originale: AppearanceController.Refresh() non genera CustomApplyAppearance per i campi con AllowEdit=false impostato da ImportFieldEditableController. Inoltre, XAF Blazor non renderizza IAppearanceFormat.BackColor come inline style per editor disabled. Il ComponentModel.CssClass via riflessione non ha effetto perche il rendering usa il View Component (read-only), non l'Edit Component. Soluzione: classe CSS sul (non gestito da Blazor) che attiva regole CSS discendenti su .dxbl-text-edit (editor component), coprendo TUTTI i campi inclusi quelli disabled. Le variabili CSS custom consentono override. Il selettore :not(.dxbl-fl-ctrl-nc) esclude i wrapper delle nested ListView/frame evitando di colorare toolbar e griglie annidate. Il child combinator > .dxbl-text-edit applica il background direttamente sull'editor DevExpress preservando i bordi arrotondati nativi. Controller: DetailViewHighlightCssBlazorController (Blazor.Server) JS: pending-state-highlight.js ======================================================================== */ /* Cancellazione in attesa: rosso tenue su tutti i campi */ body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit { background-color: var(--record-state-pending-delete-bg, #FFCDD2) !important; } /* Inserimento in attesa: viola tenue su tutti i campi */ body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit { background-color: var(--record-state-pending-insert-bg, #E1BEE7) !important; } /* Insert draft (Inserted): teal tenue su tutti i campi */ body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit { background-color: var(--record-state-insert-draft-bg, #E0F7FA) !important; } /* Override variabili CSS DevExpress per testo nero dentro pending state */ body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit { --dxbl-text-edit-color: #000000; --dxbl-text-edit-focus-color: #000000; --dxbl-input-color: #000000; --dxbl-checkbox-label-color: #000000; } /* Foreground nero forzato su tutti gli elementi interni dei campi pending */ body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit, body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit *, body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input, body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit textarea, body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit select, body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit *, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit textarea, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit select, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit *, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit textarea, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit select, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Focus state dentro pending: garantisce testo nero anche in focus */ body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input:focus, body.vp-state-pending-delete .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input:focus, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input:focus, body.vp-state-pending-insert .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input:focus, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit input:focus, body.vp-state-insert-draft .dxbl-fl-ctrl:not(.dxbl-fl-ctrl-nc) > .dxbl-text-edit .dxbl-text-edit-input:focus { color: #000000 !important; -webkit-text-fill-color: #000000 !important; caret-color: #000000; } /* ============================================================ */ /* Global Search Box (topbar) */ /* ============================================================ */ .global-search-box { position: fixed; top: 8px; right: 220px; width: 340px; /* Sotto lo z-index dei dropdown Bootstrap (.dropdown-menu = 1000): garantisce che account-menu, theme-settings, popup modali e ogni altro overlay/finestra apribile stia sempre sopra la search box. Valore sufficiente a sovrastare il ribbon XAF standard. */ z-index: 900; font-family: inherit; /* Posizione definitiva calcolata a runtime da js/global-search.js sopra il .dxbl-tabs-container del ribbon. Nascosto finche' il JS non allinea il box: evita flash in posizione di fallback. */ visibility: hidden; } .global-search-input-wrapper { position: relative; display: flex; align-items: center; height: 36px; background: #ffffff; border: 1px solid #d1d5db; border-radius: 999px; padding-right: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s, box-shadow 0.15s; } .global-search-box-open .global-search-input-wrapper { border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15); } .global-search-input { flex: 1; border: none; outline: none; background: transparent; padding: 0 8px 0 0; font-size: 13px; color: #111827; min-width: 0; height: 100%; } .global-search-input-left { padding-left: 16px; } .global-search-input::placeholder { color: #9ca3af; } .global-search-clear { background: transparent; border: none; color: #6b7280; font-size: 18px; line-height: 1; padding: 0 10px; cursor: pointer; } .global-search-clear:hover { color: #111827; } .global-search-submit { flex: 0 0 auto; width: 28px; height: 28px; background: #0078d4; border: none; border-radius: 50%; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s; } .global-search-submit:hover:not(:disabled) { background: #106ebe; } .global-search-submit:disabled { background: #9ca3af; cursor: not-allowed; } .global-search-submit img { width: 14px; height: 14px; display: block; filter: brightness(0) invert(1); } .global-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 460px; overflow-y: auto; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Coerente con .global-search-box: resta sotto dropdown/popup XAF. */ z-index: 901; } .global-search-loading, .global-search-empty { padding: 14px; color: #6b7280; font-size: 13px; text-align: center; } .global-search-group { border-bottom: 1px solid #f1f5f9; } .global-search-group:last-child { border-bottom: none; } .global-search-group-title { padding: 6px 12px; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; background: #f9fafb; } .global-search-item { padding: 8px 12px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.1s, border-color 0.1s; } .global-search-item:hover { background: #f3f4f6; border-left-color: #0078d4; } .global-search-item-title { font-size: 13px; font-weight: 500; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .global-search-item-subtitle { margin-top: 2px; font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1200px) { .global-search-box { width: 260px; } } @media (max-width: 900px) { .global-search-box { width: 200px; } } /* ======================================================================== Column Chooser: nasconde il bottone Customize SOLO ai non-amministratori. La classe vp-is-admin viene applicata al da _Host.cshtml quando l'utente corrente appartiene al ruolo "Administrators". La rimozione per-label degli item di sistema (Id, Row Pointer, Record Date, New Changes, Pending Changes, ...) e gestita da wwwroot/js/column-chooser-cleanup.js tramite MutationObserver. ======================================================================== */ body:not(.vp-is-admin) .column-chooser-actions-container { display: none !important; } /* ======================================================================== Tenant Provisioning Progress Popup Popup modale mostrato dopo "Create Tenant": progress bar a step, log live, pulsanti Annulla/Chiudi. Renderizzato dal componente TenantProvisioningProgressPopup.razor, ospitato in _Host.cshtml. ======================================================================== */ .tenant-provisioning-progress { display: flex; flex-direction: column; gap: 16px; font-family: Segoe UI, Tahoma, sans-serif; font-size: 13px; color: #1f2937; /* Riempie tutta l'altezza del body del popup; min-height:0 abilita il restringimento del log (flex child) e quindi il suo scroll interno. */ flex: 1 1 auto; min-height: 0; } /* Popup body: contenitore flex ad altezza piena, SENZA scroll proprio. Lo scroll vive solo dentro l'area log (.tpp-log) per la vista avanzamento e dentro il corpo dello step (.tpp-wizard-body) per il wizard post-creazione. Evita la doppia scrollbar laterale (body + log) su finestre basse. */ .tpp-popup-body-scrollable { height: 100%; overflow: hidden; display: flex; flex-direction: column; } .tpp-summary { display: grid; grid-template-columns: auto 1fr; row-gap: 6px; column-gap: 12px; padding: 10px 14px; background: #f7f8fa; border: 1px solid #e5e7eb; border-radius: 6px; } .tpp-summary-row { display: contents; } .tpp-summary-label { font-weight: 600; color: #4b5563; } .tpp-summary-value { color: #111827; } .tpp-current-step { color: #6b7280; font-style: italic; } .tpp-status-running { color: #0078d4; font-weight: 600; } .tpp-status-completed { color: #16a34a; font-weight: 600; } .tpp-status-failed { color: #dc2626; font-weight: 600; } .tpp-status-cancelled { color: #b45309; font-weight: 600; } .tpp-status-idle { color: #6b7280; } .tpp-progress-bar { position: relative; height: 22px; background: #e5e7eb; border-radius: 11px; overflow: hidden; } .tpp-progress-fill { height: 100%; transition: width 250ms ease-out; } .tpp-progress-running { background: linear-gradient(90deg, #0078d4, #50a5e0); } .tpp-progress-completed { background: #16a34a; } .tpp-progress-failed { background: #dc2626; } .tpp-progress-cancelled { background: #b45309; } .tpp-progress-idle { background: #9ca3af; } .tpp-progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); } .tpp-log { /* Si adatta allo spazio residuo del body (flex) lasciando posto a riepilogo, barra di avanzamento e pulsanti. min-height:0 (non un'altezza fissa) permette al log di restringersi e mostrare il PROPRIO scroll, senza generare una seconda scrollbar a livello di body. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; background: #0f172a; color: #e2e8f0; border-radius: 6px; font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.45; } .tpp-log-entry { display: grid; grid-template-columns: 64px 84px 1fr; column-gap: 10px; align-items: baseline; padding: 1px 0; } .tpp-log-time { color: #94a3b8; } .tpp-log-level { font-weight: 600; } .tpp-log-message { white-space: pre-wrap; word-break: break-word; } .tpp-log-info .tpp-log-level { color: #93c5fd; } .tpp-log-success .tpp-log-level { color: #86efac; } .tpp-log-warning .tpp-log-level { color: #fcd34d; } .tpp-log-error .tpp-log-level { color: #fca5a5; } .tpp-log-success .tpp-log-message { color: #bbf7d0; } .tpp-log-warning .tpp-log-message { color: #fde68a; } .tpp-log-error .tpp-log-message { color: #fecaca; } .tpp-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ============================================================ Pannello guida post-creazione tenant Visibile dopo click su "Avanti" al termine del provisioning. Contiene istruzioni per l'export del file ION API Suite XML e la successiva importazione in Infor ION API Gateway. ============================================================ */ .tpp-post-guide .tpp-guide-intro { font-size: 14px; line-height: 1.45; margin-bottom: 14px; } .tpp-post-guide .tpp-guide-section { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; background-color: #fafafa; } .tpp-post-guide .tpp-guide-section-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #111827; } .tpp-post-guide .tpp-guide-section-body { font-size: 13px; line-height: 1.5; color: #374151; margin-bottom: 10px; } .tpp-post-guide .tpp-guide-steps { margin: 6px 0 0 18px; padding: 0; } .tpp-post-guide .tpp-guide-steps li { margin-bottom: 4px; } .tpp-post-guide .tpp-guide-actions { display: flex; align-items: center; gap: 10px; } .tpp-post-guide .tpp-guide-inline-status { font-size: 12px; color: #6b7280; font-style: italic; } .tpp-post-guide .tpp-guide-message { margin-top: 8px; padding: 8px 10px; border-radius: 4px; font-size: 13px; } .tpp-post-guide .tpp-guide-message-success { background-color: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .tpp-post-guide .tpp-guide-message-error { background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } /* Sotto-sezioni dello Step 6 (DataFlow + Workflow ION) racchiuse in una card con bordo e padding per separarle visivamente dal blocco testo introduttivo e fra di loro. */ .tpp-post-guide .tpp-guide-subsection { margin-top: 14px; padding: 12px 14px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; } .tpp-post-guide .tpp-guide-subsection-title { margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #111827; letter-spacing: 0.01em; } .tpp-post-guide .tpp-guide-inline-status-success { color: #065f46; font-weight: 500; } /* Lista per-workflow (Step 6): pallino di stato + nome + esito inline. */ .tpp-post-guide .tpp-guide-workflow-list { list-style: none; margin: 10px 0 0 0; padding: 0; } .tpp-post-guide .tpp-guide-workflow-item { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 8px 12px; margin: 6px 0; border-radius: 4px; font-size: 13px; border: 1px solid transparent; } /* Pallino di stato a sinistra del nome workflow. */ .tpp-post-guide .tpp-guide-workflow-item::before { content: ""; flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #d1d5db; } .tpp-post-guide .tpp-guide-workflow-name { flex: 0 0 auto; font-weight: 600; min-width: 130px; } .tpp-post-guide .tpp-guide-workflow-status { flex: 1 1 auto; font-style: italic; opacity: 0.85; } .tpp-post-guide .tpp-guide-workflow-error-detail { flex: 1 0 100%; margin-top: 4px; font-size: 12px; font-style: normal; opacity: 0.85; word-break: break-word; } .tpp-post-guide .tpp-guide-workflow-pending { background-color: #f9fafb; color: #4b5563; border-color: #e5e7eb; } .tpp-post-guide .tpp-guide-workflow-success { background-color: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .tpp-post-guide .tpp-guide-workflow-success::before { background-color: #16a34a; } .tpp-post-guide .tpp-guide-workflow-error { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; } .tpp-post-guide .tpp-guide-workflow-error::before { background-color: #dc2626; } /* ============================================================ Wizard a step nella guida post-creazione tenant Indicatore "Step X di N" con pallini numerati e connettori, contenitore step con altezza minima e barra azioni allineata per i bottoni Indietro/Avanti/Chiudi. ============================================================ */ .tpp-wizard .tpp-wizard-progress { display: flex; /* flex-start: con label multi-riga gli step hanno altezze diverse; allineando in alto i pallini restano su una linea comune e il connector (pinnato in alto + margin-top 13px) cade esattamente sul centro dei cerchi. */ align-items: flex-start; justify-content: space-between; margin: 0 0 16px 0; padding: 8px 4px; gap: 4px; } .tpp-wizard .tpp-wizard-step { display: flex; flex-direction: column; align-items: center; /* Larghezza fissa: senza questo le label lunghe (es. "Attiva DataFlow/Workflow ION") allargano lo step e schiacciano a zero i connector flex, rendendoli invisibili quando gli step sono molti. Con width fissa la label va a capo. */ flex: 0 0 auto; width: 96px; } .tpp-wizard .tpp-wizard-step-bullet { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; border: 2px solid #d1d5db; background-color: #ffffff; color: #6b7280; } .tpp-wizard .tpp-wizard-step-label { margin-top: 6px; font-size: 12px; color: #6b7280; text-align: center; } .tpp-wizard .tpp-wizard-step-current .tpp-wizard-step-bullet { border-color: #0078d4; background-color: #0078d4; color: #ffffff; } .tpp-wizard .tpp-wizard-step-current .tpp-wizard-step-label { color: #0078d4; font-weight: 600; } .tpp-wizard .tpp-wizard-step-done .tpp-wizard-step-bullet { border-color: #16a34a; background-color: #16a34a; color: #ffffff; } .tpp-wizard .tpp-wizard-step-done .tpp-wizard-step-label { color: #16a34a; } .tpp-wizard .tpp-wizard-step-connector { flex: 1 1 auto; height: 2px; background-color: #d1d5db; margin: 0 4px; align-self: flex-start; margin-top: 13px; } .tpp-wizard .tpp-wizard-step-connector-done { background-color: #16a34a; } /* La guida riempie l'altezza del body del popup senza mai superarla: min-height:0 preserva il restringimento flex ereditato dal base .tenant-provisioning-progress, overflow:hidden confina lo scroll dentro .tpp-wizard-body. Cosi' stepper in alto e barra azioni (Indietro/Avanti/Chiudi) restano SEMPRE visibili, qualunque sia la lunghezza del contenuto dello step. */ .tpp-post-guide.tpp-wizard { min-height: 0; overflow: hidden; } .tpp-wizard .tpp-wizard-body { /* flex-grow + min-height:0: occupa lo spazio residuo e scrolla per conto suo, senza spingere la barra azioni fuori dall'area visibile. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 12px; } .tpp-wizard .tpp-wizard-actions { justify-content: space-between; border-top: 1px solid #e5e7eb; padding-top: 12px; /* Ancora in basso anche se il corpo non riempie tutto. */ margin-top: auto; } /* ======================================================================== Busy Overlay Popup Popup modale globale (BusyOverlayPopup.razor, ospitato in _Host.cshtml) mostrato durante azioni admin bloccanti (delete tenant, export file, test connessioni). Impedisce navigazione finche' l'operazione non e' completata. ======================================================================== */ .busy-overlay-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px 8px; font-family: Segoe UI, Tahoma, sans-serif; color: #1f2937; text-align: center; } .busy-overlay-caption { font-size: 15px; font-weight: 600; color: #111827; } .busy-overlay-description { font-size: 13px; color: #374151; line-height: 1.45; max-width: 380px; } .busy-overlay-hint { font-size: 12px; color: #6b7280; font-style: italic; } /* ============================================================ Link "Manuale utente" nell'header XAF Iniettato via manual-header-link.js fra .account-container (icona utente) e .theme-settings (icona settings). Eredita dimensioni/spaziature/hover dai bottoni XAF dell'header grazie alle classi dxbl-btn dxbl-btn-standalone btn-secondary btn-header applicate al tag . L'icona interna e' un
stilato con mask-image + currentColor, come gli altri bottoni header. La protezione del manuale tecnico avviene server-side in ManualAccessGuardMiddleware. ============================================================ */ .manual-header-link, .manual-header-link:hover, .manual-header-link:focus, .manual-header-link:visited { text-decoration: none; } /* ======================================================================== ERP Conversation Chat ------------------------------------------------------------------------ Componente: ErpConversationChat.razor Renderizza la conversazione cronologica tra ERP e Portale come una chat con bolle. Sorgente: ErpConversationView (NonPersistent root) popolato da OpenErpConversationController -> ErpConversationService. ======================================================================== */ .erp-conversation { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; width: 100%; min-width: min(1200px, 95vw); box-sizing: border-box; } /* Le dimensioni del popup che ospita la conversazione ERP (e di ogni altro popup XAF con taglia dedicata) sono governate da PopupWindowSizeController + PopupWindowSizeRegistry (Blazor.Server/Controllers) via API DevExpress IPopupWindowTemplateSize: niente piu' selettori :has() su classi dxbl-*. */ .erp-conversation-empty { text-align: center; color: #666; font-style: italic; padding: 24px 8px; } /* Linea temporale verticale al centro (stile timeline Audit) */ .erp-conversation-line { position: absolute; top: 14px; bottom: 14px; left: 50%; width: 2px; background: #d6d6d6; border-radius: 1px; transform: translateX(-50%); } .erp-conversation-msg { position: relative; display: flex; width: 100%; align-items: flex-start; } .erp-conversation-msg-left { justify-content: flex-start; padding-right: calc(50% + 22px); } .erp-conversation-msg-right { justify-content: flex-end; padding-left: calc(50% + 22px); } .erp-conversation-bubble { max-width: 100%; border: 1px solid #d6d6d6; border-radius: 12px; padding: 8px 12px; background: #f5f5f5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); word-break: break-word; flex: 1 1 auto; } .erp-conversation-msg-right .erp-conversation-bubble { background: #e6f1fb; border-color: #b9d6ef; } /* Pallino sulla linea centrale (lato verso la linea) */ .erp-conversation-dot { position: absolute; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #888; border: 3px solid #fff; box-shadow: 0 0 0 1px #d6d6d6; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; font-family: 'Consolas', 'Courier New', monospace; line-height: 1; z-index: 1; } .erp-conversation-msg-left .erp-conversation-dot { left: calc(50% - 11px); } .erp-conversation-msg-right .erp-conversation-dot { right: calc(50% - 11px); } .erp-conversation-dot-glyph { display: block; } .erp-conversation-dot-success { background: #1e7e1e; } .erp-conversation-dot-warning { background: #c98a14; } .erp-conversation-dot-danger { background: #b32020; } .erp-conversation-dot-info { background: #0a5cad; } .erp-conversation-dot-neutral { background: #888; } .erp-conversation-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; margin-bottom: 4px; flex-wrap: wrap; } .erp-conversation-author { font-weight: 600; color: #0078d4; } .erp-conversation-msg-left .erp-conversation-author { color: #6a3aa0; } .erp-conversation-timestamp { color: #888; font-variant-numeric: tabular-nums; } .erp-conversation-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; border: 1px solid transparent; } .erp-conversation-badge-ok { background: #e6f6e6; color: #1e7e1e; border-color: #b8e0b8; } .erp-conversation-badge-ko { background: #fbe7e7; color: #b32020; border-color: #f0b8b8; } .erp-conversation-badge-info { background: #e6f1fb; color: #0a5cad; border-color: #b9d6ef; } .erp-conversation-badge-pending { background: #fdf4e1; color: #8a6d1a; border-color: #ecd9a0; } .erp-conversation-badge-neutral { background: #eeeeee; color: #555; border-color: #d6d6d6; } .erp-conversation-subject { font-weight: 600; color: #222; margin-bottom: 4px; } .erp-conversation-body { white-space: pre-wrap; color: #333; font-size: 13px; line-height: 1.4; } .erp-conversation-fields { margin-top: 8px; border-collapse: collapse; width: 100%; font-size: 12px; background: rgba(255, 255, 255, 0.55); border-radius: 6px; overflow: hidden; } .erp-conversation-fields th, .erp-conversation-fields td { border-bottom: 1px solid #e0e0e0; padding: 4px 6px; text-align: left; vertical-align: top; } .erp-conversation-fields thead th { background: rgba(0, 0, 0, 0.04); font-weight: 600; color: #555; } .erp-conversation-fields tbody tr:last-child td { border-bottom: none; } .erp-conversation-old-value { color: #b32020; text-decoration: line-through; } .erp-conversation-new-value { color: #1e7e1e; font-weight: 600; } .erp-conversation-arrow { color: #888; text-align: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; font-family: 'Consolas', 'Courier New', monospace; font-weight: 700; } /* -- Workflow Placeholder Toolbar (DetailView WorkflowMessageTemplate) -- */ .vp-placeholder-toolbar { padding: 0.75rem; background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 4px; } .vp-placeholder-toolbar__header { font-size: 0.875rem; color: #24292e; margin-bottom: 0.5rem; } .vp-placeholder-toolbar__header strong { color: #0078d4; } .vp-placeholder-toolbar__hint { display: block; font-size: 0.8rem; color: #586069; margin-top: 0.25rem; } .vp-placeholder-toolbar__hint kbd { background: #fff; border: 1px solid #d1d5da; border-radius: 3px; padding: 0.1rem 0.35rem; font-family: 'Consolas', 'Courier New', monospace; font-size: 0.75rem; box-shadow: 0 1px 0 #d1d5da; } .vp-placeholder-toolbar__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; } .vp-placeholder-toolbar__badge { padding: 0.25rem 0.55rem; background: #0078d4; color: #fff; border: none; border-radius: 12px; font-size: 0.8rem; font-family: 'Consolas', 'Courier New', monospace; cursor: pointer; transition: background 0.12s ease; } .vp-placeholder-toolbar__badge:hover { background: #005a9e; } .vp-placeholder-toolbar__empty { font-size: 0.85rem; color: #888; font-style: italic; } /* Variante "headless": il toolbar serve solo a trasportare la lista placeholder nel DOM (data-vp-placeholders) per il dropdown Ctrl+Space, senza UI visibile. Usata su IdmXQueryLinkDefinition_DetailView per XQueryTemplate. */ .vp-placeholder-toolbar--headless { display: none !important; } .vp-placeholder-dropdown { z-index: 9999; background: #fff; border: 1px solid #d1d5da; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); min-width: 320px; max-width: 520px; font-size: 0.85rem; display: flex; flex-direction: column; } .vp-placeholder-dropdown__search { padding: 0.4rem 0.6rem; border: none; border-bottom: 1px solid #d1d5da; outline: none; font-size: 0.85rem; background: #f8f9fa; } .vp-placeholder-dropdown__search:focus { background: #fff; box-shadow: inset 0 -2px 0 #0078d4; } .vp-placeholder-dropdown__list { max-height: 280px; overflow-y: auto; } .vp-placeholder-dropdown__empty { padding: 0.6rem 0.75rem; font-size: 0.85rem; color: #888; font-style: italic; } .vp-placeholder-dropdown__item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f0f2f4; } .vp-placeholder-dropdown__item:last-child { border-bottom: none; } .vp-placeholder-dropdown__item:hover, .vp-placeholder-dropdown__item.is-active { background: #eaf3fb; } .vp-placeholder-dropdown__token { display: block; font-family: 'Consolas', 'Courier New', monospace; color: #0078d4; font-weight: 600; } .vp-placeholder-dropdown__desc { display: block; font-size: 0.78rem; color: #586069; margin-top: 0.15rem; } /* ======================================================================== Audit History Timeline ------------------------------------------------------------------------ Componente: AuditHistoryTimeline.razor Renderizza lo storico audit di un record come timeline verticale stile GitHub/GitLab. Sorgente: AuditHistoryView (NonPersistent root) popolato da AuditHistoryNavigationController -> IAuditHistoryViewService. ======================================================================== */ .audit-timeline { position: relative; padding: 16px 16px 16px 56px; width: 100%; box-sizing: border-box; } .audit-timeline-empty { text-align: center; color: #666; font-style: italic; padding: 24px 8px; } .audit-timeline-line { position: absolute; top: 16px; bottom: 16px; left: 32px; width: 2px; background: #d6d6d6; border-radius: 1px; } .audit-timeline-row { position: relative; margin-bottom: 14px; } .audit-timeline-row:last-child { margin-bottom: 0; } .audit-timeline-dot { position: absolute; left: -32px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: #888; border: 3px solid #fff; box-shadow: 0 0 0 1px #d6d6d6; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; font-family: 'Consolas', 'Courier New', monospace; line-height: 1; } .audit-timeline-dot-glyph { display: block; } .audit-timeline-dot-success { background: #1e7e1e; } .audit-timeline-dot-warning { background: #c98a14; } .audit-timeline-dot-danger { background: #b32020; } .audit-timeline-dot-info { background: #0a5cad; } .audit-timeline-dot-erp { background: #6a3aa0; } .audit-timeline-dot-neutral { background: #888; } .audit-timeline-card { background: #fff; border: 1px solid #d6d6d6; border-radius: 8px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); word-break: break-word; } .audit-timeline-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .audit-timeline-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; border: 1px solid transparent; } .audit-timeline-badge-success { background: #e6f6e6; color: #1e7e1e; border-color: #b8e0b8; } .audit-timeline-badge-warning { background: #fdf4e1; color: #8a6d1a; border-color: #ecd9a0; } .audit-timeline-badge-danger { background: #fbe7e7; color: #b32020; border-color: #f0b8b8; } .audit-timeline-badge-info { background: #e6f1fb; color: #0a5cad; border-color: #b9d6ef; } .audit-timeline-badge-erp { background: #efe7fb; color: #6a3aa0; border-color: #d0bff0; } .audit-timeline-badge-neutral { background: #eeeeee; color: #555; border-color: #d6d6d6; } .audit-timeline-user { font-weight: 600; color: #222; font-size: 13px; } .audit-timeline-source { color: #666; font-size: 12px; padding: 1px 6px; background: rgba(0, 0, 0, 0.04); border-radius: 4px; } .audit-timeline-time { margin-left: auto; color: #888; font-size: 12px; font-variant-numeric: tabular-nums; } .audit-timeline-desc { color: #333; font-size: 13px; line-height: 1.4; white-space: pre-wrap; } .audit-timeline-fields { margin-top: 8px; border-collapse: collapse; width: 100%; font-size: 12px; background: rgba(0, 0, 0, 0.02); border-radius: 6px; overflow: hidden; } .audit-timeline-fields th, .audit-timeline-fields td { border-bottom: 1px solid #e0e0e0; padding: 4px 6px; text-align: left; vertical-align: top; } .audit-timeline-fields thead th { background: rgba(0, 0, 0, 0.04); font-weight: 600; color: #555; } .audit-timeline-fields tbody tr:last-child td { border-bottom: none; } .audit-timeline-old-value { color: #b32020; text-decoration: line-through; } .audit-timeline-new-value { color: #1e7e1e; font-weight: 600; } .audit-timeline-arrow { color: #888; text-align: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; font-family: 'Consolas', 'Courier New', monospace; font-weight: 700; } /* ============================================================ Dropdown account utente (header XAF) ------------------------------------------------------------ Annulla l'eventuale max-height/overflow calcolato da DevExpress sul popup .account-main cosi' tutte le voci (incluse Manuale e Impostazioni iniettate da user-menu-extras.js) restano visibili anche se aumenta il numero di entry. ============================================================ */ .account-main.dropdown-menu, .account-main, .account-main .account-main-inner { max-height: none !important; height: auto !important; overflow: visible !important; } /* Larghezza minima del popup: serve a non troncare le voci custom ("Impostazioni", "My Details") quando l'avatar a sinistra occupa meta' del popup. Senza min-width DevExpress dimensiona il dropdown sul contenuto piu' corto e le caption finiscono con ellipsis. */ .account-main.dropdown-menu, .account-main { min-width: 260px !important; width: auto !important; } .account-main .user-info-inner-container { min-width: 0; flex: 1 1 auto; } .account-main button.my-details .dxbl-btn-caption, .account-main button.vp-user-menu-manual .dxbl-btn-caption, .account-main button.vp-user-menu-settings .dxbl-btn-caption, .account-main button.log-off .dxbl-btn-caption, .account-main .user-name { white-space: nowrap; overflow: visible; text-overflow: clip; } /* Voci del popup account: icona Tabler a sinistra + testo allineato. Le icone sono rese via pseudo-element ::before con mask-image colorate dal background-color (#0078d4 standard portale). Coinvolge sia i bottoni nativi XAF (My Details, Log Off) sia quelli iniettati da user-menu-extras.js (Manuale, Impostazioni). */ .account-main button.my-details, .account-main button.vp-user-menu-manual, .account-main button.vp-user-menu-settings, .account-main button.log-off { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; text-align: left !important; padding-left: 12px !important; padding-right: 12px !important; } .account-main button.my-details .dxbl-btn-caption, .account-main button.vp-user-menu-manual .dxbl-btn-caption, .account-main button.vp-user-menu-settings .dxbl-btn-caption, .account-main button.log-off .dxbl-btn-caption { text-align: left; flex: 1 1 auto; } .account-main button.my-details::before, .account-main button.vp-user-menu-manual::before, .account-main button.vp-user-menu-settings::before, .account-main button.log-off::before { content: ""; display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background-color: #0078d4; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .account-main button.my-details::before { -webkit-mask-image: url('../images/icons/user.svg'); mask-image: url('../images/icons/user.svg'); } .account-main button.vp-user-menu-manual::before { -webkit-mask-image: url('../images/icons/manual.svg'); mask-image: url('../images/icons/manual.svg'); } .account-main button.vp-user-menu-settings::before { -webkit-mask-image: url('../images/icons/settings.svg'); mask-image: url('../images/icons/settings.svg'); } .account-main button.log-off::before { -webkit-mask-image: url('../images/icons/logout.svg'); mask-image: url('../images/icons/logout.svg'); } /* ======================================================================== FileDropZoneEditor: riquadro drag and drop per upload IDM. Layout a stack centrato. L'InputFile vero e' sovrapposto trasparente per intercettare sia click sia drop nativi del browser. ======================================================================== */ .vp-filedrop { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: 160px; border: 2px dashed #b5b5b5; border-radius: 8px; background-color: #fafbfc; padding: 20px; transition: border-color 120ms ease, background-color 120ms ease; overflow: hidden; } .vp-filedrop.is-dragover { border-color: #0078d4; background-color: #eaf4fb; } .vp-filedrop.has-file { border-style: solid; border-color: #cfd5dc; background-color: #ffffff; } .vp-filedrop.is-readonly { opacity: 0.65; pointer-events: none; } .vp-filedrop-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; color: #4a4a4a; pointer-events: none; } .vp-filedrop-icon { display: inline-flex; color: #0078d4; margin-bottom: 4px; } .vp-filedrop-hint { font-size: 14px; font-weight: 500; color: #2c2c2c; } .vp-filedrop-sub { font-size: 12px; color: #6c6c6c; } .vp-filedrop-filled { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; pointer-events: none; } .vp-filedrop-fileinfo { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; } .vp-filedrop-fileicon { display: inline-flex; color: #0078d4; flex: 0 0 auto; } .vp-filedrop-filemeta { display: flex; flex-direction: column; min-width: 0; } .vp-filedrop-filename { font-size: 14px; font-weight: 600; color: #1f1f1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .vp-filedrop-filesize { font-size: 12px; color: #6c6c6c; } .vp-filedrop-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; pointer-events: auto; } .vp-filedrop-replace-label { font-size: 12px; color: #6c6c6c; font-style: italic; } .vp-filedrop-remove { background-color: #ffffff; border: 1px solid #c8c8c8; color: #b00020; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1.4; position: relative; z-index: 2; } .vp-filedrop-remove:hover { background-color: #fdecef; border-color: #b00020; } .vp-filedrop-remove:disabled { cursor: not-allowed; opacity: 0.5; } .vp-filedrop-error { margin-top: 10px; padding: 8px 12px; background-color: #fdecef; border: 1px solid #f2bcc4; color: #b00020; border-radius: 4px; font-size: 13px; } /* InputFile sovrapposto: trasparente, copre tutto il riquadro tranne l'area del bottone Rimuovi (che ha z-index superiore). Riceve click e drop nativi del browser. Quando ReadOnly=true, la classe is-readonly sul padre lo neutralizza via pointer-events. */ .vp-filedrop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; } .vp-filedrop.is-readonly .vp-filedrop-input { cursor: not-allowed; } /* ======================================================================== IdmDocumentGalleryComponent: griglia di card 2 colonne con anteprima. Layout responsive: 2 colonne >=720px, 1 colonna su viewport stretti. Card cliccabile: bordo blu al hover, ombra alleggerita. ======================================================================== */ .vp-doc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 8px; width: 100%; box-sizing: border-box; } .vp-doc-gallery-empty { padding: 32px; text-align: center; color: #6c6c6c; font-size: 14px; font-style: italic; } .vp-doc-card { display: flex; flex-direction: column; background-color: #ffffff; border: 1px solid #d9d9d9; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; overflow: hidden; outline: none; } .vp-doc-card:hover, .vp-doc-card:focus-visible { border-color: #0078d4; box-shadow: 0 2px 8px rgba(0, 120, 212, 0.18); } .vp-doc-card:focus-visible { outline: 2px solid rgba(0, 120, 212, 0.4); outline-offset: 2px; } .vp-doc-card-preview { width: 100%; height: 200px; background-color: #f4f5f7; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; } .vp-doc-card-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .vp-doc-card-preview-fallback { color: #b0b0b0; align-self: center; } .vp-doc-card-footer { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background-color: #ffffff; border-top: 1px solid #ececec; min-width: 0; } .vp-doc-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .vp-doc-card-title { font-size: 13px; font-weight: 600; color: #1f1f1f; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .vp-doc-card-size { font-size: 11px; color: #6c6c6c; line-height: 1.2; white-space: nowrap; } .vp-doc-card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .vp-doc-card-btn { appearance: none; background-color: #ffffff; border: 1px solid #c8c8c8; color: #1f1f1f; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1.5; transition: background-color 100ms ease, border-color 100ms ease; } .vp-doc-card-btn:hover:not(:disabled) { background-color: #f4f5f7; border-color: #999999; } .vp-doc-card-btn:disabled { cursor: not-allowed; opacity: 0.5; } .vp-doc-card-btn-primary { background-color: #0078d4; border-color: #0078d4; color: #ffffff; } .vp-doc-card-btn-primary:hover:not(:disabled) { background-color: #006cbd; border-color: #006cbd; } /* ChatAttachmentPreviewComponent: anteprima + download allegato chat */ .vp-att-preview-empty { padding: 24px; text-align: center; color: #6c6c6c; font-size: 14px; font-style: italic; } .vp-att-preview { display: flex; flex-direction: column; gap: 12px; max-width: 480px; } .vp-att-preview-image { border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fafafa; min-height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; } .vp-att-preview-image img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 4px; } .vp-att-preview-fallback { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9a9a9a; font-size: 13px; } .vp-att-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .vp-att-preview-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #1f1f1f; } .vp-att-preview-btn { appearance: none; flex: 0 0 auto; background-color: #0078d4; border: 1px solid #0078d4; color: #ffffff; padding: 5px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1.5; transition: background-color 100ms ease, border-color 100ms ease; } .vp-att-preview-btn:hover:not(:disabled) { background-color: #006cbd; border-color: #006cbd; } .vp-att-preview-btn:disabled { cursor: not-allowed; opacity: 0.5; } .vp-att-preview-error { color: #c62828; font-size: 12px; }