Mehrere Tab-Leisten bei Bedarf anzeigen lassen

heiko

Hallo Forum,
ich wollte mal fragen, ob es einen kurzen knackigen Code gibt, um bei Bedarf eine 2. oder auch mehrere Tab-Leisten anzeigen zu lassen, wenn Leiste 1 voll ist. Es müssen auch keine Scrollbalken oder Schließen-Kreuze ausgeblendet werden.
Es soll einfach nur der Code so kurz wie möglich sein, der eben diese Sache ab Firefox 65 darstellt und man alle Tabs in mehreren Reihen auf einen Blick oben am Rand sehen kann.

Vielen Dank

Gruß Heiko

2002Andreas

Siehe bitte mal hier:

Re: Multi-Row Tableiste per Userchrome anpassen

2002Andreas

Oder teste diesen Code bitte mal:

CSS

/* Tableiste mehrreihig */


#tabbrowser-tabs{
  --tabs-lines: 3; /*Angezeigte Leisten, bei mehr wird eine Scrollbar eingeblendet, oder den Wert erhöhen*/
  --tab_min_width_mlt: 150px;/* Mindeste Tabbreite */
  --tab_max_width_mlt: 150px;/* Maximale Tabbreite */
  --tab-min-height_mlt: var(--tab-min-height,28px);
}


.tab-background[selected="true"],.tabbrowser-tab[selected]{
   background: orange!important; /*Aktiver Tab Hintergrund orange*/
}


.tab-background:not([selected="true"]):hover,.tabbrowser-tab:not([selected]):hover{
   background: green!important; /*Inaktiver Tab hover - Hintergrund grün*/
}


.tab-line[selected="true"],.tab-line:not([selected="true"]) {
   display:none!important;
}


.tab-close-button.close-icon{
   margin-right:-18px!important;
}


.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
   direction: ltr;
   mask-image: linear-gradient(to left, transparent, black 0em)!important;
}


 .tabbrowser-tab{
   border:1px solid grey!important
}
 
.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 {
  margin-left:-2px!important;
  vertical-align: bottom !important;
  height: var(--tab-min-height_mlt);
}


.tab-stack {
  width: 95%;
}


#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: 10px !important;
}

Alles anzeigen

In dem anderen sind noch unterschiedliche Tabfarben enthalten.

2002Andreas

Der passt besser:

CSS

/* Tableiste mehrreihig */


#tabbrowser-tabs{
  --tabs-lines: 3; /*Angezeigte Leisten, bei mehr wird eine Scrollbar eingeblendet, oder den Wert erhöhen*/
  --tab_min_width_mlt: 150px;/* Mindeste Tabbreite */
  --tab_max_width_mlt: 150px;/* Maximale Tabbreite */
  --tab-max-height_mlt: var(--tab-max-height,18px);
}


.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
   direction: ltr;
   mask-image: linear-gradient(to left, transparent, black 0em)!important;
}


.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-max-height_mlt);
}


.tabs-newtab-button {
  margin-left:-2px!important;
  vertical-align: bottom !important;
  height: 25px!important;
}


.tab-stack {
  width: 95%;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-x: collapse !important;
  overflow-y: auto !important;
  min-height: var(--tab-max-height_mlt);
  max-height: calc( var(--tabs-lines) * var(--tab-max-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: 10px !important;
}




.tab-close-button.close-icon{
   margin-right:-10px!important;
}


.tab-close-button.close-icon{
display: -moz-box !important; 


}

Alles anzeigen

heiko

Mein guter Held Andreas mal wieder
Der letzte Code passt ganz gut. Damit kann man arbeiten. Vielen Dank. Immer wieder klasse, was du Dir für Arbeit machst. Mega cool. :lol:

Schönen Abend und beste Grüße

Heiko

2002Andreas

Zitat von heiko

Schönen Abend und beste Grüße

Danke, auch dir noch einen schönen Restabend. Freut mich wenn du zufrieden bist