diff options
| author | Alexandre Flament <alex@al-f.net> | 2022-02-28 23:08:52 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-02-28 23:08:52 +0100 |
| commit | cddc623786d576d5256052ac02f5f29ee4a84639 (patch) | |
| tree | 32a495a929654f39080647f45523a6dc1f2179ff /searx/static/themes/simple/src/less | |
| parent | afde954df8fedc0c9d21d1cc75407ecafed020ab (diff) | |
| parent | 2e1d4fac5d0a3a969aa44b62598771d3d87513d6 (diff) | |
Merge pull request #929 from dalf/simple-fix-nojs-categories
[fix] simple: categories: use media query detect touch screen
Diffstat (limited to 'searx/static/themes/simple/src/less')
| -rw-r--r-- | searx/static/themes/simple/src/less/search.less | 50 |
1 files changed, 32 insertions, 18 deletions
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 3e18e0b12..a9a00d585 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -73,6 +73,20 @@ .search_categories { grid-area: categories; + + .help { + display: none; + } + + &:hover .help { + display: block; + position: absolute; + background: var(--color-base-background); + padding: 1rem 0.6rem 0.6rem 0; + z-index: 1000; + width: 100%; + left: -0.1rem; + } } .search_box { @@ -200,26 +214,26 @@ margin-top: 2px; } } +} - html.touch { - #main_index, - #main_results { - #categories_container { - width: max-content; +@media screen and (max-width: @tablet) and (hover: none) { + #main_index, + #main_results { + #categories_container { + width: max-content; - .category { - display: inline-block; - width: auto; - } + .category { + display: inline-block; + width: auto; } + } - #categories { - width: 100%; - .ltr-text-align-left(); - overflow-x: scroll; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; - } + #categories { + width: 100%; + .ltr-text-align-left(); + overflow-x: scroll; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; } } } @@ -262,8 +276,8 @@ } .category { - display: block; - width: 100%; + display: inline-block; + width: auto; margin: 0; label { |