fix: navbar/player/context menu/modal background issue in firefox

src/App.vue

@@ -86,7 +86,6 @@ export default {
   --color-primary-bg: #bbcdff;
   --color-secondary: #7a7a7b;
   --color-secondary-bg: #323232;
-  --color-navbar-bg: #335eea;
   --color-navbar-bg: rgba(34, 34, 34, 0.86);
   --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
   --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);

src/components/ContextMenu.vue

@@ -92,6 +92,12 @@ export default {
   }
 }
 
+@supports (-moz-appearance: none) {
+  .menu {
+    background-color: var(--color-body-bg) !important;
+  }
+}
+
 .menu .item {
   font-weight: 600;
   font-size: 14px;

src/components/Modal.vue

@@ -98,6 +98,12 @@ export default {
   }
 }
 
+@supports (-moz-appearance: none) {
+  .modal {
+    background: var(--color-body-bg) !important;
+  }
+}
+
 .content {
   overflow: auto;
   overflow-x: hidden;

src/components/Navbar.vue

@@ -116,6 +116,12 @@ nav {
   }
 }
 
+@supports (-moz-appearance: none) {
+  nav {
+    background-color: var(--color-body-bg);
+  }
+}
+
 .navigation-buttons {
   flex: 1;
   display: flex;

src/components/Player.vue

@@ -318,6 +318,12 @@ export default {
   z-index: 100;
 }
 
+@supports (-moz-appearance: none) {
+  .player {
+    background-color: var(--color-body-bg);
+  }
+}
+
 .progress-bar {
   margin-top: -6px;
   margin-bottom: -6px;