From f33b93210b35f0dc32d27f36a19edb8f627945a2 Mon Sep 17 00:00:00 2001
From: OpportunityLiu <opportunity@live.in>
Date: Fri, 19 Apr 2024 01:53:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugin/popup/index.less     | 49 ++++++++++++++++-----------------
 src/user-script/popup-host.less | 21 ++++++--------
 src/web-ext/popup.html          |  2 +-
 src/web-ext/popup.less          | 24 ++++++++++++++++
 src/web-ext/popup.ts            |  9 +++---
 5 files changed, 62 insertions(+), 43 deletions(-)
 create mode 100644 src/web-ext/popup.less

diff --git a/src/plugin/popup/index.less b/src/plugin/popup/index.less
index 9eb2c1df0..c11aba174 100644
--- a/src/plugin/popup/index.less
+++ b/src/plugin/popup/index.less
@@ -35,26 +35,29 @@
 // theme
 .theme(@background, @foreground, @shadow, @accent) {
     @soft-accent: softlight(@accent, @background);
-    &,
-    .ehs-panel {
+
+    & {
+        border: @accent solid 1px;
+        border-radius: 6px;
         background: @background;
         color: @foreground;
+        box-shadow: 0 0 6px 2px @shadow;
+    }
 
-        .action {
-            background: @background;
-            color: @accent;
+    .action {
+        background: @background;
+        color: @accent;
 
-            &.primary {
-                border-color: @accent;
-                background: @accent;
-                color: @background;
-            }
-            &.primary:hover {
-                background: softlight(@accent, @foreground);
-            }
-            &.primary:active {
-                background: softlight(@accent, @background);
-            }
+        &.primary {
+            border-color: @accent;
+            background: @accent;
+            color: @background;
+        }
+        &.primary:hover {
+            background: softlight(@accent, @foreground);
+        }
+        &.primary:active {
+            background: softlight(@accent, @background);
         }
     }
 
@@ -153,7 +156,7 @@
     }
 }
 
-#eh-syringe-popup-root {
+#eh-syringe-popup {
     @background: rgb(240, 240, 240);
     @foreground: #111;
     @shadow: rgba(0, 0, 0, 0.2);
@@ -161,15 +164,7 @@
     .theme(@background, @foreground, @shadow, @accent);
 }
 
-#eh-syringe-popup-host {
-    background: rgb(240, 240, 240);
-}
-
-#eh-syringe-popup-host.ex {
-    background: rgb(49, 49, 49);
-}
-
-:root.ex #eh-syringe-popup-root {
+:root.ex #eh-syringe-popup {
     @background: rgb(49, 49, 49);
     @foreground: #eee;
     @shadow: rgba(0, 0, 0, 0.2);
@@ -269,6 +264,8 @@
         transform: scale(1);
         &.ehs-hide {
             transform: scale(0.9);
+            opacity: 0;
+            pointer-events: none;
         }
     }
 
diff --git a/src/user-script/popup-host.less b/src/user-script/popup-host.less
index 19ed04fe6..0f191215e 100644
--- a/src/user-script/popup-host.less
+++ b/src/user-script/popup-host.less
@@ -41,20 +41,26 @@
     z-index: 1000;
     background: rgba(0, 0, 0, 0.3);
     visibility: hidden;
+    pointer-events: none;
     opacity: 0;
     transition:
         visibility,
         opacity 0.4s;
-    &.open {
+
+    &.open,
+    &.opening,
+    &.closing {
         visibility: visible;
+        pointer-events: initial;
+    }
+
+    &.open {
         opacity: 1;
     }
     &.opening {
-        visibility: visible;
         opacity: 1;
     }
     &.closing {
-        visibility: visible;
         opacity: 0;
     }
 }
@@ -63,13 +69,4 @@
     position: absolute;
     bottom: 12px + 36px + 24px;
     right: 12px;
-    border: #ca8dca solid 1px;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 0 6px 2px;
-    background: rgb(240, 240, 240);
-    border-radius: 6px;
-    overflow: hidden;
-
-    :root.ex & {
-        background: rgb(49, 49, 49);
-    }
 }
diff --git a/src/web-ext/popup.html b/src/web-ext/popup.html
index 84fd552e8..81da97170 100644
--- a/src/web-ext/popup.html
+++ b/src/web-ext/popup.html
@@ -9,5 +9,5 @@
         />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     </head>
-    <body id="eh-syringe-popup-host"></body>
+    <body id="eh-syringe-popup"></body>
 </html>
diff --git a/src/web-ext/popup.less b/src/web-ext/popup.less
new file mode 100644
index 000000000..7c724736d
--- /dev/null
+++ b/src/web-ext/popup.less
@@ -0,0 +1,24 @@
+:root,
+body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+:root {
+    width: 100%;
+    height: 100%;
+
+    color-scheme: light;
+    background: white;
+
+    &.ex {
+        color-scheme: dark;
+        background: black;
+    }
+}
+
+body {
+    margin: 2px;
+}
diff --git a/src/web-ext/popup.ts b/src/web-ext/popup.ts
index e9ead112f..fd7e132fe 100644
--- a/src/web-ext/popup.ts
+++ b/src/web-ext/popup.ts
@@ -1,4 +1,5 @@
 import './polyfills';
+import './popup.less';
 import { Popup } from 'plugin/popup';
 import { Container } from 'services';
 import { isEh, isEx } from 'utils/hosts';
@@ -21,15 +22,15 @@ import { isEh, isEx } from 'utils/hosts';
     const currentHost = (current?.[0]?.url && new URL(current[0].url).hostname) ?? '';
 
     if (isEx(currentHost)) {
-        document.body.classList.add('ex');
+        document.documentElement.classList.add('ex');
     } else if (isEh(currentHost)) {
-        document.body.classList.add('eh');
+        document.documentElement.classList.add('eh');
     } else if ('matchMedia' in window) {
         const matchesDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
         if (matchesDarkTheme) {
-            document.body.classList.add('ex');
+            document.documentElement.classList.add('ex');
         } else {
-            document.body.classList.add('eh');
+            document.documentElement.classList.add('eh');
         }
     }
 })().catch(console.error);