feat(dnfs): 顶部搜索框卡片化美化,整体视觉和谐统一

- dnfs.html:去掉内联样式,重构为「放大镜图标 + 输入框 + 搜索按钮」结构;按钮改 <button> 避免意外提交
- theme.css:新增 .searchbox 胶囊卡片样式,与 .card/.userpanel 统一设计语言(圆角 20px、
  半透明卡片底色、浅阴影、1px 细边、橙色主按钮)
- focus-within 态:边框变橙 + 图标变橙 + 发光阴影,焦点反馈清晰
- 输入框无边框全透明,视觉焦点集中在胶囊容器
- 480px 以下移动端缩紧内边距与字号
This commit is contained in:
qing committed 2026-08-05 01:58:55 +08:00
1 parent d680dcd058
commit ac2677abc7
2 files changed
+70 -3

No files matched your search

+63
View File
@@ -238,6 +238,69 @@ input[type="button"]:disabled {
.article-stats span { font-weight: 600; color: var(--fg-secondary); }
#article-content { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* ===== Search Box (dnfs 顶部搜索) ===== */
.searchbox {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.45rem 0.55rem 0.45rem 0.9rem;
background: var(--card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: 1rem;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.searchbox:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
}
.searchbox-icon {
width: 18px;
height: 18px;
flex: none;
color: var(--muted);
transition: color 0.2s;
}
.searchbox:focus-within .searchbox-icon {
color: var(--accent);
}
.searchbox-input {
flex: 1;
min-width: 0;
border: none !important;
background: transparent !important;
padding: 0.45rem 0.25rem !important;
font-size: 0.92rem !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.searchbox-input:focus {
box-shadow: none !important;
}
.searchbox-btn {
flex: none;
padding: 0.5rem 1rem !important;
font-size: 0.85rem !important;
font-weight: 600;
background: var(--accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-sm) !important;
cursor: pointer;
transition: opacity 0.15s, transform 0.1s, background 0.2s;
line-height: 1.2;
}
.searchbox-btn:hover { opacity: 0.88; }
.searchbox-btn:active { transform: scale(0.96); }
@media (max-width: 480px) {
.searchbox { padding: 0.35rem 0.4rem 0.35rem 0.75rem; gap: 0.35rem; }
.searchbox-icon { width: 16px; height: 16px; }
.searchbox-input { font-size: 0.88rem !important; }
.searchbox-btn { padding: 0.45rem 0.75rem !important; font-size: 0.82rem !important; }
}
/* ===== Recommend List (dnfs) ===== */
/* 卡片尺寸随内容自适应:宽度包裹内容(fit-content),上限为容器宽度;高度天然随内容伸缩 */
.recommend-list {
+7 -3
View File
@@ -10,9 +10,13 @@
</head>
<body>
<div class="box">
<div id="searchbox">
<input type="text" placeholder="输入你想搜索的内容......" id="searchtext" style="display: inline-block; width: 89%;">
<input type="submit" value="搜索" id="searchsubmit" style="display: inline-block;">
<div id="searchbox" class="searchbox">
<svg class="searchbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="7"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input type="text" placeholder="在当前节点内搜索..." id="searchtext" class="searchbox-input" autocomplete="off">
<button type="button" id="searchsubmit" class="searchbox-btn" aria-label="搜索">搜索</button>
</div>
<div id="userpanel" class="userpanel"></div>
<div id="minimap" class="minimap"></div>