Firefox“最小化/最大化/关闭”按钮的大小调整的可行性方案- Community

[Share Experiences] Firefox“最小化/最大化/关闭”按钮的大小调整的可行性方案

Experiences and Insight 1622 views · 8 replies ·

thepoy

deepin

2021-01-30 18:58

Author

火狐是支持用户通过css文件对浏览器的一些部件进行修改的，具体步骤如下：

1、进入高级配置，在地址栏输入about:config，回车。
2、输入userprof搜索，找到toolkit.legacyUserProfileCustomizations.stylesheets，将后面的false改为true。
3、打开Firefox用户配置文件，地址栏输入about:profiles，回车即可。
4、找到正在使用的配置文件，打开根目录（火狐的配置文件根目录名是随机的）。
5、在配置文件的根目录里新建目录chrome。
6、进入chrome，新建css文件userChrome.css。
7、修改userChrome.css，添加内容如下（需要自行调整）：

/* 这是调整按钮大小 */
.titlebar-button > .toolbarbutton-icon {
    height: 30px !important;
    min-height: 30px !important;
    width: 15px !important;
    min-width: 30px !important;
}

/* 这是调整按扭内边距 */
.titlebar-button {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 6px !important; 
}

/* 这是修改最小化按钮样式，可换自定义图片，其他参数也可以自行调整 */
.titlebar-min{
    position: relative !important;
    list-style-image: url("red.png") !important;
    list-style-type: square !important;
    list-style-position: inherit !important;
}
/* 这是修改最大化按钮样式，参考最小化按钮 */
.titlebar-max{
}
/* 这是最大化后的恢复按钮样式，参考最小化按钮 */
.titlebar-restore{
}
/* 这是修改关闭按钮样式，参考最小化按钮 */
.titlebar-close{
}

示例文件：

.titlebar-button > .toolbarbutton-icon {
    height: 15px !important;
    min-height: 30px !important;
    width: 15px !important;
    min-width: 30px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 6px !important; 
    position: relative !important;
    list-style-type: square !important;
    list-style-position: inherit !important;
}

.titlebar-min{
    list-style-image: url("minimize-normal.svg") !important;
}

.titlebar-min:hover{
    list-style-image: url("minimize-hover.svg") !important;
}

.titlebar-max{
    list-style-image: url("maximize-normal.svg") !important;
}

.titlebar-max:hover{
    list-style-image: url("maximize-hover.svg") !important;
}

.titlebar-restore{
    list-style-image: url("maximized-normal.svg") !important;
}

.titlebar-restore:hover{
    list-style-image: url("maximized-hover.svg") !important;
}

.titlebar-close{
    list-style-image: url("close-normal.svg") !important;
}

.titlebar-close:hover{
    list-style-image: url("close-hover.svg") !important;
}

效果图片加配置文件：https://cloud.189.cn/t/V3iyaym2A7zq

修改后的效果图：