Move window control placeholder styles to shared stylesheet

chrome/Fx65_tabs_on_bottom.css

@@ -4,10 +4,19 @@ Use Fx65_tabs_on_bottom_menubar_on_top_patch if you
 have menubar permanently enabled and want it on top
  */
 
+/* IMPORTANT */
+/*
+Get EITHER
+window_control_placeholder_support.css
+OR
+window_control_placeholder_support_mac.css
+
+Window controls will be all wrong without it
+
+*/
+
 :root{
-  --uc-titlebar-padding: 0px;
+  --uc-titlebar-padding: 0px; }
-  --uc-window-control-width: 138px
-}
 :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
 :root[tabsintitlebar="true"] #nav-bar{ --window-drag-space-width: 24px; }
 
@@ -32,12 +41,6 @@ have menubar permanently enabled and want it on top
   -moz-appearance: none !important;
 }
 
-/* Space to drag the window on both sides of navbar */
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
-  padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
-  padding-left: var(--window-drag-space-width,0px)
-}
-
 .titlebar-placeholder,
 #TabsToolbar .titlebar-spacer{ display: none; }
 /* Also hide the toolbox bottom border which isn't at bottom with this setup */

chrome/hide_tabs_toolbar.css

@@ -1,25 +1,26 @@
 /* Hide tabs toolbar Fx65+ */
-:root{
+
-  --uc-toolbar-height: 32px;
+/* IMPORTANT */
-  --uc-window-control-width: 138px;
+/*
-}
+Get EITHER
-#navigator-toolbox{ --window-drag-space-width: 24px; }
+window_control_placeholder_support.css
+OR
+window_control_placeholder_support_mac.css
+
+Window controls will be all wrong without it
+
+*/
+
+:root{ --uc-toolbar-height: 32px; }
 
 :root:not([uidensity="compact"]){--uc-toolbar-height: 38px}
 
-
 #TabsToolbar{ visibility: collapse }
 
 :root:not([inFullscreen]) #nav-bar{
   margin-top: calc(0px - var(--uc-toolbar-height));
 }
 
-/* Space to drag the window on both sides of navbar */
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
-  padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
-  padding-left: var(--window-drag-space-width,0px)
-}
-
 #toolbar-menubar{
   min-height:unset !important;
   height:var(--uc-toolbar-height) !important;

chrome/hide_tabs_with_one_tab.css

@@ -2,13 +2,12 @@
 /* Firefox 65+ only */
 /* !!USER!! -  REMOVE ALL BUTTONS you can from the tabs toolbar */
 
-/* Configurable window drag space  */
+:root[sizemode="normal"] #nav-bar{ --uc-window-drag-space-width: 20px }
-#navigator-toolbox{
-  --window-drag-space-width: 20px;
-}
 
 #titlebar{ -moz-appearance: none !important; }
+
 #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox{ min-height: 0 !important; }
+
 :root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
 :root:not([customizing]) #TabsToolbar .titlebar-button{
   -moz-appearance: none !important;
@@ -19,12 +18,14 @@
   margin: 0 !important;
 }
 #tabbrowser-tabs .tabbrowser-tab{ height: var(--tab-min-height) }
+
 #tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
   visibility: collapse !important;
 }
 
 /* Button re-styling */
 #tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
+
 #tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
   padding: 0 !important;
   transform: scale(0.6);
@@ -32,11 +33,11 @@
 }
 /* Extra top padding  in maximized window */
 :root[sizemode="maximized"] > #navigator-toolbox{ padding-top:7px !important; }
+
 /* Fix window controls not being clickable */
 #toolbar-menubar:hover{
   min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
   height: calc(var(--tab-min-height) + var(--space-above-tabbar) - 1px) !important;
   -moz-appearance: initial !important;
 }
-/* Space to drag the window on both sides of navbar */
+#nav-bar{ padding: 0 var(--uc-window-drag-space-width,0px) }
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { padding: 0px var(--window-drag-space-width,0px) }

chrome/hide_tabs_with_one_tab_w_window_controls.css

@@ -2,10 +2,16 @@
 /* Firefox 65+ only */
 /* !!USER!! -  REMOVE ALL BUTTONS you can from the tabs toolbar */
 
-:root{ --uc-window-control-width: 138px; }
+/* IMPORTANT */
+/*
+Get EITHER
+window_control_placeholder_support.css
+OR
+window_control_placeholder_support_mac.css
 
-/* Configurable window drag space  */
+Window controls will be all wrong without it
-#navigator-toolbox{ --window-drag-space-width: 20px }
+
+*/
 
 #titlebar{ -moz-appearance: none !important; }
 /* We'll use window controls from menubar instead */
