 3ba0d0516e
			
		
	
	
		3ba0d0516e
		
	
	
	
	
		
			
			- npm package update - apply #1226 - implement vim help dialog - display cookies and search URL with preferences - allow to enable / disable Open Access DOI rewrite - add a clear text button on the left of the search button - implement #1011 : the HTML title page is not set when using POST - remove searx/static/themes/simple/img/loader.gif - use full width when only there are only images as result
		
			
				
	
	
		
			722 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			722 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
| /*
 | |
| * searx, A privacy-respecting, hackable metasearch engine
 | |
| *
 | |
| * To convert "style.less" to "style.css" run: $make styles
 | |
| */
 | |
| 
 | |
| @import "normalize.less";
 | |
| 
 | |
| @import "definitions.less";
 | |
| 
 | |
| @import "mixins.less";
 | |
| 
 | |
| @import "code.less";
 | |
| 
 | |
| @import "toolkit.less";
 | |
| 
 | |
| @import "autocomplete.less";
 | |
| 
 | |
| // ion-icon
 | |
| @import "ion.less";
 | |
| 
 | |
| .ion-icon-big {
 | |
|   .ion-icon;
 | |
|   font-size: 149%;
 | |
| }
 | |
| 
 | |
| // for index.html template
 | |
| @import "index.less";
 | |
| 
 | |
| // for preferences.html template
 | |
| @import "preferences.less";
 | |
| 
 | |
| // Search-Field
 | |
| @import "search.less";
 | |
| 
 | |
| // Main LESS-Code
 | |
| html {
 | |
|   font-family: arial, sans-serif;
 | |
|   font-size: 0.9em;
 | |
|   .text-size-adjust;
 | |
|   color: @color-font;
 | |
|   padding: 0;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| body, main {
 | |
|   padding: 0;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| main {
 | |
|   width: 100%;
 | |
|   // position: absolute;
 | |
| }
 | |
| 
 | |
| footer {
 | |
|   // position:absolute;
 | |
| 	bottom:0;
 | |
| 	width:100%;
 | |
| 	height:50px;
 | |
| }
 | |
| 
 | |
| #main_preferences, #main_about, #main_stats {
 | |
|   margin: 3em;
 | |
|   width: auto;
 | |
| }
 | |
| 
 | |
| footer {
 | |
|   bottom: 0;
 | |
|   height: 3em;
 | |
|   margin: 1em 0;
 | |
|   padding: 1em 0;
 | |
|   clear: both;
 | |
|   width: 100%;
 | |
|   text-align: center;
 | |
| 
 | |
|   p {
 | |
|     font-size: 0.9em;
 | |
|   }
 | |
| }
 | |
| 
 | |
| #main_preferences h1, #main_stats h1 {
 | |
|   background: url('../img/searx.png') no-repeat;
 | |
|   background-size: auto 75%;
 | |
|   min-height: 40px;
 | |
|   margin: 0 auto;
 | |
| 
 | |
|   span {
 | |
|       visibility: hidden;
 | |
|   }
 | |
| }
 | |
| 
 | |
| input[type="submit"], #results button[type="submit"] {
 | |
|   padding: 0.5rem;
 | |
|   margin: 2px 4px;
 | |
|   display: inline-block;
 | |
|   background: @color-download-button-background;
 | |
|   color: @color-download-button-font;
 | |
|   .rounded-corners;
 | |
|   border: 0;
 | |
|   cursor: pointer;
 | |
| }
 | |
| 
 | |
