登录 注册

求个引述块样式

我使用的主题为：浅吟

我想把 QYL 主题里面的引述块用到浅吟主题里面 ，但是不知道该怎么做

image.png

这个是引过来的 ，跟 QYL 里面的样式不太一样

自己整了几个引述块样式 ，明亮主题和暗色主题都是可以使用的哈

  • 思源笔记

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

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

    28444 引用 • 119763 回帖
  • Q&A

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

    11153 引用 • 50648 回帖 • 52 关注
1 操作
NorthCJ 在 2025-08-03 13:56:19 更新了该帖
杭州 位置
30 悬赏
2 收藏
1 操作
4 回帖
4
109 81 28

相关帖子

4 回帖
求个引述块样式

欢迎来到这里！

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

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

    暗色模式下：

    image.png

    亮色模式下：

    image.png

  • 其他回帖
  • NorthCJ •
    付费者 作者

    image.png

    /* 精美引述块样式 - 非斜体 + 莫兰迪蓝灰系 + 紧凑高度 */
.b3-typography blockquote,
.b3-typography .bq,
.protyle-wysiwyg blockquote,
.protyle-wysiwyg .bq {
    position: relative;
    margin: 10px 0;
    padding: 8px 14px; /* 紧凑高度 */
    border-left: 0.35em solid #607d8b; /* 莫兰迪灰蓝色 #607d8b (Material Blue Grey 500) */
    background-color: rgba(96, 125, 139, 0.06); /* 柔和灰蓝背景 */
    border-radius: 0 6px 6px 0;
    color: var(--b3-theme-on-surface); /* 主题文字色，清晰可读 */
    font-style: normal; /* 正文不斜体 */
    font-size: 0.96em;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
}

/* 悬停效果：边框变暖一点，背景稍亮 */
.b3-typography blockquote:hover,
.protyle-wysiwyg blockquote:hover {
    background-color: rgba(60, 100, 120, 0.09);
    border-left-color: #546e7a; /* 加深一点的蓝灰 */
}

/* 移除所有默认 ::before 伪元素干扰 */
.b3-typography blockquote::before,
.b3-typography .bq::before,
.protyle-wysiwyg blockquote::before,
.protyle-wysiwyg .bq::before {
    display: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .b3-typography blockquote,
    .protyle-wysiwyg blockquote {
        background-color: rgba(96, 125, 139, 0.12);
        border-left-color: #78909c; /* 浅蓝灰 */
        color: #e8f0f2;
        border-top-color: rgba(255, 255, 255, 0.08);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .b3-typography blockquote:hover,
    .protyle-wysiwyg blockquote:hover {
        background-color: rgba(96, 125, 139, 0.18);
        border-left-color: #90a4ae;
    }
}
  • NorthCJ •
    付费者 作者

    image.png

    /* 紧凑且优雅的引述块样式 */
.b3-typography blockquote,
.b3-typography .bq,
.protyle-wysiwyg blockquote,
.protyle-wysiwyg .bq {
    position: relative;
    margin: 8px 0; /* 减少上下外边距 */
    padding: 6px 10px; /* 更紧凑的内边距 */
    padding-left: 12px; /* 稍微增加左侧内边距，但保持紧凑 */
    border-left: 4px solid #5e97b0; /* 柔和的蓝色边框 */
    background-color: rgba(94, 151, 176, 0.05); /* 温柔背景色 */
    border-radius: 4px; /* 小圆角处理 */
    color: var(--b3-theme-on-surface-lighter); /* 使用主题变量定义文字颜色 */
    font-size: 0.98em; /* 文字大小略微缩小 */
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

/* 悬停时的变化 */
.b3-typography blockquote:hover,
.protyle-wysiwyg blockquote:hover {
    background-color: rgba(94, 151, 176, 0.1);
    border-left-color: #4a7d9a; /* 边框颜色加深 */
}

/* 移除所有默认 ::before 伪元素干扰 */
.b3-typography blockquote::before,
.b3-typography .bq::before,
.protyle-wysiwyg blockquote::before,
.protyle-wysiwyg .bq::before {
    display: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .b3-typography blockquote,
    .protyle-wysiwyg blockquote {
        background-color: rgba(94, 151, 176, 0.15);
        border-left-color: #7ab8db; /* 浅蓝灰 */
        color: #d3eaf2;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(255, 255, 255, 0.05);
    }

    .b3-typography blockquote:hover,
    .protyle-wysiwyg blockquote:hover {
        background-color: rgba(94, 151, 176, 0.2);
        border-left-color: #9bd0ea;
    }
}
  • NorthCJ •
    付费者 作者

    image.png

    /* 极致优化的引述块样式 */
.b3-typography blockquote,
.b3-typography .bq,
.protyle-wysiwyg blockquote,
.protyle-wysiwyg .bq {
    position: relative;
    margin: 8px 0; /* 紧凑的上下外边距 */
    padding: 7px 12px; /* 更加紧凑但舒适的内边距 */
    border-left: 5px solid #64b5f6; /* 温柔而鲜明的蓝色边框 */
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.05) 0%, rgba(100, 181, 246, 0.02) 100%); /* 柔和的渐变背景 */
    border-radius: 6px; /* 圆润的边角 */
    color: var(--b3-theme-on-surface-lighter); /* 使用主题变量定义文字颜色 */
    font-size: 1em; /* 标准字体大小 */
    line-height: 1.6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease-in-out;
}

