diff --git a/src/browser/app/profile/windows.inc b/src/browser/app/profile/windows.inc
index 631f0e5b3..be9a83d3b 100644
--- a/src/browser/app/profile/windows.inc
+++ b/src/browser/app/profile/windows.inc
@@ -5,4 +5,8 @@
# Mica
pref("widget.windows.mica", true);
pref("widget.windows.mica.popups", true);
+
+# 1. DWMSBT_MAINWINDOW
+# 2. DWMSBT_TRANSIENTWINDOW (default, also used for popups)
+# 3(default). DWMSBT_TABBEDWINDOW
pref("widget.windows.mica.toplevel-backdrop", 2);
diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc
index d4d3b1449..f9cbc7de9 100644
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -100,7 +100,13 @@
-
+
diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css
index 9c8219d53..cb340362a 100644
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -121,6 +121,11 @@
color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
);
+ --zen-toolbar-element-bg-hover: light-dark(
+ color-mix(in srgb, var(--zen-toolbar-element-bg) 75%, transparent),
+ color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent)
+ );
+
/* Toolbar */
--tab-selected-color-scheme: inherit;
@@ -130,7 +135,7 @@
--toolbarbutton-inner-padding: 5px !important;
- --toolbarbutton-hover-background: var(--zen-toolbar-element-bg) !important;
+ --toolbarbutton-hover-background: var(--zen-toolbar-element-bg-hover) !important;
--toolbarbutton-active-background: color-mix(
in srgb,
@@ -172,11 +177,7 @@
--toolbar-field-color: var(--toolbox-textcolor) !important;
&[zen-private-window='true'] {
- --zen-main-browser-background: linear-gradient(
- 130deg,
- light-dark(rgb(247, 217, 255), rgb(10, 6, 11)) 0%,
- light-dark(rgb(242, 198, 255), rgb(19, 7, 22)) 100%
- );
+ --zen-main-browser-background: linear-gradient(130deg, rgb(10, 6, 11) 0%, rgb(19, 7, 22) 100%);
--zen-main-browser-background-toolbar: var(--zen-main-browser-background);
--zen-primary-color: light-dark(rgb(93, 42, 107), rgb(110, 48, 125)) !important;
--toolbox-textcolor: currentColor !important;
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index 59e783fcb..39d113f90 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -41,7 +41,7 @@
}
const MAX_OPACITY = 0.9;
- const MIN_OPACITY = 0.3;
+ const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.3 : 0.25;
const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
@@ -425,7 +425,7 @@
calculateInitialPosition([r, g, b]) {
// This function is called before the picker is even rendered, so we hard code the dimensions
// important: If any sort of sizing is changed, make sure changes are reflected here
- const padding = 20;
+ const padding = 30;
const rect = {
width: 338,
height: 338,
@@ -445,7 +445,7 @@
// Return a color as hsl based on the position in the gradient
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
- const padding = 20; // each side
+ const padding = 30; // each side
const dotHalfSize = 36 / 2; // half the size of the dot
x += dotHalfSize;
y += dotHalfSize;
@@ -691,7 +691,7 @@
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = dotPad.getBoundingClientRect();
- const padding = 20;
+ const padding = 30;
let updatedDots = [...dots];
const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
@@ -840,7 +840,7 @@
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
- const padding = 20;
+ const padding = 30;
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
@@ -973,7 +973,7 @@
if (this.dragging) {
event.preventDefault();
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
- const padding = 20; // each side
+ const padding = 30; // each side
// do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle
// if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball
// should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse
@@ -1074,7 +1074,13 @@
}
luminance([r, g, b]) {
- return 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
+ // These magic numbers are extracted from the wikipedia article on relative luminance
+ // https://en.wikipedia.org/wiki/Relative_luminance
+ var 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;
}
contrastRatio(rgb1, rgb2) {
@@ -1163,7 +1169,9 @@
let darkText = this.getToolbarColor(true); // e.g. [r, g, b, a]
let lightText = this.getToolbarColor(false); // e.g. [r, g, b, a]
- lightText[3] -= 0.4; // Reduce alpha for light text
+ if (this.canBeTransparent) {
+ lightText[3] -= 0.15; // Reduce alpha for light text
+ }
// Composite text color over background
darkText = this.blendColors(bg, darkText.slice(0, 3), (1 - darkText[3]) * 100);
@@ -1315,7 +1323,7 @@
let workspaceTheme = theme || workspace.theme;
await this.foreachWindowAsActive(async (browser) => {
- if (!browser.gZenThemePicker.promiseInitialized) {
+ if (!browser.gZenThemePicker?.promiseInitialized) {
return;
}
@@ -1505,7 +1513,7 @@
}
if (!skipUpdate) {
- this.dots = [];
+ browser.gZenThemePicker.dots = [];
browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors);
}
});
@@ -1599,7 +1607,7 @@
currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
}
- await this.onWorkspaceChange(currentWorkspace, true, skipSave ? gradient : null);
+ await this.onWorkspaceChange(currentWorkspace, skipSave, skipSave ? gradient : null);
}
async handlePanelClose() {
diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index a89ed5e96..1e2ec606b 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -889,6 +889,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
async initializeWorkspaces() {
let activeWorkspace = await this.getActiveWorkspace();
this.activeWorkspace = activeWorkspace?.uuid;
+ await gZenSessionStore.promiseInitialized;
try {
if (activeWorkspace) {
window.gZenThemePicker = new nsZenThemePicker();
@@ -897,7 +898,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
} catch (e) {
console.error('gZenWorkspaces: Error initializing theme picker', e);
}
- await gZenSessionStore.promiseInitialized;
await this.workspaceBookmarks();
await this.initializeTabsStripSections();
this._initializeEmptyTab();
diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css
index 15f9fadf9..ebbe67895 100644
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -69,7 +69,7 @@
&:hover,
&[dragged='true']{
- background-color: var(--zen-toolbar-element-bg);
+ background-color: var(--toolbarbutton-hover-background);
}
& label {
@@ -215,7 +215,7 @@
transition: opacity 0.1s;
order: 5;
--toolbarbutton-inner-padding: 6px;
- --tab-border-radius: 8px;
+ --tab-border-radius: 6px;
:root[zen-renaming-tab='true'] & {
display: none;
diff --git a/surfer.json b/surfer.json
index bcc805fa6..80d563cb1 100644
--- a/surfer.json
+++ b/surfer.json
@@ -19,7 +19,7 @@
"brandShortName": "Zen",
"brandFullName": "Zen Browser",
"release": {
- "displayVersion": "1.14.3b",
+ "displayVersion": "1.14.4b",
"github": {
"repo": "zen-browser/desktop"
},