diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss index 344bfd97..78457102 100644 --- a/src/servers/ServersListGroup.scss +++ b/src/servers/ServersListGroup.scss @@ -1,5 +1,6 @@ @import '../utils/base'; @import '../utils/mixins/vertical-align'; +@import '../utils/mixins/thin-scroll'; .servers-list__list-group.servers-list__list-group { width: 100%; @@ -33,6 +34,8 @@ @media (min-width: $mdMin) { max-height: 220px; overflow-x: auto; + + @include thin-scroll(); } .servers-list__server-item { diff --git a/src/utils/mixins/thin-scroll.scss b/src/utils/mixins/thin-scroll.scss new file mode 100644 index 00000000..ae243490 --- /dev/null +++ b/src/utils/mixins/thin-scroll.scss @@ -0,0 +1,16 @@ +@mixin thin-scroll() { + /* Forefox scrollbar */ + scrollbar-color: rgba(0, 0, 0, .2) #f5f5f5; + scrollbar-width: thin; + + /* Chrome webkit scrollbar */ + &::-webkit-scrollbar { + width: 6px; + background-color: #f5f5f5; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, .2); + border-radius: .5rem; + } +}