Tableiste Änderungen

Es ist aber auch kompliziert. Alle arrowscrollbox außer die für die Tableiste haben auch noch #shadow-root über sich. Mit diesen langen :host-Einträgen kann ich nichts anfangen, vielleicht spielen die eine Rolle, denn sie enthalten ebenfalls scrollbutton-up bzw. scrollbutton-down und sind über den entsprechenden toolbarbutton eingeordnet.

Zitat von milupo

Mit diesen langen :host-Einträgen kann ich nichts anfangen, vielleicht spielen die eine Rolle,

Damit habe ich auch schon gebastelt, aber funktioniert auch nicht. Es ist für mich halb so wichtig, aber dachte mir, da muss doch ein Weg zu finden sein.

Ich bleibe dabei, es ist keine ::part Funktion für das Popup unter den Lesezeichen.

Sonst würde es ja auch nicht mit der Bezeichnung:

#scrollbutton-down,

#scrollbutton-up

in der userChrome.css funktionieren

Zitat von 2002Andreas

Ich bleibe dabei, es ist keine ::part Funktion für das Popup unter den Lesezeichen.

Ok, siehst Du dann irgendeinen Weg, wenn das * in der userChrome.css steht, wo es überall wirkt, wo es #scrollbutton-down und #scrollbutton-up gibt, es mit einem Eintrag in der userChromeShadow.css für die Tabbar zu überschreiben?

*

#scrollbutton-up,
#scrollbutton-down {
  border: 1px solid #B2B2B2 !important;
}

Das ** z.B. funktioniert nicht.

**

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

Problem:

Letztlich heißen die Bezeichnungen überall:

#scrollbutton-up

#scrollbutton-down

In der Tableiste ist es ein Code per ::part, darum kann man sie dort nutzen mit dem Zusatz.

Wenn das bei den Lesezeichen auch eine ::part Funktion wäre, dann gäbe es dafür wahrscheinlich auch eine ganz genaue Bezeichnung.

So finde ich zumindest leider keine Möglichkeit, beides getrennt anzusprechen.

Zitat von 2002Andreas

Ich bleibe dabei, es ist keine ::part Funktion für das Popup unter den Lesezeichen.

Das stimmt wohl, Andreas. Ich habe ja in der userChromeShadow.css das #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) { zu stehen um in den Lesezeichen-Popups den Hintergrund zu verändern. wenn ich mir das genau ansehe (habe es jetzt bewusst rot gemacht), dann wird auch der Bereich zum Scrollen mit eingefärbt. Fahre ich mit der Maus drüber, dann wird gescrollt. Original ist der Hintergrund z.B. weiß, Ablauf ebenso. Für mich heißt das, wir haben i.M. keine Möglichkeit hier eine andere Trennung vorzunehmen. Oder?

Getrennt ansprechen lassen sich die 'Scrollbuttons' schon:

toolbarbutton#scrollbutton-down,
toolbarbutton#scrollbutton-up  {
    color: white !important;
    background-color: blue;
    border: 1px solid red;
}

#tabbrowser-arrowscrollbox::part(scrollbutton-up), 
#tabbrowser-arrowscrollbox::part(scrollbutton-down) { 
    fill: yellow !important;
    background-color: red !important;
    border: 5px solid green!important;

}

Man darf halt in der 'userChrome.css' kein !important verwenden. Ausnahme: Alle Elemente, die das Standardverhalten überschreiben müssen, in diesem Fall fill. Nutzt man dann in der 'userChromeShadow.css' das selbe Element, kann man es nicht mehr überschreiben und man hat dann eben die gleiche Vordergrundfarbe. Hier kann man aber bei den Scrollbuttons der Lesezeichen-Leiste auch alternativ color benutzen und hat somit doch wieder die Möglichkeit unterschiedliche Farben zu setzen.

Insgesamt ist die "Lösung" nicht sehr befriedigend . Ich habe leider auch keinen Weg gefunden, nur die Scrollbuttons in den Popup-Menüs direkt anzusprechen, aber als Workaround funktioniert es so.

Zitat von BrokenHeart

Hier kann man aber bei den Scrollbuttons der Lesezeichen-Leiste auch alternativ color benutzen und hat somit doch wieder die Möglichkeit unterschiedliche Farben zu setzen.

BrokenHeart

Danke, das ist erst einmal die Lösung.

