Add separating tab border back when using multiple tab rows
I tried several CSS code to allow multiple tab rows in Fx Quantum (now v65_LINUX). All I've tried have some flaw or are missing a useful function. I've tried several CSS codes to enable multiple tab rows in Fx quantum (now v65).
I'm using this code from Aris' Custom CSS for Firefox: "tabs_multiple_lines_v2.css" (multiple rows).
! But, I can't figure out how to add back the left tab border on UNselected tabs (because of the lines of "UNSET" code that removes some Fx 58+ values. Tried numerous things. But I CAN add borders for the SELECTED tab with the same "UNSET" rules in place.
Someone added following code to disable some Mozilla changes in Quantum, apparently to make multiple tab rows WITH a scrollbar work. If you comment out any of the lines in this section, a 15 - 18px high "blank space" displays between tab rows.
But leaving the following "UNSET" code in, also prevents adding a tab border - even a left border on each tab, as separators.
/* remove stuff set by Firefox 58+ */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
border-left: unset !important;
border-image: unset !important;
border-image-slice: unset !important;
border: 0 !important; }
I don't know what in the original border image prevented creating multiple tab rows with a scrollbar. This is the entire code (create multiple rows & adds a scrollbar) from "tabs_multiple_lines_v2.css":
NOTE: the instructions are to place "tabs_multiple_lines_v2.css" inside the /<firefox profile>/chrome/css/tabs_multiple_lines_v2.css. Then add to userChrome.css, at the TOP of the file an import rule: @import "./css/tabs/tabs_multiple_lines.css"; Or you can copy the file contents to userChrome.css (Aris says some @import calls may not work in Linux or OS X.)
Note: I don't know where the "1.'s" came from in the code. I used tags around code. Those numbers don't exist in what I entered.
<code>
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
/****************************************************************************************/
/* multirow / multiple tab lines - modified for CustomCSSforFx **************************/
/* all credits go to the original author: ***********************************************/
/* https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/ ***********/
/****************************************************************************************/
/* NOTE ********************************************************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */
- root {
--tabs-lines: 3; /* 3 rows, increase for more */
--tab_min_width_mlt: 80px;
--tab_max_width_mlt: 200px;
--tab-min-height_mlt: var(--tab-min-height,32px); /* set own value here, if used without configuration files */
}
.tabbrowser-tab[fadein]:not([pinned]) {
flex-grow: 1;
min-width: var(--tab_min_width_mlt) !important;
max-width: var(--tab_max_width_mlt) !important;
}
.tabbrowser-tab,.tab-background {
min-height: var(--tab-min-height_mlt);
}
.tabs-newtab-button {
vertical-align: bottom !important;
height: var(--tab-min-height_mlt);
margin-bottom: -1px !important;
}
.tab-stack {
width: 100%;
}
/* fix tab position */
- tabbrowser-tabs,
- tabbrowser-tabs > .tabbrowser-arrowscrollbox {
min-height: var(--tab-min-height_mlt) !important;
}
- root[uidensity=touch] .tabbrowser-tab:not([pinned]) .tab-content .close-icon {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/**/
- tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: collapse !important;
overflow-y: auto !important;
min-height: var(--tab-min-height_mlt);
max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt) ) !important;
}
- tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow-x: collapse;
overflow: visible;
display: block;
}
- tabbrowser-tabs .scrollbutton-up,
- tabbrowser-tabs .scrollbutton-down,
- TabsToolbar #alltabs-button,
.tabbrowser-tab:not([fadein]){
display: none;
}
- main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
opacity: 0 !important;
}
- tabbrowser-tabs * {
overflow-x: none !important;
}
- main-window[customizing] #tabbrowser-tabs .scrollbox-innerbox {
display: block !important;
}
- tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 4px !important;
}
- TabsToolbar[currentset^="tabbrowser-tabs,new-tab-button"] #tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 0px !important;
}
/* remove crap set by Firefox 58+ */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
border-left: unset !important;
border-image: unset !important;
border-image-slice: unset !important;
border: 0 !important;
}
- TabsToolbar .titlebar-placeholder[type="pre-tabs"],
- TabsToolbar .titlebar-placeholder[type="post-tabs"]{
opacity: 0 !important;
}
- main-window[tabsintitlebar] #TabsToolbar .private-browsing-indicator,
- main-window[tabsintitlebar] #TabsToolbar #window-controls,
- main-window[tabsintitlebar] #TabsToolbar .titlebar-spacer[type="pre-tabs"],
- main-window[tabsintitlebar] #TabsToolbar .titlebar-spacer[type="post-tabs"] {
display: none !important;}
The other "version" of this looks very similar to "v2," but doesn't add a scrollbar. I assume that's why they didn't add the "unset" rules in the other version (named "tabs_multiple_lines.css."
Modified by JoeB