[css] 思源笔记 css

提示：很多缺点＋bug，仅供分享

（我的手机预览图）


/*"手机端：文档树"“电脑端：主菜单”文字*/
.toolbar__text {
    word-break: break-all;
    -webkit-line-clamp: 1;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    flex: none;
}

/*笔记本边框（手机端）*/
ul.b3-list.b3-list--background {
    padding: 10px 5px;
    border-radius: 12.5px;
    margin: 20px 35px;
    outline: 0.5px solid #d7dadb;
}

/*双链引用（文档）*/
.protyle-wysiwyg [data-node-id] [spellcheck] {
    min-height: 1.625em;
    word-break: break-word;
    white-space: normal;
}

/*编辑器备边框*/
.protyle-wysiwyg [data-node-id][data-plugin-focus=true] {
    box-shadow: 0 0 0px 1px #505860;
}

/*块折叠*/
.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]) {
    word-break: break-all;
    -webkit-line-clamp: 1;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    opacity: .38;
    font-size: 16px;
    height: 26px;
    line-height: 27.5px;
}

/*设置阴影*/
.b3-dialog__scrim {
    background-color: rgb(220 220 220 / 0%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 150ms linear;
}

/*页面边栏*/
.layout__resize::after {
    content: "";
    width: 100%;
    height: .5px;
    display: block;
    background-color: #ffffff;
    top: 3px;
    position: absolute;
    left: 0;
    transition: var(--b3-transition);
}

.layout__resize--lr::after {
    top: 0;
    width: 5px;
    left: 0;
    height: 100%;
}

/*编辑页面名称栏*/
.layout-tab-bar {
    list-style: none;
    align-items: center;
    overflow: auto;
    position: relative;
    background-color: var(--b3-theme-background);
    border-bottom: 0px solid var(--b3-theme-background-light);
}

/*右栏*/
.dock#dockRight {
    border-left: 0px solid var(--b3-border-color);
}

/*底栏*/
.status {
    background-color: var(--b3-theme-surface);
    box-sizing: border-box;
    z-index: 2;
    height: 32px;
    line-height: 35px;
    border-top: 0px solid var(--b3-border-color);
    padding: 0 5px;
}

/*顶栏*/
.toolbar {
    background-color: var(--b3-toolbar-background);
    box-sizing: border-box;
    height: auto;
    line-height: normal;
    padding: 0px 25px 0px 25px;
    overflow: hidden;
    border-bottom: 0px solid var(--b3-border-color);
    display: flex
;
    flex-wrap: wrap;
    /* gap: 10px; */
}

/*块属性位置*/
.protyle-attr {
    display: flex;
    position: absolute;
    right: 12.5px;
    top: 1.5px;
    opacity: 0;
    font-size: 10px;
    font-weight: normal;
    align-items: center;
    line-height: 5px;
    background-color: #f6f6f600;
}

/*笔记本边框（电脑端）*/
.sy__file ul.b3-list.b3-list--background {
    padding:10px 5px;
    border-radius: 12.5px;
    margin: 12.5px 15px;
    outline: 0.5px solid #d7dadb;
}

/*表情图片*/
img {
    border-radius: 5px;
}

/*引用*/
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]:not(.av__celltext), .protyle-wysiwyg [data-node-id] span[data-type~=file-annotation-ref] {
    background: linear-gradient(to bottom, #01B5D8 5%, #F3668F 75%);
    -webkit-background-clip: text;
    color: rgb(0 0 0 / 10%);
    opacity: .86;
    transition: var(--b3-transition);
}

/*搜索外观*/
.search__list .b3-list-item__text {
    user-select: none;
    border-bottom: 5px solid #e0e0e0;
    min-height: 30px;
    margin: 15px 5px;
    padding: 0px 10px;
}

/*选择阴影*/
.b3-list--background .b3-list-item--focus:not(.dragover):not(.protyle-wysiwyg--select):not(.protyle-wysiwyg--hl):not(.dragover__top):not(.dragover__bottom) {
    background-color: var(--b3-list-hover);
    margin: 10px !important;
}

/*下划线*/
.b3-typography u, .b3-typography span[data-type~=u], .protyle-wysiwyg u, .protyle-wysiwyg span[data-type~=u] {
    border-bottom: 1.75px solid;
    border-color: #384048;
    margin: 0px 2.5px 0px 2.5px;
    border-radius: 5px;
}

/*内置头题图*/
.b3-cards {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px 0px 0; 
}

/*内置头题图*/
.b3-card--wrap {
    flex: 1;
    margin: 25px 25px 0 27.5px;
    min-width: 300px;
    min-height: 315px;
}

/*笔记编辑框*/
.protyle-wysiwyg [data-node-id]#plugin-focus-unique-id {
    box-shadow: 0 0 0px 1px #e4e4e4 inset;
    /*box-shadow: 0 0 5px 2.5px #DAD6D2 inset;*/
    /*background-image: linear-gradient(to right, #DAD6D2,#E8ECED);*/
}

