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 2021-04-02 20:24:16 +08:00
parent f6b22a26f8
commit 16b25112b2
20 changed files with 153 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_config.yml
View File

@ -168,9 +168,8 @@ plugins:
interval: 100 # ms
scale: 1 # 0.1~1
darkmode:
enable: #true
js: /js/plugins/darkmode.js
style:
darkmode: auto # set 'auto' to enable, set 'false' to disable
default:
avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg

3
layout/_partial/scripts/index.ejs
View File

@ -121,9 +121,6 @@
if ('<%- theme.plugins.preload.enable %>' == 'true') {
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>
<!-- required -->

2
layout/_partial/sidebar/index.ejs
View File

@ -2,7 +2,7 @@
// 默认组件
if (page.sidebar == undefined) {
if (page.layout == 'post' && page.content) {
page.sidebar = ['toc', 'recent'];
page.sidebar = ['toc'];
} else if (page.layout == 'wiki' && page.content) {
page.sidebar = ['toc', 'wiki_more'];
} else {

3
layout/_partial/sidebar/widgets/toc.ejs
View File

@ -30,9 +30,6 @@ function layout_toc() {
<%- __('meta.toc') %>
<% } %>
</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 class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'>
<% if (page.layout == 'wiki' && page.wiki) { %>

2
layout/layout.ejs
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang='<%- page.lang %>'>
<%- partial('_partial/head') %>
<body theme='<%- page.dark ? "dark" : "light" %>'>
<body>
<%- partial('_partial/main/article/wiki_cover') %>
<div class='l_body' id='start'>
<aside class='l_left'>

6
source/css/_common/blur.styl
View File

@ -1,6 +1,8 @@
body[theme='light']
:root
--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
background: var(--blur-bg)

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

@ -34,7 +34,7 @@ h6
margin: 2rem 1rem 0rem
.post-title
font-weight: 500
margin: 1rem 0
margin: 0.5rem 0
line-height: 1.2
font-size: $fs-h3
border-bottom: none

28
source/css/_custom.styl
View File

@ -10,20 +10,22 @@ $color-inlinecode = #ff7043
$color-cat = #FF7844
$color-cat-hover = darken($color-cat, 20)
// 浅色页面
$c-site-bg-light = #f8f8f8
$c-block-light = #f2f2f2
$c-title-light = #000
$c-text-light = #222
$c-card-light = white
// 浅色
$light-site-bg = #f8f8f8
$light-block = #f2f2f2
$light-title = #000
$light-text = #222
$light-card = white
// 深色页面
$c-site-bg-dark = black
$c-block-dark = #111
$c-title-dark = #fff
$c-text-dark = #fff
$c-card-dark = #333
// 深色
$dark-site-bg = #20252B
$dark-block = #40454B
$dark-title = #fff
$dark-text = #eee
$dark-card = #2E353D
// 移动端深色背景（OLED调成纯黑可以省电）
$dark-site-bg-mobile = black
// @font-face
@ -59,7 +61,7 @@ $border-block = 4px
// 可以动态变化的属性
:root
--width-left: 280px
--width-left: 256px
--width-main: 680px
--gap-l: 16px
// desktop or larger

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

@ -1,44 +1,36 @@
:root
--site-bg: $c-site-bg-light
--block: $c-block-light
--block-border: mix($c-block-light, $c-text-light, 95)
--block-hover: mix($c-block-light, $c-text-light, 98)
--text-p0: $c-title-light
--text-p1: $c-text-light
--text-p2: mix($c-text-light, $c-site-bg-light, 80)
--text-p3: mix($c-text-light, $c-site-bg-light, 60)
--text-meta: mix($c-text-light, $c-site-bg-light, 20)
--card: $c-card-light
--site-bg: $light-site-bg
--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-site-bg, 80)
--text-p3: mix($light-text, $light-site-bg, 60)
--text-meta: mix($light-text, $light-site-bg, 20)
--card: $light-card
--theme-highlight: darken($color-theme, 5)
--theme-bg: mix($color-theme, $c-card-light, 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)
--theme-bg: mix($color-theme, $light-card, 10)
if hexo-config('style.darkmode') == 'auto'
// 系统的dark模式
@media (prefers-color-scheme: dark)
:root
--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
--site-bg: $dark-site-bg
--block: $dark-block
--block-border: lighten($dark-block, 10)
--block-hover: darken($dark-block, 1)
--text-p0: $dark-title
--text-p1: $dark-text
--text-p2: mix($dark-text, $dark-site-bg, 70)
--text-p3: mix($dark-text, $dark-site-bg, 45)
--text-meta: mix($dark-text, $dark-site-bg, 30)
--card: $dark-card
--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

2
source/css/_layout/layout.styl
View File

@ -41,7 +41,7 @@
max-width: 100%
.l_body.mobile
.l_left
transition: transform .5s ease-out
transition: transform .3s ease-out
.l_body.mobile.sidebar
.l_left
transform: translateX(0px)

32
source/css/_layout/main.styl
View File

@ -1,22 +1,28 @@
.l_main
position: relative
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)
padding-top: "calc(2 * %s)" % var(--gap-l)
header
margin: 2rem 1rem 1rem
padding: 0.25rem
background: var(--block)
border-radius: 6px
padding: 2rem 1rem 0
border-bottom: 2px solid var(--block)
margin-bottom: 1.5rem
.logo-wrap
margin: 0.5rem 0.75rem
.avatar
width: 32px
height: 32px
border: none
.title
font-size: 1.5rem
margin: 0.5rem 0
nav.menu
margin: -3px
background: none
padding: 0
justify-content: space-between
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

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

@ -18,6 +18,8 @@ article.md.content
margin-top: 0.5rem
line-height: 1.2
color: var(--text-p0)
h2:first-child
margin-top: 0
h2,h3,h4,h5,h6
color: var(--text-p0)
padding-top: 1rem
@ -37,8 +39,6 @@ article.md
margin-top: 3rem
border-bottom: 1px solid var(--block-border)
font-weight: 400
&:first-child
margin-top: 0
h3
margin-top: 1.5rem
font-weight: 400

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

@ -24,3 +24,6 @@
transform: translateY(-1px)
background: linear-gradient(145deg, #ddd, #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

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

@ -62,13 +62,13 @@ nav.menu
overflow: hidden
padding: 0.375rem 0.75rem
color: var(--text-p3)
text-align: center
&.active, &:hover
color: var(--text-p1)
background: var(--card)
.l_left .menu a.nav-item
flex-grow: 1
text-align: center
.l_left .widgets
margin: 1rem 0

14
source/css/_layout/sidebar/toc.styl
View File

@ -1,5 +1,6 @@
// toc padding
#toc .widget-body
border-left: 2px solid var(--block-hover)
line-height: 1.2
ul ul, ul ol
padding-left: 0
@ -56,7 +57,6 @@
color: var(--theme-highlight) !important
#toc .doc-tree
border-left: 2px solid var(--block-hover)
a.doc-tree-link
color: var(--text-p3)
padding: 0.5rem
@ -67,12 +67,10 @@
font-weight: 500
&.active
color: var(--text-p2)
font-size: 1rem
font-size: $fs-14
&:hover
background: var(--block-hover)
// #toc .widget-body.wiki
// .doc-tree.active
// border-color: var(--text-meta)
// .doc-tree.active:only-child
// border-color: var(--block-hover)
&.active
a.doc-tree-link
background: var(--block-hover)
margin: 2px 0

14
source/css/_layout/tag-plugins/checkbox.styl
View File

@ -159,22 +159,22 @@
--theme: $c-blue
.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']
--theme: mix($c-orange, $c-card-light, 90)
--theme: mix($c-orange, $light-card, 90)
.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']
--theme: mix($c-green, $c-card-light, 90)
--theme: mix($c-green, $light-card, 90)
.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']
--theme: mix($c-blue, $c-card-light, 100)
--theme: mix($c-blue, $light-card, 100)
.tag-plugin.checkbox[color='purple']
--theme: mix($c-purple, $c-card-light, 90)
--theme: mix($c-purple, $light-card, 90)

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

@ -3,32 +3,32 @@
--theme-bg: var(--block)
.tag-plugin[color='red']
--theme: mix($c-red, $c-card-light, 40)
--theme-bg: mix($c-red, $c-card-light, 10)
--theme: mix($c-red, $light-card, 40)
--theme-bg: mix($c-red, $light-card, 10)
.tag-plugin[color='orange']
--theme: mix($c-orange, $c-card-light, 40)
--theme-bg: mix($c-orange, $c-card-light, 10)
--theme: mix($c-orange, $light-card, 40)
--theme-bg: mix($c-orange, $light-card, 10)
.tag-plugin[color='yellow']
--theme: mix($c-yellow, $c-card-light, 40)
--theme-bg: mix($c-yellow, $c-card-light, 10)
--theme: mix($c-yellow, $light-card, 40)
--theme-bg: mix($c-yellow, $light-card, 10)
.tag-plugin[color='green']
--theme: mix($c-green, $c-card-light, 40)
--theme-bg: mix($c-green, $c-card-light, 10)
--theme: mix($c-green, $light-card, 40)
--theme-bg: mix($c-green, $light-card, 10)
.tag-plugin[color='cyan']
--theme: mix($c-cyan, $c-card-light, 40)
--theme-bg: mix($c-cyan, $c-card-light, 10)
--theme: mix($c-cyan, $light-card, 40)
--theme-bg: mix($c-cyan, $light-card, 10)
.tag-plugin[color='blue']
--theme: mix($c-blue, $c-card-light, 40)
--theme-bg: mix($c-blue, $c-card-light, 10)
--theme: mix($c-blue, $light-card, 40)
--theme-bg: mix($c-blue, $light-card, 10)
.tag-plugin[color='purple']
--theme: mix($c-purple, $c-card-light, 40)
--theme-bg: mix($c-purple, $c-card-light, 10)
--theme: mix($c-purple, $light-card, 40)
--theme-bg: mix($c-purple, $light-card, 10)
.tag-plugin[color='white']
@ -36,37 +36,38 @@
.tag-plugin[color='dark']
--theme-bg: mix(black, $c-card-light, 75)
--theme-bg: mix(black, $light-card, 75)
color: var(--card) !important
body[theme='dark']
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
.tag-plugin[color='red']
--theme: mix($c-red, $c-card-dark, 40)
--theme-bg: mix($c-red, $c-card-dark, 10)
--theme: mix($c-red, $dark-card, 40)
--theme-bg: mix($c-red, $dark-card, 10)
.tag-plugin[color='orange']
--theme: mix($c-orange, $c-card-dark, 40)
--theme-bg: mix($c-orange, $c-card-dark, 10)
--theme: mix($c-orange, $dark-card, 40)
--theme-bg: mix($c-orange, $dark-card, 10)
.tag-plugin[color='yellow']
--theme: mix($c-yellow, $c-card-dark, 40)
--theme-bg: mix($c-yellow, $c-card-dark, 10)
--theme: mix($c-yellow, $dark-card, 40)
--theme-bg: mix($c-yellow, $dark-card, 10)
.tag-plugin[color='green']
--theme: mix($c-green, $c-card-dark, 40)
--theme-bg: mix($c-green, $c-card-dark, 10)
--theme: mix($c-green, $dark-card, 40)
--theme-bg: mix($c-green, $dark-card, 10)
.tag-plugin[color='cyan']
--theme: mix($c-cyan, $c-card-dark, 40)
--theme-bg: mix($c-cyan, $c-card-dark, 10)
--theme: mix($c-cyan, $dark-card, 40)
--theme-bg: mix($c-cyan, $dark-card, 10)
.tag-plugin[color='blue']
--theme: mix($c-blue, $c-card-dark, 40)
--theme-bg: mix($c-blue, $c-card-dark, 10)
--theme: mix($c-blue, $dark-card, 40)
--theme-bg: mix($c-blue, $dark-card, 10)
.tag-plugin[color='purple']
--theme: mix($c-purple, $c-card-dark, 40)
--theme-bg: mix($c-purple, $c-card-dark, 10)
--theme: mix($c-purple, $dark-card, 40)
--theme-bg: mix($c-purple, $dark-card, 10)
.tag-plugin[color='white']
@ -74,5 +75,5 @@ body[theme='dark']
color: var(--card)
.tag-plugin[color='dark']
--theme-bg: mix(black, $c-card-dark, 75)
--theme-bg: mix(black, $dark-card, 75)
color: var(--text-p0) !important

13
source/css/_plugins/comments/valine.styl
View File

@ -46,9 +46,15 @@
&:hover
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)
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
box-shadow: none
&:active
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)
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
box-shadow: none
.vedit
.vctrl span
padding: 0
@ -205,12 +211,7 @@
p
color: var(--text-p1)
body[theme='dark']
.cmt-body.valine
--more-before: 0 0
--more-after: #393c40
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
.cmt-body.valine
--more-before: 0 0

8
source/js/main.js
View File

@ -127,9 +127,6 @@ const init = {
$("#toc a.toc-link").click(function(e) {
l_body.classList.remove("sidebar");
});
$("#toc a#s-top").click(function(e) {
l_body.classList.remove("sidebar");
});
})
},
relativeDate: (selector) => {
@ -276,8 +273,3 @@ if (stellar.plugins.preload) {
stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
}
}
// darkmode
if (stellar.plugins.darkmode) {
stellar.loadScript(stellar.plugins.darkmode.js, {defer:true})
}

6
source/js/plugins/darkmode.js
View File

@ -1,6 +0,0 @@
// darkmode
const darkmode = {
toggle: () => {
alert("toggle");
},
}