...
*
* e .ds-corpo di padding laterale non ne ha - gliel'ho tolto io, apposta,
* perche' la tabella si prendesse tutta la larghezza. Risultato: ogni scheda
* sbordava di 12 pixel a destra. Dodici pixel sono pochi da vedere e
* abbastanza per una barra di scorrimento, ed e' per questo che c'era
* sempre e non si capiva di cosa.
*
* Si rida' il padding al contenitore delle maschere - che e' il suo posto,
* non quello del corpo - e i conti tornano: -12 + 12 = 0, le colonne a filo
* del bordo come devono, niente sbordo. Le liste non hanno una .row nuda e
* restano larghe come prima.
*/
.ds-corpo > .gmcedesign_form,
.ds-corpo > form > .gmcedesign_form{ padding-left: 12px; padding-right: 12px; }
/* E per tutto quello che verra' dopo: una .row lasciata nuda nel corpo non
sborda comunque. Meglio perdere il rientro delle colonne che ritrovarsi la
barra. */
.ds-corpo > .row,
.ds-corpo > form > .row{ margin-left: 0; margin-right: 0; }
/*
* La rete, per quello che non abbiamo previsto.
*
* In denso la PAGINA non scorre mai di lato: quello che e' troppo largo -
* una tabella con venti colonne, la griglia - scorre dentro alla propria
* scatola, che ha la sua barra al posto giusto. Quindi qui si taglia.
*
* clip e non hidden, e non auto: hidden e auto fanno del corpo una scatola
* che scorre anche in verticale, e si porterebbero dietro le tendine che si
* aprono verso il basso. clip e' l'unico valore che si puo' mettere su un
* asse solo lasciando l'altro libero.
*/
.ds-corpo{ overflow-x: clip; }
/*
* I riquadri di primo livello vanno da bordo a bordo: niente angoli
* arrotondati ne' fili laterali, che a filo del bordo non separano niente da
* niente. Resta il filo sotto, che divide un riquadro dal successivo.
* Quelli annidati tengono la loro forma.
*/
.ds-corpo > .card,
.ds-corpo > * > .card{
border-left: 0;
border-right: 0;
border-radius: 0;
margin-bottom: 0;
border-top: 0;
border-bottom: 1px solid var(--ds-filo);
}
/* Dentro alla cornice (tmpl=component) un po' d'aria ci vuole: li' non c'e'
ne' fascia ne' binario a fare da margine. */
.ds-solo-corpo .ds-corpo{ padding: 10px 12px; min-height: 0; }
.ds-solo-corpo .ds-corpo > .card,
.ds-solo-corpo .ds-corpo > * > .card{
border: 1px solid var(--ds-filo);
border-radius: 4px;
margin-bottom: 10px;
}
/* --- la barra delle azioni -------------------------------------------- */
/*
* Una riga sola, alta 34. Il tema di prima li metteva grandi e allineati
* a destra: 54px di altezza per sei pulsanti che si premono col mignolo.
*/
.ds-azioni{
display: flex; align-items: center; gap: 2px;
height: 34px;
margin: 0;
padding: 0 10px;
background: var(--ds-carta);
border-bottom: 1px solid var(--ds-filo);
overflow-x: auto; scrollbar-width: none;
position: sticky; top: var(--ds-fascia-h); z-index: 3;
}
/* Dentro alla cornice (tmpl=component) non c'e' fascia: la barra si appiccica
in cima alla finestrella e basta. */
.ds-solo-corpo .ds-azioni{ top: 0; }
.ds-azioni::-webkit-scrollbar{ display: none; }
.ds-azioni .ds-divisore{ width: 1px; height: 18px; background: var(--ds-filo); margin: 0 6px; flex: 0 0 auto; }
/*
* Lo stacco prima di Annulla.
*
* Non e' decorazione: e' distanza voluta fra i pulsanti che producono
* qualcosa e l'unico che la butta via. Un click sbagliato di 30 pixel non
* deve poter costare mezz'ora di compilazione.
*
* Non spinge Annulla al bordo destro con un margin-left:auto, che su uno
* schermo largo lo manderebbe a dieci centimetri dagli altri: la' non lo
* troverebbe piu' nessuno. Uno stacco fisso, largo abbastanza da leggersi
* come "questo e' un altro gruppo", con la sua riga in mezzo.
*/
.ds-azioni .ds-stacco-azioni{
flex: 0 0 auto;
width: 1px;
height: 18px;
margin: 0 18px;
background: var(--ds-filo);
}
/*
* I pulsanti della barra sono tutti uguali: fondo bianco, testo scuro. A
* separarli ci pensa la barretta fra uno e l'altro.
*
* Il colore qui non aggiungeva niente. Sei pulsanti di sei colori diversi si
* annullano a vicenda: quando tutto e' evidenziato, niente lo e'. Il colore
* resta per le pastiglie di stato nella tabella, dove dice qualcosa.
*/
.ds-azioni .ds-tasto{
background: var(--ds-carta);
border-color: transparent;
color: var(--ds-testo);
padding: 3px 8px;
}
.ds-azioni .ds-tasto:hover{ background: var(--ds-cromo); color: var(--ds-testo); }
/* Anche le icone sono dello stesso nero della scritta. Nessuna eccezione:
ne' per l'azione principale ne' per quella che cancella. A distinguere i
pulsanti ci sono la parola e la barretta, e basta cosi'. */
.ds-azioni .ds-tasto > i{ color: inherit; }
/* --- il piede della tabella ------------------------------------------- */
.ds-piede{
display: flex; align-items: center; gap: 12px;
padding: 6px 10px;
border-top: 1px solid var(--ds-filo);
font-size: 12.5px;
color: var(--ds-testo-2);
}
.ds-piede .ds-totale{ margin-left: auto; }
.ds-piede b{ color: var(--ds-testo); }
/* --- schermi stretti --------------------------------------------------- */
@media (max-width: 767.98px){
.ds-briciole{ display: none; }
.ds-cerca{ width: 140px; }
.ds-corpo{ padding-left: 8px; padding-right: 8px; }
}
/* --- il selettore di unita' organizzativa ------------------------------ */
/*
* Era una tendina di sistema in mezzo alla fascia. Qui e' un pulsante come
* quello dell'utente: si vede quale unita' e' in uso, si preme e si sceglie.
*
* Il