feat(search): 点击放大镜切换搜索引擎
- 搜索框左侧图标改为触发器,点击展开效果五快捷栏 - 选中后左侧图标切换为对应引擎图标(本地放大镜 / Google / Bing / 百度 / 搜狗 / 360) - 搜索框占位文案随当前模式变化,原有过滤与回车行为保留
This commit is contained in:
+16
-21
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user