Just updated from 68 to 72 hoping I wasn't going to be in for "update frustration." But, alas, wrong again. Do love the fact that FF is always "improving," but improvement appears to be in the eyes of the beholder...either that, or I have to get new glasses. Anyway, using css for past updates, I've been able to have my tabs at the bottom, below the bookmark bar. Unfortunately, my tabs are now on the same line as the bookmark bar. As I am not good at figuring the css code, but can follow directions, I would most appreciate someone giving me the code that will get the tab bar to be just below the bookmark bar. Here's what has been working for me...I know it must be a mess with a lot of unnecessary code, but at least it does what I want it to do. So, hopefully someone will be able to show where to modify the code so that tabs will be on the bottom. Thanks.
/* .mozilla/firefox/~user~/chrome/userChrome.css */
/* firefox quantum 65+ */
/* note: '--tab-min-height' under 'height' - set both values to default:33px; compact:29px; touch:43px */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}
#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
/* TABS: height */
:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 27px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
--tab-min-height: 27px !important; /* needs to be the same as above under :root */
--tab-min-width: 80px !important;
}
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
width: 40px;
}
/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}
/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
color: black !important;
}
/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}
/*bold*//*
.tabbrowser-tab[selected] .tab-label {
font-weight: 900 !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
font-style: italic !important;
}
/* Rounded Tabs*/
.tabbrowser-tab {
box-sizing: border-box;
margin: 0 1px 0 1px !important;
border-radius: 10px 10px 0 0 !important;
}
.tabbrowser-tab .tab-text.tab-label {
color: black !important; /* tab text color - customizable */
}
.tabbrowser-tab[selected="true"] .tab-text.tab-label {
color: white !important; /* tab text color - customizable */
}
.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid gray !important; /* color is customizable */
border-bottom: none !important;
opacity: 1;
}
.tab-background {
border: none !important;
border-radius: 10px 10px 0 0 !important;
background: black;
opacity: .1;
}
.tab-line { /* = light top line in selected tab in Quantum default */
display: none !important;
}
.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
cursor: pointer !important;
}
.tabbrowser-tab:hover {
border: 1px solid grey !important;
}
.tabbrowser-tab[selected="true"]:hover {
border: none !important;
}
[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
border: none !important; /* leave as is; affects the New Tab icon (the plus) */
}
.tabbrowser-tab .tab-label {
font-weight: 900 !important;
}
.tabbrowser-tab:not([selected]) .tab-close-button {
visibility: hidden !important
}
.tabbrowser-tab:not([selected]):hover .tab-close-button {
visibility: visible !important
}
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
