[Fx71 - Win10Pro-64bit] Wie Scrollbutton in der Tableiste einfärben?

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Hallo Leute,


    sagt mal wie kann man die Scrollbutton in der Tableiste auf z.B. Dunkelgrauen Hintergrund färben wobei das Dreieck-Image Weiß ist und beim hovern dann Hellgrau mit schwarzem Dreieck-Image ist?

    Gruß,

    Dharkness

  • Dharkness

    Hat den Titel des Themas von „[Fx71 - WinPro10-64bit] Wie Scrollbutton in der Tableiste einfärben?“ zu „[Fx71 - Win10Pro-64bit] Wie Scrollbutton in der Tableiste einfärben?“ geändert.
  • Ich denke, dass wird schwierig werden, da wir hier das Problem mit den gekapselten Shadow-Roots haben. D.h. Die ScrollButtons sind als quasi abgeschlossenes Custom-Element definiert. In diesem Fall ist die Shadow-Root zwar offen und besitzt auch ein part Atribute, kann aber über die userChrome.css nicht angesprochen werden . In der Entwicklungsumgebung funktioniert das Ändern (z.B der Farbe) ohne Probleme. Ob es da irgendwelche Tricks gibt oder ob man da was über JS machen kann, weiß ich nicht.


     

  • Bei mir scheint es aber mit:


    CSS
    .scrollbutton-up, .scrollbutton-down {
    color: white !important;
    background-color: darkgray !important;
    }

    zu funktionieren.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • Bei mir scheint es aber mit:

    [...]

    zu funktionieren.

    Ja, das stimmt. Wenn man die Klassen '.scrollbutton-up' ,'.scrollbutton-down' global anspricht, dann geht es. In diesem Fall wohl auch ohne Seiteneffekte (konnte zumindest keine finden). Ich denke, dass Shadow-DOM wurde aber gerade deswegen entwickelt, um gleiche IDs und Klassennamen zu kapseln, damit sie nicht plötzlich etwas verändern, was man nicht verändern will. Wenn irgendwo anders die gleichen Bezeichner verwendet werden für Scrollbuttons, dann wären die jetzt auch weiß/dunkelgrau.


    Aber wie gesagt, in diesem Fall funktioniert es wohl sehr gut und daher dürfte sein Problem mehr oder weniger gelöst sein.:thumbup:

  • Das stimmt schon, aber Klassen sind nun mal dafür da, an mehreren Stellen im Code verwendet zu werden. Mozilla hätte ja auch verschiedene IDs verwenden können, die sind auf jeden Fall eindeutig. Andererseits: Wer CSS-Anpassungen vornimmt, muss wissen, worauf er sich einlässt. Da ist ständig alles im Fluss. Es kann sein, dass nach ein paar Nightly-Updates das kommt, was gebraucht wird.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • Ich frage mich bloß, warum ich dann überhaupt diese starke Kapselung (sprich Shadow-DOM) seitens Mozilla anwende, wenn nicht deswegen, weil ich bei immer komplexer werdenden Projekten auf Nummer sicher gehen will und eben den Gültigkeitsbereich meiner Bezeichner künstlich einschränke. Das ist ja im Prinzip das gleiche wie bei namespace-Blöcken. Dass die IDs wirklich überall auf jeden Fall eindeutig sind, muss nicht zwingend sein. Da ich ja davon ausgehe, dass sie bei den FF-Entwicklern über part() angesprochen werden, was ja leider in der userChrome.css so nicht funktioniert.

  • Eine Sache verstehe ich überhaupt nicht, wenn ich den Code von milupo in die Entwicklungsumgebung einfüge, dann funktioniert er nicht, in der userChrome.css schon.

    Außerdem scheint es sich doch bei den Pfeilen um svg-Grafiken zu handeln und die könenn doch nur über 'fill' umgefärbt werden, und nicht über 'color:' :/

  • So wie ich das sehe, treffen wohl die SVG-Dateien hier nicht zu, sondern GIF-Dateiein, die in der Datei scrollbar.css festgelegt sind:


    chrome://global/skin/scrollbox.css


    Die SVG-Datei ist den Selektoren .tabbrowser-arrowscrollbox::part(scrollbutton-up) und .tabbrowser-arrowscrollbox::part(scrollbutton-down) zugewiesen. Und da hast du dann auch recht.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • Bei mir scheint es aber mit:


    CSS
    .scrollbutton-up, .scrollbutton-down {
    color: white !important;
    background-color: darkgray !important;
    }

    zu funktionieren.

    Danke,


    aber so richtig scheint es nicht zu funktionieren, ich habe für color statt white mal "FireBrick" verwendet und zur Vergewisserung auch die Tabbar mit der Farbe koloriert, die Tabbar ist tatsächlich "FireBrick", aber die Dreieck-Images bleiben Weiß. "darkgray" wird in der Tat gesetzt, aber ":hover" in einem zusätzlichen Eintrag wird anscheinend nicht übergeben, kannst Du, könnt Ihr das bestätigen?


    CSS
    .scrollbutton-up,
    .scrollbutton-down {
        color: black !important;
        background-color: LightSkyBlue !important;
    }


    Wobei hier auch wieder das black ignoriert wird, allerdings auch "LightSkyBlue".

    Gruß,

    Dharkness

  • Hi und hm,


    nun funktioniert es doch, meine endgültige und z.Z. funktionierende Version sieht wie folgt aus.



    Vielen Dank an alle beteiligte. :)

    Gruß,

    Dharkness

  • So wie ich das sehe, treffen wohl die SVG-Dateien hier nicht zu, sondern GIF-Dateiein, die in der Datei scrollbar.css festgelegt sind:


    chrome://global/skin/scrollbox.css


    Die SVG-Datei ist den Selektoren .tabbrowser-arrowscrollbox::part(scrollbutton-up) und .tabbrowser-arrowscrollbox::part(scrollbutton-down) zugewiesen. Und da hast du dann auch recht.

    Ich glaube nicht, dass die Bilddateien aus chrome://global/skin/scrollbox.css kommen. Schau dir da mal die gifs an, die sehen ganz anders aus und sind winzig ( ich glaub, die sind eher für scrollbare Menü-Popups gedacht). Auch bei scrollbutton-down / scrollbutton-up werden wohl die svg-Dateien genommen. Sonst würden die Pfeile beim Vergrößern nicht so aussehen:



    Ich versteh die ganze Sache ehrlich gesagt überhaupt nicht mehr. Da die Shadow-DOM Geschichte für die weitere Zukunft der userChrome-Anpassungen wichtig ist, wäre es schön, die Thematik noch einmal prinzipiell und technisch zu diskutieren.


    Vielleicht besser in einem eigenen Thread... :)