@@ -2,8 +2,22 @@ html {
22 font-family: sans-serif;
33 font-size: 0.9em;
44 -webkit-text-size-adjust: 100%;
5− -ms-text-size-adjust: 100%;
5+ -ms-text-size-adjust: 100%;
6+ -moz-text-size-adjust: 100%;
67 color: #444444;
8+ padding: 0;
9+ margin: 0;
10+}
11+
12+body, #container {
13+ padding: 0;
14+ margin: 0;
15+}
16+
17+#container {
18+ width: 100%;
19+ position: absolute;
20+ top: 0;
721}
822
923.row { max-width: 800px; margin: auto; text-align: justify; }
@@ -22,57 +36,49 @@ h1 { font-size: 5em; }
2236div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; }
2337div.title h1 { visibility: hidden; }
2438
25−
2639input[type="submit"] { border: 1px solid #666666; color: #444444; padding: 4px; background-color: #FFFFFF; margin-left: 8px; }
2740
2841input[type="checkbox"] { visibility: hidden; }
2942
30−.checkbox_container { display: inline-block; position: relative; padding-left: 3px; margin: 0 10px; }
43+#categories { margin: 0 10px; }
44+
45+.checkbox_container { display: inline-block; position: relative; margin: 0 3px; padding: 0px; }
46+.checkbox_container input {
47+ display: none;
48+}
3149.checkbox_container label {
3250 cursor: pointer;
51+ padding: 4px 10px;
52+ margin: 0;
53+ display: block;
54+ text-transform: capitalize;
55+
56+ -webkit-touch-callout: none;
57+ -webkit-user-select: none;
58+ -khtml-user-select: none;
59+ -moz-user-select: none;
60+ -ms-user-select: none;
61+ user-select: none;
3362}
34−.checkbox_container label.cb {
35− position: absolute;
36− width: 16px;
37− height: 16px;
38− top: 2px;
39− left: 2px;
40− background: #eee;
41− border:1px solid #ddd;
42−}
43−.checkbox_container label.cb:after {
44− opacity: 0.2;
45− content: '';
46− position: absolute;
47− width: 8px;
48− height: 4px;
49− background: transparent;
50− top: 3px;
51− left: 3px;
52− border: 3px solid #333;
53− border-top: none;
54− border-right: none;
55−
56− -webkit-transform: rotate(-45deg);
57− -moz-transform: rotate(-45deg);
58− -o-transform: rotate(-45deg);
59− -ms-transform: rotate(-45deg);
60− transform: rotate(-45deg);
63+
64+.checkbox_container input[type="checkbox"]:checked + label {
65+ background: #b8c1d9;
6166}
62−.checkbox_container label.cb:hover:after {
63− opacity: 0.5;
67+
68+.search .checkbox_container label {
69+ border-bottom: 4px solid #e8e7e6;
6470}
65−.checkbox_container input[type=checkbox]:checked + label.cb:after {
66− opacity: 1;
71+
72+.search .checkbox_container input[type="checkbox"]:checked + label {
73+ border-bottom: 4px solid #8098d9;
6774}
6875
6976a { text-decoration: none; }
7077
71−
7278.result { margin-bottom: 16px; clear: both; }
7379.result_title { margin-bottom: 0; }
74−.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; }
75−.result h3 { font-size: 0.9em;}
80+.result p { margin-top: 0; padding-top: 0; font-size: 0.8em; max-width: 54em; word-wrap:break-word; }
81+.result h3 { font-size: 0.9em; word-wrap:break-word; }
7682.result { max-width: 70em; }
7783
7884.url { font-weight: bold; word-wrap:break-word; }
@@ -85,6 +91,8 @@ a { text-decoration: none; }
8591
8692.small p { margin: 2px 0; }
8793
94+.search { background: #e8e7e6; padding: 0; margin: 0 }
95+
8896.right { float: right; }
8997
9098.invisible { display: none; }
@@ -103,8 +111,7 @@ a { text-decoration: none; }
103111td { padding: 0 4px; }
104112tr:hover td { background: #DDDDDD; }
105113
106−
107−#search_wrapper { position: relative; max-width: 600px; margin: 10px; }
114+#search_wrapper { position: relative; max-width: 600px; padding: 10px; }
108115.center #search_wrapper { margin-left: auto; margin-right: auto; }
109116.q {
110117 background: none repeat scroll 0 0 #FFFFFF;
@@ -124,8 +131,8 @@ tr:hover td { background: #DDDDDD; }
124131}
125132#search_submit {
126133 position: absolute;
127− top: 5px;
128− right: 0px;
134+ top: 15px;
135+ right: 4px;
129136 padding: 0;
130137 border: 0;
131138 background: url('/static/img/search-icon.png') no-repeat;
@@ -135,14 +142,40 @@ tr:hover td { background: #DDDDDD; }
135142 height: 30px;
136143}
137144
138−#results { margin-left: 10px; margin-top: 10px; }
145+#results { margin-left: 10px; margin-top: 10px; margin-right: 10px; }
139146
140147#suggestions { max-width: 50em;}
141148#suggestions form { display: inline; }
142149#suggestions input { padding: 2px 6px; margin: 2px 4px; font-size: 0.8em; display: inline-block; background: #E4E4E4; border-radius: 4px; border: 0; cursor: pointer; }
143150
144−@media screen and (max-width: 740px) {
145− .right { margin: 5px; }
151+#preferences {
152+ top: 10px;
153+ padding: 0;
154+ border: 0;
155+ background: url('/static/img/preference-icon.png') no-repeat;
156+ background-size: 28px 28px;
157+ opacity: 0.8;
158+ width: 28px;
159+ height: 30px;
160+ display: block;
161+}
162+
163+#preferences * {
164+ display: none;
165+}
166+
167+#apis {
168+ clear: both;
169+}
170+
171+@media screen and (max-width: 680px) {
172+ #search_wrapper { width: 90%; clear:both; }
173+
174+ .right { display: none; postion: fixed !important; top: 100px; right: 0px; }
175+
176+ #categories { font-size: 80% }
177+
178+ #categories .checkbox_container { margin-top: 2px; margin: 0 2px; }
146179
147− #search_wrapper { max-width: 90%; clear:both }
180+ .result img { max-width: 90%; width: auto; height: auto }
148181}