git.iko.soy/searx
on master help sign in
Merge pull request #46 from pointhi/styles
ad690fdAdam Tauber
.travis.yml+2
compare with master
unifiedsplit
@@ -4,11 +4,13 @@ python:
4before_install:
4before_install:
5 - "export DISPLAY=:99.0"
5 - "export DISPLAY=:99.0"
6 - "sh -e /etc/init.d/xvfb start"
6 - "sh -e /etc/init.d/xvfb start"
7+ - npm install -g less
7install:
8install:
8 - "make"
9 - "make"
9script:
10script:
10 - "make tests"
11 - "make tests"
11 - "make robot"
12 - "make robot"
13+ - "make styles"
12notifications:
14notifications:
13 irc:
15 irc:
14 channels:
16 channels:
Makefile+5−2
@@ -43,11 +43,14 @@ production: bin/buildout production.cfg setup.py
43minimal: bin/buildout minimal.cfg setup.py
43minimal: bin/buildout minimal.cfg setup.py
44 bin/buildout -c minimal.cfg $(options)
44 bin/buildout -c minimal.cfg $(options)
45
45
46+styles:
47+ @lessc -x searx/static/css/style.less > searx/static/css/style.css
48+
46locales:
49locales:
47 @pybabel compile -d searx/translations
50 @pybabel compile -d searx/translations
48
51
49clean:
52clean:
50 @rm -rf .installed.cfg .mr.developer.cfg bin parts develop-eggs \
53 @rm -rf .installed.cfg .mr.developer.cfg bin parts develop-eggs \
51− searx.egg-info lib include .coverage coverage
54+ searx.egg-info lib include .coverage coverage searx/static/css/*.css
52
55
53−.PHONY: all tests robot flake8 coverage production minimal locales clean
56+.PHONY: all tests robot flake8 coverage production minimal styles locales clean
searx/static/css/definitions.lessnew file+94
@@ -0,0 +1,94 @@
1+/*
2+ * searx, A privacy-respecting, hackable metasearch engine
3+ *
4+ * To change the colors of the site, simple edit this variables
5+ */
6+
7+/// Basic Colors
8+
9+@color-base: #3498DB;
10+@color-base-dark: #2980B9;
11+@color-base-light: #ECF0F1;
12+
13+
14+/// General
15+
16+@color-font: #444;
17+
18+@color-url-font: #1a11be;
19+@color-url-visited-font: #8E44AD;
20+
21+
22+/// Start-Screen
23+
24+// hmarg
25+@color-hmarg-border: @color-base;
26+@color-hmarg-font: @color-base;
27+@color-hmarg-font-hover: @color-base;
28+
29+
30+/// Search-Input
31+
32+@color-search-border: @color-base;
33+@color-search-background: #FFF;
34+@color-search-font: #222;
35+
36+/// Categories
37+
38+@color-categories-item-selected: @color-base;
39+@color-categories-item-selected-font: #FFF;
40+
41+@color-categories-item-border-selected: @color-base-dark;
42+@color-categories-item-border-unselected: #E8E7E6;
43+@color-categories-item-border-unselected-hover: @color-base;
44+
45+
46+/// Results
47+
48+@color-suggestions-button-background: @color-base;
49+@color-suggestions-button-font: #FFF;
50+
51+@color-download-button-background: @color-base;
52+@color-download-button-font: #FFF;
53+
54+@color-result-search-background: @color-base-light;
55+
56+@color-result-definition-border: gray;
57+@color-result-torrent-border: lightgray;
58+@color-result-top-border: #E8E7E6;
59+
60+// Link to result
61+@color-result-link-font: @color-base-dark;
62+@color-result-link-visited-font: @color-url-visited-font;
63+
64+// Url to result
65+@color-result-url-font: #C0392B;
66+
67+// Images
68+@color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
69+@color-result-image-span-font: #FFF;
70+
71+// Search-URL
72+@color-result-search-url-border: #888;
73+@color-result-search-url-font: #444;
74+
75+
76+/// Settings
77+
78+@color-settings-fieldset: @color-base;
79+@color-settings-tr-hover: #DDD;
80+
81+// Labels
82+@color-settings-label-allowed-background: #E74C3C;
83+@color-settings-label-allowed-font: #FFF;
84+
85+@color-settings-label-deny-background: #2ECC71;
86+@color-settings-label-deny-font: @color-font;
87+
88+@color-settings-return-background: @color-base;
89+@color-settings-return-font: #FFF;
90+
91+/// Other
92+
93+@color-engines-font: #888;
94+@color-percentage-div-background: #444;
searx/static/css/mixins.lessnew file+27
@@ -0,0 +1,27 @@
1+/*
2+ * searx, A privacy-respecting, hackable metasearch engine
3+ */
4+
5+// Mixins
6+
7+.text-size-adjust (@property: 100%) {
8+ -webkit-text-size-adjust: @property;
9+ -ms-text-size-adjust: @property;
10+ -moz-text-size-adjust: @property;
11+ text-size-adjust: @property;
12+}
13+
14+.rounded-corners (@radius: 4px) {
15+ -webkit-border-radius: @radius;
16+ -moz-border-radius: @radius;
17+ border-radius: @radius;
18+}
19+
20+.user-select () {
21+ -webkit-touch-callout: none;
22+ -webkit-user-select: none;
23+ -khtml-user-select: none;
24+ -moz-user-select: none;
25+ -ms-user-select: none;
26+ user-select: none;
27+}
searx/static/css/style.css+68−224
@@ -1,224 +1,68 @@
1−html {
1+html{font-family:sans-serif;font-size:.9em;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;color:#444;padding:0;margin:0}
2− font-family: sans-serif;
3− font-size: 0.9em;
4− -webkit-text-size-adjust: 100%;
5− -ms-text-size-adjust: 100%;
6− -moz-text-size-adjust: 100%;
7− color: #444444;
8− padding: 0;
9− margin: 0;
10−}
11−
12−body, #container {
2+body,#container{padding:0;margin:0}
13− padding: 0;
14− margin: 0;
15−}
16−
17−#container {
18− width: 100%;
19− position: absolute;
3+#container{width:100%;position:absolute;top:0}
20− top: 0;
21−}
22−
23−.row { max-width: 800px; margin: auto; text-align: justify; }
4+.row{max-width:800px;margin:20px auto;text-align:justify}.row h1{font-size:3em;margin-top:50px}
24−.row h1 { font-size: 3em; margin-top: 50px; }
25−.row p { padding: 0 10px; max-width: 700px; }
5+.row p{padding:0 10px;max-width:700px}
26−.row h3,ul { margin: 4px 8px;}
6+.row h3,.row ul{margin:4px 8px}
27−
28−.hmarg {
29− margin: 0 20px;
30− border: 1px solid #3498DB;
31− padding: 4px 10px;
7+.hmarg{margin:0 20px;border:1px solid #3498db;padding:4px 10px}
32−}
33−
34−a:link.hmarg { color: #3498DB; }
8+a:link.hmarg{color:#3498db}
35−a:visited.hmarg { color: #3498DB; }
9+a:visited.hmarg{color:#3498db}
36−a:active.hmarg { color: #3498DB; }
10+a:active.hmarg{color:#3498db}
37−a:hover.hmarg { color: #3498DB; }
11+a:hover.hmarg{color:#3498db}
38−
39−.top_margin { margin-top: 60px; }
12+.top_margin{margin-top:60px}
40−
41−.center { text-align: center; }
13+.center{text-align:center}
42−
43−h1 { font-size: 5em; }
14+h1{font-size:5em}
44−
45−div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; }
15+div.title{background:url('/static/img/searx.png') no-repeat;width:100%;background-position:center}div.title h1{visibility:hidden}
46−div.title h1 { visibility: hidden; }
47−
48−input[type="submit"] { padding: 2px 6px; margin: 2px 4px; display: inline-block; background: #3498DB; color: #FFFFFF; border-radius: 4px; border: 0; cursor: pointer; }
16+input[type="submit"]{padding:2px 6px;margin:2px 4px;display:inline-block;background:#3498db;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0;cursor:pointer}
49−
50−input[type="checkbox"] { visibility: hidden; }
17+input[type="checkbox"]{visibility:hidden}
51−
52−fieldset { margin: 8px; border: 1px solid #3498DB; }
18+fieldset{margin:8px;border:1px solid #3498db}
53−
54−#categories { margin: 0 10px; }
19+#categories{margin:0 10px}
55−
56−.checkbox_container { display: inline-block; position: relative; margin: 0 3px; padding: 0px; }
20+.checkbox_container{display:inline-block;position:relative;margin:0 3px;padding:0}.checkbox_container input{display:none}
57−.checkbox_container input {
21+.checkbox_container label,.engine_checkbox 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}
58− display: none;
59−}
60−.checkbox_container label, .engine_checkbox label {
61− cursor: pointer;
62− padding: 4px 10px;
63− margin: 0;
64− display: block;
65− text-transform: capitalize;
66−
67− -webkit-touch-callout: none;
68− -webkit-user-select: none;
69− -khtml-user-select: none;
70− -moz-user-select: none;
71− -ms-user-select: none;
72− user-select: none;
73−}
74−
75−.checkbox_container input[type="checkbox"]:checked + label { background: #3498DB; color: #FFFFFF; }
22+.checkbox_container input[type="checkbox"]:checked+label{background:#3498db;color:#fff}
76−.search .checkbox_container label { border-bottom: 4px solid #e8e7e6; }
23+.search .checkbox_container label{border-bottom:4px solid #e8e7e6}
77−.search .checkbox_container label:hover { border-bottom: 4px solid #3498DB; }
24+.search .checkbox_container label:hover{border-bottom:4px solid #3498db}
78−.search .checkbox_container input[type="checkbox"]:checked + label { border-bottom: 4px solid #2980B9; }
25+.search .checkbox_container input[type="checkbox"]:checked+label{border-bottom:4px solid #2980b9}
79−
80−.engine_checkbox { padding: 4px; }
26+.engine_checkbox{padding:4px}
81−label.allow { background: #E74C3C; color: #FFFFFF; padding: 4px 8px; display: none; }
27+label.allow{background:#e74c3c;padding:4px 8px;color:#fff;display:none}
82−label.deny { background: #2ECC71; padding: 4px 8px; display: inline; }
28+label.deny{background:#2ecc71;padding:4px 8px;color:#444;display:inline}
83−.engine_checkbox input[type="checkbox"]:checked + label:nth-child(2) + label { display: none; }
29+.engine_checkbox input[type="checkbox"]:checked+label:nth-child(2)+label{display:none}
84−.engine_checkbox input[type="checkbox"]:checked + label.allow { display: inline; }
30+.engine_checkbox input[type="checkbox"]:checked+label.allow{display:inline}
85−
86−a { text-decoration: none; color: #1a11be; }
31+a{text-decoration:none;color:#1a11be}a:visited{color:#8e44ad}
87−a:visited { color: #8E44AD; }
88−
89−.result { margin: 19px 0 18px 0; padding: 0; max-width: 55em; clear: both; }
32+.result{margin:19px 0 18px 0;padding:0;max-width:55em;clear:both}
90−.result_title { margin-bottom: 0; }
91−.result_title a { color: #1168CC; font-weight: normal; font-size: 1.1em; }
33+.result_title{margin-bottom:0}.result_title a{color:#2980b9;font-weight:normal;font-size:1.1em}.result_title a:hover{text-decoration:underline}
92−.result_title a:hover { text-decoration: underline; }
93−.result_title a:visited { color: #8E44AD }
34+.result_title a:visited{color:#8e44ad}
94−.result h3 { font-size: 1em; word-wrap:break-word; margin: 5px 0 1px 0; padding: 0 }
35+.result h3{font-size:1em;word-wrap:break-word;margin:5px 0 1px 0;padding:0}
95−.result .content { font-size: 0.8em; margin: 0; padding: 0; max-width: 54em; word-wrap:break-word; line-height: 1.24; }
36+.result .content{font-size:.8em;margin:0;padding:0;max-width:54em;word-wrap:break-word;line-height:1.24}
96−.result .url { font-size: 0.8em; margin: 3px 0 0 0; padding: 0; max-width: 54em; word-wrap:break-word; color: #C0392B; }
37+.result .url{font-size:.8em;margin:3px 0 0 0;padding:0;max-width:54em;word-wrap:break-word;color:#c0392b}
97−
98−.q { width: 30em; }
99−
100−.engines { color: #888888; }
38+.engines{color:#888}
101−
102−.small_font { font-size: 0.8em; }
39+.small_font{font-size:.8em}
103−
104−.small p { margin: 2px 0; }
40+.small p{margin:2px 0}
105−
106−.search { background: #ECF0F1; padding: 0; margin: 0 }
41+.search{background:#ecf0f1;padding:0;margin:0}
107−
108−.right { float: right; }
42+.right{float:right}
109−
110−.invisible { display: none; }
43+.invisible{display:none}
111−
112−.left { float: left; }
44+.left{float:left}
113−
114−.image_result { float: left; margin: 10px 10px; position: relative; height: 160px;}
45+.image_result{float:left;margin:10px 10px;position:relative;height:160px}.image_result img{border:0;height:160px}
115−.image_result img { border: 0; height: 160px;}
116−.image_result p { margin: 0; padding: 0; }
117−.image_result p span a { display: none; }
46+.image_result p{margin:0;padding:0}.image_result p span a{display:none;color:#fff}
118−.image_result p span a { color: #FFFFFF; }
119−.image_result p:hover span a { display: block; position: absolute; bottom: 0; right: 0; padding: 4px; background-color: rgba(0, 0, 0, 0.6); font-size: 0.7em; }
47+.image_result p:hover span a{display:block;position:absolute;bottom:0;right:0;padding:4px;background-color:rgba(0,0,0,0.6);font-size:.7em}
120−
121−.torrent_result { border-left: 10px solid lightgray; padding-left: 3px; }
48+.torrent_result{border-left:10px solid #d3d3d3;padding-left:3px}.torrent_result p{margin:3px;font-size:.8em}
122−.torrent_result p { margin: 3px; font-size: 0.8em; }
123−
124−.definition_result { border-left: 10px solid gray; padding-left: 3px; }
49+.definition_result{border-left:10px solid #808080;padding-left:3px}
125−
126−.percentage { position: relative; width: 300px; }
50+.percentage{position:relative;width:300px}.percentage div{background:#444}
127−.percentage div { background: #444444; }
128−table { width: 100%; }
51+table{width:100%}
129−td { padding: 0 4px; }
52+td{padding:0 4px}
130−tr:hover { background: #DDDDDD; }
53+tr:hover{background:#ddd}
131−
132−#search_wrapper { position: relative; max-width: 600px; padding: 10px; }
54+#search_wrapper{position:relative;max-width:600px;padding:10px}
133−.center #search_wrapper { margin-left: auto; margin-right: auto; }
55+.center #search_wrapper{margin-left:auto;margin-right:auto}
134−.q {
56+.q{background:none repeat scroll 0 0 #fff;border:1px solid #3498db;color:#222;font-size:16px;height:28px;margin:0;outline:medium none;padding:2px;padding-left:8px;padding-right:0 !important;width:100%;z-index:2}
135− background: none repeat scroll 0 0 #FFFFFF;
136− border: 1px solid #3498DB;
137− color: #222222;
138− font-size: 16px;
139− height: 28px;
140− margin: 0;
141− outline: medium none;
142− padding: 2px;
143− padding-left: 8px;
144− padding-right: 0px !important;
145− width: 100%;
146− z-index: 2;
147−}
148−#search_submit {
149− position: absolute;
150− top: 13px;
151− right: 1px;
152− padding: 0;
153− border: 0;
154− background: url('/static/img/search-icon.png') no-repeat;
57+#search_submit{position:absolute;top:13px;right:1px;padding:0;border:0;background:url('/static/img/search-icon.png') no-repeat;background-size:24px 24px;opacity:.8;width:24px;height:30px;font-size:0}
155− background-size: 24px 24px;
156− opacity: 0.8;
157− width: 24px;
158− height: 30px;
159− font-size: 0;
160−}
161−
162−#results { margin: 10px; padding: 0; margin-bottom: 20px; }
58+#results{margin:10px;padding:0;margin-bottom:20px}
163−
164−#sidebar { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; }
59+#sidebar{position:absolute;left:54em;width:15em;margin:0 2px 5px 5px;padding:0 2px 2px 2px}
165−#suggestions span { display: block; margin: 0 2px 2px 2px; padding: 0; }
60+#suggestions span{display:block;margin:0 2px 2px 2px;padding:0}
166−#suggestions form { display: block; }
61+#suggestions form{display:block}
167−#suggestions input { padding: 2px 6px; margin: 2px 4px; font-size: 0.8em; display: inline-block; background: #3498DB; color: #FFFFFF; border-radius: 4px; border: 0; cursor: pointer; }
62+#suggestions input{padding:2px 6px;margin:2px 4px;font-size:.8em;display:inline-block;background:#3498db;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0;cursor:pointer}
168−#search_url { margin-top: 8px; }
169−#search_url input { border: 1px solid #888888; padding: 4px; color: #444444; width: 20em; display: block; margin: 4px; }
63+#search_url{margin-top:8px}#search_url input{border:1px solid #888;padding:4px;color:#444;width:20em;display:block;margin:4px}
170−
171−#preferences {
172− top: 10px;
173− padding: 0;
174− border: 0;
175− background: url('/static/img/preference-icon.png') no-repeat;
64+#preferences{top:10px;padding:0;border:0;background:url('/static/img/preference-icon.png') no-repeat;background-size:28px 28px;opacity:.8;width:28px;height:30px;display:block}#preferences *{display:none}
176− background-size: 28px 28px;
177− opacity: 0.8;
178− width: 28px;
179− height: 30px;
180− display: block;
181−}
182−
183−#preferences * {
184− display: none;
185−}
186−
187−#pagination {
65+#pagination{clear:both}
188− clear: both;
189−}
190−
191−#apis {
192− margin-top: 8px;
66+#apis{margin-top:8px;clear:both}
193− clear: both;
67+@media screen and (max-width:60em){#sidebar{position:static;max-width:50em;margin:0 0 2px 0;padding:0;float:none;border:none;width:auto} #suggestions span{display:inline;font-size:.8em} #suggestions form{display:inline} #suggestions input{padding:2px 6px;margin:2px 4px;font-size:.8em;display:inline-block;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0;cursor:pointer}}@media screen and (max-width:680px){#search_wrapper{width:90%;clear:both;overflow:hidden} .right{display:none;postion:fixed !important;top:100px;right:0} #apis{display:none} #categories{font-size:80%;clear:both}#categories .checkbox_container{margin-top:2px;margin:0 2px} .checkbox_container{display:block;width:100%}.checkbox_container label{border-bottom:0} .result{border-top:1px solid #e8e7e6;margin:7px 0 6px 0}.result img{max-width:90%;width:auto;height:auto}}.favicon{float:left;margin-right:4px;margin-top:2px}
194−}
68+.preferences_back{background:none repeat scroll 0 0 #3498db;border:0 none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;cursor:pointer;display:inline-block;margin:2px 4px;padding:4px 6px}.preferences_back a{color:#fff}
195−
196−@media screen and (max-width: 60em) {
197−
198− #sidebar { position: static; max-width: 50em; margin: 0 0 2px 0; padding: 0; float: none; border: none; width: auto }
199− #suggestions span { display: inline; font-size: 0.8em }
200− #suggestions form { display: inline; }
201− #suggestions input { padding: 2px 6px; margin: 2px 4px; font-size: 0.8em; display: inline-block; border-radius: 4px; border: 0; cursor: pointer; }
202−
203−}
204−
205−@media screen and (max-width: 680px) {
206−
207− #search_wrapper { width: 90%; clear:both; overflow: hidden }
208−
209− .right { display: none; postion: fixed !important; top: 100px; right: 0px; }
210−
211− #apis { display: none; }
212−
213− #categories { font-size: 80%; clear: both; }
214−
215− #categories .checkbox_container { margin-top: 2px; margin: 0 2px; }
216− .checkbox_container { display: block; width: 100%; float: left; }
217− .checkbox_container label { border-bottom: 0; }
218−
219− .result { border-top: 1px solid #e8e7e6; margin: 7px 0 6px 0; }
220−
221− .result img { max-width: 90%; width: auto; height: auto }
222−}
223−
224−.favicon { float: left; margin-right: 4px; margin-top: 2px; }
searx/static/css/style.lessnew file+570
@@ -0,0 +1,570 @@
1+/*
2+ * searx, A privacy-respecting, hackable metasearch engine
3+ *
4+ * To convert "style.less" to "style.css" run: $make styles
5+ */
6+
7+@import "definitions.less";
8+
9+@import "mixins.less";
10+
11+// Main LESS-Code
12+
13+html {
14+ font-family: sans-serif;
15+ font-size: 0.9em;
16+ .text-size-adjust;
17+ color: @color-font;
18+ padding: 0;
19+ margin: 0;
20+}
21+
22+body, #container {
23+ padding: 0;
24+ margin: 0;
25+}
26+
27+#container {
28+ width: 100%;
29+ position: absolute;
30+ top: 0;
31+}
32+
33+.row {
34+ max-width: 800px;
35+ margin: 20px auto;
36+ text-align: justify;
37+
38+ h1 {
39+ font-size: 3em;
40+ margin-top: 50px;
41+ }
42+
43+ p {
44+ padding: 0 10px;
45+ max-width: 700px;
46+ }
47+
48+ h3,ul {
49+ margin: 4px 8px;
50+ }
51+}
52+
53+.hmarg {
54+ margin: 0 20px;
55+ border: 1px solid @color-hmarg-border;
56+ padding: 4px 10px;
57+}
58+
59+a {
60+ &:link.hmarg {
61+ color: @color-hmarg-font;
62+ }
63+
64+ &:visited.hmarg {
65+ color: @color-hmarg-font;
66+ }
67+
68+ &:active.hmarg {
69+ color: @color-hmarg-font-hover;
70+ }
71+
72+ &:hover.hmarg {
73+ color: @color-hmarg-font-hover;
74+ }
75+}
76+
77+.top_margin {
78+ margin-top: 60px;
79+}
80+
81+.center {
82+ text-align: center;
83+}
84+
85+h1 {
86+ font-size: 5em;
87+}
88+
89+div.title {
90+ background: url('/static/img/searx.png') no-repeat;
91+ width: 100%;
92+ background-position: center;
93+
94+ h1 {
95+ visibility: hidden;
96+ }
97+}
98+
99+input[type="submit"] {
100+ padding: 2px 6px;
101+ margin: 2px 4px;
102+ display: inline-block;
103+ background: @color-download-button-background;
104+ color: @color-download-button-font;
105+ .rounded-corners;
106+ border: 0;
107+ cursor: pointer;
108+}
109+
110+input[type="checkbox"] {
111+ visibility: hidden;
112+}
113+
114+fieldset {
115+ margin: 8px;
116+ border: 1px solid @color-settings-fieldset;
117+}
118+
119+#categories {
120+ margin: 0 10px;
121+}
122+
123+.checkbox_container {
124+ display: inline-block;
125+ position: relative;
126+ margin: 0 3px;
127+ padding: 0px;
128+
129+ input {
130+ display: none;
131+ }
132+}
133+
134+.checkbox_container label, .engine_checkbox label {
135+ cursor: pointer;
136+ padding: 4px 10px;
137+ margin: 0;
138+ display: block;
139+ text-transform: capitalize;
140+ .user-select;
141+}
142+
143+.checkbox_container input[type="checkbox"]:checked + label {
144+ background: @color-categories-item-selected;
145+ color: @color-categories-item-selected-font;
146+}
147+
148+.search {
149+ .checkbox_container label {
150+ border-bottom: 4px solid @color-categories-item-border-unselected;
151+ }
152+
153+ .checkbox_container label:hover {
154+ border-bottom: 4px solid @color-categories-item-border-unselected-hover;
155+ }
156+
157+ .checkbox_container input[type="checkbox"]:checked + label {
158+ border-bottom: 4px solid @color-categories-item-border-selected;
159+ }
160+}
161+
162+.engine_checkbox {
163+ padding: 4px;
164+}
165+
166+label {
167+ &.allow {
168+ background: @color-settings-label-allowed-background;
169+ padding: 4px 8px;
170+ color: @color-settings-label-allowed-font;
171+ display: none;
172+ }
173+
174+ &.deny {
175+ background: @color-settings-label-deny-background;
176+ padding: 4px 8px;
177+ color: @color-settings-label-deny-font;
178+ display: inline;
179+ }
180+}
181+
182+.engine_checkbox input[type="checkbox"]:checked + label {
183+ &:nth-child(2) + label {
184+ display: none;
185+ }
186+
187+ &.allow {
188+ display: inline;
189+ }
190+}
191+
192+a {
193+ text-decoration: none;
194+ color: @color-url-font;
195+
196+ &:visited {
197+ color: @color-url-visited-font;
198+ }
199+}
200+
201+.result {
202+ margin: 19px 0 18px 0;
203+ padding: 0;
204+ max-width: 55em;
205+ clear: both;
206+}
207+
208+.result_title {
209+ margin-bottom: 0;
210+
211+ a {
212+ color: @color-result-link-font;
213+ font-weight: normal;
214+ font-size: 1.1em;
215+
216+ &:hover {
217+ text-decoration: underline;
218+ }
219+
220+ &:visited {
221+ color: @color-result-link-visited-font;
222+ }
223+ }
224+}
225+
226+.result {
227+ h3 {
228+ font-size: 1em;
229+ word-wrap:break-word;
230+ margin: 5px 0 1px 0;
231+ padding: 0
232+ }
233+
234+ .content {
235+ font-size: 0.8em;
236+ margin: 0;
237+ padding: 0;
238+ max-width: 54em;
239+ word-wrap:break-word;
240+ line-height: 1.24;
241+ }
242+
243+ .url {
244+ font-size: 0.8em;
245+ margin: 3px 0 0 0;
246+ padding: 0;
247+ max-width: 54em;
248+ word-wrap:break-word;
249+ color: @color-result-url-font;
250+ }
251+}
252+
253+.engines {
254+ color: @color-engines-font;
255+}
256+
257+.small_font {
258+ font-size: 0.8em;
259+}
260+
261+.small p {
262+ margin: 2px 0;
263+}
264+
265+.search {
266+ background: @color-result-search-background;
267+ padding: 0;
268+ margin: 0
269+}
270+
271+.right {
272+ float: right;
273+}
274+
275+.invisible {
276+ display: none;
277+}
278+
279+.left {
280+ float: left;
281+}
282+
283+.image_result {
284+ float: left;
285+ margin: 10px 10px;
286+ position: relative;
287+ height: 160px;
288+
289+ img {
290+ border: 0;
291+ height: 160px;
292+ }
293+
294+ p {
295+ margin: 0;
296+ padding: 0;
297+
298+ span a {
299+ display: none;
300+ color: @color-result-image-span-font;
301+ }
302+
303+ &:hover span a {
304+ display: block;
305+ position: absolute;
306+ bottom: 0;
307+ right: 0;
308+ padding: 4px;
309+ background-color: @color-result-image-span-background-hover;
310+ font-size: 0.7em;
311+ }
312+ }
313+}
314+
315+.torrent_result {
316+ border-left: 10px solid @color-result-torrent-border;
317+ padding-left: 3px;
318+
319+ p {
320+ margin: 3px;
321+ font-size: 0.8em;
322+ }
323+}
324+
325+.definition_result {
326+ border-left: 10px solid @color-result-definition-border;
327+ padding-left: 3px;
328+}
329+
330+.percentage {
331+ position: relative;
332+ width: 300px;
333+
334+ div {
335+ background: @color-percentage-div-background;
336+ }
337+}
338+
339+table {
340+ width: 100%;
341+}
342+
343+td {
344+ padding: 0 4px;
345+}
346+
347+tr {
348+ &:hover {
349+ background: @color-settings-tr-hover;
350+ }
351+}
352+
353+#search_wrapper {
354+ position: relative;
355+ max-width: 600px;
356+ padding: 10px;
357+}
358+
359+.center #search_wrapper {
360+ margin-left: auto;
361+ margin-right: auto;
362+}
363+
364+.q {
365+ background: none repeat scroll 0 0 @color-search-background;
366+ border: 1px solid @color-search-border;
367+ color: @color-search-font;
368+ font-size: 16px;
369+ height: 28px;
370+ margin: 0;
371+ outline: medium none;
372+ padding: 2px;
373+ padding-left: 8px;
374+ padding-right: 0px !important;
375+ width: 100%;
376+ z-index: 2;
377+}
378+
379+#search_submit {
380+ position: absolute;
381+ top: 13px;
382+ right: 1px;
383+ padding: 0;
384+ border: 0;
385+ background: url('/static/img/search-icon.png') no-repeat;
386+ background-size: 24px 24px;
387+ opacity: 0.8;
388+ width: 24px;
389+ height: 30px;
390+ font-size: 0;
391+}
392+
393+#results {
394+ margin: 10px;
395+ padding: 0;
396+ margin-bottom: 20px;
397+}
398+
399+#sidebar {
400+ position: absolute;
401+ left: 54em;
402+ width: 15em;
403+ margin: 0 2px 5px 5px;
404+ padding: 0 2px 2px 2px;
405+}
406+
407+#suggestions {
408+ span {
409+ display: block;
410+ margin: 0 2px 2px 2px;
411+ padding: 0;
412+ }
413+
414+ form {
415+ display: block;
416+ }
417+
418+ input {
419+ padding: 2px 6px;
420+ margin: 2px 4px;
421+ font-size: 0.8em;
422+ display: inline-block;
423+ background: @color-suggestions-button-background;
424+ color: @color-suggestions-button-font;
425+ .rounded-corners;
426+ border: 0;
427+ cursor: pointer;
428+ }
429+}
430+
431+#search_url {
432+ margin-top: 8px;
433+
434+ input {
435+ border: 1px solid @color-result-search-url-border;
436+ padding: 4px;
437+ color: @color-result-search-url-font;
438+ width: 20em;
439+ display: block;
440+ margin: 4px;
441+ }
442+}
443+
444+#preferences {
445+ top: 10px;
446+ padding: 0;
447+ border: 0;
448+ background: url('/static/img/preference-icon.png') no-repeat;
449+ background-size: 28px 28px;
450+ opacity: 0.8;
451+ width: 28px;
452+ height: 30px;
453+ display: block;
454+
455+ * {
456+ display: none;
457+ }
458+}
459+
460+#pagination {
461+ clear: both;
462+}
463+
464+#apis {
465+ margin-top: 8px;
466+ clear: both;
467+}
468+
469+@media screen and (max-width: 60em) {
470+ #sidebar {
471+ position: static;
472+ max-width: 50em;
473+ margin: 0 0 2px 0;
474+ padding: 0;
475+ float: none;
476+ border: none;
477+ width: auto
478+ }
479+
480+ #suggestions {
481+ span {
482+ display: inline;
483+ font-size: 0.8em
484+ }
485+
486+ form {
487+ display: inline;
488+ }
489+
490+ input {
491+ padding: 2px 6px;
492+ margin: 2px 4px;
493+ font-size: 0.8em;
494+ display: inline-block;
495+ .rounded-corners;
496+ border: 0;
497+ cursor: pointer;
498+ }
499+ }
500+}
501+
502+@media screen and (max-width: 680px) {
503+ #search_wrapper {
504+ width: 90%;
505+ clear:both;
506+ overflow: hidden
507+ }
508+
509+ .right {
510+ display: none;
511+ postion: fixed !important;
512+ top: 100px;
513+ right: 0px;
514+ }
515+
516+ #apis {
517+ display: none;
518+ }
519+
520+ #categories {
521+ font-size: 80%;
522+ clear: both;
523+
524+ .checkbox_container {
525+ margin-top: 2px;
526+ margin: 0 2px;
527+ }
528+ }
529+
530+ .checkbox_container {
531+ display: block;
532+ width: 100%;
533+ //float: left;
534+
535+ label {
536+ border-bottom: 0;
537+ }
538+ }
539+
540+ .result {
541+ border-top: 1px solid @color-result-top-border;
542+ margin: 7px 0 6px 0;
543+
544+ img {
545+ max-width: 90%;
546+ width: auto;
547+ height: auto
548+ }
549+ }
550+}
551+
552+.favicon {
553+ float: left;
554+ margin-right: 4px;
555+ margin-top: 2px;
556+}
557+
558+.preferences_back {
559+ background: none repeat scroll 0 0 @color-settings-return-background;
560+ border: 0 none;
561+ .rounded-corners;
562+ cursor: pointer;
563+ display: inline-block;
564+ margin: 2px 4px;
565+ padding: 4px 6px;
566+
567+ a {
568+ color: @color-settings-return-font;
569+ }
570+}
searx/templates/preferences.html+2−2
@@ -65,7 +65,7 @@
65 </p>
65 </p>
66
66
67 <input type="submit" value="{{ _('save') }}" />
67 <input type="submit" value="{{ _('save') }}" />
68− </form>
69− <div class="right"><a href="{{ url_for('index') }}">{{ _('back') }}</a></div>
68+ <div class="right preferences_back"><a href="{{ url_for('index') }}">{{ _('back') }}</a></div>
69+ </form>
70</div>
70</div>
71{% endblock %}
71{% endblock %}
searx/templates/search.html+1−1
@@ -1,6 +1,6 @@
1<form method="post" action="{{ url_for('index') }}" id="search_form">
1<form method="post" action="{{ url_for('index') }}" id="search_form">
2 <div id="search_wrapper">
2 <div id="search_wrapper">
3− <input type="text" id="q" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/>
3+ <input type="text" placeholder="{{ _('Search for...') }}" id="q" class="q" name="q" tabindex="1" autocomplete="off" {% if q %}value="{{ q }}"{% endif %}/>
4 <input type="submit" value="search" id="search_submit" />
4 <input type="submit" value="search" id="search_submit" />
5 </div>
5 </div>
6 {% include 'categories.html' %}
6 {% include 'categories.html' %}