css
This commit is contained in:
parent
f6b22a26f8
commit
16b25112b2
|
@ -168,9 +168,8 @@ plugins:
|
||||||
interval: 100 # ms
|
interval: 100 # ms
|
||||||
scale: 1 # 0.1~1
|
scale: 1 # 0.1~1
|
||||||
|
|
||||||
darkmode:
|
style:
|
||||||
enable: #true
|
darkmode: auto # set 'auto' to enable, set 'false' to disable
|
||||||
js: /js/plugins/darkmode.js
|
|
||||||
|
|
||||||
default:
|
default:
|
||||||
avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg
|
avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg
|
||||||
|
|
|
@ -121,9 +121,6 @@
|
||||||
if ('<%- theme.plugins.preload.enable %>' == 'true') {
|
if ('<%- theme.plugins.preload.enable %>' == 'true') {
|
||||||
stellar.plugins.preload = Object.assign(<%- JSON.stringify(theme.plugins.preload) %>);
|
stellar.plugins.preload = Object.assign(<%- JSON.stringify(theme.plugins.preload) %>);
|
||||||
}
|
}
|
||||||
if ('<%- theme.plugins.darkmode.enable %>' == 'true') {
|
|
||||||
stellar.plugins.darkmode = Object.assign(<%- JSON.stringify(theme.plugins.darkmode) %>);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- required -->
|
<!-- required -->
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
// 默认组件
|
// 默认组件
|
||||||
if (page.sidebar == undefined) {
|
if (page.sidebar == undefined) {
|
||||||
if (page.layout == 'post' && page.content) {
|
if (page.layout == 'post' && page.content) {
|
||||||
page.sidebar = ['toc', 'recent'];
|
page.sidebar = ['toc'];
|
||||||
} else if (page.layout == 'wiki' && page.content) {
|
} else if (page.layout == 'wiki' && page.content) {
|
||||||
page.sidebar = ['toc', 'wiki_more'];
|
page.sidebar = ['toc', 'wiki_more'];
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -30,9 +30,6 @@ function layout_toc() {
|
||||||
<%- __('meta.toc') %>
|
<%- __('meta.toc') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
</span>
|
</span>
|
||||||
<a class='cap-action' id='s-top' title='<%- __("meta.back_to_top") %>' href='#start'>
|
|
||||||
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10505"><path d="M884.526 163.323H208.881c-30.516 0-55.25 24.934-55.25 55.685s24.734 55.685 55.25 55.685h675.645c30.515 0 55.255-24.93 55.255-55.685s-24.74-55.685-55.255-55.685zM568.253 336.87a56.765 56.765 0 0 0-4.06-3.701c-0.63-0.517-1.29-0.968-1.935-1.454-0.799-0.605-1.577-1.224-2.406-1.787-0.779-0.528-1.583-0.978-2.386-1.46-0.748-0.45-1.485-0.926-2.253-1.341-0.81-0.44-1.649-0.814-2.483-1.208-0.8-0.384-1.588-0.784-2.407-1.132-0.814-0.338-1.643-0.61-2.463-0.906-0.875-0.323-1.745-0.66-2.641-0.932-0.825-0.25-1.66-0.435-2.489-0.645-0.916-0.236-1.817-0.492-2.75-0.681-0.962-0.19-1.935-0.307-2.902-0.445-0.814-0.118-1.618-0.272-2.442-0.354a55.163 55.163 0 0 0-5.438-0.276h-0.015c-0.267 0-0.528 0.036-0.794 0.036a54.856 54.856 0 0 0-39.86 16.271l-279.413 281.61c-21.576 21.75-21.576 57.006 0 78.756a54.876 54.876 0 0 0 39.07 16.312 54.835 54.835 0 0 0 39.066-16.312l186.67-188.145V898.09c0 30.75 24.74 55.685 55.256 55.685s55.255-24.934 55.255-55.685v-387.42L769.526 697.22a54.871 54.871 0 0 0 39.065 16.312 54.835 54.835 0 0 0 39.066-16.312c21.576-21.75 21.576-57.006 0-78.756L568.253 336.87z" p-id="10506"></path></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'>
|
<div class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'>
|
||||||
<% if (page.layout == 'wiki' && page.wiki) { %>
|
<% if (page.layout == 'wiki' && page.wiki) { %>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang='<%- page.lang %>'>
|
<html lang='<%- page.lang %>'>
|
||||||
<%- partial('_partial/head') %>
|
<%- partial('_partial/head') %>
|
||||||
<body theme='<%- page.dark ? "dark" : "light" %>'>
|
<body>
|
||||||
<%- partial('_partial/main/article/wiki_cover') %>
|
<%- partial('_partial/main/article/wiki_cover') %>
|
||||||
<div class='l_body' id='start'>
|
<div class='l_body' id='start'>
|
||||||
<aside class='l_left'>
|
<aside class='l_left'>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
body[theme='light']
|
:root
|
||||||
--blur-bg: alpha(white, .5)
|
--blur-bg: alpha(white, .5)
|
||||||
body[theme='dark']
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
|
:root
|
||||||
--blur-bg: alpha(black, .5)
|
--blur-bg: alpha(black, .5)
|
||||||
.blur
|
.blur
|
||||||
background: var(--blur-bg)
|
background: var(--blur-bg)
|
||||||
|
|
|
@ -34,7 +34,7 @@ h6
|
||||||
margin: 2rem 1rem 0rem
|
margin: 2rem 1rem 0rem
|
||||||
.post-title
|
.post-title
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
margin: 1rem 0
|
margin: 0.5rem 0
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
font-size: $fs-h3
|
font-size: $fs-h3
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
|
|
|
@ -10,20 +10,22 @@ $color-inlinecode = #ff7043
|
||||||
$color-cat = #FF7844
|
$color-cat = #FF7844
|
||||||
$color-cat-hover = darken($color-cat, 20)
|
$color-cat-hover = darken($color-cat, 20)
|
||||||
|
|
||||||
// 浅色页面
|
// 浅色
|
||||||
$c-site-bg-light = #f8f8f8
|
$light-site-bg = #f8f8f8
|
||||||
$c-block-light = #f2f2f2
|
$light-block = #f2f2f2
|
||||||
$c-title-light = #000
|
$light-title = #000
|
||||||
$c-text-light = #222
|
$light-text = #222
|
||||||
$c-card-light = white
|
$light-card = white
|
||||||
|
|
||||||
// 深色页面
|
// 深色
|
||||||
$c-site-bg-dark = black
|
$dark-site-bg = #20252B
|
||||||
$c-block-dark = #111
|
$dark-block = #40454B
|
||||||
$c-title-dark = #fff
|
$dark-title = #fff
|
||||||
$c-text-dark = #fff
|
$dark-text = #eee
|
||||||
$c-card-dark = #333
|
$dark-card = #2E353D
|
||||||
|
|
||||||
|
// 移动端深色背景(OLED调成纯黑可以省电)
|
||||||
|
$dark-site-bg-mobile = black
|
||||||
|
|
||||||
|
|
||||||
// @font-face
|
// @font-face
|
||||||
|
@ -59,7 +61,7 @@ $border-block = 4px
|
||||||
|
|
||||||
// 可以动态变化的属性
|
// 可以动态变化的属性
|
||||||
:root
|
:root
|
||||||
--width-left: 280px
|
--width-left: 256px
|
||||||
--width-main: 680px
|
--width-main: 680px
|
||||||
--gap-l: 16px
|
--gap-l: 16px
|
||||||
// desktop or larger
|
// desktop or larger
|
||||||
|
|
|
@ -1,44 +1,36 @@
|
||||||
:root
|
:root
|
||||||
--site-bg: $c-site-bg-light
|
--site-bg: $light-site-bg
|
||||||
--block: $c-block-light
|
--block: $light-block
|
||||||
--block-border: mix($c-block-light, $c-text-light, 95)
|
--block-border: darken($light-block, 5)
|
||||||
--block-hover: mix($c-block-light, $c-text-light, 98)
|
--block-hover: darken($light-block, 2)
|
||||||
--text-p0: $c-title-light
|
--text-p0: $light-title
|
||||||
--text-p1: $c-text-light
|
--text-p1: $light-text
|
||||||
--text-p2: mix($c-text-light, $c-site-bg-light, 80)
|
--text-p2: mix($light-text, $light-site-bg, 80)
|
||||||
--text-p3: mix($c-text-light, $c-site-bg-light, 60)
|
--text-p3: mix($light-text, $light-site-bg, 60)
|
||||||
--text-meta: mix($c-text-light, $c-site-bg-light, 20)
|
--text-meta: mix($light-text, $light-site-bg, 20)
|
||||||
--card: $c-card-light
|
--card: $light-card
|
||||||
--theme-highlight: darken($color-theme, 5)
|
--theme-highlight: darken($color-theme, 5)
|
||||||
--theme-bg: mix($color-theme, $c-card-light, 10)
|
--theme-bg: mix($color-theme, $light-card, 10)
|
||||||
|
|
||||||
// 页面的dark主题
|
|
||||||
body[theme='dark']
|
|
||||||
--site-bg: $c-site-bg-dark
|
|
||||||
--block: $c-block-dark
|
|
||||||
--block-border: mix($c-block-dark, $c-text-dark, 90)
|
|
||||||
--block-hover: mix($c-block-dark, $c-text-dark, 95)
|
|
||||||
--text-p0: $c-title-dark
|
|
||||||
--text-p1: $c-text-dark
|
|
||||||
--text-p2: mix($c-text-dark, $c-site-bg-dark, 70)
|
|
||||||
--text-p3: mix($c-text-dark, $c-site-bg-dark, 45)
|
|
||||||
--text-meta: mix($c-text-dark, $c-site-bg-dark, 30)
|
|
||||||
--card: $c-card-dark
|
|
||||||
--theme-highlight: $color-theme
|
|
||||||
--theme-bg: mix($color-theme, $c-card-dark, 10)
|
|
||||||
|
|
||||||
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
// 系统的dark模式
|
// 系统的dark模式
|
||||||
@media (prefers-color-scheme: dark)
|
@media (prefers-color-scheme: dark)
|
||||||
:root
|
:root
|
||||||
--site-bg: $c-site-bg-dark
|
--site-bg: $dark-site-bg
|
||||||
--block: $c-block-dark
|
--block: $dark-block
|
||||||
--block-border: mix($c-block-dark, $c-text-dark, 90)
|
--block-border: lighten($dark-block, 10)
|
||||||
--block-hover: mix($c-block-dark, $c-text-dark, 95)
|
--block-hover: darken($dark-block, 1)
|
||||||
--text-p0: $c-title-dark
|
--text-p0: $dark-title
|
||||||
--text-p1: $c-text-dark
|
--text-p1: $dark-text
|
||||||
--text-p2: mix($c-text-dark, $c-site-bg-dark, 70)
|
--text-p2: mix($dark-text, $dark-site-bg, 70)
|
||||||
--text-p3: mix($c-text-dark, $c-site-bg-dark, 45)
|
--text-p3: mix($dark-text, $dark-site-bg, 45)
|
||||||
--text-meta: mix($c-text-dark, $c-site-bg-dark, 30)
|
--text-meta: mix($dark-text, $dark-site-bg, 30)
|
||||||
--card: $c-card-dark
|
--card: $dark-card
|
||||||
--theme-highlight: $color-theme
|
--theme-highlight: $color-theme
|
||||||
--theme-bg: mix($color-theme, $c-card-dark, 10)
|
--theme-bg: mix($color-theme, $dark-card, 10)
|
||||||
|
@media screen and (max-width: $device-tablet)
|
||||||
|
--site-bg: $dark-site-bg-mobile
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
|
html
|
||||||
|
filter: brightness(80%) !important
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
.l_body.mobile
|
.l_body.mobile
|
||||||
.l_left
|
.l_left
|
||||||
transition: transform .5s ease-out
|
transition: transform .3s ease-out
|
||||||
.l_body.mobile.sidebar
|
.l_body.mobile.sidebar
|
||||||
.l_left
|
.l_left
|
||||||
transform: translateX(0px)
|
transform: translateX(0px)
|
||||||
|
|
|
@ -1,22 +1,28 @@
|
||||||
.l_main
|
.l_main
|
||||||
position: relative
|
position: relative
|
||||||
padding-bottom: "calc(1 * %s)" % var(--gap-l)
|
padding-bottom: "calc(1 * %s)" % var(--gap-l)
|
||||||
|
@media screen and (min-width: 1200px)
|
||||||
|
margin-left: "calc(2 * %s)" % var(--gap-l)
|
||||||
|
margin-right: "calc(0.75 * %s)" % var(--width-left)
|
||||||
@media screen and (min-width: $device-tablet)
|
@media screen and (min-width: $device-tablet)
|
||||||
padding-top: "calc(2 * %s)" % var(--gap-l)
|
padding-top: "calc(2 * %s)" % var(--gap-l)
|
||||||
header
|
header
|
||||||
margin: 2rem 1rem 1rem
|
padding: 2rem 1rem 0
|
||||||
padding: 0.25rem
|
border-bottom: 2px solid var(--block)
|
||||||
background: var(--block)
|
margin-bottom: 1.5rem
|
||||||
border-radius: 6px
|
|
||||||
.logo-wrap
|
.logo-wrap
|
||||||
margin: 0.5rem 0.75rem
|
margin: 0.5rem 0
|
||||||
.avatar
|
|
||||||
width: 32px
|
|
||||||
height: 32px
|
|
||||||
border: none
|
|
||||||
.title
|
|
||||||
font-size: 1.5rem
|
|
||||||
nav.menu
|
nav.menu
|
||||||
margin: -3px
|
background: none
|
||||||
|
padding: 0
|
||||||
|
justify-content: space-between
|
||||||
a.nav-item
|
a.nav-item
|
||||||
margin: 2px
|
margin: 0
|
||||||
|
margin-bottom: -2px
|
||||||
|
padding: 0.5rem 1rem
|
||||||
|
border-radius: 0
|
||||||
|
border-bottom: 2px solid var(--block)
|
||||||
|
a.nav-item.active, a.nav-item:hover
|
||||||
|
background: none
|
||||||
|
color: $color-theme
|
||||||
|
border-bottom-color: $color-theme
|
||||||
|
|
|
@ -18,6 +18,8 @@ article.md.content
|
||||||
margin-top: 0.5rem
|
margin-top: 0.5rem
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
color: var(--text-p0)
|
color: var(--text-p0)
|
||||||
|
h2:first-child
|
||||||
|
margin-top: 0
|
||||||
h2,h3,h4,h5,h6
|
h2,h3,h4,h5,h6
|
||||||
color: var(--text-p0)
|
color: var(--text-p0)
|
||||||
padding-top: 1rem
|
padding-top: 1rem
|
||||||
|
@ -37,8 +39,6 @@ article.md
|
||||||
margin-top: 3rem
|
margin-top: 3rem
|
||||||
border-bottom: 1px solid var(--block-border)
|
border-bottom: 1px solid var(--block-border)
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
&:first-child
|
|
||||||
margin-top: 0
|
|
||||||
h3
|
h3
|
||||||
margin-top: 1.5rem
|
margin-top: 1.5rem
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
|
|
|
@ -24,3 +24,6 @@
|
||||||
transform: translateY(-1px)
|
transform: translateY(-1px)
|
||||||
background: linear-gradient(145deg, #ddd, #fff)
|
background: linear-gradient(145deg, #ddd, #fff)
|
||||||
box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff
|
box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff
|
||||||
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
|
box-shadow: none
|
||||||
|
|
|
@ -62,13 +62,13 @@ nav.menu
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
padding: 0.375rem 0.75rem
|
padding: 0.375rem 0.75rem
|
||||||
color: var(--text-p3)
|
color: var(--text-p3)
|
||||||
|
text-align: center
|
||||||
&.active, &:hover
|
&.active, &:hover
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
background: var(--card)
|
background: var(--card)
|
||||||
|
|
||||||
.l_left .menu a.nav-item
|
.l_left .menu a.nav-item
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.l_left .widgets
|
.l_left .widgets
|
||||||
margin: 1rem 0
|
margin: 1rem 0
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// toc padding
|
// toc padding
|
||||||
#toc .widget-body
|
#toc .widget-body
|
||||||
|
border-left: 2px solid var(--block-hover)
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
ul ul, ul ol
|
ul ul, ul ol
|
||||||
padding-left: 0
|
padding-left: 0
|
||||||
|
@ -56,7 +57,6 @@
|
||||||
color: var(--theme-highlight) !important
|
color: var(--theme-highlight) !important
|
||||||
|
|
||||||
#toc .doc-tree
|
#toc .doc-tree
|
||||||
border-left: 2px solid var(--block-hover)
|
|
||||||
a.doc-tree-link
|
a.doc-tree-link
|
||||||
color: var(--text-p3)
|
color: var(--text-p3)
|
||||||
padding: 0.5rem
|
padding: 0.5rem
|
||||||
|
@ -67,12 +67,10 @@
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
&.active
|
&.active
|
||||||
color: var(--text-p2)
|
color: var(--text-p2)
|
||||||
font-size: 1rem
|
font-size: $fs-14
|
||||||
&:hover
|
&:hover
|
||||||
background: var(--block-hover)
|
background: var(--block-hover)
|
||||||
|
&.active
|
||||||
// #toc .widget-body.wiki
|
a.doc-tree-link
|
||||||
// .doc-tree.active
|
background: var(--block-hover)
|
||||||
// border-color: var(--text-meta)
|
margin: 2px 0
|
||||||
// .doc-tree.active:only-child
|
|
||||||
// border-color: var(--block-hover)
|
|
||||||
|
|
|
@ -159,22 +159,22 @@
|
||||||
--theme: $c-blue
|
--theme: $c-blue
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='red']
|
.tag-plugin.checkbox[color='red']
|
||||||
--theme: mix($c-red, $c-card-light, 90)
|
--theme: mix($c-red, $light-card, 90)
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='orange']
|
.tag-plugin.checkbox[color='orange']
|
||||||
--theme: mix($c-orange, $c-card-light, 90)
|
--theme: mix($c-orange, $light-card, 90)
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='yellow']
|
.tag-plugin.checkbox[color='yellow']
|
||||||
--theme: mix($c-yellow, $c-card-light, 90)
|
--theme: mix($c-yellow, $light-card, 90)
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='green']
|
.tag-plugin.checkbox[color='green']
|
||||||
--theme: mix($c-green, $c-card-light, 90)
|
--theme: mix($c-green, $light-card, 90)
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='cyan']
|
.tag-plugin.checkbox[color='cyan']
|
||||||
--theme: mix($c-cyan, $c-card-light, 90)
|
--theme: mix($c-cyan, $light-card, 90)
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='blue']
|
.tag-plugin.checkbox[color='blue']
|
||||||
--theme: mix($c-blue, $c-card-light, 100)
|
--theme: mix($c-blue, $light-card, 100)
|
||||||
|
|
||||||
.tag-plugin.checkbox[color='purple']
|
.tag-plugin.checkbox[color='purple']
|
||||||
--theme: mix($c-purple, $c-card-light, 90)
|
--theme: mix($c-purple, $light-card, 90)
|
||||||
|
|
|
@ -3,32 +3,32 @@
|
||||||
--theme-bg: var(--block)
|
--theme-bg: var(--block)
|
||||||
|
|
||||||
.tag-plugin[color='red']
|
.tag-plugin[color='red']
|
||||||
--theme: mix($c-red, $c-card-light, 40)
|
--theme: mix($c-red, $light-card, 40)
|
||||||
--theme-bg: mix($c-red, $c-card-light, 10)
|
--theme-bg: mix($c-red, $light-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='orange']
|
.tag-plugin[color='orange']
|
||||||
--theme: mix($c-orange, $c-card-light, 40)
|
--theme: mix($c-orange, $light-card, 40)
|
||||||
--theme-bg: mix($c-orange, $c-card-light, 10)
|
--theme-bg: mix($c-orange, $light-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='yellow']
|
.tag-plugin[color='yellow']
|
||||||
--theme: mix($c-yellow, $c-card-light, 40)
|
--theme: mix($c-yellow, $light-card, 40)
|
||||||
--theme-bg: mix($c-yellow, $c-card-light, 10)
|
--theme-bg: mix($c-yellow, $light-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='green']
|
.tag-plugin[color='green']
|
||||||
--theme: mix($c-green, $c-card-light, 40)
|
--theme: mix($c-green, $light-card, 40)
|
||||||
--theme-bg: mix($c-green, $c-card-light, 10)
|
--theme-bg: mix($c-green, $light-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='cyan']
|
.tag-plugin[color='cyan']
|
||||||
--theme: mix($c-cyan, $c-card-light, 40)
|
--theme: mix($c-cyan, $light-card, 40)
|
||||||
--theme-bg: mix($c-cyan, $c-card-light, 10)
|
--theme-bg: mix($c-cyan, $light-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='blue']
|
.tag-plugin[color='blue']
|
||||||
--theme: mix($c-blue, $c-card-light, 40)
|
--theme: mix($c-blue, $light-card, 40)
|
||||||
--theme-bg: mix($c-blue, $c-card-light, 10)
|
--theme-bg: mix($c-blue, $light-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='purple']
|
.tag-plugin[color='purple']
|
||||||
--theme: mix($c-purple, $c-card-light, 40)
|
--theme: mix($c-purple, $light-card, 40)
|
||||||
--theme-bg: mix($c-purple, $c-card-light, 10)
|
--theme-bg: mix($c-purple, $light-card, 10)
|
||||||
|
|
||||||
|
|
||||||
.tag-plugin[color='white']
|
.tag-plugin[color='white']
|
||||||
|
@ -36,37 +36,38 @@
|
||||||
|
|
||||||
|
|
||||||
.tag-plugin[color='dark']
|
.tag-plugin[color='dark']
|
||||||
--theme-bg: mix(black, $c-card-light, 75)
|
--theme-bg: mix(black, $light-card, 75)
|
||||||
color: var(--card) !important
|
color: var(--card) !important
|
||||||
|
|
||||||
body[theme='dark']
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
.tag-plugin[color='red']
|
.tag-plugin[color='red']
|
||||||
--theme: mix($c-red, $c-card-dark, 40)
|
--theme: mix($c-red, $dark-card, 40)
|
||||||
--theme-bg: mix($c-red, $c-card-dark, 10)
|
--theme-bg: mix($c-red, $dark-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='orange']
|
.tag-plugin[color='orange']
|
||||||
--theme: mix($c-orange, $c-card-dark, 40)
|
--theme: mix($c-orange, $dark-card, 40)
|
||||||
--theme-bg: mix($c-orange, $c-card-dark, 10)
|
--theme-bg: mix($c-orange, $dark-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='yellow']
|
.tag-plugin[color='yellow']
|
||||||
--theme: mix($c-yellow, $c-card-dark, 40)
|
--theme: mix($c-yellow, $dark-card, 40)
|
||||||
--theme-bg: mix($c-yellow, $c-card-dark, 10)
|
--theme-bg: mix($c-yellow, $dark-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='green']
|
.tag-plugin[color='green']
|
||||||
--theme: mix($c-green, $c-card-dark, 40)
|
--theme: mix($c-green, $dark-card, 40)
|
||||||
--theme-bg: mix($c-green, $c-card-dark, 10)
|
--theme-bg: mix($c-green, $dark-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='cyan']
|
.tag-plugin[color='cyan']
|
||||||
--theme: mix($c-cyan, $c-card-dark, 40)
|
--theme: mix($c-cyan, $dark-card, 40)
|
||||||
--theme-bg: mix($c-cyan, $c-card-dark, 10)
|
--theme-bg: mix($c-cyan, $dark-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='blue']
|
.tag-plugin[color='blue']
|
||||||
--theme: mix($c-blue, $c-card-dark, 40)
|
--theme: mix($c-blue, $dark-card, 40)
|
||||||
--theme-bg: mix($c-blue, $c-card-dark, 10)
|
--theme-bg: mix($c-blue, $dark-card, 10)
|
||||||
|
|
||||||
.tag-plugin[color='purple']
|
.tag-plugin[color='purple']
|
||||||
--theme: mix($c-purple, $c-card-dark, 40)
|
--theme: mix($c-purple, $dark-card, 40)
|
||||||
--theme-bg: mix($c-purple, $c-card-dark, 10)
|
--theme-bg: mix($c-purple, $dark-card, 10)
|
||||||
|
|
||||||
|
|
||||||
.tag-plugin[color='white']
|
.tag-plugin[color='white']
|
||||||
|
@ -74,5 +75,5 @@ body[theme='dark']
|
||||||
color: var(--card)
|
color: var(--card)
|
||||||
|
|
||||||
.tag-plugin[color='dark']
|
.tag-plugin[color='dark']
|
||||||
--theme-bg: mix(black, $c-card-dark, 75)
|
--theme-bg: mix(black, $dark-card, 75)
|
||||||
color: var(--text-p0) !important
|
color: var(--text-p0) !important
|
||||||
|
|
|
@ -46,9 +46,15 @@
|
||||||
&:hover
|
&:hover
|
||||||
background: linear-gradient(145deg, #eee, #fff)
|
background: linear-gradient(145deg, #eee, #fff)
|
||||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
|
||||||
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
|
box-shadow: none
|
||||||
&:active
|
&:active
|
||||||
background: linear-gradient(145deg, #eee, #fff)
|
background: linear-gradient(145deg, #eee, #fff)
|
||||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
|
||||||
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
|
@media (prefers-color-scheme: dark)
|
||||||
|
box-shadow: none
|
||||||
.vedit
|
.vedit
|
||||||
.vctrl span
|
.vctrl span
|
||||||
padding: 0
|
padding: 0
|
||||||
|
@ -205,12 +211,7 @@
|
||||||
p
|
p
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
|
|
||||||
|
if hexo-config('style.darkmode') == 'auto'
|
||||||
body[theme='dark']
|
|
||||||
.cmt-body.valine
|
|
||||||
--more-before: 0 0
|
|
||||||
--more-after: #393c40
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark)
|
@media (prefers-color-scheme: dark)
|
||||||
.cmt-body.valine
|
.cmt-body.valine
|
||||||
--more-before: 0 0
|
--more-before: 0 0
|
||||||
|
|
|
@ -127,9 +127,6 @@ const init = {
|
||||||
$("#toc a.toc-link").click(function(e) {
|
$("#toc a.toc-link").click(function(e) {
|
||||||
l_body.classList.remove("sidebar");
|
l_body.classList.remove("sidebar");
|
||||||
});
|
});
|
||||||
$("#toc a#s-top").click(function(e) {
|
|
||||||
l_body.classList.remove("sidebar");
|
|
||||||
});
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
relativeDate: (selector) => {
|
relativeDate: (selector) => {
|
||||||
|
@ -276,8 +273,3 @@ if (stellar.plugins.preload) {
|
||||||
stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
|
stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// darkmode
|
|
||||||
if (stellar.plugins.darkmode) {
|
|
||||||
stellar.loadScript(stellar.plugins.darkmode.js, {defer:true})
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
// darkmode
|
|
||||||
const darkmode = {
|
|
||||||
toggle: () => {
|
|
||||||
alert("toggle");
|
|
||||||
},
|
|
||||||
}
|
|
Loading…
Reference in New Issue