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-visited-font: #684898; | ||||
| @results-width: 35em; | ||||
| @results-width: 45rem; | ||||
| @results-offset: 10rem; | ||||
| @results-tablet-offset: 0.5rem; | ||||
| @results-gap: 6em; | ||||
| @search-width: 40em; | ||||
| @results-gap: 5rem; | ||||
| @search-width: 40rem; | ||||
| 
 | ||||
| // | ||||
| @color-a-font: @color-base; | ||||
|  |  | |||
|  | @ -122,7 +122,7 @@ | |||
|   } | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 75em) { | ||||
| @media screen and (max-width: 80em) { | ||||
|   .preferences_back { | ||||
|     clear: both; | ||||
|   } | ||||
|  |  | |||
|  | @ -75,7 +75,7 @@ main { | |||
| footer { | ||||
|   clear: both; | ||||
|   min-height: 4rem; | ||||
|   padding: 1em 0; | ||||
|   padding: 1rem 0; | ||||
|   width: 100%; | ||||
|   text-align: center; | ||||
|   background-color: @color-footer-background; | ||||
|  | @ -130,7 +130,7 @@ article[data-vim-selected] { | |||
| 
 | ||||
| article[data-vim-selected]::before { | ||||
|   position: absolute; | ||||
|   left: 1em; | ||||
|   left: (@results-offset - 2rem); | ||||
|   padding: 2px; | ||||
|   content: ">"; | ||||
|   font-weight: bold; | ||||
|  | @ -366,12 +366,12 @@ article.result-images[data-vim-selected]::before { | |||
| #results { | ||||
|   margin: 2rem 2rem 0 @results-offset; | ||||
|   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; | ||||
|   gap: 0 @results-gap; | ||||
|   grid-template-areas: | ||||
|     "corrections sidebar" | ||||
|     "answers sidebar" | ||||
|     "suggestions sidebar" | ||||
|     "urls sidebar" | ||||
|     "pagination sidebar"; | ||||
| } | ||||
|  | @ -388,8 +388,6 @@ article.result-images[data-vim-selected]::before { | |||
| } | ||||
| 
 | ||||
| #suggestions { | ||||
|   grid-area: suggestions; | ||||
| 
 | ||||
|   .wrapper { | ||||
|     display: flex; | ||||
|     flex-flow: row wrap; | ||||
|  | @ -402,12 +400,6 @@ article.result-images[data-vim-selected]::before { | |||
|   } | ||||
| } | ||||
| 
 | ||||
| #suggestions, | ||||
| #answers, | ||||
| #corrections { | ||||
|   max-width: @results-width; | ||||
| } | ||||
| 
 | ||||
| #suggestions, | ||||
| #answers, | ||||
| #infoboxes, | ||||
|  | @ -435,9 +427,10 @@ article.result-images[data-vim-selected]::before { | |||
| } | ||||
| 
 | ||||
| #corrections { | ||||
|   grid-area: corrections; | ||||
|   display: flex; | ||||
|   flex-flow: row wrap; | ||||
|   margin: 1em 0; | ||||
|   margin: 0 0 1em 0; | ||||
| 
 | ||||
|   h4, | ||||
|   input[type="submit"] { | ||||
|  | @ -459,7 +452,6 @@ article.result-images[data-vim-selected]::before { | |||
| 
 | ||||
| #answers { | ||||
|   grid-area: answers; | ||||
|   margin: 10px 8px 10px 8px; | ||||
|   border: 1px solid #ddd; | ||||
|   padding: 0.9em; | ||||
|   box-shadow: 0 0 5px #ccc; | ||||
|  | @ -580,14 +572,14 @@ article.result-images[data-vim-selected]::before { | |||
| 
 | ||||
| #backToTop { | ||||
|   border: 1px solid #ddd; | ||||
|   margin: 0 0 0 2em; | ||||
|   margin: 0; | ||||
|   padding: 0; | ||||
|   font-size: 1em; | ||||
|   box-shadow: 0 0 5px #ccc; | ||||
|   background: white; | ||||
|   position: fixed; | ||||
|   bottom: 85px; | ||||
|   left: @results-width + @results-offset + @results-gap; | ||||
|   bottom: 8rem; | ||||
|   left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); | ||||
|   transition: opacity 0.5s; | ||||
|   opacity: 0; | ||||
| 
 | ||||
|  | @ -602,15 +594,10 @@ article.result-images[data-vim-selected]::before { | |||
|   #main_preferences, | ||||
|   #main_about, | ||||
|   #main_stats { | ||||
|     margin: 2em 0.5em; | ||||
|     margin: 2rem 0.5rem; | ||||
|     width: auto; | ||||
|   } | ||||
| 
 | ||||
|   #suggestions, | ||||
|   #answers { | ||||
|     margin-top: 1em; | ||||
|   } | ||||
| 
 | ||||
|   #infoboxes { | ||||
|     position: inherit; | ||||
|     max-width: inherit; | ||||
|  | @ -693,22 +680,30 @@ article.result-images[data-vim-selected]::before { | |||
|   } | ||||
| 
 | ||||
|   #backToTop { | ||||
|     left: @results-width; | ||||
|     display: none; | ||||
|   } | ||||
| 
 | ||||
|   #pagination { | ||||
|     margin-top: 2rem; | ||||
|   } | ||||
| 
 | ||||
|   #main_results div#results { | ||||
|     margin: 2rem @results-tablet-offset 0 @results-tablet-offset; | ||||
|     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; | ||||
|     gap: 0; | ||||
|     grid-template-areas: | ||||
|       "corrections" | ||||
|       "answers" | ||||
|       "suggestions" | ||||
|       "sidebar" | ||||
|       "urls" | ||||
|       "pagination"; | ||||
|   } | ||||
| 
 | ||||
|   article[data-vim-selected]::before { | ||||
|     left: 0; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| #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; | ||||
|   gap: 0; | ||||
|   grid-template-areas: | ||||
|     "answers" | ||||
|     "suggestions" | ||||
|     "corrections" | ||||
|     "urls" | ||||
|     "answers" | ||||
|     "sidebar" | ||||
|     "pagination"; | ||||
| 
 | ||||
|  | @ -728,11 +723,6 @@ article.result-images[data-vim-selected]::before { | |||
|     width: inherit; | ||||
|     margin: 0; | ||||
|   } | ||||
| 
 | ||||
|   #backToTop { | ||||
|     right: 0.5em; | ||||
|     left: auto; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 50em) { | ||||
|  | @ -757,8 +747,9 @@ article.result-images[data-vim-selected]::before { | |||
|     margin: 0 5px 2px 5px; | ||||
|   } | ||||
| 
 | ||||
|   #corrections { | ||||
|     margin: 1em 5px 1em 5px; | ||||
|   #corrections, | ||||
|   #answers { | ||||
|     margin: 0 5px 1em 5px; | ||||
|   } | ||||
| 
 | ||||
|   #results { | ||||
|  | @ -766,9 +757,8 @@ article.result-images[data-vim-selected]::before { | |||
|     padding: 0; | ||||
|   } | ||||
| 
 | ||||
|   #backToTop { | ||||
|     left: 40em; | ||||
|     bottom: 35px; | ||||
|   #pagination { | ||||
|     margin: 2rem 1rem 0 1rem; | ||||
|   } | ||||
| 
 | ||||
|   .result { | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 MrPaulBlack
						MrPaulBlack