fix: floating-vue css overrides conflict

webfansplz · webfansplz · commit 72df0d075647 · 2025-07-26T17:57:15.000+08:00
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" id="devtools-app">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/packages/client/src/assets/styles/main.css b/packages/client/src/assets/styles/main.css
@@ -65,21 +65,31 @@ body::-webkit-scrollbar {
 }
 
 /* Overrides Floating Vue */
-.v-popper--theme-dropdown .v-popper__inner,
-.v-popper--theme-tooltip .v-popper__inner {
-  --at-apply: 'bg-base text-black dark:text-white rounded border border-base shadow';
+html .v-popper--theme-dropdown .v-popper__inner,
+html .v-popper--theme-tooltip .v-popper__inner {
+  --at-apply: 'bg-white text-black rounded border border-base shadow';
   box-shadow: 0 6px 30px #0000001a;
 }
 
-.v-popper--theme-tooltip .v-popper__arrow-inner,
-.v-popper--theme-dropdown .v-popper__arrow-inner {
+html.dark .v-popper--theme-dropdown .v-popper__inner,
+html.dark .v-popper--theme-tooltip .v-popper__inner {
+  --at-apply: 'bg-#121212 text-white';
+}
+
+#devtools-app .v-popper--theme-tooltip .v-popper__arrow-inner,
+#devtools-app .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
-  --at-apply: 'border-white dark:border-#121212';
+  --at-apply: 'border-white';
+}
+
+#devtools-app.dark .v-popper--theme-tooltip .v-popper__arrow-inner,
+#devtools-app.dark .v-popper--theme-dropdown .v-popper__arrow-inner {
+  --at-apply: 'border-#121212';
 }
 
-.v-popper--theme-tooltip .v-popper__arrow-outer,
-.v-popper--theme-dropdown .v-popper__arrow-outer {
-  --at-apply: border-base;
+#devtools-app .v-popper--theme-tooltip .v-popper__arrow-outer,
+#devtools-app .v-popper--theme-dropdown .v-popper__arrow-outer {
+  --at-apply: 'border-gray/20';
 }
 
 .v-popper--theme-tooltip.v-popper--shown,
