diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 0df6fa550..588d67937 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -9,7 +9,7 @@ &:active, &:focus, &:hover { - background-color: var(--background_color); + background-color: var(--color-autocompoleter-background); } &:empty { @@ -45,7 +45,7 @@ &.open { display: block; - background-color: var(--background_color); + background-color: var(--color-autocompleter-background); border: 1px solid var(--color-base); max-height: 500px; overflow-y: auto; diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 4d3d652dc..de24b93e3 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -11,9 +11,8 @@ html { --color-base-light: #ecf0f1; --color-highlight: #094089; --color-black: #000; - - /// From autocomplete.less - --background_color: white; + --color-base-border: #d7d7d7; + --color-base-shadow: #ccc; /// Modal Colors --color-error: #db3434; @@ -26,65 +25,43 @@ html { /// General Colors --color-font: #444; --color-font-light: #888; - --color-red: #25a55b; --color-url-font: #29314d; --color-url-visited-font: #684898; - /// Link Colors - --color-a-font: var(--color-base); - --color-a-font-hover: var(--color-base); - /// Header --color-header-background: #f7f7f7; - --color-header-border: #d7d7d7; /// Footer --color-footer-background: #f7f7f7; - --color-footer-border: #d7d7d7; /// Search-Input --color-search-border: var(--color-base); --color-search-background: #fff; --color-search-font: #222; + --color-search-help: white; /// Autocompleter - --color-autocompleter-choices-background: #fff; - --color-autocompleter-choices-border: var(--color-base); - --color-autocompleter-choices-border-left-right: var(--color-base); - --color-autocompleter-choices-border-bottom: var(--color-base); - --color-autocompleter-choices-font: #444; - - /// Answers - --color-answers-border: var(--color-base-dark); - - // Selected - --color-autocompleter-selected-background: #444; - --color-autocompleter-selected-font: #fff; - --color-autocompleter-selected-queried-font: #9fcfff; + --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; - --color-categories-item-border-unselected-hover: var(--color-base); /// Results - --color-suggestions-button-background: var(--color-base); - --color-suggestions-button-font: #fff; --color-download-button-background: var(--color-base); --color-download-button-font: #fff; - --color-result-search-background: var(--color-base-light); - --color-result-definition-border: gray; --color-result-torrent-border: lightgray; --color-result-top-border: #e8e7e6; + --color-result-vim-selected: #f7f7f7; // Link to result --color-result-link-font: var(--color-base-dark); --color-result-link-visited-font: var(--color-url-visited-font); // Url to result - --color-result-url-font: var(--color-red); + --color-result-url-font: #25a55b; // Publish Date --color-result-publishdate-font: var(--color-font-light); @@ -98,21 +75,40 @@ html { --color-result-search-url-font: #444; /// Settings - --color-settings-fieldset: var(--color-base); - --color-settings-table-striped: #dbdbdb; --color-settings-tr-hover: #ececec; + --color-settings-engine-description-font: darken(#dcdcdc, 30%); // Labels - --color-settings-label-allowed-background: #e74c3c; - --color-settings-label-allowed-font: #fff; - --color-settings-label-deny-background: #2eee71; - --color-settings-label-deny-font: var(--color-font); --color-settings-return-background: var(--color-base); --color-settings-return-font: #fff; /// Other --color-engines-font: var(--color-font-light); - --color-percentage-div-background: #444; + + /// From Toolkit + --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-background: #fff; + --color-toolkit-tabs-label-border: #fff; + --color-toolkit-tabs-section-border: #000; + --color-toolkit-select-border: #d7d7d7; + --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-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-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 @@ -122,6 +118,9 @@ html { @results-gap: 5rem; @search-width: 40rem; +/// From style.less +@stacked-bar-chart: rgb(0, 0, 0); + /// Load fonts from this directory. @icon-font-path: "../../../fonts/"; //** File name for all font files. diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index c7ba9f979..2e2a193e7 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -40,7 +40,7 @@ padding: 5px 0 0 0; float: left; width: 50%; - color: darken(#dcdcdc, 30%); + color: var(--color-settings-engine-description-font); font-size: 90%; } @@ -84,7 +84,7 @@ .preferences_back { background: none repeat scroll 0 0 var(--color-settings-return-background); - color: white; + color: var(--color-settings-return-font); border: 0 none; .rounded-corners; 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 { diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 920d23c23..d46b4c117 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -6,8 +6,6 @@ // stylelint-disable no-descending-specificity -@stacked-bar-chart: rgb(0, 0, 0); - @import "../../__common__/less/new_issue.less"; @import "../../__common__/less/stats.less"; @import "../../__common__/less/result_templates.less"; @@ -79,7 +77,7 @@ footer { width: 100%; text-align: center; background-color: var(--color-footer-background); - border-top: 1px solid var(--color-footer-border); + border-top: 1px solid var(--color-base-border); overflow: hidden; p { @@ -125,7 +123,7 @@ a { } article[data-vim-selected] { - background: #f7f7f7; + background: var(--color-result-vim-selected); } article[data-vim-selected]::before { @@ -452,9 +450,9 @@ article.result-images[data-vim-selected]::before { #answers { grid-area: answers; - border: 1px solid #ddd; + border: 1px solid var(--color-base-border); padding: 0.9em; - box-shadow: 0 0 5px #ccc; + box-shadow: 0 0 5px var(--color-base-shadow); h4 { display: none; @@ -480,10 +478,10 @@ article.result-images[data-vim-selected]::before { .infobox { margin: 10px 0 10px; - border: 1px solid #ddd; + border: 1px solid var(--color-base-border); padding: 0.9em; font-size: 0.9em; - box-shadow: 0 0 5px #ccc; + box-shadow: 0 0 5px var(--color-base-shadow); h2 { margin: 0 0 0.5em 0; @@ -571,11 +569,11 @@ article.result-images[data-vim-selected]::before { } #backToTop { - border: 1px solid #ddd; + border: 1px solid var(--color-base-border); margin: 0; padding: 0; font-size: 1em; - box-shadow: 0 0 5px #ccc; + box-shadow: 0 0 5px var(--color-base-shadow); background: white; position: fixed; bottom: 8rem; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 15f89e1bd..8c0b42e69 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -49,8 +49,8 @@ html.js .show_if_nojs { .badge { display: inline-block; - color: #fff; - background-color: #777; + color: var(--color-toolkit-badge-font); + background-color: var(--color-toolkit-badge-background); text-align: center; white-space: nowrap; vertical-align: baseline; @@ -64,8 +64,8 @@ kbd { padding: 2px 4px; margin: 1px; font-size: 90%; - color: white; - background: black; + color: var(--color-toolkit-kbd-font); + background: var(--color-toolkit-kbd-background); } // table @@ -122,7 +122,7 @@ div.selectable_url { position: relative; padding: 1em 1em 1em 2.7em; margin: 0 0 1em 0; - border: 1px solid black; + border: 1px solid var(--color-toolkit-dialog-border); border-radius: 4px; text-align: left; @@ -191,7 +191,7 @@ div.selectable_url { .dialog-modal { .dialog(); - background: white; + background: var(--color-toolkit-dialog-background); position: fixed; top: 50%; left: 50%; @@ -244,7 +244,7 @@ div.selectable_url { margin: 0 0.7em; letter-spacing: 0.5px; text-transform: uppercase; - border: solid white; + border: solid var(--color-toolkit-tabs-label-border); border-width: 0 0 2px 0; .disable-user-select(); @@ -260,7 +260,7 @@ div.selectable_url { min-width: 100%; padding: 0.7rem 0; box-sizing: border-box; - border-top: 1px solid black; + border-top: 1px solid var(--color-toolkit-tabs-section-border); display: none; } @@ -327,7 +327,7 @@ select { -webkit-appearance: none; -moz-appearance: none; border: none; - border-bottom: 1px solid #d7d7d7; + border-bottom: 1px solid var(--color-toolkit-select-border); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat; background-position-x: 105%; background-size: 2em; @@ -347,7 +347,7 @@ select { display: inline-block; width: 40px; height: 10px; - background: #dcdcdc; + background: var(--color-toolkit-checkbox-onoff-background); margin: 8px 1rem; position: relative; border-radius: 50px; @@ -360,10 +360,10 @@ select { top: -5px; cursor: pointer; border-radius: 50px; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 5px 0 var(--color-toolkit-checkbox-onoff-label-shadow); transition: all 0.4s ease; left: 27px; - background-color: #3498db; + background-color: var(--color-toolkit-checkbox-onoff-label-background); } input[type=checkbox] { @@ -371,7 +371,7 @@ select { &:checked + label { left: -5px; - background: #dcdcdc; + background: var(--color-toolkit-checkbox-onoff-checked-background); } } } @@ -391,9 +391,9 @@ select { position: absolute; top: 0; left: 0; - background: white; + background: var(--color-toolkit-checkbox-label-background); border-radius: 4px; - box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2); &::after { content: ''; @@ -402,7 +402,7 @@ select { position: absolute; top: 4px; left: 4px; - border: 3px solid #333; + border: 3px solid var(--color-toolkit-checkbox-label-border); border-top: none; border-right: none; background: transparent; @@ -415,7 +415,7 @@ select { visibility: hidden; &:checked + label::after { - border-color: #3498db; + border-color: var(--color-toolkit-checkbox-input-border); opacity: 1; } } @@ -453,10 +453,10 @@ select { font-size: 10px; position: relative; text-indent: -9999em; - border-top: 0.5em solid rgba(0, 0, 0, 0.2); - border-right: 0.5em solid rgba(0, 0, 0, 0.2); - border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); - border-left: 0.5em solid rgba(255, 255, 255, 0); + border-top: 0.5em solid var(--color-toolkit-loader-border); + border-right: 0.5em solid var(--color-toolkit-loader-border); + border-bottom: 0.5em solid var(--color-toolkit-loader-border); + border-left: 0.5em solid var(--color-toolkit-loader-borderleft); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); @@ -494,9 +494,9 @@ select { position: absolute; padding: 0.5rem 1rem; margin: 0 0 0 2rem; - border: 1px solid #ddd; - box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); - background: white; + border: 1px solid var(--color-toolkit-engine-tooltip-border); + box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow); + background: var(--color-toolkit-engine-tooltip-background); font-size: 14px; font-weight: normal; z-index: 1000000;