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

Add auto-expand vault functionality to sidebar filter with improved clear button visibility and restructured input layouts for both search and filter components

Browse Source
This commit is contained in:
bruno
2026-03-22 13:24:06 -04:00
parent 3a86450a73
commit d9add8dcba
3 changed files with 115 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/style.css
+57 -16
View File
@@ -153,11 +153,27 @@ a:hover {
position: relative;
display: flex;
align-items: center;
gap: 6px;
}
.search-wrapper input {
.search-wrapper .search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
pointer-events: none;
z-index: 1;
}
.search-input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.search-input-wrapper input {
width: 100%;
padding: 8px 14px 8px 38px;
border: 1px solid var(--border);
border-radius: 6px;
@@ -168,26 +184,29 @@ a:hover {
outline: none;
transition: border-color 200ms ease, background 200ms ease;
}
.search-wrapper input:focus {
.search-input-wrapper input:focus {
border-color: var(--accent);
}
.search-wrapper .search-icon {
.search-actions {
position: absolute;
left: 10px;
right: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
pointer-events: none;
display: flex;
align-items: center;
gap: 4px;
}
.search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
@@ -196,6 +215,7 @@ a:hover {
font-weight: 600;
transition: all 150ms ease;
padding: 0;
flex-shrink: 0;
}
.search-btn:hover {
@@ -554,8 +574,16 @@ select {
align-items: center;
gap: 6px;
}
.sidebar-filter input {
.sidebar-filter-input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.sidebar-filter-input-wrapper input {
width: 100%;
padding: 6px 10px 6px 32px;
border: 1px solid var(--border);
border-radius: 6px;
@@ -566,31 +594,44 @@ select {
outline: none;
transition: border-color 200ms ease;
}
.sidebar-filter input:focus {
.sidebar-filter-input-wrapper input:focus {
border-color: var(--accent);
}
.sidebar-filter-icon {
position: absolute;
left: 22px;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
z-index: 1;
}
.sidebar-filter-actions {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 4px;
}
.sidebar-filter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
width: 24px;
height: 24px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
font-size: 0.65rem;
font-weight: 600;
transition: all 150ms ease;
padding: 0;