Created
September 9, 2021 19:04
-
-
Save psxlover/938dc43acf5130eba47a68da5596f517 to your computer and use it in GitHub Desktop.
Firefox 89 tabs on bottom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
/* Tabs on bottom for Firefox 89+ */ | |
/* based on https://support.mozilla.org/en-US/questions/1305615 | |
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */ | |
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */ | |
#TabsToolbar-customization-target { | |
/* Move tabs to the bottom of the "titlebar" */ | |
display: flex !important; | |
position: absolute !important; | |
bottom: 0 !important; | |
width: 100vw !important; | |
} | |
/* Fix tab width */ | |
#tabbrowser-tabs { | |
width: 100vw !important; | |
} | |
/* Remove space before first tab */ | |
.titlebar-spacer { | |
display: none !important; | |
} | |
#nav-bar { | |
/* Values used to calculate right margin for navigation bar */ | |
--window-button-size: 46px; | |
--window-button-fullscreen-size: 36px; | |
--private-browsing-indicator-size: 48px; | |
/* } | |
*|*:root[sizemode="maximized"][tabsintitlebar] #nav-bar, | |
*|*:root:not([sizemode="maximized"]) #nav-bar { */ | |
/* Move navication bar to the top (where tabs used to be) */ | |
margin-top: calc(-1 * var(--tab-min-height)) !important; | |
} | |
/* Retain height for tabs toolbar even if it "doesn't contain anything". | |
* Important for maximized window with titlebar due to TabsToolbar-customization-target not contributing to TabsToolbar's size and always moving the nagigation bar higher | |
* Also needed to make sure the nav bar is always at the correct size for densities other than compact. Better option is probably to fix the minimize/maximize/close button height | |
*/ | |
#TabsToolbar { | |
height: var(--tab-min-height) !important; | |
} | |
.titlebar-buttonbox-container { | |
/* --urlbar-min-height 32 default 26 compact 34 touch, --urlbar-container-height 40 normal 34 compact 44 touch */ | |
/* height: var(--urlbar-container-height) !important; */ | |
} | |
/* Expand navigator-toolbox to make extra room for the tabs */ | |
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox { | |
position: relative !important; | |
padding-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important; | |
} | |
/* Choose the right margin for nav-bar based on whether we are in fullscreen and whether the icon for private browsing is visible */ | |
*|*:root[tabsintitlebar][privatebrowsingmode=temporary] | |
#nav-bar:not([inFullscreen]) { | |
margin-right: calc(3 * var(--window-button-size) + var(--private-browsing-indicator-size)) !important; | |
} | |
*|*:root[tabsintitlebar]:not([privatebrowsingmode=temporary]) | |
#nav-bar:not([inFullscreen]) { | |
margin-right: calc(3 * var(--window-button-size)) !important; | |
} | |
*|*:root[privatebrowsingmode=temporary] | |
#nav-bar[inFullscreen] { | |
margin-right: calc(3 * var(--window-button-fullscreen-size) + var(--private-browsing-indicator-size)) !important; | |
} | |
*|*:root:not([privatebrowsingmode=temporary]) | |
#nav-bar[inFullscreen] { | |
margin-right: calc(3 * var(--window-button-fullscreen-size)) !important; | |
} | |
/* Fix dot position under pinned tab icon when compact Density is used */ | |
*|*:root[uidensity=compact] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), | |
*|*:root[uidensity=compact] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { | |
background-position: center bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment