border on active tab for better visibility

[frozencan]

for someone who uses very dark colours for my theme and has a lot of tabs opened at once, I have a hard time distinguishing between which tab I'm currently on.

It would be nice to have a implementation of a setting that adds a subtle but visible border around the currently active tab. This would provide a stronger visual cue, making it easier to identify the active tab at a glance, especially in situations with many tabs open and dark coloured themes.

[Pesala]

@frozencan Ask in the Modifications forum.

Welcome to the Community. Here are a few links for your bookmarks that you may find useful:

• Help on Feature Requests • Add Search as Web Panel
• Vivaldi Help
• Forum Markdown Help
• Using the Forum Search
• Local Forums in your language
• Modding Vivaldi
• Web Panels
• Vivaldi for Android
• Snapshot vs Stable
• Vivaldi's Business Model
• Help us grow

[barbudo2005]

@frozencan

Use this simple code:

/*TAB ACTIVE*/

.tab-position     [id*= "tab"].tab.active

{border: 2px red solid !important;}

Look this post for instructions:

https://forum.vivaldi.net/topic/80446/about-vivaldi-s-most-profound-philosophy/14

[Zalex108]

@frozencan @barbudo2005

Hi,
Welcome to Vivaldi's Forum

More options here
https://forum.vivaldi.net/topic/94466/colored-border-tab

--

Also,
Some useful links:

Forums	Community	Official Tutorials	Official Help
Forum Categories	Modding Vivaldi	Vivaldi Features	Vivaldi Help
Forum Markdown	Panels • Engines	Vivaldi Tutorials	Issues
Feature Requests ¿?	Menus • Guides • FAQ	Vivaldi How To	Bug Reports

---

---

--
Avoid Data loss
Follow the Backup | Reset links below

---

Vivaldi Backup | Reset + Extra Steps

[frozencan]

@Zalex108 @barbudo2005 thank you

[bariton]

@barbudo2005 This does not work for me in the latest version 7.0.3495.10, I tried to fix it but without success. Maybe you want to take a look at it, if time allows.

[barbudo2005]

@bariton

Look this posts:

https://forum.vivaldi.net/topic/102296/vivaldi-7-new-layout-user-s-disagreements/34

https://forum.vivaldi.net/topic/96586/colorful-tabs/24

So the code now is:

/*TAB ACTIVE*/

[id*="tab"].tab-wrapper.extended    .tab.active

{border: 2px red solid !important;}

[bariton]

@barbudo2005 Thank you, but this only works on top level tabs, not on tabs inside a tab stack.

[barbudo2005]

@bariton

[id*="tab"].tab-wrapper.extended    .tab.active.uifocusstop.insubstrip,
[id*="tab"].tab-wrapper.extended    .tab.active,
[id*="tab"].tab-wrapper.extended    .tab.pinned.active

{border: 2px red solid !important;}

[bariton]

@barbudo2005 Looks like this here, active tab ist the first, "Your Stars".

[Zalex108]

Hi,
Check this and above too

https://forum.vivaldi.net/post/740455

[barbudo2005]

@bariton

Said:

Looks like this here, active tab ist the first, "Your Stars".

I don't understand.

[bariton]

@Zalex108 Thank you, I think I need to investigate more to find a good and simple solution.

[bariton]

@barbudo2005 The stacked tab "Your Stars" has no colored border, the tab stack does (yellow 1px).
Changing color contrast in the themes editor from 2 to 10 helps, now the active tab stands out better, but there is no colored border on the active tab:

Maybe there is another setting in my config that impedes that second border.

[barbudo2005]

@bariton

Try this:

[id*="tab"].tab-wrapper   .tab.active.uifocusstop.insubstrip,
[id*="tab"].tab-wrapper.extended    .tab.active,
[id*="tab"].tab-wrapper.extended    .tab.pinned.active

{border: 2px red solid !important;}

Sorry my mistake when copying the code. I still don't understand wtf does .extended mean.

[bariton]

@barbudo2005 Still no colored border on second level on the tab stack. Lets give this issue some time.

[Zalex108]

@bariton

The provided link has that option.
Have you tested?

[bariton]

@Zalex108 Yes thank you, now the active tab in a tab stack ist better to recognize:

Full border is optional, but this way is more sleek and clear.

[Zalex108]

@bariton

You can play with the colored border too.

[bariton]

@barbudo2005 @Zalex108 Just for the fun of it:
Vivaldi is relaxed about choosing css files, the extension seems not important, I've noticed it before but ignored it.
While playing around now, different files accumulated in the css folder, that lead to unexpected effects.

Hard to explain, in my css folder is a file named "x_active_tab_border.css_barbudo", renamed to get it out of scope, plus the other solution "x_active_tab_border_zalex.css".
Vivaldi happily uses both files. The result is a mix of both files (red border for better visibility):

Just try to rename a *.css to *.css_test and I think it will be used, too.

Not sure if its worth to raise a bug report about that, as css files will only be used by a low number of users.