🔥🔥🔥

- Fix Private Browsing indicator position on Australis - Make "Add bookmark" pop-up a dialog - More accuracy fixes - Redo titlebar area with better implementation
echelon-theme · Feb 26, 2024 · 9361110 · 9361110
1 parent 2c7838a
commit 9361110
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 36 deletions.
diff --git a/Echelon/Profile Folder/chrome/CSS/echelon_extra.uc.css b/Echelon/Profile Folder/chrome/CSS/echelon_extra.uc.css
@@ -176,4 +176,15 @@ menupopup[type=arrow]:not(#PlacesChevronPopup, #OtherBookmarksPopup)[arrowpositi
 #main-window[echelon-style-2][tabs-on-top=true] #tabbrowser-arrowscrollbox::part(scrollbutton-up),
 #main-window[echelon-style-2][tabs-on-top=true] #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
   background-image: url("images/tab-arrow-left-inverted.png") !important;
+}
+
+#tabbrowser-arrowscrollbox::part(scrollbutton-up),
+#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  width: 22px !important;
+  list-style-image: none !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  padding-bottom: 2px !important;
+  border: 0 !important;
+  border-radius: 0 !important;
 }
diff --git a/Echelon/Profile Folder/chrome/Echelon.customizeUI.css b/Echelon/Profile Folder/chrome/Echelon.customizeUI.css
@@ -21,6 +21,10 @@
   background-attachment: fixed !important;
 }
 
+#main-window[customizing] .titlebar-buttonbox-container {
+  margin-inline-end: -2em !important;
+}
+
 #main-window[customizing] #customization-container,
 #main-window[customizing] #navigator-toolbox,
 #main-window[customizing] #browser {
@@ -31,7 +35,8 @@
 #navigator-toolbox,
 #customization-container,
 #titlebar,
-#browser {
+#browser,
+.titlebar-buttonbox-container {
   transition-property: margin-left, margin-right !important;
   transition-duration: 150ms !important;
   transition-timing-function: ease-out !important;
@@ -61,6 +66,10 @@
   padding-inline: 10px !important;
 }
 
+#main-window[customizing] #TabsToolbar {
+  padding-inline-end: 0 !important;
+}
+
 @media (-moz-windows-compositor) {
   #main-window[echelon-style-4][customizing] .titlebar-buttonbox-container {
     right: calc(-11px - 2em) !important;

diff --git a/Echelon/Profile Folder/chrome/Echelon.misc.css b/Echelon/Profile Folder/chrome/Echelon.misc.css
@@ -8,13 +8,13 @@
  * You can find the SCSS source files in echelon-scss-src/
  */
 
-.titlebar-buttonbox-container {
+:root:not([echelon-style-4]) .titlebar-buttonbox-container {
   position: fixed !important;
   right: 0 !important;
   top: 0 !important;
 }
 
-:root:not([echelon-appearance-xp])[tabs-on-top][sizemode=maximized] .titlebar-buttonbox-container {
+:root:not([echelon-style-4], [echelon-appearance-xp])[tabs-on-top][sizemode=maximized] .titlebar-buttonbox-container {
   position: static !important;
 }
 

diff --git a/Echelon/Profile Folder/chrome/Echelon.tabs.css b/Echelon/Profile Folder/chrome/Echelon.tabs.css
@@ -14,7 +14,7 @@
 #TabsToolbar:not(:-moz-lwtheme) {
   position: relative;
 }
-:root[sizemode=maximized][tabsintitlebar][tabs-on-top=true] #TabsToolbar {
+:root[tabsintitlebar][tabs-on-top=true] #TabsToolbar {
   padding-inline-end: 0 !important;
 }
 

diff --git a/Echelon/Profile Folder/chrome/Echelon.tweaks.css b/Echelon/Profile Folder/chrome/Echelon.tweaks.css
@@ -194,23 +194,29 @@
   display: none !important;
 }
 
-#main-window[echelon-style-2][tabs-on-top=true] #TabsToolbar #new-tab-button .toolbarbutton-icon {
+#main-window[echelon-style-2][tabs-on-top=true]:not([echelon-style-4]) #TabsToolbar #new-tab-button .toolbarbutton-icon {
   background-image: url("images/newtab-inverted.png") !important;
 }
 
-#main-window[echelon-style-2][tabs-on-top=true] #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+#main-window[echelon-style-2][tabs-on-top=true]:not([echelon-style-4]) #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   background-image: url("images/toolbarbutton-dropdown-arrow-inverted.png") !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
 }
 
