mirror of
https://github.com/searxng/searxng.git
synced 2025-08-03 10:32:21 +02:00
[web-client] simple theme: move sources to client/simple/src
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser
Markus Heiser
parent
b6487b70aa
commit
a1132deaa4
33 changed files with 5 additions and 2 deletions
173
client/simple/generated/pygments.less
Normal file
173
client/simple/generated/pygments.less
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
/*
|
||||
this file is generated automatically by searxng_extra/update/update_pygments.py
|
||||
using pygments version 2.19.1
|
||||
*/
|
||||
|
||||
|
||||
.code-highlight {
|
||||
|
||||
pre { line-height: 100%; }
|
||||
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||||
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||||
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||||
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||||
.hll { background-color: #ffffcc }
|
||||
.c { color: #3D7B7B; font-style: italic } /* Comment */
|
||||
.err { border: 1px solid #F00 } /* Error */
|
||||
.k { color: #008000; font-weight: bold } /* Keyword */
|
||||
.o { color: #666 } /* Operator */
|
||||
.ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
|
||||
.cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
|
||||
.cp { color: #9C6500 } /* Comment.Preproc */
|
||||
.cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
|
||||
.c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
|
||||
.cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
|
||||
.gd { color: #A00000 } /* Generic.Deleted */
|
||||
.ge { font-style: italic } /* Generic.Emph */
|
||||
.ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
|
||||
.gr { color: #E40000 } /* Generic.Error */
|
||||
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
.gi { color: #008400 } /* Generic.Inserted */
|
||||
.go { color: #717171 } /* Generic.Output */
|
||||
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||
.gs { font-weight: bold } /* Generic.Strong */
|
||||
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
.gt { color: #04D } /* Generic.Traceback */
|
||||
.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
|
||||
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
|
||||
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
|
||||
.kp { color: #008000 } /* Keyword.Pseudo */
|
||||
.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
|
||||
.kt { color: #B00040 } /* Keyword.Type */
|
||||
.m { color: #666 } /* Literal.Number */
|
||||
.s { color: #BA2121 } /* Literal.String */
|
||||
.na { color: #687822 } /* Name.Attribute */
|
||||
.nb { color: #008000 } /* Name.Builtin */
|
||||
.nc { color: #00F; font-weight: bold } /* Name.Class */
|
||||
.no { color: #800 } /* Name.Constant */
|
||||
.nd { color: #A2F } /* Name.Decorator */
|
||||
.ni { color: #717171; font-weight: bold } /* Name.Entity */
|
||||
.ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
|
||||
.nf { color: #00F } /* Name.Function */
|
||||
.nl { color: #767600 } /* Name.Label */
|
||||
.nn { color: #00F; font-weight: bold } /* Name.Namespace */
|
||||
.nt { color: #008000; font-weight: bold } /* Name.Tag */
|
||||
.nv { color: #19177C } /* Name.Variable */
|
||||
.ow { color: #A2F; font-weight: bold } /* Operator.Word */
|
||||
.w { color: #BBB } /* Text.Whitespace */
|
||||
.mb { color: #666 } /* Literal.Number.Bin */
|
||||
.mf { color: #666 } /* Literal.Number.Float */
|
||||
.mh { color: #666 } /* Literal.Number.Hex */
|
||||
.mi { color: #666 } /* Literal.Number.Integer */
|
||||
.mo { color: #666 } /* Literal.Number.Oct */
|
||||
.sa { color: #BA2121 } /* Literal.String.Affix */
|
||||
.sb { color: #BA2121 } /* Literal.String.Backtick */
|
||||
.sc { color: #BA2121 } /* Literal.String.Char */
|
||||
.dl { color: #BA2121 } /* Literal.String.Delimiter */
|
||||
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
|
||||
.s2 { color: #BA2121 } /* Literal.String.Double */
|
||||
.se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
|
||||
.sh { color: #BA2121 } /* Literal.String.Heredoc */
|
||||
.si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
|
||||
.sx { color: #008000 } /* Literal.String.Other */
|
||||
.sr { color: #A45A77 } /* Literal.String.Regex */
|
||||
.s1 { color: #BA2121 } /* Literal.String.Single */
|
||||
.ss { color: #19177C } /* Literal.String.Symbol */
|
||||
.bp { color: #008000 } /* Name.Builtin.Pseudo */
|
||||
.fm { color: #00F } /* Name.Function.Magic */
|
||||
.vc { color: #19177C } /* Name.Variable.Class */
|
||||
.vg { color: #19177C } /* Name.Variable.Global */
|
||||
.vi { color: #19177C } /* Name.Variable.Instance */
|
||||
.vm { color: #19177C } /* Name.Variable.Magic */
|
||||
.il { color: #666 } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
|
||||
.code-highlight-dark(){
|
||||
.code-highlight {
|
||||
|
||||
pre { line-height: 100%; }
|
||||
td.linenos .normal { color: #3c4354; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||||
span.linenos { color: #3c4354; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||||
td.linenos .special { color: #3c4354; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||||
span.linenos.special { color: #3c4354; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||||
.hll { background-color: #6e7681 }
|
||||
.c { color: #7E8AA1 } /* Comment */
|
||||
.err { color: #F88F7F } /* Error */
|
||||
.esc { color: #D4D2C8 } /* Escape */
|
||||
.g { color: #D4D2C8 } /* Generic */
|
||||
.k { color: #FFAD66 } /* Keyword */
|
||||
.l { color: #D5FF80 } /* Literal */
|
||||
.n { color: #D4D2C8 } /* Name */
|
||||
.o { color: #FFAD66 } /* Operator */
|
||||
.x { color: #D4D2C8 } /* Other */
|
||||
.p { color: #D4D2C8 } /* Punctuation */
|
||||
.ch { color: #F88F7F; font-style: italic } /* Comment.Hashbang */
|
||||
.cm { color: #7E8AA1 } /* Comment.Multiline */
|
||||
.cp { color: #FFAD66; font-weight: bold } /* Comment.Preproc */
|
||||
.cpf { color: #7E8AA1 } /* Comment.PreprocFile */
|
||||
.c1 { color: #7E8AA1 } /* Comment.Single */
|
||||
.cs { color: #7E8AA1; font-style: italic } /* Comment.Special */
|
||||
.gd { color: #F88F7F; background-color: #3D1E20 } /* Generic.Deleted */
|
||||
.ge { color: #D4D2C8; font-style: italic } /* Generic.Emph */
|
||||
.ges { color: #D4D2C8 } /* Generic.EmphStrong */
|
||||
.gr { color: #F88F7F } /* Generic.Error */
|
||||
.gh { color: #D4D2C8 } /* Generic.Heading */
|
||||
.gi { color: #6AD4AF; background-color: #19362C } /* Generic.Inserted */
|
||||
.go { color: #7E8AA1 } /* Generic.Output */
|
||||
.gp { color: #D4D2C8 } /* Generic.Prompt */
|
||||
.gs { color: #D4D2C8; font-weight: bold } /* Generic.Strong */
|
||||
.gu { color: #D4D2C8 } /* Generic.Subheading */
|
||||
.gt { color: #F88F7F } /* Generic.Traceback */
|
||||
.kc { color: #FFAD66 } /* Keyword.Constant */
|
||||
.kd { color: #FFAD66 } /* Keyword.Declaration */
|
||||
.kn { color: #FFAD66 } /* Keyword.Namespace */
|
||||
.kp { color: #FFAD66 } /* Keyword.Pseudo */
|
||||
.kr { color: #FFAD66 } /* Keyword.Reserved */
|
||||
.kt { color: #73D0FF } /* Keyword.Type */
|
||||
.ld { color: #D5FF80 } /* Literal.Date */
|
||||
.m { color: #DFBFFF } /* Literal.Number */
|
||||
.s { color: #D5FF80 } /* Literal.String */
|
||||
.na { color: #FFD173 } /* Name.Attribute */
|
||||
.nb { color: #FFD173 } /* Name.Builtin */
|
||||
.nc { color: #73D0FF } /* Name.Class */
|
||||
.no { color: #FFD173 } /* Name.Constant */
|
||||
.nd { color: #7E8AA1; font-weight: bold; font-style: italic } /* Name.Decorator */
|
||||
.ni { color: #95E6CB } /* Name.Entity */
|
||||
.ne { color: #73D0FF } /* Name.Exception */
|
||||
.nf { color: #FFD173 } /* Name.Function */
|
||||
.nl { color: #D4D2C8 } /* Name.Label */
|
||||
.nn { color: #D4D2C8 } /* Name.Namespace */
|
||||
.nx { color: #D4D2C8 } /* Name.Other */
|
||||
.py { color: #FFD173 } /* Name.Property */
|
||||
.nt { color: #5CCFE6 } /* Name.Tag */
|
||||
.nv { color: #D4D2C8 } /* Name.Variable */
|
||||
.ow { color: #FFAD66 } /* Operator.Word */
|
||||
.pm { color: #D4D2C8 } /* Punctuation.Marker */
|
||||
.w { color: #D4D2C8 } /* Text.Whitespace */
|
||||
.mb { color: #DFBFFF } /* Literal.Number.Bin */
|
||||
.mf { color: #DFBFFF } /* Literal.Number.Float */
|
||||
.mh { color: #DFBFFF } /* Literal.Number.Hex */
|
||||
.mi { color: #DFBFFF } /* Literal.Number.Integer */
|
||||
.mo { color: #DFBFFF } /* Literal.Number.Oct */
|
||||
.sa { color: #F29E74 } /* Literal.String.Affix */
|
||||
.sb { color: #D5FF80 } /* Literal.String.Backtick */
|
||||
.sc { color: #D5FF80 } /* Literal.String.Char */
|
||||
.dl { color: #D5FF80 } /* Literal.String.Delimiter */
|
||||
.sd { color: #7E8AA1 } /* Literal.String.Doc */
|
||||
.s2 { color: #D5FF80 } /* Literal.String.Double */
|
||||
.se { color: #95E6CB } /* Literal.String.Escape */
|
||||
.sh { color: #D5FF80 } /* Literal.String.Heredoc */
|
||||
.si { color: #95E6CB } /* Literal.String.Interpol */
|
||||
.sx { color: #95E6CB } /* Literal.String.Other */
|
||||
.sr { color: #95E6CB } /* Literal.String.Regex */
|
||||
.s1 { color: #D5FF80 } /* Literal.String.Single */
|
||||
.ss { color: #DFBFFF } /* Literal.String.Symbol */
|
||||
.bp { color: #5CCFE6 } /* Name.Builtin.Pseudo */
|
||||
.fm { color: #FFD173 } /* Name.Function.Magic */
|
||||
.vc { color: #D4D2C8 } /* Name.Variable.Class */
|
||||
.vg { color: #D4D2C8 } /* Name.Variable.Global */
|
||||
.vi { color: #D4D2C8 } /* Name.Variable.Instance */
|
||||
.vm { color: #D4D2C8 } /* Name.Variable.Magic */
|
||||
.il { color: #DFBFFF } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
}
|
||||
20
client/simple/src/js/head/00_init.js
Normal file
20
client/simple/src/js/head/00_init.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
(function (w, d) {
|
||||
'use strict';
|
||||
|
||||
// add data- properties
|
||||
var script = d.currentScript || (function () {
|
||||
var scripts = d.getElementsByTagName('script');
|
||||
return scripts[scripts.length - 1];
|
||||
})();
|
||||
|
||||
w.searxng = {
|
||||
settings: JSON.parse(atob(script.getAttribute('client_settings')))
|
||||
};
|
||||
|
||||
// update the css
|
||||
var htmlElement = d.getElementsByTagName("html")[0];
|
||||
htmlElement.classList.remove('no-js');
|
||||
htmlElement.classList.add('js');
|
||||
|
||||
})(window, document);
|
||||
165
client/simple/src/js/main/00_toolkit.js
Normal file
165
client/simple/src/js/main/00_toolkit.js
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
* @license
|
||||
* (C) Copyright Contributors to the SearXNG project.
|
||||
* (C) Copyright Contributors to the searx project (2014 - 2021).
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
window.searxng = (function (w, d) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// not invented here toolkit with bugs fixed elsewhere
|
||||
// purposes : be just good enough and as small as possible
|
||||
|
||||
// from https://plainjs.com/javascript/events/live-binding-event-handlers-14/
|
||||
if (w.Element) {
|
||||
(function (ElementPrototype) {
|
||||
ElementPrototype.matches = ElementPrototype.matches ||
|
||||
ElementPrototype.matchesSelector ||
|
||||
ElementPrototype.webkitMatchesSelector ||
|
||||
ElementPrototype.msMatchesSelector ||
|
||||
function (selector) {
|
||||
var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
|
||||
while (nodes[++i] && nodes[i] != node);
|
||||
return !!nodes[i];
|
||||
};
|
||||
})(Element.prototype);
|
||||
}
|
||||
|
||||
function callbackSafe (callback, el, e) {
|
||||
try {
|
||||
callback.call(el, e);
|
||||
} catch (exception) {
|
||||
console.log(exception);
|
||||
}
|
||||
}
|
||||
|
||||
var searxng = window.searxng || {};
|
||||
|
||||
searxng.on = function (obj, eventType, callback, useCapture) {
|
||||
useCapture = useCapture || false;
|
||||
if (typeof obj !== 'string') {
|
||||
// obj HTMLElement, HTMLDocument
|
||||
obj.addEventListener(eventType, callback, useCapture);
|
||||
} else {
|
||||
// obj is a selector
|
||||
d.addEventListener(eventType, function (e) {
|
||||
var el = e.target || e.srcElement, found = false;
|
||||
while (el && el.matches && el !== d && !(found = el.matches(obj))) el = el.parentElement;
|
||||
if (found) callbackSafe(callback, el, e);
|
||||
}, useCapture);
|
||||
}
|
||||
};
|
||||
|
||||
searxng.ready = function (callback) {
|
||||
if (document.readyState != 'loading') {
|
||||
callback.call(w);
|
||||
} else {
|
||||
w.addEventListener('DOMContentLoaded', callback.bind(w));
|
||||
}
|
||||
};
|
||||
|
||||
searxng.http = function (method, url, data = null) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
try {
|
||||
var req = new XMLHttpRequest();
|
||||
req.open(method, url, true);
|
||||
req.timeout = 20000;
|
||||
|
||||
// On load
|
||||
req.onload = function () {
|
||||
if (req.status == 200) {
|
||||
resolve(req.response, req.responseType);
|
||||
} else {
|
||||
reject(Error(req.statusText));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle network errors
|
||||
req.onerror = function () {
|
||||
reject(Error("Network Error"));
|
||||
};
|
||||
|
||||
req.onabort = function () {
|
||||
reject(Error("Transaction is aborted"));
|
||||
};
|
||||
|
||||
req.ontimeout = function () {
|
||||
reject(Error("Timeout"));
|
||||
}
|
||||
|
||||
// Make the request
|
||||
if (data) {
|
||||
req.send(data)
|
||||
} else {
|
||||
req.send();
|
||||
}
|
||||
} catch (ex) {
|
||||
reject(ex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
searxng.loadStyle = function (src) {
|
||||
var path = searxng.settings.theme_static_path + "/" + src,
|
||||
id = "style_" + src.replace('.', '_'),
|
||||
s = d.getElementById(id);
|
||||
if (s === null) {
|
||||
s = d.createElement('link');
|
||||
s.setAttribute('id', id);
|
||||
s.setAttribute('rel', 'stylesheet');
|
||||
s.setAttribute('type', 'text/css');
|
||||
s.setAttribute('href', path);
|
||||
d.body.appendChild(s);
|
||||
}
|
||||
};
|
||||
|
||||
searxng.loadScript = function (src, callback) {
|
||||
var path = searxng.settings.theme_static_path + "/" + src,
|
||||
id = "script_" + src.replace('.', '_'),
|
||||
s = d.getElementById(id);
|
||||
if (s === null) {
|
||||
s = d.createElement('script');
|
||||
s.setAttribute('id', id);
|
||||
s.setAttribute('src', path);
|
||||
s.onload = callback;
|
||||
s.onerror = function () {
|
||||
s.setAttribute('error', '1');
|
||||
};
|
||||
d.body.appendChild(s);
|
||||
} else if (!s.hasAttribute('error')) {
|
||||
try {
|
||||
callback.apply(s, []);
|
||||
} catch (exception) {
|
||||
console.log(exception);
|
||||
}
|
||||
} else {
|
||||
console.log("callback not executed : script '" + path + "' not loaded.");
|
||||
}
|
||||
};
|
||||
|
||||
searxng.insertBefore = function (newNode, referenceNode) {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode);
|
||||
};
|
||||
|
||||
searxng.insertAfter = function (newNode, referenceNode) {
|
||||
referenceNode.parentNode.insertAfter(newNode, referenceNode.nextSibling);
|
||||
};
|
||||
|
||||
searxng.on('.close', 'click', function () {
|
||||
this.parentNode.classList.add('invisible');
|
||||
});
|
||||
|
||||
function getEndpoint () {
|
||||
for (var className of d.getElementsByTagName('body')[0].classList.values()) {
|
||||
if (className.endsWith('_endpoint')) {
|
||||
return className.split('_')[0];
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
searxng.endpoint = getEndpoint();
|
||||
|
||||
return searxng;
|
||||
})(window, document);
|
||||
88
client/simple/src/js/main/infinite_scroll.js
Normal file
88
client/simple/src/js/main/infinite_scroll.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
/* global searxng */
|
||||
|
||||
searxng.ready(function () {
|
||||
'use strict';
|
||||
|
||||
searxng.infinite_scroll_supported = (
|
||||
'IntersectionObserver' in window &&
|
||||
'IntersectionObserverEntry' in window &&
|
||||
'intersectionRatio' in window.IntersectionObserverEntry.prototype);
|
||||
|
||||
if (searxng.endpoint !== 'results') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!searxng.infinite_scroll_supported) {
|
||||
console.log('IntersectionObserver not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
let d = document;
|
||||
var onlyImages = d.getElementById('results').classList.contains('only_template_images');
|
||||
|
||||
function newLoadSpinner () {
|
||||
var loader = d.createElement('div');
|
||||
loader.classList.add('loader');
|
||||
return loader;
|
||||
}
|
||||
|
||||
function replaceChildrenWith (element, children) {
|
||||
element.textContent = '';
|
||||
children.forEach(child => element.appendChild(child));
|
||||
}
|
||||
|
||||
function loadNextPage (callback) {
|
||||
var form = d.querySelector('#pagination form.next_page');
|
||||
if (!form) {
|
||||
return
|
||||
}
|
||||
replaceChildrenWith(d.querySelector('#pagination'), [ newLoadSpinner() ]);
|
||||
var formData = new FormData(form);
|
||||
searxng.http('POST', d.querySelector('#search').getAttribute('action'), formData).then(
|
||||
function (response) {
|
||||
var nextPageDoc = new DOMParser().parseFromString(response, 'text/html');
|
||||
var articleList = nextPageDoc.querySelectorAll('#urls article');
|
||||
var paginationElement = nextPageDoc.querySelector('#pagination');
|
||||
d.querySelector('#pagination').remove();
|
||||
if (articleList.length > 0 && !onlyImages) {
|
||||
// do not add <hr> element when there are only images
|
||||
d.querySelector('#urls').appendChild(d.createElement('hr'));
|
||||
}
|
||||
articleList.forEach(articleElement => {
|
||||
d.querySelector('#urls').appendChild(articleElement);
|
||||
});
|
||||
if (paginationElement) {
|
||||
d.querySelector('#results').appendChild(paginationElement);
|
||||
callback();
|
||||
}
|
||||
}
|
||||
).catch(
|
||||
function (err) {
|
||||
console.log(err);
|
||||
var e = d.createElement('div');
|
||||
e.textContent = searxng.settings.translations.error_loading_next_page;
|
||||
e.classList.add('dialog-error');
|
||||
e.setAttribute('role', 'alert');
|
||||
replaceChildrenWith(d.querySelector('#pagination'), [ e ]);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (searxng.settings.infinite_scroll && searxng.infinite_scroll_supported) {
|
||||
const intersectionObserveOptions = {
|
||||
rootMargin: "20rem",
|
||||
};
|
||||
const observedSelector = 'article.result:last-child';
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
const paginationEntry = entries[0];
|
||||
if (paginationEntry.isIntersecting) {
|
||||
observer.unobserve(paginationEntry.target);
|
||||
loadNextPage(() => observer.observe(d.querySelector(observedSelector), intersectionObserveOptions));
|
||||
}
|
||||
});
|
||||
observer.observe(d.querySelector(observedSelector), intersectionObserveOptions);
|
||||
}
|
||||
|
||||
});
|
||||
461
client/simple/src/js/main/keyboard.js
Normal file
461
client/simple/src/js/main/keyboard.js
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
/* global searxng */
|
||||
|
||||
searxng.ready(function () {
|
||||
|
||||
function isElementInDetail (el) {
|
||||
while (el !== undefined) {
|
||||
if (el.classList.contains('detail')) {
|
||||
return true;
|
||||
}
|
||||
if (el.classList.contains('result')) {
|
||||
// we found a result, no need to go to the root of the document:
|
||||
// el is not inside a <div class="detail"> element
|
||||
return false;
|
||||
}
|
||||
el = el.parentNode;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getResultElement (el) {
|
||||
while (el !== undefined) {
|
||||
if (el.classList.contains('result')) {
|
||||
return el;
|
||||
}
|
||||
el = el.parentNode;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function isImageResult (resultElement) {
|
||||
return resultElement && resultElement.classList.contains('result-images');
|
||||
}
|
||||
|
||||
searxng.on('.result', 'click', function (e) {
|
||||
if (!isElementInDetail(e.target)) {
|
||||
highlightResult(this)(true, true);
|
||||
let resultElement = getResultElement(e.target);
|
||||
if (isImageResult(resultElement)) {
|
||||
e.preventDefault();
|
||||
searxng.selectImage(resultElement);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
searxng.on('.result a', 'focus', function (e) {
|
||||
if (!isElementInDetail(e.target)) {
|
||||
let resultElement = getResultElement(e.target);
|
||||
if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
|
||||
highlightResult(resultElement)(true);
|
||||
}
|
||||
if (isImageResult(resultElement)) {
|
||||
searxng.selectImage(resultElement);
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
/* common base for layouts */
|
||||
var baseKeyBinding = {
|
||||
'Escape': {
|
||||
key: 'ESC',
|
||||
fun: removeFocus,
|
||||
des: 'remove focus from the focused input',
|
||||
cat: 'Control'
|
||||
},
|
||||
'c': {
|
||||
key: 'c',
|
||||
fun: copyURLToClipboard,
|
||||
des: 'copy url of the selected result to the clipboard',
|
||||
cat: 'Results'
|
||||
},
|
||||
'h': {
|
||||
key: 'h',
|
||||
fun: toggleHelp,
|
||||
des: 'toggle help window',
|
||||
cat: 'Other'
|
||||
},
|
||||
'i': {
|
||||
key: 'i',
|
||||
fun: searchInputFocus,
|
||||
des: 'focus on the search input',
|
||||
cat: 'Control'
|
||||
},
|
||||
'n': {
|
||||
key: 'n',
|
||||
fun: GoToNextPage(),
|
||||
des: 'go to next page',
|
||||
cat: 'Results'
|
||||
},
|
||||
'o': {
|
||||
key: 'o',
|
||||
fun: openResult(false),
|
||||
des: 'open search result',
|
||||
cat: 'Results'
|
||||
},
|
||||
'p': {
|
||||
key: 'p',
|
||||
fun: GoToPreviousPage(),
|
||||
des: 'go to previous page',
|
||||
cat: 'Results'
|
||||
},
|
||||
'r': {
|
||||
key: 'r',
|
||||
fun: reloadPage,
|
||||
des: 'reload page from the server',
|
||||
cat: 'Control'
|
||||
},
|
||||
't': {
|
||||
key: 't',
|
||||
fun: openResult(true),
|
||||
des: 'open the result in a new tab',
|
||||
cat: 'Results'
|
||||
},
|
||||
};
|
||||
var keyBindingLayouts = {
|
||||
|
||||
"default": Object.assign(
|
||||
{ /* SearXNG layout */
|
||||
'ArrowLeft': {
|
||||
key: '←',
|
||||
fun: highlightResult('up'),
|
||||
des: 'select previous search result',
|
||||
cat: 'Results'
|
||||
},
|
||||
'ArrowRight': {
|
||||
key: '→',
|
||||
fun: highlightResult('down'),
|
||||
des: 'select next search result',
|
||||
cat: 'Results'
|
||||
},
|
||||
}, baseKeyBinding),
|
||||
|
||||
'vim': Object.assign(
|
||||
{ /* Vim-like Key Layout. */
|
||||
'b': {
|
||||
key: 'b',
|
||||
fun: scrollPage(-window.innerHeight),
|
||||
des: 'scroll one page up',
|
||||
cat: 'Navigation'
|
||||
},
|
||||
'f': {
|
||||
key: 'f',
|
||||
fun: scrollPage(window.innerHeight),
|
||||
des: 'scroll one page down',
|
||||
cat: 'Navigation'
|
||||
},
|
||||
'u': {
|
||||
key: 'u',
|
||||
fun: scrollPage(-window.innerHeight / 2),
|
||||
des: 'scroll half a page up',
|
||||
cat: 'Navigation'
|
||||
},
|
||||
'd': {
|
||||
key: 'd',
|
||||
fun: scrollPage(window.innerHeight / 2),
|
||||
des: 'scroll half a page down',
|
||||
cat: 'Navigation'
|
||||
},
|
||||
'g': {
|
||||
key: 'g',
|
||||
fun: scrollPageTo(-document.body.scrollHeight, 'top'),
|
||||
des: 'scroll to the top of the page',
|
||||
cat: 'Navigation'
|
||||
},
|
||||
'v': {
|
||||
key: 'v',
|
||||
fun: scrollPageTo(document.body.scrollHeight, 'bottom'),
|
||||
des: 'scroll to the bottom of the page',
|
||||
cat: 'Navigation'
|
||||
},
|
||||
'k': {
|
||||
key: 'k',
|
||||
fun: highlightResult('up'),
|
||||
des: 'select previous search result',
|
||||
cat: 'Results'
|
||||
},
|
||||
'j': {
|
||||
key: 'j',
|
||||
fun: highlightResult('down'),
|
||||
des: 'select next search result',
|
||||
cat: 'Results'
|
||||
},
|
||||
'y': {
|
||||
key: 'y',
|
||||
fun: copyURLToClipboard,
|
||||
des: 'copy url of the selected result to the clipboard',
|
||||
cat: 'Results'
|
||||
},
|
||||
}, baseKeyBinding)
|
||||
}
|
||||
|
||||
var keyBindings = keyBindingLayouts[searxng.settings.hotkeys] || keyBindingLayouts.default;
|
||||
|
||||
searxng.on(document, "keydown", function (e) {
|
||||
// check for modifiers so we don't break browser's hotkeys
|
||||
if (
|
||||
Object.prototype.hasOwnProperty.call(keyBindings, e.key)
|
||||
&& !e.ctrlKey && !e.altKey
|
||||
&& !e.shiftKey && !e.metaKey
|
||||
) {
|
||||
var tagName = e.target.tagName.toLowerCase();
|
||||
if (e.key === 'Escape') {
|
||||
keyBindings[e.key].fun(e);
|
||||
} else {
|
||||
if (e.target === document.body || tagName === 'a' || tagName === 'button') {
|
||||
e.preventDefault();
|
||||
keyBindings[e.key].fun();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function highlightResult (which) {
|
||||
return function (noScroll, keepFocus) {
|
||||
var current = document.querySelector('.result[data-vim-selected]'),
|
||||
effectiveWhich = which;
|
||||
if (current === null) {
|
||||
// no selection : choose the first one
|
||||
current = document.querySelector('.result');
|
||||
if (current === null) {
|
||||
// no first one : there are no results
|
||||
return;
|
||||
}
|
||||
// replace up/down actions by selecting first one
|
||||
if (which === "down" || which === "up") {
|
||||
effectiveWhich = current;
|
||||
}
|
||||
}
|
||||
|
||||
var next, results = document.querySelectorAll('.result');
|
||||
results = Array.from(results); // convert NodeList to Array for further use
|
||||
|
||||
if (typeof effectiveWhich !== 'string') {
|
||||
next = effectiveWhich;
|
||||
} else {
|
||||
switch (effectiveWhich) {
|
||||
case 'visible':
|
||||
var top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
var bot = top + document.documentElement.clientHeight;
|
||||
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
next = results[i];
|
||||
var etop = next.offsetTop;
|
||||
var ebot = etop + next.clientHeight;
|
||||
|
||||
if ((ebot <= bot) && (etop > top)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'down':
|
||||
next = results[results.indexOf(current) + 1] || current;
|
||||
break;
|
||||
case 'up':
|
||||
next = results[results.indexOf(current) - 1] || current;
|
||||
break;
|
||||
case 'bottom':
|
||||
next = results[results.length - 1];
|
||||
break;
|
||||
case 'top':
|
||||
/* falls through */
|
||||
default:
|
||||
next = results[0];
|
||||
}
|
||||
}
|
||||
|
||||
if (next) {
|
||||
current.removeAttribute('data-vim-selected');
|
||||
next.setAttribute('data-vim-selected', 'true');
|
||||
if (!keepFocus) {
|
||||
var link = next.querySelector('h3 a') || next.querySelector('a');
|
||||
if (link !== null) {
|
||||
link.focus();
|
||||
}
|
||||
}
|
||||
if (!noScroll) {
|
||||
scrollPageToSelected();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function reloadPage () {
|
||||
document.location.reload(true);
|
||||
}
|
||||
|
||||
function removeFocus (e) {
|
||||
const tagName = e.target.tagName.toLowerCase();
|
||||
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
|
||||
document.activeElement.blur();
|
||||
} else {
|
||||
searxng.closeDetail();
|
||||
}
|
||||
}
|
||||
|
||||
function pageButtonClick (css_selector) {
|
||||
return function () {
|
||||
var button = document.querySelector(css_selector);
|
||||
if (button) {
|
||||
button.click();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function GoToNextPage () {
|
||||
return pageButtonClick('nav#pagination .next_page button[type="submit"]');
|
||||
}
|
||||
|
||||
function GoToPreviousPage () {
|
||||
return pageButtonClick('nav#pagination .previous_page button[type="submit"]');
|
||||
}
|
||||
|
||||
function scrollPageToSelected () {
|
||||
var sel = document.querySelector('.result[data-vim-selected]');
|
||||
if (sel === null) {
|
||||
return;
|
||||
}
|
||||
var wtop = document.documentElement.scrollTop || document.body.scrollTop,
|
||||
wheight = document.documentElement.clientHeight,
|
||||
etop = sel.offsetTop,
|
||||
ebot = etop + sel.clientHeight,
|
||||
offset = 120;
|
||||
// first element ?
|
||||
if ((sel.previousElementSibling === null) && (ebot < wheight)) {
|
||||
// set to the top of page if the first element
|
||||
// is fully included in the viewport
|
||||
window.scroll(window.scrollX, 0);
|
||||
return;
|
||||
}
|
||||
if (wtop > (etop - offset)) {
|
||||
window.scroll(window.scrollX, etop - offset);
|
||||
} else {
|
||||
var wbot = wtop + wheight;
|
||||
if (wbot < (ebot + offset)) {
|
||||
window.scroll(window.scrollX, ebot - wheight + offset);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function scrollPage (amount) {
|
||||
return function () {
|
||||
window.scrollBy(0, amount);
|
||||
highlightResult('visible')();
|
||||
};
|
||||
}
|
||||
|
||||
function scrollPageTo (position, nav) {
|
||||
return function () {
|
||||
window.scrollTo(0, position);
|
||||
highlightResult(nav)();
|
||||
};
|
||||
}
|
||||
|
||||
function searchInputFocus () {
|
||||
window.scrollTo(0, 0);
|
||||
var q = document.querySelector('#q');
|
||||
q.focus();
|
||||
if (q.setSelectionRange) {
|
||||
var len = q.value.length;
|
||||
q.setSelectionRange(len, len);
|
||||
}
|
||||
}
|
||||
|
||||
function openResult (newTab) {
|
||||
return function () {
|
||||
var link = document.querySelector('.result[data-vim-selected] h3 a');
|
||||
if (link === null) {
|
||||
link = document.querySelector('.result[data-vim-selected] > a');
|
||||
}
|
||||
if (link !== null) {
|
||||
var url = link.getAttribute('href');
|
||||
if (newTab) {
|
||||
window.open(url);
|
||||
} else {
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function initHelpContent (divElement) {
|
||||
var categories = {};
|
||||
|
||||
for (var k in keyBindings) {
|
||||
var key = keyBindings[k];
|
||||
categories[key.cat] = categories[key.cat] || [];
|
||||
categories[key.cat].push(key);
|
||||
}
|
||||
|
||||
var sorted = Object.keys(categories).sort(function (a, b) {
|
||||
return categories[b].length - categories[a].length;
|
||||
});
|
||||
|
||||
if (sorted.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<a href="#" class="close" aria-label="close" title="close">×</a>';
|
||||
html += '<h3>How to navigate SearXNG with hotkeys</h3>';
|
||||
html += '<table>';
|
||||
|
||||
for (var i = 0; i < sorted.length; i++) {
|
||||
var cat = categories[sorted[i]];
|
||||
|
||||
var lastCategory = i === (sorted.length - 1);
|
||||
var first = i % 2 === 0;
|
||||
|
||||
if (first) {
|
||||
html += '<tr>';
|
||||
}
|
||||
html += '<td>';
|
||||
|
||||
html += '<h4>' + cat[0].cat + '</h4>';
|
||||
html += '<ul class="list-unstyled">';
|
||||
|
||||
for (var cj in cat) {
|
||||
html += '<li><kbd>' + cat[cj].key + '</kbd> ' + cat[cj].des + '</li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
html += '</td>'; // col-sm-*
|
||||
|
||||
if (!first || lastCategory) {
|
||||
html += '</tr>'; // row
|
||||
}
|
||||
}
|
||||
|
||||
html += '</table>';
|
||||
|
||||
divElement.innerHTML = html;
|
||||
}
|
||||
|
||||
function toggleHelp () {
|
||||
var helpPanel = document.querySelector('#vim-hotkeys-help');
|
||||
if (helpPanel === undefined || helpPanel === null) {
|
||||
// first call
|
||||
helpPanel = document.createElement('div');
|
||||
helpPanel.id = 'vim-hotkeys-help';
|
||||
helpPanel.className = 'dialog-modal';
|
||||
initHelpContent(helpPanel);
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
body.appendChild(helpPanel);
|
||||
} else {
|
||||
// toggle hidden
|
||||
helpPanel.classList.toggle('invisible');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function copyURLToClipboard () {
|
||||
var currentUrlElement = document.querySelector('.result[data-vim-selected] h3 a');
|
||||
if (currentUrlElement === null) return;
|
||||
|
||||
const url = currentUrlElement.getAttribute('href');
|
||||
navigator.clipboard.writeText(url);
|
||||
}
|
||||
|
||||
searxng.scrollPageToSelected = scrollPageToSelected;
|
||||
searxng.selectNext = highlightResult('down');
|
||||
searxng.selectPrevious = highlightResult('up');
|
||||
});
|
||||
74
client/simple/src/js/main/mapresult.js
Normal file
74
client/simple/src/js/main/mapresult.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
/* global L */
|
||||
(function (w, d, searxng) {
|
||||
'use strict';
|
||||
|
||||
searxng.ready(function () {
|
||||
searxng.on('.searxng_init_map', 'click', function (event) {
|
||||
// no more request
|
||||
this.classList.remove("searxng_init_map");
|
||||
|
||||
//
|
||||
var leaflet_target = this.dataset.leafletTarget;
|
||||
var map_lon = parseFloat(this.dataset.mapLon);
|
||||
var map_lat = parseFloat(this.dataset.mapLat);
|
||||
var map_zoom = parseFloat(this.dataset.mapZoom);
|
||||
var map_boundingbox = JSON.parse(this.dataset.mapBoundingbox);
|
||||
var map_geojson = JSON.parse(this.dataset.mapGeojson);
|
||||
|
||||
searxng.loadStyle('css/leaflet.css');
|
||||
searxng.loadScript('js/leaflet.js', function () {
|
||||
var map_bounds = null;
|
||||
if (map_boundingbox) {
|
||||
var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]);
|
||||
var northEast = L.latLng(map_boundingbox[1], map_boundingbox[3]);
|
||||
map_bounds = L.latLngBounds(southWest, northEast);
|
||||
}
|
||||
|
||||
// init map
|
||||
var map = L.map(leaflet_target);
|
||||
// create the tile layer with correct attribution
|
||||
var osmMapnikUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
var osmMapnikAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
|
||||
var osmMapnik = new L.TileLayer(osmMapnikUrl, {minZoom: 1, maxZoom: 19, attribution: osmMapnikAttrib});
|
||||
var osmWikimediaUrl = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png';
|
||||
var osmWikimediaAttrib = 'Wikimedia maps | Maps data © <a href="https://openstreetmap.org">OpenStreetMap contributors</a>';
|
||||
var osmWikimedia = new L.TileLayer(osmWikimediaUrl, {minZoom: 1, maxZoom: 19, attribution: osmWikimediaAttrib});
|
||||
// init map view
|
||||
if (map_bounds) {
|
||||
// TODO hack: https://github.com/Leaflet/Leaflet/issues/2021
|
||||
// Still useful ?
|
||||
setTimeout(function () {
|
||||
map.fitBounds(map_bounds, {
|
||||
maxZoom: 17
|
||||
});
|
||||
}, 0);
|
||||
} else if (map_lon && map_lat) {
|
||||
if (map_zoom) {
|
||||
map.setView(new L.latLng(map_lat, map_lon), map_zoom);
|
||||
} else {
|
||||
map.setView(new L.latLng(map_lat, map_lon), 8);
|
||||
}
|
||||
}
|
||||
|
||||
map.addLayer(osmMapnik);
|
||||
|
||||
var baseLayers = {
|
||||
"OSM Mapnik": osmMapnik,
|
||||
"OSM Wikimedia": osmWikimedia,
|
||||
};
|
||||
|
||||
L.control.layers(baseLayers).addTo(map);
|
||||
|
||||
if (map_geojson) {
|
||||
L.geoJson(map_geojson).addTo(map);
|
||||
} /* else if(map_bounds) {
|
||||
L.rectangle(map_bounds, {color: "#ff7800", weight: 3, fill:false}).addTo(map);
|
||||
} */
|
||||
});
|
||||
|
||||
// this event occur only once per element
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
})(window, document, window.searxng);
|
||||
53
client/simple/src/js/main/preferences.js
Normal file
53
client/simple/src/js/main/preferences.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
(function (w, d, searxng) {
|
||||
'use strict';
|
||||
|
||||
if (searxng.endpoint !== 'preferences') {
|
||||
return;
|
||||
}
|
||||
|
||||
searxng.ready(function () {
|
||||
let engine_descriptions = null;
|
||||
function load_engine_descriptions () {
|
||||
if (engine_descriptions == null) {
|
||||
searxng.http("GET", "engine_descriptions.json").then(function (content) {
|
||||
engine_descriptions = JSON.parse(content);
|
||||
for (const [engine_name, description] of Object.entries(engine_descriptions)) {
|
||||
let elements = d.querySelectorAll('[data-engine-name="' + engine_name + '"] .engine-description');
|
||||
for (const element of elements) {
|
||||
let source = ' (<i>' + searxng.settings.translations.Source + ': ' + description[1] + '</i>)';
|
||||
element.innerHTML = description[0] + source;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const el of d.querySelectorAll('[data-engine-name]')) {
|
||||
searxng.on(el, 'mouseenter', load_engine_descriptions);
|
||||
}
|
||||
|
||||
const enableAllEngines = d.querySelectorAll(".enable-all-engines");
|
||||
const disableAllEngines = d.querySelectorAll(".disable-all-engines");
|
||||
const engineToggles = d.querySelectorAll('tbody input[type=checkbox][class~=checkbox-onoff]');
|
||||
const toggleEngines = (enable) => {
|
||||
for (const el of engineToggles) {
|
||||
// check if element visible, so that only engines of the current category are modified
|
||||
if (el.offsetParent !== null) el.checked = !enable;
|
||||
}
|
||||
};
|
||||
for (const el of enableAllEngines) {
|
||||
searxng.on(el, 'click', () => toggleEngines(true));
|
||||
}
|
||||
for (const el of disableAllEngines) {
|
||||
searxng.on(el, 'click', () => toggleEngines(false));
|
||||
}
|
||||
|
||||
const copyHashButton = d.querySelector("#copy-hash");
|
||||
searxng.on(copyHashButton, 'click', (e) => {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(copyHashButton.dataset.hash);
|
||||
copyHashButton.innerText = copyHashButton.dataset.copiedText;
|
||||
});
|
||||
});
|
||||
})(window, document, window.searxng);
|
||||
181
client/simple/src/js/main/results.js
Normal file
181
client/simple/src/js/main/results.js
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
(function (w, d, searxng) {
|
||||
'use strict';
|
||||
|
||||
if (searxng.endpoint !== 'results') {
|
||||
return;
|
||||
}
|
||||
|
||||
searxng.ready(function () {
|
||||
d.querySelectorAll('#urls img').forEach(
|
||||
img =>
|
||||
img.addEventListener(
|
||||
'error', () => {
|
||||
// console.log("ERROR can't load: " + img.src);
|
||||
img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
|
||||
},
|
||||
{once: true}
|
||||
));
|
||||
|
||||
if (d.querySelector('#search_url button#copy_url')) {
|
||||
d.querySelector('#search_url button#copy_url').style.display = "block";
|
||||
}
|
||||
|
||||
searxng.on('.btn-collapse', 'click', function () {
|
||||
var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
|
||||
var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
|
||||
var target = this.getAttribute('data-target');
|
||||
var targetElement = d.querySelector(target);
|
||||
var html = this.innerHTML;
|
||||
if (this.classList.contains('collapsed')) {
|
||||
html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed);
|
||||
} else {
|
||||
html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed);
|
||||
}
|
||||
this.innerHTML = html;
|
||||
this.classList.toggle('collapsed');
|
||||
targetElement.classList.toggle('invisible');
|
||||
});
|
||||
|
||||
searxng.on('.media-loader', 'click', function () {
|
||||
var target = this.getAttribute('data-target');
|
||||
var iframe_load = d.querySelector(target + ' > iframe');
|
||||
var srctest = iframe_load.getAttribute('src');
|
||||
if (srctest === null || srctest === undefined || srctest === false) {
|
||||
iframe_load.setAttribute('src', iframe_load.getAttribute('data-src'));
|
||||
}
|
||||
});
|
||||
|
||||
searxng.on('#copy_url', 'click', function () {
|
||||
var target = this.parentElement.querySelector('pre');
|
||||
navigator.clipboard.writeText(target.innerText);
|
||||
this.innerText = this.dataset.copiedText;
|
||||
});
|
||||
|
||||
// searxng.selectImage (gallery)
|
||||
// -----------------------------
|
||||
|
||||
// setTimeout() ID, needed to cancel *last* loadImage
|
||||
let imgTimeoutID;
|
||||
|
||||
// progress spinner, while an image is loading
|
||||
const imgLoaderSpinner = d.createElement('div');
|
||||
imgLoaderSpinner.classList.add('loader');
|
||||
|
||||
// singleton image object, which is used for all loading processes of a
|
||||
// detailed image
|
||||
const imgLoader = new Image();
|
||||
|
||||
const loadImage = (imgSrc, onSuccess) => {
|
||||
// if defered image load exists, stop defered task.
|
||||
if (imgTimeoutID) clearTimeout(imgTimeoutID);
|
||||
|
||||
// defer load of the detail image for 1 sec
|
||||
imgTimeoutID = setTimeout(() => {
|
||||
imgLoader.src = imgSrc;
|
||||
}, 1000);
|
||||
|
||||
// set handlers in the on-properties
|
||||
imgLoader.onload = () => {
|
||||
onSuccess();
|
||||
imgLoaderSpinner.remove();
|
||||
};
|
||||
imgLoader.onerror = () => {
|
||||
imgLoaderSpinner.remove();
|
||||
};
|
||||
};
|
||||
|
||||
searxng.selectImage = (resultElement) => {
|
||||
|
||||
// add a class that can be evaluated in the CSS and indicates that the
|
||||
// detail view is open
|
||||
d.getElementById('results').classList.add('image-detail-open');
|
||||
|
||||
// add a hash to the browser history so that pressing back doesn't return
|
||||
// to the previous page this allows us to dismiss the image details on
|
||||
// pressing the back button on mobile devices
|
||||
window.location.hash = '#image-viewer';
|
||||
|
||||
searxng.scrollPageToSelected();
|
||||
|
||||
// if there is none element given by the caller, stop here
|
||||
if (!resultElement) return;
|
||||
|
||||
// find <img> object in the element, if there is none, stop here.
|
||||
const img = resultElement.querySelector('.result-images-source img');
|
||||
if (!img) return;
|
||||
|
||||
// <img src="" data-src="http://example.org/image.jpg">
|
||||
const src = img.getAttribute('data-src');
|
||||
|
||||
// already loaded high-res image or no high-res image available
|
||||
if (!src) return;
|
||||
|
||||
// use the image thumbnail until the image is fully loaded
|
||||
const thumbnail = resultElement.querySelector('.image_thumbnail');
|
||||
img.src = thumbnail.src;
|
||||
|
||||
// show a progress spinner
|
||||
const detailElement = resultElement.querySelector('.detail');
|
||||
detailElement.appendChild(imgLoaderSpinner);
|
||||
|
||||
// load full size image in background
|
||||
loadImage(src, () => {
|
||||
// after the singelton loadImage has loaded the detail image into the
|
||||
// cache, it can be used in the origin <img> as src property.
|
||||
img.src = src;
|
||||
img.removeAttribute('data-src');
|
||||
});
|
||||
};
|
||||
|
||||
searxng.closeDetail = function () {
|
||||
d.getElementById('results').classList.remove('image-detail-open');
|
||||
// remove #image-viewer hash from url by navigating back
|
||||
if (window.location.hash == '#image-viewer') window.history.back();
|
||||
searxng.scrollPageToSelected();
|
||||
};
|
||||
searxng.on('.result-detail-close', 'click', e => {
|
||||
e.preventDefault();
|
||||
searxng.closeDetail();
|
||||
});
|
||||
searxng.on('.result-detail-previous', 'click', e => {
|
||||
e.preventDefault();
|
||||
searxng.selectPrevious(false);
|
||||
});
|
||||
searxng.on('.result-detail-next', 'click', e => {
|
||||
e.preventDefault();
|
||||
searxng.selectNext(false);
|
||||
});
|
||||
|
||||
// listen for the back button to be pressed and dismiss the image details when called
|
||||
window.addEventListener('hashchange', () => {
|
||||
if (window.location.hash != '#image-viewer') searxng.closeDetail();
|
||||
});
|
||||
|
||||
d.querySelectorAll('.swipe-horizontal').forEach(
|
||||
obj => {
|
||||
obj.addEventListener('swiped-left', function () {
|
||||
searxng.selectNext(false);
|
||||
});
|
||||
obj.addEventListener('swiped-right', function () {
|
||||
searxng.selectPrevious(false);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
w.addEventListener('scroll', function () {
|
||||
var e = d.getElementById('backToTop'),
|
||||
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
|
||||
results = d.getElementById('results');
|
||||
if (e !== null) {
|
||||
if (scrollTop >= 100) {
|
||||
results.classList.add('scrolling');
|
||||
} else {
|
||||
results.classList.remove('scrolling');
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
});
|
||||
|
||||
})(window, document, window.searxng);
|
||||
210
client/simple/src/js/main/search.js
Normal file
210
client/simple/src/js/main/search.js
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
||||
/* exported AutoComplete */
|
||||
|
||||
import AutoComplete from "../../../node_modules/autocomplete-js/dist/autocomplete.js";
|
||||
|
||||
(function (w, d, searxng) {
|
||||
'use strict';
|
||||
|
||||
var qinput_id = "q", qinput;
|
||||
|
||||
const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches;
|
||||
|
||||
function submitIfQuery () {
|
||||
if (qinput.value.length > 0) {
|
||||
var search = document.getElementById('search');
|
||||
setTimeout(search.submit.bind(search), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function createClearButton (qinput) {
|
||||
var cs = document.getElementById('clear_search');
|
||||
var updateClearButton = function () {
|
||||
if (qinput.value.length === 0) {
|
||||
cs.classList.add("empty");
|
||||
} else {
|
||||
cs.classList.remove("empty");
|
||||
}
|
||||
};
|
||||
|
||||
// update status, event listener
|
||||
updateClearButton();
|
||||
cs.addEventListener('click', function (ev) {
|
||||
qinput.value = '';
|
||||
qinput.focus();
|
||||
updateClearButton();
|
||||
ev.preventDefault();
|
||||
});
|
||||
qinput.addEventListener('input', updateClearButton, false);
|
||||
}
|
||||
|
||||
searxng.ready(function () {
|
||||
qinput = d.getElementById(qinput_id);
|
||||
|
||||
if (qinput !== null) {
|
||||
// clear button
|
||||
createClearButton(qinput);
|
||||
|
||||
// autocompleter
|
||||
if (searxng.settings.autocomplete) {
|
||||
searxng.autocomplete = AutoComplete.call(w, {
|
||||
Url: "./autocompleter",
|
||||
EmptyMessage: searxng.settings.translations.no_item_found,
|
||||
HttpMethod: searxng.settings.method,
|
||||
HttpHeaders: {
|
||||
"Content-type": "application/x-www-form-urlencoded",
|
||||
"X-Requested-With": "XMLHttpRequest"
|
||||
},
|
||||
MinChars: searxng.settings.autocomplete_min,
|
||||
Delay: 300,
|
||||
_Position: function () {},
|
||||
_Open: function () {
|
||||
var params = this;
|
||||
Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"), function (li) {
|
||||
if (li.getAttribute("class") != "locked") {
|
||||
li.onmousedown = function () {
|
||||
params._Select(li);
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
_Select: function (item) {
|
||||
AutoComplete.defaults._Select.call(this, item);
|
||||
var form = item.closest('form');
|
||||
if (form) {
|
||||
form.submit();
|
||||
}
|
||||
},
|
||||
_MinChars: function () {
|
||||
if (this.Input.value.indexOf('!') > -1) {
|
||||
return 0;
|
||||
} else {
|
||||
return AutoComplete.defaults._MinChars.call(this);
|
||||
}
|
||||
},
|
||||
KeyboardMappings: Object.assign({}, AutoComplete.defaults.KeyboardMappings, {
|
||||
"KeyUpAndDown_up": Object.assign({}, AutoComplete.defaults.KeyboardMappings.KeyUpAndDown_up, {
|
||||
Callback: function (event) {
|
||||
AutoComplete.defaults.KeyboardMappings.KeyUpAndDown_up.Callback.call(this, event);
|
||||
var liActive = this.DOMResults.querySelector("li.active");
|
||||
if (liActive) {
|
||||
AutoComplete.defaults._Select.call(this, liActive);
|
||||
}
|
||||
},
|
||||
}),
|
||||
"Tab": Object.assign({}, AutoComplete.defaults.KeyboardMappings.Enter, {
|
||||
Conditions: [{
|
||||
Is: 9,
|
||||
Not: false
|
||||
}],
|
||||
Callback: function (event) {
|
||||
if (this.DOMResults.getAttribute("class").indexOf("open") != -1) {
|
||||
var liActive = this.DOMResults.querySelector("li.active");
|
||||
if (liActive !== null) {
|
||||
AutoComplete.defaults._Select.call(this, liActive);
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}),
|
||||
}, "#" + qinput_id);
|
||||
}
|
||||
|
||||
/*
|
||||
Monkey patch autocomplete.js to fix a bug
|
||||
With the POST method, the values are not URL encoded: query like "1 + 1" are sent as "1 1" since space are URL encoded as plus.
|
||||
See HTML specifications:
|
||||
* HTML5: https://url.spec.whatwg.org/#concept-urlencoded-serializer
|
||||
* HTML4: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1
|
||||
|
||||
autocomplete.js does not URL encode the name and values:
|
||||
https://github.com/autocompletejs/autocomplete.js/blob/87069524f3b95e68f1b54d8976868e0eac1b2c83/src/autocomplete.ts#L665
|
||||
|
||||
The monkey patch overrides the compiled version of the ajax function.
|
||||
See https://github.com/autocompletejs/autocomplete.js/blob/87069524f3b95e68f1b54d8976868e0eac1b2c83/dist/autocomplete.js#L143-L158
|
||||
The patch changes only the line 156 from
|
||||
params.Request.send(params._QueryArg() + "=" + params._Pre());
|
||||
to
|
||||
params.Request.send(encodeURIComponent(params._QueryArg()) + "=" + encodeURIComponent(params._Pre()));
|
||||
|
||||
Related to:
|
||||
* https://github.com/autocompletejs/autocomplete.js/issues/78
|
||||
* https://github.com/searxng/searxng/issues/1695
|
||||
*/
|
||||
AutoComplete.prototype.ajax = function (params, request, timeout) {
|
||||
if (timeout === void 0) { timeout = true; }
|
||||
if (params.$AjaxTimer) {
|
||||
window.clearTimeout(params.$AjaxTimer);
|
||||
}
|
||||
if (timeout === true) {
|
||||
params.$AjaxTimer = window.setTimeout(AutoComplete.prototype.ajax.bind(null, params, request, false), params.Delay);
|
||||
} else {
|
||||
if (params.Request) {
|
||||
params.Request.abort();
|
||||
}
|
||||
params.Request = request;
|
||||
params.Request.send(encodeURIComponent(params._QueryArg()) + "=" + encodeURIComponent(params._Pre()));
|
||||
}
|
||||
};
|
||||
|
||||
if (!isMobile && document.querySelector('.index_endpoint')) {
|
||||
qinput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Additionally to searching when selecting a new category, we also
|
||||
// automatically start a new search request when the user changes a search
|
||||
// filter (safesearch, time range or language) (this requires JavaScript
|
||||
// though)
|
||||
if (
|
||||
qinput !== null
|
||||
&& searxng.settings.search_on_category_select
|
||||
// If .search_filters is undefined (invisible) we are on the homepage and
|
||||
// hence don't have to set any listeners
|
||||
&& d.querySelector(".search_filters") != null
|
||||
) {
|
||||
searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery);
|
||||
searxng.on(d.getElementById('time_range'), 'change', submitIfQuery);
|
||||
searxng.on(d.getElementById('language'), 'change', submitIfQuery);
|
||||
}
|
||||
|
||||
const categoryButtons = d.querySelectorAll("button.category_button");
|
||||
for (let button of categoryButtons) {
|
||||
searxng.on(button, 'click', (event) => {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
button.classList.toggle("selected");
|
||||
return;
|
||||
}
|
||||
|
||||
// manually deselect the old selection when a new category is selected
|
||||
const selectedCategories = d.querySelectorAll("button.category_button.selected");
|
||||
for (let categoryButton of selectedCategories) {
|
||||
categoryButton.classList.remove("selected");
|
||||
}
|
||||
button.classList.add("selected");
|
||||
})
|
||||
}
|
||||
|
||||
// override form submit action to update the actually selected categories
|
||||
const form = d.querySelector("#search");
|
||||
if (form != null) {
|
||||
searxng.on(form, 'submit', (event) => {
|
||||
event.preventDefault();
|
||||
const categoryValuesInput = d.querySelector("#selected-categories");
|
||||
if (categoryValuesInput) {
|
||||
let categoryValues = [];
|
||||
for (let categoryButton of categoryButtons) {
|
||||
if (categoryButton.classList.contains("selected")) {
|
||||
categoryValues.push(categoryButton.name.replace("category_", ""));
|
||||
}
|
||||
}
|
||||
categoryValuesInput.value = categoryValues.join(",");
|
||||
}
|
||||
form.submit();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})(window, document, window.searxng);
|
||||
19
client/simple/src/less/animations.less
Normal file
19
client/simple/src/less/animations.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.dialog-modal {
|
||||
animation-name: dialogmodal;
|
||||
animation-duration: 0.13s;
|
||||
|
||||
@keyframes dialogmodal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.checkbox-onoff[type="checkbox"]::before {
|
||||
transition: left 0.25s;
|
||||
}
|
||||
74
client/simple/src/less/autocomplete.less
Normal file
74
client/simple/src/less/autocomplete.less
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
|
||||
|
||||
.autocomplete {
|
||||
position: absolute;
|
||||
width: @search-width;
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
.ltr-text-align-left();
|
||||
|
||||
.rounded-corners;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-autocomplete-background);
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-autocomplete-background-hover);
|
||||
|
||||
a:active,
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.locked {
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
background-color: var(--color-autocomplete-background);
|
||||
color: var(--color-autocomplete-font);
|
||||
max-height: 32rem;
|
||||
overflow-y: auto;
|
||||
z-index: 5000;
|
||||
margin-top: 3.5rem;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
.autocomplete {
|
||||
width: 100%;
|
||||
|
||||
> ul > li {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
client/simple/src/less/code.less
Normal file
51
client/simple/src/less/code.less
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
@import "../../generated/pygments.less";
|
||||
|
||||
.codelines {
|
||||
margin: @results-margin 0 0 0;
|
||||
padding: @result-padding 0 0 0;
|
||||
}
|
||||
|
||||
.code-highlight-sxng() {
|
||||
.code-highlight {
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
padding: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.linenos {
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
|
||||
&::selection {
|
||||
background: transparent; /* WebKit/Blink Browsers */
|
||||
}
|
||||
|
||||
&::-moz-selection {
|
||||
background: transparent; /* Gecko Browsers */
|
||||
}
|
||||
margin-right: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span.linenos {
|
||||
color: var(--color-line-number);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-highlight-sxng();
|
||||
|
||||
/// Dark Theme (autoswitch based on device pref)
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root.theme-auto {
|
||||
.code-highlight-dark();
|
||||
.code-highlight-sxng();
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Theme by preferences
|
||||
:root.theme-dark {
|
||||
.code-highlight-dark();
|
||||
.code-highlight-sxng();
|
||||
}
|
||||
304
client/simple/src/less/definitions.less
Normal file
304
client/simple/src/less/definitions.less
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
/*
|
||||
* SearXNG, A privacy-respecting, hackable metasearch engine
|
||||
*
|
||||
* To change the colors of the site, simple edit this variables
|
||||
*/
|
||||
|
||||
/// Light Theme
|
||||
:root {
|
||||
/// Base Colors
|
||||
--color-base-font: #444;
|
||||
--color-base-font-rgb: 68, 68, 68;
|
||||
--color-base-background: #fff;
|
||||
--color-base-background-mobile: #f2f5f8;
|
||||
--color-url-font: #334999;
|
||||
--color-url-visited-font: #9822c3;
|
||||
/// Header Colors
|
||||
--color-header-background: #fdfbff;
|
||||
--color-header-border: #ddd;
|
||||
/// Footer Colors
|
||||
--color-footer-background: #fdfbff;
|
||||
--color-footer-border: #ddd;
|
||||
/// Sidebar Colors
|
||||
--color-sidebar-border: #ddd;
|
||||
--color-sidebar-font: #000;
|
||||
--color-sidebar-background: #fff;
|
||||
/// BackToTop Colors
|
||||
--color-backtotop-font: #444;
|
||||
--color-backtotop-border: #ddd;
|
||||
--color-backtotop-background: #fff;
|
||||
/// Button Colors
|
||||
--color-btn-background: #3050ff;
|
||||
--color-btn-font: #fff;
|
||||
--color-show-btn-background: #bbb;
|
||||
--color-show-btn-font: #000;
|
||||
/// Search Input Colors
|
||||
--color-search-border: #bbb;
|
||||
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-search-background: #fff;
|
||||
--color-search-font: #222;
|
||||
--color-search-background-hover: #3050ff;
|
||||
/// Modal Colors
|
||||
--color-error: #db3434;
|
||||
--color-error-background: lighten(#db3434, 40%);
|
||||
--color-warning: #dbba34;
|
||||
--color-warning-background: lighten(#dbba34, 40%);
|
||||
--color-success: #42db34;
|
||||
--color-success-background: lighten(#42db34, 40%);
|
||||
/// Categories Colors
|
||||
--color-categories-item-selected-font: #3050ff;
|
||||
--color-categories-item-border-selected: #3050ff;
|
||||
/// Autocomplete Colors
|
||||
--color-autocomplete-font: #000;
|
||||
--color-autocomplete-border: #bbb;
|
||||
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-autocomplete-background: #fff;
|
||||
--color-autocomplete-background-hover: #e3e3e3;
|
||||
/// Answer Colors
|
||||
--color-answer-font: #444; // same as --color-base-font
|
||||
--color-answer-background: #fff;
|
||||
/// Results Colors
|
||||
--color-result-background: #fff;
|
||||
--color-result-border: #ddd;
|
||||
--color-result-url-font: #000;
|
||||
--color-result-vim-selected: #f7f7f7;
|
||||
--color-result-vim-arrow: #000bbb;
|
||||
--color-result-description-highlight-font: #000;
|
||||
--color-result-link-font: #000bbb;
|
||||
--color-result-link-font-highlight: #000bbb;
|
||||
--color-result-link-visited-font: #9822c3;
|
||||
--color-result-publishdate-font: #777;
|
||||
--color-result-engines-font: #545454;
|
||||
--color-result-search-url-border: #ddd;
|
||||
--color-result-search-url-font: #000;
|
||||
// Images Colors
|
||||
--color-result-image-span-font: #444;
|
||||
--color-result-image-span-font-selected: #fff;
|
||||
--color-result-image-background: #fff;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #ebebeb;
|
||||
--color-settings-engine-description-font: #545454;
|
||||
--color-settings-table-group-background: #0001;
|
||||
/// Detail modal
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #242424;
|
||||
--color-result-detail-hr: #555;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgb(255 255 255 / 20%);
|
||||
--color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
|
||||
/// Toolkit Colors
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #545454;
|
||||
--color-toolkit-kbd-font: #fff;
|
||||
--color-toolkit-kbd-background: #000;
|
||||
--color-toolkit-dialog-border: #ddd;
|
||||
--color-toolkit-dialog-background: #fff;
|
||||
--color-toolkit-tabs-label-border: #fff;
|
||||
--color-toolkit-tabs-section-border: #ddd;
|
||||
--color-toolkit-select-background: #e1e1e1;
|
||||
--color-toolkit-select-border: #ddd;
|
||||
--color-toolkit-select-background-hover: #bbb;
|
||||
--color-toolkit-input-text-font: #222;
|
||||
--color-toolkit-checkbox-onoff-off-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-on-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-on-mark-background: #3050ff;
|
||||
--color-toolkit-checkbox-onoff-on-mark-color: #fff;
|
||||
--color-toolkit-checkbox-onoff-off-mark-background: #aaa;
|
||||
--color-toolkit-checkbox-onoff-off-mark-color: #fff;
|
||||
--color-toolkit-checkbox-label-background: #ddd;
|
||||
--color-toolkit-checkbox-label-border: #ddd;
|
||||
--color-toolkit-checkbox-input-border: #3050ff;
|
||||
--color-toolkit-engine-tooltip-border: #ddd;
|
||||
--color-toolkit-engine-tooltip-background: #fff;
|
||||
--color-toolkit-loader-border: rgb(0 0 0 / 20%);
|
||||
--color-toolkit-loader-borderleft: rgb(255 255 255 / 0%);
|
||||
--color-doc-code: #003;
|
||||
--color-doc-code-background: #ddeaff;
|
||||
/// Other misc colors
|
||||
--color-bar-chart-primary: #5bc0de;
|
||||
--color-bar-chart-secondary: #deb15b;
|
||||
--color-image-resolution-background: rgb(0 0 0 / 50%);
|
||||
--color-image-resolution-font: #fff;
|
||||
--color-loading-indicator: rgb(255 255 255 / 20%);
|
||||
--color-loading-indicator-gap: #fff;
|
||||
--color-line-number: #64708d;
|
||||
// Favicons Colors
|
||||
--color-favicon-background-color: #ddd;
|
||||
--color-favicon-border-color: #ccc;
|
||||
}
|
||||
|
||||
.dark-themes() {
|
||||
/// Base Colors
|
||||
--color-base-font: #bbb;
|
||||
--color-base-font-rgb: 187, 187, 187;
|
||||
--color-base-background: #222428;
|
||||
--color-base-background-mobile: #222428;
|
||||
--color-url-font: #8af;
|
||||
--color-url-visited-font: #c09cd9;
|
||||
/// Header Colors
|
||||
--color-header-background: #1e1e22;
|
||||
--color-header-border: #333;
|
||||
/// Footer Colors
|
||||
--color-footer-background: #1e1e22;
|
||||
--color-footer-border: #333;
|
||||
/// Sidebar Colors
|
||||
--color-sidebar-border: #555;
|
||||
--color-sidebar-font: #fff;
|
||||
--color-sidebar-background: #292c34;
|
||||
/// BackToTop Colors
|
||||
--color-backtotop-font: #bbb;
|
||||
--color-backtotop-border: #333;
|
||||
--color-backtotop-background: #2b2e36;
|
||||
/// Button Colors
|
||||
--color-btn-background: #58f;
|
||||
--color-btn-font: #222;
|
||||
--color-show-btn-background: #555;
|
||||
--color-show-btn-font: #fff;
|
||||
/// Search Input Colors
|
||||
--color-search-border: #555;
|
||||
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-search-background: #2b2e36;
|
||||
--color-search-font: #fff;
|
||||
--color-search-background-hover: #58f;
|
||||
/// Modal Colors
|
||||
--color-error: #f55b5b;
|
||||
--color-error-background: darken(#db3434, 40%);
|
||||
--color-warning: #f1d561;
|
||||
--color-warning-background: darken(#dbba34, 40%);
|
||||
--color-success: #79f56e;
|
||||
--color-success-background: darken(#42db34, 40%);
|
||||
/// Categories Colors
|
||||
--color-categories-item-selected-font: #58f;
|
||||
--color-categories-item-border-selected: #58f;
|
||||
/// Autocomplete Colors
|
||||
--color-autocomplete-font: #fff;
|
||||
--color-autocomplete-border: #555;
|
||||
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-autocomplete-background: #2b2e36;
|
||||
--color-autocomplete-background-hover: #1e1e22;
|
||||
/// Answer Colors
|
||||
--color-answer-font: #bbb; // same as --color-base-font
|
||||
--color-answer-background: #26292f;
|
||||
/// Results Colors
|
||||
--color-result-background: #26292f;
|
||||
--color-result-border: #333;
|
||||
--color-result-url-font: #fff;
|
||||
--color-result-vim-selected: #1f1f23cc;
|
||||
--color-result-vim-arrow: #8af;
|
||||
--color-result-description-highlight-font: #fff;
|
||||
--color-result-link-font: #8af;
|
||||
--color-result-link-font-highlight: #8af;
|
||||
--color-result-link-visited-font: #c09cd9;
|
||||
--color-result-publishdate-font: #888;
|
||||
--color-result-engines-font: #a4a4a4;
|
||||
--color-result-search-url-border: #555;
|
||||
--color-result-search-url-font: #fff;
|
||||
/// Detail modal : same as the light version
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #1a1a1c;
|
||||
--color-result-detail-hr: #555;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgb(255 255 255 / 20%);
|
||||
--color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
|
||||
// Images Colors
|
||||
--color-result-image-span-font: #bbb;
|
||||
--color-result-image-span-font-selected: #222;
|
||||
--color-result-image-background: #222;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #2c2c32;
|
||||
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
||||
--color-settings-table-group-background: #1b1b21;
|
||||
/// Toolkit Colors
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #555;
|
||||
--color-toolkit-kbd-font: #000;
|
||||
--color-toolkit-kbd-background: #fff;
|
||||
--color-toolkit-dialog-border: #555;
|
||||
--color-toolkit-dialog-background: #1e1e22;
|
||||
--color-toolkit-tabs-label-border: #222;
|
||||
--color-toolkit-tabs-section-border: #555;
|
||||
--color-toolkit-select-background: #313338;
|
||||
--color-toolkit-select-border: #555;
|
||||
--color-toolkit-select-background-hover: #373b49;
|
||||
--color-toolkit-input-text-font: #fff;
|
||||
--color-toolkit-checkbox-onoff-off-background: #313338;
|
||||
--color-toolkit-checkbox-onoff-on-background: #313338;
|
||||
--color-toolkit-checkbox-onoff-on-mark-background: #58f;
|
||||
--color-toolkit-checkbox-onoff-on-mark-color: #222;
|
||||
--color-toolkit-checkbox-onoff-off-mark-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-off-mark-color: #222;
|
||||
--color-toolkit-checkbox-label-background: #222;
|
||||
--color-toolkit-checkbox-label-border: #333;
|
||||
--color-toolkit-checkbox-input-border: #58f;
|
||||
--color-toolkit-engine-tooltip-border: #333;
|
||||
--color-toolkit-engine-tooltip-background: #222;
|
||||
--color-toolkit-loader-border: rgb(255 255 255 / 20%);
|
||||
--color-toolkit-loader-borderleft: rgb(0 0 0 / 0%);
|
||||
--color-doc-code: #ddd;
|
||||
--color-doc-code-background: #4d5a6f;
|
||||
// Favicons Colors
|
||||
--color-favicon-background-color: #ddd;
|
||||
--color-favicon-border-color: #ccc;
|
||||
}
|
||||
|
||||
.black-themes() {
|
||||
--color-base-background: #000;
|
||||
--color-base-background-mobile: #000;
|
||||
--color-header-background: #000;
|
||||
--color-footer-background: #000;
|
||||
--color-sidebar-background: #000;
|
||||
}
|
||||
|
||||
/// Dark Theme (autoswitch based on device pref)
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root.theme-auto {
|
||||
.dark-themes();
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Theme by preferences
|
||||
:root.theme-dark {
|
||||
.dark-themes();
|
||||
}
|
||||
|
||||
:root.theme-black {
|
||||
.dark-themes();
|
||||
.black-themes();
|
||||
}
|
||||
|
||||
/// General Size
|
||||
@results-width: 45rem;
|
||||
@results-sidebar-width: 25rem;
|
||||
@results-offset: 10rem;
|
||||
@results-tablet-offset: 0.5rem;
|
||||
@results-gap: 5rem;
|
||||
@results-margin: 0.125rem;
|
||||
@result-padding: 1rem;
|
||||
@results-image-row-height: 12rem;
|
||||
@results-image-row-height-phone: 10rem;
|
||||
@search-width: 44rem;
|
||||
// heigh of #search, see detail.less
|
||||
@search-height: 13rem;
|
||||
|
||||
/// Device Size
|
||||
/// @desktop > @tablet
|
||||
@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874
|
||||
@phone: 50em;
|
||||
@small-phone: 35em;
|
||||
@ultra-small-phone: 20rem;
|
||||
|
||||
/// From style.less
|
||||
@stacked-bar-chart: rgb(0, 0, 0);
|
||||
|
||||
/// Load fonts from this directory.
|
||||
@icon-font-path: "../../../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@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";
|
||||
253
client/simple/src/less/detail.less
Normal file
253
client/simple/src/less/detail.less
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
#main_results #results.image-detail-open.only_template_images {
|
||||
width: min(98%, 59.25rem) !important;
|
||||
}
|
||||
|
||||
#main_results #results.only_template_images.image-detail-open #backToTop {
|
||||
.ltr-left(56.75rem) !important;
|
||||
.ltr-right(inherit);
|
||||
}
|
||||
|
||||
article.result-images .detail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
.ltr-left(60rem);
|
||||
.ltr-right(0);
|
||||
top: @search-height;
|
||||
transition: top 0.064s ease-in 0s;
|
||||
bottom: 0;
|
||||
background: var(--color-result-detail-background);
|
||||
border: 1px solid var(--color-result-detail-background);
|
||||
z-index: 1000;
|
||||
padding: 4rem 3rem 3rem 3rem;
|
||||
|
||||
a.result-images-source {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
object-fit: contain;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: 100%;
|
||||
min-height: inherit;
|
||||
max-height: calc(100vh - 25rem - 7rem);
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.result-images-labels {
|
||||
color: var(--color-result-detail-font);
|
||||
height: 19rem;
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--color-result-detail-hr);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-result-detail-label-font);
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin: 0.8rem 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
p,
|
||||
a {
|
||||
.ltr-text-align-left();
|
||||
}
|
||||
|
||||
p.result-content {
|
||||
height: 2rem;
|
||||
line-height: unset;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.result-url {
|
||||
white-space: nowrap;
|
||||
overflow: hidden hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.result-content:hover,
|
||||
p.result-url:hover {
|
||||
position: relative;
|
||||
overflow: inherit !important;
|
||||
background: var(--color-result-detail-background);
|
||||
text-overflow: inherit !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: var(--color-result-detail-link);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-close {
|
||||
top: 1rem;
|
||||
.ltr-left(1rem);
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
a.result-detail-previous {
|
||||
top: 1rem;
|
||||
.ltr-right(6rem);
|
||||
// center the icon by moving it slightly on the left
|
||||
padding-top: 0.4rem;
|
||||
.ltr-padding-right(0.5rem);
|
||||
padding-bottom: 0.4rem;
|
||||
.ltr-padding-left(0.3rem);
|
||||
}
|
||||
|
||||
a.result-detail-next {
|
||||
top: 1rem;
|
||||
.ltr-right(2rem);
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
a.result-detail-close,
|
||||
a.result-detail-next,
|
||||
a.result-detail-previous {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
filter: opacity(40%);
|
||||
z-index: 1200;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-next,
|
||||
a.result-detail-previous {
|
||||
span::before {
|
||||
// vertical center small icons
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-close,
|
||||
a.result-detail-close:visited,
|
||||
a.result-detail-close:hover,
|
||||
a.result-detail-close:active,
|
||||
a.result-detail-previous,
|
||||
a.result-detail-previous:visited,
|
||||
a.result-detail-previous:hover,
|
||||
a.result-detail-previous:active,
|
||||
a.result-detail-next,
|
||||
a.result-detail-next:visited,
|
||||
a.result-detail-next:hover,
|
||||
a.result-detail-next:active {
|
||||
color: var(--color-result-detail-font);
|
||||
background: var(--color-result-detail-background);
|
||||
border: 1px solid var(--color-result-detail-font);
|
||||
}
|
||||
|
||||
a.result-detail-close:focus,
|
||||
a.result-detail-close:hover,
|
||||
a.result-detail-previous:focus,
|
||||
a.result-detail-previous:hover,
|
||||
a.result-detail-next:focus,
|
||||
a.result-detail-next:hover {
|
||||
filter: opacity(80%);
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
.ltr-right(50%);
|
||||
border-top: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-right: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
|
||||
}
|
||||
}
|
||||
|
||||
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
|
||||
a.result-images-source img {
|
||||
max-height: calc(100vh - 25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
.ltr-left(0);
|
||||
|
||||
a.result-images-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 24rem);
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-next {
|
||||
.ltr-right(1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
.ltr-left(0);
|
||||
padding: 1rem;
|
||||
|
||||
a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 20rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-images-labels p span {
|
||||
width: inherit;
|
||||
.ltr-margin-right(1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
33
client/simple/src/less/embedded.less
Normal file
33
client/simple/src/less/embedded.less
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
iframe[src^="https://w.soundcloud.com"] {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
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"] {
|
||||
// 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 (<img alt='Mixcloud Logo'> then cause an
|
||||
// scrollbar in the inner of the iframe we can't avoid. Another quirk comes
|
||||
// when pressing the play button, sometimes the shown player has an height of
|
||||
// 200px, sometimes 250px.
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
iframe[src^="https://bandcamp.com/EmbeddedPlayer"] {
|
||||
// show playlist
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] {
|
||||
// hide playlist
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
iframe[src^="https://genius.com/songs"] {
|
||||
height: 65px;
|
||||
}
|
||||
51
client/simple/src/less/index.less
Normal file
51
client/simple/src/less/index.less
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
#main_index {
|
||||
margin-top: 26vh;
|
||||
}
|
||||
|
||||
.index {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
background: url('../img/searxng.png') no-repeat;
|
||||
min-height: 4rem;
|
||||
margin: 4rem auto;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#search,
|
||||
#search_header {
|
||||
margin: 0 auto;
|
||||
background: inherit;
|
||||
border: inherit;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.category label {
|
||||
padding: 6px 10px;
|
||||
border-bottom: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
div.title {
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#main_index {
|
||||
margin-top: 6em;
|
||||
}
|
||||
}
|
||||
10
client/simple/src/less/info.less
Normal file
10
client/simple/src/less/info.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.info-page {
|
||||
code {
|
||||
font-family: monospace;
|
||||
.rounded-corners-tiny;
|
||||
background-color: var(--color-doc-code-background);
|
||||
color: var(--color-doc-code);
|
||||
padding: 0.2rem;
|
||||
border: 0 none;
|
||||
}
|
||||
}
|
||||
40
client/simple/src/less/mixins.less
Normal file
40
client/simple/src/less/mixins.less
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.rounded-corners (@radius: 10px) {
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
.rounded-right-corners (@radius: 0 10px 10px 0) {
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
.rounded-corners-tiny (@radius: 5px) {
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// disable user selection
|
||||
.disable-user-select () {
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.show-content-button() {
|
||||
padding: 5px 10px;
|
||||
.rounded-corners-tiny;
|
||||
background: var(--color-show-btn-background);
|
||||
color: var(--color-show-btn-font);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-btn-background);
|
||||
color: var(--color-btn-font);
|
||||
}
|
||||
}
|
||||
37
client/simple/src/less/new_issue.less
Normal file
37
client/simple/src/less/new_issue.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
.stats_endpoint {
|
||||
.github-issue-button {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#step1:checked ~ .step1,
|
||||
#step2:checked ~ .step2 {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
233
client/simple/src/less/preferences.less
Normal file
233
client/simple/src/less/preferences.less
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 1rem 0.5rem;
|
||||
.ltr-text-align-left();
|
||||
}
|
||||
|
||||
tr.pref-group th {
|
||||
font-weight: normal;
|
||||
.ltr-text-align-left();
|
||||
background: var(--color-settings-table-group-background);
|
||||
}
|
||||
}
|
||||
|
||||
#main_preferences {
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin: 0;
|
||||
padding: 5px 0 0 0;
|
||||
display: block;
|
||||
.ltr-float-left();
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 13.25rem;
|
||||
color: var(--color-toolkit-input-text-font);
|
||||
border: none;
|
||||
background: none repeat scroll 0 0 var(--color-toolkit-select-background);
|
||||
padding: 0.2rem 0.4rem;
|
||||
height: 2rem;
|
||||
.rounded-corners-tiny;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-toolkit-select-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
div.pref-group {
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
padding: 1rem 0.5rem;
|
||||
.ltr-text-align-left();
|
||||
background: var(--color-settings-table-group-background);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.ltr-float-left();
|
||||
width: 15em;
|
||||
|
||||
select,
|
||||
input[type="text"] {
|
||||
font-size: inherit !important;
|
||||
margin-top: 0;
|
||||
.ltr-margin-right(1rem);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(0);
|
||||
}
|
||||
|
||||
select {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 1px 1px var(--color-btn-background);
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
padding: 5px 0 0 0;
|
||||
.ltr-float-right();
|
||||
width: 50%;
|
||||
color: var(--color-settings-engine-description-font);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.bang {
|
||||
.ltr-text-align-left();
|
||||
.rounded-corners-tiny;
|
||||
background-color: var(--color-doc-code-background);
|
||||
color: var(--color-doc-code);
|
||||
padding: 0.2rem;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.category {
|
||||
.ltr-margin-right(0.5rem);
|
||||
|
||||
label {
|
||||
border: 2px solid transparent;
|
||||
padding: 0.2rem 0.4rem;
|
||||
.rounded-corners-tiny;
|
||||
}
|
||||
}
|
||||
|
||||
.category input[type="checkbox"]:checked + label {
|
||||
border: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
|
||||
table.table_engines {
|
||||
th.name {
|
||||
/* stylelint-disable */
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
.engine-tooltip {
|
||||
margin-top: 1.8rem;
|
||||
.ltr-left(calc((100% - 85em) / 2 + 10em));
|
||||
max-width: 40rem;
|
||||
|
||||
.engine-description {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.bang {
|
||||
margin: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-col,
|
||||
.name,
|
||||
.shortcut {
|
||||
.ltr-text-align-left();
|
||||
}
|
||||
}
|
||||
|
||||
table.cookies {
|
||||
width: 100%;
|
||||
direction: ltr;
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
padding: 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
word-break: keep-all;
|
||||
width: 14rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(even) > th,
|
||||
& > tbody > tr:nth-child(even) > td {
|
||||
background-color: var(--color-settings-tr-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.preferences_back {
|
||||
background: none repeat scroll 0 0 var(--color-btn-background);
|
||||
color: var(--color-btn-font);
|
||||
border: 0 none;
|
||||
.rounded-corners;
|
||||
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 2px 4px;
|
||||
padding: 0.7em;
|
||||
|
||||
a {
|
||||
color: var(--color-settings-return-font);
|
||||
}
|
||||
|
||||
a::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-all-engines-container {
|
||||
width: max-content;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
div.selectable_url {
|
||||
pre {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#copy-hash-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
div.selectable_url {
|
||||
pre {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pref-hash-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
.preferences_back {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.engine-tooltip {
|
||||
.ltr-left(10em) !important;
|
||||
}
|
||||
}
|
||||
7
client/simple/src/less/result_templates.less
Normal file
7
client/simple/src/less/result_templates.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
.osm-map-box {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
45
client/simple/src/less/rss.less
Normal file
45
client/simple/src/less/rss.less
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
@import (inline) "../../node_modules/normalize.css/normalize.css";
|
||||
@import "definitions.less";
|
||||
|
||||
.text-size-adjust (@property: 100%) {
|
||||
-webkit-text-size-adjust: @property;
|
||||
-ms-text-size-adjust: @property;
|
||||
-moz-text-size-adjust: @property;
|
||||
text-size-adjust: @property;
|
||||
}
|
||||
|
||||
// Reset padding and margin
|
||||
html,
|
||||
body,
|
||||
main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
font-size: 0.9em;
|
||||
.text-size-adjust;
|
||||
|
||||
color: var(--color-base-font);
|
||||
background-color: var(--color-base-background);
|
||||
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-url-font);
|
||||
|
||||
&:visited {
|
||||
color: var(--color-url-visited-font);
|
||||
|
||||
.highlight {
|
||||
color: var(--color-url-visited-font);
|
||||
}
|
||||
}
|
||||
}
|
||||
393
client/simple/src/less/search.less
Normal file
393
client/simple/src/less/search.less
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
/*
|
||||
* SearXNG, A privacy-respecting, hackable metasearch engine
|
||||
*/
|
||||
|
||||
#search {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#search_header {
|
||||
padding-top: 1.5em;
|
||||
.ltr-padding-right(2em);
|
||||
.ltr-padding-left(@results-offset - 3rem);
|
||||
margin: 0;
|
||||
background: var(--color-header-background);
|
||||
border-bottom: 1px solid var(--color-header-border);
|
||||
display: grid;
|
||||
gap: 1rem 1.2rem;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
grid-template-areas:
|
||||
"logo search"
|
||||
"spacer categories";
|
||||
}
|
||||
|
||||
.category_checkbox,
|
||||
.category_button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.ltr-margin-right(1rem);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.category_checkbox {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
svg {
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0;
|
||||
display: inline-flex;
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 2px solid transparent;
|
||||
.disable-user-select;
|
||||
|
||||
div.category_name {
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label {
|
||||
color: var(--color-categories-item-selected-font);
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
button.category_button {
|
||||
background-color: inherit;
|
||||
color: var(--color-base-font);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9em;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
svg {
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&:active {
|
||||
color: var(--color-categories-item-selected-font);
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
// only used when JavaScript is disabled
|
||||
.no-js #categories_container:has(button.category_button:focus-within) button.category_button {
|
||||
&.selected {
|
||||
color: var(--color-base-font);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
color: var(--color-categories-item-selected-font);
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
#search_logo {
|
||||
padding: 0.5rem 10px 0 10px;
|
||||
grid-area: logo;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
flex: 1;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0.5rem 0 auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search_categories {
|
||||
grid-area: categories;
|
||||
|
||||
.help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .help {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: var(--color-base-background);
|
||||
padding: 1rem 0.6rem 0.6rem 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
left: -0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#search_view {
|
||||
padding: 0.5rem 0.3rem 0 0.5rem;
|
||||
grid-area: search;
|
||||
|
||||
body.results_endpoint & {
|
||||
padding: 0.5rem 2.8rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search_box {
|
||||
border-radius: 0.8rem;
|
||||
width: @search-width;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--color-search-shadow);
|
||||
}
|
||||
|
||||
#clear_search {
|
||||
display: block;
|
||||
border-collapse: separate;
|
||||
box-sizing: border-box;
|
||||
width: 1.8rem;
|
||||
margin: 0;
|
||||
padding: 0.8rem 0.2rem;
|
||||
background: none repeat scroll 0 0 var(--color-search-background);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--color-search-font);
|
||||
font-size: 1.1rem;
|
||||
z-index: 1000;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-search-background-hover);
|
||||
}
|
||||
|
||||
&.empty * {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.no-js #clear_search.hide_if_nojs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#q,
|
||||
#send_search {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.8rem;
|
||||
background: none repeat scroll 0 0 var(--color-search-background);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--color-search-font);
|
||||
font-size: 1.1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#q {
|
||||
width: 100%;
|
||||
.ltr-padding-left(1rem);
|
||||
.ltr-padding-right(0) !important;
|
||||
.ltr-rounded-left-corners(0.8rem);
|
||||
}
|
||||
|
||||
#q::-ms-clear,
|
||||
#q::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#send_search {
|
||||
.ltr-rounded-right-corners(0.8rem);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-search-background-hover);
|
||||
color: var(--color-search-background);
|
||||
}
|
||||
}
|
||||
|
||||
.no-js #clear_search,
|
||||
.no-js #send_search {
|
||||
width: auto !important;
|
||||
.ltr-border-left(1px solid var(--color-search-border));
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
margin-top: 0.6rem;
|
||||
.ltr-margin-right(0);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(@results-offset + 0.6rem);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
|
||||
select {
|
||||
background-color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-base-font);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
#search_header {
|
||||
padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
|
||||
column-gap: @results-tablet-offset;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
margin-top: 0.6rem;
|
||||
.ltr-margin-right(0);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(@results-tablet-offset + 3rem);
|
||||
}
|
||||
|
||||
#categories {
|
||||
font-size: 90%;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) and (hover: none) {
|
||||
#main_index,
|
||||
#main_results {
|
||||
#categories_container {
|
||||
width: max-content;
|
||||
|
||||
.category_checkbox {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#categories {
|
||||
width: 100%;
|
||||
.ltr-text-align-left();
|
||||
overflow: scroll hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
#search_header {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0.1rem 0 0 0;
|
||||
gap: 0 0;
|
||||
grid-template-areas:
|
||||
"logo search"
|
||||
"categories categories";
|
||||
}
|
||||
|
||||
.search_logo {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#q {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
margin: 0 10px;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.category_checkbox {
|
||||
label {
|
||||
padding: 1rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.category_button {
|
||||
padding: 1rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#search_view:focus-within {
|
||||
display: block;
|
||||
background-color: var(--color-search-background);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2000;
|
||||
|
||||
.search_box {
|
||||
border-bottom: 1px solid var(--color-search-border);
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
#send_search {
|
||||
.ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
|
||||
}
|
||||
|
||||
* {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main_results #q:placeholder-shown ~ #send_search {
|
||||
.ltr-margin-right(2.6rem);
|
||||
transition: margin 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @ultra-small-phone) {
|
||||
#search_header {
|
||||
grid-template-areas:
|
||||
"search search"
|
||||
"categories categories";
|
||||
}
|
||||
|
||||
#search_logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#categories {
|
||||
.disable-user-select;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#categories_container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.favicon img {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 10%;
|
||||
background-color: var(--color-favicon-background-color);
|
||||
border: 1px solid var(--color-favicon-border-color);
|
||||
display: flex;
|
||||
}
|
||||
106
client/simple/src/less/stats.less
Normal file
106
client/simple/src/less/stats.less
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
.engine-score {
|
||||
width: 7rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.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 0 3rem 0;
|
||||
border: 1px solid var(--color-result-border);
|
||||
.ltr-text-align-left();
|
||||
|
||||
tr th,
|
||||
tr td {
|
||||
padding: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-chart-value {
|
||||
width: 3em;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.bar-chart-graph {
|
||||
width: calc(100% - 5rem);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bar-chart-bar {
|
||||
border: 3px solid var(--color-bar-chart-primary);
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.bar-chart-serie1 {
|
||||
border: 3px solid var(--color-bar-chart-primary);
|
||||
margin: 1px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bar-chart-serie2 {
|
||||
border: 3px solid var(--color-bar-chart-secondary);
|
||||
margin: 1px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bar0 {
|
||||
width: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.generate-bar(100);
|
||||
|
||||
.generate-bar(@n, @i: 1) when (@i =< @n) {
|
||||
.bar@{i} {
|
||||
width: (@i * 100% / @n);
|
||||
}
|
||||
.generate-bar(@n, (@i + 1));
|
||||
}
|
||||
118
client/simple/src/less/style-center.less
Normal file
118
client/simple/src/less/style-center.less
Normal file
|
|
@ -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-alignment-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-alignment-yes #main_results {
|
||||
--center-page-width: 48rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >= 62rem) {
|
||||
.center-alignment-yes #main_results {
|
||||
--center-page-width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @tablet) {
|
||||
.center-alignment-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-alignment-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-alignment-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, .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);
|
||||
}
|
||||
}
|
||||
}
|
||||
85
client/simple/src/less/style-ltr.less
Normal file
85
client/simple/src/less/style-ltr.less
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
.ltr-left(@offset) {
|
||||
left: @offset;
|
||||
}
|
||||
|
||||
.ltr-right(@offset) {
|
||||
right: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-right(@offset) {
|
||||
margin-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-left(@offset) {
|
||||
margin-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right(@offset) {
|
||||
border-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-left(@offset) {
|
||||
border-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-right(@offset) {
|
||||
padding-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-left(@offset) {
|
||||
padding-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-float-left() {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ltr-float-right() {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ltr-text-align-right() {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ltr-rounded-left-corners(@radius) {
|
||||
border-radius: @radius 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-left-corners(@radius) {
|
||||
border-radius: @radius 0 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-left-corners(@radius) {
|
||||
border-radius: 0 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-rounded-right-corners(@radius) {
|
||||
border-radius: 0 @radius @radius 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-right-corners(@radius) {
|
||||
border-radius: 0 @radius 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-right-corners(@radius) {
|
||||
border-radius: 0 0 @radius 0;
|
||||
}
|
||||
|
||||
.ltr-text-align-left() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ltr-border-left-width(@offset) {
|
||||
border-left-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right-width(@offset) {
|
||||
border-right-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-transform() {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@import "style.less";
|
||||
159
client/simple/src/less/style-rtl.less
Normal file
159
client/simple/src/less/style-rtl.less
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
.ltr-left(@offset) {
|
||||
right: @offset;
|
||||
}
|
||||
|
||||
.ltr-right(@offset) {
|
||||
left: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-right(@offset) {
|
||||
margin-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-left(@offset) {
|
||||
margin-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right(@offset) {
|
||||
border-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-left(@offset) {
|
||||
border-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-right(@offset) {
|
||||
padding-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-left(@offset) {
|
||||
padding-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-float-left() {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ltr-float-right() {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ltr-text-align-right() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ltr-rounded-left-corners(@radius) {
|
||||
border-radius: 0 @radius @radius 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-left-corners(@radius) {
|
||||
border-radius: 0 @radius 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-left-corners(@radius) {
|
||||
border-radius: 0 0 @radius 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-right-corners(@radius) {
|
||||
border-radius: @radius 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-right-corners(@radius) {
|
||||
border-radius: @radius 0 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-right-corners(@radius) {
|
||||
border-radius: 0 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-text-align-left() {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ltr-border-left-width(@offset) {
|
||||
border-right-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right-width(@offset) {
|
||||
border-left-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-transform() {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
@import "style.less";
|
||||
|
||||
#q,
|
||||
#sidebar .infobox dt bdi {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// URL are displayed LTR but align on the right
|
||||
#urls {
|
||||
direction: initial;
|
||||
text-align: right;
|
||||
|
||||
.result .url_header {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.result .url_wrapper {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
// Image flexbox
|
||||
#main_results div#results.only_template_images #urls {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// Image detail
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
|
||||
direction: rtl;
|
||||
|
||||
&.result-url {
|
||||
// Display URL using the LTR direction
|
||||
direction: ltr;
|
||||
|
||||
span {
|
||||
// And put the label on the right
|
||||
direction: rtl;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select HTML element
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
// vim hotkey helps is not translated
|
||||
#vim-hotkeys-help table {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Logo on the right
|
||||
#main_preferences h1,
|
||||
#main_stats h1 {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
|
||||
// patch of stats.less
|
||||
.bar-chart-serie1,
|
||||
.bar-chart-serie2 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.engine-stats .engine-name,
|
||||
.engine-stats .engine-score,
|
||||
.engine-stats .result-count,
|
||||
.engine-stats .response-time,
|
||||
.engine-stats .engine-reliability {
|
||||
text-align: right;
|
||||
}
|
||||
1162
client/simple/src/less/style.less
Normal file
1162
client/simple/src/less/style.less
Normal file
File diff suppressed because it is too large
Load diff
646
client/simple/src/less/toolkit.less
Normal file
646
client/simple/src/less/toolkit.less
Normal file
|
|
@ -0,0 +1,646 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
html.js .show_if_nojs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: var(--color-error-background);
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: var(--color-warning-background);
|
||||
}
|
||||
|
||||
.success {
|
||||
background: var(--color-success-background);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
color: var(--color-toolkit-badge-font);
|
||||
background-color: var(--color-toolkit-badge-background);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
min-width: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
margin: 1px;
|
||||
font-size: 90%;
|
||||
color: var(--color-toolkit-kbd-font);
|
||||
background: var(--color-toolkit-kbd-background);
|
||||
}
|
||||
|
||||
// table
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
&.striped {
|
||||
tr {
|
||||
border-bottom: 1px solid var(--color-settings-tr-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:hover {
|
||||
background: var(--color-settings-tr-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// pre
|
||||
.pre() {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
word-break: break-all;
|
||||
margin: 0.1em;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
div.selectable_url {
|
||||
display: block;
|
||||
border: 1px solid var(--color-result-search-url-border);
|
||||
padding: 4px;
|
||||
color: var(--color-result-search-url-font);
|
||||
margin: 0.1em;
|
||||
overflow: hidden;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
.rounded-corners-tiny;
|
||||
|
||||
pre {
|
||||
.pre();
|
||||
}
|
||||
}
|
||||
|
||||
// dialog
|
||||
.dialog() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
margin: 0 0 1em 0;
|
||||
border: 1px solid var(--color-toolkit-dialog-border);
|
||||
.ltr-text-align-left();
|
||||
.rounded-corners;
|
||||
|
||||
.close {
|
||||
.ltr-float-right();
|
||||
position: relative;
|
||||
top: -3px;
|
||||
color: inherit;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
p {
|
||||
margin: 1px 0 0 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
tr {
|
||||
vertical-align: text-top;
|
||||
|
||||
&:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 1em 0 0;
|
||||
padding-top: 0;
|
||||
.ltr-padding-right(1rem);
|
||||
padding-bottom: 0;
|
||||
.ltr-padding-left(0);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-error {
|
||||
.dialog();
|
||||
|
||||
color: var(--color-error);
|
||||
background: var(--color-error-background);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.dialog-error-block {
|
||||
.dialog();
|
||||
|
||||
display: block;
|
||||
color: var(--color-error);
|
||||
background: var(--color-error-background);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.dialog-warning {
|
||||
.dialog();
|
||||
|
||||
color: var(--color-warning);
|
||||
background: var(--color-warning-background);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.dialog-modal {
|
||||
.dialog();
|
||||
|
||||
display: block;
|
||||
background: var(--color-toolkit-dialog-background);
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0 auto;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5000;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// btn-collapse
|
||||
.btn-collapse {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//
|
||||
.scrollx {
|
||||
overflow: auto hidden;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* -- tabs -- */
|
||||
.tabs .tabs > label {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
border-bottom: 1px solid var(--color-toolkit-tabs-section-border);
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
& > * {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
& > input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > label,
|
||||
& > li > a {
|
||||
order: 1;
|
||||
padding: 0.7em;
|
||||
margin: 0 0.7em;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
border: solid var(--color-toolkit-tabs-label-border);
|
||||
border-width: 0 0 2px 0;
|
||||
color: unset;
|
||||
|
||||
.disable-user-select();
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
}
|
||||
}
|
||||
|
||||
& > label:hover,
|
||||
& > li > a:hover {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
|
||||
& > section {
|
||||
min-width: 100%;
|
||||
padding: 0.7rem 0;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--color-toolkit-tabs-section-border);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// default selection
|
||||
& > label:last-of-type {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
& > section:last-of-type {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
html body .tabs > input:checked {
|
||||
~ section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
~ label {
|
||||
position: inherited;
|
||||
background: inherit;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: normal;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
+ label {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
}
|
||||
|
||||
+ label + section {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- select -- */
|
||||
select {
|
||||
height: 2.4rem;
|
||||
margin-top: 0;
|
||||
.ltr-margin-right(1rem);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(0);
|
||||
padding: 0.2rem !important;
|
||||
color: var(--color-search-font);
|
||||
font-size: 0.9rem;
|
||||
z-index: 100;
|
||||
|
||||
&: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;
|
||||
-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-position-x: calc(100% + 2rem);
|
||||
background-size: 2rem;
|
||||
background-origin: content-box;
|
||||
background-color: var(--color-toolkit-select-background);
|
||||
outline: medium none;
|
||||
text-overflow: ellipsis;
|
||||
.rounded-corners-tiny;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-toolkit-select-background-hover);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--color-base-background);
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
html.theme-dark select {
|
||||
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
|
||||
}
|
||||
}
|
||||
|
||||
/* -- checkbox-onoff -- */
|
||||
input.checkbox-onoff[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 2.5em;
|
||||
height: 0.7em;
|
||||
box-shadow: none !important;
|
||||
margin: 0 16px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
/* focus & hover */
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 3.5em;
|
||||
height: 1.65em;
|
||||
border: 1px solid var(--color-btn-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--color-btn-background) 0 0 3px;
|
||||
z-index: 1200;
|
||||
top: -0.55em;
|
||||
left: -0.6em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.75em;
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* check mark
|
||||
reversed-checkbox displays unchecked checkedboxes as checked, and vice versa.
|
||||
see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313
|
||||
*/
|
||||
input.checkbox-onoff[type="checkbox"],
|
||||
input.checkbox-onoff.reversed-checkbox[type="checkbox"]:checked {
|
||||
background: var(--color-toolkit-checkbox-onoff-off-background);
|
||||
|
||||
&::before {
|
||||
left: -0.5em;
|
||||
content: "\2715";
|
||||
color: var(--color-toolkit-checkbox-onoff-off-mark-color);
|
||||
background: var(--color-toolkit-checkbox-onoff-off-mark-background);
|
||||
}
|
||||
}
|
||||
|
||||
input.checkbox-onoff[type="checkbox"]:checked,
|
||||
input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
|
||||
background: var(--color-toolkit-checkbox-onoff-on-background);
|
||||
|
||||
&::before {
|
||||
left: calc(100% - 1.5em);
|
||||
content: "\2713";
|
||||
color: var(--color-toolkit-checkbox-onoff-on-mark-color);
|
||||
background: var(--color-toolkit-checkbox-onoff-on-mark-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* -- checkbox -- */
|
||||
@supports (transform: rotate(-45deg)) {
|
||||
input[type=checkbox]:not(.checkbox-onoff) {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 2px solid var(--color-toolkit-checkbox-input-border);
|
||||
.rounded-corners(0.3em);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
border: 3px solid var(--color-toolkit-checkbox-label-border);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
border-color: var(--color-toolkit-checkbox-input-border);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// disabled : can't be focused, show only the check mark
|
||||
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 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
.tabs > label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- loader -- */
|
||||
.loader,
|
||||
.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 var(--color-toolkit-loader-border);
|
||||
border-right: 0.5em solid var(--color-toolkit-loader-border);
|
||||
border-bottom: 0.5em solid var(--color-toolkit-loader-border);
|
||||
border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
|
||||
-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);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* -- engine-tooltip -- */
|
||||
.engine-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0 0 2rem;
|
||||
border: 1px solid var(--color-toolkit-engine-tooltip-border);
|
||||
background: var(--color-toolkit-engine-tooltip-background);
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
z-index: 5000;
|
||||
text-align: left;
|
||||
.rounded-corners;
|
||||
}
|
||||
|
||||
th:hover .engine-tooltip,
|
||||
td:hover .engine-tooltip,
|
||||
.engine-tooltip:hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* -- stacked bar chart -- */
|
||||
.stacked-bar-chart {
|
||||
margin: 0;
|
||||
padding: 0 0.125rem 0 4rem;
|
||||
width: 100%;
|
||||
width: -moz-available;
|
||||
width: -webkit-fill-available;
|
||||
width: fill;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-value {
|
||||
width: 3rem;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 0 0.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-base {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: unset;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-median {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: var(--color-base-font);
|
||||
border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
|
||||
padding: 0.3rem 0;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-rate80 {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: transparent;
|
||||
border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
|
||||
padding: 0.3rem 0;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-rate95 {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: transparent;
|
||||
border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-rate100 {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: transparent;
|
||||
border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
|
||||
padding: 0.4rem 0;
|
||||
width: 1px;
|
||||
}
|
||||
29
client/simple/src/less/toolkit_loader.less
Normal file
29
client/simple/src/less/toolkit_loader.less
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.loader,
|
||||
.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 var(--color-loading-indicator);
|
||||
border-right: 1.1em solid var(--color-loading-indicator);
|
||||
border-bottom: 1.1em solid var(--color-loading-indicator);
|
||||
border-left: 1.1em solid var(--color-loading-indicator-gap);
|
||||
transform: translateZ(0);
|
||||
animation: load8 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
6
client/simple/src/svg/information-circle-outline.svg
Normal file
6
client/simple/src/svg/information-circle-outline.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 679 B |
4
client/simple/src/svg/select-dark.svg
Normal file
4
client/simple/src/svg/select-dark.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
||||
<g><polygon fill="#ddd" points="128,192 256,320 384,192"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 196 B |
4
client/simple/src/svg/select-light.svg
Normal file
4
client/simple/src/svg/select-light.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
||||
<g><polygon points="128,192 256,320 384,192"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 184 B |
Loading…
Add table
Add a link
Reference in a new issue