登录 注册

啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~

本贴最后更新于 714 天前，其中的信息可能已经时移俗易

20221208 更新：
边栏按钮样式

集市里有很多大佬做得非常好的主题。但是难免有那么一两个点不对口味儿。所以就想着按自己的想法改改。思源现在有了 代码片段 功能，可以按需要开关代码，要比以前方便多了。

所以就想着把自己东施效颦的东西搬上来，或许有半个能帮到你。更希望能抛砖引玉 ❤️

用膳须知

以下代码均在 v2.5.2 v2.5.3-win 下用默认主题测试，手机端估计不能完美适配。如果在其他主题下使用可能会和其样式冲突。

如果你发现某段代码用不了，不用怀疑自己用错了。一定是我头晕脑胀敲错了。而你一定能把它改好的trollface

食用方法

按 Alt-p ➡️ 外观 ➡️ 代码片段-设置 进入代码片段编辑界面。

image.png

内容块样式

行高亮

说是行高亮，但是对段落里的软换行无效。说是块高亮，又对列表和超级块里的项有效。

后面有一个只对块起作用的代码。这个就叫行高亮吧。

行高亮 20221205220554af4l3ab.gif

代码片段 
.protyle-wysiwyg [data-type]:hover:not(.protyle-wysiwyg [data-type="NodeList"]):not(.protyle-wysiwyg [data-type="NodeListItem"]):not(.protyle-wysiwyg [data-type="img"]) {
    background-color: rgb(255 176 208 / 30%);
    box-shadow: 0 0 5px 0 rgb(255 176 208 / 30%);
    transition: all .35s ease-out 0ms;
}
.protyle-wysiwyg [data-type]:not(.protyle-wysiwyg [data-type="img"]) {
    transition: all 1s ease-out 0ms;
}
/* 不让超级块内部出现重叠的样式 */
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] .sb:hover, .protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"] .sb:hover, .protyle-wysiwyg [data-type="NodeSuperBlock"]:hover {
    background: none !important;
    box-shadow: none !important;
    transition: none !important;
}

块高亮

它没有前一个细致

块高亮 202212052208196upkacg.gif

代码片段 
/* 块高亮 */
.protyle-wysiwyg > div:hover {
    background-color: rgb(255 176 208 / 30%);
    transition: all .35s ease-out 0ms;
}
.protyle-wysiwyg > div:not(.protyle-wysiwyg [data-type="img"]) {
    transition: all 1s ease-out 0ms;
}

块标平滑移动

块标不再瞬移。

块标移动 20221130162341ojt76wm.gif
录制原因，看上去掉帧

代码片段 
/** 块标平滑移动 **/
/* 平滑移动 */
.protyle-gutters {
    transition: all 0.3s ease-out; /* 数值越大，速度越慢 */
}
/* 悬停放大 */
.protyle-gutters button svg:hover{
    transform: scale(1.1);
    color: var(--b3-theme-error);
}

添加信笺纸样式的虚线

使用 linear-gradient 做的伪 border-bottom 效果，好处是可以调节线的间隔

下划线.png
image20221201002343fpu1sj7.png

