fix: dim the search icon alongside its disabled input
commit
6ae211dfix: dim the search icon alongside its disabled input
The nav and issues-page search boxes render a magnifying-glass icon as a sibling of the disabled <input>, so the input dimmed to the standard disabled opacity while its icon stayed full-brightness beside it, undercutting the disabled look. Both containers now dim as a whole when their input is disabled, with the input itself reset to full opacity so the two fade together instead of the input looking doubly faint.
Assisted-by: Claude:claude-sonnet-5
Reviews
No reviews of this commit yet — record a verdict below.
Start a review
crates/git-ents-server/src/web/style.css
@@ -86,6 +86,8 @@
.nav-search .icon { position: absolute; left: .65rem; color: var(--color-text-muted); pointer-events: none; }
.nav-search input { width: 100%; font-family: var(--font-sans); font-size: .82rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .42rem .7rem .42rem 2rem; transition: border-color .15s; }
.nav-search input:focus { outline: none; border-color: var(--color-accent); }
+.nav-search:has(input:disabled) { opacity: .55; }
+.nav-search:has(input:disabled) input { opacity: 1; }
.content { max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 2.25rem 1.5rem 3rem; flex: 1; }
@@ -331,6 +333,8 @@
.filter-search .icon { position: absolute; left: .65rem; color: var(--color-text-muted); }
.filter-search input { width: 100%; font-family: var(--font-sans); font-size: .85rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .42rem .7rem .42rem 2rem; }
.filter-search input:focus { outline: none; border-color: var(--color-accent); }
+.filter-search:has(input:disabled) { opacity: .55; }
+.filter-search:has(input:disabled) input { opacity: 1; }
.chip { font-family: var(--font-mono); font-size: .76rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .2rem .7rem; cursor: default; }
.chip.active { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }
.card-header.subtabs { display: flex; gap: 1.25rem; text-transform: none; letter-spacing: 0; }