TAB-Leiste zu hoch

graubaer

Hi,

meine TAB-Leiste sieht momentan so aus:

[attachment=0]Firefox-Tableiste-12-12-_2017_16-29-31.jpg[/attachment]

Im Vergleich zu den anderen Leisten darüber, wirkt sie mir zu dominant. Lässt sich die Höhe dieser Leiste inkl. Tabs verringern?

2002Andreas

Teste bitte mal:

CSS

.tabbrowser-tab{
	max-height: 26px!important;
    }

Wenn, dann kannst du dir den Wert noch anpassen.

graubaer

Zunächst danke für die schnelle Reaktion!

Ich habe 24px eingesetzt - allerdings verringert sich nur die Höhe des Tabs, nicht auch die Höhe der TAB-Leiste.

[attachment=0]firefox-Tabhöhe-13-12-_2017_12-57-03.jpg[/attachment]

Wenn es möglich ist, hätte ich gerne die TAB-Leistenhöhe inkl. der Tabhöhe verringert.

2002Andreas

Neuer Versuch.

CSS

#TabsToolbar,.tabbrowser-tab{
	min-height:24px!important;
	max-height:24px!important;

}

graubaer · FF-Tabhöhe-2-13-12-_2017_13-29-55.jpg

Das Ergebnis sieht jetzt so aus:

[attachment=0]FF-Tabhöhe-2-13-12-_2017_13-29-55.jpg[/attachment]

TAB-Leiste ist zwar nicht mehr so hoch, aber der Tab passt inkl. des Icons nicht mehr richtig hinein.

EffPeh

Evtl. auch noch die anderen enthaltenen Elemente und margin bzw. padding begrenzen:

CSS

#TabsToolbar , .tabbrowser-tab , .scrollbutton-up , .scrollbutton-down , #new-tab-button {
	min-height: 24px !important;
	max-height: 24px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

graubaer · FF-Tabhöhe -3-13-12-_2017_13-48-10.jpg

Das Ergebnis zeigt leider keine Veränderungen:

[attachment=0]FF-Tabhöhe -3-13-12-_2017_13-48-10.jpg[/attachment]

2002Andreas

Und so mit unterschiedlichen Werten :-??

CSS

#TabsToolbar {
	min-height: 24px !important;
	max-height: 24px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
    }


.tabbrowser-tab{
	min-height: 23px !important;
	max-height: 23px !important;
	}

Alles anzeigen

graubaer · FF-Tabhöhe-4-13-12-_2017_14-00-11.jpg

Leider kaum besser:

[attachment=0]FF-Tabhöhe-4-13-12-_2017_14-00-11.jpg[/attachment]

EffPeh

Dann stört da noch ein anderes Element die Höhenbegrenzung. Was ist mit dem Schliessen-Symbol? Das schaut modifiziert aus. Ist da eine Höhenangabe gemacht worden?

graubaer

Hier sind meine bisherigen Einträge bez. der Tab-Leiste:

CSS

/**********************************************************
 ********** Angaben für die TAB-Leiste ********************
 **********************************************************/


/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 * unten kein Rahmen -> Abschlußrahmen vom Container.
 */
 
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}
 
#TabsToolbar .tabbrowser-tab {
 
  color: black !important;
  border: 1px solid !important;
  border-bottom: none !important;
 
  border-radius: 15px 15px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}


/* TAB bei Mauskontakt:
 * Hintergrundfarbe, Rahmen
 */
#TabsToolbar .tabbrowser-tab:hover {
 
  color: black !important;


}


/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: pink !important;
  font-weight:bold !important;
  color: black ! important;


}


/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
#TabsToolbar .tab-icon-image {
  height: 20px !important;
  width:  20px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: white !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 22px !important;
  width:  22px !important;
  background-color: red !important;
  border-radius: 5px !important;
}


/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
 * Hintergrundfarbe.
 */
#TabsToolbar .tab-close-button[selected="true"] .toolbarbutton-icon {
  background-color: red !important;
}


/* Alle anderen Elemente in den TABs ohne Hintergrund.
 */
#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}

Alles anzeigen

2002Andreas

Hier hast du die Höhe schon selber vorgegeben:

#TabsToolbar .tab-icon-image {
height: 20px !important;
width: 20px !important;
margin-left: -4px !important;
margin-bottom: 2px !important;
}

#TabsToolbar .tab-close-button .toolbarbutton-icon {
height: 22px !important;
width: 22px !important;
background-color: red !important;
border-radius: 5px !important;
}

Ändere dort bitte mal die Werte und teste es dann.

2002Andreas

Teste doch bitte mal diesen kompl. Code:

CSS

/**********************************************************
 ********** Angaben für die TAB-Leiste ********************
 **********************************************************/


/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 * unten kein Rahmen -> Abschlußrahmen vom Container.
 */
 
 #TabsToolbar {
	min-height: 25px !important;
	max-height: 25px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
    }


.tabbrowser-tab{
	min-height: 23px !important;
	max-height: 23px !important;
	}
 
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}
 
#TabsToolbar .tabbrowser-tab {
 
  color: black !important;
  border: 1px solid !important;
  border-bottom: none !important;
 
  border-radius: 15px 15px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}


/* TAB bei Mauskontakt:
 * Hintergrundfarbe, Rahmen
 */
#TabsToolbar .tabbrowser-tab:hover {
 
  color: black !important;


}


/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: pink !important;
  font-weight:bold !important;
  color: black ! important;


}


/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
#TabsToolbar .tab-icon-image {
  height: 16px !important;
  width:  16px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: white !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 16px !important;
  width:  16px !important;
  background-color: red !important;
  border-radius: 5px !important;
}


/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
 * Hintergrundfarbe.
 */
#TabsToolbar .tab-close-button[selected="true"] .toolbarbutton-icon {
  background-color: red !important;
}


/* Alle anderen Elemente in den TABs ohne Hintergrund.
 */
#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}

Alles anzeigen

[attachment=0]Zwischenablage01.jpg[/attachment]

graubaer · FF-Tabhöhe-5-13-12-_2017_14-50-29.jpg

Zitat von 2002Andreas

Teste doch bitte mal diesen kompl. Code

Das Ergebnis jetzt:

[attachment=0]FF-Tabhöhe-5-13-12-_2017_14-50-29.jpg[/attachment]

graubaer · FF-Tabhöhe 6-13-12-_2017_19-08-59.jpg

Mit dem hier #13 geposteten Code habe ich ein wenig "herumgespielt".
Folgende Änderungen habe ich vorgenommen:

CSS

.tabbrowser-tab{
	min-height: 20px !important;
	max-height: 20px !important;
	}
 


/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
#TabsToolbar .tab-icon-image {
  height: 14px !important;
  width:  14px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
  color: white !important;


#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 14px !important;
  width:  14px !important;
  background-color: red !important;
  border-radius: 5px !important;
}

Alles anzeigen

Das Ergebnis entspricht meinen Vorstellungen:

[attachment=0]FF-Tabhöhe 6-13-12-_2017_19-08-59.jpg[/attachment]

Vielen Dank für eure Bemühungen, die letztlich zum Erfolg geführt haben. :klasse:

2002Andreas

Zitat von graubaer

geposteten Code habe ich ein wenig "herumgespielt".

:klasse:

Freut mich wenn du jetzt damit zufrieden bist, war gern geschehen