From c0b8c089c264b514710bf303f88e2902dc769fcb Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 14 Sep 2021 15:54:05 +0800 Subject: [PATCH] Custom the scrollbar on Webkit browsers the default scrollbar on Windows looks like shit --- _sass/addon/commons.scss | 20 ++++++++++++++++++++ _sass/colors/dark-typography.scss | 2 ++ _sass/colors/light-typography.scss | 2 ++ 3 files changed, 24 insertions(+) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 7ca7029..c320cd0 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -53,6 +53,26 @@ body { font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; } +/* --- Scrollbar --- */ + +$scrollbar-size: 7px; + +::-webkit-scrollbar { + width: $scrollbar-size; + height: $scrollbar-size; +} + +::-webkit-scrollbar-track { + @at-root body#{&} { + -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg); + } +} + +::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-bg); + border-radius: calc(#{$scrollbar-size} / 2); +} + /* --- Typography --- */ h1 { diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index e8f53e1..3c0a718 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -12,6 +12,8 @@ --input-focus-border-color: rgb(112, 114, 115); --mask-bg: rgb(68, 69, 70); --footer-bg-color: var(--main-wrapper-bg); + --scrollbar-track-bg: rgba(0,0,0,0.3); + --scrollbar-thumb-bg: rgb(173 171 171 / 50%); /* common color */ --text-color: rgb(175, 176, 177); diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 11031eb..3e0af5e 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -24,6 +24,8 @@ --btn-box-shadow: #eaeaea; --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; + --scrollbar-track-bg: rgba(0,0,0,0.3); + --scrollbar-thumb-bg: rgba(0,0,0,0.3); /* Sidebar */ --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);