[css] callout 样式分享

分享一下自己使用的的 callout 样式

导出 PDF 也会生效

/* === 通用 callout 样式 === */
.callout {
    display: block;
    border-radius: 6px;
    padding: 10px 16px;
    margin: 8px 0;
    position: relative;
    background-color: white !important;
    color: var(--b3-theme-on-background);
    border-left: none !important;
    box-shadow: none !important;
}

/* === Note —— 蓝色系 === */
.callout[data-subtype="NOTE"] {
    border-left: 0.25em solid #1f6feb !important;
    background-color: rgba(247, 250, 255, 0.8) !important;
}
.callout[data-subtype="NOTE"] .callout-info {
    color: #1f6feb;
}

/* === Tip —— 绿色系 === */
.callout[data-subtype="TIP"] {
    border-left: 0.25em solid #238636 !important;
    background-color: rgba(238, 250, 240, 0.8) !important;
}
.callout[data-subtype="TIP"] .callout-info {
    color: #238636;
}

/* === IMPORTANT —— 全新紫色系 (#9E75E7) === */
.callout[data-subtype="IMPORTANT"] {
    border-left: 0.25em solid #9E75E7 !important;
    background-color: rgba(158, 117, 231, 0.12) !important; /* 浅紫背景 */
}
.callout[data-subtype="IMPORTANT"] .callout-info {
    color: #9E75E7;
}

/* === Warning —— 橙色系（可选：也可改为独立色）=== */
.callout[data-subtype="WARNING"] {
    border-left: 0.25em solid #e3b341 !important;
    background-color: rgba(255, 250, 235, 0.8) !important;
}
.callout[data-subtype="WARNING"] .callout-info {
    color: #e3b341;
}

/* === Caution —— 红色系 === */
.callout[data-subtype="CAUTION"] {
    border-left: 0.25em solid #d1242f !important;
    background-color: rgba(255, 240, 240, 0.8) !important;
}
.callout[data-subtype="CAUTION"] .callout-info {
    color: #d1242f;
}

/* === 移除默认 ::before 竖线 === */
.callout:before {
    background: transparent !important;
    width: 0 !important;
}