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 -%}

{{ result_link(result.url, result.title|safe) }}

{%- endmacro -%} {%- macro result_sub_header(result) -%} {%- if result.publishedDate %}{% endif -%} - {%- if result.length %}
{{ _('Length') }}: {{ result.length }}
{% endif -%} + + {%- if result.length and not result.thumbnail %}
{{ _('Length') }}: {{ result.length }}
{% endif -%} {%- if result.views %}
{{ _('Views') }}: {{ result.views }}
{% endif -%} {%- if result.author %}
{{ _('Author') }}: {{ result.author }}
{% endif -%} {%- if result.metadata %}
{{ result.metadata|safe }}
{% endif -%}