Started centering the url when focusing

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

@@ -4,6 +4,7 @@
 
 #zen-tabbox-wrapper {
   position: relative;
+  z-index: 0;
 }
 
 @media (-moz-bool-pref: 'zen.workspaces.hide-default-container-indicator') {

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

@@ -89,7 +89,7 @@
 
   & #urlbar-container,
   & #urlbar {
-    --urlbar-container-height: 40px !important;
+    --urlbar-container-height: 40px;
     --urlbar-height: 38px !important;
   }
 
@@ -169,7 +169,10 @@
 
     :root[zen-window-buttons-reversed='true'] & {
       &:has(#PersonalToolbar[collapsed="true"]) {
-        display: none;
+        opacity: 0;
+        & > * {
+          display: none;
+        }
       }
     }
   }
@@ -361,7 +364,10 @@
   padding: var(--zen-toolbox-padding);
   padding-left: 0;
   padding-top: 0;
-  z-index: 1;
+
+  #PersonalToolbar:not([collapsed='true']) {
+    padding-left: 0 !important;
+  }
 
   & #titlebar {
     min-width: 150px;
@@ -377,7 +383,7 @@
     :root[zen-single-toolbar='true'] & {
       margin-left: var(--zen-toolbox-padding);
       width: calc(100% - var(--zen-toolbox-padding));
-      & .urlbar-input-container {
+      & #urlbar:not([breakout-extend='true']) .urlbar-input-container {
         padding-left: 4px;
         padding-right: 4px;
       }

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

@@ -96,6 +96,8 @@
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
   --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
 
+  --browser-area-z-index-toolbox: 2 !important;
+
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
   --zen-panel-radius: var(--zen-border-radius);
 

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

@@ -10,12 +10,47 @@
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border-radius: var(--toolbarbutton-border-radius);
-  overflow: hidden;
   padding: 1px;
+  font-size: 1.1em;
 }
 
-#urlbar[focused='true'][breakout-extend='true'] {
-  overflow: visible;
+#urlbar[breakout-extend='true'] {
+  z-index: 1000;
+  max-width: 45%;
+  min-width: 45%;
+  --urlbar-container-height: 55px !important;
+  --urlbar-margin-inline: 10px !important;
+  left: 50%;
+  transform: translateX(-50%);
+
+  & #urlbar-background {
+    background: var(--zen-branding-bg) !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--arrowpanel-border-color) !important;
+  }
+
+  & #identity-box {
+    margin-right: var(--urlbar-margin-inline);
+  }
+
+  #urlbar-container:has(&) {
+    border-radius: var(--toolbarbutton-border-radius);
+    background: var(--toolbarbutton-hover-background);
+
+    &::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+  }
 }
 
 #searchbar:focus-within {
@@ -84,7 +119,7 @@
   position: relative;
 }
 
-#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
+#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
   margin-inline-end: 0 !important;
 }
 
@@ -126,10 +161,6 @@
 }
 
 :root[zen-single-toolbar='true'] {
-  #urlbar[breakout-extend='true'] {
-    top: 0px !important;
-    width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline) * 4);
-  }
 
   #notification-popup-box {
     align-items: center;
@@ -308,7 +339,3 @@ button.popup-notification-dropmarker {
 /*.titlebar-button:last-child {
   padding-right: var(--zen-element-separation) !important;
 }*/
-
-#PersonalToolbar:not([collapsed='true']) {
-  padding-left: 0 !important;
-}

src/browser/themes/shared/browser-shared-css.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
-index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a331ea42b 100644
+index 08bc078c2572fb218b435e580ef71be2586989c3..e440b6dc3f331785c841e1702887f67a67e00e96 100644
 --- a/browser/themes/shared/browser-shared.css
 +++ b/browser/themes/shared/browser-shared.css
-@@ -188,7 +187,6 @@ body {
+@@ -144,7 +144,6 @@ body {
    transition: background-color var(--inactive-window-transition);
  
    &:-moz-window-inactive {
@@ -10,8 +10,8 @@ index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a
      color: var(--toolbox-non-lwt-textcolor-inactive);
    }
  
-@@ -196,6 +194,31 @@ body {
-    border-bottom-color: var(--chrome-content-separator-color);
+@@ -163,6 +162,31 @@ body {
+     border-bottom-color: var(--chrome-content-separator-color);
    }
  
 +
@@ -38,7 +38,7 @@ index f2171eb033a1143870f4708c63f565fabb535c4b..4280bc4b0f7cdbd94179fa2111f8001a
 +    background-repeat: no-repeat, var(--lwt-background-tiling);
 +    background-position: right top, var(--lwt-background-alignment);
 +  }
-+  
++
    :root[customizing] & {
      border-bottom-style: none;
    }