求助帮忙修改一份控制 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; }
  • 思源笔记

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

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

    25819 引用 • 106899 回帖 • 1 关注
  • Q&A

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

    9903 引用 • 45013 回帖 • 78 关注

相关帖子

被采纳的回答
  • 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; }

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • veee 1 1 评论 via macOS

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

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

推荐标签 标签

  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 555 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 4 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • gRpc
    11 引用 • 9 回帖 • 97 关注
  • WebClipper

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

    3 引用 • 9 回帖 • 1 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 227 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 反馈

    Communication channel for makers and users.

    122 引用 • 912 回帖 • 278 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 403 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 125 关注
  • 快应用

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

    15 引用 • 127 回帖
  • etcd

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

    6 引用 • 26 回帖 • 544 关注
  • RemNote
    2 引用 • 16 回帖 • 18 关注
  • JVM

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

    180 引用 • 120 回帖 • 1 关注
  • 脑图

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

    32 引用 • 99 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • SVN

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

    29 引用 • 98 回帖 • 692 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    496 引用 • 934 回帖
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 1 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 386 关注
  • CSS

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

    198 引用 • 543 回帖 • 6 关注
  • React

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

    192 引用 • 291 回帖 • 370 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

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

    134 引用 • 1127 回帖 • 110 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 157 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 661 关注