this post was submitted on 14 Nov 2024
5 points (100.0% liked)

Firefox Customs

64 readers
2 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Rules

  1. Posts must have flair!
  2. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
  3. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
  4. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
  5. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 2 years ago
MODERATORS
[email protected]
MrOtherGuy
5
[SOLVED] Hover background of toolbar bookmark items and buttons (fedia.io)
submitted 2 months ago by [email protected] to c/[email protected]
12 comments fedilink hide all child comments
 

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.

top 12 comments
sorted by: hot top controversial new old
[–] MrOtherGuy 1 points 2 months ago (1 children)

What window you want to affect? It sounds it must be something other than items in bookmarks toolbar since you mention browser toolbox not showing it. Regardless, you can change the document that the toolbox should target using the "select iframe" button.

Also, the code you posted wouldn't work anyway for hovering because it is missing a colon for :hover pseudo-class.

[–] [email protected] 1 points 2 months ago (1 children)

This is what I see in the Browser Toolbox :

https://imgur.com/xW8u76T

[–] MrOtherGuy 1 points 2 months ago (1 children)

Unless I'm missing something, that looks pretty much as it should be. What's wrong with it?

[–] [email protected] 1 points 2 months ago (1 children)

Thanks. I tried selecting every category and nothing pointed to the bookmark items. They are all folders and are on the menu bar, as are the toolbar buttons. I did find what seems to be the set of toolbar buttons but the following code has no effect on the hover colour :

#mainPopupSet { --toolbar-field-focus-background-color: #6495ed !important; }

[–] MrOtherGuy 1 points 2 months ago (1 children)

I think you should take a screenshot that shows the thing you are trying to change background color of, because currently I have no idea what it might be.

[–] [email protected] 1 points 2 months ago (1 children)

Thanks. Below is a screenshot of toolbar buttons and bookmarks shown on the menu bar. When I hover over any item, the background colour is a light grey (probably the default).

https://imgur.com/9hQHw6u

[–] MrOtherGuy 1 points 2 months ago (1 children)

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

toolbarbutton.bookmark-item:hover { background-color: #6495ed !important; }
[–] [email protected] 1 points 2 months ago (1 children)

Thanks. What about the toolbar buttons?

[–] MrOtherGuy 1 points 2 months ago (1 children)

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;
}
[–] [email protected] 1 points 2 months ago (1 children)

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; }

[–] MrOtherGuy 1 points 2 months ago (1 children)

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.

[–] [email protected] 1 points 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; }