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 --- .../themes/simple/src/less/autocomplete.less | 12 +- .../static/themes/simple/src/less/definitions.less | 240 ++++++++++----------- .../static/themes/simple/src/less/preferences.less | 6 +- searx/static/themes/simple/src/less/search.less | 30 +-- searx/static/themes/simple/src/less/style.less | 60 +++--- searx/static/themes/simple/src/less/toolkit.less | 46 ++-- 6 files changed, 188 insertions(+), 206 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index bfa8e2bc6..0df6fa550 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -1,7 +1,5 @@ /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */ -@background_color: white; - .autocomplete { position: absolute; max-height: 0; @@ -11,7 +9,7 @@ &:active, &:focus, &:hover { - background-color: @background_color; + background-color: var(--background_color); } &:empty { @@ -30,7 +28,7 @@ &.active, &:active, &:focus { - background-color: @color-base; + background-color: var(--color-base); a:active, a:focus, @@ -47,8 +45,8 @@ &.open { display: block; - background-color: @background_color; - border: 1px solid @color-base; + background-color: var(--background_color); + border: 1px solid var(--color-base); max-height: 500px; overflow-y: auto; z-index: 100; @@ -66,7 +64,7 @@ .autocomplete > ul > li { padding: 7px 0 7px 10px; - border-bottom: 1px solid @color-result-top-border; + 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 a3d0de200..4d3d652dc 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -4,140 +4,124 @@ * To change the colors of the site, simple edit this variables */ -/// Basic Colors - -@color-base: #3498DB; -@color-base-dark: #084999; -@color-base-light: #ECF0F1; -@color-highlight: #094089; -@color-black: #000000; - -/// -@color-error: #db3434; -@color-error-background: lighten(@color-error, 40%); - -@color-warning: #dbba34; -@color-warning-background: lighten(@color-warning, 40%); - -@color-success: #42db34; -@color-success-background: lighten(@color-success, 40%); - -/// General - -@color-font: #444; -@color-font-light: #888; - -@color-red: #25a55b; - -@color-url-font: #29314d; -@color-url-visited-font: #684898; +html { + /// Basic Colors + --color-base: #3498db; + --color-base-dark: #084999; + --color-base-light: #ecf0f1; + --color-highlight: #094089; + --color-black: #000; + + /// From autocomplete.less + --background_color: white; + + /// Modal Colors + --color-error: #db3434; + --color-error-background: lighten(#db3434, 40%); + --color-warning: #dbba34; + --color-warning-background: lighten(#dbba34, 40%); + --color-success: #42db34; + --color-success-background: lighten(#42db34, 40%); + + /// 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; + + /// 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; + + /// 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; + + // 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); + + // Publish Date + --color-result-publishdate-font: var(--color-font-light); + + // 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; + + /// Settings + --color-settings-fieldset: var(--color-base); + --color-settings-table-striped: #dbdbdb; + --color-settings-tr-hover: #ececec; + + // 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; +} + +/// General Size @results-width: 45rem; @results-offset: 10rem; @results-tablet-offset: 0.5rem; @results-gap: 5rem; @search-width: 40rem; -// -@color-a-font: @color-base; -@color-a-font-hover: @color-base; - -/// Start-Screen - -/// Header - -@color-header-background: #f7f7f7; -@color-header-border: #d7d7d7; - -/// Footer - -@color-footer-background: #f7f7f7; -@color-footer-border: #d7d7d7; - -/// Search-Input - -@color-search-border: @color-base; -@color-search-background: #FFF; -@color-search-font: #222; - -/// Autocompleter - -@color-autocompleter-choices-background: #FFF; -@color-autocompleter-choices-border: @color-base; -@color-autocompleter-choices-border-left-right: @color-base; -@color-autocompleter-choices-border-bottom: @color-base; - -@color-autocompleter-choices-font: #444; - -/// Answers -@color-answers-border: @color-base-dark; - -// Selected -@color-autocompleter-selected-background: #444; -@color-autocompleter-selected-font: #FFF; -@color-autocompleter-selected-queried-font: #9FCFFF; - -/// Categories - -@color-categories-item-selected: @color-base; -@color-categories-item-selected-font: #FFF; - -@color-categories-item-border-selected: @color-base-dark; -@color-categories-item-border-unselected: #E8E7E6; -@color-categories-item-border-unselected-hover: @color-base; - -/// Results - -@color-suggestions-button-background: @color-base; -@color-suggestions-button-font: #FFF; - -@color-download-button-background: @color-base; -@color-download-button-font: #FFF; - -@color-result-search-background: @color-base-light; - -@color-result-definition-border: gray; -@color-result-torrent-border: lightgray; -@color-result-top-border: #E8E7E6; - -// Link to result -@color-result-link-font: @color-base-dark; -@color-result-link-visited-font: @color-url-visited-font; - -// Url to result -@color-result-url-font: @color-red; - -// Publish Date -@color-result-publishdate-font: @color-font-light; - -// 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; - -/// Settings - -@color-settings-fieldset: @color-base; -@color-settings-table-striped: #dbdbdb; -@color-settings-tr-hover: #ececec; - -// Labels -@color-settings-label-allowed-background: #E74C3C; -@color-settings-label-allowed-font: #FFF; - -@color-settings-label-deny-background: #2ECC71; -@color-settings-label-deny-font: @color-font; - -@color-settings-return-background: @color-base; -@color-settings-return-font: #FFF; - -/// Other - -@color-engines-font: @color-font-light; -@color-percentage-div-background: #444; - /// 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 3bb04ed6f..c7ba9f979 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -73,7 +73,7 @@ & > tbody > tr:nth-child(even) > th, & > tbody > tr:nth-child(even) > td { - background-color: @color-settings-tr-hover; + background-color: var(--color-settings-tr-hover); } } @@ -83,7 +83,7 @@ } .preferences_back { - background: none repeat scroll 0 0 @color-settings-return-background; + background: none repeat scroll 0 0 var(--color-settings-return-background); color: white; border: 0 none; .rounded-corners; @@ -95,7 +95,7 @@ a { display: block; - color: @color-settings-return-font; + color: var(--color-settings-return-font); } a::first-letter { 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); } } diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index d010b9026..920d23c23 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -41,7 +41,7 @@ html { font-size: 0.9em; .text-size-adjust; - color: @color-font; + color: var(--color-font); padding: 0; margin: 0; } @@ -78,8 +78,8 @@ footer { padding: 1rem 0; width: 100%; text-align: center; - background-color: @color-footer-background; - border-top: 1px solid @color-footer-border; + background-color: var(--color-footer-background); + border-top: 1px solid var(--color-footer-border); overflow: hidden; p { @@ -103,8 +103,8 @@ input[type="submit"], #results button[type="submit"] { padding: 0.5rem; display: inline-block; - background: @color-download-button-background; - color: @color-download-button-font; + background: var(--color-download-button-background); + color: var(--color-download-button-font); .rounded-corners; border: 0; @@ -113,13 +113,13 @@ input[type="submit"], a { text-decoration: none; - color: @color-url-font; + color: var(--color-url-font); &:visited { - color: @color-url-visited-font; + color: var(--color-url-visited-font); .highlight { - color: @color-url-visited-font; + color: var(--color-url-visited-font); } } } @@ -134,11 +134,11 @@ article[data-vim-selected]::before { padding: 2px; content: ">"; font-weight: bold; - color: @color-base; + color: var(--color-base); } article.result-images[data-vim-selected] { - background: @color-base; + background: var(--color-base); } article.result-images[data-vim-selected]::before { @@ -158,12 +158,12 @@ article.result-images[data-vim-selected]::before { margin-bottom: 0; a { - color: @color-result-link-font; + color: var(--color-result-link-font); font-weight: normal; font-size: 1.1em; &:visited { - color: @color-result-link-visited-font; + color: var(--color-result-link-visited-font); } &:focus, @@ -193,7 +193,7 @@ article.result-images[data-vim-selected]::before { line-height: 1.24; .highlight { - color: @color-black; + color: var(--color-black); background: inherit; font-weight: bold; } @@ -213,12 +213,12 @@ article.result-images[data-vim-selected]::before { padding: 0; max-width: 54em; word-wrap: break-word; - color: @color-result-url-font; + color: var(--color-result-url-font); } .published_date { font-size: 0.8em; - color: @color-result-publishdate-font; + color: var(--color-result-publishdate-font); } img { @@ -228,7 +228,7 @@ article.result-images[data-vim-selected]::before { width: 20em; min-width: 20em; min-height: 8em; - // background: @color-base-light; + // background: var(--color-base-light); } &.image { @@ -259,7 +259,7 @@ article.result-images[data-vim-selected]::before { .engines { float: right; - color: @color-engines-font; + color: var(--color-engines-font); span { font-size: smaller; @@ -272,7 +272,7 @@ article.result-images[data-vim-selected]::before { } .highlight { - color: @color-highlight; + color: var(--color-highlight); background: inherit; font-weight: bold; } @@ -290,12 +290,12 @@ article.result-images[data-vim-selected]::before { padding: 0; border: none; max-height: 200px; - background: @color-base-dark; + background: var(--color-base-dark); } span a { display: none; - color: @color-result-image-span-font; + color: var(--color-result-image-span-font); } &:hover span a { @@ -305,7 +305,7 @@ article.result-images[data-vim-selected]::before { right: 0; padding: 4px; margin: 0 0 4px 4px; - background-color: @color-result-image-span-background-hover; + background-color: var(--color-result-image-span-background-hover); font-size: 0.7em; } } @@ -342,7 +342,7 @@ article.result-images[data-vim-selected]::before { } .torrent_result { - border-left: 10px solid @color-result-torrent-border; + border-left: 10px solid var(--color-result-torrent-border); padding-left: 3px; p { @@ -351,14 +351,14 @@ article.result-images[data-vim-selected]::before { } a { - color: @color-result-link-font; + color: var(--color-result-link-font); &:hover { text-decoration: underline; } &:visited { - color: @color-result-link-visited-font; + color: var(--color-result-link-visited-font); } } } @@ -410,13 +410,13 @@ article.result-images[data-vim-selected]::before { font-size: 0.9em; display: inline-block; background: transparent; - color: @color-result-search-url-font; + color: var(--color-result-search-url-font); cursor: pointer; } input[type="submit"], .infobox .url a { - color: @color-result-link-font; + color: var(--color-result-link-font); text-decoration: none; font-size: 0.9rem; @@ -447,7 +447,7 @@ article.result-images[data-vim-selected]::before { #search_url .title, #apis .title { margin: 2em 0 0.5em 0; - color: @color-font; + color: var(--color-font); } #answers { @@ -547,13 +547,13 @@ article.result-images[data-vim-selected]::before { border: 0; display: block; font-size: 1.2em; - color: @color-search-font; + color: var(--color-search-font); a:link *, a:hover *, a:visited *, a:active * { - color: @color-search-font; + color: var(--color-search-font); } } @@ -633,7 +633,7 @@ article.result-images[data-vim-selected]::before { } .result { - border-bottom: 1px solid @color-result-top-border; + border-bottom: 1px solid var(--color-result-top-border); margin: 0; padding-top: 8px; padding-bottom: 6px; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index e9e88e7e0..15f89e1bd 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -36,15 +36,15 @@ html.js .show_if_nojs { } .danger { - background-color: @color-error-background; + background-color: var(--color-error-background); } .warning { - background: @color-warning-background; + background: var(--color-warning-background); } .success { - background: @color-success-background; + background: var(--color-success-background); } .badge { @@ -74,7 +74,7 @@ table { &.striped { tr { - border-bottom: 1px solid @color-settings-tr-hover; + border-bottom: 1px solid var(--color-settings-tr-hover); } } } @@ -89,7 +89,7 @@ td { tr { &:hover { - background: @color-settings-tr-hover; + background: var(--color-settings-tr-hover); } } @@ -104,9 +104,9 @@ tr { div.selectable_url { display: block; - border: 1px solid @color-result-search-url-border; + border: 1px solid var(--color-result-search-url-border); padding: 4px; - color: @color-result-search-url-font; + color: var(--color-result-search-url-font); margin: 0.1em; overflow: hidden; height: 1.2em; @@ -173,18 +173,18 @@ div.selectable_url { .dialog-error { .dialog(); - color: @color-error; - background: @color-error-background; - border-color: @color-error; + color: var(--color-error); + background: var(--color-error-background); + border-color: var(--color-error); .ion-error(); } .dialog-warning { .dialog(); - color: @color-warning; - background: @color-warning-background; - border-color: @color-warning; + color: var(--color-warning); + background: var(--color-warning-background); + border-color: var(--color-warning); .ion-warning(); } @@ -253,7 +253,7 @@ div.selectable_url { } & > label:hover { - border-bottom: 2px solid @color-categories-item-border-selected; + border-bottom: 2px solid var(--color-categories-item-border-selected); } & > section { @@ -266,9 +266,9 @@ div.selectable_url { // default selection & > label:last-of-type { - border-bottom: 2px solid @color-categories-item-border-selected; - background: @color-categories-item-selected; - color: @color-categories-item-selected-font; + border-bottom: 2px solid var(--color-categories-item-border-selected); + background: var(--color-categories-item-selected); + color: var(--color-categories-item-selected-font); font-weight: bold; letter-spacing: -0.1px; } @@ -291,14 +291,14 @@ html body .tabs > input:checked { color: inherit; &:hover { - border-bottom: 2px solid @color-categories-item-border-selected; + border-bottom: 2px solid var(--color-categories-item-border-selected); } } + label { - border-bottom: 2px solid @color-categories-item-border-selected; - background: @color-categories-item-selected; - color: @color-categories-item-selected-font; + border-bottom: 2px solid var(--color-categories-item-border-selected); + background: var(--color-categories-item-selected); + color: var(--color-categories-item-selected-font); } + label + section { @@ -311,7 +311,7 @@ select { height: 28px; margin: 0 1em 0 0; padding: 2px 8px 2px 0 !important; - color: @color-search-font; + color: var(--color-search-font); font-size: 12px; z-index: 2; @@ -336,7 +336,7 @@ select { &:hover, &:focus { - border-bottom: 1px solid @color-search-border; + border-bottom: 1px solid var(--color-search-border); } } } -- 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 --- .../themes/simple/src/less/autocomplete.less | 4 +- .../static/themes/simple/src/less/definitions.less | 71 +++++++++++----------- .../static/themes/simple/src/less/preferences.less | 4 +- searx/static/themes/simple/src/less/search.less | 10 +-- searx/static/themes/simple/src/less/style.less | 18 +++--- searx/static/themes/simple/src/less/toolkit.less | 48 +++++++-------- 6 files changed, 74 insertions(+), 81 deletions(-) (limited to 'searx/static/themes/simple/src') 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; -- 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 --- .../themes/simple/src/less/autocomplete.less | 15 ++-- .../static/themes/simple/src/less/definitions.less | 88 ++++++++++------------ searx/static/themes/simple/src/less/mixins.less | 2 +- .../static/themes/simple/src/less/preferences.less | 12 +-- searx/static/themes/simple/src/less/search.less | 39 +++------- searx/static/themes/simple/src/less/style.less | 31 ++++---- searx/static/themes/simple/src/less/toolkit.less | 2 +- 7 files changed, 77 insertions(+), 112 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 588d67937..4dbb68d46 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 de24b93e3..14354feca 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 f0a8d6a83..74831e676 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 2e2a193e7..5b512cc71 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 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; - } } diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index d46b4c117..edc10dbe6 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 8c0b42e69..84b5e6a8c 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; -- 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 --- .../themes/simple/src/less/autocomplete.less | 3 +- .../static/themes/simple/src/less/definitions.less | 104 +++++++++++---------- searx/static/themes/simple/src/less/search.less | 6 +- searx/static/themes/simple/src/less/style.less | 62 +++++------- searx/static/themes/simple/src/less/toolkit.less | 6 +- 5 files changed, 89 insertions(+), 92 deletions(-) (limited to 'searx/static/themes/simple/src') 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-loader-border: rgba(0, 0, 0, 0.2); - --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); + --color-toolkit-checkbox-label-border: #ddd; + --color-toolkit-checkbox-input-border: #3050ff; --color-toolkit-engine-tooltip-border: #ddd; - --color-toolkit-engine-tooltip-shadow: rgba(0, 0, 0, 0.1); + --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); } /// 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, -- cgit v1.2.3 From bc2c8e6ba9e8634a39cbf1e7b58e592fac646852 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Sat, 9 Oct 2021 15:46:31 +0200 Subject: [simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme --- .../static/themes/simple/src/less/definitions.less | 108 ++++++++++++++++++--- 1 file changed, 94 insertions(+), 14 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index c3f28fce9..fc1bcd5fa 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -4,40 +4,34 @@ * To change the colors of the site, simple edit this variables */ +/// Light Theme html { /// Base Colors --color-base-font: #444; --color-base-background: #fff; --color-url-font: #29314d; --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: #3050ff; --color-btn-font: #fff; - /// Search Input Colors --color-search-border: #bbb; --color-search-background: #fff; --color-search-font: #222; --color-search-background-hover: #3050ff; - /// Modal Colors --color-error: #db3434; --color-error-background: lighten(#db3434, 40%); @@ -45,21 +39,17 @@ html { --color-warning-background: lighten(#dbba34, 40%); --color-success: #42db34; --color-success-background: lighten(#42db34, 40%); - /// Categories Colors --color-categories-item-selected-font: #3050ff; --color-categories-item-border-selected: #3050ff; - /// Autocomplete Colors --color-autocomplete-font: #000; --color-autocomplete-border: #bbb; --color-autocomplete-background: #fff; --color-autocomplete-background-hover: #f7f7f7; - /// Answer Colors --color-answer-border: #ddd; --color-answer-font: #000; - /// Results Colors --color-result-shadow: #ccc; --color-result-border: #ddd; @@ -74,16 +64,13 @@ html { --color-result-engines-font: #777; --color-result-search-url-border: #ddd; --color-result-search-url-font: #000; - // Images Colors --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-font: #fff; --color-result-image-background: #000bbb; - /// Settings Colors --color-settings-tr-hover: #f7f7f7; --color-settings-engine-description-font: darken(#dcdcdc, 30%); - /// Toolkit Colors --color-toolkit-badge-font: #fff; --color-toolkit-badge-background: #777; @@ -108,6 +95,99 @@ html { --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); } +/// Dark Theme (autoswitch based on device pref) +@media (prefers-color-scheme: dark) { + html { + /// Base Colors + --color-base-font: #bbb; + --color-base-background: #222; + --color-url-font: #8af; + --color-url-visited-font: #96b; + /// Header Colors + --color-header-background: #181818; + --color-header-border: #333; + /// Footer Colors + --color-footer-background: #181818; + --color-footer-border: #333; + /// Sidebar Colors + --color-sidebar-border: #333; + --color-sidebar-font: #fff; + /// BackToTop Colors + --color-backtotop-border: #333; + --color-backtotop-background: #181818; + --color-backtotop-shadow: #444; + /// Button Colors + --color-btn-background: #58f; + --color-btn-font: #fff; + /// Search Input Colors + --color-search-border: #444; + --color-search-background: #222; + --color-search-font: #fff; + --color-search-background-hover: #58f; + /// Modal Colors + --color-error: #f55b5b; + --color-error-background: darken(#db3434, 40%); + --color-warning: #f1d561; + --color-warning-background: darken(#dbba34, 40%); + --color-success: #79f56e; + --color-success-background: darken(#42db34, 40%); + /// Categories Colors + --color-categories-item-selected-font: #58f; + --color-categories-item-border-selected: #58f; + /// Autocomplete Colors + --color-autocomplete-font: #fff; + --color-autocomplete-border: #444; + --color-autocomplete-background: #222; + --color-autocomplete-background-hover: #181818; + /// Answer Colors + --color-answer-border: #ddd; + --color-answer-font: #fff; + /// Results Colors + --color-result-shadow: #444; + --color-result-border: #333; + --color-result-url-font: #fff; + --color-result-vim-selected: #181818; + --color-result-vim-arrow: #8af; + --color-result-description-highlight-font: #fff; + --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-search-url-border: #333; + --color-result-search-url-font: #fff; + // Images Colors + --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); + --color-result-image-span-font: #fff; + --color-result-image-background: #8af; + /// Settings Colors + --color-settings-tr-hover: #333; + --color-settings-engine-description-font: darken(#dcdcdc, 30%); + /// Toolkit Colors + --color-toolkit-badge-font: #fff; + --color-toolkit-badge-background: #777; + --color-toolkit-kbd-font: #000; + --color-toolkit-kbd-background: #fff; + --color-toolkit-dialog-border: #333; + --color-toolkit-dialog-background: #222; + --color-toolkit-tabs-label-border: #222; + --color-toolkit-tabs-section-border: #333; + --color-toolkit-select-border: #333; + --color-toolkit-checkbox-onoff-background: #ddd; + --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3); + --color-toolkit-checkbox-onoff-label-background: #58f; + --color-toolkit-checkbox-onoff-checked-background: #ddd; + --color-toolkit-checkbox-label-background: #fff; + --color-toolkit-checkbox-label-border: #333; + --color-toolkit-checkbox-input-border: #58f; + --color-toolkit-engine-tooltip-border: #333; + --color-toolkit-engine-tooltip-shadow: #444; + --color-toolkit-engine-tooltip-background: #222; + --color-toolkit-loader-border: rgba(0, 0, 0, 0.2); + --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); + } +} + /// General Size @results-width: 45rem; @results-offset: 10rem; -- cgit v1.2.3