Hintergrund kann bei beiden geändert werden, color wirkt sich dabei übergreifend auf beide aus. Das kann angepasst werden, kein Problem.

Zitat von BrokenHeart

aber als Workaround funktioniert es so.

Gute Lösung für den Hausgebrauch

Zitat von Nutzende

Ein anderer Lösungsansatz wäre vielleicht:

Vielen Dank @Nutzende!

Ich hoffe, ich habe deinen Variablen-Lösungsansatz richtig interpretiert.

In Verbindung mit der 'userChromeShadow.css' kann man jetzt wirklich die ScrollButtons unabhängig voneinander anpassen (ohne !important-Überschreiben Workaround).

Ich habe das mal auf das obige Beispiel umgesetzt

Ohne den Änderungen an den Scrollbuttons in der Tableiste ('userChromeShadow.css'):

#PlacesToolbar menupopup{
    --set-menupopup-color: yellow;  
    --set-menupopup-background: red;
}

#scrollbutton-up,
#scrollbutton-down
{
    background-color: var(--set-menupopup-background);
}

#scrollbutton-up > .toolbarbutton-icon,
#scrollbutton-down > .toolbarbutton-icon
{
    fill: var(--set-menupopup-color);
}

#tabbrowser-arrowscrollbox::part(scrollbutton-up), 
#tabbrowser-arrowscrollbox::part(scrollbutton-down) 
{
    fill: white;
    background-color: blue;
    border: 2px solid grey;
}

Zitat von BrokenHeart

Ich habe das mal auf das obige Beispiel umgesetzt:

Und das hast du wunderbar hin bekommen, ein Dankeschön an dich. Natürlich auch an @Nutzende für die brauchbare Vorlage, was für mich aber nur "böhmische Wälder" waren.

FuchsFan: Danke und gern geschehen, aber der Dank gebührt wirklich in erster Linie @Nutzende...

Edit: So unabhängig sind die Einstellmöglichkeiten anscheinend doch nicht .

fill z.B. wirkt sich z.B. auch auf andere Scrollbuttons aus. Da muss dann doch wieder der color <-> fill Workaround her.

Vielleicht habe ich auch nur was falsch verstanden oder übersehen... (<-- siehe Code-Änderung in #32)

Zitat von BrokenHeart

(<-- siehe Code-Änderung in #32)

BrokenHeart

Mit den Lesezeichen-Ordnern alles bestens, aber für die Button im All-Tabs-Button will es einfach nicht funktionieren (Test im aktuellen Nightly).

Zitat von FuchsFan

[...] aber für die Button im All-Tabs-Button will es einfach nicht funktionieren [...]

Ich steh momentan auf dem Schlauch .

Welche(n) Button meinst du, den All-Tabs-button selber, oder ein Button im Popup des All-Tabs-Buttons (da ist ja eigentlich nur eine normale Scrollbar) und was funktioniert denn nicht? Vielleicht mal einen Screenshot machen...

Falls du den All-Tabs-Button meinst - das ist ja relativ trivial, da du dort kein Shadowroot hast:

#alltabs-button {
    background-color: yellow;
}    
#alltabs-button .toolbarbutton-icon {
  fill: red;
}

Zitat von BrokenHeart

Ich steh momentan auf dem Schlauch

Hallo BrokenHeart ..

ich habe den Code aus Beitrag Nr. 32 eben mal in der aktuellen Nightlyversion getestet.

Da funktioniert er leider nicht.

Im Lesezeichenpopup ist der HG der Pfeile rot, aber im Überlauf der Tabs sind die Pfeile ganz normal grau und nicht blau

Zitat von 2002Andreas

ich habe den Code aus Beitrag Nr. 32 eben mal in der aktuellen Nightlyversion getestet.

Da funktioniert er leider nicht.

Habe jetzt den Code aus dem Posting kopiert und in der Nightly ausprobiert:

Hier geht es, oder meintest du was anderes

Zitat von BrokenHeart

oder meintest du was anderes

Eigenartig

Ich nutze eine Testdatei für die userChrome.css und die userChromeShadow.css.

Hat bis jetzt auch immer perfekt funktioniert.

Gebe ich den Code aus Beitrag Nr. 32 mal direkt in die userChrome bzw. userChromeShadow ein...dann funktioniert es hier:

PS:

Ich muss das mal in Ruhe hier überprüfen...sorry für meine wohl falsche Aussage.

Und..ganz vergessen..herzlichen Dank für den Code aus Beitrag Nr. 32