I have created a standard hover background which, using various stanzas, applies to everything except the toolbar bookmark items and buttons. The following code doesn’t have the desired effect on bookmarks. What will? The browser toolbox only shows the main window so I have improvised.

toolbarbutton.bookmark-item(hover) { background-color: #6495ed !important; }

I can’t think what to use for toolbar buttons such as UBlock Origin.

  • @MrOtherGuyM
    1•2 months ago

    In that case the code you posted should work, provided that you fix the hover syntax:

    toolbarbutton.bookmark-item:hover { background-color: #6495ed !important; }
    • tjn21OP
      1•2 months ago

      Thanks. What about the toolbar buttons?

      • @MrOtherGuyM
        1•2 months ago

        You could do this:

        toolbar .toolbarbutton-1:not([disabled]):hover > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
  background-color: #6495ed !important;
}

        But if you want to just change the background-color of all the elements where that same color gets used (so buttons, bookmark-items, tabs scrollbuttons, sidebar switcher button etc.) then it would be much easier to redefine the value for the variable they all use:

        :root{
  --toolbarbutton-hover-background: #6495ed !important;
}
        • tjn21OP
          1•2 months ago

          Thanks again. That does not have the desired result on my browser. The following code changes the hover colour of all toolbar buttons including bookmark items.

          toolbarbutton:hover { background-color: #6495ed !important; }

          • @MrOtherGuyM
            1•2 months ago

            I mean, if that works for you the go for it, but that isn’t quite the same thing. For you normal buttons in the toolbar, the hover background-color is not on the <toolbarbutton> itself, but on the icon inside the button. The area of the icon is smaller than the button, so what happens is that you will be shown both colors which should be pretty visible especially if the theme you have uses some drastically different color. In addition, that will also apply to buttons inside panel menus, which may or may not be what you wanted.

            • tjn21OP
              1•2 months ago

              Thanks again. I added the first code below to an existing :root stanza and it is effective. If I add the second code, I get the default colour as well, as you say. I hadn’t noticed that until I changed the hover colour to a lighter blue.

              I do want the colour to apply to menus inside panel menus. Bookmark menus have the set hover colour.

              --toolbarbutton-hover-background: #83b7fb !important;

              toolbarbutton:hover { background-color: #83b7fb !important; }