思源笔记折腾日记

ℹ️ 2026-01-13

重新整理下思源笔记样式，借鉴飞书，语雀，链滴等

红色宝石

:root[data-theme-mode=light] [style*="--b3-font-background9"] {
    border-radius: 2px;
    padding: 0.18em 0.32em;
    border: none;
    background: linear-gradient(135deg, #FFEBEE 0%, #FCE4EC 100%) !important;
    color: #C2185B !important;
    position: relative;
    font-weight: 700;
    font-size: 0.88em;
    line-height: 1.2;
    box-shadow: inset 0 -2px 0 rgba(194, 24, 91, 0.2);
}

下划线

:root[data-theme-mode=light] [style*="--b3-font-background12"] {
    border-radius: 3px;
    padding: 0.1em 0.3em;
    border: none;
    background: rgba(255, 224, 178, 0.3) !important;
    color: #3E2723 !important;
    position: relative;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: #FF9800;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

霓虹灯效果

:root[data-theme-mode=light] [style*="--b3-font-background13"] {
    border-radius: 3px;
    padding: 0.18em 0.3em 0.12em;
    border: 1px solid transparent;
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #FF5252, #FF4081, #7C4DFF, #448AFF) border-box !important;
    color: #4527A0 !important;
    position: relative;
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.2;
    vertical-align: baseline;
}

遮罩效果：

.protyle-wysiwyg [data-node-id] span[style*="background-color: var(--b3-font-background4)"] {
    background-color: transparent !important;
    background: linear-gradient(to bottom, var(--b3-font-background4) 0%, var(--b3-font-background4) 100%) center bottom / 100% .6em no-repeat;
}

.protyle-wysiwyg [data-node-id] span[style*="background-color: var(--b3-font-background7)"] {
    background-color: transparent !important;
    background: linear-gradient(to bottom, var(--b3-font-background7) 0%, var(--b3-font-background7) 100%) center bottom / 100% .6em no-repeat;
}

.protyle-wysiwyg [data-node-id] span[style*="background-color: var(--b3-font-background8)"] {
    background-color: transparent !important;
    background: linear-gradient(to bottom, var(--b3-font-background8) 0%, var(--b3-font-background8) 100%) center bottom / 100% .6em no-repeat;
}

.protyle-wysiwyg [data-node-id] span[style*="background-color: var(--b3-font-background11)"] {
    background-color: transparent !important;
    background: linear-gradient(to bottom, var(--b3-font-background11) 0%, var(--b3-font-background11) 100%) center bottom / 100% .6em no-repeat;
}

文字配色

:root[data-theme-mode=light] {
    /* === 更舒适、协调的深文字颜色（与背景语义匹配）=== */
    --b3-font-color1:   #C2185B;   /* 对应粉红背景：更深一点的玫瑰红 */
    --b3-font-color2:   #D81B60;   /* 对应粉紫背景：经典粉红 */
    --b3-font-color3:   #2979FF;   /* 对应天蓝背景：深蓝，比原版更稳重 */
    --b3-font-color4:   #388E3C;   /* 对应翠绿背景：深绿色，专业感 */
    --b3-font-color5:   #F57C00;   /* 对应金黄背景：深橙，暖而不刺眼 */
    --b3-font-color6:   #00796B;   /* 对应青绿背景：深青绿，优雅 */
    --b3-font-color7:   #E64A19;   /* 对应番茄红背景：深红橙，有力度 */
    --b3-font-color8:   #EF6C00;   /* 对应橙色背景：深橙，统一暖调 */
    --b3-font-color9:   #5F6368;   /* 对应银灰背景：深灰，非纯黑更柔和 */
    --b3-font-color10:  #00838F;   /* 对应青蓝背景：深青蓝，沉稳 */
    --b3-font-color11:  #1565C0;   /* 对应浅天蓝背景：深钴蓝 */
    --b3-font-color12:  #E64A19;   /* 对应暖橘背景：统一用深橙红 */
    --b3-font-color13:  #6e4dff;   /* 对应淡紫背景：深靛紫，高贵 */
 
    /* === 更匹配的浅背景颜色（微调饱和度，提升协调性）=== */
    --b3-font-background1:  #FFEBEE;  /* 粉红背景：极浅粉，柔和 */
    --b3-font-background2:  #FCE4EC;  /* 粉紫背景：淡粉紫，温柔 */
    --b3-font-background3:  #BBDEFB;  /* 天蓝背景：淡蓝，清爽 */
    --b3-font-background4:  rgb(183,237,177);  /* 翠绿背景：淡绿，自然 */
    --b3-font-background5:  #FFF3E0;  /* 金黄背景：淡橙黄，温暖 */
    --b3-font-background6:  #E0F7FA;  /* 青绿背景：淡青，清凉 */
    --b3-font-background7:  rgb(251,191,188);  /* 番茄红背景：同粉红系，统一 */
    --b3-font-background8:  rgb(255,252,163);  /* 橙色背景：同暖色系 */
    --b3-font-background9:  #F1F3F4;  /* 银灰背景：浅灰白，接近 Google 风格 */
    --b3-font-background10: #E0F7FA; /* 青蓝背景：同青绿系，清爽 */
    --b3-font-background11: rgb(186,206,253); /* 浅天蓝背景：同蓝色系 */
    --b3-font-background12: #FFF3E0; /* 暖橘背景：统一暖橙调 */
    --b3-font-background13: rgb(205,178,250); /* 淡紫背景：柔紫，不刺眼 */
 
    /* === 主题字体颜色（正文/标题）=== */
    --b3-theme-on-background: #202124; /* 接近飞书但更柔和的深灰，非纯黑，护眼 */
}