/*备注*/
.b3-text-field, .pcr-app .pcr-interaction .pcr-result {
    padding: 4px 20px;
    background-color: #F9F9FB;
    font-size: 14px;
}

/*头题图*/
.protyle-background__img img {
    object-fit: cover;
    width: 100%;
    height: 30vh;
    opacity: 1;
    object-position: center;
    border-radius: 25px;
    margin: 25px 0 0 0;
}

/*笔记页*/
.protyle-content {
    overflow: auto;
    flex: 1;
    scrollbar-gutter: stable;
    margin: 15px;
}

/*手机端图标*/
.toolbar__icon {
    height: 16px;
    width: 16px;
    padding: 10px;
    flex-shrink: 0;
    margin: 6px 4px;
    color: var(--b3-theme-on-surface);
    border-radius: 10px;
}

/*手机端设置面板*/
.b3-menu--fullscreen .b3-menu__items {
    padding: 0px 30px;
}

/*手机端设置面板*/
.b3-menu--fullscreen .b3-menu__item {
    border-bottom: .5px solid var(--b3-theme-background-light);
    line-height: 42px;
    background-color: #DDDEE2;
    text-decoration: none;
    border-radius: 25px;
    margin: 20px 0px;
    padding: 7.5px 0px;
}

/*图标*/
svg {
    fill: currentColor;
    display: inline-block;
    /*margin: 10px; */
    /*padding: 0px;*/
}

/*设置背景*/
.config__tab-container {
    overflow: auto;
    box-sizing: border-box;
    height: 100%;
    background: #F3F3F3;
    margin: 25px;
    border-radius: 2.5px;
    padding: 25px;
}

/*设置背景*/
.config__tab-container .b3-label:not(.b3-label--inner) {
    padding: 0;
    margin: 16px 24px 32px;
    box-shadow: 0 0px 0 0 #ffffff, 0 0px 0 0 var(--b3-border-color); 
    border-bottom: 0;
    border-radius: 25px; 
}

/*块内字符*/
.b3-typography>p, .b3-typography blockquote>p, .b3-typography [data-node-id], .protyle-wysiwyg li>p, .protyle-wysiwyg>p, .protyle-wysiwyg blockquote>p, .protyle-wysiwyg [data-node-id] {
    line-height: 1.80;
    padding: 7.5px;
    margin: 2.5px;
    border-radius: var(--b3-border-radius);
}

