Reorganised titlebuttons styling, and added support for Linux titlebar buttons

theme/chrome/css/UI/tabstoolbar.css

@@ -420,88 +420,3 @@ tab:where(:first-of-type[visuallyselected="true"]) {
   content: "Report a Phishing Page" !important;
   color: var(--lwt-text-color) !important;
 }
-
-
-/* Titlebars (Minimze, Maximize, Restore and Close), disable them when bool is set to TRUE */
-
-@supports not (-moz-bool-pref("silverfox.disableChromeTitlebar")) {
-.titlebar-restore,
-.titlebar-min,
-.titlebar-max,
-.titlebar-close {
-  list-style-image: none !important;
-}
-.titlebar-close {
-  margin-right: 5px !important;
-  width: 40px !important;
-  height: 37px !important;
-  margin-top: -5px !important;
-}
-:root:not([sizemode="normal"]) .titlebar-close {
-  margin-top: -12px !important;
-}
-.titlebar-restore,
-.titlebar-min,
-.titlebar-max {
-  min-width: 22px !important;
-  max-width: 22px !important;
-  height: 37px !important;
-  padding: 0px !important;
-  margin-right: 3px !important;
-  margin-top: -5px !important;
-}
-:root:not([sizemode="normal"]) .titlebar-min {
-  margin-top: -12px !important;
-}
-:root:not([sizemode="normal"]) .titlebar-restore {
-  margin-top: -12px !important;
-}
-
-/* Adding Chrome style*/
-.titlebar-close::before {
-  content: url(../../assets/images/topbar/close.png) !important;
-  width: 44px !important;
-  height: 18px !important;
-  margin-top: 20px !important;
-}
-.titlebar-close:hover::before {
-  content: url(../../assets/images/topbar/close_hover.png) !important;
-  width: 44px !important;
-  height: 18px !important;
-}
-.titlebar-max::before {
-  content: url(../../assets/images/topbar/maximize.png) !important;
-  width: 25px !important;
-  height: 18px !important;
-  margin-top: 20px !important;
-}
-.titlebar-restore::before {
-  content: url(../../assets/images/topbar/restore.png) !important;
-  width: 25px !important;
-  height: 18px !important;
-  margin-top: 20px !important;
-}
-
-/* Hovers */
-.titlebar-max:hover::before {
-  content: url(../../assets/images/topbar/maximize_hover.png) !important;
-  width: 25px !important;
-  height: 18px !important;  
-}
-.titlebar-min::before {
-  content: url(../../assets/images/topbar/minimize.png) !important;
-  width: 26px !important;
-  height: 18px !important;
-  margin-top: 20px !important;
-}
-.titlebar-min:hover::before {
-  content: url(../../assets/images/topbar/minimize_hover.png) !important;
-  width: 26px !important;
-  height: 18px !important;
-}
-.titlebar-restore:hover::before {
-  content: url(../../assets/images/topbar/restore_hover.png) !important;
-  width: 25px !important;
-  height: 18px !important;
-}
-}

theme/chrome/css/UI/titlebuttons.css

