shadow-root Scrollleiste Tabbar

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)

#TabsToolbar .tabbrowser-tab
    {
        max-height: 32px !important;
    }

#TabsToolbar toolbarbutton#scrollbutton-up,
#TabsToolbar toolbarbutton#scrollbutton-down,
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down)
    {
        padding: 4px 1px !important;
        max-height: 32px !important;
    }

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?

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-in-the…s-shadow-parts/

Und nein, auch margin klappt nicht.

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.

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.

Manchmal stolpert man über Lösungen:

Beitrag

RE: Tableiste unten per CSS-Code, oder per Skript.

[…]

Teste bitte:

(Quelltext, 3 Zeilen)

Edit:

Code geändert, siehe Beitrag Nr. 253

2002Andreas

12. Juni 2021 um 17:15

Das folgende funktioniert:

#TabsToolbar .tabbrowser-tab
{
    max-height: 32px !important;
}

toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down
{
    padding: 4px 1px !important;
    max-height: 32px !important;
}

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.

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

(die obige Lösung funktioniert nicht)

:root[uidensity="compact"] {
    --scroll-padding-y: 4px !important;
    --scroll-padding-x: 1px !important;
    --scroll-max-height: 32px !important;
}

#TabsToolbar .tabbrowser-tab
{
    max-height: var(--scroll-max-height) !important;
}

toolbarbutton
{
    padding: var(--scroll-padding-y) var(--scroll-padding-x) !important;
    max-height: var(--scroll-max-height) !important;
}

Nachtrag - danke an BrokenHeart wegen toolbarbutton

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)

/* tableiste max height + scroller */

:root[uidensity="compact"] {
    --scroll-padding-y: 4px !important;
    --scroll-padding-x: 4px !important;
    --scroll-max-height: 32px !important;
}

#TabsToolbar .tabbrowser-tab
{
    max-height: var(--scroll-max-height) !important;
}

toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down
{
    padding: var(--scroll-padding-y) var(--scroll-padding-x) !important;
    max-height: var(--scroll-max-height) !important;
    border: none !important;
    border-radius: 0 !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab]
{
  /* Add a gap between the last pinned tab and the first visible tab */
  margin-inline-start: 0 !important; /* .tabbrowser-tab sets margin: 0 !important; */
}

#tabbrowser-arrowscrollbox > toolbarbutton#scrollbutton-up:hover,
#tabbrowser-arrowscrollbox > toolbarbutton#scrollbutton-do:hover
{
    background: #888 !important;
}

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.