diff --git a/searx/static/css/style.css b/searx/static/css/style.css index b3831c543..c9e0335aa 100644 --- a/searx/static/css/style.css +++ b/searx/static/css/style.css @@ -61,27 +61,18 @@ input[type="checkbox"] { visibility: hidden; } user-select: none; } -.checkbox_container input[type="checkbox"]:checked + label { - background: #b8c1d9; -} +.checkbox_container input[type="checkbox"]:checked + label { background: #b8c1d9; } +.search .checkbox_container label { border-bottom: 4px solid #e8e7e6; } +.search .checkbox_container input[type="checkbox"]:checked + label { border-bottom: 4px solid #1a11be; } -.search .checkbox_container label { - border-bottom: 4px solid #e8e7e6; -} +a { text-decoration: none; color: #1a11be; } +a:visited { color: #7b11be; } -.search .checkbox_container input[type="checkbox"]:checked + label { - border-bottom: 4px solid #8098d9; -} - -a { text-decoration: none; } - -.result { margin-bottom: 16px; clear: both; } +.result { margin: 19px 0 18px 0; padding: 0; max-width: 55em; } .result_title { margin-bottom: 0; } -.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; word-wrap:break-word; } -.result h3 { font-size: 0.9em; word-wrap:break-word; } -.result { max-width: 70em; } - -.url { font-weight: bold; word-wrap:break-word; } +.result h3 { font-size: 1em; word-wrap:break-word; margin: 5px 0 1px 0; padding: 0 } +.result .content { font-size: 0.8em; margin: 0; padding: 0; max-width: 54em; word-wrap:break-word; line-height: 1.24; } +.result .url { font-size: 0.8em; margin: 3px 0 0 0; padding: 0; max-width: 54em; word-wrap:break-word; color: #2e1c0b; } .q { width: 30em; } @@ -142,10 +133,13 @@ tr:hover td { background: #DDDDDD; } height: 30px; } -#results { margin-left: 10px; margin-top: 10px; margin-right: 10px; } +#results { margin: 10px; padding: 0; } -#suggestions { max-width: 50em;} -#suggestions form { display: inline; } +#result_count { font-size: 0.8em; margin: 2px 0 2px 0; padding: 0 } + +#suggestions { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; } +#suggestions span { display: block; font-size: 0.8em; margin: 0 2px 10px 2px; padding: 0; } +#suggestions form { display: block; } #suggestions input { padding: 2px 6px; margin: 2px 4px; font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; } #preferences { @@ -168,8 +162,18 @@ tr:hover td { background: #DDDDDD; } clear: both; } +@media screen and (max-width: 60em) { + + #suggestions { position: static; max-width: 50em; margin: 0 0 2px 0; padding: 0; float: none; border: none; width: auto } + #suggestions span { display: inline; font-size: 0.8em } + #suggestions form { display: inline; } + #suggestions input { padding: 2px 6px; margin: 2px 4px; font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; } + +} + @media screen and (max-width: 680px) { - #search_wrapper { width: 90%; clear:both; } + + #search_wrapper { width: 90%; clear:both; overflow: hidden } .right { display: none; postion: fixed !important; top: 100px; right: 0px; } @@ -177,5 +181,7 @@ tr:hover td { background: #DDDDDD; } #categories .checkbox_container { margin-top: 2px; margin: 0 2px; } + .result { border-top: 1px solid #e8e7e6; margin: 7px 0 6px 0; } + .result img { max-width: 90%; width: auto; height: auto } } diff --git a/searx/templates/result_templates/default.html b/searx/templates/result_templates/default.html index 3b1c448e4..27cf57528 100644 --- a/searx/templates/result_templates/default.html +++ b/searx/templates/result_templates/default.html @@ -1,4 +1,5 @@
{% if result.content %}{{ result.content|safe }}
{% endif %}{{ result.pretty_url }}
{% if result.content %}{{ result.content|safe }}
{% endif %}
{{ result.pretty_url }}