Scrollbuttons andere Farbe

Zitronella

Hallo, ich bräuchte etwas Hilfe, denn ich bekomme es nicht hin, diese Scrollbuttons unterschiedlich anzusprechen.

Die Scrollbuttons in der Tableiste bei vielen Tabs < und > (hier in blau umrandet) sollen eine andere Farbe haben als die Scrollbuttons im Lesezeichen-Menü (hier in grün umrandet).

Bisher nutze ich diesen Code, der allerdings immer beide anspricht.

CSS

#scrollbutton-down,#scrollbutton-up{
fill: red!important;
}

Kann mir da jemand behilflich sein?

Mira_Belle

Für die Pfeile in der Tableiste

CSS

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

Zitronella

Hat leider keine Auswirkung. Nur dein Code bringt gar nix. Zusätzlich mit meinem Code ist es weiterhin in beiden rot.

Sören Hentzschel

Ü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

2002Andreas

Zitat von Mira_Belle

Für die Pfeile in der Tableiste

Du hast das getestet?

So müsste der Code dann lauten:

CSS

#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.

Zitronella

Es passt mir, denn es reicht mir eigentlich dass ich NUR die Pfeile in der Tableiste verändere. Die in der Lesezeichenleiste können unangetastet bleiben, sie sollten nur nicht genauso wie in der Lesezeichenleiste sich verändern. Und das tun sie hiermit auch nicht mehr.

userChromeShadow.uc.js habe ich angelegt und in
userChromeShadow.css habe ich folgendes eingetragen:

CSS

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

Bin zufrieden damit. danke an alle

2002Andreas

Zitat von Zitronella

Bin zufrieden damit.

So sollte es auch sein

Mira_Belle

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ü:

CSS

toolbarbutton {
    color: orange !important;
}

In die userCrome.css

2002Andreas

Zitat von Mira_Belle

Für die Pfeile im Lesezeichenmenü:

Mira_Belle

Wieder nicht aufgepasst!

CSS

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

Ist für die Pfeile im Lesezeichenmenü.

Wobei, auch alle anderen Buttons werden eingefärbt.

2002Andreas

Zitat von Mira_Belle

Wieder nicht aufgepasst!

Horstmann

Zitat von Mira_Belle
CSS
@media not (-moz-platform: macos) {
toolbarbutton {
    color: orange !important;
}
}
Ist für die Pfeile im Lesezeichenmenü.
Wobei, auch alle anderen Buttons werden eingefärbt.

Und wenn man color statt fill benutzt, werden die hover Farben auch mit beeinflusst.

Hier für's Protokoll eine Version ohne Shadowroot Modifikationen, für Leute ohne Scripts, sollte auch klappen.

CSS

#tabbrowser-arrowscrollbox {
    --ug-scrollbutton_color: red; 
}

.menupopup-arrowscrollbox {
    --ug-scrollbutton_color: green; 
}

#scrollbutton-up, #scrollbutton-down {
    fill: var(--ug-scrollbutton_color, initial) !important;
}

Alles anzeigen

Mira_Belle

Habe auch noch einmal nachgebessert.

CSS

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

2002Andreas

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.

Mira_Belle

Ich geb' auf.

2002Andreas

Zitat von Mira_Belle

Ich geb' auf.

Nimm den Code von Horstmann , der funktioniert.

Zitronella

Zitat von Horstmann

Hier für's Protokoll eine Version ohne Shadowroot Modifikationen, für Leute ohne Scripts, sollte auch klappen.

Dankeschön, das klappt auf jeden Fall auch. 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.

Horstmann

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.

Zitronella

Dankeschön, ach das mit der Variable hat mir sogar Sören mal erklärt, aber ich hatte es wieder vergessen, da ich mich mit Code wenig bis gar nicht auskenne und lediglich mit "tray and error" spiele.

Horstmann

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.

Scrollbuttons andere Farbe

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

Zitronella 2. Januar 2024 um 11:55

Ähnliche Themen

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr