From 187312645304c3a7ab46868fd921d24d8e160f3e Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Sat, 2 Jan 2021 21:19:14 +0800
Subject: [PATCH] fix: navbar/player/context menu/modal background issue in
 firefox

---
 src/App.vue                    | 1 -
 src/components/ContextMenu.vue | 6 ++++++
 src/components/Modal.vue       | 6 ++++++
 src/components/Navbar.vue      | 6 ++++++
 src/components/Player.vue      | 6 ++++++
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 08e2e96..bdf777e 100644
--- a/src/App.vue
+++ b/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);
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 24eb16a..7451b3f 100644
--- a/src/components/ContextMenu.vue
+++ b/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;
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 15323d9..c3c210a 100644
--- a/src/components/Modal.vue
+++ b/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;
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 5c7e1ce..76833ce 100644
--- a/src/components/Navbar.vue
+++ b/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;
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 1a8a2ba..b8d6cd0 100644
--- a/src/components/Player.vue
+++ b/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;