browser scroll bar thumb slider color

[Pallid Planetoid]

Is there CSS code that can change the browser scroll bar thumb slider color (shade)?

If so, anyone have any idea what the CSS code would be?

[beetle]

These are my two favourite stylesheets for scrollbars, especially the first one, which renders all scrollbars in Pale Moon
invisible until hovered over, and then, you only see the thumb. NICE! Thanks freecyber. It was made for Firefox but works
in Pale Moon too.
The second one might be one of freecyber's, but no credits in CSS.

https://userstyles.org/styles/96257/aut ... irefox.css by freecyber
https://userstyles.org/styles/12903/aut ... d-over.css

Yesterday I tried going to userstyles.org, I hadn't been there in a long time, but all the links I tried were blank pages. I don't know why... and I don't care. The site went to shit along with the addon "stylish" when ownership change about ten years ago. the above links have .css on the end, so you go directly to the CSS and will be able to copy and paste the CSS into a new stylesheet. No dangers.

There used to be a ton of styles for scrollbars on userstyles.org. Maybe the site is accessible with another browser. IDK.

[Pallid Planetoid]

Many thanks! - the first scrollbar style-sheet worked like a charm - really NICE! (the way it works ).

I've always liked my "Black Moon 0.1.5" minimalistic theme (very unique concept) - the only problem was that the black scroll-bar was difficult to see, especially pages that are predominantly white. Now I get some scroll-bar thumb contrast that solves that one issue with the theme. yea!

To give you an idea of what the theme is like:

Note: I'm on the third tab (active tab)

The look on a page that's not so black:

Note: I'm on the second tab (active tab)

[Blacklab]

There used to be a ton of styles for scrollbars on userstyles.org. Maybe the site is accessible with another browser. IDK.

Rarely used userstyles.org... but last year found previous link now only produces a '502 Bad Gateway'... website either defunct or inaccessible?

Looking around found this UserStyles.org Archive at: https://uso.kkx.one/... which seems to be both an open-source and a privacy-friendly userstyle repository designed to work with the current Firefox extension 'Stylus'... which was the replacement for the original 'Stylish' extension after that went rogue several years ago. As ever, take care when downloading anything! Caveat emptor.

The Pale Moon extension 'Stylem' by Lootyhoof is a fork of 'Stylus'.

Anyone with more info, details Re: demise of 'userstyles.org'... or alternative userstyle repos... please advise.

[beetle]

Thanks for the link to UserStyles.org Archive, Blacklab. I got the author's description of the first stylesheet I posted here from there, and the author's name of the second.

Description:
"transparent floating auto-hiding scrollbars with no buttons (main scrollbar will only appear when mouse is over it,
others will appear when mouse is over area being scrolled) only affects web pages, not the user interface"

The second stylesheet was by "fools gold".

I said ownership of UserStyles.org changed ten years ago, according to the UserStyles.org Archive it was eight years ago.
Anyway, it's been a long time.

Unfortunately, it looks like UserStyles.org Archive is designed to only work properly with "Stylus" installed. Styles cannot be installed using "Stylem" in Pale Moon, but the CSS can be copied and pasted into "Stylem" via the "Install with Stylus" button or the "View JSON" button of a style. Clicking the "Install with Stylus" button loads a copy of the CSS in a new tab.

"Stylem" is a fork of "Stylish". Going by the big banner on UserStyles.org Archive, it thinks "Stylem" is "Stylish".

[Blacklab]

Yes... my bad. Too many extension names beginning with 'Stylxxx'! ... the line in my post above should read:

The Pale Moon extension 'Stylem' by Lootyhoof is a fork of 'Stylus' 'Stylish'.

Lootyhoof's 'Stylem' extension for Pale Moon is indeed a fork if the original pre-rogue 'Stylish'... as Lootyhoof states in the extension's 'About this add-on' notes: "Stylem, forked from the last fully open source release of Stylish for Firefox (2.0.7)".

Yes... Re: your "UserStyles.org Archive is designed to only work properly with "Stylus" installed"... in current Firefox (and rebuilds/clones/forks) this works via a neat drop-down panel interface from the Stylus toolbar button that allows 'webpage relevant' userstyles to be 'live' trialled and/or userstyles with variable settings to be adjusted live.

