Firefox Customs

64 readers

6 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago

MODERATORS

[email protected]

MrOtherGuy

FF119 - Would it be possible to add a separator between Firefox View button and 1st tab and another between last tab and the "+" icon to open a new tab in this code? (lemmy.world)

submitted 1 year ago* (last edited 1 year ago) by MiniBus93 to c/[email protected]

4 comments fedilink hide all child comments

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!

top 4 comments

sorted by: hot top controversial new old

[–] MrOtherGuy 2 points 1 year ago (1 children)

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( 
     ...

[–] MiniBus93 1 points 1 year ago (1 children)

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!

[–] MrOtherGuy 2 points 1 year ago (1 children)

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.

[–] MiniBus93 1 points 1 year ago

Thanks! This works as well!

Really appreciated!