Tab stacks theming

luetage

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

sjudenim

@luetage

good idea. thanks for sharing

luetage

added code for inactive tabs and hovering to op

liyin

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.