[feat] colorful tag
This commit is contained in:
xaoxuu
parent
e1f617f582
commit
6d0b4f38f7
13
_config.yml
13
_config.yml
|
|
@ -339,18 +339,17 @@ style:
|
|||
code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
|
||||
text-align: left
|
||||
color:
|
||||
common:
|
||||
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
|
||||
background: 'hsl(212 16% 98%)' # 浅色背景颜色
|
||||
block: 'hsl(212 8% 95%)' # 块背景颜色
|
||||
code: 'hsl(14 100% 48%)' # 行内代码颜色
|
||||
text: 'hsl(0 0% 20%)' # 文本颜色
|
||||
# 主题色配置（不会根据明暗动态调整，请设置为通用的颜色）
|
||||
theme: 'hsl(192 98% 55%)' # 主题色
|
||||
accent: 'hsl(14 100% 57%)' # 强调色
|
||||
link: 'hsl(207 90% 54%)' # 超链接颜色
|
||||
button: 'hsl(192 98% 55%)' # 按钮颜色
|
||||
hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
|
||||
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
|
||||
dynamic:
|
||||
background: 'hsl(212 16% 98%)' # 浅色背景颜色
|
||||
block: 'hsl(212 8% 95%)' # 块背景颜色
|
||||
code: 'hsl(14 100% 48%)' # 行内代码颜色
|
||||
text: 'hsl(0 0% 20%)' # 文本颜色
|
||||
animated_avatar:
|
||||
animate: auto # auto, always
|
||||
background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
|
||||
*
|
||||
* poetry:
|
||||
* {% poetry [align:center] [title] [author:作者] [date:日期] [footer:footer] %}
|
||||
* {% poetry [title] [author:作者] [date:日期] [footer:footer] %}
|
||||
* body
|
||||
* {% endpoetry %}
|
||||
*
|
||||
|
|
@ -13,13 +13,11 @@
|
|||
|
||||
hexo.extend.tag.register('poetry', function(args, content) {
|
||||
var el = '';
|
||||
args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']);
|
||||
args = hexo.args.map(args, ['author', 'date', 'footer'], ['title']);
|
||||
|
||||
el += '<div class="tag-plugin poetry"';
|
||||
if (args.align) {
|
||||
el += ' align="' + args.align + '"';
|
||||
}
|
||||
el += '>';
|
||||
el += '<div class="content">'
|
||||
if (args.title) {
|
||||
el += '<div class="title">';
|
||||
el += args.title;
|
||||
|
|
@ -43,6 +41,7 @@ hexo.extend.tag.register('poetry', function(args, content) {
|
|||
el += args.footer;
|
||||
el += '</div>';
|
||||
}
|
||||
el += '</div>'
|
||||
el += '</div>';
|
||||
return el;
|
||||
}, {ends: true});
|
||||
|
|
|
|||
|
|
@ -38,14 +38,18 @@ hexo.extend.tag.register('quot', function(args) {
|
|||
return el;
|
||||
}
|
||||
if (args.el.includes('h')) {
|
||||
el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">';
|
||||
el += '<div' + ' class="tag-plugin quot">'
|
||||
el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>';
|
||||
el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>';
|
||||
el += content();
|
||||
el += '</' + args.el + '>';
|
||||
el += '</div>'
|
||||
} else {
|
||||
el += '<' + args.el + ' class="tag-plugin quot"' + type + '>';
|
||||
el += '<div' + ' class="tag-plugin quot">'
|
||||
el += '<' + args.el + ' class="content"' + type + '>';
|
||||
el += content();
|
||||
el += '</' + args.el + '>';
|
||||
el += '</div>'
|
||||
}
|
||||
return el;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* tag.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
|
||||
* 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
|
||||
*
|
||||
* {% tag text href [color:color] %}
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const tag_colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
|
||||
var tag_index = 0;
|
||||
|
||||
hexo.extend.tag.register('tag', function(args) {
|
||||
args = hexo.args.map(args, ['color'], ['text', 'href']);
|
||||
if (args.color == null) {
|
||||
const default_color = hexo.theme.config.tag_plugins.tag?.default_color
|
||||
if (default_color) {
|
||||
args.color = default_color
|
||||
} else {
|
||||
args.color = tag_colors[tag_index]
|
||||
tag_index += 1
|
||||
if (tag_index >= tag_colors.length) {
|
||||
tag_index = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
var el = '';
|
||||
el += '<a class="tag-plugin tag"';
|
||||
el += ' ' + hexo.args.joinTags(args, ['color', 'href']).join(' ');
|
||||
el += '>';
|
||||
el += args.text;
|
||||
el += '</a>';
|
||||
return el;
|
||||
});
|
||||
|
|
@ -5,6 +5,6 @@ blockquote
|
|||
padding: 0.5rem 0.75rem
|
||||
background: var(--block)
|
||||
$bd-left = 4px
|
||||
border-left: $bd-left solid hsl($dynamic-block-h, $dynamic-block-s, $dynamic-block-l * 0.8)
|
||||
border-left: $bd-left solid var(--text-meta)
|
||||
border-radius: $bd-left $border-block $border-block $bd-left
|
||||
color: var(--text-p2)
|
||||
|
|
@ -15,7 +15,6 @@ p>code:not([class]),li>code:not([class])
|
|||
border-radius: $border-block
|
||||
overflow: hidden
|
||||
background: var(--block)
|
||||
border: 1px solid var(--block-border)
|
||||
line-height: 1.5
|
||||
font-family: $ff-code
|
||||
box-sizing: border-box
|
||||
|
|
@ -35,7 +34,6 @@ p>code:not([class]),li>code:not([class])
|
|||
background: var(--block-hover)
|
||||
border-top-left-radius: "calc(%s - 1px)" % $border-block
|
||||
border-top-right-radius: "calc(%s - 1px)" % $border-block
|
||||
border-bottom: 1px solid var(--block-border)
|
||||
span
|
||||
margin-right: 4px
|
||||
>table
|
||||
|
|
@ -102,7 +100,6 @@ table:not([class])
|
|||
>.hljs
|
||||
padding: 1rem
|
||||
border-radius: $border-block
|
||||
border: 1px solid var(--block-border)
|
||||
line-height: 1.5
|
||||
box-sizing: border-box
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@require('_defines/const')
|
||||
|
||||
// 通用主题色
|
||||
$color-theme = convert(hexo-config('style.color.common.theme'))
|
||||
$color-accent = convert(hexo-config('style.color.common.accent'))
|
||||
$color-link = convert(hexo-config('style.color.common.link'))
|
||||
$color-button = convert(hexo-config('style.color.common.button'))
|
||||
$color-hover = convert(hexo-config('style.color.common.hover'))
|
||||
$color-theme = convert(hexo-config('style.color.theme'))
|
||||
$color-accent = convert(hexo-config('style.color.accent'))
|
||||
$color-link = convert(hexo-config('style.color.link'))
|
||||
$color-button = convert(hexo-config('style.color.button'))
|
||||
$color-hover = convert(hexo-config('style.color.hover'))
|
||||
|
||||
// 动态颜色
|
||||
$dynamic-background = convert(hexo-config('style.color.dynamic.background'))
|
||||
$dynamic-block = convert(hexo-config('style.color.dynamic.block'))
|
||||
$dynamic-code = convert(hexo-config('style.color.dynamic.code'))
|
||||
$dynamic-text = convert(hexo-config('style.color.dynamic.text'))
|
||||
$color-background = convert(hexo-config('style.color.background'))
|
||||
$color-block = convert(hexo-config('style.color.block'))
|
||||
$color-code = convert(hexo-config('style.color.code'))
|
||||
$color-text = convert(hexo-config('style.color.text'))
|
||||
|
||||
// @font-face
|
||||
// font-family: 'Dosis'
|
||||
|
|
|
|||
|
|
@ -1,56 +1,56 @@
|
|||
$dynamic-background-h = hue($dynamic-background)
|
||||
$dynamic-background-s = saturation($dynamic-background)
|
||||
$dynamic-background-l = lightness($dynamic-background)
|
||||
$color-background-h = hue($color-background)
|
||||
$color-background-s = saturation($color-background)
|
||||
$color-background-l = lightness($color-background)
|
||||
|
||||
$dynamic-block-h = hue($dynamic-block)
|
||||
$dynamic-block-s = saturation($dynamic-block)
|
||||
$dynamic-block-l = lightness($dynamic-block)
|
||||
$color-block-h = hue($color-block)
|
||||
$color-block-s = saturation($color-block)
|
||||
$color-block-l = lightness($color-block)
|
||||
|
||||
$dynamic-code-h = hue($dynamic-code)
|
||||
$dynamic-code-s = saturation($dynamic-code)
|
||||
$dynamic-code-l = lightness($dynamic-code)
|
||||
$color-code-h = hue($color-code)
|
||||
$color-code-s = saturation($color-code)
|
||||
$color-code-l = lightness($color-code)
|
||||
|
||||
$dynamic-text-h = hue($dynamic-text)
|
||||
$dynamic-text-s = saturation($dynamic-text)
|
||||
$dynamic-text-l = lightness($dynamic-text)
|
||||
$color-text-h = hue($color-text)
|
||||
$color-text-s = saturation($color-text)
|
||||
$color-text-l = lightness($color-text)
|
||||
|
||||
set_text_dark()
|
||||
--text-p0: hsl($dynamic-text-h, $dynamic-text-s, 0)
|
||||
--text-p1: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l)
|
||||
--text-p2: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 0.75)
|
||||
--text-p3: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.25)
|
||||
--text-p4: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.5)
|
||||
--text-meta: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 2)
|
||||
--text-code: hsl($dynamic-code-h, $dynamic-code-s, $dynamic-code-l * 1)
|
||||
--text-p0: hsl($color-text-h, $color-text-s, 0)
|
||||
--text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
|
||||
--text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
|
||||
--text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
|
||||
--text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
|
||||
--text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
|
||||
--text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1)
|
||||
|
||||
set_text_light()
|
||||
--text-p0: hsl($dynamic-text-h, $dynamic-text-s, 100)
|
||||
--text-p1: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.25)
|
||||
--text-p2: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.5)
|
||||
--text-p3: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1)
|
||||
--text-p4: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.25)
|
||||
--text-meta: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.5)
|
||||
--text-code: hsl($dynamic-code-h, $dynamic-code-s, 48)
|
||||
--text-p0: hsl($color-text-h, $color-text-s, 100)
|
||||
--text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
|
||||
--text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
|
||||
--text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
|
||||
--text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
|
||||
--text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
|
||||
--text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1.25)
|
||||
|
||||
:root
|
||||
--site-bg: hsl($dynamic-background-h, $dynamic-background-s, 98)
|
||||
--card: hsl($dynamic-block-h, $dynamic-block-s, 100)
|
||||
--block: hsl($dynamic-block-h, $dynamic-block-s, 95)
|
||||
--block-border: hsl($dynamic-block-h, $dynamic-block-s, 90)
|
||||
--block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92)
|
||||
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100)
|
||||
--site-bg: hsl($color-background-h, $color-background-s, 98)
|
||||
--card: hsl($color-block-h, $color-block-s, 100)
|
||||
--block: hsl($color-block-h, $color-block-s, 95)
|
||||
--block-border: hsl($color-block-h, $color-block-s, 90)
|
||||
--block-hover: hsl($color-block-h, $color-block-s, 92)
|
||||
--block-lighten: hsl($color-block-h, $color-block-s, 100)
|
||||
set_text_dark()
|
||||
--theme-bg: $color-theme
|
||||
--theme-bg2: $color-theme
|
||||
--theme-link: $color-link
|
||||
|
||||
set_darkmode()
|
||||
:root
|
||||
--site-bg: hsl($dynamic-background-h, $dynamic-background-s / 2, 16)
|
||||
--card: hsl($dynamic-block-h, $dynamic-block-s * 1.5, 25)
|
||||
--block: hsl($dynamic-block-h, $dynamic-block-s, 12)
|
||||
--block-border: hsl($dynamic-block-h, $dynamic-block-s, 24)
|
||||
--block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9)
|
||||
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30)
|
||||
--site-bg: hsl($color-background-h, $color-background-s / 2, 16)
|
||||
--card: hsl($color-block-h, $color-block-s * 1.5, 25)
|
||||
--block: hsl($color-block-h, $color-block-s, 12)
|
||||
--block-border: hsl($color-block-h, $color-block-s, 24)
|
||||
--block-hover: hsl($color-block-h, $color-block-s, 9)
|
||||
--block-lighten: hsl($color-block-h, $color-block-s, 30)
|
||||
set_text_light()
|
||||
@media screen and (max-width: $device-mobile-max)
|
||||
--site-bg: black
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ h1.article-title
|
|||
.md-text.content
|
||||
position: relative
|
||||
margin-bottom: 2rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
// display: flex
|
||||
// flex-direction: column
|
||||
&.indent
|
||||
>p:not([class])
|
||||
text-indent: 'calc(%s * 2)' % $fs-p
|
||||
|
|
|
|||
|
|
@ -13,13 +13,20 @@ set_text_black()
|
|||
|
||||
set_dynamic_color($theme)
|
||||
--theme: $theme
|
||||
--theme-bg: hsl(hue($theme), 100, 95)
|
||||
--theme-border: hsl(hue($theme), 90, 50)
|
||||
--theme-bg1: hsl(hue($theme), 90, 90)
|
||||
--theme-bg2: hsl(hue($theme), 80, 95)
|
||||
--theme-border: hsl(hue($theme), 50, 80)
|
||||
--text-p0: hsl(hue($theme), 50, 24)
|
||||
--text-p1: hsl(hue($theme), 40, 24)
|
||||
--text-p2: hsl(hue($theme), 90, 24)
|
||||
|
||||
.tag-plugin
|
||||
--theme: var(--text-p1)
|
||||
--theme-border: var(--block-border)
|
||||
--theme-bg: var(--block)
|
||||
--theme-bg1: hsl(hue($color-theme), 90, 90)
|
||||
--theme-bg2: var(--block)
|
||||
&.tag
|
||||
--text-p2: hsl(hue($color-theme), 90, 24)
|
||||
|
||||
.tag-plugin[color='red']
|
||||
set_dynamic_color($c-red)
|
||||
|
|
@ -37,30 +44,36 @@ set_dynamic_color($theme)
|
|||
set_dynamic_color($c-purple)
|
||||
|
||||
.tag-plugin[color='light']
|
||||
--theme-bg: white
|
||||
--theme-bg2: white
|
||||
|
||||
.tag-plugin[color='dark']
|
||||
--theme-bg: #333
|
||||
--theme-bg2: #333
|
||||
set_text_white()
|
||||
|
||||
.tag-plugin[color='warning']
|
||||
--theme: $c-yellow
|
||||
--theme-border: #ffe659
|
||||
--theme-bg: #ffe659
|
||||
--theme-bg2: #ffe659
|
||||
--theme-link: #ff453a
|
||||
|
||||
.tag-plugin[color='error']
|
||||
--theme: $c-yellow
|
||||
--theme-border: #ff453a
|
||||
--theme-bg: #ff453a
|
||||
--theme-bg2: #ff453a
|
||||
--theme-link: #ffe659
|
||||
set_text_white()
|
||||
|
||||
set_darkmode_tags()
|
||||
set_dynamic_color($theme)
|
||||
--theme: $theme
|
||||
--theme-bg: hsl(hue($theme), 30, 20)
|
||||
--theme-border: hsl(hue($theme), 90, 40)
|
||||
--theme-bg1: hsl(hue($theme), 80, 20)
|
||||
--theme-bg2: hsl(hue($theme), 16, 16)
|
||||
--theme-border: hsl(hue($theme), 50, 24)
|
||||
--text-p0: hsl(hue($theme), 80, 80)
|
||||
--text-p1: hsl(hue($theme), 64, 90)
|
||||
--text-p2: hsl(hue($theme), 80, 72)
|
||||
.tag-plugin.tag
|
||||
set_dynamic_color($color-theme)
|
||||
.tag-plugin[color='red']
|
||||
set_dynamic_color($c-red)
|
||||
.tag-plugin[color='orange']
|
||||
|
|
@ -77,11 +90,11 @@ set_darkmode_tags()
|
|||
set_dynamic_color($c-purple)
|
||||
.tag-plugin[color='light']
|
||||
--theme-border: white
|
||||
--theme-bg: #fff
|
||||
--theme-bg2: #fff
|
||||
|
||||
.tag-plugin[color='dark']
|
||||
--theme-border: black
|
||||
--theme-bg: #111
|
||||
--theme-bg2: #111
|
||||
set_text_white()
|
||||
|
||||
.tag-plugin[color='warning'],.tag-plugin[color='light']
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ details.folding
|
|||
margin: 1rem 0
|
||||
border-radius: $border-block
|
||||
font-size: $fs-14
|
||||
background: var(--theme-bg)
|
||||
background: var(--theme-bg2)
|
||||
border: 1px solid var(--theme-border)
|
||||
summary
|
||||
cursor: pointer
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
>.bottom
|
||||
margin: 0 1rem 1rem
|
||||
.title
|
||||
font-size: $fs-15
|
||||
font-size: 1rem
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.md-text .link-card
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.md-text .tag-plugin.mark
|
||||
padding: 0 1px
|
||||
border-radius: 2px
|
||||
background: var(--theme-bg)
|
||||
background: var(--theme-bg2)
|
||||
border: 1px solid var(--theme-border)
|
||||
color: var(--text-p0)
|
||||
&[color=dark]
|
||||
border-color: var(--theme-bg)
|
||||
border-color: var(--theme-bg2)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
margin-bottom: 1rem
|
||||
padding: 0 1rem
|
||||
border-radius: $border-block
|
||||
background: var(--theme-bg)
|
||||
background: var(--theme-bg2)
|
||||
border: 1px solid var(--theme-border)
|
||||
color: var(--text-p1)
|
||||
>.title
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
.md-text .tag-plugin.poetry
|
||||
align-self: center
|
||||
&[align=center]
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
.content
|
||||
>.title
|
||||
font-weight: 500
|
||||
font-size: 1rem
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
font-size: $fs-12
|
||||
|
||||
// 描边修饰
|
||||
.md-text .tag-plugin.poetry
|
||||
.md-text .tag-plugin.poetry .content
|
||||
padding-left: 1rem
|
||||
position: relative
|
||||
&:before
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
.md-text .tag-plugin.quot
|
||||
text-align: center
|
||||
position: relative
|
||||
align-items: center
|
||||
max-width 400px
|
||||
.md-text .tag-plugin.quot:not(span)
|
||||
display: inline-flex
|
||||
align-self: center
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.content:not(span)
|
||||
display: flex
|
||||
align-items: center
|
||||
border-bottom: none
|
||||
font-weight: 700
|
||||
&:first-child
|
||||
|
|
@ -17,23 +18,26 @@
|
|||
padding: 16px 20px 8px
|
||||
line-height: 1.2
|
||||
|
||||
.md-text .tag-plugin.quot .content
|
||||
max-width 400px
|
||||
position: relative
|
||||
// override
|
||||
.md-text.content
|
||||
.quot:not(span)
|
||||
color: var(--text-p0)
|
||||
h1.quot
|
||||
.tag-plugin.quot
|
||||
h1
|
||||
font-size: $fs-h1
|
||||
font-weight: 900
|
||||
padding: 20px 32px 12px 32px
|
||||
@media screen and (max-width: $device-mobile)
|
||||
padding: 20px 24px 12px
|
||||
h2.quot,h3.quot,h4.quot,h5.quot,h6.quot
|
||||
h2,h3,h4,h5,h6
|
||||
font-size: $fs-h3
|
||||
p.quot
|
||||
p
|
||||
font-size: $fs-h4
|
||||
color: var(--text-p0)
|
||||
|
||||
// type=text
|
||||
.md-text .tag-plugin.quot[type=text]:not(span)
|
||||
.md-text .tag-plugin.quot
|
||||
.content[type=text]:not(span)
|
||||
&:before,&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
|
|
@ -49,14 +53,14 @@
|
|||
bottom: 0
|
||||
border-right: 6px solid $color-accent
|
||||
border-bottom: 6px solid $color-accent
|
||||
.md-text.content h1.quot[type=text]
|
||||
h1.content[type=text]
|
||||
&:before,&:after
|
||||
width: 12px
|
||||
height: 20px
|
||||
border-width: 8px
|
||||
|
||||
// type=icon
|
||||
.md-text .tag-plugin.quot[type=icon]:not(span)
|
||||
.md-text .tag-plugin.quot .content[type=icon]:not(span)
|
||||
.icon
|
||||
height: 1.5em
|
||||
display: inline-block
|
||||
|
|
@ -69,7 +73,7 @@
|
|||
margin-left: .5rem
|
||||
|
||||
// inline quot
|
||||
.md-text span.tag-plugin.quot
|
||||
.md-text span.tag-plugin.quot .content
|
||||
font-weight: 500
|
||||
&:before,&:after
|
||||
color: $color-accent
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
.md-text .tag-plugin.tag
|
||||
padding: 0px 4px
|
||||
border-radius: 4px
|
||||
background: var(--theme-bg1)
|
||||
color: var(--text-p2)
|
||||
margin: 2px 0
|
||||
display: inline-block
|
||||
font-size: $fs-14
|
||||
trans2 background color
|
||||
&:hover
|
||||
background: var(--text-p2)
|
||||
color: var(--theme-bg1)
|
||||
|
||||
|
|
@ -55,12 +55,10 @@
|
|||
border: 0
|
||||
a
|
||||
margin: 0
|
||||
&:hover
|
||||
box-shadow: none
|
||||
background: var(--block)
|
||||
&.active
|
||||
box-shadow: none
|
||||
position: relative
|
||||
background: none
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
|
|
@ -70,6 +68,9 @@
|
|||
left: 'calc(50% - 0.5 * %s)' % @width
|
||||
border-radius: 4px
|
||||
background: $color-theme
|
||||
&:hover
|
||||
box-shadow: none
|
||||
background: var(--block)
|
||||
|
||||
.buttons
|
||||
margin: 1rem 0
|
||||
|
|
|
|||
Loading…
Reference in New Issue