feat: 电商页面视觉精修,全局页面滚动按钮交互简化
AppShell.tsx: - 全局页面滚动操作按钮(floating-page-scroll-actions)暂时关闭 - 后续将通过页面级滚动交互替代全局滚动按钮 EcommercePage.tsx(电商生成页功能增强): - 预览区header下方新增生成配置摘要条(clone-ai-preview-summary) - 展示当前选择的输出类型、平台、市场、语言、比例参数 - 方便用户快速确认当前生成配置无误 ecommerce.css(电商页面视觉精修): - 新增CSS自定义属性体系(ecm-*),统一电商页面颜色/间距/阴影 - 页面背景增加accent径向光晕和半透明渐变叠加 - 设置面板/预览区域卡片增加毛玻璃质感和微阴影 - 文本颜色层级化(ecm-text/ecm-muted/ecm-soft) - 保持现有布局结构不变,仅提升视觉效果 dark-green.css(暗绿主题电商按钮状态精修): - 电商页面各工具模块按钮active态增加相对定位和overflow控制 - clone/set/detail/wear工具中is-active按钮状态一致性增强 - 限定在[data-view="ecommerce"]作用域内,避免全局污染
This commit is contained in:
@@ -8881,3 +8881,67 @@
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ecommerce final polish: keep selected option states refined in the dark-green theme. */
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-module-list button,
|
||||
.clone-ai-model-scene-grid button,
|
||||
.clone-ai-replicate-levels button,
|
||||
.clone-ai-video-options button
|
||||
),
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
|
||||
.product-set-structure-grid button,
|
||||
.product-detail-module-grid button,
|
||||
.product-clone-scene-grid button,
|
||||
.product-clone-ratio-row button
|
||||
) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-module-list button.is-active,
|
||||
.clone-ai-model-scene-grid button.is-active,
|
||||
.clone-ai-replicate-levels button.is-active,
|
||||
.clone-ai-video-options button.is-active
|
||||
),
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
|
||||
.product-set-structure-grid button.is-active,
|
||||
.product-detail-module-grid button.is-active,
|
||||
.product-clone-scene-grid button.is-active,
|
||||
.product-clone-ratio-row button.is-active
|
||||
) {
|
||||
border-color: rgba(var(--accent-rgb), 0.48);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.035)),
|
||||
rgba(255, 255, 255, 0.032);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-module-list button.is-active,
|
||||
.clone-ai-model-scene-grid button.is-active,
|
||||
.clone-ai-replicate-levels button.is-active,
|
||||
.clone-ai-video-options button.is-active
|
||||
)::before,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
|
||||
.product-set-structure-grid button.is-active,
|
||||
.product-detail-module-grid button.is-active,
|
||||
.product-clone-scene-grid button.is-active,
|
||||
.product-clone-ratio-row button.is-active
|
||||
)::before {
|
||||
position: absolute;
|
||||
inset: 8px auto 8px 0;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active span,
|
||||
.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
|
||||
.product-set-structure-grid button.is-active em,
|
||||
.product-detail-module-grid button.is-active span
|
||||
) {
|
||||
color: rgba(232, 240, 235, 0.62);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user