fix firefox tabs at bottom

This commit is contained in:
fuckwit 2025-01-03 17:21:24 +01:00
parent 15ea443308
commit acc9c123df

View File

@ -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. */ 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 */ #navigator-toolbox{
display: contents;
@-moz-document url(chrome://browser/content/browser.xhtml){ --uc-navbar-height: 40px;
}
#titlebar{ -moz-appearance: none !important; } :root[uidensity="compact"] #navigator-toolbox{
--uc-navbar-height: 34px;
#navigator-toolbox > div{ display: contents } }
#main-window > body > #browser,
.global-notificationbox, .global-notificationbox,
#mainPopupSet, #tab-notification-deck,
#browser, #toolbar-menubar{
#customization-container,
#tab-notification-deck{
order: -1; order: -1;
} }
/* Remove the next row if you want tabs to be the top-most row */ #TabsToolbar{
#titlebar{ max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows,1));
order: 2; }
#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);
}
} }
#toolbar-menubar{ #nav-bar,
position: fixed; #PersonalToolbar{
display: flex; background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
width: 100vw; background-position: top,var(--lwt-background-alignment);
top: 0px; background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
-moz-window-dragging: drag; 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));
} }
/* 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]{ #urlbar[breakout][breakout-extend]{
display: flex !important; display: flex !important;
flex-direction: column-reverse; flex-direction: column-reverse !important;
bottom: 0px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */ transform: translateY(calc(var(--urlbar-container-height) - 100%));
top: auto !important; }
#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; } .urlbarView-body-inner{ border-top-style: none !important; }
/* Yeah, removes window controls. Likely not wanted on bottom row */ #TabsToolbar{
#TabsToolbar > .titlebar-buttonbox-container{ display: none } order: 3
#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 }
} }