diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 4dbb68d46..0c0ae3f32 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -48,7 +48,8 @@ &.open { display: block; background-color: var(--color-autocomplete-background); - border: 1px solid var(--color-base-border); + color: var(--color-autocomplete-font); + border: 1px solid var(--color-autocomplete-border); max-height: 500px; overflow-y: auto; z-index: 100; diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 14354feca..c3f28fce9 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -6,24 +6,37 @@ html { /// 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; + --color-url-visited-font: #80b; + + /// Header Colors + --color-header-background: #f7f7f7; + --color-header-border: #ddd; + + /// Footer Colors + --color-footer-background: #f7f7f7; + --color-footer-border: #ddd; + + /// Sidebar Colors + --color-sidebar-border: #ddd; + --color-sidebar-font: #000; + + /// BackToTop Colors + --color-backtotop-border: #ddd; + --color-backtotop-background: #fff; + --color-backtotop-shadow: #ccc; /// Button Colors - --color-btn-background: #084999; + --color-btn-background: #3050ff; --color-btn-font: #fff; /// Search Input Colors - --color-search-border: #ddd; + --color-search-border: #bbb; --color-search-background: #fff; --color-search-font: #222; - --color-search-background-hover: #084999; + --color-search-background-hover: #3050ff; /// Modal Colors --color-error: #db3434; @@ -34,70 +47,65 @@ html { --color-success-background: lighten(#42db34, 40%); /// Categories Colors - --color-categories-item-selected-font: #084999; - --color-categories-item-border-selected: #084999; + --color-categories-item-selected-font: #3050ff; + --color-categories-item-border-selected: #3050ff; - /// Autocompleter Colors + /// Autocomplete Colors + --color-autocomplete-font: #000; + --color-autocomplete-border: #bbb; --color-autocomplete-background: #fff; --color-autocomplete-background-hover: #f7f7f7; - /// Results - --color-result-torrent-border: lightgray; - --color-result-top-border: #e8e7e6; - --color-result-vim-selected: #f7f7f7; - --color-result-description-highlight-font: #000; + /// Answer Colors + --color-answer-border: #ddd; + --color-answer-font: #000; - // Link to result - --color-result-link-font: #084999; - --color-result-link-font-highlight: #084999; - --color-result-link-visited-font: var(--color-url-visited-font); - - // Url to result + /// Results Colors + --color-result-shadow: #ccc; + --color-result-border: #ddd; --color-result-url-font: #000; - - // Search-URL - --color-result-search-url-border: #888; - --color-result-search-url-font: #444; - - // Publish Date + --color-result-vim-selected: #f7f7f7; + --color-result-vim-arrow: #000bbb; + --color-result-description-highlight-font: #000; + --color-result-link-font: #000bbb; + --color-result-link-font-highlight: #000bbb; + --color-result-link-visited-font: #80b; --color-result-publishdate-font: #777; + --color-result-engines-font: #777; + --color-result-search-url-border: #ddd; + --color-result-search-url-font: #000; - // Images + // Images Colors --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-font: #fff; - --color-result-image-background: #084999; + --color-result-image-background: #000bbb; - /// Settings - --color-settings-tr-hover: #ececec; + /// Settings Colors + --color-settings-tr-hover: #f7f7f7; --color-settings-engine-description-font: darken(#dcdcdc, 30%); - /// Other - --color-engines-font: #888; - - /// From Toolkit + /// Toolkit Colors --color-toolkit-badge-font: #fff; --color-toolkit-badge-background: #777; --color-toolkit-kbd-font: #fff; --color-toolkit-kbd-background: #000; - --color-toolkit-dialog-border: #000; + --color-toolkit-dialog-border: #ddd; --color-toolkit-dialog-background: #fff; --color-toolkit-tabs-label-border: #fff; - --color-toolkit-tabs-section-border: #000; + --color-toolkit-tabs-section-border: #ddd; --color-toolkit-select-border: #ddd; - --color-toolkit-checkbox-onoff-background: #dcdcdc; + --color-toolkit-checkbox-onoff-background: #ddd; --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3); - --color-toolkit-checkbox-onoff-label-background: #084999; - --color-toolkit-checkbox-onoff-checked-background: #dcdcdc; + --color-toolkit-checkbox-onoff-label-background: #3050ff; + --color-toolkit-checkbox-onoff-checked-background: #ddd; --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: #084999; + --color-toolkit-checkbox-label-border: #ddd; + --color-toolkit-checkbox-input-border: #3050ff; + --color-toolkit-engine-tooltip-border: #ddd; + --color-toolkit-engine-tooltip-shadow: #ccc; + --color-toolkit-engine-tooltip-background: #fff; --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; - --color-toolkit-engine-tooltip-shadow: rgba(0, 0, 0, 0.1); - --color-toolkit-engine-tooltip-background: #fff; } /// General Size 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 { diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index edc10dbe6..47ae21391 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -40,6 +40,7 @@ html { .text-size-adjust; color: var(--color-base-font); + background-color: var(--color-base-background); padding: 0; margin: 0; } @@ -76,8 +77,8 @@ footer { padding: 1rem 0; width: 100%; text-align: center; - background-color: var(--color-header-footer-background); - border-top: 1px solid var(--color-base-border); + background-color: var(--color-footer-background); + border-top: 1px solid var(--color-footer-border); overflow: hidden; p { @@ -132,11 +133,11 @@ article[data-vim-selected]::before { padding: 2px; content: ">"; font-weight: bold; - color: var(--color-base); + color: var(--color-result-vim-arrow); } article.result-images[data-vim-selected] { - background: var(--color-base); + background: var(--color-result-vim-arrow); } article.result-images[data-vim-selected]::before { @@ -256,7 +257,7 @@ article.result-images[data-vim-selected]::before { .engines { float: right; - color: var(--color-engines-font); + color: var(--color-result-engines-font); span { font-size: smaller; @@ -337,28 +338,6 @@ article.result-images[data-vim-selected]::before { display: none !important; } -.torrent_result { - border-left: 10px solid var(--color-result-torrent-border); - padding-left: 3px; - - p { - margin: 3px; - font-size: 0.8em; - } - - a { - color: var(--color-result-link-font); - - &:hover { - text-decoration: underline; - } - - &:visited { - color: var(--color-result-link-visited-font); - } - } -} - #results { margin: 2rem 2rem 0 @results-offset; display: grid; @@ -448,8 +427,10 @@ article.result-images[data-vim-selected]::before { #answers { grid-area: answers; - border: 1px solid var(--color-base-border); + border: 1px solid var(--color-answer-border); padding: 0.9em; + margin-bottom: @results-margin; + color: var(--color-answer-font); .rounded-corners; h4 { @@ -473,10 +454,11 @@ article.result-images[data-vim-selected]::before { #sidebar { grid-area: sidebar; word-wrap: break-word; + color: var(--color-sidebar-font); .infobox { margin: 10px 0 10px; - border: 1px solid var(--color-base-border); + border: 1px solid var(--color-sidebar-border); padding: 0.9em; font-size: 0.9em; .rounded-corners; @@ -567,12 +549,12 @@ article.result-images[data-vim-selected]::before { } #backToTop { - border: 1px solid var(--color-base-border); + border: 1px solid var(--color-backtotop-border); margin: 0; padding: 0; font-size: 1em; - box-shadow: 0 0 5px var(--color-base-shadow); - background: var(--color-base-background); + box-shadow: 0 0 5px var(--color-backtotop-shadow); + background: var(--color-backtotop-background); position: fixed; bottom: 8rem; left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); @@ -611,6 +593,7 @@ article.result-images[data-vim-selected]::before { } #sidebar { + margin-bottom: @results-margin; padding: 0; float: none; border: none; @@ -630,11 +613,6 @@ article.result-images[data-vim-selected]::before { } .result { - border-bottom: 1px solid var(--color-result-top-border); - margin: 0; - padding-top: 8px; - padding-bottom: 6px; - h3 { margin: 0 0 1px 0; } @@ -753,9 +731,14 @@ article.result-images[data-vim-selected]::before { margin: 0 5px 2px 5px; } + .infobox { + box-shadow: 0 0 5px var(--color-result-shadow); + } + #corrections, #answers { margin: 0 5px 1em 5px; + box-shadow: 0 0 5px var(--color-result-shadow); } #results { @@ -769,12 +752,17 @@ article.result-images[data-vim-selected]::before { .result { padding: 8px 10px 6px 10px; + margin: @results-tablet-offset; + border: 1px solid var(--color-result-border); + box-shadow: 0 0 5px var(--color-result-shadow); + .rounded-corners; } .result-images { margin: 0; padding: 0; border: none; + box-shadow: none; } } diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 84b5e6a8c..8c92fe488 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -392,8 +392,7 @@ select { top: 0; left: 0; background: var(--color-toolkit-checkbox-label-background); - border-radius: 4px; - box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2); + .rounded-corners; &::after { content: ''; @@ -495,12 +494,13 @@ select { padding: 0.5rem 1rem; margin: 0 0 0 2rem; border: 1px solid var(--color-toolkit-engine-tooltip-border); - box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow); + box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow); background: var(--color-toolkit-engine-tooltip-background); font-size: 14px; font-weight: normal; z-index: 1000000; text-align: left; + .rounded-corners; } th:hover .engine-tooltip,