代码片段 
/** 为内容块添加信笺纸虚线 **/
.p:not(.protyle-wysiwyg [data-node-id].bq .p)(.protyle-wysiwyg [data-node-id].sb .p), .b3-typography p, .protyle-wysiwyg [data-node-id].li > [data-node-id]:not(.list, [data-type="NodeHeading"]):not(.list, [data-type="NodeBlockquote"]):not(.list, [data-type="NodeCodeBlock"]):not(.list, [data-type="NodeThematicBreak"]):not(.list, [data-type="NodeSuperBlock"]) {
    background-image: linear-gradient(to left, #00000000 50%, var(--b3-theme-background-light) 0%); /* 第一个颜色设为透明，产生间断的虚线效果，第一个百分号调节第一个颜色结束的位置；第二个颜色默认用主题声明的颜色，以使色彩搭配 */
    background-size: 14px 1px; /* 第一个数值调整虚线间距，第二个数值调整虚线粗细 */
    background-repeat: repeat-x;
    background-position: left bottom;

/* 彩虹 */
/*    background-image: linear-gradient(to right,red,orange,yellow,green,#00ffff,#0000ff,#ff00ff);
    background-size: auto 1px;
    background-repeat: repeat-x;
    background-position: left bottom; */

/* 折线 */
/*    background-image: linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, trans    parent 100%),linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background-size: 8px 8px;
    background-repeat: repeat-x, repeat-x;
    background-position: left 30px; */

/* 点线 */
/*background-image: linear-gradient(to right,#00000000 10%, black 20%,#00000000 30%,black 60%, #ffffff00 80%, black);
    background-size: 18px 1px;
    background-repeat: repeat-x;
    background-position: left 30px; */
}

内容块边框

这个样式只在所有块最外层添加边框，不管里面的嵌套。同时代码块、嵌入块、引述块有默认的背景，加上边框太乱了。而标题我想有单独的样式，所以都排除了。

如果希望列表内部也有边框可以看下一个

image20221205221246f1ew9g6.png

代码片段 
/* 内容块边框 */
/* 排除标题块、代码块、嵌入块、引述块 */
.protyle-wysiwyg > div:not(.protyle-wysiwyg [data-type="NodeHeading"]):not(.protyle-wysiwyg [data-type="NodeCodeBlock"].code-block):not(.protyle-wysiwyg [data-type="NodeBlockquote"]):not(.protyle-wysiwyg [data-type="NodeBlockQueryEmbed"]) {
    outline: 1px dashed var(--b3-theme-on-surface-light);  
    border-radius: 4px;
}

列表块边框

层级和子项有边框

image20221201201159z21u4ao.png

代码片段 
/* 层级和子项有边框 */
.li{
    outline: 1px dashed var(--b3-theme-on-background);
}

层级无边框和子项有边框

image20221201200925k0sgx70.png

代码片段 
/* 层级无边框和子项有边框 */
.protyle-wysiwyg [data-node-id].li>div:nth-child(2) {
    outline: 1px dashed var(--b3-theme-on-background);
}

层级有边框和子项无边框

image20221201201632ycr93io.png

代码片段 
/* 层级有边框和子项无边框 */
.protyle-wysiwyg [data-node-id].list {
    outline: 1px dashed var(--b3-theme-on-background);
}

超级块边框

添加一个简陋的边框，使超级块的嵌套关系明朗，并改变了拖拽的引导颜色。现在知道要把它拖拽到哪儿了。
超级块 202212042124058abkiud.gif

代码片段 
/** 超级块边框 **/
/* 为超级块的添加边框 */
.protyle-wysiwyg [data-node-id].sb {
    box-shadow: 0 0 0 1px var(--b3-theme-background-light); 
}
/* 调整超级块的子块 */
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] .sb, .protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"] .sb {
    /* box-shadow: none; */ /* 如果觉得子块线条太多可以加入这个声明 */
    margin: 4px; /* 调整子块间距 */
}
/* 调整圆角 */
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"],
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"],
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"]>div,
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"]>div{
    border-radius: 4px;
}
/* 超级块悬停显示边框 */
.protyle-wysiwyg [data-node-id].sb:hover {
    outline: 1px dashed var(--b3-theme-on-surface);
}
/* 为超级块拖拽调整显眼的颜色 */
.protyle-wysiwyg .dragover__top {
    box-shadow: 0 -5px 3px -1px var(--b3-font-color8);
}
.protyle-wysiwyg .dragover__bottom {
    box-shadow: 0 5px 3px -1px var(--b3-font-color8);
}
.protyle-wysiwyg .dragover__left {
    box-shadow: -5px 0 3px -1px var(--b3-font-color9);
}
.protyle-wysiwyg .dragover__right {
    box-shadow: 5px 0 3px -1px var(--b3-font-color9);
}
.protyle-wysiwyg .dragover__top, .protyle-wysiwyg .dragover__bottom, .protyle-wysiwyg .dragover__left, .protyle-wysiwyg .dragover__right {
    transition: none !important;
}

我一般不用边框，因为那样会把行文割裂成一块一块的。不过论坛里有小伙伴还是希望有边框来辅助区别段落，那还是发出来吧，按需自取。

其实可以通过 js 做一个按钮来控制全局边框，或者在菜单里加入更多的格式。但是我还不会 jstrollface ，所以你们只能去求大佬了。

图片样式

图片样式 20221203152215yd4sge5.gif

