redesign toggle button of engines && plugins
This commit is contained in:
		
							parent
							
								
									c553523f5b
								
							
						
					
					
						commit
						c59ef83353
					
				
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
							
								
								
									
										57
									
								
								searx/static/themes/oscar/less/logicodev/onoff.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										57
									
								
								searx/static/themes/oscar/less/logicodev/onoff.less
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,57 @@ | ||||
| .onoff-checkbox { | ||||
|     width:15%; | ||||
| } | ||||
| .onoffswitch { | ||||
|     position: relative; | ||||
|     width: 110px; | ||||
|     -webkit-user-select:none; | ||||
|     -moz-user-select:none; | ||||
|     -ms-user-select: none; | ||||
| } | ||||
| .onoffswitch-checkbox { | ||||
|     display: none; | ||||
| } | ||||
| .onoffswitch-label { | ||||
|     display: block; | ||||
|     overflow: hidden; | ||||
|     cursor: pointer; | ||||
|     border: 2px solid #FFFFFF !important; | ||||
|     border-radius: 50px !important; | ||||
| } | ||||
| .onoffswitch-inner { | ||||
|     display: block; | ||||
|     transition: margin 0.3s ease-in 0s; | ||||
| } | ||||
| 
 | ||||
| .onoffswitch-inner:before, .onoffswitch-inner:after { | ||||
|     display: block; | ||||
|     float: left; | ||||
|     width: 50%; | ||||
|     height: 30px; | ||||
|     padding: 0; | ||||
|     line-height: 40px; | ||||
|     font-size: 20px; | ||||
|     box-sizing: border-box; | ||||
|     content: ""; | ||||
|     background-color: #EEEEEE; | ||||
| } | ||||
| 
 | ||||
| .onoffswitch-switch { | ||||
|     display: block; | ||||
|     width: 37px; | ||||
|     background-color: @light-green; | ||||
|     position: absolute; | ||||
|     top: 0; | ||||
|     bottom: 0; | ||||
|     right: 0px; | ||||
|     border: 2px solid #FFFFFF !important; | ||||
|     border-radius: 50px !important; | ||||
|     transition: all 0.3s ease-in 0s; | ||||
| } | ||||
| .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { | ||||
|     margin-right: 0; | ||||
| } | ||||
| .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { | ||||
|     right: 71px; | ||||
|     background-color: #A1A1A1; | ||||
| } | ||||
| @ -6,6 +6,8 @@ | ||||
| 
 | ||||
| @import "checkbox.less"; | ||||
| 
 | ||||
| @import "onoff.less"; | ||||
| 
 | ||||
| @import "results.less"; | ||||
| 
 | ||||
| @import "infobox.less"; | ||||
|  | ||||
							
								
								
									
										57
									
								
								searx/static/themes/oscar/less/pointhi/onoff.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										57
									
								
								searx/static/themes/oscar/less/pointhi/onoff.less
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,57 @@ | ||||
| .onoff-checkbox { | ||||
|     width:15%; | ||||
| } | ||||
| .onoffswitch { | ||||
|     position: relative; | ||||
|     width: 110px; | ||||
|     -webkit-user-select:none; | ||||
|     -moz-user-select:none; | ||||
|     -ms-user-select: none; | ||||
| } | ||||
| .onoffswitch-checkbox { | ||||
|     display: none; | ||||
| } | ||||
| .onoffswitch-label { | ||||
|     display: block; | ||||
|     overflow: hidden; | ||||
|     cursor: pointer; | ||||
|     border: 2px solid #FFFFFF !important; | ||||
|     border-radius: 50px !important; | ||||
| } | ||||
| .onoffswitch-inner { | ||||
|     display: block; | ||||
|     transition: margin 0.3s ease-in 0s; | ||||
| } | ||||
| 
 | ||||
| .onoffswitch-inner:before, .onoffswitch-inner:after { | ||||
|     display: block; | ||||
|     float: left; | ||||
|     width: 50%; | ||||
|     height: 30px; | ||||
|     padding: 0; | ||||
|     line-height: 40px; | ||||
|     font-size: 20px; | ||||
|     box-sizing: border-box; | ||||
|     content: ""; | ||||
|     background-color: #EEEEEE; | ||||
| } | ||||
| 
 | ||||
