Skip to content

Commit

Permalink
✨ 可配置滚动条样式
Browse files Browse the repository at this point in the history
  • Loading branch information
zkqiang committed Dec 29, 2021
1 parent 13e159b commit fad753d
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 0 deletions.
7 changes: 7 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,13 @@ color:
board_color: "#fff"
board_color_dark: "#252d38"

# 滚动条颜色
# Color of scrollbar
scrollbar_color: "#c4c6c9"
scrollbar_color_dark: "#687582"
scrollbar_color_hover: "#a6a6a6"
scrollbar_color_hover_dark: "#9da8b3"

# 主题字体配置
# Font
font:
Expand Down
14 changes: 14 additions & 0 deletions source/css/_pages/_base/base.styl
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,17 @@ img[lazyload]

*[align="right"]
text-align right

::-webkit-scrollbar
width 6px
height 4px

::-webkit-scrollbar-thumb
background-color var(--scrollbar-color)
border-radius 6px

&:hover
background-color var(--scrollbar-color-hover)

::-webkit-scrollbar-corner
background-color transparent
4 changes: 4 additions & 0 deletions source/css/_pages/_base/color-schema.styl
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
--link-hover-bg-color $link-hover-bg-color
--navbar-bg-color $navbar-bg-color
--navbar-text-color $navbar-text-color
--scrollbar-color $scrollbar-color
--scrollbar-hover-color $scrollbar-hover-color

dark-colors()
--body-bg-color $body-bg-color-dark
Expand All @@ -24,6 +26,8 @@ dark-colors()
--link-hover-bg-color $link-hover-bg-color-dark
--navbar-bg-color $navbar-bg-color-dark
--navbar-text-color $navbar-text-color-dark
--scrollbar-color $scrollbar-color-dark
--scrollbar-hover-color $scrollbar-hover-color-dark

img, .note, .label
-webkit-filter brightness(.9)
Expand Down
6 changes: 6 additions & 0 deletions source/css/_variables/base.styl
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,11 @@ $scroll-arrow-height-limit = theme-config-origin("scroll_down_arrow.banner_heigh
$board-bg-color = theme-config("color.board_color", "#fff")
$board-bg-color-dark = theme-config("color.board_color_dark", "#252d38")

// scrollbar
$scrollbar-color = theme-config("color.scrollbar_color", "#c4c6c9")
$scrollbar-color-dark = theme-config("color.scrollbar_color_dark", "#687582")
$scrollbar-hover-color = theme-config("color.scrollbar_hover_color", "#a6a6a6")
$scrollbar-hover-color-dark = theme-config("color.scrollbar_hover_color_dark", "#9da8b3")

// Shadow
$img-shadow = 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)

0 comments on commit fad753d

Please sign in to comment.