diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css index f30456e67..d1b09714c 100644 --- a/src/browser/base/content/zen-styles/zen-animations.css +++ b/src/browser/base/content/zen-styles/zen-animations.css @@ -18,14 +18,20 @@ } } -@keyframes zen-jello-animation-alt { +@keyframes zen-jello-animation-macos { 0% { - transform: scale3d(0.8, 0.8, 0.8); + opacity: 0; + -moz-window-transform: scale(0.3); } - to { + 50% { opacity: 1; - transform: scale3d(1, 1, 1); + -moz-window-transform: scale(1.04); + } + + 100% { + opacity: 1; + -moz-window-transform: scale(1); } } diff --git a/src/browser/base/content/zen-styles/zen-gradient-generator.css b/src/browser/base/content/zen-styles/zen-gradient-generator.css index 634a84e95..5befbbc9d 100644 --- a/src/browser/base/content/zen-styles/zen-gradient-generator.css +++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css @@ -261,7 +261,7 @@ transform: translateX(-50%); & .separator, & #PanelUI-zen-gradient-generator-color-toggle-algo { - background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.5)); } & button { diff --git a/src/browser/base/content/zen-styles/zen-panel-ui.css b/src/browser/base/content/zen-styles/zen-panel-ui.css index 7938194e7..2e6c1c20b 100644 --- a/src/browser/base/content/zen-styles/zen-panel-ui.css +++ b/src/browser/base/content/zen-styles/zen-panel-ui.css @@ -3,14 +3,17 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -panel[type='arrow'][animate][animate='open']::part(content) { - animation: zen-jello-animation 0.35s ease; - +panel[type='arrow'][animate='open'] { @media (-moz-platform: macos) { - animation: zen-jello-animation-alt 0.2s ease-out; + animation: zen-jello-animation-macos 0.4s ease-out; + } + @media not(-moz-platform: macos) { + &::part(content) { + animation: zen-jello-animation 0.35s ease; + } } } -panel[type='arrow'][animate]:not([animate='open'])::part(content) { +panel[type='arrow'][animate]:not([animate='open']) { animation: zen-jello-out-animation 0.3s ease-in-out; } diff --git a/src/toolkit/themes/shared/popup-css.patch b/src/toolkit/themes/shared/popup-css.patch index f30f4c52f..f6c07d077 100644 --- a/src/toolkit/themes/shared/popup-css.patch +++ b/src/toolkit/themes/shared/popup-css.patch @@ -1,5 +1,5 @@ diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css -index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..4827373b138dd59dd4adc5289adef95ef2410090 100644 +index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..58b640a81aae4f662a5e01abadc03af614cc107d 100644 --- a/toolkit/themes/shared/popup.css +++ b/toolkit/themes/shared/popup.css @@ -21,8 +21,8 @@ panel { @@ -22,7 +22,7 @@ index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..4827373b138dd59dd4adc5289adef95e @media (prefers-contrast) { --panel-border-color: color-mix(in srgb, currentColor 60%, transparent); -@@ -54,9 +52,9 @@ panel { +@@ -54,19 +52,20 @@ panel { -moz-default-appearance: menupopup; /* The blur behind doesn't blur all that much, add a semi-transparent * background to improve contrast */ @@ -35,7 +35,20 @@ index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..4827373b138dd59dd4adc5289adef95e } @media (-moz-platform: macos) { -@@ -208,7 +206,6 @@ panel:where([type="arrow"]) { +- appearance: auto; ++ appearance: auto !important; + -moz-default-appearance: menupopup; + /* We set the default background here, rather than on ::part(content), + * because otherwise it'd interfere with the native look. Non-native-looking + * popups should get their background via --panel-background */ + background-color: Menu; +- --panel-background: none; ++ --panel-shadow-margin: 0px !important; ++ --panel-background: transparent !important; + --panel-border-color: transparent; + /* This should be kept in sync with GetMenuMaskImage() */ + --panel-border-radius: 6px; +@@ -208,7 +207,6 @@ panel:where([type="arrow"]) { } &[animating] {