diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css.map b/searx/static/themes/oscar/css/logicodev-dark.min.css.map index eafe5f348..32293f3a4 100644 Binary files a/searx/static/themes/oscar/css/logicodev-dark.min.css.map and b/searx/static/themes/oscar/css/logicodev-dark.min.css.map differ diff --git a/searx/static/themes/simple/css/searxng-rtl.css b/searx/static/themes/simple/css/searxng-rtl.css index e5e5a6875..6087a6aa5 100644 --- a/searx/static/themes/simple/css/searxng-rtl.css +++ b/searx/static/themes/simple/css/searxng-rtl.css @@ -802,11 +802,10 @@ template { --color-toolkit-dialog-background: #fff; --color-toolkit-tabs-label-border: #fff; --color-toolkit-tabs-section-border: #ddd; + --color-toolkit-select-background: #f7f7f7; --color-toolkit-select-border: #ddd; - --color-toolkit-select-border-hover: #bbb; + --color-toolkit-select-background-hover: #bbb; --color-toolkit-input-text-font: #222; - --color-toolkit-input-text-border: #ddd; - --color-toolkit-input-text-border-hover: #bbb; --color-toolkit-checkbox-onoff-background: #ddd; --color-toolkit-checkbox-onoff-label-background: #3050ff; --color-toolkit-checkbox-onoff-checked-background: #aaa; @@ -863,8 +862,8 @@ template { --color-result-link-font: #8af; --color-result-link-font-highlight: #8af; --color-result-link-visited-font: #96b; - --color-result-publishdate-font: #777; - --color-result-engines-font: #777; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; --color-result-search-url-border: #555; --color-result-search-url-font: #fff; --color-result-detail-font: #fff; @@ -887,11 +886,10 @@ template { --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; --color-toolkit-select-border: #555; - --color-toolkit-select-border-hover: #777; + --color-toolkit-select-background-hover: #333; --color-toolkit-input-text-font: #fff; - --color-toolkit-input-text-border: #555; - --color-toolkit-input-text-border-hover: #777; --color-toolkit-checkbox-onoff-background: #3c3b31; --color-toolkit-checkbox-onoff-label-background: #58f; --color-toolkit-checkbox-onoff-checked-background: #ddd; @@ -948,8 +946,8 @@ template { --color-result-link-font: #8af; --color-result-link-font-highlight: #8af; --color-result-link-visited-font: #96b; - --color-result-publishdate-font: #777; - --color-result-engines-font: #777; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; --color-result-search-url-border: #555; --color-result-search-url-font: #fff; --color-result-detail-font: #fff; @@ -972,11 +970,10 @@ template { --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; --color-toolkit-select-border: #555; - --color-toolkit-select-border-hover: #777; + --color-toolkit-select-background-hover: #333; --color-toolkit-input-text-font: #fff; - --color-toolkit-input-text-border: #555; - --color-toolkit-input-text-border-hover: #777; --color-toolkit-checkbox-onoff-background: #3c3b31; --color-toolkit-checkbox-onoff-label-background: #58f; --color-toolkit-checkbox-onoff-checked-background: #ddd; @@ -1653,11 +1650,11 @@ html body .tabs > input:checked + label + section { } /* -- select -- */ select { - height: 28px; - margin: 0 1em 0 0; - padding: 2px 8px 2px 0 !important; + height: 2.4rem; + margin: 0 1rem 0 0; + padding: 0.2rem !important; color: var(--color-search-font); - font-size: 12px; + font-size: 0.9rem; z-index: 2; } select:hover, @@ -1669,17 +1666,22 @@ select:focus { appearance: none; -webkit-appearance: none; -moz-appearance: none; - border: none; - border-bottom: 1px solid var(--color-toolkit-select-border); + border-width: 0 2rem 0 0; + border-color: transparent; background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; - background-position-x: 105%; - background-size: 2em; + background-position-x: calc(100% + 2rem); + background-size: 2rem; background-origin: content-box; + background-color: var(--color-toolkit-select-background); outline: medium none; + text-overflow: ellipsis; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } select:hover, select:focus { - border-bottom: 1px solid var(--color-toolkit-select-border-hover); + background-color: var(--color-toolkit-select-background-hover); } select option { background-color: var(--color-base-background); @@ -2203,7 +2205,8 @@ article.result-images .detail { font-size: 4em; visibility: hidden; } -.index #search { +.index #search, +.index #search_header { margin: 0 auto; background: inherit; border: inherit; @@ -2267,15 +2270,17 @@ article.result-images .detail { #main_preferences .value input[type="text"] { width: 13.25rem; color: var(--color-toolkit-input-text-font); - border: 1px solid var(--color-toolkit-input-text-border); - background: none repeat scroll 0 0 var(--color-base-background); - padding: 0.4rem; + border: none; + background: none repeat scroll 0 0 var(--color-toolkit-select-background); + padding: 0.2rem 0.4rem; + height: 2rem; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } -#main_preferences .value input[type="text"]:hover { - border: 1px solid var(--color-toolkit-input-text-border-hover); +#main_preferences .value input[type="text"]:hover, +#main_preferences .value input[type="text"]:focus { + background-color: var(--color-toolkit-select-background-hover); } #main_preferences .value select:focus, #main_preferences .value input:focus { @@ -2319,6 +2324,19 @@ article.result-images .detail { #main_preferences table.cookies > tbody > tr:nth-child(even) > td { background-color: var(--color-settings-tr-hover); } +#main_preferences .category { + margin-right: 0.5rem; +} +#main_preferences .category label { + border: 2px solid transparent; + padding: 0.2rem 0.4rem; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +#main_preferences .category input[type="checkbox"]:checked + label { + border: 2px solid var(--color-categories-item-border-selected); +} #main_preferences .name, #main_preferences .shortcut { text-align: left; @@ -2364,6 +2382,10 @@ article.result-images .detail { * SearXNG, A privacy-respecting, hackable metasearch engine */ #search { + padding: 0; + margin: 0; +} +#search_header { padding: 1.5em 2em 0 7rem; margin: 0; background: var(--color-header-background); @@ -2422,12 +2444,10 @@ article.result-images .detail { .search_categories { grid-area: categories; } -#search_wrapper { +.search_box { + margin: 0; padding: 0; grid-area: search; -} -.search_box { - margin: 0 12px 0 0; display: inline-flex; flex-direction: row; white-space: nowrap; @@ -2492,18 +2512,30 @@ article.result-images .detail { background-color: var(--color-search-background-hover); color: var(--color-search-background); } +.no-js #clear_search, .no-js #send_search { width: auto !important; + border-left: 1px solid var(--color-search-border); + padding: 10px; } .search_filters { - display: inline-block; - margin: 0.8rem 0 0 0; + margin: 0.6rem 0 0 10.6rem; +} +.search_filters select { + background-color: inherit; +} +.search_filters select:hover, +.search_filters select:focus { + color: var(--color-base-font); } @media screen and (max-width: 80em) { - #search { + #search_header { padding: 1.5em 0.5rem 0 0.5rem; column-gap: 0.5rem; } + .search_filters { + margin: 0.6rem 0 0 3.5rem; + } #categories { font-size: 90%; clear: both; @@ -2534,10 +2566,10 @@ article.result-images .detail { } } @media screen and (max-width: 50em) { - #search { + #search_header { width: 100%; margin: 0; - padding: 0.1em 0 0 0; + padding: 0.1rem 0 0 0; column-gap: 0; row-gap: 0; grid-template-areas: "logo search" "categories categories"; @@ -2545,14 +2577,8 @@ article.result-images .detail { .search_logo { padding: 0; } - #search_wrapper { - width: 100%; - padding: 0; - } .search_box { width: 99%; - margin: 0.1em; - padding: 0 0.1em 0 0; display: flex; flex-direction: row; } @@ -2565,8 +2591,7 @@ article.result-images .detail { transition: margin-right 0.1s; } .search_filters { - display: block; - margin: 0.8em 0; + margin: 0; } .language, .time_range { @@ -2586,7 +2611,7 @@ article.result-images .detail { } } @media screen and (max-width: 20rem) { - #search { + #search_header { grid-template-areas: "search search" "categories categories"; } #search_logo { @@ -2744,7 +2769,7 @@ article[data-vim-selected].category-social { border-left: 0.2rem solid transparent; } .result h3 { - font-size: 1.1em; + font-size: 1.2rem; word-wrap: break-word; margin: 0.4rem 0 0.4rem 0; padding: 0; @@ -2789,13 +2814,35 @@ article[data-vim-selected].category-social { background: inherit; font-weight: normal; } -.result .url { - font-size: 0.96em; - margin: 0 0 3px 0; - padding: 0; - max-width: 54em; - word-wrap: break-word; +.result .url_wrapper { + display: flex; + font-size: 1rem; color: var(--color-result-url-font); + flex-wrap: nowrap; + overflow: hidden; + flex-direction: row; + margin: 0; + padding: 0; +} +.result .url_wrapper .url_o1 { + white-space: nowrap; + flex-shrink: 1; +} +.result .url_wrapper .url_o1::after { + content: " "; + width: 1ch; + display: inline-block; +} +.result .url_wrapper .url_o2 { + overflow: hidden; + white-space: nowrap; + flex-basis: content; + flex-grow: 0; + flex-shrink: 1; + text-align: right; +} +.result .url_wrapper .url_o2 .url_i2 { + float: right; } .result .published_date { font-size: 0.8em; @@ -2803,16 +2850,14 @@ article[data-vim-selected].category-social { } .result img.thumbnail { float: left; - padding: 0 5px 10px 0; - width: 20em; - min-width: 20em; - min-height: 8em; + padding: 0.6rem 1rem 0 0; + width: 20rem; } .result img.image { float: left; - padding: 0 5px 10px 0; - width: 100px; - max-height: 100px; + padding: 0.6rem 1rem 0 0; + width: 7rem; + max-height: 7rem; object-fit: scale-down; object-position: right top; } @@ -2910,7 +2955,7 @@ article[data-vim-selected].category-social { display: none !important; } #results { - margin: 2rem 2rem 0 10rem; + margin: 1rem 2rem 0 10rem; display: grid; grid-template-columns: 45rem 25rem; grid-template-rows: min-content min-content 1fr min-content; @@ -3174,7 +3219,7 @@ article[data-vim-selected].category-social { margin: 2rem 0 0 0 !important; } #main_results div#results { - margin: 2rem auto 0 auto; + margin: 1rem auto 0 auto; justify-content: center; display: grid; grid-template-columns: 45rem; @@ -3184,7 +3229,7 @@ article[data-vim-selected].category-social { } } #main_results div#results.only_template_images { - margin: 2rem 0.5rem 0 0.5rem; + margin: 1rem 0.5rem 0 0.5rem; display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content 1fr min-content min-content; diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css b/searx/static/themes/simple/css/searxng-rtl.min.css index f7746b5a9..eecac2bac 100644 Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css and b/searx/static/themes/simple/css/searxng-rtl.min.css differ diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css.map b/searx/static/themes/simple/css/searxng-rtl.min.css.map index 048871108..e33316f94 100644 Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css.map and b/searx/static/themes/simple/css/searxng-rtl.min.css.map differ diff --git a/searx/static/themes/simple/css/searxng.css b/searx/static/themes/simple/css/searxng.css index 500b556a0..a6c8db39a 100644 --- a/searx/static/themes/simple/css/searxng.css +++ b/searx/static/themes/simple/css/searxng.css @@ -802,11 +802,10 @@ template { --color-toolkit-dialog-background: #fff; --color-toolkit-tabs-label-border: #fff; --color-toolkit-tabs-section-border: #ddd; + --color-toolkit-select-background: #f7f7f7; --color-toolkit-select-border: #ddd; - --color-toolkit-select-border-hover: #bbb; + --color-toolkit-select-background-hover: #bbb; --color-toolkit-input-text-font: #222; - --color-toolkit-input-text-border: #ddd; - --color-toolkit-input-text-border-hover: #bbb; --color-toolkit-checkbox-onoff-background: #ddd; --color-toolkit-checkbox-onoff-label-background: #3050ff; --color-toolkit-checkbox-onoff-checked-background: #aaa; @@ -863,8 +862,8 @@ template { --color-result-link-font: #8af; --color-result-link-font-highlight: #8af; --color-result-link-visited-font: #96b; - --color-result-publishdate-font: #777; - --color-result-engines-font: #777; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; --color-result-search-url-border: #555; --color-result-search-url-font: #fff; --color-result-detail-font: #fff; @@ -887,11 +886,10 @@ template { --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; --color-toolkit-select-border: #555; - --color-toolkit-select-border-hover: #777; + --color-toolkit-select-background-hover: #333; --color-toolkit-input-text-font: #fff; - --color-toolkit-input-text-border: #555; - --color-toolkit-input-text-border-hover: #777; --color-toolkit-checkbox-onoff-background: #3c3b31; --color-toolkit-checkbox-onoff-label-background: #58f; --color-toolkit-checkbox-onoff-checked-background: #ddd; @@ -948,8 +946,8 @@ template { --color-result-link-font: #8af; --color-result-link-font-highlight: #8af; --color-result-link-visited-font: #96b; - --color-result-publishdate-font: #777; - --color-result-engines-font: #777; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; --color-result-search-url-border: #555; --color-result-search-url-font: #fff; --color-result-detail-font: #fff; @@ -972,11 +970,10 @@ template { --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; --color-toolkit-select-border: #555; - --color-toolkit-select-border-hover: #777; + --color-toolkit-select-background-hover: #333; --color-toolkit-input-text-font: #fff; - --color-toolkit-input-text-border: #555; - --color-toolkit-input-text-border-hover: #777; --color-toolkit-checkbox-onoff-background: #3c3b31; --color-toolkit-checkbox-onoff-label-background: #58f; --color-toolkit-checkbox-onoff-checked-background: #ddd; @@ -1653,11 +1650,11 @@ html body .tabs > input:checked + label + section { } /* -- select -- */ select { - height: 28px; - margin: 0 1em 0 0; - padding: 2px 8px 2px 0 !important; + height: 2.4rem; + margin: 0 1rem 0 0; + padding: 0.2rem !important; color: var(--color-search-font); - font-size: 12px; + font-size: 0.9rem; z-index: 2; } select:hover, @@ -1669,17 +1666,22 @@ select:focus { appearance: none; -webkit-appearance: none; -moz-appearance: none; - border: none; - border-bottom: 1px solid var(--color-toolkit-select-border); + border-width: 0 2rem 0 0; + border-color: transparent; background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; - background-position-x: 105%; - background-size: 2em; + background-position-x: calc(100% + 2rem); + background-size: 2rem; background-origin: content-box; + background-color: var(--color-toolkit-select-background); outline: medium none; + text-overflow: ellipsis; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } select:hover, select:focus { - border-bottom: 1px solid var(--color-toolkit-select-border-hover); + background-color: var(--color-toolkit-select-background-hover); } select option { background-color: var(--color-base-background); @@ -2203,7 +2205,8 @@ article.result-images .detail { font-size: 4em; visibility: hidden; } -.index #search { +.index #search, +.index #search_header { margin: 0 auto; background: inherit; border: inherit; @@ -2267,15 +2270,17 @@ article.result-images .detail { #main_preferences .value input[type="text"] { width: 13.25rem; color: var(--color-toolkit-input-text-font); - border: 1px solid var(--color-toolkit-input-text-border); - background: none repeat scroll 0 0 var(--color-base-background); - padding: 0.4rem; + border: none; + background: none repeat scroll 0 0 var(--color-toolkit-select-background); + padding: 0.2rem 0.4rem; + height: 2rem; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } -#main_preferences .value input[type="text"]:hover { - border: 1px solid var(--color-toolkit-input-text-border-hover); +#main_preferences .value input[type="text"]:hover, +#main_preferences .value input[type="text"]:focus { + background-color: var(--color-toolkit-select-background-hover); } #main_preferences .value select:focus, #main_preferences .value input:focus { @@ -2319,6 +2324,19 @@ article.result-images .detail { #main_preferences table.cookies > tbody > tr:nth-child(even) > td { background-color: var(--color-settings-tr-hover); } +#main_preferences .category { + margin-right: 0.5rem; +} +#main_preferences .category label { + border: 2px solid transparent; + padding: 0.2rem 0.4rem; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +#main_preferences .category input[type="checkbox"]:checked + label { + border: 2px solid var(--color-categories-item-border-selected); +} #main_preferences .name, #main_preferences .shortcut { text-align: left; @@ -2364,6 +2382,10 @@ article.result-images .detail { * SearXNG, A privacy-respecting, hackable metasearch engine */ #search { + padding: 0; + margin: 0; +} +#search_header { padding: 1.5em 2em 0 7rem; margin: 0; background: var(--color-header-background); @@ -2422,12 +2444,10 @@ article.result-images .detail { .search_categories { grid-area: categories; } -#search_wrapper { +.search_box { + margin: 0; padding: 0; grid-area: search; -} -.search_box { - margin: 0 12px 0 0; display: inline-flex; flex-direction: row; white-space: nowrap; @@ -2492,18 +2512,30 @@ article.result-images .detail { background-color: var(--color-search-background-hover); color: var(--color-search-background); } +.no-js #clear_search, .no-js #send_search { width: auto !important; + border-left: 1px solid var(--color-search-border); + padding: 10px; } .search_filters { - display: inline-block; - margin: 0.8rem 0 0 0; + margin: 0.6rem 0 0 10.6rem; +} +.search_filters select { + background-color: inherit; +} +.search_filters select:hover, +.search_filters select:focus { + color: var(--color-base-font); } @media screen and (max-width: 80em) { - #search { + #search_header { padding: 1.5em 0.5rem 0 0.5rem; column-gap: 0.5rem; } + .search_filters { + margin: 0.6rem 0 0 3.5rem; + } #categories { font-size: 90%; clear: both; @@ -2534,10 +2566,10 @@ article.result-images .detail { } } @media screen and (max-width: 50em) { - #search { + #search_header { width: 100%; margin: 0; - padding: 0.1em 0 0 0; + padding: 0.1rem 0 0 0; column-gap: 0; row-gap: 0; grid-template-areas: "logo search" "categories categories"; @@ -2545,14 +2577,8 @@ article.result-images .detail { .search_logo { padding: 0; } - #search_wrapper { - width: 100%; - padding: 0; - } .search_box { width: 99%; - margin: 0.1em; - padding: 0 0.1em 0 0; display: flex; flex-direction: row; } @@ -2565,8 +2591,7 @@ article.result-images .detail { transition: margin-right 0.1s; } .search_filters { - display: block; - margin: 0.8em 0; + margin: 0; } .language, .time_range { @@ -2586,7 +2611,7 @@ article.result-images .detail { } } @media screen and (max-width: 20rem) { - #search { + #search_header { grid-template-areas: "search search" "categories categories"; } #search_logo { @@ -2744,7 +2769,7 @@ article[data-vim-selected].category-social { border-left: 0.2rem solid transparent; } .result h3 { - font-size: 1.1em; + font-size: 1.2rem; word-wrap: break-word; margin: 0.4rem 0 0.4rem 0; padding: 0; @@ -2789,13 +2814,35 @@ article[data-vim-selected].category-social { background: inherit; font-weight: normal; } -.result .url { - font-size: 0.96em; - margin: 0 0 3px 0; - padding: 0; - max-width: 54em; - word-wrap: break-word; +.result .url_wrapper { + display: flex; + font-size: 1rem; color: var(--color-result-url-font); + flex-wrap: nowrap; + overflow: hidden; + flex-direction: row; + margin: 0; + padding: 0; +} +.result .url_wrapper .url_o1 { + white-space: nowrap; + flex-shrink: 1; +} +.result .url_wrapper .url_o1::after { + content: " "; + width: 1ch; + display: inline-block; +} +.result .url_wrapper .url_o2 { + overflow: hidden; + white-space: nowrap; + flex-basis: content; + flex-grow: 0; + flex-shrink: 1; + text-align: right; +} +.result .url_wrapper .url_o2 .url_i2 { + float: right; } .result .published_date { font-size: 0.8em; @@ -2803,16 +2850,14 @@ article[data-vim-selected].category-social { } .result img.thumbnail { float: left; - padding: 0 5px 10px 0; - width: 20em; - min-width: 20em; - min-height: 8em; + padding: 0.6rem 1rem 0 0; + width: 20rem; } .result img.image { float: left; - padding: 0 5px 10px 0; - width: 100px; - max-height: 100px; + padding: 0.6rem 1rem 0 0; + width: 7rem; + max-height: 7rem; object-fit: scale-down; object-position: right top; } @@ -2910,7 +2955,7 @@ article[data-vim-selected].category-social { display: none !important; } #results { - margin: 2rem 2rem 0 10rem; + margin: 1rem 2rem 0 10rem; display: grid; grid-template-columns: 45rem 25rem; grid-template-rows: min-content min-content 1fr min-content; @@ -3174,7 +3219,7 @@ article[data-vim-selected].category-social { margin: 2rem 0 0 0 !important; } #main_results div#results { - margin: 2rem auto 0 auto; + margin: 1rem auto 0 auto; justify-content: center; display: grid; grid-template-columns: 45rem; @@ -3184,7 +3229,7 @@ article[data-vim-selected].category-social { } } #main_results div#results.only_template_images { - margin: 2rem 0.5rem 0 0.5rem; + margin: 1rem 0.5rem 0 0.5rem; display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content 1fr min-content min-content; diff --git a/searx/static/themes/simple/css/searxng.min.css b/searx/static/themes/simple/css/searxng.min.css index dc3243411..6a84f28ef 100644 Binary files a/searx/static/themes/simple/css/searxng.min.css and b/searx/static/themes/simple/css/searxng.min.css differ diff --git a/searx/static/themes/simple/css/searxng.min.css.map b/searx/static/themes/simple/css/searxng.min.css.map index 3abcd3400..4830b7560 100644 Binary files a/searx/static/themes/simple/css/searxng.min.css.map and b/searx/static/themes/simple/css/searxng.min.css.map differ diff --git a/searx/static/themes/simple/img/favicon.png b/searx/static/themes/simple/img/favicon.png index 5d5b761d4..3b961014b 100644 Binary files a/searx/static/themes/simple/img/favicon.png and b/searx/static/themes/simple/img/favicon.png differ diff --git a/searx/static/themes/simple/js/searxng.js b/searx/static/themes/simple/js/searxng.js index a65165bae..830c21d61 100644 --- a/searx/static/themes/simple/js/searxng.js +++ b/searx/static/themes/simple/js/searxng.js @@ -861,6 +861,7 @@ searxng.ready(function() { return false; }); + searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery); searxng.on(d.getElementById('time_range'), 'change', submitIfQuery); searxng.on(d.getElementById('language'), 'change', submitIfQuery); } diff --git a/searx/static/themes/simple/js/searxng.min.js b/searx/static/themes/simple/js/searxng.min.js index a739d75e0..eafe89618 100644 Binary files a/searx/static/themes/simple/js/searxng.min.js and b/searx/static/themes/simple/js/searxng.min.js differ diff --git a/searx/static/themes/simple/js/searxng.min.js.map b/searx/static/themes/simple/js/searxng.min.js.map index 040648c1f..dbf4eea89 100644 Binary files a/searx/static/themes/simple/js/searxng.min.js.map and b/searx/static/themes/simple/js/searxng.min.js.map differ diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js index d3149340a..0244a90ea 100644 --- a/searx/static/themes/simple/src/js/main/search.js +++ b/searx/static/themes/simple/src/js/main/search.js @@ -98,6 +98,7 @@ return false; }); + searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery); searxng.on(d.getElementById('time_range'), 'change', submitIfQuery); searxng.on(d.getElementById('language'), 'change', submitIfQuery); } diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 909fb0877..95370849d 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -89,11 +89,10 @@ --color-toolkit-dialog-background: #fff; --color-toolkit-tabs-label-border: #fff; --color-toolkit-tabs-section-border: #ddd; + --color-toolkit-select-background: #f7f7f7; --color-toolkit-select-border: #ddd; - --color-toolkit-select-border-hover: #bbb; + --color-toolkit-select-background-hover: #bbb; --color-toolkit-input-text-font: #222; - --color-toolkit-input-text-border: #ddd; - --color-toolkit-input-text-border-hover: #bbb; --color-toolkit-checkbox-onoff-background: #ddd; --color-toolkit-checkbox-onoff-label-background: #3050ff; --color-toolkit-checkbox-onoff-checked-background: #aaa; @@ -162,8 +161,8 @@ --color-result-link-font: #8af; --color-result-link-font-highlight: #8af; --color-result-link-visited-font: #96b; - --color-result-publishdate-font: #777; - --color-result-engines-font: #777; + --color-result-publishdate-font: #888; + --color-result-engines-font: #888; --color-result-search-url-border: #555; --color-result-search-url-font: #fff; /// Detail modal : same as the light version @@ -190,11 +189,10 @@ --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; + --color-toolkit-select-background: #3c3b31; --color-toolkit-select-border: #555; - --color-toolkit-select-border-hover: #777; + --color-toolkit-select-background-hover: #333; --color-toolkit-input-text-font: #fff; - --color-toolkit-input-text-border: #555; - --color-toolkit-input-text-border-hover: #777; --color-toolkit-checkbox-onoff-background: #3c3b31; --color-toolkit-checkbox-onoff-label-background: #58f; --color-toolkit-checkbox-onoff-checked-background: #ddd; diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less index b30dad1d2..9a244da00 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/searx/static/themes/simple/src/less/index.less @@ -22,7 +22,8 @@ visibility: hidden; } - #search { + #search, + #search_header { margin: 0 auto; background: inherit; border: inherit; diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index db6831341..c6e691b9d 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -41,13 +41,15 @@ input[type="text"] { width: 13.25rem; color: var(--color-toolkit-input-text-font); - border: 1px solid var(--color-toolkit-input-text-border); - background: none repeat scroll 0 0 var(--color-base-background); - padding: 0.4rem; + border: none; + background: none repeat scroll 0 0 var(--color-toolkit-select-background); + padding: 0.2rem 0.4rem; + height: 2rem; .rounded-corners-tiny; - &:hover { - border: 1px solid var(--color-toolkit-input-text-border-hover); + &:hover, + &:focus { + background-color: var(--color-toolkit-select-background-hover); } } @@ -103,6 +105,20 @@ } } + .category { + margin-right: 0.5rem; + + label { + border: 2px solid transparent; + padding: 0.2rem 0.4rem; + .rounded-corners-tiny; + } + } + + .category input[type="checkbox"]:checked + label { + border: 2px solid var(--color-categories-item-border-selected); + } + .name, .shortcut { text-align: left; diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 99aa02a34..04ee2cea8 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -3,6 +3,11 @@ */ #search { + padding: 0; + margin: 0; +} + +#search_header { padding: 1.5em 2em 0 @results-offset - 3rem; margin: 0; background: var(--color-header-background); @@ -68,13 +73,10 @@ grid-area: categories; } -#search_wrapper { +.search_box { + margin: 0; padding: 0; grid-area: search; -} - -.search_box { - margin: 0 12px 0 0; display: inline-flex; flex-direction: row; white-space: nowrap; @@ -148,21 +150,36 @@ } } +.no-js #clear_search, .no-js #send_search { width: auto !important; + border-left: 1px solid var(--color-search-border); + padding: 10px; } .search_filters { - display: inline-block; - margin: 0.8rem 0 0 0; + margin: 0.6rem 0 0 @results-offset + 0.6rem; + + select { + background-color: inherit; + + &:hover, + &:focus { + color: var(--color-base-font); + } + } } @media screen and (max-width: @tablet) { - #search { + #search_header { padding: 1.5em @results-tablet-offset 0 @results-tablet-offset; column-gap: @results-tablet-offset; } + .search_filters { + margin: 0.6rem 0 0 @results-tablet-offset + 3rem; + } + #categories { font-size: 90%; clear: both; @@ -200,10 +217,10 @@ } @media screen and (max-width: @phone) { - #search { + #search_header { width: 100%; margin: 0; - padding: 0.1em 0 0 0; + padding: 0.1rem 0 0 0; column-gap: 0; row-gap: 0; grid-template-areas: @@ -215,16 +232,9 @@ padding: 0; } - #search_wrapper { - width: 100%; - padding: 0; - } - .search_box { // hack, should be 100% ? width: 99%; - margin: 0.1em; - padding: 0 0.1em 0 0; display: flex; flex-direction: row; } @@ -240,8 +250,7 @@ } .search_filters { - display: block; - margin: 0.8em 0; + margin: 0; } .language, @@ -266,7 +275,7 @@ } @media screen and (max-width: @ultra-small-phone) { - #search { + #search_header { grid-template-areas: "search search" "categories categories"; diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index a26c57db1..a5c050f20 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -168,7 +168,7 @@ article[data-vim-selected].category-social { border-left: 0.2rem solid transparent; h3 { - font-size: 1.1em; + font-size: 1.2rem; word-wrap: break-word; margin: 0.4rem 0 0.4rem 0; padding: 0; @@ -221,13 +221,39 @@ article[data-vim-selected].category-social { } } - .url { - font-size: 0.96em; - margin: 0 0 3px 0; - padding: 0; - max-width: 54em; - word-wrap: break-word; + .url_wrapper { + display: flex; + font-size: 1rem; color: var(--color-result-url-font); + flex-wrap: nowrap; + overflow: hidden; + flex-direction: row; + margin: 0; + padding: 0; + + .url_o1 { + white-space: nowrap; + flex-shrink: 1; + } + + .url_o1::after { + content: " "; + width: 1ch; + display: inline-block; + } + + .url_o2 { + overflow: hidden; + white-space: nowrap; + flex-basis: content; + flex-grow: 0; + flex-shrink: 1; + text-align: right; + + .url_i2 { + float: right; + } + } } .published_date { @@ -238,17 +264,15 @@ article[data-vim-selected].category-social { img { &.thumbnail { float: left; - padding: 0 5px 10px 0; - width: 20em; - min-width: 20em; - min-height: 8em; + padding: 0.6rem 1rem 0 0; + width: 20rem; } &.image { float: left; - padding: 0 5px 10px 0; - width: 100px; - max-height: 100px; + padding: 0.6rem 1rem 0 0; + width: 7rem; + max-height: 7rem; object-fit: scale-down; object-position: right top; } @@ -367,7 +391,7 @@ article[data-vim-selected].category-social { } #results { - margin: 2rem 2rem 0 @results-offset; + margin: 1rem 2rem 0 @results-offset; display: grid; grid-template-columns: @results-width 25rem; grid-template-rows: min-content min-content 1fr min-content; @@ -686,7 +710,7 @@ article[data-vim-selected].category-social { } #main_results div#results { - margin: 2rem auto 0 auto; + margin: 1rem auto 0 auto; justify-content: center; display: grid; grid-template-columns: @results-width; @@ -702,7 +726,7 @@ article[data-vim-selected].category-social { } #main_results div#results.only_template_images { - margin: 2rem @results-tablet-offset 0 @results-tablet-offset; + margin: 1rem @results-tablet-offset 0 @results-tablet-offset; display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content 1fr min-content min-content; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index f8ae3c1bb..da207f1f5 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -296,11 +296,11 @@ html body .tabs > input:checked { /* -- select -- */ select { - height: 28px; - margin: 0 1em 0 0; - padding: 2px 8px 2px 0 !important; + height: 2.4rem; + margin: 0 1rem 0 0; + padding: 0.2rem !important; color: var(--color-search-font); - font-size: 12px; + font-size: 0.9rem; z-index: 2; &:hover, @@ -314,17 +314,20 @@ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; - border: none; - border-bottom: 1px solid var(--color-toolkit-select-border); + border-width: 0 2rem 0 0; + border-color: transparent; background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat; - background-position-x: 105%; - background-size: 2em; + background-position-x: calc(100% + 2rem); + background-size: 2rem; background-origin: content-box; + background-color: var(--color-toolkit-select-background); outline: medium none; + text-overflow: ellipsis; + .rounded-corners-tiny; &:hover, &:focus { - border-bottom: 1px solid var(--color-toolkit-select-border-hover); + background-color: var(--color-toolkit-select-background-hover); } option { diff --git a/searx/templates/simple/categories.html b/searx/templates/simple/categories.html index 29616f127..ae8b2ec09 100644 --- a/searx/templates/simple/categories.html +++ b/searx/templates/simple/categories.html @@ -13,6 +13,7 @@ } -%}