Merge pull request #750 from dalf/simple-rtl

Simple theme: implement RTL

searx/static/themes/simple/.stylelintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "stylelint-config-standard"
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "declaration-empty-line-before": null,
+    "no-invalid-position-at-import-rule": null
+  }
 }

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,

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,

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);
     }
   }
 }

searx/static/themes/simple/src/less/index.less

@@ -2,7 +2,7 @@
   margin-top: 26vh;
 
   #linkto_preferences {
-    right: 1.8rem;
+    .ltr-right(1.8rem);
   }
 }
 

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;
   }
 }

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 {

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";

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;
 }

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 {

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;