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

[opt] style

This commit is contained in:
xaoxuu 2024-02-07 16:21:19 +08:00
parent 166540eecc
commit 20a93e4c01
23 changed files with 137 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_config.yml
View File

@ -321,6 +321,9 @@ tag_plugins:
icon: icon:
# 留空时，图标和文字颜色相同 # 留空时，图标和文字颜色相同
default_color: accent # theme, accent, red, orange, yellow, green, cyan, blue, purple default_color: accent # theme, accent, red, orange, yellow, green, cyan, blue, purple
# {% button 标题 链接 %}
button:
default_color: theme # theme, accent, red, orange, yellow, green, cyan, blue, purple
# {% image %} # {% image %}
image: image:
fancybox: false # true, false fancybox: false # true, false
@ -486,7 +489,7 @@ plugins:
typingAnimate: true # 打字机动画 typingAnimate: true # 打字机动画
style: style:
darkmode: auto # auto / always / false prefers_theme: auto # auto / light / dark
smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位 smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
font-size: font-size:
root: 16px # 改这个会影响全局所有文字的字号 root: 16px # 改这个会影响全局所有文字的字号
@ -516,7 +519,6 @@ style:
theme: 'hsl(192 98% 55%)' # 主题色 theme: 'hsl(192 98% 55%)' # 主题色
accent: 'hsl(14 100% 57%)' # 强调色 accent: 'hsl(14 100% 57%)' # 强调色
link: 'hsl(207 90% 54%)' # 超链接颜色 link: 'hsl(207 90% 54%)' # 超链接颜色
button: 'hsl(192 98% 55%)' # 按钮颜色
hover: 'hsl(14 100% 57%)' # 按钮高亮颜色 hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
animated_avatar: animated_avatar:
animate: auto # auto, always animate: auto # auto, always
@ -529,7 +531,6 @@ style:
error: 加载失败，请稍后重试。 error: 加载失败，请稍后重试。
gradient: # https://webgradients.com/ gradient: # https://webgradients.com/
start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))' start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
leftbar: leftbar:
# 可以设置：纯色/渐变色/图片作为背景 # 可以设置：纯色/渐变色/图片作为背景
# background: var(--leftbar-bg) # background: var(--leftbar-bg)

7
layout/_partial/plugins/comments/giscus/layout.ejs
View File

