Bei mir läuft die Anpassung für die Scrollbutton der Tabbar amok.

so wie ich mich erinnere, hatte ich das problem auch schon lange konnte keine lösung finden.

Zitat von 2002Andreas

---

Ist wohl auch Standard so

---

Und wird dann so geändert:

Und noch dazu ist das linke Scrollbuttonicon auch gespiegelt, allerdings vertikal, die CSS in Fx dazu sieht so aus:

#scrollbutton-up > .toolbarbutton-icon {
  transform: scaleY(-1);
}

Womit ich gerade eine Menge Spass hatte, als ich beide Pfeile umpositionieren wollte...

Für das rechte Pfeilicon sieht der Fx Code so aus, also horizontal gespiegelt - und bei rtl Leserichtung werden die Icons dann noch mal anders angesprochen:

:host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon, :host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon {
  transform: scaleX(-1);
}

Zitat von Dharkness

Zitat von Horstmann

Womit ich gerade eine Menge Spass hatte, als ich beide Pfeile umpositionieren wollte...

Jupp, das war echt ganz schön verzwickt.

Muss man ja erstmal drauf kommen

Zitat von Dharkness

in dem Fall bleibe ich bei meiner Lösung.

Alles ist gut, Hauptsache es funktioniert so wie du es möchtest.

Zitat von Dharkness

Zitat von 2002Andreas

Ist hier auch so

Alternativ 2x nach links einfügen.

Dankeschön fürs testen, aber in dem Fall bleibe ich bei meiner Lösung.

Wenn du aber zB ein Lesezeichenleiste Ordner-Popup öffnest, mit vielen Einträgen die zum Überlaufen führen, dann würde dein eigener Pfeil dort auch auftauchen (oben und/oder unten), oder?

Ist das gewünscht?

Zitat von Horstmann

dann würde dein eigener Pfeil dort auch auftauchen

Nö

Das kommt drauf an, wie du die Pfeile ansprichst.

In meinem Beispiel sieht das so aus:

#tabbrowser-arrowscrollbox::part(scrollbutton-up) {
    list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
}

#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
}

Und diesen Code habe ich in die userChromeShadow.css eingetragen.

Zitat von 2002Andreas

Nö

Das kommt drauf an, wie du die Pfeile ansprichst.

In meinem Beispiel sieht das so aus:

CSS

#tabbrowser-arrowscrollbox::part(scrollbutton-up) {
    list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
}

#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
}

Und diesen Code habe ich in die userChromeShadow.css eingetragen.

Dazu muss dann aber erstmal shadow-root editierbar gemacht werden, wie hier schön beschrieben, oder?

Ist elegant, hat aber vielleicht nicht jeder im Programm.

Ohne shadow-root anzugehen habe ich mal sowas probiert - nur kurz angetestet:

#tabbrowser-arrowscrollbox {
    --custom-right-image: url("pfeiltest-rechts.png") !important;
    --custom-left-image: url("pfeiltest-links.png") !important;
    --custom-arrow-transform: scale(1) !important;
}

#scrollbutton-down > .toolbarbutton-icon {
    list-style-image: var(--custom-right-image) !important;
    transform: var(--custom-arrow-transform) !important;
}

#scrollbutton-up > .toolbarbutton-icon {
    list-style-image: var(--custom-left-image) !important;
    transform: var(--custom-arrow-transform) !important;
}

Das wäre für separate rechts/links Pfeile, mit neutraler Ausrichtung, und sollte eigentlich nur die in der Tableiste ansprechen.

Zitat von Horstmann

und sollte eigentlich

Tut es auch.

Zitat von Horstmann

dann aber erstmal shadow-root editierbar gemacht werden

Ja.

Zitat von 2002Andreas

Tut es auch.

Danke für's testen.

Die shadow-root Variante hat natürlich den Vorteil, direkten Zugriff über die Selektoren zu bieten; andererseits braucht man halt ein extra Skript etc..

So haben Dharkness und omar1979 jetzt zumindest extra Optionen.

Zitat von Horstmann

Danke für's testen.

Wir helfen und doch immer gerne wenn möglich

Zitat von Dharkness

für überlaufende Menüs

Meinst du den

Wenn ja:

:root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button{
  list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/rechts.png") !important;
}

Zitat von Dharkness

Nein, ich meine überlaufende Menüs in der Lesezeichen-Symbolleiste.

Ach so ...

Das lässt sich genauso lösen, wie du es letztendlich auch so gelöst hattest - was und wie nicht so ganz klar ist.

Was soll denn daran geändert werden, und welche CSS und/oder Skripts sind momentan in Gebrauch in dem Bereich?

Es gibt sicherlich noch einen besseren Code.

userChrome.css

toolbarbutton#scrollbutton-down,
toolbarbutton#scrollbutton-up  {
    background-color: yellow;
}

#scrollbutton-up:hover,
#scrollbutton-down:hover {
    background-color: lightgreen;
    border: 1px solid brown;
    border-radius: 5px;
}

userChromeShadow:

#tabbrowser-arrowscrollbox::part(scrollbutton-up), 
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {  
    background-color: red !important;
    fill: white !important;
}

#tabbrowser-arrowscrollbox::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
    background-color: lightgreen !important;  
}