Fix Firefox CSS variable compatibility (#206)

Author: aminought

src/second_sidebar/css/popups.mjs

@@ -130,9 +130,19 @@ export const POPUPS_CSS = `
     }
 
     input:focus-visible {
-      background-color: var(--toolbar-field-focus-background-color);
-      color: var(--toolbar-field-focus-color);
-      border: solid 1px var(--toolbar-field-focus-border-color);
+      background-color: var(
+        --toolbar-field-background-color-focus,
+        var(--toolbar-field-focus-background-color, var(--toolbar-field-background-color))
+      );
+      color: var(
+        --toolbar-field-text-color-focus,
+        var(--toolbar-field-focus-color, var(--toolbar-field-color, var(--toolbar-field-text-color)))
+      );
+      border: solid 1px
+        var(
+          --toolbar-field-border-color-focus,
+          var(--toolbar-field-focus-border-color, var(--toolbar-field-border-color))
+        );
     }
 
     .sb2-button-iconic .toolbarbutton-text {

src/second_sidebar/css/sidebar_main.mjs

@@ -13,7 +13,7 @@ export const SIDEBAR_MAIN_CSS = `
     &[overlay="true"] {
       position: absolute;
       z-index: 9999;
-      background-color: var(--toolbox-bgcolor);
+      background-color: var(--toolbox-background-color, var(--toolbox-bgcolor));
       box-shadow: var(--content-area-shadow);
 
       @media (-moz-windows-mica) {
@@ -137,7 +137,7 @@ export const SIDEBAR_MAIN_CSS = `
   }
 
   #widget-overflow-fixed-list .sb2-main-button {
-    padding: var(--arrowpanel-menuitem-padding);
+    padding: var(--panel-menuitem-padding, var(--arrowpanel-menuitem-padding));
   }
 
   :root:has(#sb2-wrapper[position="left"]) {

src/second_sidebar/css/sidebar_splitter.mjs

@@ -1,9 +1,9 @@
 export const SIDEBAR_SPLITTER_CSS = `
   @media -moz-pref("browser.nova.enabled") {
     #sb2-splitter {
-      width: var(--chrome-window-gap);
+      width: var(--chrome-window-gap, var(--splitter-width));
       border-inline: none;
-      margin-inline: calc(-1 * var(--chrome-window-gap) + 1px);
+      margin-inline: calc(-1 * var(--chrome-window-gap, 1px) + 1px);
     }
 
     #sb2-after-splitter {