Scrollbuttons andere Farbe

Für die Pfeile in der Tableiste

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

Über die Datei userChrome.css wird kein Shadow DOM (::part) unterstützt. Dafür braucht es Folgendes:

Thema

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Damit das alles so funktioniert, wie weiter unten beschrieben, muss in erster Linie @aborix erwähnt werden, der mit seinem Lade-Skript die neue Aufruflogik überhaupt erst möglich gemacht hat und  @2002Andreas , @Sören Hentzschel für ihre Hilfe und den beigesteuerten Code. Vielen Dank!



Um auch weiterhin alle Elemente der Firefox-Oberfläche mittels 'css' gestalten zu können, ist es notwendig, eine zusätzliche Aufruflogik für bestimmte 'css'-Regeln zu benutzen.

Bei diesen Elementen…

BrokenHeart

18. Juni 2021 um 09:36

Zitat von Mira_Belle

Für die Pfeile in der Tableiste

Du hast das getestet?

So müsste der Code dann lauten:

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

und er müsste in die shadow.css wie Sören es schon sagte.

Nur wie man die Pfeile dann in den Lesezeichenmenüs extra ansprechen kann, das habe ich noch nicht rausgefunden

Ein Code in der userChrome.css spricht dann auch wieder die Pfeile in der Tableiste an.

Zitat von Zitronella

Bin zufrieden damit.

So sollte es auch sein

Sorry, dass ich nicht dazugeschrieben habe, dass der Code in die userChomeShadow.css muss.
Und er funktioniert hier bei mir mit color, sowie fill

Für die Pfeile im Lesezeichenmenü:

toolbarbutton {
    color: orange !important;
}

In die userCrome.css

Zitat von Mira_Belle

Für die Pfeile im Lesezeichenmenü:

Wieder nicht aufgepasst!

@media not (-moz-platform: macos) {
toolbarbutton {
    color: orange !important;
}
}

Ist für die Pfeile im Lesezeichenmenü.

Wobei, auch alle anderen Buttons werden eingefärbt.

Zitat von Mira_Belle

Wieder nicht aufgepasst!

Habe auch noch einmal nachgebessert.

@media not (-moz-platform: macos) {
    toolbarbutton#scrollbutton-down,
    toolbarbutton#scrollbutton-up {
        fill: orange !important;
    }
    }

Zitat von Horstmann

sollte auch klappen.

Tut es auch

Zitat von Mira_Belle

Habe auch noch einmal nachgebessert.

Damit werden aber auch wieder alle Pfeile angesprochen, und nicht getrennt.

Ich geb' auf.

Zitat von Mira_Belle

Ich geb' auf.

Nimm den Code von Horstmann , der funktioniert.

Zitat von Zitronella

Da ich eigentlich nur die Buttons bei voller Tab Leiste eingefärbt brauche (aber unabhängig von der Lesezeichen-Anzeigen-Leiste) habe ich den Code für mich noch etwas angepasst. Keine Ahnung ob das code-mäßig richtig ist, aber es funktioniert.

CSS

/* < und > Buttons (wenn Tableiste sehr voll) weiß eingefärbt    */
#tabbrowser-arrowscrollbox {
    --ug-scrollbutton_fill: rgb(255, 255, 255); 
}
#scrollbutton-up, #scrollbutton-down {
    fill: var(--ug-scrollbutton_fill, initial) !important;
}
/* Scrollbutton ^ und v in Lesezeichen- Verwalten-Leiste  eingefärbt
	.menupopup-arrowscrollbox {
    --ug-scrollbutton_fill: red; 
}  */

Alles anzeigen

ich habe statt --ug-scrollbutton_color stattdessen --ug-scrollbutton_fill genommen. Gerne schreiben falls das aus irgend einem Grund falsch sein sollte. Ich wollte es nur irgendwie einheitlich haben.

Genau richtig gemacht mit der Anpassung.

Die Variable kann man nennen wie man will, solange es -- am Anfang hat, und im Code durchgehend der gleiche Name benutzt wird.

ZB. --Pfeildingens_Farbe-anders: purple; geht auch.

Zitat von Zitronella

... und lediglich mit "try and error" spiele.

Ich auch oft genug.

Der Code von 2002Andreas funktioniert übrigens im Prinzip genau gleich, und ist wahrscheinlich besser/effizienter wenn man das Shadowroots Script benutzt, weil näher am Originalcode.