@ -2,9 +2,12 @@
function layoutDiv() { function layoutDiv() {
var el = ''; var el = '';
const cmt = page.cmt; const cmt = page.cmt;
if (cmt && cmt.service && (cmt.service.length > 0)) { if (cmt?.service?.length > 0) {
const name = cmt.service; const name = cmt.service;
const body = cmt[name]; var body = cmt[name];
if (theme.style.prefers_theme != 'auto' && body['data-theme'] == 'preferred_color_scheme') {
body['data-theme'] = theme.style.prefers_theme
}
el += '<div id="' + name + '"'; el += '<div id="' + name + '"';
for (let key of Object.keys(body)) { for (let key of Object.keys(body)) {
if (body[key] !== null) { if (body[key] !== null) {

6
layout/_partial/widgets/recent.ejs
View File

@ -30,8 +30,7 @@ function layoutDiv() {
arr.length = item.limit arr.length = item.limit
arr.forEach(post => { arr.forEach(post => {
if (!post) { return } if (!post) { return }
const isActive = post.path == page.path el += `<a class="item title" href="${url_for(post.link || post.path)}">`
el += `<a class="item title${post.path == page.path ? ' active' : ''}" href="${url_for(post.link || post.path)}">`
el += '<span class="title">' el += '<span class="title">'
if (post.wiki) { if (post.wiki) {
const proj = theme.wiki.tree[post.wiki]; const proj = theme.wiki.tree[post.wiki];
@ -41,9 +40,6 @@ function layoutDiv() {
} }
} }
el += post.title + '</span>'; el += post.title + '</span>';
if (isActive) {
el += icon('default:bookmark.active')
}
el += '</a>'; el += '</a>';
el += ''; el += '';
}); });

2
scripts/tags/lib/button.js
View File

@ -22,7 +22,7 @@ module.exports = ctx => function(args) {
args.text = `${args.text} ${arr.join(' ')}` args.text = `${args.text} ${arr.join(' ')}`
} }
if (args.color == null) { if (args.color == null) {
args.color = 'theme' args.color = ctx.theme.config.tag_plugins.button.default_color
} }
var el = '' var el = ''
el += '<a class="tag-plugin colorful button"' el += '<a class="tag-plugin colorful button"'

8
source/css/_common/button.styl
View File

@ -27,7 +27,7 @@ a[onclick]:hover
a.button.start.gradient a.button.start.gradient
position relative position relative
@media (prefers-color-scheme: dark) ondark()
transition: 0.38s ease-out transition: 0.38s ease-out
z-index: 0 z-index: 0
background: convert(hexo-config('style.gradient.start')) background: convert(hexo-config('style.gradient.start'))
@ -59,3 +59,9 @@ a.button.start.gradient
&:hover:after &:hover:after
filter: blur(36px) filter: blur(36px)
opacity 1 opacity 1
if theme(dark)
ondark()
else if theme(auto)
@media (prefers-color-scheme: dark)
ondark()

10
source/css/_common/device.styl
View File

@ -25,11 +25,13 @@
--blur-px: 16px --blur-px: 16px
--blur-bg: alpha(#fff, .4) --blur-bg: alpha(#fff, .4)
trans1: all trans1: all
if hexo-config('style.darkmode') == 'auto' ondark()
--blur-bg: alpha(#000, .4)
if theme(dark)
ondark()
else if theme(auto)
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)
--blur-bg: alpha(#000, .4) ondark()
if hexo-config('style.darkmode') == 'always'
--blur-bg: alpha(#000, .4)
// 侧边栏弹出按钮 // 侧边栏弹出按钮
.float-panel button .float-panel button

7
source/css/_custom.styl
View File

@ -4,7 +4,6 @@
$color-theme = convert(hexo-config('style.color.theme')) $color-theme = convert(hexo-config('style.color.theme'))
$color-accent = convert(hexo-config('style.color.accent')) $color-accent = convert(hexo-config('style.color.accent'))
$color-link = convert(hexo-config('style.color.link')) $color-link = convert(hexo-config('style.color.link'))
$color-button = convert(hexo-config('style.color.button'))
$color-hover = convert(hexo-config('style.color.hover')) $color-hover = convert(hexo-config('style.color.hover'))
// 动态颜色 // 动态颜色
@ -13,12 +12,6 @@ $color-block = convert(hexo-config('style.color.block'))
$color-code = convert(hexo-config('style.color.code')) $color-code = convert(hexo-config('style.color.code'))
$color-text = convert(hexo-config('style.color.text')) $color-text = convert(hexo-config('style.color.text'))
// @font-face
// font-family: 'Dosis'
// src: url('https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
// font-weight: normal
// font-style: normal
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
$ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
$ff-code = $ff-codeblock $ff-code = $ff-codeblock

18
source/css/_defines/func.styl
View File

@ -106,10 +106,20 @@ floatable-float()
hoverable-card() hoverable-card()
trans1 all trans1 all
@media (prefers-color-scheme: dark) onlight()
&:hover
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
@media (prefers-color-scheme: light)
box-shadow: $boxshadow-card box-shadow: $boxshadow-card
&:hover &:hover
floatable-float() floatable-float()
ondark()
&:hover
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
if theme(light)
onlight()
else if theme(dark)
ondark()
else
@media (prefers-color-scheme: light)
onlight()
@media (prefers-color-scheme: dark)
ondark()

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

@ -1,3 +1,6 @@
theme($t)
convert(hexo-config('style.prefers_theme')) == $t
$color-background-h = hue($color-background) $color-background-h = hue($color-background)
$color-background-s = saturation($color-background) $color-background-s = saturation($color-background)
$color-background-l = lightness($color-background) $color-background-l = lightness($color-background)
@ -14,7 +17,7 @@ $color-text-h = hue($color-text)
$color-text-s = saturation($color-text) $color-text-s = saturation($color-text)
$color-text-l = lightness($color-text) $color-text-l = lightness($color-text)
set_text_dark() _dark_text()
--text: hsl($color-text-h, $color-text-s, 0) --text: hsl($color-text-h, $color-text-s, 0)
--text-p1: hsl($color-text-h, $color-text-s, $color-text-l) --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
--text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75) --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
@ -23,7 +26,7 @@ set_text_dark()
--text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2) --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
--text-code: hsl($color-code-h, $color-code-s, $color-code-l) --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
set_text_light() _light_text()
--text: hsl($color-text-h, $color-text-s, 100) --text: hsl($color-text-h, $color-text-s, 100)
--text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5) --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
--text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75) --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
@ -32,6 +35,7 @@ set_text_light()
--text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75) --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
--text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2) --text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
_light_root()
:root :root
--site-bg: hsl($color-background-h, $color-background-s, $color-background-l) --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
--card: hsl($color-block-h, $color-block-s, 100) --card: hsl($color-block-h, $color-block-s, 100)
@ -44,11 +48,11 @@ set_text_light()
--block: hsl($color-block-h, $color-block-s, 95) --block: hsl($color-block-h, $color-block-s, 95)
--block-border: hsl($color-block-h, $color-block-s, 90) --block-border: hsl($color-block-h, $color-block-s, 90)
--block-hover: hsl($color-block-h, $color-block-s, 92) --block-hover: hsl($color-block-h, $color-block-s, 92)
set_text_dark() _dark_text()
--theme-link: $color-link --theme-link: $color-link
--theme-link-opa: rgba($color-link, 0.2) --theme-link-opa: rgba($color-link, 0.2)
set_darkmode() _dark_root()
:root :root
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8) --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
--card: hsl($color-block-h, $color-block-s * 1.2, 24) --card: hsl($color-block-h, $color-block-s * 1.2, 24)
@ -61,15 +65,17 @@ set_darkmode()
--alpha75: rgba(black, 0.75) --alpha75: rgba(black, 0.75)
--alpha100: black --alpha100: black
--leftbar-bg: hsl($color-block-h, $color-block-s, 24) --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
set_text_light() _light_text()
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)
--site-bg: black --site-bg: black
if hexo-config('style.darkmode') == 'auto' // 默认自动模式
// 系统的dark模式 if theme(light)
_light_root()
else if theme(dark)
_dark_root()
else
@media (prefers-color-scheme: light)
_light_root()
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)
set_darkmode() _dark_root()
if hexo-config('style.darkmode') == 'always'
set_darkmode()

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

@ -23,6 +23,8 @@
>p >p
text-indent: 'calc(%s * 2)' % var(--fsp) text-indent: 'calc(%s * 2)' % var(--fsp)
text-align: justify text-align: justify
ol,ul
margin-left: 0.5em
h1,h2,h3,h4,h5,h6 h1,h2,h3,h4,h5,h6
text-align: center text-align: center
a.headerlink a.headerlink
@ -108,14 +110,18 @@
margin: auto margin: auto
display: block display: block
.md-text li:not([class]) a:not([class]), .md-text p:not([class]) a:not([class]) .md-text li:not([class]) a:not([class])
.md-text p:not([class]) a:not([class])
.md-text table a:not([class])
position: relative position: relative
text-decoration: none text-decoration: none
trans1 all trans1 all
padding: 0 2px padding: 0 2px
border-radius: 0 border-radius: 0
color: inherit
background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px
&:hover &:hover
text-decoration: none
color: var(--theme-link) color: var(--theme-link)
border-radius: 4px border-radius: 4px
background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100% background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%

1
source/css/_layout/pages/archives.styl
View File

@ -101,5 +101,6 @@
color: var(--text) color: var(--text)
background: var(--block-hover) background: var(--block-hover)
@media screen and (min-width: $device-mobile)
.post-list.author #archive .post-list.author #archive
padding: 1rem 0 padding: 1rem 0

16
source/css/_layout/partial/article-banner.styl
View File

@ -6,7 +6,7 @@
.article.banner .article.banner
.bg+.content .bg+.content
min-height: 240px min-height: 224px
--text-banner: white --text-banner: white
--button-hover-bg: rgba(white, 0.25) --button-hover-bg: rgba(white, 0.25)
@ -32,7 +32,7 @@
.article.banner .article.banner
.bg+.content .bg+.content
trans1 all trans1 all
--blur-bg: rgba(black, 0.1) --blur-bg: rgba(black, 0)
--blur-px: 0px --blur-px: 0px
--blur-sat: 100% --blur-sat: 100%
background: var(--blur-bg) background: var(--blur-bg)
@ -48,12 +48,10 @@
.article.banner .article.banner
--button-hover-bg: rgba(black, 0.05) --button-hover-bg: rgba(black, 0.05)
set_darkmode() ondark()
.article.banner
--button-hover-bg: rgba(white, 0.15) --button-hover-bg: rgba(white, 0.15)
if theme(dark)
if hexo-config('style.darkmode') == 'auto' ondark()
else if theme(auto)
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)
set_darkmode() ondark()
if hexo-config('style.darkmode') == 'always'
set_darkmode()

