1 files changed, 63 insertions, 22 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 0d57772e1..5e015579c 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -10,13 +10,13 @@
 @import "../../__common__/less/stats.less";
 @import "../../__common__/less/result_templates.less";
 @import (inline) "../../node_modules/normalize.css/normalize.css";
-@import "../generated/ion.less";
 @import "definitions.less";
 @import "mixins.less";
 @import "code.less";
 @import "toolkit.less";
 @import "autocomplete.less";
 @import "detail.less";
+@import "animations.less";
 
 // for index.html template
 @import "index.less";
@@ -28,10 +28,23 @@
 @import "search.less";
 
 // ion-icon
-.ion-icon-big {
+.ion-icon {
+  display: inline-block;
+  vertical-align: bottom;
+  line-height: 1;
+  text-decoration: inherit;
+}
+
+.ion-icon-small {
+  width: 1rem;
+  height: 1rem;
   .ion-icon;
+}
 
-  font-size: 149%;
+.ion-icon-big {
+  width: 1.5rem;
+  height: 1.5rem;
+  .ion-icon;
 }
 
 // Main LESS-Code
@@ -156,7 +169,7 @@ article[data-vim-selected].category-social {
   border-left: 0.2rem solid transparent;
 
   h3 {
-    font-size: 1.1em;
+    font-size: 1.2rem;
     word-wrap: break-word;
     margin: 0.4rem 0 0.4rem 0;
     padding: 0;
@@ -209,13 +222,39 @@ article[data-vim-selected].category-social {
     }
   }
 
-  .url {
-    font-size: 0.96em;
-    margin: 0 0 3px 0;
-    padding: 0;
-    max-width: 54em;
-    word-wrap: break-word;
+  .url_wrapper {
+    display: flex;
+    font-size: 1rem;
     color: var(--color-result-url-font);
+    flex-wrap: nowrap;
+    overflow: hidden;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+
+    .url_o1 {
+      white-space: nowrap;
+      flex-shrink: 1;
+    }
+
+    .url_o1::after {
+      content: " ";
+      width: 1ch;
+      display: inline-block;
+    }
+
+    .url_o2 {
+      overflow: hidden;
+      white-space: nowrap;
+      flex-basis: content;
+      flex-grow: 0;
+      flex-shrink: 1;
+      text-align: right;
+
+      .url_i2 {
+        float: right;
+      }
+    }
   }
 
   .published_date {
@@ -226,17 +265,15 @@ article[data-vim-selected].category-social {
   img {
     &.thumbnail {
       float: left;
-      padding: 0 5px 10px 0;
-      width: 20em;
-      min-width: 20em;
-      min-height: 8em;
+      padding: 0.6rem 1rem 0 0;
+      width: 20rem;
     }
 
     &.image {
       float: left;
-      padding: 0 5px 10px 0;
-      width: 100px;
-      max-height: 100px;
+      padding: 0.6rem 1rem 0 0;
+      width: 7rem;
+      max-height: 7rem;
       object-fit: scale-down;
       object-position: right top;
     }
@@ -288,6 +325,10 @@ article[data-vim-selected].category-social {
   background: inherit;
 }
 
+.empty_element {
+  font-style: italic;
+}
+
 .result-images {
   display: inline-block;
   margin: 0;
@@ -355,7 +396,7 @@ article[data-vim-selected].category-social {
 }
 
 #results {
-  margin: 2rem 2rem 0 @results-offset;
+  margin: 1rem 2rem 0 @results-offset;
   display: grid;
   grid-template-columns: @results-width 25rem;
   grid-template-rows: min-content min-content 1fr min-content;
@@ -445,7 +486,7 @@ article[data-vim-selected].category-social {
   border: 1px solid var(--color-answer-border);
   background: var(--color-answer-background);
   padding: @result-padding;
-  margin: 1rem @results-tablet-offset;
+  margin: 1rem 0;
   margin-top: 0;
   color: var(--color-answer-font);
   .rounded-corners;
@@ -530,7 +571,7 @@ article[data-vim-selected].category-social {
 #linkto_preferences {
   position: absolute;
   right: 10px;
-  top: 2rem;
+  top: 2.2rem;
   padding: 0;
   border: 0;
   display: block;
@@ -674,7 +715,7 @@ article[data-vim-selected].category-social {
   }
 
   #main_results div#results {
-    margin: 2rem auto 0 auto;
+    margin: 1rem auto 0 auto;
     justify-content: center;
     display: grid;
     grid-template-columns: @results-width;
@@ -690,7 +731,7 @@ article[data-vim-selected].category-social {
 }
 
 #main_results div#results.only_template_images {
-  margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
+  margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content min-content 1fr min-content min-content;