userChrome.css - 版本历史

FiveYellowMice：添加窗口未被聚焦时的按钮图标。

2020-07-10T16:43:20Z

添加窗口未被聚焦时的按钮图标。

2018年9月25日 (二) 04:53 FiveYellowMice

2018-09-25T04:53:57Z

FiveYellowMice：创建页面，内容为“此 [https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin userChrome.css] 使 Firefox 在 KDE 上得到类似 Breeze 主题…”

2018-09-25T04:50:04Z

创建页面，内容为“此 [https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin userChrome.css] 使 Firefox 在 KDE 上得到类似 Breeze 主题…”

新页面

此 [https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin userChrome.css] 使 Firefox 在 KDE 上得到类似 Breeze 主题的外观。需要 <code>/usr/share/themes/Breeze-Dark/assets</code> 中包含有 breeze-gtk 提供的 PNG 按钮图标。

未解决的问题：

# 因为 background 无法在 CSS 中作为渐变的属性，切换窗口聚焦时没有渐变。
# 因为 Breeze 的按钮图标是用 C++ 直接画的，而 breeze-gtk 提供的 PNG 图片没有包含非聚焦窗口的按钮图标，所以窗口在没有聚焦时按钮还是白色的。
<syntaxhighlight lang="css">
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#TabsToolbar {
background: linear-gradient(#556068, #475057) !important;
color: white !important;
}

#TabsToolbar:-moz-window-inactive {
background: #eff0f1 !important;
color: #797f83 !important;
}

.titlebar-button {
-moz-appearance: none !important;
}

.titlebar-button .toolbarbutton-icon {
height: 18px !important;
min-height: 18px !important;
width: 18px !important;
min-width: 18px !important;
background-size: contain !important;
}

#titlebar-min .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize@2.png") !important;
}

#titlebar-min:hover .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-hover@2.png") !important;
}

#titlebar-min:active .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-active@2.png") !important;
}

#titlebar-max .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize@2.png") !important;
}

#titlebar-max:hover .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-hover@2.png") !important;
}

#titlebar-max:active .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-active@2.png") !important;
}

window[sizemode="maximized"] #titlebar-max .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized@2.png") !important;
}

window[sizemode="maximized"] #titlebar-max:hover .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-hover@2.png") !important;
}

window[sizemode="maximized"] #titlebar-max:active .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-active@2.png") !important;
}

#titlebar-close .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close@2.png") !important;
}

#titlebar-close:hover .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-hover@2.png") !important;
}

#titlebar-close:active .toolbarbutton-icon {
background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-active@2.png") !important;
}
</syntaxhighlight>

@@ 第4行： / 第4行： @@
 # 因为 background 无法在 CSS 中作为渐变的属性，切换窗口聚焦时没有渐变。
-# 因为 Breeze 的按钮图标是用 C++ 直接画的，而 breeze-gtk 提供的 PNG 图片没有包含非聚焦窗口的按钮图标，所以窗口在没有聚焦时按钮还是白色的。
 <syntaxhighlight lang="css">
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@@ 第16行： / 第15行： @@
 #TabsToolbar:-moz-window-inactive {
    background: #eff0f1 !important;
-   color: #797f83 !important;
+   color: #7f8c8d !important;
+}
@@ 第31行： / 第35行： @@
+}
-#titlebar-min .toolbarbutton-icon {
+.titlebar-min .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize@2.png") !important;
+}
-#titlebar-min:hover .toolbarbutton-icon {
+.titlebar-min:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-hover@2.png") !important;
+}
-#titlebar-min:active .toolbarbutton-icon {
+.titlebar-min:hover:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-active@2.png") !important;
+}
-#titlebar-max .toolbarbutton-icon {
+.titlebar-min:active:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize@2.png") !important;
+}
-#titlebar-max:hover .toolbarbutton-icon {
+.titlebar-max:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-hover@2.png") !important;
+}
-#titlebar-max:active .toolbarbutton-icon {
+.titlebar-max:hover:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-active@2.png") !important;
+}
-window[sizemode="maximized"] #titlebar-max .toolbarbutton-icon {
+.titlebar-max:active:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized@2.png") !important;
+}
-window[sizemode="maximized"] #titlebar-max:hover .toolbarbutton-icon {
+.titlebar-restore:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-hover@2.png") !important;
+}
-window[sizemode="maximized"] #titlebar-max:active .toolbarbutton-icon {
+.titlebar-restore:hover:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-active@2.png") !important;
+}
-#titlebar-close .toolbarbutton-icon {
+.titlebar-restore:active:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close@2.png") !important;
+}
-#titlebar-close:hover .toolbarbutton-icon {
+.titlebar-close:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-hover@2.png") !important;
+}
-#titlebar-close:active .toolbarbutton-icon {
+.titlebar-close:hover:-moz-window-inactive .toolbarbutton-icon {
    background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-active@2.png") !important;
+}
 </syntaxhighlight>