Icons und Separatoren seit Update auf Version 108 verstellt

BarbaraZ-

Moin zusammen,

seit des aktuellen Updates werden Icons neben der Adressleiste zum Teil nicht mehr komplett angezeigt.

Darauf beruht, dass auch einige Separatoren verschwunden sind (nicht mehr angezeigt werden).

Ob es mit diesem Code einen zusammenhang gibt weiss ich leider nicht, denn dieses sieht auch mit deaktivierten Code nicht anders aus.

CSS

/* Separatoren farbig, hinter Adressliste*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

#nav-bar toolbarbutton::after {
   content: "|" !important;
   display: flex !important;
   color: yellow !important;
   margin-left: -3px !important; /*-3*/
   margin-right: -8px !important;
  }
  
/*#nav-bar .toolbarbutton-1 {
    opacity: 1 !important;
  }*/

/* Separatoren für Menuleiste*/ 

#main-menubar > menu::after {
   content: "|" !important;
   display: flex !important;
   color: green !important;
  }

Alles anzeigen

So, einen Fehler habe ich gefunden. Alles weiter nach links gerückt

CSS

margin-left: 3px !important; /*-3*/
   margin-right: -1px !important;

Mit diesen Werten sind nur wenigstens die Separatoren wieder sichtbar aber die Felder viel zu gros, sodass die Icons nun mittig zwischen den Separatoren sitzen und etlicher Leerraum verschwendet wird, was die Adressleiste verkleinert.

2002Andreas

Zitat von BarbaraZ-

zum Teil nicht mehr komplett angezeigt.

Das hängt wohl auch mit der Anzahl deiner Icons zusammen.

Hier sieht das mit deinem Code so aus:

Alle Icons vorhanden.

Nur ein Versuch, teste bitte mal mit diesem Zusatz:

CSS

#urlbar-container {
  max-width: 1000px !important;
}

Den Wert evtl. noch anpassen.

BarbaraZ-

Hallo Andreas,

Selbst Werte bis 10000px haben keinen Erfolg.

Ich habe nun ALLE Codes entfernt und nur diesen eingesetzt:

CSS

/* Separatoren farbig, hinter Adressliste*/

@-moz-document url(chrome://browser/content/browser.xhtml) {

/*#urlbar-container {
  max-width: 10000px !important;
}*/

#nav-bar toolbarbutton::after {
   content: "|" !important;
   /*display: flex !important;*/
   color: yellow !important;
   margin-left: 3px !important;
   margin-right: -1px !important;
  }
  
#nav-bar .toolbarbutton-1 {
    opacity: 1 !important;
  }

/* Separatoren für Menuleiste*/ 

#main-menubar > menu::after {
   content: "|" !important;
   display: flex !important;
   color: green !important;
  }

/* Separatoren für LZ-Liste */

toolbarbutton.bookmark-item::after {
   content: "|" !important;
   display: flex !important;
   color: red !important;
   margin-left: 1px !important;
   margin-right: -7px !important;
  }
}

Alles anzeigen

Dabei ist es sogar egal, ob ich oben "display: flex" wie jetzt oben, deaktiviere oder nicht. Die Icons schweben zwischen den Separatoren.

Heißt links und rechts bekomme ich ich die Abstände nicht angepasst.

2002Andreas

Zitat von BarbaraZ-

Selbst Werte bis 10000px haben keinen Erfolg.

Und Werte unter 1000?

Die Leiste soll ja kürzer werden.

BarbaraZ-

Bei unter 1000 verkürt es mir lediglich die Adressleiste und zieht alles nach links rüber. Es soll aber genau anderes herum. Die Abstände zwischen den Icons wieder so anpassen, dass ich keine Leerräume habe und die Adressleiste wieder Platz gewinnt.

Das sieht gar nicht schön aus.

2002Andreas

Zitat von BarbaraZ-

dass ich keine Leerräume habe

Ich habe die Separatoren mal rot gefärbt, damit man das besser erkennt.

Hier sieht dein Code so aus:

Da passt alles.

Funkt dir evtl. ein anderer Code dazwischen

BarbaraZ-

Habe es jetzt mal so dargestellt, das gut zu erkennen ist, wie es jetzt aussieht.

Vor dem Update auf FF 108 passten die Icons genau zwischen die Separatoren. Jetzt ist links und rechts neben dem Hintergrund verschenkter Platz. Diesen möchte ich gerne wieder nutzen können.

Es funkt kein anderer Code dazwischen. Das war das erste, was ich ausprobiert hatte, alle Codes zu deaktivieren. Nur mit diesem Code klappt es auch nicht. Vor allem, weil ich diese Unstimmigkeit vor dem Update nicht hatte.

2002Andreas

Zitat von BarbaraZ-

verschenkter Platz.

Den habe ich hier nicht, siehe meinen obigen Screenshot

Speravir

Ohne mir die Stile oben im Detail anzusehen, ein Hinweis: In Firefox 108 wurden die toolbarbuttons, und damit deren innere Elemente eine Ebene nach unten verschoben. Es wurde noch ein toolbaritem um sie herum gepackt. Das Toolbaritem hat nun die ID bekommen, die vorher der Button besaß. Auf die Buttons von Userskripten trifft das aber nicht zu, wenigstens so lange nicht, bis jemand an einem solche Skript eine Änderung vornimmt. Bei mir gab es nämlich auch plötzlich eine Änderung im Abstand zwischen den Symbolen; so habe ich es überhaupt bemerkt.

BarbaraZ-

Leider weiss ich nicht, wie ich toolbaritem einbinden kann.

Von daher muss es wohl so bleiben, wie es ist.

Vielleicht hat ja jemand eine Lösung.

2002Andreas

Zitat von BarbaraZ-

