feat(search): 搜索框支持切换搜索引擎
- 采用效果五:点击右侧引擎名展开横向快捷切换栏 - 支持 Google / Bing / 百度 / 搜狗 / 360,选择结果存 localStorage - 输入时仍按原逻辑过滤本地项目;回车用当前引擎打开新标签搜索 - Esc 关闭切换栏,点击外部自动收起
This commit is contained in:
@@ -1436,3 +1436,80 @@ html.theme-transition .site-background {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 搜索框:搜索引擎切换(效果五) ---------- */
|
||||
.engine-switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.engine-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
height: 24px;
|
||||
padding: 0 var(--su-space-2);
|
||||
border: 1px solid var(--su-border);
|
||||
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;
|
||||
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);
|
||||
}
|
||||
|
||||
.engine-toggle:hover,
|
||||
.engine-toggle[aria-expanded='true'] {
|
||||
border-color: var(--su-border-strong);
|
||||
background-color: var(--su-bg-hover);
|
||||
color: var(--su-text-main);
|
||||
}
|
||||
|
||||
.engine-toggle span {
|
||||
font-size: 9px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.engine-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
right: 0;
|
||||
z-index: var(--su-z-float);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
padding: var(--su-space-1);
|
||||
border: 1px solid var(--su-border);
|
||||
border-radius: var(--su-radius-sm);
|
||||
background-color: var(--su-bg-card);
|
||||
box-shadow: var(--su-shadow-pop);
|
||||
}
|
||||
|
||||
.engine-option {
|
||||
padding: var(--su-space-1) var(--su-space-2);
|
||||
border: 0;
|
||||
border-radius: var(--su-radius-xs);
|
||||
background: transparent;
|
||||
color: var(--su-text-sub);
|
||||
font: inherit;
|
||||
font-size: var(--su-font-size-xs);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.engine-option:hover {
|
||||
background-color: var(--su-bg-subtle);
|
||||
color: var(--su-text-main);
|
||||
}
|
||||
|
||||
.engine-option.is-active {
|
||||
background-color: var(--su-color-primary-soft);
|
||||
color: var(--su-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user