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 00000000..40db42c6 --- /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 e34d4ee4..95662614 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 5c075d15..89e9008b 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 | 85 +++++---- 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, 332 insertions(+), 311 deletions(-) diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index 93f7df1e..bfa8e2bc 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; - - &:active, &:focus, &:hover { - background-color: @background_color; - } - - &:empty { - display: none; - } + position: absolute; + max-height: 0; + overflow-y: hidden; + text-align: left; + + &:active, + &:focus, + &:hover { + background-color: @background_color; + } - > ul { - list-style-type: none; - margin: 0; - padding: 0; + &:empty { + display: none; + } - > li { - cursor: pointer; - padding: 5px 0 5px 10px; + > ul { + list-style-type: none; + margin: 0; + padding: 0; - &.active, &:active, &:focus { - background-color: @color-base; + > li { + cursor: pointer; + padding: 5px 0 5px 10px; - a:active, a:focus, a:hover { - text-decoration: none; - } - } + &.active, + &:active, + &:focus { + background-color: @color-base; - &.locked { - cursor: inherit; - } + 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; + &.open { + display: block; + background-color: @background_color; + border: 1px solid @color-base; + max-height: 500px; + overflow-y: auto; + z-index: 100; - &:empty { - display: none; - } + &: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; } - } diff --git a/searx/static/themes/simple/src/less/code.less b/searx/static/themes/simple/src/less/code.less index 37d13e6c..37467b0a 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 e1efdac9..3a275763 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 b3aa4e13..ddfbe4b9 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 e1e88b51..8b000c0e 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 dbcfc932..88e033d6 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 2b68bcfd..21c05424 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 5ffd7d59..dfde6617 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 c381af80..fafee6fd 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 7ef19c19..d426035a 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 c1465a57..246f8daa 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 88e033d6..ec67b9f1 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 dfde6617..2f91d36c 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 fafee6fd..5f5ee2df 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 37467b0a..f4e6735b 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 2f91d36c..49e81acb 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 5f5ee2df..8a5a7ef3 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 fb5afe7b..92ff6788 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 00000000..ba7bc296 --- /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 95662614..130f406d 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',