mirror of
				https://codeberg.org/claui/mobile-config-firefox.git
				synced 2025-11-04 12:35:55 +00:00 
			
		
		
		
	Add configurable maximum rows before rows start to scroll
This commit is contained in:
		
							parent
							
								
									9787beeb96
								
							
						
					
					
						commit
						8266515ed0
					
				
					 2 changed files with 42 additions and 18 deletions
				
			
		| 
						 | 
				
			
			@ -4,6 +4,11 @@
 | 
			
		|||
 | 
			
		||||
/* 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 */
 | 
			
		||||
 | 
			
		||||
:root{ --multirow-n-rows: 3 }
 | 
			
		||||
 | 
			
		||||
#tabbrowser-tabs{
 | 
			
		||||
  min-height: unset !important;
 | 
			
		||||
  padding-inline-start: 0px !important
 | 
			
		||||
| 
						 | 
				
			
			@ -14,6 +19,10 @@
 | 
			
		|||
  #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;
 | 
			
		||||
| 
						 | 
				
			
			@ -36,13 +45,12 @@
 | 
			
		|||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tabbrowser-tab{ max-height: 32px }
 | 
			
		||||
.tabbrowser-tab[pinned]{
 | 
			
		||||
.tabbrowser-tab{ height: var(--tab-min-height); }
 | 
			
		||||
#tabbrowser-tabs .tabbrowser-tab[pinned]{
 | 
			
		||||
  position: static !important;
 | 
			
		||||
  margin-inline-start: 0px !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.tabbrowser-tab[fadein]:not([pinned]){
 | 
			
		||||
  min-width: 100px !important;
 | 
			
		||||
  flex-grow: 1;
 | 
			
		||||
| 
						 | 
				
			
			@ -59,4 +67,5 @@
 | 
			
		|||
#tabbrowser-tabs .scrollbutton-down,
 | 
			
		||||
#alltabs-button,
 | 
			
		||||
:root:not([customizing]) #TabsToolbar #new-tab-button,
 | 
			
		||||
#tabbrowser-tabs spacer{ display: none }
 | 
			
		||||
#tabbrowser-tabs spacer,
 | 
			
		||||
.tabbrowser-tab::after{ display: none }
 | 
			
		||||
| 
						 | 
				
			
			@ -5,23 +5,19 @@
 | 
			
		|||
/* Menubar will be behind nav-bar unless cursor is over window controls or right edge of the "settings" icon */
 | 
			
		||||
/* Window can only be dragged from the settings icon or a ~20px space between menu button and window controls */
 | 
			
		||||
 | 
			
		||||
/* 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 */
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.tabbrowser-tab > stack{ width: 100%; height: 100%; }
 | 
			
		||||
:root{
 | 
			
		||||
  --multirow-toolbar-height: 40px;
 | 
			
		||||
  --multirow-top-padding: 0px;
 | 
			
		||||
  --multirow-n-rows: 3;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tabbrowser-tab[pinned]{ position: static !important;  }
 | 
			
		||||
 | 
			
		||||
#tabbrowser-tabs .scrollbutton-up,
 | 
			
		||||
#tabbrowser-tabs .scrollbutton-down,
 | 
			
		||||
#alltabs-button,
 | 
			
		||||
#TabsToolbar #new-tab-button,
 | 
			
		||||
#tabbrowser-tabs spacer{ display: none }
 | 
			
		||||
 | 
			
		||||
/* Tabs below content */
 | 
			
		||||
 | 
			
		||||
:root{ --multirow-toolbar-height: 40px; --multirow-top-padding: 0px }
 | 
			
		||||
:root[sizemode="maximized"]{ --multirow-top-padding: 8px }
 | 
			
		||||
:root[uidensity="compact"]{--multirow-toolbar-height: 32px}
 | 
			
		||||
:root{ border-top-width: 0px !important }
 | 
			
		||||
 | 
			
		||||
#navigator-toolbox{ -moz-box-ordinal-group: 2 }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -37,7 +33,7 @@
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
#nav-bar-overflow-button {
 | 
			
		||||
max-height: 32px !important;
 | 
			
		||||
max-height: 31px !important;
 | 
			
		||||
transform: translateY(calc(-4 * var(--toolbarbutton-outer-padding) + 4px))
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -85,6 +81,7 @@ visibility: hidden;
 | 
			
		|||
  min-width: 28px !important;
 | 
			
		||||
  max-width: 28px !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#PanelUI-button{ margin-right: 20px; }
 | 
			
		||||
 | 
			
		||||
#tabbrowser-tabs{
 | 
			
		||||
| 
						 | 
				
			
			@ -93,12 +90,18 @@ visibility: hidden;
 | 
			
		|||
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-wrap: wrap;
 | 
			
		||||
  max-height: calc(var(--multirow-toolbar-height) * var(--multirow-n-rows));
 | 
			
		||||
  overflow-y: auto;
 | 
			
		||||
  scrollbar-color: var(--toolbar-bgcolor) var(--lwt-accent-color);
 | 
			
		||||
  scrollbar-width: thin;
 | 
			
		||||
}
 | 
			
		||||
#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
 | 
			
		||||
  overflow: -moz-hidden-unscrollable;
 | 
			
		||||
  display: block;
 | 
			
		||||
}
 | 
			
		||||
.tabbrowser-tab{ max-height: var(--multirow-toolbar-height); min-height: var(--multirow-toolbar-height) }
 | 
			
		||||
.tabbrowser-tab > stack{ width: 100%; height: 100%; }
 | 
			
		||||
 | 
			
		||||
.tabbrowser-tab[fadein]:not([pinned]){
 | 
			
		||||
  min-width: 100px !important;
 | 
			
		||||
  flex-grow: 1;
 | 
			
		||||
| 
						 | 
				
			
			@ -106,9 +109,21 @@ visibility: hidden;
 | 
			
		|||
  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;*/
 | 
			
		||||
 /*! max-width: 100vw !important; */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#tabbrowser-tabs .tabbrowser-tab[pinned]{
 | 
			
		||||
  position: static !important;
 | 
			
		||||
  margin-inline-start: 0px !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#tabbrowser-tabs .scrollbutton-up,
 | 
			
		||||
#tabbrowser-tabs .scrollbutton-down,
 | 
			
		||||
#alltabs-button,
 | 
			
		||||
#TabsToolbar #new-tab-button,
 | 
			
		||||
#tabbrowser-tabs spacer,
 | 
			
		||||
.tabbrowser-tab::after{ display: none } /* Also disables tab separators since they mysteriously break tab-row scrolling */
 | 
			
		||||
 | 
			
		||||
/* Always show tab close button on hover and never otherwise */
 | 
			
		||||
.tabbrowser-tab .tab-close-button{
 | 
			
		||||
  display:none;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue