fix: 解决menu-background-color变量被firefox的userChrome.css覆盖问题

frontend_nuxt/assets/global.css

@@ -7,7 +7,8 @@
   --header-background-color: white;
   --header-border-color: lightgray;
   --header-text-color: black;
-	--menu-background-color: white;
+  /* 加一个app前缀防止与firefox的userChrome.css中的--menu-background-color冲突 */
+  --app-menu-background-color: white;
   --background-color: white;
   /* --background-color-blur: rgba(255, 255, 255, 0.57); */
   --background-color-blur: var(--background-color);
@@ -31,14 +32,14 @@
   --activity-card-background-color: #fafafa;
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --header-background-color: #2b2b2b;
   --header-border-color: #555;
   --primary-color: rgb(17, 182, 197);
   --primary-color-hover: rgb(13, 137, 151);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-text-color: white;
-	--menu-background-color: #333;
+  --app-menu-background-color: #333;
   --background-color: #333;
   /* --background-color-blur: #333333a4; */
   --background-color-blur: var(--background-color);
@@ -61,7 +62,7 @@
 body {
   margin: 0;
   padding: 0;
-	font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   background-color: var(--normal-background-color);
   color: var(--text-color);
   /* 禁止滚动 */
@@ -151,7 +152,7 @@ body {
   font-size: 13px;
   position: sticky;
   flex-shrink: 0;
-	font-family: "Maple Mono", monospace;
+  font-family: 'Maple Mono', monospace;
   margin: 1em 0;
   color: #888;
   border-right: 1px solid #888;
@@ -166,7 +167,7 @@ body {
 }
 
 .info-content-text code {
-	font-family: "Maple Mono", monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 13px;
   border-radius: 4px;
   white-space: no-wrap;
@@ -226,7 +227,7 @@ body {
   font-weight: 600;
 }
 
-[data-theme="dark"] .info-content-text thead th {
+[data-theme='dark'] .info-content-text thead th {
   background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
@@ -234,7 +235,7 @@ body {
   background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
+[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -320,11 +321,11 @@ body {
   z-index: 2147483646;
 }
 
-[data-theme="dark"]::view-transition-old(root) {
+[data-theme='dark']::view-transition-old(root) {
   z-index: 2147483646;
 }
 
-[data-theme="dark"]::view-transition-new(root) {
+[data-theme='dark']::view-transition-new(root) {
   z-index: 1;
 }
 

frontend_nuxt/components/Dropdown.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useIsMobile } from '~/utils/screen'
 
 export default {
@@ -312,7 +312,7 @@ export default {
   border: none;
   outline: none;
   margin-left: 5px;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   color: var(--text-color);
 }
 
@@ -352,7 +352,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   z-index: 1300;
   display: flex;
   flex-direction: column;

frontend_nuxt/components/DropdownMenu.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 export default {
   name: 'DropdownMenu',
   props: {
@@ -61,6 +61,7 @@ export default {
   position: relative;
   display: inline-block;
 }
+
 .dropdown-trigger {
   cursor: pointer;
   display: inline-flex;
@@ -71,7 +72,7 @@ export default {
   position: absolute;
   top: 100%;
   right: 0;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   border: 1px solid var(--normal-border-color);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
@@ -84,6 +85,7 @@ export default {
   white-space: nowrap;
   cursor: pointer;
 }
+
 .dropdown-item:hover {
   background-color: var(--menu-selected-background-color);
 }

frontend_nuxt/components/MenuComponent.vue

@@ -117,7 +117,7 @@
       </div>
 
       <!-- 解决动态样式的水合错误 -->
-      <ClientOnly v-if='!isMobile'>
+      <ClientOnly v-if="!isMobile">
         <div class="menu-footer">
           <div class="menu-footer-btn" @click="cycleTheme">
             <i :class="iconClass"></i>
@@ -129,11 +129,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
-import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { authState } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
+import { cycleTheme, ThemeMode, themeState } from '~/utils/theme'
 
 const isMobile = useIsMobile()
 
@@ -232,7 +232,7 @@ const gotoTag = (t) => {
   position: sticky;
   top: var(--header-height);
   width: 220px;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   height: calc(100vh - 20px - var(--header-height));
   border-right: 1px solid var(--menu-border-color);
   display: flex;

frontend_nuxt/components/SearchDropdown.vue

@@ -37,10 +37,10 @@
 </template>
 
 <script setup>
-import { useIsMobile } from '~/utils/screen'
+import { ref, watch } from 'vue'
 import Dropdown from '~/components/Dropdown.vue'
 import { stripMarkdown } from '~/utils/markdown'
-import { ref, watch } from 'vue'
+import { useIsMobile } from '~/utils/screen'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
@@ -135,7 +135,7 @@ defineExpose({
 }
 
 .text-input {
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   color: var(--text-color);
   border: none;
   outline: none;