Hello,

I like separators would love to have them everywhere, just kidding, kinda and I was wondering if it was possible to have one between firefox view button and the first tab (like in the shown picture altough the FF view icon is missing there) and another one between the last tab and the “+” to open a new tab.

The code I’m currently using is this one

/* Bring back tab separator lines that were removed in Proton */

.tabbrowser-tab {
  border-inline-start: 1px solid transparent !important;
  border-image: 0 1
    linear-gradient(
      transparent 25%,
      color-mix(in srgb, currentColor 40%, transparent) 20%,
      color-mix(in srgb, currentColor 40%, transparent) 80%,
      transparent 80%
    ) !important;
}

.tabbrowser-tab:hover,
#tabbrowser-tabs:not([movingtab])
  .tabbrowser-tab:hover
  + .tabbrowser-tab:not([first-visible-unpinned-tab]),
.tabbrowser-tab:first-child,
.tabbrowser-tab[selected],
.tabbrowser-tab[multiselected],
#tabbrowser-arrowscrollbox[overflowing]
  > .tabbrowser-tab[first-visible-unpinned-tab],
#tabbrowser-tabs:not([movingtab])
  .tabbrowser-tab[multiselected]
  + .tabbrowser-tab,
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab {
  border-image: none !important;
}

Which is basically this with less transparency.

Ideally it would be very nice to have a way to get the desired look without altering too much the code above, as I’m using it at the same time with another extensive css sheet and despite the latter being huge (and having it’s own separators - which I have currently disabled due to reasons) the code above never gave me headache or trouble, it just worked and was very easy to have the desired amount of transparency set.

Thanks for reading this till the end and thanks in advance to whoever will give this a shot!

  • @MrOtherGuyM
    2•1 year ago

    There should already be a line between Firefox-view button and first tab - you don’t need any CSS for that. The smallest change I can think of to add a line between last tab and tabs newtab button would be to simply apply the same rules that you add for .tabbrowser-tab also to #tabs-newtab-button. So it would be like this:

    #tabs-newtab-button,
.tabbrowser-tab {
  border-inline-start: 1px solid transparent !important;
  border-image: 0 1
    linear-gradient( 
     ...
    • @MiniBus93OP
      1•1 year ago

      There should already be a line between Firefox-view button and first tab

      Oh, my bad, that’s right! I forgot about it, I’ve removed it a long time ago, when FF view was first introduced, and at the same time I changed the FF view icon. To check how the default separator was, I started a new profile and it’s a bit on the ugly side, it’s basically a long line which is different from the usual separators, is there any way to make it look like the other tab separator?

      As for the last tab separator, it works just as fine thanks!

      • @MrOtherGuyM
        2•1 year ago

        You can do the exact same thing as before with #tabs-newtab-button, but this time add :root:not([privatebrowsingmode], [firefoxviewhidden]) toolbarbutton + #tabbrowser-tabs as the new selector.

        • @MiniBus93OP
          1•1 year ago

          Thanks! This works as well!

          Really appreciated!