+#main-window[echelon-style-4][tabs-on-top=true] #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  background-image: url("images/toolbarbutton-dropdown-arrow.png") !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+
 #main-window[echelon-style-2][tabs-on-top=true] #scrollbutton-up .toolbarbutton-icon,
 #main-window[echelon-style-2][tabs-on-top=true] #scrollbutton-down .toolbarbutton-icon {
   background-image: url("images/tab-arrow-left-inverted.png") !important;
 }
 
 /** ECHELON STYLE 3 (Firefox 14.0 - Firefox 27.0) **/
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button) {
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button) {
   background: hsla(210, 32%, 93%, 0) padding-box !important;
   border: 1px solid !important;
   border-color: hsla(210, 54%, 20%, 0) hsla(210, 54%, 20%, 0) hsla(210, 54%, 20%, 0) !important;
@@ -225,19 +231,19 @@
   width: 32px !important;
 }
 
-#nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, .toolbarbutton-combined):last-of-type {
+#nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, .toolbarbutton-combined):last-of-type {
   margin-inline-end: 0 !important;
 }
 
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover,
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover,
 #main-window[echelon-style-4] toolbar:is(#nav-bar, #TabsToolbar) #bookmarks-button:hover + #bookmarks-menu-button {
   background-image: linear-gradient(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0.1)) !important;
   border-color: hsla(210, 54%, 20%, 0.15) hsla(210, 54%, 20%, 0.2) hsla(210, 54%, 20%, 0.25) !important;
   box-shadow: 0 1px hsla(0, 0%, 100%, 0.3) inset, 0 1px hsla(210, 54%, 20%, 0.03), 0 0 2px hsla(210, 54%, 20%, 0.1) !important;
 }
 
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover:active,
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled])[open] {
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover:active,
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled])[open] {
   background-image: linear-gradient(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0.1)) !important;
   background-color: hsla(210, 54%, 20%, 0.15) !important;
   border-color: hsla(210, 54%, 20%, 0.3) hsla(210, 54%, 20%, 0.35) hsla(210, 54%, 20%, 0.4) !important;
@@ -246,7 +252,7 @@
   transition: none !important;
 }
 
-#main-window[echelon-style-3] #nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #bookmarks-menu-button, #appmenu-button, .toolbarbutton-combined) > .toolbarbutton-icon {
+#main-window[echelon-style-3] #nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #bookmarks-menu-button, #appmenu-button, .toolbarbutton-combined) > .toolbarbutton-icon {
   padding: 2px 6px !important;
 }
 
@@ -770,10 +776,7 @@
 #main-window[privatebrowsingnewindicator][echelon-style-4][tabsintitlebar]:not([sizemode=maximized]) .private-browsing-indicator {
   position: fixed !important;
   top: 1px !important;
-  right: calc(var(--caption-mask-width) + 46px) !important;
-}
-#main-window[privatebrowsingnewindicator][echelon-style-4][tabsintitlebar][sizemode=maximized] .private-browsing-indicator {
-  margin-inline-end: 46px !important;
+  right: calc(var(--caption-mask-width) + 4px) !important;
 }
 #main-window[privatebrowsingnewindicator][echelon-style-4][echelon-appearance-australis-windows8] .private-browsing-indicator {
   top: 0 !important;
@@ -787,6 +790,14 @@
 #main-window[privatebrowsingnewindicator][echelon-style-4]:not([tabsintitlebar])[echelon-appearance-australis-windows8] .private-browsing-indicator {
   background-image: url("images/privatebrowsing-mask-tabstrip.png") !important;
 }
+@media not (-moz-windows-compositor) {
+  #main-window[privatebrowsingnewindicator][echelon-style-4][tabsintitlebar]:not([sizemode=maximized]) .private-browsing-indicator {
+    width: 48px !important;
+    height: 32px !important;
+    top: 0 !important;
+    background-image: url("images/privatebrowsing-mask-titlebar-XPVista7-tall.png") !important;
+  }
+}
 
 /* Hide Add to Bookmarks button if the user is not using Style 4 */
 #bookmarks-button {
@@ -1265,7 +1276,7 @@
 /** BASIC THEME **/
 @media not (-moz-windows-compositor) {
   #main-window:not([echelon-appearance-xp]) .titlebar-buttonbox-container {
-    top: var(--padded-border, 0) !important;
+    padding-top: calc(var(--padded-border) + 1px) !important;
   }
   #main-window[echelon-appearance-xp] .titlebar-buttonbox-container {
     top: calc(var(--padded-border) + 5px) !important;
