Theme: add a preference to center the results (Oscar)

related to #1169

1 files changed, 82 insertions, 77 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 45c6eb204..6777cbadc 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -29,6 +29,9 @@
 // Search-Field
 @import "search.less";
 
+// to center the results
+@import "style-center.less";
+
 // ion-icon
 .ion-icon {
   display: inline-block;
@@ -460,7 +463,7 @@ article[data-vim-selected].category-social {
   margin-bottom: 0;
   .ltr-margin-left(@results-offset);
   display: grid;
-  grid-template-columns: @results-width 25rem;
+  grid-template-columns: @results-width @results-sidebar-width;
   grid-template-rows: min-content min-content 1fr min-content;
   gap: 0 @results-gap;
   grid-template-areas:
@@ -699,103 +702,105 @@ article[data-vim-selected].category-social {
 }
 
 @media screen and (max-width: @tablet) {
-  .page_with_header {
-    margin: 2rem 0.5rem;
-    width: auto;
-  }
+  .center-aligment-no {
+    .page_with_header {
+      margin: 2rem 0.5rem;
+      width: auto;
+    }
 
-  #infoboxes {
-    position: inherit;
-    max-width: inherit;
+    #infoboxes {
+      position: inherit;
+      max-width: inherit;
+
+      .infobox {
+        clear: both;
+
+        img {
+          .ltr-float-left();
+          max-width: 10em;
+          margin-top: 0.5em;
+          .ltr-margin-right(0.5em);
+          margin-bottom: 0.5em;
+          .ltr-margin-left(0);
+        }
+      }
+    }
 
-    .infobox {
-      clear: both;
+    #sidebar {
+      margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
+      padding: 0;
+      float: none;
+      border: none;
+      width: auto;
 
-      img {
-        .ltr-float-left();
-        max-width: 10em;
-        margin-top: 0.5em;
-        .ltr-margin-right(0.5em);
-        margin-bottom: 0.5em;
-        .ltr-margin-left(0);
+      input {
+        border: 0;
       }
     }
-  }
 
-  #sidebar {
-    margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
-    padding: 0;
-    float: none;
-    border: none;
-    width: auto;
-
-    input {
-      border: 0;
+    #apis {
+      display: none;
     }
-  }
 
-  #apis {
-    display: none;
-  }
+    #search_url {
+      display: none;
+    }
 
-  #search_url {
-    display: none;
-  }
+    .result {
+      .thumbnail {
+        max-width: 98%;
+      }
 
-  .result {
-    .thumbnail {
-      max-width: 98%;
-    }
+      .url {
+        span.url {
+          display: block;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          width: 100%;
+        }
+      }
 
-    .url {
-      span.url {
-        display: block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        width: 100%;
+      .engines {
+        .ltr-float-right();
+        padding: 0 0 3px 0;
       }
     }
 
-    .engines {
-      .ltr-float-right();
-      padding: 0 0 3px 0;
+    .result-images {
+      border-bottom: none !important;
     }
-  }
-
-  .result-images {
-    border-bottom: none !important;
-  }
-
-  .image_result {
-    max-width: 98%;
 
-    img {
+    .image_result {
       max-width: 98%;
+
+      img {
+        max-width: 98%;
+      }
     }
-  }
 
-  #backToTop {
-    display: none;
-  }
+    #backToTop {
+      display: none;
+    }
 
-  #pagination {
-    margin: 2rem 0 0 0 !important;
-  }
+    #pagination {
+      margin: 2rem 0 0 0 !important;
+    }
 
-  #main_results div#results {
-    margin: 1rem auto 0 auto;
-    justify-content: center;
-    display: grid;
-    grid-template-columns: @results-width;
-    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
-    gap: 0;
-    grid-template-areas:
-      "corrections"
-      "answers"
-      "sidebar"
-      "urls"
-      "pagination";
+    #main_results div#results {
+      margin: 1rem auto 0 auto;
+      justify-content: center;
+      display: grid;
+      grid-template-columns: @results-width;
+      grid-template-rows: min-content min-content min-content 1fr min-content min-content;
+      gap: 0;
+      grid-template-areas:
+        "corrections"
+        "answers"
+        "sidebar"
+        "urls"
+        "pagination";
+    }
   }
 }