From 9971dbd0ad713f1f9bc60e2eeb8e1f020b96fc2a Mon Sep 17 00:00:00 2001
From: "Mr. M" <mr.m@tuta.com>
Date: Tue, 24 Jun 2025 16:37:14 +0200
Subject: [PATCH] fix: Fixed positions for gradients selector, b=no-bug,
 c=common, workspaces

---
 src/zen/common/styles/zen-browser-ui.css      |  1 -
 src/zen/common/styles/zen-theme.css           |  3 ++-
 src/zen/workspaces/ZenGradientGenerator.mjs   |  4 ++--
 src/zen/workspaces/zen-gradient-generator.css | 22 +++++++++++--------
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css
index 30fdd4b0c..3f6dec59d 100644
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -47,7 +47,6 @@
 
   isolation: isolate;
   background: var(--zen-themed-toolbar-bg-transparent);
-  transition: background-color var(--inactive-window-transition);
 
   &::after,
   &::before {
diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css
index bc2970f0a..872691c9d 100644
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -251,7 +251,8 @@
   &,
   & #tabbrowser-tabpanels,
   & panel,
-  & menupopup {
+  & menupopup,
+  & #zen-browser-background {
     @media -moz-pref('zen.theme.window.scheme', 'dark') {
       color-scheme: dark;
     }
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index 68a3619db..6b95923c9 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -1151,7 +1151,7 @@
           accentColor,
           (1 - this.currentOpacity) * 100
         );
-        minimalLum = this.isDarkMode ? 0.3 : 0.2;
+        minimalLum = this.isDarkMode ? 0.3 : 0.18;
       }
       const lum = this.luminance(accentColor);
       // Return true if background is dark enough that white text is preferred
@@ -1492,7 +1492,7 @@
               : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
           );
           let isDarkMode = this.isDarkMode;
-          if (dominantColor !== this.getNativeAccentColor()) {
+          if (dominantColor !== this.hexToRgb(this.getNativeAccentColor())) {
             isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);
             browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode);
           } else {
diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css
index fff9923d2..3767d9cea 100644
--- a/src/zen/workspaces/zen-gradient-generator.css
+++ b/src/zen/workspaces/zen-gradient-generator.css
@@ -183,8 +183,7 @@
 
 #PanelUI-zen-gradient-slider-wave {
   position: absolute;
-  top: 3px;
-  left: -3px;
+  left: -5px;
   width: 100%;
   height: 100%;
   pointer-events: none;
@@ -192,7 +191,6 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  scale: 1.2;
 
   &::before {
     content: '';
@@ -203,14 +201,15 @@
     border-radius: 999px;
     pointer-events: none;
     z-index: -1;
-    top: -1px;
+    top: 50%;
     left: 4px;
-    scale: 0.85;
+    transform: translateY(-50%);
   }
 
   & svg {
     overflow: visible;
-    min-width: calc(100% + 2.5rem);
+    min-width: calc(100% + 2rem);
+    scale: 1.2;
   }
 }
 
@@ -244,9 +243,12 @@
   border-radius: var(--zen-border-radius);
 
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
-  background: color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%);
+  background: light-dark(
+    var(--zen-toolbar-element-bg),
+    color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%)
+  );
   background-image: radial-gradient(
-    light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) 1px,
+    light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
     transparent 0
   );
   background-position: -19px -19px;
@@ -314,12 +316,14 @@
 
   & button {
     border: none !important;
-    padding: 0.4rem !important;
+    padding: 0 !important;
     min-width: fit-content !important;
     transition: background 0.2s;
     appearance: none;
     max-height: 26px;
     max-width: 26px;
+    min-height: 26px;
+    min-width: 26px !important;
     color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9));
 
     & .button-box {