OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 2 Actions 16 Packages Projects Releases Wiki Activity

feat: enhance scenario tabs with more/expand toggle, template carousel navigation, and 16 new templates

Browse Source 
- package.json: Add @phosphor-icons/react ^2.1.10 dependency for additional icon set
- package-lock.json: Sync lockfile with new dependency and clean peer:true markers

- EcommercePage.tsx:
  - Reorder scenario tabs: model (模特图) moved to position 3 after mainImage
  - Add primaryCommerceScenarioKeys to define first 4 visible scenarios (popular/poster/mainImage/model)
  - Change activeCommerceScenario initial state from "popular" to null — no scenario auto-selected on mount
  - Add isCommerceScenarioMoreOpen state to toggle expanded scenario list
  - Add templateStripRef for programmatic scroll control
  - visibleCommerceScenarioOptions: filter to primary keys by default, show all when expanded
  - "更多/收起" toggle button with dashed border, dynamic icon (··· or CloseOutlined)
  - isCloneTemplateStripVisible defaults to false — template strip hidden until scenario clicked
  - activeCommerceScenarioTemplates: returns empty array when no scenario selected
  - Template strip wrapped in ecom-command-template-carousel with prev/next navigation arrows (‹ ›)
  - scrollCommerceTemplateStrip(direction): smooth scroll by card width or viewport step
  - handleCommerceScenarioMoreToggle: expand/collapse scenario list
  - handleCloneTemplateCardClick: now also sets activeCommerceScenario to card.scenario
  - Scroll hint text: "点击更多查看全部场景" when collapsed, "左右滑动查看全部场景" when expanded
  - Auto-scroll template strip to left on scenario/visibility change via useEffect

  - Add 16 new CommerceScenarioTemplate cards:
    - poster: 节日礼赠海报, 奢品香水海报
    - mainImage: 模特展示主图, 细节质感主图
    - model: 男装夹克模特, 帽子配饰模特
    - scene: 户外露营场景, 美妆喷雾场景
    - festival: 父亲节礼盒图, 香薰蜡烛礼盒
    - background: 高级灰背景, 居家背景
    - retouch: 色彩统一精修, 细节锐化精修
    - salesVideo: 痛点种草视频, 温馨开箱视频

- ecommerce-standalone.css (+559 lines):
  - Scenario shell (.ecom-command-scenario-shell): centered flex wrapper with padding
  - Scenario tabs: pill-shaped buttons (border-radius 999px), gradient backgrounds, scroll-snap
  - "更多" button: dashed border in collapsed state, solid when expanded
  - Template carousel (.ecom-command-template-carousel): horizontal scroll with snap, smooth scroll-behavior, hidden scrollbar
  - Carousel fade edges: ::before/::after gradient masks (54px width)
  - Navigation arrows (.ecom-command-template-nav): circular buttons positioned absolute at edges, hover/focus reveal with scale transition, opacity 0→1 on carousel hover
  - Template cards: flexible sizing (clamp 260px-312px), 96px media thumbnail, scroll-snap-align start
  - Per-scenario color mapping via --mode-accent: popular pink, poster/festival orange, mainImage/scene/background green, model/retouch/salesVideo blue, more blue
  - Active state: radial gradient glow + color-mix border/shadow from --mode-accent
  - Scroll hint: animated ← → arrows (ecom-scroll-hint-left/right keyframes at 1.6s infinite)
  - Responsive: ≤900px left-aligned tabs + persistent nav arrows, ≤640px compact sizing, full-width carousel with overflow hidden
