diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc index 7c508ac11..8c9b41f62 100644 --- a/src/browser/base/content/zen-panels/gradient-generator.inc +++ b/src/browser/base/content/zen-panels/gradient-generator.inc @@ -84,7 +84,13 @@ - + diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 953cc476e..9d68440ce 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -134,6 +134,8 @@ transparent 90% ); + --toolbar-color: light-dark(rgb(21, 20, 26, 0.7), rgb(251, 251, 254, 0.7)) !important; + /* Other colors */ --urlbar-box-bgcolor: var(--zen-urlbar-background) !important; --urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important; @@ -227,6 +229,9 @@ @media (-moz-windows-mica) or (-moz-platform: macos) { background: transparent; --zen-themed-toolbar-bg-transparent: transparent; + @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) { + --zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)); + } &[zen-should-be-dark-mode] { --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg); } diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index d3091426d..317ebc0eb 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -40,6 +40,9 @@ return points; } + const MAX_OPACITY = 0.9; + const MIN_OPACITY = AppConstants.platform === 'win' ? 0.2 : 0.15; + class nsZenThemePicker extends ZenMultiWindowFeature { static MAX_DOTS = 3; @@ -1018,11 +1021,7 @@ } luminance([r, g, b]) { - const a = [r, g, b].map((v) => { - v /= 255; - return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; + return 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255); } contrastRatio(rgb1, rgb2) { @@ -1111,7 +1110,7 @@ } shouldBeDarkMode(accentColor) { - let minimalLum = this.isDarkMode ? 0.6 : 0.5; + let minimalLum = 0.5; if (!this.canBeTransparent) { // Blend the color with the toolbar background const toolbarBg = this.getToolbarModifiedBaseRaw(); @@ -1363,14 +1362,13 @@ const [_, secondStop, thirdStop] = document.querySelectorAll( '#PanelUI-zen-gradient-generator-slider-wave-gradient stop' ); - // Opacity can only be between 0.15 to 0.80. Make opacity relative to that range - // So 0.15 becomes 0, and 0.80 becomes 1. - if (opacity < 0.15) { + // Opacity can only be between MIN_OPACITY to MAX_OPACITY. Make opacity relative to that range + if (opacity < MIN_OPACITY) { opacity = 0; - } else if (opacity > 0.8) { + } else if (opacity > MAX_OPACITY) { opacity = 1; } else { - opacity = (opacity - 0.15) / (0.8 - 0.15); + opacity = (opacity - MIN_OPACITY) / (MAX_OPACITY - MIN_OPACITY); } if (isDefaultTheme) { opacity = 1; // If it's the default theme, we want the wave to be diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css index ef2721bbb..20623c190 100644 --- a/src/zen/workspaces/zen-gradient-generator.css +++ b/src/zen/workspaces/zen-gradient-generator.css @@ -277,6 +277,7 @@ &:hover { transform: scale(1.05) translate(-50%, -50%); } + transform-origin: center center; } &[dragging='true'] {