来自nord的一个主题,仅备份。
备注1:这个主题需要搭配一个包含svg图标的文件夹。文件夹按照此css的布局是放置在chrome同级的目录下。
备注2:如果按钮偏大,可以修改css中的 .toolbarbutton-icon的width和height,12-13就可以。
备注3:在mac系统下面,这段代码要删除,没有系统自带的好。
/* macOS style window controls */
.titlebar-button {
display: -moz-box !important;
border: none;
margin: 0 !important;
padding: 8px 17px;
-moz-context-properties: stroke;
stroke: currentColor;
}
:root:not([sizemode="maximized"], [inFullscreen]) :is(.titlebar-restore, .uc-titlebar-restore),
:root:is([sizemode="maximized"], [inFullscreen]) :is(.titlebar-max, .uc-titlebar-max) {
display: none !important;
}
/*:root:-moz-window-inactive:not([customizing]) .titlebar-buttonbox > toolbarbutton:not(:hover) {
list-style-image: url(../mac/inactive.svg) !important;
}
*/
.titlebar-buttonbox .toolbarbutton-icon {
opacity: 1 !important;
}
.titlebar-button > .toolbarbutton-icon {
appearance: none !important;
width: 15.3px !important;
height: 15.3px !important;
stroke: none !important;
}
.titlebar-buttonbox {
appearance: none !important;
}
.titlebar-max,
.uc-titlebar-max,
.titlebar-restore,
.uc-titlebar-restore {
appearance: none !important;
padding: 0px !important;
padding-left: 7px !important;
padding-right: 7px !important;
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: transparent !important;
list-style-image: url(../mac/maximize.svg) !important;
grid-column: 1 !important;
order: 2 !important;
}
:is(.titlebar-max, .uc-titlebar-max):hover {
list-style-image: url(../mac/maximize-hover.svg) !important;
}
:root:is([sizemode="maximized"], [inFullscreen]) :is(.titlebar-max, .uc-titlebar-max):hover,
:is(.titlebar-restore, .uc-titlebar-restore):hover {
list-style-image: url(../mac/maximize-restore.svg) !important;
}
:is(.titlebar-min, .uc-titlebar-min) {
appearance: none !important;
padding: 0px !important;
padding-left: 7px !important;
padding-right: 7px !important;
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: transparent !important;
order: 1 !important;
list-style-image: url(../mac/minimize.svg) !important;
}
:is(.titlebar-min, .uc-titlebar-min):hover {
list-style-image: url(../mac/minimize-hover.svg) !important;
}
.titlebar-close,
.uc-titlebar-close {
appearance: none !important;
padding: 0px !important;
padding-left: 7px !important;
padding-right: 7px !important;
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: transparent !important;
order: 3 !important;
list-style-image: url(../mac/close.svg) !important;
}
:is(.titlebar-close, .uc-titlebar-close):hover {
list-style-image: url(../mac/close-hover.svg) !important;
}
/* private browsing indicator next to window controls */
.accessibility-indicator,
.private-browsing-indicator {
height: auto !important;
width: auto !important;
padding: 0 var(--toolbarbutton-outer-padding) !important;
margin: 0 !important;
background: none !important;
border: 0 !important;
outline: 0;
fill: currentColor !important;
-moz-context-properties: fill, fill-opacity !important;
-moz-box-align: center !important;
-moz-box-pack: center !important;
}
.private-browsing-indicator {
background: none !important;
}
.private-browsing-indicator::before {
content: "";
display: -moz-box;
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
background-image: url(chrome://userchrome/content/skin/privateBrowsing.svg) !important;
background-size: 16px !important;
background-position: center !important;
background-repeat: no-repeat !important;
padding: var(--toolbarbutton-inner-padding) !important;
border-radius: var(--toolbarbutton-border-radius) !important;
}
.accessibility-indicator > .button-box {
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
padding: var(--toolbarbutton-inner-padding) !important;
border-radius: var(--toolbarbutton-border-radius) !important;
}
.accessibility-indicator > .button-box > .button-icon {
width: 16px !important;
height: 16px !important;
list-style-image: url(chrome://userchrome/content/devtools/tool-accessibility.svg) !important;
}
.accessibility-indicator:is(:hover, :focus-visible) > .button-box,
button.private-browsing-indicator:is(:hover, :focus-visible)::before {
background-color: var(--arrowpanel-dimmed) !important;
}
.accessibility-indicator:is(:hover:active, [open]) > .button-box,
button.private-browsing-indicator:is(:hover:active, [open])::before {
background-color: var(--arrowpanel-dimmed-further) !important;
}