From e321fa17a0ddb654db1e5982a6f2a9a742e5d009 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 5 Jan 2024 19:43:39 +0800 Subject: [PATCH] [opt] style --- _config.yml | 6 +++-- layout/_partial/sidebar/index.ejs | 2 +- scripts/tags/lib/copy.js | 23 +++++++----------- source/css/_common/toast.styl | 30 ++++++++++++++++++++---- source/css/_custom.styl | 3 ++- source/css/_layout/list.styl | 1 + source/css/_layout/tag-plugins/copy.styl | 14 ++++------- source/js/main.js | 14 +++++------ 8 files changed, 52 insertions(+), 41 deletions(-) diff --git a/_config.yml b/_config.yml index f29a09c..d3d3942 100755 --- a/_config.yml +++ b/_config.yml @@ -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%)' # 主题色 diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs index 0b6a5fb..9761664 100755 --- a/layout/_partial/sidebar/index.ejs +++ b/layout/_partial/sidebar/index.ejs @@ -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; diff --git a/scripts/tags/lib/copy.js b/scripts/tags/lib/copy.js index b11dd54..22d6643 100644 --- a/scripts/tags/lib/copy.js +++ b/scripts/tags/lib/copy.js @@ -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 += '
' - el += '' - - el += '
' + var el = `` + el += `
` + el += `` + el += `` + el += `
` return el } diff --git a/source/css/_common/toast.styl b/source/css/_common/toast.styl index ea1a635..bb1704c 100644 --- a/source/css/_common/toast.styl +++ b/source/css/_common/toast.styl @@ -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;} diff --git a/source/css/_custom.styl b/source/css/_custom.styl index af07ad8..e97c2a9 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -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) \ No newline at end of file +$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) \ No newline at end of file diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl index 39202ef..5528cb8 100644 --- a/source/css/_layout/list.styl +++ b/source/css/_layout/list.styl @@ -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 diff --git a/source/css/_layout/tag-plugins/copy.styl b/source/css/_layout/tag-plugins/copy.styl index e14438d..d85f362 100644 --- a/source/css/_layout/tag-plugins/copy.styl +++ b/source/css/_layout/tag-plugins/copy.styl @@ -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) diff --git a/source/js/main.js b/source/js/main.js index d6904ba..c1755ca 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -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); + }, }