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

20221208 更新：
边栏按钮样式

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

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

用膳须知

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

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

食用方法

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

内容块样式

行高亮

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

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

代码片段

.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;
}

块高亮

它没有前一个细致

代码片段

/* 块高亮 */
.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;
}

块标平滑移动

块标不再瞬移。

录制原因，看上去掉帧

代码片段

/** 块标平滑移动 **/
/* 平滑移动 */
.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 效果，好处是可以调节线的间隔

代码片段

/** 为内容块添加信笺纸虚线 **/
.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; */
}

内容块边框

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

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

代码片段

/* 内容块边框 */
/* 排除标题块、代码块、嵌入块、引述块 */
.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;
}

列表块边框

层级和子项有边框

代码片段

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

层级无边框和子项有边框

代码片段

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

层级有边框和子项无边框

代码片段

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

超级块边框

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

代码片段

/** 超级块边框 **/
/* 为超级块的添加边框 */
.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 做一个按钮来控制全局边框，或者在菜单里加入更多的格式。但是我还不会 js ，所以你们只能去求大佬了。

图片样式

代码片段

/** 图片样式 **/
/* 图片缩放按钮调整 */
.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);
}

边栏样式

大纲标题块标隐藏

在悬停时显示
)

代码片段

/* 大纲块标隐藏样式 */
/* 为大纲块标和折叠按钮调整位置 */
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() 调用主题里的颜色，所以在暗色下阴影的细节有点欠缺。

代码片段

/** 按钮样式 **/
/* 侧边栏按钮默认状态 */
.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);
}

9 回帖

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

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

founder • 1 年前
订阅者恶龙

多谢分享，收藏备用
其他回帖
caogle • 1 年前 • 1 评论
付费者

👍👍👍👍👍👍👍

多谢分享，收藏备用

另外问一下，图片样式那里，图片怎么像你那样像表格一样显示？

图片放在同一个块里，调整宽度。图片宽高比要一致，不然很能拼整齐。本想着做个瀑布流的，但是要用 js 实现布局 😳 溜了溜了

Nofood • 1 年前
LazyXP • 5 个月前
付费者

谢谢分享
Evoke • 1 年前
付费者捐赠者

信笺格式好像不管用了欸（思源 v2.8.9）

此外，可以问问楼主可以如何修改行高亮为编辑图标所在的行高亮，而不是鼠标悬浮高亮吗
查看全部回帖

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

用膳须知

食用方法

内容块样式

行高亮

块高亮

块标平滑移动

添加信笺纸样式的虚线

内容块边框

列表块边框

层级和子项有边框

层级无边框和子项有边框

层级有边框和子项无边框

超级块边框

图片样式

边栏样式

大纲标题块标隐藏

边栏按钮

相关帖子

思源笔记网页收藏插件中，只能 markdown 下文档内容，能不能也设置一个像 onenote 网页剪裁工具的全界面截图功能（界面不需要鼠标向下滑动自动截图到最后）

大纲的不同层级显示不同背景色有 CSS 代码吗？

建议删除双击复制选择多出来的空格

关于思源同步的问题

在行级公式前面加上 `$$` 转成公式块

页面删除

思源笔记丨动态图标使用笔记

欢迎来到这里！