[css] Savor 主题的多行搜索展示 CSS 片段

本贴最后更新于 426 天前,其中的信息可能已经时异事殊

忘记有没有分享过了,刚才看到 建议思源笔记引用待选项添加悬浮预览功能 里的问题,其实可以通过代码片段换一种方式解决:直接看到详细内容,而不是靠悬浮窗

效果可参考 吹爆 savor 主题 里的「问题 1:搜索问题」部分

也可参考以下截图

image.png

感谢 @royc1把主题里 ctrlp.css 里面的代码复制进去 ,原始代码在:ctrlp.css

代码片段如下:

/* Savor 主题的多行搜索展示 CSS片段 */
#searchList{
	background-color: var(--b3-theme-background);
}
.search__layout--row {
    border-top: none;
}
.search__layout{
	border-bottom: 1px solid var(--b3-theme-surface-lighter);
}
.fn__flex-column #searchList>.b3-list-item[data-type='search-item']{
	padding-bottom:20px;
	margin: 6px;
}

.fn__flex-column #searchList .b3-list-item[data-type='search-item']>.b3-list-item__meta{
	color:var(--b3-list-item--meta);
	background-color: var(--b3-list-background);
	font-size: .7rem;
	line-height: 20px;
	border-radius:4px;
	padding:0 4px;
	bottom:8px;
	right:8px;
	max-width:34vw;
	position:absolute;
	white-space:nowrap;
	overflow:hidden !important;
	text-overflow: ellipsis;
}
.fn__flex-column #searchList .b3-list-item--focus[data-type='search-item']>.b3-list-item__meta{
	background-color: var(--b3-theme-background);
}
.fn__flex-column #searchList .b3-list-item[data-type='search-item']>.b3-list-item__meta::before{
    font-size: 1em;
    line-height: 1;
	margin-right:2px;
	content: "📄";
}
.fn__flex-column #searchList>.b3-list-item+div [data-type='search-item'] .b3-list-item__graphic{
	height: 10px;
    width: 10px;
    padding: 4px;
    border-radius: 3px;
    background-color: var(--b3-list-background);
}

.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item']):not([data-type="search-new"]){
	border-radius: 4px 4px 0 0;
	margin: 6px 6px 0px 6px;
	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
	padding-left:0px;
	background-color: var(--b3-dockright-background);
}
.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item']):has(+div.fn__none){
	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
	border-radius: 4px ;
}

.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item'])+div [data-type='search-item']{
	margin: 0 6px;
	border-radius: 0;
	box-shadow: rgba(15, 15, 15, 0.1) 1px 0px 0px 0px , rgba(15, 15, 15, 0.1) -1px 0px 0px 0px;
	padding-left: 30px!important;
	height:32px;
}
.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item'])+div [data-type='search-item']:last-child{
	border-radius: 0 0 4px 4px;
	box-shadow: rgba(15, 15, 15, 0.1) 1px 0px 0px 0px , rgba(15, 15, 15, 0.1) -1px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 1px 0px 0px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

/*.fn__flex-column #searchList>.b3-list-item:not([data-type='search-item'])+div [data-type='search-item']>.b3-list-item__text{
    margin-left: 20px;
    max-height: 89px ;
    padding:6px 0px 5px 5px;
    overflow-y: auto !important;
    text-overflow: ellipsis !important;
    line-height: 1.3;
    -webkit-box-orient: inherit;
}*/

#searchList>[data-type="search-item"]{
    display: block;
	padding-right:0px;
}


#searchList>[data-type="search-item"]>.b3-list-item__graphic{
    position: absolute;
    margin-top: 4px;
}

#searchList>[data-type="search-item"]>.b3-list-item__graphic+.b3-list-item__graphic{
    position: absolute;
    margin-top: 4px;
	margin-left: 20px;
}
#searchList>[data-type="search-item"]>.b3-list-item__graphic+.b3-list-item__graphic+.b3-list-item__text{
	margin-left: 40px;
}



#searchList>[data-type="search-item"]>.b3-list-item__text{
    margin-left: 20px;
    padding:6px 6px 5px 5px;
    overflow-y: auto !important;
    text-overflow: ellipsis !important;
    line-height: 1.3;
    display: inline-block;
}



.search__list{
	padding-top:0;
}



.b3-list-item[data-type="search-new"]{
	border-radius: 4px;
	height:40px;
	margin: 6px 6px 0px 6px;
	padding:0 16px 0 10px;
	background-color: var(--b3-bq-background13)!important;
    box-shadow: 0 0 0 2px var(--b3-font-background13) inset!important;
}
.b3-list-item[data-type="search-new"] kbd{
	font-family: sans-serif;
}

#criteria .b3-chips .b3-chip{
	margin-top: 3px;
}

#criteria .b3-button--small{
	padding: 2px 8px;
	font-size: 14px;
}
#criteria+.block__icons{
	padding: 0 4px;
	min-height: 36px;
	margin:0 6px;
	border-radius:6px;
	background-color: var(--b3-list-hover);
}
.b3-dialog__body>.fn__flex-column:not(.switch-doc){
	background-color: var(--b3-theme-background);
}
.search__tip{
	height:30px;
	color:var(-b3-)
}


.protyle-wysiwyg *[custom-f="dt"] .li[data-subtype="u"]>.protyle-action svg{
	color:unset;
}

.search__tip{
	color:var(--b3-theme-on-background)
}
.search__tip kbd{
	box-shadow:none;
	border:none;
	padding: 3px 5px;
	background-color: var(--b3-list-background-focus);
}
  • 思源笔记

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

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

    23004 引用 • 92518 回帖
  • 代码片段

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

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

    90 引用 • 559 回帖 • 1 关注
1 操作
JeffreyChen 在 2024-09-15 12:13:06 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 28 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 5 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 653 关注
  • 运维

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

    149 引用 • 257 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 快应用

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

    15 引用 • 127 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 2 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 159 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 335 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    354 引用 • 1823 回帖 • 1 关注
  • 设计模式

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

    200 引用 • 120 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖 • 1 关注