登录 注册

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

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

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

    26658 引用 • 111003 回帖
  • Q&A

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

    10282 引用 • 46734 回帖 • 62 关注
3 回帖
241 82 1 47 2 109

相关帖子

被采纳的回答
  • 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
回帖
188
 帖子
49
 积分
634

近期热议

推荐标签 标签

  • QQ

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

    45 引用 • 557 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • JVM

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

    180 引用 • 120 回帖
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 675 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 2 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    415 引用 • 3601 回帖
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 687 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 2 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    337 引用 • 324 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 523 关注
  • Visio
    1 引用 • 2 回帖
  • Ubuntu

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

    127 引用 • 169 回帖 • 1 关注
  • TGIF

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

    292 引用 • 4495 回帖 • 665 关注
  • SVN

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

    29 引用 • 98 回帖 • 698 关注
  • Spring

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

    948 引用 • 1460 回帖 • 2 关注
  • Chrome

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

    63 引用 • 289 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    186 引用 • 3909 回帖
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • CAP

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

    12 引用 • 5 回帖 • 635 关注
  • sts
    2 引用 • 2 回帖 • 247 关注
  • FlowUs

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

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

    1 引用 • 3 关注
  • Ngui

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

    7 引用 • 9 回帖 • 413 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 12 关注

最新标签