[css] 思源笔记 css

提示:很多缺点 +bug,仅供分享

image1744037425157.png

(我的手机预览图)


/*"手机端:文档树"“电脑端:主菜单”文字*/
.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; /* 根据自己需要调整 */
}

  • 思源笔记

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

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

    25248 引用 • 104160 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    152 引用 • 991 回帖 • 2 关注
1 操作
gcdjbr 在 2025-04-07 23:06:36 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 3 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 145 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 575 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 105 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 1 关注
  • Anytype
    3 引用 • 31 回帖 • 13 关注
  • Visio
    1 引用 • 2 回帖 • 5 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • AWS
    11 引用 • 28 回帖 • 11 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 224 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 1 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 667 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 69 关注
  • 倾城之链
    23 引用 • 66 回帖 • 167 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    494 引用 • 930 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 641 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    239 引用 • 224 回帖 • 2 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 593 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 17 关注
  • gRpc
    11 引用 • 9 回帖 • 93 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 3 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 2 关注