diff --git a/CHANGELOG.md b/CHANGELOG.md index 56904d5ec..a46782aac 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 494ec6b41..2d4630de4 100644 --- a/ui/scss/all.scss +++ b/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'; diff --git a/ui/scss/component/_scrollbar.scss b/ui/scss/component/_scrollbar.scss new file mode 100644 index 000000000..aa7c2afbe --- /dev/null +++ b/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); +} diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index d17304cb4..7cf4c583f 100644 --- a/ui/scss/themes/dark.scss +++ b/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; } diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 09ceba6af..e8eb9dbb3 100644 --- a/ui/scss/themes/light.scss +++ b/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; }