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 style

This commit is contained in:
XPoet 2022-10-21 10:36:35 +08:00
parent d8a8fa977c
commit 37ff7586fa
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,6 +87,8 @@ $text-color-4 = lighten($text-color-3, 30%)
$text-color-5 = lighten($text-color-3, 60%) $text-color-5 = lighten($text-color-3, 60%)
$text-color-6 = lighten($text-color-3, 90%) $text-color-6 = lighten($text-color-3, 90%)
$toc-text-color = lighten($text-color-3, 20%)
$badge-color = darken($background-color-1, 6%) $badge-color = darken($background-color-1, 6%)
$badge-background-color = lighten($text-color-3, 40%) $badge-background-color = lighten($text-color-3, 40%)
@ -123,6 +125,8 @@ $dark-text-color-4 = darken($dark-text-color-3, 20%)
$dark-text-color-5 = darken($dark-text-color-3, 50%) $dark-text-color-5 = darken($dark-text-color-3, 50%)
$dark-text-color-6 = darken($dark-text-color-3, 70%) $dark-text-color-6 = darken($dark-text-color-3, 70%)
$dark-toc-text-color = darken($dark-text-color-3, 15%)
$dark-badge-color = lighten($dark-background-color-1, 10%) $dark-badge-color = lighten($dark-background-color-1, 10%)
$dark-badge-background-color = lighten($dark-text-color-3, 40%) $dark-badge-background-color = lighten($dark-text-color-3, 40%)
@ -184,6 +188,9 @@ root-color(mode) {
--text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5 --text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
--text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6 --text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
// toc text color
--toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
// badge color // badge color
--badge-color mode == 'light' ? $badge-color : $dark-badge-color --badge-color mode == 'light' ? $badge-color : $dark-badge-color
--badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color --badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color

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

@ -19,7 +19,7 @@
ol { ol {
margin 0 margin 0
padding 0 2px 12px 10px padding 0 0.1rem 0.8rem 0.6rem
text-align left text-align left
list-style none list-style none
@ -39,6 +39,7 @@
.nav-item { .nav-item {
margin-bottom 0.2rem
overflow hidden overflow hidden
line-height 1.8 line-height 1.8
white-space nowrap white-space nowrap
@ -66,14 +67,13 @@
.nav-number .nav-number
.nav-text { .nav-text {
color var(--text-color-3) color var(--toc-text-color)
} }
.active > a { .active > a {
.nav-number .nav-number
.nav-text { .nav-text {
color var(--primary-color) color var(--primary-color)
font-weight bold
} }
} }
@ -81,7 +81,6 @@
.nav-number .nav-number
.nav-text { .nav-text {
color var(--primary-color) color var(--primary-color)
font-weight bold
} }
} }
} }

4
source/css/layout/article-content.styl
View File

@ -2,7 +2,7 @@ $avatarWidth = 3rem
$arrow-icon-width = 1rem $arrow-icon-width = 1rem
$post-nav-max-width = 14rem $post-nav-max-width = 14rem
$article-title-font-size = 1.6rem $article-title-font-size = 1.6rem
$toc-container-width = 16rem $toc-container-width = 15rem
.post-page-container { .post-page-container {
@ -269,7 +269,7 @@ $toc-container-width = 16rem
box-sizing border-box box-sizing border-box
width $toc-container-width width $toc-container-width
max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value) max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
padding 2rem 0 2rem 2rem padding 2rem 0 2rem 1.4rem
transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease") transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
.header-shrink & { .header-shrink & {