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

feat: optimize ecommerce hot clone UI

Browse Source
This commit is contained in:
Codex
2026-06-15 15:26:49 +08:00
parent 48262d6233
commit 9a9c7eb86d
3 changed files with 995 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/ecommerce-standalone.css
+547 -5
View File
@@ -4537,6 +4537,275 @@
display: none !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page {
display: block !important;
height: 100% !important;
min-height: calc(100vh - 58px) !important;
overflow: hidden !important;
background: #f3f5f8 !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .product-clone-shell {
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .product-clone-rail,
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .product-clone-panel,
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .clone-ai-settings-toggle,
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-command-history {
display: none !important;
}
/* ── Hot Clone: requirement input in left panel ── */
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: 2px !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__head > strong {
font-size: 13px !important;
font-weight: 800 !important;
color: #1a2b3c !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__input {
position: relative !important;
min-height: 158px !important;
border: 1px dashed rgba(30, 189, 219, 0.34) !important;
border-radius: 8px !important;
background: linear-gradient(180deg, rgba(237, 248, 255, 0.72), rgba(255, 255, 255, 0.94)) !important;
overflow: hidden !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__input textarea {
display: block !important;
width: 100% !important;
min-height: 140px !important;
max-height: 240px !important;
resize: none !important;
border: 0 !important;
outline: none !important;
padding: 14px 14px 24px !important;
color: #172636 !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__input textarea::placeholder {
color: #9badb9 !important;
font-weight: 500 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__input > span {
position: absolute !important;
right: 12px !important;
bottom: 6px !important;
color: #9badb9 !important;
font-size: 11px !important;
font-weight: 600 !important;
pointer-events: none !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__ai {
padding: 3px 12px !important;
border: 1.5px solid rgba(16, 115, 204, 0.18) !important;
border-radius: 20px !important;
background: linear-gradient(135deg, rgba(16, 115, 204, 0.06), rgba(25, 173, 200, 0.06)) !important;
color: #1073cc !important;
font-size: 11px !important;
font-weight: 800 !important;
cursor: pointer !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: background 160ms ease, border-color 160ms ease !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-requirement__ai:hover {
background: linear-gradient(135deg, rgba(16, 115, 204, 0.12), rgba(25, 173, 200, 0.12)) !important;
border-color: rgba(16, 115, 204, 0.3) !important;
}
/* ── Hot Clone: material upload with images ── */
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 12px !important;
place-items: unset !important;
background: #f9fafa !important;
border: 1px solid rgba(30, 189, 219, 0.22) !important;
border-style: solid !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs {
display: contents !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs figure {
position: relative !important;
width: 80px !important;
height: 80px !important;
margin: 0 !important;
border: 1px solid #e8edf0 !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #fff !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs figure > img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 9px !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs figure > button {
position: absolute !important;
top: 4px !important;
right: 4px !important;
width: 20px !important;
height: 20px !important;
border: none !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.48) !important;
color: #fff !important;
font-size: 11px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
opacity: 0 !important;
transition: opacity 140ms ease, background 140ms ease !important;
padding: 0 !important;
z-index: 3 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs figure:hover > button {
opacity: 1 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs figure > button:hover {
background: rgba(220, 53, 69, 0.85) !important;
}
/* Hide old CSS zoom in material section (portal replaces it) */
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-zoom {
display: none !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-add-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 80px !important;
height: 80px !important;
border: 1px solid #e8edf0 !important;
border-radius: 10px !important;
color: #3a4555 !important;
background: #f5f5f5 !important;
font-size: 22px !important;
cursor: pointer !important;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease !important;
flex-shrink: 0 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-add-btn:hover {
color: #ffffff !important;
background: linear-gradient(135deg, #1073cc, #1ebddb) !important;
border-color: #1073cc !important;
}
/* ── Hot Clone: sticky bottom action buttons ── */
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-actions {
position: sticky !important;
bottom: 0 !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 -14px -86px -14px !important;
padding: 14px 14px 16px !important;
background: linear-gradient(to top, #feffff 60%, rgba(254, 255, 255, 0.92) 80%, transparent) !important;
backdrop-filter: blur(6px) !important;
flex-shrink: 0 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-actions .ecom-quick-set-primary {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-actions .ecom-quick-set-primary--cancel.is-disabled {
color: #c0ccd4 !important;
background: #f0f3f5 !important;
border-color: #e4e9ec !important;
cursor: not-allowed !important;
opacity: 0.55 !important;
}
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-hot-actions .ecom-quick-set-primary--cancel.is-disabled:hover {
color: #c0ccd4 !important;
background: #f0f3f5 !important;
border-color: #e4e9ec !important;
}
/* ── Hot Clone: stage fills space without prompt ── */
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-set-stage {
grid-template-rows: auto minmax(0, 1fr) !important;
}
/* ── Hot Clone: portal zoom preview (avoids overflow clipping) ── */
.ecom-hot-material-zoom-portal {
position: fixed !important;
z-index: 2147483647 !important;
width: min(280px, calc(100vw - 24px)) !important;
max-height: 340px !important;
border: 1px solid rgba(30, 189, 219, 0.2) !important;
border-radius: 14px !important;
background: #ffffff !important;
padding: 8px !important;
box-shadow: 0 22px 48px rgba(20, 80, 100, 0.22) !important;
pointer-events: none !important;
isolation: isolate !important;
}
.ecom-hot-material-zoom-portal.is-above {
transform: translate(-50%, -100%) !important;
}
.ecom-hot-material-zoom-portal.is-below {
transform: translate(-50%, 0) !important;
}
.ecom-hot-material-zoom-portal img {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: 324px !important;
border-radius: 8px !important;
object-fit: contain !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page {
display: block !important;
height: 100% !important;
@@ -6783,31 +7052,36 @@
background: rgba(16, 115, 204, 0.28) !important;
}
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel {
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel,
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-set-panel {
overflow-y: auto !important;
padding-bottom: 16px !important;
scrollbar-width: auto !important;
scrollbar-color: rgba(16, 115, 204, 0.56) rgba(16, 115, 204, 0.08) !important;
}
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar {
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar,
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-set-panel::-webkit-scrollbar {
display: block !important;
width: 14px !important;
height: 14px !important;
}
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-track {
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-track,
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-set-panel::-webkit-scrollbar-track {
border-radius: 999px !important;
background: rgba(16, 115, 204, 0.08) !important;
}
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-thumb {
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-thumb,
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-set-panel::-webkit-scrollbar-thumb {
border: 3px solid rgba(248, 249, 250, 0.95) !important;
border-radius: 999px !important;
background: rgba(16, 115, 204, 0.56) !important;
}
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-thumb:hover {
.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-thumb:hover,
.ecommerce-standalone .ecom-quick-hot-page .ecom-quick-set-panel::-webkit-scrollbar-thumb:hover {
background: rgba(16, 115, 204, 0.72) !important;
}
@@ -11773,6 +12047,15 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
--quick-text: #164e63;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--hot {
--quick-accent: #e8590c;
--quick-bg: #fff4e6;
--quick-text: #5c2d0e;
--quick-icon: #d9480f;
--quick-border: rgba(232, 89, 12, 0.12);
--quick-shadow: rgba(232, 89, 12, 0.1);
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span,
@@ -13172,6 +13455,7 @@ 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"] .ecom-command-quick-board .ecom-command-quick-card--detail,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--hot,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark {
@@ -13397,6 +13681,16 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
--quick-shadow: rgba(122, 90, 248, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--hot {
--quick-accent: #e8590c !important;
--quick-bg: #fff4e6 !important;
--quick-text: #5c2d0e !important;
--quick-icon: #d9480f !important;
--quick-icon-bg: rgba(232, 89, 12, 0.13) !important;
--quick-border: rgba(232, 89, 12, 0.12) !important;
--quick-shadow: rgba(232, 89, 12, 0.1) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit {
--quick-accent: #cc6b14 !important;
--quick-bg: #fff2e5 !important;
@@ -14081,3 +14375,251 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
margin: 0 !important;
font-size: 22px !important;
}
/* Hot clone uploaded material thumbnails: compact grid and consistent delete control. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
align-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 10px !important;
border: 1px solid #e8edf0 !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: none !important;
transform: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images:focus-visible,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images.is-dragging {
border-color: rgba(30, 189, 219, 0.42) !important;
background: #fbfdff !important;
box-shadow: 0 10px 24px rgba(16, 115, 204, 0.08) !important;
transform: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-upload-thumbs {
display: contents !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb {
position: relative !important;
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
min-height: 64px !important;
margin: 0 !important;
overflow: hidden !important;
border: 1px solid #e8edf0 !important;
border-radius: 8px !important;
background: #f6f8fa !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > img {
display: block !important;
width: 100% !important;
height: 100% !important;
border-radius: 7px !important;
object-fit: cover !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button {
position: absolute !important;
top: 4px !important;
right: 4px !important;
z-index: 6 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
padding: 0 !important;
border: 1px solid rgba(239, 68, 68, 0.42) !important;
border-radius: 999px !important;
color: #ef4444 !important;
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16) !important;
cursor: pointer !important;
opacity: 0 !important;
pointer-events: none !important;
transform: scale(0.92) !important;
visibility: hidden !important;
transition:
opacity 150ms ease,
transform 150ms ease,
background 150ms ease,
box-shadow 150ms ease,
visibility 150ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb:hover > button,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb:focus-within > button {
opacity: 1 !important;
pointer-events: auto !important;
transform: scale(1) !important;
visibility: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button:hover {
border-color: rgba(220, 38, 38, 0.72) !important;
color: #dc2626 !important;
background: #fff1f2 !important;
box-shadow: 0 10px 22px rgba(220, 38, 38, 0.22) !important;
transform: scale(1.04) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button .anticon {
display: inline-flex !important;
font-size: 13px !important;
line-height: 1 !important;
color: currentColor !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-hot-add-btn {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
min-height: 64px !important;
border: 1px solid #e8edf0 !important;
border-radius: 8px !important;
color: #111827 !important;
background: #f3f4f6 !important;
box-shadow: none !important;
font-size: 22px !important;
transform: none !important;
}
/* Keep hot material upload controls visible after files are added. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 10px !important;
min-height: 0 !important;
height: auto !important;
padding: 10px !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs {
display: contents !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
min-height: 64px !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > img {
overflow: hidden !important;
border-radius: 8px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button {
top: -7px !important;
right: -7px !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
color: #ef4444 !important;
background: #ffffff !important;
border: 1px solid rgba(239, 68, 68, 0.5) !important;
box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button svg {
display: block !important;
width: 12px !important;
height: 12px !important;
color: currentColor !important;
fill: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn {
display: inline-flex !important;
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
min-height: 64px !important;
margin: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete {
position: absolute !important;
top: -8px !important;
right: -8px !important;
z-index: 20 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
padding: 0 !important;
overflow: visible !important;
border: 1px solid rgba(239, 68, 68, 0.62) !important;
border-radius: 999px !important;
color: #ef4444 !important;
background: #ffffff !important;
box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16) !important;
cursor: pointer !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
visibility: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete:hover {
border-color: #dc2626 !important;
color: #dc2626 !important;
background: #fff1f2 !important;
box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24) !important;
transform: scale(1.04) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete svg {
display: block !important;
width: 14px !important;
height: 14px !important;
stroke: currentColor !important;
stroke-width: 1.9 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
fill: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material:not(.has-images) {
min-height: 94px !important;
padding: 12px 14px !important;
gap: 6px !important;
}