diff --git a/src/browser/app/profile/features/view.inc b/src/browser/app/profile/features/view.inc index 2a4dd976..87711a23 100644 --- a/src/browser/app/profile/features/view.inc +++ b/src/browser/app/profile/features/view.inc @@ -18,5 +18,7 @@ pref('zen.view.experimental-force-window-controls-left', false); pref('zen.view.hide-window-controls', true); pref('zen.view.experimental-no-window-controls', false); +pref('zen.view.grey-out-inactive-windows', true); + pref('zen.view.show-newtab-button-border-top', false); pref('zen.view.show-newtab-button-top', true); diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc index 95f77f24..5e3e57f2 100644 --- a/src/browser/base/content/zen-panels/gradient-generator.inc +++ b/src/browser/base/content/zen-panels/gradient-generator.inc @@ -100,7 +100,7 @@ - + diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index 3e335a6f..b0f111b1 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -65,8 +65,10 @@ transition: 0s; } - &:-moz-window-inactive::after { - background: var(--zen-main-browser-background-toolbar); + @media (-moz-pref('zen.view.grey-out-inactive-windows')) { + &:-moz-window-inactive::after { + background: var(--zen-main-browser-background-toolbar); + } } &::before { diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index ba88f282..16655c8a 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -116,7 +116,10 @@ --zen-button-border-radius: 5px; --zen-button-padding: 0.6rem 1.2rem; - --zen-toolbar-element-bg: color-mix(in srgb, currentColor 15%, transparent 85%); + --zen-toolbar-element-bg: light-dark( + color-mix(in srgb, currentColor 10%, transparent 90%), + color-mix(in srgb, currentColor 15%, transparent 85%) + ); /* Toolbar */ --zen-toolbar-height: 38px; @@ -240,7 +243,8 @@ & panel, & menupopup, & #zen-browser-background, - & #urlbar[breakout-extend='true'] { + & #urlbar[breakout-extend='true'], + & #tabbrowser-tabpanels browser[type='content'] { @media -moz-pref('zen.theme.window.scheme', 'dark') { color-scheme: dark; } diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index d4a2d8ea..27a095cc 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -626,8 +626,8 @@ --tab-inline-padding: 8px; /* Define padding for tab content */ & .tabbrowser-tab { - /* Show tab label */ & .tab-label-container { + opacity: 1; display: flex; } diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 3f87ae8c..f25401a4 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -41,7 +41,7 @@ } const MAX_OPACITY = 0.8; - const MIN_OPACITY = 0.3; + const MIN_OPACITY = 0.2; class nsZenThemePicker extends ZenMultiWindowFeature { static MAX_DOTS = 3; @@ -975,10 +975,11 @@ themedColors(colors) { const colorToBlend = this.isDarkMode ? [255, 255, 255] : [0, 0, 0]; // Default to white for dark mode, black otherwise const opacity = this.currentOpacity; - // Convert opacity into a percentage where the lowest is 80% and the highest is 100% + // Convert opacity into a percentage where the lowest is 60% and the highest is 100% // The more transparent, the more white the color will be blended with. In order words, // make the transparency relative to these 2 ends. - const blendPercentage = 80 + opacity * 20; // 80% to 100% range + // e.g. 0% opacity becomes 60% blend, 100% opacity becomes 100% blend + const blendPercentage = Math.max(30, 30 + opacity * 70); return colors.map((color) => ({ c: color.isCustom ? color.c : this.blendColors(color.c, colorToBlend, blendPercentage), isCustom: color.isCustom, @@ -991,8 +992,9 @@ onOpacityChange(event) { this.currentOpacity = parseFloat(event.target.value); // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback. - if (((this.currentOpacity * 10) | 0) % 10 === 0) { + if (Math.abs((this.currentOpacity * 10) % 1) !== this._lastHapticFeedback) { Services.zen.playHapticFeedback(); + this._lastHapticFeedback = Math.abs((this.currentOpacity * 10) % 1); } this.updateCurrentWorkspace(); } @@ -1020,8 +1022,11 @@ let opacity = this.currentOpacity; if (forToolbar) { opacity = 1; // Toolbar colors should always be fully opaque + color = this.blendColors(color.c, this.getToolbarModifiedBaseRaw().slice(0, 3), 80); + } else { + color = color.c; } - return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${opacity})`; + return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`; } luminance([r, g, b]) { @@ -1449,7 +1454,9 @@ await gZenUIManager.motion.animate( browser.document.documentElement, { - '--toolbox-textcolor': isDarkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)', + '--toolbox-textcolor': isDarkMode + ? 'rgba(255, 255, 255, 0.7)' + : 'rgba(23, 23, 23, 0.7)', }, { duration: 0.05, diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 688731e6..07828890 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -706,10 +706,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { event.stopPropagation(); const delta = event.delta * 300; - const stripWidth = document.getElementById('tabbrowser-tabs').getBoundingClientRect().width; + const stripWidth = + document.getElementById('navigator-toolbox').getBoundingClientRect().width + + document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width * 2; let translateX = this._swipeState.lastDelta + delta; // Add a force multiplier as we are translating the strip depending on how close to the edge we are - let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 4.5)); // 4.5 instead of 4 to add a bit of a buffer + let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 5)); // 4.5 instead of 4 to add a bit of a buffer if (forceMultiplier > 0.5) { translateX *= forceMultiplier; this._swipeState.lastDelta = delta + (translateX - delta) * 0.5; @@ -1672,20 +1674,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { if (nextWorkspace) { const [nextGradient, nextGrain] = await gZenThemePicker.getGradientForWorkspace(nextWorkspace); - const [existingBackground, existingGrain] = - await gZenThemePicker.getGradientForWorkspace(workspace); + const [_, existingGrain] = await gZenThemePicker.getGradientForWorkspace(workspace); const percentage = Math.abs(offsetPixels) / 200; await new Promise((resolve) => { requestAnimationFrame(() => { - document.documentElement.style.setProperty('--zen-background-opacity', percentage); + document.documentElement.style.setProperty('--zen-background-opacity', 1 - percentage); if (!this._hasAnimatedBackgrounds) { this._hasAnimatedBackgrounds = true; document.documentElement.style.setProperty( '--zen-main-browser-background-old', - existingBackground - ); - document.documentElement.style.setProperty( - '--zen-main-browser-background', nextGradient ); } @@ -1783,6 +1780,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { if (previousBackgroundOpacity == 1 || !previousBackgroundOpacity) { previousBackgroundOpacity = 0; } + previousBackgroundOpacity = 1 - previousBackgroundOpacity; gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity; await new Promise((resolve) => { requestAnimationFrame(() => { diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css index 99bee478..d511f12d 100644 --- a/src/zen/workspaces/zen-gradient-generator.css +++ b/src/zen/workspaces/zen-gradient-generator.css @@ -276,12 +276,14 @@ border: 3px solid #ffffff; animation: zen-theme-picker-dot-animation 0.5s; transform: translate(-50%, -50%); + pointer-events: none; &:first-of-type { width: 36px; height: 36px; border-width: 4px; z-index: 2; + pointer-events: all; transition: transform 0.2s; &:hover { transform: scale(1.05) translate(-50%, -50%);