登录 注册

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

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

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

    25991 引用 • 107842 回帖
  • Q&A

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

    9980 引用 • 45371 回帖 • 75 关注
3 回帖
205 77 1 29 2 96

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 •
  • 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 •
Floria233
回帖
174
 帖子
44
 积分
1224

近期热议

推荐标签 标签

  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • Python

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

    554 引用 • 675 回帖
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 613 关注
  • CongSec

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

    1 引用 • 1 回帖 • 37 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 645 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • 生活

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

    230 引用 • 1432 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 58 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 487 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • CSS

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

    198 引用 • 543 回帖 • 1 关注
  • Gitea

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

    5 引用 • 16 回帖 • 1 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 553 关注
  • abitmean

    有点意思就行了

    • 34 关注
  • React

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

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

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 341 关注
  • Jenkins

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

    54 引用 • 37 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 2 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    228 引用 • 476 回帖 • 1 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 676 关注
  • Kafka

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

    36 引用 • 35 回帖 • 1 关注
  • 微信

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

    133 引用 • 796 回帖
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 79 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 118 关注

最新标签