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'] {