Last active
December 9, 2019 11:03
-
-
Save Dema/c72437735e58af57b81f6a094fa7c996 to your computer and use it in GitHub Desktop.
userChome.css for Firefox Quantum. Multirow tabs
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'); | |
#TabsToolbar { | |
display: block !important; | |
} | |
:root { | |
--tab-min-height: 23px !important; | |
} | |
/* Selectors for Firefox 71+ */ | |
/* These are not tabs toolbar specific but horizontal scrollbox isn't used elsewhere, except in bookmarks toolbar but there it doesn't have [part] attribute since it's not in shadow-root */ | |
@-moz-document url(chrome://browser/content/browser.xhtml){ | |
.scrollbutton-up[orient="horizontal"][part]~spacer, | |
.scrollbutton-up[orient="horizontal"][part], | |
.scrollbutton-down[orient="horizontal"][part]{ display: none } | |
scrollbox[part][orient="horizontal"]{ | |
display: flex; | |
flex-wrap: wrap; | |
overflow-y: auto; | |
max-height: calc(var(--tab-min-height) * var(--multirow-n-rows)); | |
scrollbar-color: currentColor transparent; | |
scrollbar-width: thin; | |
} | |
} | |
/* Test for Firefox > 66 */ | |
@supports (inset-block:auto){ | |
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{ | |
display: flex; | |
flex-wrap: wrap; | |
overflow-y: auto; | |
max-height: calc(var(--tab-min-height) * var(--multirow-n-rows)); | |
scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color); | |
scrollbar-width: thin; | |
} | |
#tabbrowser-tabs > .tabbrowser-arrowscrollbox { | |
overflow: -moz-hidden-unscrollable; | |
display: block; | |
} | |
} | |
.toolbar-items { | |
display: block !important; | |
} | |
.tabbrowser-tab:not([pinned]) { | |
flex-grow: 1; | |
/* min-width: 140px; */ | |
border-bottom: 1px solid #c7c8c8 !important; | |
} | |
.tabbrowser-tab, | |
.tab-background { | |
height: var(--tab-min-height); | |
} | |
.tab-content { | |
padding-left: 2px !important; | |
padding-right: 2px !important; | |
} | |
.tabbrowser-tab[pinned] { | |
padding-left: 9px !important; | |
padding-right: 9px !important; | |
} | |
/* .tabbrowser-tabs[closebuttons="activetab"] */ | |
.tabbrowser-tab:not([pinned='true']):hover | |
.tab-close-button:not([selected='true']) { | |
display: -moz-box !important; | |
height: 16px; | |
} | |
.tabs-newtab-button .toolbarbutton-icon { | |
height: 15px !important; | |
width: 15px !important; | |
padding: 0 !important; | |
padding-top: 1px !important; | |
} | |
.tab-stack { | |
width: 100%; | |
} | |
#tabbrowser-tabs { | |
--tab-min-width: 125px !important; | |
} | |
#tabbrowser-tabs .scrollbox-innerbox { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
#tabbrowser-tabs .arrowscrollbox-scrollbox { | |
overflow: visible; | |
display: block; | |
} | |
#tabbrowser-tabs .scrollbutton-up, | |
#tabbrowser-tabs .scrollbutton-down, | |
#alltabs-button, | |
.tabbrowser-tab:not([fadein]) { | |
display: none; | |
} | |
#main-window[sizemode='maximized'] #TabsToolbar { | |
margin-left: var(--tab-min-height); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment