/* --------------------------------------------------------------------------- Stili del kit di interfaccia. Vivono qui e non nell'host perche' sono la controparte dei componenti del kit: una pagina di modulo che usa jt3-page e Jt3Grid deve venire impaginata allo stesso modo in qualunque host la si carichi. L'host li include come asset statico del pacchetto (_content/Jt3.Ui.Kit/jt3-kit.css). Le classi erano usate dalle pagine da settimane senza che nessuno le avesse definite: le griglie si vedevano perche' DevExpress porta il proprio stile, tutto il resto — filtri, pulsanti, schede — era testo nudo. --------------------------------------------------------------------------- */ .jt3-page { display: flex; flex-direction: column; gap: 1rem; } /* --- filtri e comandi --- */ .jt3-filters { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .6rem .85rem; } .jt3-input { font: inherit; font-size: .9rem; padding: .35rem .55rem; border: 1px solid var(--jt-border-strong); border-radius: 4px; background: var(--jt-surface); color: var(--jt-text); min-width: 12rem; } .jt3-input:focus { outline: 2px solid var(--jt-accent-border); outline-offset: -1px; border-color: var(--jt-accent); } /* Variante su una riga sola. Dove i filtri sono tanti, andare a capo sposta i pulsanti sotto ai campi e la barra cambia altezza a ogni filtro aperto: chi cerca "Filtra" lo trova ogni volta in un punto diverso. Qui restano in fila, i campi si stringono fino a 8rem e, quando proprio non ci stanno, e' la barra a scorrere in orizzontale — la pagina no, che e' la differenza fra una riga scomoda e un impaginato rotto. Il conteggio resta a destra e non si spezza in due righe. */ .jt3-filters-inline { flex-wrap: nowrap; overflow-x: auto; } /* Per difetto niente si stringe: un pulsante che si restringe taglia la propria etichetta, ed e' peggio di una barra che scorre. */ .jt3-filters-inline > * { flex: 0 0 auto; } /* I campi si', fino a 8rem: sono loro ad avere spazio da cedere. */ .jt3-filters-inline .jt3-input, .jt3-filters-inline .jt3-lookup { flex: 0 1 auto; min-width: 8rem; } .jt3-filters-inline .jt3-count { white-space: nowrap; padding-left: .5rem; } /* Un campo di una barra di filtri che va a capo. Gli editor DevExpress sono larghi quanto il contenitore: messi direttamente in una riga flessibile che va a capo, ognuno prende tutta la riga e la barra diventa una colonna alta mezza pagina. Il contenitore da' loro una larghezza, e la barra torna a essere una riga che si spezza solo quando lo spazio finisce. */ .jt3-filter-field { flex: 0 0 13rem; max-width: 100%; } .jt3-filter-field.jt3-filter-date { flex-basis: 9.5rem; } .jt3-filter-field.jt3-filter-wide { flex-basis: 18rem; } /* L'etichetta sopra e il campo largo quanto il contenitore. Senza, l'etichetta stava accanto al campo quando ci stava e sopra quando no: nella stessa barra un filtro largo e uno stretto uscivano impaginati in due modi diversi. */ .jt3-filter-field > label { display: block; font-size: .8rem; color: var(--jt-text-3); margin-bottom: .2rem; } .jt3-filter-field > select, .jt3-filter-field > input { width: 100%; min-width: 0; box-sizing: border-box; } .jt3-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--jt-text-2); } .jt3-check input { accent-color: var(--jt-accent); } .jt3-count { margin-left: auto; font-size: .85rem; color: var(--jt-text-muted); } .jt3-btn { font: inherit; font-size: .875rem; padding: .35rem .8rem; cursor: pointer; border: 1px solid var(--jt-border-strong); border-radius: 4px; background: var(--jt-surface); color: var(--jt-text); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .jt3-btn:hover:not(:disabled) { background: var(--jt-surface-2); } .jt3-btn:disabled { opacity: .5; cursor: default; } .jt3-btn-primary { background: var(--jt-accent); border-color: var(--jt-accent); color: var(--jt-on-accent); } .jt3-btn-primary:hover:not(:disabled) { background: var(--jt-accent-hover); } .jt3-alert { background: var(--jt-danger-soft); border: 1px solid var(--jt-danger-border); color: var(--jt-danger-text); border-radius: 4px; padding: .6rem .85rem; font-size: .9rem; } .jt3-card { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: 1rem 1.25rem; } .jt3-link { color: var(--jt-accent); } /* Usate da pagine di modulo da settimane senza essere mai state definite: si vedevano solo perche' il testo nudo e' comunque leggibile, non perche' fosse lo stile giusto. */ .jt3-error { background: var(--jt-danger-soft); border: 1px solid var(--jt-danger-border); color: var(--jt-danger-text); border-radius: 4px; padding: .6rem .85rem; font-size: .9rem; margin: 0; } /* Esito riuscito di un comando: stessa forma di .jt3-error, colore opposto. Serve dove l'operazione non cambia visibilmente l'elenco e senza un messaggio sembrerebbe non aver fatto nulla. */ .jt3-notice { background: var(--jt-success-soft); border: 1px solid var(--jt-success-border); color: var(--jt-success-text); border-radius: 4px; padding: .6rem .85rem; font-size: .9rem; margin: 0; } .jt3-empty { color: var(--jt-text-muted); font-size: .9rem; font-style: italic; } .jt3-warning { color: var(--jt-warning-strong); font-size: .85rem; } /* Un valore calcolato dentro una maschera: si legge, non si scrive. Ha il peso di un campo compilato e non quello di un titolo, altrimenti in mezzo agli editor sembra un'intestazione di sezione. */ .jt3-readonly-text { margin: 0; font-size: .9rem; color: var(--jt-text); } /* La riga sotto un campo che spiega cosa significa il valore appena scelto — la definizione di un gradino di scala, l'unita' di misura attesa. Piccola e spenta di proposito: deve stare sotto trenta campi senza rumore. */ .jt3-field-hint { margin: .25rem 0 0; font-size: .8rem; color: var(--jt-text-muted); line-height: 1.35; } .jt3-amount { text-align: right; font-variant-numeric: tabular-nums; } .jt3-actions { display: flex; gap: .5rem; margin-top: .5rem; } /* --- forma modale (creazione e modifica) ------------------------------------ Una sola forma per le due operazioni: il titolo e i valori precompilati li decide la pagina, non questo foglio. I campi si dispongono a griglia responsive perche' un'anagrafica con trenta campi in una colonna sola costringe a scorrere per compilare quattro caratteri. --------------------------------------------------------------------------- */ .jt3-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem 1rem; } .jt3-form-field { display: flex; flex-direction: column; gap: .25rem; } .jt3-form-field label { font-size: .78rem; color: var(--jt-text-muted); } .jt3-form-field.jt3-form-wide { grid-column: 1 / -1; } /* Jt3FormLayout (DxFormLayout) gestisce da solo le proprie colonne interne responsive: dentro .jt3-form resta un unico elemento della griglia, e senza questa regola auto-fill lo mette in una sola colonna da minmax(220px, 1fr) — l'intera scheda si schiaccia in ~220px e i campi appaiono tagliati, qualunque sia la larghezza della Jt3FormModal che la contiene. */ .jt3-form > .jt3-form-layout { grid-column: 1 / -1; width: 100%; } /* Stessa ragione per Jt3Tabs dentro una Jt3FormModal (la licenza in /licensing/licenses): senza, le schede finivano in una colonna da 220px e i campi del DxFormLayout interno si sovrapponevano alle etichette. */ .jt3-form > .jt3-tabs { grid-column: 1 / -1; width: 100%; min-width: 0; } .jt3-form-actions { display: flex; gap: .5rem; justify-content: flex-end; width: 100%; } /* --- barra che resta in cima mentre il contenuto scorre --------------------- Serve dove la scelta che governa la pagina sta sopra un elenco lungo: in /admin/permissions il ruolo si sceglie una volta e poi si scorrono quarantasei risorse, e per cambiarlo — o per ricordarsi quale si stava modificando — bisognava risalire fino in cima. Lo scorrimento vero e' di .jt-main nell'host, che ha un padding di 1.5rem/2rem. Da li' vengono i tre valori che sembrano arbitrari: il margine negativo allarga la barra fino ai bordi della colonna, il padding rimette il contenuto dov'era, e top: -1.5rem la fa fermare a filo del riquadro invece che sotto la fascia di padding — dove si vedeva scorrere l'ultima riga passata sopra. */ .jt3-sticky-top { position: sticky; top: -1.5rem; z-index: 20; background: var(--jt-bg); margin: -1.5rem -2rem 0; padding: 1.5rem 2rem .75rem; border-bottom: 1px solid var(--jt-border); } /* --- breadcrumb (Jt3Breadcrumb) --------------------------------------------- Ogni livello tranne l'ultimo e' un collegamento: e' il "torna al livello precedente" richiesto, non un pulsante indietro a parte. */ .jt3-breadcrumb { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .85rem; color: var(--jt-text-muted); margin-bottom: .25rem; } .jt3-breadcrumb-link { color: var(--jt-accent); text-decoration: none; } .jt3-breadcrumb-link:hover { text-decoration: underline; } .jt3-breadcrumb-sep { color: var(--jt-border-strong); } .jt3-breadcrumb-current { color: var(--jt-text-2); font-weight: 600; } /* --- intestazione di filtro configurabile (Jt3FilterBar) -------------------- Stessa forma di .jt3-filters: e' l'intestazione che le pagine di elenco componevano a mano, qui diventa un componente che ricorda la scelta per utente. */ .jt3-filterbar { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .6rem .85rem; } .jt3-filterbar-field { display: flex; flex-direction: column; gap: .2rem; } .jt3-filterbar-field label { font-size: .78rem; color: var(--jt-text-muted); } .jt3-filterbar-count { margin-left: auto; align-self: center; } /* Con il conteggio in mezzo il pulsante non spinge piu' da solo a destra: e' il conteggio a prendersi lo spazio, e il pulsante lo segue. */ .jt3-filterbar-count + .jt3-filterbar-config { margin-left: .75rem; } .jt3-filterbar-config { margin-left: auto; align-self: center; } /* --- lookup di selezione (Jt3Lookup) ---------------------------------------- Il testo che il combo filtra e' "codice - descrizione" insieme: le due parti si distinguono solo nello stile, non nel campo che DevExpress usa per cercare. --------------------------------------------------------- */ /* Il contenitore del lookup esiste solo per intercettare l'evento 'input' che risale dal campo di DevExpress: display:contents lo toglie dal flusso, cosi' il DxComboBox resta figlio diretto del flex di .jt3-filters e la barra non cambia disposizione. */ .jt3-lookup-host { display: contents; } .jt3-lookup { min-width: 12rem; } .jt3-lookup-code { font-weight: 600; margin-right: .4rem; } .jt3-lookup-desc { color: var(--jt-text-muted); } /* --- griglia e tabelle --- */ .jt3-grid { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; overflow: hidden; } .jt3-grid-toolbar { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-bottom: 1px solid var(--jt-border); background: var(--jt-bg); } .jt3-grid-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .45rem .85rem; border-bottom: 1px solid var(--jt-border); background: var(--jt-bg); } .jt3-grid-title { font-weight: 600; font-size: .95rem; } /* I comandi vanno a capo invece di allargare la barra oltre la pagina: su uno schermo stretto l'ultimo pulsante finiva fuori, raggiungibile solo scorrendo. */ .jt3-grid-toolbar { flex-wrap: wrap; } .jt3-grid-commands { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; } .jt3-grid-empty { margin: 0; padding: .85rem; color: var(--jt-text-muted); font-size: .9rem; } .jt3-table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--jt-surface); } .jt3-table th, .jt3-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--jt-border-subtle); } .jt3-table th { color: var(--jt-text-muted); font-weight: 500; background: var(--jt-bg); } /* Jt3EditableGrid: le righe di un master-detail (documento, preventivo...), modificabili sul posto. Larghezza piena come .jt3-table, di cui e' la controparte modificabile. */ .jt3-linegrid { width: 100%; margin-bottom: .5rem; } /* --- matrice di validazione ore (HoursValidationList) ----------------------- Stessa tavolozza di .jt3-alert per le celle sotto obiettivo: e' lo stesso segnale di attenzione, qui applicato cella per cella invece che a un messaggio intero. Il weekend usa lo stesso grigio dei bordi della tabella, solo piu' pieno, per restare un'informazione di sfondo e non un allarme. */ .jt3-table-scroll { overflow-x: auto; } .jt3-hours-table td, .jt3-hours-table th { text-align: right; white-space: nowrap; } .jt3-hours-table td:first-child, .jt3-hours-table td:nth-child(2), .jt3-hours-table th:first-child, .jt3-hours-table th:nth-child(2) { text-align: left; } .jt3-hours-weekend { background: var(--jt-surface-2); color: var(--jt-text-muted); } .jt3-hours-missing { background: var(--jt-danger-border); color: var(--jt-danger-text); } .jt3-hours-short { background: var(--jt-danger-soft); color: var(--jt-danger-text); } /* --- schede (Jt3Tabs) ------------------------------------------------------- L'anagrafica di un partner ha sei aree e novanta campi: su una pagina sola nessuno arriva in fondo. La scheda non attiva si nasconde e non si smonta — dentro c'e' un modulo con dei campi legati, e distruggerlo al cambio di scheda butterebbe via quello che l'utente ha appena scritto. --------------------------------------------------------------------------- */ .jt3-tabs { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; } .jt3-tabstrip { display: flex; gap: .15rem; padding: 0 .5rem; overflow-x: auto; border-bottom: 1px solid var(--jt-border); background: var(--jt-bg); border-radius: 6px 6px 0 0; } .jt3-tab { flex: 0 0 auto; padding: .55rem .85rem; border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: .875rem; color: var(--jt-text-muted); white-space: nowrap; } .jt3-tab:hover:not(:disabled) { color: var(--jt-text-2); } .jt3-tab:disabled { opacity: .45; cursor: default; } .jt3-tab-active { color: var(--jt-accent-hover); border-bottom-color: var(--jt-accent); font-weight: 600; } .jt3-tab-badge { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: .75rem; background: var(--jt-surface-3); color: var(--jt-text-2); font-size: .7rem; } .jt3-tab-active .jt3-tab-badge { background: var(--jt-accent-soft-2); color: var(--jt-accent-hover); } .jt3-tabpanels { padding: 1rem; } .jt3-tabpanel[hidden] { display: none; } /* --- intestazione di una scheda anagrafica ---------------------------------- Codice e denominazione in alto, i ruoli accanto: quello che serve sapere per capire su quale record si sta lavorando, senza scorrere. --------------------------------------------------------------------------- */ .jt3-record-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding: .25rem 0; } .jt3-record-title { margin: 0; font-size: 1.15rem; font-weight: 600; } .jt3-record-roles { display: inline-flex; flex-wrap: wrap; gap: .3rem; } .jt3-record-actions { display: flex; gap: .5rem; margin-left: auto; } .jt3-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; } .jt3-fieldset > legend { padding: 0; margin-bottom: .5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--jt-text-muted); } /* --- elenco di avvisi ------------------------------------------------------- Una notifica non e' una riga di griglia: si legge, non si filtra. Titolo, testo e azioni impilati, e la non letta si distingue a colpo d'occhio — una casella in cui letto e non letto si somigliano e' una casella che si smette di guardare. --------------------------------------------------------------------------- */ .jt3-section-title { margin: 1.25rem 0 .5rem; font-size: 1rem; font-weight: 600; } .jt3-hint { margin: .5rem 0; color: var(--jt-text-muted); font-size: .875rem; } .jt3-muted { color: var(--jt-text-muted); font-size: .8rem; } .jt3-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; } .jt3-readonly { display: inline-block; padding: .25rem 0; color: var(--jt-text-2); font-weight: 600; } /* Passi di una procedura guidata: dove si e', cosa e' gia' fatto, cosa manca. Sono voci di un elenco e non pulsanti apposta — non ci si salta dentro, si avanza e si torna con i due comandi in fondo alla pagina. */ .jt3-steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 .75rem; padding: 0; } .jt3-step { padding: .25rem .75rem; border-radius: 1rem; background: var(--jt-surface-2); color: var(--jt-text-muted); font-size: .8rem; } .jt3-step-current { background: var(--jt-accent-alt-soft); color: var(--jt-accent-alt); font-weight: 600; } .jt3-step-done { background: var(--jt-success-soft); color: var(--jt-success-text); } .jt3-badge { display: inline-block; padding: .05rem .4rem; border-radius: .75rem; background: var(--jt-accent-alt-soft); color: var(--jt-accent-alt); font-size: .75rem; } .jt3-list { list-style: none; margin: 0; padding: 0; } .jt3-list-item { padding: .7rem .85rem; border: 1px solid var(--jt-border); border-radius: .35rem; background: var(--jt-surface); margin-bottom: .5rem; } .jt3-list-item.jt3-unread { border-left: 3px solid var(--jt-accent-alt); background: var(--jt-bg); } .jt3-list-head { display: flex; align-items: center; gap: .5rem; } .jt3-list-head .jt3-muted { margin-left: auto; } .jt3-list-body { margin: .35rem 0 .5rem; font-size: .875rem; color: var(--jt-text-2); } .jt3-list-actions { display: flex; gap: .5rem; } .jt3-form-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .jt3-form-row .jt3-input { flex: 1 1 auto; } /* --- foglio di stampa ------------------------------------------------------- Misure in millimetri: e' un foglio, non una pagina web. A schermo si vede com'e' impaginato, e cio' che si vede e' cio' che esce dalla stampante. --------------------------------------------------------------------------- */ .jt3-print-page { background: var(--jt-surface-3); min-height: 100vh; padding: 1.5rem; } .jt3-print-toolbar { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; } .jt3-sheet { width: 210mm; min-height: 297mm; box-sizing: border-box; margin: 0 auto; padding: 18mm 16mm; background: #fff; color: #111827; font-family: system-ui, sans-serif; font-size: 10pt; line-height: 1.35; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } .jt3-sheet-head { display: flex; justify-content: space-between; gap: 12mm; margin-bottom: 10mm; } .jt3-issuer { max-width: 85mm; } .jt3-recipient { max-width: 85mm; } .jt3-recipient-label { color: #6b7280; font-size: 9pt; } .jt3-sheet-title { font-size: 13pt; margin: 0 0 4mm; } .jt3-sheet-ref { margin: 0 0 6mm; color: #374151; } .jt3-sheet-lines { width: 100%; border-collapse: collapse; margin-bottom: 8mm; } .jt3-sheet-lines th { text-align: left; font-weight: 600; font-size: 9pt; border-bottom: .6pt solid #111827; padding: 1.5mm 2mm; } .jt3-sheet-lines td { padding: 1.5mm 2mm; border-bottom: .3pt solid #e5e7eb; vertical-align: top; } .jt3-col-row { width: 10mm; } .jt3-col-code { width: 26mm; } .jt3-col-qty { width: 22mm; text-align: right; } .jt3-col-um { width: 12mm; } .jt3-col-money { width: 26mm; text-align: right; } .jt3-sheet-lines td.jt3-col-qty, .jt3-sheet-lines td.jt3-col-money { text-align: right; font-variant-numeric: tabular-nums; } .jt3-sheet-totals { margin-left: auto; border-collapse: collapse; min-width: 70mm; } .jt3-sheet-totals th { text-align: left; font-weight: 500; padding: 1mm 3mm; color: #374151; } .jt3-sheet-totals td { text-align: right; padding: 1mm 3mm; font-variant-numeric: tabular-nums; } .jt3-sheet-totals .jt3-total th, .jt3-sheet-totals .jt3-total td { font-weight: 700; border-top: .6pt solid #111827; } .jt3-sheet-notes { margin-top: 8mm; color: #374151; white-space: pre-wrap; } /* Registri del sistema di gestione: intestazione con il controllo del documento, sezioni con titolo, testo che conserva gli a capo di chi l'ha scritto, e le righe di firma in fondo. */ .jt3-sheet-control { width: 100%; border-collapse: collapse; margin-bottom: 6mm; font-size: 9pt; } .jt3-sheet-control th, .jt3-sheet-control td { border: .3pt solid #9ca3af; padding: 1mm 2mm; text-align: left; } .jt3-sheet-control th { font-weight: 600; background: #f3f4f6; width: 32mm; } .jt3-sheet-section { margin: 5mm 0 2mm; font-size: 11pt; border-bottom: .6pt solid #111827; } .jt3-sheet-text { white-space: pre-wrap; margin: 0 0 3mm; } .jt3-sheet-empty { color: #9ca3af; font-style: italic; margin: 0 0 3mm; } .jt3-sheet-lines tr { break-inside: avoid; } .jt3-sheet-signatures { display: flex; gap: 10mm; margin-top: 12mm; break-inside: avoid; } .jt3-sheet-signatures > div { flex: 1 1 0; border-top: .6pt solid #111827; padding-top: 1.5mm; font-size: 9pt; } .jt3-sheet-signatures .jt3-signed { font-weight: 600; } @media print { /* In stampa resta solo il foglio: niente sfondo, niente ombra, niente pulsanti. La pagina e' gia' A4, quindi non si riscala nulla. */ .jt3-print-page { background: #fff; padding: 0; } .jt3-print-toolbar { display: none; } .jt3-sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; } @page { size: A4; margin: 15mm; } } /* Avviso di record bloccato da un altro utente. Sta in cima alla maschera e non accanto al pulsante di salvataggio: chi apre un documento occupato deve saperlo prima di scrivere, non quando prova a salvare. */ .jt3-lock-banner { display: block; } /* --- terminale di reparto --------------------------------------------------- Misure volutamente fuori scala rispetto al resto del kit: questa non e' una schermata da scrivania. Si usa in piedi, a un metro di distanza, con i guanti e su uno schermo capacitivo che non distingue due bersagli vicini — quindi tasti da 4rem, testo grande e niente di cliccabile piccolo. Vive qui e non nella pagina perche' la stessa tavolozza serve al tastierino, al cronometro e ai pannelli, che sono componenti diversi. --------------------------------------------------------------------------- */ .jt3-terminal { display: flex; flex-direction: column; gap: 1rem; font-size: 1.05rem; } .jt3-terminal-bar { display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem; border-radius: .4rem; background: #111827; color: #f9fafb; } .jt3-terminal-who { font-size: 1.35rem; font-weight: 600; } .jt3-terminal-bar .jt3-btn { margin-left: auto; } .jt3-terminal-clock { font-size: 1.05rem; color: var(--jt-text-subtle); } .jt3-terminal-login .jt3-terminal-clock, .jt3-terminal > .jt3-terminal-clock { color: var(--jt-text-3); text-align: center; } .jt3-terminal-login { max-width: 22rem; margin: 2rem auto; padding: 1.5rem; border: 1px solid var(--jt-border); border-radius: .5rem; background: var(--jt-surface); text-align: center; } .jt3-terminal-login h2 { margin: 0 0 1rem; font-size: 1.2rem; } .jt3-pin-display { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1rem; } .jt3-pin-digit { font-size: 2rem; line-height: 1; color: var(--jt-border-strong); } .jt3-pin-digit.jt3-pin-filled { color: var(--jt-accent); } .jt3-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .jt3-key { height: 4rem; font-size: 1.6rem; cursor: pointer; border: 1px solid var(--jt-border-strong); border-radius: .4rem; background: var(--jt-surface); color: var(--jt-text); } .jt3-key:hover:not(:disabled) { background: var(--jt-surface-2); } .jt3-key:disabled { opacity: .4; cursor: default; } .jt3-key-clear { color: var(--jt-danger-strong); } .jt3-key-enter { background: var(--jt-accent); border-color: var(--jt-accent); color: var(--jt-on-accent); } .jt3-key-enter:hover:not(:disabled) { background: var(--jt-accent-hover); } .jt3-btn-big { min-height: 3.2rem; min-width: 11rem; font-size: 1.1rem; } .jt3-btn-danger { border-color: var(--jt-danger-strong); color: var(--jt-danger-strong); } .jt3-btn-danger:hover:not(:disabled) { background: var(--jt-danger-soft); } .jt3-terminal-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; } .jt3-terminal-running { border-left: 4px solid var(--jt-accent); } .jt3-terminal-running-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; } /* Il cronometro e' il motivo per cui l'operatore alza lo sguardo: deve leggersi da lontano senza cercarlo. */ .jt3-terminal-elapsed { font-size: 2.6rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--jt-text); } .jt3-terminal-subject { font-size: 1.2rem; margin: 0 0 .75rem; } .jt3-terminal-subject .jt3-badge { margin-left: .5rem; } .jt3-terminal-table { width: 100%; border-collapse: collapse; margin: .5rem 0; } .jt3-terminal-table th { text-align: left; font-size: .85rem; color: var(--jt-text-muted); font-weight: 600; border-bottom: 1px solid var(--jt-border); padding: .4rem .5rem; } .jt3-terminal-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--jt-border-subtle); } .jt3-terminal-table tfoot td { font-weight: 600; border-top: 1px solid var(--jt-border); border-bottom: none; } .jt3-terminal-pick tbody tr { cursor: pointer; } .jt3-terminal-pick tbody tr:hover { background: var(--jt-bg); } .jt3-terminal-picked, .jt3-terminal-pick tbody tr.jt3-terminal-picked:hover { background: var(--jt-accent-soft-2); } /* I semilavorati si distinguono dagli ingredienti a colpo d'occhio: sono fasi da eseguire, non materiale da prendere dallo scaffale. */ .jt3-terminal-phase td { background: var(--jt-accent-alt-soft); font-weight: 600; } .jt3-tabbar { display: flex; gap: .5rem; margin-bottom: .75rem; } .jt3-key-tab { padding: .55rem 1.1rem; font-size: 1rem; cursor: pointer; border: 1px solid var(--jt-border-strong); border-radius: .35rem; background: var(--jt-surface); color: var(--jt-text-2); } .jt3-key-tab-active { background: var(--jt-accent); border-color: var(--jt-accent); color: var(--jt-on-accent); } .jt3-terminal-instructions { white-space: pre-wrap; font-size: 1.05rem; line-height: 1.5; } /* Riepilogo del monitor di reparto: quattro numeri sopra la griglia, perche' la domanda che ci si fa aprendo la pagina e' "quanto e' stato fatto", e la risposta non deve richiedere di raggruppare una colonna. */ .jt3-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .95rem; } /* --- barra dei layout di griglia -------------------------------------------- Vive dentro la barra comandi della griglia, a destra dei pulsanti: e' una scelta di vista, non un comando sui dati, e mescolarla a "Nuovo" ed "Elimina" la farebbe premere per sbaglio. --------------------------------------------------------------------------- */ .jt3-layoutbar { display: inline-flex; align-items: center; gap: .4rem; margin-left: .35rem; } .jt3-layoutbar::before { content: ""; align-self: stretch; width: 1px; background: var(--jt-surface-3); margin-right: .15rem; } .jt3-layout-select { max-width: 16rem; padding: .3rem .5rem; font-size: .85rem; border: 1px solid var(--jt-border-strong); border-radius: .3rem; background: var(--jt-surface); color: var(--jt-text); } .jt3-layout-select:focus { outline: 2px solid var(--jt-accent-border); outline-offset: -1px; border-color: var(--jt-accent); } /* --- pannelli affiancati e alberi ------------------------------------------ Un'anagrafica annidata (le categorie dei cespiti) si naviga per rami e si modifica per righe: l'albero a sinistra sceglie il ramo, la griglia a destra mostra cosa c'e' dentro. L'albero e' markup normale e non un componente di terze parti — sono un elenco e dei pulsanti, la stessa scelta gia' fatta per Jt3Tabs e per il cruscotto di copertura. --------------------------------------------------------------------------- */ .jt3-split { display: flex; gap: 1rem; align-items: flex-start; } .jt3-split-aside { flex: 0 0 17rem; max-height: 34rem; overflow: auto; background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .6rem; } .jt3-split-main { flex: 1 1 auto; min-width: 0; } .jt3-tree, .jt3-tree ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; } .jt3-tree ul { padding-left: 1rem; } .jt3-tree-row { display: flex; align-items: center; gap: .25rem; border-radius: 4px; padding: .1rem .2rem; } .jt3-tree-row:hover { background: var(--jt-surface-2); } .jt3-tree-selected { background: var(--jt-accent-soft-2); } .jt3-tree-selected .jt3-tree-label { color: var(--jt-accent-hover); font-weight: 600; } .jt3-tree-toggle { flex: 0 0 1.1rem; border: 0; background: none; cursor: pointer; color: var(--jt-text-muted); font-size: .7rem; line-height: 1; padding: .2rem 0; } .jt3-tree-label { flex: 1 1 auto; border: 0; background: none; cursor: pointer; padding: .15rem 0; font: inherit; color: var(--jt-text-2); text-align: left; } .jt3-tree-count { color: var(--jt-text-subtle); font-size: .75rem; } /* --- cartellini di indicatore (cruscotto di continuita') -------------------- Rispondono a colpo d'occhio: chi e' fuori obiettivo, adesso. La tabella accanto risponde di quanto — sono due domande, e la seconda si fa solo dopo che la prima ha trovato qualcosa. --------------------------------------------------------------------------- */ .jt3-kpi-cards { display: grid; gap: .6rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .jt3-kpi-card { border: 1px solid var(--jt-border); border-radius: 6px; padding: .55rem .7rem; background: var(--jt-surface); font-size: .85rem; } .jt3-kpi-card header { display: flex; align-items: center; gap: .4rem; } .jt3-kpi-breached { border-color: var(--jt-danger); background: var(--jt-danger-soft); } .jt3-kpi-dot { width: .6rem; height: .6rem; border-radius: 2px; flex: 0 0 auto; } .jt3-kpi-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0; } .jt3-badge-good { background: var(--jt-success-soft); color: var(--jt-success-text); } .jt3-badge-bad { background: var(--jt-danger-soft); color: var(--jt-danger-text); } .jt3-badge-warn { background: var(--jt-warning-soft); color: var(--jt-warning-text); } /* Filtri rapidi: una fila di pulsanti-etichetta con il conteggio accanto. Il conteggio sta dentro il pulsante perche' e' la risposta al filtro che quel pulsante rappresenta, e un elenco che tace di aver filtrato si scambia per un elenco a cui mancano dei dati. */ .jt3-chips { display: inline-flex; flex-wrap: nowrap; gap: .3rem; align-items: center; } /* In un contenitore a blocco i filtri rapidi vanno a capo invece di allargare la barra. */ div.jt3-chips { display: flex; flex-wrap: wrap; } .jt3-chip { border: 1px solid var(--jt-border-strong); background: var(--jt-surface); color: var(--jt-text-2); border-radius: 1rem; padding: .15rem .6rem; font-size: .8rem; cursor: pointer; line-height: 1.4; white-space: nowrap; } .jt3-chip:hover { background: var(--jt-surface-2); } .jt3-chip-active { background: var(--jt-accent-alt); border-color: var(--jt-accent-alt); color: var(--jt-on-accent); } .jt3-chip-count { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: .6rem; background: rgba(0,0,0,.08); font-size: .72rem; } .jt3-chip-active .jt3-chip-count { background: rgba(255,255,255,.25); } /* Il calendario del kit: sta in un riquadro come le griglie, e non sfonda la pagina in larghezza quando le corsie sono tante. */ .jt3-scheduler { overflow-x: auto; } /* --- grafo della topologia -------------------------------------------------- Un albero disegnato, non una tela libera: i nodi si aprono e si selezionano, e il puntatore deve dirlo prima del clic. Il riquadro scorre in orizzontale quando lo zoom allarga il disegno — allargare il viewBox invece del riquadro rimpicciolirebbe le etichette fino a renderle illeggibili. --------------------------------------------------------------------------- */ /* Il riquadro del grafo ha un'altezza fissa e il disegno ci si muove dentro. Con overflow: auto il riquadro cresceva col disegno, e aprire uno switch da cinquantadue porte allungava la pagina di due metri; touch-action: none serve al trascinamento, o su un portatile col touchpad il gesto lo mangia lo scorrimento della pagina. */ .jt3-graph { position: relative; overflow: hidden; background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 0 0 6px 6px; height: 62vh; min-height: 320px; touch-action: none; user-select: none; cursor: grab; } .jt3-graph.jt3-graph-dragging { cursor: grabbing; } .jt3-graph-svg { display: block; width: 100%; height: 100%; } .jt3-graph-node { cursor: pointer; } .jt3-graph-node:hover rect { filter: brightness(.97); } .jt3-graph-toggle { cursor: pointer; } .jt3-graph-zoom { min-width: 3.5rem; display: inline-block; text-align: center; } /* --------------------------------------------------------------------------- Ticket: messaggi importati e allegati --------------------------------------------------------------------------- */ /* Il corpo di un messaggio arriva da fuori e porta la formattazione di chi lo ha scritto: una tabella incollata da Excel, un'immagine larga duemila pixel, una firma con il logo. max-width: 100% le costringe dentro la colonna — senza, la pagina intera si allarga e compare una barra di scorrimento orizzontale su tutto il sito, non solo sul messaggio. */ .jt-message-body { margin: .35rem 0 0; overflow-x: auto; } .jt-message-body img { max-width: 100%; height: auto; } .jt-message-body table { border-collapse: collapse; max-width: 100%; } .jt-message-body td, .jt-message-body th { padding: .15rem .35rem; } .jt-message-body blockquote { margin: .4rem 0; padding-left: .6rem; border-left: 3px solid var(--jt-border); color: var(--jt-text-3); } /* Il thread di un ticket come una chat: il cliente a sinistra, l'assistenza a destra, ciascuno nel suo fumetto. La coda del fumetto e' un triangolo fatto con i bordi, dalla parte di chi parla. Le note interne restano a destra ma gialle: e' quello che il cliente non ha mai letto, e deve saltare all'occhio. */ .jt-chat { display: flex; flex-direction: column; gap: .6rem; } .jt-chat-row { display: flex; } .jt-chat-in { justify-content: flex-start; } .jt-chat-out { justify-content: flex-end; } .jt-chat-bubble { position: relative; max-width: 78%; min-width: 12rem; padding: .55rem .8rem; border-radius: .9rem; border: 1px solid var(--jt-border); overflow-wrap: anywhere; } .jt-chat-in .jt-chat-bubble { background: var(--jt-surface-2); border-bottom-left-radius: .2rem; } .jt-chat-out .jt-chat-bubble { background: var(--jt-accent-soft); border-color: var(--jt-accent-border); border-bottom-right-radius: .2rem; } .jt-chat-out .jt-chat-bubble.jt-chat-internal { background: var(--jt-warning-soft); border-color: var(--jt-warning-border); } .jt-chat-bubble::after { content: ""; position: absolute; bottom: -1px; width: 0; height: 0; border-style: solid; } .jt-chat-in .jt-chat-bubble::after { left: -7px; border-width: 0 0 9px 9px; border-color: transparent transparent var(--jt-border-subtle) transparent; } .jt-chat-out .jt-chat-bubble::after { right: -7px; border-width: 0 9px 9px 0; border-color: transparent transparent var(--jt-accent-border) transparent; } .jt-chat-out .jt-chat-bubble.jt-chat-internal::after { border-bottom-color: var(--jt-warning-border); } @media (max-width: 640px) { .jt-chat-bubble { max-width: 92%; min-width: 0; } } /* L'anteprima di un'immagine allegata: si guarda senza aprirla, ma non prende la pagina. Un'altezza massima invece di una larghezza, cosi' una schermata verticale e una orizzontale occupano lo stesso spazio in elenco. */ .jt-attachments { list-style: none; padding: 0; margin: .35rem 0 0; } .jt-attachments li { margin-bottom: .35rem; } .jt-attachment-preview { display: block; max-height: 220px; max-width: 100%; border: 1px solid var(--jt-border); border-radius: 4px; margin-bottom: .2rem; } /* Il collegamento attorno all'anteprima e' largo quanto l'immagine. Un in linea con dentro un'immagine a blocco si prende tutta la riga, e il clic nel bianco accanto a una schermata apriva la schermata: chi selezionava il testo del messaggio si ritrovava con una scheda nuova. display: table stringe la scatola sul contenuto e la tiene comunque su una riga sua. */ .jt-attachment-thumb { display: table; max-width: 100%; } /* --- riquadro di un comando dentro una pagina di elenco --- Un gesto che non e' un filtro e non e' una riga della griglia: la generazione delle tariffe di un cliente, per esempio. Sta nella pagina e non in una modale perche' e' il passo che precede la compilazione della griglia, e aprirlo e chiuderlo nasconderebbe cosa si sta generando. */ .jt3-page-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--jt-text); } .jt3-panel { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .85rem 1rem; } .jt3-panel-title { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; color: var(--jt-text); } .jt3-panel-commands { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; } /* --- elenco a spunte dentro un riquadro di comando --- Un insieme di caselle su piu' colonne, con un'altezza massima: venti persone in colonna spingerebbero il pulsante che le riguarda fuori dallo schermo, e chi non lo vede crede che il comando non ci sia. */ .jt3-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .15rem .75rem; max-height: 12rem; overflow-y: auto; border: 1px solid var(--jt-border); border-radius: 4px; padding: .5rem .65rem; } .jt3-checklist-commands { display: flex; gap: .5rem; margin-bottom: .4rem; } /* Cella numerica di una tabella del kit: gli importi si leggono incolonnati a destra, e un elenco di prezzi allineato a sinistra si confronta a occhio una cifra alla volta. */ .jt3-table th.jt3-num, .jt3-table td.jt3-num { text-align: right; font-variant-numeric: tabular-nums; } /* --- mappa Leaflet --- Il riquadro ha una misura propria prima ancora che la libreria arrivi: senza altezza Leaflet creerebbe una mappa alta zero, e il caricamento riuscito sembrerebbe fallito. Lo z-index basso tiene le tessere sotto le maschere del kit: i pannelli di Leaflet salgono fino a 1000, quanto un DxPopup. */ .jt3-leaflet { width: 100%; min-height: 20rem; border: 1px solid var(--jt-border); border-radius: 6px; background: var(--jt-surface-2); position: relative; z-index: 0; } /* Distintivo di un gruppo di segnaposti (Leaflet.markercluster). Il foglio predefinito del complemento colora i gruppi di verde, giallo e rosso secondo quanti segni tengono, che qui direbbe la cosa sbagliata: il colore serve a dire *di che tipo* sono i soggetti raccolti, e la quantita' sta gia' scritta dentro. Il fondo arriva inline dal segno, il resto e' qui. */ .jt3-cluster { background: none; border: 0; } .jt3-cluster span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: var(--jt-on-accent); font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums; border: 2px solid var(--jt-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } /* --- casella con tendina di proposte --- Un input nudo dentro una riga di modulo non si allarga come gli editor DevExpress, che si portano dietro il proprio contenitore: senza questa riga la provenienza e il CAP restano larghi la meta' dei campi accanto, e il segnaposto si legge a meta'. */ .jt3-suggest { width: 100%; box-sizing: border-box; } /* --- scelta fra poche voci --- Due pulsanti di scelta in fila dove una tendina costerebbe due gesti per due voci. Le etichette stanno accanto al pallino e non sopra: e' una riga di modulo, non un elenco. */ .jt3-choice { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } .jt3-choice label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; } .jt3-choice input { margin: 0; } /* --- campo con i suoi comandi accanto --- Una casella e uno o due pulsanti sulla stessa riga di modulo: il pulsante agisce su quel campo e non sulla scheda, e metterlo altrove lo separa da cio a cui si riferisce. La casella prende lo spazio che avanza. */ .jt3-input-actions { display: flex; gap: .5rem; align-items: center; } .jt3-input-actions > :first-child { flex: 1 1 auto; min-width: 0; } .jt3-input-actions .jt3-btn { flex: 0 0 auto; white-space: nowrap; } /* Il riquadro del visualizzatore di documenti (Jt3FileViewer). Riempie la finestra: un iframe senza altezza dichiarata ne prende centocinquanta pixel per impostazione predefinita, e un documento di trenta pagine dentro centocinquanta pixel non si legge. */ .jt3-file-viewer { display: block; width: 100%; height: 100%; min-height: 60vh; border: 1px solid var(--jt-border-strong); border-radius: 4px; background: var(--jt-surface); } /* --- griglia dei rischi (probabilita' x impatto) ---------------------------- La matrice del foglio GRIGLIA, ricostruita dal registro. Vive nel kit perche' e' un impaginato, non una regola del modulo: chi la guarda deve trovarla uguale ovunque la si carichi. I cinque livelli hanno una scala di colore che va dal verde al rosso, e non sono le campiture del foglio di partenza: quelle sono dipinte a mano e incoerenti — nel foglio "Medio" e' verde e "Medio-basso" e' rosso — quindi ricopiarle avrebbe mostrato un ordine che i colori non hanno. --------------------------------------------------------------------------- */ .jt3-matrix-title { font-size: 1rem; margin: 0 0 .75rem; color: var(--jt-text); } .jt3-matrix-title .jt3-muted { font-weight: 400; } /* La matrice e le legende scorrono per conto loro: su uno schermo stretto e' la tabella a scorrere, non la pagina. */ .jt3-matrix-wrap, .jt3-legend-wrap { overflow-x: auto; } .jt3-matrix { border-collapse: collapse; width: 100%; min-width: 52rem; table-layout: fixed; } .jt3-matrix-caption { caption-side: bottom; text-align: left; padding-top: .6rem; font-size: .8rem; color: var(--jt-text-muted); line-height: 1.4; } .jt3-matrix-head { background: var(--jt-surface-2); border: 1px solid var(--jt-border-strong); padding: .4rem .55rem; font-size: .78rem; font-weight: 600; color: var(--jt-text-2); text-align: center; vertical-align: middle; } .jt3-matrix-corner { background: var(--jt-surface-3); } .jt3-matrix-cell { border: 1px solid var(--jt-border-strong); padding: .4rem .5rem; vertical-align: top; height: 5.5rem; font-size: .74rem; line-height: 1.35; } /* Il prodotto in un angolo e in chiaro: dice perche' la casella ha quel colore, e senza si legge il colore come un giudizio senza numero. */ .jt3-matrix-product { display: block; font-size: .7rem; font-weight: 700; opacity: .55; margin-bottom: .2rem; } .jt3-matrix-codes { display: block; word-break: break-word; } .jt3-matrix-value { display: block; font-variant-numeric: tabular-nums; opacity: .7; } .jt3-legend { border-collapse: collapse; width: 100%; font-size: .85rem; } .jt3-legend th, .jt3-legend td { border: 1px solid var(--jt-border-strong); padding: .45em .7em; text-align: left; vertical-align: top; } .jt3-legend thead th { background: var(--jt-surface-2); font-size: .78rem; color: var(--jt-text-2); } .jt3-legend tbody th { background: var(--jt-bg); white-space: nowrap; } /* I cinque livelli. Il testo resta scuro su tutti: bianco su giallo non si legge, e una scala che diventa illeggibile a meta' non e' una scala. */ .jt3-level-1 { background: var(--jt-success-soft); } .jt3-level-2 { background: var(--jt-success-soft); } .jt3-level-3 { background: var(--jt-warning-soft); } .jt3-level-4 { background: var(--jt-warning-border); } .jt3-level-5 { background: var(--jt-danger-border); } /* Il riquadro che si apre passando sulla casella. E' figlio della cella e si apre in CSS, non dal circuito: entrandoci col mouse la cella resta in :hover, quindi i collegamenti dentro si possono davvero cliccare — cosa che un attributo title non permette. E un popup aperto dal server costerebbe un giro di rete a ogni passaggio del mouse su venticinque caselle, che su Blazor Server si sente. Niente ritardo di apertura e niente animazione: e' uno strumento di lettura, e mezzo secondo di attesa su venticinque caselle e' mezzo minuto. */ .jt3-matrix-cell { position: relative; } .jt3-matrix-pop { display: none; position: absolute; z-index: 30; left: 0; top: 100%; min-width: 24rem; max-width: 34rem; max-height: 22rem; overflow-y: auto; background: var(--jt-surface); color: var(--jt-text); border: 1px solid var(--jt-text-subtle); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: .5rem 0; font-size: .8rem; text-align: left; } .jt3-matrix-cell:hover .jt3-matrix-pop, .jt3-matrix-cell:focus-within .jt3-matrix-pop { display: block; } /* Le ultime colonne aprirebbero il riquadro oltre il bordo destro: li' si ancora a destra invece che a sinistra. Senza, sull'impatto catastrofico il riquadro esce dalla pagina e per leggerlo si deve scorrere - proprio mentre il mouse non si puo' spostare. */ .jt3-matrix-cell:nth-last-child(-n+2) .jt3-matrix-pop { left: auto; right: 0; } /* E le ultime righe lo aprirebbero sotto il fondo: li' sale. */ .jt3-matrix tr:nth-last-child(-n+3) .jt3-matrix-pop { top: auto; bottom: 100%; } .jt3-matrix-pop-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .1rem .75rem .45rem; margin-bottom: .35rem; border-bottom: 1px solid var(--jt-border); font-weight: 600; color: var(--jt-text); text-decoration: none; } .jt3-matrix-pop-head:hover { background: var(--jt-surface-2); } .jt3-matrix-pop-all { font-weight: 400; color: var(--jt-accent); white-space: nowrap; } .jt3-matrix-pop-list, .jt3-matrix-outside { list-style: none; margin: 0; padding: 0; } .jt3-matrix-pop-list a, .jt3-matrix-outside a { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; padding: .3rem .75rem; color: var(--jt-text); text-decoration: none; line-height: 1.35; } .jt3-matrix-pop-list a:hover, .jt3-matrix-outside a:hover { background: var(--jt-accent-soft); } .jt3-matrix-pop-code { font-weight: 600; color: var(--jt-accent-hover); } .jt3-matrix-pop-desc { color: var(--jt-text-2); } .jt3-matrix-outside { font-size: .82rem; margin-top: .5rem; } /* --- editor dei documenti (sorgente + anteprima) ------------------------------ Due riquadri affiancati ad altezza fissa: il sorgente Markdown e l'anteprima resa. L'altezza e' della finestra e non del contenuto, perche' un manuale di duemila righe non deve far scorrere la pagina per arrivare al pulsante di salvataggio. Sotto i 900px si impilano. */ .jt3-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 60vh; } @media (max-width: 900px) { .jt3-editor { grid-template-columns: 1fr; } } .jt3-editor-pane { display: flex; flex-direction: column; min-height: 60vh; } .jt3-editor-tools { display: flex; justify-content: flex-end; margin-bottom: .4rem; } /* L'editor EasyMDE dentro il pannello: riempie l'altezza del pannello e scorre per conto suo, come faceva la textarea. */ .jt3-editor-source .EasyMDEContainer { display: flex; flex-direction: column; flex: 1; min-height: 0; } .jt3-editor-source .EasyMDEContainer .CodeMirror { flex: 1; min-height: 0; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .9rem; border-color: var(--jt-border-strong); border-radius: 0 0 4px 4px; } .jt3-editor-source .editor-toolbar { border-color: var(--jt-border-strong); border-radius: 4px 4px 0 0; } .jt3-editor-preview { flex: 1; min-height: 0; } /* Una chiave API appena generata: si mostra una volta e va copiata, quindi larga quanto serve, a spaziatura fissa e selezionabile con un clic. */ .jt3-apikey { display: block; margin-top: .4rem; padding: .5rem .7rem; user-select: all; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .95rem; background: var(--jt-surface); border: 1px dashed var(--jt-success-border); border-radius: 4px; word-break: break-all; } /* Riga di tabella fuori gioco (una chiave revocata): resta leggibile, non sparisce — la storia di cosa e' esistito e' quello che si viene a cercare. */ .jt3-muted { color: var(--jt-text-subtle); } /* La bacheca: colonne affiancate che scorrono in orizzontale dentro il proprio riquadro — la pagina non deve mai scorrere di lato — e schede trascinabili. Lo stato "sopra" della colonna dice dove finira' la scheda prima di lasciarla. */ .jt3-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; } .jt3-board-column { flex: 0 0 260px; min-height: 12rem; background: var(--jt-surface-2); border-radius: 6px; border-top: 3px solid var(--jt-text-subtle); padding: .5rem; } .jt3-board-column-over { background: var(--jt-accent-alt-soft); } .jt3-board-header { display: flex; justify-content: space-between; align-items: center; margin: 0 .25rem .5rem; } .jt3-board-title { font-weight: 600; font-size: .9rem; color: var(--jt-text); } .jt3-board-count { font-size: .75rem; color: var(--jt-text-muted); background: var(--jt-surface); border-radius: .6rem; padding: 0 .4rem; } /* La riga di riepilogo di una colonna (Jt3Board.ColumnSummary): il valore di una pipeline, le ore di una coda. Allineata a destra come un totale. */ .jt3-board-summary { margin: -.25rem .25rem .5rem; font-size: .8rem; font-weight: 600; color: var(--jt-text-2); text-align: right; } /* --- conferma del cambio di stadio, e scelte a spunta ----------------------- */ .jt3-stage-move { display: flex; align-items: center; gap: .6rem; font-size: .95rem; margin: 0 0 .75rem; } .jt3-checklist { display: flex; flex-direction: column; gap: .3rem; max-height: 16rem; overflow: auto; margin-bottom: .75rem; } .jt3-picklist { display: flex; flex-wrap: wrap; gap: .35rem; } .jt3-picklist small { opacity: .7; margin-left: .35rem; } .jt3-board-cards { display: flex; flex-direction: column; gap: .4rem; } .jt3-board-card { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 5px; padding: .5rem .6rem; cursor: grab; font-size: .85rem; } .jt3-board-card[draggable="false"] { cursor: default; } .jt3-board-card-dragging { opacity: .5; } .jt3-board-card-title { font-weight: 600; color: var(--jt-text); display: block; margin-bottom: .2rem; } .jt3-board-card-title a { color: inherit; text-decoration: none; } .jt3-board-card-title a:hover { text-decoration: underline; } .jt3-board-card-meta { color: var(--jt-text-muted); font-size: .78rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; } .jt3-board-empty { color: var(--jt-text-subtle); font-size: .8rem; text-align: center; padding: 1rem 0; } .jt3-board-more { color: var(--jt-text-muted); font-size: .8rem; text-align: center; padding: .5rem 0; font-style: italic; } /* La menzione nel testo di un messaggio. */ .jt3-mention { background: var(--jt-accent-alt-soft); color: var(--jt-accent-alt); border-radius: .3rem; padding: 0 .2rem; font-weight: 600; } /* Riquadri del cruscotto: un numero grande e un'etichetta, ciascuno un collegamento all'elenco che lo spiega. */ .jt3-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin-bottom: .75rem; } .jt3-tile { display: flex; flex-direction: column; gap: .15rem; background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .75rem .9rem; text-decoration: none; color: inherit; } .jt3-tile:hover { border-color: var(--jt-accent-alt-border); } .jt3-tile-value { font-size: 1.6rem; font-weight: 700; color: var(--jt-text); line-height: 1.1; } .jt3-tile-label { font-size: .8rem; color: var(--jt-text-muted); } .jt3-tile-warn .jt3-tile-value { color: var(--jt-warning-strong); } .jt3-tile-bad .jt3-tile-value { color: var(--jt-danger-strong); } .jt3-dashboard-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem; } .jt3-dashboard-columns h3 { margin: 0 0 .5rem; font-size: .95rem; } .jt3-breakdown li { display: grid; grid-template-columns: 1fr 120px 2.5rem; align-items: center; gap: .5rem; font-size: .85rem; margin-bottom: .3rem; } .jt3-breakdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jt3-breakdown-bar { display: block; height: .55rem; background: var(--jt-accent-alt); border-radius: .3rem; justify-self: start; min-width: 2px; } .jt3-breakdown-count { text-align: right; color: var(--jt-text-2); } /* Questionario da compilare (portale del fornitore): sezioni a sinistra, domande a destra, risposte a pulsanti come nei portali di qualifica che i fornitori gia' conoscono. Le scelte sono pulsanti e non radio: su un questionario di novanta domande il bersaglio grande e' cio' che evita la risposta data alla riga sbagliata. */ .jt3-quiz { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; } @media (max-width: 900px) { .jt3-quiz { grid-template-columns: 1fr; } } .jt3-quiz-nav { position: sticky; top: .5rem; background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .5rem; } .jt3-quiz-nav button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .5rem; text-align: left; background: none; border: 0; border-radius: 4px; padding: .45rem .5rem; font: inherit; cursor: pointer; } .jt3-quiz-nav button:hover { background: var(--jt-surface-2); } .jt3-quiz-nav .jt3-quiz-current { background: var(--jt-accent-soft-2); font-weight: 600; } .jt3-quiz-todo { color: var(--jt-danger-strong); font-size: .8rem; white-space: nowrap; } .jt3-quiz-done { color: var(--jt-success-text); } .jt3-quiz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; } .jt3-quiz-progress { flex: 0 0 180px; height: .6rem; background: var(--jt-surface-3); border-radius: .3rem; overflow: hidden; } .jt3-quiz-progress > span { display: block; height: 100%; background: var(--jt-accent-alt); } .jt3-question { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: 1rem 1.1rem; margin-bottom: .75rem; } .jt3-question-missing { border-color: var(--jt-danger-border); } .jt3-question-head { display: flex; gap: .6rem; align-items: baseline; } .jt3-question-number { flex: 0 0 auto; min-width: 2.4rem; text-align: center; background: var(--jt-surface-2); border-radius: 1rem; padding: .15rem .45rem; font-weight: 600; font-size: .85rem; } .jt3-question-text { font-weight: 600; font-size: 1rem; } .jt3-question-required { color: var(--jt-danger); margin-left: .15rem; } .jt3-question-help { color: var(--jt-text-2); font-size: .9rem; margin: .4rem 0 .6rem 3rem; white-space: pre-line; } .jt3-question-help ul { margin: .25rem 0; padding-left: 1.2rem; white-space: normal; } .jt3-question-body { margin-left: 3rem; } .jt3-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; margin: .4rem 0; } .jt3-option { border: 1px solid var(--jt-accent-alt); color: var(--jt-accent-alt-text); background: var(--jt-surface); border-radius: 6px; padding: .5rem .75rem; font: inherit; cursor: pointer; } .jt3-option:hover { background: var(--jt-accent-alt-soft); } .jt3-option-selected { background: var(--jt-accent-alt); color: var(--jt-on-accent); } .jt3-option-selected:hover { background: var(--jt-accent-alt-text); } .jt3-option:disabled { cursor: default; opacity: .75; } .jt3-question-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; margin-top: .5rem; } .jt3-quiz-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1rem; } /* Editor di documenti Word (Jt3WordEditor): DxRichEdit prende l'altezza dal contenitore, e senza un'altezza esplicita si disegna alto zero — il nastro c'e', la pagina no, e nessun errore lo dice. */ .jt3-word-editor { display: flex; flex-direction: column; min-height: 420px; border: 1px solid var(--jt-border); border-radius: 6px; overflow: hidden; background: var(--jt-surface); } .jt3-word-editor-control { flex: 1 1 auto; height: 100%; } .jt3-version-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } /* Radar: il disegno sta nel riquadro e si rimpicciolisce con esso. Larghezza massima, perche' un radar grande quanto lo schermo ha le etichette lontane dal centro e si legge peggio, non meglio. */ .jt3-radar { margin: 0; display: flex; flex-direction: column; align-items: center; } .jt3-radar-title { font-size: .9rem; font-weight: 600; color: var(--jt-text-2); margin-bottom: .25rem; } .jt3-radar-svg { display: block; width: 100%; max-width: 20rem; height: auto; } /* Due radar affiancati, uno sotto l'altro su schermo stretto. */ .jt3-score-charts { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .jt3-score-charts > * { flex: 1 1 18rem; max-width: 24rem; } /* --- Schede al posto delle righe (Jt3Grid.AllowCardView) -------------------- La griglia resta montata e si nasconde: smontarla perderebbe il layout applicato e la selezione, e tornare alle righe ripartirebbe da zero. E' la stessa scelta di Jt3Tabs con le schede non attive. */ /* Due classi e non una: DxGrid si dichiara display:flex con una classe sua, e fra due regole di pari specificita' vince quella che il browser legge per ultima — il foglio di DevExpress. Il sintomo era la griglia che restava in pagina SOTTO le schede, cioe' gli stessi dati due volte. */ .jt3-grid .jt3-grid-hidden { display: none; } /* Jt3GridColumn MultiLine: gli a capo del valore restano a capo, e una riga troppo lunga va a capo invece di sparire sotto i puntini della griglia. */ .jt3-grid .jt3-cell-multiline { white-space: pre-line; overflow-wrap: anywhere; } .jt3-cards { display: grid; gap: .6rem; padding: .6rem; /* auto-fill e non auto-fit: con poche schede restano della loro larghezza invece di allargarsi a tutta la pagina, che su due partner darebbe due cartelloni. */ grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .jt3-datacard { background: var(--jt-surface); border: 1px solid var(--jt-border); border-radius: 6px; padding: .7rem .85rem; cursor: pointer; display: flex; flex-direction: column; gap: .5rem; } .jt3-datacard:hover { border-color: var(--jt-accent-alt-border); box-shadow: 0 1px 3px rgb(0 0 0 / .08); } .jt3-datacard:focus-visible { outline: 2px solid var(--jt-accent-border); outline-offset: 1px; } /* Il bordo a sinistra e non solo lo sfondo: su uno schermo poco contrastato una tinta appena diversa non si vede, e la scheda selezionata e' quella su cui agiscono i comandi della barra. */ .jt3-datacard-selected { border-color: var(--jt-accent); background: var(--jt-accent-soft); box-shadow: inset 3px 0 0 var(--jt-accent); } .jt3-datacard-head { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .jt3-datacard-title { font-weight: 600; color: var(--jt-text); font-size: .95rem; } .jt3-datacard-subtitle { color: var(--jt-text-3); font-size: .85rem; /* Una denominazione lunga non deve allungare la scheda oltre le altre. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Etichetta e valore su due colonne: incolonnati, i valori si confrontano fra schede vicine senza rileggere ogni etichetta. */ .jt3-datacard-fields { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; font-size: .82rem; } .jt3-datacard-fields dt { color: var(--jt-text-muted); } .jt3-datacard-fields dd { margin: 0; color: var(--jt-text); overflow-wrap: anywhere; } .jt3-datacard-actions { margin-top: auto; display: flex; justify-content: flex-end; } .jt3-btn-link { background: none; border: none; color: var(--jt-accent); padding: 0; font: inherit; cursor: pointer; } .jt3-btn-link:hover { text-decoration: underline; } .jt3-cards-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .25rem 0 .6rem; } /* --- Albero eterogeneo: reparto, contratto, progetto, commessa, fase, attivita' (ServiceHierarchyTree). L'albero delle categorie usa