refactor: update toolbar and sidebar styles for improved layout and consistency

src/browser/base/content/ZenUIManager.mjs

@@ -262,14 +262,13 @@ var gZenVerticalTabsManager = {
 
     if (isSingleToolbar) {
       this._navbarParent = navBar.parentElement;
-      let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
+      let elements = document.querySelectorAll('#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)');
       elements = Array.from(elements);
       // Add separator if it doesn't exist
       if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
         buttonsTarget.append(this._topButtonsSeparatorElement);
       }
       for (const button of elements) {
-        button.setAttribute('zen-single-toolbar', 'true');
         buttonsTarget.append(button);
       }
       buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
@@ -290,13 +289,10 @@ var gZenVerticalTabsManager = {
       this._hasSetSingleToolbar = false;
       // Do the opposite
       this._navbarParent.prepend(navBar);
-      const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > *:is(toolbarbutton, #stop-reload-button)');
+      const elements = document.querySelectorAll('#zen-sidebar-top-buttons-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional)');
       for (const button of elements) {
-        if (button.hasAttribute('zen-single-toolbar')) {
-          button.removeAttribute('zen-single-toolbar');
         document.getElementById('nav-bar-customization-target').append(button);
       }
-      }
       document.documentElement.removeAttribute("zen-single-toolbar");
       navBar.appendChild(document.getElementById('PanelUI-button'));
       this._toolbarOriginalParent.prepend(navBar);

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -9,6 +9,11 @@
   --inactive-titlebar-opacity: 1;
 }
 
+#nav-bar,
+#navigator-toolbox {
+  position: inherit;
+}
+
 :root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
   #navigator-toolbox,
   #zen-sidebar-splitter {

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -90,7 +90,7 @@
       #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
         opacity: 1;
 
-        transform: translateX(calc(100% - var(--zen-element-separation)));
+        transform: translateX(calc(100% - var(--zen-element-separation) - 1px));
         :root[zen-right-side='true'] & {
           transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
         }

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -170,7 +170,7 @@
 }
 
 #zen-sidebar-web-panel-wrapper {
-  margin: 0 calc(var(--zen-element-separation) / 2) var(--zen-element-separation) var(--zen-element-separation);
+  margin: 0 calc(var(--zen-element-separation) / 2) 0 var(--zen-element-separation);
 }
 
 #zen-sidebar-web-panel[pinned='true'] {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -119,8 +119,8 @@
 }
 
 #navigator-toolbox {
-  --border-radius-medium: 8px;
+  --border-radius-medium: 10px;
-  --tab-border-radius: var(--border-radius-medium);
+  --tab-border-radius: 10px;
   --zen-toolbox-min-width: 1px;
 
   --tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
@@ -888,12 +888,14 @@
   width: 100% !important;
   border-radius: var(--border-radius-medium);
 
-  &:not([selected]) .tab-background {
+  &[selected] .tab-background {
-    background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.1));
+    outline: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4)) !important;
   }
 
-  backdrop-filter: blur(10px);
+  &:not([selected]) .tab-background {
+    background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+  }
 
   & .tab-content {
     display: flex;

src/browser/base/content/zen-styles/zen-theme.css

@@ -133,6 +133,8 @@
 
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;
+
+  --tab-selected-shadow: 0 0 1px 1px rgba(0,0,0,.1) !important;
 }
 
 @media (prefers-color-scheme: dark) {

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -20,7 +20,7 @@
   min-width: 45%;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
-  position: fixed;
+  position: absolute;
 
   top: calc(var(--zen-toolbar-height) * 4);
   left: 50%;
@@ -74,7 +74,7 @@
 }
 
 #urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background {
-  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
+  background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important;
   backdrop-filter: blur(10px);
 }