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

related to
* #1169
* #1281
* #1286

searx/static/themes/simple/src/less/definitions.less

@@ -243,6 +243,7 @@
 
 /// General Size
 @results-width: 45rem;
+@results-sidebar-width: 25rem;
 @results-offset: 10rem;
 @results-tablet-offset: 0.5rem;
 @results-gap: 5rem;

searx/static/themes/simple/src/less/style-center.less

@@ -0,0 +1,118 @@
+/*
+--center-page-width overrides the less variable @results-width when the results are centered
+see the CSS rules for #results in style.less ( grid-template-columns and gap).
+
+In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3).
+
+All rules starts with ".center-aligment-yes #main_results" to be enabled only
+on the /search URL and when the "center alignment" preference is enabled.
+*/
+
+@media screen and (min-width: @phone) {
+  .center-aligment-yes #main_results {
+    --center-page-width: 48rem;
+  }
+}
+
+@media screen and (min-width: 62rem) {
+  .center-aligment-yes #main_results {
+    --center-page-width: 60rem;
+  }
+}
+
+@media screen and (min-width: @tablet) {
+  .center-aligment-yes #main_results {
+    --center-page-width: 73rem;
+  }
+}
+
+@media screen and (min-width: @phone) and (max-width: @tablet) {
+  // any change must be reset in @media screen and (min-width: @tablet) { ... }
+  .center-aligment-yes #main_results {
+    #results {
+      grid-template-columns: 60% calc(40% - @results-gap);
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    #urls {
+      .ltr-margin-left(3rem);
+    }
+
+    #sidebar {
+      .ltr-margin-right(1rem);
+    }
+
+    #backToTop {
+      .ltr-left(calc(60% + 1rem));
+    }
+  }
+}
+
+@media screen and (min-width: @tablet) {
+  .center-aligment-yes #main_results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    #search {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    #search_header {
+      grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width);
+      grid-template-areas: "na logo search" "na spacer categories";
+      column-gap: 1.2rem;  // from search.less
+      width: 100%;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .search_filters {
+      .ltr-margin-left(0.5rem);
+      width: var(--center-page-width);
+    }
+
+    #results {
+      // from style.less (when screen width = @tablet, reset layout from tablet)
+      .ltr-margin-right(2rem);
+      .ltr-margin-left(@results-offset);
+      //
+
+      &.only_template_images,
+      &.image-detail-open {
+        // * grid-template-columns and .ltr-margin-left are set in style.less
+        // * With .image-detail-open.only_template_images, the width is set in detail.less
+        // * #results is going to be centered because of the #main_results rules,
+        //   align-self aligns the results on the left or right according to the language.
+        align-self: flex-start;
+      }
+
+      &:not(.only_template_images):not(.image-detail-open) {
+        // the gap is set in style.less
+        .ltr-margin-left(1.5rem);
+        grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;
+
+        #backToTop {
+          .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
+        }
+      }
+
+      .result .content {
+        max-width: inherit;
+      }
+    }
+
+    // from style.less (when screen width = @tablet, reset layout from tablet)
+    #urls {
+      .ltr-margin-left(0);
+    }
+
+    #sidebar {
+      .ltr-margin-right(0);
+    }
+  }
+}

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:
@@ -698,7 +701,11 @@ article[data-vim-selected].category-social {
   opacity: 1;
 }
 
-@media screen and (max-width: @tablet) {
+/*
+  tablet layout
+*/
+
+.results-tablet() {
   .page_with_header {
     margin: 2rem 0.5rem;
     width: auto;
@@ -799,6 +806,17 @@ article[data-vim-selected].category-social {
   }
 }
 
+@media screen and (min-width: @phone) and (max-width: @tablet) {
+  // when .center-aligment-yes, see style-center.less
+  // the media query includes "min-width: @phone"
+  // because the phone layout includes the tablet layout unconditionally.
+  .center-aligment-no {
+    .results-tablet();
+  }
+}
+
+/* Misc */
+
 #main_results div#results.only_template_images {
   margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
@@ -837,7 +855,14 @@ article[data-vim-selected].category-social {
   }
 }
 
+/*
+  phone layout
+*/
+
 @media screen and (max-width: @phone) {
+  // based on the tablet layout
+  .results-tablet();
+
   html {
     background-color: var(--color-base-background-mobile);
   }
@@ -888,6 +913,10 @@ article[data-vim-selected].category-social {
   }
 }
 
+/*
+  small-phone layout
+*/
+
 @media screen and (max-width: @small-phone) {
   .result-videos {
     img.thumbnail {