From 452b26638756e8412566bc320959402f6016565f Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Tue, 28 Sep 2021 22:41:56 +0200 Subject: [theme] convert less vars to css vars in simple theme --- searx/static/themes/simple/src/less/search.less | 30 ++++++++++++------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'searx/static/themes/simple/src/less/search.less') diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index d10efac24..04a1bef30 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -5,8 +5,8 @@ #search { padding: 0 2em 0 @results-offset; margin: 0; - background: @color-header-background; - border-bottom: 1px solid @color-header-border; + background: var(--color-header-background); + border-bottom: 1px solid var(--color-header-border); } #search_wrapper { @@ -34,19 +34,19 @@ margin: 0; padding: 2px; height: 2.2em; - background: none repeat scroll 0 0 @color-search-background; - border-top: 1px solid @color-search-border; - border-bottom: 1px solid @color-search-border; + background: none repeat scroll 0 0 var(--color-search-background); + border-top: 1px solid var(--color-search-border); + border-bottom: 1px solid var(--color-search-border); border-right: none; border-left: none; border-radius: 0; outline: none; - color: @color-search-font; + color: var(--color-search-font); font-size: 16px; z-index: 10000; &:hover { - color: @color-search-border; + color: var(--color-search-border); } &.empty * { @@ -62,11 +62,11 @@ margin: 0; padding: 2px; height: 2.2em; - background: none repeat scroll 0 0 @color-search-background; - border: 1px solid @color-search-border; + background: none repeat scroll 0 0 var(--color-search-background); + border: 1px solid var(--color-search-border); border-radius: 0; outline: none; - color: @color-search-font; + color: var(--color-search-font); font-size: 16px; z-index: 2; } @@ -90,8 +90,8 @@ &:hover { cursor: pointer; - background-color: @color-search-border; - color: @color-base-light; + background-color: var(--color-search-border); + color: var(--color-base-light); } } @@ -233,9 +233,9 @@ } */ input[type="checkbox"]:checked + label { - background: @color-categories-item-selected; - color: @color-categories-item-selected-font; - border-bottom: 2px solid @color-categories-item-border-selected; + background: var(--color-categories-item-selected); + color: var(--color-categories-item-selected-font); + border-bottom: 2px solid var(--color-categories-item-border-selected); } } -- cgit v1.2.3 From 7c2a518d120ec02c4cead76faa1ba5fcec205373 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Thu, 30 Sep 2021 18:12:42 +0200 Subject: [theme] replace all hardcoded colors by css vars and drop ununsed vars --- searx/static/themes/simple/src/less/search.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'searx/static/themes/simple/src/less/search.less') diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 04a1bef30..db12289cb 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -6,7 +6,7 @@ padding: 0 2em 0 @results-offset; margin: 0; background: var(--color-header-background); - border-bottom: 1px solid var(--color-header-border); + border-bottom: 1px solid var(--color-base-border); } #search_wrapper { @@ -225,13 +225,9 @@ } input[type="checkbox"]:focus + label { - box-shadow: 0 0 8px #3498db; + box-shadow: 0 0 8px var(--color-base); } - /* label:hover { - border-bottom: 2px solid @color-categories-item-border-unselected-hover; - } */ - input[type="checkbox"]:checked + label { background: var(--color-categories-item-selected); color: var(--color-categories-item-selected-font); @@ -251,7 +247,7 @@ transition: opacity 1s ease; font-size: 0.8em; text-align: center; - background: white; + background: var(--color-search-help); } &:hover .help { -- cgit v1.2.3 From 740fca00ccabbbccd24e9fd6b17f5a56394cfca1 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Wed, 6 Oct 2021 20:12:51 +0200 Subject: Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect --- searx/static/themes/simple/src/less/search.less | 39 +++++++------------------ 1 file changed, 10 insertions(+), 29 deletions(-) (limited to 'searx/static/themes/simple/src/less/search.less') diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index db12289cb..ed692b3b3 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -5,12 +5,12 @@ #search { padding: 0 2em 0 @results-offset; margin: 0; - background: var(--color-header-background); + background: var(--color-header-footer-background); border-bottom: 1px solid var(--color-base-border); } #search_wrapper { - padding: 10px 0; + padding: 20px 0 10px 0; } .search_box { @@ -32,8 +32,7 @@ box-sizing: border-box; width: 1.8em; margin: 0; - padding: 2px; - height: 2.2em; + padding: 8px 2px; background: none repeat scroll 0 0 var(--color-search-background); border-top: 1px solid var(--color-search-border); border-bottom: 1px solid var(--color-search-border); @@ -46,7 +45,7 @@ z-index: 10000; &:hover { - color: var(--color-search-border); + color: var(--color-search-background-hover); } &.empty * { @@ -60,8 +59,7 @@ border-collapse: separate; box-sizing: border-box; margin: 0; - padding: 2px; - height: 2.2em; + padding: 8px; background: none repeat scroll 0 0 var(--color-search-background); border: 1px solid var(--color-search-border); border-radius: 0; @@ -73,10 +71,11 @@ #q { outline: medium none; - padding-left: 8px; + padding-left: 12px; padding-right: 0 !important; border-right: none; width: @search-width; + border-radius: 10px 0 0 10px; } #q::-ms-clear, @@ -86,12 +85,12 @@ #send_search { border-left: none; - width: 2.2em; + border-radius: 0 10px 10px 0; &:hover { cursor: pointer; - background-color: var(--color-search-border); - color: var(--color-base-light); + background-color: var(--color-search-background-hover); + color: var(--color-search-background); } } @@ -229,7 +228,6 @@ } input[type="checkbox"]:checked + label { - background: var(--color-categories-item-selected); color: var(--color-categories-item-selected-font); border-bottom: 2px solid var(--color-categories-item-border-selected); } @@ -237,21 +235,4 @@ #categories_container { position: relative; - - .help { - position: absolute; - width: 100%; - bottom: -20px; - overflow: hidden; - opacity: 0; - transition: opacity 1s ease; - font-size: 0.8em; - text-align: center; - background: var(--color-search-help); - } - - &:hover .help { - opacity: 0.8; - transition: opacity 1s ease; - } } -- cgit v1.2.3 From 3daa024c04d9e6133d456d9c103b5f67fa15f643 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Fri, 8 Oct 2021 16:06:48 +0200 Subject: [simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors --- searx/static/themes/simple/src/less/search.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'searx/static/themes/simple/src/less/search.less') diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index ed692b3b3..36f0011e1 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -5,8 +5,8 @@ #search { padding: 0 2em 0 @results-offset; margin: 0; - background: var(--color-header-footer-background); - border-bottom: 1px solid var(--color-base-border); + background: var(--color-header-background); + border-bottom: 1px solid var(--color-header-border); } #search_wrapper { @@ -224,7 +224,7 @@ } input[type="checkbox"]:focus + label { - box-shadow: 0 0 8px var(--color-base); + box-shadow: 0 0 8px var(--color-categories-item-border-selected); } input[type="checkbox"]:checked + label { -- cgit v1.2.3