Mehrzeilige Tableiste für aktuelle Firefox-Versionen

mr.b.

Hallo,

bei mir wird seit dem letzten Update (81.0) auch nur eine Tabzeile angezeigt.

Die komplette userchrome.css sieht bei mir so aus:

CSS

/* -------------------------------------------*/
/* Mehrzeilige Tabreihen (Abgerundete Ecken) */
/* -------------------------------------------*/
/* Tab-Höhe */
.tabbrowser-tab {
min-height: 28px !important;
max-height: 28px !important;
vertical-align: bottom !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* Feste Breite des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
min-width: 130 !important;
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
margin-right: -41px !important;
}
tabs > arrowscrollbox {
display: block;
}
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
overflow: visible !important;
overflow-x: hidden !important;
overflow-y: auto !important;
min-height: 35px !important; Tab-Höhe(28px) + 2px
max-height: calc( 9 * 35px ) !important; Anzahl der Tabreihen * Minimal-Höhe
/-moz-window-dragging: no-drag !important;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]),
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] {
display: none;
}
tabs tab {
border-left: solid 1px hsla(0,0%,50%,.5);
border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}
#TabsToolbar:not(:-moz-lwtheme){
color: black !important;
}
#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
text-shadow: 1px 1px 0px #000000 !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
text-shadow: none !important;
color: black !important;
}
.tabbrowser-tab .tab-label[selected="true"] {
text-shadow: 1px 1px 0px #000000 !important;
color: white !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Arial" !important;
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
display: none !important;
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
background: unset !important;
border-top: unset !important;
outline: none !important;
}
/* Tab-Schließen-Button entfernen
.tabbrowser-tab .tab-close-button {
visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
margin-right : -1px !important;
background: unset;
border-radius: 80px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: none !important;
width: 2 !important;
}
/*ungelesene TAbs kursiv; ach private Tabs*/
#main-window .tabbrowser-tab[titlechanged] {
font-style: italic;
}
#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {
font-style: italic;
}


/*------------------*/
/* Tab-Hintergrund */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
/*background-image: linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ), none !important;*/ /* rot */
filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ), none !important;
filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
border-radius: 80px !important;
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
background-image: linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ), none !important;
filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important;
border-radius: 80px !important;
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
background-image: linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ), none !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
border-radius: 80px !important;
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
border-radius: 80px !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
background-image: linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
border-radius: 80px !important;
}

Alles anzeigen

Gruß

FuchsFan

In Zeile 30 steht das : max-height: calc( 9 * 35px ) !important; Anzahl der Tabreihen * Minimal-Höhe.

Entweder du löscht was hinter dem Semikolon steht , oder du bereinigst es so :

/* Anzahl der Tabreihen * Minimal-Höhe */

Versuche mal bitte, kann daran liegen.

Sehe gerade, Zeile 31 der Schrägstrich vorne muss auch weg.

2002Andreas

Zitat von FuchsFan

In Zeile 30

Auch in Zeile 29 ist der gleiche Fehler

Der Text:

Tab-Höhe(28px) + 2px

müsste auskommentiert sein.

FuchsFan

Zitat von 2002Andreas

Auch in Zeile 29 ist der gleiche Fehler

Habe ich jetzt probiert , hilft auch nicht.

Aber Zeile 23 bis 32 durch folgenden Code ersetzen:

Code

/* Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
    display: flex;
    flex-wrap: wrap;
    max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
    overflow-x: hidden;
    overflow-y: auto;
}

mr.b.

Besten Dank an alle Beteiligten!

Es läuft wieder wie vorher. Tolle Hilfe.

Gruß

stromike

Auch von mir ein Danke passt^^

mr.b.

Hallo,

leider läuft bei mir nicht alles glatt. Weil mein Hauptprofil beim Start nicht automatisch maximiert startete, musste ich ein neues Profil aufbauen und versuche jetzt das Skript für mehrzeilige Tabreihen dort wieder zu aktivieren.

Den einzigen Erfolg, den ich hatte, sind die abgerundeten Tabs (Teil des css-Code). Aber sobald die obere Tab-Reihe zu Ende ist, landen alle neu hinzugefügte Urls im letzten Tab der Reihe. Kein Scrollbalken, keine weiteren Reihen.

Da ich am Code nichts geänderte habe - außer von 3 auf 5 setzen (Anzahl der Reihen), hat sich vielleicht etwas in Firefox geändert? Ich habe jetzt FF v. 83.0 64bit/Windows10 20H2.

Hier der Inhalt der userChrome.css:

CSS

/* -------------------------------------------*/
/* Mehrzeilige Tabreihen (Abgerundete Ecken)  */
/* -------------------------------------------*/
/* Tab-Höhe  */
 .tabbrowser-tab {
    min-height: 28px !important;
    max-height: 28px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
 /* Feste Breite  des einzelnem Tabs */
 .tabbrowser-tab:not([pinned]) {
    min-width: 130 !important; 
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
  margin-right: -41px !important;
}
tabs > arrowscrollbox { 
    display: block; 
}
/* Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
    display: flex;
    flex-wrap: wrap;
    max-height: calc(var(--tab-min-height) * 5); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
    overflow-x: hidden;
    overflow-y: auto;
}
/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}
tabs tab {
    border-left: solid 1px hsla(0,0%,50%,.5);
    border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}
#TabsToolbar:not(:-moz-lwtheme){ 
    color: black !important;
}
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}   
/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    font-weight: 500 !important;
    font-size:   12px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   12px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen 
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
    margin-right : -1px !important;
    background: unset;
    border-radius: 80px !important; 
    border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: none !important;
  width: 2 !important;
}
/*ungelesene TAbs kursiv; ach private Tabs*/
#main-window .tabbrowser-tab[titlechanged] {
    font-style: italic;
}
#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {
    font-style: italic;
}

/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
    border-radius: 80px !important; 
}

Alles anzeigen

Gruß

2002Andreas

Teste bitte mal diesen kompl. Code:

CSS

/*Tableiste mehrreihig unten*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

/* Activer Tab schwarze Schrift */
.tab-label[selected]{
color: black !important;
}

/* Inaktiver Tab schwarze Schrift */
.tab-label:not([selected]) {
color: black !important;
}

.tab-close-button,
#tabs-newtab-button {
color: black !important;
}

#titlebar {
-moz-box-ordinal-group: 2!important;
}

/*Abstand nach oben - unten, und Höhe der Tableiste*/
#titlebar {
margin-top: -4px !important;
margin-bottom: 0px;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !important;
}

#toolbar-menubar {
position: fixed;
display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
-moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
display: block;
position: fixed;
right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
display: block;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}


/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    font-weight: 500 !important;
    font-size:   12px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   12px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Höhe  */
.tabbrowser-tab {
    min-height: 28px !important;
    max-height: 28px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen *//*
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}
*/
/* Tab-Icon ausrichten *//*
.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]) 
{
  margin-top: -1px !important;
}
*/
/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
}    
}

Alles anzeigen

Dein Code funktioniert nur in der ESR 78.

Besser noch diesen Code:

CSS

/*Tableiste mehrreihig unten*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

/* Activer Tab schwarze Schrift */
.tab-label[selected]{
color: black !important;
}

/* Inaktiver Tab schwarze Schrift */
.tab-label:not([selected]) {
color: black !important;
}

.tab-close-button,
#tabs-newtab-button {
color: black !important;
}

#titlebar {
-moz-box-ordinal-group: 2!important;
}

/*Abstand nach oben - unten, und Höhe der Tableiste*/
#titlebar {
margin-top: -4px !important;
margin-bottom: 0px;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !important;
}

#toolbar-menubar {
position: fixed;
display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
-moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
display: block;
position: fixed;
right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
display: block;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    font-weight: 500 !important;
    font-size:   12px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   12px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen 
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
    margin-right : -1px !important;
    background: unset;
    border-radius: 80px !important; 
    border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: none !important;
  width: 2 !important;
}
/*ungelesene TAbs kursiv; ach private Tabs*/
#main-window .tabbrowser-tab[titlechanged] {
    font-style: italic;
}
#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {
    font-style: italic;
}

