[Solved] Change Scrollbars Background Color When Dragged

[ThunderStruck]

In Thunderbird 60+, when I click and drag the scrollbar in either the folderTree or threadTree area, the scrollbar color doesn't turn dark gray like the natural OS handling of windows with scrollbars. What syntax do I add in "userChrome.css" to change the color of the scrollbar when it's in the clicked and being dragged state?

Here's the defaults, but it doesn't address the clicked and draggable state:
--scrollbar-thumb-color: <color here>;
--scrollbar-thumb-hover-color: <color here>;

[morat]

Are you saying the scrollbar changes to the wrong color when you click the scrollbar? When I click the scrollbar the color doesn't change at all in Firefox or Thunderbird, like it does in Chrome and Internet Explorer.

I think the scrollbar stuff uses AGENT_SHEET styles. The userChrome.css file only supports USER_SHEET styles.

More info: http://forums.mozillazine.org/viewtopic ... &t=3041173

[ThunderStruck]

My default scrollbar is a light gray (however this color can be changed in the userChrome.css). When I hover over, it turns dark gray (this color can also be changed in userChrome). When I click it and drag it goes back to light gray (i can't figure out how to target that particular state to make it dark gray—only when I click and drag the scrollbar). I wish to replicate how the natural OS works. Is there a syntax I need to use to target the click and drag state?

Everywhere else in Thunderbird, the application uses the OS natural iframe scrollbars, complete with dark gray when clicked and dragged. It's only in the folderTree and threadTree areas where Thunderbird styles the scrollbars. I'm trying to override that and get them changed to be consistent with how the OS naturally works, so it's a seamless UI overall.

[morat]

Try this:

Code: Select all

scrollbar, scrollbar thumb { -moz-appearance: none !important; }
scrollbar { background-color: pink !important; }
scrollbar thumb { background-color: orange !important; }
scrollbar thumb:hover { background-color: red !important; }
scrollbar thumb:active { background-color: fuchsia !important; }

The ":hover" entry must come before the ":active" entry.

[tanstaafl]

Another possible solution might be to use the CustomizeMyBird add-on at https://addons.thunderbird.net/en-US/th ... izemybird/ . That lets you specify a color for the thumb on the scrollbar and a color for the scrollbar background. In my case the thumb is a light blue color while the scrollbar is a light grey. I also configured it to increase the size of the "thumb" to make it easier to click on in very large folders. There are also settings for the hover color, to change the roundness of the thumb etc.

[ThunderStruck]

Yes! This got me to the desired solution. Many thanks.

Try this:

Code: Select all

scrollbar, scrollbar thumb { -moz-appearance: none !important; }
scrollbar { background-color: pink !important; }
scrollbar thumb { background-color: orange !important; }
scrollbar thumb:hover { background-color: red !important; }
scrollbar thumb:active { background-color: fuchsia !important; }

The ":hover" entry must come before the ":active" entry.

[ThunderStruck]

I appreciate the response, however, I'm trying to make my desired modifications (when possible) through CSS styling. With add-ons, they can break when the app changes (updates) and/or if the developer(s) stop supporting them. The best forward-thinking approach for me is to tackle the modifications head-on without relying on an add-on. That said, I would consider an add-on if a desired modification simply wasn't possible through CSS. For others reading this thread, perhaps the "CustomizeMyBird" add-on is worth checking out. Thanks for the suggestion

Another possible solution might be to use the CustomizeMyBird add-on

[JYLD]

I appreciate the response, however, I'm trying to make my desired modifications (when possible) through CSS styling. With add-ons, they can break when the app changes (updates) and/or if the developer(s) stop supporting them. The best forward-thinking approach for me is to tackle the modifications head-on without relying on an add-on. That said, I would consider an add-on if a desired modification simply wasn't possible through CSS. For others reading this thread, perhaps the "CustomizeMyBird" add-on is worth checking out. Thanks for the suggestion

Another possible solution might be to use the CustomizeMyBird add-on

CustomizeMyBird makes most of its changes through CSS. It doesn't have the setting for changing the thumb color when the thumb is active however. That would have to be done manually either way. Personally, I really like CustomizeMyBird and its ability for one to add in their own CSS. However, your point about trying to stick to straight CSS and no add-ons is certainly a reasonable choice.