Zen浏览器自定义

虽然也是自己一步一步从AI嘴里问出来的，但是好歹烧了token，也花了时间

Prerequisites

1. 启用自定义配置：首先访问about:config，将toolkit.legacyUserProfileCustomizations.stylesheets设置为true
2. 开启CSS调试：将devtools.chrome.enabled设置为true
3. 创建自定义文件：访问about:support，找到“打开配置文件夹的按钮”，新建chrome文件夹，并在其中创建userChrome.css和userContent.css文件

浏览器自定义（非内容区）需要在userChrome.css中进行配置，目前只做了如下：

1
/* 修改所有标签页（包括非激活状态）的圆角 */
2
.tabbrowser-tab .tab-background {
3
  border-radius: 12px !important;
4
}
5

6
/* 为几乎所有元素设置字体，但排除标题栏按钮 */
7
*:not(.titlebar-buttonbox-container *) {
8
  font-family: "Noto Serif SC", sans-serif !important;
9
}
10

11
#navigator-toolbox {
12
  --zen-compact-float: 0px !important;
13
  border: none !important;
14
  background-color: var(--zen-main-browser-background-toolbar) !important;
15
}

如果要修改内容区的样式，比如about:*、https://*等需要通过地址栏访问的网站，就需要在userContent.css中进行修改，不过其实一般只需要对浏览器内置的页面进行修改就可以了，而且主要是字体方面

1
/* 针对 about:* 页面设置字体 */
2
@-moz-document url-prefix("about:") {
3
  * {
4
    font-family: "Noto Serif SC", sans-serif !important;
5
  }
6
}