Customize scrollbar to fit the theme colors

## Issue
4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme

## Approach
The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers.

Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes.

Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Comment reactions ([#4895](https://github.com/lbryio/lbry-desktop/pull/4895))
 - Language search ([#4907](https://github.com/lbryio/lbry-desktop/pull/4907))
 - Content notifications ([#4981](https://github.com/lbryio/lbry-desktop/pull/4981))
+- Customize scrollbar to fit the dark theme _community pr!_ ([#5056](https://github.com/lbryio/lbry-desktop/pull/5056))
 
 ### Changed
 

ui/scss/all.scss

@@ -44,6 +44,7 @@
 @import 'component/progress';
 @import 'component/search';
 @import 'component/claim-search';
+@import 'component/scrollbar';
 @import 'component/section';
 @import 'component/share';
 @import 'component/snack-bar';

ui/scss/component/_scrollbar.scss

@@ -0,0 +1,31 @@
+// ****************************************************************************
+// webkit
+// ****************************************************************************
+// Currently supported by Chrome/Edge/Safari.
+// Potentially deprecated in the future, but will most likely be
+// handled by 'scrollbar-xx' down below when that happens.
+
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-scrollbar-track-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  // Don't set 'border-radius' because Firefox's 'scrollbar-xx'
+  // standard currently doesn't support it. Stick with square
+  // scrollbar for all browsers.
+  background-color: var(--color-scrollbar-thumb-bg);
+}
+
+// ****************************************************************************
+// W3C::scrollbar
+// ****************************************************************************
+// The W3C future standard; currently supported by Firefox only.
+
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
+}

ui/scss/themes/dark.scss

@@ -132,4 +132,8 @@
   --color-ads-background: #475057;
   --color-ads-text: #111;
   --color-ads-link: var(--color-primary-alt);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-track-bg: transparent;
 }

ui/scss/themes/light.scss

@@ -99,4 +99,8 @@
   // Ads
   --color-ads-background: #fae5ff;
   --color-ads-link: var(--color-link);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-track-bg: transparent;
 }