Fixed URLbar stylings when on normal mode

zen-browser · Dec 17, 2024 · 0bd3406 · 0bd3406
1 parent e1b43e7
commit 0bd3406
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -134,7 +134,7 @@
 
   #identity-permission-box:not([open]),
   #notification-popup-box:not([open]) {
-    margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
+    margin-inline-start: calc(-10px - 2 * var(--urlbar-icon-padding));
     opacity: 0;
     transition: all 0.2s;
   }
@@ -338,12 +338,17 @@ button.popup-notification-dropmarker {
 }
 
 #urlbar[open] {
+  --urlbar-margin-inline: 5px !important;
+
+  & #identity-box {
+    margin-right: var(--urlbar-margin-inline);
+  }
 
   & #urlbar-background {
     /* We cant have a transparent background with a backdrop-filter because on normal websites,
       the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
       due to performance issues */
-    background-color: var(--zen-branding-bg) !important;
+    background-color: light-dark(rgb(247, 247, 247), var(--zen-branding-bg)) !important;
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1)) !important;
     outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
     outline-offset: -1px !important;
@@ -367,11 +372,6 @@ button.popup-notification-dropmarker {
   font-size: 1.1em;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
-
-  & #identity-box {
-    margin-right: var(--urlbar-margin-inline);
-  }
-
   position: absolute;
 
   top: calc(var(--zen-toolbar-height) * 2) !important;

diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -668,8 +668,8 @@
           }
         }
 
-        browser.document.documentElement.style.setProperty('--zen-main-browser-background', gradient);
         browser.document.documentElement.style.setProperty('--zen-main-browser-background-toolbar', gradientToolbar);
+        browser.document.documentElement.style.setProperty('--zen-main-browser-background', gradient);
 
         const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
         if (dominantColor) {