feat(search): 点击放大镜切换搜索引擎

- 搜索框左侧图标改为触发器,点击展开效果五快捷栏
- 选中后左侧图标切换为对应引擎图标(本地放大镜 / Google / Bing / 百度 / 搜狗 / 360)
- 搜索框占位文案随当前模式变化,原有过滤与回车行为保留
This commit is contained in:
2026-11-04 12:50:02 +08:00
parent 8c1c658b15
commit 56f362f921
2 changed files with 66 additions and 31 deletions
+16 -21
View File
@@ -1444,42 +1444,37 @@ html.theme-transition .site-background {
align-items: center;
}
.engine-toggle {
.engine-trigger {
display: inline-flex;
align-items: center;
gap: 3px;
height: 24px;
padding: 0 var(--su-space-2);
border: 1px solid var(--su-border);
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: var(--su-radius-xs);
background-color: var(--su-bg-subtle);
color: var(--su-text-sub);
font: inherit;
font-size: 11px;
line-height: 1;
background: transparent;
color: var(--su-text-muted);
cursor: pointer;
transition:
color var(--su-duration-fast) var(--su-ease-in-out),
background-color var(--su-duration-fast) var(--su-ease-in-out),
border-color var(--su-duration-fast) var(--su-ease-in-out);
background-color var(--su-duration-fast) var(--su-ease-in-out);
}
.engine-toggle:hover,
.engine-toggle[aria-expanded='true'] {
border-color: var(--su-border-strong);
background-color: var(--su-bg-hover);
.engine-trigger:hover,
.engine-trigger[aria-expanded='true'] {
background-color: var(--su-bg-subtle);
color: var(--su-text-main);
}
.engine-toggle span {
font-size: 9px;
opacity: 0.6;
.engine-trigger svg {
display: block;
}
.engine-menu {
position: absolute;
top: 50%;
right: calc(100% + 6px);
left: calc(100% + 6px);
z-index: var(--su-z-float);
display: flex;
flex-direction: row;
@@ -1496,7 +1491,7 @@ html.theme-transition .site-background {
@keyframes engine-bar-in {
from {
opacity: 0;
transform: translate(6px, -50%);
transform: translate(-6px, -50%);
}
to {
opacity: 1;