xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css

This commit is contained in:
xaoxuu 2022-11-04 23:13:01 +08:00
parent bab88f4965
commit fd1da2923c
9 changed files with 97 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -326,7 +326,7 @@ style:
card: white # 卡片背景颜色 card: white # 卡片背景颜色
title: '#000' # 标题文本颜色 title: '#000' # 标题文本颜色
text: '#333' # 正文文本颜色 text: '#333' # 正文文本颜色
code: '#111' # 行内代码颜色 code: '#f33a00' # 行内代码颜色
dark: dark:
background: '#313438' # 深色背景颜色 background: '#313438' # 深色背景颜色
background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电） background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）

2
source/css/_common/base.styl
View File

@ -8,7 +8,7 @@ pre
a a
text-decoration: none text-decoration: none
color: $color-link color: var(--theme-link)
&:hover &:hover
color: $color-hover color: $color-hover

2
source/css/_common/highlight.styl
View File

@ -7,7 +7,7 @@ code
p>code:not([class]),li>code:not([class]) p>code:not([class]),li>code:not([class])
font-size: 85% font-size: 85%
background: var(--block) background: var(--block)
padding: .2em .4em padding: .2em
border-radius: 4px border-radius: 4px
article.md .highlight, pre:not([class]):has(>code) article.md .highlight, pre:not([class]):has(>code)

2
source/css/_custom.styl
View File

@ -64,7 +64,7 @@ $fs-p = $fs-15
$fs-code = $fs-13 $fs-code = $fs-13
$border-card = 12px $border-card = 12px
$border-block = 6px $border-block = 8px
$border-image = 6px $border-image = 6px
// 可以动态变化的属性 // 可以动态变化的属性

49
source/css/_defines/theme.styl
View File

@ -1,25 +1,4 @@
:root set_text_light()
--site-bg: $light-background
--block: $light-block
--block-border: darken($light-block, 5)
--block-hover: darken($light-block, 2)
--text-p0: $light-title
--text-p1: $light-text
--text-p2: mix($light-text, $light-background, 80)
--text-p3: mix($light-text, $light-background, 60)
--text-p4: mix($light-text, $light-background, 35)
--text-meta: mix($light-text, $light-background, 20)
--text-code: $light-code
--card: $light-card
--theme-highlight: darken($color-theme, 5)
--theme-bg: mix($color-theme, $light-card, 10)
set_darkmode()
:root
--site-bg: $dark-background
--block: $dark-block
--block-border: lighten($dark-block, 6)
--block-hover: darken($dark-block, 4)
--text-p0: $dark-title --text-p0: $dark-title
--text-p1: mix($dark-text, $dark-background, 85) --text-p1: mix($dark-text, $dark-background, 85)
--text-p2: mix($dark-text, $dark-background, 70) --text-p2: mix($dark-text, $dark-background, 70)
@ -27,7 +6,33 @@ set_darkmode()
--text-p4: mix($dark-text, $dark-background, 35) --text-p4: mix($dark-text, $dark-background, 35)
--text-meta: mix($dark-text, $dark-background, 30) --text-meta: mix($dark-text, $dark-background, 30)
--text-code: $dark-code --text-code: $dark-code
set_text_dark()
--text-p0: $light-title
--text-p1: $light-text
--text-p2: mix($light-text, $light-background, 80)
--text-p3: mix($light-text, $light-background, 60)
--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 --card: $dark-card
--block: $dark-block
--block-border: lighten($dark-block, 6)
--block-hover: darken($dark-block, 4)
set_text_light()
--theme-highlight: $color-theme --theme-highlight: $color-theme
--theme-bg: mix($color-theme, $dark-card, 10) --theme-bg: mix($color-theme, $dark-card, 10)
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)

4
source/css/_layout/md.styl
View File

@ -146,11 +146,11 @@ article.md
right: 0 right: 0
height: 1px height: 1px
opacity: 0.8 opacity: 0.8
background: $color-link background: var(--theme-link)
trans1: all trans1: all
&:hover &:hover
border-bottom: none border-bottom: none
color: $color-link color: var(--theme-link)
&:after &:after
height: 100% height: 100%
opacity: 0.2 opacity: 0.2

2
source/css/_layout/partial/bread-nav.styl
View File

@ -8,7 +8,7 @@
align-items: center align-items: center
flex-direction: row flex-direction: row
&:not([style]) a &:not([style]) a
color: $color-link color: var(--theme-link)
&[style] a &[style] a
color: inherit color: inherit
span.sep span.sep

106
source/css/_layout/tag-plugins/common.styl
View File

@ -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 .tag-plugin
--theme: var(--text-p1) --theme: var(--text-p1)
--theme-border: var(--block-border) --theme-border: var(--block-border)
@ -5,86 +26,99 @@
.tag-plugin[color='red'] .tag-plugin[color='red']
--theme: $c-red --theme: $c-red
--theme-border: mix($c-red, $light-card, 40) --theme-border: mix($c-red, white, 60)
--theme-bg: mix($c-red, $light-card, 10) --theme-bg: mix($c-red, white, 15)
.tag-plugin[color='orange'] .tag-plugin[color='orange']
--theme: $c-orange --theme: $c-orange
--theme-border: mix($c-orange, $light-card, 40) --theme-border: mix($c-orange, white, 60)
--theme-bg: mix($c-orange, $light-card, 10) --theme-bg: mix($c-orange, white, 15)
.tag-plugin[color='yellow'] .tag-plugin[color='yellow']
--theme: $c-yellow --theme: $c-yellow
--theme-border: mix($c-yellow, $light-card, 40) --theme-border: mix($c-yellow, white, 60)
--theme-bg: mix($c-yellow, $light-card, 10) --theme-bg: mix($c-yellow, white, 20)
.tag-plugin[color='green'] .tag-plugin[color='green']
--theme: $c-green --theme: $c-green
--theme-border: mix($c-green, $light-card, 40) --theme-border: mix($c-green, white, 60)
--theme-bg: mix($c-green, $light-card, 10) --theme-bg: mix($c-green, white, 15)
.tag-plugin[color='cyan'] .tag-plugin[color='cyan']
--theme: $c-cyan --theme: $c-cyan
--theme-border: mix($c-cyan, $light-card, 40) --theme-border: mix($c-cyan, white, 60)
--theme-bg: mix($c-cyan, $light-card, 10) --theme-bg: mix($c-cyan, white, 15)
.tag-plugin[color='blue'] .tag-plugin[color='blue']
--theme: $c-blue --theme: $c-blue
--theme-border: mix($c-blue, $light-card, 40) --theme-border: mix($c-blue, white, 60)
--theme-bg: mix($c-blue, $light-card, 10) --theme-bg: mix($c-blue, white, 15)
.tag-plugin[color='purple'] .tag-plugin[color='purple']
--theme: $c-purple --theme: $c-purple
--theme-border: mix($c-purple, $light-card, 40) --theme-border: mix($c-purple, white, 60)
--theme-bg: mix($c-purple, $light-card, 10) --theme-bg: mix($c-purple, white, 15)
.tag-plugin[color='light'] .tag-plugin[color='light']
--theme-bg: white --theme-bg: white
.tag-plugin[color='dark'] .tag-plugin[color='dark']
--theme-bg: #444 --theme-bg: #333
color: var(--card) !important 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() set_darkmode_tags()
.tag-plugin[color='red'] .tag-plugin[color='red']
--theme-border: mix($c-red, $dark-card, 80) --theme-border: mix($c-red, black, 70)
--theme-bg: mix($c-red, $dark-card, 10) --theme-bg: mix($c-red, black, 20)
.tag-plugin[color='orange'] .tag-plugin[color='orange']
--theme-border: mix($c-orange, $dark-card, 80) --theme-border: mix($c-orange, black, 70)
--theme-bg: mix($c-orange, $dark-card, 10) --theme-bg: mix($c-orange, black, 20)
.tag-plugin[color='yellow'] .tag-plugin[color='yellow']
--theme-border: mix($c-yellow, $dark-card, 80) --theme-border: mix($c-yellow, black, 70)
--theme-bg: mix($c-yellow, $dark-card, 10) --theme-bg: mix($c-yellow, black, 20)
.tag-plugin[color='green'] .tag-plugin[color='green']
--theme-border: mix($c-green, $dark-card, 80) --theme-border: mix($c-green, black, 70)
--theme-bg: mix($c-green, $dark-card, 10) --theme-bg: mix($c-green, black, 20)
.tag-plugin[color='cyan'] .tag-plugin[color='cyan']
--theme-border: mix($c-cyan, $dark-card, 80) --theme-border: mix($c-cyan, black, 70)
--theme-bg: mix($c-cyan, $dark-card, 10) --theme-bg: mix($c-cyan, black, 20)
.tag-plugin[color='blue'] .tag-plugin[color='blue']
--theme-border: mix($c-blue, $dark-card, 80) --theme-border: mix($c-blue, black, 70)
--theme-bg: mix($c-blue, $dark-card, 10) --theme-bg: mix($c-blue, black, 20)
.tag-plugin[color='purple'] .tag-plugin[color='purple']
--theme-border: mix($c-purple, $dark-card, 80) --theme-border: mix($c-purple, black, 70)
--theme-bg: mix($c-purple, $dark-card, 10) --theme-bg: mix($c-purple, black, 20)
.tag-plugin[color='light'] .tag-plugin[color='light']
--theme-border: white --theme-border: white
--theme-bg: #ddd --theme-bg: #fff
color: var(--card) !important
.tag-plugin[color='dark'] .tag-plugin[color='dark']
--theme-border: black --theme-border: black
--theme-bg: #222 --theme-bg: #111
color: var(--text-p1) !important set_text_white()
.tag-plugin[color='warning'],.tag-plugin[color='light']
set_text_black()
if hexo-config('style.darkmode') == 'auto' if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)

4
source/css/_layout/tag-plugins/folding.styl
View File

@ -48,8 +48,8 @@ details.folding[open]
margin: 0 - 1rem margin: 0 - 1rem
margin-top: 0 margin-top: 0
background: var(--card) background: var(--card)
border-bottom-left-radius: $border-block border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
border-bottom-right-radius: $border-block border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
font-size: $fs-15 font-size: $fs-15
>:first-child >:first-child
margin-top: 0 margin-top: 0