feat(dnfs): 顶部搜索框卡片化美化,整体视觉和谐统一
- dnfs.html:去掉内联样式,重构为「放大镜图标 + 输入框 + 搜索按钮」结构;按钮改 <button> 避免意外提交 - theme.css:新增 .searchbox 胶囊卡片样式,与 .card/.userpanel 统一设计语言(圆角 20px、 半透明卡片底色、浅阴影、1px 细边、橙色主按钮) - focus-within 态:边框变橙 + 图标变橙 + 发光阴影,焦点反馈清晰 - 输入框无边框全透明,视觉焦点集中在胶囊容器 - 480px 以下移动端缩紧内边距与字号
This commit is contained in:
1 parent
d680dcd058
commit
ac2677abc7
2 files changed
+70
-3
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user