diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc
index 6360ff8ca..5db5839eb 100644
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -82,21 +82,23 @@
# They must all go from the middle to the right side. They must always stay verically centered.
# And reach to 180 on the right side, meaning we must divide the width in 16 segments.
+ data-position="337.5,180" style="background: rgb(224, 224, 224);">
-
-
-
-
+ data-position="337.5,180" style="background: rgb(224, 224, 224);">
+ data-position="292.5,180" style="background: rgb(160, 160, 160);">
+
+
+
+
+
@@ -122,11 +124,11 @@
diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css
index 4a916ef08..5993d6510 100644
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/src/zen/common/styles/zen-omnibox.css
@@ -263,7 +263,7 @@
& .urlbar-background {
--zen-urlbar-background-base: light-dark(
#fbfbfb,
- color-mix(in srgb, hsl(0, 0%, 1%), var(--zen-colors-primary) 30%)
+ color-mix(in srgb, hsl(0, 0%, 6.7%), var(--zen-colors-primary) 30%)
);
@media -moz-pref('zen.theme.acrylic-elements') {
--zen-urlbar-background-transparent: color-mix(
@@ -505,8 +505,8 @@
--urlbar-container-height: 62px !important;
--urlbar-margin-inline: 10px !important;
- min-width: min(90%, 50rem) !important;
- width: var(--zen-urlbar-width, min(90%, 50rem)) !important;
+ min-width: min(90%, 62rem) !important;
+ width: var(--zen-urlbar-width, min(90%, 62rem)) !important;
font-size: 1.15em !important;
@media (-moz-platform: macos) {
font-size: 1.5em !important;
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index 4866d12a5..8103a1779 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -41,8 +41,15 @@ function parseSinePath(pathStr) {
return points;
}
-const MAX_OPACITY = AppConstants.platform === 'macosx' ? 0.8 : 0.9;
-const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.15 : 0.35;
+const lazy = {};
+
+ChromeUtils.defineLazyGetter(lazy, 'MAX_OPACITY', () => {
+ return parseFloat(document.getElementById('PanelUI-zen-gradient-generator-opacity').max);
+});
+
+ChromeUtils.defineLazyGetter(lazy, 'MIN_OPACITY', () => {
+ return parseFloat(document.getElementById('PanelUI-zen-gradient-generator-opacity').min);
+});
const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
const EXPLICIT_BLACKWHITE_TYPE = 'explicit-black-white';
@@ -440,7 +447,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
const padding = 30; // each side
- const dotHalfSize = 38 / 2; // half the size of the dot
+ const dotHalfSize = 29; // half the size of the dot. -11 for correct centering
x += dotHalfSize;
y += dotHalfSize;
rect.width += padding * 2; // Adjust width and height for padding
@@ -1095,15 +1102,14 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
colorToBlendOpacity = 0.35;
} else if (AppConstants.platform === 'macosx') {
colorToBlend = [255, 255, 255];
- colorToBlendOpacity = 0.3;
+ colorToBlendOpacity = 0.35;
}
if (colorToBlend) {
const blendedAlpha = Math.min(
1,
- opacity + MIN_OPACITY + colorToBlendOpacity * (1 - (opacity + MIN_OPACITY))
+ opacity + lazy.MIN_OPACITY + colorToBlendOpacity * (1 - (opacity + lazy.MIN_OPACITY))
);
baseColor = this.blendColors(baseColor, colorToBlend, blendedAlpha * 100);
- opacity += colorToBlendOpacity * (1 - opacity);
}
return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${opacity})`;
}
@@ -1386,13 +1392,13 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
const [_, secondStop, thirdStop] = document.querySelectorAll(
'#PanelUI-zen-gradient-generator-slider-wave-gradient stop'
);
- // Opacity can only be between MIN_OPACITY to MAX_OPACITY. Make opacity relative to that range
- if (opacity < MIN_OPACITY) {
+ // Opacity can only be between lazy.MIN_OPACITY to lazy.MAX_OPACITY. Make opacity relative to that range
+ if (opacity < lazy.MIN_OPACITY) {
opacity = 0;
- } else if (opacity > MAX_OPACITY) {
+ } else if (opacity > lazy.MAX_OPACITY) {
opacity = 1;
} else {
- opacity = (opacity - MIN_OPACITY) / (MAX_OPACITY - MIN_OPACITY);
+ opacity = (opacity - lazy.MIN_OPACITY) / (lazy.MAX_OPACITY - lazy.MIN_OPACITY);
}
if (isDefaultTheme) {
opacity = 1; // If it's the default theme, we want the wave to be