登录 注册

求一段外观面板中「颜色」样式修改的 CSS 代码

本贴最后更新于 263 天前，其中的信息可能已经渤澥桑田

根据论坛的文章，学会了编辑高亮和背景色的 CSS，但是到这块就卡壳了（图片中红色框选的部分，不是修改该面板的样式，是应用这个样式后的文字的样式），求大佬给一份代码，可以修改这四项的背景色、文字颜色、周围间距的数值。

PixPin20240916113534.png

  • 思源笔记

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

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

    25834 引用 • 106980 回帖
  • Q&A

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

    9913 引用 • 45037 回帖 • 78 关注
1 操作
Helvetica 在 2024-09-16 12:32:47 更新了该帖
100 悬赏
2 收藏
1 操作
8 回帖
3
3
555 100 4 320 1 129

相关帖子

8 回帖
求一段外观面板中「颜色」样式修改的 CSS 代码

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • NorthCJ • • 1
    付费者

    这个是 Savor 主题上的 ，其他的主题没试过 ，你可以看下有没有效果

    :root{
    /* 卡片背景 */
    --b3-card-error-color: rgb(97, 26, 21);
    --b3-card-error-background: rgb(238, 213, 210) !important;
    --b3-card-warning-color: rgb(102, 60, 0);
    --b3-card-warning-background: rgb(243, 225, 200) !important;
    --b3-card-info-color: rgb(13, 60, 97);
    --b3-card-info-background: rgb(204, 223, 237) !important;
    --b3-card-success-color: rgb(30, 70, 32);
    --b3-card-success-background: rgb(217, 239, 217) !important;
}
​
    1 回复
  • Muu •
    付费者

    背景色和文字颜色

    这个用 css 改这里的显示对实际应用的颜色好似不生效 (生效颜色应该是主题的这几个常量)

    image.png

    周围间距

    image.png

    可以根据 上图的 class 和 data-type 进行按组设置

    例如使用颜色举例

    image.png

    1 回复
  • Helvetica •
    付费者 捐赠者 作者

    感谢帮助，我测试了一下，修改这些数值会影响到数据库单选项的颜色，这四个样式可以单独调整吗？

    1 回复
  • Helvetica •
    付费者 捐赠者 作者

    感谢，图示很详细了，如果是具备 CSS 基础的应该能明白，我是一点不会，只会复制粘贴修改数值。😂

    1 回复
  • wilsons • • 1
    付费者 捐赠者

    大抵是可以的吧，你试试看，颜色和边距我随便设的，根据自己的需要调整

    image.png

    /* 第1个 */
.protyle-util .color__square[style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);"] {
    color: red!important;
    background-color: green!important;
    margin: 8px;
}
/* 第2个 */
.protyle-util .color__square[style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);"] {
    color: #a74141!important;
    background-color: #dfd020!important;
    margin: 8px;
}
/* 第3个 */
.protyle-util .color__square[style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);"] {
    color: #fbcbcc!important;
    background-color: #228be6!important;
    margin: 8px;
}
/* 第4个 */
.protyle-util .color__square[style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);"] {
    color: #fff!important;
    background-color: #807c00!important;
    margin: 8px;
}
​

    但这仅是对这几个按钮外观的修改，并不能使这几个按钮作用下的文字起作用，如果想让作用下的文字也起作用，可参考 求助一个样式 CSS

  • Muu • • 1
    付费者

    image.png

    间距直接改数值就行

  • Muu •
    付费者

    对于字体颜色和背景颜色 可以使用 插件修改(感谢插件大佬)

    image.png

    image.png

  • Helvetica •
    付费者 捐赠者 作者

    谢谢回复的各位，现在看来修改这四个数值会影响到的范围比较大，需要研究太深的的话我就不折腾了。再次感谢热心帮助。

请输入回帖内容 ...
Helvetica
回帖
75
 帖子
13
 积分
1181

近期热议

推荐标签 标签

  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 560 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 221 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1794 回帖 • 2 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 395 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 636 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 8 关注
  • SQLServer

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

    21 引用 • 31 回帖 • 4 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 17 关注
  • abitmean

    有点意思就行了

    • 33 关注
  • Oracle

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

    107 引用 • 127 回帖 • 340 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    45 引用 • 114 回帖 • 178 关注
  • 生活

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

    229 引用 • 1432 回帖 • 1 关注
  • 链滴

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

    记录生活，连接点滴

    179 引用 • 3877 回帖
  • JVM

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

    180 引用 • 120 回帖 • 2 关注
  • MySQL

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

    693 引用 • 537 回帖 • 1 关注
  • Flutter

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

    39 引用 • 92 回帖 • 5 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 628 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 110 关注
  • Jenkins

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

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

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 253 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1742 回帖 • 3 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 5 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • CongSec

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

    1 引用 • 1 回帖 • 36 关注

最新标签