feat: enhance ecommerce UI with typewriter animation, icon buttons, responsive layout, and refined design tokens
- EcommercePage.tsx: Add typewriter animation (useTypewriter hook) for slogan text with blinking cursor; replace text-based add/delete buttons with Ant Design icons (CloudUploadOutlined, DeleteOutlined); make command history panel responsive to window width (auto-collapse ≤1180px); update button labels from generic "添加" to context-specific "上传商品图" / "上传素材" - New useTypewriter.ts hook: Character-by-character typewriter animation with configurable speed and pause-before-loop, auto-resets on text change - reset.css: Add comprehensive HTML/body typography baseline (font-size, text-rendering, font-smoothing, line-height); extend reset coverage to select/canvas/svg elements; add overflow-wrap:anywhere for text-bearing elements; add min-width:0 to prevent form element overflow - primitives.css: Add reusable typography utility classes (ui-page-title, ui-section-title, ui-body-copy) with design token references - tokens.css: Expand design token set for typography scales, font weights, and leading values - ecommerce-standalone.css: Add 689 lines of standalone ecommerce page styles - Page CSS (ecommerce, image-workbench, more-tools, more, script-tokens, script-tokens-v5, studio-layout): Enhanced visual styles and layout refinements across all pages - app-shell.css: Shell-level layout and styling improvements
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user