mirror of
				https://github.com/searxng/searxng
				synced 2024-01-01 19:24:07 +01:00 
			
		
		
		
	[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