Tab stacks theming



  • Tab stacks can be handy, but the colors of the indicators, especially in light themes, are barely apparent.

    .tab-group-indicator .tab-indicator.active {
    	background-color: #fd3563 !important;	
    }
    
    .tab-group-indicator .tab-indicator {
    	background-color: #fff !important;
    }
    
    .tab-group-indicator .tab-indicator:hover:not(.active) {
    	background-color: #000 !important;
    }
    
    .tabs-bottom .tab-group-indicator .tab-indicator.active {
    	padding-top: 3px;
    }
    

    This code colors the indicator of the active tab in a stack, as well as the indicators of the inactive tabs. When theming the inactive tabs you also have to redo the :hover.

    On bottom tabs the active indicator is much higher, which looks off if you use a strong color, with the last part of the code you can address this. Functions with tabs below address bar too, but I'm not sure if this works reliably on other platforms. You might need to adjust this if you are on Windows or Linux.


    alt text



  • @luetage

    good idea. thanks for sharing



  • added code for inactive tabs and hovering to op



  • Would be nice to have one place for all these CSS tips, like a Vivaldi CSS Cookbook.

    Makes it easier to switch to Vivaldi for daily browsing.


Log in to reply
 

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