style(search.css): refine search results styling and hover effects

This commit is contained in:
Aditya Telange
2026-04-26 17:01:19 +05:30
parent 2935f62cde
commit 57a82e48c9
+18 -21
View File
@@ -7,38 +7,35 @@
border-radius: var(--radius); border-radius: var(--radius);
} }
.searchbox input:focus {
border-color: var(--secondary);
}
.searchResults li { .searchResults li {
list-style: none; list-style: none;
border-radius: var(--radius); border-radius: var(--radius);
padding: 10px; padding: 10px 15px;
margin: 10px 0;
position: relative; position: relative;
font-weight: 500; font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--entry);
transition: transform .25s ease;
border: 1px solid var(--border);
} }
.searchResults { .searchResults {
margin: 10px 0; margin: var(--content-gap) 0;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
} }
.searchResults li:active { .searchResults li:hover,
transition: transform 0.1s; .searchResults li:focus-within {
transform: scale(0.98); transform: translateY(-2px);
border-color: var(--tertiary);
} }
.searchResults a { .searchResults li .entry-link:focus {
position: absolute; outline: 2px solid var(--secondary);
width: 100%; outline-offset: -2px;
height: 100%;
top: 0px;
left: 0px;
}
.searchResults .focus {
transform: scale(0.98);
border: 2px solid var(--tertiary);
} }