summaryrefslogtreecommitdiff
path: root/searx/static/themes/simple/src
diff options
context:
space:
mode:
Diffstat (limited to 'searx/static/themes/simple/src')
-rw-r--r--searx/static/themes/simple/src/js/main/keyboard.js19
-rw-r--r--searx/static/themes/simple/src/js/main/search.js20
-rw-r--r--searx/static/themes/simple/src/less/definitions.less1
-rw-r--r--searx/static/themes/simple/src/less/new_issue.less59
-rw-r--r--searx/static/themes/simple/src/less/stats.less53
-rw-r--r--searx/static/themes/simple/src/less/style-center.less118
-rw-r--r--searx/static/themes/simple/src/less/style.less115
-rw-r--r--searx/static/themes/simple/src/svg/information-circle-outline.svg6
8 files changed, 317 insertions, 74 deletions
diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js
index f29ed86f4..0c52673d9 100644
--- a/searx/static/themes/simple/src/js/main/keyboard.js
+++ b/searx/static/themes/simple/src/js/main/keyboard.js
@@ -34,7 +34,7 @@ searxng.ready(function () {
searxng.on('.result', 'click', function (e) {
if (!isElementInDetail(e.target)) {
- highlightResult(this)(true);
+ highlightResult(this)(true, true);
let resultElement = getResultElement(e.target);
if (isImageResult(resultElement)) {
e.preventDefault();
@@ -172,7 +172,7 @@ searxng.ready(function () {
}
function highlightResult (which) {
- return function (noScroll) {
+ return function (noScroll, keepFocus) {
var current = document.querySelector('.result[data-vim-selected]'),
effectiveWhich = which;
if (current === null) {
@@ -233,9 +233,11 @@ searxng.ready(function () {
if (next) {
current.removeAttribute('data-vim-selected');
next.setAttribute('data-vim-selected', 'true');
- var link = next.querySelector('h3 a') || next.querySelector('a');
- if (link !== null) {
- link.focus();
+ if (!keepFocus) {
+ var link = next.querySelector('h3 a') || next.querySelector('a');
+ if (link !== null) {
+ link.focus();
+ }
}
if (!noScroll) {
scrollPageToSelected();
@@ -317,7 +319,12 @@ searxng.ready(function () {
function searchInputFocus () {
window.scrollTo(0, 0);
- document.querySelector('#q').focus();
+ var q = document.querySelector('#q');
+ q.focus();
+ if (q.setSelectionRange) {
+ var len = q.value.length;
+ q.setSelectionRange(len, len);
+ }
}
function openResult (newTab) {
diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js
index b96cf499d..97c9ea541 100644
--- a/searx/static/themes/simple/src/js/main/search.js
+++ b/searx/static/themes/simple/src/js/main/search.js
@@ -3,17 +3,10 @@
(function (w, d, searxng) {
'use strict';
- var firstFocus = true, qinput_id = "q", qinput;
+ var qinput_id = "q", qinput;
const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches;
- function placeCursorAtEnd (element) {
- if (element.setSelectionRange) {
- var len = element.value.length;
- element.setSelectionRange(len, len);
- }
- }
-
function submitIfQuery () {
if (qinput.value.length > 0) {
var search = document.getElementById('search');
@@ -45,15 +38,6 @@
searxng.ready(function () {
qinput = d.getElementById(qinput_id);
- function placeCursorAtEndOnce () {
- if (firstFocus) {
- placeCursorAtEnd(qinput);
- firstFocus = false;
- } else {
- // e.preventDefault();
- }
- }
-
if (qinput !== null) {
// clear button
createClearButton(qinput);
@@ -84,8 +68,6 @@
}, "#" + qinput_id);
}
- qinput.addEventListener('focus', placeCursorAtEndOnce, false);
-
if (!isMobile && document.querySelector('.index_endpoint')) {
qinput.focus();
}
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index dc2717067..ef6b02b2c 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -243,6 +243,7 @@
/// General Size
@results-width: 45rem;
+@results-sidebar-width: 25rem;
@results-offset: 10rem;
@results-tablet-offset: 0.5rem;
@results-gap: 5rem;
diff --git a/searx/static/themes/simple/src/less/new_issue.less b/searx/static/themes/simple/src/less/new_issue.less
index 83d53b5e3..a1e5006e3 100644
--- a/searx/static/themes/simple/src/less/new_issue.less
+++ b/searx/static/themes/simple/src/less/new_issue.less
@@ -1,21 +1,48 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
+.stats_endpoint {
+ .github-issue-button {
+ display: block;
+ padding: 8px 16px;
+ font-family: sans-serif;
+ font-size: 16px;
+ color: white;
+ background-color: #238636;
+ border: #2ea043;
+ border-radius: 10px !important;
+ box-shadow: rgba(0, 0, 0, 0) 0 0 0 0;
+ }
-.github-issue-button {
- display: block;
- padding: 8px 16px;
- font-family: sans-serif;
- font-size: 16px;
- color: white;
- background-color: #238636;
- border: #2ea043;
- border-radius: 10px !important;
- box-shadow: rgba(0, 0, 0, 0) 0 0 0 0;
-}
+ .github-issue-button:hover {
+ background-color: #2ea043;
+ }
-.github-issue-button:hover {
- background-color: #2ea043;
-}
+ .issue-hide {
+ display: none;
+ }
+
+ input[type=checked] {
+ position: absolute;
+ }
+
+ label {
+ margin: 1rem 1rem 1rem 0;
+ }
+
+ .step_content {
+ margin: 1rem 1rem 1rem 2rem;
+ }
+
+ .step1,
+ .step2 {
+ visibility: hidden;
+ }
+
+ .step1_delay {
+ transition: visibility 0s linear 4s;
+ }
-.issue-hide {
- display: none;
+ #step1:checked ~ .step1,
+ #step2:checked ~ .step2 {
+ visibility: visible;
+ }
}
diff --git a/searx/static/themes/simple/src/less/stats.less b/searx/static/themes/simple/src/less/stats.less
index 0e54e270c..4658d4f2b 100644
--- a/searx/static/themes/simple/src/less/stats.less
+++ b/searx/static/themes/simple/src/less/stats.less
@@ -1,6 +1,25 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
.engine-stats {
+ border-spacing: 0;
+ border-collapse: collapse;
+
+ tr td,
+ tr th {
+ border-bottom: 1px solid var(--color-result-border);
+ padding: 0.25rem;
+ }
+
+ table.engine-tooltip {
+ border-spacing: 0;
+ border-collapse: collapse;
+
+ td,
+ th {
+ border: none;
+ }
+ }
+
.engine-name {
width: 20rem;
}
@@ -13,23 +32,33 @@
.engine-reliability {
text-align: right;
}
+}
+
+table.engine-error th.engine-error-type,
+table.engine-error td.engine-error-type,
+failed-test {
+ width: 10rem;
+}
+
+.engine-errors {
+ margin-top: 3rem;
table.engine-error {
max-width: 1280px;
- margin: 1rem;
- border: 1px solid gray;
- }
+ margin: 1rem 0 3rem 0;
+ border: 1px solid var(--color-result-border);
+ .ltr-text-align-left();
- table.engine-error th.engine-error-type,
- table.engine-error td.engine-error-type,
- failed-test {
- width: 10rem;
- }
+ tr th,
+ tr td {
+ padding: 0.5rem;
+ }
- table.engine-error span.log_parameters {
- border-right: 1px solid gray;
- padding: 0 1rem 0 0;
- margin: 0 0 0 0.5rem;
+ & span.log_parameters {
+ border-right: 1px solid solid var(--color-result-border);
+ padding: 0 1rem 0 0;
+ margin: 0 0 0 0.5rem;
+ }
}
}
diff --git a/searx/static/themes/simple/src/less/style-center.less b/searx/static/themes/simple/src/less/style-center.less
new file mode 100644
index 000000000..30c52cd5a
--- /dev/null
+++ b/searx/static/themes/simple/src/less/style-center.less
@@ -0,0 +1,118 @@
+/*
+--center-page-width overrides the less variable @results-width when the results are centered
+see the CSS rules for #results in style.less ( grid-template-columns and gap).
+
+In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3).
+
+All rules starts with ".center-aligment-yes #main_results" to be enabled only
+on the /search URL and when the "center alignment" preference is enabled.
+*/
+
+@media screen and (min-width: @phone) {
+ .center-aligment-yes #main_results {
+ --center-page-width: 48rem;
+ }
+}
+
+@media screen and (min-width: 62rem) {
+ .center-aligment-yes #main_results {
+ --center-page-width: 60rem;
+ }
+}
+
+@media screen and (min-width: @tablet) {
+ .center-aligment-yes #main_results {
+ --center-page-width: 73rem;
+ }
+}
+
+@media screen and (min-width: @phone) and (max-width: @tablet) {
+ // any change must be reset in @media screen and (min-width: @tablet) { ... }
+ .center-aligment-yes #main_results {
+ #results {
+ grid-template-columns: 60% calc(40% - @results-gap);
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ #urls {
+ .ltr-margin-left(3rem);
+ }
+
+ #sidebar {
+ .ltr-margin-right(1rem);
+ }
+
+ #backToTop {
+ .ltr-left(calc(60% + 1rem));
+ }
+ }
+}
+
+@media screen and (min-width: @tablet) {
+ .center-aligment-yes #main_results {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ #search {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #search_header {
+ 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
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .search_filters {
+ .ltr-margin-left(0.5rem);
+ width: var(--center-page-width);
+ }
+
+ #results {
+ // from style.less (when screen width = @tablet, reset layout from tablet)
+ .ltr-margin-right(2rem);
+ .ltr-margin-left(@results-offset);
+ //
+
+ &.only_template_images,
+ &.image-detail-open {
+ // * grid-template-columns and .ltr-margin-left are set in style.less
+ // * With .image-detail-open.only_template_images, the width is set in detail.less
+ // * #results is going to be centered because of the #main_results rules,
+ // align-self aligns the results on the left or right according to the language.
+ align-self: flex-start;
+ }
+
+ &:not(.only_template_images):not(.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;
+
+ #backToTop {
+ .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
+ }
+ }
+
+ .result .content {
+ max-width: inherit;
+ }
+ }
+
+ // from style.less (when screen width = @tablet, reset layout from tablet)
+ #urls {
+ .ltr-margin-left(0);
+ }
+
+ #sidebar {
+ .ltr-margin-right(0);
+ }
+ }
+}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 45c6eb204..11d2ef58d 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -29,6 +29,9 @@
// Search-Field
@import "search.less";
+// to center the results
+@import "style-center.less";
+
// ion-icon
.ion-icon {
display: inline-block;
@@ -460,7 +463,7 @@ article[data-vim-selected].category-social {
margin-bottom: 0;
.ltr-margin-left(@results-offset);
display: grid;
- grid-template-columns: @results-width 25rem;
+ grid-template-columns: @results-width @results-sidebar-width;
grid-template-rows: min-content min-content 1fr min-content;
gap: 0 @results-gap;
grid-template-areas:
@@ -591,24 +594,29 @@ article[data-vim-selected].category-social {
padding: 0;
}
- dl {
- margin: 0.5em 0;
- }
-
dt {
- display: inline;
- margin-top: 0.5em;
- .ltr-margin-right(0.25em);
- margin-bottom: 0.5em;
- .ltr-margin-left(0);
- padding: 0;
font-weight: bold;
}
- dd {
- display: inline;
- margin: 0.5em 0;
- padding: 0;
+ .attributes {
+ dl {
+ margin: 0.5em 0;
+ }
+
+ dt {
+ display: inline;
+ margin-top: 0.5em;
+ .ltr-margin-right(0.25em);
+ margin-bottom: 0.5em;
+ .ltr-margin-left(0);
+ padding: 0;
+ }
+
+ dd {
+ display: inline;
+ margin: 0.5em 0;
+ padding: 0;
+ }
}
input {
@@ -636,16 +644,30 @@ article[data-vim-selected].category-social {
}
}
-#linkto_preferences {
+#links_on_top {
position: absolute;
.ltr-right(1.8rem);
+ .ltr-text-align-right();
top: 2.2rem;
padding: 0;
border: 0;
- display: block;
- font-size: 1.2em;
+ display: flex;
+ align-items: center;
+ font-size: 1em;
color: var(--color-search-font);
+ a {
+ display: flex;
+ align-items: center;
+ margin-left: 1em;
+
+ svg {
+ font-size: 1.2em;
+ .ltr-margin-right(0.125em);
+ }
+ }
+
+ a,
a:link *,
a:hover *,
a:visited *,
@@ -698,7 +720,17 @@ article[data-vim-selected].category-social {
opacity: 1;
}
-@media screen and (max-width: @tablet) {
+/*
+ tablet layout
+*/
+
+.results-tablet() {
+ #links_on_top {
+ span {
+ display: none;
+ }
+ }
+
.page_with_header {
margin: 2rem 0.5rem;
width: auto;
@@ -799,6 +831,36 @@ article[data-vim-selected].category-social {
}
}
+@media screen and (max-width: calc(@tablet - 0.5px)) {
+ #links_on_top {
+ span {
+ display: none;
+ }
+ }
+}
+
+@media screen and (max-width: 52rem) {
+ body.results_endpoint {
+ #links_on_top {
+ .link_on_top_about,
+ .link_on_top_donate {
+ display: none;
+ }
+ }
+ }
+}
+
+@media screen and (min-width: @phone) and (max-width: @tablet) {
+ // when .center-aligment-yes, see style-center.less
+ // the media query includes "min-width: @phone"
+ // because the phone layout includes the tablet layout unconditionally.
+ .center-aligment-no {
+ .results-tablet();
+ }
+}
+
+/* Misc */
+
#main_results div#results.only_template_images {
margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
display: grid;
@@ -837,7 +899,14 @@ article[data-vim-selected].category-social {
}
}
+/*
+ phone layout
+*/
+
@media screen and (max-width: @phone) {
+ // based on the tablet layout
+ .results-tablet();
+
html {
background-color: var(--color-base-background-mobile);
}
@@ -847,12 +916,12 @@ article[data-vim-selected].category-social {
margin: 1rem 0 0 0;
}
- #linkto_preferences {
+ #links_on_top {
top: 0.8rem;
.ltr-right(0.7rem);
}
- #main_index #linkto_preferences {
+ #main_index #links_on_top {
top: 0.5rem;
.ltr-right(0.5rem);
}
@@ -888,6 +957,10 @@ article[data-vim-selected].category-social {
}
}
+/*
+ small-phone layout
+*/
+
@media screen and (max-width: @small-phone) {
.result-videos {
img.thumbnail {
diff --git a/searx/static/themes/simple/src/svg/information-circle-outline.svg b/searx/static/themes/simple/src/svg/information-circle-outline.svg
new file mode 100644
index 000000000..b7c300094
--- /dev/null
+++ b/searx/static/themes/simple/src/svg/information-circle-outline.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+ <title>Information Circle</title>
+ <path d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 220h32v116"/>
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M208 340h88"/>
+ <path fill="currentColor" stroke="currentColor" stroke-linecap="round" d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z"/>
+</svg> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-15 04:43:06 +0000