git.iko.soy/searx
on master help sign in
responsive theme courgette
3ed43cfThomas LEBEAU
searx/static/courgette/css/style.css+139−21
compare with master
unifiedsplit
@@ -25,21 +25,6 @@ html {
25 min-height: 100%;
25 min-height: 100%;
26}
26}
27
27
28−.center:after {
29− content: "";
30− z-index: -1;
31− background: url(../img/bg-body-index.jpg) no-repeat;
32− background-size: cover;
33− width: 100%;
34− height: 100%;
35− top: 0;
36− left: 0;
37− position: fixed;
38−}
39− .center.search:after {
40− content: none;
41− }
42−
43.title h1 {
28.title h1 {
44 background: url(../img/searx.png) no-repeat;
29 background: url(../img/searx.png) no-repeat;
45 width: 319px;
30 width: 319px;
@@ -49,16 +34,12 @@ html {
49}
34}
50
35
51.center {
36.center {
52− width: 55em;
37+ max-width: 55em;
53 text-align: center;
38 text-align: center;
54 background: rgba(255,255,255,0.6);
39 background: rgba(255,255,255,0.6);
55 padding: 4em 2em;
40 padding: 4em 2em;
56 margin: 7% auto 0;
41 margin: 7% auto 0;
57 position: relative;
42 position: relative;
58− /*position: absolute;
59− top: 50%;
60− left: 50%;
61− margin:-220px 0 0 -408px;*/
62}
43}
63
44
64.center.search {
45.center.search {
@@ -69,6 +50,23 @@ html {
69 padding-top: 1.8em;
50 padding-top: 1.8em;
70}
51}
71
52
53+@media screen and (min-width: 1001px) {
54+ .center:after {
55+ content: "";
56+ z-index: -1;
57+ background: url(../img/bg-body-index.jpg) no-repeat;
58+ background-size: cover;
59+ width: 100%;
60+ height: 100%;
61+ top: 0;
62+ left: 0;
63+ position: fixed;
64+ }
65+ .center.search:after {
66+ content: none;
67+ }
68+}
69+
72.autocompleter-choices {
70.autocompleter-choices {
73 position: absolute;
71 position: absolute;
74 margin: 0;
72 margin: 0;
@@ -106,11 +104,19 @@ html {
106 text-decoration: underline;
104 text-decoration: underline;
107 }
105 }
108
106
107+@media screen and (max-width: 1000px) {
108+ .center { background: none; }
109+ .top_margin a {
110+ color: #333;
111+ }
112+}
113+
109.checkbox_container { margin-top: 1.5em; }
114.checkbox_container { margin-top: 1.5em; }
110 .checkbox_container label {
115 .checkbox_container label {
111 padding: 0.5em 1em;
116 padding: 0.5em 1em;
112 color: #333;
117 color: #333;
113 cursor: pointer;
118 cursor: pointer;
119+ font-size: 0.9em;
114 }
120 }
115 .checkbox_container label:hover {
121 .checkbox_container label:hover {
116 background: #3498DB;
122 background: #3498DB;
@@ -127,10 +133,70 @@ html {
127 color: #FFF;
133 color: #FFF;
128 }
134 }
129
135
130−#categories > div {
136+#categories_container > div {
131 display: inline-block;
137 display: inline-block;
132}
138}
133
139
140+#categories .hidden {
141+ display: none;
142+ position: absolute;
143+ bottom: 1em;
144+ left: 0;
145+ text-align: center;
146+ width: 100%;
147+ font-size: 0.9em;
148+ font-style: italic;
149+ color: #333;
150+}
151+
152+#categories:hover .hidden {
153+ display: block;
154+}
155+
156+@media screen and (max-width: 900px) {
157+ #categories_container { letter-spacing: -5px; }
158+ #categories_container > div {
159+ letter-spacing: normal;
160+ margin-top: 1em;
161+ }
162+ .checkbox_container {
163+ margin: 0;
164+ }
165+ .checkbox_container label {
166+ display: block;
167+ background: #CCC;
168+ padding: 1em;
169+ border: 1px solid #FFF;
170+ }
171+ .top_margin { position: static; }
172+ #categories .hidden {
173+ position: static;
174+ display: block;
175+ }
176+}
177+
178+@media screen and (max-width: 900px) and (min-width: 501px) {
179+ #categories_container > div {
180+ width: 31%;
181+ margin-left: 2.333%;
182+ }
183+ #categories_container > div:nth-child(3n+1) { margin-left: 0; }
184+}
185+
186+@media screen and (max-width: 500px) {
187+ #categories_container > div {
188+ width: 48%;
189+ margin-left: 2%;
190+ font-size: 0.9em;
191+ }
192+ #categories_container > div:nth-child(2n+1) { margin-left: 0; }
193+ .title h1 {
194+ background: url(../img/searx-mobile.png) no-repeat;
195+ width: 200px;
196+ height: 39px;
197+ }
198+}
199+
134#search_wrapper {
200#search_wrapper {
135 position: relative;
201 position: relative;
136}
202}
@@ -284,6 +350,12 @@ html {
284 text-decoration: underline;
350 text-decoration: underline;
285 }
351 }
286
352
353+.cache_link {
354+ color: #666;
355+ font-size: 0.9em;
356+ font-style: italic;
357+}
358+
287.search.center {
359.search.center {
288 padding-right: 17em;
360 padding-right: 17em;
289}
361}
@@ -339,6 +411,10 @@ input[type="submit"]:focus {
339 margin: auto;
411 margin: auto;
340}
412}
341
413
414+.row a {
415+ color: #3498db;
416+}
417+
342.row form {
418.row form {
343 letter-spacing: -5px;
419 letter-spacing: -5px;
344}
420}
@@ -368,6 +444,48 @@ input[type="submit"]:focus {
368 min-height: 10.5em;
444 min-height: 10.5em;
369}
445}
370
446
447+@media screen and (max-width: 900px) {
448+ .row {
449+ margin: 0 1em;
450+ }
451+ .row fieldset { width: 49%; }
452+ .row fieldset,
453+ .row fieldset:nth-child(odd) {
454+ margin-right: 0;
455+ }
456+
457+ .row fieldset:first-child {
458+ width: 100%;
459+ margin-right: 0;
460+ }
461+
462+ .row fieldset:nth-child(even) {
463+ margin-right: 2%;
464+ }
465+
466+}
467+
468+@media screen and (max-width: 800px) {
469+ .row fieldset { width: 100%; }
470+
471+ select { width: 100%; }
472+
473+ table { font-size: 0.8em; }
474+ .right {display: none;}
475+ #sidebar { display: none; }
476+ #results { padding: 0 2em; }
477+ .search.center {
478+ padding-right: 2em;
479+ }
480+}
481+
482+@media screen and (max-width: 400px) {
483+ .row #categories_container > div {
484+ width: 100%;
485+ margin-left: 0;
486+ }
487+}
488+
371fieldset {
489fieldset {
372 border: 0;
490 border: 0;
373 margin: 1em 0;
491 margin: 1em 0;
searx/static/courgette/img/searx-mobile.pngnew file

Binary file not shown.