From 7915b5c5a08afbdc8fd2144866e2d5d9f0591696 Mon Sep 17 00:00:00 2001 From: Dalf Date: Sun, 5 Jan 2014 20:27:13 +0100 Subject: [PATCH] [mod] web page modification --- searx/static/css/style.css | 125 ++++++++++++++++++++------------ searx/templates/categories.html | 4 +- searx/templates/results.html | 26 ++++--- searx/templates/search.html | 8 +- 4 files changed, 99 insertions(+), 64 deletions(-) diff --git a/searx/static/css/style.css b/searx/static/css/style.css index b24b97a68..b3831c543 100644 --- a/searx/static/css/style.css +++ b/searx/static/css/style.css @@ -2,8 +2,22 @@ html { font-family: sans-serif; font-size: 0.9em; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; color: #444444; + padding: 0; + margin: 0; +} + +body, #container { + padding: 0; + margin: 0; +} + +#container { + width: 100%; + position: absolute; + top: 0; } .row { max-width: 800px; margin: auto; text-align: justify; } @@ -22,57 +36,49 @@ h1 { font-size: 5em; } div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; } div.title h1 { visibility: hidden; } - input[type="submit"] { border: 1px solid #666666; color: #444444; padding: 4px; background-color: #FFFFFF; margin-left: 8px; } input[type="checkbox"] { visibility: hidden; } -.checkbox_container { display: inline-block; position: relative; padding-left: 3px; margin: 0 10px; } +#categories { margin: 0 10px; } + +.checkbox_container { display: inline-block; position: relative; margin: 0 3px; padding: 0px; } +.checkbox_container input { + display: none; +} .checkbox_container label { cursor: pointer; -} -.checkbox_container label.cb { - position: absolute; - width: 16px; - height: 16px; - top: 2px; - left: 2px; - background: #eee; - border:1px solid #ddd; -} -.checkbox_container label.cb:after { - opacity: 0.2; - content: ''; - position: absolute; - width: 8px; - height: 4px; - background: transparent; - top: 3px; - left: 3px; - border: 3px solid #333; - border-top: none; - border-right: none; + padding: 4px 10px; + margin: 0; + display: block; + text-transform: capitalize; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.checkbox_container label.cb:hover:after { - opacity: 0.5; + +.checkbox_container input[type="checkbox"]:checked + label { + background: #b8c1d9; } -.checkbox_container input[type=checkbox]:checked + label.cb:after { - opacity: 1; + +.search .checkbox_container label { + border-bottom: 4px solid #e8e7e6; +} + +.search .checkbox_container input[type="checkbox"]:checked + label { + border-bottom: 4px solid #8098d9; } a { text-decoration: none; } - .result { margin-bottom: 16px; clear: both; } .result_title { margin-bottom: 0; } -.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; } -.result h3 { font-size: 0.9em;} +.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; } @@ -85,6 +91,8 @@ a { text-decoration: none; } .small p { margin: 2px 0; } +.search { background: #e8e7e6; padding: 0; margin: 0 } + .right { float: right; } .invisible { display: none; } @@ -103,8 +111,7 @@ a { text-decoration: none; } td { padding: 0 4px; } tr:hover td { background: #DDDDDD; } - -#search_wrapper { position: relative; max-width: 600px; margin: 10px; } +#search_wrapper { position: relative; max-width: 600px; padding: 10px; } .center #search_wrapper { margin-left: auto; margin-right: auto; } .q { background: none repeat scroll 0 0 #FFFFFF; @@ -124,8 +131,8 @@ tr:hover td { background: #DDDDDD; } } #search_submit { position: absolute; - top: 5px; - right: 0px; + top: 15px; + right: 4px; padding: 0; border: 0; background: url('/static/img/search-icon.png') no-repeat; @@ -135,14 +142,40 @@ tr:hover td { background: #DDDDDD; } height: 30px; } -#results { margin-left: 10px; margin-top: 10px; } +#results { margin-left: 10px; margin-top: 10px; margin-right: 10px; } #suggestions { max-width: 50em;} #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: 740px) { - .right { margin: 5px; } - - #search_wrapper { max-width: 90%; clear:both } +#preferences { + top: 10px; + padding: 0; + border: 0; + background: url('/static/img/preference-icon.png') no-repeat; + background-size: 28px 28px; + opacity: 0.8; + width: 28px; + height: 30px; + display: block; +} + +#preferences * { + display: none; +} + +#apis { + clear: both; +} + +@media screen and (max-width: 680px) { + #search_wrapper { width: 90%; clear:both; } + + .right { display: none; postion: fixed !important; top: 100px; right: 0px; } + + #categories { font-size: 80% } + + #categories .checkbox_container { margin-top: 2px; margin: 0 2px; } + + .result img { max-width: 90%; width: auto; height: auto } } diff --git a/searx/templates/categories.html b/searx/templates/categories.html index 4c693f3dd..ec9c2e7d0 100644 --- a/searx/templates/categories.html +++ b/searx/templates/categories.html @@ -1,5 +1,7 @@ +
{% for category in categories %}
- +
{% endfor %} +
diff --git a/searx/templates/results.html b/searx/templates/results.html index c20f2d862..1f3153624 100644 --- a/searx/templates/results.html +++ b/searx/templates/results.html @@ -1,8 +1,8 @@ {% extends "base.html" %} {% block title %}{{ q }} - {% endblock %} {% block content %} -
preferences
-
+ +
@@ -19,19 +19,21 @@ {% include 'result_templates/default.html' %} {% endif %} {% endfor %} -
+
+
- - - + + +
- -
+
+
- - - + + +
-
+ +
{% endblock %} diff --git a/searx/templates/search.html b/searx/templates/search.html index 12d507335..92ce5a72c 100644 --- a/searx/templates/search.html +++ b/searx/templates/search.html @@ -1,9 +1,7 @@
-
+
-
-
- {% include 'categories.html' %} -
+
+ {% include 'categories.html' %}