diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 588d6793..4dbb68d4 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -5,11 +5,12 @@ max-height: 0; overflow-y: hidden; text-align: left; + .rounded-corners; &:active, &:focus, &:hover { - background-color: var(--color-autocompoleter-background); + background-color: var(--color-autocomplete-background); } &:empty { @@ -23,12 +24,13 @@ > li { cursor: pointer; - padding: 5px 0 5px 10px; + padding: 8px 0 8px 8px; &.active, &:active, - &:focus { - background-color: var(--color-base); + &:focus, + &:hover { + background-color: var(--color-autocomplete-background-hover); a:active, a:focus, @@ -45,8 +47,8 @@ &.open { display: block; - background-color: var(--color-autocompleter-background); - border: 1px solid var(--color-base); + background-color: var(--color-autocomplete-background); + border: 1px solid var(--color-base-border); max-height: 500px; overflow-y: auto; z-index: 100; @@ -63,7 +65,6 @@ } .autocomplete > ul > li { - padding: 7px 0 7px 10px; border-bottom: 1px solid var(--color-result-top-border); text-align: left; } diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index de24b93e..14354fec 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -5,14 +5,25 @@ */ html { - /// Basic Colors - --color-base: #3498db; - --color-base-dark: #084999; - --color-base-light: #ecf0f1; - --color-highlight: #094089; - --color-black: #000; - --color-base-border: #d7d7d7; + /// Base Colors + --color-base: #084999; + --color-base-font: #444; + --color-base-border: #ddd; --color-base-shadow: #ccc; + --color-base-background: #fff; + --color-url-font: #29314d; + --color-url-visited-font: #684898; + --color-header-footer-background: #f7f7f7; + + /// Button Colors + --color-btn-background: #084999; + --color-btn-font: #fff; + + /// Search Input Colors + --color-search-border: #ddd; + --color-search-background: #fff; + --color-search-font: #222; + --color-search-background-hover: #084999; /// Modal Colors --color-error: #db3434; @@ -22,68 +33,46 @@ html { --color-success: #42db34; --color-success-background: lighten(#42db34, 40%); - /// General Colors - --color-font: #444; - --color-font-light: #888; - --color-url-font: #29314d; - --color-url-visited-font: #684898; - - /// Header - --color-header-background: #f7f7f7; + /// Categories Colors + --color-categories-item-selected-font: #084999; + --color-categories-item-border-selected: #084999; - /// Footer - --color-footer-background: #f7f7f7; - - /// Search-Input - --color-search-border: var(--color-base); - --color-search-background: #fff; - --color-search-font: #222; - --color-search-help: white; - - /// Autocompleter - --color-autocompleter-background: white; - - /// Categories - --color-categories-item-selected: var(--color-base); - --color-categories-item-selected-font: #fff; - --color-categories-item-border-selected: var(--color-base-dark); - --color-categories-item-border-unselected: #e8e7e6; + /// Autocompleter Colors + --color-autocomplete-background: #fff; + --color-autocomplete-background-hover: #f7f7f7; /// Results - --color-download-button-background: var(--color-base); - --color-download-button-font: #fff; --color-result-torrent-border: lightgray; --color-result-top-border: #e8e7e6; --color-result-vim-selected: #f7f7f7; + --color-result-description-highlight-font: #000; // Link to result - --color-result-link-font: var(--color-base-dark); + --color-result-link-font: #084999; + --color-result-link-font-highlight: #084999; --color-result-link-visited-font: var(--color-url-visited-font); // Url to result - --color-result-url-font: #25a55b; + --color-result-url-font: #000; + + // Search-URL + --color-result-search-url-border: #888; + --color-result-search-url-font: #444; // Publish Date - --color-result-publishdate-font: var(--color-font-light); + --color-result-publishdate-font: #777; // Images --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-font: #fff; - - // Search-URL - --color-result-search-url-border: #888; - --color-result-search-url-font: #444; + --color-result-image-background: #084999; /// Settings --color-settings-tr-hover: #ececec; --color-settings-engine-description-font: darken(#dcdcdc, 30%); - // Labels - --color-settings-return-background: var(--color-base); - --color-settings-return-font: #fff; - /// Other - --color-engines-font: var(--color-font-light); + --color-engines-font: #888; /// From Toolkit --color-toolkit-badge-font: #fff; @@ -94,16 +83,16 @@ html { --color-toolkit-dialog-background: #fff; --color-toolkit-tabs-label-border: #fff; --color-toolkit-tabs-section-border: #000; - --color-toolkit-select-border: #d7d7d7; + --color-toolkit-select-border: #ddd; --color-toolkit-checkbox-onoff-background: #dcdcdc; --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3); - --color-toolkit-checkbox-onoff-label-background: #3498db; + --color-toolkit-checkbox-onoff-label-background: #084999; --color-toolkit-checkbox-onoff-checked-background: #dcdcdc; --color-toolkit-checkbox-label-background: #fff; --color-toolkit-checkbox-label-shadow1: #fff; --color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5); --color-toolkit-checkbox-label-border: #333; - --color-toolkit-checkbox-input-border: #3498db; + --color-toolkit-checkbox-input-border: #084999; --color-toolkit-loader-border: rgba(0, 0, 0, 0.2); --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-engine-tooltip-border: #ddd; @@ -116,6 +105,7 @@ html { @results-offset: 10rem; @results-tablet-offset: 0.5rem; @results-gap: 5rem; +@results-margin: 2rem; @search-width: 40rem; /// From style.less diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less index f0a8d6a8..74831e67 100644 --- a/searx/static/themes/simple/src/less/mixins.less +++ b/searx/static/themes/simple/src/less/mixins.less @@ -10,7 +10,7 @@ text-size-adjust: @property; } -.rounded-corners (@radius: 4px) { +.rounded-corners (@radius: 10px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index 2e2a193e..5b512cc7 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -1,9 +1,3 @@ -.column-reliability { - .engine-tooltip { - right: 12rem; - } -} - #tab-contentquery table td, #tab-contentquery table th { text-align: left !important; @@ -83,15 +77,15 @@ } .preferences_back { - background: none repeat scroll 0 0 var(--color-settings-return-background); - color: var(--color-settings-return-font); + background: none repeat scroll 0 0 var(--color-btn-background); + color: var(--color-btn-font); border: 0 none; .rounded-corners; cursor: pointer; display: inline-block; margin: 2px 4px; - padding: 0.5em; + padding: 0.7em; a { display: block; diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index db12289c..ed692b3b 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; - } } diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index d46b4c11..edc10dbe 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -39,7 +39,7 @@ html { font-size: 0.9em; .text-size-adjust; - color: var(--color-font); + color: var(--color-base-font); padding: 0; margin: 0; } @@ -76,7 +76,7 @@ footer { padding: 1rem 0; width: 100%; text-align: center; - background-color: var(--color-footer-background); + background-color: var(--color-header-footer-background); border-top: 1px solid var(--color-base-border); overflow: hidden; @@ -99,10 +99,10 @@ footer { input[type="submit"], #results button[type="submit"] { - padding: 0.5rem; + padding: 0.7rem; display: inline-block; - background: var(--color-download-button-background); - color: var(--color-download-button-font); + background: var(--color-btn-background); + color: var(--color-btn-font); .rounded-corners; border: 0; @@ -145,7 +145,7 @@ article.result-images[data-vim-selected]::before { } .result { - margin: 19px 0 18px 0; + margin: @results-margin 0; padding: 0; h3 { @@ -191,7 +191,7 @@ article.result-images[data-vim-selected]::before { line-height: 1.24; .highlight { - color: var(--color-black); + color: var(--color-result-description-highlight-font); background: inherit; font-weight: bold; } @@ -226,7 +226,6 @@ article.result-images[data-vim-selected]::before { width: 20em; min-width: 20em; min-height: 8em; - // background: var(--color-base-light); } &.image { @@ -270,9 +269,8 @@ article.result-images[data-vim-selected]::before { } .highlight { - color: var(--color-highlight); + color: var(--color-result-link-font-highlight); background: inherit; - font-weight: bold; } .result-images { @@ -288,7 +286,7 @@ article.result-images[data-vim-selected]::before { padding: 0; border: none; max-height: 200px; - background: var(--color-base-dark); + background: var(--color-result-image-background); } span a { @@ -445,14 +443,14 @@ article.result-images[data-vim-selected]::before { #search_url .title, #apis .title { margin: 2em 0 0.5em 0; - color: var(--color-font); + color: var(--color-base-font); } #answers { grid-area: answers; border: 1px solid var(--color-base-border); padding: 0.9em; - box-shadow: 0 0 5px var(--color-base-shadow); + .rounded-corners; h4 { display: none; @@ -481,7 +479,7 @@ article.result-images[data-vim-selected]::before { border: 1px solid var(--color-base-border); padding: 0.9em; font-size: 0.9em; - box-shadow: 0 0 5px var(--color-base-shadow); + .rounded-corners; h2 { margin: 0 0 0.5em 0; @@ -574,17 +572,18 @@ article.result-images[data-vim-selected]::before { padding: 0; font-size: 1em; box-shadow: 0 0 5px var(--color-base-shadow); - background: white; + background: var(--color-base-background); position: fixed; bottom: 8rem; left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); transition: opacity 0.5s; opacity: 0; + .rounded-corners; a { display: block; margin: 0; - padding: 0.6em; + padding: 0.7em; } } diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 8c0b42e6..84b5e6a8 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -123,8 +123,8 @@ div.selectable_url { padding: 1em 1em 1em 2.7em; margin: 0 0 1em 0; border: 1px solid var(--color-toolkit-dialog-border); - border-radius: 4px; text-align: left; + .rounded-corners; &::before { position: absolute;