This commit is contained in:
ludan
2026-06-17 10:16:40 +08:00
parent 0e24ccf7b1
commit e86cd18f1d
4 changed files with 819 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/ecommerce-standalone.css
+512 -47
View File
@@ -17437,27 +17437,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
/* Ecommerce home scenario templates */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: fit-content !important;
max-width: min(100%, 1120px) !important;
margin: 0 auto 12px !important;
padding: 6px !important;
box-sizing: border-box !important;
align-items: stretch !important;
justify-content: center !important;
gap: 9px !important;
width: min(100%, 1180px) !important;
margin: 0 auto 10px !important;
padding: 5px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
scroll-snap-type: x proximity !important;
border: 1px solid rgba(30, 189, 219, 0.12) !important;
border-radius: 24px !important;
background: rgba(255, 255, 255, 0.42) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.68),
0 10px 28px rgba(16, 115, 204, 0.05) !important;
backdrop-filter: blur(16px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs::-webkit-scrollbar {
@@ -17479,9 +17471,9 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
min-height: 40px !important;
padding: 7px 14px 7px 10px !important;
scroll-snap-align: start !important;
border: 1px solid rgba(16, 32, 44, 0.07) !important;
border: 1px solid color-mix(in srgb, var(--mode-accent) 16%, transparent) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.68) !important;
background: color-mix(in srgb, var(--mode-accent) 7%, rgba(255, 255, 255, 0.68)) !important;
color: rgba(16, 32, 44, 0.68) !important;
box-shadow:
0 2px 6px rgba(16, 32, 44, 0.03),
@@ -17501,15 +17493,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
background: rgba(255, 255, 255, 0.86) !important;
border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important;
color: rgba(16, 32, 44, 0.86) !important;
background: color-mix(in srgb, var(--mode-accent) 18%, rgba(255, 255, 255, 0.88)) !important;
border-color: color-mix(in srgb, var(--mode-accent) 48%, transparent) !important;
color: rgba(16, 32, 44, 0.88) !important;
box-shadow:
0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent),
0 8px 20px color-mix(in srgb, var(--mode-accent) 16%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
transform: translateY(-1px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover .ecom-command-mode-icon {
background: color-mix(in srgb, var(--mode-accent) 20%, rgba(255, 255, 255, 0.85)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active {
background:
radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 54%),
@@ -17540,24 +17536,22 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs .ecom-command-mode-icon {
grid-row: auto !important;
display: inline-grid !important;
width: 22px !important;
min-width: 22px !important;
height: 22px !important;
width: 26px !important;
min-width: 26px !important;
height: 26px !important;
place-items: center !important;
border: 0 !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important;
color: var(--mode-accent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
font-size: 13px !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
font-size: 17px !important;
line-height: 1 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important;
background: transparent !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs strong {
@@ -17616,24 +17610,39 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
--mode-accent: #c04468;
--mode-accent: #D45C5C;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster) {
--mode-accent: #7A6BD1;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage) {
--mode-accent: #2E9E9E;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model) {
--mode-accent: #B56B7A;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene) {
--mode-accent: #4A9B7F;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
--mode-accent: #cc6b14;
--mode-accent: #C78A3E;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
--mode-accent: #0f8f72;
--mode-accent: #5A8BAE;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch) {
--mode-accent: #9A8BB8;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo) {
--mode-accent: #1073cc;
--mode-accent: #3A7CA5;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-strip {
@@ -17742,13 +17751,42 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
display: block !important;
width: min(100%, 1180px) !important;
margin: -4px auto 6px !important;
margin: -6px auto 4px !important;
text-align: center !important;
font-size: 11px !important;
font-weight: 480 !important;
line-height: 1 !important;
color: rgba(16, 32, 44, 0.36) !important;
color: rgba(16, 32, 44, 0.26) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
display: inline-block !important;
font-size: 10px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before {
content: "←" !important;
margin-right: 5px !important;
animation: ecom-scroll-hint-left 1.6s ease-in-out infinite !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
content: "→" !important;
margin-left: 5px !important;
animation: ecom-scroll-hint-right 1.6s ease-in-out infinite !important;
animation-delay: 0.8s !important;
}
}
@keyframes ecom-scroll-hint-left {
0%, 100% { opacity: 0.25; transform: translateX(0); }
50% { opacity: 0.6; transform: translateX(-2px); }
}
@keyframes ecom-scroll-hint-right {
0%, 100% { opacity: 0.25; transform: translateX(0); }
50% { opacity: 0.6; transform: translateX(2px); }
}
@media (max-width: 640px) {
@@ -18320,3 +18358,430 @@ html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"][data-w
background: rgba(232, 249, 253, 0.92) !important;
transform: translateY(-1px) !important;
}
/* Ecommerce home scenario navigation and template carousel refinement */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
display: flex !important;
justify-content: center !important;
width: 100% !important;
margin: 0 auto 10px !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 4px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
scroll-snap-type: x proximity !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
min-height: 42px !important;
padding: 8px 15px 8px 11px !important;
border-radius: 999px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 253, 255, 0.78)) !important;
box-shadow:
0 8px 22px rgba(16, 115, 204, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
padding-right: 31px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more {
--mode-accent: #1073cc;
border-style: dashed !important;
color: rgba(16, 32, 44, 0.64) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more.is-open {
border-style: solid !important;
color: rgba(16, 32, 44, 0.92) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-mode-icon--more {
background: rgba(232, 249, 253, 0.82) !important;
color: #1073cc !important;
font-size: 14px !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
display: block !important;
width: min(100%, 1180px) !important;
margin: -6px auto 8px !important;
text-align: center !important;
color: rgba(16, 32, 44, 0.28) !important;
font-size: 11px !important;
font-weight: 620 !important;
line-height: 1.1 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
position: relative !important;
justify-self: center !important;
width: 100% !important;
max-width: 1180px !important;
min-width: 0 !important;
margin: 16px auto 12px !important;
box-sizing: border-box !important;
isolation: isolate !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
z-index: 2 !important;
width: 54px !important;
pointer-events: none !important;
opacity: 0.9 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before {
left: 0 !important;
background: linear-gradient(90deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after {
right: 0 !important;
background: linear-gradient(270deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip {
display: flex !important;
grid-template-columns: none !important;
gap: 14px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 2px 2px 6px !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth !important;
scroll-padding: 4px !important;
scroll-snap-type: x mandatory !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip::-webkit-scrollbar {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
flex: 0 0 clamp(260px, 24vw, 312px) !important;
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
min-height: 126px !important;
scroll-snap-align: start !important;
border-color: rgba(30, 189, 219, 0.13) !important;
border-radius: 18px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 253, 0.9)) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
position: absolute !important;
top: 50% !important;
z-index: 4 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
border: 1px solid rgba(30, 189, 219, 0.2) !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.92) !important;
color: #1073cc !important;
box-shadow: 0 12px 28px rgba(16, 115, 204, 0.14) !important;
font-size: 24px !important;
font-weight: 760 !important;
line-height: 1 !important;
cursor: pointer !important;
opacity: 0 !important;
transform: translateY(-50%) scale(0.94) !important;
transition:
opacity 180ms ease,
transform 180ms ease,
border-color 180ms ease,
background 180ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--prev {
left: 8px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--next {
right: 8px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel:hover .ecom-command-template-nav,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:focus-visible {
opacity: 1 !important;
transform: translateY(-50%) scale(1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:hover {
border-color: rgba(30, 189, 219, 0.42) !important;
background: rgba(232, 249, 253, 0.98) !important;
transform: translateY(-50%) scale(1.04) !important;
}
@media (max-width: 900px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
justify-content: flex-start !important;
padding-right: 12px !important;
padding-left: 12px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
justify-content: flex-start !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
width: 100% !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
opacity: 0.86 !important;
transform: translateY(-50%) scale(0.96) !important;
}
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
padding-right: 8px !important;
padding-left: 8px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
gap: 8px !important;
padding-bottom: 6px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
min-height: 40px !important;
padding: 7px 12px 7px 9px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
flex-basis: min(82vw, 340px) !important;
grid-template-columns: 86px minmax(0, 1fr) !important;
min-height: 116px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card__media {
width: 86px !important;
min-width: 86px !important;
height: 96px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
width: 34px !important;
height: 34px !important;
font-size: 21px !important;
}
}
/* Keep scenario tabs on the original ecommerce theme instead of category-specific colors. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
margin-bottom: 2px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
--mode-accent: #0f8fa8 !important;
border-color: rgba(30, 189, 219, 0.15) !important;
background: rgba(255, 255, 255, 0.72) !important;
color: rgba(16, 32, 44, 0.74) !important;
box-shadow:
0 6px 18px rgba(16, 115, 204, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
border-color: rgba(30, 189, 219, 0.24) !important;
background: rgba(255, 255, 255, 0.84) !important;
color: rgba(16, 32, 44, 0.88) !important;
box-shadow:
0 8px 20px rgba(16, 115, 204, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
border-color: rgba(30, 189, 219, 0.34) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 253, 255, 0.86)) !important;
color: rgba(16, 32, 44, 0.94) !important;
box-shadow:
0 10px 24px rgba(16, 115, 204, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon {
background: rgba(232, 249, 253, 0.86) !important;
color: #0f829b !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
background: rgba(220, 247, 252, 0.95) !important;
color: #0b8ea6 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 3px 8px rgba(30, 189, 219, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more {
border-style: solid !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
max-height: 10px !important;
margin: -6px auto 2px !important;
opacity: 0.36 !important;
color: rgba(16, 32, 44, 0.22) !important;
font-size: 10px !important;
font-weight: 560 !important;
line-height: 10px !important;
transform: scale(0.92) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
content: none !important;
display: none !important;
animation: none !important;
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
width: 100% !important;
max-width: calc(100vw - 16px) !important;
padding-right: 0 !important;
padding-left: 0 !important;
overflow: hidden !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
width: 100% !important;
max-width: 100% !important;
justify-content: flex-start !important;
padding-right: 2px !important;
padding-left: 2px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
overflow: hidden !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
flex-basis: min(78vw, 320px) !important;
}
}
/* Restore the colorful scenario feedback while keeping the compact responsive layout. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
--mode-accent: #c04468 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
--mode-accent: #cc6b14 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
--mode-accent: #0f8f72 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.ecom-command-scenario-more {
--mode-accent: #1073cc !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
border-color: rgba(16, 32, 44, 0.07) !important;
background: rgba(255, 255, 255, 0.68) !important;
color: rgba(16, 32, 44, 0.68) !important;
box-shadow:
0 2px 6px rgba(16, 32, 44, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon {
background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important;
color: var(--mode-accent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important;
background: rgba(255, 255, 255, 0.86) !important;
color: rgba(16, 32, 44, 0.86) !important;
box-shadow:
0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
border-color: color-mix(in srgb, var(--mode-accent) 42%, transparent) !important;
background:
radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 17%, transparent), transparent 52%),
rgba(255, 255, 255, 0.98) !important;
color: rgba(16, 32, 44, 0.96) !important;
box-shadow:
0 12px 28px color-mix(in srgb, var(--mode-accent) 15%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important;
color: var(--mode-accent) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important;
}