diff --git a/client/simple/src/less/style.less b/client/simple/src/less/style.less
index 4859b33a9..027e8d2bf 100644
--- a/client/simple/src/less/style.less
+++ b/client/simple/src/less/style.less
@@ -169,6 +169,17 @@ article[data-vim-selected].category-social {
.rounded-corners;
}
+.image-label-bottom-right() {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ background: var(--color-image-resolution-background);
+ padding: 0.3rem 0.5rem;
+ font-size: 0.9rem;
+ color: var(--color-image-resolution-font);
+ border-top-left-radius: 0.3rem;
+}
+
.result {
margin: @results-margin 0;
padding: @result-padding;
@@ -295,12 +306,22 @@ article[data-vim-selected].category-social {
color: var(--color-result-description-highlight-font);
}
- img.thumbnail {
+ a.thumbnail_link {
+ position: relative;
+ margin-top: 0.6rem;
+ .ltr-margin-right(1rem);
.ltr-float-left();
- padding-top: 0.6rem;
- .ltr-padding-right(1rem);
- width: 7rem;
- height: unset; // remove height value that was needed for lazy loading
+
+ img.thumbnail {
+ width: 7rem;
+ height: unset; // remove height value that was needed for lazy loading
+ display: block;
+ }
+
+ .thumbnail_length {
+ .image-label-bottom-right();
+ right: 6px;
+ }
}
.break {
@@ -391,23 +412,19 @@ article[data-vim-selected].category-social {
}
.result-videos {
- img.thumbnail {
- .ltr-float-left();
- padding-top: 0.6rem;
- .ltr-padding-right(1rem);
+ a.thumbnail_link img.thumbnail {
width: 20rem;
- height: unset; // remove height value that was needed for lazy loading
}
-}
-.result-videos .content {
- overflow: hidden;
-}
+ .content {
+ overflow: hidden;
+ }
-.result-videos .embedded-video iframe {
- width: 100%;
- aspect-ratio: 16 / 9;
- padding: 10px 0 0 0;
+ .embedded-video iframe {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ padding: 10px 0 0 0;
+ }
}
@supports not (aspect-ratio: 1 / 1) {
@@ -472,14 +489,7 @@ article[data-vim-selected].category-social {
}
.image_resolution {
- position: absolute;
- right: 0;
- bottom: 0;
- background: var(--color-image-resolution-background);
- padding: 0.3rem 0.5rem;
- font-size: 0.9rem;
- color: var(--color-image-resolution-font);
- border-top-left-radius: 0.3rem;
+ .image-label-bottom-right();
}
span.title,
diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html
index df8469d72..43be87615 100644
--- a/searx/templates/simple/macros.html
+++ b/searx/templates/simple/macros.html
@@ -30,14 +30,15 @@
{%- endfor %}
{{- result_close_link() -}}
- {%- if result.thumbnail %}{{ result_open_link(result.url) }}{{ result_close_link() }}{% endif -%}
+ {%- if result.thumbnail %}{{ result_open_link(result.url, classes='thumbnail_link') }}
{%- if result.length -%}{{ result.length }}{%- endif -%}{{ result_close_link() }}{% endif -%}