/* Traduttore 翻译 — redesign. Namespace tx-*. Usa le variabili di tema del sito. */ .tx-wrap { max-width: 720px; } /* niente doppio-tap-zoom sui controlli (i tap veloci sul mic attivavano lo zoom iOS); il pinch con 2 dita resta */ .tx-panel, .tx-panel button, .tx-foot, .wx-guide { touch-action: manipulation; } /* PANNELLO unico: tutto il traduttore in una sezione con sfondo distinto dalla pagina. Altezza NATURALE (niente 100vh) → la tastiera del cellulare non sposta più la sezione. */ /* l'altezza (min-height) la imposta il JS (fitPanel) misurando lo spazio reale disponibile */ .tx-panel { position:relative; display:flex; flex-direction:column; box-sizing:border-box; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:.7rem 1rem .2rem; margin-top:.5rem; } /* in fullscreen: angoli arrotondati con un piccolo margine (altezza sempre da JS) */ body.tx-focus .tx-panel { margin:.5rem; } /* testata: tab modalità CENTRATI + utility in alto a destra */ /* testata: ⓘ a sinistra · tab modalità centrati · utility a destra, tutto su una riga */ .tx-head { display:flex; align-items:center; gap:.5rem; margin:.2rem 0 .6rem; } .tx-actions-right { display:flex; gap:.35rem; } .tx-modes { flex:1; display:flex; justify-content:center; gap:.5rem; } /* modalità ATTIVA = colore pieno; NON attiva = neutra/grigia → si capisce subito quale è accesa */ /* Tab a SOLE ICONE (2026-08-01): niente testo = niente etichette che vanno a capo, nessun disallineamento, nessuna traduzione da mantenere. Icona più grande. */ .tx-mode { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); padding:.5rem 1.4rem; border-radius:10px; cursor:pointer; background:var(--tag-bg); color:var(--ink-soft); transition:background .15s, color .15s, box-shadow .15s; } .tx-mode .tx-mi { color:currentColor; } .tx-mode.cur { border-color:transparent; box-shadow:0 3px 9px rgba(0,0,0,.22); } .tx-mi { width:28px; height:28px; flex:0 0 auto; } #txModeSimple.cur { background:#2f6fad; color:#fff; } /* blu */ #txModeSimple.cur .tx-mi { color:#cfe2f5; } #txModeConv.cur { background:#1a9e78; color:#fff; } /* verde */ #txModeConv.cur .tx-mi { color:#c7ebdb; } .tx-info, .tx-full { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.3rem .5rem; cursor:pointer; font-size:1rem; color:var(--ink); } /* in fullscreen il tasto diventa ✕: solo una X ROSSA, senza riquadro */ body.tx-focus .tx-full { background:none; border:0; color:#e74c3c; font-size:1.3rem; font-weight:700; } /* condividi: solo icona SVG monocroma, senza sfondo, colore del tema */ .tx-share { background:none; border:0; padding:.3rem; cursor:pointer; color:var(--ink-soft); display:inline-flex; align-items:center; } .tx-share svg { display:block; } .tx-share[hidden]{ display:none; } .tx-share.done { color:var(--accent); } /* modalità semplice: colonna che riempie il pannello, input+microfoni in basso. niente padding-bottom: i tasti lingua restano attaccati al bordo del pannello (footer spostato fuori). */ #modeSemplice { display:flex; flex-direction:column; flex:1; } /* l'ID #modeSemplice{display:flex} batteva il [hidden] di default → in face-to-face la modalità semplice restava visibile sopra. Ripristina il nascondiglio. */ #modeSemplice[hidden] { display:none; } /* CORNICE unica attorno a traduzione (sopra) + input (sotto) */ .tx-frame { flex:1; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:var(--card); margin:.3rem 0; overflow:hidden; } /* area traduzione dentro la cornice (nessun box proprio) */ .tx-last { flex:1; min-height:5rem; margin:0; padding:.9rem; display:flex; gap:.6rem; align-items:flex-start; } .tx-last-text { flex:1; margin:0; font-size:1.6rem; line-height:1.5; color:var(--ink); word-break:break-word; } .tx-last-acts { display:flex; flex-direction:column; gap:.15rem; } .tx-last-acts[hidden]{ display:none; } .tx-ic { background:none; border:0; cursor:pointer; font-size:1.35rem; } /* cronologia collassabile */ .tx-histtoggle { display:block; align-self:center; background:none; border:0; color:var(--ink-soft); cursor:pointer; font-size:1.4rem; line-height:1; padding:.15rem 1rem; margin:.2rem 0; } .tx-histtoggle[hidden]{ display:none; } .tx-hist { border:0; border-top:1px solid var(--line); max-height:35vh; overflow:auto; margin:0; } .tx-hist[hidden]{ display:none; } /* riga cronologia: testo a sinistra, 🔊 a destra */ .tx-row { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-bottom:1px solid var(--line); } .tx-row:last-child{ border-bottom:0; } .tx-rowtext { flex:1; min-width:0; } .tx-src { font-size:.85rem; color:var(--ink-soft); word-break:break-word; } .tx-out { font-size:1.1rem; color:var(--ink); margin-top:.15rem; word-break:break-word; } .tx-rowaudio { background:none; border:0; cursor:pointer; font-size:1.25rem; flex:0 0 auto; } /* casella input + Traduci integrato (centrato in altezza, lato destro) */ /* casella input = campo vero (bordo + angoli + tinta chiara) dentro la cornice */ .tx-inbox { position:relative; margin:.5rem; } /* spazio a destra = tondo del tasto invio (2.5rem) + margini; era 4.6rem quando il tasto conteneva la scritta 翻译 */ .tx-inbox textarea { width:100%; box-sizing:border-box; padding:.7rem 3.5rem .7rem .8rem; font-size:1.1rem; border:1px solid var(--line); border-radius:10px; resize:none; color:var(--ink); background:var(--tag-bg); } /* tasto invio: ICONA (aereo di carta), non più la scritta 翻译 — la pagina è multilingue, un'etichetta in una lingua sola escluderebbe metà degli utenti */ .tx-go { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; background:var(--accent); color:#fff; border:0; border-radius:50%; cursor:pointer; font-size:1rem; } .tx-go:disabled { opacity:.6; } .tx-go:active { transform:translateY(-50%) scale(.93); } .tx-go-ic { display:block; } .tx-go-load { display:none; font-size:1.1rem; line-height:1; } .tx-go.busy .tx-go-ic { display:none; } .tx-go.busy .tx-go-load { display:inline; animation:txPulse 1s infinite; } /* barra input + microfoni spinta in fondo alla colonna */ .tx-bottom { margin-top:auto; padding-top:.6rem; } .tx-bottom .tx-inbox { margin:0 0 .5rem; } /* fumetto elegante "parla ora" mentre il microfono ascolta (non tocca l'animazione del mic) */ .tx-speaking { position:relative; align-self:center; margin:.1rem auto .55rem; background:var(--accent); color:#fff; padding:.45rem 1rem; border-radius:16px; font-size:.95rem; font-weight:600; box-shadow:0 4px 12px rgba(47,111,173,.35); animation:txBubble .28s ease; } .tx-speaking[hidden]{ display:none; } .tx-speaking::after { content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--accent); border-bottom:0; } @keyframes txBubble { from{ opacity:0; transform:translateY(8px) scale(.92);} to{ opacity:1; transform:translateY(0) scale(1);} } /* (rimosse le regole .tx-pair/.tx-swap/.tx-noit: la riga di tendine sopra i tasti non esiste più — la lingua si sceglie toccando la bandiera, come nel faccia-a-faccia) */ /* Due blocchi lingua. Ogni blocco = [bandiera ▾ | tasto per parlare]: due controlli DISTINTI (la bandiera sceglie la lingua, il tasto detta) dentro un'unica cornice. */ .tx-langs { display:flex; align-items:stretch; gap:.4rem; margin-top:.6rem; } .tx-langbox { flex:1; min-width:0; display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; } .tx-langbox .tx-flagbtn { position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:.15rem; padding:0 .5rem; cursor:pointer; } .tx-langbox .tx-flagbtn:active { background:var(--tag-bg); } /* le bandiere stanno sui lati INTERNI (A a destra, B a sinistra) così si affacciano al centro attorno al ⇄ → il separatore va dalla parte opposta in ciascun blocco */ .tx-langbox[data-slot="A"] .tx-flagbtn { border-left:1px solid var(--line); } .tx-langbox[data-slot="B"] .tx-flagbtn { border-right:1px solid var(--line); } /* tasto ⇄ fra le due bandiere: inverte le lingue */ .tx-swap { align-self:center; flex:0 0 auto; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; background:var(--card); border:1px solid var(--line); border-radius:50%; color:var(--accent); cursor:pointer; } .tx-swap:active { transform:scale(.92); } /* footer SOTTO il pannello (fuori dalla cornice): solo il © — il tasto 分享此页 è stato rimosso su richiesta utente (2026-08-01), con le sue regole .tx-sharepage */ .tx-foot { display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; margin:.2rem .2rem .2rem; padding:0 .6rem; font-size:.8rem; color:var(--ink-soft); } .tx-copy { white-space:nowrap; } .tx-lang { flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.9rem .5rem; font-size:1.15rem; border:0; background:none; color:var(--ink); cursor:pointer; font-weight:600; } .tx-lang-lab { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* bandiera SVG inline: si vede uguale su desktop e mobile (le emoji-bandiera su Windows escono come "CN"/"IT") */ .tx-flag { width:24px; height:16px; flex:0 0 auto; border-radius:2px; border:1px solid rgba(0,0,0,.15); } /* lingue senza bandiera SVG (en/es/fr/de/ru): sigla al posto della bandiera */ .tx-flag-slot { display:inline-flex; align-items:center; flex:0 0 auto; } .tx-flag-abbr { font-size:.8rem; letter-spacing:.5px; padding:.1rem .3rem; border:1px solid var(--line); border-radius:4px; color:var(--ink-soft); font-weight:700; } .tx-lang-mic { font-size:1.05rem; } .tx-lang.on { background:var(--accent); color:#fff; animation:txPulse 1s infinite; } .tx-lang:disabled { opacity:.5; cursor:default; } @keyframes txPulse { 0%,100%{opacity:1} 50%{opacity:.6} } /* ── MODALITÀ 面对面 (face to face): due lati speculari, look coerente con la modalità singola ── */ #modeConversa { flex:1; min-height:0; } #modeConversa[hidden] { display:none; } #modeConversa:not([hidden]) { display:flex; flex-direction:column; gap:.5rem; } .f2f-side { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:.5rem; padding:.7rem; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .f2f-top { transform:rotate(180deg); } /* leggibile da chi ti sta di fronte */ .f2f-bubble { flex:1; min-height:3rem; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.5rem; line-height:1.5; overflow:auto; color:var(--ink); word-break:break-word; } .f2f-ph { color:var(--ink-soft); font-size:1rem; } .f2f-live { align-self:center; max-width:100%; padding:.3rem .8rem; background:var(--tag-bg); border:1px solid var(--line); border-radius:12px; font-size:1rem; color:var(--ink-soft); word-break:break-word; } .f2f-live[hidden] { display:none; } .f2f-bar { display:flex; gap:.5rem; align-items:center; justify-content:center; } .f2f-mic { flex:1; max-width:240px; padding:.7rem 1rem; background:var(--accent); color:#fff; border:0; border-radius:10px; cursor:pointer; font-size:1.05rem; font-weight:600; } .f2f-mic.on { animation:txPulse 1s infinite; } .f2f-mic:disabled { opacity:.5; cursor:default; } /* 🔊 nell'angolo in alto a destra della bolla (fuori dal flusso, non cancellato dal testo) */ .f2f-speak { position:absolute; top:.45rem; right:.45rem; z-index:2; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; background:var(--tag-bg); border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--ink); } /* Barra CENTRALE: bandiera-sopra ⇅ bandiera-sotto. Le BANDIERE sono i selettori di lingua (tap → picker nativo), la freccia in mezzo scambia i lati. */ .f2f-swap { align-self:center; display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .6rem; background:var(--card); border:1px solid var(--line); border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.16); } .f2f-swap .tx-flag { width:26px; height:18px; } .f2f-flag-slot { display:inline-flex; align-items:center; } /* bersaglio tappabile della bandiera: bandiera + caret ▾ che segnala "si può scegliere" */ .f2f-flagbtn { position:relative; display:inline-flex; align-items:center; gap:.15rem; padding:.35rem .4rem; border-radius:9px; cursor:pointer; } .f2f-flagbtn:active { background:var(--tag-bg); } /* caret e tendina invisibile sono CONDIVISI dalle due modalità (stesso gesto: si tocca la bandiera e si sceglie la lingua) */ /* la freccetta è l'unico segnale che la bandiera è toccabile: sotto ~13px si legge come un puntino e smette di fare il suo lavoro */ .f2f-caret, .tx-caret { font-size:.85rem; color:var(--ink-soft); line-height:1; } /*