Merge pull request #556 from return42/fix-tooltip

[simple theme] fix tooltip and improve background of an transparent image in the !images results

searx/static/themes/simple/css/searxng-rtl.css

@@ -784,7 +784,7 @@ template {
   --color-result-search-url-font: #000;
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #000bbb;
+  --color-result-image-background: #fff;
   --color-settings-tr-hover: #f7f7f7;
   --color-settings-engine-description-font: #909090;
   --color-result-detail-font: #fff;
@@ -875,7 +875,7 @@ template {
     --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
     --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
     --color-result-image-span-font: #fff;
-    --color-result-image-background: #8af;
+    --color-result-image-background: #222;
     --color-settings-tr-hover: #2d2d2d;
     --color-settings-engine-description-font: #909090;
     --color-toolkit-badge-font: #fff;
@@ -959,7 +959,7 @@ template {
   --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #8af;
+  --color-result-image-background: #222;
   --color-settings-tr-hover: #2d2d2d;
   --color-settings-engine-description-font: #909090;
   --color-toolkit-badge-font: #fff;

searx/static/themes/simple/css/searxng.css

@@ -784,7 +784,7 @@ template {
   --color-result-search-url-font: #000;
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #000bbb;
+  --color-result-image-background: #fff;
   --color-settings-tr-hover: #f7f7f7;
   --color-settings-engine-description-font: #909090;
   --color-result-detail-font: #fff;
@@ -875,7 +875,7 @@ template {
     --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
     --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
     --color-result-image-span-font: #fff;
-    --color-result-image-background: #8af;
+    --color-result-image-background: #222;
     --color-settings-tr-hover: #2d2d2d;
     --color-settings-engine-description-font: #909090;
     --color-toolkit-badge-font: #fff;
@@ -959,7 +959,7 @@ template {
   --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #8af;
+  --color-result-image-background: #222;
   --color-settings-tr-hover: #2d2d2d;
   --color-settings-engine-description-font: #909090;
   --color-toolkit-badge-font: #fff;

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

@@ -68,7 +68,7 @@
   // Images Colors
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #000bbb;
+  --color-result-image-background: #fff;
   /// Settings Colors
   --color-settings-tr-hover: #f7f7f7;
   --color-settings-engine-description-font: darken(#dcdcdc, 30%);
@@ -176,7 +176,7 @@
   // Images Colors
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #8af;
+  --color-result-image-background: #222;
   /// Settings Colors
   --color-settings-tr-hover: #2d2d2d;
   --color-settings-engine-description-font: darken(#dcdcdc, 30%);

searx/templates/simple/result_templates/images.html

@@ -1,6 +1,6 @@
 <article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
         <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
-                <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}">{{- "" -}}
+                <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" alt="{{ result.title|striptags }}">{{- "" -}}
                 <span class="title">{{ result.title|striptags }}</span>{{- "" -}}
         </a>{{- "" -}}
         <div class="detail">{{- "" -}}
@@ -9,9 +9,9 @@
                 <a class="result-detail-next" href="#">{{ icon('chevron-right') }}</a>{{- "" -}}
                 <a class="result-images-source" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">
                         {%- if result.thumbnail_src -%}
-                                <img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}">
+                                <img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}">
                         {%- else -%}
-                                <img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy" title="{{ result.title|striptags }}">
+                                <img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy">
                         {%- endif -%}
                 </a>{{- "" -}}
                 <div class="result-images-labels">{{- "" -}}