- Firefox-Version
- Firefox 91 Nightly
- Betriebssystem
- Windows 10
Im neuesten Nightly passt mein CSS für die Tabs nicht mehr ganz...
die Tabs-Beschriftung und das Icon sind nicht mehr horizontal mittig.
Eigene Versuche mit Padding-Top + oder - Werte bringen kein bzw nicht das gewünschte Ergebnis.
Wer hat ne Idee?
CSS
/* Tabs rund und farbig */
/* 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 .tabbrowser-tab {
color: black !important;
border: 1px solid !important;
border-bottom: 1px solid black !important;
border-radius: 14px 14px !important;
margin-top: 0px !important;
padding: 0px 0 !important;
}
/* TAB bei bei angewähltem TAB (aktiv):
* Hintergrundfarbe, Rahmen,
* Schriftfarbe.*/
#TabsToolbar .tabbrowser-tab[selected="true"] {
background: red !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: 22px !important;
width: 22px !important;
margin-left: 5px !important;
margin-bottom: 0px !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: 1px !important;
padding: 0 !important;
color: black !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
height: 18px !important;
width: 18px !important;
background-color: red !important;
border-radius: 5px !important;
}
/* Schliessen-Button nur wenn angewählt */
tab:not([selected]) .tab-close-button {display: none !important;
}
/* Alle anderen Elemente in den TABs ohne Hintergrund. */
#TabsToolbar .tabbrowser-tab * {
background: none !important;
}
/* Schriftgröße Tabs */
.tab-text {
font-size:15px !important;
}
/*Damit wird der Tabtext am Ende nicht ausgeblendet*/
.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;
}
/* Doppelte Schliessung ausblenden */
#TabsToolbar > .titlebar-buttonbox-container {
display:none !important;
}
/* Tabs Proton-Design */
:root {
--proton-tab-radius: 0px !important;
--proton-tab-block-margin: 0px !important;
--inline-tab-padding: 10px !important;
}
#TabsToolbar {
min-height: 36px !important;
max-height: 36px !important;
border-top: 1px solid #B2B2B2 !important;
border-bottom: 1px solid #B2B2B2 !important;
margin-bottom: 1px !important;
padding-left: 2px !important;
}
#TabsToolbar .toolbarbutton-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;}
#TabsToolbar .toolbarbutton-1 > image {
padding: 2px 4px !important;
}
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
box-shadow: none !important;
}
.tabbrowser-tab {
box-shadow: none !important;
margin-right: 0 !important;
}
#tabbrowser-tabs:not([positionpinnedtabs]) >
#tabbrowser-arrowscrollbox >
.tabbrowser-tab[pinned] +
.tabbrowser-tab:not([pinned]) {
margin-inline-start: 6px !important;
}
.tabbrowser-tab .tab-content {
background-image: linear-gradient(to bottom, dimgrey 0%, dimgrey 14%, dimgrey 14%, dimgrey 100%) !important;
padding: 0 3px !important;
margin-top: 2px !important;
margin-bottom: 1px !important;
}
.tabbrowser-tab[selected="true"] .tab-content {
background-image: linear-gradient(to bottom, green 0%, green 14%, dimgrey 14%, dimgrey 100%) !important;
margin-top: 2px !important;
margin-bottom: 1px !important;
}
.tabbrowser-tab:hover .tab-content {
background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;}
.tabbrowser-tab[selected="true"]:hover .tab-content {
background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;}
.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]) {
margin-top: 2px !important;
margin-inline-end: 5px !important;
}
.tabbrowser-tab .tab-content .tab-text.tab-label,
.tabbrowser-tab:hover .tab-content .tab-text.tab-label {
margin-top: 1px !important;
}
/* Rahmen um die Tableiste durchsichtig */
#TabsToolbar {
border: 0.2px solid transparent !important;
}
#TabsToolbar:hover {
border: 0.2px solid transparent !important;
}
.tabbrowser-tab[label*=" - YouTube"] .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;}
.tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;}
.tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;}
.tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton {
-moz-box-orient: horizontal !important;}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
margin-top: 3px !important;
margin-right: 0px !important;
}
.tab-icon-sound[soundplaying="true"],
.tab-icon-sound[muted="true"],
.tab-icon-sound[activemedia-blocked="true"] {
background: #FFF !important;
padding: 0 1px !important;
}
.tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
.tab-icon-sound[muted="true"] .tab-icon-sound-image,
.tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
fill: #F10 !important;
}
.tab-icon-sound-image {
height: 1.9em !important;
}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
display: none !important;
}
/* Tab Beschriftung mittig */
.tab-content {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.tab-label-container {
margin: auto !important;}
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
flex-shrink: 0 !important;
padding: 0px !important;
padding-top: -5px!important;
width: 16px !important;
}
/* Tab Mindestbreite einstellen */
.tabbrowser-tab:not([pinned]) {
-moz-box-flex: 0 !important;
min-width: 200px !important;
}
/*Tabs in Tableiste mittig*/
scrollbox:not(#PlacesToolbarItems) {
-moz-box-pack: center !important;
} 
Danke!