xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

修饰文本标签

This commit is contained in:
xaoxuu 2021-08-02 14:49:14 +08:00
parent 96e4a6d7ba
commit 23ece92e91
6 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scripts/tags/inline-labels.js
View File

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

6
source/css/_layout/tag-plugins/checkbox.styl
View File

@ -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)

42
source/css/_layout/tag-plugins/common.styl
View File

@ -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

4
source/css/_layout/tag-plugins/folding.styl
View File

@ -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)

35
source/css/_layout/tag-plugins/inline-labels.styl Normal file
View File

@ -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

2
source/css/_layout/tag-plugins/note.styl
View File

@ -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