[opt] style

_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%)' # 主题色

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;

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 = ''
+  var el = ``
-  el += '<div class="tag-plugin copy"'
+  el += `<div class="tag-plugin copy">`
-  if (args.width) {
+  el += `<input class="copy-area" id="${copy_id}" value="${text}">`
-    el += ' width="' + args.width + '"'
+  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 += '>'
+  el += `</button>`
-  el += '<input class="copy-area" readonly id="' + copy_id + '"'
+  el += `</div>`
-  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>'
   return el
 }

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;}

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)
+$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)

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

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
+  width: 100%
-  max-width: 100%
-  &[width='max']
-    width: 100%
-  @media screen and (max-width: $device-mobile-425)
-    min-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)

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;
+    setTimeout(function(){ document.body.removeChild(el) }, d);
-      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);
   },
 
 }