terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 搜索提示行与输入框内容像素级对齐

Browse Source 
输入框 border 改为 ring-inset(不占布局),使输入框内容与下方提示行(ⓘ+文字)
都位于「容器左缘+12px」同一基准,图标列严丝合缝对齐,不再依赖魔法数值。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 03:00:44 +08:00
parent f1e5e17fce
commit 4c441244c8
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/SearchPanel.tsx
View File

@@ -147,7 +147,7 @@ export function SearchPanel({
<div className="ark-header-menu-enter fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto overscroll-contain bg-[#0f0f13] md:hidden"> <div className="ark-header-menu-enter fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto overscroll-contain bg-[#0f0f13] md:hidden">
<div className="border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3"> <div className="border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3">
<div className="flex h-12 items-center gap-2"> <div className="flex h-12 items-center gap-2">
<div className="flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-gold bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)]"> <div className="flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)] ring-1 ring-inset ring-ark-gold">
<SearchIcon size={18} className="shrink-0 text-ark-gold" /> <SearchIcon size={18} className="shrink-0 text-ark-gold" />
<input <input
ref={inputRef} ref={inputRef}
@@ -175,8 +175,8 @@ export function SearchPanel({
</button> </button>
</div> </div>
<div className="mt-1 flex items-start gap-1.5 text-[11px] leading-4 text-[#777985]"> <div className="mt-1 flex items-center gap-1.5 pl-3 text-[12px] leading-4 text-[#777985]">
<Info size={15} className="mt-0.5 shrink-0" /> <Info size={14} className="shrink-0" />
<span>{t("searchPanelHint")}</span> <span>{t("searchPanelHint")}</span>
</div> </div>