From 14b09c15c488d657fd2b3b9de4955f48b40f5fb2 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Tue, 22 Jun 2021 13:50:06 +0200 Subject: [PATCH] [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); + } +}