custom panel button background color doesn't work in 5.6
-
I just updated to 5.6. I'm curious about the new features. The first thing I noticed is that the background of my DeepL web panel is no longer light blue.
Even in previous versions, the icon was not visible on a dark theme in the web panel - unlike the tab.
See these two screenshots:
So I used
custom.css
to give this button its own light blue background.#switch button.webviewbtn[title*="deepl"] img { background-color: #0791ae !important; }
Unfortunately this code doesn't work in 5.6 anymore.
How do I get it enabled again?
-
@Dancer18 Hi - when using CSS mods you need to understand that updates will break your mods sometimes, and you need to understand how to fix it.
See:
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtoolsTry:
#switch button.ToolbarButton-Button[title*="deepl"] img { background-color: #0791ae !important; }
-
@Pathduck Thank you for your quick answer!
Yes that works.
This is how it looks now:In the past I also had the background of any active button highlighted with the same color #0791ae .
This code that still is in my custom.css for it, although it is not mentioned a certain color.
#browser.theme-dark #switch .addwebpanel-wrapper > button.active, #browser.theme-dark #switch > button.active { background-color: var(--colorFgFadedMost); color: var(--colorBgLightIntense); fill: var(--colorBgLightIntense); }
How can I get the button.active background colored completely with #0791ae ?
-
@Dancer18 Like I said, learn to use the UI inspector, find the selectors and fix your code. You can't expect others to fix your CSS every time an update breaks it.
It also helps you learn CSS
-
@Pathduck Yes I'll do that. I hope it is not too complicated.