feat: add hot video page and enhance smart cutout editor
- Add 爆款视频 (hot video) page with platform, ratio, quality, duration settings - Add AI video planning workspace integration - Update smart cutout size options with precise output dimensions (295*413, 800*800, etc.) - Add compare (对比) feature for before/after cutout preview - Enhance smart cutout tool UI with size labels and improved layout - Add hot video page styles and smart cutout editor refinements
This commit is contained in:
Codex
@@ -4123,6 +4123,863 @@
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Page (爆款视频) ──────────────────────── */
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page {
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
/* ── Match the homepage dark-green background ──── */
|
||||
background:
|
||||
radial-gradient(circle at 72% 12%, rgba(0, 255, 136, 0.045), transparent 31%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
|
||||
#05080d !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-shell {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-rail,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-panel,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .clone-ai-settings-toggle,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .ecom-command-history {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-hot-video-page {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto minmax(0, 1fr) !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-height: 0 !important;
|
||||
background: transparent !important;
|
||||
color: var(--ecm-text, #eef4f0) !important;
|
||||
font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Nav — matches the homepage topbar ── */
|
||||
.ecom-hot-video-nav {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 24px !important;
|
||||
padding: 10px clamp(16px, 3vw, 32px) !important;
|
||||
min-height: 64px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(5, 8, 13, 0.82) !important;
|
||||
backdrop-filter: blur(18px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-back {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
min-height: 36px !important;
|
||||
padding: 0 13px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14) !important;
|
||||
border-radius: 8px !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #f7faf8 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 180ms ease, background 180ms ease !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-back:hover {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-title {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-title h1 {
|
||||
margin: 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #f7faf8 !important;
|
||||
letter-spacing: 0.01em !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-title span {
|
||||
font-size: 13px !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-meta {
|
||||
margin-left: auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
padding: 6px 14px !important;
|
||||
border-radius: 8px !important;
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
font-size: 13px !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Body ─────────────────────────────────── */
|
||||
.ecom-hot-video-body {
|
||||
display: grid !important;
|
||||
grid-template-columns: 360px minmax(0, 1fr) !important;
|
||||
gap: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Settings Panel — matches the homepage popover (white bg, cyan border) ── */
|
||||
.ecom-hot-video-settings {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
padding: 20px !important;
|
||||
border-right: 1px solid rgba(30, 189, 219, 0.22) !important;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.06), transparent 12rem),
|
||||
#fbfdfe !important;
|
||||
box-shadow: 0 18px 46px rgba(20, 80, 100, 0.08) !important;
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-section {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-section > strong {
|
||||
display: block !important;
|
||||
margin-bottom: 10px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #6b7c88 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.06em !important;
|
||||
}
|
||||
|
||||
/* Upload area — matches the popover card style */
|
||||
.ecom-hot-video-upload {
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
min-height: 118px !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
padding: 20px !important;
|
||||
border: 1.5px dashed rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 14px !important;
|
||||
background: #f3f8fa !important;
|
||||
color: #10202c !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload::before {
|
||||
display: grid !important;
|
||||
width: 38px !important;
|
||||
height: 38px !important;
|
||||
place-items: center !important;
|
||||
margin-bottom: 8px !important;
|
||||
flex-shrink: 0 !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.28) !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(30, 189, 219, 0.08) !important;
|
||||
color: #1073cc !important;
|
||||
content: "+" !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload:hover {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.06) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload.is-dragging {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.1) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload:active {
|
||||
transform: scale(0.99) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload.has-images {
|
||||
padding: 16px !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload.has-images::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload > span:first-of-type {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload > span:nth-of-type(2),
|
||||
.ecom-hot-video-upload > span {
|
||||
font-size: 13px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #10202c !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload > em {
|
||||
font-size: 12px !important;
|
||||
color: #6b7c88 !important;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 8px !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure {
|
||||
position: relative !important;
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure button {
|
||||
position: absolute !important;
|
||||
top: 2px !important;
|
||||
right: 2px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(16, 115, 204, 0.08) !important;
|
||||
color: #1073cc !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
transition: border-color 150ms ease, background 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure button:hover {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.16) !important;
|
||||
}
|
||||
|
||||
/* Textarea — matches the popover input style */
|
||||
.ecom-hot-video-textarea {
|
||||
width: 100% !important;
|
||||
padding: 10px 12px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 10px !important;
|
||||
background: #f3f8fa !important;
|
||||
color: #10202c !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.55 !important;
|
||||
font-family: inherit !important;
|
||||
font-weight: 500 !important;
|
||||
resize: vertical !important;
|
||||
outline: none !important;
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-textarea:focus {
|
||||
border-color: #1ebddb !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.1), 0 0 0 2px rgba(30, 189, 219, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-textarea::placeholder {
|
||||
color: #6b7c88 !important;
|
||||
}
|
||||
|
||||
/* Options buttons — match the popover button style (white bg, cyan border) */
|
||||
.ecom-hot-video-options {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 6px !important;
|
||||
min-height: 38px !important;
|
||||
padding: 9px 13px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 10px !important;
|
||||
background: #f3f8fa !important;
|
||||
color: #10202c !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button:hover {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.1) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button.is-active {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.1) !important;
|
||||
color: #1073cc !important;
|
||||
font-weight: 800 !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.1), 0 10px 22px rgba(30, 189, 219, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button img {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options--ratio > button {
|
||||
min-width: 56px !important;
|
||||
}
|
||||
|
||||
/* Range slider */
|
||||
.ecom-hot-video-range {
|
||||
width: 100% !important;
|
||||
margin: 8px 0 4px !important;
|
||||
accent-color: #1073cc !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-range-labels {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
font-size: 11px !important;
|
||||
color: #6b7c88 !important;
|
||||
}
|
||||
|
||||
/* Start button — matches the composer send button */
|
||||
.ecom-hot-video-start {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
width: 100% !important;
|
||||
min-height: 44px !important;
|
||||
padding: 10px 24px !important;
|
||||
margin-top: auto !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.22) !important;
|
||||
border-radius: 14px !important;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.16), transparent 100%),
|
||||
linear-gradient(180deg, rgba(30, 189, 219, 0.1), rgba(16, 115, 204, 0.06)) !important;
|
||||
color: #1073cc !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 800 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-start:hover:not(:disabled) {
|
||||
border-color: #1ebddb !important;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.24), transparent 100%),
|
||||
linear-gradient(180deg, rgba(30, 189, 219, 0.16), rgba(16, 115, 204, 0.1)) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 10px 28px rgba(30, 189, 219, 0.14) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-start:active:not(:disabled) {
|
||||
transform: scale(0.98) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-start:disabled {
|
||||
background: #f3f8fa !important;
|
||||
border-color: rgba(30, 189, 219, 0.1) !important;
|
||||
color: #a0b8c8 !important;
|
||||
cursor: not-allowed !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Workspace ────────────────────────────── */
|
||||
.ecom-hot-video-workspace {
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ── Video workspace — matches the homepage (transparent bg, topbar flowbar, panel nodes) ── */
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-workspace {
|
||||
background: transparent !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
/* ── Flowbar — matches homepage topbar ─────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(5, 8, 13, 0.82) !important;
|
||||
backdrop-filter: blur(18px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__pulse {
|
||||
background: rgba(247, 250, 248, 0.25) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__pulse.is-active {
|
||||
background: #1ebddb !important;
|
||||
box-shadow: 0 0 8px rgba(30, 189, 219, 0.45) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__wave i {
|
||||
background: rgba(247, 250, 248, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ── Flowbar zoom ──────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__zoom button {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__zoom button:hover:not(:disabled) {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__zoom span {
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
/* ── Step dots ──────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-step-dot {
|
||||
background: rgba(247, 250, 248, 0.22) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-step-dot.is-done {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-step-dot.is-active {
|
||||
background: #1ebddb !important;
|
||||
box-shadow: 0 0 8px rgba(30, 189, 219, 0.5) !important;
|
||||
animation: ecom-video-node-breathe-local 1.2s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
/* ── Flow actions (buttons) — match topbar buttons ── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action:hover:not(:disabled) {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--ghost {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--ghost:hover:not(:disabled) {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--danger {
|
||||
border-color: rgba(239, 68, 68, 0.2) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--danger:hover:not(:disabled) {
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
background: rgba(239, 68, 68, 0.16) !important;
|
||||
color: #f87171 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action:disabled {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
color: rgba(247, 250, 248, 0.3) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__stage-label {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__error {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* ── Flow canvas — transparent, blends with page ─── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-canvas {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ── Flow nodes — page panel style ──────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-ready,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-running,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-pending {
|
||||
border-color: rgba(30, 189, 219, 0.3) !important;
|
||||
animation: ecom-tree-breathe-local 1.6s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-failed {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--final {
|
||||
border-color: rgba(30, 189, 219, 0.15) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--final.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.3) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text {
|
||||
border-color: rgba(30, 189, 219, 0.12) !important;
|
||||
background: rgba(30, 189, 219, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text.is-pulsing {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
animation: ecom-tree-breathe-local 1.2s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
/* ── Node status orb ────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__status-orb {
|
||||
background: rgba(247, 250, 248, 0.35) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-pending .ecom-video-flow-node__status-orb {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-failed .ecom-video-flow-node__status-orb {
|
||||
background: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--final.is-completed .ecom-video-flow-node__status-orb {
|
||||
background: #f59e0b !important;
|
||||
}
|
||||
|
||||
/* ── Text icon ──────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__text-icon {
|
||||
background: rgba(30, 189, 219, 0.15) !important;
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text.is-pulsing .ecom-video-flow-node__text-icon {
|
||||
background: rgba(30, 189, 219, 0.22) !important;
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Node labels ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__label {
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
/* ── Node progress ──────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__progress {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__progress i {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--image .ecom-video-flow-node__progress,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--video .ecom-video-flow-node__progress {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Node placeholder ───────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__placeholder {
|
||||
background: rgba(30, 189, 219, 0.04) !important;
|
||||
color: rgba(30, 189, 219, 0.35) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--image .ecom-video-flow-node__placeholder,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--video .ecom-video-flow-node__placeholder {
|
||||
background: rgba(30, 189, 219, 0.04) !important;
|
||||
color: rgba(30, 189, 219, 0.35) !important;
|
||||
}
|
||||
|
||||
/* ── Error label ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__error {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* ── Retry button ───────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__retry {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__retry:hover {
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
background: rgba(239, 68, 68, 0.16) !important;
|
||||
}
|
||||
|
||||
/* ── Connectors & links ─────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-connector,
|
||||
.ecom-hot-video-workspace .ecom-video-scene-link {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-connector i,
|
||||
.ecom-hot-video-workspace .ecom-video-scene-link i {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Flow lines ─────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-lines path {
|
||||
stroke: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-lines path.is-active {
|
||||
stroke: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Dock — matches topbar style ────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-dock {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(8, 12, 10, 0.78) !important;
|
||||
backdrop-filter: blur(18px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-dock button {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-dock button:hover {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
box-shadow: 0 2px 12px rgba(59, 232, 139, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ── Dock notice ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-notice {
|
||||
border-color: rgba(30, 189, 219, 0.2) !important;
|
||||
background: rgba(30, 189, 219, 0.08) !important;
|
||||
color: #7dd8e8 !important;
|
||||
}
|
||||
|
||||
/* ── Empty state ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-empty {
|
||||
color: rgba(247, 250, 248, 0.36) !important;
|
||||
}
|
||||
|
||||
/* ═══════════ TREE LAYOUT ═══════════════════════════ */
|
||||
|
||||
/* ── Tree node base — page panel style ──────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--source {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--text {
|
||||
border-color: rgba(30, 189, 219, 0.12) !important;
|
||||
background: rgba(30, 189, 219, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--text.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--text.is-active {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
animation: ecom-tree-breathe-local 1.8s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--image.is-completed,
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--video.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--image.is-active,
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--video.is-active {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
animation: ecom-tree-breathe-local 1.8s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node.is-active {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
box-shadow: 0 0 16px rgba(30, 189, 219, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--video.is-failed {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.05) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node inner text ───────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__title {
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__desc {
|
||||
color: rgba(247, 250, 248, 0.52) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__label {
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node placeholder ──────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__placeholder {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
color: rgba(247, 250, 248, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node tag ──────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__tag {
|
||||
border-color: rgba(255, 255, 255, 0.12) !important;
|
||||
background: rgba(8, 12, 10, 0.85) !important;
|
||||
color: rgba(247, 250, 248, 0.8) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node progress ─────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__progress {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Tree retry ─────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__retry {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__retry:hover {
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
background: rgba(239, 68, 68, 0.16) !important;
|
||||
}
|
||||
|
||||
/* ── Tree trunk & branch lines ──────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree__trunk-line {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__trunk-line::after {
|
||||
background: linear-gradient(90deg, transparent, #1ebddb, transparent) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__branches-line::before {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__branch-tap::before {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__branch-tap::after {
|
||||
background: linear-gradient(90deg, transparent, #1ebddb, transparent) !important;
|
||||
}
|
||||
|
||||
/* ── Tree arrow ─────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree__arrow {
|
||||
color: rgba(247, 250, 248, 0.28) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__row:hover .ecom-video-tree__arrow {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Tree row empty ─────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree__row--empty.is-planning .ecom-video-tree-node {
|
||||
border-color: rgba(30, 189, 219, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ──────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-scene-strip {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-scene-strip--text::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
/* ═══════════ LOCAL ANIMATIONS ══════════════════════ */
|
||||
|
||||
@keyframes ecom-video-node-breathe-local {
|
||||
0%, 100% { border-color: rgba(30, 189, 219, 0.25); }
|
||||
50% { border-color: rgba(30, 189, 219, 0.6); }
|
||||
}
|
||||
|
||||
@keyframes ecom-tree-breathe-local {
|
||||
0%, 100% {
|
||||
border-color: rgba(30, 189, 219, 0.2);
|
||||
box-shadow: 0 0 0 0 rgba(30, 189, 219, 0);
|
||||
}
|
||||
50% {
|
||||
border-color: rgba(30, 189, 219, 0.5);
|
||||
box-shadow: 0 0 16px 2px rgba(30, 189, 219, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-image-workbench-page {
|
||||
position: relative !important;
|
||||
display: grid !important;
|
||||
@@ -6799,7 +7656,7 @@
|
||||
.ecommerce-standalone .ecom-smart-editor__workspace {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto auto auto !important;
|
||||
gap: 18px !important;
|
||||
gap: 14px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
@@ -6874,16 +7731,29 @@
|
||||
.ecommerce-standalone .ecom-smart-editor__tools-shell {
|
||||
display: grid !important;
|
||||
grid-template-columns: 24px minmax(0, 1fr) 24px !important;
|
||||
align-items: stretch !important;
|
||||
gap: 5px !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
align-items: start !important;
|
||||
gap: 6px 5px !important;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools-title {
|
||||
grid-column: 1 / -1 !important;
|
||||
color: #1c2a35 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools {
|
||||
display: flex !important;
|
||||
align-items: start !important;
|
||||
gap: 5px !important;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
overflow-x: auto !important;
|
||||
overflow-y: hidden !important;
|
||||
overflow-y: visible !important;
|
||||
scroll-behavior: smooth !important;
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
@@ -6896,8 +7766,10 @@
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 24px !important;
|
||||
height: 100px !important;
|
||||
min-width: 24px !important;
|
||||
min-height: 46px !important;
|
||||
min-height: 100px !important;
|
||||
border: 1px solid rgba(16, 115, 204, 0.12) !important;
|
||||
border-radius: 7px !important;
|
||||
color: #1073cc !important;
|
||||
@@ -6915,13 +7787,14 @@
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools button {
|
||||
flex: 0 0 44px !important;
|
||||
display: grid !important;
|
||||
flex: 0 0 100px !important;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
display: inline-grid !important;
|
||||
place-items: center !important;
|
||||
gap: 3px !important;
|
||||
min-height: 46px !important;
|
||||
padding: 5px 3px !important;
|
||||
border: 1px solid transparent !important;
|
||||
min-height: 100px !important;
|
||||
padding: 10px 8px !important;
|
||||
border: 1px solid rgba(16, 115, 204, 0.12) !important;
|
||||
border-radius: 7px !important;
|
||||
color: #2d3d48 !important;
|
||||
background: #f2f5f7 !important;
|
||||
@@ -6930,22 +7803,51 @@
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-item {
|
||||
flex: 0 0 100px !important;
|
||||
display: grid !important;
|
||||
gap: 6px !important;
|
||||
justify-items: center !important;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools button.is-active {
|
||||
border-color: #1073cc !important;
|
||||
color: #1073cc !important;
|
||||
background: #f8fdff !important;
|
||||
box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.16) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools button > span:last-child {
|
||||
display: -webkit-box !important;
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text {
|
||||
display: grid !important;
|
||||
gap: 2px !important;
|
||||
justify-items: center !important;
|
||||
max-width: 100% !important;
|
||||
text-align: center !important;
|
||||
line-height: 1.18 !important;
|
||||
color: #2d3d48 !important;
|
||||
font-size: 10px !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text > span {
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
text-align: center !important;
|
||||
line-height: 1.15 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text > span:first-child {
|
||||
display: -webkit-box !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text > span:last-child:not(:first-child) {
|
||||
font-size: 9px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #6a7c88 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-icon {
|
||||
position: relative !important;
|
||||
display: inline-flex !important;
|
||||
|
||||
Reference in New Issue
Block a user