| a {
 | |
|   text-decoration: none;
 | |
|   color: @color-url-font;
 | |
| 
 | |
|   &:visited {
 | |
|     color: @color-url-visited-font;
 | |
| 
 | |
|     .highlight {
 | |
|       color: @color-url-visited-font;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| article[data-vim-selected] {
 | |
|   background: #f7f7f7;
 | |
| }
 | |
| 
 | |
| article[data-vim-selected]::before {
 | |
|   position: absolute;
 | |
|   left: 1em;
 | |
|   padding: 2px;
 | |
|   content: ">";
 | |
|   font-weight: bold;
 | |
|   color: @color-base;
 | |
| }
 | |
| 
 | |
| article.result-images[data-vim-selected] {
 | |
|   background: @color-base;
 | |
| }
 | |
| 
 | |
| article.result-images[data-vim-selected]::before {
 | |
|   display: none;
 | |
|   content: "";
 | |
| }
 | |
| 
 | |
| .result {
 | |
|   margin: 19px 0 18px 0;
 | |
|   padding: 0;
 | |
| 
 | |
|   h3 {
 | |
|     font-size: 1.1em;
 | |
|     word-wrap:break-word;
 | |
|     margin: 5px 0 1px 0;
 | |
|     padding: 0;
 | |
|     margin-bottom: 0;
 | |
| 
 | |
|     a {
 | |
|       color: @color-result-link-font;
 | |
|       font-weight: normal;
 | |
|       font-size: 1.1em;
 | |
| 
 | |
|       &:visited {
 | |
|         color: @color-result-link-visited-font;
 | |
|       }
 | |
| 
 | |
|       &:focus, &:hover {
 | |
|         text-decoration: underline;
 | |
|         border: none;
 | |
|         -webkit-box-shadow: none;
 | |
|         box-shadow: none;
 | |
|         outline:none;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .cache_link, .proxyfied_link {
 | |
|     font-size: 0.9em !important;
 | |
|   }
 | |
| 
 | |
|   .content, .stat, .altlink {
 | |
|     font-size: 0.9em;
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     max-width: 54em;
 | |
|     word-wrap:break-word;
 | |
|     line-height: 1.24;
 | |
| 
 | |
|     .highlight {
 | |
|       color: @color-black;
 | |
|       background: inherit;
 | |
|       font-weight: bold;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .codelines {
 | |
|     .highlight {
 | |
|       color: inherit;
 | |
|       background: inherit;
 | |
|       font-weight: normal;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .url {
 | |
|     font-size: 0.9em;
 | |
|     margin: 0 0 3px 0;
 | |
|     padding: 0;
 | |
|     max-width: 54em;
 | |
|     word-wrap:break-word;
 | |
|     color: @color-result-url-font;
 | |
|   }
 | |
| 
 | |
|   .published_date {
 | |
|     font-size: 0.8em;
 | |
|     color: @color-result-publishdate-font;
 | |
|   }
 | |
| 
 | |
|   img {
 | |
| 
 | |
|     &.thumbnail {
 | |
|       float: left;
 | |
|       padding: 0 5px 10px 0;
 | |
|       width: 20em;
 | |
|       min-width: 20em;
 | |
|       min-height: 8em;
 | |
|       // background: @color-base-light;
 | |
|     }
 | |
| 
 | |
|     &.image {
 | |
|       float: left;
 | |
|       padding: 0 5px 10px 0;
 | |
|       width: 100px;
 | |
|       max-height: 100px;
 | |
|       object-fit: scale-down;
 | |
|       object-position: right top;
 | |
|     }
 | |
| 
 | |
|   }
 | |
| 
 | |
|   .break {
 | |
|       clear: both;
 | |
|   }
 | |
| 
 | |
| }
 | |
| 
 | |
| .category-social .image {
 | |
|   width: auto !important;
 | |
|   min-width: 48px;
 | |
|   min-height: 48px;
 | |
|   padding: 0 5px 25px 0 !important;
 | |
| }
 | |
| 
 | |
| .result-videos .content {
 | |
|   overflow: hidden;
 | |
| }
 | |
| 
 | |
| .engines {
 | |
|   float: right;
 | |
|   color: @color-engines-font;
 | |
| 
 | |
|   span {
 | |
|     font-size: smaller;
 | |
|     margin: 0 0.5em 0 0;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .small_font {
 | |
|   font-size: 0.8em;
 | |
| }
 | |
| 
 | |
| .highlight {
 | |
|   color: @color-highlight;
 | |
|   background: inherit;
 | |
|   font-weight: bold;
 | |
| }
 | |
| 
 | |
| .result-images {
 | |
|   display: inline-block;
 | |
|   margin: 0;
 | |
|   padding: 0;
 | |
|   position: relative;
 | |
|   max-height: 200px;
 | |
| 
 | |
|   img {
 | |
|     float: inherit;
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     border: none;
 | |
|     max-height: 200px;
 | |
|     background: @color-base-dark;
 | |
|   }
 | |
| 
 | |
|   span a {
 | |
|     display: none;
 | |
|     color: @color-result-image-span-font;
 | |
|   }
 | |
| 
 | |
|   &:hover span a {
 | |
|     display: block;
 | |
|     position: absolute;
 | |
|     bottom: 0;
 | |
|     right: 0;
 | |
|     padding: 4px;
 | |
|     margin: 0 0 4px 4px;
 | |
|     background-color: @color-result-image-span-background-hover;
 | |
|     font-size: 0.7em;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .torrent_result {
 | |
|   border-left: 10px solid @color-result-torrent-border;
 | |
|   padding-left: 3px;
 | |
| 
 | |
|   p {
 | |
|     margin: 3px;
 | |
|     font-size: 0.8em;
 | |
|   }
 | |
| 
 | |
|   a {
 | |
|     color: @color-result-link-font;
 | |
| 
 | |
|     &:hover {
 | |
|       text-decoration: underline;
 | |
|     }
 | |
| 
 | |
|     &:visited {
 | |
|       color: @color-result-link-visited-font;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| #results {
 | |
|   margin: 2em 2em 20px 2em;
 | |
|   padding: 0;
 | |
|   width: @results-width;
 | |
| }
 | |
| 
 | |
| #suggestions {
 | |
| 
 | |
|   .wrapper {
 | |
|     display: flex;
 | |
|     flex-flow: row wrap;
 | |
|     justify-content: flex-end;
 | |
| 
 | |
|     form {
 | |
|       display: inline-block;
 | |
|       flex: 1 1 50%;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| #suggestions, #answers, #corrections {
 | |
|   max-width: @results-width;
 | |
| }
 | |
| 
 | |
| #suggestions, #answers, #infoboxes, #corrections {
 | |
| 
 | |
|   input {
 | |
|     padding: 0;
 | |
|     margin: 3px;
 | |
|     font-size: 0.9em;
 | |
|     display: inline-block;
 | |
|     background: transparent;
 | |
|     color: @color-result-search-url-font;
 | |
|     cursor: pointer;
 | |
|   }
 | |
| 
 | |
|   input[type="submit"], .infobox .url a {
 | |
|     color: @color-result-link-font;
 | |
|     text-decoration: none;
 | |
|     font-size: 0.9rem;
 | |
| 
 | |
|     &:hover {
 | |
|       text-decoration: underline;
 | |
|     }
 | |
|   }
 | |
| 
 | |
| }
 | |
| 
 | |
| #corrections {
 | |
|   display: flex;
 | |
|   flex-flow: row wrap;
 | |
|   margin: 1em 0;
 | |
| 
 | |
|   h4, input[type="submit"] {
 | |
|     display: inline-block;
 | |
|     margin: 0 0.5em 0 0;
 | |
|   }
 | |
| 
 | |
|   input[type="submit"]::after {
 | |
|     content: ", "
 | |
|   }
 | |
| 
 | |
| }
 | |
| 
 | |
| #suggestions .title, #search_url .title, #apis .title {
 | |
|   margin: 2em 0 0.5em 0;
 | |
|   color: @color-font;
 | |
| }
 | |
| 
 | |
| #answers {
 | |
|   margin: 10px 8px 10px 8px;
 | |
|   border: 1px solid #ddd;
 | |
|   padding: 0.9em;
 | |
|   box-shadow: 0px 0px 5px #CCC;
 | |
| 
 | |
|   h4 {
 | |
|     display: none;
 | |
|   }
 | |
| 
 | |
|   .answer {
 | |
|     display: block;
 | |
|     font-size: 1.2em;
 | |
|     font-weight: bold;
 | |
|   }
 | |
| }
 | |
| 
 | |
| #answers, #infoboxes {
 | |
|   form {
 | |
|     min-width: 210px;
 | |
|   }
 | |
| }
 | |
| 
 | |
| #sidebar {
 | |
|   position: absolute;
 | |
|   top: 100px;
 | |
|   left: 57em;
 | |
| 
 | |
|   margin: 0px 2px 5px 5px;
 | |
|   padding: 0px 2px 2px;
 | |
|   max-width: 25em;
 | |
|   word-wrap: break-word;
 | |
| 
 | |
|   .infobox {
 | |
|     margin: 10px 0 10px;
 | |
|     border: 1px solid #ddd;
 | |
|     padding: 0.9em;
 | |
|     font-size: 0.9em;
 | |
|     box-shadow: 0px 0px 5px #CCC;
 | |
| 
 | |
|     h2 {
 | |
|       margin: 0 0 .5em 0;
 | |
|     }
 | |
| 
 | |
|     img {
 | |
|       max-width: 100%;
 | |
|       max-height: 12em;
 | |
|       display: block;
 | |
|       margin: 0;
 | |
|       padding: 0;
 | |
|     }
 | |
| 
 | |
|     dl {
 | |
|       margin: 0.5em 0;
 | |
|     }
 | |
| 
 | |
|     dt {
 | |
|       display: inline;
 | |
|       margin: 0.5em 0.25em 0.5em 0;
 | |
|       padding: 0;
 | |
|       font-weight: bold;
 | |
|     }
 | |
| 
 | |
|     dd {
 | |
|       display: inline;
 | |
|       margin: 0.5em 0;
 | |
|       padding: 0;
 | |
|     }
 | |
| 
 | |
|     input {
 | |
|       font-size: 1em;
 | |
|     }
 | |
| 
 | |
|     br {
 | |
|       clear: both;
 | |
|     }
 | |
| 
 | |
|     .attributes, .urls {
 | |
|       clear: both;
 | |
|     }
 | |
| 
 | |
|   }
 | |
| }
 | |
| 
 | |
| #search_url {
 | |
|   margin-top: 8px;
 | |
| 
 | |
|   div.selectable_url {
 | |
|     pre {
 | |
|       width: 200em;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| #linkto_preferences {
 | |
|   position: absolute;
 | |
|   right: 10px;
 | |
|   top: 0.9em;
 | |
|   padding: 0;
 | |
|   border: 0;
 | |
|   display: block;
 | |
| 
 | |
|   font-size: 1.2em;
 | |
|   color: @color-search-font;
 | |
| 
 | |
|   a:link *, a:hover *, a:visited *, a:active * {
 | |
|     color: @color-search-font;
 | |
|   }
 | |
| }
 | |
| 
 | |
| #pagination {
 | |
|   clear: both;
 | |
| 
 | |
|   br {
 | |
|     clear: both;
 | |
|   }
 | |
| }
 | |
| 
 | |
| #apis {
 | |
|   margin-top: 8px;
 | |
|   clear: both;
 | |
| }
 | |
| 
 | |
| #backToTop {
 | |
|   border: 1px solid #ddd;
 | |
|   margin: 0 0 0 2em;
 | |
|   padding: 0;
 | |
|   font-size: 1em;
 | |
|   box-shadow: 0px 0px 5px #CCC;
 | |
|   background: white;
 | |
|   position: fixed;
 | |
|   bottom: 85px;
 | |
|   left: @results-width;
 | |
|   transition: opacity 0.5s;
 | |
|   opacity: 0;
 | |
| 
 | |
|   a {
 | |
|     display: block;
 | |
|     margin: 0;
 | |
|     padding: 0.6em;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @media screen and (max-width: 75em) {
 | |
| 
 | |
|   #main_preferences, #main_about, #main_stats {
 | |
|     margin: 0.5em;
 | |
|     width: auto;
 | |
|   }
 | |
| 
 | |
|   #suggestions, #answers {
 | |
|     margin-top: 1em;
 | |
|   }
 | |
| 
 | |
|   #infoboxes {
 | |
|     position: inherit;
 | |
|     max-width: inherit;
 | |
| 
 | |
|     .infobox {
 | |
|       clear:both;
 | |
| 
 | |
|       img {
 | |
|         float: left;
 | |
|         max-width: 10em;
 | |
|         margin: 0.5em 0.5em 0.5em 0;
 | |
|       }
 | |
|     }
 | |
| 
 | |
|   }
 | |
| 
 | |
|   #sidebar {
 | |
|     position: static;
 | |
|     max-width: @results-width;
 | |
|     margin: 0 0 2px 0;
 | |
|     padding: 0;
 | |
|     float: none;
 | |
|     border: none;
 | |
|     width: auto;
 | |
| 
 | |
|     input {
 | |
|       border: 0;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   #apis {
 | |
|     display: none;
 | |
|   }
 | |
| 
 | |
|   #search_url {
 | |
|     display: none;
 | |
|   }
 | |
| 
 | |
|   .result {
 | |
|     border-bottom: 1px solid @color-result-top-border;
 | |
|     margin: 0;
 | |
|     padding-top: 8px;
 | |
|     padding-bottom: 6px;
 | |
| 
 | |
|     h3 {
 | |
|       margin: 0 0 1px 0;
 | |
|     }
 | |
| 
 | |
|     .thumbnail {
 | |
|       max-width: 98%;
 | |
|     }
 | |
| 
 | |
|     .url {
 | |
| 
 | |
|       span.url {
 | |
|         display: block;
 | |
|         white-space: nowrap;
 | |
|         text-overflow: ellipsis;
 | |
|         overflow: hidden;
 | |
|         width: 100%;
 | |
|       }
 | |
| 
 | |
|       a {
 | |
|         float: right;
 | |
|         padding: 0 0.5em;
 | |
|       }
 | |
| 
 | |
|     }
 | |
| 
 | |
|     .engines {
 | |
|       float: right;
 | |
|       padding: 0 0 3px 0;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .result-images {
 | |
|     border-bottom: none !important;
 | |
|   }
 | |
| 
 | |
|   .image_result {
 | |
|     max-width: 98%;
 | |
|     img {
 | |
|       max-width: 98%;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| 
 | |
| #main_results div#results.only_template_images {
 | |
|     flex-direction: column;
 | |
|     width: auto;
 | |
|     display: flex;
 | |
| 
 | |
|     #sidebar {
 | |
| 	position: relative;
 | |
| 	top: auto;
 | |
| 	order: 2;
 | |
|     }
 | |
| 
 | |
|     #urls {
 | |
| 	position: relative;
 | |
| 	order: 1;
 | |
|     }
 | |
| 
 | |
|     #backToTop {
 | |
| 	right: 0.5em;
 | |
| 	left: auto;
 | |
|     }
 | |
| 
 | |
|     #pagination {
 | |
| 	position: relative;
 | |
| 	order: 3;
 | |
|     }
 | |
| }
 | |
| 
 | |
| 
 | |
| @media screen and (max-width: @results-width) {
 | |
| 
 | |
|   article[data-vim-selected]::before {
 | |
|     display: none;
 | |
|     content: "";
 | |
|   }
 | |
| 
 | |
|   #linkto_preferences {
 | |
|     display: none;
 | |
|     postion: fixed !important;
 | |
|     top: 100px;
 | |
|     right: 0px;
 | |
|   }
 | |
| 
 | |
|   #sidebar {
 | |
|     margin: 0 5px 2px 5px;
 | |
|   }
 | |
| 
 | |
|   #corrections {
 | |
|     margin: 1em 5px 1em 5px;
 | |
|   }
 | |
| 
 | |
|   #results {
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     width: initial;
 | |
|   }
 | |
| 
 | |
|   #backToTop {
 | |
|     left: 40em;
 | |
|     bottom: 35px;
 | |
|   }
 | |
| 
 | |
|   .result {
 | |
|     padding: 8px 10px 6px 10px;
 | |
|   }
 | |
| 
 | |
|   .result-images {
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     border: none;
 | |
|   }
 | |
| 
 | |
| }
 | |
| 
 | |
| @media screen and (max-width: 35em) {
 | |
| 
 | |
|   .result-videos {
 | |
| 
 | |
|     img.thumbnail {
 | |
|       float: none !important;
 | |
|     }
 | |
|     .content {
 | |
|       overflow: inherit;
 | |
|     }
 | |
| 
 | |
|   }
 | |
| 
 | |
| }
 |