Vielleicht hat ja jemand eine Lösung.

Ich weiß nicht warum das bei dir so ist

Noch ein anderes Profil:

Und sogar im Nightly ist das hier nicht:

Horstmann

Zitat von BarbaraZ-

Es funkt kein anderer Code dazwischen. Das war das erste, was ich ausprobiert hatte, alle Codes zu deaktivieren. Nur mit diesem Code klappt es auch nicht. Vor allem, weil ich diese Unstimmigkeit vor dem Update nicht hatte.

Ohne irgendein Script oder eigenes CSS zu verwenden, ist das Problem auch da ?

Falls nicht, könnte es sein dass alle Codes deaktivieren vielleicht nicht ganz geklappt hat ?

BarbaraZ-

Moin Horstmann

Dieses habe ich doch schon in Beitrag #2 und #7 beschrieben.

Habe hier gelernt, dieses als erste Maßnahme durchzuführen.

Und deaktivieren bei mir heißt: Anderes Verzeichnis auf anderer Festplatte. Damit also komplett vom Fuchs getrennt.

Dann nach und nach zuschalten auch in verschiedenen Konstellationen.

Trotdem Danke nochmal für den Hinweis.

2002Andreas

//

Es wäre ja sehr freundlich, wenn andere User den Code auch mal testen würden.

Nicht das es an mir liegt, und ich etwas übersehen habe

harff182

BarbaraZ- :

Haste mal ein neues/anderes Profil getestet?

Vielleicht hat Dein aktuelles irgendwo einen weggekricht...

Horstmann

Zitat von 2002Andreas

//
Es wäre ja sehr freundlich, wenn andere User den Code auch mal testen würden.
Nicht das es an mir liegt, und ich etwas übersehen habe

Getestet, und den Code für schlecht befunden .

Sogar in Deinen Screenshots sieht man dass die Separatoren teils gar nicht auftauchen, oder teils nicht sauber an beiden Button Enden anliegen .

Man könnte sowas probieren :

CSS

#nav-bar toolbarbutton::after {
   content: "|" !important;
   display: flex !important;
   color: red !important;
   margin-left: -3px !important; 
   margin-right: -4px !important;
  }
  

#nav-bar .toolbarbutton-1 {
   --toolbarbutton-outer-padding: 0px !important;
}

Alles anzeigen

Oder nur mit den margin Werten im ersten Teil rumspielen, und den 2ten Teil mit dem padding weglassen .

Die Buttons lassen sich so eigentlich recht beliebig zwischen den und über die Separatoren verschieben .

So oder so ist es nicht perfekt, v.a. Separatoren für die Extension Buttons werden gar nicht oder nicht sauber dargestellt , was evtl. mit 108 zusammenhängt ; und was ausgehend von der OP der eigentliche Grund für die Anpassungsarie sein könnte .

Dazu gibt es noch unerwünschte Quasi-Separatoren im Bibliothek-Button Popup .

Mira_Belle

Ein anderer Ansatz:

CSS

#nav-bar toolbarbutton:after {
   content: "|" !important;
   display: flex !important;
   color: red !important;
   margin-right: -4px !important;
  }
#nav-bar toolbarbutton:before{
     content: "|" !important;
   display: flex !important;
   color: transparent!important;
   margin-left: -4px !important;
}

Alles anzeigen

2002Andreas

Zitat von Horstmann

teils nicht sauber an beiden Button Enden anliegen .

Vorweg, danke für den Gegentest.

Es ging mir mehr um den Vergleich der Abstände, ob sie auch so weit auseinander liegen wie bei Barbara auf ihrem Screenshot.

Mit deinem Code sind sie so wie auf meinen Screenshots zu sehen ist.

Also nicht die weiten Abstände.

Dann weiß ich es auch nicht, an was es liegen könnte

visoer

Ich habe ein ähnliches Problem.

Zumindest bei den Add-On-Buttons ging es bei mir so:

(width sollte evtl. angepasst werden)

CSS

#nav-bar .toolbaritem-combined-buttons.unified-extensions-item.chromeclass-toolbar-additional {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
}

Horstmann

Zitat von 2002Andreas

Vorweg, danke für den Gegentest.
Es ging mir mehr um den Vergleich der Abstände, ob sie auch so weit auseinander liegen wie bei Barbara auf ihrem Screenshot.
Mit deinem Code sind sie so wie auf meinen Screenshots zu sehen ist.
Also nicht die weiten Abstände.
Dann weiß ich es auch nicht, an was es liegen könnte

Immer ein Vergnügen, wenn ich mal was beitragen kann .

Die 'weiten' Abstände sehe ich eigentlich auch mit keinem der CSS Codes von oben - sehe sie allerdings schon in einem komplett unveränderten 108.1er Profil ( dann natürlich ohne Trenner ) , was ja aber normal ist .

Daher die Vermutung dass da bei Barbara immer noch was am Laufen ist das querschlägt .

Eine kurze, grobe Test CSS noch dazu, Erweiterungen sind dabei halbwegs mit berücksichtigt, vielleicht hilft's ja jemand :

CSS

#nav-bar toolbarbutton > .toolbarbutton-icon, #nav-bar .unified-extensions-item-action {
    box-shadow: 1px 0px 0px rgba(255, 0, 0, 1) !important;
}

#nav-bar toolbarbutton, #nav-bar .toolbarbutton-1 {
  padding-left: 0 !important;
}

Icons und Separatoren seit Update auf Version 108 verstellt

Ähnliche Themen

2022-Update: Aktualisierung auf WoltLab Suite 5.5 & mehr

Symbole in den Kontextmenüs [ Update ]

FF Menü reagiert nicht

Diakritische Schriftzeichen nach update

Anpassung der Suche

Addons Manager Code anpassen