From 3fca0657b5e114ee89974295e383a1eb1d480260 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Wed, 25 Jun 2025 01:51:33 +0200 Subject: [PATCH] fix: Fixed color picker for windows mica, b=no-bug, c=tabs, common, compact-mode, workspaces --- .../themes/shared/tabbrowser/tabs-css.patch | 39 +++++----- src/zen/common/styles/zen-popup.css | 2 +- .../common/styles/zen-single-components.css | 19 +++-- src/zen/compact-mode/ZenCompactMode.mjs | 4 +- src/zen/workspaces/ZenGradientGenerator.mjs | 74 ++++++++++++------- src/zen/workspaces/zen-gradient-generator.css | 3 - 6 files changed, 82 insertions(+), 59 deletions(-) diff --git a/src/browser/themes/shared/tabbrowser/tabs-css.patch b/src/browser/themes/shared/tabbrowser/tabs-css.patch index 9449422ab..7c82e6700 100644 --- a/src/browser/themes/shared/tabbrowser/tabs-css.patch +++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch @@ -1,5 +1,5 @@ diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css -index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272ede59857 100644 +index d7d9a40e8c473fa3b06f5bbc743e851a392ea8fa..c5b3f015caf666dad800432828a8c615e8353936 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css @@ -19,7 +19,7 @@ @@ -11,16 +11,19 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 --tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin)); --tab-inner-inline-margin: var(--space-medium); --tab-inline-padding: 8px; -@@ -33,7 +33,7 @@ +@@ -33,9 +33,9 @@ --tab-block-margin: 4px; --tab-icon-end-margin: 5.5px; --tab-label-line-height: 1.7; - --tab-loading-fill: #0A84FF; + --tab-loading-fill: var(--zen-primary-color); --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent); - --tab-selected-textcolor: var(--toolbar-color); +- --tab-selected-textcolor: var(--toolbar-color); ++ --tab-selected-textcolor: currentColor; --tab-selected-bgcolor: var(--toolbar-bgcolor); -@@ -211,8 +211,7 @@ + --tab-selected-color-scheme: var(--toolbar-color-scheme); + &[lwt-tab-selected="light"] { +@@ -216,8 +216,7 @@ } #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > &[pinned] { @@ -30,7 +33,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 } #tabbrowser-tabs[movingtab] &:is(:active, [multiselected]) { -@@ -258,7 +257,6 @@ +@@ -263,7 +262,6 @@ } :root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] { @@ -38,7 +41,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 } &:is([selected], [multiselected]) { -@@ -272,6 +270,7 @@ +@@ -277,6 +275,7 @@ border-radius: inherit; position: relative; overflow: hidden; @@ -46,7 +49,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 &::before { position: absolute; -@@ -459,14 +458,11 @@ +@@ -464,14 +463,11 @@ .tab-icon-image { -moz-context-properties: fill, stroke; fill: currentColor; @@ -62,7 +65,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 opacity: 0.5; /* Fade the favicon out */ transition-property: filter, opacity; -@@ -483,10 +479,6 @@ +@@ -488,10 +484,6 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("browser.tabs.fadeOutExplicitlyUnloadedTabs") { &[pending][discarded] { @@ -73,7 +76,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 opacity: 0.5; /* Fade the favicon out */ transition-property: filter, opacity; -@@ -559,7 +551,7 @@ +@@ -564,7 +556,7 @@ z-index: 1; /* Overlay tab title */ #tabbrowser-tabs[orient=vertical] & { @@ -82,7 +85,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 } &[crashed] { -@@ -567,7 +559,7 @@ +@@ -572,7 +564,7 @@ } #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]), @@ -91,7 +94,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 &[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } -@@ -597,7 +589,7 @@ +@@ -602,7 +594,7 @@ background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor)); -moz-context-properties: fill; @@ -100,7 +103,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 color-scheme: var(--tab-selected-color-scheme); border-radius: var(--border-radius-circle); -@@ -1365,7 +1357,7 @@ tab-group { +@@ -1373,7 +1365,7 @@ tab-group { } } @@ -109,7 +112,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 #vertical-tabs-newtab-button { appearance: none; min-height: var(--tab-min-height); -@@ -1376,7 +1368,7 @@ tab-group { +@@ -1384,7 +1376,7 @@ tab-group { margin-inline: var(--tab-inner-inline-margin); #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text { @@ -118,7 +121,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 } &:hover { -@@ -1400,7 +1392,7 @@ tab-group { +@@ -1408,7 +1400,7 @@ tab-group { * flex container. #tabs-newtab-button is a child of the arrowscrollbox where * we don't want a gap (between tabs), so we have to add some margin. */ @@ -127,7 +130,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 margin-block: var(--tab-block-margin); } -@@ -1474,8 +1466,6 @@ tab-group { +@@ -1486,8 +1478,6 @@ tab-group { } :root:not([sidebar-expand-on-hover]) & { @@ -136,7 +139,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 /* stylelint-disable-next-line media-query-no-invalid */ @media not -moz-pref("sidebar.visibility", "expand-on-hover") { /* We need these rules to apply at all times when the sidebar.visibility -@@ -1585,7 +1575,6 @@ tab-group { +@@ -1605,7 +1595,6 @@ tab-group { &:not([expanded]) { .tabbrowser-tab[pinned] { @@ -144,7 +147,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 } .tab-background { -@@ -1716,7 +1705,7 @@ tab-group { +@@ -1736,7 +1725,7 @@ tab-group { toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button) ) ~ #tabbrowser-tabs { @@ -153,7 +156,7 @@ index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272 padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px); margin-inline-start: 2px; } -@@ -1750,7 +1739,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button { +@@ -1770,7 +1759,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button { list-style-image: url(chrome://global/skin/icons/plus.svg); } diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index 35b51684e..430486c26 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -369,7 +369,7 @@ menuseparator { var(--zen-primary-color) -40%, color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%) ); - color: var(--button-primary-color); + color: var(--toolbar-color); box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05); border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); display: flex; diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index cd64255af..148a8d051 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -100,14 +100,19 @@ body > #confetti { } .toolbarbutton-1 { - --tab-border-radius: 6px; - --toolbarbutton-border-radius: var(--tab-border-radius); - --toolbarbutton-inner-padding: 7px; + :root:is([zen-single-toolbar='true'], :not([zen-sidebar-expanded='true'])) + #zen-sidebar-top-buttons-customization-target + &, + #zen-sidebar-foot-buttons { + --tab-border-radius: 6px; + --toolbarbutton-border-radius: var(--tab-border-radius); + --toolbarbutton-inner-padding: 7px; - &, - & stack { - width: 30px; - height: 30px; + &, + & stack { + width: 30px; + height: 30px; + } } transition: diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index 62f1aa0be..f7a905f9b 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -338,7 +338,7 @@ var gZenCompactModeManager = { ease: 'easeIn', type: 'spring', bounce: 0, - duration: 0.1, + duration: 0.15, } ) .then(() => { @@ -389,7 +389,7 @@ var gZenCompactModeManager = { ease: 'easeOut', type: 'spring', bounce: 0, - duration: 0.1, + duration: 0.15, } ) .then(() => { diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 43176161a..068deeeab 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -1073,29 +1073,40 @@ return forToolbar ? this.getToolbarModifiedBase() : 'transparent'; } else if (themedColors.length === 1) { return this.getSingleRGBColor(themedColors[0], forToolbar); - } else if (themedColors.length === 2) { - return [ - `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`, - `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`, - ].join(', '); - } else if (themedColors.length === 3) { - let color1 = this.getSingleRGBColor(themedColors[2], forToolbar); - let color2 = this.getSingleRGBColor(themedColors[0], forToolbar); - let color3 = this.getSingleRGBColor(themedColors[1], forToolbar); - if (!forToolbar) { - return [ - `radial-gradient(circle at -30% -30%, ${color2}, transparent 100%)`, - `radial-gradient(circle at 130% -30%, ${color3}, transparent 100%)`, - `linear-gradient(to top, ${color1} -30%, transparent 60%)`, - ].join(', '); - } - return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', '); } else { - // Just return a linear gradient with all colors - const gradientColors = themedColors.map((color) => - this.getSingleRGBColor(color, forToolbar) - ); - return `linear-gradient(${rotation}deg, ${gradientColors.join(', ')})`; + // If there are custom colors, we just return a linear gradient with all colors + if (themedColors.find((color) => color.isCustom)) { + // Just return a linear gradient with all colors + const gradientColors = themedColors.map((color) => + this.getSingleRGBColor(color, forToolbar) + ); + // Divide all colors evenly in the gradient + const colorStops = gradientColors + .map((color, index) => { + const position = (index / (gradientColors.length - 1)) * 100; + return `${color} ${position}%`; + }) + .join(', '); + return `linear-gradient(${rotation}deg, ${colorStops})`; + } + if (themedColors.length === 2) { + return [ + `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`, + `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`, + ].join(', '); + } else if (themedColors.length === 3) { + let color1 = this.getSingleRGBColor(themedColors[2], forToolbar); + let color2 = this.getSingleRGBColor(themedColors[0], forToolbar); + let color3 = this.getSingleRGBColor(themedColors[1], forToolbar); + if (!forToolbar) { + return [ + `radial-gradient(circle at -30% -30%, ${color2}, transparent 100%)`, + `radial-gradient(circle at 130% -30%, ${color3}, transparent 100%)`, + `linear-gradient(to top, ${color1} -30%, transparent 60%)`, + ].join(', '); + } + return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', '); + } } } @@ -1291,10 +1302,17 @@ } if (this.isDarkMode) { - browser.document.documentElement.style.setProperty( - '--zen-themed-browser-overlay-bg', - 'rgba(255, 255, 255, 0.3)' - ); + if (window.matchMedia('(-moz-windows-mica)').matches) { + browser.document.documentElement.style.setProperty( + '--zen-themed-browser-overlay-bg', + 'transparent' + ); + } else { + browser.document.documentElement.style.setProperty( + '--zen-themed-browser-overlay-bg', + 'rgba(255, 255, 255, 0.3)' + ); + } } else { browser.document.documentElement.style.setProperty( '--zen-themed-browser-overlay-bg', @@ -1375,8 +1393,8 @@ thirdStop.setAttribute('offset', `${opacity * 100}%`); const interpolatedPath = this.#interpolateWavePath(opacity); svg.setAttribute('d', interpolatedPath); - opacitySlider.style.setProperty('--zen-thumb-height', `${40 + opacity * 12}px`); - opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 12}px`); + opacitySlider.style.setProperty('--zen-thumb-height', `${40 + opacity * 15}px`); + opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 15}px`); svg.style.stroke = interpolatedPath === this.#linePath ? thirdStop.getAttribute('stop-color') diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css index 4a17c3a12..7bf3b8055 100644 --- a/src/zen/workspaces/zen-gradient-generator.css +++ b/src/zen/workspaces/zen-gradient-generator.css @@ -47,9 +47,6 @@ } #PanelUI-zen-gradient-generator-color-custom-add { - position: absolute; - right: 0px; - top: 0px; cursor: pointer; }