Visual indicator for pinned tabs (right/left)

Hadden89

When pinned tabs are on top/bottom are easy to recognize as they are faviconized (get a small size).
The same don't happen with tabbar on right/left where pinned tabs haven't got any visual indicator.

#tabs-container.right .tab-position .tab.pinned,
#tabs-container.left .tab-position .tab.pinned {
  background-image: linear-gradient(315deg, var(--colorFgFaded) 8px, transparent 8px);
}
#tabs-container.right .tab-position .tab.unread,
#tabs-container.left .tab-position .tab.unread {
  background-image: linear-gradient(-135deg, var(--colorFgFaded) 8px, transparent 8px);
}

First tab is pinned, second one is unread

luetage

I don't quite understand it. Pinned tabs show the website's favicon, what's your idea behind this?

Hadden89

@luetage said in Custom icon for pinned tabs with css?:

I don't quite understand it. Pinned tabs show the website's favicon, what's your idea behind this?

Placing a dot/pin icon on the right/left side of pinned tabs.
Where the favicon isn't. (left)
And not on audio icon (right)
And in foreground (but I used a background image XD)
But it's quite annoying to do, as it goes behind .title and was did in a horrible way (even for me xD)
So... I guess I'll go for the easy way.
Just tweaking borders/colors/fonts when tab is pinned (active or not) , but I've still to check better few things or the custom.css will go in bad trip
Probably - as I have an "heavily" modded tabbar - the best way is just tweaking fonts when pinned is on. Any other approach was ugly, considering that "my" UI is really condensed

luetage

@hadden89 damn lol, take my upvote, but please tell me upon my soul – what's the purpose?

Hadden89

This post is deleted!

Morg42

Hm.. I don't really get it, still. Pinned tabs are only as wide as the pinned site icon; normal tabs are much wider.

Even so, this happens to me some time. Maybe a proper feature (request) might be to fix the url of the pinned tab... or let it reset on reload / after fixed time?

Hadden89

This post is deleted!

wilriker

@hadden89 This is exactly what I was looking for! Great!

Only thing I changed was that I moved the indicator to the top left corner.

P.S.: For everyone not getting the reason for this: it makes only sense for vertical tabs because then there is no visual difference between pinned and unpinned tabs anymore.

Hadden89

Code slightly updated for newer snapshot so it affects only tabs on the sides.
I also made the indicators bigger, if you prefer like it was replace the four 8px with 5px