diff options
| -rw-r--r-- | searx/static/themes/simple/src/less/index.less | 1 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/search.less | 40 | ||||
| -rw-r--r-- | searx/templates/simple/categories.html | 2 | ||||
| -rw-r--r-- | searx/templates/simple/search.html | 3 |
4 files changed, 40 insertions, 6 deletions
diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less index 64bfda06a..1e3242475 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/searx/static/themes/simple/src/less/index.less @@ -22,6 +22,7 @@ background: inherit; border: inherit; padding: 0; + display: block; } .search_filters { diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 5e8888f0b..239bef525 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -3,14 +3,34 @@ */ #search { - padding: 0 2em 0 @results-offset; + padding: 1.5em 2em 0 @results-offset - 4rem; margin: 0; background: var(--color-header-background); border-bottom: 1px solid var(--color-header-border); + display: grid; + column-gap: 1rem; + row-gap: 10px; + grid-template-columns: 3rem 1fr; + grid-template-areas: + "logo search" + "spacer categories"; +} + +#search_logo { + grid-area: logo; +} + +.search_logo_img { + width: 40px; +} + +.search_categories { + grid-area: categories; } #search_wrapper { - padding: 20px 0 10px 0; + padding: 0; + grid-area: search; } .search_box { @@ -105,7 +125,8 @@ @media screen and (max-width: @tablet) { #search { - padding: 0 @results-tablet-offset; + padding: 1.5em @results-tablet-offset 0 @results-tablet-offset; + column-gap: @results-tablet-offset; } #categories { @@ -150,11 +171,20 @@ width: 100%; margin: 0; padding: 0.1em 0 0 0; + column-gap: 0; + row-gap: 0; + grid-template-areas: + "logo search" + "categories categories"; + } + + .search_logo { + padding: 0; } #search_wrapper { width: 100%; - margin: 0 0 0.7em 0; + margin: 0; padding: 0; } @@ -187,7 +217,7 @@ width: 100%; label { - border-bottom: 0; + padding: 10px !important; } } } diff --git a/searx/templates/simple/categories.html b/searx/templates/simple/categories.html index 127d55b2b..0c121eaed 100644 --- a/searx/templates/simple/categories.html +++ b/searx/templates/simple/categories.html @@ -1,4 +1,4 @@ -<div id="categories">{{- '' -}} +<div id="categories" class="search_categories">{{- '' -}} <div id="categories_container"> {%- for category in categories -%} <div class="category"><input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}"{% if category in selected_categories %} checked="checked"{% endif %}/><label for="checkbox_{{ category|replace(' ', '_') }}" class="tooltips">{{ _(category) }}</label></div> diff --git a/searx/templates/simple/search.html b/searx/templates/simple/search.html index 176e7909e..f8c82cd1b 100644 --- a/searx/templates/simple/search.html +++ b/searx/templates/simple/search.html @@ -1,4 +1,7 @@ <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}"> + <a id="search_logo" href="{{ url_for('index') }}"> + <img class="search_logo_img" src="{{ url_for('static', filename='img/favicon.png') }}"> + </a> <div id="search_wrapper"> <div class="search_box"> <input id="q" autofocus name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} > |