Custom indicator for pinned tabs (right/left)

  • This is ONLY for tabs on right/left.
    Tabs on top/bottom get a smaller size - faviconized - when pinned. So this indicator, while it works, is quite useless for them.

    New solution. Actually, I recycled and flipped the .tab.unread symbol. Let me know if I forgot something xD

    .tab-position .tab.pinned {
        background-image: linear-gradient(315deg, var(--colorFgFadedMore) 5px, transparent 5px);
        background-position: bottom right;
        /*-webkit-mask-image: none;*/ /*use if tab border hide the indicator*/

    2 pinned + 1 active

    Old solutions

    Legacy solution. Border. XP style :P

    /*border around pinned*/
    .tab-position .tab.pinned {border: 1px dotted !important;}

    Use only if you have to change some tab margins

    .tab-position .tab.pinned .favicon {margin-top: -2px; margin-left: -3px;}
    .tab-position .favicon {margin-top: -1px; margin-left: -2px;}
    .tab-position .tab .favicon {margin-top: 2px; margin-left: -2px;}

    //EDIT: Dropped custom icon approach.
    Too hard, awkard and potentially not theme safe.

    Basically the idea behind the feature request
    bad example (need .title .tab[something] .theme ecc)

    I would try to put a dot when tab is marked as pinned but:
    A simple dot is best with the css path way (which is theme safe)
    I need #tabs-container ? :)
    Can I easily position it then on center right/left? :P
    Changing font/border is easier but I don't like the idea too much :P
    Avoiding to hook additional images is also nice XD

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

  • @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 :P
    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 :P

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

  • @luetage

    I keep one/two/three pinned and I forget how many are. And when I want to change an unpinned tab I use often the pinned one which shouldn't change and "lose" time XD
    If they are different it won't happen - so I'll guess I do "two rows .title for unpinned" (all tabs do that in css) / "one row .title for pinned" (which is almost the "default state").
    Sounds too much crazy, it isn't? =)
    I've seen a never ending sea of css overlays so.... I quite changed my mind about doing that ahaha

  • 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?

  • edit: moved things on first post

  • @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.

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.