From 425ec3b70738e693922755b4ee8a8a73642b7fee Mon Sep 17 00:00:00 2001 From: Thomas Pointhuber Date: Wed, 5 Mar 2014 15:20:30 +0100 Subject: Using .less instead of .css to generate the .css file from the .less file run: $make styles --- searx/static/css/style.less | 556 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 556 insertions(+) create mode 100644 searx/static/css/style.less (limited to 'searx/static/css/style.less') diff --git a/searx/static/css/style.less b/searx/static/css/style.less new file mode 100644 index 000000000..c34587322 --- /dev/null +++ b/searx/static/css/style.less @@ -0,0 +1,556 @@ +/* + * searx, A privacy-respecting, hackable metasearch engine + * + * To convert "style.less" to "style.css" run: $make styles + */ + +@import "definitions.less"; + +@import "mixins.less"; + +// Main LESS-Code + +html { + font-family: sans-serif; + font-size: 0.9em; + .text-size-adjust; + color: @color-font; + padding: 0; + margin: 0; +} + +body, #container { + padding: 0; + margin: 0; +} + +#container { + width: 100%; + position: absolute; + top: 0; +} + +.row { + max-width: 800px; + margin: auto; + text-align: justify; + + h1 { + font-size: 3em; + margin-top: 50px; + } + + p { + padding: 0 10px; + max-width: 700px; + } + + h3,ul { + margin: 4px 8px; + } +} + +.hmarg { + margin: 0 20px; + border: 1px solid @color-hmarg-border; + padding: 4px 10px; +} + +a { + &:link.hmarg { + color: @color-hmarg-font; + } + + &:visited.hmarg { + color: @color-hmarg-font; + } + + &:active.hmarg { + color: @color-hmarg-font-hover; + } + + &:hover.hmarg { + color: @color-hmarg-font-hover; + } +} + +.top_margin { + margin-top: 60px; +} + +.center { + text-align: center; +} + +h1 { + font-size: 5em; +} + +div.title { + background: url('/static/img/searx.png') no-repeat; + width: 100%; + background-position: center; + + h1 { + visibility: hidden; + } +} + +input[type="submit"] { + padding: 2px 6px; + margin: 2px 4px; + display: inline-block; + background: @color-download-button-background; + color: @color-download-button-font; + .rounded-corners; + border: 0; + cursor: pointer; +} + +input[type="checkbox"] { + visibility: hidden; +} + +fieldset { + margin: 8px; + border: 1px solid @color-settings-fieldset; +} + +#categories { + margin: 0 10px; +} + +.checkbox_container { + display: inline-block; + position: relative; + margin: 0 3px; + padding: 0px; + + input { + display: none; + } +} + +.checkbox_container label, .engine_checkbox label { + cursor: pointer; + padding: 4px 10px; + margin: 0; + display: block; + text-transform: capitalize; + .user-select; +} + +.checkbox_container input[type="checkbox"]:checked + label { + background: @color-categories-item-selected; + color: @font-color-categories-item-selected; +} + +.search { + .checkbox_container label { + border-bottom: 4px solid @color-categories-item-border-unselected; + } + + .checkbox_container label:hover { + border-bottom: 4px solid @color-categories-item-border-unselected-hover; + } + + .checkbox_container input[type="checkbox"]:checked + label { + border-bottom: 4px solid @color-categories-item-border-selected; + } +} + +.engine_checkbox { + padding: 4px; +} + +label { + &.allow { + background: @color-settings-label-allowed-background; + padding: 4px 8px; + color: @color-settings-label-allowed-font; + display: none; + } + + &.deny { + background: @color-settings-label-deny-background; + padding: 4px 8px; + color: @color-settings-label-deny-font; + display: inline; + } +} + +.engine_checkbox input[type="checkbox"]:checked + label { + &:nth-child(2) + label { + display: none; + } + + &.allow { + display: inline; + } +} + +a { + text-decoration: none; + color: @color-url-font; + + &:visited { + color: @color-url-visited-font; + } +} + +.result { + margin: 19px 0 18px 0; + padding: 0; + max-width: 55em; + clear: both; +} + +.result_title { + margin-bottom: 0; + + a { + color: @color-result-link-font; + font-weight: normal; + font-size: 1.1em; + + &:hover { + text-decoration: underline; + } + + &:visited { + color: @color-result-link-visited-font; + } + } +} + +.result { + h3 { + font-size: 1em; + word-wrap:break-word; + margin: 5px 0 1px 0; + padding: 0 + } + + .content { + font-size: 0.8em; + margin: 0; + padding: 0; + max-width: 54em; + word-wrap:break-word; + line-height: 1.24; + } + + .url { + font-size: 0.8em; + margin: 3px 0 0 0; + padding: 0; + max-width: 54em; + word-wrap:break-word; + color: @color-result-url-font; + } +} + +.engines { + color: @color-engines-font; +} + +.small_font { + font-size: 0.8em; +} + +.small p { + margin: 2px 0; +} + +.search { + background: @color-result-search-background; + padding: 0; + margin: 0 +} + +.right { + float: right; +} + +.invisible { + display: none; +} + +.left { + float: left; +} + +.image_result { + float: left; + margin: 10px 10px; + position: relative; + height: 160px; + + img { + border: 0; + height: 160px; + } + + p { + margin: 0; + padding: 0; + + span a { + display: none; + color: @color-result-image-span-font; + } + + &:hover span a { + display: block; + position: absolute; + bottom: 0; + right: 0; + padding: 4px; + background-color: @color-result-image-span-background-hover; + font-size: 0.7em; + } + } +} + +.torrent_result { + border-left: 10px solid @color-result-torrent-border; + padding-left: 3px; + + p { + margin: 3px; + font-size: 0.8em; + } +} + +.definition_result { + border-left: 10px solid @color-result-definition-border; + padding-left: 3px; +} + +.percentage { + position: relative; + width: 300px; + + div { + background: @color-percentage-div-background; + } +} + +table { + width: 100%; +} + +td { + padding: 0 4px; +} + +tr { + &:hover { + background: @color-settings-tr-hover; + } +} + +#search_wrapper { + position: relative; + max-width: 600px; + padding: 10px; +} + +.center #search_wrapper { + margin-left: auto; + margin-right: auto; +} + +.q { + background: none repeat scroll 0 0 @color-search-background; + border: 1px solid @color-search-border; + color: @color-search-font; + font-size: 16px; + height: 28px; + margin: 0; + outline: medium none; + padding: 2px; + padding-left: 8px; + padding-right: 0px !important; + width: 100%; + z-index: 2; +} + +#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: 0.8; + width: 24px; + height: 30px; + font-size: 0; +} + +#results { + margin: 10px; + padding: 0; + margin-bottom: 20px; +} + +#sidebar { + position: absolute; + left: 54em; + width: 15em; + margin: 0 2px 5px 5px; + padding: 0 2px 2px 2px; +} + +#suggestions { + span { + display: block; + margin: 0 2px 2px 2px; + padding: 0; + } + + form { + display: block; + } + + input { + padding: 2px 6px; + margin: 2px 4px; + font-size: 0.8em; + display: inline-block; + background: @color-suggestions-button-background; + color: @color-suggestions-button-font; + .rounded-corners; + border: 0; + cursor: pointer; + } +} + +#search_url { + margin-top: 8px; + + input { + border: 1px solid @color-result-search-url-border; + padding: 4px; + color: @color-result-search-url-font; + width: 20em; + display: block; + margin: 4px; + } +} + +#preferences { + top: 10px; + padding: 0; + border: 0; + background: url('/static/img/preference-icon.png') no-repeat; + background-size: 28px 28px; + opacity: 0.8; + width: 28px; + height: 30px; + display: block; + + * { + display: none; + } +} + +#pagination { + clear: both; +} + +#apis { + margin-top: 8px; + clear: both; +} + +@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: 0.8em + } + + form { + display: inline; + } + + input { + padding: 2px 6px; + margin: 2px 4px; + font-size: 0.8em; + display: inline-block; + .rounded-corners; + 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: 0px; + } + + #apis { + display: none; + } + + #categories { + font-size: 80%; + clear: both; + + .checkbox_container { + margin-top: 2px; + margin: 0 2px; + } + } + + .checkbox_container { + display: block; + width: 100%; + float: left; + + label { + border-bottom: 0; + } + } + + .result { + border-top: 1px solid @color-result-top-border; + margin: 7px 0 6px 0; + + img { + max-width: 90%; + width: auto; + height: auto + } + } +} + +.favicon { + float: left; + margin-right: 4px; + margin-top: 2px; +} -- cgit v1.2.3 From a6c9a571aca13bde3d93a54dafca33b29e0afcac Mon Sep 17 00:00:00 2001 From: Thomas Pointhuber Date: Wed, 5 Mar 2014 16:03:13 +0100 Subject: rewrite wrong variable name --- searx/static/css/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'searx/static/css/style.less') diff --git a/searx/static/css/style.less b/searx/static/css/style.less index c34587322..1aa4bdfaa 100644 --- a/searx/static/css/style.less +++ b/searx/static/css/style.less @@ -142,7 +142,7 @@ fieldset { .checkbox_container input[type="checkbox"]:checked + label { background: @color-categories-item-selected; - color: @font-color-categories-item-selected; + color: @color-categories-item-selected-font; } .search { -- cgit v1.2.3 From 3b31c60f07dbc5b6e240295885b672e46b1583bd Mon Sep 17 00:00:00 2001 From: Thomas Pointhuber Date: Thu, 6 Mar 2014 16:25:15 +0100 Subject: fix little style errors --- searx/static/css/style.less | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'searx/static/css/style.less') diff --git a/searx/static/css/style.less b/searx/static/css/style.less index 1aa4bdfaa..556ecd615 100644 --- a/searx/static/css/style.less +++ b/searx/static/css/style.less @@ -32,7 +32,7 @@ body, #container { .row { max-width: 800px; - margin: auto; + margin: 20px auto; text-align: justify; h1 { @@ -530,7 +530,7 @@ tr { .checkbox_container { display: block; width: 100%; - float: left; + //float: left; label { border-bottom: 0; @@ -554,3 +554,17 @@ tr { margin-right: 4px; margin-top: 2px; } + +.preferences_back { + background: none repeat scroll 0 0 @color-settings-return-background; + border: 0 none; + .rounded-corners; + cursor: pointer; + display: inline-block; + margin: 2px 4px; + padding: 4px 6px; + + a { + color: @color-settings-return-font; + } +} -- cgit v1.2.3