feat: add hot video page and enhance smart cutout editor
- Add 爆款视频 (hot video) page with platform, ratio, quality, duration settings - Add AI video planning workspace integration - Update smart cutout size options with precise output dimensions (295*413, 800*800, etc.) - Add compare (对比) feature for before/after cutout preview - Enhance smart cutout tool UI with size labels and improved layout - Add hot video page styles and smart cutout editor refinements
This commit is contained in:
Codex
@@ -81,12 +81,12 @@ const smartCutoutColorPresets = [
|
||||
const smartCutoutSizeOptions = [
|
||||
{ key: "original", label: "原尺寸", icon: "image", frameWidth: "min(520px, 78%)", frameAspect: "auto", imageMaxWidth: "78%", imageMaxHeight: "310px" },
|
||||
{ key: "trim", label: "裁剪到边缘", icon: "crop", frameWidth: "min(420px, 70%)", frameAspect: "auto", imageMaxWidth: "92%", imageMaxHeight: "360px" },
|
||||
{ key: "taobao-1-1", label: "淘宝1:1主图", icon: "shop", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
{ key: "taobao-3-4", label: "淘宝3:4主图", icon: "shop", frameWidth: "min(330px, 56%)", frameAspect: "3 / 4", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
{ key: "pdd-main", label: "拼多多主图", icon: "pdd", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
{ key: "xiaohongshu-cover", label: "小红书封面", icon: "text", frameWidth: "min(330px, 56%)", frameAspect: "3 / 4", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
{ key: "one-inch", label: "一寸头像", icon: "portrait", frameWidth: "min(290px, 50%)", frameAspect: "25 / 35", imageMaxWidth: "86%", imageMaxHeight: "86%" },
|
||||
{ key: "two-inch", label: "二寸头像", icon: "portrait", frameWidth: "min(320px, 54%)", frameAspect: "35 / 49", imageMaxWidth: "86%", imageMaxHeight: "86%" },
|
||||
{ key: "one-inch", label: "一寸头像", sizeLabel: "295*413", icon: "portrait", frameWidth: "min(290px, 50%)", frameAspect: "295 / 413", imageMaxWidth: "86%", imageMaxHeight: "86%", outputWidth: 295, outputHeight: 413 },
|
||||
{ key: "two-inch", label: "二寸头像", sizeLabel: "413*579", icon: "portrait", frameWidth: "min(320px, 54%)", frameAspect: "413 / 579", imageMaxWidth: "86%", imageMaxHeight: "86%", outputWidth: 413, outputHeight: 579 },
|
||||
{ key: "taobao-1-1", label: "淘宝1:1主图", sizeLabel: "800*800", icon: "shop", frameWidth: "min(430px, 72%)", frameAspect: "800 / 800", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 800, outputHeight: 800 },
|
||||
{ key: "taobao-3-4", label: "淘宝3:4主图", sizeLabel: "750*1000", icon: "shop", frameWidth: "min(330px, 56%)", frameAspect: "750 / 1000", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 750, outputHeight: 1000 },
|
||||
{ key: "pdd-main", label: "拼多多主图", sizeLabel: "800*800", icon: "pdd", frameWidth: "min(430px, 72%)", frameAspect: "800 / 800", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 800, outputHeight: 800 },
|
||||
{ key: "xiaohongshu-cover", label: "小红书封面", sizeLabel: "1242*1660", icon: "text", frameWidth: "min(330px, 56%)", frameAspect: "1242 / 1660", imageMaxWidth: "82%", imageMaxHeight: "82%", outputWidth: 1242, outputHeight: 1660 },
|
||||
{ key: "ratio-1-1", label: "1:1", icon: "square", frameWidth: "min(430px, 72%)", frameAspect: "1 / 1", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
{ key: "ratio-3-2", label: "3:2", icon: "landscape", frameWidth: "min(520px, 78%)", frameAspect: "3 / 2", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
{ key: "ratio-2-3", label: "2:3", icon: "portrait-ratio", frameWidth: "min(330px, 56%)", frameAspect: "2 / 3", imageMaxWidth: "82%", imageMaxHeight: "82%" },
|
||||
@@ -97,6 +97,7 @@ const smartCutoutSizeOptions = [
|
||||
] as const;
|
||||
|
||||
type SmartCutoutSizeKey = (typeof smartCutoutSizeOptions)[number]["key"];
|
||||
type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string };
|
||||
|
||||
const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
|
||||
|
||||
@@ -1214,15 +1215,16 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
|
||||
const [showHostingModal, setShowHostingModal] = useState(false);
|
||||
const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
|
||||
const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "set" | "detail" | "watermark" | "image-edit" | null>(null);
|
||||
const [smartCutoutImage, setSmartCutoutImage] = useState<{ src: string; name: string } | null>(null);
|
||||
const [smartCutoutBatchImages, setSmartCutoutBatchImages] = useState<{ src: string; name: string }[]>([]);
|
||||
const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "set" | "detail" | "watermark" | "image-edit" | "hot-video" | null>(null);
|
||||
const [smartCutoutImage, setSmartCutoutImage] = useState<SmartCutoutImageItem | null>(null);
|
||||
const [smartCutoutBatchImages, setSmartCutoutBatchImages] = useState<SmartCutoutImageItem[]>([]);
|
||||
const [smartCutoutBackgroundColor, setSmartCutoutBackgroundColor] = useState("#ffffff");
|
||||
const [smartCutoutBackgroundAlpha, setSmartCutoutBackgroundAlpha] = useState(100);
|
||||
const [smartCutoutHexDraft, setSmartCutoutHexDraft] = useState("#ffffff");
|
||||
const [isSmartCutoutPaletteOpen, setIsSmartCutoutPaletteOpen] = useState(false);
|
||||
const [smartCutoutSizeKey, setSmartCutoutSizeKey] = useState<SmartCutoutSizeKey>("original");
|
||||
const [isSmartCutoutDragging, setIsSmartCutoutDragging] = useState(false);
|
||||
const [isSmartCutoutComparing, setIsSmartCutoutComparing] = useState(false);
|
||||
const [isSmartCutoutTransitioning, setIsSmartCutoutTransitioning] = useState(false);
|
||||
const [smartCutoutTransitionMessage, setSmartCutoutTransitionMessage] = useState({
|
||||
title: "正在切换页面",
|
||||
@@ -1656,8 +1658,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
if (files.length) void addSetImages(files);
|
||||
};
|
||||
|
||||
const revokeSmartCutoutItems = (items: { src: string }[]) => {
|
||||
items.forEach((item) => URL.revokeObjectURL(item.src));
|
||||
const revokeSmartCutoutItem = (item: SmartCutoutImageItem | null) => {
|
||||
if (!item) return;
|
||||
URL.revokeObjectURL(item.src);
|
||||
if (item.originalSrc && item.originalSrc !== item.src) URL.revokeObjectURL(item.originalSrc);
|
||||
};
|
||||
|
||||
const revokeSmartCutoutItems = (items: SmartCutoutImageItem[]) => {
|
||||
items.forEach(revokeSmartCutoutItem);
|
||||
};
|
||||
|
||||
const clearSmartCutoutTransition = () => {
|
||||
@@ -1695,9 +1703,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return [];
|
||||
});
|
||||
setSmartCutoutImage((current) => {
|
||||
if (current?.src) URL.revokeObjectURL(current.src);
|
||||
revokeSmartCutoutItem(current);
|
||||
return null;
|
||||
});
|
||||
setIsSmartCutoutComparing(false);
|
||||
setComposerMenu(null);
|
||||
};
|
||||
|
||||
@@ -2050,6 +2059,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
if (!selectedDetailModules.length) setSelectedDetailModules(defaultCloneDetailModuleIds);
|
||||
};
|
||||
|
||||
const openHotVideoPage = () => {
|
||||
clearSmartCutoutTransition();
|
||||
setActiveQuickTool("hot-video");
|
||||
setComposerMenu(null);
|
||||
setIsCloneSettingsCollapsed(true);
|
||||
setIsCommandHistoryCollapsed(true);
|
||||
};
|
||||
|
||||
const closeHotVideoPage = () => {
|
||||
setActiveQuickTool(null);
|
||||
setComposerMenu(null);
|
||||
setIsCloneSettingsCollapsed(false);
|
||||
setIsCommandHistoryCollapsed(false);
|
||||
};
|
||||
|
||||
const closeSmartCutoutTool = () => {
|
||||
runSmartCutoutPageTransition(
|
||||
{
|
||||
@@ -2062,9 +2086,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return [];
|
||||
});
|
||||
setSmartCutoutImage((current) => {
|
||||
if (current?.src) URL.revokeObjectURL(current.src);
|
||||
revokeSmartCutoutItem(current);
|
||||
return null;
|
||||
});
|
||||
setIsSmartCutoutComparing(false);
|
||||
setActiveQuickTool(null);
|
||||
setComposerMenu(null);
|
||||
},
|
||||
@@ -2087,9 +2112,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return [];
|
||||
});
|
||||
setSmartCutoutImage((current) => {
|
||||
if (current?.src) URL.revokeObjectURL(current.src);
|
||||
revokeSmartCutoutItem(current);
|
||||
return null;
|
||||
});
|
||||
setIsSmartCutoutComparing(false);
|
||||
},
|
||||
);
|
||||
};
|
||||
@@ -2106,10 +2132,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return [];
|
||||
});
|
||||
setSmartCutoutImage((current) => {
|
||||
if (current?.src) URL.revokeObjectURL(current.src);
|
||||
revokeSmartCutoutItem(current);
|
||||
return null;
|
||||
});
|
||||
const nextImages = imageFiles.map((file) => ({ src: URL.createObjectURL(file), name: file.name }));
|
||||
setIsSmartCutoutComparing(false);
|
||||
const nextImages = imageFiles.map((file) => {
|
||||
const originalSrc = URL.createObjectURL(file);
|
||||
return { src: originalSrc, originalSrc, name: file.name };
|
||||
});
|
||||
smartCutoutPendingUrlsRef.current = nextImages.map((item) => item.src);
|
||||
setActiveQuickTool("cutout");
|
||||
setSmartCutoutSizeKey("original");
|
||||
@@ -2154,17 +2184,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
[smartCutoutSizeKey],
|
||||
);
|
||||
|
||||
const previewSmartCutoutSize = isSmartCutoutComparing ? smartCutoutSizeOptions[0] : selectedSmartCutoutSize;
|
||||
const previewSmartCutoutSizeKey = isSmartCutoutComparing ? "original" : smartCutoutSizeKey;
|
||||
const previewSmartCutoutImageSrc = isSmartCutoutComparing ? smartCutoutImage?.originalSrc ?? smartCutoutImage?.src : smartCutoutImage?.src;
|
||||
|
||||
const smartCutoutFrameStyle = useMemo<CSSProperties>(
|
||||
() => ({
|
||||
"--smart-cutout-bg": smartCutoutBackgroundValue,
|
||||
"--smart-cutout-frame-width": selectedSmartCutoutSize.frameWidth,
|
||||
"--smart-cutout-frame-aspect": selectedSmartCutoutSize.frameAspect,
|
||||
"--smart-cutout-image-max-width": selectedSmartCutoutSize.imageMaxWidth,
|
||||
"--smart-cutout-image-max-height": selectedSmartCutoutSize.imageMaxHeight,
|
||||
"--smart-cutout-frame-width": previewSmartCutoutSize.frameWidth,
|
||||
"--smart-cutout-frame-aspect": previewSmartCutoutSize.frameAspect,
|
||||
"--smart-cutout-image-max-width": previewSmartCutoutSize.imageMaxWidth,
|
||||
"--smart-cutout-image-max-height": previewSmartCutoutSize.imageMaxHeight,
|
||||
} as CSSProperties),
|
||||
[selectedSmartCutoutSize, smartCutoutBackgroundValue],
|
||||
[previewSmartCutoutSize, smartCutoutBackgroundValue],
|
||||
);
|
||||
|
||||
const showSmartCutoutOriginalCompare = (event: ReactPointerEvent<HTMLButtonElement>) => {
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
setIsSmartCutoutComparing(true);
|
||||
};
|
||||
|
||||
const hideSmartCutoutOriginalCompare = () => {
|
||||
setIsSmartCutoutComparing(false);
|
||||
};
|
||||
|
||||
const applySmartCutoutHsv = (h: number, s: number, v: number) => {
|
||||
const rgb = hsvToRgb(h, s, v);
|
||||
setSmartCutoutBackgroundColor(rgbToHex(rgb.r, rgb.g, rgb.b));
|
||||
@@ -2221,9 +2264,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const aspect = parseSmartCutoutAspect(selectedSmartCutoutSize.frameAspect);
|
||||
const naturalWidth = Math.max(1, image.naturalWidth || image.width || 1200);
|
||||
const naturalHeight = Math.max(1, image.naturalHeight || image.height || 900);
|
||||
const outputWidth = "outputWidth" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputWidth : undefined;
|
||||
const outputHeight = "outputHeight" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputHeight : undefined;
|
||||
let canvasWidth = naturalWidth;
|
||||
let canvasHeight = naturalHeight;
|
||||
if (aspect) {
|
||||
if (outputWidth && outputHeight) {
|
||||
canvasWidth = outputWidth;
|
||||
canvasHeight = outputHeight;
|
||||
} else if (aspect) {
|
||||
const longSide = 1600;
|
||||
if (aspect >= 1) {
|
||||
canvasWidth = longSide;
|
||||
@@ -3413,6 +3461,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const isQuickDetailTool = isCloneTool && activeQuickTool === "detail";
|
||||
const isWatermarkTool = isCloneTool && activeQuickTool === "watermark";
|
||||
const isImageEditTool = isCloneTool && activeQuickTool === "image-edit";
|
||||
const isHotVideoTool = isCloneTool && activeQuickTool === "hot-video";
|
||||
const pageLabel = isSetTool ? "鍟嗗搧濂楀浘" : isDetail ? "A+/璇︽儏椤?" : isTryOn ? "AI鏈嶉グ绌挎埓" : activeToolMeta?.label || "鍟嗗搧宸ュ叿";
|
||||
const setPrimaryLabel =
|
||||
setImages.length === 0
|
||||
@@ -4464,7 +4513,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
{ label: "变清晰", icon: <FileImageOutlined /> },
|
||||
{ label: "AI消除", icon: <SettingOutlined /> },
|
||||
{ label: "证件照", icon: <SkinOutlined /> },
|
||||
{ label: "爆款视频", icon: <CloudUploadOutlined /> },
|
||||
{ label: "爆款视频", icon: <CloudUploadOutlined />, onClick: openHotVideoPage },
|
||||
{ label: "拼图", icon: <TableOutlined /> },
|
||||
].map((item) => (
|
||||
<button
|
||||
@@ -4560,31 +4609,48 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<section className="ecom-smart-editor">
|
||||
<div className="ecom-smart-editor__workspace">
|
||||
<div className="ecom-smart-editor__canvas">
|
||||
<div className={`ecom-smart-editor__checker is-size-${smartCutoutSizeKey}`} style={smartCutoutFrameStyle}>
|
||||
<div className={`ecom-smart-editor__checker is-size-${previewSmartCutoutSizeKey}`} style={smartCutoutFrameStyle}>
|
||||
<div className="ecom-smart-editor__background-layer" aria-hidden="true" />
|
||||
<img src={smartCutoutImage.src} alt={smartCutoutImage.name} />
|
||||
<img src={previewSmartCutoutImageSrc ?? smartCutoutImage.src} alt={smartCutoutImage.name} />
|
||||
</div>
|
||||
<div className="ecom-smart-editor__canvas-actions">
|
||||
<button type="button">对比</button>
|
||||
<button type="button">编辑图片</button>
|
||||
<button
|
||||
type="button"
|
||||
onPointerDown={showSmartCutoutOriginalCompare}
|
||||
onPointerUp={hideSmartCutoutOriginalCompare}
|
||||
onPointerCancel={hideSmartCutoutOriginalCompare}
|
||||
onBlur={hideSmartCutoutOriginalCompare}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === " " || event.key === "Enter") setIsSmartCutoutComparing(true);
|
||||
}}
|
||||
onKeyUp={hideSmartCutoutOriginalCompare}
|
||||
>
|
||||
对比
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ecom-smart-editor__tools-shell">
|
||||
<strong className="ecom-smart-editor__tools-title">功能</strong>
|
||||
<button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(-1)} aria-label="查看上一组尺寸">
|
||||
‹
|
||||
</button>
|
||||
<div className="ecom-smart-editor__tools" ref={smartCutoutToolsRef}>
|
||||
{smartCutoutSizeOptions.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
className={smartCutoutSizeKey === item.key ? "is-active" : ""}
|
||||
onClick={() => setSmartCutoutSizeKey(item.key)}
|
||||
aria-pressed={smartCutoutSizeKey === item.key}
|
||||
>
|
||||
<span className={`ecom-smart-editor__tool-icon ecom-smart-editor__tool-icon--${item.icon}`} aria-hidden="true" />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
<div className="ecom-smart-editor__tool-item" key={item.key}>
|
||||
<button
|
||||
type="button"
|
||||
className={smartCutoutSizeKey === item.key ? "is-active" : ""}
|
||||
onClick={() => setSmartCutoutSizeKey(item.key)}
|
||||
aria-label={`${item.label}${"sizeLabel" in item ? ` ${item.sizeLabel}` : ""}`}
|
||||
aria-pressed={smartCutoutSizeKey === item.key}
|
||||
>
|
||||
<span className={`ecom-smart-editor__tool-icon ecom-smart-editor__tool-icon--${item.icon}`} aria-hidden="true" />
|
||||
</button>
|
||||
<span className="ecom-smart-editor__tool-text">
|
||||
<span>{item.label}</span>
|
||||
{"sizeLabel" in item ? <span>{item.sizeLabel}</span> : null}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(1)} aria-label="查看更多尺寸">
|
||||
@@ -5151,6 +5217,170 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</div>
|
||||
);
|
||||
|
||||
const hotVideoPreview = (
|
||||
<main className="ecom-hot-video-page" aria-label="爆款视频">
|
||||
<nav className="ecom-hot-video-nav">
|
||||
<button type="button" className="ecom-hot-video-back" onClick={closeHotVideoPage}>
|
||||
‹ 返回首页
|
||||
</button>
|
||||
<div className="ecom-hot-video-nav-title">
|
||||
<h1>爆款视频</h1>
|
||||
<span>AI智能策划 · 一键生成电商短视频</span>
|
||||
</div>
|
||||
<div className="ecom-hot-video-nav-meta">
|
||||
<span>{platform} / {formatRatioDisplayValue(ratio)} / {cloneVideoDuration}秒 / {cloneVideoQuality === "standard" ? "720P" : "1080P"}</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="ecom-hot-video-body">
|
||||
<aside className="ecom-hot-video-settings" aria-label="视频设置">
|
||||
<section className="ecom-hot-video-section">
|
||||
<strong>上传商品图</strong>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`ecom-hot-video-upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
|
||||
onClick={() => quickProductInputRef.current?.click()}
|
||||
onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") quickProductInputRef.current?.click(); }}
|
||||
onDragOver={(event) => { event.preventDefault(); setIsProductUploadDragging(true); }}
|
||||
onDragLeave={(event) => { event.preventDefault(); setIsProductUploadDragging(false); }}
|
||||
onDrop={handleProductDrop}
|
||||
>
|
||||
<CloudUploadOutlined />
|
||||
<span>拖拽或点击上传商品图片</span>
|
||||
<em>支持 JPG / PNG / WebP，建议清晰白底图</em>
|
||||
{productImages.length > 0 ? (
|
||||
<div className="ecom-hot-video-upload-thumbs">
|
||||
{productImages.map((img) => (
|
||||
<figure key={img.id}>
|
||||
<img src={img.src} alt={img.name} />
|
||||
<button
|
||||
type="button"
|
||||
aria-label="删除"
|
||||
onClick={(event) => { event.stopPropagation(); removeProductImage(img.id); }}
|
||||
>×</button>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<input
|
||||
ref={quickProductInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
className="ecom-command-hidden-file"
|
||||
onChange={handleProductUpload}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="ecom-hot-video-section">
|
||||
<strong>商品描述</strong>
|
||||
<textarea
|
||||
className="ecom-hot-video-textarea"
|
||||
placeholder="描述你的商品特点、卖点、使用场景等，帮助AI更好地策划视频内容..."
|
||||
rows={4}
|
||||
value={requirement}
|
||||
onChange={(event) => setRequirement(event.target.value)}
|
||||
maxLength={500}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="ecom-hot-video-section">
|
||||
<strong>电商平台</strong>
|
||||
<div className="ecom-hot-video-options">
|
||||
{platformOptions.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
className={platform === option ? "is-active" : ""}
|
||||
onClick={() => setPlatform(option)}
|
||||
>
|
||||
{renderPlatformLogo(option)}
|
||||
<span>{option}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="ecom-hot-video-section">
|
||||
<strong>视频比例</strong>
|
||||
<div className="ecom-hot-video-options ecom-hot-video-options--ratio">
|
||||
{cloneRatioOptions.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
className={ratio === option ? "is-active" : ""}
|
||||
onClick={() => setRatio(option)}
|
||||
>
|
||||
{formatRatioDisplayValue(option)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="ecom-hot-video-section">
|
||||
<strong>视频质量</strong>
|
||||
<div className="ecom-hot-video-options">
|
||||
{cloneVideoQualityOptions.map((option) => (
|
||||
<button
|
||||
key={option.key}
|
||||
type="button"
|
||||
className={cloneVideoQuality === option.key ? "is-active" : ""}
|
||||
onClick={() => setCloneVideoQuality(option.key)}
|
||||
>
|
||||
<strong>{option.label}</strong>
|
||||
<span>{option.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="ecom-hot-video-section">
|
||||
<strong>视频时长 · {cloneVideoDuration}秒</strong>
|
||||
<input
|
||||
type="range"
|
||||
className="ecom-hot-video-range"
|
||||
min={cloneVideoDurationMin}
|
||||
max={cloneVideoDurationMax}
|
||||
step={5}
|
||||
value={cloneVideoDuration}
|
||||
onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))}
|
||||
style={cloneVideoDurationStyle}
|
||||
/>
|
||||
<div className="ecom-hot-video-range-labels">
|
||||
<span>{cloneVideoDurationMin}秒</span>
|
||||
<span>{cloneVideoDurationMax}秒</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="ecom-hot-video-start"
|
||||
disabled={!productImages.length && !requirement.trim()}
|
||||
onClick={() => setVideoPlanTrigger((prev) => prev + 1)}
|
||||
>
|
||||
一键策划
|
||||
</button>
|
||||
</aside>
|
||||
<section className="ecom-hot-video-workspace">
|
||||
<EcommerceVideoWorkspace
|
||||
isAuthenticated={isAuthenticated}
|
||||
productImageDataUrls={ecommerceVideoImageDataUrls}
|
||||
productImageFiles={ecommerceVideoImageFiles}
|
||||
requirement={requirement}
|
||||
platform={platform}
|
||||
aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
|
||||
durationSeconds={cloneVideoDuration}
|
||||
resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
|
||||
onRequestLogin={() => (isAuthenticated ? undefined : requestLogin())}
|
||||
onOpenHistory={() => setVideoHistoryVisible(true)}
|
||||
triggerPlan={videoPlanTrigger}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
const quickProductSetPreview = (
|
||||
<main className={`ecom-quick-set-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
|
||||
<div className="ecom-quick-set-body">
|
||||
@@ -5587,20 +5817,22 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
? quickProductSetPreview
|
||||
: isQuickDetailTool
|
||||
? quickDetailPreview
|
||||
: cloneOutput === "video-outfit" && results.length > 0 && results[0].type === "video"
|
||||
? (
|
||||
<main className="product-clone-preview product-clone-preview--video-outfit" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div style={{ maxWidth: "100%", maxHeight: "100%" }}>
|
||||
<video src={results[0].src} controls style={{ maxWidth: "100%", maxHeight: "70vh", borderRadius: "12px" }} />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
: clonePreview
|
||||
: isHotVideoTool
|
||||
? hotVideoPreview
|
||||
: cloneOutput === "video-outfit" && results.length > 0 && results[0].type === "video"
|
||||
? (
|
||||
<main className="product-clone-preview product-clone-preview--video-outfit" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<div style={{ maxWidth: "100%", maxHeight: "100%" }}>
|
||||
<video src={results[0].src} controls style={{ maxWidth: "100%", maxHeight: "70vh", borderRadius: "12px" }} />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
: clonePreview
|
||||
: placeholderPreview;
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
|
||||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
|
||||
data-tool={activeTool}
|
||||
aria-label={pageLabel}
|
||||
>
|
||||
@@ -5624,7 +5856,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
{isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCloneTool ? clonePanel : placeholderPanel}
|
||||
</aside>
|
||||
|
||||
{isCloneTool && !isSmartCutoutTool && !isQuickSetTool && !isQuickDetailTool && !isWatermarkTool && !isImageEditTool ? (
|
||||
{isCloneTool && !isSmartCutoutTool && !isQuickSetTool && !isQuickDetailTool && !isWatermarkTool && !isImageEditTool && !isHotVideoTool ? (
|
||||
<button
|
||||
type="button"
|
||||
className="clone-ai-settings-toggle"
|
||||
|
||||
@@ -4123,6 +4123,863 @@
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Page (爆款视频) ──────────────────────── */
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page {
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
/* ── Match the homepage dark-green background ──── */
|
||||
background:
|
||||
radial-gradient(circle at 72% 12%, rgba(0, 255, 136, 0.045), transparent 31%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
|
||||
#05080d !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-shell {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-rail,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .product-clone-panel,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .clone-ai-settings-toggle,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-video-page .ecom-command-history {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-hot-video-page {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto minmax(0, 1fr) !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-height: 0 !important;
|
||||
background: transparent !important;
|
||||
color: var(--ecm-text, #eef4f0) !important;
|
||||
font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif) !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Nav — matches the homepage topbar ── */
|
||||
.ecom-hot-video-nav {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 24px !important;
|
||||
padding: 10px clamp(16px, 3vw, 32px) !important;
|
||||
min-height: 64px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(5, 8, 13, 0.82) !important;
|
||||
backdrop-filter: blur(18px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-back {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
min-height: 36px !important;
|
||||
padding: 0 13px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14) !important;
|
||||
border-radius: 8px !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #f7faf8 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 180ms ease, background 180ms ease !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-back:hover {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-title {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-title h1 {
|
||||
margin: 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #f7faf8 !important;
|
||||
letter-spacing: 0.01em !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-title span {
|
||||
font-size: 13px !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-nav-meta {
|
||||
margin-left: auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
padding: 6px 14px !important;
|
||||
border-radius: 8px !important;
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
font-size: 13px !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Body ─────────────────────────────────── */
|
||||
.ecom-hot-video-body {
|
||||
display: grid !important;
|
||||
grid-template-columns: 360px minmax(0, 1fr) !important;
|
||||
gap: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Settings Panel — matches the homepage popover (white bg, cyan border) ── */
|
||||
.ecom-hot-video-settings {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
padding: 20px !important;
|
||||
border-right: 1px solid rgba(30, 189, 219, 0.22) !important;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.06), transparent 12rem),
|
||||
#fbfdfe !important;
|
||||
box-shadow: 0 18px 46px rgba(20, 80, 100, 0.08) !important;
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-section {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-section > strong {
|
||||
display: block !important;
|
||||
margin-bottom: 10px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #6b7c88 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.06em !important;
|
||||
}
|
||||
|
||||
/* Upload area — matches the popover card style */
|
||||
.ecom-hot-video-upload {
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
min-height: 118px !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
padding: 20px !important;
|
||||
border: 1.5px dashed rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 14px !important;
|
||||
background: #f3f8fa !important;
|
||||
color: #10202c !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload::before {
|
||||
display: grid !important;
|
||||
width: 38px !important;
|
||||
height: 38px !important;
|
||||
place-items: center !important;
|
||||
margin-bottom: 8px !important;
|
||||
flex-shrink: 0 !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.28) !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(30, 189, 219, 0.08) !important;
|
||||
color: #1073cc !important;
|
||||
content: "+" !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload:hover {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.06) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload.is-dragging {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.1) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload:active {
|
||||
transform: scale(0.99) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload.has-images {
|
||||
padding: 16px !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload.has-images::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload > span:first-of-type {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload > span:nth-of-type(2),
|
||||
.ecom-hot-video-upload > span {
|
||||
font-size: 13px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #10202c !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload > em {
|
||||
font-size: 12px !important;
|
||||
color: #6b7c88 !important;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 8px !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure {
|
||||
position: relative !important;
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure button {
|
||||
position: absolute !important;
|
||||
top: 2px !important;
|
||||
right: 2px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(16, 115, 204, 0.08) !important;
|
||||
color: #1073cc !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
transition: border-color 150ms ease, background 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-upload-thumbs figure button:hover {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.16) !important;
|
||||
}
|
||||
|
||||
/* Textarea — matches the popover input style */
|
||||
.ecom-hot-video-textarea {
|
||||
width: 100% !important;
|
||||
padding: 10px 12px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 10px !important;
|
||||
background: #f3f8fa !important;
|
||||
color: #10202c !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.55 !important;
|
||||
font-family: inherit !important;
|
||||
font-weight: 500 !important;
|
||||
resize: vertical !important;
|
||||
outline: none !important;
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-textarea:focus {
|
||||
border-color: #1ebddb !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.1), 0 0 0 2px rgba(30, 189, 219, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-textarea::placeholder {
|
||||
color: #6b7c88 !important;
|
||||
}
|
||||
|
||||
/* Options buttons — match the popover button style (white bg, cyan border) */
|
||||
.ecom-hot-video-options {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 6px !important;
|
||||
min-height: 38px !important;
|
||||
padding: 9px 13px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
border-radius: 10px !important;
|
||||
background: #f3f8fa !important;
|
||||
color: #10202c !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button:hover {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.1) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button.is-active {
|
||||
border-color: #1ebddb !important;
|
||||
background: rgba(30, 189, 219, 0.1) !important;
|
||||
color: #1073cc !important;
|
||||
font-weight: 800 !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.1), 0 10px 22px rgba(30, 189, 219, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options > button img {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-options--ratio > button {
|
||||
min-width: 56px !important;
|
||||
}
|
||||
|
||||
/* Range slider */
|
||||
.ecom-hot-video-range {
|
||||
width: 100% !important;
|
||||
margin: 8px 0 4px !important;
|
||||
accent-color: #1073cc !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-range-labels {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
font-size: 11px !important;
|
||||
color: #6b7c88 !important;
|
||||
}
|
||||
|
||||
/* Start button — matches the composer send button */
|
||||
.ecom-hot-video-start {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
width: 100% !important;
|
||||
min-height: 44px !important;
|
||||
padding: 10px 24px !important;
|
||||
margin-top: auto !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.22) !important;
|
||||
border-radius: 14px !important;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.16), transparent 100%),
|
||||
linear-gradient(180deg, rgba(30, 189, 219, 0.1), rgba(16, 115, 204, 0.06)) !important;
|
||||
color: #1073cc !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 800 !important;
|
||||
cursor: pointer !important;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-start:hover:not(:disabled) {
|
||||
border-color: #1ebddb !important;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(22, 200, 223, 0.24), transparent 100%),
|
||||
linear-gradient(180deg, rgba(30, 189, 219, 0.16), rgba(16, 115, 204, 0.1)) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 10px 28px rgba(30, 189, 219, 0.14) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-start:active:not(:disabled) {
|
||||
transform: scale(0.98) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-start:disabled {
|
||||
background: #f3f8fa !important;
|
||||
border-color: rgba(30, 189, 219, 0.1) !important;
|
||||
color: #a0b8c8 !important;
|
||||
cursor: not-allowed !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ── Hot Video Workspace ────────────────────────────── */
|
||||
.ecom-hot-video-workspace {
|
||||
min-height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ── Video workspace — matches the homepage (transparent bg, topbar flowbar, panel nodes) ── */
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-workspace {
|
||||
background: transparent !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
/* ── Flowbar — matches homepage topbar ─────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(5, 8, 13, 0.82) !important;
|
||||
backdrop-filter: blur(18px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__pulse {
|
||||
background: rgba(247, 250, 248, 0.25) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__pulse.is-active {
|
||||
background: #1ebddb !important;
|
||||
box-shadow: 0 0 8px rgba(30, 189, 219, 0.45) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__wave i {
|
||||
background: rgba(247, 250, 248, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ── Flowbar zoom ──────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__zoom button {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__zoom button:hover:not(:disabled) {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__zoom span {
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
/* ── Step dots ──────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-step-dot {
|
||||
background: rgba(247, 250, 248, 0.22) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-step-dot.is-done {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-step-dot.is-active {
|
||||
background: #1ebddb !important;
|
||||
box-shadow: 0 0 8px rgba(30, 189, 219, 0.5) !important;
|
||||
animation: ecom-video-node-breathe-local 1.2s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
/* ── Flow actions (buttons) — match topbar buttons ── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action:hover:not(:disabled) {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--ghost {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--ghost:hover:not(:disabled) {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--danger {
|
||||
border-color: rgba(239, 68, 68, 0.2) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action--danger:hover:not(:disabled) {
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
background: rgba(239, 68, 68, 0.16) !important;
|
||||
color: #f87171 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-action:disabled {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
color: rgba(247, 250, 248, 0.3) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__stage-label {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flowbar__error {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* ── Flow canvas — transparent, blends with page ─── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-canvas {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ── Flow nodes — page panel style ──────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-ready,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-running,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-pending {
|
||||
border-color: rgba(30, 189, 219, 0.3) !important;
|
||||
animation: ecom-tree-breathe-local 1.6s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-failed {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--final {
|
||||
border-color: rgba(30, 189, 219, 0.15) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--final.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.3) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text {
|
||||
border-color: rgba(30, 189, 219, 0.12) !important;
|
||||
background: rgba(30, 189, 219, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text.is-pulsing {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
animation: ecom-tree-breathe-local 1.2s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
/* ── Node status orb ────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__status-orb {
|
||||
background: rgba(247, 250, 248, 0.35) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-ready .ecom-video-flow-node__status-orb,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-completed .ecom-video-flow-node__status-orb {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-running .ecom-video-flow-node__status-orb,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-pending .ecom-video-flow-node__status-orb {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node.is-failed .ecom-video-flow-node__status-orb {
|
||||
background: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--final.is-completed .ecom-video-flow-node__status-orb {
|
||||
background: #f59e0b !important;
|
||||
}
|
||||
|
||||
/* ── Text icon ──────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__text-icon {
|
||||
background: rgba(30, 189, 219, 0.15) !important;
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--text.is-pulsing .ecom-video-flow-node__text-icon {
|
||||
background: rgba(30, 189, 219, 0.22) !important;
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Node labels ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__label {
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
/* ── Node progress ──────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__progress {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__progress i {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--image .ecom-video-flow-node__progress,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--video .ecom-video-flow-node__progress {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Node placeholder ───────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__placeholder {
|
||||
background: rgba(30, 189, 219, 0.04) !important;
|
||||
color: rgba(30, 189, 219, 0.35) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--image .ecom-video-flow-node__placeholder,
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node--video .ecom-video-flow-node__placeholder {
|
||||
background: rgba(30, 189, 219, 0.04) !important;
|
||||
color: rgba(30, 189, 219, 0.35) !important;
|
||||
}
|
||||
|
||||
/* ── Error label ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__error {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* ── Retry button ───────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__retry {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-node__retry:hover {
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
background: rgba(239, 68, 68, 0.16) !important;
|
||||
}
|
||||
|
||||
/* ── Connectors & links ─────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-connector,
|
||||
.ecom-hot-video-workspace .ecom-video-scene-link {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-connector i,
|
||||
.ecom-hot-video-workspace .ecom-video-scene-link i {
|
||||
background: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Flow lines ─────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-lines path {
|
||||
stroke: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-lines path.is-active {
|
||||
stroke: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Dock — matches topbar style ────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-dock {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(8, 12, 10, 0.78) !important;
|
||||
backdrop-filter: blur(18px) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-dock button {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-flow-dock button:hover {
|
||||
border-color: rgba(59, 232, 139, 0.58) !important;
|
||||
background: rgba(59, 232, 139, 0.14) !important;
|
||||
box-shadow: 0 2px 12px rgba(59, 232, 139, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ── Dock notice ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-flow-notice {
|
||||
border-color: rgba(30, 189, 219, 0.2) !important;
|
||||
background: rgba(30, 189, 219, 0.08) !important;
|
||||
color: #7dd8e8 !important;
|
||||
}
|
||||
|
||||
/* ── Empty state ────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-empty {
|
||||
color: rgba(247, 250, 248, 0.36) !important;
|
||||
}
|
||||
|
||||
/* ═══════════ TREE LAYOUT ═══════════════════════════ */
|
||||
|
||||
/* ── Tree node base — page panel style ──────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--source {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--text {
|
||||
border-color: rgba(30, 189, 219, 0.12) !important;
|
||||
background: rgba(30, 189, 219, 0.03) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--text.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--text.is-active {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
animation: ecom-tree-breathe-local 1.8s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--image.is-completed,
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--video.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
background: rgba(30, 189, 219, 0.05) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--image.is-active,
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--video.is-active {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
animation: ecom-tree-breathe-local 1.8s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node.is-active {
|
||||
border-color: rgba(30, 189, 219, 0.4) !important;
|
||||
box-shadow: 0 0 16px rgba(30, 189, 219, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node.is-completed {
|
||||
border-color: rgba(30, 189, 219, 0.25) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node--video.is-failed {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.05) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node inner text ───────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__title {
|
||||
color: #f7faf8 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__desc {
|
||||
color: rgba(247, 250, 248, 0.52) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__label {
|
||||
color: rgba(247, 250, 248, 0.66) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node placeholder ──────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__placeholder {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
color: rgba(247, 250, 248, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node tag ──────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__tag {
|
||||
border-color: rgba(255, 255, 255, 0.12) !important;
|
||||
background: rgba(8, 12, 10, 0.85) !important;
|
||||
color: rgba(247, 250, 248, 0.8) !important;
|
||||
}
|
||||
|
||||
/* ── Tree node progress ─────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__progress {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Tree retry ─────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__retry {
|
||||
border-color: rgba(239, 68, 68, 0.25) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree-node__retry:hover {
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
background: rgba(239, 68, 68, 0.16) !important;
|
||||
}
|
||||
|
||||
/* ── Tree trunk & branch lines ──────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree__trunk-line {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__trunk-line::after {
|
||||
background: linear-gradient(90deg, transparent, #1ebddb, transparent) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__branches-line::before {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__branch-tap::before {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__branch-tap::after {
|
||||
background: linear-gradient(90deg, transparent, #1ebddb, transparent) !important;
|
||||
}
|
||||
|
||||
/* ── Tree arrow ─────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree__arrow {
|
||||
color: rgba(247, 250, 248, 0.28) !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-tree__row:hover .ecom-video-tree__arrow {
|
||||
color: #1ebddb !important;
|
||||
}
|
||||
|
||||
/* ── Tree row empty ─────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-tree__row--empty.is-planning .ecom-video-tree-node {
|
||||
border-color: rgba(30, 189, 219, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ──────────────────────────────────── */
|
||||
.ecom-hot-video-workspace .ecom-video-scene-strip {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
|
||||
}
|
||||
|
||||
.ecom-hot-video-workspace .ecom-video-scene-strip--text::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
/* ═══════════ LOCAL ANIMATIONS ══════════════════════ */
|
||||
|
||||
@keyframes ecom-video-node-breathe-local {
|
||||
0%, 100% { border-color: rgba(30, 189, 219, 0.25); }
|
||||
50% { border-color: rgba(30, 189, 219, 0.6); }
|
||||
}
|
||||
|
||||
@keyframes ecom-tree-breathe-local {
|
||||
0%, 100% {
|
||||
border-color: rgba(30, 189, 219, 0.2);
|
||||
box-shadow: 0 0 0 0 rgba(30, 189, 219, 0);
|
||||
}
|
||||
50% {
|
||||
border-color: rgba(30, 189, 219, 0.5);
|
||||
box-shadow: 0 0 16px 2px rgba(30, 189, 219, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-image-workbench-page {
|
||||
position: relative !important;
|
||||
display: grid !important;
|
||||
@@ -6799,7 +7656,7 @@
|
||||
.ecommerce-standalone .ecom-smart-editor__workspace {
|
||||
display: grid !important;
|
||||
grid-template-rows: auto auto auto !important;
|
||||
gap: 18px !important;
|
||||
gap: 14px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
@@ -6874,16 +7731,29 @@
|
||||
.ecommerce-standalone .ecom-smart-editor__tools-shell {
|
||||
display: grid !important;
|
||||
grid-template-columns: 24px minmax(0, 1fr) 24px !important;
|
||||
align-items: stretch !important;
|
||||
gap: 5px !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
align-items: start !important;
|
||||
gap: 6px 5px !important;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools-title {
|
||||
grid-column: 1 / -1 !important;
|
||||
color: #1c2a35 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools {
|
||||
display: flex !important;
|
||||
align-items: start !important;
|
||||
gap: 5px !important;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
overflow-x: auto !important;
|
||||
overflow-y: hidden !important;
|
||||
overflow-y: visible !important;
|
||||
scroll-behavior: smooth !important;
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
@@ -6896,8 +7766,10 @@
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 24px !important;
|
||||
height: 100px !important;
|
||||
min-width: 24px !important;
|
||||
min-height: 46px !important;
|
||||
min-height: 100px !important;
|
||||
border: 1px solid rgba(16, 115, 204, 0.12) !important;
|
||||
border-radius: 7px !important;
|
||||
color: #1073cc !important;
|
||||
@@ -6915,13 +7787,14 @@
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools button {
|
||||
flex: 0 0 44px !important;
|
||||
display: grid !important;
|
||||
flex: 0 0 100px !important;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
display: inline-grid !important;
|
||||
place-items: center !important;
|
||||
gap: 3px !important;
|
||||
min-height: 46px !important;
|
||||
padding: 5px 3px !important;
|
||||
border: 1px solid transparent !important;
|
||||
min-height: 100px !important;
|
||||
padding: 10px 8px !important;
|
||||
border: 1px solid rgba(16, 115, 204, 0.12) !important;
|
||||
border-radius: 7px !important;
|
||||
color: #2d3d48 !important;
|
||||
background: #f2f5f7 !important;
|
||||
@@ -6930,22 +7803,51 @@
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-item {
|
||||
flex: 0 0 100px !important;
|
||||
display: grid !important;
|
||||
gap: 6px !important;
|
||||
justify-items: center !important;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools button.is-active {
|
||||
border-color: #1073cc !important;
|
||||
color: #1073cc !important;
|
||||
background: #f8fdff !important;
|
||||
box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.16) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tools button > span:last-child {
|
||||
display: -webkit-box !important;
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text {
|
||||
display: grid !important;
|
||||
gap: 2px !important;
|
||||
justify-items: center !important;
|
||||
max-width: 100% !important;
|
||||
text-align: center !important;
|
||||
line-height: 1.18 !important;
|
||||
color: #2d3d48 !important;
|
||||
font-size: 10px !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text > span {
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
text-align: center !important;
|
||||
line-height: 1.15 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text > span:first-child {
|
||||
display: -webkit-box !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-text > span:last-child:not(:first-child) {
|
||||
font-size: 9px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #6a7c88 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-smart-editor__tool-icon {
|
||||
position: relative !important;
|
||||
display: inline-flex !important;
|
||||
|
||||
Reference in New Issue
Block a user