BTW - Anyone trying UserStyles.org Archive to search for userstyles be aware that the search box is very spelling and syntax dependent... thus, different results will be obtained from apparently similar search keyword queries: e.g. 'scrollbars' versus 'scroll bars'.

[tellu-white]

The CSS code that modifies the scroll bar layout in Pale Moon can be executed without installing any add-on, with the solution described here:

https://gist.github.com/scmanjarrez/7ed5f8098dd2f2c746dd2078ed0adeac#file-userchrome-css-LC53

Additionally, this solution also restores the functionality of the "userChrome.js" file.

***

Implementation details

userChrome.css file:

Code: Select all

/* First line of userChrome.css must be this: */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

hbox#fullscr-toggler {
    -moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhLS0gQ29weXJpZ2h0IChjKSAyMDE3IEhhZ2dhaSBOdWNoaQpBdmFpbGFibGUgZm9yIHVzZSB1bmRlciB0aGUgTUlUIExpY2Vuc2U6Cmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUCiAtLT4KCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPgo8YmluZGluZ3MgeG1sbnM9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcveGJsIj4KICAgIDxiaW5kaW5nIGlkPSJqcyI+CiAgICAgICAgPGltcGxlbWVudGF0aW9uPgogICAgICAgICAgICA8Y29uc3RydWN0b3I+PCFbQ0RBVEFbCiAgICAgICAgICAgICAgICBpZih3aW5kb3cudXNlckNocm9tZUpzTW9kKSByZXR1cm47CiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsKCiAgICAgICAgICAgICAgICB2YXIgY2hyb21lRmlsZXMgPSBGaWxlVXRpbHMuZ2V0RGlyKCJVQ2hybSIsIFtdKS5kaXJlY3RvcnlFbnRyaWVzOwogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107CiAgICAgICAgICAgICAgICB2YXIgc3NzID0gQ2NbJ0Btb3ppbGxhLm9yZy9jb250ZW50L3N0eWxlLXNoZWV0LXNlcnZpY2U7MSddLmdldFNlcnZpY2UoQ2kubnNJU3R5bGVTaGVldFNlcnZpY2UpOwoKICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7CiAgICAgICAgICAgICAgICAgICAgdmFyIGZpbGUgPSBjaHJvbWVGaWxlcy5nZXROZXh0KCkuUXVlcnlJbnRlcmZhY2UoQ2kubnNJRmlsZSk7CiAgICAgICAgICAgICAgICAgICAgdmFyIGZpbGVVUkkgPSBTZXJ2aWNlcy5pby5uZXdGaWxlVVJJKGZpbGUpOwoKICAgICAgICAgICAgICAgICAgICBpZihmaWxlLmlzRmlsZSgpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAibm9uZSI7CiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJjaHJvbWUvanMiOwogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJjaHJvbWUveHVsIjsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAiYWdlbnRzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKCItLS0tLS0tLS0tXCAiICsgZmlsZS5sZWFmTmFtZSArICIgKCIgKyB0eXBlICsgIikiKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRyeSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgU2VydmljZXMuc2NyaXB0bG9hZGVyLmxvYWRTdWJTY3JpcHRXaXRoT3B0aW9ucyhmaWxlVVJJLnNwZWMsIHt0YXJnZXQ6IHdpbmRvdywgaWdub3JlQ2FjaGU6IHRydWV9KTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgeHVsRmlsZXMucHVzaChmaWxlVVJJLnNwZWMpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5BR0VOVF9TSEVFVCkpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzc3MubG9hZEFuZFJlZ2lzdGVyU2hlZXQoZmlsZVVSSSwgc3NzLkFHRU5UX1NIRUVUKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2Vyc2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5VU0VSX1NIRUVUKSkKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChlKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIi0tLS0tLS0tLS0vICIgKyBmaWxlLmxlYWZOYW1lKTsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KCiAgICAgICAgICAgICAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uIGxvYWRYVUwoKSB7CiAgICAgICAgICAgICAgICAgICAgaWYoeHVsRmlsZXMubGVuZ3RoID4gMCkgewogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsKICAgICAgICAgICAgICAgICAgICAgICAgc2V0VGltZW91dChsb2FkWFVMLCA1KTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICB9LCAwKTsKICAgICAgICAgICAgXV0+PC9jb25zdHJ1Y3Rvcj4KICAgICAgICA8L2ltcGxlbWVudGF0aW9uPgogICAgPC9iaW5kaW5nPgo8L2JpbmRpbmdzPg==);
}

