From dfc5c3bc1520d8b4e48d972099c80198fa312847 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Tue, 22 Jun 2021 13:33:05 +0200 Subject: [PATCH 1/5] [mod] add stylelint process to target themes.simple Before build, do lint the LESS files using stylelint [1]. The configuration 'stylelint-config-standard' [2] is added to the root of the simple theme [3]. [1] https://stylelint.io/ [2] https://github.com/stylelint/stylelint-config-standard [3] https://stylelint.io/user-guide/configure Signed-off-by: Markus Heiser --- searx/static/themes/simple/.stylelintrc.json | 3 +++ searx/static/themes/simple/gruntfile.js | 19 ++++++++++++++++++- searx/static/themes/simple/package.json | 9 +++++++-- 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 searx/static/themes/simple/.stylelintrc.json diff --git a/searx/static/themes/simple/.stylelintrc.json b/searx/static/themes/simple/.stylelintrc.json new file mode 100644 index 000000000..40db42c66 --- /dev/null +++ b/searx/static/themes/simple/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard" +} diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js index e34d4ee4f..956626148 100644 --- a/searx/static/themes/simple/gruntfile.js +++ b/searx/static/themes/simple/gruntfile.js @@ -23,6 +23,14 @@ module.exports = function(grunt) { } } }, + stylelint: { + options: { + formatter: 'unix', + }, + src: [ + 'src/less/**/*.less', + ] + }, copy: { js: { expand: true, @@ -191,8 +199,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' + ]); }; diff --git a/searx/static/themes/simple/package.json b/searx/static/themes/simple/package.json index 5c075d154..89e9008be 100644 --- a/searx/static/themes/simple/package.json +++ b/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" } } From 14b09c15c488d657fd2b3b9de4955f48b40f5fb2 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Tue, 22 Jun 2021 13:50:06 +0200 Subject: [PATCH 2/5] [fix] simple theme: use stylint to fix common lint errors This fix was autogenerated by:: npx stylelint -f unix --fix 'searx/static/themes/simple/src/less/**/*.less' Signed-off-by: Markus Heiser --- .../themes/simple/src/less/autocomplete.less | 95 +++++----- searx/static/themes/simple/src/less/code.less | 8 +- .../static/themes/simple/src/less/index.less | 4 - .../static/themes/simple/src/less/mixins.less | 58 +++--- .../themes/simple/src/less/preferences.less | 30 +-- .../static/themes/simple/src/less/search.less | 41 ++-- .../themes/simple/src/less/style-rtl.less | 4 +- .../static/themes/simple/src/less/style.less | 175 +++++++++--------- .../themes/simple/src/less/toolkit.less | 165 ++++++++++------- .../simple/src/less/toolkit_loader.less | 73 ++++---- 10 files changed, 337 insertions(+), 316 deletions(-) diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 93f7df1ef..bfa8e2bc6 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -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; } - } diff --git a/searx/static/themes/simple/src/less/code.less b/searx/static/themes/simple/src/less/code.less index 37d13e6c7..37467b0a2 100644 --- a/searx/static/themes/simple/src/less/code.less +++ b/searx/static/themes/simple/src/less/code.less @@ -1,8 +1,8 @@ .code-highlight pre { - overflow: auto; - background-color: inherit; - color: inherit; - border: inherit; + overflow: auto; + background-color: inherit; + color: inherit; + border: inherit; } @import "../generated/pygments.less"; diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less index e1efdac90..3a275763c 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/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; } } - } diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less index b3aa4e13d..ddfbe4b9d 100644 --- a/searx/static/themes/simple/src/less/mixins.less +++ b/searx/static/themes/simple/src/less/mixins.less @@ -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; } diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index e1e88b51f..8b000c0e3 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/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)>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; + } } diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index dbcfc932e..88e033d65 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/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,22 @@ } } -#q::-ms-clear, #q::-webkit-search-cancel-button { +#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,7 +79,7 @@ #q { outline: medium none; padding-left: 8px; - padding-right: 0px !important; + padding-right: 0 !important; border-right: none; width: @search-width; } @@ -105,7 +105,6 @@ } @media screen and (max-width: 75em) { - #categories { font-size: 90%; clear: both; @@ -117,8 +116,8 @@ } 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,10 +243,8 @@ width: 100%; bottom: -20px; overflow: hidden; - opacity: 0; transition: opacity 1s ease; - font-size: 0.8em; text-position: center; background: white; @@ -260,5 +254,4 @@ opacity: 0.8; transition: opacity 1s ease; } - } diff --git a/searx/static/themes/simple/src/less/style-rtl.less b/searx/static/themes/simple/src/less/style-rtl.less index 2b68bcfde..21c05424f 100644 --- a/searx/static/themes/simple/src/less/style-rtl.less +++ b/searx/static/themes/simple/src/less/style-rtl.less @@ -1,6 +1,6 @@ @import "style.less"; #search_submit { - left: 1px; - right:auto; + left: 1px; + right: auto; } diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 5ffd7d59b..dfde66172 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -8,24 +8,18 @@ @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%; } @@ -43,12 +37,14 @@ 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; } @@ -60,12 +56,14 @@ main { footer { // position:absolute; - bottom:0; - width:100%; - height:50px; + bottom: 0; + width: 100%; + height: 50px; } -#main_preferences, #main_about, #main_stats { +#main_preferences, +#main_about, +#main_stats { margin: 3em; width: auto; } @@ -84,24 +82,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 +148,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 +162,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 +208,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 +218,6 @@ article.result-images[data-vim-selected]::before { } img { - &.thumbnail { float: left; padding: 0 5px 10px 0; @@ -231,13 +235,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 +307,6 @@ article.result-images[data-vim-selected]::before { } .result-map { - img.image { float: right !important; height: 100px !important; @@ -313,7 +314,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 +366,6 @@ article.result-images[data-vim-selected]::before { } #suggestions { - .wrapper { display: flex; flex-flow: row wrap; @@ -378,12 +378,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 +398,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 +408,6 @@ article.result-images[data-vim-selected]::before { text-decoration: underline; } } - } #corrections { @@ -411,18 +415,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 +437,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 +450,8 @@ article.result-images[data-vim-selected]::before { } } -#answers, #infoboxes { +#answers, +#infoboxes { form { min-width: 210px; } @@ -454,9 +461,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 +471,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 +510,10 @@ article.result-images[data-vim-selected]::before { clear: both; } - .attributes, .urls { + .attributes, + .urls { clear: both; } - } } @@ -528,11 +534,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 +563,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 +579,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 +596,7 @@ article.result-images[data-vim-selected]::before { max-width: inherit; .infobox { - clear:both; + clear: both; img { float: left; @@ -594,7 +604,6 @@ article.result-images[data-vim-selected]::before { margin: 0.5em 0.5em 0.5em 0; } } - } #sidebar { @@ -634,7 +643,6 @@ article.result-images[data-vim-selected]::before { } .url { - span.url { display: block; white-space: nowrap; @@ -647,7 +655,6 @@ article.result-images[data-vim-selected]::before { float: right; padding: 0 0.5em; } - } .engines { @@ -662,43 +669,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: ""; @@ -708,7 +713,7 @@ article.result-images[data-vim-selected]::before { display: none; postion: fixed !important; top: 100px; - right: 0px; + right: 0; } #sidebar { @@ -739,24 +744,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; } diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index c381af802..fafee6fd1 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -12,7 +12,7 @@ html.js .show_if_nojs { } .right { - float: right ; + float: right; } .left { @@ -67,7 +67,6 @@ kbd { // table table { - width: 100%; &.striped { @@ -97,7 +96,7 @@ tr { font-size: 0.8em; word-break: break-all; margin: 0.1em; - .select-all-on-focus(); + .select-all-on-focus(); } div.selectable_url { @@ -122,28 +121,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"; 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 +154,7 @@ div.selectable_url { tr { vertical-align: text-top; - + &:hover { background: transparent; } @@ -163,16 +164,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 +181,7 @@ div.selectable_url { .dialog-warning { .dialog(); + color: @color-warning; background: @color-warning-background; border-color: @color-warning; @@ -189,10 +190,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 +218,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 +242,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 +270,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 +294,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 +317,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 +336,11 @@ select { background-origin: content-box; outline: medium none; - &:hover, &:focus { + &:hover, + &:focus { border-bottom: 1px solid @color-search-border; } - } - } /* -- checkbox-onoff -- */ @@ -348,6 +353,7 @@ select { margin: 8px auto; position: relative; border-radius: 50px; + label { display: block; width: 20px; @@ -356,14 +362,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 +379,13 @@ select { } } -/* -- checkbox --*/ +/* -- checkbox -- */ @supports (transform: rotate(-45deg)) { .checkbox { width: 20px; position: relative; margin: 20px auto; + label { width: 20px; height: 20px; @@ -387,8 +395,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 +415,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 +444,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,17 +495,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 +534,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 +542,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 +550,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 +558,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 +566,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; diff --git a/searx/static/themes/simple/src/less/toolkit_loader.less b/searx/static/themes/simple/src/less/toolkit_loader.less index 7ef19c19b..d426035a3 100644 --- a/searx/static/themes/simple/src/less/toolkit_loader.less +++ b/searx/static/themes/simple/src/less/toolkit_loader.less @@ -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); - } -} \ No newline at end of file + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} From 0b7d03c69425745e4111eaaec718ef18182f198c Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Tue, 22 Jun 2021 14:15:47 +0200 Subject: [PATCH 3/5] [stylelint] simple theme: fix some errors reported by stylelint Signed-off-by: Markus Heiser --- .../themes/simple/src/less/definitions.less | 5 ---- .../static/themes/simple/src/less/search.less | 14 +++++------ .../static/themes/simple/src/less/style.less | 23 +++++++------------ .../themes/simple/src/less/toolkit.less | 3 +-- 4 files changed, 16 insertions(+), 29 deletions(-) diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index c1465a579..246f8daa1 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/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; diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 88e033d65..ec67b9f1c 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -54,11 +54,6 @@ } } -#q::-ms-clear, -#q::-webkit-search-cancel-button { - display: none; -} - #q, #send_search { display: block !important; @@ -84,6 +79,11 @@ width: @search-width; } +#q::-ms-clear, +#q::-webkit-search-cancel-button { + display: none; +} + #send_search { border-left: none; width: 2.2em; @@ -110,8 +110,8 @@ clear: both; .checkbox_container { - margin-top: 2px; margin: auto; + margin-top: 2px; } } @@ -246,7 +246,7 @@ opacity: 0; transition: opacity 1s ease; font-size: 0.8em; - text-position: center; + text-align: center; background: white; } diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index dfde66172..2f91d36c0 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -16,13 +16,6 @@ @import "toolkit.less"; @import "autocomplete.less"; -// ion-icon -.ion-icon-big { - .ion-icon; - - font-size: 149%; -} - // for index.html template @import "index.less"; @@ -32,6 +25,13 @@ // Search-Field @import "search.less"; +// ion-icon +.ion-icon-big { + .ion-icon; + + font-size: 149%; +} + // Main LESS-Code html { font-family: arial, sans-serif; @@ -54,13 +54,6 @@ main { // position: absolute; } -footer { - // position:absolute; - bottom: 0; - width: 100%; - height: 50px; -} - #main_preferences, #main_about, #main_stats { @@ -711,7 +704,7 @@ article.result-images[data-vim-selected]::before { #linkto_preferences { display: none; - postion: fixed !important; + position: fixed !important; top: 100px; right: 0; } diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index fafee6fd1..5f5ee2dfc 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -105,7 +105,6 @@ div.selectable_url { padding: 4px; color: @color-result-search-url-font; width: 100%; - display: block; margin: 0.1em; overflow: hidden; height: 1.2em; @@ -130,7 +129,7 @@ div.selectable_url { 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; } From f73a00dceecc56a101a00d854eebb8fe60c45e4c Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Tue, 22 Jun 2021 14:23:12 +0200 Subject: [PATCH 4/5] [stylelint] disable role 'no-descending-specificity' This patch disables role 'no-descending-specificity'. IMO it is better to have this rule active (see below [1]), but it is hard to rewrite the less files to pass this rule, so for the first I chose to disable this rule. --- Source order is important in CSS, and when two selectors have the same specificity, the one that occurs last will take priority. However, the situation is different when one of the selectors has a higher specificity. In that case, source order does not matter: the selector with higher specificity will win out even if it comes first. The clashes of these two mechanisms for prioritization, source order and specificity, can cause some confusion when reading stylesheets. If a selector with higher specificity comes before the selector it overrides, we have to think harder to understand it, because it violates the source order expectation. Stylesheets are most legible when overriding selectors always come after the selectors they override. That way both mechanisms, source order and specificity, work together nicely. This rule enforces that practice as best it can, reporting fewer errors than it should. It cannot catch every actual overriding selector, but it can catch certain common mistakes. [1] https://stylelint.io/user-guide/rules/list/no-descending-specificity/ Signed-off-by: Markus Heiser --- searx/static/themes/simple/src/less/code.less | 1 + searx/static/themes/simple/src/less/style.less | 2 ++ searx/static/themes/simple/src/less/toolkit.less | 3 +++ 3 files changed, 6 insertions(+) diff --git a/searx/static/themes/simple/src/less/code.less b/searx/static/themes/simple/src/less/code.less index 37467b0a2..f4e6735ba 100644 --- a/searx/static/themes/simple/src/less/code.less +++ b/searx/static/themes/simple/src/less/code.less @@ -5,4 +5,5 @@ border: inherit; } +// stylelint-disable no-invalid-position-at-import-rule @import "../generated/pygments.less"; diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 2f91d36c0..49e81acbd 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -4,6 +4,8 @@ * 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"; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 5f5ee2dfc..8a5a7ef38 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/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; } From a3f58a3a3d099cf6c5dfd533f76d97623146e079 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Thu, 24 Jun 2021 12:12:13 +0200 Subject: [PATCH 5/5] [emacs] .dir-locals.el: add setup for js-mode - move jshint option from gruntfile to .jshintrc - remove trailing-whitespace from gruntfile and - add jshint esversion: 6 - .dir-locals.el add locals for js-mode to use JSHint from the simple theme Signed-off-by: Markus Heiser --- .dir-locals.el | 9 +++++++++ searx/static/themes/simple/.jshintrc | 8 ++++++++ searx/static/themes/simple/gruntfile.js | 14 +++----------- 3 files changed, 20 insertions(+), 11 deletions(-) create mode 100644 searx/static/themes/simple/.jshintrc diff --git a/.dir-locals.el b/.dir-locals.el index fb5afe7b9..92ff6788b 100644 --- a/.dir-locals.el +++ b/.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 diff --git a/searx/static/themes/simple/.jshintrc b/searx/static/themes/simple/.jshintrc new file mode 100644 index 000000000..ba7bc2965 --- /dev/null +++ b/searx/static/themes/simple/.jshintrc @@ -0,0 +1,8 @@ +{ + "proto": true, + "globals": { + "browser": true, + "jQuery": false, + "devel": true + } +} diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js index 956626148..130f406d9 100644 --- a/searx/static/themes/simple/gruntfile.js +++ b/searx/static/themes/simple/gruntfile.js @@ -1,3 +1,5 @@ +/*jshint esversion: 6 */ + module.exports = function(grunt) { const path = require('path'); @@ -12,16 +14,6 @@ module.exports = function(grunt) { }, jshint: { files: ['src/js/main/*.js', 'src/js/head/*.js', '../__common__/js/*.js'], - options: { - reporterOutput: "", - proto: true, - // options here to override JSHint defaults - globals: { - browser: true, - jQuery: false, - devel: true - } - } }, stylelint: { options: { @@ -122,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',