修饰文本标签

scripts/tags/inline-labels.js

@@ -1,3 +1,10 @@
+/**
+ * 修饰文本标签 | https://github.com/xaoxuu/hexo-theme-stellar/
+ *
+ * example:
+ * {% psw 这是密码 %}
+ */
+
 'use strict';
 
 
@@ -19,3 +26,19 @@ hexo.extend.tag.register('kbd', function(args) {
 hexo.extend.tag.register('psw', function(args) {
   return `<psw>${args.join(' ')}</psw>`;
 });
+hexo.extend.tag.register('sup', function(args) {
+  args = hexo.args.map(args, ['color'], ['text']);
+  var el = '';
+  el += '<sup class="tag-plugin sup"' + ' ' + hexo.args.joinTags(args, ['color']).join(' ') + '>';
+  el += args.text;
+  el += '</sup>';
+  return el;
+});
+hexo.extend.tag.register('sub', function(args) {
+  args = hexo.args.map(args, ['color'], ['text']);
+  var el = '';
+  el += '<sub class="tag-plugin sub"' + ' ' + hexo.args.joinTags(args, ['color']).join(' ') + '>';
+  el += args.text;
+  el += '</sub>';
+  return el;
+});

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

@@ -147,11 +147,11 @@
       transform: scale(1)
   /* Colors */
   input
-    border: 2px solid var(--theme)
+    border: 2px solid var(--theme-border)
     &[type=checkbox]:checked
-      background: var(--theme)
+      background: var(--theme-border)
     &[type=radio]:checked:before
-      background: var(--theme)
+      background: var(--theme-border)
 
 
 

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

@@ -1,33 +1,41 @@
 .tag-plugin
-  --theme: var(--block-border)
+  --theme: var(--text-p1)
+  --theme-border: var(--block-border)
   --theme-bg: var(--block)
 
 .tag-plugin[color='red']
-  --theme: mix($c-red, $light-card, 40)
+  --theme: $c-red
+  --theme-border: mix($c-red, $light-card, 40)
   --theme-bg: mix($c-red, $light-card, 10)
 
 .tag-plugin[color='orange']
-  --theme: mix($c-orange, $light-card, 40)
+  --theme: $c-orange
+  --theme-border: mix($c-orange, $light-card, 40)
   --theme-bg: mix($c-orange, $light-card, 10)
 
 .tag-plugin[color='yellow']
-  --theme: mix($c-yellow, $light-card, 40)
+  --theme: $c-yellow
+  --theme-border: mix($c-yellow, $light-card, 40)
   --theme-bg: mix($c-yellow, $light-card, 10)
 
 .tag-plugin[color='green']
-  --theme: mix($c-green, $light-card, 40)
+  --theme: $c-green
+  --theme-border: mix($c-green, $light-card, 40)
   --theme-bg: mix($c-green, $light-card, 10)
 
 .tag-plugin[color='cyan']
-  --theme: mix($c-cyan, $light-card, 40)
+  --theme: $c-cyan
+  --theme-border: mix($c-cyan, $light-card, 40)
   --theme-bg: mix($c-cyan, $light-card, 10)
 
 .tag-plugin[color='blue']
-  --theme: mix($c-blue, $light-card, 40)
+  --theme: $c-blue
+  --theme-border: mix($c-blue, $light-card, 40)
   --theme-bg: mix($c-blue, $light-card, 10)
 
 .tag-plugin[color='purple']
-  --theme: mix($c-purple, $light-card, 40)
+  --theme: $c-purple
+  --theme-border: mix($c-purple, $light-card, 40)
   --theme-bg: mix($c-purple, $light-card, 10)
 
 
@@ -42,40 +50,40 @@
 if hexo-config('style.darkmode') == 'auto'
   @media (prefers-color-scheme: dark)
     .tag-plugin[color='red']
-      --theme: mix($c-red, $dark-card, 80)
+      --theme-border: mix($c-red, $dark-card, 80)
       --theme-bg: mix($c-red, $dark-card, 10)
 
     .tag-plugin[color='orange']
-      --theme: mix($c-orange, $dark-card, 80)
+      --theme-border: mix($c-orange, $dark-card, 80)
       --theme-bg: mix($c-orange, $dark-card, 10)
 
     .tag-plugin[color='yellow']
-      --theme: mix($c-yellow, $dark-card, 80)
+      --theme-border: mix($c-yellow, $dark-card, 80)
       --theme-bg: mix($c-yellow, $dark-card, 10)
 
     .tag-plugin[color='green']
-      --theme: mix($c-green, $dark-card, 80)
+      --theme-border: mix($c-green, $dark-card, 80)
       --theme-bg: mix($c-green, $dark-card, 10)
 
     .tag-plugin[color='cyan']
-      --theme: mix($c-cyan, $dark-card, 80)
+      --theme-border: mix($c-cyan, $dark-card, 80)
       --theme-bg: mix($c-cyan, $dark-card, 10)
 
     .tag-plugin[color='blue']
-      --theme: mix($c-blue, $dark-card, 80)
+      --theme-border: mix($c-blue, $dark-card, 80)
       --theme-bg: mix($c-blue, $dark-card, 10)
 
     .tag-plugin[color='purple']
-      --theme: mix($c-purple, $dark-card, 80)
+      --theme-border: mix($c-purple, $dark-card, 80)
       --theme-bg: mix($c-purple, $dark-card, 10)
 
 
     .tag-plugin[color='light']
-      --theme: white
+      --theme-border: white
       --theme-bg: #ddd
       color: var(--site-bg) !important
 
     .tag-plugin[color='dark']
-      --theme: black
+      --theme-border: black
       --theme-bg: #222
       color: var(--text-p1) !important

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

@@ -5,7 +5,7 @@ details.folding
   border-radius: $border-block
   font-size: $fs-14
   background: var(--theme-bg)
-  border: 1px solid var(--theme)
+  border: 1px solid var(--theme-border)
   summary
     cursor: pointer
     padding: .75rem 1rem
@@ -33,7 +33,7 @@ details.folding
 
 details.folding[open]
   >summary
-    border-bottom: 1px solid var(--theme)
+    border-bottom: 1px solid var(--theme-border)
     border-bottom-left-radius: 0
     border-bottom-right-radius: 0
     color: var(--text-p1)

source/css/_layout/tag-plugins/inline-labels.styl

@@ -0,0 +1,35 @@
+.md
+  u
+    text-decoration: none
+    border-bottom: 2px solid $color-hover
+  emp
+    text-decoration: none
+    border-bottom: 4px dotted $color-hover
+  wavy
+    text-decoration: underline wavy $color-hover
+  del
+    color: var(--text-p3)
+    text-decoration: line-through var(--text-p3)
+  kbd
+    border-radius: 4px
+    border: 1px solid #d2d2d2
+    border-bottom-width: 2px
+    background: var(--card)
+    padding-left: 4px
+    padding-right: 4px
+    font-family: $ff-code
+    font-weight: 700
+  psw
+    color: transparent
+    background: #a1a1a1
+    border-radius: 2px
+    trans1 background
+    margin: auto 2px
+    &:hover
+      color: inherit
+      background: none
+  sup,sub
+    color: var(--theme)
+    line-height: 1
+    font-weight: 700
+    font-family: $ff-code

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

@@ -5,7 +5,7 @@
   padding: 0 1rem
   border-radius: $border-block
   background: var(--theme-bg)
-  border: 1px solid var(--theme)
+  border: 1px solid var(--theme-border)
   color: var(--text-p1)
   >.title
     font-size: $fs-15