登录 注册

外观改进建议

喜欢修改后的样式吗

单选 • 公开 • 永不结束 31 票
喜欢
90% • 28 票
不喜欢
9% • 3 票

左侧是修改后的，右侧是原来的

image.png

左侧我自己做了些符合自己口味的修改，如圆角、下拉栏边框颜色等，这个不在建议范围内。

我的建议是：

  1. 字体调粗一些：方便看到字体颜色
  2. 每个选项略微增大：利于辨识
  3. 移除每个选项外轮廓的 border/阴影：这个其实会干扰颜色的判断，
  4. 还有个没做的，将样式弹窗的背景色与编辑器的背景色统一，方便一眼判断

总的来说就是减少不必要的干扰，然后一眼就能看清选择样式后的颜色。

  • 思源笔记

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

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

    23107 引用 • 93035 回帖
1 感谢
1 收藏
1 赞同
5 回帖
2
197 188 4 1 4

相关帖子

5 回帖
外观改进建议

欢迎来到这里！

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

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

    好看，改成 wolai 那个也不错，这样就可以自定义颜色了

  • 其他回帖
  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    关联 Issue #13036 · siyuan-note/siyuan

  • ACai • • 1
    订阅者 付费者 支持者 作者 
    .protyle-util {
    position: fixed;
    border-radius: var(--b3-border-radius-b);
    box-shadow: var(--b3-dialog-shadow);
    border: unset;
    background-color: var(--b3-menu-background);
    padding: 8px 0;
    max-height: 80vh;
    z-index: 4;
    box-sizing: border-box;
}

button.color__square {
    font-size: 135%;
    font-weight: 900 !important;
}

.color__square {
    height: 24px;
    margin-right: 4px;
    width: 24px;
    border: 0;
    transition: var(--b3-transition);
    box-shadow: 0 0 0 px var(--b3-theme-surface-lighter) inset;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--b3-theme-background);
    padding: 0;
    border-radius: var(--b3-border-radius);
}

div.protyle-util > div.protyle-font > div.fn__flex > .b3-select {
    border: 0;
    border-radius: var(--b3-border-radius);
    padding: 4px 26px 4px 8px;
    box-sizing: border-box;
    line-height: 20px;
    color: var(--b3-theme-on-background);
    transition: box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1),background-color .2s cubic-bezier(0, 0, 0.2, 1) 0ms;
    height: 28px;
    font-size: 14px;
    box-shadow: inset 0 0 0 .6px var(--b3-theme-background-light);
    background: var(--b3-select-background);
    appearance: none;
    cursor: pointer;
    overflow: hidden;
}

.protyle-util {
    position: fixed;
    border-radius: 20px;
    box-shadow: var(--b3-dialog-shadow);
    border: unset;
    background-color: var(--b3-menu-background);
    padding: 8px 0;
    max-height: 80vh;
    z-index: 4;
    box-sizing: border-box;
}

button.color__square {
    font-size: 135%;
    font-weight: 900 !important;
}

.color__square {
    height: 24px;
    margin-right: 4px;
    width: 24px;
    border: 0;
    transition: var(--b3-transition);
    box-shadow: 0 0 0 px var(--b3-theme-surface-lighter) inset;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--b3-theme-background);
    padding: 0;
    border-radius: 10px;
}

div.protyle-util > div.protyle-font > div.fn__flex > .b3-select {
    border: 0;
    border-radius: 10px;
    padding: 4px 26px 4px 8px;
    box-sizing: border-box;
    line-height: 20px;
    color: var(--b3-theme-on-background);
    transition: box-shadow 120ms 0ms cubic-bezier(0, 0, 0.2, 1),background-color .2s cubic-bezier(0, 0, 0.2, 1) 0ms;
    height: 28px;
    font-size: 14px;
    box-shadow: inset 0 0 0 .6px var(--b3-theme-background-light);
    background: var(--b3-select-background);
    appearance: none;
    cursor: pointer;
    overflow: hidden;
}

    这里面有很多没必要保留的声明，但我比较懒没删，所以将就一下吧，放代码片段中就可以了

  • shiyuankill •

    怎么修改的，有代码吗

    2 回复
  • 查看全部回帖
ACai
回帖
189
 帖子
21
 积分
52938

近期热议

推荐标签 标签

  • Markdown

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

    167 引用 • 1520 回帖
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖 • 2 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • 自由行
    • 5 关注
  • Oracle

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

    107 引用 • 127 回帖 • 370 关注
  • Electron

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

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

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    5 引用 • 107 回帖 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 790 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 248 关注
  • CodeMirror
    1 引用 • 2 回帖 • 130 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 403 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • FreeMarker

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

    23 引用 • 20 回帖 • 465 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    136 引用 • 193 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 31 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 162 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 795 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • 书籍

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

    78 引用 • 391 回帖
  • Jenkins

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

    53 引用 • 37 回帖 • 2 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注

最新标签