Change extension icon background using css-CodePudding

Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css

     .toolbarbutton-icon
     {
        border-radius: 5px !important;
        box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
        background-color: var(--uc-regular-colour) !important;
        width: 26px !important;
        height: 26px !important;
        padding: 5px !important;
     }

This block of code changes the size and color of all toolbar buttons including extension icons

Then I used this block of code to change its color when hover over them

     *:hover > .toolbarbutton-icon{
        background-color: green !important;
     }

Which changes color of buttons when hover but the extension buttons stays the same.

How can I change it without having to define each extension name or property

Below are some screenshots to demonstrate the issue

As you can see except extension button all buttons change color

*:hover .toolbarbutton-icon {
    background-color: green !important;
}

Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color

CodePudding user response：

It will be a problem when you use >.

The > notation applies only to the immediate children of that element.

Try use:

*:hover .toolbarbutton-icon {
    background-color: green !important;
}

Hope this helps.

CodePudding user response：

.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}

Apparently after doing some research. Finally found a way to fix it. The block of codes only works with extensions installed on firefox