Merge remote-tracking branch 'origin/main' into fix/ecommerce-ui-polish
# Conflicts: # src/features/ecommerce/EcommercePage.tsx
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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% {
|
||||
|
||||
Reference in New Issue
Block a user