free
/
searx
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 11 Wiki Activity
Browse Source

Using .less instead of .css 

to generate the .css file from the .less file run: $make styles
Thomas Pointhuber 11 years ago
parent
e30f43bd81
commit
425ec3b707
6 changed files with 749 additions and 227 deletions
Split View Show Diff Stats
  1. 2
    1
      .travis.yml
  2. 5
    2
      Makefile
  3. 92
    0
      searx/static/css/definitions.less
  4. 27
    0
      searx/static/css/mixins.less
  5. 67
    224
      searx/static/css/style.css
  6. 556
    0
      searx/static/css/style.less

+ 2
- 1
.travis.yml View File 

@@ -5,10 +5,11 @@ before_install:
5 5 
   - "export DISPLAY=:99.0"
6 6 
   - "sh -e /etc/init.d/xvfb start"
7 7 
 install:
8 
-  - "make"
8 
+  - "make node-less"
9 9 
 script:
10 10 
   - "make tests"
11 11 
   - "make robot"
12 
+  - "make styles"
12 13 
 notifications:
13 14 
   irc:
14 15 
     channels:

+ 5
- 2
Makefile View File 

@@ -43,11 +43,14 @@ production: bin/buildout production.cfg setup.py
43 43 
 minimal: bin/buildout minimal.cfg setup.py
44 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 
+
46 49 
 locales:
47 50 
 	@pybabel compile -d searx/translations
48 51
49 52 
 clean:
50 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

+ 92
- 0
searx/static/css/definitions.less View File 

@@ -0,0 +1,92 @@
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 
+@font-color-categories-item-selected: #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 
+
89 
+/// Other
90 
+
91 
+@color-engines-font: #888;
92 
+@color-percentage-div-background: #444;

+ 27
- 0
searx/static/css/mixins.less View File 

@@ -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 
+}

+ 67
- 224
searx/static/css/style.css View File 

