登录 注册

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

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

PixPin20240916113534.png

  • 思源笔记

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

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

    22340 引用 • 89396 回帖 • 1 关注
  • Q&A

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

    8115 引用 • 37010 回帖 • 160 关注
1 操作
Helvetica 在 2024-09-16 12:32:47 更新了该帖
100 悬赏
2 收藏
1 操作
8 回帖
3
3
205 91 112 1

相关帖子

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
 帖子
11
 积分
891

近期热议

推荐标签 标签

  • OnlyOffice
    4 引用 • 2 关注
  • 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.

    6 引用 • 63 回帖
  • SSL

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

    70 引用 • 193 回帖 • 431 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 529 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 462 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    407 引用 • 1246 回帖 • 582 关注
  • JVM

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

    180 引用 • 120 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 113 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    351 引用 • 1814 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • GitLab

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

    46 引用 • 72 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    69 引用 • 373 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 672 关注
  • Sphinx

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

    1 引用 • 210 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 154 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 709 关注
  • Rust

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

    58 引用 • 22 回帖 • 1 关注
  • 书籍

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

    77 引用 • 390 回帖
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Swift

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

    36 引用 • 37 回帖 • 529 关注
  • 30Seconds

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

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

    这是一个不能说的秘密。

    120 引用 • 599 回帖

最新标签