Window panel visual effect optimization suggestions

[Poto]

Window panel visual effect optimization suggestions

Window panel can highlight the attention of activated tabs by fading inactive tabs

I copied the UI of vivaldi and made a rendering to let you understand my idea.

My idea is that activated tabs are displayed normally, while background tabs that are not activated are dimmed.
So that users can find the location of the current tab faster.

The dimmed background does not affect reading, and can also reduce the distraction of the user's browsing webpage when displayed on the same screen (I mean, the dual display of the window panel and the webpage) is like the screenshot below.

The window panel and the web page are displayed at the same time, but the white text of the window panel will compete with the web page for the user's visual attention.

If the inactive tabs of the window panel can be dimmed, users can focus on web browsing better.
When users want to switch tabs, they can better locate the current tab

[Pesala]

@poto The Active Tab is in Bold. Do you not notice this? Unread tabs are in italics.

[Poto]

@Pesala This is the case, but my focus is on distinguishing the current tab from other tabs by dimming.

When you have many tabs, your focus is actually difficult to focus on.
So I want to highlight the visual focus of the current tab by dimming other tabs.

Considering the convenience of reading, Vivaldi can be made to temporarily restore normal transparency when the mouse is over the faded tab.

Therefore, this issue is actually a matter of visual focus.
The user may not care whether all the tabs are displayed normally, if they can be diluted to highlight the visual focus, the experience is undoubtedly better.

I propose to conduct an A / B test and make a version according to my ideas (activated tabs are displayed normally, other tabs are appropriately lightened and lightened, but not invisible. Hovering over the background tab will restore normal display)
.
Test the user's wishes, sometimes only let the user know this is what they want

[A Former User]

@poto Something like this? (Yes, I know this is not the modding section)

#window-panel .vivaldi-tree .tree-item:not([data-selected]):not(:hover) {
    color: var(--colorFgFadedMore);
    fill: var(--colorFgFadedMore);
}
#window-panel .vivaldi-tree .tree-item:not([data-selected]) .title.active {
    color: var(--colorFg);
    fill: var(--colorFg);
}

[Poto]

[Poto]

@potmeklecbohdan I'm not a programmer, so I don't quite understand the actual meaning of the code.

How can I embed this code in Vivaldi

[A Former User]

@poto See Modding Vivaldi (this is CSS code, part Adding style)

[dude99]

@poto Alternate mod to @potmeklecbohdan
https://forum.vivaldi.net/post/265105

Sorry, can't upvote your idea because it's contradict with hibernated tabs, because hibernated tabs are also dimmed or reduced in opacity.

[ybjrepnfr]

this css used to work, but sometime over the intervening years, with all the ongoing vivaldi changes, it seems to have broken. does anyone know if it is relatively simply repaired by updating some variable/s name/s, or is the design entirely obsolete now?

[ybjrepnfr]

@ybjrepnfr nobody, then, huh? rats.

---

well golly gosh, that seems to have been quite easily fixed, even for someone quite clueless about this stuff.

i'd thought for ages that this code was no longer working, but today after some trial & error i happily found that disabling pot's initial section, then replacing it with a culled & tweaked variant of it [further below], has now breathed new life into the mod. once more, visually, in this panel the current focused tab instantly stands out, & also now once more, hovering over other tabs elsewhere in the panel nicely highlights their text, til the pointer moves on elsewhere. yay.

/* #window-panel .vivaldi-tree .tree-item:not([data-selected]):not(:hover) {
    color: var(--colorFgFadedMore);
    fill: var(--colorFgFadedMore);
} */
#window-panel .vivaldi-tree .tree-item:not([data-selected]) .title.active {
    color: var(--colorFg);
    fill: var(--colorFg);
}


#window-panel .vivaldi-tree .tree-item:not([data-selected]):not(:hover) {
    color: #5555ff;
}

[LonM]

Thank you for your request. As this post has had less than 5 votes over 4 years it will now be archived. You can make a new request if you feel it is still needed in the browser.