/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
    border-radius: 80px !important; 
}    }

Alles anzeigen

mr.b.

Danke Andreas,

es funktionieren beide Codes. Wie bekomme ich jetzt aber wieder die abgerundeten Ecken und etwas größere Tabbeschriftung?

Gruß

2002Andreas

Zitat von mr.b.

die abgerundeten Ecken

Die sind im 2ten Code enthalten wie du auf dem Screenshot erkennen kannst.

Zitat von mr.b.

etwas größere Tabbeschriftung?

In Zeile 122 + 134 den Wert:

font-size: 12px !important;

erhöhen bis er für dich passt.

Z.B. so:

CSS

/*Tableiste mehrreihig unten*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

#titlebar {
-moz-box-ordinal-group: 2!important;
}

/*Abstand nach oben - unten, und Höhe der Tableiste*/
#titlebar {
margin-top: -4px !important;
margin-bottom: 0px;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !important;
}

#toolbar-menubar {
position: fixed;
display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
-moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
display: block;
position: fixed;
right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
display: block;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    /* font-weight: 500 !important; */
    font-size:   16px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   16px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen 
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
    margin-right : -1px !important;
    background: unset;
    border-radius: 80px !important; 
    border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: none !important;
  width: 2 !important;
}
/*ungelesene TAbs kursiv; ach private Tabs*/
#main-window .tabbrowser-tab[titlechanged] {
    font-style: italic;
}
#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {
    font-style: italic;
}

/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
    border-radius: 80px !important; 
}    }

Alles anzeigen

mr.b.

Besten Dank, Andreas!

MIr reichte schon die Zeilennummer.

Gruß

2002Andreas

Danke für die Rückmeldung. ?

Schön dass dein Problem gelöst ist.

Rob

Zitat von diwa

prima script - aber unterdrückt in ff: drucken --> seite einrichten --> ränder & kopf-/ fußzeilen
LÖSUNG: inaktivierung von zeile 42: /* #alltabs-button,tabs tab:not([fadein]), */
(übrigens ohne beeinträchtigung der funktionalität!) - gruß diwa

Ich möchte mich an dieser Stelle für den Hinweis bedanken. Hab schon lange die Kopf- und Fußzeilen Einstellung vermisst, hatte aber zunächst angenommen, dass es durch ein Firefox Update verschwand, da man ja an der Druckfunktion zwischenzeitlich arbeitete.

Glücklicherweise wurde ich mit der Suche direkt auf deinen Hinweis verwiesen. Danke!

Nur mal aus Neugierde, welchen Nutzen soll dieser Schalter bringen? Ich bezweifle, dass das Entfernen von Menüs das Ziel sein sollte.

Coromandel

Hallo und Guten Abend an das Forum,

habe mich nach öfterem Mitlesen hier nun auch angemeldet weil ich große Probleme mit der Darstellung von mehrzeiligen Tabs mit den neuen Versionen (nach 80) hatte.

Bisher habe ich mein userChrome.css allein bzw. mit Hilfe des Lesens in diesem Forum hinbekommen; allerdings nicht mehr nach der Version 80. Da muß sich bei FF etwas grundlegend geändert haben. Trotz stundenlanger Versuche habe ich immer nur die einzeilige Leiste zum seitlichen Scrollen hinbekommen. Und gerade dieser zielführende Thread hier ist bei Google nie aufgetaucht

Erst nach der Anmeldung und beim Durchforsten der Threads bin ich nun auf die letzten Beiträge hier für die Versionen ab 81 gestoßen.

MEIN DANK AN ALLE HIER FORUM, die sich die Mühe machen beizutragen, vor allem meinen Namensvetter "2002Andreas" meiit seinen Lösungen.

Ich hätte nach meiner ewigen Suche aber jetzt gern noch 2 Verständnisfragen und vielleicht "erbarmt" sich ja Jemand kurz ... ?

1. Habe jetzt die letzte Version der userChrome von mr.b. und FuchsFan übernommen und etwas angepasst. Läuft super!

