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

Add case-sensitive toggle and clear buttons to search and sidebar filter inputs with visual active states and improved layout

Browse Source
This commit is contained in:
bruno
2026-03-22 12:20:10 -04:00
parent bed8e93624
commit 3a86450a73
3 changed files with 134 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/style.css
+73 -6
View File
@@ -151,17 +151,20 @@ a:hover {
width: 100%;
max-width: 520px;
position: relative;
display: flex;
align-items: center;
gap: 6px;
}
.search-wrapper input {
width: 100%;
flex: 1;
padding: 8px 14px 8px 38px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--search-bg);
border-radius: 6px;
background: var(--bg-secondary);
color: var(--text-primary);
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
font-size: 0.9rem;
outline: none;
transition: border-color 200ms ease, background 200ms ease;
}
@@ -173,10 +176,40 @@ a:hover {
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
color: var(--text-secondary);
pointer-events: none;
}
.search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 600;
transition: all 150ms ease;
padding: 0;
}
.search-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
}
.search-btn.active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
color: var(--accent);
}
.header-menu {
position: relative;
}
@@ -517,9 +550,12 @@ select {
border-bottom: 1px solid var(--border);
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.sidebar-filter input {
width: 100%;
flex: 1;
padding: 6px 10px 6px 32px;
border: 1px solid var(--border);
border-radius: 6px;
@@ -542,6 +578,37 @@ select {
pointer-events: none;
}
.sidebar-filter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
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-weight: 600;
transition: all 150ms ease;
padding: 0;
flex-shrink: 0;
}
.sidebar-filter-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
}
.sidebar-filter-btn.active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
color: var(--accent);
}
.sidebar-tree {
flex: 1;
overflow: hidden;