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 @@
-
+ i
Hold Shift and click to select multiple conversations!Hold Shift to select multiple conversations.