Mich würde echt interessieren wo und welche Einstellungen es sind die nun die mehrzeilgen Tabs ermöglichen; ich finde es beim Vergleichen leider nicht.

2. Ich habe gerne niedrigere Tabs (24px oder so), aber dann wird die Beschriftung im Tab unten immer abgeschnitten. Gibt es eine Möglichkeit die Schrift höher zu setzen im Tab ?? Bei meiner alten Version in 80.1 ist die Schrift selbst bei einem 22px Tab in der Mitte u gut lesbar - ohne dass in der userChrome etwas besonderes angegeben wäre. In den neuen o.g. Versionen leider nicht mehr.

Wäre toll wenn es dafür auch noch eine Lösung gäbe...

Besten Dank schon mal vorab und allen gesundes Neues Jahr noch nachträglich...

Coromandel

FuchsFan

Sei begrüßt hier im Forum.

Zu 1.)

Code

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}

Alles anzeigen

Zu 2.)

Wenn du die Schrift verlagern musst, dann garantiert auch das Icon und sicherlich auch noch das Schließen-Kreuz.

Dann fangen wir mal mit der Schrift an.

CSS

/**** Schrift im Zentrum des Tabs ****/
.tab-label {
      -moz-box-flex: 1 !important;
      text-align: center !important;
      margin-top: -10px !important; /* vertikale Ausrichtung */
    }

Mit dem Wert margin-top musst du probieren.

2002Andreas

Zitat von Coromandel

Ich habe gerne niedrigere Tabs

Hallo und Willkommen hier im Forum. ?

Meinst du das so?

Wenn ja, dann teste bitte mal.

CSS

/*Tableiste mehrreihig unten*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

/* Höhe der Tabs und Abstand nach unten*/
.tabbrowser-tab:not([pinned]) {
    margin-left: 1px !important;
    max-height: 25px !important;   
    margin-bottom: 4px !important;
}

/* Höhe vom Tabtext und Abstand nach unten*/
.tab-text,.tab-icon-image,.tab-close-button {
    margin-top: -3px !important;
}

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

#titlebar {
-moz-box-ordinal-group: 2!important;
}

/*Abstand nach oben - unten, und Höhe der Tableiste*/
#titlebar {
margin-top: -4px !important;
margin-bottom: -3px;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !important;
}

#toolbar-menubar {
position: fixed;
display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
-moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
display: block;
position: fixed;
right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
display: block;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    /* font-weight: 500 !important; */
    font-size:   16px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   16px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen 
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
    margin-right : -1px !important;
    background: unset;
    border-radius: 80px !important; 
    border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: none !important;
  width: 2 !important;
}
/*ungelesene TAbs kursiv; ach private Tabs*/
#main-window .tabbrowser-tab[titlechanged] {
    font-style: italic;
}
#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {
    font-style: italic;
}

/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    border-radius: 80px !important; 
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    border-radius: 80px !important; 
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
    border-radius: 80px !important; 
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
    border-radius: 80px !important; 
}      }

Alles anzeigen

Coromandel

Hallo FuchsFan und Namenskollege "2002Andreas"

entschuldigt ihr beiden meine späte Rückmeldung.... Ich muss mal die Email-Benachrichtigung einstellen. Ich habe über Weihnachten leider alles auf einmal versucht zu erneuern; 2 PC's und einen neuen Server. Das konnte nicht gutgehen...

Auf die Schnelle sind Eure Lösungen das was ich suche, aber in Deiner lange Liste (2002Andreas) muss ich erst noch in Ruhe suchen welche Zeilen das betrifft.... Aber ja, das wären die Tabs so... Meine sind nur eckig.

Probiere ich die Tge mal alles aus.

Danke für Eur Hilfe.

2002Andreas

Zitat von Coromandel

Meine sind nur eckig.

Teste bitte wieder:

CSS

/*Tableiste mehrreihig unten*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

/* Höhe der Tabs und Abstand nach unten*/
.tabbrowser-tab:not([pinned]) {
    margin-left: 1px !important;
    max-height: 25px !important;   
    margin-bottom: 4px !important;
}

