diff --git a/chrome/Fx65_tabs_on_bottom.css b/chrome/Fx65_tabs_on_bottom.css index 33e4aab..e52f6a1 100644 --- a/chrome/Fx65_tabs_on_bottom.css +++ b/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-window-control-width: 138px -} + --uc-titlebar-padding: 0px; } :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 */ diff --git a/chrome/hide_tabs_toolbar.css b/chrome/hide_tabs_toolbar.css index 144451d..fd01d9f 100644 --- a/chrome/hide_tabs_toolbar.css +++ b/chrome/hide_tabs_toolbar.css @@ -1,25 +1,26 @@ /* Hide tabs toolbar Fx65+ */ -:root{ - --uc-toolbar-height: 32px; - --uc-window-control-width: 138px; -} -#navigator-toolbox{ --window-drag-space-width: 24px; } + +/* 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-toolbar-height: 32px; } :root:not([uidensity="compact"]){--uc-toolbar-height: 38px} - -#TabsToolbar{visibility: collapse} +#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; diff --git a/chrome/hide_tabs_with_one_tab.css b/chrome/hide_tabs_with_one_tab.css index da85245..ed7dd89 100644 --- a/chrome/hide_tabs_with_one_tab.css +++ b/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 */ -#navigator-toolbox{ - --window-drag-space-width: 20px; -} +:root[sizemode="normal"] #nav-bar{ --uc-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 */ -:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { padding: 0px var(--window-drag-space-width,0px) } +#nav-bar{ padding: 0 var(--uc-window-drag-space-width,0px) } diff --git a/chrome/hide_tabs_with_one_tab_w_window_controls.css b/chrome/hide_tabs_with_one_tab_w_window_controls.css index 622fb7d..d8ea174 100644 --- a/chrome/hide_tabs_with_one_tab_w_window_controls.css +++ b/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 */ -#navigator-toolbox{ --window-drag-space-width: 20px } +Window controls will be all wrong without it + +*/ #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) -} \ No newline at end of file diff --git a/chrome/navbar_tabs_oneliner.css b/chrome/navbar_tabs_oneliner.css index f2e6a3d..c7432e4 100644 --- a/chrome/navbar_tabs_oneliner.css +++ b/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,16 +23,23 @@ #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(--window-drag-space-width,0px) + padding-left: var(--uc-window-drag-space-width,20px); +} + +@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 */ .tab-close-button{ margin-top: 0 !important } /* Hide dropdown placeholder */ -#urlbar-container:not(:hover) .urlbar-history-dropmarker{margin-inline-start: -28px;} \ No newline at end of file +#urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; } \ No newline at end of file diff --git a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css b/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css index b3ece17..02cf489 100644 --- a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css +++ b/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 */ -: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) +#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)) } +@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; } + #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; @@ -46,4 +60,4 @@ .tab-close-button{ margin-top: 0 !important } /* Hide dropdown placeholder */ -#urlbar-container:not(:hover) .urlbar-history-dropmarker{margin-inline-start: -28px;} \ No newline at end of file +#urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; } diff --git a/chrome/navbar_tabs_oneliner_tabs_on_left.css b/chrome/navbar_tabs_oneliner_tabs_on_left.css index 4ac94ab..4fcab57 100644 --- a/chrome/navbar_tabs_oneliner_tabs_on_left.css +++ b/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 */ @@ -15,12 +26,11 @@ #urlbar-container{ min-width:unset !important } } -#toolbar-menubar{ height:initial !important; } +#toolbar-menubar{ height: initial !important; } #toolbar-menubar[inactive] > #menubar-items{ opacity: 0; pointer-events: none; } #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,14 +49,16 @@ padding-left: 0px !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) +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ + :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{ + width: var(--uc-window-drag-space-width) !important; + display: -moz-box !important; + } + #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; } } /* 1px margin on touch density causes tabs to be too high */ .tab-close-button{ margin-top: 0 !important } /* Hide dropdown placeholder */ -#urlbar-container:not(:hover) .urlbar-history-dropmarker{margin-inline-start: -28px;} \ No newline at end of file +#urlbar-container:not(:hover) .urlbar-history-dropmarker{ margin-inline-start: -28px; } \ No newline at end of file diff --git a/chrome/tabs_below_content.css b/chrome/tabs_below_content.css index 24b2be8..5b57b12 100644 --- a/chrome/tabs_below_content.css +++ b/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{ - --uc-window-control-width: 138px; -} +Window controls will be all wrong without it -#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; } diff --git a/chrome/window_control_placeholder_support.css b/chrome/window_control_placeholder_support.css new file mode 100644 index 0000000..3ec0b62 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/chrome/window_control_placeholder_support_mac.css b/chrome/window_control_placeholder_support_mac.css new file mode 100644 index 0000000..ccc0221 --- /dev/null +++ b/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); +} \ No newline at end of file