OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity
Ponysearch/searx/static/themes/simple/src/less/detail.less

249 lines
5.2 KiB
Text
Raw Normal View History

[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.
2021-10-02 11:57:08 +02:00
#main_results #results.image-detail-open.only_template_images {
[fix] simple theme: fix layout image detail on mobile the width of #main_results #results.image-detail-open.only_template_images was set to 59.25rem. On mobile, the images overflowed on right side of the viewport, which creates a horizontal scroll. This commit set the value to min(98%, 59.25rem) whatever the max-width is.
2021-11-19 10:32:42 +01:00
width: min(98%, 59.25rem) !important;
[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.
2021-10-02 11:57:08 +02:00
}
#main_results #results.only_template_images.image-detail-open #backToTop {
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-left(56.75rem) !important;
.ltr-right(inherit);
[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.
2021-10-02 11:57:08 +02:00
}
article.result-images .detail {
display: none;
}
#results.image-detail-open article.result-images[data-vim-selected] .detail {
display: flex;
flex-direction: column;
position: fixed;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-left(60rem);
.ltr-right(0);
[mod] simple theme: adjust margins * index page: margin top is 24% of the view port. avoid to scroll a small screen, center the content in the middle of the screen * link to preferences at the same height same the input fields * increase the category tab heighs * increase the margin bottom of the query field * in the results, change the h3 margin top and bottom to 0.4rem (6px) * move the back to top button slightly on the right when the results are only images
2021-10-28 16:14:34 +02:00
top: @search-height;
[mod] simple theme: dark mode: various fixes
2021-10-31 10:57:06 +01:00
transition: top 0.064s ease-in 0s;
[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.
2021-10-02 11:57:08 +02:00
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;
[simple theme] replace Image_layout.js with flexbox CS impl. * drop image_layout.js from simple theme * move image_layout.js to oscar theme and delete common js dir (since its empty now) * align top position of image detail modal with bottom position of search header * use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less * display span title underneath each image with a max width of 12rem * increase margin and padding around image article on desktop and tablet * make article height smaller on phone layout (height of 6rem) to display more content on current view * remove content from result, if the title and content matches * use a group that cotains the flex image article, if images are mixed with other categories * fix pylint issues in webapp.py * use the default.html result template in unit tests (thanks @return42)
2022-02-21 22:18:48 +01:00
height: inherit;
[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.
2021-10-02 11:57:08 +02:00
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 {
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-text-align-left();
[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.
2021-10-02 11:57:08 +02:00
}
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;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-left(1rem);
[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.
2021-10-02 11:57:08 +02:00
padding: 0.4rem;
}
a.result-detail-previous {
top: 1rem;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-right(6rem);
[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.
2021-10-02 11:57:08 +02:00
// center the icon by moving it slightly on the left
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
padding-top: 0.4rem;
.ltr-padding-right(0.5rem);
padding-bottom: 0.4rem;
.ltr-padding-left(0.3rem);
[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.
2021-10-02 11:57:08 +02:00
}
a.result-detail-next {
top: 1rem;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-right(2rem);
[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.
2021-10-02 11:57:08 +02:00
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;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-right(50%);
[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.
2021-10-02 11:57:08 +02:00
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;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-left(0);
[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.
2021-10-02 11:57:08 +02:00
a.result-images-source {
display: flex;
flex-direction: column;
justify-content: center;
img {
width: 100%;
max-height: calc(100vh - 24rem);
}
}
a.result-detail-next {
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-right(1rem);
[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.
2021-10-02 11:57:08 +02:00
}
}
}
@media screen and (max-width: @phone) {
#results.image-detail-open article.result-images[data-vim-selected] .detail {
top: 0;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-left(0);
[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.
2021-10-02 11:57:08 +02:00
padding: 1rem;
a.result-images-source img {
width: 100%;
max-height: calc(100vh - 20rem);
margin: 0;
}
.result-images-labels p span {
width: inherit;
[enh] simple theme: RTL support * mirror all inline SVGs so that direction SVGs display correctly on RTL * set the bold list element in info box to RTL so the colon gets displayed on the right side * set correct .ltr function for the left border on the search button in #q * move text to the right in autocomplete * move search form in lign with result article on RTL * add the correct padding for img thumbnails in categories like music on RTL * apply RTL to result table for map results * align text in tables part of /preferences on RTL * move burger menu on index page to the left on RTL * fix positioning of drop down arrow on select boxes on RTL * align result URL on the right (written LTR) * align vim hotkeys help on the left since it is not translated * image detail: * labels (author, format, URL, etc...) are written on the right, values are on the left. * URL are written LTR and overflow on the right
2022-01-13 21:36:08 +01:00
.ltr-margin-right(1rem);
[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.
2021-10-02 11:57:08 +02:00
}
}
}
Copy permalink