登录 注册

求助帮忙修改一份控制 Asri 主题文档备注弹窗的 CSS

这是 CSS 控制下的效果（因为是弹窗，只能拍照凑合看 😂 ）

image.png

如果不加 CSS，效果如下图，这个备注文档属性的字体变得非常小，但备注文档中段落块的弹窗（红圈）就恢复正常

image.png

这是我请 AI 写的一段 CSS，主要达到的效果，就是控制文档备注弹窗所显示的字体大小及换行（之前它的字体很小且不换行）【达到第一张图而效果】

这是极限了啊极限，到了这份上，俺都不知怎么向 AI 提问了（因为缺乏了关于思源 CSS 这方面的知识）

请路过的大大帮忙看下这段代码中的问题 🙏

[data-light-theme="Asri"] .b3-tooltips,
[data-dark-theme="Asri"] .b3-tooltips {
    position: relative; /* 创建定位上下文 */
}

[data-light-theme="Asri"] .b3-tooltips::after,
[data-dark-theme="Asri"] .b3-tooltips::after {
    font-size: 20px !important;
    line-height: 1.5;
    /* 动态宽度配置 */
    width: var(--editor-content-width, 80vw); /* 默认使用编辑器变量 */
    max-width: 100%; /* 防溢出保护 */
    /* 容器样式增强 */
    box-sizing: border-box;
    left: 50%; /* 水平居中定位 */
    transform: translateX(-50%);
    /* 文本换行策略 */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
​
  • 思源笔记

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

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

    26032 引用 • 108039 回帖
  • Q&A

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

    10001 引用 • 45454 回帖 • 73 关注
3 回帖
212 77 1 31 2 101

相关帖子

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

    不知道你的意思是不是这个

    图片.png

    [data-light-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips,
[data-dark-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips {
    position: relative; /* 创建定位上下文 */
}

[data-light-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips::after,
[data-dark-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips::after {
    font-size: 20px !important;
    line-height: 1.5;
    width: var(--editor-content-width, 80vw); /* 默认使用编辑器变量 */
    /* 文本换行策略 */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    text-align: left; 
}
​
3 回帖
求助帮忙修改一份控制 Asri 主题文档备注弹窗的 CSS

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Mustakshif • • 1 • 1 评论
    付费者 捐赠者

    可以用这个选择器，可以只选中文档备注内容的部分，且不必给样式加 !important：

    [data-light-theme=Asri] body .protyle-title .protyle-attr > .protyle-attr--memo::after, 
[data-dark-theme=Asri] body .protyle-title .protyle-attr > .protyle-attr--memo::after {
	/* 自定义CSS内容 */
}
​
    感谢，大大也看懂了我奇怪的描绘啊，三位大大给出的答案实际都是差不多吧（就我目前来看），就是部件块要改一下
    Floria233 •
  • veee • • 1 • 1 评论 via macOS
    订阅者

    看了半天才大概看懂你在说什么……你试一下把所有选择器改成 protyle-attr--memo。也就是把 b3-tooltips 改成 protyle-attr--memo。不知道你说的是不是这个

    感谢，这段描绘确实有点混乱，哈哈，因为一时间没想起浮现在每段段落旁边而那个 M 叫什么。其实就是因为这段 AI 给的 css 有点问题，凭我浅薄的知识，我知道一定是这段代码里控制 css 的某些部件块出了问题，而我又不知道控制思源外观的那些部件块叫什么，所以表达含混了，感谢大大仔细回答。
    Floria233 •
  • Muu • • 1 • 1 评论
    付费者

    不知道你的意思是不是这个

    图片.png

    [data-light-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips,
[data-dark-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips {
    position: relative; /* 创建定位上下文 */
}

[data-light-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips::after,
[data-dark-theme="Asri"] .protyle-attr > .protyle-attr--memo.b3-tooltips::after {
    font-size: 20px !important;
    line-height: 1.5;
    width: var(--editor-content-width, 80vw); /* 默认使用编辑器变量 */
    /* 文本换行策略 */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    text-align: left; 
}
​
    感谢，就是这个意思，没想到我拙劣的表达居然都能被能大大 get，这个很有用
    Floria233 •
Floria233
回帖
174
 帖子
44
 积分
1134

近期热议

推荐标签 标签

  • ActiveMQ

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

    19 引用 • 13 回帖 • 677 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 729 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • DNSPod

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

    6 引用 • 26 回帖 • 539 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 349 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 3 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 4 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 541 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • Log4j

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

    20 引用 • 18 回帖 • 35 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    299 引用 • 765 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 636 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • Vditor

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

    371 引用 • 1857 回帖 • 2 关注
  • MySQL

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

    693 引用 • 537 回帖
  • 叶归
    12 引用 • 56 回帖 • 20 关注
  • Ngui

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

    7 引用 • 9 回帖 • 403 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 734 关注
  • Excel
    31 引用 • 28 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • GitBook

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

    3 引用 • 8 回帖 • 1 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 363 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 280 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 655 关注

最新标签