css

scripts/tags/copy.js

@@ -32,19 +32,17 @@ hexo.extend.tag.register('copy', function(args) {
   }
 
   var el = '';
-  el += '<div class="tag-plugin copy">';
-
-  el += '<div class="link-box"';
+  el += '<div class="tag-plugin copy"';
   if (args.width) {
     el += ' width="' + args.width + '"';
   }
   el += '>';
+  
   el += '<input class="copy-area" readonly id="' + generate_id(text) + '"';
   el += ' value="' + text + '">';
   el += '<button class="copy-btn" onclick="util.copy(&quot;' + generate_id(text) + '&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>';
 
   el += '</div>';
   return el;

source/css/_layout/tag-plugins/copy.styl

@@ -1,17 +1,18 @@
 .md .tag-plugin.copy
   display: flex
-  .link-box
-    background: var(--block)
-    border-radius: $border-block
-    border: 1px solid var(--block-border)
-    overflow: hidden
-    max-width: 100%
-    display: flex
-    width: 320px
-    &[width='max']
-      width: 100%
-    @media screen and (max-width: $device-mobile-425)
-      min-width: 100%
+  justify-content: space-between
+  box-sizing: border-box
+  background: var(--block)
+  border-radius: $border-block
+  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%
+
   input.copy-area
     display: inline-block
     padding: 1em
@@ -23,7 +24,6 @@
     display: inline-block
     background: var(--block-hover)
     line-height: 0
-    height: 100%
     font-size: 1rem
     padding: 0.5rem 1rem
     color: var(--text-p2)

source/css/_layout/tag-plugins/timeline.styl

@@ -66,3 +66,5 @@
     display: none
   p,.highlight,ol,ul,.tag-plugin
     margin: .5rem 0
+  .tag-plugin.copy
+    width: 240px