Projets/ObsiGate
1
1
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

Improve search clear button: flex layout, split border-radius, proper centering
CI / lint (push) Failing after 5s
Details
CI / test (push) Has been skipped
Details
CI / build (push) Has been skipped
Details
CI / security (push) Successful in 9s
Details

Browse Source
This commit is contained in:
bruno
2026-06-03 11:50:34 -04:00
parent d25fff5505
commit 93b23764ae
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/style.css
+19 -17
View File
@@ -2227,49 +2227,51 @@ select {
.help-nav-search-wrap { .help-nav-search-wrap {
padding: 0 12px 8px; padding: 0 12px 8px;
flex-shrink: 0; flex-shrink: 0;
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0;
} }
.help-nav-search { .help-nav-search {
width: 100%; flex: 1;
padding: 7px 30px 7px 10px; padding: 7px 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-right: none;
border-radius: 8px 0 0 8px;
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
font-size: 0.78rem; font-size: 0.78rem;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s;
min-width: 0;
} }
.help-nav-search:focus { .help-nav-search:focus {
border-color: var(--accent); border-color: var(--accent);
} }
.help-nav-search:focus + .help-search-clear {
border-color: var(--accent);
border-left-color: var(--accent);
}
.help-nav-search::placeholder { color: var(--text-muted); } .help-nav-search::placeholder { color: var(--text-muted); }
.help-search-clear { .help-search-clear {
position: absolute; width: 32px; height: 32px;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 20px; height: 20px;
padding: 0; padding: 0;
border: none; border: 1px solid var(--border);
background: transparent; border-left: none;
border-radius: 0 8px 8px 0;
background: var(--bg-primary);
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 14px;
line-height: 1; line-height: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; flex-shrink: 0;
opacity: 0.6; transition: color 0.15s, background 0.15s;
transition: opacity 0.15s, color 0.15s;
} }
.help-search-clear:hover { .help-search-clear:hover {
opacity: 1;
color: var(--text-primary); color: var(--text-primary);
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.06);
} }
.help-nav-list { .help-nav-list {
list-style: none; list-style: none;