in fondo alla pagina.
Non coprono mai la barra di pubblicazione: l'app scrive in
--notifiche-sopra-barra la distanza fra il fondo della finestra e il bordo
alto della barra (0 senza barra), e le notifiche stanno sopra.
Il bordo destro e' quello del contenuto (.pagina-interna: menu a lato,
margine della pagina, larghezza massima); in percentuale della finestra,
cosi' la barra di scorrimento non lo sposta. */
.notifiche {
position: fixed;
z-index: 80;
right: max(var(--spazio-pagina-lati), calc(100% - var(--larghezza-lato) - var(--spazio-pagina-lati) - var(--larghezza-contenuto)));
bottom: max(var(--s-5), var(--notifiche-sopra-barra, 0px));
display: grid;
gap: var(--s-2);
width: min(400px, calc(100vw - 32px));
pointer-events: none;
}
.notifica {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-2);
padding: 6px 6px 6px var(--s-3);
border: 1px solid var(--linea);
border-radius: var(--raggio-riquadro);
background: var(--carta);
color: var(--inchiostro);
box-shadow: var(--ombra-2);
font-size: var(--t-piccolo);
line-height: 1.4;
pointer-events: auto;
animation: notifica-entra var(--durata-lunga) var(--curva);
}
.notifica > .spia {
--spia: var(--info-spia);
}
.notifica-ok > .spia { --spia: var(--ok-spia); }
.notifica-attenzione > .spia { --spia: var(--attenzione-spia); }
.notifica-pericolo > .spia { --spia: var(--pericolo-spia); }
.notifica-azioni {
display: flex;
align-items: center;
gap: 2px;
}
@keyframes notifica-entra {
from { opacity: 0; transform: translateY(8px); }
}
/* Avviso «nuova versione» (versione-web.js): vuoto non occupa spazio; pieno
resta in alto al centro, sopra la testata, finche' non si ricarica. Il
contenitore ha sempre role="status", cosi' il testo nuovo viene letto. */
.avviso-versione {
position: fixed;
z-index: 90;
top: var(--s-3);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
width: max-content;
max-width: calc(100vw - 32px);
padding: 6px 6px 6px var(--s-3);
border: 1px solid var(--info-bordo);
border-radius: var(--raggio-riquadro);
background: var(--carta);
color: var(--inchiostro);
box-shadow: var(--ombra-2);
font-size: var(--t-piccolo);
line-height: 1.4;
}
.avviso-versione:empty {
display: none;
}
/* Menu a tendina (menu dell'utente): il contenitore ha position: relative. */
.menu-tendina {
position: absolute;
z-index: 40;
top: calc(100% + 4px);
right: 0;
min-width: 260px;
padding: 4px;
border: 1px solid var(--linea);
border-radius: var(--raggio-riquadro);
background: var(--superficie);
color: var(--inchiostro);
box-shadow: var(--ombra-2);
}
.menu-tendina-testata {
display: grid;
gap: 0;
margin-bottom: 4px;
padding: 8px 10px;
border-bottom: 1px solid var(--linea);
}
.menu-tendina-voce {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: var(--altezza-pulsante);
padding: 0 8px;
border: 0;
border-radius: var(--raggio-piccolo);
background: none;
color: var(--inchiostro);
font-size: var(--t-testo);
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.menu-tendina-voce:hover {
background: var(--superficie-2);
text-decoration: none;
}
.menu-tendina-voce > .icona {
color: var(--secondario);
}
.menu-tendina-sezione {
display: grid;
gap: 6px;
padding: 6px 8px 8px;
}
.menu-tendina-separatore {
height: 1px;
margin: 4px 0;
border: 0;
background: var(--linea);
}
/* ---------------------------------------------------------------------------
Percorso e paginazione
------------------------------------------------------------------------ */
.percorso ol {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
color: var(--secondario);
font-size: var(--t-piccolo);
list-style: none;
}
.percorso li + li::before {
content: "/";
margin: 0 6px;
color: var(--linea-campo);
}
.percorso a {
display: inline-flex;
align-items: center;
min-height: 24px;
color: var(--secondario);
text-decoration: none;
}
.percorso a:hover {
color: var(--inchiostro);
text-decoration: underline;
}
.percorso [aria-current="page"] {
color: var(--inchiostro);
font-weight: 600;
}
.paginazione {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-2) 0;
}
/* «1–25 di 132», «32 mostrate»: parole nel carattere del testo, cifre
allineate (il carattere a spaziatura fissa e' solo per le cifre sole). */
.paginazione-stato {
color: var(--secondario);
font-family: var(--f-testo);
font-size: var(--t-piccolo);
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------------------
Guscio dell'app: barra in alto, menu a lato, pagina, piede;
sotto i 960 px il menu a lato lascia il posto alla barra in basso.
+---------------------------------------------+
| testata (48 px, tutta la larghezza) |
+------------+--------------------------------+
| lato | pagina |
| (menu | |
| sticky) | |
+------------+--------------------------------+
| piede (tutta la larghezza) |
+---------------------------------------------+
La colonna del lato (.lato, con il suo bordo) corre per tutta la riga
fino al piede, su pagine corte e lunghe; il menu dentro (.menu-lato)
resta sotto la barra mentre si scorre e in fondo alla pagina si ferma sul
piede: la colonna e' il suo contenitore. Con poco contenuto il piede sta
in fondo alla finestra.
------------------------------------------------------------------------ */
.guscio {
display: grid;
grid-template-columns: var(--larghezza-lato) minmax(0, 1fr);
grid-template-rows: var(--altezza-barra) minmax(0, 1fr) auto;
grid-template-areas:
"testata testata"
"lato pagina"
"piede piede";
min-height: 100vh;
min-height: 100dvh;
}
.lato {
grid-area: lato;
min-width: 0;
border-right: 1px solid var(--linea);
}
/* Barra in alto: 48 px, piena (niente vetro smerigliato). Il suo bordo
inferiore resta neutro: stato e avvisi si leggono nella pillola, senza
tratteggi o altri segnali decorativi. In chiamata e in guasto resta una
sottile riga solida, ferma. */
.testata-app {
grid-area: testata;
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: var(--s-3);
height: var(--altezza-barra);
padding: 0 var(--s-4);
background: var(--carta);
}
.testata-app::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--linea);
}
.testata-app[data-linea="in-chiamata"]::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--ok-spia);
}
.testata-app[data-linea="guasto"]::after {
height: 2px;
background: var(--pericolo-spia);
}
@keyframes filo-segnale {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
/* Il marchio finisce dove finisce il menu a lato: lo stato della linea
parte allineato al contenuto della pagina. */
.testata-marchio {
display: inline-flex;
flex: 0 0 calc(var(--larghezza-lato) + var(--s-7) - var(--s-4) - var(--s-3));
align-items: center;
gap: 8px;
min-width: 0;
color: var(--inchiostro);
text-decoration: none;
}
.testata-marchio:hover {
text-decoration: none;
}
.marchio-immagine {
display: block;
width: auto;
max-width: 140px;
height: auto;
max-height: 24px;
object-fit: contain;
}
.marchio-tessera {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
border-radius: var(--raggio);
background: var(--marchio-pieno);
color: var(--marchio-testo);
font-family: var(--f-titoli);
font-size: var(--t-piccolo);
font-weight: 700;
line-height: 1;
}
/* Su un fondo scuro la tessera ha un filo: un marchio quasi nero non si
confonde con la barra e resta la forma, non solo la lettera. */
[data-theme="dark"] .marchio-tessera,
.inverso .marchio-tessera,
.ingresso-lato .marchio-tessera {
box-shadow: inset 0 0 0 1px var(--linea-forte);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .marchio-tessera {
box-shadow: inset 0 0 0 1px var(--linea-forte);
}
}
.marchio-nome {
min-width: 0;
overflow: hidden;
font-family: var(--f-titoli);
font-size: var(--t-testo);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.testata-azioni {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
}
.aggiornato {
margin-right: var(--s-2);
color: var(--secondario);
font-size: var(--t-nota);
white-space: nowrap;
}
.utente {
position: relative;
}
.utente-pulsante {
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--altezza-pulsante);
padding: 0 6px 0 4px;
border: 1px solid transparent;
border-radius: var(--raggio);
background: none;
color: var(--inchiostro);
font-size: var(--t-piccolo);
font-weight: 600;
}
.utente-pulsante:hover,
.utente-pulsante[aria-expanded="true"] {
background: var(--superficie-3);
}
.utente-pulsante > .icona {
color: var(--secondario);
}
.avatar-iniziale {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
border: 1px solid var(--linea-forte);
border-radius: var(--raggio);
background: var(--incavo);
color: var(--inchiostro);
font-family: var(--f-titoli);
font-size: var(--t-nota);
font-weight: 700;
line-height: 1;
}
.avatar-immagine {
display: block;
flex: none;
width: 24px;
height: 24px;
border: 1px solid var(--linea-forte);
border-radius: var(--raggio);
object-fit: cover;
background: var(--incavo);
}
.profilo-foto-riga {
display: flex;
align-items: center;
gap: var(--s-4);
}
.avatar-profilo {
display: grid;
place-items: center;
flex: none;
width: 72px;
height: 72px;
}
.avatar-immagine-grande,
.avatar-iniziale-grande {
width: 72px;
height: 72px;
border-radius: 50%;
}
.avatar-iniziale-grande {
font-size: var(--t-titolo);
}
.profilo-foto-azioni {
min-width: 0;
flex: 1;
}
@media (max-width: 520px) {
.profilo-foto-riga {
align-items: flex-start;
flex-direction: column;
}
}
/* Menu a lato: 216 px, voci alte quanto un controllo (32 px col mouse,
44 al tocco) in 14 px, icone di 16. La voce aperta ha un fondo pieno
appena piu' scuro, non una carta in rilievo. */
.menu-lato {
position: sticky;
top: var(--altezza-barra);
display: flex;
flex-direction: column;
gap: var(--s-4);
/* Alto quanto la finestra sotto la barra, ma mai oltre la colonna: con
una pagina corta il piede del menu sta subito sopra il piede della
pagina. Se le voci non ci stanno, scorre dentro. */
height: min(100%, calc(100vh - var(--altezza-barra)));
height: min(100%, calc(100dvh - var(--altezza-barra)));
min-height: 0;
padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3);
overflow-y: auto;
scrollbar-width: thin;
}
.menu-lato-gruppo {
display: grid;
gap: 1px;
}
.menu-lato-titolo {
padding: 0 8px 4px;
color: var(--terziario);
font-size: var(--t-nota);
font-weight: 500;
}
.menu-lato-voce {
display: flex;
align-items: center;
gap: 8px;
min-height: var(--altezza-controllo);
padding: 0 8px;
border-radius: var(--raggio);
color: var(--secondario);
font-size: var(--t-testo);
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}
.menu-lato-voce:hover {
background: color-mix(in oklab, var(--superficie-3) 60%, transparent);
color: var(--inchiostro);
text-decoration: none;
}
.menu-lato-voce[aria-current="page"] {
background: var(--superficie-3);
color: var(--inchiostro);
font-weight: 600;
}
.menu-lato-voce[aria-current="page"] > .icona {
color: var(--accento-inchiostro);
}
.menu-lato-voce > .conteggio {
margin-left: auto;
}
.menu-lato-piede {
display: grid;
gap: 6px;
margin-top: auto;
padding: var(--s-3) 8px 0;
border-top: 1px solid var(--linea);
color: var(--secondario);
font-size: var(--t-nota);
}
/* Zona in fondo al menu: le utilita' (minuti, impostazioni, supporto),
staccate dal lavoro di ogni giorno da un filo. Un solo margine automatico
la porta in basso quando c'e' spazio, per questo minuti e voci stanno
nello stesso contenitore; quando lo spazio manca segue le voci e scorre
con loro senza coprirle (niente sticky). */
.menu-lato-fondo {
display: grid;
gap: var(--s-3);
margin-top: auto;
padding-top: var(--s-3);
border-top: 1px solid var(--linea);
}
.menu-lato-fondo > .menu-lato-piede {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Pagina: il profilo condiviso decide la densita' desktop; sulle larghezze
strette le media query sotto mantengono margini sicuri per telefono. */
.pagina {
grid-area: pagina;
min-width: 0;
padding: var(--spazio-pagina-sopra) var(--spazio-pagina-lati) var(--spazio-pagina-sotto);
}
.pagina-interna {
max-width: var(--larghezza-contenuto);
}
.larghezza-modulo {
max-width: var(--larghezza-modulo);
}
/* Piede: una riga di 13 px, a tutta larghezza sotto il lato e la pagina;
il testo parte dove parte il marchio nella barra in alto. */
.piede-app {
grid-area: piede;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) var(--s-5);
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--linea);
color: var(--secondario);
font-size: var(--t-nota);
line-height: 1.4;
}
.piede-app a {
display: inline-flex;
align-items: center;
min-height: 24px;
color: var(--secondario);
text-decoration: none;
}
.piede-app a:hover {
color: var(--inchiostro);
text-decoration: underline;
}
.piede-app-contatti {
display: flex;
flex-wrap: wrap;
gap: 4px var(--s-4);
}
.piede-app-tecnologia {
margin-left: auto;
color: var(--terziario);
}
/* Barra in basso, solo su telefono e tablet: cinque voci. */
.schede-telefono {
display: none;
}
.scheda-telefono {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 0;
padding: 0 2px;
border: 0;
background: none;
color: var(--secondario);
font-size: var(--t-nota);
font-weight: 500;
line-height: 1.1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.scheda-telefono:hover {
color: var(--inchiostro);
text-decoration: none;
}
.scheda-telefono:focus-visible {
outline-offset: -4px;
border-radius: var(--raggio);
}
.scheda-telefono > .icona {
width: 20px;
height: 20px;
}
.scheda-telefono[aria-current="page"] {
color: var(--inchiostro);
font-weight: 600;
}
.scheda-telefono[aria-current="page"] > .icona {
color: var(--accento-inchiostro);
}
.scheda-telefono[aria-current="page"]::before {
content: "";
position: absolute;
top: -1px;
left: 24%;
right: 24%;
height: 2px;
border-radius: 0 0 2px 2px;
background: var(--accento-inchiostro);
}
.scheda-telefono > .conteggio {
position: absolute;
top: 4px;
left: calc(50% + 4px);
min-width: 18px;
height: 18px;
padding: 0 5px;
}
/* Barra di pubblicazione: una sola, per tutte le schede dell'assistente. */
.barra-pubblica {
position: sticky;
bottom: var(--s-4);
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-4);
margin-top: var(--s-6);
padding: 8px 8px 8px 16px;
border: 1px solid var(--linea);
border-radius: var(--raggio-riquadro);
background: var(--carta);
color: var(--inchiostro);
box-shadow: var(--ombra-2);
}
.barra-pubblica-stato {
display: flex;
flex: 1 1 260px;
align-items: center;
gap: 8px;
min-width: 0;
font-size: var(--t-piccolo);
line-height: 1.4;
}
.barra-pubblica-stato > .spia {
--spia: var(--attenzione-spia);
}
.barra-pubblica-azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
}
.barra-pubblica-stato a {
color: var(--secondario);
font-weight: 600;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
Accesso: due colonne da 880 px, una sola sotto.
------------------------------------------------------------------------ */
.ingresso {
display: grid;
grid-template-columns: minmax(0, 1fr);
/* Su una colonna il racconto resta della sua altezza: lo spazio in piu'
va al modulo, non a una fascia scura vuota. */
grid-template-rows: auto 1fr;
min-height: 100vh;
min-height: 100dvh;
background: var(--carta);
}
.ingresso-lato {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-6);
padding: var(--s-6) var(--s-5) var(--s-7);
background: var(--carta);
color: var(--inchiostro);
overflow: hidden;
}
/* Il logo di un cliente e' disegnato per il chiaro: sta sempre su bianco. */
.ingresso-marchio {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
border-radius: 12px;
background: #FFFFFF;
color: #17191C;
}
.ingresso-marchio > .marchio-immagine {
max-height: 36px;
}
.ingresso-filo {
display: flex;
align-items: center;
gap: var(--s-3);
}
.ingresso-filo-linea {
position: relative;
flex: 1;
height: 1px;
background: var(--linea-forte);
overflow: hidden;
}
/* Il filo dell'accesso e' fermo: niente segnale che corre. */
.ingresso-filo-linea::after {
content: none;
}
.ingresso-filo > .spia {
--spia: var(--ok-spia);
}
.ingresso-punti {
display: none;
gap: var(--s-4);
margin: 0;
}
.ingresso-punto {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 0 var(--s-3);
align-items: start;
}
.ingresso-punto-icona {
grid-row: span 2;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid var(--linea);
border-radius: var(--raggio);
background: var(--superficie);
color: var(--inchiostro);
}
.ingresso-punto-titolo {
font-weight: 600;
}
.ingresso-punto-testo {
color: var(--secondario);
font-size: var(--t-piccolo);
}
.ingresso-modulo {
display: flex;
flex-direction: column;
padding: var(--s-7) var(--s-5) 0;
}
.ingresso-modulo-interno {
display: grid;
gap: var(--s-4);
width: 100%;
max-width: 380px;
margin: 0 auto auto;
}
.ingresso-modulo > .piede-app {
margin-top: var(--s-8);
padding-inline: 0;
justify-content: center;
}
@media (min-width: 880px) {
.ingresso {
grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
grid-template-rows: none;
}
.ingresso-lato {
position: sticky;
top: 0;
justify-content: space-between;
min-height: 100vh;
min-height: 100dvh;
padding: var(--s-8) var(--s-9);
}
.ingresso-punti {
display: grid;
}
.ingresso-modulo {
padding: var(--s-8) var(--s-8) 0;
}
.ingresso-modulo-interno {
margin: auto;
}
}
/* ---------------------------------------------------------------------------
Aiuti di impaginazione
------------------------------------------------------------------------ */
.pila {
display: grid;
align-content: start;
gap: var(--pila-spazio, var(--spazio-pila));
min-width: 0;
}
.pila-stretta {
--pila-spazio: var(--s-2);
}
.pila-larga {
--pila-spazio: var(--s-6);
}
.riga {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--riga-spazio, var(--s-2));
min-width: 0;
}
.spingi {
margin-left: auto;
}
.griglia {
display: grid;
align-items: start;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--griglia-min, 300px)), 1fr));
gap: var(--s-4);
}
/* Pagina di lavoro in due colonne sopra i 1200 px: il contenuto a sinistra,
una colonna di 340 px a destra (agenda di oggi, sicurezza, pagamenti).
Sotto, una colonna sola, la destra dopo la sinistra. */
.griglia-lavoro {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--s-4);
}
@media (min-width: 1200px) {
.griglia-lavoro {
grid-template-columns: minmax(0, 1fr) 340px;
}
}
.griglia-lavoro > * {
min-width: 0;
}
.solo-lettori {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.salta-contenuto {
position: fixed;
z-index: 100;
top: var(--s-2);
left: var(--s-2);
padding: 10px 14px;
border-radius: var(--raggio);
background: var(--inchiostro);
color: var(--carta);
font-weight: 700;
text-decoration: none;
transform: translateY(-160%);
transition: transform var(--durata) var(--curva);
}
.salta-contenuto:focus {
transform: none;
}
/* ---------------------------------------------------------------------------
Barra dei filtri, sopra un elenco o una tabella: cerca, periodo, filtri,
azioni a destra. Una riga di controlli da 32 px, 12 px sopra la tabella.
------------------------------------------------------------------------ */
.barra-filtri {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin-bottom: var(--s-3);
}
.barra-filtri-cerca {
flex: 1 1 220px;
max-width: 320px;
}
.barra-filtri > .selettore {
flex: 0 1 180px;
}
.barra-filtri-stato {
color: var(--secondario);
font-size: var(--t-nota);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
Dettaglio di una chiamata (portale e pannello, nella .finestra-lato):
testata con chi, quando, durata ed esito; il lettore dell'audio; il
riassunto; la trascrizione. Senza registrazione il lettore lascia il
posto a .lettore-assente.
------------------------------------------------------------------------ */
.chiamata-testata {
display: grid;
gap: 4px;
}
.chiamata-testata-dati {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px var(--s-3);
color: var(--secondario);
font-size: var(--t-piccolo);
}
/* Lettore:
con il comando (pulsante-icona, Ascolta o
Pausa), il tempo, la barra (input type="range" class="lettore-barra",
--avanzamento fra 0 e 1 da JS con style.setProperty), la durata, la
velocita' (segmenti) e Scarica. */
.lettore {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
padding: var(--s-2) var(--s-3);
border: 1px solid var(--linea);
border-radius: var(--raggio-riquadro);
background: var(--superficie-2);
}
.lettore-tempo {
min-width: 5ch;
color: var(--secondario);
font-size: var(--t-piccolo);
text-align: center;
}
.lettore-barra {
flex: 1 1 160px;
min-width: 120px;
height: 20px;
margin: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.lettore-barra::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, var(--accento-inchiostro) calc(var(--avanzamento, 0) * 100%), var(--linea-forte) 0);
}
.lettore-barra::-moz-range-track {
height: 4px;
border-radius: 2px;
background: var(--linea-forte);
}
.lettore-barra::-moz-range-progress {
height: 4px;
border-radius: 2px;
background: var(--accento-inchiostro);
}
.lettore-barra::-webkit-slider-thumb {
width: 12px;
height: 12px;
margin-top: -4px;
border: 0;
border-radius: 50%;
background: var(--accento-inchiostro);
-webkit-appearance: none;
appearance: none;
}
.lettore-barra::-moz-range-thumb {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
background: var(--accento-inchiostro);
}
.lettore-barra:focus-visible {
outline-offset: 4px;
}
.lettore-velocita .segmento {
min-width: 3.5ch;
padding: 0 6px;
font-family: var(--f-cifre);
}
.lettore-nota {
margin-top: 4px;
}
/* Registrazione spenta, cancellata dopo 90 giorni o in arrivo: una riga
quieta al posto del lettore, con il perche'. L'icona e poi il testo in un
solo
(lo spazio fra gli elementi non spezza le frasi). */
.lettore-assente {
display: flex;
align-items: center;
gap: var(--s-2);
min-height: 40px;
padding: var(--s-2) var(--s-3);
border: 1px dashed var(--linea-forte);
border-radius: var(--raggio-riquadro);
color: var(--secondario);
font-size: var(--t-piccolo);
}
/* Trascrizione: una battuta per riga, il tempo a sinistra (un pulsante che
porta l'audio li', o un testo se l'audio non c'e'), chi parla sopra il
testo. La battuta che si sta ascoltando ha aria-current="true".
-
- ...
*/
.trascrizione {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.trascrizione-battuta,
.trascrizione-evento {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: var(--s-2);
padding: 6px var(--s-2) 6px 0;
border-left: 2px solid transparent;
border-radius: 0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
}
.trascrizione-battuta[aria-current="true"] {
border-left-color: var(--accento-inchiostro);
background: var(--accento-tenue);
}
.trascrizione-tempo {
justify-self: start;
height: 20px;
padding: 0 6px;
border: 0;
border-radius: var(--raggio-piccolo);
background: none;
color: var(--terziario);
font-size: var(--t-nota);
line-height: 20px;
text-align: left;
}
button.trascrizione-tempo:hover {
background: var(--superficie-3);
color: var(--inchiostro);
}
.trascrizione-chi {
color: var(--secondario);
font-size: var(--t-nota);
font-weight: 600;
line-height: 20px;
}
.trascrizione-battuta[data-chi="assistente"] .trascrizione-chi {
color: var(--accento-inchiostro);
}
.trascrizione-battuta[data-chi="chiamante"] .trascrizione-chi {
color: var(--inchiostro);
}
.trascrizione-testo {
max-width: 72ch;
font-size: var(--t-testo);
line-height: 1.5;
}
.trascrizione-evento {
color: var(--secondario);
font-size: var(--t-nota);
}
.trascrizione-evento > :last-child::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 6px;
border-radius: 1px;
background: var(--linea-campo);
vertical-align: 1px;
}
/* ---------------------------------------------------------------------------
Servizio collegato (Google Calendar nelle Impostazioni del portale): il
logo, il nome, con chi e' collegato, lo stato, le azioni.
Google Calendar
Collegato come studio@gmail.com, calendario «Studio»
...
------------------------------------------------------------------------ */
.collegamento {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--s-2) var(--s-3);
padding: var(--s-3) var(--s-4);
}
.collegamento-logo {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid var(--linea);
border-radius: var(--raggio);
background: #FFFFFF;
}
.collegamento-logo > img {
width: 20px;
height: 20px;
}
.collegamento-corpo {
min-width: 0;
}
.collegamento-nome {
font-weight: 600;
}
@media (max-width: 679px) {
.collegamento {
grid-template-columns: 32px minmax(0, 1fr);
}
.collegamento > .pillola,
.collegamento > .azioni {
grid-column: 2;
justify-self: start;
}
}
/* «Accedi con Google»: i colori del pulsante di Google (chiaro e scuro),
il logo «G» a colori a sinistra, 40 px. Il logo e' un file del core,
mai caricato da Google.
Accedi con Google */
.pulsante-google {
--p-fondo: #FFFFFF;
--p-testo: #1F1F1F;
--p-bordo: #747775;
--p-sopra: #F2F2F2;
gap: 10px;
min-height: 40px;
padding: 0 12px;
border-radius: var(--raggio);
font-weight: 500;
box-shadow: none;
}
.pulsante-google > img {
width: 18px;
height: 18px;
}
[data-theme="dark"] .pulsante-google {
--p-fondo: #131314;
--p-testo: #E3E3E3;
--p-bordo: #8E918F;
--p-sopra: #1F1F20;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .pulsante-google {
--p-fondo: #131314;
--p-testo: #E3E3E3;
--p-bordo: #8E918F;
--p-sopra: #1F1F20;
}
}
/* ---------------------------------------------------------------------------
Schermi stretti
------------------------------------------------------------------------ */
@media (max-width: 959px) {
.guscio {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"testata"
"pagina"
"piede";
padding-bottom: calc(var(--altezza-schede) + env(safe-area-inset-bottom));
}
.lato {
display: none;
}
.testata-marchio {
flex: 0 1 auto;
}
.pagina {
padding: var(--s-5) var(--s-6) var(--s-8);
}
.piede-app {
padding: var(--s-3) var(--s-6);
}
.schede-telefono {
position: fixed;
z-index: 30;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
height: calc(var(--altezza-schede) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
border-top: 1px solid var(--linea);
background: var(--superficie);
}
.barra-pubblica {
bottom: calc(var(--altezza-schede) + env(safe-area-inset-bottom) + var(--s-3));
}
/* Larghe quanto il contenuto: stessi margini della pagina. */
.notifiche {
left: var(--s-6);
right: var(--s-6);
bottom: max(calc(var(--altezza-schede) + env(safe-area-inset-bottom) + var(--s-3)), var(--notifiche-sopra-barra, 0px));
width: auto;
}
}
@media (max-width: 679px) {
.testata-app {
gap: var(--s-2);
padding: 0 var(--s-2) 0 var(--s-4);
}
.linea-stato-testo,
.linea-stato-dettaglio,
.aggiornato,
.utente-nome {
display: none;
}
.linea-stato-breve {
display: inline;
}
.pagina {
padding: var(--s-4) var(--s-4) var(--s-7);
}
.notifiche {
left: var(--s-4);
right: var(--s-4);
}
.piede-app {
flex-direction: column;
align-items: flex-start;
padding: var(--s-3) var(--s-4);
}
.piede-app-tecnologia {
margin-left: 0;
}
/* Il titolo resta a 20 px; le azioni vanno sotto, a sinistra. */
.intestazione-pagina {
grid-template-columns: minmax(0, 1fr);
margin-bottom: var(--s-3);
}
.chiave-valore {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.chiave-valore dd + dt {
margin-top: var(--s-2);
}
.riquadro-testata,
.riquadro-corpo,
.riquadro-piede,
.elenco-voce,
.da-fare-voce {
padding-left: var(--s-3);
padding-right: var(--s-3);
}
.da-fare-voce {
grid-template-columns: 24px minmax(0, 1fr);
}
.da-fare-voce > :last-child:not(.da-fare-segno):not(:nth-child(2)) {
grid-column: 2;
justify-self: start;
}
.misura {
padding: var(--s-2) var(--s-3);
}
.schede {
gap: var(--s-4);
}
/* I filtri rapidi su una riga che scorre, come le schede: tre righe di
filtri spingevano l'elenco sotto la piega. */
.filtri-rapidi {
flex-wrap: nowrap;
margin-inline: calc(-1 * var(--s-4));
padding: 2px var(--s-4);
overflow-x: auto;
scrollbar-width: none;
}
.filtri-rapidi::-webkit-scrollbar {
display: none;
}
.filtro-rapido {
flex: none;
}
/* Barra dei filtri: la ricerca su tutta la riga, il resto sotto. */
.barra-filtri-cerca {
flex-basis: 100%;
max-width: none;
}
.barra-filtri > .selettore {
flex: 1 1 140px;
}
.barra-pubblica {
padding: var(--s-2);
}
.barra-pubblica-azioni {
justify-content: flex-end;
width: 100%;
}
.barra-pubblica-azioni > .pulsante {
padding: 0 12px;
}
.vuoto {
padding: var(--s-4) var(--s-3);
}
.finestra-lato {
width: 100%;
height: 100dvh;
max-height: none;
margin: 0;
border-width: 0;
border-radius: 0;
}
.finestra-lato[open] {
animation-name: lato-entra;
}
.finestra-lato > .finestra-corpo,
.finestra-lato > form > .finestra-corpo {
padding: var(--s-3) var(--s-4) var(--s-5);
}
.finestra-lato > .finestra-azioni {
flex-direction: row;
flex-wrap: wrap;
}
.finestra-lato > .finestra-azioni > .pulsante {
width: auto;
flex: 1 1 auto;
}
.lettore-barra {
flex-basis: 100%;
order: 5;
}
/* Il tempo («00:00» con il suo spazio interno) e' largo 52 px: la colonna
non si stringe, e fra il tempo e il nome restano 4 px anche al tocco. */
.trascrizione-battuta,
.trascrizione-evento {
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--s-1);
}
}
@media (max-width: 419px) {
.testata-marchio .marchio-nome {
display: none;
}
}
/* Tocco: interruttori, spunte e scelte piu' grandi da prendere col dito. */
@media (max-width: 679px), (pointer: coarse) {
.interruttore-controllo {
width: 40px;
height: 24px;
}
.interruttore-controllo::before {
width: 18px;
height: 18px;
}
.interruttore-controllo:checked::before {
transform: translateX(16px);
}
.spunta,
.scelta {
width: 20px;
height: 20px;
}
.spunta::before {
width: 14px;
height: 14px;
}
.opzione > .spunta,
.opzione > .scelta {
margin-top: 0;
}
/* Le voci del menu a lato crescono da sole: --altezza-controllo, 44 px. */
.tabella-a-voci tr,
.elenco-voce {
min-height: 48px;
}
}
/* ---------------------------------------------------------------------------
Telefono (360-679 px): misure compatte e coerenti, come le app di sistema.
Campi 40 px, pulsanti 36 px, piccoli 32 px (il testo dei campi resta a
16 px: sotto, iOS ingrandisce la pagina al tocco). Il dettaglio di lato
diventa un foglio che lascia scoperta una striscia di sfondo in alto: si
chiude con la X, con Esc o toccando fuori, come ogni finestra.
------------------------------------------------------------------------ */
@media (max-width: 679px) {
:root {
--altezza-controllo: 40px;
--altezza-pulsante: 36px;
--altezza-piccolo: 32px;
}
.pagina {
padding: var(--s-3) var(--s-4) var(--s-7);
}
/* Titolo e azioni sulla stessa riga quando ci stanno; altrimenti le
azioni vanno a capo, allineate a sinistra. */
.intestazione-pagina {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-2) var(--s-3);
}
.intestazione-pagina > :first-child {
flex: 1 1 200px;
min-width: 0;
}
.intestazione-pagina > .percorso {
flex-basis: 100%;
}
.intestazione-pagina-azioni > .pulsante {
min-height: var(--altezza-piccolo);
padding: 0 10px;
font-size: var(--t-piccolo);
}
.pulsante-icona {
min-width: var(--altezza-pulsante);
}
.barra-filtri {
gap: var(--s-2);
}
.riquadro-testata {
padding-top: var(--s-2);
padding-bottom: var(--s-2);
}
.finestra-lato {
height: calc(100dvh - var(--s-8) - env(safe-area-inset-top));
margin: auto 0 0;
border-width: 1px 0 0;
border-radius: var(--raggio-finestra) var(--raggio-finestra) 0 0;
}
.finestra-lato[open] {
animation-name: foglio-sale;
}
.finestra-lato > .finestra-testata {
min-height: 52px;
padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4);
}
/* La X resta un bersaglio da dito anche con i pulsanti piu' bassi. */
.finestra-testata > .pulsante-icona:last-child {
width: 44px;
min-width: 44px;
height: 44px;
}
.finestra-testata {
padding-left: var(--s-4);
}
.finestra-corpo {
padding: var(--s-3) var(--s-4) var(--s-4);
}
.finestra-azioni {
padding-left: var(--s-4);
padding-right: var(--s-4);
}
}
/* Tablet e telefono: lo stato della linea non scavalca cio' che ha accanto
(su 768 px il dettaglio finiva sopra «Aggiornato alle»). */
@media (max-width: 959px) {
.linea-stato {
overflow: hidden;
}
.linea-stato-dettaglio {
overflow: hidden;
text-overflow: ellipsis;
}
.aggiornato {
display: none;
}
}
/* ---------------------------------------------------------------------------
Movimento ridotto e colori forzati
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.segnaposto {
background: var(--incavo);
}
}
@media (forced-colors: active) {
.spia,
.pillola::before {
forced-color-adjust: none;
}
/* Senza fondi le etichette di stato e la voce aperta del menu restano
riconoscibili dal bordo. */
.pillola,
.filtro-rapido[aria-pressed="true"] {
border-color: CanvasText;
}
.menu-lato-voce[aria-current="page"] {
outline: 1px solid CanvasText;
}
.trascrizione-battuta[aria-current="true"] {
border-left-color: Highlight;
}
.interruttore-controllo,
.spunta,
.scelta {
border-color: ButtonText;
}
.interruttore-controllo:checked,
.spunta:checked,
.scelta:checked {
background: Highlight;
}
.scheda[aria-selected="true"]::after,
.scheda[aria-current="page"]::after,
.scheda-telefono[aria-current="page"]::before {
background: Highlight;
}
}