/** * video-tools.css — "Polish your video" tray (Video Studio, WP2, 2026-07-09). * Component: src/public/js/video-tools.js (window.CBVideoTools). * * Design source of truth: css/outreach-dashboard.css (.mi-card/.mi-action/ * .range-tabs idioms — Alex 2026-07-09: "that styling is spot on"). The tray * is appended to and mounts from pages OUTSIDE the outreach dashboard's * `#page-outreach-dashboard` token scope (e.g. Settings → Media, which uses * the plain app-shell light theme). Exactly like the rel-editor modal further * down outreach-dashboard.css documents for its own overlay, this file uses * EXPLICIT colours copied from that same palette rather than `var(--...)` * tokens that would resolve to nothing here. */ .cbvt-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(13, 8, 25, 0.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } /* R2.1 (Alex, 2026-07-09): ONE constant frame for every view. The modal used to be 620px on the tray home and 900px in the working views — every tool switch visibly reshaped the window ("it just feels a bit stuck together"). Now the frame never changes: same width and a steady min-height everywhere; only the content inside swaps, with a gentle cross-fade (.cbvt-anim below). */ .cbvt-modal { background: #ffffff; color: #15172b; width: 100%; max-width: 900px; min-height: min(640px, calc(100vh - 40px)); max-height: calc(100vh - 40px); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(13, 8, 25, 0.35); font-family: inherit; display: flex; flex-direction: column; animation: cbvt-pop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes cbvt-pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } /* Tool-switch cross-fade — applied by switchTool() only (deliberately NOT on a tool's own internal re-renders, e.g. a gaps checkbox toggle, which would flicker). */ .cbvt-panel.cbvt-anim { animation: cbvt-panel-in 0.18s ease both; } @keyframes cbvt-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cbvt-modal, .cbvt-panel.cbvt-anim { animation: none; } } .cbvt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; flex: none; } .cbvt-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #15172b; } .cbvt-close { flex: none; border: none; background: transparent; font-size: 22px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 2px; min-width: 32px; min-height: 32px; } .cbvt-close:hover { color: #374151; } /* R2.1 — the chips (and the ← Back slot) stay pinned; only the tool's own content (#cbvt-panel) scrolls. Navigation never scrolls out of reach. */ .cbvt-body { display: flex; gap: 20px; padding: 6px 20px 20px; flex: 1; min-height: 0; overflow: hidden; } /* R2.1 — the old 200px "what people see" side column is gone; the tray home now shows the effective thumbnail on the SAME big stage every other tool uses (#cbvt-home-stage in video-tools.js), so the media area sits in the same place on every view. The empty/label/badge pieces below are still used by that stage. */ .cbvt-home-stage { position: relative; } /* anchors the absolute play badge to the stage, not the modal */ .cbvt-home-stage img { width: 100%; height: 100%; object-fit: cover; display: block; } .cbvt-preview-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #4b4e63; } .cbvt-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; pointer-events: none; } .cbvt-preview-label { font-size: 11.5px; color: #6b7280; text-align: center; } /* Layer-order bar — select a layer on the canvas, then reorder it (Alex 2026-07-09). Sits between the preview label and the canvas stage. */ .cbvt-layer-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 6px auto 2px; max-width: 640px; } .cbvt-layer-hint { font-size: 11.5px; color: #9096a3; } .cbvt-layer-btns { display: inline-flex; gap: 6px; } .cbvt-layer-btn { border: 1px solid #e0ddef; background: #fbfbfe; color: #4b40c9; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; min-height: 32px; line-height: 1; } .cbvt-layer-btn:hover:not(:disabled) { border-color: #cfc9ec; background: #f2f0fb; } .cbvt-layer-btn:disabled { opacity: 0.45; cursor: not-allowed; color: #9096a3; } /* Tool chips + the active tool's panel. */ .cbvt-tools { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; } .cbvt-chips { display: flex; flex-wrap: wrap; gap: 6px; background: #f6f4ee; border-radius: 10px; padding: 4px; } .cbvt-chip { border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: #6b7280; padding: 7px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; cursor: default; } .cbvt-chip:not(.soon) { cursor: pointer; } .cbvt-chip:not(.soon):hover { color: #15172b; } .cbvt-chip.active { background: #ffffff; color: #15172b; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .cbvt-chip.soon { color: #9ca3af; cursor: not-allowed; } .cbvt-chip-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: #ece9f7; color: #6a4cf1; padding: 2px 6px; border-radius: 999px; } /* WP12 (UX Round 2 §1) — the OTHER two chips while a job runs on this video: genuinely locked (the server 409s a second subtitles/trim/remove-gaps job regardless of which one asks) but not the one actually running, so this reads as "something else has this locked" rather than repeating the same claim on every chip. */ .cbvt-chip-badge-locked { background: #f0f1f5; color: #9ca3af; } /* WP12 — the shared "← Back" slot for Subtitles/Trim/Remove-gaps (see syncWideBackButton() in video-tools.js); `display:flex` so the embedded .cbvt-back-btn's `align-self:flex-start` behaves exactly like the maker's own (a real flex item, not an incidental inline-block); collapsed via :empty whenever the Thumbnail tool is active, so it never adds a stray gap. */ #cbvt-panel-back { display: flex; } #cbvt-panel-back:empty { display: none; } .cbvt-panel { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 2px; /* breathing room so focus rings/shadows aren't clipped by the scroll box */ } /* Thumbnail action cards — the outreach dashboard's .mi-action idiom, sized up into full clickable cards (min-height 48px for touch). */ .cbvt-actions { display: flex; flex-direction: column; gap: 10px; } .cbvt-action-card { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; min-height: 48px; text-align: left; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; } .cbvt-action-card:hover { border-color: #6a4cf1; background: #faf9ff; } .cbvt-action-card:disabled { opacity: 0.55; cursor: not-allowed; } .cbvt-action-ico { font-size: 20px; flex: none; } .cbvt-action-text { display: flex; flex-direction: column; gap: 2px; } .cbvt-action-text b { font-size: 13.5px; color: #15172b; font-weight: 600; } .cbvt-action-text small { font-size: 11.5px; color: #6b7280; } .cbvt-reset-row { display: flex; } .cbvt-ghost-btn { border-radius: 9px; font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; border: 1px solid #e5e7eb; min-height: 40px; background: #fff; color: #374151; font-family: inherit; } .cbvt-ghost-btn:hover { border-color: #c9ccd3; } .cbvt-ghost-btn:disabled { opacity: 0.55; cursor: not-allowed; } .cbvt-primary-btn { border-radius: 9px; font-size: 13.5px; font-weight: 600; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; min-height: 44px; background: #6a4cf1; color: #fff; font-family: inherit; } .cbvt-primary-btn:hover { background: #5a3fd8; } .cbvt-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cbvt-status { font-size: 12px; color: #6b7280; min-height: 16px; } .cbvt-status.error { color: #c0423a; } /* Pick-a-frame scrubber */ .cbvt-scrub { display: flex; flex-direction: column; gap: 10px; } .cbvt-back-btn { align-self: flex-start; border: none; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #6a4cf1; padding: 4px 2px; min-height: 32px; } .cbvt-back-btn:hover { color: #5a3fd8; } /* WP12 ("bigger UI", spec §2) — shared by Pick-a-frame, Trim, Subtitles and Remove-gaps' preview stages. Capped + centred like the maker's own `.cbvt-maker-stage` (below) rather than stretched edge-to-edge, so all the tray's "big preview" views share one proportion. `width:100%` still makes it fill a narrower (e.g. mobile) container correctly — the cap only binds once there's room to spare. */ .cbvt-scrub-stage { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; } /* Caption preview strip — sits directly under the video, linked above the editable transcript. Shows the line covering the current moment (or the line being edited), with a muted hint when there's nothing to show. */ .cbvt-caption-preview { width: 100%; max-width: 640px; margin: 0 auto; background: #15172b; color: #fff; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.4; padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; min-height: 20px; } .cbvt-caption-preview.empty { background: #f5f4fb; color: #9096a3; font-weight: 500; font-size: 12.5px; } .cbvt-scrub-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; } .cbvt-scrub-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 6px; background: #ece9f7; outline: none; margin: 2px 0; } .cbvt-scrub-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #6a4cf1; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(106, 76, 241, 0.5); } .cbvt-scrub-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #6a4cf1; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(106, 76, 241, 0.5); } .cbvt-scrub-range:disabled { opacity: 0.5; } .cbvt-scrub-time { font-size: 11.5px; color: #6b7280; text-align: center; margin-top: -6px; } .cbvt-scrub-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } /* AI: Suggest frames (Video Studio WP7, spec §2.5) — top-3 suggestion grid shown inside the Pick-a-frame panel (same scrub player, no second video). */ .cbvt-suggest-grid { display: flex; gap: 8px; } .cbvt-suggest-card { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 2px solid #e5e7eb; background: #15172b; padding: 0; cursor: pointer; font-family: inherit; } .cbvt-suggest-card:hover { border-color: #6a4cf1; } .cbvt-suggest-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .cbvt-suggest-score { position: absolute; top: 4px; right: 4px; background: rgba(10, 10, 20, 0.72); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 999px; } /* Subtitles tab — explainer / progress / editable-transcript states. */ .cbvt-subs-empty, .cbvt-subs-processing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 8px; } .cbvt-subs-empty-ico { font-size: 30px; } .cbvt-subs-empty p, .cbvt-subs-processing p { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.5; max-width: 380px; } .cbvt-subs-note { font-size: 11.5px !important; color: #9ca3af !important; } .cbvt-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #ece9f7; border-top-color: #6a4cf1; animation: cbvt-spin 0.8s linear infinite; } @keyframes cbvt-spin { to { transform: rotate(360deg); } } .cbvt-subs-editor { display: flex; flex-direction: column; gap: 10px; } .cbvt-subs-rows { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; } .cbvt-subs-row { display: flex; align-items: center; gap: 8px; } /* WP12 — a