Make Pinned Tabs Identifiable when using Vertical Tab Bar



  • Hi,
    I am only using the vertical tab bar, and I would like to be able to distinguish between normal and pinned tabs. Currently you can't tell them apart, just some visual thingy would be enough. Something like a red triangle in the top left corner of a tab line, for example.

    I have minimzed the vertical size of the tab headers (no tab pictures).


  • Moderator

    @qwc The tabs are visible, but you want to identify them. So I edited your topic. :)



  • @ayespy Err, correct. Thanks. :)



  • edit this is what I use for vertical tabs (it's pointless for horizontal tabs).

    .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
    0_1523669739411_e4e23989-44ce-4fc5-a38a-7c2ab0f840f8.png



  • I use this CSS mod to reduce the pinned tabs to icons and let them flow into a grid, but a few things seem to be out of place (like the new tab button) because the React code doesn't realize that the pinned tabs are compressed.

    /* Make pinned tabs only show as icons */
    .tab-position {
        position: static !important;
        display: inline !important;
    }
    .tab.pinned {
        background-color: var(--colorBg);
        display: inline-block;
    }
    .tab.pinned .tab-header {
        padding: 6px;
    }
    .tab.pinned .title, .tab.pinned .close {
        display: none;
    }
    

Log in to reply
 

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