xaoxuu / hexo-theme-stellar

内置文档系统的简约商务风Hexo主题,支持大量的标签组件和动态数据组件。
https://xaoxuu.com/wiki/stellar/
MIT License
1.28k stars 317 forks source link

滚动条样式优化 #307

Closed HcGys closed 1 year ago

HcGys commented 1 year ago

大佬你好,请问可以优化一下pc端的滚动条样式吗? 目前样式: screenshots_28 预期样式: image

HcGys commented 1 year ago

已解决

我根据volantis改了改,实现了该功能,就不麻烦大佬了。

修改代码如下

  1. .config.stellar.yml
    // 添加代码
    style:
    .......
    scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'
  2. /themes/stellar/source/css/_custom.styl
    // 滚动条颜色,添加代码
    $color-scrollbar = convert(hexo-config('style.scrollbar.color'))
    $color-hover-scrollbar = convert(hexo-config('style.scrollbar.hover'))
  3. /themes/stellar/source/css/_defines/func.styl
    // 修改代码
    scrollbar($w = 4px, $b = 2px, $c = $color-scrollbar, $h = $color-hover-scrollbar)
  4. /themes/stellar/source/css/_common/html.styl
    // 第一处代码添加
    *
    ......
    scrollbar()
    // 第二处代码添加
    html
    ......
    >
    if hexo-config('style.scrollbar.size')
      scrollbar(convert(hexo-config('style.scrollbar.size')), convert(hexo-config('style.scrollbar.border')) || 0px)

    效果如下

  5. 全局 image
  6. sidebar image