“userChrome.css”的版本间的差异

来自FiveYellowMice's Wiki
跳到导航 跳到搜索
(创建页面,内容为“此 [https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin userChrome.css] 使 Firefox 在 KDE 上得到类似 Breeze 主题…”)
 
(添加窗口未被聚焦时的按钮图标。)
 
(未显示同一用户的1个中间版本)
第4行: 第4行:
  
 
# 因为 background 无法在 CSS 中作为渐变的属性,切换窗口聚焦时没有渐变。
 
# 因为 background 无法在 CSS 中作为渐变的属性,切换窗口聚焦时没有渐变。
# 因为 Breeze 的按钮图标是用 C++ 直接画的,而 breeze-gtk 提供的 PNG 图片没有包含非聚焦窗口的按钮图标,所以窗口在没有聚焦时按钮还是白色的。
+
 
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
 
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
第15行: 第15行:
 
#TabsToolbar:-moz-window-inactive {
 
#TabsToolbar:-moz-window-inactive {
 
   background: #eff0f1 !important;
 
   background: #eff0f1 !important;
   color: #797f83 !important;
+
   color: #7f8c8d !important;
 +
}
 +
 
 +
#navigator-toolbox[inFullscreen="true"] #TabsToolbar {
 +
  background: #eff0f1 !important;
 +
  color: #424446 !important;
 
}
 
}
  
第30行: 第35行:
 
}
 
}
  
#titlebar-min .toolbarbutton-icon {
+
.titlebar-min .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize@2.png") !important;
 
   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-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-min:hover .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-hover@2.png") !important;
 
   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-hover-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-min:active .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-active@2.png") !important;
 
   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-minimize-active-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-max .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize@2.png") !important;
 
   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-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-max:hover .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-hover@2.png") !important;
 
   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-hover-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-max:active .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-active@2.png") !important;
 
   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-active-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-restore .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized@2.png") !important;
 
   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-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-restore:hover .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-hover@2.png") !important;
 
   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-hover-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-restore:active .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-active@2.png") !important;
 
   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-maximize-maximized-active-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-close .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close@2.png") !important;
 
   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-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-close:hover .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-hover@2.png") !important;
 
   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-hover-backdrop@2.png") !important;
 +
}
 +
 
 +
.titlebar-close:active .toolbarbutton-icon {
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-active@2.png") !important;
 
   background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-active@2.png") !important;
 +
}
 +
 +
.titlebar-close:active:-moz-window-inactive .toolbarbutton-icon {
 +
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-active-backdrop@2.png") !important;
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>

2020年7月10日 (五) 16:43的最新版本

userChrome.css 使 Firefox 在 KDE 上得到类似 Breeze 主题的外观。需要 /usr/share/themes/Breeze-Dark/assets 中包含有 breeze-gtk 提供的 PNG 按钮图标。

未解决的问题:

  1. 因为 background 无法在 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: #7f8c8d !important;
}

#navigator-toolbox[inFullscreen="true"] #TabsToolbar {
  background: #eff0f1 !important;
  color: #424446 !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:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-backdrop@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:hover:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-minimize-hover-backdrop@2.png") !important;
}

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

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

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

.titlebar-max:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-backdrop@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:hover:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-hover-backdrop@2.png") !important;
}

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

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

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

.titlebar-restore:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-backdrop@2.png") !important;
}

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

.titlebar-restore:hover:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-hover-backdrop@2.png") !important;
}

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

.titlebar-restore:active:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-maximize-maximized-active-backdrop@2.png") !important;
}

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

.titlebar-close:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-backdrop@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:hover:-moz-window-inactive .toolbarbutton-icon {
  background-image: url("/usr/share/themes/Breeze-Dark/assets/titlebutton-close-hover-backdrop@2.png") !important;
}

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

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