diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index 0d5ecd5a7..a456ef2b3 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -136,9 +136,13 @@ z-index: 2; } -:root[zen-single-toolbar='true'] #nav-bar { - border-top: none !important; - --zen-toolbar-height: 37px; +#nav-bar { + border-top-color: transparent !important; + + :root[zen-single-toolbar='true'] & { + border-top: none !important; + --zen-toolbar-height: 37px; + } } #zen-main-app-wrapper { diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index 22f781a18..82733464f 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -511,18 +511,27 @@ body > #confetti { position: absolute; width: 100%; height: 100%; - background: linear-gradient( - to bottom, - light-dark(rgb(255, 255, 255), rgb(34, 34, 34)), - light-dark(rgb(246, 246, 246), rgb(21, 21, 21)) - ); + @media (-moz-platform: macos) { + background: linear-gradient( + to bottom, + light-dark(rgb(255, 255, 255), rgb(34, 34, 34)), + light-dark(rgb(246, 246, 246), rgb(21, 21, 21)) + ); + + box-shadow: + 0px 2px 4px rgba(0, 0, 0, 0.075), + inset 0px 1px 0px light-dark(transparent, rgba(255, 255, 255, 0.15)); + border-radius: 6px; + --base-border-color: light-dark(rgba(0, 0, 0, 0.175), rgba(255, 255, 255, 0.1)); + border: 1px solid light-dark(var(--base-border-color), rgb(21, 21, 21)); + } + + @media not (-moz-platform: macos) { + border-radius: 6px; + background-color: color-mix(in srgb, currentcolor 6%, transparent); + } + transition: transform 0.12s ease-in-out; - box-shadow: - 0px 2px 4px rgba(0, 0, 0, 0.075), - inset 0px 1px 0px light-dark(transparent, rgba(255, 255, 255, 0.15)); - border-radius: 6px; - --base-border-color: light-dark(rgba(0, 0, 0, 0.175), rgba(255, 255, 255, 0.1)); - border: 1px solid light-dark(var(--base-border-color), rgb(21, 21, 21)); box-sizing: border-box; will-change: transform; } diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs index 6e8a1d667..343d1ffd9 100644 --- a/src/zen/glance/ZenGlanceManager.mjs +++ b/src/zen/glance/ZenGlanceManager.mjs @@ -457,7 +457,7 @@ opacity: [1, 0], }, { - duration: 0.3, + duration: 0.25, easing: 'easeInOut', } ); diff --git a/src/zen/glance/zen-glance.css b/src/zen/glance/zen-glance.css index 92ac15c9e..f5f9fb0b4 100644 --- a/src/zen/glance/zen-glance.css +++ b/src/zen/glance/zen-glance.css @@ -176,5 +176,6 @@ top: 0%; left: 50%; translate: -50% 0%; + max-height: 100%; will-change: transform, opacity; } diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs index 63fe006a3..49084fe3f 100644 --- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs +++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs @@ -580,7 +580,6 @@ export class nsZenSiteDataPanel { }; checkEmptyTab(); }); - this.anchor.setAttribute('open', 'true'); const callout = new FeatureCallout({ win: this.window, location: 'chrome',