| .onoffswitch-switch { | ||||
|     display: block; | ||||
|     width: 37px; | ||||
|     background-color: #00CC00; | ||||
|     position: absolute; | ||||
|     top: 0; | ||||
|     bottom: 0; | ||||
|     right: 0px; | ||||
|     border: 2px solid #FFFFFF !important; | ||||
|     border-radius: 50px !important; | ||||
|     transition: all 0.3s ease-in 0s; | ||||
| } | ||||
| .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { | ||||
|     margin-right: 0; | ||||
| } | ||||
| .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { | ||||
|     right: 71px; | ||||
|     background-color: #A1A1A1; | ||||
| } | ||||
| @ -2,6 +2,8 @@ | ||||
| 
 | ||||
| @import "checkbox.less"; | ||||
| 
 | ||||
| @import "onoff.less"; | ||||
| 
 | ||||
| @import "results.less"; | ||||
| 
 | ||||
| @import "infobox.less"; | ||||
|  | ||||
| @ -68,9 +68,11 @@ | ||||
| {%- endmacro %} | ||||
| 
 | ||||
| {% macro checkbox_toggle(id, blocked) -%} | ||||
|     <div class="checkbox"> | ||||
|         <input class="hidden" type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} /> | ||||
|         <label class="btn btn-success label_hide_if_checked" for="{{ id }}">{{ _('Block') }}</label> | ||||
|         <label class="btn btn-danger label_hide_if_not_checked" for="{{ id }}">{{ _('Allow') }}</label> | ||||
|     <div class="onoffswitch"> | ||||
|         <input type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} class="onoffswitch-checkbox"> | ||||
|         <label class="onoffswitch-label" for="{{ id }}"> | ||||
|             <span class="onoffswitch-inner"></span> | ||||
|             <span class="onoffswitch-switch"></span> | ||||
|         </label> | ||||
|     </div> | ||||
| {%- endmacro %} | ||||
|  | ||||
| @ -164,7 +164,9 @@ | ||||
|                             {% if not search_engine.private %} | ||||
|                                 <tr> | ||||
|                                     {% if not rtl %} | ||||
|                                     <td>{{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}</td> | ||||
|                                     <td class="onoff-checkbox"> | ||||
|                                         {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }} | ||||
|                                     </td> | ||||
|                                     <th>{{ search_engine.name }}</th> | ||||
| 				    <td>{{ shortcuts[search_engine.name] }}</td> | ||||
| 				    <td><input type="checkbox" {{ "checked" if search_engine.safesearch==True else ""}} readonly="readonly" disabled="disabled"></td> | ||||
| @ -176,7 +178,9 @@ | ||||
| 				    <td><input type="checkbox" {{ "checked" if search_engine.safesearch==True else ""}} readonly="readonly" disabled="disabled"></td> | ||||
| 				    <td>{{ shortcuts[search_engine.name] }}</td> | ||||
|                                     <th>{{ search_engine.name }}</th> | ||||
|                                     <td>{{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}</td> | ||||
|                                     <td class="onoff-checkbox"> | ||||
|                                         {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }} | ||||
|                                     </td> | ||||
|                                     {% endif %} | ||||
|                                 </tr> | ||||
|                             {% endif %} | ||||
| @ -203,10 +207,12 @@ | ||||
|                             <div class="panel-body"> | ||||
|                                 <div class="col-xs-6 col-sm-4 col-md-6">{{ _(plugin.description) }}</div> | ||||
|                                 <div class="col-xs-6 col-sm-4 col-md-6"> | ||||
|                                     <div class="onoff-checkbox"> | ||||
|                                     {{ checkbox_toggle('plugin_' + plugin.id, plugin.id not in allowed_plugins) }} | ||||
|                                     </div> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         {% endfor %} | ||||
|                     </div> | ||||
|                 </fieldset> | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Noemi Vanyi
						Noemi Vanyi