Merge pull request #168 from return42/stylelint

Lint the less files of the simple theme

.dir-locals.el

@@ -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
 

searx/static/themes/simple/.jshintrc

@@ -0,0 +1,8 @@
+{
+  "proto": true,
+  "globals": {
+    "browser": true,
+    "jQuery": false,
+    "devel": true
+  }
+}

searx/static/themes/simple/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

searx/static/themes/simple/gruntfile.js

@@ -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: "",
+        formatter: 'unix',
-        proto: true,
+      },
-        // options here to override JSHint defaults
+      src: [
-        globals: {
+        'src/less/**/*.less',
-          browser: true,
+      ]
-          jQuery: false,
-          devel: true
-        }
-      }
     },
     copy: {
       js: {
@@ -114,7 +114,7 @@ module.exports = function(grunt) {
           'node_modules/ionicons-npm/src/ion-close-round.svg',
           'node_modules/ionicons-npm/src/android-more-vertical.svg',
           'src/fonts/magnet.svg',
-          'node_modules/ionicons-npm/src/android-close.svg',	  
+          'node_modules/ionicons-npm/src/android-close.svg',
         ],
         dest: 'fonts',
         destLess: 'src/generated',
@@ -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'
+  ]);
 };

searx/static/themes/simple/package.json

@@ -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"
   }
 }

searx/static/themes/simple/src/less/autocomplete.less

@@ -3,59 +3,63 @@
 @background_color:  white;
 
 .autocomplete {
-    position: absolute;
+  position: absolute;
-    max-height: 0;
+  max-height: 0;
-    overflow-y: hidden;
+  overflow-y: hidden;
-    text-align: left;
+  text-align: left;
 
-    &:active, &:focus, &:hover {
+  &:active,
-      background-color: @background_color;
+  &: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;
+      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;
-        }
     }
+  }
 }
 
-
 @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;
   }
-
 }

searx/static/themes/simple/src/less/code.less

@@ -1,8 +1,9 @@
 .code-highlight pre {
-    overflow: auto;
+  overflow: auto;
-    background-color: inherit;
+  background-color: inherit;
-    color: inherit;
+  color: inherit;
-    border: inherit;
+  border: inherit;
 }
 
+// stylelint-disable no-invalid-position-at-import-rule
 @import "../generated/pygments.less";

searx/static/themes/simple/src/less/definitions.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;

searx/static/themes/simple/src/less/index.less

@@ -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;
     }
   }
-
 }

searx/static/themes/simple/src/less/mixins.less

@@ -4,34 +4,34 @@
 
 // Mixins
 .text-size-adjust (@property: 100%) {
-	-webkit-text-size-adjust: @property;
+  -webkit-text-size-adjust: @property;
-	-ms-text-size-adjust: @property;
+  -ms-text-size-adjust: @property;
-	-moz-text-size-adjust: @property;
+  -moz-text-size-adjust: @property;
-	text-size-adjust: @property;
+  text-size-adjust: @property;
 }
 
 .rounded-corners (@radius: 4px) {
-	-webkit-border-radius: @radius;
+  -webkit-border-radius: @radius;
-	-moz-border-radius: @radius;
+  -moz-border-radius: @radius;
-	border-radius: @radius;
+  border-radius: @radius;
 }
 
 // disable user selection
 .disable-user-select () {
-	-webkit-touch-callout: none;
+  -webkit-touch-callout: none;
-	-webkit-user-select: none;
+  -webkit-user-select: none;
-	-khtml-user-select: none;
+  -khtml-user-select: none;
-	-moz-user-select: none;
+  -moz-user-select: none;
-	-ms-user-select: none;
+  -ms-user-select: none;
-	user-select: none;
+  user-select: none;
 }
 
 // select all on focus
 .select-all-on-focus() {
-	-webkit-user-select: all;
+  -webkit-user-select: all;
-	-moz-user-select: all;
+  -moz-user-select: all;
-	-ms-user-select: element;
+  -ms-user-select: element;
-	user-select: all;
+  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: -webkit-inline-box;
-	display: -moz-inline-box;
+  display: -moz-inline-box;
-	display: -webkit-inline-flex;
+  display: -webkit-inline-flex;
-	display: -ms-inline-flexbox;
+  display: -ms-inline-flexbox;
-	display: inline-flex;
+  display: inline-flex;
 }
 
 .flex-direction-row() {
-	-webkit-box-direction: normal;
+  -webkit-box-direction: normal;
-	-webkit-box-orient: horizontal;
+  -webkit-box-orient: horizontal;
-	-moz-box-direction: normal;
+  -moz-box-direction: normal;
-	-moz-box-orient: horizontal;
+  -moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
+  -webkit-flex-direction: row;
-	-ms-flex-direction: row;
+  -ms-flex-direction: row;
-	flex-direction: row;
+  flex-direction: row;
 }

searx/static/themes/simple/src/less/preferences.less

@@ -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) > th,
-    &>tbody>tr:nth-child(even)>td {
+    & > 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;
-   }
+  }
 }

searx/static/themes/simple/src/less/search.less

@@ -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 {
+#q,
-  display: none;
+#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;
   }
-
 }

searx/static/themes/simple/src/less/style-rtl.less

@@ -1,6 +1,6 @@
 @import "style.less";
 
 #search_submit {
