Note标签美化
样式修改
{% note color:blue 提示%} 这是修改后的效果 {% endnote %}
{% note color:green 再次提示%} 支持多种风格 {% endnote %}
themes\stellar\source\css_components\tag-plugins\note.styl
.md-text .tag-plugin.note
position: relative
padding: 0.5rem 0.8rem
border-radius: 12px
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)
margin: 1rem 0
overflow: hidden
color: var(--text-p1)
// 黑暗模式适配
[data-theme="dark"] &
background: linear-gradient(135deg, #1a1f2e 0%, #242936 100%)
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)
@media (prefers-color-scheme: dark)
background: linear-gradient(135deg, #1a1f2e 0%, #242936 100%)
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)
// 标题样式 - 精简版
>.title
--fsp: $fsp2
font-size: 0.95rem
line-height: 1.4
margin: 0 0 0.4rem 0
font-weight: 600
color: #667eea // 默认蓝色，与背景渐变呼应
display: flex
align-items: center
// 黑暗模式标题颜色
[data-theme="dark"] &
color: #7ba3ff
@media (prefers-color-scheme: dark)
color: #7ba3ff
// 移除默认的上边距
&:first-child
margin-top: 0
// 标题前的图标
&::before
content: ''
display: inline-block
width: 16px
height: 16px
margin-right: 8px
background: currentColor // 继承标题颜色
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat center
mask-size: contain
flex-shrink: 0
// 内容样式 - 小字体
>.body
&,p
--fsp: $fsp3
font-size: 0.9rem
line-height: 1.5
margin: 0
color: #4a5568
// 黑暗模式内容颜色
[data-theme="dark"] &
color: #b0b8c4
@media (prefers-color-scheme: dark)
color: #b0b8c4
// 只有内容的情况
>.body:only-child
margin: 0
// 颜色变体 - 图标和标题颜色与标签色一致
.md-text .tag-plugin.note[color="blue"]
background: linear-gradient(135deg, #e8f4fe 0%, #ffffff 100%)
>.title
color: #2196f3 // 蓝色
>.title::before
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") no-repeat center
// 黑暗模式适配 - 蓝色
[data-theme="dark"] &
background: linear-gradient(135deg, #1a2634 0%, #16202a 100%)
>.title
color: #64b5f6
@media (prefers-color-scheme: dark)
background: linear-gradient(135deg, #1a2634 0%, #16202a 100%)
>.title
color: #64b5f6
.md-text .tag-plugin.note[color="yellow"]
background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%)
>.title
color: #ffb300 // 黄色
>.title::before
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat center
// 黑暗模式适配 - 黄色
[data-theme="dark"] &
background: linear-gradient(135deg, #2d2616 0%, #241f12 100%)
>.title
color: #ffd54f
@media (prefers-color-scheme: dark)
background: linear-gradient(135deg, #2d2616 0%, #241f12 100%)
>.title
color: #ffd54f
.md-text .tag-plugin.note[color="red"]
background: linear-gradient(135deg, #ffeaea 0%, #ffffff 100%)
>.title
color: #f44336 // 红色
>.title::before
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") no-repeat center
// 黑暗模式适配 - 红色
[data-theme="dark"] &
background: linear-gradient(135deg, #2d1616 0%, #241212 100%)
>.title
color: #e57373
@media (prefers-color-scheme: dark)
background: linear-gradient(135deg, #2d1616 0%, #241212 100%)
>.title
color: #e57373
.md-text .tag-plugin.note[color="green"]
background: linear-gradient(135deg, #e8f5e8 0%, #ffffff 100%)
>.title
color: #4caf50 // 绿色
>.title::before
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") no-repeat center
// 黑暗模式适配 - 绿色
[data-theme="dark"] &
background: linear-gradient(135deg, #162418 0%, #121c14 100%)
>.title
color: #81c784
@media (prefers-color-scheme: dark)
background: linear-gradient(135deg, #162418 0%, #121c14 100%)
>.title
color: #81c784
.md-text .tag-plugin.note[color="purple"]
background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 100%)
>.title
color: #9c27b0 // 紫色
>.title::before
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") no-repeat center
// 黑暗模式适配 - 紫色
[data-theme="dark"] &
background: linear-gradient(135deg, #24162a 0%, #1f1224 100%)
>.title
color: #ba68c8
@media (prefers-color-scheme: dark)
background: linear-gradient(135deg, #24162a 0%, #1f1224 100%)
>.title
color: #ba68c8
// 保持原有的特殊子元素样式
.md-text .tag-plugin.note[color]
code
background: none
.md-text .tag-plugin.note[child=codeblock]
padding: 0
background: var(--theme-codeblock)
border-radius: 8px
>.title
color: var(--text) // 代码块标题使用默认文本颜色
>.title, >.body:only-child
margin-top: 0
>.body
margin-bottom: 0
.highlight
margin: 0
border: none
background: none
border-radius: 0 0 8px 8px
figcaption
span
background: var(--theme-block)
.highlight+.highlight
border-top: 1px dashed var(--theme-border)
border-top-left-radius: 0
border-top-right-radius: 0
.md-text .tag-plugin.note[child=tabs]
border-radius: 12px
>.body
margin: 0
>.tabs
margin-top: .5rem
border-radius: 0 0 12px 12px
.md-text .tag-plugin.note[child=iframe]
padding: 0
border-radius: 8px
>.title
color: var(--text) // iframe标题使用默认文本颜色
>.body
margin: 0
iframe
margin: 0
border-radius: 8px
// 嵌套样式调整
.md-text .tag-plugin .tag-plugin.note
--gap-p: 0.75rem
margin: 0.75rem 0
border-radius: 10px
.l_body[type=story] .tag-plugin.note .title p:not([class])
text-indent: 0
// 响应式设计
@media (max-width: 768px)
.md-text .tag-plugin.note
padding: 0.6rem 0.8rem
margin: 0.8rem 0
border-radius: 10px
>.title
font-size: 0.9rem
&::before
width: 14px
height: 14px
margin-right: 6px
>.body
&,p
font-size: 0.85rem