zaclys/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng synced 2024-01-01 19:24:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

[feat] search on category select without JS

Browse source 
Co-authored-by: Alexandre Flament <alex@al-f.net>
This commit is contained in:
Bnyro 2023-09-09 16:49:14 +02:00 • committed by Markus Heiser
parent 90b0bfd1bf
commit a55e0ac553
12 changed files with 118 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

56
searx/static/themes/simple/src/less/search.less
View file

@ -23,12 +23,15 @@
"spacer categories";
}
.category {
.category_checkbox,
.category_button {
display: inline-block;
position: relative;
.ltr-margin-right(1rem);
padding: 0;
}
.category_checkbox {
input {
display: none;
}
@ -57,6 +60,35 @@
}
}
button.category_button {
background-color: inherit;
color: var(--color-base-font);
cursor: pointer;
padding: 0.2rem 0;
display: inline-flex;
align-items: center;
text-transform: capitalize;
font-size: 0.9em;
border: none;
border-bottom: 2px solid transparent;
svg {
padding-right: 0.2rem;
}
&.selected,
&:active,
&:focus-within {
color: var(--color-categories-item-selected-font);
border-bottom: 2px solid var(--color-categories-item-border-selected);
}
}
#categories_container:has(button.category_button:focus-within) button.category_button.selected {
color: var(--color-base-font);
border-bottom: none;
}
#search_logo {
grid-area: logo;
display: flex;
@ -205,11 +237,6 @@ html.no-js #clear_search.hide_if_nojs {
#categories {
font-size: 90%;
clear: both;
.checkbox_container {
margin: auto;
margin-top: 2px;
}
}
}
@ -219,7 +246,7 @@ html.no-js #clear_search.hide_if_nojs {
#categories_container {
width: max-content;
.category {
.category_checkbox {
display: inline-block;
width: auto;
}
@ -271,16 +298,23 @@ html.no-js #clear_search.hide_if_nojs {
width: auto;
margin: 0;
svg {
display: none;
}
}
.category_checkbox {
label {
padding: 1rem !important;
margin: 0 !important;
svg {
display: none;
}
}
}
.category_button {
padding: 1rem !important;
margin: 0 !important;
}
#search_view:focus-within {
display: block;
background-color: var(--color-search-background);