登录 注册

求一个 QYL 主题“顶栏融合”功能的 CSS 代码

想用这个功能但只想用默认主题，求个单独的 css 代码！或者其他能实现此功能的 css 代码也行的。

谢谢大佬们！

  • 思源笔记

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

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

    28442 引用 • 119756 回帖
  • Q&A

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

    11151 引用 • 50643 回帖 • 52 关注
1 操作
zzinn 在 2025-08-08 20:57:01 更新了该帖
金华 位置
1 操作
5 回帖
2
2
192 138 1 1 1 2 49

相关帖子

被采纳的回答
  • HugZephyr • • 1
    付费者

    可能和其他 css 冲突, 不会默认主题是没啥问题的

    image.png

    
:root {
    --QYL-wnd-border-none: none; 
    --QYL-wnd-container-border-flat: 1px solid var(--b3-theme-surface-lighter); 
    --QYL-wnd-container-border-ink: 1.5px solid var(--b3-theme-primary);
}
#toolbar {
    background-color: transparent;
    border-bottom-color: transparent;
    margin-bottom: -38px;
    pointer-events: none;
    z-index: 5;
    -webkit-app-region: drag;
    app-region: drag;
}
#toolbar .toolbar__item {
    pointer-events: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
#drag {
    opacity: 0;
}
:root {
    --QYL-FusionOn-Top-Transform: translateY(-1.5px);
    --QYL-FusionOn-Not-Top-Transform: translateY(-2.5px);
}
.layout__center :is(.fn__flex-1, .fn__flex, .fn__flex-column) [data-type="wnd"] > .fn__flex:first-child {
    transform: var(--QYL-FusionOn-Top-Transform);
}
.layout__center :is(.fn__flex-1, .fn__flex, .fn__flex-column) [data-type="wnd"]:not(.QYLFusionTop) > .fn__flex:first-child {
    transform: var(--QYL-FusionOn-Not-Top-Transform);
}
.layout__center {
    padding-top: 3.75px;
    box-sizing: border-box;
    &#layouts {
        padding-top: 3.75px;
    }
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar {
    background-color: transparent;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar [data-type="tab-header"] {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly {
    max-width: 80px;
    -webkit-app-region: drag;
    app-region: drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly :is([data-type="new"], [data-type="more"]) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child + .layout-tab-container {
    border-radius: var(--b3-border-radius);
}
#layouts.layout__center [data-type="wnd"] > :is(.fn__flex-column, .fn__flex-1, .fn__flex):first-child {
    -webkit-app-region: drag;
    app-region: drag;
    & > .layout-tab-bar.layout-tab-bar--readonly {
        max-width: 80px;
    }
}
.toolbar__window {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child.fn__none + .layout-tab-container {
    height: calc(100% - 34px);
    margin-top: 34px;
}
#dockLeft {
    padding-top: 38px;
}
#dockRight {
    padding-top: 38px;
}
:is(.layout__dockl, .layout__dockr):not(.layout--float)  {
    padding-top: 38px;
    min-height: 50%;
}
#layouts .layout__resize.layout__resize--lr {
    clip-path: inset(38px 0 0 0 round var(--b3-border-radius));
}
#layouts .layout--float.layout__dockb .layout__resize.layout__resize--lr {
    clip-path: none;
}
.QYLFusionTop > .fn__flex:first-child {
    transition: 0.45s cubic-bezier(0.33, 1.42, 0.69, 0.99);
}
5 回帖
求一个 QYL 主题“顶栏融合”功能的 CSS 代码

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • HugZephyr •
    付费者

    加了 js, 优化后的代码

    [js] 顶栏融合 - 参考 qyl 主题的顶栏融合

    1 回复
  • 其他回帖
  • Adaxi • 
    #toolbar .toolbar__item {
    pointer-events: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#toolbar:hover .toolbar__item {
    opacity: 1;
}

    我是直接隐藏, 可以将就用

  • HugZephyr • • 1 • 2 评论
    付费者

    可能和其他 css 冲突, 不会默认主题是没啥问题的

    image.png

    
:root {
    --QYL-wnd-border-none: none; 
    --QYL-wnd-container-border-flat: 1px solid var(--b3-theme-surface-lighter); 
    --QYL-wnd-container-border-ink: 1.5px solid var(--b3-theme-primary);
}
#toolbar {
    background-color: transparent;
    border-bottom-color: transparent;
    margin-bottom: -38px;
    pointer-events: none;
    z-index: 5;
    -webkit-app-region: drag;
    app-region: drag;
}
#toolbar .toolbar__item {
    pointer-events: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
