/* OmniChat — Cloud Scene Editor (Tasks 11+12). Full-screen overlay editor. Theme tokens (--surface, --accent, …) are defined on :root in streaming.css, which is always loaded alongside this file, so we just consume them here. Broadcast-deck aesthetic. */ .scene-editor { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--bg, #18181b); color: var(--text, #efeff1); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .scene-editor.hidden { display: none; } body.editor-open { overflow: hidden; } /* ── Top bar ─────────────────────────────────────────────────── */ .se-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-inset, #0e0e10); border-bottom: 1px solid var(--border, #2f2f35); flex-shrink: 0; min-height: 48px; } .se-title { font-family: var(--font-display, 'Chakra Petch', system-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .02em; white-space: nowrap; } .se-beta { font-size: 10px; font-weight: 600; color: var(--accent-2, #cbb8ff); background: var(--accent-wash, rgba(145,71,255,.12)); border: 1px solid var(--border-accent, #4d3a8e); border-radius: var(--r-pill, 999px); padding: 1px 7px; vertical-align: middle; margin-left: 2px; } .se-spacer { flex: 1 1 auto; } .se-coll-switch { display: inline-flex; align-items: center; gap: 6px; background: var(--surface, #1f1f23); border: 1px solid var(--border, #2f2f35); color: var(--text, #efeff1); border-radius: var(--r-sm, 6px); padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; } .se-coll-switch:hover { border-color: var(--border-accent, #4d3a8e); } .se-coll-switch[aria-expanded="true"] { border-color: var(--border-accent, #4d3a8e); } .se-caret { color: var(--text-dim, #adadb8); } /* Collection dropdown menu (appended to , positioned under the button). */ .se-coll-menu { position: fixed; z-index: 9100; min-width: 220px; max-width: 320px; max-height: 60vh; overflow-y: auto; background: var(--surface, #1f1f23); border: 1px solid var(--border, #2f2f35); border-radius: var(--r-md, 8px); box-shadow: 0 10px 30px rgba(0,0,0,.55); padding: 4px; } .se-coll-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text, #efeff1); border-radius: var(--r-sm, 6px); padding: 7px 9px; font-size: 13px; cursor: pointer; } .se-coll-item:hover { background: var(--accent-wash, rgba(145,71,255,.12)); } .se-coll-item.active { color: var(--accent-2, #cbb8ff); } .se-coll-check { width: 14px; flex-shrink: 0; color: var(--accent-2, #cbb8ff); } .se-coll-itemname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .se-coll-count { font-size: 11px; color: var(--text-faint, #71717a); background: var(--surface-inset, #0e0e10); border-radius: var(--r-pill, 999px); padding: 1px 7px; } /* Per-collection environment badge (cloud|desktop) — shown on the switch button and in each collection menu row. */ .se-env-badge { font-size: 10px; font-weight: 600; border-radius: var(--r-pill, 999px); padding: 1px 7px; vertical-align: middle; white-space: nowrap; border: 1px solid var(--border, #2f2f35); color: var(--text-dim, #adadb8); background: var(--surface-inset, #0e0e10); } .se-env-badge.se-env-cloud { color: var(--accent-2, #cbb8ff); background: var(--accent-wash, rgba(145,71,255,.12)); border-color: var(--border-accent, #4d3a8e); } /* Environment radio picker (new collection / change environment modal). */ .se-env-group { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; } .se-env-opt { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--border, #2f2f35); border-radius: var(--r-sm, 6px); cursor: pointer; } .se-env-opt:hover { border-color: var(--border-accent, #4d3a8e); } .se-env-opt input { margin-top: 2px; flex-shrink: 0; } .se-env-opt-body { display: flex; flex-direction: column; gap: 2px; } .se-env-opt-label { font-size: 13px; font-weight: 600; color: var(--text, #efeff1); } .se-env-opt-note { font-size: 11px; color: var(--text-dim, #adadb8); } .se-coll-sep { height: 1px; background: var(--border, #2f2f35); margin: 4px 2px; } .se-coll-action { color: var(--text-dim, #adadb8); } .se-coll-danger:hover { color: var(--danger, #ff6b6b); background: rgba(255,107,107,.1); } /* Transparent full-screen scrim under the collection menu — clicking it closes the menu (reliable in both browser + Electron). */ .se-coll-scrim { position: fixed; inset: 0; z-index: 9095; background: transparent; } /* ── Electron-safe prompt/confirm modal ──────────────────────── */ .se-modal-scrim { position: fixed; inset: 0; z-index: 9200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 16px; } .se-modal { width: 100%; max-width: 340px; background: var(--surface, #1f1f23); border: 1px solid var(--border, #2f2f35); border-radius: var(--r-md, 8px); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); padding: 16px; } .se-modal-title { font-family: var(--font-display, 'Chakra Petch', system-ui, sans-serif); font-weight: 700; font-size: 14px; letter-spacing: .02em; margin-bottom: 8px; } .se-modal-msg { font-size: 12px; line-height: 1.45; color: var(--text-dim, #adadb8); margin-bottom: 10px; } .se-modal-input { margin-bottom: 14px; } .se-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .se-btn-danger { background: var(--danger, #ff6b6b); border-color: var(--danger, #ff6b6b); color: #fff; } .se-btn-danger:hover:not(:disabled) { box-shadow: 0 0 14px rgba(255, 107, 107, .45); } /* ── Export dropdown menu (Task 8) ───────────────────────────── */ .se-export-menu { min-width: 240px; } .se-export-head { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint, #71717a); padding: 6px 9px 2px; } .se-export-scope.active { color: var(--accent-2, #cbb8ff); } .se-export-note { font-size: 11px; line-height: 1.4; color: var(--text-faint, #71717a); padding: 4px 9px 6px; } /* ── Import modal (Task 8) ───────────────────────────────────── */ .se-import-modal { max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; } .se-import-targets { display: flex; gap: 16px; margin-bottom: 12px; } .se-import-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text, #efeff1); cursor: pointer; } .se-import-radio input { accent-color: var(--accent, #9147ff); cursor: pointer; } .se-import-drop { border: 1px dashed var(--border-accent, #4d3a8e); border-radius: var(--r-md, 8px); background: var(--surface-inset, #0e0e10); padding: 18px 14px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; margin-bottom: 10px; } .se-import-drop:hover, .se-import-drop:focus-visible { border-color: var(--accent, #9147ff); outline: none; } .se-import-drop.dragover { border-color: var(--accent, #9147ff); background: var(--accent-wash, rgba(145,71,255,.12)); } .se-import-drop-hint { font-size: 12px; color: var(--text-dim, #adadb8); } .se-import-drop-hint strong { color: var(--text, #efeff1); } .se-import-error { font-size: 12px; line-height: 1.4; color: var(--danger, #ff6b6b); background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .35); border-radius: var(--r-sm, 6px); padding: 8px 10px; margin-bottom: 10px; } .se-import-preview { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 14px; } .se-import-name { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .se-import-name .se-field-label { font-size: 11px; color: var(--text-dim, #adadb8); } .se-import-srccount { font-size: 11px; color: var(--text-faint, #71717a); margin-bottom: 8px; } .se-import-scenes { display: flex; flex-direction: column; gap: 8px; } .se-import-scene { background: var(--surface-inset, #0e0e10); border: 1px solid var(--border, #2f2f35); border-radius: var(--r-sm, 6px); padding: 8px 10px; } .se-import-scene-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .se-import-scene-name { font-size: 13px; font-weight: 600; color: var(--text, #efeff1); } .se-import-active { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2, #cbb8ff); background: var(--accent-wash, rgba(145,71,255,.12)); border: 1px solid var(--border-accent, #4d3a8e); border-radius: var(--r-pill, 999px); padding: 1px 7px; } .se-import-badges { display: flex; flex-wrap: wrap; gap: 5px; } .se-import-badge { font-size: 11px; color: var(--text-dim, #adadb8); background: var(--surface, #1f1f23); border: 1px solid var(--border, #2f2f35); border-radius: var(--r-pill, 999px); padding: 2px 9px; } .se-import-badge-camera { color: #cbb8ff; } .se-import-badge-browser { color: #8fd0ff; } .se-import-badge-image { color: #8ff0c2; } .se-import-badge-text { color: #ffd98f; } .se-import-empty { font-style: italic; color: var(--text-faint, #71717a); } .se-import-warn { color: #ffb454; background: rgba(255, 180, 84, .08); border-color: rgba(255, 180, 84, .4); } .se-import-dropped { margin: 6px 0 0; padding-left: 18px; font-size: 11px; line-height: 1.4; color: var(--text-faint, #71717a); } .se-import-dropped li { margin: 1px 0; } .se-preview-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim, #adadb8); } .se-preview-label { white-space: nowrap; } .se-preview-src select { background: var(--surface, #1f1f23); border: 1px solid var(--border, #2f2f35); color: var(--text, #efeff1); border-radius: var(--r-sm, 6px); padding: 4px 8px; font-size: 12px; } .se-autosave { font-size: 11px; color: var(--text-faint, #71717a); min-width: 0; white-space: nowrap; } .se-btn { border: 1px solid var(--border, #2f2f35); background: var(--surface, #1f1f23); color: var(--text, #efeff1); border-radius: var(--r-sm, 6px); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .se-btn:hover:not(:disabled) { border-color: var(--border-accent, #4d3a8e); } .se-btn:disabled { opacity: .45; cursor: not-allowed; } .se-btn-ghost { background: transparent; color: var(--text-dim, #adadb8); } .se-btn-live { background: var(--accent, #9147ff); border-color: var(--accent, #9147ff); color: #fff; } .se-btn-live:hover { box-shadow: var(--glow-accent, 0 0 14px rgba(145,71,255,.45)); } .se-close { background: transparent; border: 1px solid transparent; color: var(--text-dim, #adadb8); font-size: 16px; line-height: 1; width: 30px; height: 30px; border-radius: var(--r-sm, 6px); cursor: pointer; } .se-close:hover { background: var(--surface, #1f1f23); color: var(--text, #efeff1); } /* ── Body 3-pane grid ────────────────────────────────────────── */ .se-body { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: 212px 1fr 268px; min-height: 0; overflow: hidden; } /* Drawer scrim — only active at narrow widths when a drawer is open. */ .se-drawer-scrim { display: none; } .se-pane { background: var(--surface, #1f1f23); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .se-pane-left { border-right: 1px solid var(--border, #2f2f35); } .se-pane-right { border-left: 1px solid var(--border, #2f2f35); } .se-pane-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border, #2f2f35); flex-shrink: 0; } .se-pane-title { font-family: var(--font-display, 'Chakra Petch', system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim, #adadb8); } .se-icon-btn { width: 24px; height: 24px; border: 1px solid var(--border, #2f2f35); background: var(--surface-inset, #0e0e10); color: var(--text, #efeff1); border-radius: var(--r-sm, 6px); font-size: 14px; line-height: 1; cursor: pointer; } .se-icon-btn:hover { border-color: var(--border-accent, #4d3a8e); } /* ── Scene list ──────────────────────────────────────────────── */ .se-scene-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; } .se-scene-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm, 6px); padding: 6px; margin-bottom: 4px; color: var(--text, #efeff1); cursor: pointer; } .se-scene-row:hover { background: var(--surface-inset, #0e0e10); } .se-scene-row.selected { background: var(--surface-2, #2a2440); border-color: var(--border-accent, #4d3a8e); } .se-scene-thumb { flex-shrink: 0; width: 44px; height: 25px; background: var(--surface-inset, #0e0e10); border: 1px solid var(--border, #2f2f35); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; } .se-scene-name { flex: 1 1 auto; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .se-live-badge { flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #04210a; background: #53fc18; border-radius: var(--r-pill, 999px); padding: 1px 6px; } /* The active (LIVE) scene row gets a subtle accent rail so it's identifiable even when not selected. */ .se-scene-row.live { box-shadow: inset 2px 0 0 #53fc18; } /* Per-scene rename/delete actions: hidden until the row is hovered/focused (or its own button is focused) to keep the list clean; always shown on touch (no hover). */ .se-scene-acts { flex-shrink: 0; display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .12s ease; } .se-scene-row:hover .se-scene-acts, .se-scene-row:focus-within .se-scene-acts { opacity: 1; } @media (hover: none) { .se-scene-acts { opacity: 1; } } .se-scene-act { background: transparent; border: 1px solid transparent; border-radius: var(--r-sm, 6px); color: var(--text-dim, #adadb8); cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 5px; } .se-scene-act:hover { background: var(--surface-2, #2a2440); color: var(--text, #efeff1); } .se-scene-act-del:hover { color: #ff6b6b; border-color: #ff6b6b; } /* Set-active button reflects the active scene (disabled + accented when active). */ .se-btn-live.is-active { opacity: .85; cursor: default; } .se-empty { padding: 14px 12px; font-size: 12px; color: var(--text-faint, #71717a); } /* P-B — portrait scene marker in the scene list. */ .se-canvas-badge { flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--text-dim, #adadb8); background: var(--surface-inset, #0e0e10); border: 1px solid var(--border, #2f2f35); border-radius: var(--r-pill, 999px); padding: 1px 6px; } /* ── Center / canvas ─────────────────────────────────────────── */ .se-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg, #18181b); } .se-stage-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: radial-gradient(circle at 50% 40%, rgba(145,71,255,.05), transparent 60%), var(--surface-inset, #0e0e10); overflow: hidden; } .se-stage { position: relative; background: #050507; box-shadow: 0 8px 40px -12px rgba(0,0,0,.8); outline: 1px solid var(--border, #2f2f35); overflow: hidden; } /* Title-safe dashed guide — 5% inset, non-interactive. */ .se-safe-guide { position: absolute; inset: 5%; border: 1px dashed rgba(255,255,255,.28); border-radius: 2px; pointer-events: none; z-index: 99999; } /* Sources — every source is an always-visible, selectable bounding box (OBS/Streamlabs style) so a blank/404 overlay is still identifiable. */ .se-src { position: absolute; overflow: hidden; box-sizing: border-box; cursor: move; outline: 1px solid rgba(145, 71, 255, .35); outline-offset: -1px; } .se-src:hover { outline-color: rgba(145, 71, 255, .65); } .se-src.selected { outline: 2px solid var(--accent, #9147ff); outline-offset: -1px; } /* The editor is for layout, not interacting with overlay content — so the iframe/img/text-inner must NOT capture pointer events; clicks land on the .se-src box for select/drag. The bounding box + label stay visible. */ .se-src iframe, .se-src img, .se-src video, .se-src .se-text-inner, .se-src .se-cam-placeholder, .se-src > span:not(.se-src-label) { pointer-events: none; } /* Tiny type/name chip in the top-left corner of each source box. */ .se-src-label { position: absolute; top: 0; left: 0; z-index: 5; max-width: calc(100% - 4px); display: inline-flex; align-items: center; gap: 4px; pointer-events: none; font-family: var(--font-display, 'Chakra Petch', system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: #efeff1; background: rgba(10, 8, 18, .62); border-bottom-right-radius: 4px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Selection handle overlay — sits above sources & safe-guide. */ .se-handles { position: absolute; z-index: 100000; pointer-events: none; box-sizing: border-box; outline: 1px solid var(--accent, #9147ff); } .se-handle { position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px; background: #fff; border: 2px solid var(--accent, #9147ff); border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: auto; box-sizing: border-box; } .se-h-nw { left: 0; top: 0; cursor: nwse-resize; } .se-h-n { left: 50%; top: 0; cursor: ns-resize; } .se-h-ne { left: 100%; top: 0; cursor: nesw-resize; } .se-h-e { left: 100%; top: 50%; cursor: ew-resize; } .se-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .se-h-s { left: 50%; top: 100%; cursor: ns-resize; } .se-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .se-h-w { left: 0; top: 50%; cursor: ew-resize; } .se-src video, .se-src iframe, .se-src img { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; } .se-src video { object-fit: cover; background: #000; } .se-placeholder, .se-cam-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 12px; color: var(--text-dim, #adadb8); background: repeating-linear-gradient( 45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 8px, transparent 8px, transparent 16px), var(--surface, #1f1f23); border: 1px dashed var(--border, #2f2f35); text-align: center; padding: 4px; } .se-src-camera { background: #101014; } .se-src-camera .se-cam-placeholder { border: none; } /* Studio feed (RTMP / IRL) placeholder — the cloud's canonical video input. Reuses the dashed-placeholder chrome with an accent tint to read as "live". */ .se-src-studio-input { color: var(--accent-2, #cbb8ff); border-color: var(--border-accent, #4d3a8e); } .se-src-image { background: var(--surface-inset, #0e0e10); } .se-img-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 12px; color: var(--text-faint, #71717a); } .se-src-image.se-img-broken .se-img-fallback { display: flex; } .se-src-text { pointer-events: auto; } .se-text-inner { width: 100%; } /* Canvas bottom bar */ .se-canvas-bar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border, #2f2f35); background: var(--surface, #1f1f23); } /* P-B — per-scene canvas (framing) selector in the stage bar. */ .se-canvas-pick { display: flex; align-items: center; gap: 6px; } .se-canvas-pick-label { font-size: 11px; color: var(--text-faint, #71717a); text-transform: uppercase; letter-spacing: .06em; } .se-canvas-pick select { background: var(--surface-inset, #0e0e10); color: var(--text, #efeff1); border: 1px solid var(--border, #2f2f35); border-radius: var(--r-sm, 6px); padding: 3px 8px; font-size: 12px; cursor: pointer; } .se-canvas-pick select:disabled { opacity: .45; cursor: not-allowed; } .se-addsource-quick { display: flex; gap: 6px; } /* Add-source button compacted to sit in the Layers panel header (right side). */ .se-pane-head .se-addsource { font-size: 11px; padding: 3px 8px; line-height: 1.2; } .se-chip { border: 1px solid var(--border, #2f2f35); background: var(--surface-inset, #0e0e10); color: var(--text-dim, #adadb8); border-radius: var(--r-sm, 6px); padding: 4px 9px; font-size: 12px; cursor: pointer; white-space: nowrap; } .se-chip:hover:not(:disabled) { border-color: var(--border-accent, #4d3a8e); color: var(--text, #efeff1); } .se-chip:disabled { opacity: .45; cursor: not-allowed; } .se-zoom { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--text-faint, #71717a); white-space: nowrap; } /* ── Right panes ─────────────────────────────────────────────── */ .se-pane-right { gap: 0; } .se-panel { display: flex; flex-direction: column; min-height: 0; } .se-panel-props { flex: 1 1 auto; border-top: 1px solid var(--border, #2f2f35); } .se-layers { max-height: 40vh; overflow-y: auto; } .se-props { flex: 1 1 auto; overflow-y: auto; } /* ── Layers list (Task 14) ───────────────────────────────────── */ .se-layer-list { padding: 6px; } .se-layer { display: flex; align-items: center; gap: 7px; padding: 6px 7px; margin-bottom: 3px; border: 1px solid transparent; border-radius: var(--r-sm, 6px); background: transparent; cursor: pointer; font-size: 12px; color: var(--text, #efeff1); user-select: none; } .se-layer:hover { background: var(--surface-inset, #0e0e10); } .se-layer.selected { background: var(--surface-2, #2a2440); border-color: var(--border-accent, #4d3a8e); } .se-layer.dragging { opacity: .5; } .se-layer.drop-before { box-shadow: inset 0 2px 0 0 var(--accent, #9147ff); } .se-layer.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent, #9147ff); } .se-layer.hidden-src .se-layer-name, .se-layer.hidden-src .se-layer-icon { opacity: .45; } .se-layer-grip { flex-shrink: 0; color: var(--text-faint, #71717a); cursor: grab; font-size: 12px; letter-spacing: -2px; } .se-layer-grip:active { cursor: grabbing; } .se-layer-icon { flex-shrink: 0; font-size: 13px; width: 16px; text-align: center; } .se-layer-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .se-layer-vis { flex-shrink: 0; border: 0; background: transparent; color: var(--text-dim, #adadb8); font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; cursor: pointer; } .se-layer-vis:hover { background: var(--surface, #1f1f23); color: var(--text, #efeff1); } .se-layer.hidden-src .se-layer-vis { color: var(--text-faint, #71717a); } .se-layer-del { flex-shrink: 0; border: 0; background: transparent; color: var(--text-faint, #71717a); font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; cursor: pointer; } .se-layer-del:hover { background: rgba(255,90,90,.12); color: var(--danger, #ff5a5a); } /* ── Properties panel (Task 15/16) ───────────────────────────── */ .se-props { padding: 0; } .se-prop-group { padding: 10px 12px; border-bottom: 1px solid var(--border, #2f2f35); } .se-prop-group:last-child { border-bottom: 0; } .se-prop-subgroup { padding: 10px 0 0; margin-top: 8px; border-top: 1px solid var(--border, #2f2f35); border-bottom: 0; } .se-prop-grouphead { font-family: var(--font-display, 'Chakra Petch', system-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim, #adadb8); margin-bottom: 9px; } .se-prop-note { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--text-faint, #71717a); } .se-prop-row { display: flex; gap: 8px; margin-bottom: 8px; } .se-prop-row:last-child { margin-bottom: 0; } .se-prop-2col > .se-field { flex: 1 1 0; min-width: 0; } .se-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .se-field:last-child { margin-bottom: 0; } .se-field-label { font-family: var(--font-display, 'Chakra Petch', system-ui, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint, #71717a); } .se-input { width: 100%; box-sizing: border-box; background: var(--surface-inset, #0e0e10); border: 1px solid var(--border, #2f2f35); color: var(--text, #efeff1); border-radius: var(--r-sm, 6px); padding: 6px 8px; font-size: 12px; font-family: inherit; } .se-input:focus { outline: none; border-color: var(--border-accent, #4d3a8e); box-shadow: 0 0 0 2px var(--accent-wash, rgba(145,71,255,.12)); } .se-textarea { resize: vertical; min-height: 38px; line-height: 1.3; } .se-check-field { flex-direction: row; align-items: center; gap: 8px; } .se-check-field .se-field-label { order: 2; } .se-check { width: 15px; height: 15px; accent-color: var(--accent, #9147ff); cursor: pointer; } .se-color-field { display: inline-flex; align-items: center; gap: 8px; } .se-color { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border, #2f2f35); border-radius: var(--r-sm, 6px); background: var(--surface-inset, #0e0e10); cursor: pointer; } .se-color:disabled { opacity: .4; cursor: not-allowed; } .se-color-hex { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--text-dim, #adadb8); } .se-field.se-disabled { opacity: .5; } .se-img-actions { flex-wrap: wrap; } .se-img-actions .se-btn { flex: 1 1 auto; padding: 6px 8px; } .se-upload-status { margin-top: 6px; font-size: 11px; color: var(--text-dim, #adadb8); min-height: 14px; } .se-upload-status.se-upload-error { color: var(--danger, #ff6b6b); } /* ── Asset picker grid ───────────────────────────────────────── */ .se-asset-picker { margin-top: 10px; } .se-picker-empty { padding: 10px 0; } .se-asset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .se-asset { position: relative; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border, #2f2f35); border-radius: var(--r-sm, 6px); padding: 4px; background: var(--surface-inset, #0e0e10); } .se-asset.selected { border-color: var(--accent, #9147ff); box-shadow: 0 0 0 1px var(--accent, #9147ff); } .se-asset-pick { border: 0; padding: 0; background: #050507; border-radius: 4px; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; display: block; } .se-asset-pick img { width: 100%; height: 100%; object-fit: contain; display: block; } .se-asset-meta { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 9px; color: var(--text-faint, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .se-asset-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease; } .se-asset:hover .se-asset-del { opacity: 1; } .se-asset-del:hover { background: var(--danger, #ff6b6b); } /* Pane toggles — hidden on wide screens, shown as floating buttons narrow. */ .se-pane-toggle { display: none; } /* ── Narrow widths: collapse side panes to off-canvas drawers ── */ @media (max-width: 900px) { .se-body { grid-template-columns: 1fr; } .se-pane { position: absolute; top: 0; bottom: 0; width: 240px; z-index: 50; box-shadow: 0 0 40px rgba(0,0,0,.6); transition: transform .2s var(--ease, ease); } .se-pane-left { left: 0; transform: translateX(-101%); } .se-pane-left.open { transform: translateX(0); } .se-pane-right { right: 0; width: 280px; transform: translateX(101%); } .se-pane-right.open { transform: translateX(0); } /* Scrim behind an open drawer; tap to close (wired in JS). */ .se-drawer-scrim.show { display: block; position: absolute; inset: 0; z-index: 45; background: rgba(0,0,0,.45); } .se-pane-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 8px; z-index: 60; width: 34px; height: 34px; border-radius: var(--r-sm, 6px); border: 1px solid var(--border, #2f2f35); background: var(--surface, #1f1f23); color: var(--text, #efeff1); font-size: 15px; cursor: pointer; } .se-pane-toggle-left { left: 8px; } .se-pane-toggle-right { right: 8px; } /* Make room so the toggle buttons don't sit on the stage edges. */ .se-stage-wrap { padding-left: 48px; padding-right: 48px; } } @media (max-width: 560px) { .se-preview-src, .se-autosave { display: none; } .se-btn-ghost { display: none; } } /* ── Embedded mode (DD-6: Scene Designer as a Studio tab) ────────── The SAME #scene-editor-root, reparented into a Studio host container instead of the viewport. Drop the fixed full-screen overlay positioning so it fills the host's content box; the host (sec-studio) sizes/scrolls the pane. */ .scene-editor.se-embedded { position: relative; inset: auto; z-index: 0; width: 100%; /* Fill a generous slice of the Studio content area; the inner panes scroll. */ height: min(78vh, 760px); min-height: 420px; border: 1px solid var(--border, #2f2f35); border-radius: var(--r-md, 8px); overflow: hidden; } /* The editor's own top bar already carries the title; embedded, the host tab strip names it, so trim the duplicate close affordance via inline hide in JS. */ /* ── Inline field validation (browser-source URL warn state) ────── */ .se-input.se-input-invalid, .se-input.se-input-invalid:focus { border-color: var(--danger, #ff6b6b); box-shadow: 0 0 0 2px rgba(255, 107, 107, .18); } .se-field-warn { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: var(--danger, #ff6b6b); } /* Generic hidden utility scoped to the editor (the root already uses `.scene-editor.hidden`; this covers inner elements like the warn line). */ .scene-editor .hidden { display: none; } /* ── P15 §09 Phase 5 — liveManaged read-only banner ───────────────────────── Shown only for a scene the user opted into managing live in OBS (every other scene renders nothing here and stays fully editable). The banner explains the mode + carries the "Reset to designer" escape; the .se-readonly class on the editor body dims + blocks pointer interaction with the canvas/layers/props so the user can't silently edit a body the engine will ignore. */ .scene-editor .se-livemanaged-banner { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; padding: var(--space-2, 8px) var(--space-3, 12px); background: var(--accent-wash, rgba(145, 71, 255, .12)); border-bottom: 1px solid var(--border-accent, #4d3a8e); color: var(--text, #efeff1); font-size: var(--font-size-sm, .875rem); } .scene-editor .se-livemanaged-msg { flex: 1 1 16rem; } /* Dim + block the abstract editing surfaces while a scene is managed live. The banner itself (rendered as a sibling at the top of .se-body) stays interactive so "Reset to designer" works. */ .scene-editor .se-body.se-readonly .se-center, .scene-editor .se-body.se-readonly .se-pane-right { opacity: .55; pointer-events: none; } /* ── Cross-env source locking (unified model) ───────────────────── A source the active env can't run (a local-device camera / obs-native capture in the cloud) is shown LOCKED: greyed, non-interactive, with a 🔒 badge — but STILL present and saved. Geometry/visibility still render so the layout reads correctly; only authoring is blocked. Tokens only — no hardcoded colors. */ .se-src.se-source--locked { cursor: default; outline: 1px dashed var(--border, #2f2f35); opacity: .5; filter: grayscale(1); } .se-src.se-source--locked:hover { outline-color: var(--border, #2f2f35); } /* Nothing inside a locked box captures the pointer (defense-in-depth on top of the data-locked guard in the canvas pointer handler). */ .se-src.se-source--locked, .se-src.se-source--locked * { pointer-events: none; } .se-src-label.se-src-label--locked { color: var(--text-dim, #adadb8); background: var(--surface-inset, #0e0e10); } /* obsRaw placeholder — opaque OBS capture on a liveManaged scene (display-only). */ .se-src-obsraw { background: repeating-linear-gradient( 45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 8px, transparent 8px, transparent 16px), var(--surface, #1f1f23); } /* obs-native — a first-class OBS capture source (window/game/monitor) reverse-synced from Live OBS. Display-only in the Designer (authored in Live OBS); it reuses the hatched .se-src-obsraw look, .se-placeholder centering, and .se-source--locked greying, so no extra box styling is needed here. */ .se-obsraw-hint { position: absolute; bottom: 0; right: 0; z-index: 5; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: var(--text-faint, #71717a); background: var(--surface-inset, #0e0e10); border-top-left-radius: 4px; padding: 3px 6px; } /* Layers list — locked row: greyed, non-draggable, edit affordances disabled, but visibility state still legible (a muted hint explains why). */ .se-layer.se-layer--locked { cursor: default; opacity: .6; } .se-layer.se-layer--locked:hover { background: transparent; } .se-layer-lock { flex-shrink: 0; font-size: 11px; color: var(--text-dim, #adadb8); } .se-layer-lock-hint { flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-style: italic; color: var(--text-faint, #71717a); } .se-layer-vis[disabled], .se-layer-del[disabled] { cursor: default; opacity: .4; } .se-layer-vis[disabled]:hover, .se-layer-del[disabled]:hover { background: transparent; color: var(--text-faint, #71717a); }