From acc9c123dff31466296f6f4a76b018d2b09e625e Mon Sep 17 00:00:00 2001 From: fuckwit Date: Fri, 3 Jan 2025 17:21:24 +0100 Subject: [PATCH] fix firefox tabs at bottom --- .../framework/programs/firefox/userChrome.css | 156 ++++++++---------- 1 file changed, 72 insertions(+), 84 deletions(-) diff --git a/home/framework/programs/firefox/userChrome.css b/home/framework/programs/firefox/userChrome.css index 00da3b9..999ee3a 100644 --- a/home/framework/programs/firefox/userChrome.css +++ b/home/framework/programs/firefox/userChrome.css @@ -1,88 +1,76 @@ -/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css made available under Mozilla Public License v. 2.0 +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content_v2.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Moves tabs toolbar, bookmarks toolbar and main toolbar to the bottom of the window, and makes tabs be the bottom-most toolbar */ +/* This requires Firefox 133 + * By default tabs will be the top-most toolbar, but you can set the following pref to move them to bottom: + * userchrome.toolbars-below-content.tabs-at-bottom.enabled + */ -/* By default, menubar will stay on top with two options to select it's behavior - see below */ - -@-moz-document url(chrome://browser/content/browser.xhtml){ - - #titlebar{ -moz-appearance: none !important; } - - #navigator-toolbox > div{ display: contents } - .global-notificationbox, - #mainPopupSet, - #browser, - #customization-container, - #tab-notification-deck{ - order: -1; - } - - /* Remove the next row if you want tabs to be the top-most row */ - #titlebar{ - order: 2; - } - - #toolbar-menubar{ - position: fixed; - display: flex; - width: 100vw; - top: 0px; - -moz-window-dragging: drag; - } - /* Remove bottom border that won't do anything useful when at bottom of the window */ - #navigator-toolbox{ border-bottom: none !important; } - - #toolbar-menubar > spacer{ flex-grow: 1 } - - #urlbar[breakout][breakout-extend]{ - display: flex !important; - flex-direction: column-reverse; - bottom: 0px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */ - top: auto !important; - } - - .urlbarView-body-inner{ border-top-style: none !important; } - - /* Yeah, removes window controls. Likely not wanted on bottom row */ - #TabsToolbar > .titlebar-buttonbox-container{ display: none } - #toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 } - - /* Fix panels sizing */ - .panel-viewstack{ max-height: unset !important; } - - /* Fullscreen mode support */ - :root[sizemode="fullscreen"] #navigator-toolbox{ margin-top: 0 !important } - :root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{ visibility: collapse } - #fullscr-toggler{ bottom: 0; top: unset !important; } - - /* These three rules exist for compatibility with autohide_toolbox.css */ - #navigator-toolbox{ bottom: 0px; transform-origin: bottom } - #main-window > body > box{ margin-top: 0 !important; } - #toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black); } - - :root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{ - margin-block: calc(-1 * var(--bookmarks-toolbar-height)) 0 !important; - } - :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel{ - padding-block: 0 var(--bookmarks-toolbar-height) !important; - } - - /************** - Menubar options - By default, menubar is overlayed on top of web-content - ***************/ - - /* Uncomment the following if you want static menubar on top of the window (make menubar enabled) - * Use when menubar is enabled to always show it */ - - /* - #browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) } - */ - - /* OR, uncomment the following if you want menubar to appear below content, above tabs toolbar */ - - #toolbar-menubar{ position: static; display: flex; margin-top: 0px !important; background-color: transparent } - - /* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */ - #titlebar{ flex-direction: column } +#navigator-toolbox{ + display: contents; + --uc-navbar-height: 40px; +} +:root[uidensity="compact"] #navigator-toolbox{ + --uc-navbar-height: 34px; +} +#main-window > body > #browser, +.global-notificationbox, + #tab-notification-deck, + #toolbar-menubar{ + order: -1; +} + +#TabsToolbar{ + max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows,1)); +} +#toolbar-menubar, +#TabsToolbar{ + background: inherit !important; +} +@media (-moz-platform: linux){ + :root[sizemode="normal"][customtitlebar] #toolbar-menubar{ + border-top-left-radius: inherit; + border-top-right-radius: inherit; + } + #toolbar-menubar, + #TabsToolbar{ + opacity: 1 !important; + will-change: unset !important; + } + #notification-popup[side="top"]{ + margin-top: calc(-2 * var(--panel-padding-block) - 40px - 32px - 8.5em) !important; + } + #permission-popup[side="top"]{ + margin-top: calc(-2 * var(--panel-padding-block) - 2.5em); + } +} + +#nav-bar, +#PersonalToolbar{ + background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; + background-position: top,var(--lwt-background-alignment); + background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px)); + background-repeat: repeat,var(--lwt-background-tiling); +} +:root[lwtheme-image] #nav-bar, +:root[lwtheme-image] #PersonalToolbar{ + background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; +} +#PersonalToolbar{ + background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) - var( --uc-navbar-height)); +} +#urlbar[breakout][breakout-extend]{ + display: flex !important; + flex-direction: column-reverse !important; + transform: translateY(calc(var(--urlbar-container-height) - 100%)); +} +#urlbar[breakout-extend]:not([usertyping]) > .urlbar-input-container::after{ + display: flex; + content: ""; + height: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding)); +} +.urlbarView-body-inner{ border-top-style: none !important; } + +#TabsToolbar{ + order: 3 }