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?
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?
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.
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.
Evtl. auch noch die anderen enthaltenen Elemente und margin bzw. padding begrenzen:
Das Ergebnis zeigt leider keine Veränderungen:
[attachment=0]FF-Tabhöhe -3-13-12-_2017_13-48-10.jpg[/attachment]
Und so mit unterschiedlichen Werten :-??
Leider kaum besser:
[attachment=0]FF-Tabhöhe-4-13-12-_2017_14-00-11.jpg[/attachment]
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?
Hier sind meine bisherigen Einträge bez. der Tab-Leiste:
/**********************************************************
********** 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
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.
Teste doch bitte mal diesen kompl. Code:
/**********************************************************
********** 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]
Teste doch bitte mal diesen kompl. Code
Das Ergebnis jetzt:
[attachment=0]FF-Tabhöhe-5-13-12-_2017_14-50-29.jpg[/attachment]
Mit dem hier #13 geposteten Code habe ich ein wenig "herumgespielt".
Folgende Änderungen habe ich vorgenommen:
.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:
geposteten Code habe ich ein wenig "herumgespielt".
:klasse:
Freut mich wenn du jetzt damit zufrieden bist, war gern geschehen