feat: 重构电商指令栏布局,模式标签外置、精简结果标签、优化生成记录交互
本次修改对电商图片工作台的指令栏(composer)进行了全面重构,主要包含以下变更: 一、指令栏布局重构(EcommercePage.tsx): - 新增生成模式标签页(ecom-command-mode-tabs),5种模式(套图/详情图/模特图/视频/爆款图)以标签形式外置于输入区上方,每种模式配有独立图标和配色 - 设置行(平台/语种/比例/设置)移入输入区内部,采用圆角胶囊按钮排列 - 上传按钮从输入区移到底部工具栏,改为"上传素材"紧凑样式 - 精简生成结果画布:移除所有文字标签(套图/详情图/模特图/爆款图 标签、原图素材标签、结果卡片标签),让图片成为绝对视觉焦点 - 灵感行"AI团队"更名为"作品记录",更新描述文案为"沉淀最近生成的高转化素材,随时回看与复用" 二、样式系统升级(ecommerce-standalone.css): - 新增模式标签页完整样式:5列等宽网格、磨砂玻璃背板、各模式独立主题色 · 套图 set:翠绿 #0f8f72 · 详情图 detail:紫色 #7a5af8 · 模特图 model:蓝色 #1073cc · 视频 video:暖橙 #cc6b14 · 爆款图 hot:玫红 #c04468 - hover/active 状态带径向光晕和上浮微动效(translateY(-1px)) - 隐藏生成结果中的所有文字标签(display:none),减少视觉噪音 - 修复历史记录删除按钮定位:改为绝对居中定位,不受网格布局影响 - 输入区改为单列布局,增大最小高度(214-286px),增加内边距 变更文件: - src/features/ecommerce/EcommercePage.tsx (+87/-51) - src/styles/ecommerce-standalone.css (+456)
This commit is contained in:
@@ -106,8 +106,8 @@ const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration;
|
|||||||
|
|
||||||
const ecommerceInspirationRows = [
|
const ecommerceInspirationRows = [
|
||||||
{
|
{
|
||||||
title: "AI团队",
|
title: "作品记录",
|
||||||
desc: "不止作图,更懂转化。",
|
desc: "沉淀最近生成的高转化素材,随时回看与复用。",
|
||||||
variant: "team",
|
variant: "team",
|
||||||
cards: [
|
cards: [
|
||||||
{ title: "指定ASIN,优化listing", meta: "竞品拆解 · 卖点重排 · 图文建议", mediaUrl: ecommerceInspirationAssets.asinListing, mediaType: "image" },
|
{ title: "指定ASIN,优化listing", meta: "竞品拆解 · 卖点重排 · 图文建议", mediaUrl: ecommerceInspirationAssets.asinListing, mediaType: "image" },
|
||||||
@@ -4487,14 +4487,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
|
onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
|
||||||
>
|
>
|
||||||
<img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
|
<img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
|
||||||
<span>原图素材</span>
|
|
||||||
</button>
|
</button>
|
||||||
<div className="product-set-flow-arrow" aria-hidden="true" />
|
<div className="product-set-flow-arrow" aria-hidden="true" />
|
||||||
<div className="product-set-card-grid result-reveal">
|
<div className="product-set-card-grid result-reveal">
|
||||||
{setPreviewCards.map((card) => (
|
{setPreviewCards.map((card) => (
|
||||||
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
||||||
<img src={card.src} alt={card.label} />
|
<img src={card.src} alt={card.label} />
|
||||||
<span>{card.label}</span>
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -4985,9 +4983,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
|
|
||||||
</div>
|
|
||||||
{node.sourceImage ? (
|
{node.sourceImage ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -4995,7 +4991,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
|
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
|
||||||
>
|
>
|
||||||
<img src={node.sourceImage} alt="原图素材" />
|
<img src={node.sourceImage} alt="原图素材" />
|
||||||
<span>原图素材</span>
|
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||||
@@ -5003,7 +4998,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
{node.results.map((card) => (
|
{node.results.map((card) => (
|
||||||
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
|
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
|
||||||
<img src={card.src} alt={card.label} />
|
<img src={card.src} alt={card.label} />
|
||||||
<span>{card.label}</span>
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -5078,27 +5072,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
onChange={handleSmartCutoutUpload}
|
onChange={handleSmartCutoutUpload}
|
||||||
aria-label="上传智能抠图素材"
|
aria-label="上传智能抠图素材"
|
||||||
/>
|
/>
|
||||||
|
<div className="ecom-command-mode-tabs" aria-label="生成模式">
|
||||||
|
{cloneOutputOptions.map((option) => (
|
||||||
|
<button
|
||||||
|
key={option.key}
|
||||||
|
type="button"
|
||||||
|
className={cloneOutput === option.key ? "is-active" : ""}
|
||||||
|
onClick={() => handleCloneOutputChange(option.key)}
|
||||||
|
>
|
||||||
|
<span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
|
||||||
|
<strong>{option.label}</strong>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
<div className="clone-ai-input-wrapper ecom-command-composer">
|
<div className="clone-ai-input-wrapper ecom-command-composer">
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`ecom-command-reference${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
|
||||||
onClick={() => productInputRef.current?.click()}
|
|
||||||
onDragEnter={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
setIsProductUploadDragging(true);
|
|
||||||
}}
|
|
||||||
onDragOver={(event) => event.preventDefault()}
|
|
||||||
onDragLeave={() => setIsProductUploadDragging(false)}
|
|
||||||
onDrop={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
setIsProductUploadDragging(false);
|
|
||||||
const files = Array.from(event.dataTransfer.files);
|
|
||||||
if (files.length) addComposerAssets(files);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span aria-hidden="true"><CloudUploadOutlined /></span>
|
|
||||||
<strong>上传商品图</strong>
|
|
||||||
</button>
|
|
||||||
{productImages.length ? (
|
{productImages.length ? (
|
||||||
<div className="ecom-command-asset-popover" aria-label="已上传素材">
|
<div className="ecom-command-asset-popover" aria-label="已上传素材">
|
||||||
{productImages.map((image) => (
|
{productImages.map((image) => (
|
||||||
@@ -5115,6 +5102,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
<button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
|
<button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
<div className="ecom-command-option-row ecom-command-option-row--settings">
|
||||||
|
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
|
||||||
|
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
|
||||||
|
<span>平台</span>{platform}
|
||||||
|
</button>
|
||||||
|
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
|
||||||
|
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
|
||||||
|
<span>语种</span>{language}
|
||||||
|
</button>
|
||||||
|
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
|
||||||
|
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
|
||||||
|
<span>比例</span>{formatRatioDisplayValue(ratio)}
|
||||||
|
</button>
|
||||||
|
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
|
||||||
|
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
|
||||||
|
<span>设置</span>{composerSettingLabel}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<textarea
|
<textarea
|
||||||
ref={requirementTextareaRef}
|
ref={requirementTextareaRef}
|
||||||
value={requirement}
|
value={requirement}
|
||||||
@@ -5135,10 +5140,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
<ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
|
<ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
|
||||||
) : null}
|
) : null}
|
||||||
<div className="ecom-command-toolbar" aria-label="生成设置">
|
<div className="ecom-command-toolbar" aria-label="生成设置">
|
||||||
<div className="ecom-command-option-row">
|
<div className="ecom-command-composer-actions">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`ecom-command-reference ecom-command-reference--inline${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
className={`ecom-command-reference ecom-command-reference--bottom${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
||||||
onClick={() => productInputRef.current?.click()}
|
onClick={() => productInputRef.current?.click()}
|
||||||
onDragEnter={(event) => {
|
onDragEnter={(event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -5156,26 +5161,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
<span aria-hidden="true"><PaperClipOutlined /></span>
|
<span aria-hidden="true"><PaperClipOutlined /></span>
|
||||||
<strong>上传素材</strong>
|
<strong>上传素材</strong>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" className={composerMenu === "mode" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("mode", event)}>
|
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><AppstoreOutlined /></span>
|
|
||||||
{selectedCloneOutput.label}<span>模式</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
|
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
|
|
||||||
<span>平台</span>{platform}
|
|
||||||
</button>
|
|
||||||
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
|
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
|
|
||||||
<span>语种</span>{language}
|
|
||||||
</button>
|
|
||||||
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
|
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
|
|
||||||
<span>比例</span>{formatRatioDisplayValue(ratio)}
|
|
||||||
</button>
|
|
||||||
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
|
|
||||||
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
|
|
||||||
<span>设置</span>{composerSettingLabel}
|
|
||||||
</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}>
|
||||||
|
|||||||
@@ -12970,3 +12970,459 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
fill: currentColor !important;
|
fill: currentColor !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* #/imageWorkbench generated results: remove all visual labels and their reserved space. */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-node-label,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result > span,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid button > span {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) {
|
||||||
|
padding-top: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) .clone-ai-node-drag-handle {
|
||||||
|
height: 100% !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #/imageWorkbench history records: keep hover delete icon centered in the row. */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item {
|
||||||
|
position: relative !important;
|
||||||
|
display: block !important;
|
||||||
|
isolation: isolate !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-main {
|
||||||
|
width: 100% !important;
|
||||||
|
padding-right: 46px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item:hover .ecom-command-history__item-delete,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item.is-active .ecom-command-history__item-delete {
|
||||||
|
grid-column: auto !important;
|
||||||
|
grid-row: auto !important;
|
||||||
|
align-self: auto !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
right: 10px !important;
|
||||||
|
z-index: 4 !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
width: 28px !important;
|
||||||
|
height: 28px !important;
|
||||||
|
min-width: 28px !important;
|
||||||
|
min-height: 28px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
transform: translateY(-50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete .anticon,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete svg {
|
||||||
|
display: block !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #/imageWorkbench composer redesign: mode tabs outside, settings and assets inside. */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
width: min(100%, 760px) !important;
|
||||||
|
margin: 0 auto 12px !important;
|
||||||
|
padding: 4px !important;
|
||||||
|
border: 1px solid rgba(30, 189, 219, 0.11) !important;
|
||||||
|
border-radius: 18px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.64) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 14px 34px rgba(16, 115, 204, 0.055),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
|
||||||
|
backdrop-filter: blur(14px) saturate(1.08) !important;
|
||||||
|
-webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button {
|
||||||
|
--mode-accent: #1073cc;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
gap: 7px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
min-height: 42px !important;
|
||||||
|
padding: 0 11px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 14px !important;
|
||||||
|
background: transparent !important;
|
||||||
|
color: rgba(16, 32, 44, 0.66) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition:
|
||||||
|
background 180ms ease,
|
||||||
|
color 180ms ease,
|
||||||
|
box-shadow 180ms ease,
|
||||||
|
transform 180ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--set) {
|
||||||
|
--mode-accent: #0f8f72;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--detail) {
|
||||||
|
--mode-accent: #7a5af8;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--model) {
|
||||||
|
--mode-accent: #1073cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--video) {
|
||||||
|
--mode-accent: #cc6b14;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--hot) {
|
||||||
|
--mode-accent: #c04468;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button.is-active {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 58%),
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.9)) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.9) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 18%, transparent),
|
||||||
|
0 10px 22px color-mix(in srgb, var(--mode-accent) 10%, transparent) !important;
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon {
|
||||||
|
display: inline-grid !important;
|
||||||
|
width: 24px !important;
|
||||||
|
height: 24px !important;
|
||||||
|
min-width: 24px !important;
|
||||||
|
place-items: center !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 9px !important;
|
||||||
|
background: color-mix(in srgb, var(--mode-accent) 11%, #ffffff) !important;
|
||||||
|
color: var(--mode-accent) !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs strong {
|
||||||
|
min-width: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: 760 !important;
|
||||||
|
letter-spacing: 0 !important;
|
||||||
|
line-height: 1 !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"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: minmax(0, 1fr) !important;
|
||||||
|
grid-auto-rows: auto !important;
|
||||||
|
grid-template-rows: none !important;
|
||||||
|
align-content: start !important;
|
||||||
|
row-gap: 12px !important;
|
||||||
|
min-height: clamp(214px, 17vh, 236px) !important;
|
||||||
|
padding: 18px 22px 16px !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
|
||||||
|
min-height: clamp(256px, 22vh, 286px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
|
||||||
|
grid-column: 1 !important;
|
||||||
|
grid-row: auto !important;
|
||||||
|
display: flex !important;
|
||||||
|
flex-wrap: wrap !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 0 0 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
|
||||||
|
min-width: 0 !important;
|
||||||
|
min-height: 36px !important;
|
||||||
|
padding: 0 11px !important;
|
||||||
|
border: 1px solid rgba(30, 189, 219, 0.12) !important;
|
||||||
|
border-radius: 13px !important;
|
||||||
|
background: rgba(248, 253, 255, 0.72) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.72) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button:hover,
|
||||||
|
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.is-active {
|
||||||
|
border-color: rgba(30, 189, 219, 0.28) !important;
|
||||||
|
background: rgba(241, 251, 254, 0.92) !important;
|
||||||
|
box-shadow: 0 8px 18px rgba(16, 115, 204, 0.055) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
background: rgba(232, 249, 253, 0.78) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover {
|
||||||
|
position: static !important;
|
||||||
|
grid-column: 1 !important;
|
||||||
|
grid-row: auto !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-height: 62px !important;
|
||||||
|
max-height: 72px !important;
|
||||||
|
padding: 8px 2px 10px !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: visible !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
transform: none !important;
|
||||||
|
scrollbar-width: thin !important;
|
||||||
|
scrollbar-color: rgba(16, 115, 204, 0.18) transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb {
|
||||||
|
flex: 0 0 58px !important;
|
||||||
|
width: 58px !important;
|
||||||
|
height: 58px !important;
|
||||||
|
border: 1px solid rgba(30, 189, 219, 0.12) !important;
|
||||||
|
border-radius: 14px !important;
|
||||||
|
background: rgba(246, 251, 253, 0.9) !important;
|
||||||
|
box-shadow: 0 8px 18px rgba(16, 115, 204, 0.06) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb img,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb video {
|
||||||
|
border-radius: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add {
|
||||||
|
flex: 0 0 38px !important;
|
||||||
|
width: 38px !important;
|
||||||
|
height: 38px !important;
|
||||||
|
min-height: 38px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
background: rgba(232, 249, 253, 0.72) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea {
|
||||||
|
grid-column: 1 !important;
|
||||||
|
grid-row: auto !important;
|
||||||
|
min-height: clamp(82px, 9vh, 106px) !important;
|
||||||
|
padding: 2px 0 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
|
||||||
|
min-height: clamp(68px, 7vh, 92px) !important;
|
||||||
|
max-height: 112px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
|
||||||
|
grid-column: 1 !important;
|
||||||
|
grid-row: auto !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 10px 0 0 !important;
|
||||||
|
border-top: 1px solid rgba(30, 189, 219, 0.085) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom {
|
||||||
|
position: static !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
gap: 7px !important;
|
||||||
|
width: auto !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
height: 38px !important;
|
||||||
|
min-height: 38px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 12px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 13px !important;
|
||||||
|
background: rgba(248, 253, 255, 0.78) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.68) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom:hover,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom.is-dragging {
|
||||||
|
background: rgba(232, 249, 253, 0.9) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom > span {
|
||||||
|
display: inline-flex !important;
|
||||||
|
width: 20px !important;
|
||||||
|
min-width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
place-items: center !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 17px !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong {
|
||||||
|
display: inline !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-weight: 720 !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: flex-end !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
|
||||||
|
grid-template-columns: repeat(5, minmax(94px, 1fr)) !important;
|
||||||
|
width: 100% !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overscroll-behavior-x: contain !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
|
||||||
|
grid-template-columns: repeat(5, minmax(88px, 1fr)) !important;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button {
|
||||||
|
min-height: 38px !important;
|
||||||
|
padding-inline: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon {
|
||||||
|
width: 22px !important;
|
||||||
|
height: 22px !important;
|
||||||
|
min-width: 22px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||||
|
min-height: 230px !important;
|
||||||
|
padding: 15px !important;
|
||||||
|
row-gap: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
|
||||||
|
flex: 1 1 calc(50% - 5px) !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||||
|
gap: 7px !important;
|
||||||
|
justify-content: stretch !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
|
||||||
|
display: inline-flex !important;
|
||||||
|
width: auto !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: none !important;
|
||||||
|
height: 42px !important;
|
||||||
|
min-height: 42px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
font-size: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon {
|
||||||
|
display: inline-grid !important;
|
||||||
|
width: 22px !important;
|
||||||
|
height: 22px !important;
|
||||||
|
min-width: 22px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
|
||||||
|
flex-direction: row !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
min-height: 58px !important;
|
||||||
|
height: auto !important;
|
||||||
|
padding-top: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
|
||||||
|
width: auto !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom {
|
||||||
|
width: auto !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
max-width: none !important;
|
||||||
|
height: 38px !important;
|
||||||
|
min-height: 38px !important;
|
||||||
|
padding: 0 12px !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong {
|
||||||
|
display: inline !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user