/* css/area-gmail.css · Posta (Gmail) sui token. Filone nuovo-design, PR 12: 12a lettura (pannello, cartelle, lista, lettura, allegati, collegamento alle operazioni), 12b scrittura (finestra di scrittura, editor, menzioni, allegati in uscita, scelte da Drive, suggerimenti email). Regole del file (come area-task.css): - mobile-first: la base è il telefono (una colonna); @media screen and (min-width:769px) due colonne con le cartelle in una striscia sopra, (min-width:1100px) tre colonne (cartelle, lista, lettura), (min-width:1600px) quattro con "Oggi" e "Speciali"; - solo token: niente hex, niente rem, niente alias vecchi, niente !important, niente font-family. Eccezioni della 12b, pinnate dai test: il testo che si scrive (.gm-rte-body: dimensione, famiglia, colore e interlinea di prima; elenchi e citazione con margini e bordo di prima: parte con l'email, vedi la sezione Scrittura) e l'anteprima dei font del menu Font; - :hover solo dentro (hover:hover); le transizioni si spengono nel blocco reduced-motion, che sta in fondo ad area-shell.css (ultimo foglio); - caricato dopo base.css e dopo gli altri file di area, prima di area-shell.css; - il corpo delle email (.gm-body) è HTML di terzi e il suo stile NON si tocca: qui ci sono solo il foglio su cui sta (carta bianca nei due temi, --fc-paper: le email sono scritte per il bianco) e il contenimento. Il contenimento non usa !important: #gmailPreview .gm-body * (1,1,0) batte ogni classe della app che un'email si porta dietro (DOMPurify lascia passare class), e gli stili inline dell'email li riscrive già _sanitizeHtml (position, z-index, pointer-events); contain:layout paint tiene dentro il riquadro anche quello che sfugge. */ /* ── Compose e bottone bug (PR 15, era in coda a style.css) ── Il compose e il bottone bug (index.html, fixed bottom-right) condividono l'angolo: col compose aperto il bug sparisce, o coprirebbe "Invia". Senza !important: il peso (1,1,1) batte #bugReportBtn{display:flex} di area-minori.css (1,0,0); nessuno stile scritto sul bottone, la finestra si apre togliendo l'attributo hidden. */ body:has(.fc-compose-float) #bugReportBtn,body:has(.fc-compose-float) #bugReportModal{display:none} /* ── Pannello e colonne ── */ #pan-gmail{padding:0} #pan-gmail.active{display:flex;flex-direction:column;gap:var(--sp-3)} .gm-layout{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label)} .gm-folders{display:flex;flex:none;gap:var(--sp-2);overflow-x:auto;padding:var(--sp-2);border-bottom:1px solid var(--fc-sep);scrollbar-width:none} .gm-folders::-webkit-scrollbar{display:none} .gm-list{min-width:0;max-height:40vh;overflow-y:auto;border-bottom:1px solid var(--fc-sep)} .gm-preview{min-width:0;background:var(--fc-bg);color:var(--fc-label)} .gm-right{display:none;min-width:0;border-left:1px solid var(--fc-sep)} #pan-gmail.is-scollegato .gm-toolbar,#pan-gmail.is-scollegato .gm-folders,#pan-gmail.is-scollegato .gm-preview,#pan-gmail.is-scollegato .gm-right{display:none} #pan-gmail.is-scollegato .gm-layout{display:block} #pan-gmail.is-scollegato .gm-list{max-height:none;border-bottom:0} @media screen and (min-width:769px){ #pan-gmail.active{height:calc(100vh - 52px - 2 * var(--sp-4))} .gm-layout{display:grid;flex:1;min-height:0;grid-template-columns:minmax(220px,2fr) 3fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"cartelle cartelle" "lista lettura"} .gm-folders{grid-area:cartelle} .gm-list{grid-area:lista;max-height:none;border-bottom:0;border-right:1px solid var(--fc-sep)} .gm-preview{grid-area:lettura;overflow-y:auto} .gm-right{grid-area:destra} } @media screen and (min-width:1100px){ .gm-layout{grid-template-columns:200px minmax(280px,1fr) 2fr;grid-template-rows:minmax(0,1fr);grid-template-areas:"cartelle lista lettura"} .gm-folders{flex-direction:column;gap:2px;overflow-x:visible;overflow-y:auto;border-bottom:0;border-right:1px solid var(--fc-sep)} } @media screen and (min-width:1600px){ .gm-layout{grid-template-columns:200px minmax(300px,1fr) 2fr 260px;grid-template-areas:"cartelle lista lettura destra"} .gm-right{display:block;overflow-y:auto} } /* ── Bottoni dentro il pannello: toglie maiuscolo, spaziatura e 9-10 px di .btn/.btn-sm (in base.css, erano in style.css) ── */ #pan-gmail .btn,.gm-anteprima .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:0 var(--sp-3);font-size:13px;letter-spacing:0;text-transform:none} #pan-gmail .btn-green{width:auto} .gm-ico{flex:none} .gm-ico-doppia{margin-left:calc(-1 * var(--sp-2))} /* ── Barra: titolo, ricerca, filtri, selezione, "Non lette", Componi ── */ .gm-toolbar{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)} .gm-toolbar-left{position:relative;display:flex;flex:1 1 320px;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);min-width:0} .gm-title{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:20px;line-height:1.2;font-weight:700;color:var(--fc-label);white-space:nowrap} .gm-title .gm-ico{color:var(--fc-accent)} .gm-search-box{position:relative;display:flex;flex:1 1 200px;align-items:center;min-width:0;max-width:420px} .gm-search-icon{position:absolute;left:var(--sp-3);color:var(--fc-label2);pointer-events:none} .gm-search-box input{width:100%;min-height:36px;padding:0 36px;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:14px} .gm-search-box input:focus{border-color:var(--fc-accent)} .gm-search-clear{position:absolute;right:var(--sp-1);display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font-size:18px;line-height:1;cursor:pointer} .gm-search-ac{position:absolute;top:calc(100% + var(--sp-1));left:0;right:0;z-index:60;max-height:240px;overflow-y:auto;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)} .gm-ac-item{min-height:36px;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .gm-ac-item:last-child{border-bottom:0} .gm-ac-item.is-attivo{background:var(--fc-accent-soft);color:var(--fc-label)} .gm-ac-mail{color:var(--fc-label2)} .gm-ac-item.is-attivo .gm-ac-mail{color:var(--fc-label)} .gm-search-filters{position:absolute;top:calc(100% + var(--sp-1));left:0;right:0;z-index:50;display:flex;flex-direction:column;gap:var(--sp-2);max-width:560px;padding:var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)} .gm-sf-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)} .gm-sf-row label{font-size:12px;font-weight:600;color:var(--fc-label2);white-space:nowrap} .gm-sf-input{flex:1 1 140px;min-width:0;min-height:36px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:14px} .gm-sf-input-lungo{flex-grow:2} .gm-sf-cb{width:18px;height:18px;margin:0;accent-color:var(--fc-accent-fill)} .gm-toolbar-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2);min-width:0} .gm-bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--rs);background:var(--fc-accent-soft);color:var(--fc-label);font-size:13px;font-weight:600} .gm-bulk-btn{width:32px;height:32px;min-height:32px;padding:0;border:1px solid var(--fc-sep);background:var(--fc-card);color:var(--fc-label)} .gm-bulk-btn svg{display:block} #pan-gmail .gm-bulk-btn{padding:0} .gm-ico-stella{color:var(--fc-warn)} .gm-unread-toggle{display:flex;align-items:center;gap:var(--sp-1);min-height:36px;font-size:13px;font-weight:500;color:var(--fc-label2);cursor:pointer;user-select:none} .gm-unread-toggle input{width:18px;height:18px;margin:0;accent-color:var(--fc-accent-fill)} .gm-email-count{font-size:12px;color:var(--fc-label2);white-space:nowrap} .gm-compose-btn{background:var(--fc-accent-fill);color:var(--fc-on-accent);white-space:nowrap} /* ── Colonna 1: cartelle (striscia di chip sotto i 1100 px, colonna sopra) ── */ .gm-folder-item{display:flex;flex:none;align-items:center;gap:var(--sp-2);min-height:36px;padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer} .gm-folder-item.active{background:var(--fc-accent-soft);color:var(--fc-accent);font-weight:600} .gm-folder-icon{display:flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;color:var(--fc-label2)} .gm-folder-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .gm-folder-item.active .gm-folder-icon{color:var(--fc-accent)} .gm-folder-name{min-width:0;overflow:hidden;text-overflow:ellipsis} .gm-folder-count{margin-left:auto;font-size:12px;font-weight:600} /* eredita il testo della voce: --fc-label2 sul riempimento della striscia sarebbe 4,16:1 */ .gm-folder-sep{flex:none;align-self:stretch;width:1px;background:var(--fc-sep)} .gm-folder-label-header{flex:none;align-self:center;padding:0 var(--sp-2);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)} @media screen and (min-width:1100px){ .gm-folder-item{border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)} .gm-folder-item.active{background:var(--fc-accent-soft);color:var(--fc-accent)} .gm-folder-sep{align-self:auto;width:auto;height:1px;margin:var(--sp-2) var(--sp-3)} .gm-folder-label-header{align-self:auto;padding:var(--sp-3) var(--sp-3) var(--sp-1)} } /* ── Colonna 2: lista ── */ .gm-row{position:relative;display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border-bottom:1px solid var(--fc-sep);background:var(--fc-card);color:var(--fc-label);cursor:pointer} .gm-row.gm-active{background:var(--fc-accent-soft);box-shadow:inset 3px 0 0 var(--fc-accent-fill)} .gm-row-ctrl{display:flex;flex:none;flex-direction:column;align-items:center;gap:var(--sp-1)} .gm-row-cb{width:18px;height:18px;margin:0;accent-color:var(--fc-accent-fill);cursor:pointer} .gm-row-star{padding:0;border:0;background:none;color:var(--fc-label2);font-size:18px;line-height:1;cursor:pointer} .gm-row-star.starred{color:var(--fc-warn)} .gm-unread-dot{flex:none;width:8px;height:8px;margin-top:var(--sp-3);border-radius:50%;background:var(--fc-accent-fill)} .gm-avatar{display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--fc-fill);color:var(--fc-label);font-size:13px;font-weight:600} .gm-row-content{flex:1;min-width:0} .gm-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)} .gm-from{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500} .gm-date{flex:none;font-size:12px;color:var(--fc-label2);white-space:nowrap} .gm-subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px} .gm-subj-att{color:var(--fc-label2)} .gm-snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--fc-label2)} /* Riga aperta: sul verde chiaro il grigio secondario in scuro scende sotto 4,5:1, lì il testo è pieno */ .gm-row.gm-active .gm-date,.gm-row.gm-active .gm-snippet,.gm-row.gm-active .gm-subj-att,.gm-row.gm-active .gm-row-star:not(.starred){color:var(--fc-label)} .gm-unread .gm-from{font-weight:700} .gm-unread .gm-subj{font-weight:600} .gm-row-actions{position:absolute;top:50%;right:var(--sp-2);display:none;gap:2px;padding:2px;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);transform:translateY(-50%);box-shadow:var(--fc-shadow)} .gm-row-action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);cursor:pointer} .gm-row-action-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none} .gm-list-piede{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)} .gm-fine{font-size:12px;color:var(--fc-label2)} .gm-caricamento{display:flex;justify-content:center;padding:var(--sp-6) var(--sp-4)} .gm-vuoto{padding:var(--sp-6) var(--sp-4);text-align:center;font-size:14px;color:var(--fc-label2)} .gm-vuoto-ico{display:block;margin:0 auto var(--sp-2);opacity:.3} .gm-errore{padding:var(--sp-4);text-align:center;font-size:14px;color:var(--fc-danger)} .gm-stato{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--fc-label)} .gm-stato-ico{color:var(--fc-accent)} .gm-stato-t{font-size:17px;font-weight:600} .gm-stato-s{max-width:320px;font-size:14px;color:var(--fc-label2)} /* ── Colonna 4: "Oggi" e "Speciali" (solo da 1600 px) ── */ .gm-right-section{padding:var(--sp-3)} .gm-right-sep{border-top:1px solid var(--fc-sep)} .gm-right-title{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)} .gm-right-vuoto{font-size:13px;color:var(--fc-label2)} .gm-cal-item{display:flex;gap:var(--sp-2);padding:var(--sp-1) 0;border-bottom:1px solid var(--fc-sep);font-size:13px} .gm-cal-item:last-child{border-bottom:0} .gm-cal-time{flex:none;min-width:44px;font-weight:600;color:var(--fc-accent)} .gm-cal-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gm-star-item{display:flex;align-items:center;gap:var(--sp-2);min-height:36px;border-bottom:1px solid var(--fc-sep);font-size:13px;cursor:pointer} .gm-star-item:last-child{border-bottom:0} .gm-star-from{flex:none;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .gm-star-subj{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fc-label2)} /* ── Colonna 3: lettura ── */ .gm-preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);min-height:200px;height:100%;padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--fc-label2)} .gm-preview-empty-ico{opacity:.3} .gm-preview-empty-t{font-size:13px} .gm-preview-content{padding:var(--sp-4)} .gm-preview-subject{margin-bottom:var(--sp-3);font-size:20px;line-height:1.25;font-weight:700;color:var(--fc-label);overflow-wrap:anywhere} .gm-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)} .gm-preview-meta{margin-bottom:var(--sp-3);font-size:13px;color:var(--fc-label2)} .gm-preview-from-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-1) var(--sp-2)} .gm-preview-from-line strong{min-width:0;font-size:14px;color:var(--fc-label);overflow-wrap:anywhere} .gm-preview-date{font-size:12px;white-space:nowrap} .gm-preview-to{overflow-wrap:anywhere} .gm-thread-header{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2);font-size:12px;font-weight:600;color:var(--fc-label2)} .gm-thread-header svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .gm-thread-msg{margin-bottom:var(--sp-2);overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)} .gm-thread-msg.gm-thread-collapsed{cursor:pointer} .gm-thread-msg-header{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) var(--sp-3);cursor:pointer} .gm-thread-msg-avatar{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--fc-fill);color:var(--fc-label);font-size:12px;font-weight:600} .gm-thread-msg-meta{flex:1;min-width:0} .gm-thread-msg-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600} .gm-thread-msg-snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--fc-label2)} .gm-thread-msg-date{flex:none;font-size:12px;color:var(--fc-label2);white-space:nowrap} .gm-thread-expand-icon{display:flex;flex:none;width:16px;height:16px;color:var(--fc-label2)} .gm-thread-expand-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} .gm-thread-msg:not(.gm-thread-collapsed) .gm-thread-expand-icon{transform:rotate(180deg)} .gm-thread-msg-body{padding:var(--sp-3);border-top:1px solid var(--fc-sep)} .gm-thread-msg-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--fc-sep)} /* ── Corpo dell'email: carta e contenimento (lo stile dell'email non si tocca) ── */ .gm-body{position:relative;color-scheme:light;isolation:isolate;contain:layout paint;overflow:auto;padding:var(--sp-4);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-paper);color:var(--fc-on-paper);font-size:14px;line-height:1.5;overflow-wrap:break-word} #gmailPreview .gm-body *{position:static;z-index:auto;pointer-events:auto} #gmailPreview .gm-body img{max-width:100%;height:auto} #gmailPreview .gm-body a{color:var(--fc-paper-link)} .gm-body-testo{white-space:pre-wrap} .gm-body-nota,.gm-body-vuoto{display:block;margin-top:var(--sp-2);font-size:12px;font-style:italic} /* ── Allegati ricevuti ── */ .gm-attachments{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3);padding:var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)} .gm-att-head{width:100%;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)} .gm-att-card{display:flex;flex:1 1 240px;align-items:center;gap:var(--sp-2);min-width:0;max-width:360px;padding:var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label)} .gm-att-icon{flex:none;font-size:20px} .gm-att-info{flex:1;min-width:0} .gm-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600} .gm-att-size{font-size:12px;color:var(--fc-label2)} .gm-att-btns{display:flex;flex:none;gap:var(--sp-1)} .gm-att-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font-size:15px;cursor:pointer} .gm-att-btn-drive{color:var(--fc-accent)} .gm-att-btn-sign{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent)} .gm-att-loading{pointer-events:none;opacity:.5;cursor:progress} .gm-att-err{width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-danger);border-radius:var(--rs);background:var(--fc-danger-soft);color:var(--fc-danger);font-size:13px;font-weight:600} .gm-anteprima{display:flex;flex-direction:column;gap:var(--sp-2)} .gm-anteprima-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)} .gm-anteprima-nome{min-width:0;font-size:14px;font-weight:700;overflow-wrap:anywhere} .gm-anteprima-pdf{width:100%;height:75vh;border:0;border-radius:var(--rs)} .gm-anteprima-img{display:block;max-width:100%;max-height:75vh;margin:0 auto;border-radius:var(--rs)} /* ── Collegamento all'operazione ── */ .gm-link-op-bar{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)} .gm-linked-badge{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);border-radius:var(--rs);background:var(--fc-accent-soft);color:var(--fc-accent);font-size:13px;font-weight:500} .gm-linked-badge strong{font-weight:700} .gm-linked-apri{min-width:0;cursor:pointer} .gm-unlink-btn{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-accent);font-size:14px;cursor:pointer} .gm-link-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:13px;color:var(--fc-label)} .gm-link-suggest-btn{min-height:28px;padding:0 var(--sp-3);border:0;border-radius:var(--rs);background:var(--fc-accent-fill);color:var(--fc-on-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .gm-link-op-btn{width:100%;min-height:36px;padding:0 var(--sp-3);border:1px dashed var(--fc-accent);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .gm-link-op-dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;max-height:280px;margin-top:var(--sp-1);overflow-y:auto;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)} .gm-link-op-search{width:100%;min-height:36px;padding:0 var(--sp-3);border:0;border-bottom:1px solid var(--fc-sep);border-radius:var(--rs) var(--rs) 0 0;background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:14px} .gm-link-op-item{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);font-size:13px;cursor:pointer} .gm-link-op-item:last-child{border-bottom:0} .gm-link-op-id{font-weight:700} .gm-link-op-dove{font-size:12px;color:var(--fc-label2)} .gm-link-op-vuoto{padding:var(--sp-2) var(--sp-3);text-align:center;font-size:13px;color:var(--fc-label2)} /* ── Annulla (5 secondi dopo archivia/cestina): coppia dei toast, verso il basso ── */ .gm-undo-toast{position:fixed;left:50%;bottom:calc(var(--fc-safe-bottom) + var(--sp-5));z-index:9999;display:flex;align-items:center;gap:var(--sp-4);max-width:calc(100vw - 2 * var(--sp-4));padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-radius:var(--r);background:var(--fc-toast-bg);color:var(--fc-toast-fg);font-size:14px;box-shadow:var(--fc-shadow);opacity:0;pointer-events:none;transform:translate(-50%,var(--sp-5));transition:opacity .25s,transform .25s} .gm-undo-toast.visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .gm-undo-btn{min-height:36px;padding:0 var(--sp-2);border:0;border-radius:var(--rs);background:none;color:var(--fc-toast-fg);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer} /* ── Badge delle non lette nella barra laterale: lo accende gmail.js togliendo hidden (.nav-badge di area-shell.css resta display:none: ogni badge si accende con la sua regola, #msgBadge in area-minori.css, e hidden lo spegne) ── */ #gmailBadge{display:inline-flex} /* ── Hover (solo col puntatore) ── */ @media (hover:hover){ .gm-search-clear:hover{background:var(--fc-fill);color:var(--fc-label)} .gm-bulk-btn:hover{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)} .gm-bulk-danger:hover{border-color:var(--fc-danger);background:var(--fc-danger-soft);color:var(--fc-danger)} .gm-folder-item:hover{background:var(--fc-bg);color:var(--fc-label)} .gm-folder-item.active:hover{background:var(--fc-accent-soft);color:var(--fc-accent)} .gm-star-item:hover{color:var(--fc-accent)} .gm-row:hover{background:var(--fc-bg)} .gm-row.gm-active:hover{background:var(--fc-accent-soft)} .gm-row-star:hover{color:var(--fc-warn)} .gm-row:hover .gm-row-actions{display:flex} .gm-row-action-btn:hover{background:var(--fc-fill);color:var(--fc-label)} .gm-row-action-btn.gm-trash-btn:hover{background:var(--fc-danger-soft);color:var(--fc-danger)} .gm-thread-msg.gm-thread-collapsed:hover{border-color:var(--fc-accent)} .gm-thread-msg-header:hover{background:var(--fc-bg)} .gm-att-btn:hover{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)} .gm-link-op-btn:hover{border-style:solid;background:var(--fc-accent-soft)} .gm-link-op-item:hover{background:var(--fc-accent-soft)} .gm-link-op-item:hover .gm-link-op-dove{color:var(--fc-label)} .gm-unlink-btn:hover{background:var(--fc-card)} .gm-undo-btn:hover{text-decoration:none} } /* ── Telefono: campi a 16 px (niente zoom di iOS) e alti 44, qui e non nella regola dei campi in coda a base.css ── */ @media screen and (max-width:768px){ .gm-toolbar-left{flex-basis:100%} .gm-search-box{max-width:none} .gm-search-box input,.gm-sf-input,.gm-link-op-search{min-height:44px;font-size:16px} .gm-preview-content{padding:var(--sp-3)} .gm-undo-toast{bottom:calc(var(--fc-safe-bottom) + var(--sp-4))} } /* ── Touch: bersagli a 44 px ── */ @media (hover:none){ #pan-gmail .btn,.gm-anteprima .btn{min-height:44px} .gm-row-action-btn,.gm-att-btn,.gm-unlink-btn,.gm-bulk-btn,.gm-search-clear{width:44px;height:44px} .gm-folder-item,.gm-star-item,.gm-ac-item,.gm-link-op-item,.gm-unread-toggle,.gm-link-op-btn,.gm-undo-btn,.gm-link-suggest-btn{min-height:44px} .gm-row-cb,.gm-sf-cb,.gm-unread-toggle input{width:22px;height:22px} } /* ══ Scrittura (design-12b): finestra di scrittura, editor, suggerimenti dei contatti e menzioni, allegati in uscita, scelta da Drive nella finestra, "Salva su Drive", pannello "Suggerimenti email". IL TESTO CHE SI SCRIVE PARTE CON L'EMAIL. In Chrome, unendo due righe (Backspace a inizio riga) o incollando dentro l'editor, il browser scrive nel testo le dichiarazioni delle regole CSS che valgono sul riquadro, come sono scritte (), e per ogni proprietà vale l'ultima regola caricata: quei valori arrivano a chi riceve. Per questo .gm-rte-body tiene alla lettera le dichiarazioni che erano in style.css: font-family inherit (senza, Chrome scrive l'elenco dei font di sistema), dimensione .78rem solo da computer (da telefono l'ultima regola deve restare quella dei campi in coda a base.css, 16 px), colore #222, interlinea 1.5, elenchi e citazione con margini, rientro e bordo di prima per esteso (incollando, Chrome toglie dal testo solo gli stili uguali alle regole e non riconosce uguale un var(--…)), e il testo citato il suo #555: sono le sole eccezioni del file alla regola dei token, pinnate da tests/area-gmail.test.js ("il testo che parte con l'email") ed e2e/prove/ scrittura-testo-email.spec.js (Chrome vero, review della PR 12b). Il fondo è la carta (#FFFFFF nei due temi), uguale al #fff di prima. Il link della menzione e i valori del menu Font stanno nel JS e non si toccano. L'anteprima della firma (.fc-compose-firma) non parte: la firma inviata arriva da Gmail (_loadGmailSignature). ══ */ /* ── Bottoni nelle finestre della scrittura (stesso motivo di #pan-gmail .btn) ── */ .fc-compose-float .btn,#pan-suggEmail .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:0 var(--sp-3);font-size:13px;letter-spacing:0;text-transform:none} .fc-compose-float .btn-green,#pan-suggEmail .btn-green{width:auto} /* ── Finestra di scrittura: in basso a destra da computer, foglio dal basso da telefono ── */ .fc-compose-float{position:fixed;right:var(--sp-5);bottom:0;z-index:2000;display:flex;flex-direction:column;width:480px;max-width:calc(100vw - 2 * var(--sp-4));max-height:75vh;overflow:hidden;border:1px solid var(--fc-sep);border-bottom:0;border-radius:var(--r) var(--r) 0 0;background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow);animation:fcSlideUp .2s ease} @keyframes fcSlideUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}} .fc-compose-float.fc-compose-minimized{width:320px;max-height:44px;cursor:pointer} .fc-compose-float.fc-compose-minimized .fc-compose-body{display:none} .fc-compose-float.fc-compose-expanded{width:680px;max-height:85vh} .fc-compose-header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-1) 0 var(--sp-4);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg);color:var(--fc-label);user-select:none} .fc-compose-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600} .fc-compose-header-btns{display:flex;flex:none;gap:2px} .fc-compose-hbtn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-label2);font-size:15px;line-height:1;cursor:pointer} .fc-compose-body{display:flex;flex:1;flex-direction:column;gap:var(--sp-2);min-height:0;overflow-y:auto;padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--fc-safe-bottom))} .fc-compose-field{display:flex;align-items:center;gap:var(--sp-2)} .fc-compose-field label{flex:none;min-width:56px;font-size:12px;font-weight:600;text-align:right;color:var(--fc-label2)} .fc-compose-field input{flex:1;min-width:0;min-height:36px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:14px} .fc-compose-field input:focus{border-color:var(--fc-accent)} .fc-compose-field .gm-rte-wrap{flex:1;min-width:0} .fc-compose-re{padding:0 var(--sp-1);font-size:13px;color:var(--fc-label2);overflow-wrap:anywhere} .fc-compose-firma{padding:var(--sp-2) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-paper);color:var(--fc-on-paper);font-size:12px} .fc-compose-firma:empty{display:none} .fc-compose-azioni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);padding-top:var(--sp-1)} /* ── Editor: barra degli strumenti sui token, il testo sulla carta coi valori di prima (vedi sopra) ── */ .gm-rte-wrap{overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)} .gm-rte-wrap:focus-within{border-color:var(--fc-accent)} .gm-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:var(--sp-1);border-bottom:1px solid var(--fc-sep);background:var(--fc-bg);color:var(--fc-label)} .gm-rte-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--sp-1);border:0;border-radius:var(--rs);background:none;color:var(--fc-label);font:inherit;font-size:14px;font-weight:700;cursor:pointer} .gm-rte-colore{position:relative;flex-direction:column;gap:1px;overflow:hidden} .gm-rte-picker{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer} .gm-rte-riga{display:block;width:14px;height:3px;background:currentColor} .gm-rte-evidenzia{background:var(--fc-warn-soft);color:var(--fc-label)} .gm-rte-via{color:var(--fc-danger)} .gm-rte-sel{height:32px;max-width:96px;padding:0 var(--sp-1);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;cursor:pointer} /* Unico font-family del file: l'anteprima di ogni font nel suo menu. Il nome arriva dall'opzione come variabile (style="--gm-font:…"): il valore dell'opzione, che finisce nell'email, resta quello. */ .gm-rte-sel option{font-family:var(--gm-font,inherit)} .gm-rte-sep{flex:none;width:1px;height:20px;margin:0 var(--sp-1);background:var(--fc-sep)} /* Eccezioni documentate (testo che parte con l'email): color #222, font-family inherit e, solo da computer, font-size .78rem come prima (vedi l'intestazione della sezione). */ .gm-rte-body{min-height:180px;max-height:400px;overflow-y:auto;padding:var(--sp-3);background:var(--fc-paper);color:#222;font-family:inherit;line-height:1.5;outline:0} @media screen and (min-width:769px){ .gm-rte-body{font-size:.78rem} } .gm-rte-body:empty:before{content:attr(data-placeholder);font-style:italic;color:var(--fc-label3);pointer-events:none} /* Eccezioni documentate: elenchi e citazione con i valori di prima scritti per esteso. Copiando e incollando dentro l'editor, Chrome toglie dal testo solo gli stili uguali alle regole del riquadro, e un var(--…) non lo riconosce uguale: l'elenco o la citazione incollati partivano con margini e bordo scritti dentro (review della PR 12b). */ .gm-rte-body ul,.gm-rte-body ol{margin:.3rem 0 .3rem 1.5rem;padding:0} .gm-rte-body li{margin:2px 0} .gm-rte-body blockquote{border-left:3px solid #ccc;margin:.5rem 0;padding:.3rem .8rem;color:#555} /* ── Suggerimenti dei contatti (A, CC, Partecipanti del calendario) e menzioni (@ nel testo). Globale: la tendina sta nel body, sopra la finestra di scrittura e quella dell'evento. Posizione e larghezza dal JS come variabili; le voci sono le .gm-ac-item della 12a. ── */ .gm-ac-dropdown{position:fixed;top:var(--gm-ac-y,var(--sp-2));left:var(--gm-ac-x,var(--sp-2));z-index:99999;width:var(--gm-ac-w,auto);min-width:220px;max-width:calc(100vw - 2 * var(--sp-2));max-height:200px;overflow-y:auto;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)} /* ── Allegati in uscita ── */ .comp-att-zone{display:flex;flex-direction:column;gap:var(--sp-2)} .comp-att-drop{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border:2px dashed var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label2);font-size:13px;text-align:center} .comp-att-drop-active{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)} .comp-att-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)} .comp-att-list{display:flex;flex-direction:column;gap:var(--sp-1)} .comp-att-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-bg);color:var(--fc-label);font-size:13px} .comp-att-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .comp-att-size{flex:none;font-size:12px;color:var(--fc-label2)} .comp-att-rm{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--fc-danger);font-size:14px;font-weight:700;cursor:pointer} .comp-att-oltre{font-size:13px;font-weight:600;color:var(--fc-danger)} /* ── Allegare da Drive (dentro la finestra) ── */ .drive-att-picker{position:relative;max-height:260px;overflow-y:auto;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);box-shadow:var(--fc-shadow)} .drive-att-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);border-bottom:1px solid var(--fc-sep);background:var(--fc-card);color:var(--fc-label)} .drive-att-bc{min-width:0;font-size:13px;color:var(--fc-label2);overflow-wrap:anywhere} .drive-att-bc strong{color:var(--fc-label)} .drive-att-bc-link{color:var(--fc-accent);text-decoration:underline;cursor:pointer} .drive-att-section{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fc-label2)} .drive-att-section-dopo{margin-top:var(--sp-1)} .drive-att-row{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep);font-size:13px;overflow-wrap:anywhere;cursor:pointer} .drive-att-row:last-child{border-bottom:0} .drive-att-folder{font-weight:600} .drive-att-file{color:var(--fc-label)} .drive-att-msg{padding:var(--sp-3);text-align:center;font-size:13px;color:var(--fc-label2)} .drive-att-msg.is-errore{color:var(--fc-danger)} /* ── "Salva su Drive" (js/modules/drive-save.js, nella finestra comune): comune a posta e firma PDF. Passo 1 la scelta dell'operazione (.gm-link-op-search e .gm-link-op-item della 12a), passo 2 nome del file e cartella di destinazione. ── */ .fc-ds-lista{display:flex;flex-direction:column;gap:var(--sp-2)} .fc-ds-cerca{border:1px solid var(--fc-sep);border-radius:var(--rs)} #driveSaveList{overflow:hidden;border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label)} .fc-ds-op-id{font-weight:700} .fc-ds-op-dove{font-size:12px;color:var(--fc-label2)} /* Righe delle operazioni e delle cartelle: