forked from zaclys/searxng
		
	[fix] several issues in the simple theme
- using more rem in style and definitions - mobile width in preferences.less fix max-width: 75em to 80em (normalized with style.less and other) - do not display #backToTop position on tablet (when max-width: 80em) - fix answer box on mobile (when max-width: 50em)
This commit is contained in:
		
							parent
							
								
									b6ae1f1c7a
								
							
						
					
					
						commit
						8268873701
					
				
					 3 changed files with 32 additions and 42 deletions
				
			
		|  | @ -31,11 +31,11 @@ | ||||||
| 
 | 
 | ||||||
| @color-url-font: #29314d; | @color-url-font: #29314d; | ||||||
| @color-url-visited-font: #684898; | @color-url-visited-font: #684898; | ||||||
| @results-width: 35em; | @results-width: 45rem; | ||||||
| @results-offset: 10rem; | @results-offset: 10rem; | ||||||
| @results-tablet-offset: 0.5rem; | @results-tablet-offset: 0.5rem; | ||||||
| @results-gap: 6em; | @results-gap: 5rem; | ||||||
| @search-width: 40em; | @search-width: 40rem; | ||||||
| 
 | 
 | ||||||
| // | // | ||||||
| @color-a-font: @color-base; | @color-a-font: @color-base; | ||||||
|  |  | ||||||
|  | @ -122,7 +122,7 @@ | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @media screen and (max-width: 75em) { | @media screen and (max-width: 80em) { | ||||||
|   .preferences_back { |   .preferences_back { | ||||||
|     clear: both; |     clear: both; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | @ -75,7 +75,7 @@ main { | ||||||
| footer { | footer { | ||||||
|   clear: both; |   clear: both; | ||||||
|   min-height: 4rem; |   min-height: 4rem; | ||||||
|   padding: 1em 0; |   padding: 1rem 0; | ||||||
|   width: 100%; |   width: 100%; | ||||||
|   text-align: center; |   text-align: center; | ||||||
|   background-color: @color-footer-background; |   background-color: @color-footer-background; | ||||||
|  | @ -130,7 +130,7 @@ article[data-vim-selected] { | ||||||
| 
 | 
 | ||||||
| article[data-vim-selected]::before { | article[data-vim-selected]::before { | ||||||
|   position: absolute; |   position: absolute; | ||||||
|   left: 1em; |   left: (@results-offset - 2rem); | ||||||
|   padding: 2px; |   padding: 2px; | ||||||
|   content: ">"; |   content: ">"; | ||||||
|   font-weight: bold; |   font-weight: bold; | ||||||
|  | @ -366,12 +366,12 @@ article.result-images[data-vim-selected]::before { | ||||||
| #results { | #results { | ||||||
|   margin: 2rem 2rem 0 @results-offset; |   margin: 2rem 2rem 0 @results-offset; | ||||||
|   display: grid; |   display: grid; | ||||||
|   grid-template-columns: (@results-width + @results-offset) 25em; |   grid-template-columns: @results-width 25rem; | ||||||
|   grid-template-rows: min-content min-content 1fr min-content; |   grid-template-rows: min-content min-content 1fr min-content; | ||||||
|   gap: 0 @results-gap; |   gap: 0 @results-gap; | ||||||
|   grid-template-areas: |   grid-template-areas: | ||||||
|  |     "corrections sidebar" | ||||||
|     "answers sidebar" |     "answers sidebar" | ||||||
|     "suggestions sidebar" |  | ||||||
|     "urls sidebar" |     "urls sidebar" | ||||||
|     "pagination sidebar"; |     "pagination sidebar"; | ||||||
| } | } | ||||||
|  | @ -388,8 +388,6 @@ article.result-images[data-vim-selected]::before { | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| #suggestions { | #suggestions { | ||||||
|   grid-area: suggestions; |  | ||||||
| 
 |  | ||||||
|   .wrapper { |   .wrapper { | ||||||
|     display: flex; |     display: flex; | ||||||
|     flex-flow: row wrap; |     flex-flow: row wrap; | ||||||
|  | @ -402,12 +400,6 @@ article.result-images[data-vim-selected]::before { | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| #suggestions, |  | ||||||
| #answers, |  | ||||||
| #corrections { |  | ||||||
|   max-width: @results-width; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| #suggestions, | #suggestions, | ||||||
| #answers, | #answers, | ||||||
| #infoboxes, | #infoboxes, | ||||||
|  | @ -435,9 +427,10 @@ article.result-images[data-vim-selected]::before { | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| #corrections { | #corrections { | ||||||
|  |   grid-area: corrections; | ||||||
|   display: flex; |   display: flex; | ||||||
|   flex-flow: row wrap; |   flex-flow: row wrap; | ||||||
|   margin: 1em 0; |   margin: 0 0 1em 0; | ||||||
| 
 | 
 | ||||||
|   h4, |   h4, | ||||||
|   input[type="submit"] { |   input[type="submit"] { | ||||||
|  | @ -459,7 +452,6 @@ article.result-images[data-vim-selected]::before { | ||||||
| 
 | 
 | ||||||
| #answers { | #answers { | ||||||
|   grid-area: answers; |   grid-area: answers; | ||||||
|   margin: 10px 8px 10px 8px; |  | ||||||
|   border: 1px solid #ddd; |   border: 1px solid #ddd; | ||||||
|   padding: 0.9em; |   padding: 0.9em; | ||||||
|   box-shadow: 0 0 5px #ccc; |   box-shadow: 0 0 5px #ccc; | ||||||
|  | @ -580,14 +572,14 @@ article.result-images[data-vim-selected]::before { | ||||||
| 
 | 
 | ||||||
| #backToTop { | #backToTop { | ||||||
|   border: 1px solid #ddd; |   border: 1px solid #ddd; | ||||||
|   margin: 0 0 0 2em; |   margin: 0; | ||||||
|   padding: 0; |   padding: 0; | ||||||
|   font-size: 1em; |   font-size: 1em; | ||||||
|   box-shadow: 0 0 5px #ccc; |   box-shadow: 0 0 5px #ccc; | ||||||
|   background: white; |   background: white; | ||||||
|   position: fixed; |   position: fixed; | ||||||
|   bottom: 85px; |   bottom: 8rem; | ||||||
|   left: @results-width + @results-offset + @results-gap; |   left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); | ||||||
|   transition: opacity 0.5s; |   transition: opacity 0.5s; | ||||||
|   opacity: 0; |   opacity: 0; | ||||||
| 
 | 
 | ||||||
|  | @ -602,15 +594,10 @@ article.result-images[data-vim-selected]::before { | ||||||
|   #main_preferences, |   #main_preferences, | ||||||
|   #main_about, |   #main_about, | ||||||
|   #main_stats { |   #main_stats { | ||||||
|     margin: 2em 0.5em; |     margin: 2rem 0.5rem; | ||||||
|     width: auto; |     width: auto; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   #suggestions, |  | ||||||
|   #answers { |  | ||||||
|     margin-top: 1em; |  | ||||||
|   } |  | ||||||
| 
 |  | ||||||
|   #infoboxes { |   #infoboxes { | ||||||
|     position: inherit; |     position: inherit; | ||||||
|     max-width: inherit; |     max-width: inherit; | ||||||
|  | @ -693,22 +680,30 @@ article.result-images[data-vim-selected]::before { | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   #backToTop { |   #backToTop { | ||||||
|     left: @results-width; |     display: none; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   #pagination { | ||||||
|  |     margin-top: 2rem; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   #main_results div#results { |   #main_results div#results { | ||||||
|     margin: 2rem @results-tablet-offset 0 @results-tablet-offset; |     margin: 2rem @results-tablet-offset 0 @results-tablet-offset; | ||||||
|     display: grid; |     display: grid; | ||||||
|     grid-template-columns: 50em; |     grid-template-columns: @results-width; | ||||||
|     grid-template-rows: min-content min-content min-content 1fr min-content min-content; |     grid-template-rows: min-content min-content min-content 1fr min-content min-content; | ||||||
|     gap: 0; |     gap: 0; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|  |       "corrections" | ||||||
|       "answers" |       "answers" | ||||||
|       "suggestions" |  | ||||||
|       "sidebar" |       "sidebar" | ||||||
|       "urls" |       "urls" | ||||||
|       "pagination"; |       "pagination"; | ||||||
|   } |   } | ||||||
|  | 
 | ||||||
|  |   article[data-vim-selected]::before { | ||||||
|  |     left: 0; | ||||||
|  |   } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| #main_results div#results.only_template_images { | #main_results div#results.only_template_images { | ||||||
|  | @ -718,9 +713,9 @@ article.result-images[data-vim-selected]::before { | ||||||
|   grid-template-rows: min-content min-content 1fr min-content min-content; |   grid-template-rows: min-content min-content 1fr min-content min-content; | ||||||
|   gap: 0; |   gap: 0; | ||||||
|   grid-template-areas: |   grid-template-areas: | ||||||
|     "answers" |     "corrections" | ||||||
|     "suggestions" |  | ||||||
|     "urls" |     "urls" | ||||||
|  |     "answers" | ||||||
|     "sidebar" |     "sidebar" | ||||||
|     "pagination"; |     "pagination"; | ||||||
| 
 | 
 | ||||||
|  | @ -728,11 +723,6 @@ article.result-images[data-vim-selected]::before { | ||||||
|     width: inherit; |     width: inherit; | ||||||
|     margin: 0; |     margin: 0; | ||||||
|   } |   } | ||||||
| 
 |  | ||||||
|   #backToTop { |  | ||||||
|     right: 0.5em; |  | ||||||
|     left: auto; |  | ||||||
|   } |  | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @media screen and (max-width: 50em) { | @media screen and (max-width: 50em) { | ||||||
|  | @ -757,8 +747,9 @@ article.result-images[data-vim-selected]::before { | ||||||
|     margin: 0 5px 2px 5px; |     margin: 0 5px 2px 5px; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   #corrections { |   #corrections, | ||||||
|     margin: 1em 5px 1em 5px; |   #answers { | ||||||
|  |     margin: 0 5px 1em 5px; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   #results { |   #results { | ||||||
|  | @ -766,9 +757,8 @@ article.result-images[data-vim-selected]::before { | ||||||
|     padding: 0; |     padding: 0; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   #backToTop { |   #pagination { | ||||||
|     left: 40em; |     margin: 2rem 1rem 0 1rem; | ||||||
|     bottom: 35px; |  | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   .result { |   .result { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 MrPaulBlack
						MrPaulBlack