登录 注册

外观改进建议

喜欢修改后的样式吗

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

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

image.png

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

我的建议是：

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

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

  • 思源笔记

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

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

    24803 引用 • 102021 回帖 • 1 关注
1 感谢
1 收藏
1 赞同
5 回帖
2
252 206 6 1 39

相关帖子

5 回帖
外观改进建议

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    关联 Issue #13036 · siyuan-note/siyuan

  • YRJ0422 • via iPhone
    付费者

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

  • shiyuankill •

    怎么修改的，有代码吗

    2 回复
  • ACai •
    订阅者 付费者 支持者 作者

    回头找找，我在搞的主题里的，得单拆一下

  • 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;
}
​

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

ACai
回帖
232
 帖子
22
 积分
53783

近期热议

推荐标签 标签

  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • TGIF

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

    289 引用 • 4492 回帖 • 653 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 541 回帖 • 1 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 6 关注
  • 大疆创新

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

    2 引用 • 14 回帖
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    36 引用 • 155 回帖 • 2 关注
  • 互联网

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

    99 引用 • 367 回帖
  • 面试

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

    325 引用 • 1395 回帖 • 1 关注
  • gRpc
    11 引用 • 9 回帖 • 90 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 2 关注
  • App

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

    91 引用 • 384 回帖
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • 新人

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

    52 引用 • 228 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 99 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • AWS
    11 引用 • 28 回帖 • 9 关注
  • ActiveMQ

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

    19 引用 • 13 回帖 • 678 关注
  • 印象笔记
    3 引用 • 16 回帖
  • SQLServer

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

    21 引用 • 31 回帖 • 2 关注
  • 导航

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

    43 引用 • 177 回帖 • 1 关注
  • FlowUs

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

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

    1 引用
  • OneNote
    1 引用 • 3 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 13 关注
  • Wide

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

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

    30 引用 • 218 回帖 • 642 关注

最新标签