style: force transparent topbar via inline styles
This commit is contained in:
+5
-1
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user