diff --git a/client/simple/src/less/definitions.less b/client/simple/src/less/definitions.less index 7501305fc..7dd5782aa 100644 --- a/client/simple/src/less/definitions.less +++ b/client/simple/src/less/definitions.less @@ -55,7 +55,7 @@ --color-autocomplete-background: #fff; --color-autocomplete-background-hover: #e3e3e3; /// Answer Colors - --color-answer-font: #444; // same as --color-base-font + --color-answer-font: #444; // same as --color-base-font --color-answer-background: #fff; /// Results Colors --color-result-background: #fff; @@ -284,7 +284,7 @@ /// Device Size /// @desktop > @tablet -@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874 +@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874 @phone: 50em; @small-phone: 35em; @ultra-small-phone: 20rem; @@ -293,12 +293,12 @@ @stacked-bar-chart: rgb(0, 0, 0); /// Load fonts from this directory. -@icon-font-path: "../../../fonts/"; +@icon-font-path: "../../../fonts/"; //** File name for all font files. -@icon-font-name: "glyphicons-halflings-regular"; +@icon-font-name: "glyphicons-halflings-regular"; //** Element ID within SVG icon file. -@icon-font-svg-id: "glyphicons_halflingsregular"; +@icon-font-svg-id: "glyphicons_halflingsregular"; // decoration of the select HTML elements -@select-light-svg-path: "../svg/select-light.svg"; -@select-dark-svg-path: "../svg/select-dark.svg"; +@select-light-svg-path: "../svg/select-light.svg"; +@select-dark-svg-path: "../svg/select-dark.svg"; diff --git a/client/simple/src/less/detail.less b/client/simple/src/less/detail.less index fd5cd8e05..535af4afd 100644 --- a/client/simple/src/less/detail.less +++ b/client/simple/src/less/detail.less @@ -203,7 +203,9 @@ article.result-images .detail { } } -#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail { +#results.image-detail-open.scrolling + article.result-images[data-vim-selected] + .detail { top: 0; a.result-images-source img { diff --git a/client/simple/src/less/embedded.less b/client/simple/src/less/embedded.less index bd7b89ea6..c685a9232 100644 --- a/client/simple/src/less/embedded.less +++ b/client/simple/src/less/embedded.less @@ -1,14 +1,17 @@ -iframe[src^="https://w.soundcloud.com"] { +iframe[src^="https://w.soundcloud.com"] +{ height: 120px; } -iframe[src^="https://www.deezer.com"] { +iframe[src^="https://www.deezer.com"] +{ // The real size is 92px, but 94px are needed to avoid an inner scrollbar of // the embedded HTML. height: 94px; } -iframe[src^="https://www.mixcloud.com"] { +iframe[src^="https://www.mixcloud.com"] +{ // the embedded player from mixcloud has some quirks: initial there is an // issue with an image URL that is blocked since it is an a Cross-Origin // request. The alternative text (Mixcloud Logo then cause an @@ -18,16 +21,19 @@ iframe[src^="https://www.mixcloud.com"] { height: 250px; } -iframe[src^="https://bandcamp.com/EmbeddedPlayer"] { +iframe[src^="https://bandcamp.com/EmbeddedPlayer"] +{ // show playlist height: 350px; } -iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] { +iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] +{ // hide playlist height: 120px; } -iframe[src^="https://genius.com/songs"] { +iframe[src^="https://genius.com/songs"] +{ height: 65px; } diff --git a/client/simple/src/less/index.less b/client/simple/src/less/index.less index 8590d0c3b..6316b4ed6 100644 --- a/client/simple/src/less/index.less +++ b/client/simple/src/less/index.less @@ -6,7 +6,7 @@ text-align: center; .title { - background: url('../img/searxng.png') no-repeat; + background: url("../img/searxng.png") no-repeat; min-height: 4rem; margin: 4rem auto; background-position: center; diff --git a/client/simple/src/less/new_issue.less b/client/simple/src/less/new_issue.less index e10a2791c..afc26a38c 100644 --- a/client/simple/src/less/new_issue.less +++ b/client/simple/src/less/new_issue.less @@ -9,7 +9,7 @@ display: none; } - input[type=checked] { + input[type="checked"] { position: absolute; } diff --git a/client/simple/src/less/search.less b/client/simple/src/less/search.less index a46e4bf06..460ea09fa 100644 --- a/client/simple/src/less/search.less +++ b/client/simple/src/less/search.less @@ -83,7 +83,9 @@ button.category_button { } // only used when JavaScript is disabled -.no-js #categories_container:has(button.category_button:focus-within) button.category_button { +.no-js + #categories_container:has(button.category_button:focus-within) + button.category_button { &.selected { color: var(--color-base-font); border-bottom: none; diff --git a/client/simple/src/less/style-center.less b/client/simple/src/less/style-center.less index 3618bed86..99a45bf86 100644 --- a/client/simple/src/less/style-center.less +++ b/client/simple/src/less/style-center.less @@ -63,9 +63,11 @@ on the /search URL and when the "center alignment" preference is enabled. } #search_header { - grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width); + grid-template-columns: + calc(50% - 4.5rem - var(--center-page-width) / 2) + 3rem var(--center-page-width); grid-template-areas: "na logo search" "na spacer categories"; - column-gap: 1.2rem; // from search.less + column-gap: 1.2rem; // from search.less width: 100%; padding-left: 0; padding-right: 0; @@ -94,7 +96,9 @@ on the /search URL and when the "center alignment" preference is enabled. &:not(.only_template_images, .image-detail-open) { // the gap is set in style.less .ltr-margin-left(1.5rem); - grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width; + grid-template-columns: + calc(var(--center-page-width) - @results-gap - @results-sidebar-width) + @results-sidebar-width; #backToTop { .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2)); diff --git a/client/simple/src/less/style-rtl.less b/client/simple/src/less/style-rtl.less index 8e2634d34..7ac1e6e20 100644 --- a/client/simple/src/less/style-rtl.less +++ b/client/simple/src/less/style-rtl.less @@ -109,7 +109,11 @@ } // Image detail -#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p { +#results.image-detail-open + article.result-images[data-vim-selected] + .detail + .result-images-labels + p { direction: rtl; &.result-url { @@ -125,7 +129,13 @@ } // select HTML element -@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) { +@supports ( + (background-position-x: 100%) and + ( + (appearance: none) or (-webkit-appearance: none) or + (-moz-appearance: none) + ) +) { select { border-width: 0 0 0 2rem; background-position-x: -2rem; diff --git a/client/simple/src/less/style.less b/client/simple/src/less/style.less index 7dca47402..7b34ea406 100644 --- a/client/simple/src/less/style.less +++ b/client/simple/src/less/style.less @@ -544,12 +544,11 @@ article[data-vim-selected].category-social { .ltr-margin-left(@results-offset); display: grid; grid-template: - "corrections sidebar" min-content - "answers sidebar" min-content - "urls sidebar" 1fr - "pagination sidebar" min-content - / @results-width @results-sidebar-width - ; + "corrections sidebar" min-content + "answers sidebar" min-content + "urls sidebar" 1fr + "pagination sidebar" min-content + / @results-width @results-sidebar-width; gap: 0 @results-gap; } @@ -782,7 +781,7 @@ summary.title { padding: 0.4rem; margin-left: 0.5rem; border-radius: 0.3rem; - display: none; // will be shown by JS. + display: none; // will be shown by JS. } } @@ -979,8 +978,7 @@ summary.title { "sidebar" min-content "urls" 1fr "pagination" min-content - / @results-width - ; + / @results-width; gap: 0; } } diff --git a/client/simple/src/less/toolkit.less b/client/simple/src/less/toolkit.less index d3fb2273b..f9bdbf70c 100644 --- a/client/simple/src/less/toolkit.less +++ b/client/simple/src/less/toolkit.less @@ -249,7 +249,7 @@ ul.tabs { order: 2; } - & > input[type=radio] { + & > input[type="radio"] { display: none; } @@ -347,14 +347,21 @@ select { } } -@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) { +@supports ( + (background-position-x: 100%) and + ( + (appearance: none) or (-webkit-appearance: none) or + (-moz-appearance: none) + ) +) { select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border-width: 0 2rem 0 0; border-color: transparent; - background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat; + background: data-uri("image/svg+xml;charset=UTF-8", @select-light-svg-path) + no-repeat; background-position-x: calc(100% + 2rem); background-size: 2rem; background-origin: content-box; @@ -376,12 +383,18 @@ select { @media (prefers-color-scheme: dark) { html.theme-auto select, html.theme-dark select { - background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path); + background-image: data-uri( + "image/svg+xml;charset=UTF-8", + @select-dark-svg-path + ); } } html.theme-dark select { - background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path); + background-image: data-uri( + "image/svg+xml;charset=UTF-8", + @select-dark-svg-path + ); } } @@ -461,7 +474,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] { /* -- checkbox -- */ @supports (transform: rotate(-45deg)) { - input[type=checkbox]:not(.checkbox-onoff) { + input[type="checkbox"]:not(.checkbox-onoff) { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -476,7 +489,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] { .rounded-corners(0.3em); &::after { - content: ''; + content: ""; width: 9px; height: 5px; position: absolute; @@ -497,14 +510,18 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] { } // disabled : can't be focused, show only the check mark - input[type=checkbox][disabled]:not(.checkbox-onoff) { + input[type="checkbox"][disabled]:not(.checkbox-onoff) { border: inherit; background-color: transparent !important; cursor: inherit; } // if not checked and possible to checked then display a "light" check mark on hover - input.checkbox[type=checkbox]:not(:checked, [disabled], .checkbox-onoff):hover::after { + input.checkbox[type="checkbox"]:not( + :checked, + [disabled], + .checkbox-onoff + ):hover::after { opacity: 0.5; } }