[simple theme] selection ui with border

* remove vim arrow
* add 1rem padding to results
* add 0.2rem left border to vim selected article
* set column gap to 1.2rem and make search bar in line with results
* put 10px border-radius selected article
* result article: 0.125rem margin on tablet and esktop; 1rem margin on phone

4 files changed, 24 insertions, 21 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 529eb2b81..9df9019f2 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -209,7 +209,8 @@ html {
 @results-offset: 10rem;
 @results-tablet-offset: 0.5rem;
 @results-gap: 5rem;
-@results-margin: 2rem;
+@results-margin: 0.125rem;
+@result-padding: 1rem;
 @search-width: 40rem;
 // heigh of #search, see detail.less
 @search-height: 7.5rem;
diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less
index 74831e676..19955675b 100644
--- a/searx/static/themes/simple/src/less/mixins.less
+++ b/searx/static/themes/simple/src/less/mixins.less
@@ -16,6 +16,12 @@
   border-radius: @radius;
 }
 
+.rounded-right-corners (@radius: 0 10px 10px 0) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+
 // disable user selection
 .disable-user-select () {
   -webkit-touch-callout: none;
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 88a8626f2..90a6a299e 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -3,12 +3,12 @@
 */
 
 #search {
-  padding: 1.5em 2em 0 @results-offset - 4rem;
+  padding: 1.5em 2em 0 @results-offset - 3rem;
   margin: 0;
   background: var(--color-header-background);
   border-bottom: 1px solid var(--color-header-border);
   display: grid;
-  column-gap: 1rem;
+  column-gap: 1.2rem;
   row-gap: 1rem;
   grid-template-columns: 3rem 1fr;
   grid-template-areas:
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index d2c3bba92..e80b12991 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -126,33 +126,24 @@ a {
 
 article[data-vim-selected] {
   background: var(--color-result-vim-selected);
-}
-
-article[data-vim-selected]::before {
-  position: absolute;
-  left: (@results-offset - 2rem);
-  padding: 2px;
-  content: ">";
-  font-weight: bold;
-  color: var(--color-result-vim-arrow);
+  border-left: 0.2rem solid var(--color-result-vim-arrow);
+  .rounded-right-corners;
 }
 
 article.result-images[data-vim-selected] {
   background: var(--color-result-vim-arrow);
+  border: none;
+  .rounded-corners;
 
   .image_thumbnail {
     filter: opacity(60%);
   }
 }
 
-article.result-images[data-vim-selected]::before {
-  display: none;
-  content: "";
-}
-
 .result {
   margin: @results-margin 0;
-  padding: 0;
+  padding: @result-padding;
+  border-left: 0.2rem solid transparent;
 
   h3 {
     font-size: 1.1em;
@@ -284,6 +275,7 @@ article.result-images[data-vim-selected]::before {
   padding: 0;
   position: relative;
   max-height: 200px;
+  border: none;
 
   img {
     float: inherit;
@@ -464,7 +456,7 @@ article.result-images[data-vim-selected]::before {
   .infobox {
     margin: 10px 0 10px;
     border: 1px solid var(--color-sidebar-border);
-    padding: 0.9em;
+    padding: 1rem;
     font-size: 0.9em;
     .rounded-corners;
 
@@ -752,13 +744,17 @@ article.result-images[data-vim-selected]::before {
   }
 
   .result {
-    padding: 8px 10px 6px 10px;
-    margin: @results-tablet-offset;
+    margin: 1rem @results-tablet-offset;
     border: 1px solid var(--color-result-border);
     box-shadow: 0 0 5px var(--color-result-shadow);
     .rounded-corners;
   }
 
+  article[data-vim-selected] {
+    border: 1px solid var(--color-result-border);
+    .rounded-corners;
+  }
+
   .result-images {
     margin: 0;
     padding: 0;