@@ -1,224 +1,67 @@
1 
-html {
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 {
13 
-  padding: 0;
14 
-  margin: 0;
15 
-}
16 
-
17 
-#container {
18 
-    width: 100%;
19 
-    position: absolute;
20 
-    top: 0;
21 
-}
22 
-
23 
-.row { max-width: 800px; margin: auto; text-align: justify; }
24 
-.row h1 { font-size: 3em; margin-top: 50px; }
25 
-.row p { padding: 0 10px; max-width: 700px; }
26 
-.row h3,ul { margin: 4px 8px;}
27 
-
28 
-.hmarg {
29 
-    margin: 0 20px;
30 
-    border: 1px solid #3498DB;
31 
-    padding: 4px 10px;
32 
-}
33 
-
34 
-a:link.hmarg { color: #3498DB; }
35 
-a:visited.hmarg { color: #3498DB; }
36 
-a:active.hmarg { color: #3498DB; }
37 
-a:hover.hmarg { color: #3498DB; }
38 
-
39 
-.top_margin { margin-top: 60px; }
40 
-
41 
-.center { text-align: center; }
42 
-
43 
-h1 { font-size: 5em; }
44 
-
45 
-div.title { background: url('/static/img/searx.png') no-repeat; width: 100%; background-position: center; }
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;  }
49 
-
50 
-input[type="checkbox"] { visibility: hidden; }
51 
-
52 
-fieldset { margin: 8px; border: 1px solid #3498DB; }
53 
-
54 
-#categories { margin: 0 10px; }
55 
-
56 
-.checkbox_container { display: inline-block; position: relative; margin: 0 3px; padding: 0px; }
57 
-.checkbox_container input {
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; }
76 
-.search .checkbox_container label { border-bottom: 4px solid #e8e7e6; }
77 
-.search .checkbox_container label:hover { border-bottom: 4px solid #3498DB; }
78 
-.search .checkbox_container input[type="checkbox"]:checked + label { border-bottom: 4px solid #2980B9; }
79 
-
80 
-.engine_checkbox { padding: 4px; }
81 
-label.allow { background: #E74C3C; color: #FFFFFF; padding: 4px 8px; display: none; }
82 
-label.deny { background: #2ECC71; padding: 4px 8px; display: inline; }
83 
-.engine_checkbox input[type="checkbox"]:checked + label:nth-child(2) + label { display: none; }
84 
-.engine_checkbox input[type="checkbox"]:checked + label.allow { display: inline; }
85 
-
86 
-a { text-decoration: none; color: #1a11be; }
87 
-a:visited { color: #8E44AD; }
88 
-
89 
-.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; }
92 
-.result_title a:hover { text-decoration: underline; }
93 
-.result_title a:visited { color: #8E44AD }
94 
-.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; }
96 
-.result .url { font-size: 0.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; }
101 
-
102 
-.small_font { font-size: 0.8em; }
103 
-
104 
-.small p { margin: 2px 0; }
105 
-
106 
-.search { background: #ECF0F1; padding: 0; margin: 0 }
107 
-
108 
-.right { float: right; }
109 
-
110 
-.invisible { display: none; }
111 
-
112 
-.left { float: left; }
113 
-
114 
-.image_result { float: left; margin: 10px 10px; position: relative;  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; }
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; }
120 
-
121 
-.torrent_result { border-left: 10px solid lightgray; padding-left: 3px; }
122 
-.torrent_result p { margin: 3px; font-size: 0.8em; }
123 
-
124 
-.definition_result { border-left: 10px solid gray; padding-left: 3px; }
125 
-
126 
-.percentage { position: relative; width: 300px; }
127 
-.percentage div { background: #444444; }
128 
-table { width: 100%; }
129 
-td { padding: 0 4px;  }
130 
-tr:hover { background: #DDDDDD; }
131 
-
132 
-#search_wrapper { position: relative; max-width: 600px; padding: 10px; }
133 
-.center #search_wrapper { margin-left: auto; margin-right: auto; }
134 
-.q {
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;
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; }
163 
-
164 
-#sidebar { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; }
165 
-#suggestions span { display: block; margin: 0 2px 2px 2px; padding: 0; }
166 
-#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; }
168 
-#search_url { margin-top: 8px; }
169 
-#search_url input { border: 1px solid #888888; padding: 4px; color: #444444; 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;
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 {
188 
-    clear: both;
189 
-}
190 
-
191 
-#apis {
192 
-    margin-top: 8px;
193 
-    clear: both;
194 
-}
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; }
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 
+body,#container{padding:0;margin:0}
3 
+#container{width:100%;position:absolute;top:0}
4 
+.row{max-width:800px;margin:auto;text-align:justify}.row h1{font-size:3em;margin-top:50px}
5 
+.row p{padding:0 10px;max-width:700px}
6 
+.row h3,.row ul{margin:4px 8px}
7 
+.hmarg{margin:0 20px;border:1px solid #3498db;padding:4px 10px}
8 
+a:link.hmarg{color:#3498db}
9 
+a:visited.hmarg{color:#3498db}
10 
+a:active.hmarg{color:#3498db}
11 
+a:hover.hmarg{color:#3498db}
12 
+.top_margin{margin-top:60px}
13 
+.center{text-align:center}
14 
+h1{font-size:5em}
15 
+div.title{background:url('/static/img/searx.png') no-repeat;width:100%;background-position:center}div.title h1{visibility:hidden}
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}
17 
+input[type="checkbox"]{visibility:hidden}
18 
+fieldset{margin:8px;border:1px solid #3498db}
19 
+#categories{margin:0 10px}
20 
+.checkbox_container{display:inline-block;position:relative;margin:0 3px;padding:0}.checkbox_container input{display:none}
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}
22 
+.checkbox_container input[type="checkbox"]:checked+label{background:#3498db;color:#fff}
23 
+.search .checkbox_container label{border-bottom:4px solid #e8e7e6}
24 
+.search .checkbox_container label:hover{border-bottom:4px solid #3498db}
25 
+.search .checkbox_container input[type="checkbox"]:checked+label{border-bottom:4px solid #2980b9}
26 
+.engine_checkbox{padding:4px}
27 
+label.allow{background:#e74c3c;padding:4px 8px;color:#fff;display:none}
28 
+label.deny{background:#2ecc71;padding:4px 8px;color:#444;display:inline}
29 
+.engine_checkbox input[type="checkbox"]:checked+label:nth-child(2)+label{display:none}
30 
+.engine_checkbox input[type="checkbox"]:checked+label.allow{display:inline}
31 
+a{text-decoration:none;color:#1a11be}a:visited{color:#8e44ad}
32 
+.result{margin:19px 0 18px 0;padding:0;max-width:55em;clear:both}
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}
34 
+.result_title a:visited{color:#8e44ad}
35 
+.result h3{font-size:1em;word-wrap:break-word;margin:5px 0 1px 0;padding:0}
36 
+.result .content{font-size:.8em;margin:0;padding:0;max-width:54em;word-wrap:break-word;line-height:1.24}
37 
+.result .url{font-size:.8em;margin:3px 0 0 0;padding:0;max-width:54em;word-wrap:break-word;color:#c0392b}
38 
+.engines{color:#888}
39 
+.small_font{font-size:.8em}
40 
+.small p{margin:2px 0}
41 
+.search{background:#ecf0f1;padding:0;margin:0}
42 
+.right{float:right}
43 
+.invisible{display:none}
44 
+.left{float:left}
45 
+.image_result{float:left;margin:10px 10px;position:relative;height:160px}.image_result img{border:0;height:160px}
46 
+.image_result p{margin:0;padding:0}.image_result p span a{display:none;color:#fff}
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}
48 
+.torrent_result{border-left:10px solid #d3d3d3;padding-left:3px}.torrent_result p{margin:3px;font-size:.8em}
49 
+.definition_result{border-left:10px solid #808080;padding-left:3px}
50 
+.percentage{position:relative;width:300px}.percentage div{background:#444}
51 
+table{width:100%}
52 
+td{padding:0 4px}
53 
+tr:hover{background:#ddd}
54 
+#search_wrapper{position:relative;max-width:600px;padding:10px}
55 
+.center #search_wrapper{margin-left:auto;margin-right:auto}
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}
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}
58 
+#results{margin:10px;padding:0;margin-bottom:20px}
59 
+#sidebar{position:absolute;left:54em;width:15em;margin:0 2px 5px 5px;padding:0 2px 2px 2px}
60 
+#suggestions span{display:block;margin:0 2px 2px 2px;padding:0}
61 
+#suggestions form{display:block}
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}
63 
+#search_url{margin-top:8px}#search_url input{border:1px solid #888;padding:4px;color:#444;width:20em;display:block;margin:4px}
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}
65 
+#pagination{clear:both}
66 
+#apis{margin-top:8px;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%;float:left}.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}

+ 556
- 0
searx/static/css/style.less View File 

@@ -0,0 +1,556 @@
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: 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: @font-color-categories-item-selected;
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 
+}