[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

1 files changed, 14 insertions, 18 deletions

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;