diff options
| author | Markus Heiser <markus.heiser@darmarit.de> | 2025-01-23 11:10:40 +0100 |
|---|---|---|
| committer | Markus Heiser <markus.heiser@darmarIT.de> | 2025-02-28 12:27:41 +0100 |
| commit | a1132deaa4618f228e82252397247a150081a5f3 (patch) | |
| tree | 0445fbe04c8932acdfbe5362db40ea1782f38539 /searx/static/themes/simple/src/less | |
| parent | b6487b70aaa199aba6ae999a9c99b340b5e98884 (diff) | |
[web-client] simple theme: move sources to client/simple/src
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
Diffstat (limited to 'searx/static/themes/simple/src/less')
21 files changed, 0 insertions, 3855 deletions
diff --git a/searx/static/themes/simple/src/less/animations.less b/searx/static/themes/simple/src/less/animations.less deleted file mode 100644 index 75c98308f..000000000 --- a/searx/static/themes/simple/src/less/animations.less +++ /dev/null @@ -1,19 +0,0 @@ -.dialog-modal { - animation-name: dialogmodal; - animation-duration: 0.13s; - - @keyframes dialogmodal { - 0% { - opacity: 0; - } - - 50% { - opacity: 0.5; - transform: translate(-50%, -50%) scale(1.05); - } - } -} - -input.checkbox-onoff[type="checkbox"]::before { - transition: left 0.25s; -} diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less deleted file mode 100644 index 8285ff2c6..000000000 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ /dev/null @@ -1,74 +0,0 @@ -/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */ - -.autocomplete { - position: absolute; - width: @search-width; - max-height: 0; - overflow-y: hidden; - .ltr-text-align-left(); - - .rounded-corners; - - &:active, - &:focus, - &:hover { - background-color: var(--color-autocomplete-background); - } - - &:empty { - display: none; - } - - > ul { - list-style-type: none; - margin: 0; - padding: 0; - - > li { - cursor: pointer; - padding: 0.5rem 1rem; - - &.active, - &:active, - &:focus, - &:hover { - background-color: var(--color-autocomplete-background-hover); - - a:active, - a:focus, - a:hover { - text-decoration: none; - } - } - - &.locked { - cursor: inherit; - } - } - } - - &.open { - display: block; - background-color: var(--color-autocomplete-background); - color: var(--color-autocomplete-font); - max-height: 32rem; - overflow-y: auto; - z-index: 5000; - margin-top: 3.5rem; - border-radius: 0.8rem; - - &:empty { - display: none; - } - } -} - -@media screen and (max-width: @phone) { - .autocomplete { - width: 100%; - - > ul > li { - padding: 1rem; - } - } -} diff --git a/searx/static/themes/simple/src/less/code.less b/searx/static/themes/simple/src/less/code.less deleted file mode 100644 index 6e838bf88..000000000 --- a/searx/static/themes/simple/src/less/code.less +++ /dev/null @@ -1,51 +0,0 @@ -@import "../generated/pygments.less"; - -.codelines { - margin: @results-margin 0 0 0; - padding: @result-padding 0 0 0; -} - -.code-highlight-sxng() { - .code-highlight { - pre { - overflow: auto; - margin: 0; - padding: 0 0 0.75rem 0; - } - - .linenos { - user-select: none; - cursor: default; - - &::selection { - background: transparent; /* WebKit/Blink Browsers */ - } - - &::-moz-selection { - background: transparent; /* Gecko Browsers */ - } - margin-right: 8px; - text-align: right; - } - - span.linenos { - color: var(--color-line-number); - } - } -} - -.code-highlight-sxng(); - -/// Dark Theme (autoswitch based on device pref) -@media (prefers-color-scheme: dark) { - :root.theme-auto { - .code-highlight-dark(); - .code-highlight-sxng(); - } -} - -// Dark Theme by preferences -:root.theme-dark { - .code-highlight-dark(); - .code-highlight-sxng(); -} diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less deleted file mode 100644 index 7501305fc..000000000 --- a/searx/static/themes/simple/src/less/definitions.less +++ /dev/null @@ -1,304 +0,0 @@ -/* - * SearXNG, A privacy-respecting, hackable metasearch engine - * - * To change the colors of the site, simple edit this variables - */ - -/// Light Theme -:root { - /// Base Colors - --color-base-font: #444; - --color-base-font-rgb: 68, 68, 68; - --color-base-background: #fff; - --color-base-background-mobile: #f2f5f8; - --color-url-font: #334999; - --color-url-visited-font: #9822c3; - /// Header Colors - --color-header-background: #fdfbff; - --color-header-border: #ddd; - /// Footer Colors - --color-footer-background: #fdfbff; - --color-footer-border: #ddd; - /// Sidebar Colors - --color-sidebar-border: #ddd; - --color-sidebar-font: #000; - --color-sidebar-background: #fff; - /// BackToTop Colors - --color-backtotop-font: #444; - --color-backtotop-border: #ddd; - --color-backtotop-background: #fff; - /// Button Colors - --color-btn-background: #3050ff; - --color-btn-font: #fff; - --color-show-btn-background: #bbb; - --color-show-btn-font: #000; - /// Search Input Colors - --color-search-border: #bbb; - --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%); - --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-shadow: 0 2px 8px rgb(34 38 46 / 25%); - --color-autocomplete-background: #fff; - --color-autocomplete-background-hover: #e3e3e3; - /// Answer Colors - --color-answer-font: #444; // same as --color-base-font - --color-answer-background: #fff; - /// Results Colors - --color-result-background: #fff; - --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: #9822c3; - --color-result-publishdate-font: #777; - --color-result-engines-font: #545454; - --color-result-search-url-border: #ddd; - --color-result-search-url-font: #000; - // Images Colors - --color-result-image-span-font: #444; - --color-result-image-span-font-selected: #fff; - --color-result-image-background: #fff; - /// Settings Colors - --color-settings-tr-hover: #ebebeb; - --color-settings-engine-description-font: #545454; - --color-settings-table-group-background: #0001; - /// Detail modal - --color-result-detail-font: #fff; - --color-result-detail-label-font: lightgray; - --color-result-detail-background: #242424; - --color-result-detail-hr: #555; - --color-result-detail-link: #8af; - --color-result-detail-loader-border: rgb(255 255 255 / 20%); - --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%); - /// Toolkit Colors - --color-toolkit-badge-font: #fff; - --color-toolkit-badge-background: #545454; - --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-background: #e1e1e1; - --color-toolkit-select-border: #ddd; - --color-toolkit-select-background-hover: #bbb; - --color-toolkit-input-text-font: #222; - --color-toolkit-checkbox-onoff-off-background: #ddd; - --color-toolkit-checkbox-onoff-on-background: #ddd; - --color-toolkit-checkbox-onoff-on-mark-background: #3050ff; - --color-toolkit-checkbox-onoff-on-mark-color: #fff; - --color-toolkit-checkbox-onoff-off-mark-background: #aaa; - --color-toolkit-checkbox-onoff-off-mark-color: #fff; - --color-toolkit-checkbox-label-background: #ddd; - --color-toolkit-checkbox-label-border: #ddd; - --color-toolkit-checkbox-input-border: #3050ff; - --color-toolkit-engine-tooltip-border: #ddd; - --color-toolkit-engine-tooltip-background: #fff; - --color-toolkit-loader-border: rgb(0 0 0 / 20%); - --color-toolkit-loader-borderleft: rgb(255 255 255 / 0%); - --color-doc-code: #003; - --color-doc-code-background: #ddeaff; - /// Other misc colors - --color-bar-chart-primary: #5bc0de; - --color-bar-chart-secondary: #deb15b; - --color-image-resolution-background: rgb(0 0 0 / 50%); - --color-image-resolution-font: #fff; - --color-loading-indicator: rgb(255 255 255 / 20%); - --color-loading-indicator-gap: #fff; - --color-line-number: #64708d; - // Favicons Colors - --color-favicon-background-color: #ddd; - --color-favicon-border-color: #ccc; -} - -.dark-themes() { - /// Base Colors - --color-base-font: #bbb; - --color-base-font-rgb: 187, 187, 187; - --color-base-background: #222428; - --color-base-background-mobile: #222428; - --color-url-font: #8af; - --color-url-visited-font: #c09cd9; - /// Header Colors - --color-header-background: #1e1e22; - --color-header-border: #333; - /// Footer Colors - --color-footer-background: #1e1e22; - --color-footer-border: #333; - /// Sidebar Colors - --color-sidebar-border: #555; - --color-sidebar-font: #fff; - --color-sidebar-background: #292c34; - /// BackToTop Colors - --color-backtotop-font: #bbb; - --color-backtotop-border: #333; - --color-backtotop-background: #2b2e36; - /// Button Colors - --color-btn-background: #58f; - --color-btn-font: #222; - --color-show-btn-background: #555; - --color-show-btn-font: #fff; - /// Search Input Colors - --color-search-border: #555; - --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%); - --color-search-background: #2b2e36; - --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: #555; - --color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%); - --color-autocomplete-background: #2b2e36; - --color-autocomplete-background-hover: #1e1e22; - /// Answer Colors - --color-answer-font: #bbb; // same as --color-base-font - --color-answer-background: #26292f; - /// Results Colors - --color-result-background: #26292f; - --color-result-border: #333; - --color-result-url-font: #fff; - --color-result-vim-selected: #1f1f23cc; - --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: #c09cd9; - --color-result-publishdate-font: #888; - --color-result-engines-font: #a4a4a4; - --color-result-search-url-border: #555; - --color-result-search-url-font: #fff; - /// Detail modal : same as the light version - --color-result-detail-font: #fff; - --color-result-detail-label-font: lightgray; - --color-result-detail-background: #1a1a1c; - --color-result-detail-hr: #555; - --color-result-detail-link: #8af; - --color-result-detail-loader-border: rgb(255 255 255 / 20%); - --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%); - // Images Colors - --color-result-image-span-font: #bbb; - --color-result-image-span-font-selected: #222; - --color-result-image-background: #222; - /// Settings Colors - --color-settings-tr-hover: #2c2c32; - --color-settings-engine-description-font: darken(#dcdcdc, 30%); - --color-settings-table-group-background: #1b1b21; - /// Toolkit Colors - --color-toolkit-badge-font: #fff; - --color-toolkit-badge-background: #555; - --color-toolkit-kbd-font: #000; - --color-toolkit-kbd-background: #fff; - --color-toolkit-dialog-border: #555; - --color-toolkit-dialog-background: #1e1e22; - --color-toolkit-tabs-label-border: #222; - --color-toolkit-tabs-section-border: #555; - --color-toolkit-select-background: #313338; - --color-toolkit-select-border: #555; - --color-toolkit-select-background-hover: #373b49; - --color-toolkit-input-text-font: #fff; - --color-toolkit-checkbox-onoff-off-background: #313338; - --color-toolkit-checkbox-onoff-on-background: #313338; - --color-toolkit-checkbox-onoff-on-mark-background: #58f; - --color-toolkit-checkbox-onoff-on-mark-color: #222; - --color-toolkit-checkbox-onoff-off-mark-background: #ddd; - --color-toolkit-checkbox-onoff-off-mark-color: #222; - --color-toolkit-checkbox-label-background: #222; - --color-toolkit-checkbox-label-border: #333; - --color-toolkit-checkbox-input-border: #58f; - --color-toolkit-engine-tooltip-border: #333; - --color-toolkit-engine-tooltip-background: #222; - --color-toolkit-loader-border: rgb(255 255 255 / 20%); - --color-toolkit-loader-borderleft: rgb(0 0 0 / 0%); - --color-doc-code: #ddd; - --color-doc-code-background: #4d5a6f; - // Favicons Colors - --color-favicon-background-color: #ddd; - --color-favicon-border-color: #ccc; -} - -.black-themes() { - --color-base-background: #000; - --color-base-background-mobile: #000; - --color-header-background: #000; - --color-footer-background: #000; - --color-sidebar-background: #000; -} - -/// Dark Theme (autoswitch based on device pref) -@media (prefers-color-scheme: dark) { - :root.theme-auto { - .dark-themes(); - } -} - -// Dark Theme by preferences -:root.theme-dark { - .dark-themes(); -} - -:root.theme-black { - .dark-themes(); - .black-themes(); -} - -/// General Size -@results-width: 45rem; -@results-sidebar-width: 25rem; -@results-offset: 10rem; -@results-tablet-offset: 0.5rem; -@results-gap: 5rem; -@results-margin: 0.125rem; -@result-padding: 1rem; -@results-image-row-height: 12rem; -@results-image-row-height-phone: 10rem; -@search-width: 44rem; -// heigh of #search, see detail.less -@search-height: 13rem; - -/// Device Size -/// @desktop > @tablet -@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874 -@phone: 50em; -@small-phone: 35em; -@ultra-small-phone: 20rem; - -/// 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. -@icon-font-name: "glyphicons-halflings-regular"; -//** Element ID within SVG icon file. -@icon-font-svg-id: "glyphicons_halflingsregular"; - -// decoration of the select HTML elements -@select-light-svg-path: "../svg/select-light.svg"; -@select-dark-svg-path: "../svg/select-dark.svg"; diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less deleted file mode 100644 index fd5cd8e05..000000000 --- a/searx/static/themes/simple/src/less/detail.less +++ /dev/null @@ -1,253 +0,0 @@ -#main_results #results.image-detail-open.only_template_images { - width: min(98%, 59.25rem) !important; -} - -#main_results #results.only_template_images.image-detail-open #backToTop { - .ltr-left(56.75rem) !important; - .ltr-right(inherit); -} - -article.result-images .detail { - display: none; -} - -#results.image-detail-open article.result-images[data-vim-selected] .detail { - display: flex; - flex-direction: column; - position: fixed; - .ltr-left(60rem); - .ltr-right(0); - top: @search-height; - transition: top 0.064s ease-in 0s; - bottom: 0; - background: var(--color-result-detail-background); - border: 1px solid var(--color-result-detail-background); - z-index: 1000; - padding: 4rem 3rem 3rem 3rem; - - a.result-images-source { - display: block; - flex: 1; - text-align: left; - width: 100%; - border: none; - text-decoration: none; - - img { - padding: 0; - margin: 0; - border: none; - object-fit: contain; - width: inherit; - height: inherit; - max-width: 100%; - min-height: inherit; - max-height: calc(100vh - 25rem - 7rem); - background: inherit; - } - } - - .result-images-labels { - color: var(--color-result-detail-font); - height: 19rem; - - hr { - border-top: 1px solid var(--color-result-detail-hr); - border-bottom: none; - } - - h4 { - height: 2rem; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.9rem; - margin-bottom: 0; - } - - p { - color: var(--color-result-detail-label-font); - font-size: 0.9rem; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - margin: 0.8rem 0; - - span { - display: inline-block; - width: 12rem; - } - } - - h4, - p, - a { - .ltr-text-align-left(); - } - - p.result-content { - height: 2rem; - line-height: unset; - overflow: hidden; - text-overflow: ellipsis; - } - - p.result-url { - white-space: nowrap; - overflow: hidden hidden; - text-overflow: ellipsis; - } - - p.result-content:hover, - p.result-url:hover { - position: relative; - overflow: inherit !important; - background: var(--color-result-detail-background); - text-overflow: inherit !important; - } - - a, - a:visited, - a:hover, - a:active { - color: var(--color-result-detail-link); - } - - a:hover { - text-decoration: underline; - } - } - - a.result-detail-close { - top: 1rem; - .ltr-left(1rem); - padding: 0.4rem; - } - - a.result-detail-previous { - top: 1rem; - .ltr-right(6rem); - // center the icon by moving it slightly on the left - padding-top: 0.4rem; - .ltr-padding-right(0.5rem); - padding-bottom: 0.4rem; - .ltr-padding-left(0.3rem); - } - - a.result-detail-next { - top: 1rem; - .ltr-right(2rem); - padding: 0.4rem; - } - - a.result-detail-close, - a.result-detail-next, - a.result-detail-previous { - border-radius: 50%; - display: block; - width: 1.5rem; - height: 1.5rem; - position: absolute; - filter: opacity(40%); - z-index: 1200; - - span { - display: block; - width: 1.5rem; - height: 1.5rem; - text-align: center; - } - } - - a.result-detail-next, - a.result-detail-previous { - span::before { - // vertical center small icons - vertical-align: sub; - } - } - - a.result-detail-close, - a.result-detail-close:visited, - a.result-detail-close:hover, - a.result-detail-close:active, - a.result-detail-previous, - a.result-detail-previous:visited, - a.result-detail-previous:hover, - a.result-detail-previous:active, - a.result-detail-next, - a.result-detail-next:visited, - a.result-detail-next:hover, - a.result-detail-next:active { - color: var(--color-result-detail-font); - background: var(--color-result-detail-background); - border: 1px solid var(--color-result-detail-font); - } - - a.result-detail-close:focus, - a.result-detail-close:hover, - a.result-detail-previous:focus, - a.result-detail-previous:hover, - a.result-detail-next:focus, - a.result-detail-next:hover { - filter: opacity(80%); - } - - .loader { - position: absolute; - top: 1rem; - .ltr-right(50%); - border-top: 0.5em solid var(--color-result-detail-loader-border); - border-right: 0.5em solid var(--color-result-detail-loader-border); - border-bottom: 0.5em solid var(--color-result-detail-loader-border); - border-left: 0.5em solid var(--color-result-detail-loader-borderleft); - } -} - -#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail { - top: 0; - - a.result-images-source img { - max-height: calc(100vh - 25rem); - } -} - -@media screen and (max-width: @tablet) { - #results.image-detail-open article.result-images[data-vim-selected] .detail { - top: 0; - .ltr-left(0); - - a.result-images-source { - display: flex; - flex-direction: column; - justify-content: center; - - img { - width: 100%; - max-height: calc(100vh - 24rem); - } - } - - a.result-detail-next { - .ltr-right(1rem); - } - } -} - -@media screen and (max-width: @phone) { - #results.image-detail-open article.result-images[data-vim-selected] .detail { - top: 0; - .ltr-left(0); - padding: 1rem; - - a.result-images-source img { - width: 100%; - max-height: calc(100vh - 20rem); - margin: 0; - } - - .result-images-labels p span { - width: inherit; - .ltr-margin-right(1rem); - } - } -} diff --git a/searx/static/themes/simple/src/less/embedded.less b/searx/static/themes/simple/src/less/embedded.less deleted file mode 100644 index bd7b89ea6..000000000 --- a/searx/static/themes/simple/src/less/embedded.less +++ /dev/null @@ -1,33 +0,0 @@ -iframe[src^="https://w.soundcloud.com"] { - height: 120px; -} - -iframe[src^="https://www.deezer.com"] { - // The real size is 92px, but 94px are needed to avoid an inner scrollbar of - // the embedded HTML. - height: 94px; -} - -iframe[src^="https://www.mixcloud.com"] { - // the embedded player from mixcloud has some quirks: initial there is an - // issue with an image URL that is blocked since it is an a Cross-Origin - // request. The alternative text (<img alt='Mixcloud Logo'> then cause an - // scrollbar in the inner of the iframe we can't avoid. Another quirk comes - // when pressing the play button, sometimes the shown player has an height of - // 200px, sometimes 250px. - height: 250px; -} - -iframe[src^="https://bandcamp.com/EmbeddedPlayer"] { - // show playlist - height: 350px; -} - -iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] { - // hide playlist - height: 120px; -} - -iframe[src^="https://genius.com/songs"] { - height: 65px; -} diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less deleted file mode 100644 index 8590d0c3b..000000000 --- a/searx/static/themes/simple/src/less/index.less +++ /dev/null @@ -1,51 +0,0 @@ -#main_index { - margin-top: 26vh; -} - -.index { - text-align: center; - - .title { - background: url('../img/searxng.png') no-repeat; - min-height: 4rem; - margin: 4rem auto; - background-position: center; - background-size: contain; - } - - h1 { - font-size: 4em; - visibility: hidden; - } - - #search, - #search_header { - margin: 0 auto; - background: inherit; - border: inherit; - padding: 0; - display: block; - } - - .search_filters { - display: block; - margin: 1em 0; - } - - .category label { - padding: 6px 10px; - border-bottom: initial !important; - } -} - -@media screen and (max-width: @tablet) { - div.title { - h1 { - font-size: 1em; - } - } - - #main_index { - margin-top: 6em; - } -} diff --git a/searx/static/themes/simple/src/less/info.less b/searx/static/themes/simple/src/less/info.less deleted file mode 100644 index f354135d2..000000000 --- a/searx/static/themes/simple/src/less/info.less +++ /dev/null @@ -1,10 +0,0 @@ -.info-page { - code { - font-family: monospace; - .rounded-corners-tiny; - background-color: var(--color-doc-code-background); - color: var(--color-doc-code); - padding: 0.2rem; - border: 0 none; - } -} diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less deleted file mode 100644 index a4bae7128..000000000 --- a/searx/static/themes/simple/src/less/mixins.less +++ /dev/null @@ -1,40 +0,0 @@ -// SPDX-License-Identifier: AGPL-3.0-or-later - -// Mixins -.text-size-adjust (@property: 100%) { - -webkit-text-size-adjust: @property; - -ms-text-size-adjust: @property; - -moz-text-size-adjust: @property; - text-size-adjust: @property; -} - -.rounded-corners (@radius: 10px) { - border-radius: @radius; -} - -.rounded-right-corners (@radius: 0 10px 10px 0) { - border-radius: @radius; -} - -.rounded-corners-tiny (@radius: 5px) { - border-radius: @radius; -} - -// disable user selection -.disable-user-select () { - -webkit-touch-callout: none; - user-select: none; -} - -.show-content-button() { - padding: 5px 10px; - .rounded-corners-tiny; - background: var(--color-show-btn-background); - color: var(--color-show-btn-font); - cursor: pointer; - - &:hover { - background: var(--color-btn-background); - color: var(--color-btn-font); - } -} diff --git a/searx/static/themes/simple/src/less/new_issue.less b/searx/static/themes/simple/src/less/new_issue.less deleted file mode 100644 index e10a2791c..000000000 --- a/searx/static/themes/simple/src/less/new_issue.less +++ /dev/null @@ -1,37 +0,0 @@ -// SPDX-License-Identifier: AGPL-3.0-or-later -.stats_endpoint { - .github-issue-button { - display: block; - font-size: 16px; - } - - .issue-hide { - display: none; - } - - input[type=checked] { - position: absolute; - } - - label { - margin: 1rem 1rem 1rem 0; - } - - .step_content { - margin: 1rem 1rem 1rem 2rem; - } - - .step1, - .step2 { - visibility: hidden; - } - - .step1_delay { - transition: visibility 0s linear 4s; - } - - #step1:checked ~ .step1, - #step2:checked ~ .step2 { - visibility: visible; - } -} diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less deleted file mode 100644 index 497b2077a..000000000 --- a/searx/static/themes/simple/src/less/preferences.less +++ /dev/null @@ -1,233 +0,0 @@ -table { - border-collapse: collapse; - - th, - td { - text-align: center; - padding: 1rem 0.5rem; - .ltr-text-align-left(); - } - - tr.pref-group th { - font-weight: normal; - .ltr-text-align-left(); - background: var(--color-settings-table-group-background); - } -} - -#main_preferences { - form { - width: 100%; - } - - fieldset { - margin: 8px; - border: none; - } - - legend { - margin: 0; - padding: 5px 0 0 0; - display: block; - .ltr-float-left(); - width: 300px; - } - - input[type="text"] { - width: 13.25rem; - color: var(--color-toolkit-input-text-font); - border: none; - background: none repeat scroll 0 0 var(--color-toolkit-select-background); - padding: 0.2rem 0.4rem; - height: 2rem; - .rounded-corners-tiny; - - &:hover, - &:focus { - background-color: var(--color-toolkit-select-background-hover); - } - } - - div.pref-group { - width: 100%; - font-weight: normal; - padding: 1rem 0.5rem; - .ltr-text-align-left(); - background: var(--color-settings-table-group-background); - } - - .value { - margin: 0; - padding: 0; - .ltr-float-left(); - width: 15em; - - select, - input[type="text"] { - font-size: inherit !important; - margin-top: 0; - .ltr-margin-right(1rem); - margin-bottom: 0; - .ltr-margin-left(0); - } - - select { - width: 14rem; - } - - select:focus, - input:focus { - outline: none; - box-shadow: 0 0 1px 1px var(--color-btn-background); - } - } - - .description { - margin: 0; - padding: 5px 0 0 0; - .ltr-float-right(); - width: 50%; - color: var(--color-settings-engine-description-font); - font-size: 90%; - } - - .bang { - .ltr-text-align-left(); - .rounded-corners-tiny; - background-color: var(--color-doc-code-background); - color: var(--color-doc-code); - padding: 0.2rem; - border: 0 none; - } - - .category { - .ltr-margin-right(0.5rem); - - label { - border: 2px solid transparent; - padding: 0.2rem 0.4rem; - .rounded-corners-tiny; - } - } - - .category input[type="checkbox"]:checked + label { - border: 2px solid var(--color-categories-item-border-selected); - } - - table.table_engines { - th.name { - /* stylelint-disable */ - label { - cursor: pointer; - } - /* stylelint-enable */ - - .engine-tooltip { - margin-top: 1.8rem; - .ltr-left(calc((100% - 85em) / 2 + 10em)); - max-width: 40rem; - - .engine-description { - margin-top: 0.5rem; - } - - .bang { - margin: 0.3rem; - } - } - } - - .checkbox-col, - .name, - .shortcut { - .ltr-text-align-left(); - } - } - - table.cookies { - width: 100%; - direction: ltr; - - th, - td { - text-align: left; - font-family: monospace; - font-size: 1rem; - padding: 0.5em; - vertical-align: top; - } - - td:first-child { - word-break: keep-all; - width: 14rem; - padding-right: 1rem; - } - - td:last-child { - word-break: break-all; - } - - & > tbody > tr:nth-child(even) > th, - & > tbody > tr:nth-child(even) > td { - background-color: var(--color-settings-tr-hover); - } - } - - .preferences_back { - 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.7em; - - a { - color: var(--color-settings-return-font); - } - - a::first-letter { - text-transform: uppercase; - } - } - - #toggle-all-engines-container { - width: max-content; - margin-left: auto; - } - - div.selectable_url { - pre { - width: 100%; - } - } - - #copy-hash-container { - display: flex; - align-items: center; - gap: 0.5rem; - - div.selectable_url { - pre { - width: auto; - flex-grow: 1; - } - } - } - - #pref-hash-input { - width: 100%; - } -} - -@media screen and (max-width: @tablet) { - .preferences_back { - clear: both; - } - - .engine-tooltip { - .ltr-left(10em) !important; - } -} diff --git a/searx/static/themes/simple/src/less/result_templates.less b/searx/static/themes/simple/src/less/result_templates.less deleted file mode 100644 index afabdf322..000000000 --- a/searx/static/themes/simple/src/less/result_templates.less +++ /dev/null @@ -1,7 +0,0 @@ -// SPDX-License-Identifier: AGPL-3.0-or-later - -.osm-map-box { - height: 300px; - width: 100%; - margin: 10px 0; -} diff --git a/searx/static/themes/simple/src/less/rss.less b/searx/static/themes/simple/src/less/rss.less deleted file mode 100644 index 0bc6622e3..000000000 --- a/searx/static/themes/simple/src/less/rss.less +++ /dev/null @@ -1,45 +0,0 @@ -@import (inline) "../../node_modules/normalize.css/normalize.css"; -@import "definitions.less"; - -.text-size-adjust (@property: 100%) { - -webkit-text-size-adjust: @property; - -ms-text-size-adjust: @property; - -moz-text-size-adjust: @property; - text-size-adjust: @property; -} - -// Reset padding and margin -html, -body, -main { - padding: 0; - margin: 0; -} - -html { - font-family: sans-serif; - font-size: 0.9em; - .text-size-adjust; - - color: var(--color-base-font); - background-color: var(--color-base-background); - - scroll-behavior: smooth; -} - -body { - margin-inline: 1rem; -} - -a { - text-decoration: none; - color: var(--color-url-font); - - &:visited { - color: var(--color-url-visited-font); - - .highlight { - color: var(--color-url-visited-font); - } - } -} diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less deleted file mode 100644 index a46e4bf06..000000000 --- a/searx/static/themes/simple/src/less/search.less +++ /dev/null @@ -1,393 +0,0 @@ -/* -* SearXNG, A privacy-respecting, hackable metasearch engine -*/ - -#search { - padding: 0; - margin: 0; -} - -#search_header { - padding-top: 1.5em; - .ltr-padding-right(2em); - .ltr-padding-left(@results-offset - 3rem); - margin: 0; - background: var(--color-header-background); - border-bottom: 1px solid var(--color-header-border); - display: grid; - gap: 1rem 1.2rem; - grid-template-columns: 3rem 1fr; - grid-template-areas: - "logo search" - "spacer categories"; -} - -.category_checkbox, -.category_button { - display: inline-block; - position: relative; - .ltr-margin-right(1rem); - padding: 0; -} - -.category_checkbox { - input { - display: none; - } - - label { - svg { - padding-right: 0.2rem; - } - - cursor: pointer; - padding: 0.2rem 0; - display: inline-flex; - text-transform: capitalize; - font-size: 0.9em; - border-bottom: 2px solid transparent; - .disable-user-select; - - div.category_name { - margin: auto 0; - } - } - - input[type="checkbox"]:checked + label { - color: var(--color-categories-item-selected-font); - border-bottom: 2px solid var(--color-categories-item-border-selected); - } -} - -button.category_button { - background-color: inherit; - color: var(--color-base-font); - cursor: pointer; - padding: 0.2rem 0; - display: inline-flex; - align-items: center; - text-transform: capitalize; - font-size: 0.9em; - border: none; - border-bottom: 2px solid transparent; - - svg { - padding-right: 0.2rem; - } - - &.selected, - &:active { - color: var(--color-categories-item-selected-font); - border-bottom: 2px solid var(--color-categories-item-border-selected); - } -} - -// only used when JavaScript is disabled -.no-js #categories_container:has(button.category_button:focus-within) button.category_button { - &.selected { - color: var(--color-base-font); - border-bottom: none; - } - - &:focus-within { - color: var(--color-categories-item-selected-font); - border-bottom: 2px solid var(--color-categories-item-border-selected); - } -} - -#search_logo { - padding: 0.5rem 10px 0 10px; - grid-area: logo; - display: flex; - align-items: center; - justify-content: center; - - svg { - flex: 1; - width: 30px; - height: 30px; - margin: 0.5rem 0 auto 0; - } -} - -.search_categories { - grid-area: categories; - - .help { - display: none; - } - - &:hover .help { - display: block; - position: absolute; - background: var(--color-base-background); - padding: 1rem 0.6rem 0.6rem 0; - z-index: 1000; - width: 100%; - left: -0.1rem; - } -} - -#search_view { - padding: 0.5rem 0.3rem 0 0.5rem; - grid-area: search; - - body.results_endpoint & { - padding: 0.5rem 2.8rem 0 0; - } -} - -.search_box { - border-radius: 0.8rem; - width: @search-width; - display: inline-flex; - flex-direction: row; - white-space: nowrap; - box-shadow: var(--color-search-shadow); -} - -#clear_search { - display: block; - border-collapse: separate; - box-sizing: border-box; - width: 1.8rem; - margin: 0; - padding: 0.8rem 0.2rem; - background: none repeat scroll 0 0 var(--color-search-background); - border: none; - outline: none; - color: var(--color-search-font); - font-size: 1.1rem; - z-index: 1000; - - &:hover { - color: var(--color-search-background-hover); - } - - &.empty * { - display: none; - } -} - -html.no-js #clear_search.hide_if_nojs { - display: none; -} - -#q, -#send_search { - display: block; - margin: 0; - padding: 0.8rem; - background: none repeat scroll 0 0 var(--color-search-background); - border: none; - outline: none; - color: var(--color-search-font); - font-size: 1.1rem; - z-index: 100; -} - -#q { - width: 100%; - .ltr-padding-left(1rem); - .ltr-padding-right(0) !important; - .ltr-rounded-left-corners(0.8rem); -} - -#q::-ms-clear, -#q::-webkit-search-cancel-button { - display: none; -} - -#send_search { - .ltr-rounded-right-corners(0.8rem); - - &:hover { - cursor: pointer; - background-color: var(--color-search-background-hover); - color: var(--color-search-background); - } -} - -.no-js #clear_search, -.no-js #send_search { - width: auto !important; - .ltr-border-left(1px solid var(--color-search-border)); -} - -.search_filters { - margin-top: 0.6rem; - .ltr-margin-right(0); - margin-bottom: 0; - .ltr-margin-left(@results-offset + 0.6rem); - display: flex; - overflow-x: auto; - overscroll-behavior-inline: contain; - - select { - background-color: inherit; - - &:hover, - &:focus { - color: var(--color-base-font); - } - } -} - -@media screen and (max-width: @tablet) { - #search_header { - padding: 1.5em @results-tablet-offset 0 @results-tablet-offset; - column-gap: @results-tablet-offset; - } - - .search_filters { - margin-top: 0.6rem; - .ltr-margin-right(0); - margin-bottom: 0; - .ltr-margin-left(@results-tablet-offset + 3rem); - } - - #categories { - font-size: 90%; - clear: both; - } -} - -@media screen and (max-width: @tablet) and (hover: none) { - #main_index, - #main_results { - #categories_container { - width: max-content; - - .category_checkbox { - display: inline-block; - width: auto; - } - } - - #categories { - width: 100%; - .ltr-text-align-left(); - overflow: scroll hidden; - -webkit-overflow-scrolling: touch; - } - } -} - -@media screen and (max-width: @phone) { - #search_header { - width: 100%; - margin: 0; - padding: 0.1rem 0 0 0; - gap: 0 0; - grid-template-areas: - "logo search" - "categories categories"; - } - - .search_logo { - padding: 0; - } - - .search_box { - width: 98%; - display: flex; - } - - #q { - width: 100%; - flex: 1; - } - - .search_filters { - margin: 0 10px; - padding: 0.5rem 0; - } - - .category { - display: inline-block; - width: auto; - margin: 0; - - svg { - display: none; - } - } - - .category_checkbox { - label { - padding: 1rem !important; - margin: 0 !important; - } - } - - .category_button { - padding: 1rem !important; - margin: 0 !important; - } - - #search_view:focus-within { - display: block; - background-color: var(--color-search-background); - position: absolute; - top: 0; - height: 100%; - width: 100%; - z-index: 2000; - - .search_box { - border-bottom: 1px solid var(--color-search-border); - width: 100%; - border-radius: 0; - box-shadow: none; - - #send_search { - .ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile. - } - - * { - border: none; - border-radius: 0; - box-shadow: none; - } - } - } - - #main_results #q:placeholder-shown ~ #send_search { - .ltr-margin-right(2.6rem); - transition: margin 0.1s; - } -} - -@media screen and (max-width: @ultra-small-phone) { - #search_header { - grid-template-areas: - "search search" - "categories categories"; - } - - #search_logo { - display: none; - } -} - -#categories { - .disable-user-select; - - &::-webkit-scrollbar { - width: 0; - height: 0; - } -} - -#categories_container { - position: relative; -} - -.favicon img { - height: 1.5rem; - width: 1.5rem; - border-radius: 10%; - background-color: var(--color-favicon-background-color); - border: 1px solid var(--color-favicon-border-color); - display: flex; -} diff --git a/searx/static/themes/simple/src/less/stats.less b/searx/static/themes/simple/src/less/stats.less deleted file mode 100644 index 1e823f7c9..000000000 --- a/searx/static/themes/simple/src/less/stats.less +++ /dev/null @@ -1,106 +0,0 @@ -// SPDX-License-Identifier: AGPL-3.0-or-later - -.engine-stats { - border-spacing: 0; - border-collapse: collapse; - - tr td, - tr th { - border-bottom: 1px solid var(--color-result-border); - padding: 0.25rem; - } - - table.engine-tooltip { - border-spacing: 0; - border-collapse: collapse; - - td, - th { - border: none; - } - } - - .engine-name { - width: 20rem; - } - - .engine-score { - width: 7rem; - text-align: right; - } - - .engine-reliability { - text-align: right; - } -} - -table.engine-error th.engine-error-type, -table.engine-error td.engine-error-type, -failed-test { - width: 10rem; -} - -.engine-errors { - margin-top: 3rem; - - table.engine-error { - max-width: 1280px; - margin: 1rem 0 3rem 0; - border: 1px solid var(--color-result-border); - .ltr-text-align-left(); - - tr th, - tr td { - padding: 0.5rem; - } - - & span.log_parameters { - border-right: 1px solid solid var(--color-result-border); - padding: 0 1rem 0 0; - margin: 0 0 0 0.5rem; - } - } -} - -.bar-chart-value { - width: 3em; - display: inline-block; - text-align: right; - padding-right: 0.5rem; -} - -.bar-chart-graph { - width: calc(100% - 5rem); - display: inline-block; -} - -.bar-chart-bar { - border: 3px solid var(--color-bar-chart-primary); - margin: 1px 0; -} - -.bar-chart-serie1 { - border: 3px solid var(--color-bar-chart-primary); - margin: 1px 0; - float: left; -} - -.bar-chart-serie2 { - border: 3px solid var(--color-bar-chart-secondary); - margin: 1px 0; - float: left; -} - -.bar0 { - width: 0; - border: 0; -} - -.generate-bar(100); - -.generate-bar(@n, @i: 1) when (@i =< @n) { - .bar@{i} { - width: (@i * 100% / @n); - } - .generate-bar(@n, (@i + 1)); -} diff --git a/searx/static/themes/simple/src/less/style-center.less b/searx/static/themes/simple/src/less/style-center.less deleted file mode 100644 index 3618bed86..000000000 --- a/searx/static/themes/simple/src/less/style-center.less +++ /dev/null @@ -1,118 +0,0 @@ -/* ---center-page-width overrides the less variable @results-width when the results are centered -see the CSS rules for #results in style.less ( grid-template-columns and gap). - -In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3). - -All rules starts with ".center-alignment-yes #main_results" to be enabled only -on the /search URL and when the "center alignment" preference is enabled. -*/ - -@media screen and (min-width: @phone) { - .center-alignment-yes #main_results { - --center-page-width: 48rem; - } -} - -@media screen and (width >= 62rem) { - .center-alignment-yes #main_results { - --center-page-width: 60rem; - } -} - -@media screen and (min-width: @tablet) { - .center-alignment-yes #main_results { - --center-page-width: 73rem; - } -} - -@media screen and (min-width: @phone) and (max-width: @tablet) { - // any change must be reset in @media screen and (min-width: @tablet) { ... } - .center-alignment-yes #main_results { - #results { - grid-template-columns: 60% calc(40% - @results-gap); - margin-left: 0; - margin-right: 0; - } - - #urls { - .ltr-margin-left(3rem); - } - - #sidebar { - .ltr-margin-right(1rem); - } - - #backToTop { - .ltr-left(calc(60% + 1rem)); - } - } -} - -@media screen and (min-width: @tablet) { - .center-alignment-yes #main_results { - display: flex; - flex-direction: column; - align-items: center; - - #search { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - #search_header { - grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width); - grid-template-areas: "na logo search" "na spacer categories"; - column-gap: 1.2rem; // from search.less - width: 100%; - padding-left: 0; - padding-right: 0; - } - - .search_filters { - .ltr-margin-left(0.5rem); - width: var(--center-page-width); - } - - #results { - // from style.less (when screen width = @tablet, reset layout from tablet) - .ltr-margin-right(2rem); - .ltr-margin-left(@results-offset); - // - - &.only_template_images, - &.image-detail-open { - // * grid-template-columns and .ltr-margin-left are set in style.less - // * With .image-detail-open.only_template_images, the width is set in detail.less - // * #results is going to be centered because of the #main_results rules, - // align-self aligns the results on the left or right according to the language. - align-self: flex-start; - } - - &:not(.only_template_images, .image-detail-open) { - // the gap is set in style.less - .ltr-margin-left(1.5rem); - grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width; - - #backToTop { - .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2)); - } - } - - .result .content { - max-width: inherit; - } - } - - // from style.less (when screen width = @tablet, reset layout from tablet) - #urls { - .ltr-margin-left(0); - } - - #sidebar { - .ltr-margin-right(0); - } - } -} diff --git a/searx/static/themes/simple/src/less/style-ltr.less b/searx/static/themes/simple/src/less/style-ltr.less deleted file mode 100644 index 6f7218b02..000000000 --- a/searx/static/themes/simple/src/less/style-ltr.less +++ /dev/null @@ -1,85 +0,0 @@ -.ltr-left(@offset) { - left: @offset; -} - -.ltr-right(@offset) { - right: @offset; -} - -.ltr-margin-right(@offset) { - margin-right: @offset; -} - -.ltr-margin-left(@offset) { - margin-left: @offset; -} - -.ltr-border-right(@offset) { - border-right: @offset; -} - -.ltr-border-left(@offset) { - border-left: @offset; -} - -.ltr-padding-right(@offset) { - padding-right: @offset; -} - -.ltr-padding-left(@offset) { - padding-left: @offset; -} - -.ltr-float-left() { - float: left; -} - -.ltr-float-right() { - float: right; -} - -.ltr-text-align-right() { - text-align: right; -} - -.ltr-rounded-left-corners(@radius) { - border-radius: @radius 0 0 @radius; -} - -.ltr-rounded-top-left-corners(@radius) { - border-radius: @radius 0 0 0; -} - -.ltr-rounded-bottom-left-corners(@radius) { - border-radius: 0 0 0 @radius; -} - -.ltr-rounded-right-corners(@radius) { - border-radius: 0 @radius @radius 0; -} - -.ltr-rounded-top-right-corners(@radius) { - border-radius: 0 @radius 0 0; -} - -.ltr-rounded-bottom-right-corners(@radius) { - border-radius: 0 0 @radius 0; -} - -.ltr-text-align-left() { - text-align: left; -} - -.ltr-border-left-width(@offset) { - border-left-width: @offset; -} - -.ltr-border-right-width(@offset) { - border-right-width: @offset; -} - -.ltr-transform() { - transform: scale(1, 1); -} - -@import "style.less"; diff --git a/searx/static/themes/simple/src/less/style-rtl.less b/searx/static/themes/simple/src/less/style-rtl.less deleted file mode 100644 index 8e2634d34..000000000 --- a/searx/static/themes/simple/src/less/style-rtl.less +++ /dev/null @@ -1,159 +0,0 @@ -.ltr-left(@offset) { - right: @offset; -} - -.ltr-right(@offset) { - left: @offset; -} - -.ltr-margin-right(@offset) { - margin-left: @offset; -} - -.ltr-margin-left(@offset) { - margin-right: @offset; -} - -.ltr-border-right(@offset) { - border-left: @offset; -} - -.ltr-border-left(@offset) { - border-right: @offset; -} - -.ltr-padding-right(@offset) { - padding-left: @offset; -} - -.ltr-padding-left(@offset) { - padding-right: @offset; -} - -.ltr-float-left() { - float: right; -} - -.ltr-float-right() { - float: left; -} - -.ltr-text-align-right() { - text-align: left; -} - -.ltr-rounded-left-corners(@radius) { - border-radius: 0 @radius @radius 0; -} - -.ltr-rounded-top-left-corners(@radius) { - border-radius: 0 @radius 0 0; -} - -.ltr-rounded-bottom-left-corners(@radius) { - border-radius: 0 0 @radius 0; -} - -.ltr-rounded-right-corners(@radius) { - border-radius: @radius 0 0 @radius; -} - -.ltr-rounded-top-right-corners(@radius) { - border-radius: @radius 0 0 0; -} - -.ltr-rounded-bottom-right-corners(@radius) { - border-radius: 0 0 0 @radius; -} - -.ltr-text-align-left() { - text-align: right; -} - -.ltr-border-left-width(@offset) { - border-right-width: @offset; -} - -.ltr-border-right-width(@offset) { - border-left-width: @offset; -} - -.ltr-transform() { - transform: scale(-1, 1); -} - -@import "style.less"; - -#q, -#sidebar .infobox dt bdi { - direction: rtl; -} - -// URL are displayed LTR but align on the right -#urls { - direction: initial; - text-align: right; - - .result .url_header { - direction: rtl; - } - - .result .url_wrapper { - justify-content: end; - } -} - -// Image flexbox -#main_results div#results.only_template_images #urls { - direction: rtl; -} - -// Image detail -#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p { - direction: rtl; - - &.result-url { - // Display URL using the LTR direction - direction: ltr; - - span { - // And put the label on the right - direction: rtl; - float: right; - } - } -} - -// select HTML element -@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) { - select { - border-width: 0 0 0 2rem; - background-position-x: -2rem; - } -} - -// vim hotkey helps is not translated -#vim-hotkeys-help table { - direction: ltr; - text-align: left; -} - -// Logo on the right -#main_preferences h1, -#main_stats h1 { - background-position-x: 100%; -} - -// patch of stats.less -.bar-chart-serie1, -.bar-chart-serie2 { - float: right; -} - -.engine-stats .engine-name, -.engine-stats .engine-score, -.engine-stats .result-count, -.engine-stats .response-time, -.engine-stats .engine-reliability { - text-align: right; -} diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less deleted file mode 100644 index 7dca47402..000000000 --- a/searx/static/themes/simple/src/less/style.less +++ /dev/null @@ -1,1162 +0,0 @@ -/* -* SearXNG, A privacy-respecting, hackable metasearch engine -* -* To convert "style.less" to "style.css" run: $make styles -*/ - -// stylelint-disable no-descending-specificity - -@import (inline) "../../node_modules/normalize.css/normalize.css"; -@import "definitions.less"; -@import "mixins.less"; -@import "code.less"; -@import "toolkit.less"; -@import "autocomplete.less"; -@import "detail.less"; -@import "animations.less"; -@import "embedded.less"; -@import "info.less"; -@import "new_issue.less"; -@import "stats.less"; -@import "result_templates.less"; - -// for index.html template -@import "index.less"; - -// for preferences.html template -@import "preferences.less"; - -// Search-Field -@import "search.less"; - -// to center the results -@import "style-center.less"; - -// ion-icon -.ion-icon { - display: inline-block; - vertical-align: bottom; - line-height: 1; - text-decoration: inherit; - .ltr-transform(); -} - -.ion-icon-small { - width: 1rem; - height: 1rem; - .ion-icon; -} - -.ion-icon-big { - width: 1.5rem; - height: 1.5rem; - .ion-icon; -} - -// Main LESS-Code -html { - font-family: sans-serif; - font-size: 0.9em; - .text-size-adjust; - - color: var(--color-base-font); - background-color: var(--color-base-background); - padding: 0; - margin: 0; - - scroll-behavior: smooth; -} - -body, -main { - padding: 0; - margin: 0; -} - -body { - display: flex; - flex-direction: column; - height: 100vh; - margin: 0; -} - -main { - width: 100%; - margin-bottom: 2rem; - flex: 1; -} - -.page_with_header { - margin: 2em auto; - width: 85em; -} - -footer { - clear: both; - min-height: 4rem; - padding: 1rem 0; - width: 100%; - text-align: center; - background-color: var(--color-footer-background); - border-top: 1px solid var(--color-footer-border); - overflow: hidden; - - p { - font-size: 0.9em; - } -} - -.page_with_header .logo { - height: 40px; -} - -input[type="submit"], -#results button[type="submit"], -.button { - padding: 0.7rem; - display: inline-block; - background: var(--color-btn-background); - color: var(--color-btn-font); - .rounded-corners; - - border: 0; - cursor: pointer; -} - -a { - text-decoration: none; - color: var(--color-url-font); - - &:visited { - color: var(--color-url-visited-font); - - .highlight { - color: var(--color-url-visited-font); - } - } -} - -article[data-vim-selected] { - background: var(--color-result-vim-selected); - .ltr-border-left(0.2rem solid var(--color-result-vim-arrow)); - .ltr-rounded-right-corners(10px); -} - -article.result-images[data-vim-selected] { - background: var(--color-result-vim-arrow); - border: none; - .rounded-corners; - - .image_thumbnail { - filter: opacity(60%); - } - - span.title, - span.source { - color: var(--color-result-image-span-font-selected); - } -} - -article[data-vim-selected].category-videos, -article[data-vim-selected].category-news, -article[data-vim-selected].category-map, -article[data-vim-selected].category-music, -article[data-vim-selected].category-files, -article[data-vim-selected].category-social { - border: 1px solid var(--color-result-vim-arrow); - .rounded-corners; -} - -.result { - margin: @results-margin 0; - padding: @result-padding; - box-sizing: border-box; - width: 100%; - .ltr-border-left(0.2rem solid transparent); - - h3 { - font-size: 1.2rem; - word-wrap: break-word; - margin: 0.4rem 0 0.4rem 0; - padding: 0; - - a { - color: var(--color-result-link-font); - font-weight: normal; - font-size: 1.1em; - - &:visited { - color: var(--color-result-link-visited-font); - } - - &:focus, - &:hover { - text-decoration: underline; - border: none; - outline: none; - } - } - } - - .cache_link, - .proxyfied_link { - font-size: smaller !important; - margin-left: 0.5rem; - } - - .content, - .stat { - font-size: 0.9em; - margin: 0; - padding: 0; - max-width: 54em; - word-wrap: break-word; - line-height: 1.24; - - .highlight { - color: var(--color-result-description-highlight-font); - background: inherit; - font-weight: bold; - } - } - - .altlink a { - font-size: 0.9em; - margin: 0 10px 0 0; - .show-content-button; - } - - .codelines { - .highlight { - color: inherit; - background: inherit; - font-weight: normal; - } - } - - .url_header { - display: flex; - gap: 0.5rem; - } - - .url_wrapper { - display: flex; - align-items: center; - font-size: 1rem; - color: var(--color-result-url-font); - flex-flow: row nowrap; - overflow: hidden; - margin: 0; - padding: 0; - - .url_o1 { - white-space: nowrap; - flex-shrink: 1; - padding-bottom: 1px; - - .url_i1 { - unicode-bidi: plaintext; - } - } - - .url_o1::after { - content: " "; - width: 1ch; - display: inline-block; - } - - .url_o2 { - overflow: hidden; - white-space: nowrap; - flex: 0 1 content; - text-align: right; - padding-bottom: 1px; - - .url_i2 { - float: right; - } - } - } - - .published_date, - .result_length, - .result_views, - .result_author, - .result_shipping, - .result_source_country { - font-size: 0.8em; - color: var(--color-result-publishdate-font); - } - - .result_price { - font-size: 1.2em; - color: var(--color-result-description-highlight-font); - } - - img.thumbnail { - .ltr-float-left(); - padding-top: 0.6rem; - .ltr-padding-right(1rem); - width: 7rem; - height: unset; // remove height value that was needed for lazy loading - } - - .break { - clear: both; - } -} - -.result-paper, -.result-packages { - .attributes { - display: table; - border-spacing: 0.125rem; - - div { - display: table-row; - - span { - font-size: 0.9rem; - margin-top: 0.25rem; - display: table-cell; - - time { - font-size: 0.9rem; - } - } - - span:first-child { - color: var(--color-base-font); - min-width: 10rem; - } - - span:nth-child(2) { - color: var(--color-result-publishdate-font); - } - } - } - - .content { - margin-top: 0.25rem; - } - - .comments { - font-size: 0.9rem; - margin: 0.25rem 0 0 0; - padding: 0; - word-wrap: break-word; - line-height: 1.24; - font-style: italic; - } -} - -.result-packages { - .attributes { - margin-top: 0.3rem; - } -} - -.template_group_images { - display: flex; - flex-wrap: wrap; -} - -.template_group_images::after { - flex-grow: 10; - content: ""; -} - -.category-videos, -.category-news, -.category-map, -.category-music, -.category-files, -.category-social { - border: 1px solid var(--color-result-border); - margin: 0 @results-tablet-offset 1rem @results-tablet-offset !important; - .rounded-corners; -} - -.category-social .image { - width: auto !important; - min-width: 48px; - min-height: 48px; - padding: 0 5px 25px 0 !important; -} - -.audio-control audio { - width: 100%; - padding: 10px 0 0 0; -} - -.embedded-content iframe { - width: 100%; - padding: 10px 0 0 0; -} - -.result-videos { - img.thumbnail { - .ltr-float-left(); - padding-top: 0.6rem; - .ltr-padding-right(1rem); - width: 20rem; - height: unset; // remove height value that was needed for lazy loading - } -} - -.result-videos .content { - overflow: hidden; -} - -.result-videos .embedded-video iframe { - width: 100%; - aspect-ratio: 16 / 9; - padding: 10px 0 0 0; -} - -@supports not (aspect-ratio: 1 / 1) { - // support older browsers which do not have aspect-ratio - // https://caniuse.com/?search=aspect-ratio - .result-videos .embedded-video iframe { - height: calc(@results-width * 9 / 16); - } -} - -.engines { - .ltr-float-right(); - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - color: var(--color-result-engines-font); - - span { - font-size: smaller; - margin-top: 0; - margin-bottom: 0; - .ltr-margin-right(0.5rem); - .ltr-margin-left(0); - } -} - -.small_font { - font-size: 0.8em; -} - -.highlight { - color: var(--color-result-link-font-highlight); - background: inherit; -} - -.empty_element { - font-style: italic; -} - -.result-images { - flex-grow: 1; - padding: 0.5rem 0.5rem 3rem 0.5rem; - margin: 0.25rem; - border: none !important; - height: @results-image-row-height; - width: unset; - - & > a { - position: relative; - outline: none; - } - - img { - margin: 0; - padding: 0; - border: none; - height: 100%; - width: 100%; - object-fit: cover; - vertical-align: bottom; - background: var(--color-result-image-background); - } - - .image_resolution { - position: absolute; - right: 0; - bottom: 0; - background: var(--color-image-resolution-background); - padding: 0.3rem 0.5rem; - font-size: 0.9rem; - color: var(--color-image-resolution-font); - border-top-left-radius: 0.3rem; - } - - span.title, - span.source { - display: block; - position: absolute; - - width: 100%; - font-size: 0.9rem; - color: var(--color-result-image-span-font); - padding: 0.5rem 0 0 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - span.source { - padding: 1.8rem 0 0 0; - font-size: 0.7rem; - } -} - -.result-map { - img.image { - .ltr-float-right() !important; - height: 100px !important; - width: auto !important; - } - - table { - font-size: 0.9em; - width: auto; - border-collapse: separate; - border-spacing: 0 0.35rem; - - th { - font-weight: inherit; - width: 17rem; - vertical-align: top; - .ltr-text-align-left(); - } - - td { - vertical-align: top; - .ltr-text-align-left(); - } - } -} - -.hidden { - display: none !important; -} - -#results { - margin-top: 1rem; - .ltr-margin-right(2rem); - margin-bottom: 0; - .ltr-margin-left(@results-offset); - display: grid; - grid-template: - "corrections sidebar" min-content - "answers sidebar" min-content - "urls sidebar" 1fr - "pagination sidebar" min-content - / @results-width @results-sidebar-width - ; - gap: 0 @results-gap; -} - -#results #sidebar *:first-child { - margin-top: 0; -} - -#urls { - padding: 0; - grid-area: urls; -} - -#apis .wrapper { - display: flex; -} - -#suggestions { - .wrapper { - display: flex; - flex-flow: column; - justify-content: flex-end; - - form { - display: inline-block; - flex: 1 1 50%; - } - } -} - -#suggestions, -#infoboxes { - input { - padding: 0; - margin: 3px; - font-size: 0.9em; - display: inline-block; - background: transparent; - color: var(--color-result-search-url-font); - cursor: pointer; - width: calc(100%); - text-overflow: ellipsis; - overflow: hidden; - text-align: left; - } - - input[type="submit"], - .infobox .url a { - color: var(--color-result-link-font); - text-decoration: none; - font-size: 0.9rem; - - &:hover { - text-decoration: underline; - } - } -} - -#corrections { - grid-area: corrections; - display: flex; - flex-flow: row wrap; - margin: 0 0 1em 0; - - h4, - input[type="submit"] { - display: inline-block; - padding: 0.5rem; - margin: 0.5rem; - } - - input[type="submit"] { - font-size: 0.8rem; - .rounded-corners-tiny; - } -} - -#infoboxes .title, -#suggestions .title, -#search_url .title, -#engines_msg .title, -#apis .title { - margin: 2em 0 0.5em 0; - color: var(--color-base-font); -} - -summary.title { - cursor: pointer; - padding-top: 1em; -} - -.sidebar-collapsible { - border-top: 1px solid var(--color-sidebar-border); - padding-bottom: 0.5em; -} - -#sidebar-end-collapsible { - border-bottom: 1px solid var(--color-sidebar-border); - width: 100%; -} - -#answers { - grid-area: answers; - background: var(--color-answer-background); - padding: @result-padding; - margin: 1rem 0; - margin-top: 0; - color: var(--color-answer-font); - .rounded-corners; - - h4 { - display: none; - } - - span { - overflow-wrap: anywhere; - } - - .answer { - display: flex; - flex-direction: column; - } - - .answer-url { - margin: 5px 10px 10px auto; - } -} - -#infoboxes { - form { - min-width: 210px; - } -} - -#sidebar { - grid-area: sidebar; - word-wrap: break-word; - color: var(--color-sidebar-font); - - .infobox { - margin: 10px 0 10px; - border: 1px solid var(--color-sidebar-border); - padding: 1rem; - font-size: 0.9em; - .rounded-corners; - - h2 { - margin: 0 0 0.5em 0; - } - - img { - max-width: 100%; - max-height: 12em; - display: block; - margin: 0 auto; - padding: 0; - } - - dt { - font-weight: bold; - } - - .attributes { - dl { - margin: 0.5em 0; - } - - dt { - display: inline; - margin-top: 0.5em; - .ltr-margin-right(0.25em); - margin-bottom: 0.5em; - .ltr-margin-left(0); - padding: 0; - } - - dd { - display: inline; - margin: 0.5em 0; - padding: 0; - } - } - - input { - font-size: 1em; - } - - br { - clear: both; - } - - .attributes, - .urls { - clear: both; - } - } -} - -#apis { - input { - font-size: 0.9em; - margin: 0 10px 0 0; - .show-content-button; - } -} - -#engines_msg { - .engine-name { - width: 10rem; - } - - .response-error { - color: var(--color-error); - } - - .bar-chart-value { - width: auto; - } -} - -#search_url { - div.selectable_url { - pre { - float: left; - width: 200em; - } - } - - button#copy_url { - float: right; - padding: 0.4rem; - margin-left: 0.5rem; - border-radius: 0.3rem; - display: none; // will be shown by JS. - } -} - -#links_on_top { - position: absolute; - .ltr-right(1rem); - .ltr-text-align-right(); - top: 2.7rem; - padding: 0; - border: 0; - display: flex; - align-items: center; - font-size: 1em; - color: var(--color-search-font); - - a { - display: flex; - align-items: center; - margin-left: 1em; - - svg { - font-size: 1.2em; - .ltr-margin-right(0.125em); - } - } - - a, - a:link *, - a:hover *, - a:visited *, - a:active * { - color: var(--color-search-font); - } -} - -#pagination { - grid-area: pagination; - - br { - clear: both; - } -} - -.numbered_pagination { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - overflow: hidden; -} - -.page_number { - background: transparent !important; - color: var(--color-result-link-font) !important; - text-decoration: underline; -} - -.page_number_current { - background: transparent; - color: var(--color-result-link-visited-font); - border: none; -} - -#backToTop { - border: 1px solid var(--color-backtotop-border); - margin: 0; - padding: 0; - font-size: 1em; - background: var(--color-backtotop-background); - position: fixed; - bottom: 8rem; - .ltr-left(@results-width + @results-offset + (0.5 * @results-gap - 1.2em)); - transition: opacity 0.5s; - opacity: 0; - pointer-events: none; - .rounded-corners; - - a { - display: block; - margin: 0; - padding: 0.7em; - } - - a, - a:visited, - a:hover, - a:active { - color: var(--color-backtotop-font); - } -} - -#results.scrolling #backToTop { - opacity: 1; - pointer-events: all; -} - -/* - tablet layout -*/ - -.results-tablet() { - #links_on_top { - span { - display: none; - } - } - - .page_with_header { - margin: 2rem 0.5rem; - width: auto; - } - - #infoboxes { - position: inherit; - max-width: inherit; - - .infobox { - clear: both; - - img { - .ltr-float-left(); - max-width: 10em; - margin-top: 0.5em; - .ltr-margin-right(0.5em); - margin-bottom: 0.5em; - .ltr-margin-left(0); - } - } - } - - #sidebar { - margin: 0 @results-tablet-offset @results-margin @results-tablet-offset; - padding: 0; - float: none; - border: none; - width: auto; - - input { - border: 0; - } - } - - .result { - .thumbnail { - max-width: 98%; - } - - .url { - span.url { - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - width: 100%; - } - } - - .engines { - .ltr-float-right(); - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - padding: 3px 0 0 0; - } - } - - .result-images { - border-bottom: none !important; - } - - .image_result { - max-width: 98%; - - img { - max-width: 98%; - } - } - - #backToTop { - display: none; - } - - #pagination { - margin: 2rem 0 0 0 !important; - } - - #main_results div#results { - margin: 0 auto; - justify-content: center; - display: grid; - grid-template: - "corrections" min-content - "answers" min-content - "sidebar" min-content - "urls" 1fr - "pagination" min-content - / @results-width - ; - gap: 0; - } -} - -@media screen and (width <= calc(@tablet - 0.5px)) { - #links_on_top { - span { - display: none; - } - } -} - -@media screen and (width <= 52rem) { - body.results_endpoint { - #links_on_top { - .link_on_top_about, - .link_on_top_donate { - display: none; - } - } - } -} - -@media screen and (min-width: @phone) and (max-width: @tablet) { - // when .center-alignment-yes, see style-center.less - // the media query includes "min-width: @phone" - // because the phone layout includes the tablet layout unconditionally. - .center-alignment-no { - .results-tablet(); - } -} - -/* Misc */ - -#main_results div#results.only_template_images { - margin: 1rem @results-tablet-offset 0 @results-tablet-offset; - display: grid; - grid-template: - "corrections" min-content - "answers" min-content - "sidebar" min-content - "urls" 1fr - "pagination" min-content - / 100%; - gap: 0; - - #sidebar { - display: none; - } - - #urls { - margin: 0; - display: flex; - flex-wrap: wrap; - } - - #urls::after { - flex-grow: 10; - content: ""; - } - - #backToTop { - .ltr-left(auto); - .ltr-right(1rem); - } - - #pagination { - .ltr-margin-right(4rem); - } -} - -/* - phone layout -*/ - -@media screen and (max-width: @phone) { - // based on the tablet layout - .results-tablet(); - - html { - background-color: var(--color-base-background-mobile); - } - - #main_results div#results { - grid-template-columns: 100%; - margin: 0 auto; - } - - #links_on_top { - top: 1.4rem; - .ltr-right(10px); - } - - #main_index #links_on_top { - top: 0.5rem; - .ltr-right(0.5rem); - } - - #results { - margin: 0; - padding: 0; - } - - #pagination { - margin: 2rem 1rem 0 1rem !important; - } - - article[data-vim-selected] { - border: 1px solid var(--color-result-vim-arrow); - .rounded-corners; - } - - .result { - background: var(--color-result-background); - border: 1px solid var(--color-result-background); - margin: 1rem 2%; - width: 96%; - .rounded-corners; - } - - .result-images { - margin: 0; - height: @results-image-row-height-phone; - background: var(--color-base-background-mobile); - width: unset; - } - - .infobox { - border: none !important; - background-color: var(--color-sidebar-background); - } - - .numbered_pagination { - display: none; - } - - .result-paper, - .result-packages { - .attributes { - display: block; - - div { - display: block; - - span { - display: inline; - } - - span:first-child { - font-weight: bold; - } - - span:nth-child(2) { - .ltr-margin-left(0.5rem); - } - } - } - } -} - -/* - small-phone layout -*/ - -@media screen and (max-width: @small-phone) { - .result-videos { - img.thumbnail { - float: none !important; - } - - .content { - overflow: inherit; - } - } -} - -pre code { - white-space: pre-wrap; -} diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less deleted file mode 100644 index d3fb2273b..000000000 --- a/searx/static/themes/simple/src/less/toolkit.less +++ /dev/null @@ -1,646 +0,0 @@ -// other solution : http://stackoverflow.com/questions/1577598/how-to-hide-parts-of-html-when-javascript-is-disabled/13857783#13857783 - -// stylelint-disable no-descending-specificity - -html.no-js .hide_if_nojs { - display: none; -} - -html.js .show_if_nojs { - display: none; -} - -.center { - text-align: center; -} - -.right { - float: right; -} - -.left { - float: left; -} - -.invisible { - display: none !important; -} - -.list-unstyled { - list-style-type: none; - - li { - margin-top: 4px; - margin-bottom: 4px; - } -} - -.danger { - background-color: var(--color-error-background); -} - -.warning { - background: var(--color-warning-background); -} - -.success { - background: var(--color-success-background); -} - -.badge { - display: inline-block; - color: var(--color-toolkit-badge-font); - background-color: var(--color-toolkit-badge-background); - text-align: center; - white-space: nowrap; - vertical-align: baseline; - min-width: 10px; - padding: 1px 5px; - border-radius: 5px; -} - -// kbd -kbd { - padding: 2px 4px; - margin: 1px; - font-size: 90%; - color: var(--color-toolkit-kbd-font); - background: var(--color-toolkit-kbd-background); -} - -// table -table { - width: 100%; - - &.striped { - tr { - border-bottom: 1px solid var(--color-settings-tr-hover); - } - } -} - -th { - padding: 0.4em; -} - -td { - padding: 0 4px; -} - -tr { - &:hover { - background: var(--color-settings-tr-hover) !important; - } -} - -// pre -.pre() { - display: block; - font-size: 0.8em; - word-break: break-all; - margin: 0.1em; - user-select: all; -} - -div.selectable_url { - display: block; - border: 1px solid var(--color-result-search-url-border); - padding: 4px; - color: var(--color-result-search-url-font); - margin: 0.1em; - overflow: hidden; - height: 1.2em; - line-height: 1.2em; - .rounded-corners-tiny; - - pre { - .pre(); - } -} - -// dialog -.dialog() { - position: relative; - display: flex; - padding: 1rem; - margin: 0 0 1em 0; - border: 1px solid var(--color-toolkit-dialog-border); - .ltr-text-align-left(); - .rounded-corners; - - .close { - .ltr-float-right(); - position: relative; - top: -3px; - color: inherit; - font-size: 1.5em; - } - - ul, - ol, - p { - margin: 1px 0 0 0; - } - - table { - width: auto; - } - - tr { - vertical-align: text-top; - - &:hover { - background: transparent !important; - } - } - - td { - padding: 0 1em 0 0; - padding-top: 0; - .ltr-padding-right(1rem); - padding-bottom: 0; - .ltr-padding-left(0); - } - - h4 { - margin-top: 0.3em; - margin-bottom: 0.3em; - } -} - -.dialog-error { - .dialog(); - - color: var(--color-error); - background: var(--color-error-background); - border-color: var(--color-error); -} - -.dialog-error-block { - .dialog(); - - display: block; - color: var(--color-error); - background: var(--color-error-background); - border-color: var(--color-error); -} - -.dialog-warning { - .dialog(); - - color: var(--color-warning); - background: var(--color-warning-background); - border-color: var(--color-warning); -} - -.dialog-modal { - .dialog(); - - display: block; - background: var(--color-toolkit-dialog-background); - position: fixed; - top: 50%; - left: 50%; - margin: 0 auto; - transform: translate(-50%, -50%); - z-index: 5000; - - h3 { - margin-top: 0; - } -} - -// btn-collapse -.btn-collapse { - cursor: pointer; -} - -// -.scrollx { - overflow: auto hidden; - display: block; - padding: 0; - margin: 0; - border: none; -} - -/* -- tabs -- */ -.tabs .tabs > label { - font-size: 90%; -} - -ul.tabs { - border-bottom: 1px solid var(--color-toolkit-tabs-section-border); - list-style: none; - padding-left: 0; - - li { - display: flex; - } -} - -.tabs { - display: flex; - flex-wrap: wrap; - width: 100%; - min-width: 100%; - - & > * { - order: 2; - } - - & > input[type=radio] { - display: none; - } - - & > label, - & > li > a { - order: 1; - padding: 0.7em; - margin: 0 0.7em; - letter-spacing: 0.5px; - text-transform: uppercase; - border: solid var(--color-toolkit-tabs-label-border); - border-width: 0 0 2px 0; - color: unset; - - .disable-user-select(); - - cursor: pointer; - - &.active { - border-bottom: 2px solid var(--color-categories-item-border-selected); - background: var(--color-categories-item-selected); - color: var(--color-categories-item-selected-font); - } - } - - & > label:hover, - & > li > a:hover { - 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 var(--color-toolkit-tabs-section-border); - display: none; - } - - // default selection - & > label:last-of-type { - border-bottom: 2px solid var(--color-categories-item-border-selected); - background: var(--color-categories-item-selected); - color: var(--color-categories-item-selected-font); - letter-spacing: -0.1px; - } - - & > section:last-of-type { - display: block; - } -} - -html body .tabs > input:checked { - ~ section { - display: none; - } - - ~ label { - position: inherited; - background: inherit; - border-bottom: 2px solid transparent; - font-weight: normal; - color: inherit; - - &:hover { - border-bottom: 2px solid var(--color-categories-item-border-selected); - } - } - - + label { - 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 { - display: block; - } -} - -/* -- select -- */ -select { - height: 2.4rem; - margin-top: 0; - .ltr-margin-right(1rem); - margin-bottom: 0; - .ltr-margin-left(0); - padding: 0.2rem !important; - color: var(--color-search-font); - font-size: 0.9rem; - z-index: 100; - - &:hover, - &:focus { - cursor: pointer; - } -} - -@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) { - select { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - border-width: 0 2rem 0 0; - border-color: transparent; - background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat; - background-position-x: calc(100% + 2rem); - background-size: 2rem; - background-origin: content-box; - background-color: var(--color-toolkit-select-background); - outline: medium none; - text-overflow: ellipsis; - .rounded-corners-tiny; - - &:hover, - &:focus { - background-color: var(--color-toolkit-select-background-hover); - } - - option { - background-color: var(--color-base-background); - } - } - - @media (prefers-color-scheme: dark) { - html.theme-auto select, - html.theme-dark select { - background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path); - } - } - - html.theme-dark select { - background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path); - } -} - -/* -- checkbox-onoff -- */ -input.checkbox-onoff[type="checkbox"] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - display: inline-block; - width: 2.5em; - height: 0.7em; - box-shadow: none !important; - margin: 0 16px; - border-radius: 10px; - position: relative; - - /* focus & hover */ - &:focus, - &:hover { - outline: none; - } - - &:focus::after { - content: ""; - position: absolute; - width: 3.5em; - height: 1.65em; - border: 1px solid var(--color-btn-background); - border-radius: 12px; - box-shadow: var(--color-btn-background) 0 0 3px; - z-index: 1200; - top: -0.55em; - left: -0.6em; - } - - &::before { - position: absolute; - top: -0.5em; - display: flex; - justify-content: center; - align-items: center; - font-size: 0.75em; - width: 1.875em; - height: 1.875em; - border-radius: 50%; - } -} - -/* check mark -reversed-checkbox displays unchecked checkedboxes as checked, and vice versa. -see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313 -*/ -input.checkbox-onoff[type="checkbox"], -input.checkbox-onoff.reversed-checkbox[type="checkbox"]:checked { - background: var(--color-toolkit-checkbox-onoff-off-background); - - &::before { - left: -0.5em; - content: "\2715"; - color: var(--color-toolkit-checkbox-onoff-off-mark-color); - background: var(--color-toolkit-checkbox-onoff-off-mark-background); - } -} - -input.checkbox-onoff[type="checkbox"]:checked, -input.checkbox-onoff.reversed-checkbox[type="checkbox"] { - background: var(--color-toolkit-checkbox-onoff-on-background); - - &::before { - left: calc(100% - 1.5em); - content: "\2713"; - color: var(--color-toolkit-checkbox-onoff-on-mark-color); - background: var(--color-toolkit-checkbox-onoff-on-mark-background); - } -} - -/* -- checkbox -- */ -@supports (transform: rotate(-45deg)) { - input[type=checkbox]:not(.checkbox-onoff) { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - width: 20px; - height: 20px; - cursor: pointer; - position: relative; - top: 0; - left: 0; - border: 2px solid var(--color-toolkit-checkbox-input-border); - .rounded-corners(0.3em); - - &::after { - content: ''; - width: 9px; - height: 5px; - position: absolute; - top: 3px; - left: 2px; - border: 3px solid var(--color-toolkit-checkbox-label-border); - border-top: none; - border-right: none; - background: transparent; - opacity: 0; - transform: rotate(-45deg); - } - - &:checked::after { - border-color: var(--color-toolkit-checkbox-input-border); - opacity: 1; - } - } - - // disabled : can't be focused, show only the check mark - input[type=checkbox][disabled]:not(.checkbox-onoff) { - border: inherit; - background-color: transparent !important; - cursor: inherit; - } - - // if not checked and possible to checked then display a "light" check mark on hover - input.checkbox[type=checkbox]:not(:checked, [disabled], .checkbox-onoff):hover::after { - opacity: 0.5; - } -} - -@media screen and (max-width: @phone) { - .tabs > label { - width: 100%; - } -} - -/* -- loader -- */ -.loader, -.loader::after { - border-radius: 50%; - width: 2em; - height: 2em; -} - -.loader { - margin: 1em auto; - font-size: 10px; - position: relative; - text-indent: -9999em; - 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); - -webkit-animation: load8 1.2s infinite linear; - animation: load8 1.2s infinite linear; -} - -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -/* -- engine-tooltip -- */ -.engine-tooltip { - display: none; - position: absolute; - padding: 0.5rem 1rem; - margin: 0 0 0 2rem; - border: 1px solid var(--color-toolkit-engine-tooltip-border); - background: var(--color-toolkit-engine-tooltip-background); - font-size: 14px; - font-weight: normal; - z-index: 5000; - text-align: left; - .rounded-corners; -} - -th:hover .engine-tooltip, -td:hover .engine-tooltip, -.engine-tooltip:hover { - display: inline-block; -} - -/* -- stacked bar chart -- */ -.stacked-bar-chart { - margin: 0; - padding: 0 0.125rem 0 4rem; - width: 100%; - width: -moz-available; - width: -webkit-fill-available; - width: fill; - flex-flow: row nowrap; - align-items: center; - display: inline-flex; -} - -.stacked-bar-chart-value { - width: 3rem; - display: inline-block; - position: absolute; - padding: 0 0.5rem; - text-align: right; -} - -.stacked-bar-chart-base { - display: flex; - flex-shrink: 0; - flex-grow: 0; - flex-basis: unset; -} - -.stacked-bar-chart-median { - .stacked-bar-chart-base(); - - background: var(--color-base-font); - border: 1px solid rgba(var(--color-base-font-rgb), 0.9); - padding: 0.3rem 0; -} - -.stacked-bar-chart-rate80 { - .stacked-bar-chart-base(); - - background: transparent; - border: 1px solid rgba(var(--color-base-font-rgb), 0.3); - padding: 0.3rem 0; -} - -.stacked-bar-chart-rate95 { - .stacked-bar-chart-base(); - - background: transparent; - border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5); - padding: 0; -} - -.stacked-bar-chart-rate100 { - .stacked-bar-chart-base(); - - background: transparent; - border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9); - padding: 0.4rem 0; - width: 1px; -} diff --git a/searx/static/themes/simple/src/less/toolkit_loader.less b/searx/static/themes/simple/src/less/toolkit_loader.less deleted file mode 100644 index 8b705e42b..000000000 --- a/searx/static/themes/simple/src/less/toolkit_loader.less +++ /dev/null @@ -1,29 +0,0 @@ -.loader, -.loader::after { - border-radius: 50%; - width: 10em; - height: 10em; -} - -.loader { - margin: 60px auto; - font-size: 10px; - position: relative; - text-indent: -9999em; - border-top: 1.1em solid var(--color-loading-indicator); - border-right: 1.1em solid var(--color-loading-indicator); - border-bottom: 1.1em solid var(--color-loading-indicator); - border-left: 1.1em solid var(--color-loading-indicator-gap); - transform: translateZ(0); - animation: load8 1.1s infinite linear; -} - -@keyframes load8 { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} |