5
source/css/_layout/partial/article-footer.styl
View File

@ -30,11 +30,6 @@
word-break: break-all word-break: break-all
p p
--fsp: $fsp2 --fsp: $fsp2
a
text-decoration: none
color: unset
&:hover
text-decoration: underline
section+section section+section
margin-top: 1rem margin-top: 1rem
padding-top: 1rem padding-top: 1rem

2
source/css/_layout/sidebar/footer.styl
View File

@ -19,3 +19,5 @@
z-index: 1 z-index: 1
filter: unset filter: unset
background: var(--alpha100) background: var(--alpha100)
img
border-radius: 2px

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

@ -66,7 +66,7 @@ set_dynamic_color($theme)
--theme-link: #ffe659 --theme-link: #ffe659
set_text_white() set_text_white()
set_darkmode_tags() _dark_tags()
set_dynamic_color($theme) set_dynamic_color($theme)
--theme: $theme --theme: $theme
--theme-border: hsl(hue($theme), 50, 24) --theme-border: hsl(hue($theme), 50, 24)
@ -104,9 +104,10 @@ set_darkmode_tags()
.colorful[color='warning'],.colorful[color='light'] .colorful[color='warning'],.colorful[color='light']
set_text_black() set_text_black()
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
set_darkmode_tags()
if hexo-config('style.darkmode') == 'always' if theme(dark)
set_darkmode_tags() _dark_tags()
else if theme(auto)
@media (prefers-color-scheme: dark)
_dark_tags()

