feat: add composer toolbelt with asset library, work mode selector, AI-powered prompt writing, and scenario settings #25
@@ -32,6 +32,7 @@ import {
|
|||||||
Gift,
|
Gift,
|
||||||
MagicWand,
|
MagicWand,
|
||||||
Mountains,
|
Mountains,
|
||||||
|
PaperPlaneRight,
|
||||||
ShoppingBag,
|
ShoppingBag,
|
||||||
User,
|
User,
|
||||||
VideoCamera,
|
VideoCamera,
|
||||||
@@ -289,7 +290,9 @@ type CloneModelPanelTab = "scene" | "model";
|
|||||||
type CloneVideoQualityKey = "standard" | "high" | "ultra";
|
type CloneVideoQualityKey = "standard" | "high" | "ultra";
|
||||||
type ProductSetStatus = "idle" | "ready" | "generating" | "done" | "failed";
|
type ProductSetStatus = "idle" | "ready" | "generating" | "done" | "failed";
|
||||||
type ProductKitToolKey = "set" | "detail" | "wear" | "clone";
|
type ProductKitToolKey = "set" | "detail" | "wear" | "clone";
|
||||||
type ComposerMenuKey = "mode" | "platform" | "language" | "ratio" | "settings";
|
type ComposerMenuKey = "mode" | "platform" | "language" | "ratio" | "settings" | "assetLibrary" | "workMode" | "aiWrite";
|
||||||
|
type ComposerAssetTabKey = "recent" | "recipe" | "model";
|
||||||
|
type ComposerWorkModeKey = "quick" | "think";
|
||||||
type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio";
|
type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio";
|
||||||
type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body";
|
type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body";
|
||||||
type CloneReferenceMode = "upload" | "link";
|
type CloneReferenceMode = "upload" | "link";
|
||||||
@@ -1062,11 +1065,13 @@ const commerceScenarioOptions: Array<{ key: CommerceScenarioKey; label: string;
|
|||||||
{ key: "model", label: "模特图", desc: "真人展示", icon: <span role="img" aria-label="model">🕴️</span> },
|
{ key: "model", label: "模特图", desc: "真人展示", icon: <span role="img" aria-label="model">🕴️</span> },
|
||||||
{ key: "scene", label: "场景图", desc: "生活氛围", icon: <span role="img" aria-label="scene">🌅</span> },
|
{ key: "scene", label: "场景图", desc: "生活氛围", icon: <span role="img" aria-label="scene">🌅</span> },
|
||||||
{ key: "festival", label: "节日风格图", desc: "节点营销", icon: <span role="img" aria-label="festival">🎉</span> },
|
{ key: "festival", label: "节日风格图", desc: "节点营销", icon: <span role="img" aria-label="festival">🎉</span> },
|
||||||
|
{ key: "salesVideo", label: "带货视频", desc: "短视频脚本", icon: <span role="img" aria-label="video">🎬</span> },
|
||||||
{ key: "background", label: "更换背景", desc: "背景重构", icon: <span role="img" aria-label="background">✨</span> },
|
{ key: "background", label: "更换背景", desc: "背景重构", icon: <span role="img" aria-label="background">✨</span> },
|
||||||
{ key: "retouch", label: "无痕改图", desc: "精修优化", icon: <span role="img" aria-label="retouch">🪄</span> },
|
{ key: "retouch", label: "无痕改图", desc: "精修优化", icon: <span role="img" aria-label="retouch">🪄</span> },
|
||||||
{ key: "salesVideo", label: "带货视频", desc: "短视频脚本", icon: <span role="img" aria-label="video">🎬</span> },
|
|
||||||
];
|
];
|
||||||
const primaryCommerceScenarioKeys: CommerceScenarioKey[] = ["popular", "poster", "mainImage", "model"];
|
const primaryCommerceScenarioKeys: CommerceScenarioKey[] = ["popular", "poster", "mainImage", "model"];
|
||||||
|
const scenarioSettingsKeys: CommerceScenarioKey[] = ["poster", "mainImage", "model", "scene", "festival", "salesVideo"];
|
||||||
|
const scenarioAdvancedSettingsKeys: CommerceScenarioKey[] = ["model", "salesVideo"];
|
||||||
const commerceScenarioOutputMap: Record<Exclude<CommerceScenarioKey, "popular">, ProductSetOutputKey> = {
|
const commerceScenarioOutputMap: Record<Exclude<CommerceScenarioKey, "popular">, ProductSetOutputKey> = {
|
||||||
poster: "set",
|
poster: "set",
|
||||||
mainImage: "set",
|
mainImage: "set",
|
||||||
@@ -1937,6 +1942,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
|
const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
|
||||||
const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
|
const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
|
||||||
const [composerPopoverTop, setComposerPopoverTop] = useState(0);
|
const [composerPopoverTop, setComposerPopoverTop] = useState(0);
|
||||||
|
const [composerTooltip, setComposerTooltip] = useState<{ text: string; left: number; top: number } | null>(null);
|
||||||
|
const [composerAssetTab, setComposerAssetTab] = useState<ComposerAssetTabKey>("recent");
|
||||||
|
const [composerWorkMode, setComposerWorkMode] = useState<ComposerWorkModeKey>("quick");
|
||||||
|
const [aiWriteDraft, setAiWriteDraft] = useState("");
|
||||||
const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(true);
|
const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(true);
|
||||||
const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video"; prompt: string } | null>(null);
|
const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video"; prompt: string } | null>(null);
|
||||||
const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
|
const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
|
||||||
@@ -2400,6 +2409,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
[cloneOutput, platform],
|
[cloneOutput, platform],
|
||||||
);
|
);
|
||||||
const cloneRatioOptions = baseCloneRatioOptions;
|
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",
|
||||||
|
],
|
||||||
|
[],
|
||||||
|
);
|
||||||
const productSetLanguageOptions = useMemo(
|
const productSetLanguageOptions = useMemo(
|
||||||
() => getPlatformLanguageOptions(productSetPlatform, productSetMarket),
|
() => getPlatformLanguageOptions(productSetPlatform, productSetMarket),
|
||||||
[productSetMarket, productSetPlatform],
|
[productSetMarket, productSetPlatform],
|
||||||
@@ -2445,6 +2466,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
: activeCommerceScenario === "popular"
|
: activeCommerceScenario === "popular"
|
||||||
? popularCommerceScenarioTemplates
|
? popularCommerceScenarioTemplates
|
||||||
: commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
|
: commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
|
||||||
|
const shouldShowScenarioSettings = activeCommerceScenario !== null && scenarioSettingsKeys.includes(activeCommerceScenario);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" });
|
templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" });
|
||||||
}, [activeCommerceScenario, isCloneTemplateStripVisible]);
|
}, [activeCommerceScenario, isCloneTemplateStripVisible]);
|
||||||
@@ -3844,7 +3866,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
|
|
||||||
const handleCommerceScenarioClick = (nextScenario: CommerceScenarioKey) => {
|
const handleCommerceScenarioClick = (nextScenario: CommerceScenarioKey) => {
|
||||||
if (nextScenario === activeCommerceScenario) {
|
if (nextScenario === activeCommerceScenario) {
|
||||||
setIsCloneTemplateStripVisible((visible) => !visible);
|
setActiveCommerceScenario(null);
|
||||||
|
setIsCloneTemplateStripVisible(false);
|
||||||
setComposerMenu(null);
|
setComposerMenu(null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -5803,6 +5826,96 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
? String(cloneVideoDuration) + "秒 " + (cloneVideoQuality === "standard" ? "720P" : "1080P")
|
? String(cloneVideoDuration) + "秒 " + (cloneVideoQuality === "standard" ? "720P" : "1080P")
|
||||||
: "换装素材";
|
: "换装素材";
|
||||||
|
|
||||||
|
const composerAssetTabs: Array<{ key: ComposerAssetTabKey; label: string }> = [
|
||||||
|
{ key: "recent", label: "最近保存" },
|
||||||
|
{ key: "recipe", label: "套图配方" },
|
||||||
|
{ key: "model", label: "模特库" },
|
||||||
|
];
|
||||||
|
const composerWorkModeOptions: Array<{ key: ComposerWorkModeKey; label: string; desc: string }> = [
|
||||||
|
{ key: "quick", label: "快捷", desc: "快速整理提示词，适合常规商品图生成。" },
|
||||||
|
{ key: "think", label: "思考", desc: "更强调卖点拆解、场景规划和图文一致性。" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const applyAiWriteSuggestion = () => {
|
||||||
|
const keyword = aiWriteDraft.trim();
|
||||||
|
if (!keyword) {
|
||||||
|
toast.info("请输入产品关键词或卖点");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const modeHint = composerWorkMode === "think" ? "先拆解目标人群、核心卖点和使用场景，" : "";
|
||||||
|
const nextValue = `${keyword}。${modeHint}请生成适合${platform}的高转化电商素材，画面干净高级，突出产品主体、核心卖点、使用场景和购买理由。`.slice(0, 500);
|
||||||
|
setRequirement(nextValue);
|
||||||
|
setComposerMenu(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderComposerAssetPanel = () => {
|
||||||
|
const renderEmpty = (label: string) => (
|
||||||
|
<div className="ecom-command-library-empty">
|
||||||
|
<FolderOpenOutlined />
|
||||||
|
<strong>暂无数据</strong>
|
||||||
|
<span>{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
let content: ReactNode;
|
||||||
|
if (composerAssetTab === "recent") {
|
||||||
|
content = ecommerceHistoryRecords.length ? (
|
||||||
|
<div className="ecom-command-library-list">
|
||||||
|
{ecommerceHistoryRecords.slice(0, 4).map((record) => {
|
||||||
|
const outputLabel = cloneOutputOptions.find((option) => option.key === record.output)?.label || "生成记录";
|
||||||
|
return (
|
||||||
|
<button key={record.id} type="button" onClick={() => { openEcommerceHistoryRecord(record); setComposerMenu(null); }}>
|
||||||
|
<strong>{record.title}</strong>
|
||||||
|
<span>{outputLabel} · {formatHistoryTime(record.createdAt)}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : renderEmpty("生成后保存的素材会沉淀在这里");
|
||||||
|
} else if (composerAssetTab === "recipe") {
|
||||||
|
content = (
|
||||||
|
<div className="ecom-command-library-list">
|
||||||
|
{commerceScenarioTemplates.slice(0, 4).map((template) => (
|
||||||
|
<button key={template.id} type="button" onClick={() => { handleCloneTemplateCardClick(template); setComposerMenu(null); }}>
|
||||||
|
<strong>{template.title}</strong>
|
||||||
|
<span>{template.badge} · {template.desc}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
content = (
|
||||||
|
<div className="ecom-command-library-list ecom-command-library-list--model">
|
||||||
|
{tryOnScenes.slice(0, 4).map((scene) => (
|
||||||
|
<button key={scene} type="button" className={selectedCloneModelScenes.includes(scene) ? "is-active" : ""} onClick={() => toggleCloneModelScene(scene)}>
|
||||||
|
<strong>{scene}</strong>
|
||||||
|
<span>模特场景</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header className="ecom-command-library-head">
|
||||||
|
<strong>资产库</strong>
|
||||||
|
<button type="button" className="ecom-command-library-help" onClick={(event) => event.preventDefault()}>
|
||||||
|
<QuestionCircleOutlined /> 使用教程
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<div className="ecom-command-library-tabs" role="tablist" aria-label="资产库分类">
|
||||||
|
{composerAssetTabs.map((tab) => (
|
||||||
|
<button key={tab.key} type="button" className={composerAssetTab === tab.key ? "is-active" : ""} onClick={() => setComposerAssetTab(tab.key)}>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{content}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const renderComposerMenu = () => {
|
const renderComposerMenu = () => {
|
||||||
const composerLanguageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages))).map((item) => ({
|
const composerLanguageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages))).map((item) => ({
|
||||||
language: item,
|
language: item,
|
||||||
@@ -5816,6 +5929,37 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
if (!menuToRender) return null;
|
if (!menuToRender) return null;
|
||||||
const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
|
const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
|
||||||
const composerPopoverKey = `${menuToRender}-${cloneOutput}-${popoverClosingClass ? "closing" : "open"}`;
|
const composerPopoverKey = `${menuToRender}-${cloneOutput}-${popoverClosingClass ? "closing" : "open"}`;
|
||||||
|
if (menuToRender === "assetLibrary") {
|
||||||
|
return (
|
||||||
|
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--library${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||||
|
{renderComposerAssetPanel()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (menuToRender === "workMode") {
|
||||||
|
return (
|
||||||
|
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--work-mode${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||||
|
<header><strong>模式</strong><span>仅调整创作体验，不改变接口</span></header>
|
||||||
|
{composerWorkModeOptions.map((option) => (
|
||||||
|
<button key={option.key} type="button" className={composerWorkMode === option.key ? "is-active" : ""} onClick={() => { setComposerWorkMode(option.key); setComposerMenu(null); }}>
|
||||||
|
<strong>{option.label}</strong>
|
||||||
|
<span>{option.desc}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (menuToRender === "aiWrite") {
|
||||||
|
return (
|
||||||
|
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--ai-write${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||||
|
<header><strong>AI 帮写</strong><span>把关键词扩写成商业提示词</span></header>
|
||||||
|
<textarea value={aiWriteDraft} onChange={(event) => setAiWriteDraft(event.target.value.slice(0, 120))} placeholder="输入产品名称、卖点或期望风格" />
|
||||||
|
<button type="button" className="ecom-command-ai-submit" onClick={applyAiWriteSuggestion}>
|
||||||
|
开始智能优化
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
if (menuToRender === "mode") {
|
if (menuToRender === "mode") {
|
||||||
return (
|
return (
|
||||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--grid ecom-command-popover--mode${popoverClosingClass}`} style={composerPopoverStyle}>
|
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--grid ecom-command-popover--mode${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||||
@@ -5846,8 +5990,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--languages${popoverClosingClass}`} style={composerPopoverStyle}>
|
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--languages${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||||
{composerLanguageOptions.map((option) => (
|
{composerLanguageOptions.map((option) => (
|
||||||
<button key={option.language} type="button" className={language === option.language ? "is-active" : ""} onClick={() => { setLanguage(option.language); setComposerMenu(null); }}>
|
<button key={option.language} type="button" className={language === option.language ? "is-active" : ""} onClick={() => { setLanguage(option.language); setComposerMenu(null); }}>
|
||||||
<strong>{option.language}</strong>
|
{option.language}
|
||||||
<span>({option.countries.slice(0, 3).join(" / ")}{option.countries.length > 3 ? " +" + String(option.countries.length - 3) : ""})</span>
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -5856,17 +5999,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
if (menuToRender === "ratio") {
|
if (menuToRender === "ratio") {
|
||||||
return (
|
return (
|
||||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--ratio-picker${popoverClosingClass}`} style={composerPopoverStyle}>
|
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--ratio-picker${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||||
{cloneRatioOptions.map((option) => {
|
{composerRatioOptions.map((option) => {
|
||||||
const ratioParts = getRatioDisplayParts(option);
|
const ratioParts = getRatioDisplayParts(option);
|
||||||
return (
|
return (
|
||||||
<button key={option} type="button" className={ratio === option ? "is-active" : ""} onClick={() => { setRatio(option); setComposerMenu(null); }}>
|
<button key={option} type="button" className={ratio === option ? "is-active" : ""} onClick={() => { setRatio(option); setComposerMenu(null); }}>
|
||||||
<span className="ecom-command-ratio-icon" aria-hidden="true">
|
{ratioParts.aspect}
|
||||||
<TableOutlined />
|
|
||||||
</span>
|
|
||||||
<span className="ecom-command-ratio-copy">
|
|
||||||
<strong>{ratioParts.size}</strong>
|
|
||||||
<em>{ratioParts.aspect}</em>
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -6460,24 +6597,28 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<div className="ecom-command-option-row ecom-command-option-row--settings">
|
{shouldShowScenarioSettings ? (
|
||||||
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
|
<div className="ecom-command-option-row ecom-command-option-row--settings">
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
|
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
|
||||||
<span>平台</span>{platform}
|
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
|
||||||
</button>
|
<span>平台</span>{platform}
|
||||||
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
|
</button>
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
|
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
|
||||||
<span>语种</span>{language}
|
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
|
||||||
</button>
|
<span>语种</span>{language}
|
||||||
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
|
</button>
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
|
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
|
||||||
<span>比例</span>{formatRatioDisplayValue(ratio)}
|
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
|
||||||
</button>
|
<span>比例</span>{getRatioDisplayParts(ratio).aspect}
|
||||||
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
|
</button>
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
|
{scenarioAdvancedSettingsKeys.includes(activeCommerceScenario) ? (
|
||||||
<span>设置</span>{composerSettingLabel}
|
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
|
||||||
</button>
|
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
|
||||||
</div>
|
<span>设置</span>{composerSettingLabel}
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
<textarea
|
<textarea
|
||||||
ref={requirementTextareaRef}
|
ref={requirementTextareaRef}
|
||||||
value={requirement}
|
value={requirement}
|
||||||
@@ -6501,7 +6642,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
<div className="ecom-command-composer-actions">
|
<div className="ecom-command-composer-actions">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`ecom-command-reference ecom-command-reference--bottom${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
className={`ecom-command-reference ecom-command-reference--bottom ecom-command-tool ecom-command-tool--upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
||||||
onClick={() => productInputRef.current?.click()}
|
onClick={() => productInputRef.current?.click()}
|
||||||
onDragEnter={(event) => {
|
onDragEnter={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -6515,18 +6656,71 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
const files = Array.from(event.dataTransfer.files);
|
const files = Array.from(event.dataTransfer.files);
|
||||||
if (files.length) addComposerAssets(files);
|
if (files.length) addComposerAssets(files);
|
||||||
}}
|
}}
|
||||||
|
aria-label="上传素材"
|
||||||
|
title="上传素材"
|
||||||
>
|
>
|
||||||
<span aria-hidden="true"><PaperClipOutlined /></span>
|
<span aria-hidden="true"><PaperClipOutlined /></span>
|
||||||
<strong>上传素材</strong>
|
<strong>上传素材</strong>
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ecom-command-tool ecom-command-tool--icon${composerMenu === "assetLibrary" ? " is-active" : ""}`}
|
||||||
|
onClick={(event) => toggleComposerMenu("assetLibrary", event)}
|
||||||
|
onMouseEnter={(event) => {
|
||||||
|
const rect = event.currentTarget.getBoundingClientRect();
|
||||||
|
setComposerTooltip({ text: "资产库", left: rect.left + rect.width / 2, top: rect.top - 8 });
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => setComposerTooltip(null)}
|
||||||
|
aria-label="资产库"
|
||||||
|
title="资产库"
|
||||||
|
data-tooltip="资产库"
|
||||||
|
>
|
||||||
|
<FolderOpenOutlined />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ecom-command-tool ecom-command-tool--icon${composerMenu === "workMode" ? " is-active" : ""}`}
|
||||||
|
onClick={(event) => toggleComposerMenu("workMode", event)}
|
||||||
|
onMouseEnter={(event) => {
|
||||||
|
const rect = event.currentTarget.getBoundingClientRect();
|
||||||
|
setComposerTooltip({ text: `模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`, left: rect.left + rect.width / 2, top: rect.top - 8 });
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => setComposerTooltip(null)}
|
||||||
|
aria-label={`模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`}
|
||||||
|
title={`模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`}
|
||||||
|
data-tooltip={`模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`}
|
||||||
|
>
|
||||||
|
<ArrowsCounterClockwise size={17} weight="bold" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ecom-command-tool ecom-command-tool--icon${composerMenu === "aiWrite" ? " is-active" : ""}`}
|
||||||
|
onClick={(event) => toggleComposerMenu("aiWrite", event)}
|
||||||
|
onMouseEnter={(event) => {
|
||||||
|
const rect = event.currentTarget.getBoundingClientRect();
|
||||||
|
setComposerTooltip({ text: "AI帮写", left: rect.left + rect.width / 2, top: rect.top - 8 });
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => setComposerTooltip(null)}
|
||||||
|
aria-label="AI帮写"
|
||||||
|
title="AI帮写"
|
||||||
|
data-tooltip="AI帮写"
|
||||||
|
>
|
||||||
|
<MagicWand size={17} weight="bold" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="ecom-command-submit-row">
|
<div className="ecom-command-submit-row">
|
||||||
<button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
|
<button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
|
||||||
{status === "generating" ? <LoadingOutlined /> : "➤"}
|
{status === "generating" ? <LoadingOutlined /> : <PaperPlaneRight size={18} weight="fill" />}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{renderComposerMenu()}
|
{renderComposerMenu()}
|
||||||
|
{composerTooltip ? createPortal(
|
||||||
|
<span className="ecom-command-tooltip-floating" style={{ left: composerTooltip.left, top: composerTooltip.top }}>
|
||||||
|
{composerTooltip.text}
|
||||||
|
</span>,
|
||||||
|
document.body
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
{(status === "idle" || status === "ready") && !showMainVideoWorkspace && activeCommerceScenario !== null && isCloneTemplateStripVisible ? (
|
{(status === "idle" || status === "ready") && !showMainVideoWorkspace && activeCommerceScenario !== null && isCloneTemplateStripVisible ? (
|
||||||
<div className={`ecom-command-template-carousel ecom-command-template-carousel--${activeCommerceScenario}`}>
|
<div className={`ecom-command-template-carousel ecom-command-template-carousel--${activeCommerceScenario}`}>
|
||||||
|
|||||||
@@ -14340,8 +14340,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
|
|
||||||
@media (max-width: 420px) {
|
@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 {
|
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: grid !important;
|
display: flex !important;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
flex-wrap: nowrap !important;
|
||||||
gap: 7px !important;
|
gap: 7px !important;
|
||||||
justify-content: stretch !important;
|
justify-content: stretch !important;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
@@ -14349,6 +14349,7 @@ 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"] .ecom-command-option-row.ecom-command-option-row--settings button {
|
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;
|
display: inline-flex !important;
|
||||||
|
flex: 1 1 0 !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
max-width: none !important;
|
max-width: none !important;
|
||||||
@@ -19192,3 +19193,935 @@ html body #root .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone
|
|||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
object-fit: contain !important;
|
object-fit: contain !important;
|
||||||
}
|
}
|
||||||
|
/* Commerce composer toolbelt: upload / assets / mode / AI writing. */
|
||||||
|
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;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
|
||||||
|
display: flex !important;
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: visible !important;
|
||||||
|
padding: 2px !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool {
|
||||||
|
position: relative !important;
|
||||||
|
flex: 0 0 auto !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
height: 40px !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
border: 1px solid rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 999px !important;
|
||||||
|
color: rgba(16, 32, 44, 0.72) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.82) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 6px 18px rgba(16, 115, 204, 0.045),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition:
|
||||||
|
background 160ms ease,
|
||||||
|
border-color 160ms ease,
|
||||||
|
color 160ms ease,
|
||||||
|
box-shadow 160ms ease,
|
||||||
|
transform 160ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.has-images,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.is-dragging {
|
||||||
|
border-color: rgba(30, 189, 219, 0.32) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
background: rgba(232, 249, 253, 0.95) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 9px 22px rgba(30, 189, 219, 0.11),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload {
|
||||||
|
gap: 7px !important;
|
||||||
|
width: auto !important;
|
||||||
|
min-width: max-content !important;
|
||||||
|
padding: 0 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon {
|
||||||
|
width: 40px !important;
|
||||||
|
min-width: 40px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon::after {
|
||||||
|
position: absolute !important;
|
||||||
|
left: 50% !important;
|
||||||
|
bottom: calc(100% + 10px) !important;
|
||||||
|
z-index: 260 !important;
|
||||||
|
padding: 6px 9px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
background: rgba(16, 32, 44, 0.72) !important;
|
||||||
|
box-shadow: 0 12px 28px rgba(16, 32, 44, 0.16) !important;
|
||||||
|
content: attr(data-tooltip) !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
font-weight: 760 !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
transform: translate(-50%, 4px) !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
transition: opacity 150ms ease, transform 150ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon:hover::after,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon:focus-visible::after {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: translate(-50%, 0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--library,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write {
|
||||||
|
gap: 14px !important;
|
||||||
|
border-color: rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 24px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.98) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 30px 76px rgba(16, 115, 204, 0.16),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
|
||||||
|
color: #10202c !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--library {
|
||||||
|
width: min(540px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(540px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
min-height: 300px !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--work-mode {
|
||||||
|
width: min(340px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(340px, 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--ai-write {
|
||||||
|
width: min(430px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(430px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-head,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode header,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write header {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-head strong,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode header strong,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write header strong {
|
||||||
|
color: #10202c !important;
|
||||||
|
font-size: 22px !important;
|
||||||
|
font-weight: 880 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-help {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 5px !important;
|
||||||
|
min-height: 28px !important;
|
||||||
|
padding: 0 8px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
color: #1073cc !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs {
|
||||||
|
display: flex !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs button {
|
||||||
|
flex: 0 0 auto !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
padding: 0 14px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
color: #687885 !important;
|
||||||
|
background: #f2f5f8 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs button.is-active {
|
||||||
|
color: #10202c !important;
|
||||||
|
background: #e8edf3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty {
|
||||||
|
display: grid !important;
|
||||||
|
min-height: 170px !important;
|
||||||
|
place-items: center !important;
|
||||||
|
align-content: center !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
color: #8b99a4 !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty .anticon {
|
||||||
|
color: rgba(30, 189, 219, 0.58) !important;
|
||||||
|
font-size: 42px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty strong {
|
||||||
|
color: #7d8a94 !important;
|
||||||
|
font-size: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty span {
|
||||||
|
color: #a1adb6 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button {
|
||||||
|
display: grid !important;
|
||||||
|
align-content: center !important;
|
||||||
|
gap: 5px !important;
|
||||||
|
min-height: 72px !important;
|
||||||
|
border-color: rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
background: linear-gradient(180deg, #ffffff, #f7fbfc) !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button.is-active {
|
||||||
|
border-color: rgba(30, 189, 219, 0.34) !important;
|
||||||
|
background: linear-gradient(180deg, #fafdff, #eefbfe) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button strong,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button strong {
|
||||||
|
min-width: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode header span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write header span {
|
||||||
|
color: #7a8c98 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write textarea {
|
||||||
|
min-height: 136px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 14px !important;
|
||||||
|
border: 1px solid rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
background: #fbfdfe !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
resize: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write textarea::placeholder {
|
||||||
|
color: #98a7b1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit {
|
||||||
|
min-height: 44px !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
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;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
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;
|
||||||
|
min-height: 56px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
max-width: calc(100% - 54px) !important;
|
||||||
|
gap: 7px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool {
|
||||||
|
height: 38px !important;
|
||||||
|
min-height: 38px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon {
|
||||||
|
width: 38px !important;
|
||||||
|
min-width: 38px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload {
|
||||||
|
max-width: 112px !important;
|
||||||
|
padding: 0 11px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload strong {
|
||||||
|
max-width: 56px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon::after {
|
||||||
|
display: none !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--library,
|
||||||
|
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--work-mode,
|
||||||
|
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--ai-write {
|
||||||
|
inset: calc(100% + 12px) auto auto 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
max-height: min(420px, calc(100dvh - 380px)) !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list {
|
||||||
|
grid-template-columns: minmax(0, 1fr) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 390px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload {
|
||||||
|
min-width: 40px !important;
|
||||||
|
width: 40px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload strong {
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
height: 1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
clip: rect(0 0 0 0) !important;
|
||||||
|
clip-path: inset(50%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Composer input UI refinement
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within {
|
||||||
|
border-color: rgba(30, 189, 219, 0.5) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.96),
|
||||||
|
0 0 0 1px rgba(30, 189, 219, 0.08),
|
||||||
|
0 28px 72px rgba(16, 115, 204, 0.14) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea::placeholder {
|
||||||
|
color: rgba(16, 32, 44, 0.42) !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool {
|
||||||
|
border: 1px solid rgba(16, 32, 44, 0.1) !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
color: rgba(16, 32, 44, 0.68) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.78) !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
|
||||||
|
transition:
|
||||||
|
background 160ms ease,
|
||||||
|
border-color 160ms ease,
|
||||||
|
color 160ms ease,
|
||||||
|
box-shadow 160ms ease,
|
||||||
|
transform 160ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.has-images,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.is-dragging {
|
||||||
|
border-color: rgba(30, 189, 219, 0.42) !important;
|
||||||
|
color: #0f6678 !important;
|
||||||
|
background: rgba(232, 249, 253, 0.92) !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool:active:not(:disabled) {
|
||||||
|
transform: translateY(0) scale(0.96) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon {
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon::after {
|
||||||
|
position: absolute !important;
|
||||||
|
left: 50% !important;
|
||||||
|
bottom: calc(100% + 8px) !important;
|
||||||
|
z-index: 9999 !important;
|
||||||
|
padding: 6px 10px !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
background: rgba(16, 32, 44, 0.88) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
content: attr(data-tooltip) !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
line-height: 1.2 !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
visibility: hidden !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
transform: translate(-50%, 4px) !important;
|
||||||
|
transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon:hover::after,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon:focus-visible::after {
|
||||||
|
opacity: 1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
transform: translate(-50%, 0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send:not(:disabled):hover {
|
||||||
|
transform: translateY(-2px) scale(1.03) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send:not(:disabled):active {
|
||||||
|
transform: translateY(0) scale(0.97) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send:disabled {
|
||||||
|
opacity: 0.55 !important;
|
||||||
|
filter: grayscale(0.35) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Composer tooltip visibility fix
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
@media (min-width: 641px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon::after {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================================================
|
||||||
|
Floating composer tooltip (rendered to body via portal)
|
||||||
|
========================================================= */
|
||||||
|
|
||||||
|
.ecom-command-tooltip-floating {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99999;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(16, 32, 44, 0.88);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile responsive refinement: center the pre-generate composer vertically and remove excessive bottom spacing. */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview {
|
||||||
|
padding-bottom: 24px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate {
|
||||||
|
top: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
gap: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
|
||||||
|
font-size: clamp(22px, 6vw, 30px) !important;
|
||||||
|
line-height: 1.22 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||||
|
padding: 12px !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea {
|
||||||
|
min-height: 56px !important;
|
||||||
|
height: auto !important;
|
||||||
|
max-height: 120px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
|
||||||
|
gap: 8px !important;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate {
|
||||||
|
top: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
|
||||||
|
font-size: clamp(20px, 5.8vw, 26px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||||
|
padding: 10px !important;
|
||||||
|
border-radius: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unify icon tool buttons (asset library / mode / AI write) with the upload button color. */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.ecom-command-tool--icon {
|
||||||
|
border: 0 !important;
|
||||||
|
background: rgba(248, 253, 255, 0.78) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.68) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.ecom-command-tool--icon:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.ecom-command-tool--icon.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.ecom-command-tool--icon.has-images,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.ecom-command-tool--icon.is-dragging {
|
||||||
|
background: rgba(232, 249, 253, 0.9) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ratio picker: single-column scrollable list without icons. */
|
||||||
|
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 {
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
gap: 2px !important;
|
||||||
|
width: min(148px, calc(100vw - 56px)) !important;
|
||||||
|
max-width: min(148px, calc(100vw - 56px)) !important;
|
||||||
|
max-height: 260px !important;
|
||||||
|
padding: 6px !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
border-radius: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button {
|
||||||
|
justify-content: center !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
padding: 0 12px !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Refined ratio picker: glassmorphism surface, subtle motion, active dot indicator. */
|
||||||
|
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 {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 3px !important;
|
||||||
|
width: min(156px, calc(100vw - 48px)) !important;
|
||||||
|
max-width: min(156px, calc(100vw - 48px)) !important;
|
||||||
|
max-height: 288px !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
border: 1px solid rgba(16, 115, 204, 0.12) !important;
|
||||||
|
border-radius: 18px !important;
|
||||||
|
background: rgba(254, 255, 255, 0.94) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 20px 50px rgba(16, 115, 204, 0.12),
|
||||||
|
0 8px 20px rgba(16, 115, 204, 0.06),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
|
||||||
|
backdrop-filter: blur(18px) saturate(1.2) !important;
|
||||||
|
-webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
animation: ratio-picker-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button {
|
||||||
|
position: relative !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
height: 42px !important;
|
||||||
|
min-height: 42px !important;
|
||||||
|
padding: 0 16px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
color: rgba(16, 32, 44, 0.72) !important;
|
||||||
|
background: transparent !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
letter-spacing: 0.01em !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: background 160ms ease, color 160ms ease, transform 160ms ease !important;
|
||||||
|
animation: ratio-item-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button::before {
|
||||||
|
position: absolute !important;
|
||||||
|
left: 8px !important;
|
||||||
|
top: 50% !important;
|
||||||
|
width: 4px !important;
|
||||||
|
height: 4px !important;
|
||||||
|
border-radius: 999px !important;
|
||||||
|
background: #1ebddb !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
transform: translateY(-50%) scale(0.5) !important;
|
||||||
|
transition: opacity 160ms ease, transform 160ms ease !important;
|
||||||
|
content: "" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:hover {
|
||||||
|
background: rgba(30, 189, 219, 0.08) !important;
|
||||||
|
color: #0f7895 !important;
|
||||||
|
transform: translateX(2px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button.is-active {
|
||||||
|
background: rgba(30, 189, 219, 0.12) !important;
|
||||||
|
color: #0f7895 !important;
|
||||||
|
font-weight: 720 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button.is-active::before {
|
||||||
|
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"] .ecom-command-popover--ratio-picker button:nth-child(1) { animation-delay: 20ms !important; }
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:nth-child(2) { animation-delay: 40ms !important; }
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:nth-child(3) { animation-delay: 60ms !important; }
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:nth-child(4) { animation-delay: 80ms !important; }
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:nth-child(5) { animation-delay: 100ms !important; }
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:nth-child(6) { animation-delay: 120ms !important; }
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button:nth-child(7) { animation-delay: 140ms !important; }
|
||||||
|
|
||||||
|
@keyframes ratio-picker-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-8px) scale(0.98);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ratio-item-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-6px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ratio picker refinement: compact width that fits the text, single column, minimal 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--ratio-picker {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 2px !important;
|
||||||
|
width: fit-content !important;
|
||||||
|
min-width: 72px !important;
|
||||||
|
max-width: min(180px, calc(100vw - 48px)) !important;
|
||||||
|
max-height: 260px !important;
|
||||||
|
padding: 6px !important;
|
||||||
|
border: 1px solid rgba(16, 115, 204, 0.1) !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.98) !important;
|
||||||
|
box-shadow: 0 12px 32px rgba(16, 115, 204, 0.1) !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button {
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
height: 36px !important;
|
||||||
|
min-height: 36px !important;
|
||||||
|
padding: 0 14px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
color: rgba(16, 32, 44, 0.78) !important;
|
||||||
|
background: transparent !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
letter-spacing: 0 !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--ratio-picker button::before {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker 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--ratio-picker button.is-active {
|
||||||
|
background: rgba(30, 189, 219, 0.12) !important;
|
||||||
|
color: #0f7895 !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Final ratio picker: strictly single column, compact width matching the text. */
|
||||||
|
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.ecom-command-popover--ratio-picker {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 2px !important;
|
||||||
|
width: fit-content !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: none !important;
|
||||||
|
max-height: 260px !important;
|
||||||
|
padding: 5px !important;
|
||||||
|
border: 1px solid rgba(16, 115, 204, 0.1) !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
background: #ffffff !important;
|
||||||
|
box-shadow: 0 8px 24px rgba(16, 115, 204, 0.1) !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
overflow-y: auto !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 {
|
||||||
|
width: 100% !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
height: 34px !important;
|
||||||
|
min-height: 34px !important;
|
||||||
|
padding: 0 18px !important;
|
||||||
|
border-radius: 7px !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--ratio-picker.ecom-command-popover--ratio-picker button::before {
|
||||||
|
content: none !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: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--ratio-picker.ecom-command-popover--ratio-picker button.is-active {
|
||||||
|
background: rgba(30, 189, 219, 0.12) !important;
|
||||||
|
color: #0f7895 !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Language picker: same compact single-column style as ratio picker, no country labels. */
|
||||||
|
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.ecom-command-popover--languages {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 2px !important;
|
||||||
|
width: fit-content !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: none !important;
|
||||||
|
max-height: 260px !important;
|
||||||
|
padding: 5px !important;
|
||||||
|
border: 1px solid rgba(16, 115, 204, 0.1) !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
background: #ffffff !important;
|
||||||
|
box-shadow: 0 8px 24px rgba(16, 115, 204, 0.1) !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
width: 100% !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
height: 34px !important;
|
||||||
|
min-height: 34px !important;
|
||||||
|
padding: 0 18px !important;
|
||||||
|
border-radius: 7px !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--languages.ecom-command-popover--languages 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--languages.ecom-command-popover--languages button.is-active {
|
||||||
|
background: rgba(30, 189, 219, 0.12) !important;
|
||||||
|
color: #0f7895 !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Language picker: tighter padding for a narrower width, all options remain scrollable. */
|
||||||
|
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.ecom-command-popover--languages {
|
||||||
|
padding: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
padding: 0 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ratio & Language pickers: strictly vertical scroll, no horizontal scroll, polished scrollbar. */
|
||||||
|
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.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--languages.ecom-command-popover--languages {
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
max-width: calc(100vw - 48px) !important;
|
||||||
|
scrollbar-width: thin !important;
|
||||||
|
scrollbar-color: rgba(16, 115, 204, 0.28) transparent !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.ecom-command-popover--ratio-picker::-webkit-scrollbar,
|
||||||
|
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.ecom-command-popover--languages::-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--ratio-picker.ecom-command-popover--ratio-picker::-webkit-scrollbar-thumb,
|
||||||
|
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.ecom-command-popover--languages::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(16, 115, 204, 0.28) !important;
|
||||||
|
border-radius: 999px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ratio & Language pickers: clean single-column list that scrolls vertically when needed. */
|
||||||
|
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.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--languages.ecom-command-popover--languages {
|
||||||
|
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--ratio-picker.ecom-command-popover--ratio-picker button,
|
||||||
|
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 {
|
||||||
|
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--ratio-picker.ecom-command-popover--ratio-picker button::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::before {
|
||||||
|
content: none !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:hover,
|
||||||
|
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: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--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.12) !important;
|
||||||
|
color: #0f7895 !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|||||||
+460
-30
@@ -3047,33 +3047,47 @@
|
|||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
background: #1b1d23;
|
background: #1b1d23;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
transition:
|
||||||
|
border-color 180ms ease,
|
||||||
|
box-shadow 180ms ease,
|
||||||
|
transform 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper:focus-within {
|
||||||
|
border-color: rgba(0, 255, 136, 0.45);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 1px rgba(0, 255, 136, 0.08),
|
||||||
|
0 18px 46px rgba(0, 0, 0, 0.32);
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button {
|
.product-clone-page[data-tool="clone"] .clone-ai-send-button {
|
||||||
display: grid;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
place-items: center;
|
|
||||||
border: 1px solid #303540;
|
border: 1px solid #303540;
|
||||||
border-radius: 999px;
|
border-radius: 12px;
|
||||||
background: #22252d;
|
background: #00ff88;
|
||||||
color: #eef2f6;
|
color: #06130d;
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 900;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition:
|
||||||
background-color 160ms ease,
|
background-color 160ms ease,
|
||||||
border-color 160ms ease,
|
border-color 160ms ease,
|
||||||
transform 160ms ease;
|
transform 160ms ease,
|
||||||
|
box-shadow 160ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button:hover:not(:disabled) {
|
.product-clone-page[data-tool="clone"] .clone-ai-send-button:hover:not(:disabled) {
|
||||||
border-color: #00ff88;
|
border-color: #00ff88;
|
||||||
background: #202c28;
|
background: #00ff88;
|
||||||
|
box-shadow: 0 10px 24px rgba(0, 255, 136, 0.24);
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button:active:not(:disabled) {
|
.product-clone-page[data-tool="clone"] .clone-ai-send-button:active:not(:disabled) {
|
||||||
transform: scale(0.94);
|
transform: translateY(0) scale(0.96);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
|
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
|
||||||
@@ -3082,7 +3096,7 @@
|
|||||||
max-height: 183px;
|
max-height: 183px;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
resize: vertical;
|
resize: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #eef2f6;
|
color: #eef2f6;
|
||||||
padding: 10px 0 8px;
|
padding: 10px 0 8px;
|
||||||
@@ -3093,17 +3107,15 @@
|
|||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea::placeholder {
|
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea::placeholder {
|
||||||
color: #687184;
|
color: #687184;
|
||||||
}
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button {
|
|
||||||
background: #00ff88;
|
|
||||||
color: #06130d;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-send-button:disabled {
|
.product-clone-page[data-tool="clone"] .clone-ai-send-button:disabled {
|
||||||
background: #26342f;
|
background: #26342f;
|
||||||
color: #677569;
|
color: #677569;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
.product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
||||||
@@ -8945,17 +8957,28 @@
|
|||||||
rgba(20, 24, 23, 0.92);
|
rgba(20, 24, 23, 0.92);
|
||||||
box-shadow: var(--ecm-shadow-panel);
|
box-shadow: var(--ecm-shadow-panel);
|
||||||
backdrop-filter: blur(18px);
|
backdrop-filter: blur(18px);
|
||||||
|
transition:
|
||||||
|
border-color 180ms ease,
|
||||||
|
box-shadow 180ms ease,
|
||||||
|
transform 180ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper:focus-within {
|
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper:focus-within {
|
||||||
border-color: rgba(var(--ecm-accent-rgb), 0.42);
|
border-color: rgba(var(--ecm-accent-rgb), 0.5);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 20px 58px rgba(0, 0, 0, 0.34),
|
0 22px 62px rgba(0, 0, 0, 0.36),
|
||||||
0 0 0 1px rgba(var(--ecm-accent-rgb), 0.08);
|
0 0 0 1px rgba(var(--ecm-accent-rgb), 0.1);
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
|
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
|
||||||
color: var(--ecm-text);
|
color: var(--ecm-text);
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea::placeholder {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
.product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
||||||
@@ -9845,10 +9868,14 @@
|
|||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send {
|
||||||
position: static;
|
position: static;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 46px;
|
width: 46px;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
min-height: 46px;
|
min-height: 46px;
|
||||||
border: 1px solid rgba(var(--ecm-accent-rgb), 0.55);
|
border: 1px solid rgba(var(--ecm-accent-rgb), 0.55);
|
||||||
|
border-radius: 12px;
|
||||||
color: #021b2e;
|
color: #021b2e;
|
||||||
background: linear-gradient(135deg, #16c8df, #18a7ff);
|
background: linear-gradient(135deg, #16c8df, #18a7ff);
|
||||||
box-shadow: 0 12px 28px rgba(var(--ecm-accent-rgb), 0.32);
|
box-shadow: 0 12px 28px rgba(var(--ecm-accent-rgb), 0.32);
|
||||||
@@ -9856,8 +9883,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:hover:not(:disabled) {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:hover:not(:disabled) {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-2px) scale(1.02);
|
||||||
box-shadow: 0 16px 34px rgba(var(--ecm-accent-rgb), 0.36);
|
box-shadow: 0 18px 38px rgba(var(--ecm-accent-rgb), 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:active:not(:disabled) {
|
||||||
|
transform: translateY(0) scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:disabled {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:disabled {
|
||||||
@@ -9865,6 +9896,7 @@
|
|||||||
color: rgba(255, 255, 255, 0.26);
|
color: rgba(255, 255, 255, 0.26);
|
||||||
background: rgba(126, 235, 255, 0.08);
|
background: rgba(126, 235, 255, 0.08);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
||||||
@@ -11053,16 +11085,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within {
|
||||||
border-color: var(--ecom-entry-line-strong) !important;
|
border-color: rgba(30, 189, 219, 0.5) !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
inset 0 1px 0 rgba(255, 255, 255, 0.96),
|
||||||
|
0 0 0 1px rgba(30, 189, 219, 0.08),
|
||||||
var(--ecom-entry-focus),
|
var(--ecom-entry-focus),
|
||||||
var(--ecom-entry-shadow-strong) !important;
|
var(--ecom-entry-shadow-strong) !important;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:hover {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:hover {
|
||||||
border-color: rgba(30, 189, 219, 0.3) !important;
|
border-color: rgba(30, 189, 219, 0.32) !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
||||||
0 26px 72px rgba(16, 115, 204, 0.13) !important;
|
0 26px 72px rgba(16, 115, 204, 0.13) !important;
|
||||||
@@ -11070,10 +11103,10 @@
|
|||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer.is-dragging,
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer.is-dragging,
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer.has-files {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer.has-files {
|
||||||
border-color: rgba(30, 189, 219, 0.42) !important;
|
border-color: rgba(30, 189, 219, 0.5) !important;
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 253, 255, 0.96) 100%),
|
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 253, 255, 0.96) 100%),
|
||||||
linear-gradient(135deg, rgba(30, 189, 219, 0.1), rgba(16, 115, 204, 0.06)) !important;
|
linear-gradient(135deg, rgba(30, 189, 219, 0.12), rgba(16, 115, 204, 0.08)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference {
|
||||||
@@ -11114,8 +11147,11 @@
|
|||||||
caret-color: var(--ecom-entry-accent) !important;
|
caret-color: var(--ecom-entry-accent) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-input::placeholder {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-input::placeholder,
|
||||||
color: rgba(16, 32, 44, 0.38) !important;
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea::placeholder {
|
||||||
|
color: rgba(16, 32, 44, 0.42) !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar {
|
||||||
@@ -11200,11 +11236,16 @@
|
|||||||
box-shadow:
|
box-shadow:
|
||||||
0 20px 38px rgba(30, 189, 219, 0.34),
|
0 20px 38px rgba(30, 189, 219, 0.34),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
|
inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-2px) scale(1.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send:active:not(:disabled) {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send:active:not(:disabled) {
|
||||||
transform: translateY(1px) scale(0.98);
|
transform: translateY(0) scale(0.97);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send:disabled {
|
||||||
|
opacity: 0.5 !important;
|
||||||
|
filter: grayscale(0.35) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
||||||
@@ -12209,3 +12250,392 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
font-size: 24px !important;
|
font-size: 24px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Final composer toolbelt overrides: keep upload/assets/mode/AI writing responsive and single-line. */
|
||||||
|
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;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
|
||||||
|
display: flex !important;
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: visible !important;
|
||||||
|
padding: 2px !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool {
|
||||||
|
position: relative !important;
|
||||||
|
flex: 0 0 auto !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
height: 40px !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
border: 1px solid rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 999px !important;
|
||||||
|
color: rgba(16, 32, 44, 0.72) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.82) !important;
|
||||||
|
box-shadow: 0 6px 18px rgba(16, 115, 204, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.has-images,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool.is-dragging {
|
||||||
|
border-color: rgba(30, 189, 219, 0.32) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
background: rgba(232, 249, 253, 0.95) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload {
|
||||||
|
gap: 7px !important;
|
||||||
|
width: auto !important;
|
||||||
|
min-width: max-content !important;
|
||||||
|
padding: 0 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon {
|
||||||
|
width: 40px !important;
|
||||||
|
min-width: 40px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon::after {
|
||||||
|
position: absolute !important;
|
||||||
|
left: 50% !important;
|
||||||
|
bottom: calc(100% + 10px) !important;
|
||||||
|
z-index: 260 !important;
|
||||||
|
padding: 6px 9px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
background: rgba(16, 32, 44, 0.72) !important;
|
||||||
|
content: attr(data-tooltip) !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
font-weight: 760 !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
transform: translate(-50%, 4px) !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
transition: opacity 150ms ease, transform 150ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon:hover::after,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon:focus-visible::after {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: translate(-50%, 0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--library,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write {
|
||||||
|
gap: 14px !important;
|
||||||
|
border-color: rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 24px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.98) !important;
|
||||||
|
box-shadow: 0 30px 76px rgba(16, 115, 204, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
|
||||||
|
color: #10202c !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--library {
|
||||||
|
width: min(540px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(540px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
min-height: 300px !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--work-mode {
|
||||||
|
width: min(340px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(340px, 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--ai-write {
|
||||||
|
width: min(430px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(430px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-head,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode header,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write header {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-head strong,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode header strong,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write header strong {
|
||||||
|
color: #10202c !important;
|
||||||
|
font-size: 22px !important;
|
||||||
|
font-weight: 880 !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-help {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 5px !important;
|
||||||
|
min-height: 28px !important;
|
||||||
|
padding: 0 8px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
color: #1073cc !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs {
|
||||||
|
display: flex !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs button {
|
||||||
|
flex: 0 0 auto !important;
|
||||||
|
min-height: 40px !important;
|
||||||
|
padding: 0 14px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
color: #687885 !important;
|
||||||
|
background: #f2f5f8 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-tabs button.is-active {
|
||||||
|
color: #10202c !important;
|
||||||
|
background: #e8edf3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty {
|
||||||
|
display: grid !important;
|
||||||
|
min-height: 170px !important;
|
||||||
|
place-items: center !important;
|
||||||
|
align-content: center !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
color: #8b99a4 !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty .anticon {
|
||||||
|
color: rgba(30, 189, 219, 0.58) !important;
|
||||||
|
font-size: 42px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty strong {
|
||||||
|
color: #7d8a94 !important;
|
||||||
|
font-size: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-empty span {
|
||||||
|
color: #a1adb6 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button {
|
||||||
|
display: grid !important;
|
||||||
|
align-content: center !important;
|
||||||
|
gap: 5px !important;
|
||||||
|
min-height: 72px !important;
|
||||||
|
border-color: rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
background: linear-gradient(180deg, #ffffff, #f7fbfc) !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button.is-active {
|
||||||
|
border-color: rgba(30, 189, 219, 0.34) !important;
|
||||||
|
background: linear-gradient(180deg, #fafdff, #eefbfe) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button strong,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button strong {
|
||||||
|
min-width: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list button span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode > button span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--work-mode header span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write header span {
|
||||||
|
color: #7a8c98 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ai-write textarea {
|
||||||
|
min-height: 136px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 14px !important;
|
||||||
|
border: 1px solid rgba(16, 32, 44, 0.08) !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
color: #10202c !important;
|
||||||
|
background: #fbfdfe !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
resize: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit {
|
||||||
|
min-height: 44px !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
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;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
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;
|
||||||
|
min-height: 56px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
max-width: calc(100% - 54px) !important;
|
||||||
|
gap: 7px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool {
|
||||||
|
height: 38px !important;
|
||||||
|
min-height: 38px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon {
|
||||||
|
width: 38px !important;
|
||||||
|
min-width: 38px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload {
|
||||||
|
max-width: 112px !important;
|
||||||
|
padding: 0 11px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload strong {
|
||||||
|
max-width: 56px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--icon::after {
|
||||||
|
display: none !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--library,
|
||||||
|
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--work-mode,
|
||||||
|
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--ai-write {
|
||||||
|
inset: calc(100% + 12px) auto auto 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
max-height: min(420px, calc(100dvh - 380px)) !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-library-list {
|
||||||
|
grid-template-columns: minmax(0, 1fr) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 390px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload {
|
||||||
|
min-width: 40px !important;
|
||||||
|
width: 40px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-tool--upload strong {
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
height: 1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
clip: rect(0 0 0 0) !important;
|
||||||
|
clip-path: inset(50%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 641px) {
|
||||||
|
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.ecom-command-popover--library {
|
||||||
|
width: min(540px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(540px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
min-height: 300px !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.ecom-command-popover--work-mode {
|
||||||
|
width: min(340px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(340px, 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.ecom-command-popover--ai-write {
|
||||||
|
width: min(430px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||||
|
max-width: min(430px, calc(100% - var(--composer-popover-left, 0px))) !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 > .ecom-command-popover.ecom-command-popover.ecom-command-popover--library,
|
||||||
|
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.ecom-command-popover--work-mode,
|
||||||
|
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.ecom-command-popover--ai-write {
|
||||||
|
inset: calc(100% + 12px) auto auto 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 700px) {
|
||||||
|
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.ecom-command-popover--library {
|
||||||
|
min-height: 0 !important;
|
||||||
|
max-height: min(300px, calc(100dvh - 330px)) !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
|
html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
@@ -3473,8 +3473,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
|
|
||||||
@media (max-width: 420px) {
|
@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 {
|
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: grid !important;
|
display: flex !important;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
flex-wrap: nowrap !important;
|
||||||
gap: 7px !important;
|
gap: 7px !important;
|
||||||
justify-content: stretch !important;
|
justify-content: stretch !important;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
@@ -3482,6 +3482,7 @@ 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"] .ecom-command-option-row.ecom-command-option-row--settings button {
|
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;
|
display: inline-flex !important;
|
||||||
|
flex: 1 1 0 !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
max-width: none !important;
|
max-width: none !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user