From ef916d4d194b0a2744378933cd782d80b82e076c Mon Sep 17 00:00:00 2001
From: qcrao <qcrao91@gmail.com>
Date: Sun, 21 Jul 2024 17:18:34 +0800
Subject: [PATCH] opt style

---
 popup.css  | 57 ++++++++++++++++++++++++++++++++----------------------
 popup.html |  5 +++--
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/popup.css b/popup.css
index 3af7d5d..593895e 100644
--- a/popup.css
+++ b/popup.css
@@ -264,11 +264,8 @@ button#bulk-archive {
   right: 5px;
   width: 16px;
   height: 16px;
-  background-color: rgba(255, 255, 255, 0.2);
-  color: white;
-  border: 1px solid white;
-  border-radius: 50%;
-  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9); /* 近白色 */
+  font-size: 14px;
   font-style: italic;
   font-weight: bold;
   display: flex;
@@ -277,35 +274,41 @@ button#bulk-archive {
   cursor: help;
   transition: all 0.3s ease;
   z-index: 2;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* 添加轻微阴影以增加可见度 */
 }
 
 /* 调整 tooltip-content 样式 */
 .tooltip-content {
   visibility: hidden;
-  width: 220px;
-  background-color: #555;
+  width: 130px;
+  background-color: #333;
   color: #fff;
-  text-align: center;
+  text-align: left;
   border-radius: 6px;
-  padding: 5px;
+  padding: 10px;
   position: absolute;
   z-index: 3;
-  bottom: 125%;
-  right: -5px; /* 向右对齐 */
+  top: -5px;
+  left: calc(100% + 10px);
   opacity: 0;
   transition: opacity 0.3s, visibility 0.3s;
-  pointer-events: none; /* 防止tooltip内容影响鼠标事件 */
+  pointer-events: none;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 1.4;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .tooltip-content::after {
   content: "";
   position: absolute;
-  top: 100%;
-  right: 10px;
-  margin-left: -5px;
+  top: 10px;
+  right: 100%;
+  margin-top: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: #555 transparent transparent transparent;
+  border-color: transparent #333 transparent transparent;
 }
 
 .tooltip-trigger:hover .tooltip-content {
@@ -313,11 +316,21 @@ button#bulk-archive {
   opacity: 1;
 }
 
-/* 调整按钮样式以确保正确的大小和位置 */
+/* 确保按钮容器不会因为tooltip内容而变形 */
+.button-container {
+  position: relative;
+  display: inline-block;
+  width: calc(50% - 5px);
+  overflow: visible;
+}
+
+/* 可能需要调整按钮样式以适应新的布局 */
 .buttons-row button,
 .button-container button {
   width: 100%;
   height: 100%;
+  position: relative;
+  z-index: 1;
 }
 
 /* 更新按钮悬停效果 */
@@ -326,10 +339,8 @@ button#bulk-archive {
   transform: translateY(-3px);
 }
 
-/* 确保 buttons-row 正确显示两个按钮 */
-.buttons-row {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  gap: 10px;
+/* 添加悬停效果到 i 图标 */
+.tooltip-trigger:hover {
+  color: #fff; /* 完全白色 */
+  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 增强悬停时的光晕效果 */
 }
diff --git a/popup.html b/popup.html
index 11825d0..1496a1f 100644
--- a/popup.html
+++ b/popup.html
@@ -16,9 +16,10 @@
           <button id="add-checkboxes">
             <span>Add</span><br /><span>Checkboxes</span>
           </button>
-          <span class="tooltip-trigger" aria-label="i">
+          <span class="tooltip-trigger" aria-label="information"
+            >i
             <span class="tooltip-content"
-              >Hold Shift and click to select multiple conversations!</span
+              >Hold Shift to select </br> multiple conversations.</span
             >
           </span>
         </div>