mirror of
				https://github.com/searxng/searxng
				synced 2024-01-01 19:24:07 +01:00 
			
		
		
		
	[mod] simple theme: adjust margins
* index page: margin top is 24% of the view port. avoid to scroll a small screen, center the content in the middle of the screen * link to preferences at the same height same the input fields * increase the category tab heighs * increase the margin bottom of the query field * in the results, change the h3 margin top and bottom to 0.4rem (6px) * move the back to top button slightly on the right when the results are only images
This commit is contained in:
		
							parent
							
								
									8985d3e6ef
								
							
						
					
					
						commit
						e2d312f6ae
					
				
					 5 changed files with 15 additions and 11 deletions
				
			
		| 
						 | 
					@ -211,6 +211,8 @@ html {
 | 
				
			||||||
@results-gap: 5rem;
 | 
					@results-gap: 5rem;
 | 
				
			||||||
@results-margin: 2rem;
 | 
					@results-margin: 2rem;
 | 
				
			||||||
@search-width: 40rem;
 | 
					@search-width: 40rem;
 | 
				
			||||||
 | 
					// heigh of #search, see detail.less
 | 
				
			||||||
 | 
					@search-height: 7.5rem;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/// Device Size
 | 
					/// Device Size
 | 
				
			||||||
/// @desktop > @tablet
 | 
					/// @desktop > @tablet
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -17,7 +17,7 @@ article.result-images .detail {
 | 
				
			||||||
  position: fixed;
 | 
					  position: fixed;
 | 
				
			||||||
  left: 60rem;
 | 
					  left: 60rem;
 | 
				
			||||||
  right: 0;
 | 
					  right: 0;
 | 
				
			||||||
  top: 7rem;
 | 
					  top: @search-height;
 | 
				
			||||||
  bottom: 0;
 | 
					  bottom: 0;
 | 
				
			||||||
  background: var(--color-result-detail-background);
 | 
					  background: var(--color-result-detail-background);
 | 
				
			||||||
  border: 1px solid var(--color-result-detail-background);
 | 
					  border: 1px solid var(--color-result-detail-background);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,9 @@
 | 
				
			||||||
#main_index {
 | 
					#main_index {
 | 
				
			||||||
  margin-top: 16em;
 | 
					  margin-top: 24vh;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  #linkto_preferences {
 | 
				
			||||||
 | 
					    right: 1.8rem;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.index {
 | 
					.index {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -9,7 +9,7 @@
 | 
				
			||||||
  border-bottom: 1px solid var(--color-header-border);
 | 
					  border-bottom: 1px solid var(--color-header-border);
 | 
				
			||||||
  display: grid;
 | 
					  display: grid;
 | 
				
			||||||
  column-gap: 1rem;
 | 
					  column-gap: 1rem;
 | 
				
			||||||
  row-gap: 10px;
 | 
					  row-gap: 1rem;
 | 
				
			||||||
  grid-template-columns: 3rem 1fr;
 | 
					  grid-template-columns: 3rem 1fr;
 | 
				
			||||||
  grid-template-areas:
 | 
					  grid-template-areas:
 | 
				
			||||||
    "logo search"
 | 
					    "logo search"
 | 
				
			||||||
| 
						 | 
					@ -120,7 +120,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.search_filters {
 | 
					.search_filters {
 | 
				
			||||||
  display: inline-block;
 | 
					  display: inline-block;
 | 
				
			||||||
  vertical-align: middle;
 | 
					  margin: 0.8rem 0 0 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@media screen and (max-width: @tablet) {
 | 
					@media screen and (max-width: @tablet) {
 | 
				
			||||||
| 
						 | 
					@ -184,7 +184,6 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  #search_wrapper {
 | 
					  #search_wrapper {
 | 
				
			||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
    margin: 0;
 | 
					 | 
				
			||||||
    padding: 0;
 | 
					    padding: 0;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -204,7 +203,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .search_filters {
 | 
					  .search_filters {
 | 
				
			||||||
    display: block;
 | 
					    display: block;
 | 
				
			||||||
    margin: 0.5em;
 | 
					    margin: 0.8em 0;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .language,
 | 
					  .language,
 | 
				
			||||||
| 
						 | 
					@ -244,7 +243,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  label {
 | 
					  label {
 | 
				
			||||||
    cursor: pointer;
 | 
					    cursor: pointer;
 | 
				
			||||||
    padding: 4px 10px;
 | 
					    padding: 0.3rem 0.75rem 0.5rem 0.75rem;
 | 
				
			||||||
    margin: 0;
 | 
					    margin: 0;
 | 
				
			||||||
    display: block;
 | 
					    display: block;
 | 
				
			||||||
    text-transform: capitalize;
 | 
					    text-transform: capitalize;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -157,9 +157,8 @@ article.result-images[data-vim-selected]::before {
 | 
				
			||||||
  h3 {
 | 
					  h3 {
 | 
				
			||||||
    font-size: 1.1em;
 | 
					    font-size: 1.1em;
 | 
				
			||||||
    word-wrap: break-word;
 | 
					    word-wrap: break-word;
 | 
				
			||||||
    margin: 8px 0 8px 0 !important;
 | 
					    margin: 0.4rem 0 0.4rem 0;
 | 
				
			||||||
    padding: 0;
 | 
					    padding: 0;
 | 
				
			||||||
    margin-bottom: 0;
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
    a {
 | 
					    a {
 | 
				
			||||||
      color: var(--color-result-link-font);
 | 
					      color: var(--color-result-link-font);
 | 
				
			||||||
| 
						 | 
					@ -526,7 +525,7 @@ article.result-images[data-vim-selected]::before {
 | 
				
			||||||
#linkto_preferences {
 | 
					#linkto_preferences {
 | 
				
			||||||
  position: absolute;
 | 
					  position: absolute;
 | 
				
			||||||
  right: 10px;
 | 
					  right: 10px;
 | 
				
			||||||
  top: 0.9em;
 | 
					  top: 2rem;
 | 
				
			||||||
  padding: 0;
 | 
					  padding: 0;
 | 
				
			||||||
  border: 0;
 | 
					  border: 0;
 | 
				
			||||||
  display: block;
 | 
					  display: block;
 | 
				
			||||||
| 
						 | 
					@ -703,7 +702,7 @@ article.result-images[data-vim-selected]::before {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  #backToTop {
 | 
					  #backToTop {
 | 
				
			||||||
    left: auto;
 | 
					    left: auto;
 | 
				
			||||||
    right: 2rem;
 | 
					    right: 1rem;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  #pagination {
 | 
					  #pagination {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue