shadow-root Scrollleiste Tabbar

  • Firefox-Version
    Firefox 89
    Betriebssystem
    Windows 10

    Mal wieder was mit shadow, wo ich grad verzweifele, siehe Bild.


    Ursache ist eine maximale Höhe voin 32px für die Tabs, das klappt auch, werden die Scrollbuttons sichtbar, bleibt das auch, aber die Scrollbuttons sind 37px hoch. Folgendes CSS greift nicht (der untere teil)

    Da das ganze aber auch nur im kompakten Theme passieren soll, sollte es eigentlich so aussehen:

    #TabsToolbar[uidensity="compact"]

    oder so

    :root[uidensity="compact"] #TabsToolbar


    Das ursprüngliche Padding wird berechnet und hat hier in Pixel 6.5 0.5, weil da noch ein "border" mit 4px ist um das Element mit 16px


    Also 16+ 2*6.5 + 2*4 = 37, bei mir sollen es nur 16+ 2*4 + 2*4 = 32 sein.


    Entweder ist das CSS falsch oder ich scheitere mal wieder am shadow-root. Irgendwelche Ideen?

  • wo ich grad verzweifele

    Hilft dir das evtl. etwas weiter?


    CSS
    #TabsToolbar .tabbrowser-tab
        {
            max-height: 32px !important;
        }
    
    #tabbrowser-arrowscrollbox::part(scrollbutton-up), 
    #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
        margin-bottom: -9px !important;
        margin-top: -5px !important; 
    }
  • nope, das weiss ich auch ohne auszuprobieren. Das CSS schafft diese shadow-root Hürde nicht, sonst hätte ich alle veränderten Einträge schon gefunden, wenn auch ausgegraut im schlechten Fall.


    Nachtrag: eigentlich ist ::part schon richtig, wenn ich diesen Artikel lese:

    https://css-tricks.com/styling…om-with-css-shadow-parts/


    Und nein, auch margin klappt nicht.

    Hier sollte etwas stehen, aber ich befürchte, du könntest es nicht ertragen. Daher ist dein Einfallsreichtum gefragt, überrasche mich.

    Einmal editiert, zuletzt von .DeJaVu ()

  • Also das ist ... nix neues. i break togehter... Ich bin nämlich grad mit so Klimmzügen wie :root{ --var} dran, die sehe ich, nur nicht ::part eben mit diesen var(--var). schaaaade.

    Hier sollte etwas stehen, aber ich befürchte, du könntest es nicht ertragen. Daher ist dein Einfallsreichtum gefragt, überrasche mich.

  • ::part wird nach wie vor nicht in der Datei userChrome.css unterstützt.

    Aber der CSS-Code von 2002Andreas funktioniert trotzdem, wenn man ihn in ein kleines JavaScript verpflanzt... ;)

  • Wenn ich das in Violentmonkey nutzen kann, gerne, aber ich vermute, VM darf dort nicht wirken ;)

    Und userscripte kommen hier nicht in Frage, das ist ein Rattenschwanz, den ich nicht haben will, sorry.

    Hier sollte etwas stehen, aber ich befürchte, du könntest es nicht ertragen. Daher ist dein Einfallsreichtum gefragt, überrasche mich.

  • Manchmal stolpert man über Lösungen:


    Das folgende funktioniert:

    Jetzt müsste ich es noch hinbekommen, dass es auch nur im compact mode wirkt (siehe oben), denn in den anderen Dichten sieht das nicht aus.


    :thumbup:


    Und das funktioniert jetzt auch, mit Umweg über var()

    (die obige Lösung funktioniert nicht)



    Nachtrag - danke an BrokenHeart wegen toolbarbutton

    Hier sollte etwas stehen, aber ich befürchte, du könntest es nicht ertragen. Daher ist dein Einfallsreichtum gefragt, überrasche mich.

    3 Mal editiert, zuletzt von .DeJaVu ()

  • Es gibt eine kleine Änderung, weil ich gestern anderweitig was bemerkt hatte mit angepinnten Tabs (bei mir gibt es rechts und links in der Tableiste diesen freien Platz nicht)

    Auf diese lange Zeile (mit pinned) bin ich nur durch eine Suche in der browser.css gekommen, Firefox zeigt mir das in den Browser-Werkzeugen kein Stück an.


    Und wie man sehen kann, in den Scrollbuttons so ziemlich alles änderbar.

    Hier sollte etwas stehen, aber ich befürchte, du könntest es nicht ertragen. Daher ist dein Einfallsreichtum gefragt, überrasche mich.