代码片段 
/** 图片样式 **/
/* 图片缩放按钮调整 */
.protyle-wysiwyg [data-node-id] .img .protyle-action__drag {
    height: 20%;
    top: 40%;
    right: 12px;
    width: 5px;
    opacity: 0.86;
    z-index: 2;
}
.protyle-wysiwyg [data-node-id] .img .protyle-action__drag:hover {
    background-color: var(--b3-theme-on-background);
    box-shadow: 0 0 1px 1px var(--b3-theme-background);
}
/* 图片菜单按钮调整 */
.protyle-icon--only {
    border-radius: 15px;  
}
.protyle-icon {
    background-color: var(--b3-theme-surface);
    color: var(--b3-theme-on-surface);
}
/* 为图片添加边框、阴影和圆角 */
.b3-typography .img, .protyle-wysiwyg .img {
    margin: 4px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px -2px rgb(0 0 0 / 70%), -1px -1px 3px -1px rgb(0 0 0 / 40%);
    padding: 5px 0;
    background: var(--b3-theme-background);
}
.b3-typography .img {
    padding: 5px !important;
    transition: all .35s;
}
/* 调整图片和图片标题位置，使其左右居中 */
.protyle-wysiwyg img, .protyle-action__title, .protyle-wysiwyg .img .protyle-action__title {
    position: relative;
    left: -3px;
}
/* 图片选择样式 */
.protyle-wysiwyg [data-node-id] .img--select {
    filter: unset;
    box-shadow: 0px 0px 10px 3px #f05f40b3 !important;
    transition: all .35s;
}
/* 图片悬停样式 */
.protyle-wysiwyg [data-node-id] .img:hover {
    box-shadow: 0px 0px 5px 2px #f05f40b3;
}
/* 为图片增加一个伪类做遮盖层 */
.protyle-wysiwyg .img>span:nth-child(2)::after { 
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #f05f40b3;
    position: absolute;
    top: 0;
    left: -3px;
    opacity: 0;
    transition: all .35s;
    pointer-events: none;
}
.protyle-wysiwyg .img>span:nth-child(2):hover::after {
    opacity: 1;
}
.protyle-wysiwyg .img .protyle-action__title {
    background: var(--b3-theme-background);
    pointer-events: none;
    z-index: 1;
}
.b3-typography .img .protyle-action__title {
    left: 0px !important;
}
/* 导出预览模式悬停样式，好像不能在导出模式添加伪类，只能用这个了 */
.b3-typography .img:hover {
    transform: translate(0px, -4px);
    box-shadow: 0px 4px 20px -8px rgb(0 0 0 / 20%), 4px 1px 20px 1px rgb(0 0 0 / 20%), -4px 2px 20px 1px rgb(0 0 0 / 20%);
}
/* 图片预览窗口背景模糊 */
.viewer-backdrop {
    backdrop-filter: blur(15px);
}

边栏样式

大纲标题块标隐藏

在悬停时显示
块标隐藏-VEqTDvb.gif (390×564) (b3logfile.com))

代码片段 
/* 大纲块标隐藏样式 */
/* 为大纲块标和折叠按钮调整位置 */
ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h2"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h4"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h5"] .b3-list-item__toggle,
ul.b3-list.b3-list--background [data-subtype="h6"] .b3-list-item__toggle {
    position: relative;
    left: 20px;
}
ul.b3-list.b3-list--background [data-subtype="h1"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h2"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h3"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h4"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h5"] svg.b3-list-item__graphic,
ul.b3-list.b3-list--background [data-subtype="h6"] svg.b3-list-item__graphic {
    opacity: 0;
    position: relative;
    left: -20px;
    margin: 0 0 0 4px;
    transition: all 300ms ease-out;
}
/*----------------------*/
/* 为大纲块标添加悬停显示效果 */
.b3-list--background .b3-list-item:hover .b3-list-item__graphic.popover__block {
    opacity: 1 !important;
}
ul.b3-list.b3-list--background [data-subtype="h1"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h2"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h3"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h4"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h5"] svg.b3-list-item__graphic:hover,
ul.b3-list.b3-list--background [data-subtype="h6"] svg.b3-list-item__graphic:hover {
    color: red;
}
/*----------------------*/
/* 为大纲标题项添加背景过渡效果 */
.b3-list--background .b3-list-item {
    transition: all .3s ease-out;
}

边栏按钮

neumorphism 风格，只因拟态美。

本来想攒一波的。但是当我想到“只因拟态美”就乐得不行 😂😂😂 必须发出来 🤪

拟态风确实是很漂亮的风格，但是看多了会视觉疲劳，最终回归扁平风。不大面积用，拿来点缀还是可以的。
因为要兼顾“明亮”和“暗黑”模式，基本上通过 var() 调用主题里的颜色，所以在暗色下阴影的细节有点欠缺。

image20221207160347jxq6034.png

