lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(toc): optimize TOC scroll bar color

This commit is contained in:
XPoet 2022-10-11 16:58:06 +08:00
parent c0d18e80ec
commit ab53feabf3
3 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/css/common/basic.styl
View File

@ -28,7 +28,7 @@
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background var(--scroll-bar-bg-color) background var(--scrollbar-bg-color)
} }
} }

9
source/css/common/variables.styl
View File

@ -81,7 +81,8 @@ $selection-color = lighten($primary-color, 10%)
$shadow-color = rgba(0, 0, 0, 0.2) $shadow-color = rgba(0, 0, 0, 0.2)
$shadow-hover-color = rgba(0, 0, 0, 0.28) $shadow-hover-color = rgba(0, 0, 0, 0.28)
$scrollbar-color = lighten($default-text-color, 6%) $scrollbar-color = lighten($default-text-color, 6%)
$scroll-bar-bg-color = darken($background-color, 10%) $scrollbar-bg-color = darken($background-color, 10%)
$toc-scrollbar-color = alpha($default-text-color, 0.2)
$link-color = darken($default-text-color, 10%) $link-color = darken($default-text-color, 10%)
$copyright-info-color = #cc0033 $copyright-info-color = #cc0033
$avatar-background-color = #0066cc $avatar-background-color = #0066cc
@ -106,7 +107,8 @@ $dark-selection-color = $selection-color
$dark-shadow-color = rgba(128, 128, 128, 0.2) $dark-shadow-color = rgba(128, 128, 128, 0.2)
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28) $dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
$dark-scrollbar-color = darken($dark-background-color, 10%) $dark-scrollbar-color = darken($dark-background-color, 10%)
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%) $dark-scrollbar-bg-color = lighten($dark-background-color, 20%)
$dark-toc-scrollbar-color = alpha($dark-default-text-color, 0.2)
$dark-link-color = lighten($dark-default-text-color, 10%) $dark-link-color = lighten($dark-default-text-color, 10%)
$dark-copyright-info-color = darken($copyright-info-color, 20%) $dark-copyright-info-color = darken($copyright-info-color, 20%)
$dark-avatar-background-color = darken($avatar-background-color, 10%) $dark-avatar-background-color = darken($avatar-background-color, 10%)
@ -144,7 +146,8 @@ root-color(mode) {
--shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
--shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
--scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
--scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color --scrollbar-bg-color mode == 'light' ? $scrollbar-bg-color : $dark-scrollbar-bg-color
--toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
--link-color mode == 'light' ? $link-color : $dark-link-color --link-color mode == 'light' ? $link-color : $dark-link-color
--copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
--avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color

2
source/css/layout/_partial/toc.styl
View File

@ -7,7 +7,7 @@
font-size 0.92rem font-size 0.92rem
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background rgba(100, 100, 100, 0.1) background var(--toc-scrollbar-color)
border-radius 0.3rem border-radius 0.3rem
} }