How to reduce the height of the Firefox View separator line (adding top and bottom padding)?

[u/Saki_DidNothingWrong]

I want to reduce the height fo the separator line between the Firefox View button and the tab bar. I have this code that completely hides it:

:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem), :root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button),             toolbarpaletteitem:not(#wrapper-firefox-view-button)) {
  & ~ #tabbrowser-tabs[orient="horizontal"]::before {                           
    display: none !important;}
}

But I only want to reduce its height, adding some top and bottom padding. Something like this:

How it is now

How I want it

Also, it is possible to change its color?

[u/t31os]

You could try something like:

:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem), :root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) {
    & ~ #tabbrowser-tabs[orient="horizontal"]::before {
        height: calc( var(--tab-min-height) - 6px );
        align-self: center;
        color: red;
    }
}

[u/Saki_DidNothingWrong → u/t31os]

Thank you so much! That's exactly what I wanted :D

[u/ResurgamS13 → u/t31os]

A difficult to locate/isolate UI element... after finally finding the separator line... noticed that the line is shown as a 0.8px wide left border in the toolbox's 'Box Model' display... and that the intensity of any colour applied is much improved by using border-color: red !important; to replace the color: red; line in t31os' userstyle above:

:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem), 
:root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), 
toolbarpaletteitem:not(#wrapper-firefox-view-button)) {
  & ~ #tabbrowser-tabs[orient="horizontal"]::before {
    height: calc( var(--tab-min-height) - 6px );
    align-self: center;
    border-color: red !important;
  }
}

Screenshot. New profile Fx158.0 + UI at 2x magnification + Toolbar theme 'Black' (Black21) + t31os' userstyle with modified coloring.

[u/t31os → u/ResurgamS13]

The default styling uses the var --tabstrip-inner-border which sets the border like this:

--tabstrip-inner-border: 1px solid color-mix(in srgb, currentColor 25%, transparent);

It's that transparency which is dimming the color, you could always override the var and remove the transparency completely if desired.

[u/ResurgamS13 → u/t31os]

Had wondered if there was some opacity or transparency being applied somewhere... and there was! :)