OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Codex/fix project review bugs #11

Merged
stringadmin merged 3 commits from codex/fix-project-review-bugs into main 2026-06-12 09:29:49 +00:00
Conversation 0 Commits 3 Files Changed 11
+832 -101
3 changed files with 832 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f9e55578b3 - Show all commits
src/features/ecommerce/EcommercePage.tsx
+71 -39
View File
@@ -4,6 +4,7 @@
CloudUploadOutlined,
CloseOutlined,
DeleteOutlined,
DownloadOutlined,
EditOutlined,
FireOutlined,
FileImageOutlined,
@@ -38,6 +39,7 @@ import EcommerceSetPanel from "./panels/EcommerceSetPanel";
import EcommerceTryOnPanel from "./panels/EcommerceTryOnPanel";
import EcommerceClonePanel from "./panels/EcommerceClonePanel";
import { ecommerceOssScopes, saveUnifiedEcommerceGenerationRecord, deleteEcommerceGenerationRecord } from "./ecommerceGenerationPersistence";
import { downloadResultAsset } from "../workbench/workbenchDownload";
const smartCutoutColorPresets = [
"#ffffff",
@@ -349,6 +351,14 @@ interface EcommerceHistoryRecord {
replicateLevel: CloneReplicateLevelKey;
}
interface ProductSetPreviewSelection {
src: string;
label: string;
nodeId?: string;
cardId?: string;
removable?: boolean;
}
interface EcommerceImagePromptOptions {
gender?: string;
age?: string;
@@ -1377,7 +1387,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
const [showHostingModal, setShowHostingModal] = useState(false);
const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "detail" | "watermark" | "image-edit" | "translate" | null>(null);
@@ -3836,8 +3846,39 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
lastFailedActionRef.current = () => handleSetGenerate();
};
const openProductSetPreview = (card: { src: string; label: string }) => {
setSelectedProductSetPreview(card);
const openProductSetPreview = (card: { id?: string; src: string; label: string }, options?: { nodeId?: string; removable?: boolean }) => {
setSelectedProductSetPreview({
src: card.src,
label: card.label,
cardId: card.id,
nodeId: options?.nodeId,
removable: Boolean(options?.removable && options.nodeId && card.id),
});
};
const handleDownloadCanvasResult = async (card: { src: string; label: string }) => {
try {
await downloadResultAsset(card.src, card.label || "generated-image", false);
toast.success("已开始下载图片");
} catch (error) {
toast.error(error instanceof Error ? error.message : "下载图片失败");
}
};
const removeCanvasResult = (nodeId: string, cardId: string) => {
setCanvasNodes((current) =>
current
.map((node) => (node.id === nodeId ? { ...node, results: node.results.filter((card) => card.id !== cardId) } : node))
.filter((node) => node.sourceImage || node.results.length > 0),
);
setResults((current) => current.filter((card) => card.id !== cardId));
toast.success("已从当前视图移除");
};
const removeSelectedProductSetPreview = (preview: ProductSetPreviewSelection) => {
if (!preview.nodeId || !preview.cardId) return;
removeCanvasResult(preview.nodeId, preview.cardId);
setSelectedProductSetPreview(null);
};
const handleDetailAiWrite = () => {
@@ -4141,24 +4182,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
setPreviewOffset({ x: 0, y: 0 });
previewOffsetRef.current = { x: 0, y: 0 };
requestAnimationFrame(() => requestAnimationFrame(() => {
const container = previewSurfaceRef.current;
if (!container) return;
const containerRect = container.getBoundingClientRect();
const node = container.querySelector(".clone-ai-canvas-node") as HTMLElement | null;
if (!node) return;
const nodeRect = node.getBoundingClientRect();
const nodeCenterY = nodeRect.top + nodeRect.height / 2 - containerRect.top;
const visibleCenterY = containerRect.height / 2;
const offsetY = visibleCenterY - nodeCenterY;
const nodeCenterX = nodeRect.left + nodeRect.width / 2 - containerRect.left;
const visibleCenterX = containerRect.width / 2;
const offsetX = visibleCenterX - nodeCenterX;
const finalOffset = { x: offsetX, y: offsetY };
setPreviewOffset(finalOffset);
previewOffsetRef.current = finalOffset;
}));
};
const handleNewEcommerceConversation = () => {
@@ -4982,7 +5005,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<div className="clone-ai-flow-arrow" aria-hidden="true" />
<div className="clone-ai-result-grid result-reveal">
{node.results.map((card) => (
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card)}>
<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} />
<span>{card.label}</span>
</button>
@@ -6499,7 +6522,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
return (
<section
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isCloneTool && activeHistoryRecordId ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
data-tool={activeTool}
aria-label={pageLabel}
>
@@ -6623,22 +6646,31 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<CloseOutlined />
</button>
<img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
<strong>{selectedProductSetPreview.label}</strong>
<button
type="button"
className="product-set-preview-download"
onClick={() => {
const link = document.createElement("a");
link.href = selectedProductSetPreview.src;
link.download = `${selectedProductSetPreview.label || "生成结果"}-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
link.remove();
}}
>
<CloudUploadOutlined />
保存本地
</button>
<div className="product-set-preview-footer">
<strong>{selectedProductSetPreview.label}</strong>
<div className="product-set-preview-actions" aria-label="图片操作">
<button
type="button"
className="product-set-preview-action"
onClick={() => {
void handleDownloadCanvasResult(selectedProductSetPreview);
}}
>
<DownloadOutlined />
<span>下载</span>
</button>
{selectedProductSetPreview.removable ? (
<button
type="button"
className="product-set-preview-action product-set-preview-action--danger"
onClick={() => removeSelectedProductSetPreview(selectedProductSetPreview)}
>
<DeleteOutlined />
<span>移除</span>
</button>
) : null}
</div>
</div>
</section>
</div>
) : null}
src/styles/ecommerce-standalone.css
+761 -29
View File
@@ -7279,35 +7279,6 @@
transform: scale(0.96) !important;
}
.ecommerce-standalone .product-set-preview-download {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
min-height: 38px !important;
padding: 0 20px !important;
border: 1px solid rgba(16, 115, 204, 0.14) !important;
border-radius: 10px !important;
color: #1073cc !important;
background: #ffffff !important;
box-shadow: 0 8px 20px rgba(16, 115, 204, 0.06) !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}
.ecommerce-standalone .product-set-preview-download:hover {
color: #ffffff !important;
background: #1073cc !important;
box-shadow: 0 12px 26px rgba(16, 115, 204, 0.18) !important;
transform: translateY(-1px) !important;
}
.ecommerce-standalone .product-set-preview-download:active {
transform: scale(0.96) !important;
}
.ecommerce-standalone .ecom-quick-set-prompt {
position: relative !important;
display: grid !important;
@@ -12228,3 +12199,764 @@ html body #root .ecommerce-standalone.web-shell .ecom-watermark-workspace {
--ecommerce-topbar-height: 62px;
}
}
/* Preview modal actions stay inside the deliberate image inspection moment. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-modal {
gap: 14px !important;
border-color: rgba(30, 189, 219, 0.16) !important;
box-shadow:
0 26px 72px rgba(16, 32, 44, 0.18),
0 8px 24px rgba(16, 115, 204, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
min-width: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer strong {
min-width: 0 !important;
overflow: hidden !important;
color: #10202c !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
flex: 0 0 auto !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 14px !important;
border: 1px solid rgba(30, 189, 219, 0.2) !important;
border-radius: 999px !important;
color: #1073cc !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 251, 253, 0.92)) !important;
box-shadow:
0 8px 18px rgba(16, 115, 204, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
font-weight: 750 !important;
cursor: pointer !important;
transition:
border-color 160ms ease,
color 160ms ease,
background 160ms ease,
transform 160ms ease,
box-shadow 160ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:focus-visible {
border-color: rgba(30, 189, 219, 0.42) !important;
background: #ffffff !important;
outline: none !important;
transform: translateY(-1px) !important;
box-shadow:
0 12px 24px rgba(16, 115, 204, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger {
border-color: rgba(255, 77, 79, 0.16) !important;
color: #d84a4d !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 246, 0.94)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:focus-visible {
border-color: rgba(255, 77, 79, 0.28) !important;
color: #c93639 !important;
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer {
align-items: stretch !important;
flex-direction: column !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions {
justify-content: stretch !important;
width: 100% !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action {
flex: 1 1 0 !important;
}
}
/* History record detail: compact composer becomes a stable summary bar, then expands on click. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail {
--history-detail-workspace-width: calc(100vw - var(--ecom-history-panel-width, 292px));
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact {
position: fixed !important;
top: calc(var(--ecommerce-topbar-height, 66px) + clamp(0px, 0.6vh, 6px)) !important;
left: calc(var(--history-detail-workspace-width) / 2) !important;
width: min(760px, calc(var(--history-detail-workspace-width) - clamp(48px, 8vw, 96px))) !important;
gap: 0 !important;
transform: translateX(-50%) !important;
z-index: 72 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-title {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-rows: minmax(64px, auto) !important;
align-items: center !important;
column-gap: 16px !important;
min-height: clamp(68px, 8.8vh, 82px) !important;
max-height: 86px !important;
padding: clamp(8px, 1.2vh, 10px) 12px clamp(8px, 1.2vh, 10px) 16px !important;
overflow: hidden !important;
border: 1px solid rgba(30, 189, 219, 0.16) !important;
border-radius: 999px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 254, 0.94)),
#feffff !important;
box-shadow:
0 18px 46px rgba(16, 115, 204, 0.1),
0 4px 14px rgba(30, 189, 219, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
cursor: text !important;
backdrop-filter: blur(18px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:focus-within {
border-color: rgba(30, 189, 219, 0.32) !important;
box-shadow:
0 22px 54px rgba(16, 115, 204, 0.12),
0 0 0 4px rgba(30, 189, 219, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-reference:not(.ecom-command-reference--inline) {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: center !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
min-width: 52px !important;
max-width: 160px !important;
min-height: 56px !important;
max-height: 56px !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
flex: 0 0 54px !important;
width: 54px !important;
height: 54px !important;
border-radius: 18px !important;
box-shadow: 0 8px 18px rgba(16, 115, 204, 0.12) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb img,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb video {
border-radius: 18px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb > button {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add {
flex: 0 0 46px !important;
width: 46px !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
border-radius: 50% !important;
color: #10202c !important;
background: rgba(16, 32, 44, 0.045) !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
min-height: 34px !important;
max-height: 38px !important;
height: 38px !important;
padding: 4px 0 0 !important;
overflow: hidden !important;
color: rgba(16, 32, 44, 0.72) !important;
background: transparent !important;
font-size: clamp(17px, 1.35vw, 22px) !important;
font-weight: 650 !important;
line-height: 32px !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
resize: none !important;
opacity: 1 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea::placeholder {
color: rgba(16, 32, 44, 0.48) !important;
opacity: 1 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-toolbar,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar {
grid-column: 3 !important;
grid-row: 1 !important;
align-self: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 56px !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-option-row {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-submit-row {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send {
width: 58px !important;
height: 58px !important;
min-height: 58px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important;
box-shadow:
0 14px 28px rgba(16, 115, 204, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send:hover:not(:disabled) {
transform: translateY(-1px) scale(1.02) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"] {
padding-top: clamp(132px, 18vh, 160px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) {
padding-top: 380px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview-zoom-wrap {
display: flex !important;
justify-content: center !important;
width: 100% !important;
min-width: 100% !important;
transform-origin: center top !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-nodes {
display: flex !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 260px !important;
padding: 22px clamp(20px, 4vw, 48px) 44px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) {
position: relative !important;
top: auto !important;
left: auto !important;
max-width: min(860px, calc(var(--history-detail-workspace-width) - 80px)) !important;
transform: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid {
justify-content: center !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item {
isolation: isolate !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete {
position: absolute !important;
top: 50% !important;
right: 14px !important;
z-index: 4 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(30, 189, 219, 0.16) !important;
border-radius: 12px !important;
color: rgba(16, 32, 44, 0.46) !important;
background: rgba(255, 255, 255, 0.86) !important;
box-shadow:
0 8px 18px rgba(16, 115, 204, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
font-size: 14px !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:focus-visible {
color: #ff4d4f !important;
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(255, 77, 79, 0.2) !important;
outline: none !important;
transform: translateY(-50%) !important;
}
@media (max-width: 900px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail {
--history-detail-workspace-width: 100vw;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact {
left: 50vw !important;
top: calc(var(--ecommerce-topbar-height, 62px) + 2px) !important;
width: min(720px, calc(100vw - 36px)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
column-gap: 10px !important;
padding-inline: 12px 10px !important;
min-height: 70px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover {
max-width: 116px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) {
max-width: calc(100vw - 32px) !important;
flex-wrap: wrap !important;
}
}
/* #/imageWorkbench polish: refine quick action surface and widen inspiration shelves for an immersive first page. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
width: min(100%, 920px) !important;
padding: 7px !important;
gap: 9px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(246, 252, 254, 0.52)),
rgba(255, 255, 255, 0.5) !important;
box-shadow:
0 18px 38px rgba(16, 115, 204, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark {
--quick-accent: #1073cc !important;
--quick-accent-soft: rgba(30, 189, 219, 0.16) !important;
--quick-bg: rgba(245, 252, 254, 0.82) !important;
--quick-text: #163447 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button {
min-height: 56px !important;
border: 1px solid rgba(30, 189, 219, 0.09) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 254, 0.8)) !important;
color: #163447 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 8px 18px rgba(16, 115, 204, 0.035) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span {
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !important;
border-radius: 11px !important;
background:
linear-gradient(180deg, rgba(30, 189, 219, 0.16), rgba(16, 115, 204, 0.08)) !important;
color: #1073cc !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.74),
0 7px 16px rgba(16, 115, 204, 0.08) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board strong {
color: #163447 !important;
font-weight: 650 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible {
border-color: rgba(16, 115, 204, 0.18) !important;
background:
radial-gradient(circle at 16% 20%, rgba(30, 189, 219, 0.2), transparent 42%),
linear-gradient(135deg, #ffffff, rgba(241, 250, 253, 0.92)) !important;
color: #1073cc !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 14px 28px rgba(16, 115, 204, 0.08) !important;
outline: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span {
background:
linear-gradient(180deg, rgba(30, 189, 219, 0.22), rgba(16, 115, 204, 0.12)) !important;
color: #0d65b4 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) {
width: min(2360px, calc(100vw - clamp(48px, 4.2vw, 108px))) !important;
max-width: none !important;
padding-inline: clamp(12px, 1.2vw, 22px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab {
width: 100% !important;
max-width: none !important;
padding: 8px 0 30px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab::before {
inset: 20px 0 2px !important;
border-radius: 28px !important;
background:
linear-gradient(90deg, rgba(245, 252, 254, 0.18), rgba(255, 255, 255, 0.78) 10%, rgba(255, 255, 255, 0.78) 90%, rgba(245, 252, 254, 0.18)),
linear-gradient(180deg, rgba(245, 252, 254, 0.58), rgba(255, 255, 255, 0.14)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs {
padding-inline: clamp(12px, 1.2vw, 22px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row {
grid-template-columns: clamp(134px, 7vw, 174px) minmax(0, 1fr) !important;
gap: clamp(16px, 1.15vw, 24px) !important;
padding: clamp(14px, 1vw, 20px) clamp(14px, 1.05vw, 22px) !important;
border-color: rgba(16, 115, 204, 0.07) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(247, 252, 254, 0.72)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__meta {
min-width: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip {
grid-auto-columns: clamp(320px, 18.4vw, 470px) !important;
gap: clamp(12px, 0.9vw, 18px) !important;
padding-right: clamp(18px, 1.6vw, 34px) !important;
scroll-padding-inline: clamp(18px, 1.6vw, 34px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-strip {
grid-auto-columns: clamp(420px, 24vw, 620px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--listing .ecom-inspiration-strip {
grid-auto-columns: clamp(300px, 16.2vw, 420px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--video .ecom-inspiration-strip {
grid-auto-columns: clamp(360px, 21vw, 540px) !important;
}
@media (max-width: 900px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) {
width: min(100%, calc(100vw - 24px)) !important;
padding-inline: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 12px !important;
padding: 14px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-strip,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--listing .ecom-inspiration-strip,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--video .ecom-inspiration-strip {
grid-auto-columns: minmax(248px, 76vw) !important;
padding-right: 14px !important;
}
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
width: min(100%, 420px) !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button {
padding-inline: 10px !important;
}
}
/* #/imageWorkbench compact composer centering: when history is collapsed, center on the visible canvas. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed {
--history-detail-workspace-width: 100vw !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact {
left: 50vw !important;
width: min(760px, calc(100vw - clamp(32px, 6vw, 96px))) !important;
transform: translateX(-50%) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
width: 100% !important;
margin-inline: auto !important;
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact {
top: calc(var(--ecommerce-topbar-height, 62px) + 8px) !important;
width: min(100vw - 22px, 560px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
grid-template-columns: auto minmax(0, 1fr) auto !important;
column-gap: 8px !important;
min-height: 62px !important;
max-height: 72px !important;
padding: 8px 9px 8px 10px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover {
min-width: 42px !important;
max-width: 94px !important;
min-height: 46px !important;
max-height: 46px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb {
flex-basis: 44px !important;
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add {
flex-basis: 34px !important;
width: 34px !important;
height: 34px !important;
min-height: 34px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
min-width: 0 !important;
max-height: 32px !important;
font-size: 15px !important;
line-height: 30px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send {
width: 48px !important;
height: 48px !important;
min-height: 48px !important;
}
}
/* #/imageWorkbench quick actions final tone: restore category colors and align icon tones with labels. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail {
--quick-accent: #7a5af8 !important;
--quick-bg: #f1edff !important;
--quick-text: #2f245d !important;
--quick-icon: #5f46d9 !important;
--quick-icon-bg: rgba(122, 90, 248, 0.13) !important;
--quick-border: rgba(122, 90, 248, 0.12) !important;
--quick-shadow: rgba(122, 90, 248, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit {
--quick-accent: #cc6b14 !important;
--quick-bg: #fff2e5 !important;
--quick-text: #4e2c11 !important;
--quick-icon: #a95616 !important;
--quick-icon-bg: rgba(204, 107, 20, 0.13) !important;
--quick-border: rgba(204, 107, 20, 0.12) !important;
--quick-shadow: rgba(204, 107, 20, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout {
--quick-accent: #1073cc !important;
--quick-bg: #eaf5ff !important;
--quick-text: #123454 !important;
--quick-icon: #0f66b3 !important;
--quick-icon-bg: rgba(16, 115, 204, 0.13) !important;
--quick-border: rgba(16, 115, 204, 0.12) !important;
--quick-shadow: rgba(16, 115, 204, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark {
--quick-accent: #c04468 !important;
--quick-bg: #fff0f5 !important;
--quick-text: #542234 !important;
--quick-icon: #a63a58 !important;
--quick-icon-bg: rgba(192, 68, 104, 0.13) !important;
--quick-border: rgba(192, 68, 104, 0.12) !important;
--quick-shadow: rgba(192, 68, 104, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button {
border-color: var(--quick-border) !important;
background:
radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--quick-accent) 15%, transparent), transparent 40%),
linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--quick-bg)) !important;
color: var(--quick-text) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 8px 18px rgba(16, 32, 44, 0.032) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span {
background:
linear-gradient(180deg, color-mix(in srgb, var(--quick-icon-bg) 78%, #ffffff), rgba(255, 255, 255, 0.62)) !important;
color: var(--quick-icon) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 7px 16px var(--quick-shadow) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board strong {
color: var(--quick-text) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible {
border-color: color-mix(in srgb, var(--quick-accent) 22%, transparent) !important;
background:
radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--quick-accent) 24%, transparent), transparent 42%),
linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--quick-bg) 88%, #ffffff)) !important;
color: var(--quick-icon) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 14px 28px var(--quick-shadow) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span {
background:
linear-gradient(180deg, color-mix(in srgb, var(--quick-accent) 18%, #ffffff), color-mix(in srgb, var(--quick-bg) 82%, #ffffff)) !important;
color: var(--quick-icon) !important;
}
/* #/imageWorkbench quick actions: remove visible borders while keeping the category color system. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span {
border: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible {
border: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span {
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
}
/* #/imageWorkbench quick actions: soften each action so the tones blend into the page. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button {
background:
radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--quick-accent) 10%, transparent), transparent 44%),
linear-gradient(135deg, color-mix(in srgb, var(--quick-bg) 86%, #ffffff), color-mix(in srgb, var(--quick-bg) 96%, #ffffff)) !important;
box-shadow: none !important;
color: var(--quick-text) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span {
background: transparent !important;
color: var(--quick-text) !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span svg {
color: inherit !important;
fill: currentColor !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible {
background:
radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--quick-accent) 14%, transparent), transparent 44%),
linear-gradient(135deg, color-mix(in srgb, var(--quick-bg) 92%, #ffffff), color-mix(in srgb, var(--quick-bg) 98%, #ffffff)) !important;
box-shadow: none !important;
color: var(--quick-text) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span {
background: transparent !important;
color: var(--quick-text) !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span svg,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span svg {
color: inherit !important;
fill: currentColor !important;
}
src/styles/pages/ecommerce.css
-33
View File
@@ -7868,39 +7868,6 @@
transform: scale(0.94);
}
.product-set-preview-download {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 20px;
border: 1px solid rgba(16, 115, 204, 0.14);
border-radius: 10px;
color: #1073cc;
background: #ffffff;
box-shadow: 0 8px 20px rgba(16, 115, 204, 0.06);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
transform 180ms ease,
color 180ms ease,
background 180ms ease,
box-shadow 180ms ease;
}
.product-set-preview-download:hover {
color: #ffffff;
background: #1073cc;
box-shadow: 0 12px 26px rgba(16, 115, 204, 0.18);
transform: translateY(-1px);
}
.product-set-preview-download:active {
transform: scale(0.96);
}
@keyframes product-set-arrow-pulse {
0%,
100% {