登录 注册

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

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

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

    26301 引用 • 109348 回帖
  • Q&A

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

    10114 引用 • 45941 回帖 • 64 关注
3 回帖
222 79 1 39 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
回帖
180
 帖子
48
 积分
970

近期热议

推荐标签 标签

  • SSL

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

    70 引用 • 193 回帖 • 408 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 67 回帖 • 445 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    83 引用 • 412 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 3 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 469 关注
  • OneNote
    1 引用 • 3 回帖
  • Python

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

    554 引用 • 675 回帖
  • Kafka

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

    36 引用 • 35 回帖 • 3 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 314 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    947 引用 • 1460 回帖 • 2 关注
  • uTools

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

    7 引用 • 28 回帖
  • abitmean

    有点意思就行了

    • 35 关注
  • Webswing

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

    1 引用 • 15 回帖 • 643 关注
  • MySQL

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

    694 引用 • 537 回帖
  • AWS
    11 引用 • 28 回帖 • 9 关注
  • 工具

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

    300 引用 • 768 回帖
  • OnlyOffice
    4 引用 • 18 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 1 关注
  • 七牛云

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

    29 引用 • 230 回帖 • 122 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 724 关注
  • Q&A

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

    10114 引用 • 45941 回帖 • 64 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 82 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 9 关注
  • SVN

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

    29 引用 • 98 回帖 • 699 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 6 关注

最新标签