@@ -1277,6 +1288,7 @@
     height: calc(var(--titlebar-height) + 6px) !important;
   }
   #nav-bar,
+  :root[echelon-style-4] #nav-bar,
   #PersonalToolbar,
   #main-window[sizemode=normal] #browser,
   #customization-container {

diff --git a/Echelon/Profile Folder/chrome/JS/echelon_bookmark_dialog.uc.js b/Echelon/Profile Folder/chrome/JS/echelon_bookmark_dialog.uc.js
@@ -0,0 +1,26 @@
+// ==UserScript==
+// @name            Echelon :: Bookmark Dialog
+// @description     Makes "Add Bookmark", etc. dialogs into separate windows again
+// @author          aubymori
+// @include         main
+// ==/UserScript==
+
+{
+    let showBookmarkDialog_orig = PlacesUIUtils.showBookmarkDialog;
+    async function showBookmarkDialog_hook(aInfo, aParentWindow = null)
+    {
+        let dialogBox = null;
+        if (aParentWindow.gDialogBox)
+        {
+            dialogBox = aParentWindow.gDialogBox;
+            aParentWindow.gDialogBox = null;
+        }
+        let result = (showBookmarkDialog_orig.bind(this))(aInfo, aParentWindow);
+        if (dialogBox)
+        {
+            aParentWindow.gDialogBox = dialogBox;
+        }
+        return result;
+    }
+    PlacesUIUtils.showBookmarkDialog = showBookmarkDialog_hook.bind(PlacesUIUtils);
+}
diff --git a/Echelon/Profile Folder/chrome/build.txt b/Echelon/Profile Folder/chrome/build.txt
@@ -1 +1 @@
-312
+314
diff --git a/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.customizeUI.scss b/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.customizeUI.scss
@@ -11,6 +11,12 @@
   background-attachment: fixed !important;
 }
 
+// Hack to prevent the titlebar mask from moving
+
+#main-window[customizing] .titlebar-buttonbox-container {
+  margin-inline-end: -2em !important;
+}
+
 #main-window[customizing] #customization-container,
 #main-window[customizing] #navigator-toolbox,
 #main-window[customizing] #browser {
@@ -21,7 +27,8 @@
 #navigator-toolbox,
 #customization-container,
 #titlebar,
-#browser {
+#browser,
+.titlebar-buttonbox-container {
   transition-property: margin-left, margin-right !important;
   transition-duration: 150ms !important;
   transition-timing-function: ease-out !important;
@@ -51,6 +58,10 @@
   padding-inline: 10px !important;
 }
 
+#main-window[customizing] #TabsToolbar {
+  padding-inline-end: 0 !important;
+}
+
 @media (-moz-windows-compositor) {
   #main-window[echelon-style-4][customizing] .titlebar-buttonbox-container {
     right: calc(-11px - 2em) !important;

diff --git a/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.misc.scss b/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.misc.scss
@@ -1,10 +1,10 @@
-.titlebar-buttonbox-container {
+:root:not([echelon-style-4]) .titlebar-buttonbox-container {
   position: fixed !important;
   right: 0 !important;
   top: 0 !important;
 }
 
-:root:not([echelon-appearance-xp])[tabs-on-top][sizemode="maximized"] .titlebar-buttonbox-container {
+:root:not([echelon-style-4], [echelon-appearance-xp])[tabs-on-top][sizemode="maximized"] .titlebar-buttonbox-container {
   position: static !important;
 }
 

diff --git a/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.tabs.scss b/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.tabs.scss
@@ -5,7 +5,7 @@
     position: relative;
   }
 
-  :root[sizemode="maximized"][tabsintitlebar][tabs-on-top="true"] & {
+  :root[tabsintitlebar][tabs-on-top="true"] & {
     padding-inline-end: 0 !important;
   }
 }

diff --git a/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.tweaks.scss b/Echelon/Profile Folder/chrome/echelon-scss-src/Echelon.tweaks.scss
@@ -204,24 +204,30 @@
   display: none !important;
 }
 
-#main-window[echelon-style-2][tabs-on-top="true"] #TabsToolbar #new-tab-button .toolbarbutton-icon {
+#main-window[echelon-style-2][tabs-on-top="true"]:not([echelon-style-4]) #TabsToolbar #new-tab-button .toolbarbutton-icon {
   background-image: url("images/newtab-inverted.png") !important;
 }
 
