以下代码可适用于 Firefox 89 及更新版本
书签栏自动隐藏一:
/*书签栏自动隐藏 鼠标放在标签栏上时不显示书签栏*/
#PersonalToolbar {
display: block;
z-index: 1;
transform: perspective(1000px) rotateX(-90deg);
transform-origin: top !important;
visibility: hidden !important;
padding:3px 2px 2px !important; /* 三个数值分别为书签栏与地址栏间隔 书签栏与窗口左边界间隔 书签图标与书签栏最底部间隔 */
height:auto !important;
width: 100% !important;
position: fixed !important;
opacity: 0;
-moz-transition: .1s ease-out !important;
-moz-transition-delay: 0.3s!important; /* 设置多少秒bookmark消失 */
}
#nav-bar:hover ~ #PersonalToolbar,#PersonalToolbar:hover /* 地址栏+标签栏为#navigator-toolbox:hover > */
{
z-index: 1;
transform: rotateX(0deg);
visibility: visible !important;
opacity: 1; /* 动画基于此参数 */
-moz-transition: .1s ease-in !important;
-moz-transition-delay: 0.1s!important; /* 设置多少秒后延迟出现 */
}
书签栏自动隐藏二:
/*书签栏自动隐藏 鼠标放在标签栏上时显示书签栏*/
#PersonalToolbar {
display: block;
z-index: 1;
margin: 0 !important;
}
#PersonalToolbar {
margin-top: 1px !important;
max-height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
position: fixed !important;
width: 100% !important;
-moz-transition: .2s ease-in !important;
-moz-transition-delay: .2s !important;
}
#navigator-toolbox:hover>#PersonalToolbar {
max-height: 30px !important;
min-height: 20px !important;
margin: 0 !important; /* 不显示书签栏与地址栏的边界线条 */
-moz-transition: .2s ease-out !important;
-moz-transition-delay: .2s !important;
}
标签栏:设置标签高度
#titlebar,#tabbrowser-tabs {
--tab-min-height: 30px !important;
}
标签栏:设置标签最大最小宽度
.tabbrowser-tab[fadein]:not([pinned]) {
max-width: 150px !important;
min-width: 80px !important;
}
标签栏:设置标签颜色
/* 活动标签背景色设置 */
.tab-background[selected="true"] {
background: #E1EAEF !important;
}
/*非活动标签和标签栏背景色设置为灰色 与FF 88版非聚焦状态下的标签栏背景色一致 */
#TabsToolbar {
background-color: #C7C7C7;
}
#TabsToolbar:-moz-window-inactive {
color: black;
background-color: #C7C7C7;
}
标签栏:标签页添加分隔线
.tab-stack::before{
content: "";
width: 1px;
height: 50%;
background-color: #aaa;
position: absolute;
top: 25%;
left: -3px;
}
tab:first-child > .tab-stack::before,
.tabbrowser-tab[visuallyselected=true] > .tab-stack::before,
.tabbrowser-tab[visuallyselected=true] + tab >.tab-stack::before{
background-color: transparent;
}
tab.tabbrowser-tab{
padding-left: 3px !important;
padding-right: 2px !important;
}
标签栏:设置标签关闭按钮
/*当前标签显示关闭按钮*/
.tabbrowser-tab:not([selected]) .tab-close-button {
display: none!important;
}/*非当前页关闭按钮自动隐藏*/
.tabbrowser-tab .tab-close-button {
display: none!important;
}/*所有页关闭按钮自动隐藏*/
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display: inherit!important;
}/*鼠标移动上去显示*/
标签栏:减少左侧标签与窗口左边界的间隙
.titlebar-spacer[type="pre-tabs"] {
width: 5px !important; /* Original: 40px */
}
.titlebar-spacer[type="post-tabs"] {
width: 25px !important; /* Original: 40px */
}
URL 地址栏:设置地址栏边框为蓝色
#urlbar[focused] > #urlbar-background{ border-color: #4F8AEF !important; }
URL 地址栏:设置地址栏文字大小和字体
#nav-bar {
-moz-appearance: none !important;
font-size: 95% !important;
font-family: Segoe UI,Tahoma,Microsoft Yahei, Arial, Helvetica, sans-serif !important;
}
URL 地址栏:隐藏隐私跟踪图标
#tracking-protection-icon-container {
display: none !important;
}
URL 地址栏:设置https加密锁图标大小
#identity-icon {
padding: 1px !important;
}
URL 地址栏:设置地址栏高度
#urlbar, #searchbar {
--urlbar-height: 28px !important;
min-height: var(--urlbar-height) !important;
padding-right: 2px !important;
}
URL 地址栏:设置地址栏边框为圆角
#urlbar-background, #searchbar {
box-shadow: none !important;
border-radius: 8px !important;
}
URL 地址栏:关闭地址栏自动放大功能
#urlbar[breakout][breakout-extend] {
width: 100% !important;
padding: 0px !important;
}
#urlbar[breakout][breakout-extend][open] {
box-shadow: 0px 4px 8px rgb(0,0,0,0.2) !important;
border-radius: 8px !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;
;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}
书签栏:设置书签字体大小
#PersonalToolbar,
#PersonalToolbar menuitem,
#PersonalToolbar menu {
font-size: 8.5pt !important; /* 9pt为默认大小 */
}
书签栏:设置书签行间距
/* Firefox 89 版本的书签行间距过大 可自行设置间距 */
:root {
--menu-padding: 0.15em;
}
:root[uidensity=compact] {
--menu-padding: 0.1em;
}
:root[uidensity=touch] {
--menu-padding: 0.2em;
}
Firefox 89 使用 Windows Accent Color 窗口主题
Firefox 89 开始,使用了新的 Proton 主题界面,色彩单一,标签窗口和地址栏框不再跟随 Windows Color 的变化而改变,以下代码可以实现窗口色彩跟随 Windows Color。
/** System Default Theme ****************************************************/
/*= Common - URL Bar focus color ===========================================*/
@media (-moz-windows-accent-color-in-titlebar),
(-moz-gtk-csd-available) {
/* URL Bar */
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
--focus-outline-color: -moz-accent-color !important;
}
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */
}
}
/*= Windows7 - Aero Based Theme ============================================*/
@media (-moz-os-version: windows-win7) {
#TabsToolbar:not(:-moz-lwtheme) {
--background-color: rgb(229, 229, 235);
}
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
color: var(--background-color);
background-color: color-mix(in srgb, currentColor 60%, transparent);
}
#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
background-color: color-mix(in srgb, currentColor 85%, transparent) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
}
#scrollbutton-up:not(:-moz-lwtheme),
#scrollbutton-down:not(:-moz-lwtheme),
#alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
#TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
color: var(--background-color) !important;
background-color: color-mix(in srgb, currentColor 50%, transparent);
}
}
/*= Windows10 - Titlebar accent color ======================================*/
@media (-moz-windows-accent-color-in-titlebar) {
/* Tab Bar */
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
--toolbarbutton-icon-fill: currentColor;
--toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
--toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
}
}
/*= GTK - URL View url accent color ========================================*/
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) .urlbarView-url {
--urlbar-popup-url-color: -moz-accent-color;
}
/* Nightly Compatibility */
:root:not(:-moz-lwtheme) #urlbar {
--toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */
--toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
}
}