diff options
Diffstat (limited to 'client/simple')
| -rw-r--r-- | client/simple/src/less/definitions.less | 8 | ||||
| -rw-r--r-- | client/simple/src/less/index.less | 1 | ||||
| -rw-r--r-- | client/simple/src/less/search.less | 65 | ||||
| -rw-r--r-- | client/simple/src/less/style.less | 33 |
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; |
