style: remove web-shell topbar banner and page top gradient
This commit is contained in:
+5
-1
@@ -350,7 +350,10 @@ function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ecommerce-standalone web-shell" data-theme="dark" data-ui-theme="dark-green" data-view="ecommerce">
|
<div className="ecommerce-standalone web-shell" data-theme="dark" data-ui-theme="dark-green" data-view="ecommerce">
|
||||||
<header className="ecommerce-standalone__topbar">
|
<header
|
||||||
|
className="ecommerce-standalone__topbar"
|
||||||
|
style={{ background: "transparent !important", border: "none !important", boxShadow: "none !important", backdropFilter: "none !important" }}
|
||||||
|
>
|
||||||
<button type="button" className="ecommerce-standalone__brand" onClick={handleOpenWorkspace}>
|
<button type="button" className="ecommerce-standalone__brand" onClick={handleOpenWorkspace}>
|
||||||
<span className="ecommerce-standalone__logo" aria-hidden="true">
|
<span className="ecommerce-standalone__logo" aria-hidden="true">
|
||||||
<img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" />
|
<img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" />
|
||||||
@@ -366,6 +369,7 @@ function App() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="ecommerce-profile-menu__trigger"
|
className="ecommerce-profile-menu__trigger"
|
||||||
|
style={{ background: "transparent !important", border: "none !important", boxShadow: "none !important" }}
|
||||||
onClick={() => setProfileMenuOpen((open) => !open)}
|
onClick={() => setProfileMenuOpen((open) => !open)}
|
||||||
aria-haspopup="dialog"
|
aria-haspopup="dialog"
|
||||||
aria-expanded={profileMenuOpen}
|
aria-expanded={profileMenuOpen}
|
||||||
|
|||||||
@@ -12,9 +12,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone__topbar {
|
.ecommerce-standalone__topbar {
|
||||||
position: fixed;
|
position: relative;
|
||||||
inset: 0 0 auto;
|
|
||||||
z-index: 80;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -22,8 +20,7 @@
|
|||||||
min-height: 64px;
|
min-height: 64px;
|
||||||
padding: 10px clamp(16px, 3vw, 32px);
|
padding: 10px clamp(16px, 3vw, 32px);
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
background: rgba(8, 12, 10, 0.78);
|
background: transparent;
|
||||||
backdrop-filter: blur(18px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone__brand,
|
.ecommerce-standalone__brand,
|
||||||
@@ -66,7 +63,6 @@
|
|||||||
|
|
||||||
.ecommerce-standalone__content {
|
.ecommerce-standalone__content {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding-top: 64px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 工作台与个人中心常驻同层,用 hidden 切换以保活生成任务状态。
|
/* 工作台与个人中心常驻同层,用 hidden 切换以保活生成任务状态。
|
||||||
@@ -230,7 +226,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone__content {
|
.ecommerce-standalone__content {
|
||||||
padding-top: 58px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -249,8 +244,7 @@
|
|||||||
|
|
||||||
.ecommerce-standalone__topbar {
|
.ecommerce-standalone__topbar {
|
||||||
border-bottom-color: rgba(126, 235, 255, 0.22);
|
border-bottom-color: rgba(126, 235, 255, 0.22);
|
||||||
background:
|
background: transparent;
|
||||||
linear-gradient(90deg, rgba(7, 72, 121, 0.94), rgba(4, 37, 75, 0.92));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone__brand::before {
|
.ecommerce-standalone__brand::before {
|
||||||
@@ -318,7 +312,7 @@
|
|||||||
|
|
||||||
.ecommerce-standalone__topbar {
|
.ecommerce-standalone__topbar {
|
||||||
border-bottom-color: rgba(30, 189, 219, 0.16) !important;
|
border-bottom-color: rgba(30, 189, 219, 0.16) !important;
|
||||||
background: #f8f9fa !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecommerce-standalone__brand::before {
|
.ecommerce-standalone__brand::before {
|
||||||
@@ -12263,26 +12257,12 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
/* #/imageWorkbench detail popover and topbar blend: no inner scrollbar, no hard header split. */
|
/* #/imageWorkbench detail popover and topbar blend: no inner scrollbar, no hard header split. */
|
||||||
html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar {
|
html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar {
|
||||||
border-bottom-color: transparent !important;
|
border-bottom-color: transparent !important;
|
||||||
background:
|
background: transparent !important;
|
||||||
radial-gradient(48rem 14rem at 50% 100%, rgba(30, 189, 219, 0.09), transparent 72%),
|
|
||||||
radial-gradient(28rem 12rem at 12% 100%, rgba(16, 115, 204, 0.045), transparent 68%),
|
|
||||||
linear-gradient(180deg, #fbfdfe 0%, #f8fbfc 100%) !important;
|
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
backdrop-filter: none !important;
|
backdrop-filter: none !important;
|
||||||
-webkit-backdrop-filter: none !important;
|
-webkit-backdrop-filter: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar::after {
|
|
||||||
position: absolute !important;
|
|
||||||
right: 0 !important;
|
|
||||||
bottom: -1px !important;
|
|
||||||
left: 0 !important;
|
|
||||||
height: 1px !important;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(30, 189, 219, 0.08), transparent) !important;
|
|
||||||
content: "" !important;
|
|
||||||
pointer-events: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-detail {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-detail {
|
||||||
width: min(468px, calc(100vw - 48px)) !important;
|
width: min(468px, calc(100vw - 48px)) !important;
|
||||||
max-width: min(468px, calc(100vw - 48px)) !important;
|
max-width: min(468px, calc(100vw - 48px)) !important;
|
||||||
@@ -12352,10 +12332,7 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
|
|
||||||
/* #/imageWorkbench topbar seamless blend: the header floats over the same canvas instead of reading as a separate band. */
|
/* #/imageWorkbench topbar seamless blend: the header floats over the same canvas instead of reading as a separate band. */
|
||||||
html body #root .ecommerce-standalone.web-shell {
|
html body #root .ecommerce-standalone.web-shell {
|
||||||
background:
|
background: #f8f9fa !important;
|
||||||
radial-gradient(circle at 19% 8%, rgba(30, 189, 219, 0.13), transparent 24rem),
|
|
||||||
radial-gradient(circle at 82% 11%, rgba(16, 115, 204, 0.09), transparent 26rem),
|
|
||||||
linear-gradient(180deg, #fbfdfe 0%, #f8f9fa 54%, #f5f9fb 100%) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar {
|
html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar {
|
||||||
@@ -17433,3 +17410,37 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide the topbar banner background while keeping brand and account in place. */
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__topbar {
|
||||||
|
border-bottom: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__topbar::after {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep topbar transparent and remove any background/border from inner controls. */
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__brand,
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__brand strong,
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__credits,
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__account button,
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-profile-menu__trigger {
|
||||||
|
color: #10202c !important;
|
||||||
|
background: transparent !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
background-image: none !important;
|
||||||
|
border: none !important;
|
||||||
|
border-color: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__credits {
|
||||||
|
color: #3a5a6a !important;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user