@@ -30,6 +36,7 @@
 
 /* Button re-styling */
 #tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
+
 #tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
   padding: 0 !important;
   transform: scale(0.6);
@@ -46,9 +53,3 @@
 }
 
 :root:not([customizing]) #toolbar-menubar[autohide][inactive] > #menubar-items{ pointer-events: none; opacity: 0 }
-
-/* Space to drag the window on both sides of navbar */
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
-  padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
-  padding-left: var(--window-drag-space-width,0px)
-}

chrome/navbar_tabs_oneliner.css

@@ -1,12 +1,17 @@
+/*Make tabs and navbar appear side-by-side tabs on right */
+
 /* Modify these to change relative widths or default height */
-#navigator-toolbox{ --uc-navigationbar-width: 40vw; --uc-toolbar-height: 40px; --window-drag-space-width: 20px}
+#navigator-toolbox{
+	--uc-navigationbar-width: 40vw;
+	--uc-toolbar-height: 40px;
+}
 /* Override for other densities */
 :root[uidensity="compact"] > #navigator-toolbox{ --uc-toolbar-height: 32px; }
 :root[uidensity="touch"] > #navigator-toolbox{ --uc-toolbar-height: 40px; }
 
 /* prevent urlbar overflow on narrow windows */
 /* Dependent on how many items are in navigation toolbar ADJUST AS NEEDED */
-@media screen and (max-width: 1000px){
+@media screen and (max-width: 1100px){
   #urlbar-container{ min-width:unset !important }
 }
 
@@ -18,12 +23,19 @@
 #nav-bar{
 	margin-right:calc(100vw - var(--uc-navigationbar-width));
   margin-top: calc(0px - var(--uc-toolbar-height));
+	padding-right: 0px !important;
 }
 
-/* Space to drag the window on both sides of navbar */
+/* Space to drag the window on left side of navbar */
 :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
-  padding-right: 0px !important;
+  padding-left: var(--uc-window-drag-space-width,20px);
-  padding-left: var(--window-drag-space-width,0px)
+}
+
+@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
+  :root:not([inFullscreen]) #nav-bar{
+    padding-left: calc(var(--uc-window-control-width,72px) + var(--uc-window-drag-space-width,20px));
+  }
+  .titlebar-buttonbox-container{ position: fixed; left: 0px; z-index: 3; }
 }
 
 /* 1px margin on touch density causes tabs to be too high */

chrome/navbar_tabs_oneliner_menu_buttons_on_right.css

@@ -1,9 +1,21 @@
+/* Variation of oneliner where menubutton and overflow button are next to window controls (if window controls are on right side) */
+
+/* IMPORTANT */
+/*
+Get EITHER
+window_control_placeholder_support.css
+OR
+window_control_placeholder_support_mac.css
+
+Window controls will be all wrong without it
+
+*/
+
 /* Modify these to change relative widths or default height */
+
 #navigator-toolbox{
   --uc-navigationbar-width: 50vw;
-  --uc-window-control-width: 138px;
   --uc-toolbar-height: 40px;
-  --window-drag-space-width: 20px
 }
 /* reserved space for overflow + menu buttons */
 #navigator-toolbox{--uc-buttons-width: calc(56px + 4 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px))}
@@ -24,17 +36,19 @@
 .titlebar-placeholder[type="pre-tabs"],.titlebar-spacer[type="pre-tabs"]{ width:8px !important}
 #nav-bar{ margin-top: calc(0px - var(--uc-toolbar-height)); }
 
-/* Space to drag the window on both sides of navbar */
+#nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-window-control-width) - var(--uc-buttons-width) - var(--uc-window-drag-space-width)) }
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
+@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
-  padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
+  :root:not([inFullscreen]) #nav-bar{
-  padding-left: var(--window-drag-space-width,0px)
+    padding-left: calc(var(--uc-window-control-width,72px) + var(--uc-window-drag-space-width,20px));
+  }
+  .titlebar-buttonbox-container{ position: fixed; left: 0px; z-index: 3; }
+  #nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-buttons-width) - var(--uc-window-drag-space-width)) }
 }
 
