feat: new config param customizeScrollbar

reuixiy · Oct 9, 2021 · 2c06353 · 2c06353 · reuixiy · Oct 9, 2021
1 parent 4fcacbf
commit 2c06353
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 20 deletions.
diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss
@@ -95,23 +95,3 @@ a {
 ::selection {
     background-color: alpha(var(--color-primary), 0.3);
 }
-
-::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
-}
-::-webkit-scrollbar-track {
-    background-color: var(--color-bg);
-}
-::-webkit-scrollbar-thumb {
-    background-color: var(--color-contrast-low);
-    &:hover {
-        background-color: alpha(var(--color-primary), 0.5);
-    }
-    &:active {
-        background-color: alpha(var(--color-primary), 0.75);
-    }
-}
-::-webkit-scrollbar-corner {
-    background-color: var(--color-bg);
-}
diff --git a/assets/scss/base/_scrollbar.scss b/assets/scss/base/_scrollbar.scss
@@ -0,0 +1,19 @@
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+::-webkit-scrollbar-track {
+  background-color: var(--color-bg);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-contrast-low);
+  &:hover {
+      background-color: alpha(var(--color-primary), 0.5);
+  }
+  &:active {
+      background-color: alpha(var(--color-primary), 0.75);
+  }
+}
+::-webkit-scrollbar-corner {
+  background-color: var(--color-bg);
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -88,6 +88,10 @@ $baseRelURL: "{{ strings.TrimSuffix (.Site.BaseURL | relURL) "/" }}";
 
 @import "base/base";
 
+{{ if .Site.Params.customizeScrollbar }}
+    @import "base/scrollbar";
+{{ end }}
+
 
 // Typography
 

diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
@@ -960,6 +960,11 @@ uglyURLs = false
     #       in the Markdown file.
 
 
+    ######################################
+    # Scrollbar
+    customizeScrollbar = true
+
+
     ######################################
     # Typography
 

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -910,6 +910,11 @@ uglyURLs = false
     #      分隔开来，那么这项设置将会非常有用。
 
 
+    ######################################
+    # 滚动条
+    customizeScrollbar = true
+
+
     ######################################
     # 字体排版
 

diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml
@@ -910,6 +910,11 @@ uglyURLs = false
     #      分隔開來，那麼這項設定將會非常有用。
 
 
+    ######################################
+    # 滾動條
+    customizeScrollbar = true
+
+
     ######################################
     # 字型排版