登录 注册

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

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

PixPin20240916113534.png

  • 思源笔记

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

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

    23014 引用 • 92568 回帖
  • Q&A

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

    8447 引用 • 38479 回帖 • 155 关注
1 操作
Helvetica 在 2024-09-16 12:32:47 更新了该帖
100 悬赏
2 收藏
1 操作
8 回帖
3
3
255 93 156 1 4

相关帖子

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
回帖
67
 帖子
13
 积分
828

近期热议

推荐标签 标签

  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖 • 1 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 140 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • 工具

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

    288 引用 • 734 回帖 • 2 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 2 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    210 引用 • 2036 回帖
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • Jenkins

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

    53 引用 • 37 回帖 • 3 关注
  • Gitea

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

    4 引用 • 16 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 559 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 635 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 172 关注
  • 自由行
    • 4 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    167 引用 • 1520 回帖
  • gRpc
    11 引用 • 9 回帖 • 69 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 700 关注

最新标签