diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js index abb2dc44d..824ab66d0 100644 --- a/searx/static/themes/simple/gruntfile.js +++ b/searx/static/themes/simple/gruntfile.js @@ -127,7 +127,7 @@ module.exports = function (grunt) { }, files: [ { - src: ['src/less/style.less'], + src: ['src/less/style-ltr.less'], dest: 'css/searxng.min.css', nonull: true, filter: file_exists, diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 5f5745388..a1a74480b 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -4,7 +4,8 @@ position: absolute; max-height: 0; overflow-y: hidden; - text-align: left; + .ltr-text-align-left(); + .rounded-corners; &:active, @@ -24,7 +25,7 @@ > li { cursor: pointer; - padding: 8px 0 8px 8px; + padding: 0.5rem; &.active, &:active, diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less index ab15be1a3..5e3cfaca6 100644 --- a/searx/static/themes/simple/src/less/detail.less +++ b/searx/static/themes/simple/src/less/detail.less @@ -3,8 +3,8 @@ } #main_results #results.only_template_images.image-detail-open #backToTop { - left: 56.75rem !important; - right: inherit; + .ltr-left(56.75rem) !important; + .ltr-right(inherit); } article.result-images .detail { @@ -15,8 +15,8 @@ article.result-images .detail { display: flex; flex-direction: column; position: fixed; - left: 60rem; - right: 0; + .ltr-left(60rem); + .ltr-right(0); top: @search-height; transition: top 0.064s ease-in 0s; bottom: 0; @@ -76,7 +76,7 @@ article.result-images .detail { h4, p, a { - text-align: left; + .ltr-text-align-left(); } p.result-content { @@ -113,20 +113,23 @@ article.result-images .detail { a.result-detail-close { top: 1rem; - left: 1rem; + .ltr-left(1rem); padding: 0.4rem; } a.result-detail-previous { top: 1rem; - right: 6rem; + .ltr-right(6rem); // center the icon by moving it slightly on the left - padding: 0.4rem 0.5rem 0.4rem 0.3rem; + padding-top: 0.4rem; + .ltr-padding-right(0.5rem); + padding-bottom: 0.4rem; + .ltr-padding-left(0.3rem); } a.result-detail-next { top: 1rem; - right: 2rem; + .ltr-right(2rem); padding: 0.4rem; } @@ -186,7 +189,7 @@ article.result-images .detail { .loader { position: absolute; top: 1rem; - right: 50%; + .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); @@ -205,7 +208,7 @@ article.result-images .detail { @media screen and (max-width: @tablet) { #results.image-detail-open article.result-images[data-vim-selected] .detail { top: 0; - left: 0; + .ltr-left(0); a.result-images-source { display: flex; @@ -219,7 +222,7 @@ article.result-images .detail { } a.result-detail-next { - right: 1rem; + .ltr-right(1rem); } } } @@ -227,7 +230,7 @@ article.result-images .detail { @media screen and (max-width: @phone) { #results.image-detail-open article.result-images[data-vim-selected] .detail { top: 0; - left: 0; + .ltr-left(0); padding: 1rem; a.result-images-source img { @@ -238,7 +241,7 @@ article.result-images .detail { .result-images-labels p span { width: inherit; - margin-right: 1rem; + .ltr-margin-right(1rem); } } } diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less index 9a244da00..3f1084099 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/searx/static/themes/simple/src/less/index.less @@ -2,7 +2,7 @@ margin-top: 26vh; #linkto_preferences { - right: 1.8rem; + .ltr-right(1.8rem); } } diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index 5fdd4bfaa..1d6f62a13 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -1,6 +1,6 @@ #tab-contentquery table td, #tab-contentquery table th { - text-align: left !important; + .ltr-text-align-right() !important; height: 3rem; } @@ -18,20 +18,23 @@ margin: 0; padding: 5px 0 0 0; display: block; - float: left; + .ltr-float-left(); width: 300px; } .value { margin: 0; padding: 0; - float: left; + .ltr-float-left(); width: 15em; select, input[type="text"] { font-size: inherit !important; - margin: 0 1rem 0 0; + margin-top: 0; + .ltr-margin-right(1rem); + margin-bottom: 0; + .ltr-margin-left(0); } select { @@ -63,7 +66,7 @@ .description { margin: 0; padding: 5px 0 0 0; - float: left; + .ltr-float-right(); width: 50%; color: var(--color-settings-engine-description-font); font-size: 90%; @@ -82,7 +85,7 @@ th, td { - text-align: left; + .ltr-text-align-left(); font-family: monospace; font-size: 1rem; padding: 0.5em; @@ -106,7 +109,7 @@ } .category { - margin-right: 0.5rem; + .ltr-margin-right(0.5rem); label { border: 2px solid transparent; @@ -121,7 +124,7 @@ .name, .shortcut { - text-align: left; + .ltr-text-align-left(); } .preferences_back { @@ -153,7 +156,7 @@ th.name { .engine-tooltip { margin-top: 1.8rem; - left: calc((100% - 85em) / 2 + 10em); + .ltr-left(calc((100% - 85em) / 2 + 10em)); max-width: 40rem; .engine-description { @@ -163,7 +166,7 @@ } .engine-group { - text-align: left; + .ltr-text-align-left(); font-weight: normal; background: var(--color-settings-engine-group-background); } @@ -175,6 +178,6 @@ } .engine-tooltip { - left: 10em !important; + .ltr-left(10em) !important; } } diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 675f26f2f..282a0980b 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -8,7 +8,9 @@ } #search_header { - padding: 1.5em 2em 0 @results-offset - 3rem; + 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); @@ -24,7 +26,7 @@ .category { display: inline-block; position: relative; - margin-right: 1rem; + .ltr-margin-right(1rem); padding: 0; input { @@ -127,11 +129,11 @@ #q { outline: medium none; - padding-left: 12px; - padding-right: 0 !important; - border-right: none; + .ltr-padding-left(12px); + .ltr-padding-right(0) !important; + .ltr-border-right(none); width: @search-width; - border-radius: 10px 0 0 10px; + .ltr-rounded-left-corners(); } #q::-ms-clear, @@ -140,8 +142,8 @@ } #send_search { - border-left: none; - border-radius: 0 10px 10px 0; + .ltr-border-left(none); + .ltr-rounded-right-corners(); &:hover { cursor: pointer; @@ -153,12 +155,15 @@ .no-js #clear_search, .no-js #send_search { width: auto !important; - border-left: 1px solid var(--color-search-border); + .ltr-border-left(1px solid var(--color-search-border)); padding: 10px; } .search_filters { - margin: 0.6rem 0 0 @results-offset + 0.6rem; + margin-top: 0.6rem; + .ltr-margin-right(0); + margin-bottom: 0; + .ltr-margin-left(@results-offset + 0.6rem); select { background-color: inherit; @@ -177,7 +182,10 @@ } .search_filters { - margin: 0.6rem 0 0 @results-tablet-offset + 3rem; + margin-top: 0.6rem; + .ltr-margin-right(0); + margin-bottom: 0; + .ltr-margin-left(@results-tablet-offset + 3rem); } #categories { @@ -204,7 +212,7 @@ #categories { width: 100%; - text-align: left; + .ltr-text-align-left(); overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; @@ -243,7 +251,7 @@ #main_results #q:placeholder-shown ~ #send_search { margin-right: 2.6rem; - transition: margin-right 0.1s; + transition: margin-right 0.1s; // FIX RTL } .search_filters { diff --git a/searx/static/themes/simple/src/less/style-ltr.less b/searx/static/themes/simple/src/less/style-ltr.less new file mode 100644 index 000000000..c20d65bbf --- /dev/null +++ b/searx/static/themes/simple/src/less/style-ltr.less @@ -0,0 +1,69 @@ +.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: 10px) { + border-radius: @radius 0 0 @radius; +} + +.ltr-rounded-right-corners(@radius: 10px) { + border-radius: 0 @radius @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 index 21c05424f..92eda0c10 100644 --- a/searx/static/themes/simple/src/less/style-rtl.less +++ b/searx/static/themes/simple/src/less/style-rtl.less @@ -1,6 +1,134 @@ +.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: 10px) { + border-radius: 0 @radius @radius 0; +} + +.ltr-rounded-right-corners(@radius: 10px) { + border-radius: @radius 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"; -#search_submit { - left: 1px; - right: auto; +#q, +#sidebar .infobox dt bdi { + direction: rtl; +} + +// URL are displayed LTR but align on the right +#urls { + direction: initial; + text-align: right; + + .result .url_wrapper { + justify-content: end; + } +} + +// 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 searx/static/themes/__common__/less/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 index bb983838b..babe886e8 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -33,6 +33,7 @@ vertical-align: bottom; line-height: 1; text-decoration: inherit; + .ltr-transform(); } .ion-icon-small { @@ -139,8 +140,8 @@ a { article[data-vim-selected] { background: var(--color-result-vim-selected); - border-left: 0.2rem solid var(--color-result-vim-arrow); - .rounded-right-corners; + .ltr-border-left(0.2rem solid var(--color-result-vim-arrow)); + .ltr-rounded-right-corners(); } article.result-images[data-vim-selected] { @@ -166,7 +167,7 @@ article[data-vim-selected].category-social { .result { margin: @results-margin 0; padding: @result-padding; - border-left: 0.2rem solid transparent; + .ltr-border-left(0.2rem solid transparent); h3 { font-size: 1.2rem; @@ -264,15 +265,17 @@ article[data-vim-selected].category-social { img { &.thumbnail { - float: left; - padding: 0.6rem 1rem 0 0; + .ltr-float-left(); + padding-top: 0.6rem; + .ltr-padding-right(1rem); width: 20rem; height: unset; // remove heigth value that was needed for lazy loading } &.image { - float: left; - padding: 0.6rem 1rem 0 0; + .ltr-float-left(); + padding-top: 0.6rem; + .ltr-padding-right(1rem); width: 7rem; max-height: 7rem; object-fit: scale-down; @@ -308,12 +311,15 @@ article[data-vim-selected].category-social { } .engines { - float: right; + .ltr-float-right(); color: var(--color-result-engines-font); span { font-size: smaller; - margin: 0 0.5em 0 0; + margin-top: 0; + margin-bottom: 0; + .ltr-margin-right(0.5rem); + .ltr-margin-left(0); } } @@ -356,9 +362,12 @@ article[data-vim-selected].category-social { display: block; position: absolute; bottom: 0; - right: 0; + .ltr-right(0); padding: 4px; - margin: 0 0 4px 4px; + margin-top: 0; + .ltr-margin-right(0); + margin-bottom: 4px; + .ltr-margin-left(4px); // color: @color-result-image-span-font; background-color: var(--color-result-image-span-background-hover); font-size: 0.7em; @@ -367,7 +376,7 @@ article[data-vim-selected].category-social { .result-map { img.image { - float: right !important; + .ltr-float-right() !important; height: 100px !important; width: auto !important; } @@ -382,12 +391,12 @@ article[data-vim-selected].category-social { font-weight: inherit; width: 17rem; vertical-align: top; - text-align: left; + .ltr-text-align-left(); } td { vertical-align: top; - text-align: left; + .ltr-text-align-left(); } } } @@ -397,7 +406,10 @@ article[data-vim-selected].category-social { } #results { - margin: 1rem 2rem 0 @results-offset; + margin-top: 1rem; + .ltr-margin-right(2rem); + margin-bottom: 0; + .ltr-margin-left(@results-offset); display: grid; grid-template-columns: @results-width 25rem; grid-template-rows: min-content min-content 1fr min-content; @@ -533,7 +545,10 @@ article[data-vim-selected].category-social { dt { display: inline; - margin: 0.5em 0.25em 0.5em 0; + margin-top: 0.5em; + .ltr-margin-right(0.25em); + margin-bottom: 0.5em; + .ltr-margin-left(0); padding: 0; font-weight: bold; } @@ -571,7 +586,7 @@ article[data-vim-selected].category-social { #linkto_preferences { position: absolute; - right: 10px; + .ltr-right(10px); top: 2.2rem; padding: 0; border: 0; @@ -608,7 +623,7 @@ article[data-vim-selected].category-social { background: var(--color-backtotop-background); position: fixed; bottom: 8rem; - left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); + .ltr-left(@results-width + @results-offset + (0.5 * @results-gap - 1.2em)); transition: opacity 0.5s; opacity: 0; .rounded-corners; @@ -647,9 +662,12 @@ article[data-vim-selected].category-social { clear: both; img { - float: left; + .ltr-float-left(); max-width: 10em; - margin: 0.5em 0.5em 0.5em 0; + margin-top: 0.5em; + .ltr-margin-right(0.5em); + margin-bottom: 0.5em; + .ltr-margin-left(0); } } } @@ -690,7 +708,7 @@ article[data-vim-selected].category-social { } .engines { - float: right; + .ltr-float-right(); padding: 0 0 3px 0; } } @@ -750,12 +768,12 @@ article[data-vim-selected].category-social { } #backToTop { - left: auto; - right: 1rem; + .ltr-left(auto); + .ltr-right(1rem); } #pagination { - margin-right: 4rem; + .ltr-margin-right(4rem); } } @@ -767,12 +785,12 @@ article[data-vim-selected].category-social { #linkto_preferences { top: 0.8rem; - right: 0.7rem; + .ltr-right(0.7rem); } #main_index #linkto_preferences { top: 0.5rem; - right: 0.5rem; + .ltr-right(0.5rem); } #results { diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 76db36853..ed1e1affa 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -125,11 +125,11 @@ div.selectable_url { padding: 1rem; margin: 0 0 1em 0; border: 1px solid var(--color-toolkit-dialog-border); - text-align: left; + .ltr-text-align-left(); .rounded-corners; .close { - float: right; + .ltr-float-right(); position: relative; top: -3px; color: inherit; @@ -156,6 +156,10 @@ div.selectable_url { td { padding: 0 1em 0 0; + padding-top: 0; + .ltr-padding-right(1rem); + padding-bottom: 0; + .ltr-padding-left(0); } h4 { @@ -301,7 +305,10 @@ html body .tabs > input:checked { /* -- select -- */ select { height: 2.4rem; - margin: 0 1rem 0 0; + 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;