Merge branch 'main' of https://github.com/zen-browser/desktop

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

@@ -179,6 +179,10 @@
       transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
     }
 
+    #navigator-toolbox > vbox {
+      float: right;
+    }
+
     #navigator-toolbox:hover,
     #navigator-toolbox:focus-within,
     #navigator-toolbox[zen-user-show],

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

@@ -23,20 +23,22 @@
   box-shadow: var(--panel-shadow) !important;
 }
 
-#urlbar[focused="true"] > #urlbar-background {
+#urlbar[focused="true"]>#urlbar-background {
   background: var(--zen-dialog-background) !important;
 }
 
-#urlbar-background { border: transparent !important; }
+#urlbar-background {
+  border: transparent !important;
+}
 
-#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
+#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
 #searchbar:focus-within {
   outline: none !important;
   outline-offset: none !important;
   outline-color: none !important;
 }
 
-#urlbar .urlbar-page-action, 
+#urlbar .urlbar-page-action,
 #urlbar #tracking-protection-icon-container,
 #urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
   border-radius: 999px;
@@ -63,7 +65,8 @@
   background: var(--zen-colors-border) !important;
 }
 
-#urlbar:is([focused], [open]) > #urlbar-background, #searchbar:focus-within {
+#urlbar:is([focused], [open])>#urlbar-background,
+#searchbar:focus-within {
   background: var(--urlbar-box-bgcolor);
 }
 
@@ -79,7 +82,9 @@
   border-radius: 20px 10px 10px 20px !important;
 }
 
-#urlbar:not([extend="true"]) #identity-box #identity-icon-box { position: relative; }
+#urlbar:not([extend="true"]) #identity-box #identity-icon-box {
+  position: relative;
+}
 
 #urlbar:not([extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
   margin-right: 5px;
@@ -141,7 +146,7 @@
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
 }
 
-#notification-popup-box > image {
+#notification-popup-box>image {
   margin: 0;
   padding: 0;
 }
@@ -166,3 +171,53 @@ button.popup-notification-dropmarker {
 #downloadsHistory {
   margin-top: 5px
 }
+
+:root:not([zen-sidebar-legacy="true"]) {
+  @media (max-width: 650px) {
+    #urlbar-container {
+      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    }
+
+    #nav-bar[downloadsbuttonshown] #urlbar-container,
+    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+    }
+
+    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+      width: 176px;
+    }
+
+    #identity-icon-box {
+      max-width: 70px;
+    }
+
+    #urlbar-zoom-button {
+      display: none;
+    }
+  }
+}
+
+:root[zen-sidebar-legacy="true"] {
+  @media (max-width: 550px) {
+    #urlbar-container {
+      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    }
+
+    #nav-bar[downloadsbuttonshown] #urlbar-container,
+    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+    }
+
+    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+      width: 176px;
+    }
+
+    #identity-icon-box {
+      max-width: 70px;
+    }
+
+    #urlbar-zoom-button {
+      display: none;
+    }
+  }
+}

src/browser/themes/shared/zen-icons/icons.css

@@ -20,17 +20,26 @@
 }
 
 
-#forward-button,
-#zen-sidebar-web-panel-forward {
+:root[zen-sidebar-legacy="true"] #forward-button,
+:root[zen-sidebar-legacy="true"] #zen-sidebar-web-panel-forward {
 	list-style-image: url("forward.svg") !important;
 
-	@media (max-width: 600px) {
+	@media (max-width: 650px) {
 		display: none;
 	}
 }
 
-#reload-button,
-#zen-sidebar-web-panel-reload {
+:root:not([zen-sidebar-legacy="true"]) #forward-button,
+:root:not([zen-sidebar-legacy="true"]) #zen-sidebar-web-panel-forward {
+	list-style-image: url("forward.svg") !important;
+
+	@media (max-width: 650px) {
+		display: none;
+	}
+}
+
+:root[zen-sidebar-legacy="true"] #reload-button,
+:root[zen-sidebar-legacy="true"] #zen-sidebar-web-panel-reload {
 	list-style-image: url("reload.svg") !important;
 
 	@media (max-width: 650px) {
@@ -38,6 +47,15 @@
 	}
 }
 
+:root:not([zen-sidebar-legacy="true"]) #reload-button,
+:root:not([zen-sidebar-legacy="true"]) #zen-sidebar-web-panel-reload {
+	list-style-image: url("reload.svg") !important;
+
+	@media (max-width: 700px) {
+		display: none;
+	}
+}
+
 #stop-button,
 .close-icon,
 #zen-sidebar-web-panel-close {