Fix tweaks not applying on Firefox 120 #109

chrome/content/newtab.css

@@ -147,7 +147,7 @@ url-prefix("about:home") {
     padding: 30px !important;
   }
 
-  @supports -moz-bool-pref("uc.tweak.hide-newtab-logo") {
+  @media (-moz-bool-pref: "uc.tweak.hide-newtab-logo") {
     .logo-and-wordmark {
       display: none !important;
     }
@@ -172,7 +172,7 @@ url-prefix("about:home") {
     }
   }
 
-  @supports -moz-bool-pref("browser.theme.dark-private-windows") {
+  @media (-moz-bool-pref: "browser.theme.dark-private-windows") {
     html.private {
       --in-content-page-color: white !important;
       --in-content-page-background: #252525 !important;
@@ -238,7 +238,7 @@ url-prefix("about:home") {
   }
 }
 
-@supports -moz-bool-pref("uc.tweak.newtab-background") {
+@media (-moz-bool-pref: "uc.tweak.newtab-background") {
   @-moz-document url(about:newtab),
   url(about:home),
   url(about:privatebrowsing),
@@ -259,15 +259,14 @@ url-prefix("about:home") {
       background-attachment: fixed !important;
     }
 
-    body[lwt-newtab][lwt-newtab-brighttext],
-    :root[lwt-newtab][lwt-newtab-brighttext] body,
+    :root[lwt-newtab-brighttext] body,
     :root.private body {
       background-image: var(--bg-1), var(--bg-0) !important;
       --newtab-element-hover-color: rgba(66, 66, 66, 0.4) !important;
       --newtab-element-active-color: rgba(66, 66, 66, 0.55) !important;
     }
 
-    @supports not -moz-bool-pref("browser.theme.dark-private-windows") {
+    @media not (-moz-bool-pref: "browser.theme.dark-private-windows") {
       :root.private body {
         background-image: var(--bg-0) !important;
       }

chrome/global/browser.css

@@ -1,18 +1,18 @@
 /* Edge-Frfox - browser.css */
 
-@supports (-moz-bool-pref("uc.tweak.floating-tabs")) {
+@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
   :root {
     --browser-frame-bgcolor: var(--lwt-accent-color);
   }
 }
 
-@supports (not -moz-bool-pref("uc.tweak.floating-tabs")) {
+@media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
   :root {
     --browser-frame-bgcolor: var(--toolbar-bgcolor);
   }
 }
 
-@supports (-moz-bool-pref("uc.tweak.rounded-corners")) {
+@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
   :root #browser>#appcontent {
     margin: 0px 3px 3px 3px;
     border-radius: 8px;

chrome/global/colors.css

@@ -7,6 +7,7 @@
   --lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important;
   --lwt-text-color: light-dark(#000, #E5E5E5) !important;
   --toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important;
+  --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important;
   --toolbar-color: light-dark(#000, #fff) !important;
   --toolbarbutton-icon-fill: light-dark(#000, #fff) !important;
   --chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important;

chrome/global/popup.css

@@ -380,7 +380,7 @@ panelview .toolbarbutton-1,
 }
 
 /* disable context menu when this tweak is applied */
-@supports not -moz-bool-pref("uc.tweak.revert-context-menu") {
+@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
   /* Context Menu */
   menupopup:not(.PanelUI-subView),
   menupopup:not(.PanelUI-subView) menuitem,
@@ -619,7 +619,7 @@ panelview .toolbarbutton-1,
     fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
   }
 
-  @supports not -moz-bool-pref("uc.tweak.smaller-context-menu-text") {
+  @media not (-moz-bool-pref: "uc.tweak.smaller-context-menu-text") {
     @media (-moz-platform: windows) {
       .menu-text,
       .menu-iconic-text,

chrome/global/tweaks.css

@@ -1,7 +1,7 @@
 /* Edge-Frfox - tweaks.css */
 
 /* disable drag space above tabs */
-@supports -moz-bool-pref("uc.tweak.disable-drag-space") {
+@media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
   :root #titlebar {
     --tab-block-margin: 0px !important;
   }
@@ -9,14 +9,14 @@
 
 /* force tabs to toolbar bg (useful for proton themes) (might experience some
 bugs with certain themes eg. dark text on dark background.) */
-@supports -moz-bool-pref("uc.tweak.force-tab-colour") {
+@media (-moz-bool-pref: "uc.tweak.force-tab-colour") {
   :root {
     --lwt-selected-tab-background-color: unset !important;
   }
 }
 
 /* remove tab separators */
-@supports -moz-bool-pref("uc.tweak.remove-tab-separators") {
+@media (-moz-bool-pref: "uc.tweak.remove-tab-separators") {
   .tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
     display: none !important;
   }
@@ -26,7 +26,7 @@ bugs with certain themes eg. dark text on dark background.) */
   }
 }
 
-@supports -moz-bool-pref("uc.tweak.floating-tabs") {
+@media (-moz-bool-pref: "uc.tweak.floating-tabs") {
   :root:not(:-moz-lwtheme),
   :root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] {
     --lwt-accent-color: light-dark(#f3f3f3, #202020) !important;
@@ -36,6 +36,7 @@ bugs with certain themes eg. dark text on dark background.) */
     --chrome-content-separator-color: light-dark(#bfbfbf, #535353) !important;
     --uc-urlbar-shadow: none !important;
     --uc-tab-border-color: light-dark(#0000, #fff1) !important;
+    --toolbar-non-lwt-bgcolor: var(--lwt-accent-color) !important;
   }
 
   @media (-moz-gtk-csd-available) {
@@ -93,7 +94,7 @@ bugs with certain themes eg. dark text on dark background.) */
     --tab-block-margin: 4px !important;
   }
 
-  @supports -moz-bool-pref("uc.tweak.disable-drag-space") {
+  @media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
     :root #titlebar {
       --tab-block-margin: 4px !important;
     }
@@ -138,7 +139,7 @@ bugs with certain themes eg. dark text on dark background.) */
 /* Mica broken on newer versions of Firefox */
 /* Uncomment to enable, only works for Firefox versions lower than 115 */
 /* @media (-moz-platform: windows) {
-  @supports -moz-bool-pref("uc.tweak.win11-mica") {
+  @media (-moz-bool-pref: "uc.tweak.win11-mica") {
     #main-window:not([inFullscreen]):not(:-moz-lwtheme),
     #main-window:not([inFullscreen])[lwt-default-theme-in-dark-mode="true"] {
       appearance: -moz-win-borderless-glass !important;
@@ -156,7 +157,7 @@ bugs with certain themes eg. dark text on dark background.) */
       --lwt-accent-color: #00000020 !important;
     }
 
-    @supports -moz-bool-pref("uc.tweak.floating-tabs") {
+    @media (-moz-bool-pref: "uc.tweak.floating-tabs") {
       :root:not([inFullscreen]):not(:-moz-lwtheme):not(:-moz-window-inactive) {
         --toolbar-bgcolor: #ffffffcc !important;
         --lwt-accent-color: #0000 !important;
@@ -189,8 +190,8 @@ bugs with certain themes eg. dark text on dark background.) */
 } */
 
 @media not (-moz-platform: macos) {
-  @supports not -moz-bool-pref("uc.tweak.revert-context-menu") {
-    @supports -moz-bool-pref("uc.tweak.vertical-context-navigation") {
+  @media (-moz-bool-pref: "uc.tweak.revert-context-menu") {
+    @media (-moz-bool-pref: "uc.tweak.vertical-context-navigation") {
       #context-navigation {
         flex-direction: column !important;
         -moz-box-orient: vertical !important;
@@ -243,7 +244,7 @@ bugs with certain themes eg. dark text on dark background.) */
 }
 
 @media (-moz-windows-compositor) {
-  @supports -moz-bool-pref("uc.tweak.revert-context-menu") {
+  @media (-moz-bool-pref: "uc.tweak.revert-context-menu") {
     menupopup {
       --panel-color: var(--arrowpanel-color) !important;
       --panel-border-radius: 4px !important;
@@ -259,7 +260,7 @@ bugs with certain themes eg. dark text on dark background.) */
   }
 }
 
-@supports -moz-bool-pref("uc.tweak.show-tab-close-button-on-hover") {
+@media (-moz-bool-pref: "uc.tweak.show-tab-close-button-on-hover") {
   #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned], [selected]):hover .tab-close-button {
     display: flex !important;
   }

chrome/icons/icons.css

@@ -550,7 +550,7 @@ and 11 so applied to both) */
 }
 
 /* disable context menu icons when this tweak is applied */
-@supports not -moz-bool-pref("uc.tweak.revert-context-menu") {
+@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
 
   /* Context Menu Icons */
   menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {

chrome/toolbar/navbar.css

@@ -27,7 +27,7 @@
   padding: var(--toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important;
 }
 
-@supports (-moz-bool-pref("uc.tweak.rounded-corners")) {
+@media (-moz-bool-pref: "uc.tweak.rounded-corners") {
   #navigator-toolbox {
     border-bottom: none !important;
   }

chrome/toolbar/tabbar.css

@@ -1,12 +1,12 @@
 /* Edge-Frfox - tabbar.css */
 
-@supports -moz-bool-pref("uc.tweak.floating-tabs.equal-margin") and -moz-bool-pref("uc.tweak.floating-tabs") {
+@media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") {
   :root #titlebar {
     --tab-block-margin: 5px !important;
   }
 }
 
-@supports (not -moz-bool-pref("uc.tweak.floating-tabs.equal-margin")) or (not -moz-bool-pref("uc.tweak.floating-tabs")) {
+@media (not (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin")) or (not (-moz-bool-pref: "uc.tweak.floating-tabs")) {
   :root #titlebar {
     --tab-block-margin: 8px !important;
   }
@@ -95,7 +95,7 @@
   --uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important;
 }
 
-@supports not -moz-bool-pref("uc.tweak.floating-tabs") {
+@media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
   #Tabstoolbar:not([brighttext]) .tabbrowser-tab:hover .tab-background:not([selected], [multiselected]) {
     background-color: color-mix(in srgb, white 30%, transparent) !important;
     --uc-tab-corner-bg: color-mix(in srgb, white 30%, transparent) !important;