965eefc00a
This patch makes the style behave better on linux as well as make fullscreen mode work better. It also fixes an issue where invisible menubar would prevent window from being draggable from flexible-space placed to the left of urlbar.
241 lines
8.6 KiB
CSS
241 lines
8.6 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs_below_content.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Makes tabs to appear on multiple lines below the web content
|
|
* Tab reordering will not work and can't be made to work
|
|
*
|
|
* Make menubar enabled for getting window controls in correct place.
|
|
* Menubar options will be shown as overlay when mouse is at top-left corner
|
|
* To enable static menubar, create a new boolean pref
|
|
* userchrome.multirowtabs.static-menubar.enabled
|
|
*
|
|
* It's recommended to move tabs new-tab-button outside tabs toolbar
|
|
*
|
|
* Change the --multirow-n-rows to change maximum number of rows
|
|
* before the rows will start to scroll.
|
|
* Scrollbar can't be clicked but the rows can be scrolled with mouse.
|
|
*/
|
|
|
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
|
|
|
:root{
|
|
--multirow-toolbar-height: 40px;
|
|
--multirow-top-padding: 0px;
|
|
--multirow-n-rows: 3;
|
|
--multirow-tab-min-width: 100px;
|
|
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
|
|
--uc-window-drag-space-width: 30px;
|
|
--uc-window-control-width: 138px;
|
|
}
|
|
:root[inFullscreen]{
|
|
--uc-window-drag-space-width: 0px;
|
|
}
|
|
@media (-moz-gtk-csd-available){
|
|
:root{
|
|
--uc-window-control-width: 94px;
|
|
}
|
|
}
|
|
#main-window[tabsintitlebar]{
|
|
background-color: var(--toolbar-bgcolor,accentcolor) !important;;
|
|
}
|
|
:root[uidensity="compact"]{ --multirow-toolbar-height: 34px }
|
|
:root{ border-top-width: 0px !important }
|
|
|
|
#navigator-toolbox-background{
|
|
-moz-box-ordinal-group: 2;
|
|
border-bottom: 0px !important;
|
|
}
|
|
#navigator-toolbox{
|
|
border-bottom: none !important;
|
|
}
|
|
/* Re-order window and tab notification boxes */
|
|
#navigator-toolbox > div{ display: contents }
|
|
.global-notificationbox,
|
|
#tab-notification-deck{ -moz-box-ordinal-group: 0 }
|
|
|
|
#titlebar{ -moz-appearance: none !important; } /* Try setting to "-moz-window-titlebar" if you face issues */
|
|
|
|
#nav-bar{
|
|
position: fixed !important;
|
|
/* For some reason -webkit-box behaves internally like -moz-box, but can be used with fixed position. display: flex would work too but it breaks extension menus. */
|
|
display: -webkit-box;
|
|
-webkit-box-flex: 1;
|
|
margin-left: var(--uc-window-drag-space-width);
|
|
width: calc(100vw - var(--uc-window-drag-space-width));
|
|
top: var(--multirow-top-padding);
|
|
}
|
|
#nav-bar-customization-target{ -webkit-box-flex: 1 }
|
|
:root[inFullscreen] #nav-bar,
|
|
:root[tabsintitlebar] #nav-bar{
|
|
margin-right: var(--uc-window-control-width);
|
|
width: calc(100vw - var(--uc-window-control-width) - var(--uc-window-drag-space-width));
|
|
}
|
|
|
|
#TabsToolbar > .titlebar-buttonbox-container{
|
|
display: none !important;
|
|
}
|
|
/* Fix incorrect vertical alignment with megabar */
|
|
#urlbar[breakout]{ --urlbar-toolbar-height: var(--multirow-toolbar-height) !important; }
|
|
|
|
/* Fix customization view */
|
|
#customization-panelWrapper > .panel-arrowbox > .panel-arrow{ margin-inline-end: initial !important; }
|
|
|
|
/* Fullscreen mode support */
|
|
#customization-container,
|
|
:root:not([inFullscreen]) #content-deck,
|
|
:root:not([inFullscreen]) #browser{
|
|
margin-top: calc(var(--multirow-toolbar-height) + var(--multirow-top-padding) + var(--multirow-menubar-height,0px));
|
|
}
|
|
:root[inFullscreen] #toolbar-menubar,
|
|
:root[inFullscreen] #nav-bar{
|
|
top: calc(1px - (var(--multirow-toolbar-height) + var(--multirow-top-padding)));
|
|
}
|
|
:root[inFullscreen] #navigator-toolbox:hover > #nav-bar,
|
|
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #toolbar-menubar{
|
|
top: 0px;
|
|
}
|
|
#navigator-toolbox[inFullscreen]{
|
|
margin-top: 0 !important;
|
|
}
|
|
#navigator-toolbox[inFullscreen][style*="margin-top"]:not(:hover){
|
|
max-height: 0px;
|
|
}
|
|
#fullscr-toggler{ bottom: 0; top: unset !important; }
|
|
:root[inFullscreen] #navigator-toolbox:hover #toolbar-menubar{
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Restyle nav-bar and menubar */
|
|
#nav-bar-customization-target{ flex-grow: 1 }
|
|
|
|
#nav-bar-overflow-button,
|
|
#PanelUI-menu-button{ height: var(--multirow-toolbar-height); }
|
|
|
|
#toolbar-menubar{
|
|
height: var(--multirow-toolbar-height);
|
|
position: fixed;
|
|
display: flex;
|
|
visibility: visible !important;
|
|
top: var(--multirow-top-padding);
|
|
padding-top: 0 !important;
|
|
width: 100vw;
|
|
color: var(--lwt-text-color);
|
|
background: linear-gradient(to right, var(--toolbar-bgcolor), var(--toolbar-bgcolor) 30px, transparent 30px) no-repeat;
|
|
}
|
|
#menubar-items + spacer{ flex-grow: 1 }
|
|
|
|
#toolbar-menubar > #menubar-items{
|
|
-moz-box-pack: center;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
}
|
|
#main-menubar{ height: var(--multirow-toolbar-height) }
|
|
#toolbar-menubar:hover{ z-index: 2 }
|
|
#toolbar-menubar:hover > #menubar-items{
|
|
visibility: visible;
|
|
background-image: linear-gradient( to left,transparent,var(--lwt-accent-color) 35px);
|
|
}
|
|
#toolbar-menubar:not(:hover,[customizing]) *{-moz-window-dragging: drag !important;}
|
|
#toolbar-menubar > .titlebar-buttonbox-container{
|
|
background: var(--toolbar-bgcolor);
|
|
order:1000;
|
|
}
|
|
#menubar-items + spacer{ order: 1000 }
|
|
#toolbar-menubar > .titlebar-buttonbox-container > .titlebar-buttonbox{
|
|
height: 100%;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
#main-menubar:last-child{ padding-inline-end: 40px }
|
|
#toolbar-menubar > toolbarspring {
|
|
background: url("chrome://global/skin/icons/settings.svg") no-repeat 10px;
|
|
height: 100%;
|
|
display: block;
|
|
fill: currentColor;
|
|
-moz-context-properties: fill;
|
|
min-width: 28px !important;
|
|
max-width: 28px !important;
|
|
}
|
|
|
|
:root[tabsintitlebar] #PanelUI-button{ margin-right: var(--uc-window-drag-space-width); }
|
|
|
|
#tabbrowser-tabs{
|
|
min-height: unset !important;
|
|
padding-inline-start: 0px !important
|
|
}
|
|
|
|
#scrollbutton-up~spacer,
|
|
#scrollbutton-up,
|
|
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
|
|
|
|
scrollbox[part][orient="horizontal"]{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
max-height: var(--uc-scrollbox-max-height,1px);
|
|
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;
|
|
--uc-scrollbox-max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
|
|
}
|
|
|
|
:root[inFullscreen] .scrollbox-clip[orient="horizontal"]:not(:hover),
|
|
:root[inFullscreen] #tabbrowser-arrowscrollbox:not(:hover){ --uc-scrollbox-max-height: 1px; min-height: 1px !important; }
|
|
|
|
.tabbrowser-tab{
|
|
height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px))) !important;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.tabbrowser-tab[pinned]{
|
|
position: static !important;
|
|
margin-inline-start: 0px !important;
|
|
}
|
|
|
|
.tabbrowser-tab[fadein]:not([pinned]){
|
|
min-width: var(--multirow-tab-min-width) !important;
|
|
flex-grow: var(--multirow-tab-dynamic-width);
|
|
/*
|
|
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
|
|
Don't set to none or you'll see errors in console when closing tabs
|
|
*/
|
|
/*max-width: 100vw !important;*/
|
|
}
|
|
|
|
.tabbrowser-tab > stack{ width: 100%; height: 100%; }
|
|
|
|
/* This should fix potential flash that could occur when bottom border is hovered to show tabs in fullscreen mode */
|
|
#tabbrowser-tabpanels{ background-color: var(--lwt-accent-color) !important; }
|
|
|
|
/* remove bottom margin so it doesn't throw off row height computation */
|
|
#tabs-newtab-button{ margin-bottom: 0 !important; }
|
|
|
|
/* Hide some things that are unnecessary in multi-row below content mode */
|
|
|
|
#alltabs-button,
|
|
:root:not([customizing]) #TabsToolbar #new-tab-button,
|
|
#tabbrowser-arrowscrollbox > spacer,
|
|
.tabbrowser-tab::after{ display: none !important } /* Also disables tab separators since they mysteriously break tab-row scrolling */
|
|
|
|
@supports -moz-bool-pref("userchrome.multirowtabs.static-menubar.enabled"){
|
|
:root{
|
|
--multirow-menubar-height: 28px;
|
|
--uc-window-drag-space-width: 0px;
|
|
--uc-window-control-width: 0px;
|
|
}
|
|
#main-menubar,
|
|
#toolbar-menubar{ height: var(--multirow-menubar-height); background-image: none; }
|
|
#toolbar-menubar > #menubar-items{ visibility: visible; background-image: none !important; }
|
|
.titlebar-buttonbox-container{ background: none !important }
|
|
:root:not([inFullscreen]) #nav-bar{
|
|
top: calc(var(--multirow-menubar-height) + var(--multirow-top-padding));
|
|
}
|
|
}
|
|
}
|