/* Höhe vom Tabtext und Abstand nach unten*/
.tab-text,.tab-icon-image,.tab-close-button {
    margin-top: -3px !important;
}

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

#titlebar {
-moz-box-ordinal-group: 2!important;
}

/*Abstand nach oben - unten, und Höhe der Tableiste*/
#titlebar {
margin-top: -4px !important;
margin-bottom: -3px;
}

/* Farbe der Tableiste hellgrau */
#titlebar {
appearance: none !important;
background: #eeeeee !important;
}

#toolbar-menubar {
position: fixed;
display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
-moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
display: block;
position: fixed;
right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
display: block;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none;
}
/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/
#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}
/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    /* font-weight: 500 !important; */
    font-size:   16px !important;
    font-family: "Arial" !important;
    color: white !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
    color: black !important; 
}
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    color: white !important; 
    font-weight: 500 !important;
    font-size:   16px !important; 
    font-family: "Arial" !important; 
}
/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}
/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}
/* Tab-Schließen-Button entfernen 
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}*/
/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
    margin-right : -1px !important;
    background: unset;
    border: 1px solid rgba(0,0,0,0.1) !important;
}
/* Tab-Seperatoren entfernen */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: none !important;
  width: 2 !important;
}
/*ungelesene TAbs kursiv; ach private Tabs*/
#main-window .tabbrowser-tab[titlechanged] {
    font-style: italic;
}
#main-window[privatebrowsingmode] .tabbrowser-tab[titlechanged] {
    font-style: italic;
}

/*------------------*/
/* Tab-Hintergrund  */
/*------------------*/
/*--- selektiert ---*/
.tab-background[selected=true]:not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important; /* blau */
    /*background-image:  linear-gradient( rgba(230,175,175,1), rgba(84,25,25,1) ),  none !important;*/  /* rot */
    filter: drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-4px 3px 2px rgba(0,0,0,0.33)) !important; 
    
}
.tab-background[selected=true]:-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(103,171,224,1), rgba(10,58,95,1) ), none !important;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.33)) drop-shadow(-2px 3px 2px rgba(0,0,0,0.33)) !important; 
    
}
/*--- hover(nicht selektiert) ---*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(115,115,115,1) ),  none !important; 
    filter: brightness(130%) contrast(95%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
    
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(225,225,225,0.66), rgba(100,125,145,0.66) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
     
}
/*--- nicht selektiert ---*/
.tab-background:not([selected=true]):not(:-moz-lwtheme) > spacer {
    background-image:  linear-gradient( rgba(255,255,255,1), rgba(125,125,125,1) ),  none !important; 
    filter: brightness(115%) contrast(90%) drop-shadow(1px 1px 1px rgba(0,0,0,0.33)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.33)) !important; 
     
}
.tab-background:not([selected=true]):-moz-lwtheme > spacer {
    background-image:  linear-gradient( rgba(255,255,255,0.33), rgba(110,110,110,0.33) ),  none !important; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    
}
/*--- Multi-selektiert ---*/
.tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important;
    
}
.tabbrowser-tab:hover > .tab-stack > .tab-background[multiselected=true]:not([selected=true]) > spacer {
    background-image:  linear-gradient( rgba(225,225,225,1), rgba(50,98,135,1) ), none !important; 
    
}      }

Alles anzeigen

radix82

Danake Danke an die Coder die das hier erstellen.

Die original Version von BrokenHeart funktioniert bei meinem Firefox 85.0 (auch schon ein paar Versionen vorher) nicht mehr.

Habe nun die von 2002Andreas aber was ich nicht verstehe ist, dass dies

CSS

/* Abgerundete Ecken */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background
{
margin-right : -1px !important;
background: unset;
border: 1px solid rgba(0,0,0,0.1) !important;
}

eingetragen ist, aber die Tabs werden trotzdem eckig angezeigt.

Außerdem werden die Zeilen so abgeschnitten.

Sören Hentzschel

Der gezeigte Code rundet ja auch nichts ab (auch wenn der Kommentar etwas anderes erzählt, vielleicht ein Copy & Paste-Fehler im ursprünglichen Code).