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-01-05 19:43:39 +08:00
parent 53d499fe9d
commit e321fa17a0
8 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_config.yml
View File

@ -245,7 +245,9 @@ tag_plugins:
# {% image %}
image:
fancybox: false # true, false
# {% copy xxx %}
copy:
toast: 复制成功
# {% timeline %}
timeline:
max-height: 80vh
@ -425,7 +427,7 @@ style:
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
background: 'hsl(212 16% 98%)' # 浅色背景颜色
block: 'hsl(212 8% 95%)' # 块背景颜色
code: 'hsl(14 100% 48%)' # 行内代码颜色
code: 'hsl(0 0% 10%)' # 行内代码颜色
text: 'hsl(0 0% 20%)' # 文本颜色
# 主题色配置（不会根据明暗动态调整，请设置为通用的颜色）
theme: 'hsl(192 98% 55%)' # 主题色

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

@ -7,7 +7,7 @@ if (page.layout === 'wiki' && page.wiki) {
if (page.sidebar == undefined) {
if (page.layout == 'post' && page.content) {
page.sidebar = theme.sidebar.widgets.post;
} else if (page.layout == 'wiki' && page.content && page.wiki) {
} else if (page.layout == 'wiki' && page.wiki) {
let proj = theme.wiki.tree[page.wiki];
if (proj?.sidebar) {
page.sidebar = proj.sidebar;

23
scripts/tags/lib/copy.js
View File

@ -12,7 +12,7 @@
var copy_index = 0
module.exports = ctx => function(args) {
args = ctx.args.map(args, ['width', 'git'], ['text'])
args = ctx.args.map(args, ['git'], ['text'])
if (args == undefined || args.text == undefined) {
return ''
}
@ -31,19 +31,14 @@ module.exports = ctx => function(args) {
}
const copy_id = 'copy_' + ++copy_index
const toast = ctx.theme.config.tag_plugins.copy.toast
var el = ''
el += '<div class="tag-plugin copy"'
if (args.width) {
el += ' width="' + args.width + '"'
}
el += '>'
el += '<input class="copy-area" readonly id="' + copy_id + '"'
el += ' value="' + text + '">'
el += '<button class="copy-btn" onclick="util.copy(&quot;' + copy_id + '&quot;,&quot;Copied!&quot;)">'
el += '<svg class="icon copy-btn" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>'
el += '</button>'
el += '</div>'
var el = ``
el += `<div class="tag-plugin copy">`
el += `<input class="copy-area" id="${copy_id}" value="${text}">`
el += `<button class="copy-btn" onclick="util.copy(&quot;${copy_id}&quot;,&quot;${toast}&quot;)">`
el += `<svg class="icon copy-btn" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>`
el += `</button>`
el += `</div>`
return el
}

30
source/css/_common/toast.styl
View File

@ -1,16 +1,36 @@
div.toast
max-width: 60%
padding: 1rem 3rem
padding: 1rem 2rem
line-height: 1.5
color: var(--text-p1)
font-weight: 500
text-align: center
border-radius: $border-card
border-radius: 8px
background: var(--card)
position: fixed
top: 50%
left: 50%
transform: translate(-50%, -50%)
top: 32px
transform: translateX(-50%)
z-index: 9
disable-select()
box-shadow: $boxshadow-float
box-shadow: $boxshadow-toast
visibility: hidden
&.show
visibility: visible
-webkit-animation: fadein 0.5s, fadeout 0.5s 2s
animation: fadein 0.5s, fadeout 0.5s 2s
@-webkit-keyframes fadein
from {top: -64px; opacity: 0;}
to {top: 32px; opacity: 1;}
@keyframes fadein
from {top: -64px; opacity: 0;}
to {top: 32px; opacity: 1;}
@-webkit-keyframes fadeout
from {top: 32px; opacity: 1;}
to {top: -64px; opacity: 0;}
@keyframes fadeout
from {top: 32px; opacity: 1;}
to {top: -64px; opacity: 0;}

3
source/css/_custom.styl
View File

@ -91,4 +91,5 @@ $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
$boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
$boxshadow-card-float = 0 12px 16px -4px rgba(0, 0, 0, 0.2)
$boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)
$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)
$boxshadow-toast = 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.2)

1
source/css/_layout/list.styl
View File

@ -164,6 +164,7 @@
line-height: 1
margin-bottom: 0.75rem
.cap
--theme-block: var(--block)
background: var(--theme-block)
padding: 2px 4px
border-radius: 2px

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

@ -2,16 +2,11 @@
display: flex
justify-content: space-between
box-sizing: border-box
background: var(--block)
background: var(--card)
border-radius: $border-bar
border: 1px solid var(--block-border)
overflow: hidden
width: 320px
max-width: 100%
&[width='max']
width: 100%
@media screen and (max-width: $device-mobile-425)
min-width: 100%
width: 100%
input.copy-area
display: inline-block
@ -22,13 +17,12 @@
text-indent: 1rem
button.copy-btn
margin: 0
line-height: 3
border-left: 1px solid var(--block-border)
display: inline-block
background: var(--block-hover)
background: var(--block)
line-height: 0
font-size: 1rem
padding: 0 .75rem
color: var(--text-p2)
&:hover
background: var(--card)
background: var(--block-hover)

14
source/js/main.js
View File

@ -44,7 +44,7 @@ const util = {
el.select();
document.execCommand("Copy");
if (msg && msg.length > 0) {
hud.toast(msg);
hud.toast(msg, 2500);
}
}
},
@ -59,17 +59,15 @@ const util = {
const hud = {
toast: (msg, duration) => {
duration = isNaN(duration) ? 2000 : duration;
const d = Number(isNaN(duration) ? 2000 : duration);
var el = document.createElement('div');
el.classList.add('toast');
el.classList.add('show');
el.innerHTML = msg;
document.body.appendChild(el);
setTimeout(function () {
var d = 0.5;
el.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
el.style.opacity = '0';
setTimeout(function () { document.body.removeChild(el) }, d * 1000);
}, duration);
setTimeout(function(){ document.body.removeChild(el) }, d);
},
}