diff --git a/package-lock.json b/package-lock.json index b4bb84b..134008f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@ant-design/icons": "5.3.0", + "@phosphor-icons/react": "^2.1.10", "react": "18.2.0", "react-dom": "18.2.0", "scheduler": "0.23.0", @@ -119,7 +120,6 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -851,6 +851,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@phosphor-icons/react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", + "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz", @@ -1296,7 +1309,6 @@ "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1581,7 +1593,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -2710,7 +2721,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2723,7 +2733,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -2794,7 +2803,6 @@ "integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.9" }, @@ -3166,7 +3174,6 @@ "integrity": "sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.19.3", "postcss": "^8.4.35", @@ -3257,7 +3264,6 @@ "integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "1.6.1", "@vitest/runner": "1.6.1", diff --git a/package.json b/package.json index b2897cc..d6627cf 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@ant-design/icons": "5.3.0", + "@phosphor-icons/react": "^2.1.10", "react": "18.2.0", "react-dom": "18.2.0", "scheduler": "0.23.0", diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index 25de322..48757e9 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -25,6 +25,17 @@ import { TableOutlined, VideoCameraOutlined, } from "@ant-design/icons"; +import { + ArrowsCounterClockwise, + Fire, + FrameCorners, + Gift, + MagicWand, + Mountains, + ShoppingBag, + User, + VideoCamera, +} from "@phosphor-icons/react"; import { Fragment, useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { useTypewriter } from "../../hooks/useTypewriter"; @@ -1044,16 +1055,17 @@ const cloneOutputOptions: Array<{ key: ProductSetOutputKey; label: string; desc: ...productSetOutputOptions, ]; const commerceScenarioOptions: Array<{ key: CommerceScenarioKey; label: string; desc: string; icon: ReactNode }> = [ - { key: "popular", label: "热门", desc: "高频模板", icon: }, - { key: "poster", label: "海报生成", desc: "活动视觉", icon: }, - { key: "mainImage", label: "商品主图", desc: "主图转化", icon: }, - { key: "scene", label: "场景图", desc: "生活氛围", icon: }, - { key: "festival", label: "节日风格图", desc: "节点营销", icon: }, - { key: "model", label: "模特图", desc: "真人展示", icon: }, - { key: "background", label: "更换背景", desc: "背景重构", icon: }, - { key: "retouch", label: "无痕改图", desc: "精修优化", icon: }, - { key: "salesVideo", label: "带货视频", desc: "短视频脚本", icon: }, + { key: "popular", label: "热门", desc: "高频模板", icon: 🔥 }, + { key: "poster", label: "海报生成", desc: "活动视觉", icon: 🎨 }, + { key: "mainImage", label: "商品主图", desc: "主图转化", icon: 🛍️ }, + { key: "model", label: "模特图", desc: "真人展示", icon: 🕴️ }, + { key: "scene", label: "场景图", desc: "生活氛围", icon: 🌅 }, + { key: "festival", label: "节日风格图", desc: "节点营销", icon: 🎉 }, + { key: "background", label: "更换背景", desc: "背景重构", icon: }, + { key: "retouch", label: "无痕改图", desc: "精修优化", icon: 🪄 }, + { key: "salesVideo", label: "带货视频", desc: "短视频脚本", icon: 🎬 }, ]; +const primaryCommerceScenarioKeys: CommerceScenarioKey[] = ["popular", "poster", "mainImage", "model"]; const commerceScenarioOutputMap: Record, ProductSetOutputKey> = { poster: "set", mainImage: "set", @@ -1225,6 +1237,166 @@ const commerceScenarioTemplates: CommerceScenarioTemplate[] = [ prompt: "生成商品使用演示短视频分镜,围绕使用过程、关键卖点和效果对比展开,节奏清晰,适合带货转化。", mediaUrl: ossAssets.ecommerce.inspiration.asinListing, }, + { + id: "poster-festival-gift", + scenario: "poster", + output: "set", + title: "节日礼赠海报", + desc: "适合父亲节、母亲节等节点礼赠氛围", + badge: "节点营销", + prompt: "生成一张节日礼赠风格电商海报,突出礼盒质感、温馨氛围和送礼情绪,画面高级克制,适合节日活动投放。", + mediaUrl: ossAssets.ecommerce.inspiration.fathersDaySet, + }, + { + id: "poster-luxury-perfume", + scenario: "poster", + output: "set", + title: "奢品香水海报", + desc: "高端质感,适合美妆香氛品牌", + badge: "品牌感", + prompt: "生成一张奢品香水电商海报,突出瓶身质感、光影层次和高端氛围,画面精致有艺术感,适合品牌旗舰店投放。", + mediaUrl: ossAssets.ecommerce.inspiration.perfumeSet, + }, + { + id: "main-image-model", + scenario: "mainImage", + output: "set", + title: "模特展示主图", + desc: "真人上身,提升列表点击率", + badge: "点击率优先", + prompt: "生成一张真人模特展示商品主图,突出上身效果、版型和搭配,背景简洁,适合提升搜索列表点击率和转化。", + mediaUrl: ossAssets.ecommerce.productSet.model, + }, + { + id: "main-image-detail", + scenario: "mainImage", + output: "set", + title: "细节质感主图", + desc: "材质特写,强化购买信心", + badge: "转化优先", + prompt: "生成一张商品细节质感主图,突出材质纹理、工艺细节和真实触感,画面聚焦主体,适合强化用户购买信心。", + mediaUrl: ossAssets.ecommerce.productSet.detail, + }, + { + id: "model-jacket", + scenario: "model", + output: "model", + title: "男装夹克模特", + desc: "硬朗风格,突出版型和质感", + badge: "风格推荐", + prompt: "生成男装夹克模特展示图,模特姿态自然有型,突出夹克版型、面料质感和整体搭配,适合男装电商详情和主图。", + mediaUrl: ossAssets.ecommerce.tryOn.jacketResultA, + }, + { + id: "model-hat", + scenario: "model", + output: "model", + title: "帽子配饰模特", + desc: "细节展示,适合配饰品类", + badge: "高频推荐", + prompt: "生成帽子配饰模特展示图,突出帽型、佩戴效果和搭配细节,模特姿态自然,适合配饰、帽饰电商详情与主图。", + mediaUrl: ossAssets.ecommerce.tryOn.hatResultA, + }, + { + id: "scene-camping", + scenario: "scene", + output: "set", + title: "户外露营场景", + desc: "把商品放进自然野趣环境", + badge: "生活方式", + prompt: "生成户外露营风格商品场景图,把产品自然融入露营环境,突出使用场景、自由氛围和生活品质,适合户外品类推广。", + mediaUrl: ossAssets.ecommerce.inspiration.campingCart, + }, + { + id: "scene-beauty-spray", + scenario: "scene", + output: "set", + title: "美妆喷雾场景", + desc: "捕捉使用瞬间,增强氛围感", + badge: "氛围感", + prompt: "生成美妆喷雾使用场景图,捕捉产品使用瞬间和细腻喷雾,突出清爽感、仪式感和大片氛围,适合美妆护肤品类。", + mediaUrl: ossAssets.ecommerce.inspiration.sprayScene, + }, + { + id: "festival-fathers-gift", + scenario: "festival", + output: "set", + title: "父亲节礼盒图", + desc: "礼赠场景,适合节日送礼营销", + badge: "父亲节", + prompt: "生成父亲节礼赠风格商品图,突出礼盒质感、沉稳色调和送礼仪式感,画面温暖有格调,适合父亲节活动投放。", + mediaUrl: ossAssets.ecommerce.inspiration.fathersDaySet, + }, + { + id: "festival-candle-gift", + scenario: "festival", + output: "set", + title: "香薰蜡烛礼盒", + desc: "温暖氛围,适合节日礼赠场景", + badge: "热门模板", + prompt: "生成香薰蜡烛节日礼盒图,突出温暖烛光、包装质感和治愈氛围,画面柔和高级,适合节日礼赠和家居品类营销。", + mediaUrl: ossAssets.ecommerce.inspiration.etsyScentedCandleSet, + }, + { + id: "background-premium-gray", + scenario: "background", + output: "set", + title: "高级灰背景", + desc: "简约商业,提升产品高级感", + badge: "高频推荐", + prompt: "为商品更换高级灰商业背景,保留产品主体和细节,背景简约有层次,突出产品轮廓和质感,适合电商主图和广告。", + mediaUrl: ossAssets.ecommerce.detail.productA, + }, + { + id: "background-home-living", + scenario: "background", + output: "set", + title: "居家背景", + desc: "温馨生活场景,增强代入感", + badge: "场景增强", + prompt: "为商品更换温馨居家背景,保持主体自然融入,增强生活气息和使用代入感,适合家居、日用和生活方式品类。", + mediaUrl: ossAssets.ecommerce.productSet.hosting, + }, + { + id: "retouch-color-correction", + scenario: "retouch", + output: "set", + title: "色彩统一精修", + desc: "多色校正,保持系列一致", + badge: "精修模板", + prompt: "对商品图进行色彩统一精修,校正色偏、统一光影和色调,保持系列素材一致性,画面自然真实,适合电商套图。", + mediaUrl: ossAssets.ecommerce.detail.productB, + }, + { + id: "retouch-detail-sharpen", + scenario: "retouch", + output: "set", + title: "细节锐化精修", + desc: "纹理增强,提升商品质感", + badge: "高频推荐", + prompt: "对商品图进行细节锐化精修,增强纹理、边缘和材质细节,保持自然不过度,画面干净高级,适合主图和详情页。", + mediaUrl: ossAssets.ecommerce.productSet.detail, + }, + { + id: "sales-video-painpoint", + scenario: "salesVideo", + output: "video", + title: "痛点种草视频", + desc: "直击痛点,快速建立购买动机", + badge: "转化优先", + prompt: "生成痛点种草风格带货短视频脚本和分镜,先抛出生活痛点再展示产品解决方案,节奏紧凑,适合清洁家电和功能性产品。", + mediaUrl: ossAssets.ecommerce.inspiration.cleanerPainpointDouyin, + }, + { + id: "sales-video-unboxing", + scenario: "salesVideo", + output: "video", + title: "温馨开箱视频", + desc: "氛围产品,增强情感连接", + badge: "热门模板", + prompt: "生成温馨开箱风格带货短视频脚本和分镜,围绕拆箱仪式感、产品外观和初体验展开,画面温暖治愈,适合氛围类产品。", + mediaUrl: ossAssets.ecommerce.inspiration.nightLightUnboxingDouyin, + }, ]; const popularCommerceScenarioTemplates = commerceScenarioOptions .filter((option): option is { key: Exclude; label: string; desc: string; icon: ReactNode } => option.key !== "popular") @@ -1673,6 +1845,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const composerMenuCloseTimeoutRef = useRef(null); const requirementTextareaRef = useRef(null); const commandComposerWrapRef = useRef(null); + const templateStripRef = useRef(null); const garmentInputRef = useRef(null); const detailInputRef = useRef(null); const detailProgressRef = useRef(null); @@ -1747,9 +1920,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const [imageWorkbenchResultUrl, setImageWorkbenchResultUrl] = useState(null); const [imageWorkbenchProgress, setImageWorkbenchProgress] = useState(0); const [isProductUploadDragging, setIsProductUploadDragging] = useState(false); - const [activeCommerceScenario, setActiveCommerceScenario] = useState("popular"); + const [activeCommerceScenario, setActiveCommerceScenario] = useState(null); + const [isCommerceScenarioMoreOpen, setIsCommerceScenarioMoreOpen] = useState(false); const [cloneOutput, setCloneOutput] = useState(defaultCloneOutput); - const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(true); + const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(false); const [videoHistoryVisible, setVideoHistoryVisible] = useState(false); const [isVideoWorkspaceVisible, setIsVideoWorkspaceVisible] = useState(false); const [videoPlanTrigger, setVideoPlanTrigger] = useState(0); @@ -2253,9 +2427,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const selectedProductSetOutput = productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!; const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!; - const activeCommerceScenarioTemplates = activeCommerceScenario === "popular" - ? popularCommerceScenarioTemplates - : commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario); + const visibleCommerceScenarioOptions = useMemo( + () => + isCommerceScenarioMoreOpen + ? commerceScenarioOptions + : commerceScenarioOptions.filter((option) => primaryCommerceScenarioKeys.includes(option.key)), + [isCommerceScenarioMoreOpen], + ); + const activeCommerceScenarioTemplates = activeCommerceScenario === null + ? [] + : activeCommerceScenario === "popular" + ? popularCommerceScenarioTemplates + : commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario); + useEffect(() => { + templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" }); + }, [activeCommerceScenario, isCloneTemplateStripVisible]); const cloneRequirementPlaceholder = cloneOutput === "model" ? "建议包含以下信息:产品名称、核心卖点、期望场景、模特外貌描述(如小麦色皮肤、齐刘海、眼角有泪痣)、具体参数" @@ -3663,6 +3849,23 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { if (mappedOutput !== cloneOutput) handleCloneOutputChange(mappedOutput); }; + const handleCommerceScenarioMoreToggle = () => { + setIsCommerceScenarioMoreOpen((visible) => !visible); + setComposerMenu(null); + }; + + const scrollCommerceTemplateStrip = (direction: -1 | 1) => { + const strip = templateStripRef.current; + if (!strip) return; + const firstCard = strip.querySelector(".ecom-command-template-card"); + const cardStep = firstCard ? firstCard.offsetWidth + 14 : 0; + const viewportStep = Math.max(280, strip.clientWidth * 0.78); + strip.scrollBy({ + left: direction * Math.max(cardStep, viewportStep), + behavior: "smooth", + }); + }; + const handleCloneMarketChange = (nextMarket: string) => { const normalizedMarket = normalizeMarket(nextMarket); setMarket(normalizedMarket); @@ -5745,6 +5948,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { }; const handleCloneTemplateCardClick = (card: CommerceScenarioTemplate) => { + setActiveCommerceScenario(card.scenario); if (card.output !== cloneOutput) handleCloneOutputChange(card.output); setIsCloneTemplateStripVisible(true); setComposerMenu(null); @@ -6084,23 +6288,38 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onChange={handleSmartCutoutUpload} aria-label="上传智能抠图素材" /> -
- {commerceScenarioOptions.map((option) => ( +
+
+ {visibleCommerceScenarioOptions.map((option) => ( + + ))} - ))} +
- +
{productImages.length ? (
@@ -6193,31 +6412,53 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
{renderComposerMenu()}
- {(status === "idle" || status === "ready") && !showMainVideoWorkspace && isCloneTemplateStripVisible ? ( -
- {activeCommerceScenarioTemplates.map((card) => ( - - ))} -
+ {(status === "idle" || status === "ready") && !showMainVideoWorkspace && activeCommerceScenario !== null && isCloneTemplateStripVisible ? ( +
+ +
+ {activeCommerceScenarioTemplates.map((card) => ( + + ))} +
+ +
) : null} {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css index be7ae0b..934d253 100644 --- a/src/styles/ecommerce-standalone.css +++ b/src/styles/ecommerce-standalone.css @@ -17437,27 +17437,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d /* Ecommerce home scenario templates */ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs { display: flex !important; - align-items: center !important; - justify-content: flex-start !important; - gap: 8px !important; - width: fit-content !important; - max-width: min(100%, 1120px) !important; - margin: 0 auto 12px !important; - padding: 6px !important; - box-sizing: border-box !important; + align-items: stretch !important; + justify-content: center !important; + gap: 9px !important; + width: min(100%, 1180px) !important; + margin: 0 auto 10px !important; + padding: 5px 0 !important; overflow-x: auto !important; - overflow-y: hidden !important; - overscroll-behavior-x: contain !important; scrollbar-width: none !important; scroll-snap-type: x proximity !important; - border: 1px solid rgba(30, 189, 219, 0.12) !important; - border-radius: 24px !important; - background: rgba(255, 255, 255, 0.42) !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.68), - 0 10px 28px rgba(16, 115, 204, 0.05) !important; - backdrop-filter: blur(16px) saturate(1.05) !important; - -webkit-backdrop-filter: blur(16px) saturate(1.05) !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs::-webkit-scrollbar { @@ -17479,9 +17471,9 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d min-height: 40px !important; padding: 7px 14px 7px 10px !important; scroll-snap-align: start !important; - border: 1px solid rgba(16, 32, 44, 0.07) !important; + border: 1px solid color-mix(in srgb, var(--mode-accent) 16%, transparent) !important; border-radius: 18px !important; - background: rgba(255, 255, 255, 0.68) !important; + background: color-mix(in srgb, var(--mode-accent) 7%, rgba(255, 255, 255, 0.68)) !important; color: rgba(16, 32, 44, 0.68) !important; box-shadow: 0 2px 6px rgba(16, 32, 44, 0.03), @@ -17501,15 +17493,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover { - background: rgba(255, 255, 255, 0.86) !important; - border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important; - color: rgba(16, 32, 44, 0.86) !important; + background: color-mix(in srgb, var(--mode-accent) 18%, rgba(255, 255, 255, 0.88)) !important; + border-color: color-mix(in srgb, var(--mode-accent) 48%, transparent) !important; + color: rgba(16, 32, 44, 0.88) !important; box-shadow: - 0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent), + 0 8px 20px color-mix(in srgb, var(--mode-accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; transform: translateY(-1px) !important; } +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover .ecom-command-mode-icon { + background: color-mix(in srgb, var(--mode-accent) 20%, rgba(255, 255, 255, 0.85)) !important; +} + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active { background: radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 54%), @@ -17540,24 +17536,22 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs .ecom-command-mode-icon { grid-row: auto !important; display: inline-grid !important; - width: 22px !important; - min-width: 22px !important; - height: 22px !important; + width: 26px !important; + min-width: 26px !important; + height: 26px !important; place-items: center !important; border: 0 !important; - border-radius: 7px !important; - background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important; - color: var(--mode-accent) !important; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; - font-size: 13px !important; + border-radius: 8px !important; + background: transparent !important; + box-shadow: none !important; + font-size: 17px !important; + line-height: 1 !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon { - background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.9), - 0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important; + background: transparent !important; + box-shadow: none !important; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs strong { @@ -17616,24 +17610,39 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) { - --mode-accent: #c04468; + --mode-accent: #D45C5C; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster) { + --mode-accent: #7A6BD1; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage) { + --mode-accent: #2E9E9E; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model) { + --mode-accent: #B56B7A; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene) { + --mode-accent: #4A9B7F; } -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster), html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) { - --mode-accent: #cc6b14; + --mode-accent: #C78A3E; } -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage), -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene), html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) { - --mode-accent: #0f8f72; + --mode-accent: #5A8BAE; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch) { + --mode-accent: #9A8BB8; } -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model), -html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch), html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo) { - --mode-accent: #1073cc; + --mode-accent: #3A7CA5; } html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-strip { @@ -17742,13 +17751,42 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint { display: block !important; width: min(100%, 1180px) !important; - margin: -4px auto 6px !important; + margin: -6px auto 4px !important; text-align: center !important; font-size: 11px !important; font-weight: 480 !important; line-height: 1 !important; - color: rgba(16, 32, 44, 0.36) !important; + color: rgba(16, 32, 44, 0.26) !important; } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after { + display: inline-block !important; + font-size: 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before { + content: "←" !important; + margin-right: 5px !important; + animation: ecom-scroll-hint-left 1.6s ease-in-out infinite !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after { + content: "→" !important; + margin-left: 5px !important; + animation: ecom-scroll-hint-right 1.6s ease-in-out infinite !important; + animation-delay: 0.8s !important; + } +} + +@keyframes ecom-scroll-hint-left { + 0%, 100% { opacity: 0.25; transform: translateX(0); } + 50% { opacity: 0.6; transform: translateX(-2px); } +} + +@keyframes ecom-scroll-hint-right { + 0%, 100% { opacity: 0.25; transform: translateX(0); } + 50% { opacity: 0.6; transform: translateX(2px); } } @media (max-width: 640px) { @@ -18320,3 +18358,430 @@ html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"][data-w background: rgba(232, 249, 253, 0.92) !important; transform: translateY(-1px) !important; } + +/* Ecommerce home scenario navigation and template carousel refinement */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell { + display: flex !important; + justify-content: center !important; + width: 100% !important; + margin: 0 auto 10px !important; + padding: 0 16px !important; + box-sizing: border-box !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs { + display: flex !important; + align-items: center !important; + justify-content: center !important; + gap: 10px !important; + width: auto !important; + max-width: 100% !important; + margin: 0 auto !important; + padding: 4px !important; + overflow-x: auto !important; + overflow-y: hidden !important; + overscroll-behavior-x: contain !important; + scrollbar-width: none !important; + scroll-snap-type: x proximity !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button { + min-height: 42px !important; + padding: 8px 15px 8px 11px !important; + border-radius: 999px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 253, 255, 0.78)) !important; + box-shadow: + 0 8px 22px rgba(16, 115, 204, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open { + padding-right: 31px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more { + --mode-accent: #1073cc; + border-style: dashed !important; + color: rgba(16, 32, 44, 0.64) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more.is-open { + border-style: solid !important; + color: rgba(16, 32, 44, 0.92) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-mode-icon--more { + background: rgba(232, 249, 253, 0.82) !important; + color: #1073cc !important; + font-size: 14px !important; + font-weight: 900 !important; + letter-spacing: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint { + display: block !important; + width: min(100%, 1180px) !important; + margin: -6px auto 8px !important; + text-align: center !important; + color: rgba(16, 32, 44, 0.28) !important; + font-size: 11px !important; + font-weight: 620 !important; + line-height: 1.1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel { + position: relative !important; + justify-self: center !important; + width: 100% !important; + max-width: 1180px !important; + min-width: 0 !important; + margin: 16px auto 12px !important; + box-sizing: border-box !important; + isolation: isolate !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after { + content: "" !important; + position: absolute !important; + top: 0 !important; + bottom: 0 !important; + z-index: 2 !important; + width: 54px !important; + pointer-events: none !important; + opacity: 0.9 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before { + left: 0 !important; + background: linear-gradient(90deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after { + right: 0 !important; + background: linear-gradient(270deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip { + display: flex !important; + grid-template-columns: none !important; + gap: 14px !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + margin: 0 !important; + padding: 2px 2px 6px !important; + box-sizing: border-box !important; + overflow-x: auto !important; + overflow-y: hidden !important; + scroll-behavior: smooth !important; + scroll-padding: 4px !important; + scroll-snap-type: x mandatory !important; + overscroll-behavior-x: contain !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip::-webkit-scrollbar { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card { + flex: 0 0 clamp(260px, 24vw, 312px) !important; + display: grid !important; + grid-template-columns: 96px minmax(0, 1fr) !important; + min-height: 126px !important; + scroll-snap-align: start !important; + border-color: rgba(30, 189, 219, 0.13) !important; + border-radius: 18px !important; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 253, 0.9)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav { + position: absolute !important; + top: 50% !important; + z-index: 4 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 38px !important; + height: 38px !important; + padding: 0 !important; + border: 1px solid rgba(30, 189, 219, 0.2) !important; + border-radius: 50% !important; + background: rgba(255, 255, 255, 0.92) !important; + color: #1073cc !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.14) !important; + font-size: 24px !important; + font-weight: 760 !important; + line-height: 1 !important; + cursor: pointer !important; + opacity: 0 !important; + transform: translateY(-50%) scale(0.94) !important; + transition: + opacity 180ms ease, + transform 180ms ease, + border-color 180ms ease, + background 180ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--prev { + left: 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--next { + right: 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel:hover .ecom-command-template-nav, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:focus-visible { + opacity: 1 !important; + transform: translateY(-50%) scale(1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:hover { + border-color: rgba(30, 189, 219, 0.42) !important; + background: rgba(232, 249, 253, 0.98) !important; + transform: translateY(-50%) scale(1.04) !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell { + justify-content: flex-start !important; + padding-right: 12px !important; + padding-left: 12px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs { + justify-content: flex-start !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel { + width: 100% !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav { + opacity: 0.86 !important; + transform: translateY(-50%) scale(0.96) !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell { + padding-right: 8px !important; + padding-left: 8px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs { + gap: 8px !important; + padding-bottom: 6px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button { + min-height: 40px !important; + padding: 7px 12px 7px 9px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card { + flex-basis: min(82vw, 340px) !important; + grid-template-columns: 86px minmax(0, 1fr) !important; + min-height: 116px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card__media { + width: 86px !important; + min-width: 86px !important; + height: 96px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav { + width: 34px !important; + height: 34px !important; + font-size: 21px !important; + } +} + +/* Keep scenario tabs on the original ecommerce theme instead of category-specific colors. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell { + margin-bottom: 2px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs { + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button { + --mode-accent: #0f8fa8 !important; + border-color: rgba(30, 189, 219, 0.15) !important; + background: rgba(255, 255, 255, 0.72) !important; + color: rgba(16, 32, 44, 0.74) !important; + box-shadow: + 0 6px 18px rgba(16, 115, 204, 0.045), + inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover { + border-color: rgba(30, 189, 219, 0.24) !important; + background: rgba(255, 255, 255, 0.84) !important; + color: rgba(16, 32, 44, 0.88) !important; + box-shadow: + 0 8px 20px rgba(16, 115, 204, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open { + border-color: rgba(30, 189, 219, 0.34) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 253, 255, 0.86)) !important; + color: rgba(16, 32, 44, 0.94) !important; + box-shadow: + 0 10px 24px rgba(16, 115, 204, 0.075), + inset 0 1px 0 rgba(255, 255, 255, 0.98) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon { + background: rgba(232, 249, 253, 0.86) !important; + color: #0f829b !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon { + background: rgba(220, 247, 252, 0.95) !important; + color: #0b8ea6 !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 3px 8px rgba(30, 189, 219, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more { + border-style: solid !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint { + max-height: 10px !important; + margin: -6px auto 2px !important; + opacity: 0.36 !important; + color: rgba(16, 32, 44, 0.22) !important; + font-size: 10px !important; + font-weight: 560 !important; + line-height: 10px !important; + transform: scale(0.92) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after { + content: none !important; + display: none !important; + animation: none !important; +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell { + width: 100% !important; + max-width: calc(100vw - 16px) !important; + padding-right: 0 !important; + padding-left: 0 !important; + overflow: hidden !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs { + width: 100% !important; + max-width: 100% !important; + justify-content: flex-start !important; + padding-right: 2px !important; + padding-left: 2px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint { + width: calc(100vw - 24px) !important; + max-width: calc(100vw - 24px) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel { + width: calc(100vw - 24px) !important; + max-width: calc(100vw - 24px) !important; + overflow: hidden !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card { + flex-basis: min(78vw, 320px) !important; + } +} + +/* Restore the colorful scenario feedback while keeping the compact responsive layout. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) { + --mode-accent: #c04468 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster), +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) { + --mode-accent: #cc6b14 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage), +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene), +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) { + --mode-accent: #0f8f72 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model), +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch), +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo), +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.ecom-command-scenario-more { + --mode-accent: #1073cc !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button { + border-color: rgba(16, 32, 44, 0.07) !important; + background: rgba(255, 255, 255, 0.68) !important; + color: rgba(16, 32, 44, 0.68) !important; + box-shadow: + 0 2px 6px rgba(16, 32, 44, 0.03), + inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon { + background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important; + color: var(--mode-accent) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover { + border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important; + background: rgba(255, 255, 255, 0.86) !important; + color: rgba(16, 32, 44, 0.86) !important; + box-shadow: + 0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent), + inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open { + border-color: color-mix(in srgb, var(--mode-accent) 42%, transparent) !important; + background: + radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 17%, transparent), transparent 52%), + rgba(255, 255, 255, 0.98) !important; + color: rgba(16, 32, 44, 0.96) !important; + box-shadow: + 0 12px 28px color-mix(in srgb, var(--mode-accent) 15%, transparent), + inset 0 1px 0 rgba(255, 255, 255, 0.98) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon { + background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important; + color: var(--mode-accent) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important; +}