/* ========================================================================== REAZIONI - regole che devono esserci SEMPRE (file separato di proposito) -------------------------------------------------------------------------- Perche' un file a parte: le stesse regole erano state messe in fondo a `mood-ui.css`, ma quel file viene riscritto da fuori mentre si lavora (editor aperto, strumenti di versione) e le aggiunte sparivano - e con loro la misura delle icone. Da qui non spariscono, e non c'e' bisogno di toccare i file degli altri per far funzionare le reazioni. MISURA DEL CONTENITORE, non solo dell'icona. Segnalato: "sto guardando il profilo di una persona e cliccando sul post e' tutto sballato il like e la reazione". Misurato nel visore del profilo (390px): `.reaction` era 20px ma il suo contenitore `.reaction-emoji-glyph` era 74x85px, e l'SVG prende il 100% di quello -> icona gigante. Causa: il contenitore non aveva una misura, quindi si allargava col pulsante (flex stretch) e l'icona lo seguiva. La misura va sul CONTENITORE, che e' quello che comanda. ========================================================================== */ .reaction-emoji-glyph { display: inline-block; line-height: 0; width: 20px; height: 20px; flex: none; /* nel pulsante flex non si allarga piu' */ } .reaction-emoji-glyph svg { display: block; width: 100%; height: 100%; } /* Le misure dei posti dove l'icona sta, in ordine di grandezza. */ .mood-action-btn .reaction-emoji-glyph {width: 30px;height: 30px;padding: 0;} .mood-action-btn .reaction-emoji-glyph .reaction{ width: 26px !important; height: 26px !important; } .mood-reaction-summary .reaction-emoji-glyph, .mood-reaction-chips .reaction-emoji-glyph {width: 22px;height: 22px;} .mood-reaction-tip-dot .reaction-emoji-glyph {width: 20px;height: 20px;} .mood-reaction-emoji .reaction-emoji-glyph { width: 40px; height: 40px; } .clip-rail-btn .reaction-emoji-glyph { width: 26px; height: 26px; } /* Il visore del post e i modali del profilo non hanno un contenitore noto: la regola di base (20px) li copre, e questa li tiene allineati ai pulsanti. */ #lightboxActions .reaction-emoji-glyph { width: 22px; height: 22px; } /* L'icona segue il CONTENITORE, sempre: cosi' c'e' una sola misura da tenere giusta (quella del .reaction-emoji-glyph) e nessuna regola scritta altrove puo' rimettere l'icona a una misura sua (era quello che la faceva esplodere nel visore del profilo: contenitore 74px e icona che lo seguiva). */ .reaction-emoji-glyph .reaction { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .mood-action-btn .reaction-emoji-glyph .reaction {/* width: 100%; *//* height: 100%; */margin-top: -3px;margin-left: -17px;} .mood-reaction-emoji .reaction-emoji-glyph .reaction { width: 100%; height: 100%; } .clip-rail-btn .reaction-emoji-glyph .reaction { width: 100%; height: 100%; } /* `.reaction` e' un elemento INLINE: su un inline l'altezza viene ignorata, quindi l'icona prendeva la sua misura naturale (32px in un contenitore da 22 - misurato). Rendendolo inline-block la misura vale, e l'SVG la segue. Cosi' contenitore e disegno sono sempre la stessa misura, in ogni pagina. */ .reaction-emoji-glyph .reaction { display: inline-block; width: 100%; height: 100%; } .reaction-emoji-glyph .reaction svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } /* FORZATURA (con motivazione). Malgrado le regole qui sopra, l'SVG dentro il contenitore restava 32x32 in un contenitore da 22 (misurato sul sito): qualche altra regola del foglio generale lo sovrascrive, e il risultato era l'icona sproporzionata nel visore del profilo. Con `!important` la misura viene dal CONTENITORE e basta - ed e' l'unico modo per essere certi che nessuna regola scritta altrove (o ripristinata da fuori) rimetta l'icona a una misura sua. Vince anche su uno stile scritto dentro il tag: !important dell'autore batte lo stile inline non importante. */ .reaction-emoji-glyph svg, .reaction-emoji-glyph .reaction svg { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } /* ========================================================================== LE ANIMAZIONI DELLE ICONE RESTANO FERME FINCHE' NON SI VEDONO (11/10/2026) -------------------------------------------------------------------------- Il titolare: "l'iPhone diventa bollente e si scarica rapidamente la batteria, come se qualcosa va in scaricamento senza mai completare". Misurato sul feed con un profilo da iPhone, a pagina FERMA e senza toccare nulla: il filo principale lavorava il 58% di un processore di continuo (5,80 s di lavoro su 10 s di orologio, di cui 1,11 s di ricalcolo degli stili) e scendeva al 4% appena si fermavano le animazioni delle icone. Non erano i video: togliendo i video il lavoro invece SALIVA al 75% (il filmato non c'entra). Perche' succedeva: `document.getAnimations()` diceva 401 animazioni in esecuzione (`steamRise`, `tearFall`, `likeGlow`, `likeWave`, `shineSweep`, `heartHalo`, `heartBeat`, `hahaLaugh`, `wowBounce`, `eyeBlink`, `sadSway`, `angryShake`), 400 delle quali DENTRO i selettori di reazioni delle card - contenitori presenti nel documento con `opacity: 0; visibility: hidden`: invisibili, nessuno le vedeva muoversi. In `mood-ui.css` la pausa c'e' (`.reaction-emoji-glyph .reaction *`), ma la regola che le rimette in moto comincia con `.mood-reaction-bar ...`: la barra sta nel documento SEMPRE, anche chiusa, e quindi quelle 400 animazioni non si fermavano mai. "Il telefono respira" (scritto nel commento di `feed.js`) non succedeva. Questa regola ha piu' peso di quella (piu' classi e pseudo-classi) e vince qualunque sia l'ordine dei fogli: si anima SOLO quando la barra si vede davvero. La barra si vede con `.mood-reaction-wrap:hover`, `:focus-within`, `.is-open`, oppure `.mood-reaction-bar:hover` (le stesse quattro condizioni di `mood-ui.css`, le stesse che usa `feed.js` per mostrarla), e in tutti quei casi questa regola NON si applica. Nessun cambiamento visibile: le uniche animazioni che si fermano sono quelle dentro contenitori invisibili. ========================================================================== */ .mood-reaction-wrap:not(.is-open):not(:hover):not(:focus-within) .mood-reaction-bar .reaction, .mood-reaction-wrap:not(.is-open):not(:hover):not(:focus-within) .mood-reaction-bar .reaction * { animation-play-state: paused !important; } /* ========================================================================== IL PANNELLO "CHI" - SI APRE AL CLICK (04/10/2026) -------------------------------------------------------------------------- IL TITOLARE: "anche nei post i like eccetera vedo le reazioni ma dovremmo creare un dropmenu.. scuro tipo tip che si carica al click con elenco di chi ha dato il proprio apporto con il click". E per la chat: "quando qualcuno mette una reazione o vede .. non viene menzionato il nome.. e l'ora". PERCHE' IN QUESTO FOGLIO: e' l'unico che tutte e quattro le pagine con i post caricano davvero (feed.html, post.html, group.html, profile.html - verificato) ed e' il foglio delle reazioni: il pannello sta con le sue icone. Il disegno lo fa `mood-reazioni.js` (`MoodReazioni.chi`), che serve anche alla chat. I COLORI SEGUONO IL TEMA, COME IL MENU' DEL MESSAGGIO (05/10/2026, notte). Il "scuro tipo tip" del 04/10 l'ho tradotto io, quella sera, fissando le sei variabili del tema scuro dentro il pannello: cosi' restava scuro anche col tema chiaro (che e' il default del sito), ma era un pezzo di un altro sito - e il titolare se n'e' accorto incollandomelo. Il metro giusto e' `#chatMenuMsg` (chat.css): `var(--mood-*)` NUDO, niente valori fissati e niente colori dentro i ripieghi. Vedi "I COLORI DEL PANNELLO VENGONO DAL TEMA" piu' avanti per la misura fatta nel browser, tema per tema. MISURA: `position: fixed` e le coordinate gliele da' il modulo misurando l'ancora (e' l'unico modo per stare dentro la finestra anche quando la card e' a filo del bordo). La scala dei soprapposti di casa: visore 10000 - questo pannello 10140 - conferma 10150 (assets/css/mood-conferma.css). ========================================================================== */ .mood-chi-pannello { position: fixed; top: 0; left: 0; width: 296px; max-width: calc(100vw - 16px); max-height: min(62vh, 440px); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; z-index: 10140; font-size: 0.85rem; line-height: 1.25; } .mood-chi-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px 14px; } .mood-chi-titolo { font-weight: 600; font-size: 0.86rem; } /* Il numero delle reazioni, accanto al titolo: "quante" si legge prima di "chi" (05/10/2026). Sta a destra, vicino alla X, con `margin-left: auto`: cosi' la X resta un bersaglio fermo. */ .mood-chi-totale { margin-left: auto; flex: none; padding: 2px 8px; border-radius: 10px; font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; } .mood-chi-titolo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mood-chi-chiudi { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; } /* I conteggi per tipo: quello che prima si vedeva col mouse sopra il riepilogo, adesso dentro il pannello (e sul telefono si vede - il tooltip col mouse li' non esisteva). */ .mood-chi-conteggi { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 9px 14px; font-size: 0.76rem; } .mood-chi-conteggio { display: inline-flex; align-items: center; gap: 6px; } .mood-chi-conteggio strong { font-variant-numeric: tabular-nums; } .mood-chi-elenco { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px; } .mood-chi-attesa, .mood-chi-vuoto { padding: 14px 12px; font-size: 0.82rem; text-align: center; } .mood-chi-riga { display: flex; align-items: center; gap: 10px; min-height: 44px; /* la regola di casa: un bersaglio da dito, non da puntatore */ padding: 6px 10px; border-radius: 10px; text-decoration: none; } .mood-chi-faccia { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .mood-chi-faccia img { width: 100%; height: 100%; object-fit: cover; display: block; } /* LA FACCIA PUO' ESSERE UN VIDEO (05/10/2026). L'avatar di NOVE utenti veri e' un video (.mp4) e un `