Transparent Icons on Panel Toolbar

[Regnas]

This is just a visual thing, but could we somehow get rid of that bright background on the buttons of the sidebar?
Things doesn't look too good when using dark themes.

With a transparent background we would have something like this:

Instead of:

In the tabs are kinda the same...
And by the way, making the sidebar a little thicker wouldn't hurt anyone... I found things a little too small there.

Thanks.

[Omen_20]

Yes this looks to be an oversite as the favicons on these are obviously transparent to prevent this issue in the tab bar. It's the only visual snag I see in Vivaldi, day in and day out.

[Guilimote]

I agree.
This is something I find quite "ugly" (sorry!) in the dark theme, and one of the 2 reasons I don't use it. (the 2nd being the fact that currently active web panel is a lot harder to see than with the light theme, but this is an other problem )

This would be (I think) a very simple fix, so I assume that there is reason behind that.
Maybe it was done to avoid visual issues if the icons are already very dark?
In this case, I propose to make the transparent background optional (either for every icons, or independently for each icon / web panel).

[RockGore]

I forgot who pointed this out, and can't find the post anymore, but you can add this to your common.css and it'll fix it.

.theme-dark #switch .webviewbtn img {
   background: transparent !important;
}

[Komposten]

@RockGore It's generally preferred to not edit common.css since you will lose your changes every update. Instead you should follow the procedures on this thread: https://forum.vivaldi.net/topic/10549/modding-vivaldi

[baris.sehri]

we definitely need this but icons shouldn't be too big I believe, there should be some empty space around them.

[Pathduck]

@baris-sehri This has probably been done to be able to see dark icons on dark themes.

In addition to the above custom CSS to make them transparent you could add a little bit of drop-shadow filter to be able to see dark ones better:

#switch > button.webviewbtn img {
    background-color: transparent !important;
    filter: drop-shadow(0 0 1px white);
}

[baris.sehri]

@Pathduck do I need to do this every time I updated the app? it's going to reset the css right?

[luetage]

@baris-sehri If you're only modifying css, you can alternatively enable “allow for css modifications” in vivaldi://experiments/ and link to an external directory with a css file. This will survive updates.

[baris.sehri]

@luetage I open experiments and I wrote CSS to the search bar only thing I see is CSSOM View Scroll Coordinates. is this correct?

CSSOM View Scroll Coordinates
Enables CSSOM View Scroll Coordinates, this affects to box scroll coordinates in scrollTop / scrollLeft / scrollTo' when ScrollOrigin isn't at the left top corner. i.e. For leftwards overflow direction box the X coordinate will start from 0 to negative value. For upwards box the Y coordinate will start from 0 to negative value. And for other directions(rightwards and downwards) the value will start from 0 to positive – Mac, Windows, Linux, Chrome OS, Android

#enable-cssom-view-scroll-coordinates

I don't think that's the one

[Pathduck]

@baris-sehri That's the Chromium Flags page, named "Experiments" for extra confusion effect

The Vivaldi page is: vivaldi://experiments/

[baris.sehri]

@Pathduck said in Transparent Icons on Panel Toolbar:

vivaldi://experiments/

ahah oh well thanks for letting me know

[baris.sehri]

@Pathduck @luetage thanks for all your help guys I made it, just wanted to say thank you code is working and I'm also using an external css file... I'm happy.

[bnodya]

It would be great to remove that white space around icons in clean Vivaldi build to have Panel nice and clear without any custom modifications.

[ALoboOficial]

@RockGore , Perfect. I used your code with the procedure suggested by @Komposten . Thanks!!!

[TopQuark]

Just to drop by and say this is what I was looking for. Here's a recap for beginners. This is for my future reference . Of course, you can change the name and location of the folder as you wish:

• Open vivaldi://experiments

• Enable "Allow for using CSS modifications"

• Open Appearance section in settings

• Choose the folder you want to use. I created a folder named "Custom CSS" under C:\Users\[your windows name]\AppData\Local\Vivaldi. This way, it can be used by all my profiles and still survive Vivaldi updates.

• Create a file inside that folder as "panel-mod.css"

• Place the following CSS script inside that file:

#switch > button.webviewbtn img {
    background-color: transparent !important;           
    filter: drop-shadow(0 0 1px white);
}

• Restart Vivaldi to see the effect

Perfect! Thanks to all!