diff options
Diffstat (limited to 'searx/static/themes/simple/src')
| -rw-r--r-- | searx/static/themes/simple/src/less/autocomplete.less | 20 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/definitions.less | 315 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/mixins.less | 2 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/preferences.less | 18 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/search.less | 65 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/style.less | 119 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/toolkit.less | 98 |
7 files changed, 327 insertions, 310 deletions
diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index bfa8e2bc6..0c0ae3f32 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -1,17 +1,16 @@ /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */ -@background_color: white; - .autocomplete { position: absolute; max-height: 0; overflow-y: hidden; text-align: left; + .rounded-corners; &:active, &:focus, &:hover { - background-color: @background_color; + background-color: var(--color-autocomplete-background); } &:empty { @@ -25,12 +24,13 @@ > li { cursor: pointer; - padding: 5px 0 5px 10px; + padding: 8px 0 8px 8px; &.active, &:active, - &:focus { - background-color: @color-base; + &:focus, + &:hover { + background-color: var(--color-autocomplete-background-hover); a:active, a:focus, @@ -47,8 +47,9 @@ &.open { display: block; - background-color: @background_color; - border: 1px solid @color-base; + background-color: var(--color-autocomplete-background); + color: var(--color-autocomplete-font); + border: 1px solid var(--color-autocomplete-border); max-height: 500px; overflow-y: auto; z-index: 100; @@ -65,8 +66,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..fc1bcd5fa 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -4,139 +4,200 @@ * 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; +/// 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%); + --color-warning: #dbba34; + --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; + --color-result-url-font: #000; + --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 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; + --color-toolkit-kbd-font: #fff; + --color-toolkit-kbd-background: #000; + --color-toolkit-dialog-border: #ddd; + --color-toolkit-dialog-background: #fff; + --color-toolkit-tabs-label-border: #fff; + --color-toolkit-tabs-section-border: #ddd; + --color-toolkit-select-border: #ddd; + --color-toolkit-checkbox-onoff-background: #ddd; + --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3); + --color-toolkit-checkbox-onoff-label-background: #3050ff; + --color-toolkit-checkbox-onoff-checked-background: #ddd; + --color-toolkit-checkbox-label-background: #fff; + --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); +} + +/// 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; @results-tablet-offset: 0.5rem; @results-gap: 5rem; +@results-margin: 2rem; @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; +/// From style.less +@stacked-bar-chart: rgb(0, 0, 0); /// Load fonts from this directory. @icon-font-path: "../../../fonts/"; 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 3bb04ed6f..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; @@ -40,7 +34,7 @@ padding: 5px 0 0 0; float: left; width: 50%; - color: darken(#dcdcdc, 30%); + color: var(--color-settings-engine-description-font); font-size: 90%; } @@ -73,7 +67,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,19 +77,19 @@ } .preferences_back { - background: none repeat scroll 0 0 @color-settings-return-background; - color: white; + 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; - 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..36f0011e1 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: @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 { - padding: 10px 0; + padding: 20px 0 10px 0; } .search_box { @@ -32,21 +32,20 @@ box-sizing: border-box; width: 1.8em; 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; + 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); 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-background-hover); } &.empty * { @@ -60,23 +59,23 @@ border-collapse: separate; box-sizing: border-box; margin: 0; - padding: 2px; - height: 2.2em; - background: none repeat scroll 0 0 @color-search-background; - border: 1px solid @color-search-border; + padding: 8px; + 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; } #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: @color-search-border; - color: @color-base-light; + background-color: var(--color-search-background-hover); + color: var(--color-search-background); } } @@ -225,37 +224,15 @@ } input[type="checkbox"]:focus + label { - box-shadow: 0 0 8px #3498db; + box-shadow: 0 0 8px var(--color-categories-item-border-selected); } - /* label:hover { - border-bottom: 2px solid @color-categories-item-border-unselected-hover; - } */ - 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; + color: var(--color-categories-item-selected-font); + border-bottom: 2px solid var(--color-categories-item-border-selected); } } #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: white; - } - - &: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 d010b9026..47ae21391 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"; @@ -41,7 +39,8 @@ html { font-size: 0.9em; .text-size-adjust; - color: @color-font; + color: var(--color-base-font); + background-color: var(--color-base-background); padding: 0; margin: 0; } @@ -78,8 +77,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 { @@ -101,10 +100,10 @@ footer { input[type="submit"], #results button[type="submit"] { - padding: 0.5rem; + padding: 0.7rem; display: inline-block; - background: @color-download-button-background; - color: @color-download-button-font; + background: var(--color-btn-background); + color: var(--color-btn-font); .rounded-corners; border: 0; @@ -113,19 +112,19 @@ 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); } } } article[data-vim-selected] { - background: #f7f7f7; + background: var(--color-result-vim-selected); } article[data-vim-selected]::before { @@ -134,11 +133,11 @@ article[data-vim-selected]::before { padding: 2px; content: ">"; font-weight: bold; - color: @color-base; + color: var(--color-result-vim-arrow); } article.result-images[data-vim-selected] { - background: @color-base; + background: var(--color-result-vim-arrow); } article.result-images[data-vim-selected]::before { @@ -147,7 +146,7 @@ article.result-images[data-vim-selected]::before { } .result { - margin: 19px 0 18px 0; + margin: @results-margin 0; padding: 0; h3 { @@ -158,12 +157,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 +192,7 @@ article.result-images[data-vim-selected]::before { line-height: 1.24; .highlight { - color: @color-black; + color: var(--color-result-description-highlight-font); background: inherit; font-weight: bold; } @@ -213,12 +212,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 +227,6 @@ article.result-images[data-vim-selected]::before { width: 20em; min-width: 20em; min-height: 8em; - // background: @color-base-light; } &.image { @@ -259,7 +257,7 @@ article.result-images[data-vim-selected]::before { .engines { float: right; - color: @color-engines-font; + color: var(--color-result-engines-font); span { font-size: smaller; @@ -272,9 +270,8 @@ article.result-images[data-vim-selected]::before { } .highlight { - color: @color-highlight; + color: var(--color-result-link-font-highlight); background: inherit; - font-weight: bold; } .result-images { @@ -290,12 +287,12 @@ article.result-images[data-vim-selected]::before { padding: 0; border: none; max-height: 200px; - background: @color-base-dark; + background: var(--color-result-image-background); } span a { display: none; - color: @color-result-image-span-font; + color: var(--color-result-image-span-font); } &:hover span a { @@ -305,7 +302,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; } } @@ -341,28 +338,6 @@ article.result-images[data-vim-selected]::before { display: none !important; } -.torrent_result { - border-left: 10px solid @color-result-torrent-border; - padding-left: 3px; - - p { - margin: 3px; - font-size: 0.8em; - } - - a { - color: @color-result-link-font; - - &:hover { - text-decoration: underline; - } - - &:visited { - color: @color-result-link-visited-font; - } - } -} - #results { margin: 2rem 2rem 0 @results-offset; display: grid; @@ -410,13 +385,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,14 +422,16 @@ article.result-images[data-vim-selected]::before { #search_url .title, #apis .title { margin: 2em 0 0.5em 0; - color: @color-font; + color: var(--color-base-font); } #answers { grid-area: answers; - border: 1px solid #ddd; + border: 1px solid var(--color-answer-border); padding: 0.9em; - box-shadow: 0 0 5px #ccc; + margin-bottom: @results-margin; + color: var(--color-answer-font); + .rounded-corners; h4 { display: none; @@ -477,13 +454,14 @@ 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 #ddd; + border: 1px solid var(--color-sidebar-border); padding: 0.9em; font-size: 0.9em; - box-shadow: 0 0 5px #ccc; + .rounded-corners; h2 { margin: 0 0 0.5em 0; @@ -547,13 +525,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); } } @@ -571,22 +549,23 @@ article.result-images[data-vim-selected]::before { } #backToTop { - border: 1px solid #ddd; + border: 1px solid var(--color-backtotop-border); margin: 0; padding: 0; font-size: 1em; - box-shadow: 0 0 5px #ccc; - background: white; + 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); transition: opacity 0.5s; opacity: 0; + .rounded-corners; a { display: block; margin: 0; - padding: 0.6em; + padding: 0.7em; } } @@ -614,6 +593,7 @@ article.result-images[data-vim-selected]::before { } #sidebar { + margin-bottom: @results-margin; padding: 0; float: none; border: none; @@ -633,11 +613,6 @@ article.result-images[data-vim-selected]::before { } .result { - border-bottom: 1px solid @color-result-top-border; - margin: 0; - padding-top: 8px; - padding-bottom: 6px; - h3 { margin: 0 0 1px 0; } @@ -756,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 { @@ -772,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 e9e88e7e0..8c92fe488 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -36,21 +36,21 @@ 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 { 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 @@ -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; @@ -122,9 +122,9 @@ div.selectable_url { position: relative; padding: 1em 1em 1em 2.7em; margin: 0 0 1em 0; - border: 1px solid black; - border-radius: 4px; + border: 1px solid var(--color-toolkit-dialog-border); text-align: left; + .rounded-corners; &::before { position: absolute; @@ -173,25 +173,25 @@ 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(); } .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(); @@ -253,22 +253,22 @@ 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 { 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; } // 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; @@ -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; @@ -336,7 +336,7 @@ select { &:hover, &:focus { - border-bottom: 1px solid @color-search-border; + border-bottom: 1px solid var(--color-search-border); } } } @@ -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,8 @@ select { position: absolute; top: 0; left: 0; - background: white; - border-radius: 4px; - box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5); + background: var(--color-toolkit-checkbox-label-background); + .rounded-corners; &::after { content: ''; @@ -402,7 +401,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 +414,7 @@ select { visibility: hidden; &:checked + label::after { - border-color: #3498db; + border-color: var(--color-toolkit-checkbox-input-border); opacity: 1; } } @@ -453,10 +452,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,13 +493,14 @@ 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: 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, |