-	left: 1px;
+  left: 1px;
-	right:auto;
+  right: auto;
 }

searx/static/themes/simple/src/less/style.less

@@ -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 {
+#main_preferences,
-  // position:absolute;
+#main_about,
-	bottom:0;
+#main_stats {
-	width:100%;
-	height:50px;
-}
-
-#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: 0 2px 5px 5px;
-  margin: 0px 2px 5px 5px;
+  padding: 0 2px 2px;
-  padding: 0px 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_preferences, #main_about, #main_stats {
+  #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;
+  flex-direction: column;
-    width: auto;
+  width: auto;
-    display: flex;
+  display: flex;
 
-    #sidebar {
+  #sidebar {
-	position: relative;
+    position: relative;
-	top: auto;
+    top: auto;
-	order: 2;
+    order: 2;
-    }
+  }
 
-    #urls {
+  #urls {
-	position: relative;
+    position: relative;
-	order: 1;
+    order: 1;
-    }
+  }
 
-    #backToTop {
+  #backToTop {
-	right: 0.5em;
+    right: 0.5em;
-	left: auto;
+    left: auto;
-    }
+  }
 
-    #pagination {
+  #pagination {
-	position: relative;
+    position: relative;
-	order: 3;
+    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;
 }

searx/static/themes/simple/src/less/toolkit.less

@@ -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 {
@@ -97,7 +99,7 @@ tr {
   font-size: 0.8em;
   word-break: break-all;
   margin: 0.1em;
-  .select-all-on-focus();  
+  .select-all-on-focus();
 }
 
 div.selectable_url {
@@ -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;
   }
 
@@ -153,7 +156,7 @@ div.selectable_url {
 
   tr {
     vertical-align: text-top;
-    
+
     &:hover {
       background: transparent;
     }
@@ -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;  
+  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);
+      box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5);
-      &:after {
+
+      &::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 {	
+.loader::after {
-    border-radius: 50%;
+  border-radius: 50%;
-    width: 2em;
+  width: 2em;
-    height: 2em;
+  height: 2em;
 }
+
 .loader {
-    margin: 1em auto;
+  margin: 1em auto;
-    font-size: 10px;
+  font-size: 10px;
-    position: relative;
+  position: relative;
-    text-indent: -9999em;
+  text-indent: -9999em;
-    border-top: 0.5em solid rgba(0, 0, 0, 0.2);
+  border-top: 0.5em solid rgba(0, 0, 0, 0.2);
-    border-right: 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-bottom: 0.5em solid rgba(0, 0, 0, 0.2);
-    border-left: 0.5em solid rgba(255, 255, 255, 0);
+  border-left: 0.5em solid rgba(255, 255, 255, 0);
-    -webkit-transform: translateZ(0);
+  -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
+  -ms-transform: translateZ(0);
-    transform: translateZ(0);
+  transform: translateZ(0);
-    -webkit-animation: load8 1.2s infinite linear;
+  -webkit-animation: load8 1.2s infinite linear;
-    animation: load8 1.2s infinite linear;
+  animation: load8 1.2s infinite linear;
 }
+
 @-webkit-keyframes load8 {
-    0% {
+  0% {
-	-webkit-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
-	transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+
-	-webkit-transform: rotate(360deg);
+  100% {
-	transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
-    }
+    transform: rotate(360deg);
+  }
 }
+
 @keyframes load8 {
-    0% {
+  0% {
-	-webkit-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
-	transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+
-	-webkit-transform: rotate(360deg);
+  100% {
-	transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
-    }
+    transform: rotate(360deg);
+  }
 }
 
 /* -- engine-tooltip -- */
@@ -480,17 +497,19 @@ 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;
-  z-index: 1000000; 
+  z-index: 1000000;
   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;

searx/static/themes/simple/src/less/toolkit_loader.less

@@ -1,41 +1,46 @@
 .loader,
-.loader:after {	
+.loader::after {
-    border-radius: 50%;
+  border-radius: 50%;
-    width: 10em;
+  width: 10em;
-    height: 10em;
+  height: 10em;
 }
+
 .loader {
-    margin: 60px auto;
+  margin: 60px auto;
-    font-size: 10px;
+  font-size: 10px;
-    position: relative;
+  position: relative;
-    text-indent: -9999em;
+  text-indent: -9999em;
-    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
-    border-right: 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-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
-    border-left: 1.1em solid #ffffff;
+  border-left: 1.1em solid #fff;
-    -webkit-transform: translateZ(0);
+  -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
+  -ms-transform: translateZ(0);
-    transform: translateZ(0);
+  transform: translateZ(0);
-    -webkit-animation: load8 1.1s infinite linear;
+  -webkit-animation: load8 1.1s infinite linear;
-    animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
 }
+
 @-webkit-keyframes load8 {
-    0% {
+  0% {
-	-webkit-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
-	transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+
-	-webkit-transform: rotate(360deg);
+  100% {
-	transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
-    }
+    transform: rotate(360deg);
+  }
 }
+
 @keyframes load8 {
-    0% {
+  0% {
-	-webkit-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
-	transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+
-	-webkit-transform: rotate(360deg);
+  100% {
-	transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
-    }
+    transform: rotate(360deg);
-}
+  }
+}