2
source/css/_layout/tag-plugins/image.styl
View File

@ -24,7 +24,7 @@
color: var(--text-p1) color: var(--text-p1)
&:hover &:hover
background: var(--card) !important background: var(--card) !important
color: $color-hover color: $color-theme
.image-meta .image-meta
display: flex display: flex
justify-content: center justify-content: center

2
source/css/_layout/tag-plugins/quot.styl
View File

@ -30,7 +30,7 @@
h3,h4,h5,h6 h3,h4,h5,h6
font-size: $fsh3 font-size: $fsh3
p p
--fsp: $fsh4 font-size: calc(var(--fsp) + 2px)
color: var(--text) color: var(--text)
// type=text // type=text

8
source/css/_layout/tag-plugins/timeline.styl
View File

@ -139,7 +139,10 @@
text-decoration: none text-decoration: none
border-bottom: 2px solid $color-theme border-bottom: 2px solid $color-theme
trans1 all trans1 all
background: none
&:hover &:hover
background: none
border-radius: 0
border-bottom: 2px solid $color-hover border-bottom: 2px solid $color-hover
>p:first-child:not([class]) a:not([class]) >p:first-child:not([class]) a:not([class])
padding: 0 padding: 0
@ -148,7 +151,10 @@
text-decoration: none text-decoration: none
border-bottom: 2px solid $color-theme border-bottom: 2px solid $color-theme
trans1 all trans1 all
background: none
&:hover &:hover
background: none
border-radius: 0
border-bottom: 2px solid $color-hover border-bottom: 2px solid $color-hover
@ -191,7 +197,7 @@
padding: 0 0.5rem padding: 0 0.5rem
display: flex display: flex
align-items: center align-items: center
border-color: var(--block-border) border-color: $color-link
&:first-child &:first-child
margin-left: 0 margin-left: 0
&:last-child &:last-child

