/* =========================================================================== PJ16 "Live Transcript" — WEB APP skin (req124 / T05) --------------------------------------------------------------------------- Loaded AFTER style.css, ONLY on web.html (which sets ). index.html / style.css are untouched — the desktop-app look the user is happy with on PC stays exactly as-is. Goal (user's words): the current UI "looks like a desktop application" (outlined pill buttons, grey panels, fixed heights). This skin makes it a modern web app: one solid accent primary button, ghost secondary actions, rounded cards with soft shadow, a segmented tab control, generous whitespace, and ONE fluid type/spacing scale via clamp() that grows smoothly from 320px to 1920px — not "a phone layout and a desktop layout" but the same design scaling continuously. Phones especially should look good (that's where the old skin was worst). Everything here is scoped to :root[data-ui="web"] so it can't leak into index.html even if the files are ever concatenated. =========================================================================== */ :root[data-ui="web"] { /* ---- palette: cooler, softer than the office grey ---- */ --bg: #f6f8fc; --panel: #ffffff; --panel-2: #eef2fb; --text: #17202e; --text-dim: #64748b; --accent: #4f46e5; /* indigo — solid primary */ --accent-press: #4338ca; --accent-soft: #eef0ff; --accent-2: #0d9488; --danger: #e11d48; --warn: #b45309; --border: #e3e8f2; /* ---- fluid scale: min at ~320px, max at ~1400px ---- */ /* req13 batch (2026-09-02): "web 不使用圆角的占地方" + "简洁点，紧凑点" — smaller radii and tighter padding/gap so the big rounded cards stop eating screen space. */ --radius: 8px; --radius-lg: 10px; --pad-x: clamp(12px, 3vw, 28px); --gap: clamp(8px, 1.8vw, 16px); --fs-base: clamp(15px, 0.9rem + 0.3vw, 17px); --fs-h1: clamp(1.1rem, 1rem + 0.9vw, 1.45rem); --fs-transcript: clamp(1.05rem, 0.95rem + 0.7vw, 1.4rem); --shadow-sm: 0 1px 2px rgba(20, 30, 55, 0.06), 0 2px 8px rgba(20, 30, 55, 0.05); --shadow-md: 0 4px 14px rgba(20, 30, 55, 0.08), 0 12px 32px rgba(20, 30, 55, 0.06); } :root[data-ui="web"] body { background: radial-gradient(1100px 480px at 100% -8%, var(--accent-soft), transparent 60%), var(--bg); font-size: var(--fs-base); line-height: 1.55; } /* ---- top bar: lighter, roomier, title bigger ---- */ :root[data-ui="web"] .topbar { padding: clamp(12px, 2.5vw, 22px) var(--pad-x) clamp(8px, 1.6vw, 14px); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } :root[data-ui="web"] .topbar h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; } :root[data-ui="web"] .header-status { color: var(--text-dim); font-variant-numeric: tabular-nums; } /* ---- req117: ⛶ Captions in the topbar + a title row that never reflows ---- */ /* The row is: [🎙️ Live Transcript] [⛶ Captions] .......... [🔴 REC · ja-JP]. header-right is pinned to the far right with a reserved width, so the status text appearing/disappearing on record start/stop does NOT move the title or the Captions button, and nothing below the topbar shifts either. */ :root[data-ui="web"] .title-row { flex-wrap: nowrap; gap: clamp(8px, 2vw, 14px); min-height: 2.2rem; } :root[data-ui="web"] .title-row h1 { flex: 0 0 auto; } :root[data-ui="web"] .title-row .header-right { margin-left: auto; flex: 0 0 auto; justify-content: flex-end; } :root[data-ui="web"] .title-row .header-status { min-width: 7.5em; text-align: right; } /* base style.css only shows .captions-mode-btn under 700px; in the web skin it lives in the topbar and should show at every width. Selector is scoped to .title-row so it always beats the generic :root[data-ui="web"] .captions-mode-btn. */ :root[data-ui="web"] .title-row .topbar-captions-btn { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow-sm); cursor: pointer; touch-action: manipulation; } /* ---- tabs: segmented control ---- */ :root[data-ui="web"] .tab-bar { margin-top: clamp(8px, 1.6vw, 14px); gap: 4px; padding: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; } :root[data-ui="web"] .tab-bar::-webkit-scrollbar { display: none; } :root[data-ui="web"] .tab-btn { border: none; background: transparent; border-radius: 999px; padding: clamp(6px, 1.2vw, 9px) clamp(12px, 2.6vw, 20px); color: var(--text-dim); font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; } :root[data-ui="web"] .tab-btn:hover { color: var(--text); } :root[data-ui="web"] .tab-btn[aria-selected="true"] { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); } :root[data-ui="web"] .tab-btn[aria-selected="true"]::before, :root[data-ui="web"] .tab-btn[aria-selected="true"]::after { display: none; } /* ---- main: centered fluid container ---- */ :root[data-ui="web"] main { width: min(100%, 1100px); margin-inline: auto; padding: var(--gap) var(--pad-x) clamp(28px, 6vw, 60px); gap: var(--gap); } /* ---- controls row ---- */ :root[data-ui="web"] .controls-row { gap: clamp(8px, 1.6vw, 14px); padding-bottom: 4px; } /* language selector = segmented pills */ :root[data-ui="web"] .lang-toggle-group { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; } :root[data-ui="web"] .lang-toggle-btn { border: none; background: transparent; border-radius: 999px; padding: clamp(6px, 1.2vw, 9px) clamp(12px, 2.4vw, 18px); color: var(--text-dim); font-weight: 600; } :root[data-ui="web"] .lang-toggle-btn + .lang-toggle-btn { border: none; } :root[data-ui="web"] .lang-toggle-btn.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); } :root[data-ui="web"] .furigana-chk, :root[data-ui="web"] .rec-audio-toggle { border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: clamp(5px, 1vw, 8px) clamp(10px, 2vw, 14px); color: var(--text-dim); box-shadow: var(--shadow-sm); } /* ---- record / pause buttons ---- */ :root[data-ui="web"] .rec-btn { border-radius: 999px; font-weight: 700; padding: clamp(9px, 1.8vw, 13px) clamp(18px, 3.4vw, 30px); border: 1px solid transparent; transition: transform .08s, box-shadow .15s, background .15s; } :root[data-ui="web"] .rec-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); } :root[data-ui="web"] .rec-btn-primary:hover:not(:disabled) { background: var(--accent-press); } :root[data-ui="web"] .rec-btn-primary.is-recording { background: var(--danger); border-color: var(--danger); box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 35%, transparent); } :root[data-ui="web"] .rec-btn-pause { background: var(--panel); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); } :root[data-ui="web"] .rec-btn:active:not(:disabled) { transform: translateY(1px); } :root[data-ui="web"] .rec-btn:disabled { opacity: .5; } /* ---- captions-mode button (phones) ---- */ :root[data-ui="web"] .captions-mode-btn { border-radius: 999px; border-color: var(--border); background: var(--panel); box-shadow: var(--shadow-sm); height: auto; padding: clamp(6px, 1.4vw, 10px) clamp(12px, 2.6vw, 16px); } /* ---- transcript + translation as cards ---- */ :root[data-ui="web"] .transcript-box, :root[data-ui="web"] .furigana-view, :root[data-ui="web"] .translate-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } :root[data-ui="web"] .transcript-box, :root[data-ui="web"] .furigana-view { padding: clamp(10px, 2vw, 16px); font-size: var(--fs-transcript); line-height: 1.55; min-height: clamp(180px, 32vh, 420px); } :root[data-ui="web"] .transcript-box:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-soft); } :root[data-ui="web"] .transcript-box::placeholder { color: var(--text-dim); } :root[data-ui="web"] .live-split { gap: clamp(8px, 1.5vw, 14px); } :root[data-ui="web"] .live-split > .translate-panel { border-radius: var(--radius-lg); } :root[data-ui="web"] .translate-panel-head { color: var(--text-dim); font-weight: 600; } /* req124 v2: don't let Translate/Clear stretch to a full row on wide screens — keep them natural width, inline after the Save box. */ :root[data-ui="web"] .transcript-actions { gap: 10px; } :root[data-ui="web"] .transcript-actions .action-btn { flex: 0 0 auto; } /* ---- secondary action buttons = ghost ---- */ :root[data-ui="web"] .action-btn { border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); padding: clamp(7px, 1.4vw, 10px) clamp(11px, 2.2vw, 16px); } :root[data-ui="web"] .action-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } :root[data-ui="web"] .action-btn.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } :root[data-ui="web"] .action-btn.danger-btn:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); } :root[data-ui="web"] .action-btn:disabled { opacity: .5; } /* ---- notices ---- */ :root[data-ui="web"] .notice { border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* ---- settings / help panels: card up the folded rows ---- */ :root[data-ui="web"] #tabSettings > *, :root[data-ui="web"] #tabHelp > * { border-radius: var(--radius); } /* ---- wide screens: give the two live panes side-by-side breathing room ---- */ @media (min-width: 1000px) { :root[data-ui="web"] .live-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } :root[data-ui="web"] .live-split > .live-resizer { display: none; } :root[data-ui="web"] .live-split.tx-off { grid-template-columns: 1fr; } } /* ========================================================================= req69 — "⋯ More" panel (web skin). Secondary Live controls (furigana, record audio, captions view) live here instead of crowding the main row. ≤700px: collapsible, toggled by #moreControlsBtn (starts hidden). ≥701px: always shown inline, the toggle button is hidden. ========================================================================= */ :root[data-ui="web"] .more-controls { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, 1.6vw, 14px); } :root[data-ui="web"] .more-controls[hidden] { display: none; } @media (min-width: 701px) { :root[data-ui="web"] #moreControlsBtn { display: none; } :root[data-ui="web"] .more-controls[hidden] { display: flex; } } @media (max-width: 700px) { :root[data-ui="web"] .more-controls { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); } :root[data-ui="web"] #moreControlsBtn { font-size: 0.85rem; padding: 8px 12px; } } /* ========================================================================= req171 — MOBILE-FIRST rework (phones ≤ 700px). The desktop skin above just re-skinned the desktop layout; the user's feedback was "still a desktop app, buttons one-by-one don't feel mobile". This block restructures the Live tab the way Google Live Transcribe / Otter mobile do it: - the transcript is the whole screen (giant text, minimal chrome) - ONE big primary Start/Stop button pinned in the bottom thumb zone - secondary controls (furigana, record, pause, captions) shrink to a compact icon strip; Save/Translate/Clear shrink to small chips - 48px+ touch targets, generous spacing, nothing that scrolls sideways Functionality/DOM unchanged — pure CSS, app.js untouched. ========================================================================= */ @media (max-width: 700px) { :root[data-ui="web"] main { width: 100%; padding: 10px 12px 150px; /* room for the fixed Start button + bottom tab bar */ gap: 10px; } /* language = compact segmented pills, one tight row */ :root[data-ui="web"] .controls-row { gap: 8px; justify-content: flex-start; } :root[data-ui="web"] .lang-toggle-group { flex: 0 0 auto; padding: 2px; } :root[data-ui="web"] .lang-toggle-btn { padding: 8px 14px; font-size: 0.9rem; } /* furigana + record audio -> small icon-ish chips, not full-width rows */ :root[data-ui="web"] .furigana-chk, :root[data-ui="web"] .rec-audio-toggle { flex: 0 0 auto; font-size: 0.8rem; padding: 7px 11px; gap: 4px; } /* THE primary control — big, pinned in the thumb zone, above the bottom tabs */ :root[data-ui="web"] .rec-btn-primary { position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; min-width: 200px; justify-content: center; padding: 16px 40px; font-size: 1.1rem; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent); } :root[data-ui="web"] .rec-btn-primary.is-recording { box-shadow: 0 10px 30px color-mix(in srgb, var(--danger) 45%, transparent); } :root[data-ui="web"] .rec-btn-primary:active { transform: translateX(-50%) translateY(1px); } /* Pause sits just above the Start button, smaller, only while recording */ :root[data-ui="web"] .rec-btn-pause { position: fixed; left: 50%; bottom: calc(140px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; padding: 9px 22px; font-size: 0.9rem; } :root[data-ui="web"] .rec-btn-pause:disabled { display: none; } /* hide until a session is live */ /* req117: ⛶ Captions moved to the topbar; keep it a touch smaller on phones */ :root[data-ui="web"] .title-row .topbar-captions-btn { font-size: 0.76rem; padding: 0 10px; height: 28px; } /* transcript = the star of the screen */ :root[data-ui="web"] .transcript-box, :root[data-ui="web"] .furigana-view { min-height: 40vh; /* req213: was 46vh — box was taller than one screen */ font-size: clamp(1.15rem, 1rem + 2.2vw, 1.6rem); padding: 12px; border-radius: 10px; } /* req291 item6: keep 📝 · 🔊 · 💾 Save · 💬 Translate on ONE line on phones (was wrapping to two). No wrap; the checkbox words collapse to just their emoji (the