userChrome.css Anpassung für verschwendeten Platz bei mehrzeiliger Tableiste

AdE

Hallo,

durch das Firefoxupdate habe ich leider ein Problem bei meiner mehrzeiligen Tableiste. Diese enthält über und unter der Leiste jetzt sehr viel verschenkten Platz, siehe angehängtes Bild. Kann mir jemand helfen, diese Leerzeilen zu entfernen?

Meine userChrome.css sieht wie folgt aus:

CSS

/* ----------------------------*/
/* Mehrzeilige Tabreihen       */
/* ----------------------------*/
.tabbrowser-tab {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
/* Tab-Höhe  */
:root {
    --tab-min-height: 25px !important; 
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 25px !important; 
    }
    
 /* Feste Breite  des einzelnem Tabs */
.tabbrowser-tab:not([pinned]) {
    min-width: 130px !important; 
}
/* Platz für Scrollbar schaffen */
.tabbrowser-tabs {
  margin-right: -41px !important;
}
tabs > arrowscrollbox { 
    display: block; 
}
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 = 5 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: px px 0px #000000 !important;    
    font-weight: 500 !important;
    font-size:   12px !important;
    font-family: "Arial" !important;
    color: black !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: 22px !important;
    max-height: 22px !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; 
}  

/* Tab-Leiste unterhalb der Symbolleiste verschieben */
#titlebar { -moz-box-ordinal-group: 2; }


/* Menü nach oben verschieben */
#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; }


/* Platz für die Menüleiste oberhalb der Symbolleiste schaffen */
#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 29px transparent !important; }
#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) { border-top: solid 21px transparent !important; }


/* Freien Bereich für Menü und Titelleistenschaltflächen festlegen */
[tabsintitlebar="true"] #navigator-toolbox { -moz-window-dragging: drag; }


/* Titelleistenschaltfläche nach rechts oben verschieben */
#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; }


/* auf der rechten Seite Platz machen, damit die Schaltflächen der Titelleiste und der
Navigationssymbolleiste nicht im Vollbildmodus angezeigt werden */
#navigator-toolbox[inFullscreen="true"] #nav-bar { padding-right: 109px !important; }

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

toolbarbutton#tabs-newtab-button,
.tabbrowser-arrowscrollbox {
  -moz-binding: url("bindings.xml#tabs-scroll") !important;
}

Alles anzeigen

Boersenfeger

Teste mal diesen Code anstatt deinem...

Quelle

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: -20px !important;


margin-bottom: -20px;


}



/* Farbe der Tableiste weiss */


#titlebar {


appearance: none !important;


background: #ffffff !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; }


}

}

Alles anzeigen

AdE

Hallo Boersenfeger,

läuft . Vielen Dank!. Ich habe mir die Tabzeilenzahl auf 4 angepasst und habe noch eine Frage. Welche Einträge muss ich ändern, wenn ich die Tabs über der Schrift, also oben etwas kleiner haben möchte?

AdE

Hallo,

ich komme leider noch nicht so richtig klar mit den Einstellungen. Die Abstände zwischen den einzelnen Tabreihen, also nach oben, nach unten und zwischendrin sind sehr groß. Des Weiteren kann ich meine Lesezeichensymbole nicht mehr in meine Lesezeichensymbolleiste hineinschieben.

Hat jemand einen Tip?

2002Andreas

Zitat von AdE

nicht mehr in meine Lesezeichensymbolleiste hineinschieben.

Mit linker Maustaste anklicken..halten und oben in die leere Lesezeichensymbolleiste reinziehen funktioniert nicht?

Zitat von AdE

Die Abstände zwischen den einzelnen Tabreihen

In Zeile 77 und 80 mal mit anderen Werten testen.

#titlebar {

margin-top: -20px !important;

margin-bottom: -20px;

}

AdE

Hallo Andreas,

nein, das Reinziehen funktioniert nicht. Es zeigt mir zwar die Lesezeichensymbolleiste an, allerdings scheint sich diese mit den mehrzeiligen Tabreihen zu überlagern . In die Menüleiste dagegen kann ich die Lesezeichensymbole reinziehen.

Das Verkleinern der Werte in den Zeilen 77 und 80 hatte keine Auswirkungen.

Ich habe jetzt mal Zeile 4-15 meines alten Codes in den neuen mit eingefügt. Damit sieht es jetzt so aus:

CSS

/* Tableiste mehrreihig unten */

 .tabbrowser-tab {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
/* Tab-Höhe  */
:root {
    --tab-min-height: 25px !important; 
    }
        
:root #tabbrowser-tabs {
    --tab-min-height: 25px !important; 
    } 
  
@-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: -20px !important;


margin-bottom: -20px;


}



/* Farbe der Tableiste weiss */


#titlebar {


appearance: none !important;


background: #ffffff !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 5 Zeilen erscheint eine Scrollbar */


scrollbox[part][orient="horizontal"] {


display: flex;


flex-wrap: wrap;


max-height: calc(var(--tab-min-height) * 5); /* Anzahl der Tabzeilen = 5 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

Die Tabreihen sind damit enger zusammengerückt, das passt. Auch der Rand nach unten zum Tabinhalt ist enger geworden, passt auch sehr gut.

Über den Tabs sieht man noch sehr viel Platz und dort scheinen sich die mehrzeiligen Tabs mit der Lesezeichensymbolleiste zu überlagern.

2002Andreas

Zitat von AdE

das Reinziehen funktioniert nicht.

Versuch es bitte mal damit: Firefox im Fehlerbehebungsmodus starten

Über: Hilfe..Fehlerbehebungsmodus ...

oder die Umschalt/Option-Taste gedrückt halten und den Firefox starten.

Kannst du dann das Symbol in die Lesezeichensymbolleiste ziehen?

Wenn ja mach das bitte mal, und starte den Fx neu.

Passt es dann wieder?

Mit deinem Code sieht das hier so aus:

AdE

Hallo Andreas,

im Fehlerbehebungsmodus ging es und dann nach dem Neustart auch wieder im normalen Modus.

Dankeschön! Ich kann grundsätzlich wieder auf die Lesezeichen zugreifen.

Eines ist jedoch noch "komisch". Wenn ich mit dem Mauszeiger auf die Links bzw. Ordner gehe, funktionieren diese nur im Bereich des oberen Rahmens, so als ob 2/3 der Schaltfläche inaktiv sind. Ich werd narrisch.

2002Andreas

Zitat von AdE

funktionieren diese nur im Bereich des oberen Rahmens,

Hier sieht das so aus mit deinem Code:

Lesezeichen lassen sich einwandfrei anklicken

AdE

Ich habe mal zwei Fotos gemacht, beim Screenshot wird der Mauszeiger nicht mit aufgenommen.

Hier passiert gar nichts, da kann man einfach mit der Maus drauf gehen ohne jegliche Reaktion:

Kaum geht man eine klitzekleines Stück weiter hoch funktioniert es und man kommt in den Ordner rein:

Mysteriös. Aber zum Glück gehts erstmal grundsätzlich.

userChrome.css Anpassung für verschwendeten Platz bei mehrzeiliger Tableiste

Ähnliche Themen

Tab Leiste unter der Lesezeichen Leiste