summaryrefslogtreecommitdiff
path: root/searx/static/default
diff options
context:
space:
mode:
Diffstat (limited to 'searx/static/default')
-rw-r--r--searx/static/default/css/style.css20
-rw-r--r--searx/static/default/less/style.less133
2 files changed, 114 insertions, 39 deletions
diff --git a/searx/static/default/css/style.css b/searx/static/default/css/style.css
index 9a6faadef..70265b072 100644
--- a/searx/static/default/css/style.css
+++ b/searx/static/default/css/style.css
@@ -40,7 +40,8 @@ a{text-decoration:none;color:#1a11be}a:visited{color:#8e44ad}
.result_title a:visited{color:#8e44ad}
.cache_link{font-size:10px !important}
.result h3{font-size:1em;word-wrap:break-word;margin:5px 0 1px 0;padding:0}
-.result .content{font-size:.8em;margin:0;padding:0;max-width:54em;word-wrap:break-word;line-height:1.24}
+.result .content{font-size:.8em;margin:0;padding:0;max-width:54em;word-wrap:break-word;line-height:1.24}.result .content img{float:left;margin-right:5px;max-width:200px;max-height:100px}
+.result .content br.last{clear:both}
.result .url{font-size:.8em;margin:0 0 3px 0;padding:0;max-width:54em;word-wrap:break-word;color:#c0392b}
.result .published_date{font-size:.8em;color:#888;margin:5px 20px}
.engines{color:#888}
@@ -61,15 +62,20 @@ table{width:100%}
td{padding:0 4px}
tr:hover{background:#ddd}
#results{margin:auto;padding:0;width:50em;margin-bottom:20px}
-#sidebar{position:absolute;top:100px;right:10px;margin:0 2px 5px 5px;padding:0 2px 2px 2px;width:14em}#sidebar input{padding:0;margin:3px;font-size:.8em;display:inline-block;background:transparent;color:#444;cursor:pointer}
+#sidebar{position:fixed;bottom:10px;left:10px;margin:0 2px 5px 5px;padding:0 2px 2px 2px;width:14em}#sidebar input{padding:0;margin:3px;font-size:.8em;display:inline-block;background:transparent;color:#444;cursor:pointer}
#sidebar input[type="submit"]{text-decoration:underline}
-#suggestions{margin-top:20px}#suggestions span{display:inline;margin:0 2px 2px 2px;padding:0}
-#suggestions input{padding:0;margin:3px;font-size:.8em;display:inline-block;background:transparent;color:#444;cursor:pointer}
-#suggestions input[type="submit"]{text-decoration:underline}
-#suggestions form{display:inline}
+#suggestions,#answers{margin-top:20px}
+#suggestions input,#answers input,#infoboxes input{padding:0;margin:3px;font-size:.8em;display:inline-block;background:transparent;color:#444;cursor:pointer}
+#suggestions input[type="submit"],#answers input[type="submit"],#infoboxes input[type="submit"]{text-decoration:underline}
+#suggestions form,#answers form,#infoboxes form{display:inline}
+#infoboxes{position:absolute;top:100px;right:20px;margin:0 2px 5px 5px;padding:0 2px 2px;max-width:21em}#infoboxes .infobox{margin:10px 0 10px;border:1px solid #ddd;padding:5px;font-size:.8em}#infoboxes .infobox img{max-width:20em;max-heigt:12em;display:block;margin:5px;padding:5px}
+#infoboxes .infobox h2{margin:0}
+#infoboxes .infobox table{width:auto}#infoboxes .infobox table td{vertical-align:top}
+#infoboxes .infobox input{font-size:1em}
+#infoboxes .infobox br{clear:both}
#search_url{margin-top:8px}#search_url input{border:1px solid #888;padding:4px;color:#444;width:14em;display:block;margin:4px;font-size:.8em}
#preferences{top:10px;padding:0;border:0;background:url('../img/preference-icon.png') no-repeat;background-size:28px 28px;opacity:.8;width:28px;height:30px;display:block}#preferences *{display:none}
#pagination{clear:both;width:40em}
#apis{margin-top:8px;clear:both}
-@media screen and (max-width:50em){#categories{font-size:90%;clear:both}#categories .checkbox_container{margin-top:2px;margin:auto} #results{margin:auto;padding:0;width:90%} .github{display:none} .checkbox_container{display:block;width:90%}.checkbox_container label{border-bottom:0}}@media screen and (max-width:70em){.right{display:none;postion:fixed !important;top:100px;right:0} #sidebar{position:static;max-width:50em;margin:0 0 2px 0;padding:0;float:none;border:none;width:auto}#sidebar input{border:0} #apis{display:none} #search_url{display:none} .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}
+@media screen and (max-width:50em){#results{margin:auto;padding:0;width:90%} .github{display:none} .checkbox_container{display:block;width:90%}.checkbox_container label{border-bottom:0} .right{display:none;postion:fixed !important;top:100px;right:0}}@media screen and (max-width:75em){#infoboxes{position:inherit;max-width:inherit}#infoboxes .infobox{clear:both}#infoboxes .infobox img{float:left;max-width:10em} #categories{font-size:90%;clear:both}#categories .checkbox_container{margin-top:2px;margin:auto} #sidebar{position:static;max-width:50em;margin:0 0 2px 0;padding:0;float:none;border:none;width:auto}#sidebar input{border:0} #apis{display:none} #search_url{display:none} .result{border-top:1px solid #e8e7e6;margin:7px 0 6px 0}}.favicon{float:left;margin-right:4px;margin-top:2px}
.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}
diff --git a/searx/static/default/less/style.less b/searx/static/default/less/style.less
index e3fac1b10..c43c0fe72 100644
--- a/searx/static/default/less/style.less
+++ b/searx/static/default/less/style.less
@@ -235,6 +235,17 @@ a {
max-width: 54em;
word-wrap:break-word;
line-height: 1.24;
+
+ img {
+ float: left;
+ margin-right: 5px;
+ max-width: 200px;
+ max-height: 100px;
+ }
+
+ br.last {
+ clear: both;
+ }
}
.url {
@@ -363,9 +374,9 @@ tr {
}
#sidebar {
- position: absolute;
- top: 100px;
- right: 10px;
+ position: fixed;
+ bottom: 10px;
+ left: 10px;
margin: 0 2px 5px 5px;
padding: 0 2px 2px 2px;
width: 14em;
@@ -384,33 +395,80 @@ tr {
}
}
-#suggestions {
+#suggestions, #answers {
- margin-top: 20px;
+ margin-top: 20px;
+
+}
+
+#suggestions, #answers, #infoboxes {
- span {
- display: inline;
- margin: 0 2px 2px 2px;
- padding: 0;
- }
input {
padding: 0;
margin: 3px;
font-size: 0.8em;
display: inline-block;
- background: transparent;
- color: @color-result-search-url-font;
+ background: transparent;
+ color: @color-result-search-url-font;
cursor: pointer;
}
- input[type="submit"] {
+
+ input[type="submit"] {
text-decoration: underline;
- }
+ }
form {
display: inline;
}
}
+
+#infoboxes {
+ position: absolute;
+ top: 100px;
+ right: 20px;
+ margin: 0px 2px 5px 5px;
+ padding: 0px 2px 2px;
+ max-width: 21em;
+
+ .infobox {
+ margin: 10px 0 10px;
+ border: 1px solid #ddd;
+ padding: 5px;
+ font-size: 0.8em;
+
+ img {
+ max-width: 20em;
+ max-heigt: 12em;
+ display: block;
+ margin: 5px;
+ padding: 5px;
+ }
+
+ h2 {
+ margin: 0;
+ }
+
+ table {
+ width: auto;
+
+ td {
+ vertical-align: top;
+ }
+
+ }
+
+ input {
+ font-size: 1em;
+ }
+
+ br {
+ clear: both;
+ }
+
+ }
+}
+
#search_url {
margin-top: 8px;
@@ -453,16 +511,6 @@ tr {
@media screen and (max-width: @results-width) {
- #categories {
- font-size: 90%;
- clear: both;
-
- .checkbox_container {
- margin-top: 2px;
- margin: auto;
- }
- }
-
#results {
margin: auto;
padding: 0;
@@ -481,9 +529,7 @@ tr {
border-bottom: 0;
}
}
-}
-@media screen and (max-width: 70em) {
.right {
display: none;
postion: fixed !important;
@@ -491,6 +537,35 @@ tr {
right: 0px;
}
+}
+
+@media screen and (max-width: 75em) {
+
+ #infoboxes {
+ position: inherit;
+ max-width: inherit;
+
+ .infobox {
+ clear:both;
+
+ img {
+ float: left;
+ max-width: 10em;
+ }
+ }
+
+ }
+
+ #categories {
+ font-size: 90%;
+ clear: both;
+
+ .checkbox_container {
+ margin-top: 2px;
+ margin: auto;
+ }
+ }
+
#sidebar {
position: static;
max-width: @results-width;
@@ -515,12 +590,6 @@ tr {
.result {
border-top: 1px solid @color-result-top-border;
margin: 7px 0 6px 0;
-
- img {
- max-width: 90%;
- width: auto;
- height: auto
- }
}
}