/* 悬停时的变化 */
.b3-typography blockquote:hover,
.protyle-wysiwyg blockquote:hover {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.1) 0%, rgba(100, 181, 246, 0.05) 100%);
    border-left-color: #3d85c6; /* 边框颜色加深 */
}

/* 添加一个小装饰元素（可选） */
.b3-typography blockquote::after,
.protyle-wysiwyg blockquote::after {
    content: "“"; /* 引号装饰 */
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 2em;
    opacity: 0.3;
    color: inherit;
}

/* 移除所有默认 ::before 伪元素干扰 */
.b3-typography blockquote::before,
.b3-typography .bq::before,
.protyle-wysiwyg blockquote::before,
.protyle-wysiwyg .bq::before {
    display: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .b3-typography blockquote,
    .protyle-wysiwyg blockquote {
        background: linear-gradient(135deg, rgba(100, 181, 246, 0.15) 0%, rgba(100, 181, 246, 0.1) 100%);
        border-left-color: #90caf9; /* 浅蓝灰 */
        color: #e0f5fe;
        box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.03);
    }

    .b3-typography blockquote:hover,
    .protyle-wysiwyg blockquote:hover {
        background: linear-gradient(135deg, rgba(100, 181, 246, 0.2) 0%, rgba(100, 181, 246, 0.15) 100%);
        border-left-color: #bbdefb;
    }
}
NorthCJ
杭州
回帖
63
 帖子
28
 积分
17

近期热议

推荐标签 标签

  • Mac

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

    168 引用 • 598 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    561 引用 • 677 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 234 回帖 • 2 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 706 关注
  • Outlook
    1 引用 • 5 回帖 • 1 关注
  • 强迫症

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

    15 引用 • 161 回帖 • 1 关注
  • TGIF

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

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

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 120 关注
  • 游戏

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

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

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • Log4j

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

    20 引用 • 18 回帖 • 60 关注
  • SSL

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

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

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

    46 引用 • 114 回帖 • 139 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    27 引用 • 7 回帖 • 93 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    35 引用 • 468 回帖 • 768 关注
  • Shell

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

    126 引用 • 83 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1746 回帖 • 10 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • MySQL

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

    695 引用 • 538 回帖 • 2 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1449 引用 • 10092 回帖 • 488 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    466 引用 • 1241 回帖 • 611 关注
  • 千千插件

    千千块（自定义块 css 和 js）
    可以用 ai 提示词来无限创作思源笔记

    32 引用 • 69 回帖
  • JetBrains

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

    18 引用 • 54 回帖

最新标签