mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-02-02 05:21:40 -08:00
Add: Tab Bar - Multi row #315
This commit is contained in:
alstjr7375
parent
fdbca947d7
commit
cfa94d4955
8 changed files with 205 additions and 34 deletions
|
|
@ -3460,8 +3460,10 @@
|
|||
padding-inline: 1px !important;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -1px !important;
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.photon_like_padding") {
|
||||
|
|
@ -3591,16 +3593,18 @@
|
|||
/* Prevent overflow pinned tab bottom margin */
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
|
||||
max-height: var(--tab-min-height) !important;
|
||||
/* Force apply height */
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
|
||||
:root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
|
||||
max-height: var(--tab-min-height) !important;
|
||||
/* Force apply height */
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] #tabbrowser-arrowscrollbox {
|
||||
height: var(--tab-min-height) !important;
|
||||
:root[uidensity="compact"] #tabbrowser-arrowscrollbox {
|
||||
height: var(--tab-min-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Scroll Button - Size Fix */
|
||||
|
|
@ -6135,7 +6139,82 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
/*= Tab Bar - Show only current tab ==========================================*/
|
||||
/*= Tab Bar - Multi Row ======================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tabbar.multi_row") {
|
||||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
:root {
|
||||
--uc-multirow-tabbar-rows: 3;
|
||||
--uc-multirow-tab-dynamic-width: 1;
|
||||
/* Change to 0 for fixed-width tabs using the above width. */
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
min-height: unset !important;
|
||||
padding-inline-start: 0px !important;
|
||||
}
|
||||
|
||||
@-moz-document url(chrome://browser/content/browser.xhtml)
|
||||
{
|
||||
#scrollbutton-up ~ spacer,
|
||||
#scrollbutton-up,
|
||||
#scrollbutton-down {
|
||||
display: var(--scrollbutton-display-model, initial);
|
||||
}
|
||||
|
||||
scrollbox[part][orient="horizontal"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: scroll;
|
||||
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows));
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
}
|
||||
.scrollbox-clip[orient="horizontal"],
|
||||
#tabbrowser-arrowscrollbox {
|
||||
overflow: -moz-hidden-unscrollable;
|
||||
display: block;
|
||||
--scrollbutton-display-model: none;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs .tabbrowser-tab[pinned] {
|
||||
position: static !important;
|
||||
margin-inline-start: 0px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[fadein]:not([pinned]) {
|
||||
flex-grow: var(--uc-multirow-tab-dynamic-width);
|
||||
}
|
||||
|
||||
.tabbrowser-tab > stack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* remove bottom margin so it doesn't throw off row height computation */
|
||||
#tabs-newtab-button {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"]
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> #tabbrowser-arrowscrollbox-periphery
|
||||
> #tabs-newtab-button {
|
||||
display: -moz-box !important;
|
||||
}
|
||||
|
||||
#alltabs-button,
|
||||
:root:not([customizing]) #TabsToolbar #new-tab-button,
|
||||
#tabbrowser-arrowscrollbox > spacer,
|
||||
.tabbrowser-tab::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/*= Tab Bar - Fill width tab =================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tabbar.fill_width") {
|
||||
/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */
|
||||
.tabbrowser-tab[fadein]:not([style^="max-width"]) {
|
||||
|
|
@ -6165,11 +6244,12 @@
|
|||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
overflow: hidden;
|
||||
/* Prevent toolbar area over */
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
|
||||
#TabsToolbar {
|
||||
overflow: hidden;
|
||||
/* Prevent toolbar area over */
|
||||
}
|
||||
}
|
||||
|
||||
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
|
||||
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
|
||||
z-index: 0 !important;
|
||||
|
|
@ -6496,10 +6576,11 @@
|
|||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
@supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-background::before,
|
||||
#tabs-newtab-button::before {
|
||||
/* Box Model */
|
||||
|
|
|
|||
|
|
@ -48,14 +48,16 @@
|
|||
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
|
||||
max-height: var(--tab-min-height) !important; /* Force apply height */
|
||||
}
|
||||
:root[uidensity="compact"] #tabbrowser-arrowscrollbox {
|
||||
height: var(--tab-min-height) !important;
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
:root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
|
||||
#tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
|
||||
max-height: var(--tab-min-height) !important; /* Force apply height */
|
||||
}
|
||||
:root[uidensity="compact"] #tabbrowser-arrowscrollbox {
|
||||
height: var(--tab-min-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -95,8 +95,10 @@
|
|||
padding-inline: 1px !important;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -1px !important;
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
.tabbrowser-tab:not([last-visible-tab]) {
|
||||
margin-inline-end: -1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tab.photon_like_padding") {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,10 @@
|
|||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#TabsToolbar {
|
||||
overflow: hidden; /* Prevent toolbar area over */
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
#TabsToolbar {
|
||||
overflow: hidden; /* Prevent toolbar area over */
|
||||
}
|
||||
}
|
||||
|
||||
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
|
||||
|
|
|
|||
|
|
@ -36,8 +36,10 @@
|
|||
}
|
||||
|
||||
@include Option("userChrome.tab.newtab_button_like_tab") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
@include NotOption("userChrome.tabbar.multi_row") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-background::before,
|
||||
|
|
|
|||
|
|
@ -43,7 +43,12 @@
|
|||
@import "as_titlebar";
|
||||
}
|
||||
|
||||
/*= Tab Bar - Show only current tab ==========================================*/
|
||||
/*= Tab Bar - Multi Row ======================================================*/
|
||||
@include Option("userChrome.tabbar.multi_row") {
|
||||
@import "multi_row";
|
||||
}
|
||||
|
||||
/*= Tab Bar - Fill width tab =================================================*/
|
||||
@include Option("userChrome.tabbar.fill_width") {
|
||||
@import "fill_width";
|
||||
}
|
||||
|
|
|
|||
76
src/tabbar/_multi_row.scss
Normal file
76
src/tabbar/_multi_row.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
:root {
|
||||
--uc-multirow-tabbar-rows: 3;
|
||||
--uc-multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
|
||||
}
|
||||
|
||||
// Scrollbar can't be clicked but the rows can be scrolled with mouse wheel
|
||||
// Uncomment the next line if you want to be able to use the scrollbar with mouse clicks
|
||||
// #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag }
|
||||
|
||||
// Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work
|
||||
|
||||
#tabbrowser-tabs {
|
||||
min-height: unset !important;
|
||||
padding-inline-start: 0px !important;
|
||||
}
|
||||
|
||||
@-moz-document url(chrome://browser/content/browser.xhtml) {
|
||||
#scrollbutton-up ~ spacer,
|
||||
#scrollbutton-up,
|
||||
#scrollbutton-down {
|
||||
display: var(--scrollbutton-display-model, initial);
|
||||
}
|
||||
|
||||
scrollbox[part][orient="horizontal"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: scroll;
|
||||
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows));
|
||||
// scrollbar-color: currentColor transparent;
|
||||
// scrollbar-width: thin;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbox-clip[orient="horizontal"],
|
||||
#tabbrowser-arrowscrollbox {
|
||||
overflow: -moz-hidden-unscrollable;
|
||||
display: block;
|
||||
--scrollbutton-display-model: none;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs .tabbrowser-tab[pinned] {
|
||||
position: static !important;
|
||||
margin-inline-start: 0px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[fadein]:not([pinned]) {
|
||||
flex-grow: var(--uc-multirow-tab-dynamic-width);
|
||||
}
|
||||
|
||||
.tabbrowser-tab > stack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* remove bottom margin so it doesn't throw off row height computation */
|
||||
#tabs-newtab-button {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
|
||||
display: -moz-box !important;
|
||||
}
|
||||
|
||||
#alltabs-button,
|
||||
:root:not([customizing]) #TabsToolbar #new-tab-button,
|
||||
#tabbrowser-arrowscrollbox > spacer,
|
||||
.tabbrowser-tab::after {
|
||||
display: none !important;
|
||||
}
|
||||
1
user.js
1
user.js
|
|
@ -141,6 +141,7 @@ user_pref("userChrome.rounding.square_tab", false);
|
|||
|
||||
// user_pref("userChrome.tabbar.as_titlebar", true);
|
||||
// user_pref("userChrome.tabbar.fill_width", true);
|
||||
// user_pref("userChrome.tabbar.multi_row", true);
|
||||
// user_pref("userChrome.tabbar.on_bottom", true);
|
||||
// user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom
|
||||
// user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue