/* * Inline tool options for /ai-video (dubbing / subtitles / tts / ai shorts). * * Ported + namespaced from the marketing widget (web-stag tv-maker-widget.php). * The tool pills live inside the existing composer .options row; this sheet * styles the pickers/panels, the credit line, and the per-tool show/hide rules. * Panels open as centered, viewport-fitting popups so they are never clipped * (key on mobile). Paired with public/js/tv-maker-tools.js. */ /* ---- Picker pill ---- */ .tvw-picker { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .tvw-picker .theme-label, .tvw-picker .voice-label { font-size: 14px; font-weight: 500; line-height: 1.2; color: #2a2c2d; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tvw-picker .tvw-caret { display: inline-block; width: 12px; height: 12px; margin-left: 2px; font-size: 0; line-height: 0; opacity: .55; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 6.5 8 3.5 11 6.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 9.5 8 12.5 11 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 6.5 8 3.5 11 6.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 9.5 8 12.5 11 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .tvw-picker.has-selection { color: #5b3df5; } .tvw-picker.has-selection .theme-label, .tvw-picker.has-selection .voice-label { color: #5b3df5; font-weight: 600; } .tvw-picker .tvw-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; color: #2a2c2d; } .tvw-picker .tvw-ico svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tvw-picker.has-selection .tvw-ico { color: #5b3df5; } .tvw-picker .voice-icon-container .voice-avatar-icon { width: 22px; height: 22px; border-radius: 50%; background: #5b3df5; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* ---- Panels: centered, viewport-fitting popups ---- */ /* Panels open as anchored dropdowns (positioned + sized by JS positionPanel), NOT as a centered modal — no dimming overlay over the widget. Vertical scroll only; never a horizontal inner scrollbar. */ .tvw-panel { position: fixed; z-index: 10020; display: none; box-sizing: border-box; width: min(360px, 94vw); max-width: 94vw; overflow-x: hidden; overflow-y: auto; background: #fff; border: 1px solid #E6E8F0; border-radius: 16px; box-shadow: 0 18px 60px rgba(16,16,40,.22); padding: 12px; } .tvw-panel > * { max-width: 100%; } /* Panels are moved to on init (class tvw-floating) so position:fixed resolves against the viewport — escaping the options row's overflow + any transformed ancestor. Shown only when .is-open. */ .tvw-panel.tvw-floating { display: none; } .tvw-panel.tvw-floating.is-open { display: block; } .tvw-panel--style.tvw-floating.is-open { display: flex; flex-direction: column; } .tvw-panel--list { width: min(340px, 94vw); } .tvw-panel--drop { width: min(300px, 94vw); } .tvw-panel--voice { width: min(440px, 94vw); } .tvw-panel--style { width: min(440px, 94vw); padding: 0; overflow: hidden; } .tvw-backdrop { display: none !important; } .tvw-panel-loading { padding: 18px; text-align: center; color: #8A93A6; font-size: 13px; } /* ---- Search + list rows + option buttons ---- */ .tvw-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; height: 40px; border-radius: 30px !important; border: 1px solid #ababab !important; font-size: 15px; padding: 10px 14px; } .tvw-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; } .tvw-row:hover { background: #F4F4FB; } .tvw-row.selected { border-color: #5b3df5; background: #F2EFFF; } .tvw-row .tvw-row-main { flex: 1; min-width: 0; } .tvw-row .tvw-row-name { font-size: 15px; font-weight: 500; color: #0E0F26; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tvw-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; cursor: pointer; } .tvw-opt:hover { background: #F4F4FB; } .tvw-opt.selected { border-color: #5b3df5; background: #F2EFFF; } .tvw-opt strong { font-size: 14px; color: #0E0F26; font-weight: 600; } .tvw-opt small { font-size: 12px; color: #8A93A6; } /* ---- Voice grid ---- */ .tv-voice-cats { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; margin-bottom: 2px; scrollbar-width: none; } .tv-voice-cats::-webkit-scrollbar { display: none; } .tv-voice-cats:empty { display: none; } .tvw-vcat { flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; border: 1px solid #E3E1F0; background: #fff; font-size: 12px; color: #545454; cursor: pointer; white-space: nowrap; transition: all .15s ease; } .tvw-vcat:hover { border-color: #C9CCE0; } .tvw-vcat.is-active { background: #0E0F26; border-color: #0E0F26; color: #fff; } .tv-voice-grid { display: flex; flex-direction: column; gap: 4px; } .tv-voice-grid .vt-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; transition: background .15s ease; } .tv-voice-grid .vt-card:hover { background: #F4F2FF; } .tv-voice-grid .vt-card.selected { background: #ECE7FF; } .tv-voice-grid .vt-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; line-height: 1; } .tv-voice-grid .tv-voice-card-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .tv-voice-grid .vt-name { font-weight: 700; font-size: 14px; color: #0E0F26; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-voice-grid .vt-desc { font-size: 12px; color: #8A8A99; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-voice-grid .vt-play { flex: 0 0 auto; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #5b3df5; background: #F0EDFF; font-size: 10px; transition: background .15s ease; } .tv-voice-grid .vt-play:hover { background: #E0D9FF; } .vt-ai-card.is-locked { opacity: .62; cursor: not-allowed; } .vt-ai-card.is-locked:hover { background: #FFFFFF; } /* AI Clone block (dubbing): single clone card + Standard/Premium sub-options, mirroring the original dubbing popup's "Clone my voice" tab. */ .tvw-voice-clone { border: 1px solid #ECE7FF; border-radius: 12px; padding: 6px; margin-bottom: 8px; background: #FAF8FF; } .tvw-voice-clone .vt-card--clone.selected { background: #ECE7FF; } .tvw-clone-models { display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 6px 2px; } .tvw-voice-clone.is-open .tvw-clone-models { display: grid; } .tvw-clone-model { text-align: left; border: 1.5px solid #E3E1F0; border-radius: 10px; background: #fff; padding: 8px 10px; cursor: pointer; } .tvw-clone-model strong { display: block; font-size: 13px; color: #0E0F26; } .tvw-clone-model small { display: block; font-size: 11px; color: #8A93A6; margin-top: 1px; } .tvw-clone-model:hover { border-color: #C9CCE0; } .tvw-clone-model.selected { border-color: #5b3df5; background: #F2EFFF; } /* ---- Caption style panel ---- */ .tvw-style-head { flex: 0 0 auto; padding: 14px 18px; border-bottom: 1px solid #EFF0F6; } .tvw-style-title { font-size: 15px; font-weight: 700; color: #0E0F26; } .tvw-style-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; } .tvw-style-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid #EFF0F6; background: #fff; } .tvw-style-reset { border: 1px solid #E3E1F0; border-radius: 10px; background: #fff; color: #545454; font-weight: 600; font-size: 13.5px; padding: 9px 16px; cursor: pointer; } .tvw-style-reset:hover { border-color: #C9CCE0; background: #F7F8FC; } .tvw-style-apply { border: 0; border-radius: 10px; background: #5b3df5; color: #fff; font-weight: 600; font-size: 13.5px; padding: 9px 24px; cursor: pointer; } .tvw-style-apply:hover { background: #4a2fe0; } .tvw-style-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-bottom: 16px; } .tvw-style-lbl { font-size: 13px; font-weight: 600; color: #3a3a44; } .tvw-style-lbl--cards { display: block; margin: 2px 0 10px; font-size: 13px; } .tvw-style-select { width: 100%; min-height: 42px; padding: 9px 34px 9px 12px; line-height: 1.4; border: 1px solid #E3E1F0; border-radius: 10px; font-size: 13.5px; background: #fff; color: #0E0F26; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23545454' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; } .tvw-style-select:focus { border-color: #5b3df5; outline: none; box-shadow: 0 0 0 3px rgba(91,61,245,.12); } .tvw-style-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tvw-style-card { position: relative; border: 2px solid #E3E1F0; border-radius: 12px; overflow: hidden; background: #0E0F26; color: #fff; cursor: pointer; padding: 22px 10px; height: 80px; display: flex; align-items: flex-end; transition: border-color .15s ease, transform .1s ease; } .tvw-style-card .tvw-style-name { font-size: 12.5px; font-weight: 600; } .tvw-style-card .tvw-style-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #5b3df5; color: #fff; font-size: 12px; line-height: 1; display: none; align-items: center; justify-content: center; } .tvw-style-card:hover { border-color: #C9CCE0; transform: translateY(-1px); } .tvw-style-card.selected { border-color: #5b3df5; box-shadow: 0 0 0 2px rgba(91,61,245,.18); } .tvw-style-card.selected .tvw-style-check { display: flex; } /* ---- Dubbing options panel ---- */ .tvw-panel--dubopts { width: min(320px, 94vw); } .tvw-dubopt-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px; font-size: 14px; color: #0E0F26; cursor: pointer; } .tvw-dubopt-row input[type="checkbox"] { width: 16px; height: 16px; } .tvw-dubopt-row input:disabled { opacity: .5; } .tvw-dubopt-row.is-locked { color: #8A93A6; cursor: not-allowed; } .tvw-dubopt-instr { margin-top: 6px; } .tvw-dubopt-instr label { display: block; font-size: 12px; color: #8A93A6; margin: 4px 2px; } .tvw-dubopt-instr textarea { width: 100%; box-sizing: border-box; border: 1px solid #E3E1F0; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; resize: vertical; } .tvw-dubbing-trim-notice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; padding: 8px 10px; border: 1px solid #F1D4A8; border-radius: 8px; background: #FFF8EA; color: #7A4B08; font-size: 13px; line-height: 1.35; } .tvw-dubbing-trim-notice a { color: #5B3DF5; font-weight: 700; text-decoration: none; } .tvw-dubbing-trim-notice a:hover { text-decoration: underline; } /* ---- Credit info line ---- */ .tvw-credit-info { width: 100%; margin: 6px 2px 0; font-size: 13.5px; color: #545454; } .tvw-credit-info .tvw-credit-msg b { color: #5b3df5; font-weight: 700; } .tvw-credit-info.is-insufficient { color: #c0392b; font-weight: 600; } .tvw-credit-info.is-insufficient .tvw-credit-msg b { color: #c0392b; } /* ============================================================ Per-tool visibility ============================================================ */ /* Tool pills hidden by default; shown only for their tool(s). */ .tvw-toolpill { display: none; } .tv-maker-composer[data-tvw-tool="dubbing"] .tvw-toolpill[data-tools~="dubbing"], .tv-maker-composer[data-tvw-tool="subtitles"] .tvw-toolpill[data-tools~="subtitles"], .tv-maker-composer[data-tvw-tool="tts"] .tvw-toolpill[data-tools~="tts"], .tv-maker-composer[data-tvw-tool="ai_video_to_shorts"] .tvw-toolpill[data-tools~="ai_video_to_shorts"] { display: inline-flex; } /* SRT-only subtitles: caption style is irrelevant, hide it. */ .tv-maker-composer[data-tvw-tool="subtitles"][data-tvw-embed="0"] #tvwToolStyleBtn { display: none !important; } /* Premium-clone not allowed: still show the pill, JS blocks selecting premium. */ /* Hide AI-Video-only controls when a tool (non ai_video) is active. The source LANGUAGE (#language-dropdown-btn) and VOICE (#voice-dropdown-btn) pickers are intentionally NOT hidden — the tool flows reuse them. */ .tv-maker-composer:not([data-tvw-tool="ai_video"]) .tv-maker-mode-switch, .tv-maker-composer:not([data-tvw-tool="ai_video"]) #tvScriptImageUploadBtn, .tv-maker-composer:not([data-tvw-tool="ai_video"]) .tv-aspect-ratio-control, .tv-maker-composer:not([data-tvw-tool="ai_video"]) .tv-generative-control, .tv-maker-composer:not([data-tvw-tool="ai_video"]) #theme-dropdown-btn, .tv-maker-composer:not([data-tvw-tool="ai_video"]) #tvAvatarSelectBtn, .tv-maker-composer:not([data-tvw-tool="ai_video"]) #tvOutroOption, .tv-maker-composer:not([data-tvw-tool="ai_video"]) #presenter-background-toggle-btn, .tv-maker-composer:not([data-tvw-tool="ai_video"]) #presenter-background-dropdown-btn { display: none !important; } /* The composer stays in data-tv-maker-mode="ai_edit" during tool flows, where training-video-maker.js hides the source-language picker via inline display:none. Force-show it for the tools (!important beats the inline non-important style that jQuery .hide() sets) — all four tools reuse the AI-mode language picker. */ .tv-maker-composer[data-tvw-tool="dubbing"] #language-dropdown-btn, .tv-maker-composer[data-tvw-tool="subtitles"] #language-dropdown-btn, .tv-maker-composer[data-tvw-tool="tts"] #language-dropdown-btn, .tv-maker-composer[data-tvw-tool="ai_video_to_shorts"] #language-dropdown-btn { display: inline-flex !important; } /* Voice: dubbing + TTS REUSE the AI-mode voice picker (#voice-dropdown-btn) — same modal, position and options. Force it visible (TVM hides it in ai_edit / when source media is present). Subtitles + AI shorts don't use voice, so keep it hidden there. */ .tv-maker-composer[data-tvw-tool="dubbing"] #voice-dropdown-btn, .tv-maker-composer[data-tvw-tool="tts"] #voice-dropdown-btn { display: inline-flex !important; } .tv-maker-composer[data-tvw-tool="subtitles"] #voice-dropdown-btn, .tv-maker-composer[data-tvw-tool="ai_video_to_shorts"] #voice-dropdown-btn { display: none !important; } /* Tools run the composer in ai_edit mode (see setTool), so the uploader shows with the standard AI-Edits design. TTS is text-only — hide the uploader there. */ .tv-maker-composer[data-tvw-tool="tts"] .tv-single-source-actions { display: none !important; } /* Main textarea: TTS uses it as the script box; AI shorts as optional instructions; dubbing/subtitles don't use it. */ .tv-maker-composer[data-tvw-tool="dubbing"] .description-input, .tv-maker-composer[data-tvw-tool="dubbing"] .word-count, .tv-maker-composer[data-tvw-tool="subtitles"] .description-input, .tv-maker-composer[data-tvw-tool="subtitles"] .word-count { display: none !important; } /* Text to Speech: the script box should be a tall, comfortable textarea — the composer is still in ai_edit mode (which forces a 42px single line), so override. */ .tv-maker-composer[data-tvw-tool="tts"] .description-input { height: auto !important; min-height: 200px !important; max-height: none !important; margin: 12px 0 0 !important; padding: 16px 18px !important; border: 1px solid #E2E2E5 !important; border-radius: 16px !important; background: #FFFFFF !important; font-size: 16px !important; line-height: 1.55 !important; resize: vertical !important; text-align: left !important; } @media (max-width: 600px) { .tvw-panel--voice, .tvw-panel--style, .tvw-panel--list, .tvw-panel--drop { width: 94vw !important; max-width: 94vw !important; } }