代码片段 
/** 按钮样式 **/
/* 侧边栏按钮默认状态 */
.dock__item {
    /* background: linear-gradient(137deg, var(--b3-scroll-color), var(--b3-theme-background)); */
    box-shadow: inset 1px 1px 3px var(--b3-scroll-color), inset -1px -1px 3px 1px var(--b3-theme-background);
    transition: all .35s ease-out 0ms;
/* 侧边栏按钮尺寸调整 */
    padding: 0px;
    display: flex;
    margin: 6px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
}
/* 侧边栏按钮活跃状态 */
.dock__item--active {
    color: var(--b3-theme-primary);
    box-shadow: 2px 2px 4px -1px var(--b3-scroll-color), -1px -1px 2px 1px var(--b3-theme-background);
    background: linear-gradient(137deg, var(--b3-theme-background-light), var(--b3-theme-background)) !important;
}
/* 侧边栏按钮焦点状态 */
.dock__item--activefocus {
    color: var(--b3-theme-error) !important;
    background-color: #0000 !important;
}
/* 侧边栏按钮悬停状态 */
.dock__item:hover {
    background-color: #0000 !important;
}
.dock__item:hover svg {
    /* color: var(--b3-theme-on-background); */
    filter: drop-shadow(0px 0px 5px #000);
    transition: all .35s ease-out 0ms;
    background-color: #0000 !important;
}
/** 顶边栏按钮尺寸调整 **/
/* 顶边栏按钮尺寸调整 */
.toolbar__item svg {
    height: 13px;
    width: 13px;
}
/* 顶边栏按钮阴影 */
.toolbar__item {
    bottom: 5px;
    padding: 4px;
    margin: 0 4px;
    border-radius: 0px 0px 20px 20px;
    /* background: linear-gradient(145deg, #252629, #2c2d30); */
    box-shadow: 3px 3px 5px -2px #000, -2px -2px 5px #ffffff80;
    transition: all .35s ease-out 0ms;
}
/* 顶边栏按钮悬停状态 */
.toolbar__item:not(.toolbar__item--disabled):not(.toolbar__item--close):hover, .toolbar__item--active {
    color: var(--b3-toolbar-background);
    background-color: var(--b3-theme-on-primary);
}
/* 关闭按钮调整，如果做成圆形的，要关闭时不好触发按钮，于是做成了半圆 */
.toolbar__item--close {
    bottom: 0px;
    padding: 9px 16px;
    border-radius: 0px 0px 20px 20px;
    margin: 0 0 4px 8px;
}
/** 状态栏按钮调整 **/
/* 状态栏按钮阴影 */
.status .toolbar__item {
    box-shadow: 2px 2px 4px -1px var(--b3-scroll-color), -1px -1px 2px 1px var(--b3-theme-background);
    top: 3px;
    border-radius: 8px 8px 0px 0px;
    height: 25px;
    /* background: linear-gradient(145deg, var(--b3-scroll-color), var(--b3-theme-background)); */
}
/* 调整状态栏按钮菜单位置，按键变圆角，不调整菜单位置无法点击 */
.status>div:nth-child(1)>div, .status>div:nth-child(5)>div {
    bottom: 20px !important;
}
/* 标题折叠伪类调整 */
.protyle-wysiwyg div[fold="1"][data-type=NodeHeading]:before {
    background: linear-gradient(145deg, var(--b3-theme-background-light), var(--b3-theme-background) 40%);
    box-shadow: 2px 2px 4px -1px var(--b3-scroll-color), -1px -1px 2px 1px var(--b3-theme-background);
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22340 引用 • 89396 回帖 • 1 关注
8 引用
[css] [js] 思源笔记用到现在积累的所有代码片段 • JeffreyChen
代码片段｜反链 & 提及面板，固定文档名称 • Wetoria
CSS 片段分享（行 focus 高亮显示） • Zhangwuji
页面大纲前面的 H1 H2 能否去掉 可以设置是否隐藏大纲中的 H1、H2 标记吗？ 调查 [v2 更新版]: 是否支持段落缩进形成树状嵌套结构?(像 notion/wolai/flowus/logseq 那样) 自定义文件树提示框样式 Sofill- 0.256 发布：支持通过主题设置界面开启图片制卡
2 操作
Nofood 在 2022-12-08 15:04:49 更新了该帖
Nofood 在 2022-12-08 15:04:14 更新了该帖
21 感谢
3 关注
27 收藏
6 赞同
8 引用
2 操作
9 回帖
2
2.0k 706 36 596 1 33 30 555

相关帖子

9 回帖
啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
Nofood
目识鸡丁，终日不饱
回帖
71
 帖子
4
 积分
11200