Moin, habe mal wieder ein CSS-Problem:
Seit gestern funktioniert nachfolgender CSS bei mir im Nightly nicht mehr:
CSS
/* Tabs in Tableiste mittig */
#tabbrowser-tabs:not([overflow="true"]) {
--ug_tabs_position: center;
}
scrollbox[smoothscroll="true"] {
display: flex !important;
justify-content: center !important ;
}
Bisher wurden verbleibende Tabs immer in der Mitte gruppiert. Wenn also nur noch ein Tab aufgerufen ist, steht dieser genau mittig. Jetzt "klebt" er oder auch noch andere an der linken Seite.
Hier ists noch richtig im 129.0.2
und so sieht es im Nightly aus
Was könnte da in die Suppe spucken?
Hier auch nochmal der ganze Code für diesen Bereich, falls da irgendwas rumspinnt:
CSS
/* Tabs rund und farbig */
/* Angaben für die TAB-Leiste */
/* TAB bei bei angewähltem TAB (aktiv): */
/* Hintergrundfarbe, Rahmen,*/
/* Schriftfarbe. */
.tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
background: red !important;
border-radius: 18px !important;
margin-top: 2px !important;
border: none !important;
color: black ! important;
margin-bottom: 0 !important;
}
.tab-background {
outline: none !important;
}
/* Schliessen-Button nur wenn angewählt */
tab:not([selected]) .tab-close-button {display: none !important;
}
/* Schriftgröße Tabs */
.tab-text {
font-size: 17px !important;
}
/* Damit wird der Tabtext am Ende schleichend ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black 1em) !important;
}
/* Doppelte Schliessung ausblenden */
#TabsToolbar > .titlebar-buttonbox-container {
display:none !important;
}
.tabbrowser-tab[visuallyselected] .tab-label {
font-weight: bold !important;
}
#TabsToolbar .tabbrowser-tab:not([selected]) {
border-radius: 16px !important;
height: 22px ! important;
margin-top: 5px !important;
padding: 0 !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: -2px !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 angepasst */
#TabsToolbar .tab-close-button {
margin-right: -8px !important;
font-weight: bold !important;
color: black !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
height: 20px !important;
width: 20px !important;
background-color: red !important;
border-radius: 12px !important;
}
/* Aktiver Tab breiter */
.tabbrowser-tab:not([pinned]):not([selected]) {
min-width: 200px !important;
flex-grow: 0 !important;
}
.tabbrowser-tab:not([pinned])[selected] {
min-width: 200px !important;
flex-grow: 0 !important;
}
*|*:root {
--tab-toolbar-navbar-overlap: 0 !important;
}
/* Lautsprechersymbol größer */
.tab-icon-overlay {
transform: scale(1.8) !important;
}
image.tab-icon-overlay {
margin-top: 3px !important;
}
/* Lautsprechersymbol violett bei Sound */
.tab-icon-overlay[soundplaying] {
fill: blueviolet !important;
margin-left: 5px !important;
}
/* Lautsprechersymbol gelb bei Stumm */
.tab-icon-overlay[muted] {
fill: yellow !important;
margin-left: 5px !important;
}
/* Tab Beschriftung mittig */
.tab-content {
display: flex !important;
margin-top: 2px !important;
justify-content: center !important;
align-items: center !important;
}
#TabsToolbar .tabbrowser-tab[selected] .tab-content {
margin-top: 2px !important;
}
.tabbrowser-tab {
min-height: 40px !important;
max-height: 40px !important;
}
.tab-label-container {
margin: auto !important;
}
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
flex-shrink: 0 !important;
padding: 0 !important;
width: 16px !important;
}
#TabsToolbar .toolbarbutton-1 {
min-height: 34px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;
}
#TabsToolbar .tabbrowser-tab:not([selected]) {
min-height: 34px !important;
border: 1px solid #B2B2B2 !important;
}
#TabsToolbar .toolbarbutton-1 > image {
padding: 2px 4px !important;
}
/* Rahmen um die Tableiste durchsichtig */
#TabsToolbar {
border: 0.2px solid transparent !important;
}
#TabsToolbar:hover {
border: 0.2px solid transparent !important;
}
/* Tabs in Tableiste mittig */
#tabbrowser-tabs:not([overflow="true"]) {
--ug_tabs_position: center;
}
scrollbox[smoothscroll="true"] {
display: flex !important;
justify-content: center !important ;
}
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0;
background-color: #00ff00;
height: 6px;
margin-inline: 8px;
margin-top: 2px;
border-radius: 90px;
}
.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 1;
transform-origin: left center;
animation: 2s ease-in-out scale;
}
.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
transition: opacity 2s ease-out;
}
@keyframes scale {
0% {transform: scaleX(0);}
100% {transform: scaleX(1);}
}
Alles anzeigen
Der betroffene Code steht zwischen Zeile 174 bis 192
Für hilfreiche Hinweise sage ich schon mal Dankeschön!