df85873f33
This patch makes it easier to change some settings, as well as adds an optional behavior to show static menubar via custom pref.
231 lines
No EOL
8.4 KiB
CSS
231 lines
No EOL
8.4 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){
|
|
|
|
/* Dummy variable to support versions 94-96, can be removed when 96 lands */
|
|
:root{ --lwt-frame: var(--lwt-accent-color) }
|
|
|
|
: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;
|
|
}
|
|
@media (-moz-platform: windows),
|
|
(-moz-os-version: windows-win7),
|
|
(-moz-os-version: windows-win10){
|
|
:root[tabsintitlebar][sizemode="maximized"]{
|
|
--multirow-top-padding: 8px;
|
|
}
|
|
}
|
|
: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;
|
|
}
|
|
|
|
/* 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));
|
|
}
|
|
|
|
:root[inFullscreen] #TabsToolbar > #window-controls{
|
|
display: flex !important;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
right: 0;
|
|
width: 138px;
|
|
height: var(--multirow-toolbar-height);
|
|
background:var(--toolbar-bgcolor);
|
|
}
|
|
|
|
/* 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; }
|
|
|
|
#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] #TabsToolbar > #window-controls,
|
|
:root[inFullscreen] #toolbar-menubar,
|
|
:root[inFullscreen] #nav-bar{ top: calc(1px - (var(--multirow-toolbar-height) + var(--multirow-top-padding))) }
|
|
|
|
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #TabsToolbar > #window-controls,
|
|
:root[inFullscreen] #navigator-toolbox:hover > #nav-bar,
|
|
:root[inFullscreen] #navigator-toolbox:hover > #titlebar > #toolbar-menubar{ top: 0px }
|
|
|
|
/* 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);
|
|
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-frame) 35px);
|
|
}
|
|
|
|
#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% ;}
|
|
|
|
#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-frame) !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 */
|
|
|
|
#TabsToolbar > #window-controls,
|
|
#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));
|
|
}
|
|
}
|
|
} |