[enh] oscar: image thumbnail layout

Adjust thumbnail sizes to fill the container width

1 files changed, 29 insertions, 2 deletions

diff --git a/searx/static/themes/oscar/src/less/logicodev/results.less b/searx/static/themes/oscar/src/less/logicodev/results.less
index ce62cd34d..67ee296a1 100644
--- a/searx/static/themes/oscar/src/less/logicodev/results.less
+++ b/searx/static/themes/oscar/src/less/logicodev/results.less
@@ -77,12 +77,39 @@
 // image formating of results
 .result-images {
     float: left !important;
-    width: 24%;
-    margin: .5%;
+    margin: 0;
+    padding: 0;
     a {
         display: block;
         width: 100%;
         background-size: cover;
+        .img-thumbnail {
+            border: none !important;
+            padding: 0;
+        }
+        &:hover, &:focus {
+            outline: 0;
+            .img-thumbnail {
+                box-shadow: 5px 5px 15px 0px black;
+            }
+        }
+    }
+}
+
+.result-images.js a .img-thumbnail {
+    max-height: inherit;
+    min-height: inherit;
+}
+
+.result-images:not(.js) {
+    width: 25%;
+    padding: 3px 13px 13px 3px;
+    a {
+        .img-thumbnail {
+            margin: 0;
+            max-height: 128px;
+            min-height: 128px;
+        }
     }
 }