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

frontend_nuxt/assets/global.css

@@ -1,92 +1,93 @@
 :root {
-	--primary-color-hover: rgb(9, 95, 105);
-	--primary-color: rgb(10, 110, 120);
-	--primary-color-disabled: rgba(93, 152, 156, 0.5);
+  --primary-color-hover: rgb(9, 95, 105);
+  --primary-color: rgb(10, 110, 120);
+  --primary-color-disabled: rgba(93, 152, 156, 0.5);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
-	--header-height: 60px;
-	--header-background-color: white;
-	--header-border-color: lightgray;
-	--header-text-color: black;
-	--menu-background-color: white;
-	--background-color: white;
-	/* --background-color-blur: rgba(255, 255, 255, 0.57); */
-	--background-color-blur: var(--background-color);
-	--menu-border-color: lightgray;
-	--normal-border-color: lightgray;
-	--menu-selected-background-color: rgba(208, 250, 255, 0.659);
-	--menu-text-color: black;
-	--scroller-background-color: rgba(130, 175, 180, 0.5);
-	/* --normal-background-color: rgb(241, 241, 241); */
-	--normal-background-color: white;
-	--lottery-background-color: rgb(241, 241, 241);
-	--code-highlight-background-color: rgb(241, 241, 241);
-	--login-background-color: rgb(248, 248, 248);
-	--login-background-color-hover: #e0e0e0;
-	--text-color: black;
-	--blockquote-text-color: #6a737d;
-	--menu-width: 200px;
-	--page-max-width: 1400px;
-	--page-max-width-mobile: 900px;
-	--article-info-background-color: #f0f0f0;
-	--activity-card-background-color: #fafafa;
+  --header-height: 60px;
+  --header-background-color: white;
+  --header-border-color: lightgray;
+  --header-text-color: black;
+  /* 加一个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);
+  --menu-border-color: lightgray;
+  --normal-border-color: lightgray;
+  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
+  --menu-text-color: black;
+  --scroller-background-color: rgba(130, 175, 180, 0.5);
+  /* --normal-background-color: rgb(241, 241, 241); */
+  --normal-background-color: white;
+  --lottery-background-color: rgb(241, 241, 241);
+  --code-highlight-background-color: rgb(241, 241, 241);
+  --login-background-color: rgb(248, 248, 248);
+  --login-background-color-hover: #e0e0e0;
+  --text-color: black;
+  --blockquote-text-color: #6a737d;
+  --menu-width: 200px;
+  --page-max-width: 1400px;
+  --page-max-width-mobile: 900px;
+  --article-info-background-color: #f0f0f0;
+  --activity-card-background-color: #fafafa;
 }
 
-[data-theme="dark"] {
-	--header-background-color: #2b2b2b;
-	--header-border-color: #555;
-	--primary-color: rgb(17, 182, 197);
-	--primary-color-hover: rgb(13, 137, 151);
+[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;
-	--background-color: #333;
-	/* --background-color-blur: #333333a4; */
-	--background-color-blur: var(--background-color);
-	--menu-border-color: #555;
-	--normal-border-color: #555;
-	--menu-selected-background-color: rgba(255, 255, 255, 0.1);
-	--menu-text-color: white;
-	/* --normal-background-color: #000000; */
-	--normal-background-color: #333;
-	--lottery-background-color: #4e4e4e;
-	--code-highlight-background-color: #262b35;
-	--login-background-color: #575757;
-	--login-background-color-hover: #717171;
-	--text-color: #eee;
-	--blockquote-text-color: #999;
-	--article-info-background-color: #747373;
-	--activity-card-background-color: #585858;
+  --header-text-color: white;
+  --app-menu-background-color: #333;
+  --background-color: #333;
+  /* --background-color-blur: #333333a4; */
+  --background-color-blur: var(--background-color);
+  --menu-border-color: #555;
+  --normal-border-color: #555;
+  --menu-selected-background-color: rgba(255, 255, 255, 0.1);
+  --menu-text-color: white;
+  /* --normal-background-color: #000000; */
+  --normal-background-color: #333;
+  --lottery-background-color: #4e4e4e;
+  --code-highlight-background-color: #262b35;
+  --login-background-color: #575757;
+  --login-background-color-hover: #717171;
+  --text-color: #eee;
+  --blockquote-text-color: #999;
+  --article-info-background-color: #747373;
+  --activity-card-background-color: #585858;
 }
 
 body {
-	margin: 0;
-	padding: 0;
-	font-family: "Roboto", sans-serif;
-	background-color: var(--normal-background-color);
-	color: var(--text-color);
-	/* 禁止滚动 */
-	/* overflow: hidden;  */
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  background-color: var(--normal-background-color);
+  color: var(--text-color);
+  /* 禁止滚动 */
+  /* overflow: hidden;  */
 }
 
 /*************************
  * Vditor 自定义皮肤覆写
  *************************/
 .vditor {
-	min-height: 200px;
+  min-height: 200px;
 }
 
 .vditor-toolbar--pin {
-	top: var(--header-height) !important;
+  top: var(--header-height) !important;
 }
 
 .vditor-panel {
-	min-width: 400px;
+  min-width: 400px;
 }
 
 .emoji {
-	width: 20px;
-	height: 20px;
-	vertical-align: middle;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
 }
 
 /* .vditor {
@@ -114,248 +115,248 @@ body {
  *************************/
 .info-content-text ul,
 .info-content-text ol {
-	padding-left: 1.5em;
+  padding-left: 1.5em;
 }
 
 .info-content-text h1,
 .info-content-text h2 {
-	border-bottom: 1px solid var(--normal-border-color);
-	padding-bottom: 0.3em;
-	margin-bottom: 0.8em;
+  border-bottom: 1px solid var(--normal-border-color);
+  padding-bottom: 0.3em;
+  margin-bottom: 0.8em;
 }
 
 .info-content-text {
-	word-break: break-word;
-	max-width: 100%;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .info-content-text blockquote {
-	margin: 1em 0;
-	padding-left: 1em;
-	border-left: 4px solid #d0d7de;
-	color: var(--blockquote-text-color);
+  margin: 1em 0;
+  padding-left: 1em;
+  border-left: 4px solid #d0d7de;
+  color: var(--blockquote-text-color);
 }
 
 .info-content-text pre {
-	display: flex;
-	background-color: var(--code-highlight-background-color);
-	padding: 8px 12px;
-	border-radius: 4px;
-	line-height: 1.5;
-	position: relative;
+  display: flex;
+  background-color: var(--code-highlight-background-color);
+  padding: 8px 12px;
+  border-radius: 4px;
+  line-height: 1.5;
+  position: relative;
 }
 
 .info-content-text pre .line-numbers {
-	counter-reset: line-number 0;
-	width: 2em;
-	font-size: 13px;
-	position: sticky;
-	flex-shrink: 0;
-	font-family: "Maple Mono", monospace;
-	margin: 1em 0;
-	color: #888;
-	border-right: 1px solid #888;
-	box-sizing: border-box;
-	padding-right: 0.5em;
-	text-align: end;
+  counter-reset: line-number 0;
+  width: 2em;
+  font-size: 13px;
+  position: sticky;
+  flex-shrink: 0;
+  font-family: 'Maple Mono', monospace;
+  margin: 1em 0;
+  color: #888;
+  border-right: 1px solid #888;
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  text-align: end;
 }
 
 .info-content-text pre .line-numbers .line-number::before {
-	content: counter(line-number);
-	counter-increment: line-number;
+  content: counter(line-number);
+  counter-increment: line-number;
 }
 
 .info-content-text code {
-	font-family: "Maple Mono", monospace;
-	font-size: 13px;
-	border-radius: 4px;
-	white-space: no-wrap;
-	background-color: var(--code-highlight-background-color);
-	color: var(--text-color);
+  font-family: 'Maple Mono', monospace;
+  font-size: 13px;
+  border-radius: 4px;
+  white-space: no-wrap;
+  background-color: var(--code-highlight-background-color);
+  color: var(--text-color);
 }
 
 .copy-code-btn {
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	font-size: 12px;
-	padding: 2px 6px;
-	border: none;
-	border-radius: 4px;
-	background-color: white;
-	opacity: 0.8;
-	color: black;
-	cursor: pointer;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  font-size: 12px;
+  padding: 2px 6px;
+  border: none;
+  border-radius: 4px;
+  background-color: white;
+  opacity: 0.8;
+  color: black;
+  cursor: pointer;
 }
 
 .copy-code-btn:hover {
-	opacity: 1;
+  opacity: 1;
 }
 
 .about-content a,
 .info-content-text a {
-	color: var(--primary-color);
-	text-decoration: none;
+  color: var(--primary-color);
+  text-decoration: none;
 }
 
 .about-content a:hover,
 .info-content-text a:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 .info-content-text img {
-	max-width: 100%;
-	height: auto;
+  max-width: 100%;
+  height: auto;
 }
 
 .info-content-text table {
-	width: 100%;
-	max-width: 100%;
-	border-collapse: collapse;
-	margin: 1.2em 0;
-	font-size: 14px;
-	line-height: 1.45;
-	overflow-x: auto; /* 小屏可横向滚动 */
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  margin: 1.2em 0;
+  font-size: 14px;
+  line-height: 1.45;
+  overflow-x: auto; /* 小屏可横向滚动 */
 }
 
 .info-content-text thead th {
-	background-color: var(--primary-color);
-	color: #fff;
-	padding: 10px 14px;
-	text-align: left;
-	font-weight: 600;
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 600;
 }
 
-[data-theme="dark"] .info-content-text thead th {
-	background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
+[data-theme='dark'] .info-content-text thead th {
+  background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
 .info-content-text tbody tr:nth-child(even) {
-	background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
+  background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
-	background-color: rgba(255, 255, 255, 0.05);
+[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 .info-content-text th,
 .info-content-text td {
-	border: 1px solid var(--menu-border-color);
-	padding: 8px 14px;
-	vertical-align: top;
+  border: 1px solid var(--menu-border-color);
+  padding: 8px 14px;
+  vertical-align: top;
 }
 
 .info-content-text tbody td {
-	color: var(--text-color);
+  color: var(--text-color);
 }
 
 /* 首列加粗，便于阅读 */
 .info-content-text tbody td:first-child {
-	font-weight: 500;
+  font-weight: 500;
 }
 
 /* 鼠标悬停行高亮 */
 .info-content-text tbody tr:hover {
-	background-color: var(--menu-selected-background-color);
-	transition: background-color 0.2s ease;
+  background-color: var(--menu-selected-background-color);
+  transition: background-color 0.2s ease;
 }
 
 @media (max-width: 768px) {
-	.vditor {
-		min-height: 100px;
-	}
+  .vditor {
+    min-height: 100px;
+  }
 
-	.vditor-toolbar {
-		overflow-x: auto;
-	}
+  .vditor-toolbar {
+    overflow-x: auto;
+  }
 
-	.about-content h1,
-	.info-content-text h1 {
-		font-size: 20px;
-	}
+  .about-content h1,
+  .info-content-text h1 {
+    font-size: 20px;
+  }
 
-	.about-content h2,
-	.info-content-text h2 {
-		font-size: 18px;
-	}
+  .about-content h2,
+  .info-content-text h2 {
+    font-size: 18px;
+  }
 
-	.about-content p,
-	.info-content-text p {
-		font-size: 14px;
-		margin-top: 3px;
-		margin-bottom: 3px;
-	}
+  .about-content p,
+  .info-content-text p {
+    font-size: 14px;
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
 
-	.vditor-toolbar--pin {
-		top: 0 !important;
-	}
+  .vditor-toolbar--pin {
+    top: 0 !important;
+  }
 
-	.about-content li,
-	.info-content-text li {
-		font-size: 14px;
-	}
+  .about-content li,
+  .info-content-text li {
+    font-size: 14px;
+  }
 
-	.info-content-text pre {
-		line-height: 1.5;
-	}
+  .info-content-text pre {
+    line-height: 1.5;
+  }
 
-	.vditor-panel {
-		position: relative;
-		min-width: 0;
-	}
+  .vditor-panel {
+    position: relative;
+    min-width: 0;
+  }
 }
 
 /* Transition API */
 ::view-transition-old(root),
 ::view-transition-new(root) {
-	animation: none;
-	mix-blend-mode: normal;
+  animation: none;
+  mix-blend-mode: normal;
 }
 
 ::view-transition-old(root) {
-	z-index: 1;
+  z-index: 1;
 }
 
 ::view-transition-new(root) {
-	z-index: 2147483646;
+  z-index: 2147483646;
 }
 
-[data-theme="dark"]::view-transition-old(root) {
-	z-index: 2147483646;
+[data-theme='dark']::view-transition-old(root) {
+  z-index: 2147483646;
 }
 
-[data-theme="dark"]::view-transition-new(root) {
-	z-index: 1;
+[data-theme='dark']::view-transition-new(root) {
+  z-index: 1;
 }
 
 /* NProgress styles */
 #nprogress {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 #nprogress .bar {
-	background: var(--primary-color);
-	position: fixed;
-	z-index: 1031;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 3px;
+  background: var(--primary-color);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
 }
 
 #nprogress .peg {
-	display: block;
-	position: absolute;
-	right: 0;
-	width: 100px;
-	height: 100%;
-	box-shadow:
-		0 0 10px var(--primary-color),
-		0 0 5px var(--primary-color);
-	opacity: 1;
-	transform: rotate(3deg) translate(0px, -4px);
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px var(--primary-color),
+    0 0 5px var(--primary-color);
+  opacity: 1;
+  transform: rotate(3deg) translate(0px, -4px);
 }
 
 #nprogress .spinner {
-	display: none;
+  display: none;
 }

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

@@ -115,9 +115,9 @@
           </div>
         </div>
       </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 { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
+import { computed, onMounted, ref, watch } from 'vue'
 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;