#drag {
    opacity: 0;
}
:root {
    --QYL-FusionOn-Top-Transform: translateY(-1.5px);
    --QYL-FusionOn-Not-Top-Transform: translateY(-2.5px);
}
.layout__center :is(.fn__flex-1, .fn__flex, .fn__flex-column) [data-type="wnd"] > .fn__flex:first-child {
    transform: var(--QYL-FusionOn-Top-Transform);
}
.layout__center :is(.fn__flex-1, .fn__flex, .fn__flex-column) [data-type="wnd"]:not(.QYLFusionTop) > .fn__flex:first-child {
    transform: var(--QYL-FusionOn-Not-Top-Transform);
}
.layout__center {
    padding-top: 3.75px;
    box-sizing: border-box;
    &#layouts {
        padding-top: 3.75px;
    }
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar {
    background-color: transparent;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar [data-type="tab-header"] {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly {
    max-width: 80px;
    -webkit-app-region: drag;
    app-region: drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly :is([data-type="new"], [data-type="more"]) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child + .layout-tab-container {
    border-radius: var(--b3-border-radius);
}
#layouts.layout__center [data-type="wnd"] > :is(.fn__flex-column, .fn__flex-1, .fn__flex):first-child {
    -webkit-app-region: drag;
    app-region: drag;
    & > .layout-tab-bar.layout-tab-bar--readonly {
        max-width: 80px;
    }
}
.toolbar__window {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child.fn__none + .layout-tab-container {
    height: calc(100% - 34px);
    margin-top: 34px;
}
#dockLeft {
    padding-top: 38px;
}
#dockRight {
    padding-top: 38px;
}
:is(.layout__dockl, .layout__dockr):not(.layout--float)  {
    padding-top: 38px;
    min-height: 50%;
}
#layouts .layout__resize.layout__resize--lr {
    clip-path: inset(38px 0 0 0 round var(--b3-border-radius));
}
#layouts .layout--float.layout__dockb .layout__resize.layout__resize--lr {
    clip-path: none;
}
.QYLFusionTop > .fn__flex:first-child {
    transition: 0.45s cubic-bezier(0.33, 1.42, 0.69, 0.99);
}
    1 回复
    1 引用
    好用 谢谢分享
    Adaxi •
    谢谢，我设置了最大页签数，这样就不会盖掉插件栏了。
    zzinn •
  • zzinn • • 6 评论
    作者

    您好，打开页签多了后，会覆盖掉插件栏，可以优化一下这个问题吗？

    1 回复
    仅靠 CSS 是无法实现的
    queguaiya •
    我看 qyl 也是这样, 先凑合用着呗, 应该解决不了, 能解决 qyl 大佬肯定早就解决了
    HugZephyr •
    @HugZephyr 右侧可以固定宽度，然后用左右顺滑方式显示，类似 [js] 好玩：模仿 obsidian 自滚动菜单，丝滑！ 或者右侧显示一个菜单按钮，下拉显示
    wilsons • • 1
    @wilsons 我看到 savor 也有这个效果, 不过应该是配置 js 实现的, 我还没研究, 它的效果好很多
    HugZephyr •
    @HugZephyr 主题是没问题的，会自动避开顶栏按钮，不知道你那里什么情况
    queguaiya • • 1
    @queguaiya 哦, 不好意思, 主题确实没问题, 我看是 js 做的, 只用 css 就很粗暴
    HugZephyr •
  • 查看全部回帖
zzinn
金华
回帖
25
 帖子
6
 积分
511

近期热议

推荐标签 标签

  • Chrome

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

    63 引用 • 289 回帖 • 1 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 27 关注
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 11 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 548 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 838 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    135 引用 • 798 回帖 • 2 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    188 引用 • 833 回帖 • 2 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 598 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    203 引用 • 4024 回帖
  • 持续集成

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

    15 引用 • 7 回帖
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 404 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 2 关注
  • Outlook
    1 引用 • 5 回帖 • 1 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    200 引用 • 545 回帖
  • Visio
    1 引用 • 2 回帖
  • Ngui

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

    7 引用 • 9 回帖 • 430 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    599 引用 • 3541 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 429 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    293 引用 • 4496 回帖 • 688 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 99 关注
  • Folo

    Folo 是一个 RSS 阅读和信息聚合应用，整合多种内容源到统一时间线。

    项目地址：https://github.com/RSSNext/Folo

    1 引用 • 3 回帖 • 2 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 链书

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

    链书社

    链书目前已经下线，也许以后还有机会重制。

    14 引用 • 258 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注

最新标签