/* ============================================================================= IL TASTO × DELL'ANTEPRIMA DEL LINK NEL COMPOSITORE (30/09/2026) IL TITOLARE: «quando metto un link su un post.. devo poter rimuover anteprima con tasto close». Il tasto lo costruisce `feed.js` (`.link-preview-close`); qui c'e' solo il vestito. PERCHE' UN FOGLIO SUO, e non due righe in `mood.css`/`mood-ui.css` dove stanno le altre regole della card: quei fogli vengono RISCRITTI da fuori (lo dice `feed.html` accanto ai ``, e il 30/09/2026 una regola messa in `mood.css` e' stata annullata la sera stessa). Questo file si carica dopo di loro e dentro non ci mette niente di quel che c'e' gia': solo il ×, la riga «Anteprima tolta» e la misura comoda al tocco. Il tasto sta SOPRA la card (in alto a destra): sulla foto quando c'e', e sulla riga del titolo quando la pagina non ne ha una. Tondo e scuro perche' deve leggersi su qualunque immagine. Perche' le regole portano davanti `#createPostModal`: dentro il compositore il foglio vecchio (`feed-legacy.css`) ha `.post-box button { width: max-content; padding: .3rem .7rem; border-radius: 6px }`, che batte una regola di sola classe e misurava il × **40×32** invece dei 44×44 voluti (misurato dal controllo `check_anteprima_link.py`, non a occhio). Con l'identificatore davanti la misura e' la mia, e vale anche per il `border-radius` e il colore del passaggio del mouse. ============================================================================= */ /* Il riquadro che tiene insieme card e ×: e' lui il riferimento della posizione. */ #createPostModal .link-preview-box { position: relative; } #createPostModal .link-preview-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.58); color: #fff; cursor: pointer; line-height: 0; font-size: 0; transition: background var(--mood-transition), transform var(--mood-transition) } #createPostModal .link-preview-close svg { width: 18px; height: 18px } #createPostModal .link-preview-close:hover { background: rgba(0, 0, 0, 0.78); color: #fff } #createPostModal .link-preview-close:active { transform: scale(0.94) } #createPostModal .link-preview-close:focus-visible { outline: 2px solid var(--mood-primary); outline-offset: 2px } /* LA RIGA DELLO STATO: la scheda non c'e' piu' e si vede perche'. */ #createPostModal .link-preview-tolta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 8px 4px 8px 12px; border: 1px dashed var(--mood-border); border-radius: var(--mood-radius-sm); color: var(--mood-text-muted); font-size: 0.8rem; line-height: 1.3 } #createPostModal .link-preview-ripristina { flex: none; width: auto; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--mood-radius-sm); background: transparent; color: var(--mood-primary-light); font: inherit; font-weight: 600; font-size: 0.8rem; cursor: pointer } #createPostModal .link-preview-ripristina:hover { background: var(--mood-bg-hover); color: var(--mood-primary-light) } /* AL TOCCO IL TASTO DEVE ESSERE 44×44 (la misura di casa: `mood-ui.css` la applica al × dei media e alle frecce del carosello). Il cerchio visibile resta piccolo: la parte trasparente intorno e' quella che si tocca, e sopra la card sta comunque dentro il bordo del riquadro. */ @media (max-width: 768px) { #createPostModal .link-preview-close { top: 0; right: 0; width: 44px; height: 44px; background: transparent } #createPostModal .link-preview-close::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); z-index: -1 } #createPostModal .link-preview-close:hover, #createPostModal .link-preview-close:active { background: transparent } #createPostModal .link-preview-ripristina { min-height: 44px; padding: 10px 12px } } /* ============================================================================= LE FRECCE DEL CAROSELLO NON DEVONO ESISTERE QUANDO NON C'E' NIENTE DA SCORRERE (01/10/2026) IL TITOLARE, con lo schermo Android in mano: «vedi il casino da android ... le frecce coprono il testo e non ho allegato alcun media». MISURATO (390x844, compositore aperto, tastiera finta sul visualViewport: 344px di offset), con la galleria VUOTA: #mediaPreviewScroll 4px di alto (la galleria vuota e' solo il suo riempimento) #mediaPreviewPrev 44x44, da 355 a 399 — l'area di scrittura finisce a 351 #mediaPreviewNext 44x44, a destra, idem Le due frecce erano quindi disegnate sopra una riga da 4px e sporgevano di 44px DENTRO l'area di scrittura: il «testo coperto» della segnalazione. E l'attributo `hidden` che `feed.js` dava loro (`updateMediaPreviewArrows`) non faceva niente: dentro il compositore `mood-ui.css` ha `#createPostModal .media-preview-arrow { display: flex }` (identificatore + classe = 1,1,0) che batte `.media-preview-arrow[hidden] { display: none }` di `mood.css` (classe + attributo = 0,2,0). Vinse la regola piu' specifica, e l'attributo resto' lettera morta: misurato, le due frecce risultavano `hidden: true` e `visibili: true` nello stesso momento. ADESSO: - quando non c'e' nessun media la RIGA si spegne del tutto (`feed.js` tiene aggiornato `hidden` su `#mediaPreviewScroll`): niente frecce in mezzo al testo, e nemmeno lo stacco di 8px che la riga lasciava; - quando c'e' un media ma non c'e' niente da scorrere (un media solo: `scrollWidth` uguale a `clientWidth`) le frecce restano spente DAVVERO, perche' adesso l'attributo `hidden` vince. Perche' qui e non in `mood.css`/`mood-ui.css`: quei due fogli vengono riscritti da fuori (vedi la testata di questo file), e questa e' una correzione che deve restare. ============================================================================= */ #createPostModal #mediaPreviewScroll[hidden], #createPostModal .media-preview-arrow[hidden] { display: none; }