2
source/css/_layout/widgets/timeline.styl
View File

@ -40,6 +40,8 @@
.tag-plugin.timeline[api] .body .footer .tag-plugin.timeline[api] .body .footer
background: none background: none
a.item
border-color: var(--text)
.l_left .widget-wrapper.timeline .body .l_left .widget-wrapper.timeline .body

5
source/css/_layout/widgets/widgets.styl
View File

@ -73,7 +73,12 @@
.widget-header .widget-header
padding-left: var(--gap-padding) padding-left: var(--gap-padding)
padding-right: var(--gap-padding) padding-right: var(--gap-padding)
// 小屏幕
@media screen and (max-width: $device-laptop) @media screen and (max-width: $device-laptop)
.widget-wrapper .widget-wrapper
margin-top: var(--gap-margin) margin-top: var(--gap-margin)
border-radius: $border-card border-radius: $border-card
// 大屏幕
@media screen and (min-width: $device-laptop)
.widget-wrapper.markdown .widget-body
background: var(--block)

12
source/css/_plugins/comments/twikoo.styl
View File

@ -106,15 +106,15 @@
.tk-comments-no .tk-comments-no
color: var(--text-p1); color: var(--text-p1);
set_darkmode_comments() _dark_comments()
.cmt-body.twikoo .cmt-body.twikoo
--twikoo-lighttext: $color-link; --twikoo-lighttext: $color-link;
--twikoo-secondtext: var(--text-p2); --twikoo-secondtext: var(--text-p2);
--twikoo-theme: $color-theme; --twikoo-theme: $color-theme;
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
set_darkmode_comments()
if hexo-config('style.darkmode') == 'always' if theme(dark)
set_darkmode_comments() _dark_comments()
else if theme(auto)
@media (prefers-color-scheme: dark)
_dark_comments()

11
source/css/_plugins/comments/waline.styl
View File

@ -37,8 +37,8 @@
--waline-avatar-radius: 50%; --waline-avatar-radius: 50%;
--waline-box-shadow: none; --waline-box-shadow: none;
.cmt-body.waline
@media (prefers-color-scheme: dark) ondark()
--waline-white: #000; --waline-white: #000;
--waline-light-grey: #666; --waline-light-grey: #666;
--waline-dark-grey: #999; --waline-dark-grey: #999;
@ -55,11 +55,14 @@
/* 其他颜色 */ /* 其他颜色 */
--waline-info-bgcolor: #272727; --waline-info-bgcolor: #272727;
--waline-info-color: #666; --waline-info-color: #666;
.wl-count .wl-count
@media (prefers-color-scheme: dark)
padding: .375em; padding: .375em;
font-weight: bold; font-weight: bold;
font-size: 1.25em; font-size: 1.25em;
color: #fff; color: #fff;
if theme(dark)
ondark()
else if theme(auto)
@media (prefers-color-scheme: dark)
ondark()

11
source/css/_plugins/mermaid.styl
View File

@ -24,7 +24,7 @@ pre.mermaid
stroke: var(--block-border) !important stroke: var(--block-border) !important
fill: var(--block) !important fill: var(--block) !important
set_mermaid_darkmode() _dark_mermaid()
.mermaid .mermaid
fill: #ccc !important fill: #ccc !important
@ -117,9 +117,8 @@ set_mermaid_darkmode()
fill: #ccc fill: #ccc
if hexo-config('style.darkmode') == 'auto' if theme(dark)
_dark_mermaid()
else if theme(auto)
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)
set_mermaid_darkmode() _dark_mermaid()
if hexo-config('style.darkmode') == 'always'
set_mermaid_darkmode()