shanefully_done/bulk-delete-chatGPT
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opt style

Browse Source
This commit is contained in:
qcrao
2024-07-21 17:18:34 +08:00
parent b1bdaf0edc
commit ef916d4d19
2 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
popup.css
View File

@@ -264,11 +264,8 @@ button#bulk-archive {
right: 5px; right: 5px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); /* 近白色 */
color: white; font-size: 14px;
border: 1px solid white;
border-radius: 50%;
font-size: 12px;
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
@@ -277,35 +274,41 @@ button#bulk-archive {
cursor: help; cursor: help;
transition: all 0.3s ease; transition: all 0.3s ease;
z-index: 2; z-index: 2;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* 添加轻微阴影以增加可见度 */
} }
/* 调整 tooltip-content 样式 */ /* 调整 tooltip-content 样式 */
.tooltip-content { .tooltip-content {
visibility: hidden; visibility: hidden;
width: 220px; width: 130px;
background-color: #555; background-color: #333;
color: #fff; color: #fff;
text-align: center; text-align: left;
border-radius: 6px; border-radius: 6px;
padding: 5px; padding: 10px;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
bottom: 125%; top: -5px;
right: -5px; /* 向右对齐 */ left: calc(100% + 10px);
opacity: 0; opacity: 0;
transition: opacity 0.3s, visibility 0.3s; 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 { .tooltip-content::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 10px;
right: 10px; right: 100%;
margin-left: -5px; margin-top: -5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: #555 transparent transparent transparent; border-color: transparent #333 transparent transparent;
} }
.tooltip-trigger:hover .tooltip-content { .tooltip-trigger:hover .tooltip-content {
@@ -313,11 +316,21 @@ button#bulk-archive {
opacity: 1; opacity: 1;
} }
/* 调整按钮样式以确保正确的大小和位置 */ /* 确保按钮容器不会因为tooltip内容而变形 */
.button-container {
position: relative;
display: inline-block;
width: calc(50% - 5px);
overflow: visible;
}
/* 可能需要调整按钮样式以适应新的布局 */
.buttons-row button, .buttons-row button,
.button-container button { .button-container button {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
z-index: 1;
} }
/* 更新按钮悬停效果 */ /* 更新按钮悬停效果 */
@@ -326,10 +339,8 @@ button#bulk-archive {
transform: translateY(-3px); transform: translateY(-3px);
} }
/* 确保 buttons-row 正确显示两个按钮 */ /* 添加悬停效果到 i 图标 */
.buttons-row { .tooltip-trigger:hover {
display: flex; color: #fff; /* 完全白色 */
justify-content: space-between; text-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 增强悬停时的光晕效果 */
width: 100%;
gap: 10px;
} }

5
popup.html
View File

@@ -16,9 +16,10 @@
<button id="add-checkboxes"> <button id="add-checkboxes">
<span>Add</span><br /><span>Checkboxes</span> <span>Add</span><br /><span>Checkboxes</span>
</button> </button>
<span class="tooltip-trigger" aria-label="i"> <span class="tooltip-trigger" aria-label="information"
>i
<span class="tooltip-content" <span class="tooltip-content"
>Hold Shift and click to select multiple conversations!</span >Hold Shift to select </br> multiple conversations.</span
> >
</span> </span>
</div> </div>