登录 注册

[css] 优化代码块顶栏按钮样式

效果

image.png

image.png

css 代码


/* *****************************代码块***************************** */

/* 代码块 */
.protyle-wysiwyg[contenteditable] .code-block:not([fold="1"]) {
    margin-top: 25px;
    padding-top: 5px;
    /* 1px宽度，实线，黑色 */
    border: 1px solid rgba(0, 0, 0, 0.5);

    /* 顶栏 */
    .protyle-action {
        background-color: var(--b3-theme-surface);
        position: sticky;
        margin: -32px -5px 8px auto;
        width: fit-content;
        /*靠右*/
        display: flex;
        justify-content: flex-end;
        border-radius: 5px;

        /* 语言选择按钮 */
        .protyle-action__language {
            color: var(--b3-font-color6);
            opacity: 1;
            /*常显示*/
            padding: 0px 20px;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.15);
            margin-top: 0px;
            height: 24px;
        }
        .protyle-action__language:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

        /* 间隔 */
        span.fn__flex-1 {
            flex: none;
            width: 10px;
        }

        /* 复制/设置按钮*/
        .protyle-icon {
            opacity: 0.8 !important;
            /* 不透明度设置为不透明 */
        }
    }

    /* 代码块 代码部分 */
    div.hljs {
        padding: 2px 6px;
    }
}


​
  • 思源笔记

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

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

    24718 引用 • 101513 回帖
  • 代码片段

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

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

    132 引用 • 873 回帖 • 3 关注
佛山 位置
2 收藏
1 回帖
202 111 11 1 79

相关帖子

1 回帖
[css] 优化代码块顶栏按钮样式

欢迎来到这里！

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

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

    还有一种缩进去的效果, 不过如果第一行太长就会被盖住

    image.png

    /* 代码块 */
.protyle-wysiwyg[contenteditable] .code-block {
    margin: 2px 0px;
    /* 1px宽度，实线，黑色 */
    border: 1px solid rgba(0, 0, 0, 0.5);

    /* 顶栏 */
    .protyle-action {
        background-color: var(--b3-theme-surface);
        position: sticky;
        margin-left: auto;
        padding: 2px;
        width: fit-content;
        border-radius: 5px;

        /* 语言选择按钮 */
        .protyle-action__language {
            color: var(--b3-font-color6);
            opacity: 1;
            /*常显示*/
            padding: 0px 20px;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.15);
            margin-top: 0px;
            height: 24px;
        }
        .protyle-action__language:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

        /* 间隔 */
        span.fn__flex-1 {
            flex: none;
            width: 10px;
        }

        /* 复制/设置按钮*/
        .protyle-icon {
            opacity: 0.8 !important;
            margin-top: 0px !important;
            /* 不透明度设置为不透明 */
        }
    }

    /* 代码块 代码部分 */
    div.hljs {
        padding: 2px 6px;
        margin-top: -30px;
    }
}



/*调整代码块折叠最大高度
.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]).code-block {
    height: 200px;
    overflow: auto!important;
    opacity: 1;
}
*/


​
EmberSky
如果感觉我的回答对你有帮助, 请点击 感谢 支持一下, 谢谢! 佛山
回帖
361
 帖子
59
 积分
10025

近期热议

推荐标签 标签

  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 22 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 9 关注
  • H2

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

    11 引用 • 54 回帖 • 662 关注
  • SMTP

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

    4 引用 • 18 回帖 • 636 关注
  • iOS

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

    87 引用 • 139 回帖
  • 脑图

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

    31 引用 • 96 回帖
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • Excel
    31 引用 • 28 回帖 • 1 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖 • 1 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 631 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • GitHub

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

    210 引用 • 2040 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • Q&A

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

    9355 引用 • 42618 回帖 • 114 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 75 关注
  • Postman

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

    4 引用 • 3 回帖 • 1 关注
  • WebComponents

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

    1 引用 • 8 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 804 关注
  • JetBrains

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

    18 引用 • 54 回帖 • 1 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 201 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 382 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 657 关注

最新标签