" con dentro il DxGrid):
la griglia disegna il proprio sfondo sopra gli angoli inferiori della card, che risultano squadrati.
Qui l'ultimo contenitore della card, e la griglia stessa, prendono il raggio interno di Tabler.
Niente "overflow: hidden" sul contenitore: ritagliava anche gli strati che la griglia DevExpress
sovrappone alle celle, rendendo inerti i pulsanti nelle righe (matita ed elimina). */
.card > .p-0:last-child,
.card > .p-0:last-child > .dxbl-grid {
border-bottom-right-radius: var(--tblr-card-inner-border-radius);
border-bottom-left-radius: var(--tblr-card-inner-border-radius);
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.field-error {
border-color: var(--tblr-danger) !important;
}
/* Griglie permessi (GruppoEditor/UtenteEditor, tab "Permessi"): DxCheckBox è di suo un
componente a larghezza piena allineato a sinistra, quindi il "text-center" di Bootstrap
sulla
non lo centra e risulta sfasato rispetto all'intestazione della colonna. */
.card-table td.text-center .dxbl-checkbox {
justify-content: center;
}
/* DxGrid (.dxbl-grid) dichiara un proprio border-radius (var(--dxbl-grid-border-radius), ~3px)
ma non lo applica come clip sui propri contenuti: righe e pannelli interni restano con angoli
vivi e, quando il grid è pieno di dati, l'ultima riga in basso resta squadrata pur essendo
dentro un contenitore "stondato" (card). Tabler risolve lo stesso problema per le native
con le regole .card-table (vedi tabler.css), ma non conosce il markup interno di DxGrid: qui
basta far sì che il grid clippi da solo il proprio contenuto sul proprio raggio dichiarato. */
.dxbl-grid {
overflow: hidden;
}
/* Navigazione verticale della scheda cliente in stile CRM (CrmNavItem.razor). Lo stato attivo
usa --nav-accent-bg/--nav-accent-text impostati via style inline sul singolo item (vedi
CrmNavItem.razor sul perché); qui solo cursore e hover per lo stato non attivo/non disabilitato. */
.crm-nav-item {
cursor: pointer;
user-select: none;
}
/* Stesso pattern già usato da Tabler per .list-group-item dentro una .card (vedi tabler.css):
senza questo, lo sfondo dello stato attivo sul primo/ultimo elemento copre gli angoli
arrotondati della .card che contiene la navigazione (ClienteEditorCrm.razor), mostrando
angoli vivi al posto di quelli stondati del contenitore. */
.crm-nav-item:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.crm-nav-item:last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.crm-nav-item:hover:not(.crm-nav-item-disabled) {
background-color: var(--tblr-active-bg, rgba(0, 0, 0, .03));
}
.crm-nav-item-disabled {
opacity: .5;
cursor: default;
pointer-events: none;
}
/* Vista Kanban Offerte Commerciali (OfferteKanban.razor + Components/Shared/DxKanban): porting delle
regole dell'esempio ufficiale DevExpress (github.com/DevExpress-Examples/blazor-kanban-board,
kanban.css/card-styles.css), adattate ai token Tabler invece di colori fissi. Il componente è una
DxGrid con una riga fittizia le cui colonne ospitano ciascuna una seconda DxGrid (le card come righe):
i selettori sotto colpiscono le classi reali del DOM di DxGrid, non markup nostro. */
.kanban-layout-grid {
border: none;
overflow-x: auto;
}
.kanban-layout-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table {
border-collapse: separate;
border-spacing: 1rem 0;
border: none;
table-layout: fixed;
width: 100%;
}
/* Colonne piene alla larghezza disponibile, fino a un massimo di 4 visibili: oltre, il totale
supera il 100% e fa scattare lo scroll orizzontale già su .kanban-layout-grid. --kanban-col-count
viene impostato dalla pagina chiamante (numero di colonne Kanban di quella board, noto lato
server) su un contenitore attorno a . */
.kanban-header-cell,
.kanban-data-cell {
width: calc(100% / min(var(--kanban-col-count, 4), 4)) !important;
}
.kanban-layout-grid .dxbl-grid-empty-data-area {
padding: 0.5rem;
}
.kanban-layout-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > tbody > tr.dxbl-grid-empty-row > .dxbl-grid-empty-data-area * {
display: none !important;
}
.kanban-layout-grid .dxbl-grid-empty-row {
border: none;
}
.kanban-header-cell,
.kanban-data-cell {
background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .03));
}
.kanban-header-cell {
border-top-left-radius: var(--tblr-border-radius);
border-top-right-radius: var(--tblr-border-radius);
}
.kanban-data-cell {
border-bottom-left-radius: var(--tblr-border-radius);
border-bottom-right-radius: var(--tblr-border-radius);
}
/* Colonna interna (card come righe): niente intestazione/bordi propri, sfondo trasparente sopra
.kanban-data-cell, spaziatura verticale tra le card. */
.kanban-column-grid {
height: 65vh;
background: transparent;
border: none;
}
.kanban-column-grid .dxbl-grid-header-row {
display: none;
}
.kanban-column-grid .dxbl-scroll-viewer {
background: transparent !important;
}
.kanban-column-grid .dxbl-grid-table {
border: none !important;
border-spacing: 0 0.75rem;
border-collapse: separate;
}
.kanban-column-grid .dxbl-grid-table tr,
.kanban-column-grid .dxbl-grid-table td {
background: transparent !important;
}
.kanban-column-grid .dxbl-grid-indent-cell-size {
width: 100% !important;
}
.kanban-column-grid .dxbl-grid-indent-cell-size + col {
width: 0 !important;
}
/* L'"ancora" di drag riceve il contenuto reale della card via JS (DxKanban.razor.js): qui deve solo
sparire come cella a parte e non intercettare a sua volta il pointer sopra il contenuto copiato. */
.kanban-column-grid .kanban-drag-anchor {
padding: 0;
}
.kanban-column-grid .kanban-drag-anchor + td {
padding: 0 !important;
}
.kanban-column-grid .kanban-drag-anchor + td * {
padding: 0 !important;
}
.kanban-drag-anchor > * {
pointer-events: none;
}
.kanban-drag-hint {
padding: 0;
width: 15rem;
}
.kanban-drag-hint .dxbl-grid-row-drag-hint-drag-anchor {
display: none;
}
/* Contenuto della card (dentro DxKanban.CardTemplate): stessa idea di .dx-card dell'esempio originale,
qui con box-shadow/radius Tabler invece di valori fissi. */
.dx-card,
.kanban-card-content {
overflow: hidden;
box-shadow: var(--tblr-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, .12));
border-radius: var(--tblr-border-radius);
background-color: var(--tblr-bg-surface);
box-sizing: border-box;
width: 100%;
padding: 0.75rem 1rem;
cursor: pointer;
}
/* Accento colore di stato (Offerte Kanban): --kanban-card-tono impostato inline dal CardTemplate in base
a DataEnum.StatoOfferta.GetColore() — transparent di default per non toccare le altre board Kanban. */
.kanban-card-content {
border-left: 4px solid var(--kanban-card-tono, transparent);
}
.kanban-card-content:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.kanban-card-content a.btn {
cursor: pointer;
}
/* ==========================================================================
Griglia della dashboard personale (DashboardGriglia.razor + Gridstack)
========================================================================== */
/* Gridstack posiziona gli item in absolute dentro il contenitore: senza un margine negativo che compensi
il proprio margin gli item risultano rientrati rispetto al resto della pagina. */
.dashboard-griglia {
margin-left: -8px;
margin-right: -8px;
}
/* La cella ha un'altezza definita in pixel (Gridstack): il contenuto la riempie tutto, così una card
ridimensionata cresce davvero invece di restare alta quanto il suo contenuto. */
.dashboard-griglia .grid-stack-item-content {
display: flex;
flex-direction: column;
overflow: hidden;
}
.dashboard-griglia .grid-stack-item-content > .card,
.dashboard-griglia .dashboard-widget-corpo {
flex: 1 1 auto;
/* min-height: 0 è ciò che permette al corpo di rimpicciolirsi sotto l'altezza naturale del contenuto:
senza, un flex item non scende sotto il proprio min-content e la card sfonda la cella. */
min-height: 0;
}
/* Il corpo scorre in verticale quando la cella è più piccola del contenuto (es. elenco scadenze in una
cella bassa): meglio uno scroll interno che un contenuto tagliato.
In orizzontale invece mai: i widget sono fatti per stare nella larghezza della cella, e una .row figlia
diretta (KpiCardOfferte) sporge della propria mezza gutter per i margini negativi di Bootstrap — che
senza un padding intorno che li assorba basterebbero a far comparire una barra di scorrimento. Quegli
8px sporgenti sono il padding del col, non contenuto: nasconderli non taglia nulla di visibile. */
.dashboard-griglia .dashboard-widget-corpo {
overflow-x: hidden;
overflow-y: auto;
}
/* Catena di altezze definite fino al grafico, che nella griglia riceve Altezza="100%" (vedi Home.razor):
se un anello resta "auto" la percentuale non ha su cosa risolversi e il grafico collassa. */
.dashboard-griglia .dashboard-widget-corpo > .card {
height: 100%;
}
.dashboard-griglia .dashboard-widget-corpo > .card > .card-body {
flex: 1 1 auto;
min-height: 0;
}
/* Barra di modifica (presa di trascinamento + rimozione), presente solo in modalità riorganizzazione. */
.dashboard-widget-barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: .25rem;
padding: .125rem .25rem;
background-color: var(--tblr-bg-surface-secondary);
border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
}
.dashboard-widget-presa {
display: inline-flex;
color: var(--tblr-secondary);
cursor: move;
}
/* In riorganizzazione il contenuto del widget è inerte: senza questo i link e i pulsanti dentro le card
(es. le righe di WidgetScadenzePrioritarie) intercetterebbero il gesto di trascinamento — o, peggio,
porterebbero via dalla pagina a metà spostamento. La barra sopra resta invece cliccabile. */
.dashboard-griglia--modifica .dashboard-widget-corpo {
pointer-events: none;
user-select: none;
}
.dashboard-griglia--modifica .grid-stack-item-content {
outline: 1px dashed var(--tblr-border-color);
cursor: move;
}
/* Sagoma della posizione di destinazione durante il trascinamento, nei colori del tema invece del grigio
fisso del CSS di Gridstack. */
.dashboard-griglia .grid-stack-placeholder > .placeholder-content {
background-color: var(--tblr-primary);
opacity: .12;
border-radius: var(--tblr-border-radius);
}
/* KpiCardOfferte non è una card ma una row di due card (vedi KpiCardOfferte.razor): anche quella deve
riempire la cella, altrimenti le due card restano alte quanto il loro contenuto. */
.dashboard-griglia .dashboard-widget-corpo > .row {
height: 100%;
}
/* Pulsanti del widget "Funzioni" (WidgetCollegamentiRapidi): sono bersagli di navigazione, non comandi di
una barra strumenti, quindi vanno grandi e con l'icona sopra l'etichetta invece che di fianco.
flex: 1 1 8.5rem = quanti ne entrano per riga lo decide la larghezza reale del contenitore (la cella
della dashboard), non un breakpoint sulla finestra; sotto le 8.5rem vanno a capo da soli.
max-width: in una card larga con pochi pulsanti, senza limite uno solo si stirerebbe per tutta la riga. */
.collegamento-app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5rem;
flex: 1 1 8.5rem;
max-width: 14rem;
min-height: 5.5rem;
padding: 1rem .75rem;
text-align: center;
white-space: normal; /* .btn è nowrap: un'etichetta lunga sfonderebbe il pulsante invece di andare a capo */
line-height: 1.25;
}
.collegamento-app .icon {
width: 1.75rem;
height: 1.75rem;
stroke-width: 1.5;
}
|