[opt] style
This commit is contained in:
xaoxuu
parent
166540eecc
commit
20a93e4c01
|
|
@ -321,6 +321,9 @@ tag_plugins:
|
|||
icon:
|
||||
# 留空时，图标和文字颜色相同
|
||||
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:
|
||||
fancybox: false # true, false
|
||||
|
|
@ -486,7 +489,7 @@ plugins:
|
|||
typingAnimate: true # 打字机动画
|
||||
|
||||
style:
|
||||
darkmode: auto # auto / always / false
|
||||
prefers_theme: auto # auto / light / dark
|
||||
smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
|
||||
font-size:
|
||||
root: 16px # 改这个会影响全局所有文字的字号
|
||||
|
|
@ -516,7 +519,6 @@ style:
|
|||
theme: 'hsl(192 98% 55%)' # 主题色
|
||||
accent: 'hsl(14 100% 57%)' # 强调色
|
||||
link: 'hsl(207 90% 54%)' # 超链接颜色
|
||||
button: 'hsl(192 98% 55%)' # 按钮颜色
|
||||
hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
|
||||
animated_avatar:
|
||||
animate: auto # auto, always
|
||||
|
|
@ -529,7 +531,6 @@ style:
|
|||
error: 加载失败，请稍后重试。
|
||||
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%))'
|
||||
search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
|
||||
leftbar:
|
||||
# 可以设置：纯色/渐变色/图片作为背景
|
||||
# background: var(--leftbar-bg)
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@
|
|||
function layoutDiv() {
|
||||
var el = '';
|
||||
const cmt = page.cmt;
|
||||
if (cmt && cmt.service && (cmt.service.length > 0)) {
|
||||
if (cmt?.service?.length > 0) {
|
||||
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 + '"';
|
||||
for (let key of Object.keys(body)) {
|
||||
if (body[key] !== null) {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@ function layoutDiv() {
|
|||
arr.length = item.limit
|
||||
arr.forEach(post => {
|
||||
if (!post) { return }
|
||||
const isActive = post.path == page.path
|
||||
el += `<a class="item title${post.path == page.path ? ' active' : ''}" href="${url_for(post.link || post.path)}">`
|
||||
el += `<a class="item title" href="${url_for(post.link || post.path)}">`
|
||||
el += '<span class="title">'
|
||||
if (post.wiki) {
|
||||
const proj = theme.wiki.tree[post.wiki];
|
||||
|
|
@ -41,9 +40,6 @@ function layoutDiv() {
|
|||
}
|
||||
}
|
||||
el += post.title + '</span>';
|
||||
if (isActive) {
|
||||
el += icon('default:bookmark.active')
|
||||
}
|
||||
el += '</a>';
|
||||
el += '';
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ module.exports = ctx => function(args) {
|
|||
args.text = `${args.text} ${arr.join(' ')}`
|
||||
}
|
||||
if (args.color == null) {
|
||||
args.color = 'theme'
|
||||
args.color = ctx.theme.config.tag_plugins.button.default_color
|
||||
}
|
||||
var el = ''
|
||||
el += '<a class="tag-plugin colorful button"'
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ a[onclick]:hover
|
|||
|
||||
a.button.start.gradient
|
||||
position relative
|
||||
@media (prefers-color-scheme: dark)
|
||||
ondark()
|
||||
transition: 0.38s ease-out
|
||||
z-index: 0
|
||||
background: convert(hexo-config('style.gradient.start'))
|
||||
|
|
@ -58,4 +58,10 @@ a.button.start.gradient
|
|||
transition: 0.38s ease-out
|
||||
&:hover:after
|
||||
filter: blur(36px)
|
||||
opacity 1
|
||||
opacity 1
|
||||
|
||||
if theme(dark)
|
||||
ondark()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
ondark()
|
||||
|
|
|
|||
|
|
@ -25,11 +25,13 @@
|
|||
--blur-px: 16px
|
||||
--blur-bg: alpha(#fff, .4)
|
||||
trans1: all
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
--blur-bg: alpha(#000, .4)
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
ondark()
|
||||
--blur-bg: alpha(#000, .4)
|
||||
if theme(dark)
|
||||
ondark()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
ondark()
|
||||
|
||||
// 侧边栏弹出按钮
|
||||
.float-panel button
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
$color-theme = convert(hexo-config('style.color.theme'))
|
||||
$color-accent = convert(hexo-config('style.color.accent'))
|
||||
$color-link = convert(hexo-config('style.color.link'))
|
||||
$color-button = convert(hexo-config('style.color.button'))
|
||||
$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-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-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
|
||||
$ff-code = $ff-codeblock
|
||||
|
|
|
|||
|
|
@ -106,10 +106,20 @@ floatable-float()
|
|||
|
||||
hoverable-card()
|
||||
trans1 all
|
||||
@media (prefers-color-scheme: dark)
|
||||
&:hover
|
||||
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
|
||||
@media (prefers-color-scheme: light)
|
||||
onlight()
|
||||
box-shadow: $boxshadow-card
|
||||
&:hover
|
||||
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()
|
||||
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
theme($t)
|
||||
convert(hexo-config('style.prefers_theme')) == $t
|
||||
|
||||
$color-background-h = hue($color-background)
|
||||
$color-background-s = saturation($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-l = lightness($color-text)
|
||||
|
||||
set_text_dark()
|
||||
_dark_text()
|
||||
--text: hsl($color-text-h, $color-text-s, 0)
|
||||
--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)
|
||||
|
|
@ -23,7 +26,7 @@ set_text_dark()
|
|||
--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)
|
||||
|
||||
set_text_light()
|
||||
_light_text()
|
||||
--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-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
|
||||
|
|
@ -32,23 +35,24 @@ set_text_light()
|
|||
--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)
|
||||
|
||||
:root
|
||||
--site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
|
||||
--card: hsl($color-block-h, $color-block-s, 100)
|
||||
--alpha20: rgba(white, 0.2)
|
||||
--alpha50: rgba(white, 0.5)
|
||||
--alpha60: rgba(white, 0.6)
|
||||
--alpha75: rgba(white, 0.75)
|
||||
--alpha100: white
|
||||
--leftbar-bg: hsl($color-block-h, $color-block-s, 90)
|
||||
--block: hsl($color-block-h, $color-block-s, 95)
|
||||
--block-border: hsl($color-block-h, $color-block-s, 90)
|
||||
--block-hover: hsl($color-block-h, $color-block-s, 92)
|
||||
set_text_dark()
|
||||
--theme-link: $color-link
|
||||
--theme-link-opa: rgba($color-link, 0.2)
|
||||
_light_root()
|
||||
:root
|
||||
--site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
|
||||
--card: hsl($color-block-h, $color-block-s, 100)
|
||||
--alpha20: rgba(white, 0.2)
|
||||
--alpha50: rgba(white, 0.5)
|
||||
--alpha60: rgba(white, 0.6)
|
||||
--alpha75: rgba(white, 0.75)
|
||||
--alpha100: white
|
||||
--leftbar-bg: hsl($color-block-h, $color-block-s, 90)
|
||||
--block: hsl($color-block-h, $color-block-s, 95)
|
||||
--block-border: hsl($color-block-h, $color-block-s, 90)
|
||||
--block-hover: hsl($color-block-h, $color-block-s, 92)
|
||||
_dark_text()
|
||||
--theme-link: $color-link
|
||||
--theme-link-opa: rgba($color-link, 0.2)
|
||||
|
||||
set_darkmode()
|
||||
_dark_root()
|
||||
:root
|
||||
--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)
|
||||
|
|
@ -61,15 +65,17 @@ set_darkmode()
|
|||
--alpha75: rgba(black, 0.75)
|
||||
--alpha100: black
|
||||
--leftbar-bg: hsl($color-block-h, $color-block-s, 24)
|
||||
set_text_light()
|
||||
_light_text()
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
--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)
|
||||
set_darkmode()
|
||||
|
||||
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
set_darkmode()
|
||||
_dark_root()
|
||||
|
|
@ -23,6 +23,8 @@
|
|||
>p
|
||||
text-indent: 'calc(%s * 2)' % var(--fsp)
|
||||
text-align: justify
|
||||
ol,ul
|
||||
margin-left: 0.5em
|
||||
h1,h2,h3,h4,h5,h6
|
||||
text-align: center
|
||||
a.headerlink
|
||||
|
|
@ -108,14 +110,18 @@
|
|||
margin: auto
|
||||
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
|
||||
text-decoration: none
|
||||
trans1 all
|
||||
padding: 0 2px
|
||||
border-radius: 0
|
||||
color: inherit
|
||||
background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px
|
||||
&:hover
|
||||
text-decoration: none
|
||||
color: var(--theme-link)
|
||||
border-radius: 4px
|
||||
background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
|
||||
|
|
|
|||
|
|
@ -101,5 +101,6 @@
|
|||
color: var(--text)
|
||||
background: var(--block-hover)
|
||||
|
||||
.post-list.author #archive
|
||||
padding: 1rem 0
|
||||
@media screen and (min-width: $device-mobile)
|
||||
.post-list.author #archive
|
||||
padding: 1rem 0
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.article.banner
|
||||
.bg+.content
|
||||
min-height: 240px
|
||||
min-height: 224px
|
||||
--text-banner: white
|
||||
--button-hover-bg: rgba(white, 0.25)
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
.article.banner
|
||||
.bg+.content
|
||||
trans1 all
|
||||
--blur-bg: rgba(black, 0.1)
|
||||
--blur-bg: rgba(black, 0)
|
||||
--blur-px: 0px
|
||||
--blur-sat: 100%
|
||||
background: var(--blur-bg)
|
||||
|
|
@ -48,12 +48,10 @@
|
|||
|
||||
.article.banner
|
||||
--button-hover-bg: rgba(black, 0.05)
|
||||
set_darkmode()
|
||||
.article.banner
|
||||
ondark()
|
||||
--button-hover-bg: rgba(white, 0.15)
|
||||
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
set_darkmode()
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
set_darkmode()
|
||||
if theme(dark)
|
||||
ondark()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
ondark()
|
||||
|
|
|
|||
|
|
@ -30,11 +30,6 @@
|
|||
word-break: break-all
|
||||
p
|
||||
--fsp: $fsp2
|
||||
a
|
||||
text-decoration: none
|
||||
color: unset
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
section+section
|
||||
margin-top: 1rem
|
||||
padding-top: 1rem
|
||||
|
|
|
|||
|
|
@ -19,3 +19,5 @@
|
|||
z-index: 1
|
||||
filter: unset
|
||||
background: var(--alpha100)
|
||||
img
|
||||
border-radius: 2px
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ set_dynamic_color($theme)
|
|||
--theme-link: #ffe659
|
||||
set_text_white()
|
||||
|
||||
set_darkmode_tags()
|
||||
_dark_tags()
|
||||
set_dynamic_color($theme)
|
||||
--theme: $theme
|
||||
--theme-border: hsl(hue($theme), 50, 24)
|
||||
|
|
@ -104,9 +104,10 @@ set_darkmode_tags()
|
|||
.colorful[color='warning'],.colorful[color='light']
|
||||
set_text_black()
|
||||
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
set_darkmode_tags()
|
||||
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
set_darkmode_tags()
|
||||
if theme(dark)
|
||||
_dark_tags()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
_dark_tags()
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
color: var(--text-p1)
|
||||
&:hover
|
||||
background: var(--card) !important
|
||||
color: $color-hover
|
||||
color: $color-theme
|
||||
.image-meta
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
h3,h4,h5,h6
|
||||
font-size: $fsh3
|
||||
p
|
||||
--fsp: $fsh4
|
||||
font-size: calc(var(--fsp) + 2px)
|
||||
color: var(--text)
|
||||
|
||||
// type=text
|
||||
|
|
|
|||
|
|
@ -139,7 +139,10 @@
|
|||
text-decoration: none
|
||||
border-bottom: 2px solid $color-theme
|
||||
trans1 all
|
||||
background: none
|
||||
&:hover
|
||||
background: none
|
||||
border-radius: 0
|
||||
border-bottom: 2px solid $color-hover
|
||||
>p:first-child:not([class]) a:not([class])
|
||||
padding: 0
|
||||
|
|
@ -148,7 +151,10 @@
|
|||
text-decoration: none
|
||||
border-bottom: 2px solid $color-theme
|
||||
trans1 all
|
||||
background: none
|
||||
&:hover
|
||||
background: none
|
||||
border-radius: 0
|
||||
border-bottom: 2px solid $color-hover
|
||||
|
||||
|
||||
|
|
@ -191,7 +197,7 @@
|
|||
padding: 0 0.5rem
|
||||
display: flex
|
||||
align-items: center
|
||||
border-color: var(--block-border)
|
||||
border-color: $color-link
|
||||
&:first-child
|
||||
margin-left: 0
|
||||
&:last-child
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@
|
|||
|
||||
.tag-plugin.timeline[api] .body .footer
|
||||
background: none
|
||||
a.item
|
||||
border-color: var(--text)
|
||||
|
||||
|
||||
.l_left .widget-wrapper.timeline .body
|
||||
|
|
|
|||
|
|
@ -73,7 +73,12 @@
|
|||
.widget-header
|
||||
padding-left: var(--gap-padding)
|
||||
padding-right: var(--gap-padding)
|
||||
// 小屏幕
|
||||
@media screen and (max-width: $device-laptop)
|
||||
.widget-wrapper
|
||||
margin-top: var(--gap-margin)
|
||||
border-radius: $border-card
|
||||
// 大屏幕
|
||||
@media screen and (min-width: $device-laptop)
|
||||
.widget-wrapper.markdown .widget-body
|
||||
background: var(--block)
|
||||
|
|
|
|||
|
|
@ -106,15 +106,15 @@
|
|||
.tk-comments-no
|
||||
color: var(--text-p1);
|
||||
|
||||
set_darkmode_comments()
|
||||
_dark_comments()
|
||||
.cmt-body.twikoo
|
||||
--twikoo-lighttext: $color-link;
|
||||
--twikoo-secondtext: var(--text-p2);
|
||||
--twikoo-theme: $color-theme;
|
||||
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
@media (prefers-color-scheme: dark)
|
||||
set_darkmode_comments()
|
||||
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
set_darkmode_comments()
|
||||
if theme(dark)
|
||||
_dark_comments()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
_dark_comments()
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
--waline-avatar-radius: 50%;
|
||||
--waline-box-shadow: none;
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
.cmt-body.waline
|
||||
ondark()
|
||||
--waline-white: #000;
|
||||
--waline-light-grey: #666;
|
||||
--waline-dark-grey: #999;
|
||||
|
|
@ -55,11 +55,14 @@
|
|||
/* 其他颜色 */
|
||||
--waline-info-bgcolor: #272727;
|
||||
--waline-info-color: #666;
|
||||
.wl-count
|
||||
padding: .375em;
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
color: #fff;
|
||||
|
||||
.wl-count
|
||||
@media (prefers-color-scheme: dark)
|
||||
padding: .375em;
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
color: #fff;
|
||||
|
||||
if theme(dark)
|
||||
ondark()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
ondark()
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ pre.mermaid
|
|||
stroke: var(--block-border) !important
|
||||
fill: var(--block) !important
|
||||
|
||||
set_mermaid_darkmode()
|
||||
_dark_mermaid()
|
||||
.mermaid
|
||||
fill: #ccc !important
|
||||
|
||||
|
|
@ -117,9 +117,8 @@ set_mermaid_darkmode()
|
|||
fill: #ccc
|
||||
|
||||
|
||||
if hexo-config('style.darkmode') == 'auto'
|
||||
if theme(dark)
|
||||
_dark_mermaid()
|
||||
else if theme(auto)
|
||||
@media (prefers-color-scheme: dark)
|
||||
set_mermaid_darkmode()
|
||||
|
||||
if hexo-config('style.darkmode') == 'always'
|
||||
set_mermaid_darkmode()
|
||||
_dark_mermaid()
|
||||
|
|
|
|||
Loading…
Reference in New Issue