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

火狐是支持用户通过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
效果图:

修改后的效果图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容