searxng/searx/static/themes/simple/src/less/autocomplete.less
Monty 47dcf876ff [simple theme] refactor search form
* update search input form params; inspiried by whoogle
* remove autofocus from result page input form (JS impl. as well as input param)
-> autofocus on landing page still works only on desktop and tablet with JS impl.
* update landing page margins on mobile
* rework border and radius for search form to 0.8rem and outline
* remove positioning from autocomplete JS lib and use CSS impl.
* match search box and autocomplete width
* rework search form to a google like design on mobile
* fix settings icon display withg RTL on mobile on result page when search input is empty
2022-03-24 22:22:45 +01:00

74 lines
1.2 KiB
Text

/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
.autocomplete {
position: absolute;
width: @search-width;
max-height: 0;
overflow-y: hidden;
.ltr-text-align-left();
.rounded-corners;
&:active,
&:focus,
&:hover {
background-color: var(--color-autocomplete-background);
}
&:empty {
display: none;
}
> ul {
list-style-type: none;
margin: 0;
padding: 0;
> li {
cursor: pointer;
padding: 0.5rem 1rem;
&.active,
&:active,
&:focus,
&:hover {
background-color: var(--color-autocomplete-background-hover);
a:active,
a:focus,
a:hover {
text-decoration: none;
}
}
&.locked {
cursor: inherit;
}
}
}
&.open {
display: block;
background-color: var(--color-autocomplete-background);
color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border);
max-height: 32rem;
overflow-y: auto;
z-index: 100;
margin-top: 3.2rem;
&:empty {
display: none;
}
}
}
@media screen and (max-width: @phone) {
.autocomplete {
width: 100%;
> ul > li {
padding: 1rem;
}
}
}