![I-Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
how to change the way tabs are slightly hidden on either side in the top bar
Hello,
I've shown a picture because its difficult to describe. I would like to change the way the tabs are slightly hidden. If you reveal it on one side, it does it on the other side no matter how many tabs I have open.
This is my current userChrome.css file if it helps.
/* Should be put at * `$FIREFOX_PROFILE/chrome/userChrome.css` * e.g.: * `/Users/tordjohanespe/Library/Application%20Support/Firefox/Profiles/l2hbvytn.dev-edition-default-1510516302187/chrome/userChrome.css` */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ @-moz-document url(chrome://browser/content/browser.xul) { #TabsToolbar { margin-top: -3px !important; margin-bottom: -2px !important } #nav-bar { height: 36px !important; box-shadow: 0 0 2px #bbb !important; } .titlebar-placeholder { width: 10px !important; border: 0 !important; } .tabs-newtab-button { margin-left: 10px !important; } tab { margin-right: -15px !important; } tab:after { display: none !important; } tab:before { border: none!important; } #titlebar-buttonbox { margin-top: -5px; } tab>.tab-stack>.tab-background { background: #eee !important; border-width: 1px 1px 0 1px !important; border-style: solid !important; border-color: #aaa !important; border-radius: 4px; margin: 0 10px 0 !important; -moz-transform: perspective(100px) rotateX(30deg); box-shadow: 0 -2px 3px #bbb; } tab:hover>.tab-stack>.tab-background { background: #e3e3e3 !important; } .tab-content { padding: 0 19px !important; } .tab-label-container { font-size: 12px !important; } tab[selected="true"]>.tab-stack>.tab-background { background: #f5f6f7 !important; } /* This will make the blue bar on the top of the active tab go away, but it also makes the tab higher. Uncomment if desired. */ /* tab[selected="true"] { margin-top: -4px !important; } */ .tab-line[selected="true"] { opacity: 0 !important; }
Hello,
I've shown a picture because its difficult to describe. I would like to change the way the tabs are slightly hidden. If you reveal it on one side, it does it on the other side no matter how many tabs I have open.
This is my current userChrome.css file if it helps.
<pre><nowiki>/* Should be put at
* `$FIREFOX_PROFILE/chrome/userChrome.css`
* e.g.:
* `/Users/tordjohanespe/Library/Application%20Support/Firefox/Profiles/l2hbvytn.dev-edition-default-1510516302187/chrome/userChrome.css`
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
@-moz-document url(chrome://browser/content/browser.xul) {
#TabsToolbar {
margin-top: -3px !important;
margin-bottom: -2px !important
}
#nav-bar {
height: 36px !important;
box-shadow: 0 0 2px #bbb !important;
}
.titlebar-placeholder { width: 10px !important; border: 0 !important; }
.tabs-newtab-button { margin-left: 10px !important; }
tab {
margin-right: -15px !important;
}
tab:after { display: none !important; }
tab:before { border: none!important; }
#titlebar-buttonbox { margin-top: -5px; }
tab>.tab-stack>.tab-background {
background: #eee !important;
border-width: 1px 1px 0 1px !important;
border-style: solid !important;
border-color: #aaa !important;
border-radius: 4px;
margin: 0 10px 0 !important;
-moz-transform: perspective(100px) rotateX(30deg);
box-shadow: 0 -2px 3px #bbb;
}
tab:hover>.tab-stack>.tab-background {
background: #e3e3e3 !important;
}
.tab-content { padding: 0 19px !important; }
.tab-label-container { font-size: 12px !important; }
tab[selected="true"]>.tab-stack>.tab-background { background: #f5f6f7 !important; }
/* This will make the blue bar on the top of the active tab go away, but it also makes the tab higher. Uncomment if desired. */
/* tab[selected="true"] { margin-top: -4px !important; } */
.tab-line[selected="true"] {
opacity: 0 !important;
}</nowiki></pre>
Ilungisiwe
All Replies (1)
The picture didnt post, here it is.