[mod] web page modification

1 files changed, 78 insertions, 45 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;
+    padding: 4px 10px;
+    margin: 0;
+    display: block;
+    text-transform: capitalize;
+
+    -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 {
-    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;
-
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
+
+.checkbox_container input[type="checkbox"]:checked + label {
+    background: #b8c1d9;
 }
-.checkbox_container label.cb:hover:after {
-    opacity: 0.5;
+
+.search .checkbox_container label {
+    border-bottom: 4px solid #e8e7e6;
 }
-.checkbox_container input[type=checkbox]:checked + label.cb:after {
-    opacity: 1;
+
+.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; } 
+#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; }
 
-  #search_wrapper { max-width: 90%; clear:both }
+  .result img { max-width: 90%; width: auto; height: auto }
 }