site: rework search component

Don't reimplement a bunch of reactive stuff that Alpine.js handles by
default.
This commit is contained in:
Lucas Gabriel Vuotto 2025-04-28 12:46:29 +00:00
parent 15a98e03d1
commit 07987b7c0e
3 changed files with 102 additions and 101 deletions

View file

@ -22,6 +22,7 @@
--dark-theme-tag-kind-a: crimson;
--dark-theme-tag-kind-c: seagreen;
--dark-theme-tag-kind-r: mediumorchid;
--dark-theme-suggetion-hover-bg: rgba(255, 255, 255, 0.1);
--light-theme-bg: white;
--light-theme-text: black;
@ -30,6 +31,7 @@
--light-theme-tag-kind-a: crimson;
--light-theme-tag-kind-c: seagreen;
--light-theme-tag-kind-r: mediumorchid;
--light-theme-suggetion-hover-bg: rgba(0, 0, 0, 0.1);
--bg: var(--light-theme-bg);
--text: var(--light-theme-text);
@ -45,6 +47,8 @@
--border-thin: 0.0625rem solid var(--accent);
--gallery-column-gap: 1.2rem;
--suggestion-hover-bg: var(--light-theme-suggetion-hover-bg);
}
*,
@ -169,7 +173,7 @@ form[name=search] input[name=tags] {
position: relative;
}
#tags-suggestions {
ul.suggestions {
position: absolute;
background-color: var(--bg);
@ -181,15 +185,15 @@ form[name=search] input[name=tags] {
list-style: none;
}
.suggestion-hover {
background-color: #eee;
}
#tags-suggestions li {
ul.suggestions li {
padding-left: 0.1875rem;
padding-right: 0.1875rem;
}
.suggestion-hover {
background-color: var(--suggestion-hover-bg);
}
body > header {
border-bottom: var(--border-thin);
font-size: 1.25rem;
@ -420,5 +424,6 @@ a.tag-kind-r:active {
--tag-kind-a: var(--dark-theme-tag-kind-a);
--tag-kind-c: var(--dark-theme-tag-kind-c);
--tag-kind-r: var(--dark-theme-tag-kind-r);
--suggestion-hover-bg: var(--dark-theme-suggetion-hover-bg);
}
}