chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: 重构搜索框样式

Browse Source
This commit is contained in:
rbetree
2026-01-02 22:08:46 +08:00
parent 0e151156df
commit 87b4cea290
3 changed files with 260 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
assets/style.css
View File

@@ -746,11 +746,10 @@ body .content.expanded {
position: relative;
width: 100%;
max-width: 600px;
--search-control-size: 32px;
--search-control-gap: 0.4rem;
--search-toggle-right: 0.8rem;
--search-icon-right: calc(var(--search-toggle-right) + var(--search-control-size) + var(--search-control-gap));
--search-indicator-right: calc(var(--search-icon-right) + var(--search-control-size));
display: flex;
align-items: stretch;
--search-status-right: 0.9rem;
--search-hint-right: 1.6rem;
background: rgba(var(--card-bg-rgb), 0.65);
border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
@@ -768,7 +767,7 @@ body .content.expanded {
.search-box::after {
content: '';
position: absolute;
right: var(--search-indicator-right);
right: var(--search-status-right);
top: 50%;
transform: translateY(-50%);
width: 6px;
@@ -790,12 +789,16 @@ body .content.expanded {
}
.search-box input {
flex: 1;
min-width: 0;
width: 100%;
padding: var(--spacing-md) calc(var(--search-indicator-right) + 1rem) var(--spacing-md) var(--spacing-lg);
padding: var(--spacing-md) calc(var(--spacing-lg) + 4.8rem) var(--spacing-md) var(--spacing-md);
border: none;
border-radius: var(--radius-lg);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
background-color: transparent;
color: var(--text-color);
font-family: inherit;
font-weight: inherit;
font-size: 1rem;
transition: background-color var(--transition-normal), color var(--transition-normal);
box-shadow: none;
@@ -809,63 +812,102 @@ body .content.expanded {
.search-box input::placeholder {
color: var(--text-muted);
font-family: inherit;
font-weight: inherit;
}
.search-box i {
.search-shortcut-hint {
position: absolute;
right: 1.5rem;
top: 50%;
right: var(--search-hint-right);
transform: translateY(-50%);
padding: 0.1rem 0.4rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: rgba(var(--card-bg-rgb), 0.25);
font-size: 0.78rem;
line-height: 1.2;
color: var(--text-muted);
transition: all 0.3s ease;
opacity: 0.65;
pointer-events: none;
user-select: none;
}
.search-box:focus-within .search-icon,
.search-box:focus-within .search-engine-toggle {
.search-box:focus-within .search-shortcut-hint {
opacity: 0.85;
}
/* 搜索引擎前缀按钮（方案B：输入框前缀一体化） */
.search-engine-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.75rem;
width: 120px;
flex: 0 0 120px;
border: none;
border-right: 1px solid var(--border-color);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font: inherit;
transition: background var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
}
.search-engine-button:hover {
background: rgba(var(--card-bg-rgb), 0.25);
}
.search-engine-button:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.search-box:focus-within .search-engine-button {
color: var(--accent-color);
}
.search-box.has-results .search-icon {
color: var(--success-color);
.search-engine-icon {
display: grid;
place-items: center;
height: 1.2em;
width: 1.2em;
min-width: 1.2em;
font-size: 1.25rem;
line-height: 1;
text-align: center;
flex: 0 0 1.2em;
}
.search-box.no-results .search-icon {
color: var(--error-color);
.search-engine-icon.search-engine-icon-svg {
font-size: 1.25rem;
}
/* 搜索图标和搜索引擎切换图标位置调整 */
.search-box .search-icon {
right: var(--search-icon-right);
cursor: pointer;
transition: all 0.3s ease;
width: var(--search-control-size);
height: var(--search-control-size);
display: flex;
align-items: center;
justify-content: center;
.search-engine-icon.search-engine-icon-svg svg {
width: 100%;
height: 100%;
display: block;
}
/* 下拉指示图标交互与状态 */
.search-box .search-engine-toggle:hover { color: inherit; }
.search-engine-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.95rem;
}
.search-box.dropdown-open .search-engine-toggle { transform: translateY(-50%) rotate(180deg); }
.search-box .search-engine-toggle {
right: var(--search-toggle-right);
cursor: pointer;
font-size: 0.8rem;
width: var(--search-control-size);
height: var(--search-control-size);
display: flex;
align-items: center;
justify-content: center;
.search-box.dropdown-open .search-engine-button {
background: rgba(var(--card-bg-rgb), 0.25);
}
/* 搜索引擎下拉菜单 */
.search-engine-dropdown {
position: absolute;
top: calc(100% + 5px);
right: 1rem;
top: calc(100% + 6px);
left: 0;
background: rgba(var(--card-bg-rgb), 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
@@ -873,8 +915,11 @@ body .content.expanded {
box-shadow: 0 4px 15px var(--shadow-color);
display: none;
z-index: 100;
padding: 0.5rem;
padding: 0.35rem;
border: 1px solid var(--border-color);
min-width: 190px;
flex-direction: column;
gap: 0.25rem;
}
.search-engine-dropdown.active {
@@ -884,32 +929,56 @@ body .content.expanded {
.search-engine-option {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
justify-content: flex-start;
gap: 0.6rem;
width: 100%;
height: 40px;
border-radius: 50%;
margin: 0.3rem;
padding: 0 0.75rem;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--card-bg-gradient-1);
background: transparent;
color: var(--text-color);
font: inherit;
}
.search-engine-option:hover {
background-color: var(--card-bg-gradient-2);
transform: translateY(-2px);
box-shadow: 0 3px 8px var(--shadow-color);
background: rgba(var(--card-bg-rgb), 0.22);
}
.search-engine-option:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.search-engine-option.active {
background-color: var(--secondary-bg);
color: white;
color: var(--text-bright);
}
.search-engine-option i {
display: grid;
place-items: center;
position: static;
transform: none;
font-size: 1.2rem;
font-size: 1.25rem;
width: 1.35em;
height: 1.35em;
line-height: 1;
text-align: center;
flex: 0 0 1.35em;
}
.search-engine-option i.search-engine-option-svg svg {
width: 100%;
height: 100%;
display: block;
}
.search-engine-option-label {
font-size: 0.95rem;
}
/* 页面容器 */
@@ -2186,12 +2255,24 @@ body .content.expanded {
}
.search-box input {
padding: 0.8rem 3rem 0.8rem 1.2rem;
padding: 0.8rem 3rem 0.8rem 1rem;
font-size: 0.95rem;
}
.search-box i {
.search-box::after {
right: 0.8rem;
}
.search-shortcut-hint {
right: 1.2rem;
font-size: 0.72rem;
padding: 0.1rem 0.35rem;
}
.search-engine-button {
width: 104px;
flex: 0 0 104px;
padding: 0 0.6rem;
}
.sidebar .logo h1,