style: force transparent topbar via inline styles

This commit is contained in:
2026-06-16 14:51:12 +08:00
parent f1be7d8d66
commit 34c654bd63
2 changed files with 39 additions and 1 deletions
+5 -1
View File
@@ -350,7 +350,10 @@ function App() {
return (
<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", border: "none", boxShadow: "none", backdropFilter: "none" }}
>
<button type="button" className="ecommerce-standalone__brand" onClick={handleOpenWorkspace}>
<span className="ecommerce-standalone__logo" aria-hidden="true">
<img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" />
@@ -366,6 +369,7 @@ function App() {
<button
type="button"
className="ecommerce-profile-menu__trigger"
style={{ background: "transparent", border: "none", boxShadow: "none" }}
onClick={() => setProfileMenuOpen((open) => !open)}
aria-haspopup="dialog"
aria-expanded={profileMenuOpen}
+34
View File
@@ -17433,3 +17433,37 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
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;
}