[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; /* 根据自己需要调整 */ }
  • 思源笔记

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

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

    26274 引用 • 109227 回帖
  • 代码片段

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

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

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

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3455 回帖 • 149 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    300 引用 • 768 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖 • 1 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • 叶归
    12 引用 • 56 回帖 • 23 关注
  • sts
    2 引用 • 2 回帖 • 242 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 153 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 636 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 266 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 506 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 407 关注
  • Word
    13 引用 • 41 回帖 • 3 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 765 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 614 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    32 引用 • 99 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 35 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10104 引用 • 45887 回帖 • 63 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 559 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 487 关注