Improve result count display and header padding in smart theme

- Add result count display with number of results
- Adjust header padding for preferences and search pages
- Update LTR and RTL CSS files to support new styling
- Modify SCSS files to use consistent positioning and padding

searx/static/themes/smart/css/ltr-style.css

@@ -772,6 +772,10 @@ img, video {
   padding: 0 !important;
 }
 
+#preferences #search.header {
+  padding-top: .5rem !important;
+}
+
 #preferences .links {
   grid-area: links;
   justify-content: end;
@@ -1091,6 +1095,13 @@ main:has(.not-found) .button {
   }
 }
 
+#results .result-count {
+  color: var(--secondary-text-color);
+  text-align: end;
+  grid-area: amount;
+  font-size: .8rem;
+}
+
 #results footer {
   grid-area: footer;
 }
@@ -1436,7 +1447,7 @@ footer .footer-links {
 
 #search.header {
   grid-area: search;
-  padding: 1rem 0;
+  padding: 1.5rem 0 1rem;
   position: relative;
 }
 

searx/static/themes/smart/css/rtl-style.css

@@ -307,7 +307,7 @@ img, video {
   transition: opacity .25s ease-in-out;
   position: absolute;
   bottom: 100%;
-  left: 50%;
+  right: 50%;
   transform: translate(-50%, -20%);
 }
 
@@ -322,7 +322,7 @@ img, video {
   transition: opacity .25s ease-in-out;
   position: absolute;
   bottom: 100%;
-  left: 50%;
+  right: 50%;
   transform: translate(calc(-50% - 1rem), 40%);
 }
 
@@ -718,6 +718,10 @@ img, video {
   padding: 0 !important;
 }
 
+#preferences #search.header {
+  padding-top: .5rem !important;
+}
+
 #preferences .links {
   grid-area: links;
   justify-content: end;
@@ -858,7 +862,7 @@ fieldset .container .name {
 }
 
 fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
-  left: 100%;
+  right: 100%;
 }
 
 fieldset .container .name svg {
@@ -1037,6 +1041,13 @@ main:has(.not-found) .button {
   }
 }
 
+#results .result-count {
+  color: var(--secondary-text-color);
+  text-align: end;
+  grid-area: amount;
+  font-size: .8rem;
+}
+
 #results footer {
   grid-area: footer;
 }
@@ -1382,7 +1393,7 @@ footer .footer-links {
 
 #search.header {
   grid-area: search;
-  padding: 1rem 0;
+  padding: 1.5rem 0 1rem;
   position: relative;
 }
 

searx/static/themes/smart/src/scss/_tooltip.scss

@@ -8,7 +8,7 @@
     content: attr(tooltip);
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    @include mixin.left(50%);
     transform: translate(-50%, -20%);
     background: var(--tooltip-background-color);
     color: var(--filled-text-color);
@@ -24,7 +24,7 @@
     content: " ";
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    @include mixin.left(50%);
     transform: translate(calc(-50% - 1rem), 40%);
     white-space: nowrap;
     z-index: 1;

searx/static/themes/smart/src/scss/preferences.scss

@@ -17,11 +17,16 @@
         padding: 1rem 4rem;
     }
 
+
     .header {
         grid-area: header !important;
         padding: 0 !important;
     }
 
+    #search.header {
+        padding-top: .5rem !important;
+    }
+
     .links {
         grid-area: links;
         align-items: center;
@@ -162,7 +167,7 @@ fieldset {
             align-items: center;
 
             &:not(#pref_safesearch)[tooltip]::after {
-                left: 100%;
+                @include mixin.left(100%);
             }
 
             svg {

searx/static/themes/smart/src/scss/style.scss

@@ -204,6 +204,13 @@ main:has(.not-found) {
         padding: 0 4rem;
     }
 
+    .result-count {
+        grid-area: amount;
+        font-size: .8rem;
+        color: var(--secondary-text-color);
+        text-align: end;
+    }
+
     footer {
         grid-area: footer;
     }
@@ -561,7 +568,7 @@ footer {
 #search.header {
     position: relative;
     grid-area: search;
-    padding: 1rem 0;
+    padding: 1.5rem 0 1rem;
 
     .header {
         display: flex;

searx/templates/smart/results.html

@@ -57,7 +57,12 @@ block body %} {% include 'smart/madules/search_header.html' %}
 <div class="info-panel">
     {% if infoboxes %} {% include 'smart/madules/infoboxs.html' %} {% endif %}
 </div>
-{% if 'images.html' in results|map(attribute='template')|unique|list%}
+{%- if number_of_results != '0' -%}
+<p class="result-count">
+    <small>{{ _('Number of results') }}: {{ number_of_results }}</small>
+</p>
+{%- endif -%} {% if 'images.html' in
+results|map(attribute='template')|unique|list%}
 <div class="image-details-container">
     <div class="image-details" id="image-details">
         <img src=".." alt=".." id="image-src" />