The following code:

Code: Select all

data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhLS0gQ29weXJpZ2h0IChjKSAyMDE3IEhhZ2dhaSBOdWNoaQpBdmFpbGFibGUgZm9yIHVzZSB1bmRlciB0aGUgTUlUIExpY2Vuc2U6Cmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUCiAtLT4KCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPgo8YmluZGluZ3MgeG1sbnM9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcveGJsIj4KICAgIDxiaW5kaW5nIGlkPSJqcyI+CiAgICAgICAgPGltcGxlbWVudGF0aW9uPgogICAgICAgICAgICA8Y29uc3RydWN0b3I+PCFbQ0RBVEFbCiAgICAgICAgICAgICAgICBpZih3aW5kb3cudXNlckNocm9tZUpzTW9kKSByZXR1cm47CiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsKCiAgICAgICAgICAgICAgICB2YXIgY2hyb21lRmlsZXMgPSBGaWxlVXRpbHMuZ2V0RGlyKCJVQ2hybSIsIFtdKS5kaXJlY3RvcnlFbnRyaWVzOwogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107CiAgICAgICAgICAgICAgICB2YXIgc3NzID0gQ2NbJ0Btb3ppbGxhLm9yZy9jb250ZW50L3N0eWxlLXNoZWV0LXNlcnZpY2U7MSddLmdldFNlcnZpY2UoQ2kubnNJU3R5bGVTaGVldFNlcnZpY2UpOwoKICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7CiAgICAgICAgICAgICAgICAgICAgdmFyIGZpbGUgPSBjaHJvbWVGaWxlcy5nZXROZXh0KCkuUXVlcnlJbnRlcmZhY2UoQ2kubnNJRmlsZSk7CiAgICAgICAgICAgICAgICAgICAgdmFyIGZpbGVVUkkgPSBTZXJ2aWNlcy5pby5uZXdGaWxlVVJJKGZpbGUpOwoKICAgICAgICAgICAgICAgICAgICBpZihmaWxlLmlzRmlsZSgpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAibm9uZSI7CiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJjaHJvbWUvanMiOwogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJjaHJvbWUveHVsIjsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAiYWdlbnRzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKCItLS0tLS0tLS0tXCAiICsgZmlsZS5sZWFmTmFtZSArICIgKCIgKyB0eXBlICsgIikiKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRyeSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgU2VydmljZXMuc2NyaXB0bG9hZGVyLmxvYWRTdWJTY3JpcHRXaXRoT3B0aW9ucyhmaWxlVVJJLnNwZWMsIHt0YXJnZXQ6IHdpbmRvdywgaWdub3JlQ2FjaGU6IHRydWV9KTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgeHVsRmlsZXMucHVzaChmaWxlVVJJLnNwZWMpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5BR0VOVF9TSEVFVCkpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzc3MubG9hZEFuZFJlZ2lzdGVyU2hlZXQoZmlsZVVSSSwgc3NzLkFHRU5UX1NIRUVUKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2Vyc2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5VU0VSX1NIRUVUKSkKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChlKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIi0tLS0tLS0tLS0vICIgKyBmaWxlLmxlYWZOYW1lKTsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KCiAgICAgICAgICAgICAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uIGxvYWRYVUwoKSB7CiAgICAgICAgICAgICAgICAgICAgaWYoeHVsRmlsZXMubGVuZ3RoID4gMCkgewogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsKICAgICAgICAgICAgICAgICAgICAgICAgc2V0VGltZW91dChsb2FkWFVMLCA1KTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICB9LCAwKTsKICAgICAgICAgICAgXV0+PC9jb25zdHJ1Y3Rvcj4KICAgICAgICA8L2ltcGxlbWVudGF0aW9uPgogICAgPC9iaW5kaW5nPgo8L2JpbmRpbmdzPg==

in the "userChrome.css" file is read by Pale Moon like this ( paste the code above in URL bar and press enter ):

