scrollbutton-up und scrollbutton-down in Menupopups anpassen?!

Dharkness

Das * funktioniert für die Scrollbutton in der Tabbar, aber das nicht für die Scrollbutton in Menupopups was ist falsch?

*

CSS

#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
  appearance: none !important;
  min-height: 22px;
  max-height: 22px;
  border-radius: 0 !important;
  border: 0 !important;
  background-clip: unset !important;
  background-color: #003800 !important;
  padding: 0 4px !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

Alles anzeigen

**

CSS

.menupopup-arrowscrollbox::part(scrollbutton-up),
.menupopup-arrowscrollbox::part(scrollbutton-down) {
  appearance: none !important;
  min-height: 22px !important;
  max-height: 22px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-clip: unset !important;
  background-color: #003800 !important;
  padding: 0 4px !important;
  margin-top: 1px !important;
  margin-right: 2px !important;
  margin-bottom: 0 !important;
  margin-left: 2px !important;
}

Alles anzeigen

P.S.:

Beides steht natürlich in der userChromeShadow.css und der Eintrag für die Menupopups funktioniert weder über noch unter dem Eintrag für die Tabbar.

Gabbo

Dieser Beitrag und Folgende haben mir geholfen:

Beitrag

RE: Tableiste Änderungen

Ein anderer Lösungsansatz wäre vielleicht:

Shadowroot ist von Außen über Variablen erreichbar.

Die Variablen kann man auf der anzusprechenden Ebene definieren.

Deshalb können die Variablen auch auf anderen Ebenen nicht geparsed oder interpretiert werden.

Oh mein Gott, wie kompliziert; hier ein Beispiel:

(Quelltext, 16 Zeilen)

Nutzende

7. Dezember 2021 um 19:34

2002Andreas

Zitat von Dharkness

Beides steht

Hallo Dharkness ..

meinst du diese beiden Pfeile?

Wenn ja, das kommt in die userChrome.css:

CSS

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

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

#scrollbutton-up:hover > .toolbarbutton-icon,
#scrollbutton-down:hover > .toolbarbutton-icon {
    fill: red;
}

Alles anzeigen

Wichtig dabei, es darf kein !important darin sein, damit die Pfeile in der Tableiste extra angesprochen werden können.

BrokenHeart

Dharkness

Probier bitte auch diese Alternative aus, weil sich damit die Scrollbuttons von Tableiste und Menü wirklich getrennt ansprechen lassen, ohne 'workaround':

Beitrag

RE: Tableiste Änderungen

[…]

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'):

(Quelltext, 18 Zeilen)

(Quelltext, 8 Zeilen)

BrokenHeart

7. Dezember 2021 um 23:19

Die Idee dazu stammt von "Nutzende!", welche hier aber keinen User-Account mehr hat...

Edit: sehe gerade @Gabbo hatte schon einen Link dazu gepostet. Na ja, doppelt ist ja auch nicht schlimm...

2002Andreas

Zitat von BrokenHeart

wirklich getrennt ansprechen lassen, ohne 'workaround':

Sieht hier mit meinem Code und dem in der userChromeShadow.css so aus:

BrokenHeart

Zitat von 2002Andreas

Sieht hier mit meinem Code und dem in der userChromeShadow.css so aus:

Ja, ich weiß, dass dieser Ansatz auch funktioniert :

Beitrag

RE: Tableiste Änderungen

Getrennt ansprechen lassen sich die 'Scrollbuttons' schon:

(Quelltext, 7 Zeilen)

(Quelltext, 8 Zeilen)

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 …

BrokenHeart

7. Dezember 2021 um 08:57

Die vorgeschlagene alternative Lösung ist aber in meinen Augen die sauberere Lösung, weil nichts mehr berücksichtigt werden muss ("important!"). Aber soll Dharkness selber entscheiden, was er nutzen möchte...

Dharkness

Hallo an alle Antwortenden, @Gabbo, 2002Andreas und BrokenHeart, letztendlich habe ich eine Mischung aus allen Vorschlägen erarbeitet, die ein für mich passendes Ergebnis hervorgebracht hat, also Dankeschön an Euch.

2002Andreas

Zitat von Dharkness

für mich passendes Ergebnis hervorgebracht hat

Nur das ist wichtig

Freut mich wenn du zufrieden bist.

BrokenHeart

Zitat von Dharkness

passendes Ergebnis

"Was nicht passt, wird passend gemacht".

Dharkness

Zitat von 2002Andreas

Freut mich wenn du zufrieden bist.

Bin ich

Zitat von BrokenHeart

"Was nicht passt, wird passend gemacht".

In der Tat.