/* ============================================================ Nexus Design System — Layer 4: component hooks Applied via XAF CustomCSSClassName / custom Razor components. Only patterns that CANNOT be expressed as a DevExpress variable belong here. Still no .dxbl-* selectors. ============================================================ */ /* ---- typography helpers (assign via CustomCSSClassName) ---- */ .nexus-h1 { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h1); line-height: var(--nexus-lh-h1); font-weight: var(--nexus-fw-semibold); letter-spacing: -0.02em; margin: 0; } .nexus-h2 { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h2); line-height: var(--nexus-lh-h2); font-weight: var(--nexus-fw-semibold); letter-spacing: -0.01em; margin: 0; } .nexus-h3 { font-family: var(--nexus-font-heading); font-size: var(--nexus-fs-h3); line-height: var(--nexus-lh-h3); font-weight: var(--nexus-fw-semibold); margin: 0; } .nexus-section { font-size: var(--nexus-fs-section); line-height: var(--nexus-lh-section); font-weight: var(--nexus-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nexus-text-muted); } .nexus-label { font-size: var(--nexus-fs-label); font-weight: var(--nexus-fw-medium); color: var(--nexus-text-secondary); } .nexus-caption { font-size: var(--nexus-fs-caption); color: var(--nexus-text-muted); } .nexus-mono { font-family: var(--nexus-font-mono); font-size: 12px; } .nexus-num { font-variant-numeric: tabular-nums; text-align: right; } .nexus-kpi { font-size: var(--nexus-fs-kpi); line-height: var(--nexus-lh-kpi); font-weight: var(--nexus-fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* ---- the signature 2px active rail ------------------------ */ /* Put on nav items, selected grid rows and active tabs. */ .nexus-rail { position: relative; } .nexus-rail::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--nexus-rail-width); border-radius: 1px; background: var(--nexus-primary); } .nexus-tab-active { box-shadow: inset 0 calc(-1 * var(--nexus-rail-width)) 0 var(--nexus-primary); } /* ---- surfaces --------------------------------------------- */ .nexus-card { background: var(--nexus-surface); border: var(--nexus-border-width) solid var(--nexus-border); border-radius: var(--nexus-radius-lg); padding: var(--nexus-card-padding); } .nexus-card--flush { padding: 0; overflow: hidden; } /* ---- grid: horizontal hairlines only, no vertical borders -- */ .nexus-grid { --dxbl-grid-border-color: transparent; } .nexus-grid td { border-left: 0 !important; border-right: 0 !important; } .nexus-grid tr { border-bottom: var(--nexus-border-width) solid var(--nexus-border-subtle); } /* ---- status chip (custom Razor component) ----------------- */ .nexus-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--nexus-radius-pill); font-size: var(--nexus-fs-caption); font-weight: var(--nexus-fw-medium); white-space: nowrap; } .nexus-chip__mark { width: 7px; height: 7px; flex: 0 0 auto; } /* shape carries meaning as well as colour (colour-blind + print) */ .nexus-chip--success { background: var(--nexus-success-subtle); color: var(--nexus-success-text); } .nexus-chip--success .nexus-chip__mark { background: var(--nexus-success); border-radius: var(--nexus-radius-pill); } .nexus-chip--warning { background: var(--nexus-warning-subtle); color: var(--nexus-warning-text); } .nexus-chip--warning .nexus-chip__mark { background: var(--nexus-warning); transform: rotate(45deg); } .nexus-chip--error { background: var(--nexus-error-subtle); color: var(--nexus-error-text); } .nexus-chip--error .nexus-chip__mark { border: 2px solid var(--nexus-error); border-radius: var(--nexus-radius-pill); } .nexus-chip--neutral { background: var(--nexus-surface-alt); color: var(--nexus-text-secondary); } .nexus-chip--neutral .nexus-chip__mark { background: var(--nexus-slate-400); border-radius: var(--nexus-radius-pill); } .nexus-chip--auto { background: var(--nexus-accent-subtle); color: var(--nexus-accent-text-on-subtle, var(--nexus-accent-text)); } .nexus-chip--auto .nexus-chip__mark { background: var(--nexus-accent); border-radius: var(--nexus-radius-xs); } /* ---- inline alert ----------------------------------------- */ .nexus-alert { display: flex; gap: 10px; padding: 11px 13px; border: var(--nexus-border-width) solid var(--nexus-border); border-left: 3px solid var(--nexus-text-muted); border-radius: var(--nexus-radius-md); font-size: var(--nexus-fs-body-sm); line-height: 1.5; } .nexus-alert--success { background: var(--nexus-success-subtle); border-left-color: var(--nexus-success); color: var(--nexus-success-text); } .nexus-alert--warning { background: var(--nexus-warning-subtle); border-left-color: var(--nexus-warning); color: var(--nexus-warning-text); } .nexus-alert--error { background: var(--nexus-error-subtle); border-left-color: var(--nexus-error); color: var(--nexus-error-text); } .nexus-alert--info { background: var(--nexus-info-subtle); border-left-color: var(--nexus-info); color: var(--nexus-info-text); } /* ---- read-mode property editor (borderless) --------------- 26.1.3 has no --dxbl-editor-* family: every editor resolves from --dxbl-text-edit-*. Renamed accordingly (see the audit in docs/design/13-tema-blazor.md). */ .nexus-readonly-editor { --dxbl-text-edit-bg: transparent; --dxbl-text-edit-readonly-bg: transparent; --dxbl-text-edit-border-color: transparent; --dxbl-text-edit-border-hovered-color: transparent; --dxbl-text-edit-color: var(--nexus-text-secondary); } /* ---- focus: never removed --------------------------------- */ .nexus-focusable:focus-visible { outline: none; border-color: var(--nexus-focus-border); box-shadow: var(--nexus-focus-ring); } /* ---- wide-table safety ------------------------------------ */ .nexus-scroll-x { overflow-x: auto; } /* ---- motion ----------------------------------------------- Chi ha chiesto meno animazioni le perde tutte: transizioni e animazioni decorative si spengono in blocco, `!important` perche' devono vincere su qualunque foglio, compresi quelli di DevExpress. UNA eccezione, marcata a mano con `.nx-motion-keep` (2026-08-24): gli INDICATORI DI ATTIVITA'. Un'animazione che dice "sto lavorando" non e' decorazione — e' l'unico segnale che distingue un'attesa da un blocco, e spegnerla lascia a video una schermata che sembra piantata. E' il difetto trovato sui tre punti della chat, che avevano un fallback ridotto tutto loro (`nx-chat-dot-soft`) e non partiva mai: questa riga lo azzerava con `!important`, e il ramo reduced-motion di chat.css non si vedeva. Chi marca un elemento con `.nx-motion-keep` si assume l'onere di dargli un'animazione ridotta sotto `prefers-reduced-motion`: l'esenzione NON autorizza a tenere il movimento pieno. L'esenzione copre anche i discendenti (`.nx-motion-keep *`): si marca il contenitore, non i tre span. */ @media (prefers-reduced-motion: reduce) { *:not(.nx-motion-keep):not(.nx-motion-keep *) { transition: none !important; animation: none !important; } } /* ---- comandi delle superfici standalone -------------------- La forma UNICA dei pulsanti scritti a mano nei pannelli Blazor (dizionario ERP, viste ERP, listino, archivio documenti, editor condizioni, wizard). Prima ogni foglio si disegnava i suoi: rettangoli bordati da 1px alti 30px, accanto ai comandi veri della suite si vedeva che erano un'altra cosa (segnalato dall'utente il 2026-08-24 sulla barra del dizionario ERP). Regola del tema v2 (doc 13 par. 34): niente BORDO sui comandi, li tiene su l'ombra; altezza uguale a quella dei controlli DevExpress (38px), altrimenti la barra sembra montata a pezzi. Chi scrive un pannello nuovo usa .nx-cmd; gli alias qui sotto esistono per le superfici nate prima e NON si allungano: si converte il markup. */ .nx-cmd, .nx-erpdict__btn, .nx-erpviews__btn, .nx-price__btn, .nx-cond__btn, .dm-archive__btn, .nx-vwiz__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nexus-space-2); border: none; background: var(--nx-surface, var(--nexus-surface-elevated)); color: var(--nx-text, var(--nexus-text-primary)); border-radius: var(--nx-radius, var(--nexus-radius-md)); min-height: var(--nx-control-h, 38px); padding: 0 16px; cursor: pointer; font-size: var(--nexus-fs-body-sm); font-family: inherit; font-weight: var(--nexus-fw-semibold); white-space: nowrap; box-shadow: var(--nx-shadow-card, none); transition: box-shadow .12s ease-out, background-color .12s ease-out; } .nx-cmd:hover:not(:disabled), .nx-erpdict__btn:hover:not(:disabled), .nx-erpviews__btn:hover:not(:disabled), .nx-price__btn:hover:not(:disabled), .nx-cond__btn:hover:not(:disabled), .dm-archive__btn:hover:not(:disabled), .nx-vwiz__btn:hover:not(:disabled) { background: var(--nx-field, var(--nexus-surface-alt)); box-shadow: var(--nx-shadow-lift, none); } .nx-cmd:active:not(:disabled), .nx-erpdict__btn:active:not(:disabled), .nx-erpviews__btn:active:not(:disabled), .nx-price__btn:active:not(:disabled), .nx-cond__btn:active:not(:disabled), .dm-archive__btn:active:not(:disabled), .nx-vwiz__btn:active:not(:disabled) { box-shadow: var(--nx-shadow-card, none); } /* Il pulsante spento NON si vela (un primario al 50% sembra un difetto di stampa): si spegne come lo spegne DevExpress, superficie quieta e inchiostro tenue. */ .nx-cmd:disabled, .nx-erpdict__btn:disabled, .nx-erpviews__btn:disabled, .nx-price__btn:disabled, .nx-cond__btn:disabled, .dm-archive__btn:disabled, .nx-vwiz__btn:disabled { background: var(--nx-field, var(--nexus-surface-alt)); color: var(--nexus-text-muted); box-shadow: none; cursor: default; opacity: 1; } .nx-cmd:focus-visible, .nx-erpdict__btn:focus-visible, .nx-erpviews__btn:focus-visible, .nx-price__btn:focus-visible, .nx-cond__btn:focus-visible, .dm-archive__btn:focus-visible, .nx-vwiz__btn:focus-visible { outline: 2px solid var(--nexus-interactive); outline-offset: 1px; } .nx-cmd--primary, .nx-erpdict__btn--primary, .nx-erpviews__btn--primary, .nx-price__btn--primary, .nx-cond__btn--primary, .dm-archive__btn--primary, .nx-vwiz__btn--primary { background: var(--nx-teal, var(--nexus-primary)); color: var(--nx-navy-deep, var(--nexus-text-on-primary)); box-shadow: var(--nx-shadow-cta, none); } .nx-cmd--primary:hover:not(:disabled), .nx-erpdict__btn--primary:hover:not(:disabled), .nx-erpviews__btn--primary:hover:not(:disabled), .nx-price__btn--primary:hover:not(:disabled), .nx-cond__btn--primary:hover:not(:disabled), .dm-archive__btn--primary:hover:not(:disabled), .nx-vwiz__btn--primary:hover:not(:disabled) { background: var(--nx-teal-hover, var(--nexus-primary-hover)); box-shadow: var(--nx-shadow-cta, none); } /* Il comando SECONDARIO dichiarato (Indietro, Verifica): stessa forma del primario, gerarchia piu' bassa — ma resta un PULSANTE. Nato trasparente e a inchiostro tenue, era diventato invisibile: sul fondo chiaro della barra del wizard "Indietro" si leggeva come una didascalia, e chi collauda non capiva che si poteva premere (segnalato dall'utente il 2026-08-25 sul wizard dei tipi di documento). Il contorno torna, ma come OMBRA INTERNA: la regola del tema (par. 34: niente `border` sui comandi) resta rispettata e la geometria non si sposta di un pixel, quindi il secondario non e' mai piu' alto del primario che gli sta accanto. La gerarchia adesso la fa il riempimento — pieno teal il primario, contornato il secondario — non l'assenza del pulsante. */ .nx-cmd--quiet, .nx-cond__btn--quiet, .nx-vwiz__btn--quiet { background: var(--nx-surface, var(--nexus-surface-elevated)); box-shadow: inset 0 0 0 1px var(--nx-cmd-outline, var(--nexus-text-muted)); color: var(--nx-text, var(--nexus-text-primary)); } .nx-cmd--quiet:hover:not(:disabled), .nx-cond__btn--quiet:hover:not(:disabled), .nx-vwiz__btn--quiet:hover:not(:disabled) { background: var(--nx-field, var(--nexus-surface-alt)); box-shadow: inset 0 0 0 1px var(--nx-cmd-outline, var(--nexus-text-muted)); color: var(--nx-text, var(--nexus-text-primary)); } /* Variante compatta per le AZIONI DI RIGA: in una tabella il comando alto 38px raddoppia l'altezza della riga e l'elenco non si legge piu'. Stessa vernice, geometria ridotta. */ .nx-cmd--sm, .nx-erpdict__rowactions .nx-erpdict__btn, .nx-price__actions .nx-price__btn, .dm-archive__row .dm-archive__btn { min-height: 30px; padding: 0 12px; font-size: var(--nexus-fs-caption, .8rem); } /* Variante QUADRATA per i comandi che sono un solo simbolo (sposta su, sposta giu', togli nelle righe dei wizard): con la forma piena — 38px di altezza e 16px di padding — una freccia diventa un rettangolo largo il doppio del suo simbolo. Nata in wizard.css il 2026-09-18, promossa qui subito: l'altezza di un comando la decide un posto solo. */ .nx-cmd--icon, .nx-vwiz__btn--icon { width: 30px; min-width: 30px; min-height: 30px; padding: 0; justify-content: center; font-size: var(--nexus-fs-caption); color: var(--nexus-text-secondary); } /* Lo spento resta VISIBILE come pulsante (un contorno tenue), altrimenti "non si puo' spostare piu' su" si legge come "qui non c'e' niente". */ .nx-cmd--icon:disabled, .nx-vwiz__btn--icon:disabled { border: var(--nexus-border-width) solid var(--nexus-border-subtle); background: none; color: var(--nexus-text-muted); opacity: 0.6; } /* Il TONO dice che tipo di azione e' il comando (utente 2026-10-07, doc 13 par. 65). Fino a qui la vernice diceva solo l'IMPORTANZA — pieno teal il passo che avanza, contornato chi annulla, neutri tutti gli altri — e sul passo fallito del Progettista "Analizza l'errore", "Escludi dal piano" e "Ricostruisci" erano tre rettangoli grigi uguali per tre gesti opposti. L'importanza la dice ancora il riempimento; il tipo lo dice la tinta, tre toni soli, fondo tenue e inchiostro del tono: --ai blu degli agenti: il comando interpella il modello; --redo ambra: rifa' un lavoro e ne sostituisce il risultato; --danger rosso: toglie, esclude, ferma. Il primario resta l'unico pieno: un tono su un primario non si scrive. */ .nx-cmd--ai, .nx-vwiz__btn--ai { background: color-mix(in srgb, var(--nx-blue, var(--nexus-interactive)) 10%, var(--nx-surface, var(--nexus-surface-elevated))); color: var(--nx-blue-ink, var(--nexus-interactive)); } .nx-cmd--ai:hover:not(:disabled), .nx-vwiz__btn--ai:hover:not(:disabled) { background: color-mix(in srgb, var(--nx-blue, var(--nexus-interactive)) 18%, var(--nx-surface, var(--nexus-surface-elevated))); color: var(--nx-blue-ink, var(--nexus-interactive)); } .nx-cmd--redo, .nx-vwiz__btn--redo { background: var(--nx-warning-bg, var(--nexus-warning-subtle)); color: var(--nx-warning-ink, var(--nexus-warning-text)); } .nx-cmd--redo:hover:not(:disabled), .nx-vwiz__btn--redo:hover:not(:disabled) { background: color-mix(in srgb, var(--nx-warning, var(--nexus-warning)) 22%, var(--nx-surface, var(--nexus-surface-elevated))); color: var(--nx-warning-ink, var(--nexus-warning-text)); } .nx-cmd--danger, .nx-price__btn--danger, .nx-vwiz__btn--danger { background: var(--nx-error-bg, var(--nexus-error-subtle)); color: var(--nx-danger-ink, var(--nexus-error-text)); } .nx-cmd--danger:hover:not(:disabled), .nx-price__btn--danger:hover:not(:disabled), .nx-vwiz__btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--nx-error, var(--nexus-error)) 18%, var(--nx-surface, var(--nexus-surface-elevated))); color: var(--nx-danger-ink, var(--nexus-error-text)); } /* Le AZIONI DI RIGA e i comandi a simbolo si ripetono riga per riga: con il fondo tinto una colonna di "Rimuovi" diventa una striscia rossa che non distingue piu' niente. Li' il tono e' solo l'inchiostro, e il fondo arriva al passaggio. */ :is(.nx-cmd--sm, .nx-cmd--icon, .nx-vwiz__btn--icon):is(.nx-cmd--ai, .nx-cmd--redo, .nx-cmd--danger, .nx-vwiz__btn--ai, .nx-vwiz__btn--redo, .nx-vwiz__btn--danger):not(:hover):not(:disabled) { background: var(--nx-surface, var(--nexus-surface-elevated)); } /* I campi scritti a mano che stanno NELLA barra dei comandi pareggiano l'altezza dei pulsanti: un campo piu' alto del pulsante accanto e' il dettaglio che fa sembrare la pagina composta da due pagine. */ .nx-cmd-field, .nx-erpdict__search, .nx-erpviews__search, .nx-vwiz__search { min-height: var(--nx-control-h, 38px); box-sizing: border-box; } /* ------------------------------------------------------------------------- L'interruttore del tema (doc 38, richiesta dell'utente 2026-08-29) ------------------------------------------------------------------------- */ /* Un comando che si chiama "Tema scuro" non dice se il tema scuro e' acceso o se toccandolo lo si accende: sono due letture opposte della stessa riga. Un interruttore mostra lo STATO e lo cambia — una lettura sola. La stessa forma nel menu del portale e in quello del telefono, perche' e' la stessa preferenza della stessa persona. */ .nx-switch { flex: none; position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--nx-border-strong, #C3D3E3); transition: background-color .15s ease; } .nx-switch__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgb(11 31 58 / .3); transition: transform .15s ease; } .nx-switch--on { background: var(--nx-teal, #1CCFC9); } .nx-switch--on .nx-switch__knob { transform: translateX(16px); } /* La riga che porta un interruttore: l'etichetta a sinistra, lo stato a destra, dove l'occhio lo cerca. */ .nx-account__item--switch, .nx-mmenu__item--switch { display: flex; align-items: center; gap: 10px; } .nx-account__item--switch > span:nth-child(2), .nx-mmenu__item--switch > span:first-child { flex: 1; } @media (prefers-reduced-motion: reduce) { .nx-switch, .nx-switch__knob { transition: none; } } /* ------------------------------------------------------------------------- La forma UNICA delle tendine scritte a mano (2026-09-18) ------------------------------------------------------------------------- Un