-#main-window[echelon-style-2][tabs-on-top="true"] #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+#main-window[echelon-style-2][tabs-on-top="true"]:not([echelon-style-4]) #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   background-image: url("images/toolbarbutton-dropdown-arrow-inverted.png") !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
 }
 
+#main-window[echelon-style-4][tabs-on-top="true"] #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  background-image: url("images/toolbarbutton-dropdown-arrow.png") !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+
 #main-window[echelon-style-2][tabs-on-top="true"] #scrollbutton-up .toolbarbutton-icon, 
 #main-window[echelon-style-2][tabs-on-top="true"] #scrollbutton-down .toolbarbutton-icon {
   background-image: url("images/tab-arrow-left-inverted.png") !important;
 }
 
 /** ECHELON STYLE 3 (Firefox 14.0 - Firefox 27.0) **/
 
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button) {
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button) {
   background: hsla(210,32%,93%,0) padding-box !important;
   border: 1px solid !important;
   border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0) !important;
@@ -238,11 +244,11 @@
   width: 32px !important;
 }
 
-#nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, .toolbarbutton-combined):last-of-type {
+#nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, .toolbarbutton-combined):last-of-type {
   margin-inline-end: 0 !important;
 }
 
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover,
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover,
 #main-window[echelon-style-4] toolbar:is(#nav-bar, #TabsToolbar) #bookmarks-button:hover + #bookmarks-menu-button {
   background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)) !important;
   border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25) !important;
@@ -251,8 +257,8 @@
               0 0 2px hsla(210,54%,20%,.1) !important;
 }
 
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover:active,
-#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled])[open] {
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled]):hover:active,
+#main-window[echelon-style-3] toolbar:is(#nav-bar, #TabsToolbar) .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #appmenu-button, #alltabs-button):not([disabled])[open] {
   background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)) !important;
   background-color: hsla(210,54%,20%,.15) !important;
   border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4) !important;
@@ -264,7 +270,7 @@
   transition: none !important;
 }
 
-#main-window[echelon-style-3] #nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #bookmarks-menu-button, #appmenu-button, .toolbarbutton-combined) > .toolbarbutton-icon {
+#main-window[echelon-style-3] #nav-bar .toolbarbutton-1:not(#back-button, #forward-button, #TabsToolbar toolbarbutton, #tabs-newtab-button, #PanelUI-menu-button, #reload-button.unified, #stop-button.unified, #go-button.unified, #bookmarks-menu-button, #appmenu-button, .toolbarbutton-combined) > .toolbarbutton-icon {
   padding: 2px 6px !important;
 }
 
@@ -832,11 +838,7 @@
   &[tabsintitlebar]:not([sizemode="maximized"]) .private-browsing-indicator {
     position: fixed !important;
     top: 1px !important;
-    right: calc(var(--caption-mask-width) + 46px) !important;
-  }
-
-  &[tabsintitlebar][sizemode="maximized"] .private-browsing-indicator {
-    margin-inline-end: 46px !important;
+    right: calc(var(--caption-mask-width) + 4px) !important;
   }
 
   // Windows 8+
@@ -862,6 +864,16 @@
       }
     }
   }
+
+  // Basic Theme & XP 
+  @media not (-moz-windows-compositor) {
+    &[tabsintitlebar]:not([sizemode="maximized"]) .private-browsing-indicator {
+      width: 48px !important;
+      height: 32px !important;
+      top: 0 !important;
+      background-image: url('images/privatebrowsing-mask-titlebar-XPVista7-tall.png') !important;
+    }
+  }
 }
 
 /* Hide Add to Bookmarks button if the user is not using Style 4 */
@@ -1377,7 +1389,7 @@
 @media not (-moz-windows-compositor) {
   #main-window:not([echelon-appearance-xp]) .titlebar-buttonbox-container {
     // I don't think this looks good on XP themes, so I disabled it.
-    top: var(--padded-border, 0) !important;
+    padding-top: calc(var(--padded-border) + 1px) !important;
   }
 
   #main-window[echelon-appearance-xp] .titlebar-buttonbox-container {
@@ -1393,6 +1405,7 @@
   }
 
   #nav-bar,
+  :root[echelon-style-4] #nav-bar,
   #PersonalToolbar,
   #main-window[sizemode="normal"] #browser,
   #customization-container {