summaryrefslogtreecommitdiff
path: root/client/simple
diff options
context:
space:
mode:
Diffstat (limited to 'client/simple')
-rw-r--r--client/simple/src/less/definitions.less8
-rw-r--r--client/simple/src/less/index.less1
-rw-r--r--client/simple/src/less/search.less65
-rw-r--r--client/simple/src/less/style.less33
4 files changed, 59 insertions, 48 deletions
diff --git a/client/simple/src/less/definitions.less b/client/simple/src/less/definitions.less
index 354233277..4a3881274 100644
--- a/client/simple/src/less/definitions.less
+++ b/client/simple/src/less/definitions.less
@@ -279,11 +279,11 @@
}
/// General Size
-@results-width: 45rem;
-@results-sidebar-width: 25rem;
-@results-offset: 10rem;
+@results-width: 30rem;
+@results-sidebar-width: 0rem;
+@results-offset: 0.5rem;
@results-tablet-offset: 0.5rem;
-@results-gap: 5rem;
+@results-gap: 0rem;
@results-margin: 0.125rem;
@result-padding: 1rem;
@results-image-row-height: 12rem;
diff --git a/client/simple/src/less/index.less b/client/simple/src/less/index.less
index 6d9e4abd4..271c4a506 100644
--- a/client/simple/src/less/index.less
+++ b/client/simple/src/less/index.less
@@ -27,6 +27,7 @@
border: inherit;
padding: 0;
display: block;
+ width: 90%;
}
.search_filters {
diff --git a/client/simple/src/less/search.less b/client/simple/src/less/search.less
index 260f5e942..ae8dac8ad 100644
--- a/client/simple/src/less/search.less
+++ b/client/simple/src/less/search.less
@@ -6,7 +6,7 @@
}
#search_header {
- padding-top: 1.5em;
+ padding-top: 0.5em;
.ltr-padding-right(2em);
.ltr-padding-left(@results-offset - 3rem);
margin: 0;
@@ -14,10 +14,10 @@
border-bottom: 1px solid var(--color-header-border);
display: grid;
gap: 1rem 1.2rem;
- grid-template-columns: 3rem 1fr;
+ grid-template-columns: 3rem 0.9fr 0.05fr;
grid-template-areas:
- "logo search"
- "spacer categories";
+ "logo search filters"
+ "categories categories categories";
}
.category_checkbox,
@@ -96,7 +96,7 @@ button.category_button {
}
#search_logo {
- padding: 0.5rem 10px 0 10px;
+ padding: 0 0 0 0;
grid-area: logo;
display: flex;
align-items: center;
@@ -129,11 +129,11 @@ button.category_button {
}
#search_view {
- padding: 0.5rem @search-padding-horizontal 0 @search-padding-horizontal;
+ padding: 0;
grid-area: search;
body.results_endpoint & {
- padding: 0.5rem 2.8rem 0 0;
+ padding: 0 0 0 0;
}
}
@@ -211,13 +211,9 @@ html.no-js #clear_search.hide_if_nojs {
}
.search_filters {
- margin-top: 0.6rem;
- .ltr-margin-right(0);
margin-bottom: 0;
- .ltr-margin-left(@results-offset + 0.6rem);
- display: flex;
- overflow-x: auto;
- overscroll-behavior-inline: contain;
+ display: grid;
+ gap: 0 0;
select {
background-color: inherit;
@@ -229,19 +225,20 @@ html.no-js #clear_search.hide_if_nojs {
}
}
-@media screen and (max-width: @tablet) {
- #search_header {
- padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
- column-gap: @results-tablet-offset;
- }
+.language {
+ grid-column: span 2;
+ height: 1.5rem;
+}
- .search_filters {
- margin-top: 0.6rem;
- .ltr-margin-right(0);
- margin-bottom: 0;
- .ltr-margin-left(@results-tablet-offset + 3rem);
- }
+.time_range {
+ height: 1.5rem;
+}
+.safesearch {
+ height: 1.5rem;
+}
+
+@media screen and (max-width: @tablet) {
#categories {
font-size: 90%;
clear: both;
@@ -270,15 +267,22 @@ html.no-js #clear_search.hide_if_nojs {
@media screen and (max-width: @phone) {
#search_header {
- width: 100%;
- margin: 0;
- padding: 0.1rem 0 0 0;
- gap: 0 0;
+ gap: 0.5rem 0;
+ grid-template-columns: 3rem 100%-13rem;
grid-template-areas:
"logo search"
+ "logo filters"
"categories categories";
}
+ #search_view {
+ align-items: center;
+ }
+
+ #search_filters {
+ gap: 1rem 1rem;
+ }
+
.search_logo {
padding: 0;
}
@@ -292,11 +296,6 @@ html.no-js #clear_search.hide_if_nojs {
flex: 1;
}
- .search_filters {
- margin: 0 10px;
- padding: 0.5rem 0;
- }
-
.category {
display: inline-block;
width: auto;
diff --git a/client/simple/src/less/style.less b/client/simple/src/less/style.less
index 46ba5d491..16edb8c24 100644
--- a/client/simple/src/less/style.less
+++ b/client/simple/src/less/style.less
@@ -183,6 +183,8 @@ article[data-vim-selected].category-social {
box-sizing: border-box;
width: 100%;
.ltr-border-left(0.2rem solid transparent);
+ width: @results-width;
+ flex: 1 auto;
h3 {
font-size: 1.2rem;
@@ -375,6 +377,14 @@ article[data-vim-selected].category-social {
flex-wrap: wrap;
}
+.template_group_default,
+.template_group_videos {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: flex-start;
+ flex-grow: 1;
+}
+
.template_group_images::after {
flex-grow: 10;
content: "";
@@ -387,6 +397,7 @@ article[data-vim-selected].category-social {
.category-social {
border: 1px solid var(--color-result-border);
margin: 0 @results-tablet-offset 1rem @results-tablet-offset !important;
+ width: @results-width;
.rounded-corners;
}
@@ -466,7 +477,7 @@ article[data-vim-selected].category-social {
margin: 0.25rem;
border: none !important;
height: @results-image-row-height;
- width: unset;
+ width: auto;
& > a {
position: relative;
@@ -509,6 +520,8 @@ article[data-vim-selected].category-social {
}
.result-map {
+ width: auto;
+
img.image {
.ltr-float-right() !important;
height: 100px !important;
@@ -544,13 +557,7 @@ article[data-vim-selected].category-social {
.ltr-margin-right(2rem);
margin-bottom: 0;
.ltr-margin-left(@results-offset);
- display: grid;
- grid-template:
- "corrections sidebar" min-content
- "answers sidebar" min-content
- "urls sidebar" 1fr
- "pagination sidebar" min-content
- / @results-width @results-sidebar-width;
+ grid-template-rows: min-content min-content 1fr min-content;
gap: 0 @results-gap;
}
@@ -561,6 +568,8 @@ article[data-vim-selected].category-social {
#urls {
padding: 0;
grid-area: urls;
+ display: flex;
+ flex-wrap: wrap;
}
#apis .wrapper {
@@ -688,6 +697,7 @@ summary.title {
}
#sidebar {
+ display: none;
grid-area: sidebar;
overflow-wrap: break-word;
color: var(--color-sidebar-font);
@@ -794,10 +804,11 @@ summary.title {
position: absolute;
.ltr-right(1rem);
.ltr-text-align-right();
- top: 2.7rem;
+ top: 0.5rem;
padding: 0;
border: 0;
- display: flex;
+ display: grid;
+ grid-template-columns: auto;
align-items: center;
font-size: 1em;
color: var(--color-search-font);
@@ -832,7 +843,6 @@ summary.title {
.numbered_pagination {
display: flex;
- flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
@@ -923,6 +933,7 @@ summary.title {
float: none;
border: none;
width: auto;
+ display: none;
input {
border: 0;