@@ -0,0 +1,173 @@
+/* Titlebars (Minimze, Maximize, Restore and Close) */
+
+@media (-moz-platform: windows) { /* Windows, disable them when bool is set to TRUE */
+@supports not (-moz-bool-pref("silverfox.disableChromeTitlebar")) {
+.titlebar-restore,
+.titlebar-min,
+.titlebar-max,
+.titlebar-close {
+  list-style-image: none !important;
+}
+.titlebar-close {
+  margin-right: 5px !important;
+  width: 40px !important;
+  height: 37px !important;
+  margin-top: -5px !important;
+}
+:root:not([sizemode="normal"]) .titlebar-close {
+  margin-top: -12px !important;
+}
+.titlebar-restore,
+.titlebar-min,
+.titlebar-max {
+  min-width: 22px !important;
+  max-width: 22px !important;
+  height: 37px !important;
+  padding: 0px !important;
+  margin-right: 3px !important;
+  margin-top: -5px !important;
+}
+:root:not([sizemode="normal"]) .titlebar-min {
+  margin-top: -12px !important;
+}
+:root:not([sizemode="normal"]) .titlebar-restore {
+  margin-top: -12px !important;
+}
+
+/* Adding Chrome style*/
+.titlebar-close::before {
+  content: url(../../assets/images/topbar/windows/close.png) !important;
+  width: 44px !important;
+  height: 18px !important;
+  margin-top: 20px !important;
+}
+.titlebar-close:hover::before {
+  content: url(../../assets/images/topbar/windows/close_hover.png) !important;
+  width: 44px !important;
+  height: 18px !important;
+}
+.titlebar-max::before {
+  content: url(../../assets/images/topbar/windows/maximize.png) !important;
+  width: 25px !important;
+  height: 18px !important;
+  margin-top: 20px !important;
+}
+.titlebar-restore::before {
+  content: url(../../assets/images/topbar/windows/restore.png) !important;
+  width: 25px !important;
+  height: 18px !important;
+  margin-top: 20px !important;
+}
+
+/* Hovers */
+.titlebar-max:hover::before {
+  content: url(../../assets/images/topbar/windows/maximize_hover.png) !important;
+  width: 25px !important;
+  height: 18px !important;
+}
+.titlebar-min::before {
+  content: url(../../assets/images/topbar/windows/minimize.png) !important;
+  width: 26px !important;
+  height: 18px !important;
+  margin-top: 20px !important;
+}
+.titlebar-min:hover::before {
+  content: url(../../assets/images/topbar/windows/minimize_hover.png) !important;
+  width: 26px !important;
+  height: 18px !important;
+}
+.titlebar-restore:hover::before {
+  content: url(../../assets/images/topbar/windows/restore_hover.png) !important;
+  width: 25px !important;
+  height: 18px !important;
+}
+}
+}
+
+@media (-moz-platform: linux) { /* Linux */
+  .titlebar-close,
+  .titlebar-restore,
+  .titlebar-min,
+  .titlebar-max {
+    min-width: 24px !important;
+    max-width: 24px !important;
+    height: 18px !important;
+    padding: 0px !important;
+    margin-top: -14px !important;
+    appearance: none !important;
+    list-style-image: none !important;
+    border-radius: 0 !important;
+  }
+  .titlebar-close:not(:-moz-lwtheme) {
+    margin-right: -3px !important;
+  }
+  .titlebar-close:-moz-lwtheme { /* For some reason, this has different side-padding */
+    margin-right: -2px !important;
+  }
+  :root:is(
+    [style*="--lwt-header-image"]
+  ) .titlebar-close:-moz-lwtheme { /* For some reason, this has even more different side-padding */
+    margin-right: -3px !important;
+  }
+  .titlebar-restore,
+  .titlebar-min,
+  .titlebar-max {
+    margin-right: 2px !important;
+  }
+  @supports (-moz-bool-pref("silverfox.allowThemes")) {
+    :root:not([sizemode="normal"]) .titlebar-close,
+    :root:not([sizemode="normal"]) .titlebar-min,
+    :root:not([sizemode="normal"]) .titlebar-restore {
+      margin-top: 1px !important;
+    }
+  }
+  @supports not (-moz-bool-pref("silverfox.allowThemes")) {
+    :root:not([sizemode="normal"]) .titlebar-close,
+    :root:not([sizemode="normal"]) .titlebar-min,
+    :root:not([sizemode="normal"]) .titlebar-restore {
+      margin-top: 0px !important;
+    }
+  }
+
+  /* Adding Chrome style*/
+  .titlebar-close {
+    background: url(../../assets/images/topbar/linux/close.png) !important;
+  }
+  .titlebar-min {
+    background: url(../../assets/images/topbar/linux/minimize.png) !important;
+  }
+  .titlebar-max {
+    background: url(../../assets/images/topbar/linux/maximize.png) !important;
+  }
+  .titlebar-restore {
+    background: url(../../assets/images/topbar/linux/restore.png) !important;
+  }
+
+  /* Hovers */
+  .titlebar-close:hover {
+    background: url(../../assets/images/topbar/linux/close_hover.png) !important;
+  }
+  .titlebar-min:hover {
+    background: url(../../assets/images/topbar/linux/minimize_hover.png) !important;
+  }
+  .titlebar-max:hover {
+    background: url(../../assets/images/topbar/linux/maximize_hover.png) !important;
+  }
+  .titlebar-restore:hover {
+    background: url(../../assets/images/topbar/linux/restore_hover.png) !important;
+  }
+
+  /* Pressed */
+  .titlebar-close:hover:active {
+    background: url(../../assets/images/topbar/linux/close_pressed.png) !important;
+  }
+  .titlebar-min:hover:active {
+    background: url(../../assets/images/topbar/linux/minimize_pressed.png) !important;
+  }
+  .titlebar-max:hover:active {
+    background: url(../../assets/images/topbar/linux/maximize_pressed.png) !important;
+  }
+  .titlebar-restore:hover:active {
+    background: url(../../assets/images/topbar/linux/restore_pressed.png) !important;
+  }
+}

theme/chrome/userChrome.css

@@ -16,6 +16,7 @@
 @import url("css/UI/navbar.css");
 @import url("css/UI/profilepictures.css");
 @import url("css/UI/tabstoolbar.css");
+@import url("css/UI/titlebuttons.css");
 
 
 /* Pages */
@@ -40,4 +41,4 @@
 @import url("css/error pages/about-neterror-dnsnotfound.css");
 @import url("css/error pages/about-neterror-netoffline.css");
 @import url("css/error pages/about-neterror-nssbadcert.css");
-@import url("css/error pages/about-tabcrashed.css");
+@import url("css/error pages/about-tabcrashed.css");