/*备注*/
.b3-typography span[data-type~=inline-memo], .protyle-wysiwyg span[data-type~=inline-memo] {
    background-image: linear-gradient(to bottom, #F5F1FF 90%, #E83878 10%);
    border-bottom: 0px solid #E83878; 
    border-radius: 10px 10px 0px 0px;
    margin: 0px 2.5px;
    padding: 0px 2.5px;
}

/*标注*/
.b3-typography mark, .b3-typography span[data-type~=mark], .protyle-wysiwyg mark, .protyle-wysiwyg span[data-type~=mark] {
    background-image: linear-gradient(to right, #F5F1FF 75%, #FF8B67 100%);
    /* border-bottom: 5px solid #FF8B67; */
    border-radius: 25px 2.5px 25px 2.5px;
    padding: 0px 5px;
    margin: 0px 2.5px;
}

/*字体效果*/
:root {
    --b3-font-color1: #F88880;
    --b3-font-color2: #FF00B2;
    --b3-font-color3: #FC4349;
    --b3-font-color4: #D87080;
    --b3-font-color5: #2A9FC0;
    --b3-font-color6: #A1A79D;
    --b3-font-color7: #F8B48F;
    --b3-font-color8: #2F507D;
    --b3-font-color9: #79ADE7;
    --b3-font-color10: #FFD38E;
    --b3-font-color11: #E088C0;
    --b3-font-color12: #AEA2D4;
    --b3-font-color13: var(--b3-theme-background);
    --b3-font-background1: #F6F792;
    --b3-font-background2: #FFD611;
    --b3-font-background3: #FCE6B9;
    --b3-font-background4: #E7D7C1;
    --b3-font-background12: #5668FF;
    --b3-font-background8: #F3547A;
    --b3-font-background9: #C4D6A1;
    --b3-font-background5: #D1D4DB;
    --b3-font-background6: #BFC4DE;
    --b3-font-background11: #68E6FC;
    --b3-font-background7: #F69CB6;
    --b3-font-background10: #A1E8D9;
    --b3-font-background13: var(--b3-theme-on-background);
    --b3-switch-checked-background: #D7DADB;
}

/*块圆角等*/
:root{
--b3-border-radius: 15px;
--b3-border-padding:10px;
}

/*笔记本名*/
.b3-list-item__text {
    flex: 1;
    background-color: rgba(0, 0, 0, 0);
    text-align: left;
    border: 0;
    padding: 0;
    color: var(--b3-theme-on-background);
    word-break: break-word;
    -webkit-line-clamp: 5;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    border-bottom: 1px solid rgb(228 228 228);
    margin: 0px 10px 0px 10px;
}

.b3-list-item {
    line-height: 35px;
    min-height: 28px;
    padding: 0 4px;
    display: flex
;
    cursor: pointer;
    align-items: center;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    text-align: left;
    border: 0;
    color: var(--b3-theme-on-background);
    margin: 5px 10px;
}

/*左侧dock图标外边距大小，可根据需要微调 */
.dock#dockLeft .dock__item {
  margin: 3px;
}

/*每个图标的内外边距，计算公式是 (dock宽-图标宽)/4 */
.dock__item {
    padding: 4px; /* 内边距 */
    margin: 4px; /* 外边距 */
}

/*两侧dock栏宽度 */
.dock--vertical {
    width:32px; /* 根据自己需要调整 */
}

[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条

最近写 runjs 发现代码块编辑时有诸多不便，于是稍微优化了下。功能说明在代码块的右上角添加展开/折叠和全屏按钮当代码块滚动时，在页面的底部自动悬浮横向滚动条（0.0.4 及之后版本仅代码块有横向滚动条且高度大于指定的最大高度时才显示）代码块顶部导航滚动时自动吸附至顶部不支持手机版（因为不需要）使用说明 ..

[js] 带块 id 的剪切

功能说明块右键菜单增加剪切块操作，剪切时不会丢掉块的 id（自带剪切会丢掉块 id）。本质还是移动操作，只不过比自带移动操作方便，支持具体移动到哪个位置（自带移动只能指定移动到哪个文档）。支持手机版不会出现重复 ID 使用说明注意：只能在块菜单中操作（你的右键可能不是块菜单）缺点：不支持撤销（官方移动也不支 ..

[css] 分享：修改「字体颜色」和「背景颜色」

1.前言论坛里找到的修改字体颜色和字体的背景颜色的代码不甚满意，借鉴大家分享的代码（原文链接：思源笔记自定义可在多个主题间适用的行内字色及底色 - 链滴 (ld246.com)），加上使用 DeepSeek 改代码，终于调到了令自己满意的颜色。使用插件“配色方案”更方便修改颜色，但是修改之后，我 iOS 设备 ..

[js] 标题下的文字计数

前言因为个人原因，想要在大纲视图下，把鼠标放在标题上可以显示出，这个标题到下个标题之间的字数，但无人回应，所以只好自己想办法，花了几天的时间研究，最后终于用 AI 跑了一段能用的代码。有同样需求的可以试试，虽然我这里是没有什么问题吧，但是还是建议大家慎重使用，及时做好备份，如果有问题，欢迎各位指出。目前仅适用于纯 ..

欢迎来到这里！

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

关于

[css] 思源笔记 css

相关帖子

[css] 设置字体代码片段分享

[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条

[js] 带块 id 的剪切

[css] 随便写了个等宽标签代码

[css] 分享：修改「字体颜色」和「背景颜色」

[js] 有什么办法能让回车不创建文档？

[js] 标题下的文字计数

欢迎来到这里！

近期热议

推荐标签标签

最新标签

[css] 思源笔记 css

相关帖子

[css] 设置字体代码片段分享

[js] 代码块优化之折叠 / 展开 / 全屏 / 悬浮横向滚动条

[js] 带块 id 的剪切

[css] 随便写了个等宽标签代码

[css] 分享：修改「字体颜色」和「背景颜色」

[js] 有什么办法能让回车不创建文档？

[js] 标题下的文字计数

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签