In this XML file there is the following code:

else if(/.as.css$/i.test(file.leafName)) {
type = "agentsheet";
}

which means that the Javascript code in this XML file loads CSM files whose name ends with ".as.css" and thus is read the "custom_scrollbars.as.css" file which is in the same folder ( chrome ) with the "userChrome.css" file.

*******

"as" is an abbreviation of the constant "AGENT_SHEET"

http://udn.realityripple.com/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIStyleSheetService#Constants

«You can include /* AGENT_SHEET */ anywhere in your style to make it be applied as an agent sheet. This is intended to allow you to style the anonymous content of web pages, for example scrollbars and the constituent parts of controls like <input type="file">.»

https://github.com/stylish-userstyles/stylish/wiki/Overwriting-page-styles

«Not all elements can be styled in a "user sheet". Normally, rules in userChrome.css will override built-in rules, particularly if your rules are declared !important. However, some elements, such as the "native anonymous elements" that make up scroll bars, are off limits to user sheets and can only be overridden by an agent sheet.»

https://www.userchrome.org/adding-style-recipes-userchrome-css.html#agentsheet

*******

custom_scrollbars.as.css file:

Code: Select all

scrollbar, scrollbar *, scrollcorner {
	-moz-appearance: none !important;
	--scrollbar-width: 13px;
    --scrollbar-height: var(--scrollbar-width);
	border: 1px solid !important;
	border-color: rgba(171,186,199,0.5) !important;
	border-radius: 2px !important;
}

scrollbar, scrollcorner  {
    background-color: #cde3fa !important;
}

scrollbar thumb {
	padding: 1px !important;
	background-color: #a7c2d6 !important;
}

scrollbar thumb:hover,
scrollbar thumb:active {
	padding: 1px !important;
	background-color: #92b5d1 !important;
}

scrollbar scrollbarbutton {
	min-width: 13px !important;
	min-height: 13px !important;
    background-color: #cde3fa !important;
}

scrollbar:hover scrollbarbutton {
	min-width: 13px !important;
	min-height: 13px !important;
}

scrollbar scrollbarbutton:hover {
	min-width: 13px !important;
	min-height: 13px !important;
    background-color: #92b5d1 !important;
}

scrollbar scrollbarbutton:active {
	min-width: 13px !important;
	min-height: 13px !important;
    background-color: #92b5d1 !important;
}

scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { min-width: 13px !important; min-height: 13px !important; -moz-appearance: none !important; }

scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { min-width: 13px !important; min-height: 13px !important; -moz-appearance: none !important; }

Loading the "custom_scrollbars.as.css" file will make all Pale Moon scrollbars look like this:

The Javascript code in this XML file also loads JS files whose name ends with ".uc.js" and thus the file "userChrome.uc.js" is read, which will increase the number of Items in the History Drop-Down Menu ( to maximum 100 entries - you can change this number in the file code ).

Important! The name of this JS file must end with ".uc.js".

userChrome.uc.js file:

Code: Select all

// Increase the Number of Items in the History Drop-Down Menu ( max 100 entries ) - by Kris_88
// https://forum.palemoon.org/viewtopic.php?f=46&t=29831#p239491

window.oldHistoryMenu = window.HistoryMenu;

window.HistoryMenu = function (aPopupShowingEvent) {
	this.__proto__.__proto__ = window.PlacesMenu.prototype;
	window.XPCOMUtils.defineLazyServiceGetter(this, "_ss", "@mozilla.org/browser/sessionstore;1", "nsISessionStore");
	window.PlacesMenu.call(this, aPopupShowingEvent, "place:sort=4&maxResults=100");
};

window.HistoryMenu.prototype = window.oldHistoryMenu.prototype;

Loading the "userChrome.uc.js" file will make Pale Moon / Toolbar / History look like this:

***

chrome folder:

***

P.S. If you want to use the "auto-hidden-minimal-scrollbars-for-firefox.css" file ( https://forum.palemoon.org/viewtopic.php?f=65&t=31353#p253355 ) to modify the scroll bar layout, it should be renamed as follows (its name should end with ".as.css"):

"auto-hidden-minimal-scrollbars-for-firefox.as.css"

Important! Use only one of the two CSS files that modify the scroll bar layout.