forked from Archives/searxng
Merge pull request #376 from dalf/simple-image-detail
Simple theme: image detail
This commit is contained in:
Alexandre Flament
GitHub
commit
8985d3e6ef
@ -11,11 +11,12 @@
|
||||
*/
|
||||
|
||||
(function (w, d) {
|
||||
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
|
||||
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
|
||||
this.container_selector = container_selector;
|
||||
this.results_selector = results_selector;
|
||||
this.img_selector = img_selector;
|
||||
this.margin = margin;
|
||||
this.verticalMargin = verticalMargin;
|
||||
this.horizontalMargin = horizontalMargin;
|
||||
this.maxHeight = maxHeight;
|
||||
this.isAlignDone = true;
|
||||
}
|
||||
@ -45,7 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
|
||||
return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
|
||||
};
|
||||
|
||||
ImageLayout.prototype._setSize = function (images, height) {
|
||||
@ -62,10 +63,10 @@
|
||||
}
|
||||
img.style.width = imgWidth + 'px';
|
||||
img.style.height = height + 'px';
|
||||
img.style.marginLeft = '3px';
|
||||
img.style.marginTop = '3px';
|
||||
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = this.margin - 7 + 'px';
|
||||
img.style.marginLeft = this.horizontalMargin + 'px';
|
||||
img.style.marginTop = this.horizontalMargin + 'px';
|
||||
img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = this.verticalMargin - 7 + 'px';
|
||||
resultNode = img.parentNode.parentNode;
|
||||
if (!resultNode.classList.contains('js')) {
|
||||
resultNode.classList.add('js');
|
||||
|
||||
Binary file not shown.
@ -179,7 +179,7 @@ $(document).ready(function(){
|
||||
/**
|
||||
* Layout images according to their sizes
|
||||
*/
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
|
||||
searxng.image_thumbnail_layout.watch();
|
||||
});
|
||||
;/**
|
||||
@ -330,11 +330,12 @@ $(document).ready(function(){
|
||||
*/
|
||||
|
||||
(function (w, d) {
|
||||
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
|
||||
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
|
||||
this.container_selector = container_selector;
|
||||
this.results_selector = results_selector;
|
||||
this.img_selector = img_selector;
|
||||
this.margin = margin;
|
||||
this.verticalMargin = verticalMargin;
|
||||
this.horizontalMargin = horizontalMargin;
|
||||
this.maxHeight = maxHeight;
|
||||
this.isAlignDone = true;
|
||||
}
|
||||
@ -364,7 +365,7 @@ $(document).ready(function(){
|
||||
}
|
||||
}
|
||||
|
||||
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
|
||||
return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
|
||||
};
|
||||
|
||||
ImageLayout.prototype._setSize = function (images, height) {
|
||||
@ -381,10 +382,10 @@ $(document).ready(function(){
|
||||
}
|
||||
img.style.width = imgWidth + 'px';
|
||||
img.style.height = height + 'px';
|
||||
img.style.marginLeft = '3px';
|
||||
img.style.marginTop = '3px';
|
||||
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = this.margin - 7 + 'px';
|
||||
img.style.marginLeft = this.horizontalMargin + 'px';
|
||||
img.style.marginTop = this.horizontalMargin + 'px';
|
||||
img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = this.verticalMargin - 7 + 'px';
|
||||
resultNode = img.parentNode.parentNode;
|
||||
if (!resultNode.classList.contains('js')) {
|
||||
resultNode.classList.add('js');
|
||||
|
||||
BIN
searx/static/themes/oscar/js/searxng.min.js
vendored
BIN
searx/static/themes/oscar/js/searxng.min.js
vendored
Binary file not shown.
Binary file not shown.
@ -103,6 +103,6 @@ $(document).ready(function(){
|
||||
/**
|
||||
* Layout images according to their sizes
|
||||
*/
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
|
||||
searxng.image_thumbnail_layout.watch();
|
||||
});
|
||||
|
||||
@ -871,6 +871,13 @@ html {
|
||||
--color-result-image-background: #000bbb;
|
||||
--color-settings-tr-hover: #f7f7f7;
|
||||
--color-settings-engine-description-font: #909090;
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #000;
|
||||
--color-result-detail-hr: #333;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #777;
|
||||
--color-toolkit-kbd-font: #fff;
|
||||
@ -941,6 +948,13 @@ html {
|
||||
--color-result-engines-font: #777;
|
||||
--color-result-search-url-border: #333;
|
||||
--color-result-search-url-font: #fff;
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #000;
|
||||
--color-result-detail-hr: #333;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--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;
|
||||
@ -965,8 +979,8 @@ html {
|
||||
--color-toolkit-engine-tooltip-border: #333;
|
||||
--color-toolkit-engine-tooltip-shadow: #444;
|
||||
--color-toolkit-engine-tooltip-background: #222;
|
||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
@ -1971,6 +1985,213 @@ td:hover .engine-tooltip,
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source 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;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
|
||||
color: var(--color-result-detail-font);
|
||||
max-height: 16rem;
|
||||
min-height: 16rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
|
||||
border-top: 1px solid var(--color-result-detail-hr);
|
||||
border-bottom: none;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
|
||||
color: var(--color-result-detail-label-font);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
|
||||
text-align: left;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
|
||||
position: relative;
|
||||
overflow: inherit !important;
|
||||
background: var(--color-result-detail-background);
|
||||
text-overflow: inherit !important;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:active {
|
||||
color: var(--color-result-detail-link);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
|
||||
top: 1rem;
|
||||
right: 6rem;
|
||||
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
filter: opacity(40%);
|
||||
z-index: 2000002;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span::before,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span::before {
|
||||
vertical-align: sub;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail 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);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
|
||||
filter: opacity(80%);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .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;
|
||||
}
|
||||
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail a.result-images-source img {
|
||||
max-height: calc(100vh - 25rem);
|
||||
}
|
||||
@media screen and (max-width: 80em) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 24rem);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 50em) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 20rem);
|
||||
margin: 0;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
|
||||
width: inherit;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
#main_index {
|
||||
margin-top: 16em;
|
||||
}
|
||||
@ -2457,6 +2678,9 @@ article[data-vim-selected]::before {
|
||||
article.result-images[data-vim-selected] {
|
||||
background: var(--color-result-vim-arrow);
|
||||
}
|
||||
article.result-images[data-vim-selected] .image_thumbnail {
|
||||
filter: opacity(60%);
|
||||
}
|
||||
article.result-images[data-vim-selected]::before {
|
||||
display: none;
|
||||
content: "";
|
||||
@ -2577,17 +2801,17 @@ article.result-images[data-vim-selected]::before {
|
||||
}
|
||||
.result-images img {
|
||||
float: inherit;
|
||||
margin: 0;
|
||||
margin: 0.125rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
max-height: 200px;
|
||||
background: var(--color-result-image-background);
|
||||
}
|
||||
.result-images span a {
|
||||
.result-images span.title {
|
||||
display: none;
|
||||
color: var(--color-result-image-span-font);
|
||||
}
|
||||
.result-images:hover span a {
|
||||
.result-images:hover span.title {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -2824,6 +3048,9 @@ article.result-images[data-vim-selected]::before {
|
||||
margin: 0;
|
||||
padding: 0.7em;
|
||||
}
|
||||
#results.scrolling #backToTop {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: 80em) {
|
||||
#main_preferences,
|
||||
#main_about,
|
||||
|
||||
BIN
searx/static/themes/simple/css/searxng-rtl.min.css
vendored
BIN
searx/static/themes/simple/css/searxng-rtl.min.css
vendored
Binary file not shown.
Binary file not shown.
@ -871,6 +871,13 @@ html {
|
||||
--color-result-image-background: #000bbb;
|
||||
--color-settings-tr-hover: #f7f7f7;
|
||||
--color-settings-engine-description-font: #909090;
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #000;
|
||||
--color-result-detail-hr: #333;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #777;
|
||||
--color-toolkit-kbd-font: #fff;
|
||||
@ -941,6 +948,13 @@ html {
|
||||
--color-result-engines-font: #777;
|
||||
--color-result-search-url-border: #333;
|
||||
--color-result-search-url-font: #fff;
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #000;
|
||||
--color-result-detail-hr: #333;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--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;
|
||||
@ -965,8 +979,8 @@ html {
|
||||
--color-toolkit-engine-tooltip-border: #333;
|
||||
--color-toolkit-engine-tooltip-shadow: #444;
|
||||
--color-toolkit-engine-tooltip-background: #222;
|
||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
/*
|
||||
@ -1971,6 +1985,213 @@ td:hover .engine-tooltip,
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source 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;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
|
||||
color: var(--color-result-detail-font);
|
||||
max-height: 16rem;
|
||||
min-height: 16rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
|
||||
border-top: 1px solid var(--color-result-detail-hr);
|
||||
border-bottom: none;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
|
||||
color: var(--color-result-detail-label-font);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a {
|
||||
text-align: left;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
|
||||
position: relative;
|
||||
overflow: inherit !important;
|
||||
background: var(--color-result-detail-background);
|
||||
text-overflow: inherit !important;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:active {
|
||||
color: var(--color-result-detail-link);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
|
||||
top: 1rem;
|
||||
right: 6rem;
|
||||
padding: 0.4rem 0.5rem 0.4rem 0.3rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
filter: opacity(40%);
|
||||
z-index: 2000002;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span::before,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span::before {
|
||||
vertical-align: sub;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail 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);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus,
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
|
||||
filter: opacity(80%);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .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;
|
||||
}
|
||||
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail a.result-images-source img {
|
||||
max-height: calc(100vh - 25rem);
|
||||
}
|
||||
@media screen and (max-width: 80em) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 24rem);
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 50em) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 20rem);
|
||||
margin: 0;
|
||||
}
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
|
||||
width: inherit;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
#main_index {
|
||||
margin-top: 16em;
|
||||
}
|
||||
@ -2457,6 +2678,9 @@ article[data-vim-selected]::before {
|
||||
article.result-images[data-vim-selected] {
|
||||
background: var(--color-result-vim-arrow);
|
||||
}
|
||||
article.result-images[data-vim-selected] .image_thumbnail {
|
||||
filter: opacity(60%);
|
||||
}
|
||||
article.result-images[data-vim-selected]::before {
|
||||
display: none;
|
||||
content: "";
|
||||
@ -2577,17 +2801,17 @@ article.result-images[data-vim-selected]::before {
|
||||
}
|
||||
.result-images img {
|
||||
float: inherit;
|
||||
margin: 0;
|
||||
margin: 0.125rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
max-height: 200px;
|
||||
background: var(--color-result-image-background);
|
||||
}
|
||||
.result-images span a {
|
||||
.result-images span.title {
|
||||
display: none;
|
||||
color: var(--color-result-image-span-font);
|
||||
}
|
||||
.result-images:hover span a {
|
||||
.result-images:hover span.title {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -2824,6 +3048,9 @@ article.result-images[data-vim-selected]::before {
|
||||
margin: 0;
|
||||
padding: 0.7em;
|
||||
}
|
||||
#results.scrolling #backToTop {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: 80em) {
|
||||
#main_preferences,
|
||||
#main_about,
|
||||
|
||||
BIN
searx/static/themes/simple/css/searxng.min.css
vendored
BIN
searx/static/themes/simple/css/searxng.min.css
vendored
Binary file not shown.
Binary file not shown.
@ -276,9 +276,7 @@ searxng.ready(function() {
|
||||
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
|
||||
var tagName = e.target.tagName.toLowerCase();
|
||||
if (e.keyCode === 27) {
|
||||
if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
|
||||
vimKeys[e.keyCode].fun();
|
||||
}
|
||||
vimKeys[e.keyCode].fun(e);
|
||||
} else {
|
||||
if (e.target === document.body || tagName === 'a' || tagName === 'button') {
|
||||
e.preventDefault();
|
||||
@ -365,9 +363,12 @@ searxng.ready(function() {
|
||||
document.location.reload(true);
|
||||
}
|
||||
|
||||
function removeFocus() {
|
||||
if (document.activeElement) {
|
||||
function removeFocus(e) {
|
||||
const tagName = e.target.tagName.toLowerCase();
|
||||
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
|
||||
document.activeElement.blur();
|
||||
} else {
|
||||
searxng.closeDetail();
|
||||
}
|
||||
}
|
||||
|
||||
@ -437,6 +438,9 @@ searxng.ready(function() {
|
||||
function openResult(newTab) {
|
||||
return function() {
|
||||
var link = document.querySelector('.result[data-vim-selected] h3 a');
|
||||
if (link === null) {
|
||||
link = document.querySelector('.result[data-vim-selected] > a');
|
||||
}
|
||||
if (link !== null) {
|
||||
var url = link.getAttribute('href');
|
||||
if (newTab) {
|
||||
@ -520,6 +524,10 @@ searxng.ready(function() {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
searxng.scrollPageToSelected = scrollPageToSelected;
|
||||
searxng.selectNext = highlightResult('down');
|
||||
searxng.selectPrevious = highlightResult('up');
|
||||
});
|
||||
;/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
/* global L */
|
||||
@ -628,7 +636,7 @@ searxng.ready(function() {
|
||||
'use strict';
|
||||
|
||||
searxng.ready(function() {
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
|
||||
searxng.image_thumbnail_layout.watch();
|
||||
|
||||
searxng.on('.btn-collapse', 'click', function() {
|
||||
@ -656,17 +664,74 @@ searxng.ready(function() {
|
||||
}
|
||||
});
|
||||
|
||||
w.addEventListener('scroll', function() {
|
||||
var e = d.getElementById('backToTop'),
|
||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (e !== null) {
|
||||
if (scrollTop >= 200) {
|
||||
e.style.opacity = 1;
|
||||
} else {
|
||||
e.style.opacity = 0;
|
||||
function selectImage(e) {
|
||||
/*eslint no-unused-vars: 0*/
|
||||
let t = e.target;
|
||||
while (t && t.nodeName != 'ARTICLE') {
|
||||
t = t.parentNode;
|
||||
}
|
||||
if (t) {
|
||||
// load full size image in background
|
||||
const imgElement = t.querySelector('.result-images-source img');
|
||||
const thumbnailElement = t.querySelector('.image_thumbnail');
|
||||
const detailElement = t.querySelector('.detail');
|
||||
if (imgElement) {
|
||||
const imgSrc = imgElement.getAttribute('data-src');
|
||||
if (imgSrc) {
|
||||
const loader = d.createElement('div');
|
||||
const imgLoader = new Image();
|
||||
|
||||
loader.classList.add('loader');
|
||||
detailElement.appendChild(loader);
|
||||
|
||||
imgLoader.onload = e => {
|
||||
imgElement.src = imgSrc;
|
||||
loader.remove();
|
||||
};
|
||||
imgLoader.onerror = e => {
|
||||
loader.remove();
|
||||
};
|
||||
imgLoader.src = imgSrc;
|
||||
imgElement.src = thumbnailElement.src;
|
||||
imgElement.removeAttribute('data-src');
|
||||
}
|
||||
}
|
||||
}
|
||||
d.getElementById('results').classList.add('image-detail-open');
|
||||
searxng.image_thumbnail_layout.align();
|
||||
searxng.scrollPageToSelected();
|
||||
}
|
||||
|
||||
searxng.closeDetail = function(e) {
|
||||
d.getElementById('results').classList.remove('image-detail-open');
|
||||
searxng.image_thumbnail_layout.align();
|
||||
searxng.scrollPageToSelected();
|
||||
}
|
||||
|
||||
searxng.on('.result-images', 'click', e => {
|
||||
e.preventDefault();
|
||||
selectImage(e);
|
||||
});
|
||||
searxng.on('.result-images a', 'focus', selectImage, true);
|
||||
searxng.on('.result-detail-close', 'click', e => {
|
||||
e.preventDefault();
|
||||
searxng.closeDetail();
|
||||
});
|
||||
searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
|
||||
searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
|
||||
|
||||
w.addEventListener('scroll', function() {
|
||||
var e = d.getElementById('backToTop'),
|
||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
|
||||
results = d.getElementById('results');
|
||||
if (e !== null) {
|
||||
if (scrollTop >= 100) {
|
||||
results.classList.add('scrolling');
|
||||
} else {
|
||||
results.classList.remove('scrolling');
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
});
|
||||
|
||||
@ -791,11 +856,12 @@ searxng.ready(function() {
|
||||
*/
|
||||
|
||||
(function (w, d) {
|
||||
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
|
||||
function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
|
||||
this.container_selector = container_selector;
|
||||
this.results_selector = results_selector;
|
||||
this.img_selector = img_selector;
|
||||
this.margin = margin;
|
||||
this.verticalMargin = verticalMargin;
|
||||
this.horizontalMargin = horizontalMargin;
|
||||
this.maxHeight = maxHeight;
|
||||
this.isAlignDone = true;
|
||||
}
|
||||
@ -825,7 +891,7 @@ searxng.ready(function() {
|
||||
}
|
||||
}
|
||||
|
||||
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
|
||||
return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
|
||||
};
|
||||
|
||||
ImageLayout.prototype._setSize = function (images, height) {
|
||||
@ -842,10 +908,10 @@ searxng.ready(function() {
|
||||
}
|
||||
img.style.width = imgWidth + 'px';
|
||||
img.style.height = height + 'px';
|
||||
img.style.marginLeft = '3px';
|
||||
img.style.marginTop = '3px';
|
||||
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = this.margin - 7 + 'px';
|
||||
img.style.marginLeft = this.horizontalMargin + 'px';
|
||||
img.style.marginTop = this.horizontalMargin + 'px';
|
||||
img.style.marginRight = this.verticalMargin - 7 + 'px'; // -4 is the negative margin of the inline element
|
||||
img.style.marginBottom = this.verticalMargin - 7 + 'px';
|
||||
resultNode = img.parentNode.parentNode;
|
||||
if (!resultNode.classList.contains('js')) {
|
||||
resultNode.classList.add('js');
|
||||
|
||||
BIN
searx/static/themes/simple/js/searxng.min.js
vendored
BIN
searx/static/themes/simple/js/searxng.min.js
vendored
Binary file not shown.
Binary file not shown.
@ -124,9 +124,7 @@ searxng.ready(function() {
|
||||
if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
|
||||
var tagName = e.target.tagName.toLowerCase();
|
||||
if (e.keyCode === 27) {
|
||||
if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
|
||||
vimKeys[e.keyCode].fun();
|
||||
}
|
||||
vimKeys[e.keyCode].fun(e);
|
||||
} else {
|
||||
if (e.target === document.body || tagName === 'a' || tagName === 'button') {
|
||||
e.preventDefault();
|
||||
@ -213,9 +211,12 @@ searxng.ready(function() {
|
||||
document.location.reload(true);
|
||||
}
|
||||
|
||||
function removeFocus() {
|
||||
if (document.activeElement) {
|
||||
function removeFocus(e) {
|
||||
const tagName = e.target.tagName.toLowerCase();
|
||||
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
|
||||
document.activeElement.blur();
|
||||
} else {
|
||||
searxng.closeDetail();
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,6 +286,9 @@ searxng.ready(function() {
|
||||
function openResult(newTab) {
|
||||
return function() {
|
||||
var link = document.querySelector('.result[data-vim-selected] h3 a');
|
||||
if (link === null) {
|
||||
link = document.querySelector('.result[data-vim-selected] > a');
|
||||
}
|
||||
if (link !== null) {
|
||||
var url = link.getAttribute('href');
|
||||
if (newTab) {
|
||||
@ -368,4 +372,8 @@ searxng.ready(function() {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
searxng.scrollPageToSelected = scrollPageToSelected;
|
||||
searxng.selectNext = highlightResult('down');
|
||||
searxng.selectPrevious = highlightResult('up');
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
'use strict';
|
||||
|
||||
searxng.ready(function() {
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
|
||||
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
|
||||
searxng.image_thumbnail_layout.watch();
|
||||
|
||||
searxng.on('.btn-collapse', 'click', function() {
|
||||
@ -31,17 +31,74 @@
|
||||
}
|
||||
});
|
||||
|
||||
w.addEventListener('scroll', function() {
|
||||
var e = d.getElementById('backToTop'),
|
||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (e !== null) {
|
||||
if (scrollTop >= 200) {
|
||||
e.style.opacity = 1;
|
||||
} else {
|
||||
e.style.opacity = 0;
|
||||
function selectImage(e) {
|
||||
/*eslint no-unused-vars: 0*/
|
||||
let t = e.target;
|
||||
while (t && t.nodeName != 'ARTICLE') {
|
||||
t = t.parentNode;
|
||||
}
|
||||
if (t) {
|
||||
// load full size image in background
|
||||
const imgElement = t.querySelector('.result-images-source img');
|
||||
const thumbnailElement = t.querySelector('.image_thumbnail');
|
||||
const detailElement = t.querySelector('.detail');
|
||||
if (imgElement) {
|
||||
const imgSrc = imgElement.getAttribute('data-src');
|
||||
if (imgSrc) {
|
||||
const loader = d.createElement('div');
|
||||
const imgLoader = new Image();
|
||||
|
||||
loader.classList.add('loader');
|
||||
detailElement.appendChild(loader);
|
||||
|
||||
imgLoader.onload = e => {
|
||||
imgElement.src = imgSrc;
|
||||
loader.remove();
|
||||
};
|
||||
imgLoader.onerror = e => {
|
||||
loader.remove();
|
||||
};
|
||||
imgLoader.src = imgSrc;
|
||||
imgElement.src = thumbnailElement.src;
|
||||
imgElement.removeAttribute('data-src');
|
||||
}
|
||||
}
|
||||
}
|
||||
d.getElementById('results').classList.add('image-detail-open');
|
||||
searxng.image_thumbnail_layout.align();
|
||||
searxng.scrollPageToSelected();
|
||||
}
|
||||
|
||||
searxng.closeDetail = function(e) {
|
||||
d.getElementById('results').classList.remove('image-detail-open');
|
||||
searxng.image_thumbnail_layout.align();
|
||||
searxng.scrollPageToSelected();
|
||||
}
|
||||
|
||||
searxng.on('.result-images', 'click', e => {
|
||||
e.preventDefault();
|
||||
selectImage(e);
|
||||
});
|
||||
searxng.on('.result-images a', 'focus', selectImage, true);
|
||||
searxng.on('.result-detail-close', 'click', e => {
|
||||
e.preventDefault();
|
||||
searxng.closeDetail();
|
||||
});
|
||||
searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
|
||||
searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
|
||||
|
||||
w.addEventListener('scroll', function() {
|
||||
var e = d.getElementById('backToTop'),
|
||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
|
||||
results = d.getElementById('results');
|
||||
if (e !== null) {
|
||||
if (scrollTop >= 100) {
|
||||
results.classList.add('scrolling');
|
||||
} else {
|
||||
results.classList.remove('scrolling');
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -71,6 +71,14 @@ html {
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #f7f7f7;
|
||||
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
||||
/// Detail modal
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #000;
|
||||
--color-result-detail-hr: #333;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
/// Toolkit Colors
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #777;
|
||||
@ -156,6 +164,14 @@ html {
|
||||
--color-result-engines-font: #777;
|
||||
--color-result-search-url-border: #333;
|
||||
--color-result-search-url-font: #fff;
|
||||
/// Detail modal : same as the light version
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #000;
|
||||
--color-result-detail-hr: #333;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
// Images Colors
|
||||
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
|
||||
--color-result-image-span-font: #fff;
|
||||
@ -183,8 +199,8 @@ html {
|
||||
--color-toolkit-engine-tooltip-border: #333;
|
||||
--color-toolkit-engine-tooltip-shadow: #444;
|
||||
--color-toolkit-engine-tooltip-background: #222;
|
||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
243
searx/static/themes/simple/src/less/detail.less
Normal file
243
searx/static/themes/simple/src/less/detail.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,6 +16,7 @@
|
||||
@import "code.less";
|
||||
@import "toolkit.less";
|
||||
@import "autocomplete.less";
|
||||
@import "detail.less";
|
||||
|
||||
// for index.html template
|
||||
@import "index.less";
|
||||
@ -138,6 +139,10 @@ article[data-vim-selected]::before {
|
||||
|
||||
article.result-images[data-vim-selected] {
|
||||
background: var(--color-result-vim-arrow);
|
||||
|
||||
.image_thumbnail {
|
||||
filter: opacity(60%);
|
||||
}
|
||||
}
|
||||
|
||||
article.result-images[data-vim-selected]::before {
|
||||
@ -283,25 +288,26 @@ article.result-images[data-vim-selected]::before {
|
||||
|
||||
img {
|
||||
float: inherit;
|
||||
margin: 0;
|
||||
margin: 0.125rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
max-height: 200px;
|
||||
background: var(--color-result-image-background);
|
||||
}
|
||||
|
||||
span a {
|
||||
span.title {
|
||||
display: none;
|
||||
color: var(--color-result-image-span-font);
|
||||
}
|
||||
|
||||
&:hover span a {
|
||||
&:hover span.title {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 4px;
|
||||
margin: 0 0 4px 4px;
|
||||
// color: @color-result-image-span-font;
|
||||
background-color: var(--color-result-image-span-background-hover);
|
||||
font-size: 0.7em;
|
||||
}
|
||||
@ -569,6 +575,10 @@ article.result-images[data-vim-selected]::before {
|
||||
}
|
||||
}
|
||||
|
||||
#results.scrolling #backToTop {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
#main_preferences,
|
||||
#main_about,
|
||||
|
||||
@ -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
Block a user