From fd1da2923cb17d51fa12f0f9b00ef892e149d850 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 4 Nov 2022 23:13:01 +0800 Subject: [PATCH] css --- _config.yml | 2 +- source/css/_common/base.styl | 2 +- source/css/_common/highlight.styl | 2 +- source/css/_custom.styl | 2 +- source/css/_defines/theme.styl | 31 +++--- source/css/_layout/md.styl | 4 +- source/css/_layout/partial/bread-nav.styl | 2 +- source/css/_layout/tag-plugins/common.styl | 106 +++++++++++++------- source/css/_layout/tag-plugins/folding.styl | 4 +- 9 files changed, 97 insertions(+), 58 deletions(-) diff --git a/_config.yml b/_config.yml index f35f3f8..c0cb758 100755 --- a/_config.yml +++ b/_config.yml @@ -326,7 +326,7 @@ style: card: white # 卡片背景颜色 title: '#000' # 标题文本颜色 text: '#333' # 正文文本颜色 - code: '#111' # 行内代码颜色 + code: '#f33a00' # 行内代码颜色 dark: background: '#313438' # 深色背景颜色 background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电） diff --git a/source/css/_common/base.styl b/source/css/_common/base.styl index 8c418e6..eb4cf6a 100644 --- a/source/css/_common/base.styl +++ b/source/css/_common/base.styl @@ -8,7 +8,7 @@ pre a text-decoration: none - color: $color-link + color: var(--theme-link) &:hover color: $color-hover diff --git a/source/css/_common/highlight.styl b/source/css/_common/highlight.styl index 97b7886..2dc860c 100644 --- a/source/css/_common/highlight.styl +++ b/source/css/_common/highlight.styl @@ -7,7 +7,7 @@ code p>code:not([class]),li>code:not([class]) font-size: 85% background: var(--block) - padding: .2em .4em + padding: .2em border-radius: 4px article.md .highlight, pre:not([class]):has(>code) diff --git a/source/css/_custom.styl b/source/css/_custom.styl index 5b61d4c..39e38c4 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -64,7 +64,7 @@ $fs-p = $fs-15 $fs-code = $fs-13 $border-card = 12px -$border-block = 6px +$border-block = 8px $border-image = 6px // 可以动态变化的属性 diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl index d834463..bf51919 100644 --- a/source/css/_defines/theme.styl +++ b/source/css/_defines/theme.styl @@ -1,8 +1,12 @@ -:root - --site-bg: $light-background - --block: $light-block - --block-border: darken($light-block, 5) - --block-hover: darken($light-block, 2) +set_text_light() + --text-p0: $dark-title + --text-p1: mix($dark-text, $dark-background, 85) + --text-p2: mix($dark-text, $dark-background, 70) + --text-p3: mix($dark-text, $dark-background, 45) + --text-p4: mix($dark-text, $dark-background, 35) + --text-meta: mix($dark-text, $dark-background, 30) + --text-code: $dark-code +set_text_dark() --text-p0: $light-title --text-p1: $light-text --text-p2: mix($light-text, $light-background, 80) @@ -10,24 +14,25 @@ --text-p4: mix($light-text, $light-background, 35) --text-meta: mix($light-text, $light-background, 20) --text-code: $light-code +:root + --site-bg: $light-background --card: $light-card + --block: $light-block + --block-border: darken($light-block, 5) + --block-hover: darken($light-block, 2) + set_text_dark() --theme-highlight: darken($color-theme, 5) --theme-bg: mix($color-theme, $light-card, 10) + --theme-link: $color-link set_darkmode() :root --site-bg: $dark-background + --card: $dark-card --block: $dark-block --block-border: lighten($dark-block, 6) --block-hover: darken($dark-block, 4) - --text-p0: $dark-title - --text-p1: mix($dark-text, $dark-background, 85) - --text-p2: mix($dark-text, $dark-background, 70) - --text-p3: mix($dark-text, $dark-background, 45) - --text-p4: mix($dark-text, $dark-background, 35) - --text-meta: mix($dark-text, $dark-background, 30) - --text-code: $dark-code - --card: $dark-card + set_text_light() --theme-highlight: $color-theme --theme-bg: mix($color-theme, $dark-card, 10) @media screen and (max-width: $device-mobile-max) diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl index b977923..98f901a 100644 --- a/source/css/_layout/md.styl +++ b/source/css/_layout/md.styl @@ -146,11 +146,11 @@ article.md right: 0 height: 1px opacity: 0.8 - background: $color-link + background: var(--theme-link) trans1: all &:hover border-bottom: none - color: $color-link + color: var(--theme-link) &:after height: 100% opacity: 0.2 diff --git a/source/css/_layout/partial/bread-nav.styl b/source/css/_layout/partial/bread-nav.styl index 3c277e5..1c5b432 100644 --- a/source/css/_layout/partial/bread-nav.styl +++ b/source/css/_layout/partial/bread-nav.styl @@ -8,7 +8,7 @@ align-items: center flex-direction: row &:not([style]) a - color: $color-link + color: var(--theme-link) &[style] a color: inherit span.sep diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl index d279f15..d483b9e 100644 --- a/source/css/_layout/tag-plugins/common.styl +++ b/source/css/_layout/tag-plugins/common.styl @@ -1,3 +1,24 @@ +set_text_white() + --text-p0: white + --text-p1: white + --text-p2: #eee + --text-p3: #ddd + --text-code: white + --card: $dark-card + --block: $dark-block + --block-border: lighten($dark-block, 6) + --block-hover: darken($dark-block, 4) +set_text_black() + --text-p0: black + --text-p1: #111 + --text-p2: #333 + --text-p3: #555 + --text-code: white + --card: $light-card + --block: $light-block + --block-border: darken($light-block, 5) + --block-hover: darken($light-block, 2) + .tag-plugin --theme: var(--text-p1) --theme-border: var(--block-border) @@ -5,86 +26,99 @@ .tag-plugin[color='red'] --theme: $c-red - --theme-border: mix($c-red, $light-card, 40) - --theme-bg: mix($c-red, $light-card, 10) + --theme-border: mix($c-red, white, 60) + --theme-bg: mix($c-red, white, 15) .tag-plugin[color='orange'] --theme: $c-orange - --theme-border: mix($c-orange, $light-card, 40) - --theme-bg: mix($c-orange, $light-card, 10) + --theme-border: mix($c-orange, white, 60) + --theme-bg: mix($c-orange, white, 15) .tag-plugin[color='yellow'] --theme: $c-yellow - --theme-border: mix($c-yellow, $light-card, 40) - --theme-bg: mix($c-yellow, $light-card, 10) + --theme-border: mix($c-yellow, white, 60) + --theme-bg: mix($c-yellow, white, 20) .tag-plugin[color='green'] --theme: $c-green - --theme-border: mix($c-green, $light-card, 40) - --theme-bg: mix($c-green, $light-card, 10) + --theme-border: mix($c-green, white, 60) + --theme-bg: mix($c-green, white, 15) .tag-plugin[color='cyan'] --theme: $c-cyan - --theme-border: mix($c-cyan, $light-card, 40) - --theme-bg: mix($c-cyan, $light-card, 10) + --theme-border: mix($c-cyan, white, 60) + --theme-bg: mix($c-cyan, white, 15) .tag-plugin[color='blue'] --theme: $c-blue - --theme-border: mix($c-blue, $light-card, 40) - --theme-bg: mix($c-blue, $light-card, 10) + --theme-border: mix($c-blue, white, 60) + --theme-bg: mix($c-blue, white, 15) .tag-plugin[color='purple'] --theme: $c-purple - --theme-border: mix($c-purple, $light-card, 40) - --theme-bg: mix($c-purple, $light-card, 10) - + --theme-border: mix($c-purple, white, 60) + --theme-bg: mix($c-purple, white, 15) .tag-plugin[color='light'] --theme-bg: white - .tag-plugin[color='dark'] - --theme-bg: #444 - color: var(--card) !important + --theme-bg: #333 + set_text_white() + +.tag-plugin.note[color='warning'] + --theme: $c-yellow + --theme-border: #ffe659 + --theme-bg: #ffe659 + --theme-link: #ff453a + +.tag-plugin.note[color='error'] + --theme: $c-yellow + --theme-border: #ff453a + --theme-bg: #ff453a + --theme-link: #ffe659 + set_text_white() set_darkmode_tags() .tag-plugin[color='red'] - --theme-border: mix($c-red, $dark-card, 80) - --theme-bg: mix($c-red, $dark-card, 10) + --theme-border: mix($c-red, black, 70) + --theme-bg: mix($c-red, black, 20) .tag-plugin[color='orange'] - --theme-border: mix($c-orange, $dark-card, 80) - --theme-bg: mix($c-orange, $dark-card, 10) + --theme-border: mix($c-orange, black, 70) + --theme-bg: mix($c-orange, black, 20) .tag-plugin[color='yellow'] - --theme-border: mix($c-yellow, $dark-card, 80) - --theme-bg: mix($c-yellow, $dark-card, 10) + --theme-border: mix($c-yellow, black, 70) + --theme-bg: mix($c-yellow, black, 20) .tag-plugin[color='green'] - --theme-border: mix($c-green, $dark-card, 80) - --theme-bg: mix($c-green, $dark-card, 10) + --theme-border: mix($c-green, black, 70) + --theme-bg: mix($c-green, black, 20) .tag-plugin[color='cyan'] - --theme-border: mix($c-cyan, $dark-card, 80) - --theme-bg: mix($c-cyan, $dark-card, 10) + --theme-border: mix($c-cyan, black, 70) + --theme-bg: mix($c-cyan, black, 20) .tag-plugin[color='blue'] - --theme-border: mix($c-blue, $dark-card, 80) - --theme-bg: mix($c-blue, $dark-card, 10) + --theme-border: mix($c-blue, black, 70) + --theme-bg: mix($c-blue, black, 20) .tag-plugin[color='purple'] - --theme-border: mix($c-purple, $dark-card, 80) - --theme-bg: mix($c-purple, $dark-card, 10) + --theme-border: mix($c-purple, black, 70) + --theme-bg: mix($c-purple, black, 20) .tag-plugin[color='light'] --theme-border: white - --theme-bg: #ddd - color: var(--card) !important + --theme-bg: #fff .tag-plugin[color='dark'] --theme-border: black - --theme-bg: #222 - color: var(--text-p1) !important + --theme-bg: #111 + set_text_white() + + .tag-plugin[color='warning'],.tag-plugin[color='light'] + set_text_black() if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) diff --git a/source/css/_layout/tag-plugins/folding.styl b/source/css/_layout/tag-plugins/folding.styl index 04c77c4..812e2e1 100644 --- a/source/css/_layout/tag-plugins/folding.styl +++ b/source/css/_layout/tag-plugins/folding.styl @@ -48,8 +48,8 @@ details.folding[open] margin: 0 - 1rem margin-top: 0 background: var(--card) - border-bottom-left-radius: $border-block - border-bottom-right-radius: $border-block + border-bottom-left-radius: 'calc(%s - 1px)' % $border-block + border-bottom-right-radius: 'calc(%s - 1px)' % $border-block font-size: $fs-15 >:first-child margin-top: 0