mirror of https://github.com/searxng/searxng
commit
8985d3e6ef
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,243 @@
|
||||
#main_results #results.image-detail-open.only_template_images {
|
||||
width: 59.25rem !important;
|
||||
}
|
||||
|
||||
#main_results #results.only_template_images.image-detail-open #backToTop {
|
||||
left: 56.75rem !important;
|
||||
right: inherit;
|
||||
}
|
||||
|
||||
article.result-images .detail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
left: 60rem;
|
||||
right: 0;
|
||||
top: 7rem;
|
||||
bottom: 0;
|
||||
background: var(--color-result-detail-background);
|
||||
border: 1px solid var(--color-result-detail-background);
|
||||
z-index: 10000;
|
||||
padding: 4rem 3rem 3rem 3rem;
|
||||
|
||||
a.result-images-source {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
object-fit: contain;
|
||||
width: inherit;
|
||||
max-width: 100%;
|
||||
min-height: inherit;
|
||||
max-height: calc(100vh - 25rem - 7rem);
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.result-images-labels {
|
||||
color: var(--color-result-detail-font);
|
||||
max-height: 16rem;
|
||||
min-height: 16rem;
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--color-result-detail-hr);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-result-detail-label-font);
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
p,
|
||||
a {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p.result-content {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.result-url {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.result-content:hover,
|
||||
p.result-url:hover {
|
||||
position: relative;
|
||||
overflow: inherit !important;
|
||||
background: var(--color-result-detail-background);
|
||||
text-overflow: inherit !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: var(--color-result-detail-link);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-close {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
a.result-detail-previous {
|
||||
top: 1rem;
|
||||
right: 6rem;
|
||||
// center the icon by moving it slightly on the left
|
||||
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
|
||||
}
|
||||
|
||||
a.result-detail-next {
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
a.result-detail-close,
|
||||
a.result-detail-next,
|
||||
a.result-detail-previous {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
filter: opacity(40%);
|
||||
z-index: 2000002;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-next,
|
||||
a.result-detail-previous {
|
||||
span::before {
|
||||
// vertical center small icons
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-close,
|
||||
a.result-detail-close:visited,
|
||||
a.result-detail-close:hover,
|
||||
a.result-detail-close:active,
|
||||
a.result-detail-previous,
|
||||
a.result-detail-previous:visited,
|
||||
a.result-detail-previous:hover,
|
||||
a.result-detail-previous:active,
|
||||
a.result-detail-next,
|
||||
a.result-detail-next:visited,
|
||||
a.result-detail-next:hover,
|
||||
a.result-detail-next:active {
|
||||
color: var(--color-result-detail-font);
|
||||
background: var(--color-result-detail-background);
|
||||
border: 1px solid var(--color-result-detail-font);
|
||||
}
|
||||
|
||||
a.result-detail-close:focus,
|
||||
a.result-detail-close:hover,
|
||||
a.result-detail-previous:focus,
|
||||
a.result-detail-previous:hover,
|
||||
a.result-detail-next:focus,
|
||||
a.result-detail-next:hover {
|
||||
filter: opacity(80%);
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 50%;
|
||||
border-top: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-right: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
|
||||
}
|
||||
}
|
||||
|
||||
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
|
||||
a.result-images-source img {
|
||||
max-height: calc(100vh - 25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
a.result-images-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 24rem);
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-next {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
|
||||
a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 20rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-images-labels p span {
|
||||
width: inherit;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
@ -1,4 +1,28 @@
|
||||
<article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">
|
||||
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><img class="image_thumbnail" src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}" /></a>
|
||||
<span class="url"><a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} class="small_font">{{ result.parsed_url[0] }}://{{ result.parsed_url[1] }}</a></span>
|
||||
<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" 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 }}" />{{- "" -}}
|
||||
<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
|
||||
</a>{{- "" -}}
|
||||
<div class="detail">{{- "" -}}
|
||||
<a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
|
||||
<a class="result-detail-previous" href="#">{{ icon_small('chevron-left') }}</a>{{- "" -}}
|
||||
<a class="result-detail-next" href="#">{{ icon_small('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 }}">
|
||||
{%- else -%}
|
||||
<img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy">
|
||||
{%- endif -%}
|
||||
</a>{{- "" -}}
|
||||
<div class="result-images-labels">{{- "" -}}
|
||||
<h4>{{ result.title|striptags }}</h4>{{- "" -}}
|
||||
<p class="result-content">{%- if result.content %}{{ result.content|striptags }}{% else %} {% endif -%}</p>{{- "" -}}
|
||||
<hr>{{- "" -}}
|
||||
<p class="result-author">{%- if result.author %}<span>{{ _('Author') }}:</span>{{ result.author|striptags }}{% else %} {% endif -%}</p>{{- "" -}}
|
||||
<p class="result-format">{%- if result.img_format %}<span>{{ _('Format') }}:</span>{{ result.img_format }}{% else %} {% endif -%}</p>{{- "" -}}
|
||||
<p class="result-source">{%- if result.source %}<span>{{ _('Source') }}:</span>{{ result.source }}{% else %} {% endif -%}</p>{{- "" -}}
|
||||
<p class="result-engine"><span>{{ _('Engine') }}:</span>{{ result.engine }}</p>{{- "" -}}{{- "" -}}
|
||||
<p class="result-url"><span>{{ _('View source') }}:</span><a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.url }}">{{ result.url }}</a></p>{{- "" -}}
|
||||
</div>{{- "" -}}
|
||||
</div>{{- "" -}}
|
||||
</article>
|
||||
|
Loading…
Reference in New Issue