Merge pull request #168 from return42/stylelint
Lint the less files of the simple theme
This commit is contained in:
		
						commit
						c91603dae9
					
				| @ -88,6 +88,15 @@ | ||||
|                (setq-local js-indent-level 2) | ||||
|                (flycheck-checker . json-python-json))))) | ||||
| 
 | ||||
|  (js-mode | ||||
|   . ((eval . (progn | ||||
|                (setq-local js-indent-level 2) | ||||
|                ;; flycheck should use the jshint checker from simple theme | ||||
|                (setq-local flycheck-javascript-jshint-executable | ||||
|                            (expand-file-name "searx/static/themes/simple/node_modules/.bin/jshint" prj-root)) | ||||
|                (flycheck-mode) | ||||
|                )))) | ||||
| 
 | ||||
|  (python-mode | ||||
|   . ((eval . (progn | ||||
| 
 | ||||
|  | ||||
							
								
								
									
										8
									
								
								searx/static/themes/simple/.jshintrc
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								searx/static/themes/simple/.jshintrc
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,8 @@ | ||||
| { | ||||
|   "proto": true, | ||||
|   "globals": { | ||||
|     "browser": true, | ||||
|     "jQuery": false, | ||||
|     "devel": true | ||||
|   } | ||||
| } | ||||
							
								
								
									
										3
									
								
								searx/static/themes/simple/.stylelintrc.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								searx/static/themes/simple/.stylelintrc.json
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,3 @@ | ||||
| { | ||||
|   "extends": "stylelint-config-standard" | ||||
| } | ||||
| @ -1,3 +1,5 @@ | ||||
| /*jshint esversion: 6 */ | ||||
| 
 | ||||
| module.exports = function(grunt) { | ||||
| 
 | ||||
|   const path = require('path'); | ||||
| @ -12,16 +14,14 @@ module.exports = function(grunt) { | ||||
|     }, | ||||
|     jshint: { | ||||
|       files: ['src/js/main/*.js', 'src/js/head/*.js', '../__common__/js/*.js'], | ||||
|     }, | ||||
|     stylelint: { | ||||
|       options: { | ||||
|         reporterOutput: "", | ||||
|         proto: true, | ||||
|         // options here to override JSHint defaults
 | ||||
|         globals: { | ||||
|           browser: true, | ||||
|           jQuery: false, | ||||
|           devel: true | ||||
|         } | ||||
|       } | ||||
|         formatter: 'unix', | ||||
|       }, | ||||
|       src: [ | ||||
|         'src/less/**/*.less', | ||||
|       ] | ||||
|     }, | ||||
|     copy: { | ||||
|       js: { | ||||
| @ -191,8 +191,17 @@ module.exports = function(grunt) { | ||||
|   grunt.loadNpmTasks('grunt-contrib-less'); | ||||
|   grunt.loadNpmTasks('grunt-contrib-cssmin'); | ||||
|   grunt.loadNpmTasks('grunt-webfont'); | ||||
|   grunt.loadNpmTasks('grunt-stylelint'); | ||||
| 
 | ||||
|   grunt.registerTask('test', ['jshint']); | ||||
| 
 | ||||
|   grunt.registerTask('default', ['jshint', 'copy', 'concat', 'uglify', 'less:development', 'less:production']); | ||||
|   grunt.registerTask('default', [ | ||||
|     'jshint', | ||||
|     'stylelint', | ||||
|     'copy', | ||||
|     'concat', | ||||
|     'uglify', | ||||
|     'less:development', | ||||
|     'less:production' | ||||
|   ]); | ||||
| }; | ||||
|  | ||||
| @ -9,11 +9,14 @@ | ||||
|     "grunt-contrib-less": "~3.0.0", | ||||
|     "grunt-contrib-uglify": "~5.0.1", | ||||
|     "grunt-contrib-watch": "~1.1.0", | ||||
|     "grunt-stylelint": "^0.16.0", | ||||
|     "grunt-webfont": "^1.7.2", | ||||
|     "ionicons-npm": "^2.0.1", | ||||
|     "jslint": "^0.12.1", | ||||
|     "less": "^4.1.1", | ||||
|     "less-plugin-clean-css": "^1.5.1" | ||||
|     "less-plugin-clean-css": "^1.5.1", | ||||
|     "stylelint": "^13.13.1", | ||||
|     "stylelint-config-standard": "^22.0.0" | ||||
|   }, | ||||
|   "dependencies": { | ||||
|     "autocomplete-js": "2.7.1", | ||||
| @ -25,6 +28,8 @@ | ||||
|     "build": "grunt", | ||||
|     "watch": "grunt watch", | ||||
|     "webfont": "grunt webfont", | ||||
|     "clean": "rm -Rf node_modules package-lock.json ion.less" | ||||
|     "clean": "rm -Rf node_modules package-lock.json ion.less", | ||||
|     "stylelint": "grunt stylelint", | ||||
|     "stylelint-fix": "grunt stylelint --fix" | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -3,59 +3,63 @@ | ||||
| @background_color:  white; | ||||
| 
 | ||||
| .autocomplete { | ||||
|     position: absolute; | ||||
|     max-height: 0; | ||||
|     overflow-y: hidden; | ||||
|     text-align: left; | ||||
|   position: absolute; | ||||
|   max-height: 0; | ||||
|   overflow-y: hidden; | ||||
|   text-align: left; | ||||
| 
 | ||||
|     &:active, &:focus, &:hover { | ||||
|       background-color: @background_color; | ||||
|   &:active, | ||||
|   &:focus, | ||||
|   &:hover { | ||||
|     background-color: @background_color; | ||||
|   } | ||||
| 
 | ||||
|   &:empty { | ||||
|     display: none; | ||||
|   } | ||||
| 
 | ||||
|   > ul { | ||||
|     list-style-type: none; | ||||
|     margin: 0; | ||||
|     padding: 0; | ||||
| 
 | ||||
|     > li { | ||||
|       cursor: pointer; | ||||
|       padding: 5px 0 5px 10px; | ||||
| 
 | ||||
|       &.active, | ||||
|       &:active, | ||||
|       &:focus { | ||||
|         background-color: @color-base; | ||||
| 
 | ||||
|         a:active, | ||||
|         a:focus, | ||||
|         a:hover { | ||||
|           text-decoration: none; | ||||
|         } | ||||
|       } | ||||
| 
 | ||||
|       &.locked { | ||||
|         cursor: inherit; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   &.open { | ||||
|     display: block; | ||||
|     background-color: @background_color; | ||||
|     border: 1px solid @color-base; | ||||
|     max-height: 500px; | ||||
|     overflow-y: auto; | ||||
|     z-index: 100; | ||||
| 
 | ||||
|     &:empty { | ||||
|         display: none; | ||||
|     } | ||||
| 
 | ||||
|     > ul { | ||||
|         list-style-type: none; | ||||
|         margin: 0; | ||||
|         padding: 0; | ||||
| 
 | ||||
|         > li { | ||||
|             cursor: pointer; | ||||
|             padding: 5px 0 5px 10px; | ||||
| 
 | ||||
|             &.active, &:active, &:focus { | ||||
|                 background-color: @color-base; | ||||
| 
 | ||||
|                 a:active, a:focus, a:hover { | ||||
|                     text-decoration: none; | ||||
|                 } | ||||
|             } | ||||
| 
 | ||||
|             &.locked { | ||||
|                 cursor: inherit; | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|     &.open { | ||||
|         display: block; | ||||
|         background-color: @background_color; | ||||
|         border: 1px solid @color-base; | ||||
|         max-height: 500px; | ||||
|         overflow-y: auto; | ||||
|         z-index:100; | ||||
| 
 | ||||
|         &:empty { | ||||
|             display: none; | ||||
|         } | ||||
|       display: none; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| @media screen and (max-width: @results-width) { | ||||
| 
 | ||||
|   .autocomplete { | ||||
|     bottom: 0; | ||||
|   } | ||||
| @ -65,5 +69,4 @@ | ||||
|     border-bottom: 1px solid @color-result-top-border; | ||||
|     text-align: left; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
|  | ||||
| @ -1,8 +1,9 @@ | ||||
| .code-highlight pre { | ||||
|     overflow: auto; | ||||
|     background-color: inherit; | ||||
|     color: inherit; | ||||
|     border: inherit; | ||||
|   overflow: auto; | ||||
|   background-color: inherit; | ||||
|   color: inherit; | ||||
|   border: inherit; | ||||
| } | ||||
| 
 | ||||
| // stylelint-disable no-invalid-position-at-import-rule | ||||
| @import "../generated/pygments.less"; | ||||
|  | ||||
| @ -38,11 +38,8 @@ | ||||
| @color-a-font: @color-base; | ||||
| @color-a-font-hover: @color-base; | ||||
| 
 | ||||
| 
 | ||||
| /// Start-Screen | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| /// Search-Input | ||||
| 
 | ||||
| @color-search-border: @color-base; | ||||
| @ -75,7 +72,6 @@ | ||||
| @color-categories-item-border-unselected: #E8E7E6; | ||||
| @color-categories-item-border-unselected-hover: @color-base; | ||||
| 
 | ||||
| 
 | ||||
| /// Results | ||||
| 
 | ||||
| @color-suggestions-button-background: @color-base; | ||||
| @ -108,7 +104,6 @@ | ||||
| @color-result-search-url-border: #888; | ||||
| @color-result-search-url-font: #444; | ||||
| 
 | ||||
| 
 | ||||
| /// Settings | ||||
| 
 | ||||
| @color-settings-fieldset: @color-base; | ||||
|  | ||||
| @ -1,5 +1,4 @@ | ||||
| .index { | ||||
| 
 | ||||
|   text-align: center; | ||||
| 
 | ||||
|   .title { | ||||
| @ -29,15 +28,12 @@ | ||||
|     padding: 6px 10px; | ||||
|     border-bottom: initial !important; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 75em) { | ||||
| 
 | ||||
|   div.title { | ||||
|     h1 { | ||||
|       font-size: 1em; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
| } | ||||
|  | ||||
| @ -4,34 +4,34 @@ | ||||
| 
 | ||||
| // Mixins | ||||
| .text-size-adjust (@property: 100%) { | ||||
| 	-webkit-text-size-adjust: @property; | ||||
| 	-ms-text-size-adjust: @property; | ||||
| 	-moz-text-size-adjust: @property; | ||||
| 	text-size-adjust: @property; | ||||
|   -webkit-text-size-adjust: @property; | ||||
|   -ms-text-size-adjust: @property; | ||||
|   -moz-text-size-adjust: @property; | ||||
|   text-size-adjust: @property; | ||||
| } | ||||
| 
 | ||||
| .rounded-corners (@radius: 4px) { | ||||
| 	-webkit-border-radius: @radius; | ||||
| 	-moz-border-radius: @radius; | ||||
| 	border-radius: @radius; | ||||
|   -webkit-border-radius: @radius; | ||||
|   -moz-border-radius: @radius; | ||||
|   border-radius: @radius; | ||||
| } | ||||
| 
 | ||||
| // disable user selection | ||||
| .disable-user-select () { | ||||
| 	-webkit-touch-callout: none; | ||||
| 	-webkit-user-select: none; | ||||
| 	-khtml-user-select: none; | ||||
| 	-moz-user-select: none; | ||||
| 	-ms-user-select: none; | ||||
| 	user-select: none; | ||||
|   -webkit-touch-callout: none; | ||||
|   -webkit-user-select: none; | ||||
|   -khtml-user-select: none; | ||||
|   -moz-user-select: none; | ||||
|   -ms-user-select: none; | ||||
|   user-select: none; | ||||
| } | ||||
| 
 | ||||
| // select all on focus | ||||
| .select-all-on-focus() { | ||||
| 	-webkit-user-select: all; | ||||
| 	-moz-user-select: all; | ||||
| 	-ms-user-select: element; | ||||
| 	user-select: all; | ||||
|   -webkit-user-select: all; | ||||
|   -moz-user-select: all; | ||||
|   -ms-user-select: element; | ||||
|   user-select: all; | ||||
| } | ||||
| 
 | ||||
| // see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox | ||||
| @ -44,19 +44,19 @@ | ||||
| } | ||||
| 
 | ||||
| .inline-flex() { | ||||
| 	display: -webkit-inline-box; | ||||
| 	display: -moz-inline-box; | ||||
| 	display: -webkit-inline-flex; | ||||
| 	display: -ms-inline-flexbox; | ||||
| 	display: inline-flex; | ||||
|   display: -webkit-inline-box; | ||||
|   display: -moz-inline-box; | ||||
|   display: -webkit-inline-flex; | ||||
|   display: -ms-inline-flexbox; | ||||
|   display: inline-flex; | ||||
| } | ||||
| 
 | ||||
| .flex-direction-row() { | ||||
| 	-webkit-box-direction: normal; | ||||
| 	-webkit-box-orient: horizontal; | ||||
| 	-moz-box-direction: normal; | ||||
| 	-moz-box-orient: horizontal; | ||||
| 	-webkit-flex-direction: row; | ||||
| 	-ms-flex-direction: row; | ||||
| 	flex-direction: row; | ||||
|   -webkit-box-direction: normal; | ||||
|   -webkit-box-orient: horizontal; | ||||
|   -moz-box-direction: normal; | ||||
|   -moz-box-orient: horizontal; | ||||
|   -webkit-flex-direction: row; | ||||
|   -ms-flex-direction: row; | ||||
|   flex-direction: row; | ||||
| } | ||||
|  | ||||
| @ -1,10 +1,10 @@ | ||||
| #main_preferences { | ||||
|   form { | ||||
|       width: 100%; | ||||
|     width: 100%; | ||||
|   } | ||||
| 
 | ||||
|   fieldset { | ||||
|   	margin: 8px; | ||||
|     margin: 8px; | ||||
|     border: none; | ||||
|   } | ||||
| 
 | ||||
| @ -12,21 +12,21 @@ | ||||
|     margin: 0; | ||||
|     padding: 5px 0 0 0; | ||||
|     display: block; | ||||
|     float:left; | ||||
|     float: left; | ||||
|     width: 300px; | ||||
|   } | ||||
| 
 | ||||
|   .value { | ||||
|     margin: 0; | ||||
|     padding: 0; | ||||
|     float:left; | ||||
|     float: left; | ||||
|     width: 15em; | ||||
|   } | ||||
| 
 | ||||
|   .description { | ||||
|     margin: 0; | ||||
|     padding: 5px 0 0 0; | ||||
|     float:left; | ||||
|     float: left; | ||||
|     width: 50%; | ||||
|     color: darken(#dcdcdc, 30%); | ||||
|     font-size: 90%; | ||||
| @ -48,22 +48,25 @@ | ||||
|   table.cookies { | ||||
|     width: auto; | ||||
| 
 | ||||
|     th, td { | ||||
|     th, | ||||
|     td { | ||||
|       text-align: left; | ||||
|       padding: 0.25em; | ||||
|     } | ||||
| 
 | ||||
|     th:first-child, td:first-child { | ||||
|     th:first-child, | ||||
|     td:first-child { | ||||
|       padding-right: 4em; | ||||
|     } | ||||
| 
 | ||||
|     &>tbody>tr:nth-child(even)>th, | ||||
|     &>tbody>tr:nth-child(even)>td { | ||||
|     & > tbody > tr:nth-child(even) > th, | ||||
|     & > tbody > tr:nth-child(even) > td { | ||||
|       background-color: @color-settings-tr-hover; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .name, .shortcut { | ||||
|   .name, | ||||
|   .shortcut { | ||||
|     text-align: left; | ||||
|   } | ||||
| 
 | ||||
| @ -72,6 +75,7 @@ | ||||
|     color: white; | ||||
|     border: 0 none; | ||||
|     .rounded-corners; | ||||
| 
 | ||||
|     cursor: pointer; | ||||
|     display: inline-block; | ||||
|     margin: 2px 4px; | ||||
| @ -87,17 +91,15 @@ | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
| 
 | ||||
|   div.selectable_url { | ||||
|     pre { | ||||
|       width: 100%; | ||||
|     } | ||||
|   } | ||||
|    | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 75em) { | ||||
|   .preferences_back { | ||||
| 	   clear: both; | ||||
|    } | ||||
|     clear: both; | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -2,7 +2,7 @@ | ||||
| * searx, A privacy-respecting, hackable metasearch engine | ||||
| */ | ||||
| 
 | ||||
| #search  { | ||||
| #search { | ||||
|   padding: 0 2em; | ||||
|   margin: 0; | ||||
|   background: #f7f7f7; | ||||
| @ -17,8 +17,8 @@ | ||||
|   margin: 0 12px 0 0; | ||||
|   display: inline-flex; | ||||
|   flex-direction: row; | ||||
| 
 | ||||
|   white-space: nowrap; | ||||
| 
 | ||||
|   /* | ||||
|   &:has(q:focus) { | ||||
|   box-shadow: 0px 0px 5px #CCC; | ||||
| @ -31,7 +31,6 @@ | ||||
|   border-collapse: separate; | ||||
|   box-sizing: border-box; | ||||
|   width: 1.8em; | ||||
| 
 | ||||
|   margin: 0; | ||||
|   padding: 2px; | ||||
|   height: 2.2em; | ||||
| @ -40,7 +39,7 @@ | ||||
|   border-bottom: 1px solid @color-search-border; | ||||
|   border-right: none; | ||||
|   border-left: none; | ||||
|   border-radius: 0px; | ||||
|   border-radius: 0; | ||||
|   outline: none; | ||||
|   color: @color-search-font; | ||||
|   font-size: 16px; | ||||
| @ -55,21 +54,17 @@ | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| #q::-ms-clear, #q::-webkit-search-cancel-button { | ||||
|   display: none; | ||||
| } | ||||
| 
 | ||||
| #q, #send_search { | ||||
| #q, | ||||
| #send_search { | ||||
|   display: block !important; | ||||
|   border-collapse: separate; | ||||
|   box-sizing: border-box; | ||||
| 
 | ||||
|   margin: 0; | ||||
|   padding: 2px; | ||||
|   height: 2.2em; | ||||
|   background: none repeat scroll 0 0 @color-search-background; | ||||
|   border: 1px solid @color-search-border; | ||||
|   border-radius: 0px; | ||||
|   border-radius: 0; | ||||
|   outline: none; | ||||
|   color: @color-search-font; | ||||
|   font-size: 16px; | ||||
| @ -79,11 +74,16 @@ | ||||
| #q { | ||||
|   outline: medium none; | ||||
|   padding-left: 8px; | ||||
|   padding-right: 0px !important; | ||||
|   padding-right: 0 !important; | ||||
|   border-right: none; | ||||
|   width: @search-width; | ||||
| } | ||||
| 
 | ||||
| #q::-ms-clear, | ||||
| #q::-webkit-search-cancel-button { | ||||
|   display: none; | ||||
| } | ||||
| 
 | ||||
| #send_search { | ||||
|   border-left: none; | ||||
|   width: 2.2em; | ||||
| @ -105,20 +105,19 @@ | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 75em) { | ||||
| 
 | ||||
|   #categories { | ||||
|     font-size: 90%; | ||||
|     clear: both; | ||||
| 
 | ||||
|     .checkbox_container { | ||||
|       margin-top: 2px; | ||||
|       margin: auto; | ||||
|       margin-top: 2px; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   html.touch { | ||||
|     #main_index, #main_results { | ||||
| 
 | ||||
|     #main_index, | ||||
|     #main_results { | ||||
|       #categories_container { | ||||
|         width: 1000px; | ||||
|         width: -moz-max-content; | ||||
| @ -141,11 +140,9 @@ | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: @results-width) { | ||||
| 
 | ||||
|   #search { | ||||
|     width: 100%; | ||||
|     margin: 0; | ||||
| @ -177,7 +174,8 @@ | ||||
|     margin: 0.5em; | ||||
|   } | ||||
| 
 | ||||
|   .language, .time_range { | ||||
|   .language, | ||||
|   .time_range { | ||||
|     width: 45%; | ||||
|   } | ||||
| 
 | ||||
| @ -189,7 +187,6 @@ | ||||
|       border-bottom: 0; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| #categories { | ||||
| @ -206,7 +203,7 @@ | ||||
|   display: inline-block; | ||||
|   position: relative; | ||||
|   margin: 0 3px; | ||||
|   padding: 0px; | ||||
|   padding: 0; | ||||
| 
 | ||||
|   input { | ||||
|     display: none; | ||||
| @ -224,12 +221,12 @@ | ||||
|   } | ||||
| 
 | ||||
|   input[type="checkbox"]:focus + label { | ||||
|     box-shadow: 0px 0px 8px #3498DB; | ||||
|     box-shadow: 0 0 8px #3498db; | ||||
|   } | ||||
| 
 | ||||
|   /*label:hover { | ||||
|   /* label:hover { | ||||
|   border-bottom: 2px solid @color-categories-item-border-unselected-hover; | ||||
|   }*/ | ||||
|   } */ | ||||
| 
 | ||||
|   input[type="checkbox"]:checked + label { | ||||
|     background: @color-categories-item-selected; | ||||
| @ -239,7 +236,6 @@ | ||||
| } | ||||
| 
 | ||||
| #categories_container { | ||||
| 
 | ||||
|   position: relative; | ||||
| 
 | ||||
|   .help { | ||||
| @ -247,12 +243,10 @@ | ||||
|     width: 100%; | ||||
|     bottom: -20px; | ||||
|     overflow: hidden; | ||||
| 
 | ||||
|     opacity: 0; | ||||
|     transition: opacity 1s ease; | ||||
| 
 | ||||
|     font-size: 0.8em; | ||||
|     text-position: center; | ||||
|     text-align: center; | ||||
|     background: white; | ||||
|   } | ||||
| 
 | ||||
| @ -260,5 +254,4 @@ | ||||
|     opacity: 0.8; | ||||
|     transition: opacity 1s ease; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
|  | ||||
| @ -1,6 +1,6 @@ | ||||
| @import "style.less"; | ||||
| 
 | ||||
| #search_submit { | ||||
| 	left: 1px; | ||||
| 	right:auto; | ||||
|   left: 1px; | ||||
|   right: auto; | ||||
| } | ||||
|  | ||||
| @ -4,31 +4,20 @@ | ||||
| * To convert "style.less" to "style.css" run: $make styles | ||||
| */ | ||||
| 
 | ||||
| // stylelint-disable no-descending-specificity | ||||
| 
 | ||||
| @stacked-bar-chart: rgb(0, 0, 0); | ||||
| 
 | ||||
| @import "../../__common__/less/new_issue.less"; | ||||
| @import "../../__common__/less/stats.less"; | ||||
| 
 | ||||
| @import (inline) "../../node_modules/normalize.css/normalize.css"; | ||||
| 
 | ||||
| @import "../generated/ion.less"; | ||||
| 
 | ||||
| @import "definitions.less"; | ||||
| 
 | ||||
| @import "mixins.less"; | ||||
| 
 | ||||
| @import "code.less"; | ||||
| 
 | ||||
| @import "toolkit.less"; | ||||
| 
 | ||||
| @import "autocomplete.less"; | ||||
| 
 | ||||
| // ion-icon | ||||
| .ion-icon-big { | ||||
|   .ion-icon; | ||||
|   font-size: 149%; | ||||
| } | ||||
| 
 | ||||
| // for index.html template | ||||
| @import "index.less"; | ||||
| 
 | ||||
| @ -38,17 +27,26 @@ | ||||
| // Search-Field | ||||
| @import "search.less"; | ||||
| 
 | ||||
| // ion-icon | ||||
| .ion-icon-big { | ||||
|   .ion-icon; | ||||
| 
 | ||||
|   font-size: 149%; | ||||
| } | ||||
| 
 | ||||
| // 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 { | ||||
| body, | ||||
| main { | ||||
|   padding: 0; | ||||
|   margin: 0; | ||||
| } | ||||
| @ -58,14 +56,9 @@ main { | ||||
|   // position: absolute; | ||||
| } | ||||
| 
 | ||||
| footer { | ||||
|   // position:absolute; | ||||
| 	bottom:0; | ||||
| 	width:100%; | ||||
| 	height:50px; | ||||
| } | ||||
| 
 | ||||
| #main_preferences, #main_about, #main_stats { | ||||
| #main_preferences, | ||||
| #main_about, | ||||
| #main_stats { | ||||
|   margin: 3em; | ||||
|   width: auto; | ||||
| } | ||||
| @ -84,24 +77,27 @@ footer { | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| #main_preferences h1, #main_stats h1 { | ||||
| #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; | ||||
|     visibility: hidden; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| input[type="submit"], #results button[type="submit"] { | ||||
| 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; | ||||
| } | ||||
| @ -147,7 +143,7 @@ article.result-images[data-vim-selected]::before { | ||||
| 
 | ||||
|   h3 { | ||||
|     font-size: 1.1em; | ||||
|     word-wrap:break-word; | ||||
|     word-wrap: break-word; | ||||
|     margin: 5px 0 1px 0; | ||||
|     padding: 0; | ||||
|     margin-bottom: 0; | ||||
| @ -161,26 +157,30 @@ article.result-images[data-vim-selected]::before { | ||||
|         color: @color-result-link-visited-font; | ||||
|       } | ||||
| 
 | ||||
|       &:focus, &:hover { | ||||
|       &:focus, | ||||
|       &:hover { | ||||
|         text-decoration: underline; | ||||
|         border: none; | ||||
|         -webkit-box-shadow: none; | ||||
|         box-shadow: none; | ||||
|         outline:none; | ||||
|         outline: none; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .cache_link, .proxyfied_link { | ||||
|   .cache_link, | ||||
|   .proxyfied_link { | ||||
|     font-size: 0.9em !important; | ||||
|   } | ||||
| 
 | ||||
|   .content, .stat, .altlink { | ||||
|   .content, | ||||
|   .stat, | ||||
|   .altlink { | ||||
|     font-size: 0.9em; | ||||
|     margin: 0; | ||||
|     padding: 0; | ||||
|     max-width: 54em; | ||||
|     word-wrap:break-word; | ||||
|     word-wrap: break-word; | ||||
|     line-height: 1.24; | ||||
| 
 | ||||
|     .highlight { | ||||
| @ -203,7 +203,7 @@ article.result-images[data-vim-selected]::before { | ||||
|     margin: 0 0 3px 0; | ||||
|     padding: 0; | ||||
|     max-width: 54em; | ||||
|     word-wrap:break-word; | ||||
|     word-wrap: break-word; | ||||
|     color: @color-result-url-font; | ||||
|   } | ||||
| 
 | ||||
| @ -213,7 +213,6 @@ article.result-images[data-vim-selected]::before { | ||||
|   } | ||||
| 
 | ||||
|   img { | ||||
| 
 | ||||
|     &.thumbnail { | ||||
|       float: left; | ||||
|       padding: 0 5px 10px 0; | ||||
| @ -231,13 +230,11 @@ article.result-images[data-vim-selected]::before { | ||||
|       object-fit: scale-down; | ||||
|       object-position: right top; | ||||
|     } | ||||
| 
 | ||||
|   } | ||||
| 
 | ||||
|   .break { | ||||
|       clear: both; | ||||
|     clear: both; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| .category-social .image { | ||||
| @ -305,7 +302,6 @@ article.result-images[data-vim-selected]::before { | ||||
| } | ||||
| 
 | ||||
| .result-map { | ||||
| 
 | ||||
|   img.image { | ||||
|     float: right !important; | ||||
|     height: 100px !important; | ||||
| @ -313,7 +309,7 @@ article.result-images[data-vim-selected]::before { | ||||
|   } | ||||
| 
 | ||||
|   table { | ||||
|     font-size: .9em; | ||||
|     font-size: 0.9em; | ||||
|     width: auto; | ||||
|     border-collapse: separate; | ||||
|     border-spacing: 0 0.35rem; | ||||
| @ -365,7 +361,6 @@ article.result-images[data-vim-selected]::before { | ||||
| } | ||||
| 
 | ||||
| #suggestions { | ||||
| 
 | ||||
|   .wrapper { | ||||
|     display: flex; | ||||
|     flex-flow: row wrap; | ||||
| @ -378,12 +373,16 @@ article.result-images[data-vim-selected]::before { | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| #suggestions, #answers, #corrections { | ||||
| #suggestions, | ||||
| #answers, | ||||
| #corrections { | ||||
|   max-width: @results-width; | ||||
| } | ||||
| 
 | ||||
| #suggestions, #answers, #infoboxes, #corrections { | ||||
| 
 | ||||
| #suggestions, | ||||
| #answers, | ||||
| #infoboxes, | ||||
| #corrections { | ||||
|   input { | ||||
|     padding: 0; | ||||
|     margin: 3px; | ||||
| @ -394,7 +393,8 @@ article.result-images[data-vim-selected]::before { | ||||
|     cursor: pointer; | ||||
|   } | ||||
| 
 | ||||
|   input[type="submit"], .infobox .url a { | ||||
|   input[type="submit"], | ||||
|   .infobox .url a { | ||||
|     color: @color-result-link-font; | ||||
|     text-decoration: none; | ||||
|     font-size: 0.9rem; | ||||
| @ -403,7 +403,6 @@ article.result-images[data-vim-selected]::before { | ||||
|       text-decoration: underline; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| #corrections { | ||||
| @ -411,18 +410,20 @@ article.result-images[data-vim-selected]::before { | ||||
|   flex-flow: row wrap; | ||||
|   margin: 1em 0; | ||||
| 
 | ||||
|   h4, input[type="submit"] { | ||||
|   h4, | ||||
|   input[type="submit"] { | ||||
|     display: inline-block; | ||||
|     margin: 0 0.5em 0 0; | ||||
|   } | ||||
| 
 | ||||
|   input[type="submit"]::after { | ||||
|     content: ", " | ||||
|     content: ", "; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| #suggestions .title, #search_url .title, #apis .title { | ||||
| #suggestions .title, | ||||
| #search_url .title, | ||||
| #apis .title { | ||||
|   margin: 2em 0 0.5em 0; | ||||
|   color: @color-font; | ||||
| } | ||||
| @ -431,7 +432,7 @@ article.result-images[data-vim-selected]::before { | ||||
|   margin: 10px 8px 10px 8px; | ||||
|   border: 1px solid #ddd; | ||||
|   padding: 0.9em; | ||||
|   box-shadow: 0px 0px 5px #CCC; | ||||
|   box-shadow: 0 0 5px #ccc; | ||||
| 
 | ||||
|   h4 { | ||||
|     display: none; | ||||
| @ -444,7 +445,8 @@ article.result-images[data-vim-selected]::before { | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| #answers, #infoboxes { | ||||
| #answers, | ||||
| #infoboxes { | ||||
|   form { | ||||
|     min-width: 210px; | ||||
|   } | ||||
| @ -454,9 +456,8 @@ article.result-images[data-vim-selected]::before { | ||||
|   position: absolute; | ||||
|   top: 100px; | ||||
|   left: 57em; | ||||
| 
 | ||||
|   margin: 0px 2px 5px 5px; | ||||
|   padding: 0px 2px 2px; | ||||
|   margin: 0 2px 5px 5px; | ||||
|   padding: 0 2px 2px; | ||||
|   max-width: 25em; | ||||
|   word-wrap: break-word; | ||||
| 
 | ||||
| @ -465,10 +466,10 @@ article.result-images[data-vim-selected]::before { | ||||
|     border: 1px solid #ddd; | ||||
|     padding: 0.9em; | ||||
|     font-size: 0.9em; | ||||
|     box-shadow: 0px 0px 5px #CCC; | ||||
|     box-shadow: 0 0 5px #ccc; | ||||
| 
 | ||||
|     h2 { | ||||
|       margin: 0 0 .5em 0; | ||||
|       margin: 0 0 0.5em 0; | ||||
|     } | ||||
| 
 | ||||
|     img { | ||||
| @ -504,10 +505,10 @@ article.result-images[data-vim-selected]::before { | ||||
|       clear: both; | ||||
|     } | ||||
| 
 | ||||
|     .attributes, .urls { | ||||
|     .attributes, | ||||
|     .urls { | ||||
|       clear: both; | ||||
|     } | ||||
| 
 | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @ -528,11 +529,13 @@ article.result-images[data-vim-selected]::before { | ||||
|   padding: 0; | ||||
|   border: 0; | ||||
|   display: block; | ||||
| 
 | ||||
|   font-size: 1.2em; | ||||
|   color: @color-search-font; | ||||
| 
 | ||||
|   a:link *, a:hover *, a:visited *, a:active * { | ||||
|   a:link *, | ||||
|   a:hover *, | ||||
|   a:visited *, | ||||
|   a:active * { | ||||
|     color: @color-search-font; | ||||
|   } | ||||
| } | ||||
| @ -555,7 +558,7 @@ article.result-images[data-vim-selected]::before { | ||||
|   margin: 0 0 0 2em; | ||||
|   padding: 0; | ||||
|   font-size: 1em; | ||||
|   box-shadow: 0px 0px 5px #CCC; | ||||
|   box-shadow: 0 0 5px #ccc; | ||||
|   background: white; | ||||
|   position: fixed; | ||||
|   bottom: 85px; | ||||
| @ -571,13 +574,15 @@ article.result-images[data-vim-selected]::before { | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 75em) { | ||||
| 
 | ||||
|   #main_preferences, #main_about, #main_stats { | ||||
|   #main_preferences, | ||||
|   #main_about, | ||||
|   #main_stats { | ||||
|     margin: 0.5em; | ||||
|     width: auto; | ||||
|   } | ||||
| 
 | ||||
|   #suggestions, #answers { | ||||
|   #suggestions, | ||||
|   #answers { | ||||
|     margin-top: 1em; | ||||
|   } | ||||
| 
 | ||||
| @ -586,7 +591,7 @@ article.result-images[data-vim-selected]::before { | ||||
|     max-width: inherit; | ||||
| 
 | ||||
|     .infobox { | ||||
|       clear:both; | ||||
|       clear: both; | ||||
| 
 | ||||
|       img { | ||||
|         float: left; | ||||
| @ -594,7 +599,6 @@ article.result-images[data-vim-selected]::before { | ||||
|         margin: 0.5em 0.5em 0.5em 0; | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|   } | ||||
| 
 | ||||
|   #sidebar { | ||||
| @ -634,7 +638,6 @@ article.result-images[data-vim-selected]::before { | ||||
|     } | ||||
| 
 | ||||
|     .url { | ||||
| 
 | ||||
|       span.url { | ||||
|         display: block; | ||||
|         white-space: nowrap; | ||||
| @ -647,7 +650,6 @@ article.result-images[data-vim-selected]::before { | ||||
|         float: right; | ||||
|         padding: 0 0.5em; | ||||
|       } | ||||
| 
 | ||||
|     } | ||||
| 
 | ||||
|     .engines { | ||||
| @ -662,43 +664,41 @@ article.result-images[data-vim-selected]::before { | ||||
| 
 | ||||
|   .image_result { | ||||
|     max-width: 98%; | ||||
| 
 | ||||
|     img { | ||||
|       max-width: 98%; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| #main_results div#results.only_template_images { | ||||
|     flex-direction: column; | ||||
|     width: auto; | ||||
|     display: flex; | ||||
|   flex-direction: column; | ||||
|   width: auto; | ||||
|   display: flex; | ||||
| 
 | ||||
|     #sidebar { | ||||
| 	position: relative; | ||||
| 	top: auto; | ||||
| 	order: 2; | ||||
|     } | ||||
|   #sidebar { | ||||
|     position: relative; | ||||
|     top: auto; | ||||
|     order: 2; | ||||
|   } | ||||
| 
 | ||||
|     #urls { | ||||
| 	position: relative; | ||||
| 	order: 1; | ||||
|     } | ||||
|   #urls { | ||||
|     position: relative; | ||||
|     order: 1; | ||||
|   } | ||||
| 
 | ||||
|     #backToTop { | ||||
| 	right: 0.5em; | ||||
| 	left: auto; | ||||
|     } | ||||
|   #backToTop { | ||||
|     right: 0.5em; | ||||
|     left: auto; | ||||
|   } | ||||
| 
 | ||||
|     #pagination { | ||||
| 	position: relative; | ||||
| 	order: 3; | ||||
|     } | ||||
|   #pagination { | ||||
|     position: relative; | ||||
|     order: 3; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| @media screen and (max-width: @results-width) { | ||||
| 
 | ||||
|   article[data-vim-selected]::before { | ||||
|     display: none; | ||||
|     content: ""; | ||||
| @ -706,9 +706,9 @@ article.result-images[data-vim-selected]::before { | ||||
| 
 | ||||
|   #linkto_preferences { | ||||
|     display: none; | ||||
|     postion: fixed !important; | ||||
|     position: fixed !important; | ||||
|     top: 100px; | ||||
|     right: 0px; | ||||
|     right: 0; | ||||
|   } | ||||
| 
 | ||||
|   #sidebar { | ||||
| @ -739,24 +739,20 @@ article.result-images[data-vim-selected]::before { | ||||
|     padding: 0; | ||||
|     border: none; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: 35em) { | ||||
| 
 | ||||
|   .result-videos { | ||||
| 
 | ||||
|     img.thumbnail { | ||||
|       float: none !important; | ||||
|     } | ||||
| 
 | ||||
|     .content { | ||||
|       overflow: inherit; | ||||
|     } | ||||
| 
 | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| pre code { | ||||
|     white-space: pre-wrap; | ||||
|   white-space: pre-wrap; | ||||
| } | ||||
|  | ||||
| @ -1,4 +1,7 @@ | ||||
| // other solution :  http://stackoverflow.com/questions/1577598/how-to-hide-parts-of-html-when-javascript-is-disabled/13857783#13857783 | ||||
| 
 | ||||
| // stylelint-disable no-descending-specificity | ||||
| 
 | ||||
| html.no-js .hide_if_nojs { | ||||
|   display: none; | ||||
| } | ||||
| @ -12,7 +15,7 @@ html.js .show_if_nojs { | ||||
| } | ||||
| 
 | ||||
| .right { | ||||
|   float: right ; | ||||
|   float: right; | ||||
| } | ||||
| 
 | ||||
| .left { | ||||
| @ -67,7 +70,6 @@ kbd { | ||||
| 
 | ||||
| // table | ||||
| table { | ||||
| 
 | ||||
|   width: 100%; | ||||
| 
 | ||||
|   &.striped { | ||||
| @ -106,7 +108,6 @@ div.selectable_url { | ||||
|   padding: 4px; | ||||
|   color: @color-result-search-url-font; | ||||
|   width: 100%; | ||||
|   display: block; | ||||
|   margin: 0.1em; | ||||
|   overflow: hidden; | ||||
|   height: 1.2em; | ||||
| @ -122,28 +123,30 @@ div.selectable_url { | ||||
|   position: relative; | ||||
|   width: 70%; | ||||
|   padding: 1em 1em 1em 2.7em; | ||||
|   margin: 0em 8% 1em 8%; | ||||
|   margin: 0 8% 1em 8%; | ||||
|   border: 1px solid black; | ||||
|   border-radius: 4px; | ||||
|   text-align: left; | ||||
| 
 | ||||
|   &:before { | ||||
|   &::before { | ||||
|     position: absolute; | ||||
|     top: 0.5em; | ||||
|     left: 0.5em; | ||||
|     font-family:"ion"; | ||||
|     font-family: "ion"; // stylelint-disable font-family-no-missing-generic-family-keyword | ||||
|     font-size: 1.5em; | ||||
|   } | ||||
| 
 | ||||
|   .close { | ||||
|     float:right; | ||||
|     float: right; | ||||
|     position: relative; | ||||
|     top: -3px; | ||||
|     color: inherit; | ||||
|     font-size: 1.5em; | ||||
|   } | ||||
| 
 | ||||
|   ul, ol, p { | ||||
|   ul, | ||||
|   ol, | ||||
|   p { | ||||
|     margin: 1px 0 0 0; | ||||
|   } | ||||
| 
 | ||||
| @ -163,16 +166,15 @@ div.selectable_url { | ||||
|     padding: 0 1em 0 0; | ||||
|   } | ||||
| 
 | ||||
| 
 | ||||
|   h4 { | ||||
|     margin-top: 0.3em; | ||||
|     margin-bottom: 0.3em; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| .dialog-error { | ||||
|   .dialog(); | ||||
| 
 | ||||
|   color: @color-error; | ||||
|   background: @color-error-background; | ||||
|   border-color: @color-error; | ||||
| @ -181,6 +183,7 @@ div.selectable_url { | ||||
| 
 | ||||
| .dialog-warning { | ||||
|   .dialog(); | ||||
| 
 | ||||
|   color: @color-warning; | ||||
|   background: @color-warning-background; | ||||
|   border-color: @color-warning; | ||||
| @ -189,10 +192,12 @@ div.selectable_url { | ||||
| 
 | ||||
| .dialog-modal { | ||||
|   .dialog(); | ||||
| 
 | ||||
|   background: white; | ||||
|   position: fixed; | ||||
|   top: 50%; | ||||
|   left: 50%; | ||||
| 
 | ||||
|   /* bring your own prefixes */ | ||||
|   transform: translate(-50%, -50%); | ||||
|   z-index: 100000; | ||||
| @ -215,13 +220,14 @@ div.selectable_url { | ||||
|   border: none; | ||||
| } | ||||
| 
 | ||||
| /* -- tabs --*/ | ||||
| /* -- tabs -- */ | ||||
| .tabs .tabs > label { | ||||
|   font-size: 90%; | ||||
| } | ||||
| 
 | ||||
| .tabs { | ||||
|   .flexbox(); | ||||
| 
 | ||||
|   flex-wrap: wrap; | ||||
|   width: 100%; | ||||
|   min-width: 100%; | ||||
| @ -238,13 +244,13 @@ div.selectable_url { | ||||
|     order: 1; | ||||
|     padding: 0.7em; | ||||
|     margin: 0 0.7em; | ||||
|     letter-spacing:0.5px; | ||||
|     letter-spacing: 0.5px; | ||||
|     text-transform: uppercase; | ||||
| 
 | ||||
|     border: solid white; | ||||
|     border-width: 0px 0px 2px 0; | ||||
|     border-width: 0 0 2px 0; | ||||
| 
 | ||||
|     .disable-user-select(); | ||||
| 
 | ||||
|     cursor: pointer; | ||||
|   } | ||||
| 
 | ||||
| @ -266,19 +272,19 @@ div.selectable_url { | ||||
|     background: @color-categories-item-selected; | ||||
|     color: @color-categories-item-selected-font; | ||||
|     font-weight: bold; | ||||
|     letter-spacing:-0.1px; | ||||
|     letter-spacing: -0.1px; | ||||
|   } | ||||
| 
 | ||||
|   & > section:last-of-type { | ||||
|     display: block; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| html body .tabs > input:checked { | ||||
|   ~ section { | ||||
|     display: none; | ||||
|   } | ||||
| 
 | ||||
|   ~ label { | ||||
|     position: inherited; | ||||
|     background: inherit; | ||||
| @ -290,13 +296,15 @@ html body .tabs > input:checked { | ||||
|       border-bottom: 2px solid @color-categories-item-border-selected; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   + label { | ||||
|     border-bottom: 2px solid @color-categories-item-border-selected; | ||||
|     background: @color-categories-item-selected; | ||||
|     color: @color-categories-item-selected-font; | ||||
|     font-weight: bold; | ||||
|     letter-spacing:-0.1px; | ||||
|     letter-spacing: -0.1px; | ||||
|   } | ||||
| 
 | ||||
|   + label + section { | ||||
|     display: block; | ||||
|   } | ||||
| @ -311,13 +319,13 @@ select { | ||||
|   font-size: 12px; | ||||
|   z-index: 2; | ||||
| 
 | ||||
|   &:hover, &:focus { | ||||
|   &:hover, | ||||
|   &:focus { | ||||
|     cursor: pointer; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) { | ||||
| 
 | ||||
|   select { | ||||
|     appearance: none; | ||||
|     -webkit-appearance: none; | ||||
| @ -330,12 +338,11 @@ select { | ||||
|     background-origin: content-box; | ||||
|     outline: medium none; | ||||
| 
 | ||||
|     &:hover, &:focus { | ||||
|     &:hover, | ||||
|     &:focus { | ||||
|       border-bottom: 1px solid @color-search-border; | ||||
|     } | ||||
| 
 | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| /* -- checkbox-onoff -- */ | ||||
| @ -348,6 +355,7 @@ select { | ||||
|     margin: 8px auto; | ||||
|     position: relative; | ||||
|     border-radius: 50px; | ||||
| 
 | ||||
|     label { | ||||
|       display: block; | ||||
|       width: 20px; | ||||
| @ -356,14 +364,15 @@ select { | ||||
|       top: -5px; | ||||
|       cursor: pointer; | ||||
|       border-radius: 50px; | ||||
|       box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3); | ||||
|       box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3); | ||||
|       transition: all 0.4s ease; | ||||
| 
 | ||||
|       left: 27px; | ||||
|       background-color: #3498DB; | ||||
|       background-color: #3498db; | ||||
|     } | ||||
| 
 | ||||
|     input[type=checkbox] { | ||||
|       visibility: hidden; | ||||
| 
 | ||||
|       &:checked + label { | ||||
|         left: -5px; | ||||
|         background: #dcdcdc; | ||||
| @ -372,12 +381,13 @@ select { | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| /* -- checkbox --*/ | ||||
| /* -- checkbox -- */ | ||||
| @supports (transform: rotate(-45deg)) { | ||||
|   .checkbox { | ||||
|     width: 20px; | ||||
|     position: relative; | ||||
|     margin: 20px auto; | ||||
| 
 | ||||
|     label { | ||||
|       width: 20px; | ||||
|       height: 20px; | ||||
| @ -387,8 +397,9 @@ select { | ||||
|       left: 0; | ||||
|       background: white; | ||||
|       border-radius: 4px; | ||||
|       box-shadow: inset 0px 1px 1px white, 0px 1px 4px rgba(0,0,0,0.5); | ||||
|       &:after { | ||||
|       box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5); | ||||
| 
 | ||||
|       &::after { | ||||
|         content: ''; | ||||
|         width: 9px; | ||||
|         height: 5px; | ||||
| @ -406,17 +417,18 @@ select { | ||||
| 
 | ||||
|     input[type=checkbox] { | ||||
|       visibility: hidden; | ||||
|       &:checked + label:after { | ||||
|         border-color: #3498DB; | ||||
| 
 | ||||
|       &:checked + label::after { | ||||
|         border-color: #3498db; | ||||
|         opacity: 1; | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     // disabled : can''t be focused, show only the check mark | ||||
|     input[disabled] + label  { | ||||
|     input[disabled] + label { | ||||
|       background-color: transparent !important; | ||||
|       box-shadow: none !important; | ||||
|       cursor: inherit;; | ||||
|       cursor: inherit; | ||||
|     } | ||||
| 
 | ||||
|     // if not checked and possible to checked then display a "light" check mark on hover | ||||
| @ -434,45 +446,50 @@ select { | ||||
| 
 | ||||
| /* -- loader -- */ | ||||
| .loader, | ||||
| .loader:after {	 | ||||
|     border-radius: 50%; | ||||
|     width: 2em; | ||||
|     height: 2em; | ||||
| .loader::after { | ||||
|   border-radius: 50%; | ||||
|   width: 2em; | ||||
|   height: 2em; | ||||
| } | ||||
| 
 | ||||
| .loader { | ||||
|     margin: 1em auto; | ||||
|     font-size: 10px; | ||||
|     position: relative; | ||||
|     text-indent: -9999em; | ||||
|     border-top: 0.5em solid rgba(0, 0, 0, 0.2); | ||||
|     border-right: 0.5em solid rgba(0, 0, 0, 0.2); | ||||
|     border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); | ||||
|     border-left: 0.5em solid rgba(255, 255, 255, 0); | ||||
|     -webkit-transform: translateZ(0); | ||||
|     -ms-transform: translateZ(0); | ||||
|     transform: translateZ(0); | ||||
|     -webkit-animation: load8 1.2s infinite linear; | ||||
|     animation: load8 1.2s infinite linear; | ||||
|   margin: 1em auto; | ||||
|   font-size: 10px; | ||||
|   position: relative; | ||||
|   text-indent: -9999em; | ||||
|   border-top: 0.5em solid rgba(0, 0, 0, 0.2); | ||||
|   border-right: 0.5em solid rgba(0, 0, 0, 0.2); | ||||
|   border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); | ||||
|   border-left: 0.5em solid rgba(255, 255, 255, 0); | ||||
|   -webkit-transform: translateZ(0); | ||||
|   -ms-transform: translateZ(0); | ||||
|   transform: translateZ(0); | ||||
|   -webkit-animation: load8 1.2s infinite linear; | ||||
|   animation: load8 1.2s infinite linear; | ||||
| } | ||||
| 
 | ||||
| @-webkit-keyframes load8 { | ||||
|     0% { | ||||
| 	-webkit-transform: rotate(0deg); | ||||
| 	transform: rotate(0deg); | ||||
|     } | ||||
|     100% { | ||||
| 	-webkit-transform: rotate(360deg); | ||||
| 	transform: rotate(360deg); | ||||
|     } | ||||
|   0% { | ||||
|     -webkit-transform: rotate(0deg); | ||||
|     transform: rotate(0deg); | ||||
|   } | ||||
| 
 | ||||
|   100% { | ||||
|     -webkit-transform: rotate(360deg); | ||||
|     transform: rotate(360deg); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @keyframes load8 { | ||||
|     0% { | ||||
| 	-webkit-transform: rotate(0deg); | ||||
| 	transform: rotate(0deg); | ||||
|     } | ||||
|     100% { | ||||
| 	-webkit-transform: rotate(360deg); | ||||
| 	transform: rotate(360deg); | ||||
|     } | ||||
|   0% { | ||||
|     -webkit-transform: rotate(0deg); | ||||
|     transform: rotate(0deg); | ||||
|   } | ||||
| 
 | ||||
|   100% { | ||||
|     -webkit-transform: rotate(360deg); | ||||
|     transform: rotate(360deg); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| /* -- engine-tooltip -- */ | ||||
| @ -480,9 +497,9 @@ select { | ||||
|   display: none; | ||||
|   position: absolute; | ||||
|   padding: 0.5rem 1rem; | ||||
|   margin: 0rem 0 0 2rem; | ||||
|   margin: 0 0 0 2rem; | ||||
|   border: 1px solid #ddd; | ||||
|   box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1); | ||||
|   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); | ||||
|   background: white; | ||||
|   font-size: 14px; | ||||
|   font-weight: normal; | ||||
| @ -490,7 +507,9 @@ select { | ||||
|   text-align: left; | ||||
| } | ||||
| 
 | ||||
| th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover { | ||||
| th:hover .engine-tooltip, | ||||
| td:hover .engine-tooltip, | ||||
| .engine-tooltip:hover { | ||||
|   display: inline-block; | ||||
| } | ||||
| 
 | ||||
| @ -517,7 +536,7 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover { | ||||
| } | ||||
| 
 | ||||
| .stacked-bar-chart-base { | ||||
|   display:flex; | ||||
|   display: flex; | ||||
|   flex-shrink: 0; | ||||
|   flex-grow: 0; | ||||
|   flex-basis: unset; | ||||
| @ -525,6 +544,7 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover { | ||||
| 
 | ||||
| .stacked-bar-chart-median { | ||||
|   .stacked-bar-chart-base(); | ||||
| 
 | ||||
|   background: @stacked-bar-chart; | ||||
|   border: 1px solid fade(@stacked-bar-chart, 90%); | ||||
|   padding: 0.3rem 0; | ||||
| @ -532,6 +552,7 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover { | ||||
| 
 | ||||
| .stacked-bar-chart-rate80 { | ||||
|   .stacked-bar-chart-base(); | ||||
| 
 | ||||
|   background: transparent; | ||||
|   border: 1px solid fade(@stacked-bar-chart, 30%); | ||||
|   padding: 0.3rem 0; | ||||
| @ -539,6 +560,7 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover { | ||||
| 
 | ||||
| .stacked-bar-chart-rate95 { | ||||
|   .stacked-bar-chart-base(); | ||||
| 
 | ||||
|   background: transparent; | ||||
|   border-bottom: 1px dotted fade(@stacked-bar-chart, 50%); | ||||
|   padding: 0; | ||||
| @ -546,6 +568,7 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover { | ||||
| 
 | ||||
| .stacked-bar-chart-rate100 { | ||||
|   .stacked-bar-chart-base(); | ||||
| 
 | ||||
|   background: transparent; | ||||
|   border-left: 1px solid fade(@stacked-bar-chart, 90%); | ||||
|   padding: 0.4rem 0; | ||||
|  | ||||
| @ -1,41 +1,46 @@ | ||||
| .loader, | ||||
| .loader:after {	 | ||||
|     border-radius: 50%; | ||||
|     width: 10em; | ||||
|     height: 10em; | ||||
| .loader::after { | ||||
|   border-radius: 50%; | ||||
|   width: 10em; | ||||
|   height: 10em; | ||||
| } | ||||
| 
 | ||||
| .loader { | ||||
|     margin: 60px auto; | ||||
|     font-size: 10px; | ||||
|     position: relative; | ||||
|     text-indent: -9999em; | ||||
|     border-top: 1.1em solid rgba(255, 255, 255, 0.2); | ||||
|     border-right: 1.1em solid rgba(255, 255, 255, 0.2); | ||||
|     border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); | ||||
|     border-left: 1.1em solid #ffffff; | ||||
|     -webkit-transform: translateZ(0); | ||||
|     -ms-transform: translateZ(0); | ||||
|     transform: translateZ(0); | ||||
|     -webkit-animation: load8 1.1s infinite linear; | ||||
|     animation: load8 1.1s infinite linear; | ||||
|   margin: 60px auto; | ||||
|   font-size: 10px; | ||||
|   position: relative; | ||||
|   text-indent: -9999em; | ||||
|   border-top: 1.1em solid rgba(255, 255, 255, 0.2); | ||||
|   border-right: 1.1em solid rgba(255, 255, 255, 0.2); | ||||
|   border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); | ||||
|   border-left: 1.1em solid #fff; | ||||
|   -webkit-transform: translateZ(0); | ||||
|   -ms-transform: translateZ(0); | ||||
|   transform: translateZ(0); | ||||
|   -webkit-animation: load8 1.1s infinite linear; | ||||
|   animation: load8 1.1s infinite linear; | ||||
| } | ||||
| 
 | ||||
| @-webkit-keyframes load8 { | ||||
|     0% { | ||||
| 	-webkit-transform: rotate(0deg); | ||||
| 	transform: rotate(0deg); | ||||
|     } | ||||
|     100% { | ||||
| 	-webkit-transform: rotate(360deg); | ||||
| 	transform: rotate(360deg); | ||||
|     } | ||||
|   0% { | ||||
|     -webkit-transform: rotate(0deg); | ||||
|     transform: rotate(0deg); | ||||
|   } | ||||
| 
 | ||||
|   100% { | ||||
|     -webkit-transform: rotate(360deg); | ||||
|     transform: rotate(360deg); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @keyframes load8 { | ||||
|     0% { | ||||
| 	-webkit-transform: rotate(0deg); | ||||
| 	transform: rotate(0deg); | ||||
|     } | ||||
|     100% { | ||||
| 	-webkit-transform: rotate(360deg); | ||||
| 	transform: rotate(360deg); | ||||
|     } | ||||
|   0% { | ||||
|     -webkit-transform: rotate(0deg); | ||||
|     transform: rotate(0deg); | ||||
|   } | ||||
| 
 | ||||
|   100% { | ||||
|     -webkit-transform: rotate(360deg); | ||||
|     transform: rotate(360deg); | ||||
|   } | ||||
| } | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user