MozillaZine

FF78: Get me back to tabs on the bottom, please,

User Help for Mozilla Firefox
Flycaster

User avatar
 
Posts: 948
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 9th, 2020, 11:35 am

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;
}
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

DanRaisch
Moderator

User avatar
 
Posts: 122514
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted January 9th, 2020, 12:59 pm

Just so we’re all clear, you mean version 72, not 78. Right?

dickvl

User avatar
 
Posts: 53000
Joined: July 18th, 2005, 3:25 am

Post Posted January 9th, 2020, 1:59 pm

Try to remove the @namespace line to see if that makes all code working.
Some elements have moved to HTML space as the result of getting rid of XUL and in some cases shadow DOM is used that may require simple selector in case you are crossing a shadow DOM boundary.

Remove this line:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Last edited by dickvl on January 9th, 2020, 2:04 pm, edited 1 time in total.

Flycaster

User avatar
 
Posts: 948
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 9th, 2020, 2:02 pm

DanRaisch wrote:Just so we’re all clear, you mean version 72, not 78. Right?


72, my bad.
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Flycaster

User avatar
 
Posts: 948
Joined: November 19th, 2008, 12:13 pm
Location: Boynton Beach, FL

Post Posted January 9th, 2020, 2:05 pm

dickvl wrote:Try to remove the @namespace line to see if that makes all code working.
Some elements have moved to HTML space as the result of getting rid of XUL and in some cases shadow DOM is used that may require simple selector in case you are crossing a shadow DOM boundary.

Remove this line:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */


Thanks Dick, you hit the nail on the head. However, FF72 on my desktop has the same css configuration as does the MS Surface that was just experiencing the tab bar problem, but the desktop doesn't have the tab bar problem even though it has the same @namespace... at the head of the codes??? Interesting?
Windows 10 H 64-bit, Quantum The Latest, Chrome v68, IE11, Thunderbird The Latest, Avast Pro

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 16 guests