From 6dd2a107fd3c1c9e1d7b5c2bc5eef59670462d78 Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Wed, 17 Jun 2026 17:02:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=B5=E5=95=86=E5=88=9B=E4=BD=9C?= =?UTF-8?q?=E5=9C=BA=E6=99=AF=E6=94=AF=E6=8C=81=E5=B8=A6=E8=B4=A7=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E6=97=B6=E9=95=BF=E3=80=81=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E9=9A=90=E8=97=8F=E8=AE=BE=E7=BD=AE=E6=8C=89=E9=92=AE=E3=80=81?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B9=B3=E5=8F=B0=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增带货视频时长选项(5/10/15秒)及时长选择 popover - 创作标签在移动端(<=640px)隐藏平台/语种/比例/设置/时长按钮行,仅保留文本输入框 - 重构平台选择器为单列滚动列表,移除平台 logo,统一比例/语种/平台 active 高亮样式 - 优化 composer 整体布局节奏(素材紧凑、工具栏底部固定、响应式高度) - 调整 AI 帮写提交按钮为青色系渐变样式 --- src/features/ecommerce/EcommercePage.tsx | 54 ++- src/styles/ecommerce-standalone.css | 425 ++++++++++++++++++++--- src/styles/pages/ecommerce.css | 187 +++++++++- src/styles/standalone/overrides.css | 54 +-- 4 files changed, 617 insertions(+), 103 deletions(-) diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index 81d5cc7..e703ea0 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -1429,6 +1429,7 @@ const maxCloneProductImages = 20; const maxCloneReferenceImages = 20; const cloneVideoDurationMin = 5; const cloneVideoDurationMax = 45; +const composerDurationOptions = [5, 10, 15]; const defaultEcommercePlatform = "淘宝/天猫"; const defaultProductSetOutput: ProductSetOutputKey = "set"; const defaultCloneOutput: CloneOutputKey = "set"; @@ -2411,13 +2412,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const cloneRatioOptions = baseCloneRatioOptions; const composerRatioOptions = useMemo( () => [ - "1000×1000px 1:1", - "800×1200px 2:3", - "1200×800px 3:2", - "1200×900px 4:3", - "900×1200px 3:4", - "1080×1920px 9:16", - "1920×1080px 16:9", + "1000×1000px\u00a0\u00a0\u00a01:1", + "800×1200px\u00a0\u00a0\u00a02:3", + "1200×800px\u00a0\u00a0\u00a03:2", + "1200×900px\u00a0\u00a0\u00a04:3", + "900×1200px\u00a0\u00a0\u00a03:4", + "1080×1920px\u00a0\u00a0\u00a09:16", + "1920×1080px\u00a0\u00a0\u00a016:9", ], [], ); @@ -5975,11 +5976,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { } if (menuToRender === "platform") { return ( -
+
{platformOptions.map((option) => ( ))}
@@ -6010,6 +6010,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
); } + if (menuToRender === "settings" && activeCommerceScenario === "salesVideo") { + return ( +
+ {composerDurationOptions.map((option) => ( + + ))} +
+ ); + } return (
{cloneOutput === "set" ? ( @@ -6599,14 +6610,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { ) : null} {shouldShowScenarioSettings ? (
- - + {activeCommerceScenario !== "salesVideo" && activeCommerceScenario !== "poster" ? ( + + ) : null} + {activeCommerceScenario !== "salesVideo" ? ( + + ) : null} ) : null}
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css index ddb620b..46f6904 100644 --- a/src/styles/ecommerce-standalone.css +++ b/src/styles/ecommerce-standalone.css @@ -14328,9 +14328,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d row-gap: 10px !important; } - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { - flex: 1 1 calc(50% - 5px) !important; - justify-content: flex-start !important; + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings { + display: none !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { @@ -14339,40 +14338,6 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d } @media (max-width: 420px) { - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings { - display: flex !important; - flex-wrap: nowrap !important; - gap: 7px !important; - justify-content: stretch !important; - overflow: visible !important; - } - - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { - display: inline-flex !important; - flex: 1 1 0 !important; - width: auto !important; - min-width: 0 !important; - max-width: none !important; - height: 42px !important; - min-height: 42px !important; - padding: 0 !important; - justify-content: center !important; - font-size: 0 !important; - } - - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) { - display: none !important; - } - - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon { - display: inline-grid !important; - width: 22px !important; - height: 22px !important; - min-width: 22px !important; - margin: 0 !important; - font-size: 14px !important; - } - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { flex-direction: row !important; align-items: center !important; @@ -19482,9 +19447,16 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d border: 0 !important; border-radius: 14px !important; color: #ffffff !important; - background: #181b1f !important; - box-shadow: 0 12px 28px rgba(16, 32, 44, 0.14) !important; + background: linear-gradient(135deg, #1ebddb 0%, #0f829b 100%) !important; + box-shadow: 0 12px 28px rgba(15, 130, 155, 0.22) !important; text-align: center !important; + transition: transform 160ms ease, box-shadow 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit:hover { + background: linear-gradient(135deg, #21c8e3 0%, #1194ad 100%) !important; + box-shadow: 0 14px 32px rgba(15, 130, 155, 0.28) !important; + transform: translateY(-1px) !important; } @media (max-width: 640px) { @@ -20125,3 +20097,378 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d color: #0f7895 !important; font-weight: 600 !important; } + + +/* Platform picker: single-column scrollable list without logos, matching language/ratio style. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platforms.ecom-command-popover--platforms { + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + gap: 2px !important; + width: fit-content !important; + min-width: 0 !important; + max-width: calc(100vw - 48px) !important; + max-height: min(320px, calc(100dvh - 180px)) !important; + padding: 5px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 12px !important; + background: #ffffff !important; + box-shadow: 0 12px 32px rgba(16, 115, 204, 0.1) !important; + overflow-x: hidden !important; + overflow-y: auto !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.28) transparent !important; + animation: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button { + display: flex !important; + flex: 0 0 auto !important; + align-items: center !important; + justify-content: center !important; + width: 100% !important; + height: 36px !important; + min-height: 36px !important; + padding: 0 16px !important; + border: 0 !important; + border-radius: 8px !important; + color: rgba(16, 32, 44, 0.78) !important; + background: transparent !important; + font-size: 14px !important; + font-weight: 500 !important; + white-space: nowrap !important; + animation: none !important; + transition: background 120ms ease, color 120ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button:hover { + background: rgba(30, 189, 219, 0.08) !important; + color: #0f7895 !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active { + background: rgba(30, 189, 219, 0.12) !important; + color: #0f7895 !important; + font-weight: 600 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platforms.ecom-command-popover--platforms::-webkit-scrollbar { + width: 5px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platforms.ecom-command-popover--platforms::-webkit-scrollbar-thumb { + background: rgba(16, 115, 204, 0.28) !important; + border-radius: 999px !important; +} + + +/* Ratio & Language pickers: stronger active state so the selected option is clearly visible. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active { + background: rgba(30, 189, 219, 0.2) !important; + color: #0f7895 !important; + font-weight: 700 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active::before, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active::before { + position: absolute !important; + left: 8px !important; + top: 50% !important; + width: 5px !important; + height: 5px !important; + border-radius: 999px !important; + background: #1ebddb !important; + transform: translateY(-50%) scale(1) !important; + opacity: 1 !important; + content: "" !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active { + position: relative !important; + padding-left: 22px !important; +} + + +/* Platform picker: stronger active state with a visible dot indicator. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active { + position: relative !important; + padding-left: 22px !important; + background: rgba(30, 189, 219, 0.2) !important; + color: #0f7895 !important; + font-weight: 700 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active::before { + position: absolute !important; + left: 8px !important; + top: 50% !important; + width: 5px !important; + height: 5px !important; + border-radius: 999px !important; + background: #1ebddb !important; + transform: translateY(-50%) scale(1) !important; + opacity: 1 !important; + content: "" !important; +} + + +/* Ratio/Language/Platform pickers: clean active state without dot indicator, keep color highlight only. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active { + position: static !important; + padding-left: 16px !important; + padding-right: 16px !important; + background: rgba(30, 189, 219, 0.2) !important; + color: #0f7895 !important; + font-weight: 700 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active::before, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active::before, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active::before { + content: none !important; +} + + +/* Duration picker: single-column scrollable list for video duration, matching ratio/language style. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--duration.ecom-command-popover--duration { + display: flex !important; + flex-direction: column !important; + flex-wrap: nowrap !important; + gap: 2px !important; + width: fit-content !important; + min-width: 0 !important; + max-width: calc(100vw - 48px) !important; + max-height: min(320px, calc(100dvh - 180px)) !important; + padding: 5px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 12px !important; + background: #ffffff !important; + box-shadow: 0 12px 32px rgba(16, 115, 204, 0.1) !important; + overflow-x: hidden !important; + overflow-y: auto !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.28) transparent !important; + animation: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--duration.ecom-command-popover--duration button { + display: flex !important; + flex: 0 0 auto !important; + align-items: center !important; + justify-content: center !important; + width: 100% !important; + height: 36px !important; + min-height: 36px !important; + padding: 0 16px !important; + border: 0 !important; + border-radius: 8px !important; + color: rgba(16, 32, 44, 0.78) !important; + background: transparent !important; + font-size: 14px !important; + font-weight: 500 !important; + white-space: nowrap !important; + animation: none !important; + transition: background 120ms ease, color 120ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--duration.ecom-command-popover--duration button:hover { + background: rgba(30, 189, 219, 0.08) !important; + color: #0f7895 !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--duration.ecom-command-popover--duration button.is-active { + background: rgba(30, 189, 219, 0.2) !important; + color: #0f7895 !important; + font-weight: 700 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--duration.ecom-command-popover--duration::-webkit-scrollbar { + width: 5px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--duration.ecom-command-popover--duration::-webkit-scrollbar-thumb { + background: rgba(16, 115, 204, 0.28) !important; + border-radius: 999px !important; +} + +/* Final composer rhythm: keep attachments compact and pin the toolbelt to the card bottom. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + display: flex !important; + flex-direction: column !important; + justify-content: flex-start !important; + align-items: stretch !important; + gap: clamp(12px, 1.6vw, 18px) !important; + min-height: clamp(250px, 31vh, 316px) !important; + padding: clamp(18px, 2.05vw, 24px) clamp(18px, 2.3vw, 26px) clamp(16px, 1.9vw, 22px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: clamp(286px, 35vh, 340px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + align-self: start !important; + gap: 12px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 64px !important; + margin: 0 !important; + padding: 0 2px 2px !important; + border: 0 !important; + background: transparent !important; + box-shadow: none !important; + overflow-x: auto !important; + overflow-y: hidden !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover::-webkit-scrollbar { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add { + flex: 0 0 64px !important; + width: 64px !important; + height: 64px !important; + min-height: 64px !important; + padding: 0 !important; + border: 0 !important; + border-radius: 15px !important; + background: rgba(30, 189, 219, 0.1) !important; + color: #0b8fb2 !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span { + font-size: 24px !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small { + margin-top: 4px !important; + color: #0f7f9e !important; + font-size: 14px !important; + font-weight: 600 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex: 0 0 64px !important; + width: 64px !important; + height: 64px !important; + min-height: 64px !important; + border-radius: 15px !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-option-row--settings { + align-self: start !important; + margin: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea { + flex: 1 1 auto !important; + align-self: stretch !important; + width: 100% !important; + min-height: 86px !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1.58 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-height: 78px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + flex: 0 0 auto !important; + align-self: end !important; + width: 100% !important; + margin: auto 0 0 !important; + padding-top: clamp(12px, 1.45vw, 16px) !important; + border-top: 1px solid rgba(30, 189, 219, 0.12) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions { + min-width: 0 !important; +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + gap: 12px !important; + min-height: 318px !important; + padding: 18px 16px 16px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: 336px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + gap: 10px !important; + min-height: 58px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex-basis: 58px !important; + width: 58px !important; + height: 58px !important; + min-height: 58px !important; + border-radius: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span { + font-size: 22px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small { + font-size: 13px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-height: 96px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + min-height: 58px !important; + padding-top: 12px !important; + } +} + +@media (max-width: 390px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: 306px !important; + padding-inline: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: 326px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex-basis: 54px !important; + width: 54px !important; + height: 54px !important; + min-height: 54px !important; + } +} diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index 08875be..2302139 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -12522,9 +12522,16 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d border: 0 !important; border-radius: 14px !important; color: #ffffff !important; - background: #181b1f !important; - box-shadow: 0 12px 28px rgba(16, 32, 44, 0.14) !important; + background: linear-gradient(135deg, #1ebddb 0%, #0f829b 100%) !important; + box-shadow: 0 12px 28px rgba(15, 130, 155, 0.22) !important; text-align: center !important; + transition: transform 160ms ease, box-shadow 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit:hover { + background: linear-gradient(135deg, #21c8e3 0%, #1194ad 100%) !important; + box-shadow: 0 14px 32px rgba(15, 130, 155, 0.28) !important; + transform: translateY(-1px) !important; } @media (max-width: 640px) { @@ -12639,3 +12646,179 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d overflow-y: auto !important; } } + +/* Final composer rhythm: keep attachments compact and pin the toolbelt to the card bottom. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + display: flex !important; + flex-direction: column !important; + justify-content: flex-start !important; + align-items: stretch !important; + gap: clamp(12px, 1.6vw, 18px) !important; + min-height: clamp(250px, 31vh, 316px) !important; + padding: clamp(18px, 2.05vw, 24px) clamp(18px, 2.3vw, 26px) clamp(16px, 1.9vw, 22px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: clamp(286px, 35vh, 340px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + align-self: start !important; + gap: 12px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 64px !important; + margin: 0 !important; + padding: 0 2px 2px !important; + border: 0 !important; + background: transparent !important; + box-shadow: none !important; + overflow-x: auto !important; + overflow-y: hidden !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover::-webkit-scrollbar { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add { + flex: 0 0 64px !important; + width: 64px !important; + height: 64px !important; + min-height: 64px !important; + padding: 0 !important; + border: 0 !important; + border-radius: 15px !important; + background: rgba(30, 189, 219, 0.1) !important; + color: #0b8fb2 !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span { + font-size: 24px !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small { + margin-top: 4px !important; + color: #0f7f9e !important; + font-size: 14px !important; + font-weight: 600 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex: 0 0 64px !important; + width: 64px !important; + height: 64px !important; + min-height: 64px !important; + border-radius: 15px !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-option-row--settings { + align-self: start !important; + margin: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea { + flex: 1 1 auto !important; + align-self: stretch !important; + width: 100% !important; + min-height: 86px !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1.58 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-height: 78px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + flex: 0 0 auto !important; + align-self: end !important; + width: 100% !important; + margin: auto 0 0 !important; + padding-top: clamp(12px, 1.45vw, 16px) !important; + border-top: 1px solid rgba(30, 189, 219, 0.12) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions { + min-width: 0 !important; +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + gap: 12px !important; + min-height: 318px !important; + padding: 18px 16px 16px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: 336px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + gap: 10px !important; + min-height: 58px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex-basis: 58px !important; + width: 58px !important; + height: 58px !important; + min-height: 58px !important; + border-radius: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span { + font-size: 22px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small { + font-size: 13px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-height: 96px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + min-height: 58px !important; + padding-top: 12px !important; + } +} + +@media (max-width: 390px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: 306px !important; + padding-inline: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: 326px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex-basis: 54px !important; + width: 54px !important; + height: 54px !important; + min-height: 54px !important; + } +} diff --git a/src/styles/standalone/overrides.css b/src/styles/standalone/overrides.css index 272f22b..d4817c3 100644 --- a/src/styles/standalone/overrides.css +++ b/src/styles/standalone/overrides.css @@ -3461,9 +3461,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d row-gap: 10px !important; } - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { - flex: 1 1 calc(50% - 5px) !important; - justify-content: flex-start !important; + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings { + display: none !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { @@ -3472,40 +3471,6 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d } @media (max-width: 420px) { - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings { - display: flex !important; - flex-wrap: nowrap !important; - gap: 7px !important; - justify-content: stretch !important; - overflow: visible !important; - } - - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { - display: inline-flex !important; - flex: 1 1 0 !important; - width: auto !important; - min-width: 0 !important; - max-width: none !important; - height: 42px !important; - min-height: 42px !important; - padding: 0 !important; - justify-content: center !important; - font-size: 0 !important; - } - - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) { - display: none !important; - } - - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon { - display: inline-grid !important; - width: 22px !important; - height: 22px !important; - min-width: 22px !important; - margin: 0 !important; - font-size: 14px !important; - } - html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { flex-direction: row !important; align-items: center !important; @@ -3560,15 +3525,18 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d z-index: 160 !important; } -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform { - width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important; - max-width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important; +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platforms { + width: fit-content !important; + min-width: 0 !important; + max-width: min(320px, calc(100% - var(--composer-popover-left, 0px))) !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--languages, -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker { - width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important; - max-width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important; +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--duration { + width: fit-content !important; + min-width: 0 !important; + max-width: min(320px, calc(100% - var(--composer-popover-left, 0px))) !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings {