Merge branch 'main' into main

toolbar/urlbar.css

@@ -11,6 +11,7 @@
   --identity-box-margin-inline: 6px !important;
   --uc-urlbar-icon-inline-padding: calc(var(--uc-toolbarbutton-inner-inline-padding));
   --uc-urlbar-inline-padding: 6px;
+  --uc-urlbar-block-padding: 6px;
   --uc-urlbar-shadow: 0 0 0px rgb(0 0 0 / .1);
    --urlbarView-rich-suggestion-default-icon-size: 32px !important;
 
@@ -45,7 +46,7 @@
   }
 
   /* Appearance when the URL bar is expanded. */
-  #urlbar[open] & {
+  #urlbar:is([open], [usertyping][focused]) & {
     border-radius: 8px !important;
     border-color: transparent !important;
     outline: 0px solid var(--arrowpanel-border-color) !important;
@@ -64,8 +65,9 @@
 
 #urlbar #urlbar-input {text-align: center !important}
 #urlbar-background {background: transparent !important;}
+
 #nav-bar[urlbar-exceeds-toolbar-bounds="true"] #urlbar-background {background: var(--arrowpanel-background) !important;}
-/* #urlbar[focused=""] > #urlbar-background {background: var(--arrowpanel-background) !important;} */
+#urlbar[focused=""] > #urlbar-background {background: var(--arrowpanel-background) !important;}
 
 /* URL bar suggestions container. */
 .urlbarView {

tweaks/popup-search.css

@@ -1,47 +1,58 @@
 /* search */
 @media (-moz-bool-pref: "uc.tweak.popup-search") {
-#urlbar:is([breakout][breakout-extend]){
-  #urlbar-input {
-    font-size: 16px !important;
-    text-align: left !important;
-    padding-block: 12px !important;
-   padding-inline: 3px !important;
-  }
-
-  position: fixed !important;
-  padding-top: 12px !important;
-  --urlbar-height: auto !important;
-  bottom: auto !important;
-  top: 20vh !important;
-  padding-left: 6px !important;
-  padding-right: 8px !important;
-  background-color: #toolbar-bgcolor !important;
-
-  left: 18vw !important;
-  right: 18vw !important;
-  width: 64vw !important;
-
-  & .urlbarView-results {
-    margin-top: 12px !important;
-    padding-block-start: 0px !important;
-  }
-
-
-  /* background */
-  &:before{
-    content: "";
-    position: fixed;
-    pointer-events: none;
+  #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
+    #urlbar-input {
+      font-size: 16px !important;
+      text-align: left !important;
+    }
+    #urlbar-input-container {
+      height: auto !important;
+      padding-block: var(--urlbar-block-padding) !important;
+      padding-inline: var(--urlbar-inline-padding) !important;
+    }
+    #urlbar-go-button {
+      margin: auto !important;
+    }
 
-    width: 100vw;
-    height: 100vh;
+    z-index: 1;
+    position: fixed !important;
+    padding-block: 12px!important;
+    --urlbar-height: auto !important;
+    bottom: auto !important;
+    top: 20vh !important;
+    padding-left: 6px !important;
+    padding-right: 8px !important;
+    background-color: #toolbar-bgcolor !important;
 
-    top: 0px;
-    left: 0px;
+    left: 18vw !important;
+    right: 18vw !important;
+    width: 64vw !important;
 
-    background-color: #000000;
-    opacity: 0.5;
-    backdrop-filter: blur(300px);
+    & .urlbarView-results {
+      margin-top: 12px !important;
+      padding-block-start: 0px !important;
+    }    
+
+  }
+
+  /* background */
+  #nav-bar:has(#urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused])){
+    /* created as :after so that elements to the right of 
+       urlbar will be covered properly */
+    &:after {
+      content: "";
+      position: fixed;
+      pointer-events: none;
+
+      width: 100vw;
+      height: 100vh;
+
+      top: 0px;
+      left: 0px;
+
+      background-color: #000000; !important;
+      opacity: 0.5;
+      backdrop-filter: blur(300px);
+    }
   }
 }
-}

tweaks/sidebar.css

@@ -33,6 +33,16 @@
   opacity: 1%;
 }
 
+/* Add a pseudoelement to increase the hover area for the sidebar */
+
+#sidebar-box::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 100%;
+  z-index:-1;
+}
+
 /* if this preference is activated in about:config, sidebar width will be increased */
 @media (-moz-bool-pref: "uc.tweak.longer-sidebar") {
   :root #sidebar-box {