[fix] use input elements for pagination requests

* use html input elements instead of buttons for the pagination forms at the bottom of the result page
* move the less section that hides the pagination number widget on mobile to the mobile section
* clean up the less code for styling the numbers of the pagination widget
* fix: add the margin for box results (like in news category) to the bottom of the result to have a margin between pagination widget and article result

2 files changed, 12 insertions, 18 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index d5fb73017..962dbeba0 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -362,7 +362,7 @@ article[data-vim-selected].category-social {
 .category-files,
 .category-social {
   border: 1px solid var(--color-result-border);
-  margin: 1rem @results-tablet-offset 0 @results-tablet-offset !important;
+  margin: 0 @results-tablet-offset 1rem @results-tablet-offset !important;
   .rounded-corners;
 }
 
@@ -742,26 +742,16 @@ article[data-vim-selected].category-social {
   overflow: hidden;
 }
 
-@media screen and (max-width: calc(@phone - 0.5px)) {
-  .numbered_pagination {
-    display: none;
-  }
-}
-
 .page_number {
-  background: none !important;
-  border: none !important;
+  background: transparent !important;
   color: var(--color-result-link-font) !important;
-  text-decoration: underline !important;
-  cursor: pointer !important;
+  text-decoration: underline;
 }
 
 .page_number_current {
-  background: none !important;
-  border: none !important;
-  color: var(--color-result-link-visited-font) !important;
-  text-decoration: none !important;
-  cursor: pointer !important;
+  background: transparent;
+  color: var(--color-result-link-visited-font);
+  border: none;
 }
 
 #apis {
@@ -1039,6 +1029,10 @@ article[data-vim-selected].category-social {
     background-color: var(--color-sidebar-background);
   }
 
+  .numbered_pagination {
+    display: none;
+  }
+
   .result-paper {
     .attributes {
       display: block;
diff --git a/searx/templates/simple/results.html b/searx/templates/simple/results.html
index b7a6cb9ed..755610e5b 100644
--- a/searx/templates/simple/results.html
+++ b/searx/templates/simple/results.html
@@ -209,9 +209,9 @@
                 {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
                 {{- engine_data_form(engine_data) -}}
                 {% if pageno == x %}
-                <button role="link" class="page_number_current" type="button">{{ x }}</button>
+                <input role="link" class="page_number_current" type="button" value="{{ x }}">
                 {% else %}
-                <button role="link" class="page_number" type="submit">{{ x }}</button>
+                <input role="link" class="page_number" type="submit" value="{{ x }}">
                 {% endif %}
             </form>
         {% endfor %}