summaryrefslogtreecommitdiff
path: root/searx/static
diff options
context:
space:
mode:
Diffstat (limited to 'searx/static')
-rw-r--r--searx/static/themes/simple/src/less/definitions.less1
-rw-r--r--searx/static/themes/simple/src/less/style-center.less102
-rw-r--r--searx/static/themes/simple/src/less/style.less159
3 files changed, 185 insertions, 77 deletions
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index dc2717067..ef6b02b2c 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -243,6 +243,7 @@
/// General Size
@results-width: 45rem;
+@results-sidebar-width: 25rem;
@results-offset: 10rem;
@results-tablet-offset: 0.5rem;
@results-gap: 5rem;
diff --git a/searx/static/themes/simple/src/less/style-center.less b/searx/static/themes/simple/src/less/style-center.less
new file mode 100644
index 000000000..749aab4e8
--- /dev/null
+++ b/searx/static/themes/simple/src/less/style-center.less
@@ -0,0 +1,102 @@
+/*
+--center-page-width overrides the less variable @results-width when the results are centered
+see the CSS rules for #results in style.less ( grid-template-columns and gap).
+
+In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3).
+
+All rules starts with ".center-aligment-yes #main_results" to be enabled only
+on the /search URL and when the "center alignment" preference is enabled.
+*/
+
+@media screen and (min-width: @phone) {
+ .center-aligment-yes #main_results {
+ --center-page-width: 48rem;
+ }
+}
+
+@media screen and (min-width: 62rem) {
+ .center-aligment-yes #main_results {
+ --center-page-width: 60rem;
+ }
+}
+
+@media screen and (min-width: @tablet) {
+ .center-aligment-yes #main_results {
+ --center-page-width: 73rem;
+ }
+}
+
+@media screen and (min-width: @phone) and (max-width: @tablet) {
+ .center-aligment-yes #main_results {
+ #results {
+ grid-template-columns: 60% 1fr;
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ #urls {
+ .ltr-margin-left(3rem);
+ }
+
+ #sidebar {
+ .ltr-margin-right(1rem);
+ }
+
+ #backToTop {
+ .ltr-left(calc(60% + 1rem));
+ }
+ }
+}
+
+@media screen and (min-width: @tablet) {
+ .center-aligment-yes #main_results {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ #search {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #search_header {
+ grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width);
+ grid-template-areas: "na logo search" "na spacer categories";
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .search_filters {
+ .ltr-margin-left(0.5rem);
+ width: var(--center-page-width);
+ }
+
+ #results {
+ &.only_template_images,
+ &.image-detail-open {
+ // * grid-template-columns and .ltr-margin-left are set in style.less
+ // * With .image-detail-open.only_template_images, the width is set in detail.less
+ // * #results is going to be centered because of the #main_results rules,
+ // align-self aligns the results on the left or right according to the language.
+ align-self: flex-start;
+ }
+
+ &:not(.only_template_images):not(.image-detail-open) {
+ // the gap is set in style.less
+ .ltr-margin-left(1.5rem);
+ grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;
+
+ #backToTop {
+ .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
+ }
+ }
+
+ .result .content {
+ max-width: inherit;
+ }
+ }
+ }
+}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 45c6eb204..6777cbadc 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -29,6 +29,9 @@
// Search-Field
@import "search.less";
+// to center the results
+@import "style-center.less";
+
// ion-icon
.ion-icon {
display: inline-block;
@@ -460,7 +463,7 @@ article[data-vim-selected].category-social {
margin-bottom: 0;
.ltr-margin-left(@results-offset);
display: grid;
- grid-template-columns: @results-width 25rem;
+ grid-template-columns: @results-width @results-sidebar-width;
grid-template-rows: min-content min-content 1fr min-content;
gap: 0 @results-gap;
grid-template-areas:
@@ -699,103 +702,105 @@ article[data-vim-selected].category-social {
}
@media screen and (max-width: @tablet) {
- .page_with_header {
- margin: 2rem 0.5rem;
- width: auto;
- }
+ .center-aligment-no {
+ .page_with_header {
+ margin: 2rem 0.5rem;
+ width: auto;
+ }
- #infoboxes {
- position: inherit;
- max-width: inherit;
+ #infoboxes {
+ position: inherit;
+ max-width: inherit;
+
+ .infobox {
+ clear: both;
+
+ img {
+ .ltr-float-left();
+ max-width: 10em;
+ margin-top: 0.5em;
+ .ltr-margin-right(0.5em);
+ margin-bottom: 0.5em;
+ .ltr-margin-left(0);
+ }
+ }
+ }
- .infobox {
- clear: both;
+ #sidebar {
+ margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
+ padding: 0;
+ float: none;
+ border: none;
+ width: auto;
- img {
- .ltr-float-left();
- max-width: 10em;
- margin-top: 0.5em;
- .ltr-margin-right(0.5em);
- margin-bottom: 0.5em;
- .ltr-margin-left(0);
+ input {
+ border: 0;
}
}
- }
- #sidebar {
- margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
- padding: 0;
- float: none;
- border: none;
- width: auto;
-
- input {
- border: 0;
+ #apis {
+ display: none;
}
- }
- #apis {
- display: none;
- }
+ #search_url {
+ display: none;
+ }
- #search_url {
- display: none;
- }
+ .result {
+ .thumbnail {
+ max-width: 98%;
+ }
- .result {
- .thumbnail {
- max-width: 98%;
- }
+ .url {
+ span.url {
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ width: 100%;
+ }
+ }
- .url {
- span.url {
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- width: 100%;
+ .engines {
+ .ltr-float-right();
+ padding: 0 0 3px 0;
}
}
- .engines {
- .ltr-float-right();
- padding: 0 0 3px 0;
+ .result-images {
+ border-bottom: none !important;
}
- }
-
- .result-images {
- border-bottom: none !important;
- }
-
- .image_result {
- max-width: 98%;
- img {
+ .image_result {
max-width: 98%;
+
+ img {
+ max-width: 98%;
+ }
}
- }
- #backToTop {
- display: none;
- }
+ #backToTop {
+ display: none;
+ }
- #pagination {
- margin: 2rem 0 0 0 !important;
- }
+ #pagination {
+ margin: 2rem 0 0 0 !important;
+ }
- #main_results div#results {
- margin: 1rem auto 0 auto;
- justify-content: center;
- display: grid;
- grid-template-columns: @results-width;
- grid-template-rows: min-content min-content min-content 1fr min-content min-content;
- gap: 0;
- grid-template-areas:
- "corrections"
- "answers"
- "sidebar"
- "urls"
- "pagination";
+ #main_results div#results {
+ margin: 1rem auto 0 auto;
+ justify-content: center;
+ display: grid;
+ grid-template-columns: @results-width;
+ grid-template-rows: min-content min-content min-content 1fr min-content min-content;
+ gap: 0;
+ grid-template-areas:
+ "corrections"
+ "answers"
+ "sidebar"
+ "urls"
+ "pagination";
+ }
}
}
7apu2bq3rhoylwmucxizk54afw5jyda7pho4j5zdcqpwkufke7zdzwad.onion