[enh] simple theme: image detail

When an image is selected, the detail with the full size image is displayed
on the right side of the screen (or full screen on tablet and phone).

When Javascript is disabled, the thumbnail is a linked to the full size image,
as it was before.

When the image proxy is enabled, the full size image is also proxied,
in consequence this commit increases the bandwidth usage of instances.

The detail can be closed by the close button or the Esc key.
It is possible to go to the next and previous images using the j and k keys
or the button on the top right of the screen.

1 files changed, 243 insertions, 0 deletions

diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less
new file mode 100644
index 000000000..6c4022765
--- /dev/null
+++ b/searx/static/themes/simple/src/less/detail.less
@@ -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;
+    }
+  }
+}