-#nav-bar-customization-target{ margin-right: calc(100vw - (var(--uc-navigationbar-width)) - var(--uc-buttons-width) - (3 * 46px) - var(--window-drag-space-width)) }
 #TabsToolbar > :not(hbox){ position: relative !important; z-index: 2 }
 .titlebar-placeholder[type="post-tabs"],
 .titlebar-spacer[type="post-tabs"]{
-  width: calc(var(--uc-buttons-width) + var(--window-drag-space-width)) !important;
+  width: calc(var(--uc-buttons-width) + var(--uc-window-drag-space-width)) !important;
 }
 #PanelUI-button,#nav-bar-overflow-button{
   margin: 0px !important;

chrome/navbar_tabs_oneliner_tabs_on_left.css

@@ -1,12 +1,23 @@
+/*Make tabs and navbar appear side-by-side tabs on left */
+
+/* IMPORTANT */
+/*
+Get EITHER
+window_control_placeholder_support.css
+OR
+window_control_placeholder_support_mac.css
+
+Window controls will be all wrong without it
+
+*/
+
 /* Modify these to change relative widths or default height */
 #navigator-toolbox{
   --uc-navigationbar-width: 40vw;
   --uc-toolbar-height: 40px;
-  --window-drag-space-width: 20px;
-  --uc-window-control-width: 138px;
 }
 /* Override for other densities */
-:root[uidensity="compact"] > #navigator-toolbox{ --uc-toolbar-height: 32px;}
+:root[uidensity="compact"] > #navigator-toolbox{ --uc-toolbar-height: 31px;}
 :root[uidensity="touch"] > #navigator-toolbox{ --uc-toolbar-height: 40px; }
 
 /* prevent urlbar overflow on narrow windows */
@@ -20,7 +31,6 @@
 #toolbar-menubar[inactive]{ margin-bottom: calc(0px - var(--uc-toolbar-height)) }
 
 #TabsToolbar > .titlebar-buttonbox-container,
-#TabsToolbar > .toolbar-items > spacer,
 .titlebar-spacer[type="post-tabs"]{
   display: none;
 }
@@ -39,10 +49,12 @@
   padding-left: 0px !important;
 }
 
-/* Space to drag the window on both sides of navbar */
+@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
+  :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
-  padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
+    width: var(--uc-window-drag-space-width) !important;
-  padding-left: var(--window-drag-space-width,0px)
+    display: -moz-box !important; 
+  }
+  #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; }
 }
 
 /* 1px margin on touch density causes tabs to be too high */

chrome/tabs_below_content.css

@@ -1,10 +1,13 @@
-/* Modify this to change window drag space width */
+/* IMPORTANT */
+/*
+Get EITHER
+window_control_placeholder_support.css
+OR
+window_control_placeholder_support_mac.css
 
-:root{
+Window controls will be all wrong without it
-  --uc-window-control-width: 138px;
-}
 
-#navigator-toolbox{ --window-drag-space-width: 24px }
+*/
 
 .titlebar-buttonbox-container{
   position: fixed;
@@ -31,12 +34,6 @@
 :root[sizemode="maximized"] > #navigator-toolbox{ padding-top: 8px !important; }
 :root[sizemode="maximized"] #toolbar-menubar:not([autohide="false"]) .titlebar-buttonbox-container{ top: 8px }
 
-/* Space to drag the window on both sides of navbar */
-:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
-  padding-right: calc(var(--uc-window-control-width) + var(--window-drag-space-width,0px));
-  padding-left: var(--window-drag-space-width,0px)
-}
-
 /* Move tabs below content */
 :root:not([inDOMFullscreen]) #content-deck{ margin-bottom: var(--tab-min-height) }
 #TabsToolbar{ position: fixed; bottom: 0px; width: 100vw; }

chrome/window_control_placeholder_support.css

@@ -0,0 +1,13 @@
+/* Creates placeholders for window controls */
+/* For window controls on RIGHT side of the window */
+/* This is a supporting file used by other stylesheets */
+
+:root{
+  --uc-window-control-width: 138px;
+  --uc-window-drag-space-width: 24px;
+}
+
+:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
+  padding-right: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-width,0px));
+  padding-left: var(--window-drag-space-width);
+}

chrome/window_control_placeholder_support_mac.css

@@ -0,0 +1,13 @@
+/* Creates placeholders for window controls */
+/* For window controls on LEFT side of the window */
+/* This is a supporting file used by other stylesheets */
+
+:root{
+  --uc-window-control-width: 72px;
+  --uc-window-drag-space-width: 24px;
+}
+
+:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
+  padding-left: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-width,0px));
+  padding-right: var(--window-drag-space-width);
+}