登录 注册

外观改进建议

喜欢修改后的样式吗

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

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

image.png

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

我的建议是：

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

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

  • 思源笔记

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

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

    23012 引用 • 92566 回帖
1 感谢
1 收藏
1 赞同
5 回帖
2
195 186 4 1 4

相关帖子

5 回帖
外观改进建议

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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;
}

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

  • 其他回帖
  • YRJ0422 •
    付费者

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

  • shiyuankill •

    怎么修改的，有代码吗

    2 回复
  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    关联 Issue #13036 · siyuan-note/siyuan

  • 查看全部回帖
ACai
回帖
186
 帖子
21
 积分
52886

近期热议

推荐标签 标签

  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 7 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 14 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • JWT

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

    20 引用 • 15 回帖 • 6 关注
  • C++

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

    107 引用 • 153 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 538 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • 机器学习

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

    83 引用 • 37 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • App

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

    91 引用 • 384 回帖 • 2 关注
  • 自由行
    • 4 关注
  • Sym

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

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

    524 引用 • 4601 回帖 • 700 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 29 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 1 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • Latke

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

    71 引用 • 535 回帖 • 789 关注
  • WordPress

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

    66 引用 • 114 回帖 • 223 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1435 引用 • 10056 回帖 • 489 关注
  • CSDN

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

    14 引用 • 155 回帖
  • Git

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

    209 引用 • 358 回帖 • 1 关注
  • 分享

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

    248 引用 • 1795 回帖
  • 百度

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

    63 引用 • 785 回帖 • 164 关注
  • BookxNote

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

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

    1 引用 • 1 回帖

最新标签