diff options
Diffstat (limited to 'searx/static/default')
| -rw-r--r-- | searx/static/default/css/style.css | 20 | ||||
| -rw-r--r-- | searx/static/default/less/style.less | 133 |
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 - } } } |