feat: enhance ecommerce UI with typewriter animation, icon buttons, responsive layout, and refined design tokens #2
@@ -2,6 +2,7 @@
|
||||
AppstoreOutlined,
|
||||
CloudUploadOutlined,
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
FileImageOutlined,
|
||||
FolderOpenOutlined,
|
||||
FrownOutlined,
|
||||
@@ -16,6 +17,7 @@
|
||||
TableOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
|
||||
import { useTypewriter } from "../../hooks/useTypewriter";
|
||||
import "../../styles/pages/ecommerce.css";
|
||||
import "../../styles/pages/local-theme-parity.css";
|
||||
import { ossAssets } from "../../data/ossAssets";
|
||||
@@ -1187,7 +1189,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [visibleComposerMenu, setVisibleComposerMenu] = useState<ComposerMenuKey | null>(null);
|
||||
const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
|
||||
const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
|
||||
const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(false);
|
||||
const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(() => (typeof window !== "undefined" ? window.innerWidth <= 1180 : false));
|
||||
const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
|
||||
const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
|
||||
const [cloneReferenceMode, setCloneReferenceMode] = useState<CloneReferenceMode>("upload");
|
||||
@@ -1223,6 +1225,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
offsetY: 0,
|
||||
});
|
||||
const [isCommandComposerCompact, setIsCommandComposerCompact] = useState(false);
|
||||
const typewriterText = useTypewriter("万物皆可AI，广告素材一键生成");
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -1238,6 +1241,16 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
previewOffsetRef.current = previewOffset;
|
||||
}, [previewOffset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return undefined;
|
||||
const syncHistoryPanel = () => {
|
||||
setIsCommandHistoryCollapsed(window.innerWidth <= 1180);
|
||||
};
|
||||
syncHistoryPanel();
|
||||
window.addEventListener("resize", syncHistoryPanel);
|
||||
return () => window.removeEventListener("resize", syncHistoryPanel);
|
||||
}, []);
|
||||
|
||||
const previewTransformStyle = useMemo<CSSProperties>(
|
||||
() => ({
|
||||
transform: `translate3d(${previewOffset.x}px, ${previewOffset.y}px, 0) scale(${previewZoom})`,
|
||||
@@ -3729,7 +3742,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
if (isCommandComposerCompact) setIsCommandComposerCompact(false);
|
||||
}}
|
||||
>
|
||||
<h1 className={`ecom-command-title${status === "done" ? " is-after-generate" : ""}`}>万物皆可AI，广告素材一键生成</h1>
|
||||
<h1 className={`ecom-command-title${status === "done" ? " is-after-generate" : ""}`}>
|
||||
{typewriterText}
|
||||
<span className="typewriter-cursor" aria-hidden="true">|</span>
|
||||
</h1>
|
||||
<input
|
||||
ref={cloneReferenceInputRef}
|
||||
type="file"
|
||||
@@ -3772,8 +3788,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
if (files.length) addComposerAssets(files);
|
||||
}}
|
||||
>
|
||||
<span aria-hidden="true">+</span>
|
||||
<strong>添加</strong>
|
||||
<span aria-hidden="true"><CloudUploadOutlined /></span>
|
||||
<strong>上传商品图</strong>
|
||||
</button>
|
||||
{productImages.length || videoOutfitVideoFile ? (
|
||||
<div className="ecom-command-asset-popover" aria-label="宸蹭笂浼犵礌鏉?">
|
||||
@@ -3783,7 +3799,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span className="ecom-command-asset-zoom" aria-hidden="true">
|
||||
<img src={image.src} alt="" />
|
||||
</span>
|
||||
<button type="button" onClick={() => removeProductImage(image.id)} aria-label="删除图片">×</button>
|
||||
<button type="button" onClick={() => removeProductImage(image.id)} aria-label="删除图片">
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</figure>
|
||||
))}
|
||||
{videoOutfitVideoFile && videoOutfitPreviewUrl ? (
|
||||
@@ -3792,7 +3810,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span className="ecom-command-asset-zoom" aria-hidden="true">
|
||||
<video src={videoOutfitPreviewUrl} muted playsInline />
|
||||
</span>
|
||||
<button type="button" onClick={() => setVideoOutfitVideoFile(null)} aria-label="删除视频">×</button>
|
||||
<button type="button" onClick={() => setVideoOutfitVideoFile(null)} aria-label="删除视频">
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</figure>
|
||||
) : null}
|
||||
<button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
|
||||
@@ -3836,8 +3856,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
if (files.length) addComposerAssets(files);
|
||||
}}
|
||||
>
|
||||
<span aria-hidden="true">+</span>
|
||||
<strong>添加</strong>
|
||||
<span aria-hidden="true"><CloudUploadOutlined /></span>
|
||||
<strong>上传素材</strong>
|
||||
</button>
|
||||
<button type="button" className={composerMenu === "mode" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("mode", event)}>
|
||||
<span className="ecom-command-option-icon" aria-hidden="true"><AppstoreOutlined /></span>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
/**
|
||||
* 打字机动画 Hook：逐字显示文本，完成后停顿指定时间再重复。
|
||||
*
|
||||
* @param text 要显示的文本
|
||||
* @param typingSpeed 每个字的间隔（ms），默认 120
|
||||
* @param pauseDuration 打完后的停顿时间（ms），默认 5000
|
||||
* @returns 当前已显示的文字
|
||||
*/
|
||||
export function useTypewriter(text: string, typingSpeed = 120, pauseDuration = 5000) {
|
||||
const [displayText, setDisplayText] = useState("");
|
||||
const indexRef = useRef(0);
|
||||
const pausingRef = useRef(false);
|
||||
const restartTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// 重置所有状态
|
||||
indexRef.current = 0;
|
||||
pausingRef.current = false;
|
||||
setDisplayText("");
|
||||
if (restartTimerRef.current) clearTimeout(restartTimerRef.current);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (pausingRef.current) return;
|
||||
|
||||
if (indexRef.current < text.length) {
|
||||
indexRef.current++;
|
||||
setDisplayText(text.slice(0, indexRef.current));
|
||||
} else {
|
||||
// 打字完成，进入停顿
|
||||
pausingRef.current = true;
|
||||
restartTimerRef.current = setTimeout(() => {
|
||||
indexRef.current = 0;
|
||||
pausingRef.current = false;
|
||||
setDisplayText("");
|
||||
}, pauseDuration);
|
||||
}
|
||||
}, typingSpeed);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
if (restartTimerRef.current) clearTimeout(restartTimerRef.current);
|
||||
};
|
||||
}, [text, typingSpeed, pauseDuration]);
|
||||
|
||||
return displayText;
|
||||
}
|
||||
@@ -10,18 +10,31 @@ body,
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
overflow: hidden;
|
||||
background: var(--page-bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-regular);
|
||||
line-height: var(--leading-body);
|
||||
letter-spacing: 0;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
button,
|
||||
textarea,
|
||||
input {
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@@ -31,13 +44,50 @@ button {
|
||||
|
||||
button:focus-visible,
|
||||
textarea:focus-visible,
|
||||
input:focus-visible {
|
||||
input:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 2px solid rgba(var(--accent-rgb), 0.48);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img,
|
||||
video,
|
||||
canvas {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
span,
|
||||
strong,
|
||||
em,
|
||||
label,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
li,
|
||||
td,
|
||||
th {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -15,6 +15,115 @@
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.ui-page-title {
|
||||
margin: 0;
|
||||
color: var(--fg-body);
|
||||
font-size: var(--text-title);
|
||||
font-weight: var(--weight-heavy);
|
||||
line-height: var(--leading-heading);
|
||||
}
|
||||
|
||||
.ui-section-title {
|
||||
margin: 0;
|
||||
color: var(--fg-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--weight-bold);
|
||||
line-height: var(--leading-heading);
|
||||
}
|
||||
|
||||
.ui-body-copy {
|
||||
color: var(--fg-muted);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-regular);
|
||||
line-height: var(--leading-body);
|
||||
}
|
||||
|
||||
.ui-label {
|
||||
color: var(--fg-muted);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
line-height: var(--leading-control);
|
||||
}
|
||||
|
||||
:where(.ui-surface, .ui-card, .ui-panel) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:where(.ui-card-grid, .responsive-card-grid) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
|
||||
gap: var(--space-6);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:where(.ui-form-grid, .responsive-form-grid) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-6);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:where(.ui-form-grid, .responsive-form-grid) > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:where(.ui-toolbar, .responsive-toolbar) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
:where(.ui-button, .responsive-button) {
|
||||
min-width: 0;
|
||||
min-height: var(--form-control-min-height);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--weight-bold);
|
||||
line-height: var(--leading-control);
|
||||
}
|
||||
|
||||
:where(.ui-media-frame, .responsive-media-frame) {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:where(.ui-media-frame, .responsive-media-frame) :where(img, video, canvas) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
:where(.ui-truncate) {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
:where(.ui-form-grid, .responsive-form-grid) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
:where(.ui-card-grid, .responsive-card-grid) {
|
||||
gap: var(--space-5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:where(.ui-toolbar, .responsive-toolbar) {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
:where(.ui-toolbar, .responsive-toolbar) > :where(button, a, .ui-button, .responsive-button) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-loading-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -86,9 +195,9 @@
|
||||
}
|
||||
|
||||
.page-loading-center__text {
|
||||
font: 400 13px/1 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
|
||||
font: var(--weight-regular) var(--text-md) / var(--leading-control) var(--font-sans);
|
||||
color: var(--text-muted, rgba(255,255,255,.45));
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.page-loading-spinner {
|
||||
|
||||
@@ -5220,6 +5220,270 @@
|
||||
background-color: var(--smart-cutout-bg, #ffffff) !important;
|
||||
}
|
||||
|
||||
/* P0 page polish: premium AI commerce landing surface without touching logic. */
|
||||
.ecommerce-standalone__topbar {
|
||||
min-height: 66px !important;
|
||||
border-bottom-color: rgba(30, 189, 219, 0.18) !important;
|
||||
background: rgba(248, 249, 250, 0.86) !important;
|
||||
box-shadow: 0 12px 36px rgba(16, 115, 204, 0.055) !important;
|
||||
backdrop-filter: blur(18px) saturate(1.12) !important;
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone__brand {
|
||||
min-height: 40px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone__brand strong {
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone__account button {
|
||||
min-height: 40px !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 10px 24px rgba(16, 115, 204, 0.055) !important;
|
||||
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone__account button:hover {
|
||||
box-shadow: 0 14px 32px rgba(30, 189, 219, 0.12) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"]::before {
|
||||
opacity: 0.82 !important;
|
||||
filter: blur(70px) saturate(1.08) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
background:
|
||||
radial-gradient(circle at 19% 8%, rgba(30, 189, 219, 0.13), transparent 24rem),
|
||||
radial-gradient(circle at 82% 11%, rgba(16, 115, 204, 0.09), transparent 26rem),
|
||||
linear-gradient(180deg, #fbfdfe 0%, #f8f9fa 54%, #f5f9fb 100%) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title {
|
||||
color: #10202c !important;
|
||||
text-wrap: balance !important;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||
border-color: rgba(30, 189, 219, 0.24) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 253, 254, 0.94)),
|
||||
#feffff !important;
|
||||
box-shadow:
|
||||
0 24px 70px rgba(16, 115, 204, 0.11),
|
||||
0 10px 26px rgba(30, 189, 219, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
|
||||
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within {
|
||||
border-color: rgba(30, 189, 219, 0.46) !important;
|
||||
box-shadow:
|
||||
0 30px 82px rgba(16, 115, 204, 0.14),
|
||||
0 0 0 4px rgba(30, 189, 219, 0.09),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea {
|
||||
color: #10202c !important;
|
||||
caret-color: #1ebddb !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea::placeholder {
|
||||
color: #7b929e !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools button,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button {
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background 180ms ease,
|
||||
color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
transform 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button:hover,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active {
|
||||
box-shadow: 0 10px 22px rgba(30, 189, 219, 0.08) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send {
|
||||
background: linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:hover:not(:disabled) {
|
||||
box-shadow: 0 18px 38px rgba(30, 189, 219, 0.28) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:disabled {
|
||||
border-color: rgba(30, 189, 219, 0.18) !important;
|
||||
background: #eef6f8 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
|
||||
gap: 0 !important;
|
||||
border-color: rgba(30, 189, 219, 0.16) !important;
|
||||
background: rgba(254, 255, 255, 0.96) !important;
|
||||
box-shadow:
|
||||
0 22px 56px rgba(16, 115, 204, 0.09),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
|
||||
isolation: isolate !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button::before,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button::after {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button span {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.16) !important;
|
||||
border-radius: 10px !important;
|
||||
background: rgba(30, 189, 219, 0.075) !important;
|
||||
color: #1073cc !important;
|
||||
font-size: 16px !important;
|
||||
transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button strong {
|
||||
max-width: 100% !important;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover {
|
||||
color: #0f6678 !important;
|
||||
background: linear-gradient(180deg, rgba(30, 189, 219, 0.12), rgba(30, 189, 219, 0.055)) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover span {
|
||||
border-color: rgba(30, 189, 219, 0.36) !important;
|
||||
background: #ffffff !important;
|
||||
color: #1ebddb !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history {
|
||||
border-left-color: rgba(30, 189, 219, 0.14) !important;
|
||||
background: rgba(254, 255, 255, 0.9) !important;
|
||||
box-shadow: -18px 0 46px rgba(16, 115, 204, 0.065) !important;
|
||||
backdrop-filter: blur(18px) saturate(1.08) !important;
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__heading,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__empty,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__empty {
|
||||
color: #6d8592 !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 249, 250, 0.92)),
|
||||
#f8f9fa !important;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate {
|
||||
left: 18px !important;
|
||||
right: 18px !important;
|
||||
width: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||
min-height: 224px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(6n + 1))::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(3n + 1))::before {
|
||||
position: absolute !important;
|
||||
top: 14px !important;
|
||||
bottom: 14px !important;
|
||||
left: 0 !important;
|
||||
width: 1px !important;
|
||||
content: "" !important;
|
||||
background: rgba(30, 189, 219, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:nth-child(n + 4)::after {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 14px !important;
|
||||
right: 14px !important;
|
||||
height: 1px !important;
|
||||
content: "" !important;
|
||||
background: rgba(30, 189, 219, 0.12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ecommerce-standalone__topbar {
|
||||
min-height: 60px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
padding-inline: 18px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title {
|
||||
font-size: clamp(26px, 8vw, 34px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
min-height: 300px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(3n + 1))::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(2n + 1))::before {
|
||||
position: absolute !important;
|
||||
top: 14px !important;
|
||||
bottom: 14px !important;
|
||||
left: 0 !important;
|
||||
width: 1px !important;
|
||||
content: "" !important;
|
||||
background: rgba(30, 189, 219, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:nth-child(n + 3)::after {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 14px !important;
|
||||
right: 14px !important;
|
||||
height: 1px !important;
|
||||
content: "" !important;
|
||||
background: rgba(30, 189, 219, 0.12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ecommerce-soft-popover-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
@@ -5232,3 +5496,428 @@
|
||||
transform: translate3d(0, 8px, 0) scale(0.982);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Typewriter cursor blink ---- */
|
||||
.typewriter-cursor {
|
||||
display: inline-block;
|
||||
color: #1ebddb;
|
||||
font-weight: 400;
|
||||
animation: typewriter-blink 0.8s steps(1) infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriter-blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* #/imageWorkbench narrow viewport alignment and history drawer access. */
|
||||
@media (max-width: 1180px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] {
|
||||
--ecom-history-offset: 0px !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
justify-items: center !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap {
|
||||
left: 50% !important;
|
||||
right: auto !important;
|
||||
width: min(920px, calc(100vw - 48px)) !important;
|
||||
max-width: calc(100vw - 48px) !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-collapsed) {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] > .product-clone-shell.product-clone-shell {
|
||||
transition:
|
||||
filter 260ms ease,
|
||||
opacity 260ms ease,
|
||||
transform 260ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-collapsed) > .product-clone-shell.product-clone-shell {
|
||||
filter: blur(12px) saturate(0.94) !important;
|
||||
opacity: 0.36 !important;
|
||||
transform: scale(0.992) !important;
|
||||
pointer-events: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history.ecom-command-history {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
z-index: 120 !important;
|
||||
display: grid !important;
|
||||
width: min(292px, calc(100vw - 72px)) !important;
|
||||
border-top-left-radius: 22px !important;
|
||||
border-left-color: rgba(30, 189, 219, 0.28) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(240, 250, 255, 0.92), rgba(226, 243, 255, 0.9)),
|
||||
rgba(254, 255, 255, 0.94) !important;
|
||||
box-shadow:
|
||||
-28px 0 72px rgba(16, 115, 204, 0.18),
|
||||
-1px 0 0 rgba(255, 255, 255, 0.8) inset !important;
|
||||
backdrop-filter: blur(22px) saturate(1.12) !important;
|
||||
-webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
|
||||
transform: translateX(0) !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history.ecom-command-history {
|
||||
display: grid !important;
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: -52px !important;
|
||||
z-index: 130 !important;
|
||||
display: inline-flex !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap {
|
||||
width: calc(100vw - 32px) !important;
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history.ecom-command-history {
|
||||
top: 0 !important;
|
||||
width: min(300px, calc(100vw - 58px)) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle {
|
||||
left: -46px !important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* #/imageWorkbench mobile composer spacing refinement. */
|
||||
@media (max-width: 640px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate {
|
||||
top: clamp(26px, 5.6vh, 42px) !important;
|
||||
gap: 18px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
|
||||
max-width: min(100%, 440px) !important;
|
||||
margin-inline: auto !important;
|
||||
font-size: clamp(29px, 7.8vw, 34px) !important;
|
||||
line-height: 1.14 !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||
min-height: 0 !important;
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
align-items: stretch !important;
|
||||
gap: 12px !important;
|
||||
padding: 16px !important;
|
||||
border-radius: 24px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea {
|
||||
min-height: 74px !important;
|
||||
height: 74px !important;
|
||||
padding: 8px 0 2px !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 10px !important;
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 8px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button,
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline {
|
||||
flex: 1 1 calc(50% - 8px) !important;
|
||||
max-width: none !important;
|
||||
min-height: 38px !important;
|
||||
justify-content: center !important;
|
||||
padding-inline: 10px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
|
||||
align-self: flex-end !important;
|
||||
justify-content: flex-end !important;
|
||||
width: auto !important;
|
||||
min-width: 46px !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send {
|
||||
width: 46px !important;
|
||||
height: 46px !important;
|
||||
min-width: 46px !important;
|
||||
min-height: 46px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate {
|
||||
top: 24px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
|
||||
font-size: clamp(25px, 8vw, 30px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button,
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline {
|
||||
flex-basis: calc(50% - 8px) !important;
|
||||
min-height: 36px !important;
|
||||
font-size: 12px !important;
|
||||
padding-inline: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* #/imageWorkbench mobile header, headline, and upload clarity. */
|
||||
@media (max-width: 640px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__topbar {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(116px, 1fr) auto !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
min-height: 62px !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand {
|
||||
min-width: 0 !important;
|
||||
gap: 8px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__logo {
|
||||
flex: 0 0 36px !important;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand strong {
|
||||
min-width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
color: #10202c !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1.08 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: normal !important;
|
||||
word-break: keep-all !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__account {
|
||||
min-width: 0 !important;
|
||||
gap: 6px !important;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__credits {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 94px !important;
|
||||
min-height: 38px !important;
|
||||
padding-inline: 10px !important;
|
||||
overflow: hidden !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 800 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger {
|
||||
min-width: 46px !important;
|
||||
min-height: 40px !important;
|
||||
padding: 0 7px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger > span:not(.local-user-avatar) {
|
||||
max-width: 58px !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
|
||||
max-width: min(92vw, 520px) !important;
|
||||
background: linear-gradient(92deg, #10202c 0%, #123d5a 46%, #1073cc 72%, #1ebddb 100%) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
color: transparent !important;
|
||||
text-shadow: 0 16px 40px rgba(16, 115, 204, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference:not(.ecom-command-reference--inline) {
|
||||
min-height: 54px !important;
|
||||
grid-auto-flow: column !important;
|
||||
grid-template-columns: auto minmax(0, auto) !important;
|
||||
justify-content: center !important;
|
||||
gap: 10px !important;
|
||||
border-style: solid !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(245, 253, 255, 0.98), rgba(231, 249, 254, 0.92)) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference:not(.ecom-command-reference--inline) span {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference:not(.ecom-command-reference--inline) strong {
|
||||
max-width: none !important;
|
||||
font-size: 13px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline {
|
||||
order: -1 !important;
|
||||
flex-basis: 100% !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
color: #0f6678 !important;
|
||||
border-color: rgba(30, 189, 219, 0.32) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(241, 252, 255, 0.98), rgba(229, 248, 253, 0.92)) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline span {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__topbar {
|
||||
grid-template-columns: minmax(92px, 1fr) auto !important;
|
||||
gap: 6px !important;
|
||||
padding-inline: 10px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand strong {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand strong::before {
|
||||
content: "OmniAI" !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__credits {
|
||||
max-width: 88px !important;
|
||||
min-height: 36px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger {
|
||||
width: 42px !important;
|
||||
min-width: 42px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger > span:not(.local-user-avatar) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* #/imageWorkbench unified headline tone and asset removal affordance. */
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
|
||||
max-width: min(920px, 92vw) !important;
|
||||
margin-inline: auto !important;
|
||||
background:
|
||||
linear-gradient(96deg, #10202c 0%, #164359 36%, #0f829b 68%, #18bfd2 100%) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
color: transparent !important;
|
||||
text-shadow: 0 18px 46px rgba(15, 130, 155, 0.13) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .typewriter-cursor {
|
||||
color: #18bfd2 !important;
|
||||
text-shadow: 0 0 18px rgba(24, 191, 210, 0.28) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
min-width: 30px !important;
|
||||
min-height: 30px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.78) !important;
|
||||
border-radius: 999px !important;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(202, 53, 84, 0.96), rgba(145, 42, 68, 0.96)) !important;
|
||||
box-shadow:
|
||||
0 12px 28px rgba(145, 42, 68, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
|
||||
color: #fff !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
transform: translate(6px, -6px) scale(0.92) !important;
|
||||
transition:
|
||||
opacity 160ms ease,
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
visibility 160ms ease !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb:hover > button,
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb:focus-within > button {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
transform: translate(0, 0) scale(1) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button:hover {
|
||||
box-shadow:
|
||||
0 14px 32px rgba(145, 42, 68, 0.32),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
|
||||
transform: translate(0, 0) scale(1.04) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button .anticon {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
transform: translate(0, 0) scale(1) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10983,3 +10983,497 @@
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
/* Current #/imageWorkbench ecommerce entry polish. */
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] {
|
||||
--ecom-entry-accent: #1ebddb;
|
||||
--ecom-entry-accent-strong: #1073cc;
|
||||
--ecom-entry-text: #10202c;
|
||||
--ecom-entry-muted: rgba(16, 32, 44, 0.58);
|
||||
--ecom-entry-line: rgba(30, 189, 219, 0.2);
|
||||
--ecom-entry-line-strong: rgba(30, 189, 219, 0.34);
|
||||
--ecom-entry-card: rgba(255, 255, 255, 0.92);
|
||||
--ecom-entry-card-soft: rgba(255, 255, 255, 0.72);
|
||||
--ecom-entry-shadow: 0 24px 70px rgba(16, 115, 204, 0.1);
|
||||
--ecom-entry-shadow-strong: 0 28px 82px rgba(16, 115, 204, 0.16);
|
||||
--ecom-entry-focus: 0 0 0 3px rgba(30, 189, 219, 0.16);
|
||||
background:
|
||||
radial-gradient(46rem 22rem at 50% 11%, rgba(30, 189, 219, 0.17), transparent 72%),
|
||||
radial-gradient(34rem 20rem at 18% 20%, rgba(16, 115, 204, 0.11), transparent 70%),
|
||||
linear-gradient(180deg, #f8fbfc 0%, #f5f8fa 58%, #f8f9fa 100%) !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
overscroll-behavior-y: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"]::before {
|
||||
opacity: 0.78 !important;
|
||||
filter: blur(52px) saturate(1.08) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"]::after {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
padding-top: clamp(72px, 9vh, 118px) !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap {
|
||||
gap: clamp(18px, 2.5vw, 30px) !important;
|
||||
padding-inline: clamp(18px, 3.4vw, 40px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title {
|
||||
max-width: min(900px, 100%);
|
||||
color: var(--ecom-entry-text) !important;
|
||||
letter-spacing: 0 !important;
|
||||
line-height: 1.12 !important;
|
||||
text-wrap: balance;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||
border: 1px solid var(--ecom-entry-line) !important;
|
||||
border-radius: 24px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(250, 254, 255, 0.92) 100%),
|
||||
linear-gradient(135deg, rgba(30, 189, 219, 0.08), rgba(16, 115, 204, 0.04)) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 1px 0 rgba(255, 255, 255, 0.72),
|
||||
var(--ecom-entry-shadow) !important;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
transform 180ms ease,
|
||||
background 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within {
|
||||
border-color: var(--ecom-entry-line-strong) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
||||
var(--ecom-entry-focus),
|
||||
var(--ecom-entry-shadow-strong) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:hover {
|
||||
border-color: rgba(30, 189, 219, 0.3) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
||||
0 26px 72px rgba(16, 115, 204, 0.13) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer.is-dragging,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer.has-files {
|
||||
border-color: rgba(30, 189, 219, 0.42) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 253, 255, 0.96) 100%),
|
||||
linear-gradient(135deg, rgba(30, 189, 219, 0.1), rgba(16, 115, 204, 0.06)) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference {
|
||||
border: 1px dashed rgba(30, 189, 219, 0.3) !important;
|
||||
border-radius: 18px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 253, 255, 0.84)),
|
||||
radial-gradient(circle at 50% 12%, rgba(30, 189, 219, 0.15), transparent 58%) !important;
|
||||
color: var(--ecom-entry-text) !important;
|
||||
box-shadow: 0 14px 34px rgba(16, 115, 204, 0.09) !important;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference:hover,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference:focus-visible {
|
||||
border-color: rgba(30, 189, 219, 0.58) !important;
|
||||
box-shadow:
|
||||
var(--ecom-entry-focus),
|
||||
0 18px 42px rgba(16, 115, 204, 0.14) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference:active {
|
||||
transform: rotate(-2deg) translateY(1px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference svg,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-upload-inline svg {
|
||||
color: var(--ecom-entry-accent) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-input {
|
||||
color: var(--ecom-entry-text) !important;
|
||||
line-height: 1.72 !important;
|
||||
caret-color: var(--ecom-entry-accent) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-input::placeholder {
|
||||
color: rgba(16, 32, 44, 0.38) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar {
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
border-top: 1px solid rgba(30, 189, 219, 0.11) !important;
|
||||
padding-top: 14px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-upload-inline,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-char-count {
|
||||
min-height: 38px;
|
||||
border: 1px solid rgba(30, 189, 219, 0.15) !important;
|
||||
background: rgba(247, 252, 253, 0.92) !important;
|
||||
color: rgba(16, 32, 44, 0.72) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
|
||||
transition:
|
||||
color 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
transform 160ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button:hover,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-upload-inline:hover {
|
||||
border-color: rgba(30, 189, 219, 0.36) !important;
|
||||
background: rgba(238, 251, 254, 0.96) !important;
|
||||
color: var(--ecom-entry-text) !important;
|
||||
box-shadow: 0 10px 24px rgba(16, 115, 204, 0.08) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button[aria-expanded="true"] {
|
||||
border-color: rgba(30, 189, 219, 0.46) !important;
|
||||
background: linear-gradient(180deg, rgba(235, 251, 255, 0.98), rgba(223, 247, 252, 0.9)) !important;
|
||||
color: var(--ecom-entry-text) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 12px 26px rgba(30, 189, 219, 0.14) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] button:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow:
|
||||
var(--ecom-entry-focus),
|
||||
0 10px 26px rgba(16, 115, 204, 0.12) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] button:disabled,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] button[aria-disabled="true"] {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.56 !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
min-width: 48px !important;
|
||||
border-radius: 16px !important;
|
||||
background:
|
||||
linear-gradient(135deg, var(--ecom-entry-accent) 0%, var(--ecom-entry-accent-strong) 100%) !important;
|
||||
box-shadow:
|
||||
0 16px 32px rgba(30, 189, 219, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
filter 160ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send:hover:not(:disabled) {
|
||||
filter: saturate(1.06) brightness(1.03);
|
||||
box-shadow:
|
||||
0 20px 38px rgba(30, 189, 219, 0.34),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send:active:not(:disabled) {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-char-count {
|
||||
color: rgba(16, 32, 44, 0.46) !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
|
||||
border: 1px solid rgba(30, 189, 219, 0.12) !important;
|
||||
border-radius: 22px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(249, 253, 255, 0.62)),
|
||||
rgba(255, 255, 255, 0.58) !important;
|
||||
box-shadow: 0 22px 58px rgba(16, 115, 204, 0.08) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
|
||||
border: 1px solid rgba(30, 189, 219, 0.1) !important;
|
||||
border-radius: 18px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.88)) !important;
|
||||
color: var(--ecom-entry-text) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
||||
0 12px 28px rgba(16, 115, 204, 0.06) !important;
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
transform 180ms ease,
|
||||
background 180ms ease !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover {
|
||||
border-color: rgba(30, 189, 219, 0.32) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 251, 254, 0.94)) !important;
|
||||
box-shadow: 0 18px 34px rgba(16, 115, 204, 0.12) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
|
||||
color: var(--ecom-entry-text) !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
|
||||
color: var(--ecom-entry-muted) !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.45 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover {
|
||||
border: 1px solid rgba(30, 189, 219, 0.18) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 253, 255, 0.94)) !important;
|
||||
box-shadow:
|
||||
0 24px 62px rgba(16, 115, 204, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover-note,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-empty-copy {
|
||||
color: var(--ecom-entry-muted) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-empty-card {
|
||||
border: 1px solid rgba(30, 189, 219, 0.14) !important;
|
||||
background: rgba(255, 255, 255, 0.64) !important;
|
||||
box-shadow: 0 20px 56px rgba(16, 115, 204, 0.08) !important;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
padding-top: clamp(64px, 8vh, 96px) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap {
|
||||
max-width: 920px !important;
|
||||
gap: 20px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
|
||||
min-height: 72px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] {
|
||||
background:
|
||||
radial-gradient(30rem 16rem at 50% 8%, rgba(30, 189, 219, 0.16), transparent 72%),
|
||||
linear-gradient(180deg, #f8fbfc 0%, #f6f9fa 100%) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
padding-top: 16px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap {
|
||||
gap: 14px !important;
|
||||
padding-inline: 18px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title {
|
||||
font-size: clamp(24px, 7vw, 32px) !important;
|
||||
line-height: 1.16 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||
min-height: 0 !important;
|
||||
border-radius: 22px !important;
|
||||
padding: 14px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference {
|
||||
min-height: 82px !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-input {
|
||||
min-height: 84px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.62 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar {
|
||||
align-items: stretch !important;
|
||||
gap: 10px !important;
|
||||
padding-top: 12px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row {
|
||||
gap: 7px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-upload-inline {
|
||||
min-height: 36px !important;
|
||||
padding-inline: 10px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-send-button.ecom-command-send {
|
||||
width: 46px !important;
|
||||
height: 46px !important;
|
||||
min-width: 46px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
|
||||
border-radius: 20px !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
|
||||
min-height: 62px !important;
|
||||
padding: 12px !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover {
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
max-height: min(420px, calc(100vh - 128px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap {
|
||||
padding-inline: 14px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
|
||||
padding: 12px !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference {
|
||||
min-height: 74px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-input {
|
||||
min-height: 76px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button {
|
||||
flex: 1 1 calc(50% - 6px);
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
|
||||
min-height: 58px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 760px) and (min-width: 761px) {
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
padding-top: 64px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap {
|
||||
gap: 16px !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
|
||||
min-height: 64px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] {
|
||||
--ecom-history-offset: 0px !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history.ecom-command-history {
|
||||
display: grid !important;
|
||||
width: min(292px, calc(100vw - 72px)) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap {
|
||||
left: 50% !important;
|
||||
right: auto !important;
|
||||
transform: translateX(-50%) !important;
|
||||
width: min(920px, calc(100vw - 48px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] {
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] > .product-clone-shell.product-clone-shell {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
min-height: 100% !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
@@ -1797,3 +1797,81 @@ textarea.image-workbench-prompt {
|
||||
.image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
|
||||
.image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
|
||||
.image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
|
||||
|
||||
/* Global UI foundation patch: responsive guardrails for image tooling pages. */
|
||||
.image-workbench-page,
|
||||
.image-workbench-page :where(.image-workbench-topbar, .image-workbench-subbar, .image-workbench-main, .image-workbench-panel, .image-workbench-canvas, .image-workbench-result-grid, .image-workbench-result-card) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(input, textarea, select, button) {
|
||||
font-family: var(--font-sans);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(.image-workbench-topbar, .image-workbench-subbar, .image-workbench-result-actions, .image-workbench-inpaint-bottom-bar) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(.image-workbench-tool-strip, .image-workbench-mode-tabs) {
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(.image-workbench-tool-strip, .image-workbench-mode-tabs)::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(.image-workbench-result-item, .image-workbench-preview, .image-workbench-canvas) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(img, video, canvas) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.image-workbench-result-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
|
||||
align-content: start;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.image-workbench-topbar,
|
||||
.image-workbench-subbar {
|
||||
gap: var(--space-3);
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.image-workbench-camera-summary,
|
||||
.image-workbench-subbar__next--solo {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.image-workbench-result-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.image-workbench-result-actions {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.image-workbench-topbar,
|
||||
.image-workbench-subbar,
|
||||
.image-workbench-result-grid {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.image-workbench-result-actions button,
|
||||
.image-workbench-primary,
|
||||
.image-workbench-cancel {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1286,3 +1286,64 @@ textarea.image-workbench-prompt,
|
||||
justify-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global UI foundation patch: shared tool pages should not overflow on small screens. */
|
||||
.image-workbench-page,
|
||||
.token-usage-page,
|
||||
.image-workbench-page :where(.image-workbench-layout, .image-workbench-layout--inpaint, .image-workbench-layout--camera, .resolution-upscale-layout, .image-workbench-panel, .image-workbench-canvas),
|
||||
.token-usage-page :where(.token-panel, .token-member-card, .token-detail-grid, .token-stat-grid) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(input, textarea, select, button),
|
||||
.token-usage-page :where(input, textarea, select, button) {
|
||||
font-family: var(--font-sans);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.image-workbench-page :where(.image-workbench-topbar, .image-workbench-subbar, .image-workbench-mode-tabs),
|
||||
.token-usage-page :where(.token-usage-topbar, .token-range-tabs, .token-limit-row) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.image-workbench-layout,
|
||||
.image-workbench-layout--inpaint,
|
||||
.image-workbench-layout--camera,
|
||||
.resolution-upscale-layout {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.image-workbench-page,
|
||||
.token-usage-page {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.token-stat-grid,
|
||||
.token-detail-grid,
|
||||
.score-dimension-grid,
|
||||
.script-score-summary {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.token-range-tabs > *,
|
||||
.token-limit-row > *,
|
||||
.image-workbench-mode-tabs > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.image-workbench-page,
|
||||
.token-usage-page {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.token-limit-row input,
|
||||
.token-limit-row button,
|
||||
.image-workbench-primary {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1344,3 +1344,40 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global UI foundation patch: resilient card grids and tool actions. */
|
||||
.more-page-v2,
|
||||
.more-page-v2 :where(.more-page-v2__grid, .more-page-v2__featured-grid, .more-page-v2__recent-row, .more-card, .more-card__preview, .more-card__body) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.more-page-v2 :where(.more-page-v2__grid) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
||||
}
|
||||
|
||||
.more-page-v2 :where(.more-page-v2__header, .more-page-v2__header-meta, .more-card__actions, .more-card__steps) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.more-page-v2 :where(.more-card__preview img, .more-card__preview video) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.more-page-v2 {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.more-page-v2__grid,
|
||||
.more-page-v2__featured-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.more-page-v2 {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4153,3 +4153,89 @@
|
||||
.script-eval-v5.is-ready .script-eval-v5-status-dot {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Global UI foundation patch: V5 evaluation workspace responsive guardrails. */
|
||||
.script-eval-v5,
|
||||
.script-eval-v5 :where(.script-eval-v5-page, .script-eval-v5-left, .script-eval-v5-right, .script-eval-v5-right-content, .script-eval-v5-card, .script-eval-v5-hero, .script-eval-report, .script-eval-report__score-block, .script-eval-report__chart-card, .script-eval-report__path-card) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.script-eval-v5 :where(input, textarea, select, button) {
|
||||
font-family: var(--font-sans);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.script-eval-v5 :where(.script-eval-v5-topbar, .script-eval-v5-topbar-right, .script-eval-v5-tabs, .script-eval-v5-right-actions, .script-eval-v5-actions, .script-eval-v5-card-head, .script-eval-v5-chart-bottom, .script-eval-v5-statusbar) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.script-eval-v5 :where(.script-eval-v5-sug-table, .script-eval-report__table, .script-eval-report__chart-card) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.script-eval-v5-page {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.script-eval-v5-left {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-grid,
|
||||
.script-eval-v5-illust-grid,
|
||||
.script-eval-report__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.script-eval-v5 {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.script-eval-v5-topbar,
|
||||
.script-eval-v5-right-topbar,
|
||||
.script-eval-v5-statusbar {
|
||||
min-height: auto;
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.script-eval-v5-page,
|
||||
.script-eval-v5-right-content,
|
||||
.script-eval-v5-left {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.script-eval-v5-info-grid,
|
||||
.script-eval-v5-illust-grid,
|
||||
.script-eval-report__grid,
|
||||
.script-eval-v5-chart-dims,
|
||||
.script-eval-v5-do-inner {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.script-eval-v5-actions > *,
|
||||
.script-eval-v5-right-actions > *,
|
||||
.script-eval-v5-tabs > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.script-eval-v5-topbar,
|
||||
.script-eval-v5-right-topbar,
|
||||
.script-eval-v5-statusbar,
|
||||
.script-eval-v5-page,
|
||||
.script-eval-v5-right-content,
|
||||
.script-eval-v5-left {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.script-eval-v5-actions > button,
|
||||
.script-eval-v5-right-actions > button,
|
||||
.script-eval-v5-upload-btn,
|
||||
.script-eval-v5-eval-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5370,3 +5370,86 @@
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Global UI foundation patch: script and token pages should collapse without horizontal overflow. */
|
||||
.script-token-page,
|
||||
.token-usage-page,
|
||||
.settings-page,
|
||||
.script-eval-page,
|
||||
.script-token-page :where(.script-token-page__scroll, .script-token-hero, .script-result-stack, .token-panel, .token-member-card, .script-eval-shell, .script-eval-workbench, .script-eval-app, .script-eval-panel-left, .script-eval-panel-right, .script-eval-card, .script-eval-glass-card, .script-eval-score-card-v2) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.script-token-page :where(input, textarea, select, button),
|
||||
.token-usage-page :where(input, textarea, select, button),
|
||||
.settings-page :where(input, textarea, select, button),
|
||||
.script-eval-page :where(input, textarea, select, button) {
|
||||
font-family: var(--font-sans);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.script-token-page :where(.script-action-row, .token-usage-topbar, .token-range-tabs, .script-eval-actions, .script-eval-button-group, .script-eval-file-types, .script-eval-details-header, .script-eval-card__head, .management-center-toolbar) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.script-token-page :where(.script-eval-preview, .script-eval-import-strip, .script-eval-scoreboard, .script-eval-score-card-v2, .script-eval-details-list, .token-detail-grid, .settings-page__grid) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.script-eval-workbench,
|
||||
.script-eval-app,
|
||||
.script-eval-score-card-v2 {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.script-eval-insight-grid,
|
||||
.script-eval-details-list,
|
||||
.settings-page__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.script-token-page__scroll,
|
||||
.script-eval-shell,
|
||||
.settings-page__shell {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.script-token-hero,
|
||||
.script-eval-import-strip,
|
||||
.script-eval-preview,
|
||||
.script-eval-scoreboard,
|
||||
.script-eval-scoreboard--radar,
|
||||
.script-eval-insight-grid,
|
||||
.script-eval-criteria,
|
||||
.script-eval-details-list,
|
||||
.token-detail-grid,
|
||||
.settings-page__grid,
|
||||
.settings-page__grid article {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.script-action-row > *,
|
||||
.script-eval-actions > *,
|
||||
.script-eval-button-group > *,
|
||||
.token-range-tabs > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.script-token-page__scroll,
|
||||
.script-eval-shell,
|
||||
.settings-page__shell {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.script-action-row > button,
|
||||
.script-eval-actions > button,
|
||||
.script-eval-button-group > button,
|
||||
.settings-page__grid button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -677,6 +677,58 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.studio-tool-layout,
|
||||
.studio-tool-layout--no-left,
|
||||
.studio-tool-layout--no-right {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto auto minmax(280px, 1fr) 36px;
|
||||
grid-template-areas:
|
||||
"toolstrip"
|
||||
"left"
|
||||
"canvas"
|
||||
"status";
|
||||
}
|
||||
|
||||
.studio-tool-layout--no-left {
|
||||
grid-template-rows: auto minmax(280px, 1fr) 36px;
|
||||
grid-template-areas:
|
||||
"toolstrip"
|
||||
"canvas"
|
||||
"status";
|
||||
}
|
||||
|
||||
.studio-tool-layout--no-right {
|
||||
grid-template-areas:
|
||||
"toolstrip"
|
||||
"left"
|
||||
"canvas"
|
||||
"status";
|
||||
}
|
||||
|
||||
.studio-toolstrip {
|
||||
min-height: var(--toolbar-min-height);
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
padding-block: var(--space-3);
|
||||
}
|
||||
|
||||
.studio-toolstrip__left,
|
||||
.studio-segmented {
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.studio-panel,
|
||||
.studio-panel--right {
|
||||
display: grid;
|
||||
max-height: 340px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 1px solid var(--border-weak);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.studio-tool-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
@@ -694,3 +746,29 @@
|
||||
max-height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.studio-toolstrip,
|
||||
.studio-panel {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
|
||||
.studio-segmented {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.studio-segmented::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.studio-segmented__btn {
|
||||
flex: 1 0 auto;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.studio-status-bar {
|
||||
padding-inline: var(--space-5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,6 +30,10 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-strip > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.web-shell[data-theme="dark"] .event-strip {
|
||||
border-color: rgba(var(--accent-rgb), 0.2);
|
||||
background: var(--bg-panel);
|
||||
@@ -185,6 +189,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -1012,6 +1017,18 @@
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.event-strip {
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding-inline: 12px 40px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.event-strip::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-lockup__name {
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -1030,3 +1047,47 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.web-topbar {
|
||||
gap: 8px;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
flex: 1 1 auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.brand-lockup__name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.web-topbar__actions {
|
||||
flex: 0 1 auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.creator-button,
|
||||
.beta-apply-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cookie-consent {
|
||||
width: calc(100vw - 20px);
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.cookie-consent__actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cookie-consent__actions a,
|
||||
.cookie-consent__actions button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
+56
-2
@@ -44,8 +44,62 @@
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
|
||||
|
||||
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Microsoft YaHei", sans-serif;
|
||||
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
|
||||
"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
monospace;
|
||||
|
||||
/* Typography scale */
|
||||
--text-2xs: 10px;
|
||||
--text-xs: 11px;
|
||||
--text-sm: 12px;
|
||||
--text-md: 13px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-xl: 18px;
|
||||
--text-2xl: 20px;
|
||||
--text-3xl: 24px;
|
||||
--text-4xl: 28px;
|
||||
--text-5xl: 32px;
|
||||
--text-title: clamp(22px, 2.2vw, 32px);
|
||||
--text-display: clamp(28px, 3.2vw, 46px);
|
||||
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
--weight-heavy: 800;
|
||||
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.2;
|
||||
--leading-heading: 1.28;
|
||||
--leading-control: 1.35;
|
||||
--leading-body: 1.55;
|
||||
--leading-relaxed: 1.7;
|
||||
|
||||
/* Spacing scale */
|
||||
--space-1: 4px;
|
||||
--space-2: 6px;
|
||||
--space-3: 8px;
|
||||
--space-4: 10px;
|
||||
--space-5: 12px;
|
||||
--space-6: 16px;
|
||||
--space-7: 20px;
|
||||
--space-8: 24px;
|
||||
--space-9: 32px;
|
||||
--space-10: 40px;
|
||||
--space-11: 48px;
|
||||
|
||||
/* Responsive layout tokens */
|
||||
--breakpoint-sm: 480px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 992px;
|
||||
--breakpoint-xl: 1200px;
|
||||
--page-gutter: clamp(12px, 2vw, 32px);
|
||||
--panel-gutter: clamp(12px, 1.4vw, 24px);
|
||||
--card-min: min(100%, 240px);
|
||||
--form-control-min-height: 38px;
|
||||
--toolbar-min-height: 44px;
|
||||
|
||||
/* Semantic aliases used by the layered stylesheet structure. */
|
||||
--surface-canvas: var(--bg-base);
|
||||
|
||||
Reference in New Issue
Block a user