Hello! The following browser extension might be useful for you: https://addons.mozilla.org/en-US/firefox/addon/custom-scrollbars/

Also, can you check if toolkit.legacyUserProfileCustomizations.stylesheets is set to true in about:config? Thanks!

elison, thank you for for the quick reply.

As you can see in the included code from my user.js there is the command: user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); So, yes, toolkit.legacyUserProfileCustomizations.stylesheets is set to true (I have verified this in the about:config page).

As for the add-on you suggest, the improvement is minimal, regarding my problems. Instead of a grey scrollbar that I can only see its slider when hovering over a scrollbar part not covered by the slider --and then it's only slightly visible-- I can now have a similar scrollbar of any color, with the same invisible slider and only slightly visible after I search for it! This is no solution for me.

Thank you for trying, though.

See also:

• widget.gtk.overlay-scrollbars.enabled
• https://searchfox.org/mozilla-release/source/modules/libpref/init/StaticPrefList.yaml#line-12941

cor-el thank you for the reply,

I am not sure what switching widget.gtk.overlay-scrollbars.enabled from false to true is supposed to do for me. What I see is that the scrollbar is now like... auto-hiding. Otherwise, I still cannot locate the slider. The auto-hiding prevents me from seeing the ugly very-wide scrollbar, when I increase the focus on a page; just that. But, when it appears (i.e., when I try to use it), it is still wide and ugly, on pages I have increased the focus.

Thank you anyway.

I am also using KDE Plasma. There is a preference for scrollbar width. My css for width stopped working with version 89. widget.non-native-theme.scrollbar.size.override

This code in userContent.css still works for colours.

  :root {
  scrollbar-color: #6495ED #D9D9D9 !important;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Hello Terry and thank you for the reply.

I am, currently, on FF version 99. Before version 98 everything in my CSS code worked fine. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Both my userChrome.css and userContent.css start with:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;   /* thumb-color track-color */

}

So, I am using your second suggestion as well, but the result does not obey my CSS and has very similar or the same colors for the scrollbar trough and slider (unless the mouse hovers over the trough but not over the slider). I am unsure why this does not work for me. If you are in versions 98/99 as well, could you check in about:config page the values of the following settings and get back to me? Thank you in advance!

widget.content.gtk-theme-override", "backwater"); widget.non-native-theme.enabled", false); // Use GTK-3.0 gtk.css: set to false toolkit.legacyUserProfileCustomizations.stylesheets widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20 widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style ui.themedScrollbar ui.themedScrollbarInactive ui.themedScrollbarThumb ui.themedScrollbarThumbHover ui.themedScrollbarThumbActive ui.themedScrollbarThumbInactive browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Hello Terry and thank you for the reply.

I am currently on FF version 99. Before version 98, everything worked fine with my CSS code. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Also, both my userChrome.css and userContent.css start with the code:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;  /* thumb-color track-color */

}

So, I am using your second suggestion as well.

If you are on version 98/99, like I am, I would be interested in the values you have (if any) for the following settings, in the about:config page:

widget.content.gtk-theme-override widget.non-native-theme.enabled toolkit.legacyUserProfileCustomizations.stylesheets user_pref("widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20px widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Thank you in advance!

Hello Terry and thank you for the reply.

I am currently on FF version 99. Before version 98, everything worked fine with my CSS code. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Also, both my userChrome.css and userContent.css start with the code:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;  /* thumb-color track-color */

}

So, I am using your second suggestion as well, but it does not work!

If you are on version 98/99, like I am, I would be interested in the values you have (if any) for the following settings, in the about:config page:

widget.content.gtk-theme-override widget.non-native-theme.enabled toolkit.legacyUserProfileCustomizations.stylesheets user_pref("widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20px widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Thank you in advance!

Hello Terry and thank you for the reply.

I am currently on FF version 99. Before version 98, everything worked fine with my CSS code. I am using widget.non-native-theme.scrollbar.size.override to get the wide scrollbar. Also, both my userChrome.css and userContent.css start with the code:

.scroller, :root, html, body, * {

 font-size: 15pt;
 scrollbar-width: 19px;
 scrollbar-color: #bad1f5 #e4e4e4;  /* thumb-color track-color */

}

So, I am using your second suggestion as well, but it does not work!

If you are on version 98/99, like I am, I would be interested in the values you have (if any) for the following settings, in the about:config page:

widget.content.gtk-theme-override widget.non-native-theme.enabled toolkit.legacyUserProfileCustomizations.stylesheets user_pref("widget.gtk.alt-theme.scrollbar_active widget.non-native-theme.scrollbar.size.override ---> I have this set to 20px widget.non-native-theme.gtk.scrollbar.round-thumb widget.non-native-theme.gtk.scrollbar.thumb-size widget.non-native-theme.gtk.scrollbar.allow-buttons layout.css.cached-scrollbar-styles.enabled layout.css.color-mix.enabled widget.non-native-theme.scrollbar.style browser.dom.window.dump.enabled extensions.ui.sitepermission.hidden fission.experiment.max-origins.qualified

Thank you in advance!

Your code isn't exactly the same since I am using :root only. I also have it only in userContent.css, at the top of the file except for a namespace line (html).

These are the values in about:config. no value, true, true, true, 20, false, 0.9, true, true, false, 0, false, true, true

Hello Terry and thank you for the values of your about:config settings. I have tried them, but there is, almost, no change --non for the scrollbar/slider colors problem I am having.

About the CSS code, other than the "!important" which you have and I added (just in case), the other differences would only be a problem if there is a corner case bug in FF CSS interpretation, which is quite unlikely. Otherwise, setting the same attribute for more than one keyword, plus a styling class and the root document, should make no difference. Nevertheless, I have tried it your wayand it has no result.

The fact that I have the same code in the userChrome.css file is irrelevant, I believe. The original place the scrollbar CSS code was working for me was the userChrome.css file and not the userContent.css. The scrollbar was an independent feature of the browser window before, whereas now it is only a feature of each webpage (which is _wrong_, in my opinion, because that is what causes the scrollbar to get wider when I increase the focus of a page, which is unquestionably the wrong behavior for the window's scrollbar. : unquestionably, because this makes the browser the _odd_ desktop window that does not have a scrollbar, but only content with scrollbars !).

In any case, thank you for trying to help!

BTW Terry,

I am now trying a fresh profile, to see what is going wrong. The first thing I tried was to only use your CSS, only in userContent.css and nothing else. The new profile does not have the problem of an invisible scrollbar slider, but does not obey the userContent.css colors: it sticks to somewhat contrasting shades of grey.

In addition, the fresh profile does not have the problem of increasing the scrollbar width width when I increase the page focus...

Hello all,

I have, finally, found what was wrong with my setup. All the scrollbar problems where caused by fx-autoconfig (https://github.com/MrOtherGuy/fx-autoconfig), which I had not deactivated --and did not make my scrollbar CSS work. Once I removed it, the scrollbar no more increases in size when I increase the focus. Further, for the scrollbar colors, I have managed to get a fairly acceptable simulation of my desktop settings, by using the following settings in user.js:

user_pref("ui.themedScrollbar", "#e4e4e4"); user_pref("ui.themedScrollbarInactive", "#e4e4e4"); user_pref("ui.themedScrollbarThumb", "#bad1f5"); user_pref("ui.themedScrollbarThumbHover", "#b1c8e9"); user_pref("ui.themedScrollbarThumbActive", "#668cc4"); user_pref("ui.themedScrollbarThumbInactive", "#bad1f5");

These did not work when I had the fx-autoconfig installed.

So, every aspect of my problems has been fixed! Thank you all for attempting to help!