Bei mir läuft die Anpassung für die Scrollbutton der Tabbar amok.

  • Firefox-Version
    Firefox 112.0
    Betriebssystem
    Windows 10 Pro 2004 64 Bit

    Hallo zusammen,

    das * CSS funktioniert bei mir nicht richtig, nur so ** wird der linke Pfeil richtig herum angezeigt, was läuft schief?

    *

    CSS
    toolbarbutton#scrollbutton-down > image {
        list-style-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/links.png") !important;
    }
    toolbarbutton#scrollbutton-up > image {
        list-style-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/rechts.png") !important;
    }

    **

    CSS
    toolbarbutton#scrollbutton-down > image {
        list-style-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/links.png") !important;
    }
    toolbarbutton#scrollbutton-up > image {
        list-style-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/rechts.png") !important;
        transform: rotate(180deg) !important;
    }

    Auch so *** geht es nicht irgendwie werden die Pfeile immer falsch herum dargestellt, was läuft da schief?

    ***

    CSS
    toolbarbutton#scrollbutton-down > image {
        list-style-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/rechts.png") !important;
    }
    toolbarbutton#scrollbutton-up > image {
        list-style-image: url("file:///H:/Profile/Firefox/Fx57-H-Default/chrome/icons/links.png") !important;
    }

    Es grüßt,

    Ralf

    • Hilfreichste Antwort

    wird der linke Pfeil richtig herum angezeigt

    Ist hier auch so :/

    Alternativ 2x nach links einfügen.


    Alternativ 2x nach links einfügen.

    Ist wohl auch Standard so :/


    Und wird dann so geändert:

    Mit freundlichem Gruß
    Andreas
    Mein Laptop  Meine Add-ons

    2 Mal editiert, zuletzt von 2002Andreas (19. April 2023 um 20:05) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

  • so wie ich mich erinnere, hatte ich das problem auch schon lange konnte keine lösung finden. :)

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 132.0.1
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

  • Dharkness 19. April 2023 um 20:32

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.

  • Ist wohl auch Standard so :/


    Und wird dann so geändert:

    Und noch dazu ist das linke Scrollbuttonicon auch gespiegelt, allerdings vertikal, die CSS in Fx dazu sieht so aus:

    CSS
    #scrollbutton-up > .toolbarbutton-icon {
      transform: scaleY(-1);
    }

    Womit ich gerade eine Menge Spass hatte, als ich beide Pfeile umpositionieren wollte... :( ;)


    Für das rechte Pfeilicon sieht der Fx Code so aus, also horizontal gespiegelt - und bei rtl Leserichtung werden die Icons dann noch mal anders angesprochen:

    CSS
    :host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon, :host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon {
      transform: scaleX(-1);
    }

    Einmal editiert, zuletzt von Horstmann (19. April 2023 um 20:49)

  • dann würde dein eigener Pfeil dort auch auftauchen

    ;)

    Das kommt drauf an, wie du die Pfeile ansprichst.

    In meinem Beispiel sieht das so aus:

    CSS
    #tabbrowser-arrowscrollbox::part(scrollbutton-up) {
        list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
    }
    
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
        list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
    }

    Und diesen Code habe ich in die userChromeShadow.css eingetragen.

  • ;)

    Das kommt drauf an, wie du die Pfeile ansprichst.

    In meinem Beispiel sieht das so aus:

    CSS
    #tabbrowser-arrowscrollbox::part(scrollbutton-up) {
        list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
    }
    
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
        list-style-image: url("file:///C:/Users/Andi/Icons%20Firefox/links.png") !important;
    }

    Und diesen Code habe ich in die userChromeShadow.css eingetragen.

    Dazu muss dann aber erstmal shadow-root editierbar gemacht werden, wie hier schön beschrieben, oder?

    Ist elegant, hat aber vielleicht nicht jeder im Programm. ;)

    Ohne shadow-root anzugehen habe ich mal sowas probiert - nur kurz angetestet:

    Das wäre für separate rechts/links Pfeile, mit neutraler Ausrichtung, und sollte eigentlich nur die in der Tableiste ansprechen.

  • Nein, ich meine überlaufende Menüs in der Lesezeichen-Symbolleiste.

    Ach so ... 8)

    Das lässt sich genauso lösen, wie du es letztendlich auch so gelöst hattest - was und wie nicht so ganz klar ist. ;)

    Was soll denn daran geändert werden, und welche CSS und/oder Skripts sind momentan in Gebrauch in dem Bereich?

  • Es gibt sicherlich noch einen besseren Code. ;)

    userChrome.css

    userChromeShadow:

    CSS
    #tabbrowser-arrowscrollbox::part(scrollbutton-up), 
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) {  
        background-color: red !important;
        fill: white !important;
    }
    
    #tabbrowser-arrowscrollbox::part(scrollbutton-up):hover,
    #tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
        background-color: lightgreen !important;  
    }