Add tooltip styling for smart theme

- Create new SCSS file for tooltip styles
- Add tooltip background color variables in color definitions
- Implement hover-based tooltip with CSS pseudo-elements
- Support both light and dark color schemes
- Add tooltip styling to LTR and RTL CSS files

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

@@ -305,6 +305,7 @@ img, video {
   --filled-text-color: #fff;
   --border-color: #b3b3b3;
   --secondary-border-color: #d9d9d9;
+  --tooltip-background-color: #00000080;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -318,6 +319,7 @@ img, video {
     --filled-text-color: #fff;
     --border-color: #b3b3b3;
     --secondary-border-color: #d9d9d9;
+    --tooltip-background-color: #00000080;
   }
 }
 
@@ -343,6 +345,46 @@ img, video {
   width: 100%;
 }
 
+[tooltip] {
+  position: relative;
+}
+
+[tooltip]:after {
+  content: attr(tooltip);
+  background: var(--tooltip-background-color);
+  color: var(--filled-text-color);
+  white-space: nowrap;
+  z-index: 1;
+  opacity: 0;
+  border-radius: .5rem;
+  padding: .25rem 1rem;
+  transition: opacity .25s ease-in-out;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[tooltip]:before {
+  content: " ";
+  white-space: nowrap;
+  z-index: 1;
+  opacity: 0;
+  border-style: solid;
+  border-width: 5px;
+  border-color: var(--tooltip-background-color) transparent transparent transparent;
+  transition: opacity .25s ease-in-out;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(calc(-50% - 1rem), 100%);
+}
+
+[tooltip]:hover:after, [tooltip]:hover:before {
+  opacity: 1;
+  transition: opacity .25s ease-in-out .5s;
+}
+
 .info-box {
   background: var(--background-color);
   border-radius: 2rem;

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

@@ -251,6 +251,7 @@ img, video {
   --filled-text-color: #fff;
   --border-color: #b3b3b3;
   --secondary-border-color: #d9d9d9;
+  --tooltip-background-color: #00000080;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -264,6 +265,7 @@ img, video {
     --filled-text-color: #fff;
     --border-color: #b3b3b3;
     --secondary-border-color: #d9d9d9;
+    --tooltip-background-color: #00000080;
   }
 }
 
@@ -289,6 +291,46 @@ img, video {
   width: 100%;
 }
 
+[tooltip] {
+  position: relative;
+}
+
+[tooltip]:after {
+  content: attr(tooltip);
+  background: var(--tooltip-background-color);
+  color: var(--filled-text-color);
+  white-space: nowrap;
+  z-index: 1;
+  opacity: 0;
+  border-radius: .5rem;
+  padding: .25rem 1rem;
+  transition: opacity .25s ease-in-out;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[tooltip]:before {
+  content: " ";
+  white-space: nowrap;
+  z-index: 1;
+  opacity: 0;
+  border-style: solid;
+  border-width: 5px;
+  border-color: var(--tooltip-background-color) transparent transparent transparent;
+  transition: opacity .25s ease-in-out;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(calc(-50% - 1rem), 100%);
+}
+
+[tooltip]:hover:after, [tooltip]:hover:before {
+  opacity: 1;
+  transition: opacity .25s ease-in-out .5s;
+}
+
 .info-box {
   background: var(--background-color);
   border-radius: 2rem;

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

@@ -12,6 +12,7 @@
     --filled-text-color: #{$filled-text-color};
     --border-color: #{color.mix($text-color, $background-color, 30%)};
     --secondary-border-color: #{color.mix($text-color, $background-color, 15%)};
+    --tooltip-background-color: #{$tooltip-background-color};
 }
 
 
@@ -27,5 +28,6 @@
         --filled-text-color: #{$filled-text-color-dark};
         --border-color: #{color.mix($text-color-dark, $background-color-dark, 30%)};
         --secondary-border-color: #{color.mix($text-color-dark, $background-color-dark, 15%)};
+        --tooltip-background-color: #{$tooltip-background-color-dark};
     }
 }

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

@@ -0,0 +1,47 @@
+@use './mixins.scss' as mixin;
+
+*[tooltip] {
+    position: relative;
+}
+
+*[tooltip]::after {
+    content: attr(tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--tooltip-background-color);
+    color: var(--filled-text-color);
+    padding: .25rem 1rem;
+    @include mixin.rounded(sm);
+    white-space: nowrap;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 250ms ease-in-out;
+}
+
+*[tooltip]::before {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translate(calc(-50% - 1rem), 100%);
+    white-space: nowrap;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 250ms ease-in-out;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--tooltip-background-color) transparent transparent transparent;
+}
+
+
+*[tooltip]:hover::after {
+    opacity: 1;
+    transition: opacity 250ms ease-in-out 500ms;
+}
+
+*[tooltip]:hover::before {
+    opacity: 1;
+    transition: opacity 250ms ease-in-out 500ms;
+}

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

@@ -8,6 +8,7 @@ $background-color: #ffffff;
 $secondary-background-color: #f8f8f8;
 $text-color: #000000;
 $filled-text-color: #ffffff;
+$tooltip-background-color: rgba(0, 0, 0, .5);
 
 // Dark theme
 $primary-color-dark: $primary-color;
@@ -16,6 +17,7 @@ $background-color-dark: $background-color;
 $secondary-background-color-dark: $secondary-background-color;
 $text-color-dark: $text-color;
 $filled-text-color-dark: $filled-text-color;
+$tooltip-background-color-dark: $tooltip-background-color;
 
 // - Screens -
 

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

@@ -15,6 +15,9 @@ $dir: ltr !default;
 // Button
 @use 'button';
 
+// Tooltip
+@use 'tooltip';
+
 @forward './infobox.scss';
 
 // Result Styles