tabcenter-redux
tabcenter-redux copied to clipboard
Default "Personal Container Tab" looks identical to default tab when selected.
When selected it is not possible to tell the difference between having a normal tab or the default personal container tab selected. This is because the color of the marker on the left part of the selected tab is the same blue color when selected as a normal tab and as a personal container tab by default. This is misleading to new users.
Suggested possible resolutions: -Make the default tab color bar a different color that is not the same as the default container tabs.
-Remove the color bar from a normal tab when it is selected and only display them for container tabs.
-Create a new visual indicator for container tabs such as possibly having the left color bar become a border that "contains" the tab to help users visually recognize that the tab is a container tab.
I agree; not only does the identical color make it confusing, it does not adapt to the current theme, making it hard to see against the background in some cases.
-Make the default tab color bar a different color that is not the same as the default container tabs. -Remove the color bar from a normal tab when it is selected and only display them for container tabs.
It could be customized (for now) on the user's side.
.tab:not(.hasContext) {
--identity-tab-color: darkturquoise; /* use any color, or use transparent for no color */
}
Create a new visual indicator for container tabs such as possibly having the left color bar become a border that "contains" the tab
Yeah, I did notice TST puts the container indicator on the right side, leaving the current tab indicator on the left. I personally like this approach the most. Something like:
.tab.hasContext {
border-right: 6px solid var(--identity-tab-color);
}
.tab.active .tab-context {
--identity-tab-color: var(--default-tab-line-color);
}
.tab:not(.active) .tab-context {
--identity-tab-color: transparent;
}
Result:
Any opinions or brainstorming ideas are welcome!