Update simple theme

searx/static/themes/simple/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {
+        "indent": ["error", 2],
+        "keyword-spacing": ["error", { "before": true, "after": true }],
+        "no-trailing-spaces": 2,
+        "space-before-function-paren": ["error", "always"],
+        "space-infix-ops": "error",
+        "comma-spacing": ["error", { "before": false, "after": true }],
+        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+        "curly": ["error", "multi-line"],
+        "block-spacing": ["error", "always"],
+        "dot-location": ["error", "property"],
+        "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
+        "spaced-comment": ["error", "always", {
+            "line": { "markers": ["*package", "!", "/", ",", "="] },
+            "block": { "balanced": true, "markers": ["*package", "!", ",", ":", "::", "flow-include"], "exceptions": ["*"] }
+        }]
+    }
+}

searx/static/themes/simple/.gitignore

@@ -1 +1,2 @@
 /node_modules
+package-lock.json

searx/static/themes/simple/.stylelintrc.json

@@ -1,14 +1,7 @@
 {
-  "extends": "stylelint-config-standard-less",
+  "extends": "stylelint-config-standard",
   "rules": {
     "declaration-empty-line-before": null,
-    "no-invalid-position-at-import-rule": null,
+    "no-invalid-position-at-import-rule": null
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "selector-attribute-quotes": null,
-    "shorthand-property-no-redundant-values": null,
-    "at-rule-no-vendor-prefix": null,
-    "selector-id-pattern": null,
-    "selector-class-pattern": null
   }
 }

searx/static/themes/simple/eslint.config.mjs

@@ -1,68 +0,0 @@
-import globals from "globals";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
-
-export default [...compat.extends("eslint:recommended"), {
-    languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-        },
-
-        ecmaVersion: 12,
-        sourceType: "commonjs",
-    },
-
-    rules: {
-        indent: ["error", 2],
-
-        "keyword-spacing": ["error", {
-            before: true,
-            after: true,
-        }],
-
-        "no-trailing-spaces": 2,
-        "space-before-function-paren": ["error", "always"],
-        "space-infix-ops": "error",
-
-        "comma-spacing": ["error", {
-            before: false,
-            after: true,
-        }],
-
-        "brace-style": ["error", "1tbs", {
-            allowSingleLine: true,
-        }],
-
-        curly: ["error", "multi-line"],
-        "block-spacing": ["error", "always"],
-        "dot-location": ["error", "property"],
-
-        "key-spacing": ["error", {
-            beforeColon: false,
-            afterColon: true,
-        }],
-
-        "spaced-comment": ["error", "always", {
-            line: {
-                markers: ["*package", "!", "/", ",", "="],
-            },
-
-            block: {
-                balanced: true,
-                markers: ["*package", "!", ",", ":", "::", "flow-include"],
-                exceptions: ["*"],
-            },
-        }],
-    },
-}];

searx/static/themes/simple/gruntfile.js

@@ -21,10 +21,9 @@ module.exports = function (grunt) {
     pkg: grunt.file.readJSON('package.json'),
     watch: {
       scripts: {
-        files: ['gruntfile.js', 'eslint.config.mjs', '.stylelintrc.json', 'src/**'],
+        files: ['gruntfile.js', 'src/**'],
         tasks: [
           'eslint',
-          'stylelint',
           'copy',
           'uglify',
           'less',
@@ -36,7 +35,7 @@ module.exports = function (grunt) {
     },
     eslint: {
       options: {
-        overrideConfigFile: 'eslint.config.mjs',
+        overrideConfigFile: '.eslintrc.json',
         failOnError: true,
         fix: grunt.option('fix')
       },
@@ -50,7 +49,6 @@ module.exports = function (grunt) {
     stylelint: {
       options: {
         formatter: 'unix',
-        fix: grunt.option('fix')
       },
       src: [
         'src/less/**/*.less',
@@ -109,8 +107,7 @@ module.exports = function (grunt) {
           'js/searxng.head.min.js': ['src/js/head/*.js'],
           'js/searxng.min.js': [
             'src/js/main/*.js',
-            './node_modules/autocomplete-js/dist/autocomplete.js',
+            './node_modules/autocomplete-js/dist/autocomplete.js'
-            './node_modules/swiped-events/src/swiped-events.js'
           ]
         }
       }
@@ -119,6 +116,9 @@ module.exports = function (grunt) {
       production: {
         options: {
           paths: ["less"],
+          plugins: [
+            new (require('less-plugin-clean-css'))()
+          ],
           sourceMap: true,
           sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map'; },
           outputSourceFiles: true,
@@ -145,34 +145,34 @@ module.exports = function (grunt) {
         ],
       },
     },
-    image: {
+    // image: {
-      svg4web: {
+    //   svg4web: {
-        options: {
+    //     options: {
-          svgo: ['--config', 'svg4web.svgo.js']
+    //       svgo: ['--config', 'svg4web.svgo.js']
-        },
+    //     },
-        files: {
+    //     files: {
-          '<%= _templates %>/simple/searxng-wordmark.min.svg': '<%= _brand %>/searxng-wordmark.svg',
+    //       '<%= _templates %>/simple/searxng-wordmark.min.svg': '<%= _brand %>/searxng-wordmark.svg',
-          'img/searxng.svg': '<%= _brand %>/searxng.svg',
+    //       'img/searxng.svg': '<%= _brand %>/searxng.svg',
-          'img/img_load_error.svg': '<%= _brand %>/img_load_error.svg'
+    //       'img/img_load_error.svg': '<%= _brand %>/img_load_error.svg'
-        }
+    //     }
-      },
+    //   },
-      favicon: {
+    //   favicon: {
-        options: {
+    //     options: {
-          svgo: ['--config', 'svg4favicon.svgo.js']
+    //       svgo: ['--config', 'svg4favicon.svgo.js']
-        },
+    //     },
-        files: {
+    //     files: {
-          'img/favicon.svg': '<%= _brand %>/searxng-wordmark.svg'
+    //       'img/favicon.svg': '<%= _brand %>/searxng-wordmark.svg'
-        }
+    //     }
-      },
+    //   },
-    },
+    // },
-    svg2png: {
+    // svg2png: {
-      favicon: {
+    //   favicon: {
-        files: {
+    //     files: {
-          'img/favicon.png': '<%= _brand %>/searxng-wordmark.svg',
+    //       'img/favicon.png': '<%= _brand %>/searxng-wordmark.svg',
-          'img/searxng.png': '<%= _brand %>/searxng.svg',
+    //       'img/searxng.png': '<%= _brand %>/searxng.svg',
-        }
+    //     }
-      }
+    //   }
-    },
+    // },
     svg2jinja: {
       all: {
         src: {
@@ -298,7 +298,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-stylelint');
   grunt.loadNpmTasks('grunt-eslint');
 
-  grunt.registerTask('test', ['eslint', 'stylelint']);
+  grunt.registerTask('test', ['eslint']);
 
   grunt.registerTask('default', [
     'eslint',

searx/static/themes/simple/img/empty_favicon.svg

@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g fill="currentColor"><path fill-rule="evenodd" d="M1.5 10a8.5 8.5 0 1 0 17 0a8.5 8.5 0 0 0-17 0m16 0a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6.5 10c0 4.396 1.442 8 3.5 8s3.5-3.604 3.5-8s-1.442-8-3.5-8s-3.5 3.604-3.5 8m6 0c0 3.889-1.245 7-2.5 7s-2.5-3.111-2.5-7S8.745 3 10 3s2.5 3.111 2.5 7" clip-rule="evenodd"/><path d="m3.735 5.312l.67-.742q.16.144.343.281c1.318.988 3.398 1.59 5.665 1.59c1.933 0 3.737-.437 5.055-1.19a5.6 5.6 0 0 0 .857-.597l.65.76q-.448.383-1.01.704c-1.477.845-3.452 1.323-5.552 1.323c-2.47 0-4.762-.663-6.265-1.79a6 6 0 0 1-.413-.34m0 9.389l.67.74q.16-.145.343-.28c1.318-.988 3.398-1.59 5.665-1.59c1.933 0 3.737.436 5.055 1.19q.482.277.857.596l.65-.76a6.6 6.6 0 0 0-1.01-.704c-1.477-.844-3.452-1.322-5.552-1.322c-2.47 0-4.762.663-6.265 1.789q-.22.165-.413.34M2 10.5v-1h16v1z"/></g></svg>
-  <path fill="#58f" d="M11 20.85a.92.92 0 0 1-1.1.93A10 10 0 0 1 2.06 13c-.06-.55.4-1 .95-1h3a1 1 0 0 1 1 1 3 3 0 0 0 3 3 1 1 0 0 1 1 1v3.85Zm6-1.92c0 .77.83 1.23 1.42.74a10 10 0 0 0 2.03-2.32c.39-.61-.09-1.35-.81-1.35H18a1 1 0 0 0-1 1v1.93ZM12 2a10 10 0 0 1 6.65 2.53c.61.55.17 1.47-.65 1.47h-.15A2.85 2.85 0 0 0 15 8.85c0 .33-.18.62-.47.77l-.08.04a1 1 0 0 1-.9 0l-.08-.04a.85.85 0 0 1-.47-.77A2.85 2.85 0 0 0 10.15 6H10a1 1 0 0 1-1-1V3.2c0-.44.28-.84.7-.94C10.45 2.1 11.22 2 12 2Z"/>
-  <path fill="#58f" d="M3.42 10c-.63 0-1.1-.58-.9-1.18.6-1.8 1.7-3.36 3.12-4.53C6.2 3.82 7 4.26 7 5a3 3 0 0 0 3 3h.15c.47 0 .85.38.85.85 0 1.09.61 2.07 1.58 2.56l.08.04a3 3 0 0 0 2.68 0l.08-.04A2.85 2.85 0 0 0 17 8.85c0-.47.38-.85.85-.85h2.66c.4 0 .77.23.9.6a9.98 9.98 0 0 1 .52 4.6.94.94 0 0 1-.95.8H18a3 3 0 0 0-3 3v3.8c0 .44-.28.84-.7.94l-.2.04a.92.92 0 0 1-1.1-.93V17a3 3 0 0 0-3-3 1 1 0 0 1-1-1 3 3 0 0 0-3-3H3.42Z"/>
-</svg>

searx/static/themes/simple/img/favicon.svg

@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="92mm" height="92mm" viewBox="0 0 92 92"><g transform="translate(-40.921 -17.417)"><circle cx="75.921" cy="53.903" r="30" style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><path d="M67.515 37.915a18 18 0 0 1 21.051 3.313 18 18 0 0 1 3.138 21.078" style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><rect width="18.846" height="39.963" x="3.706" y="122.09" ry="0" style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="rotate(-46.235)"/></g></svg>
+<svg width="169" height="169" viewBox="0 0 169 169" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="169" height="169" rx="84.5" fill="#DDC66E"/>
+<path d="M27.1675 107.792C27.2298 107.968 27.2845 108.117 27.3301 108.239C27.3549 108.319 27.3847 108.413 27.4192 108.522C27.5274 108.862 27.6828 109.342 27.8799 109.929C28.2724 111.097 28.8384 112.711 29.5332 114.493C30.8088 117.764 32.9044 122.638 35.5647 125.988C39.4059 130.825 48.6596 141.152 62.45 142.451C72.2339 143.372 80.6869 141.793 94.9936 139.121C97.7677 138.603 100.762 138.043 104.028 137.453C115.311 135.415 122.559 132.272 127.59 128.824C130.1 127.104 131.898 125.416 133.251 124.011C133.739 123.505 134.207 122.993 134.555 122.613C134.653 122.506 134.742 122.409 134.818 122.326C135.014 122.113 135.153 121.966 135.264 121.853C135.368 121.747 135.414 121.706 135.417 121.703L135.417 121.703C137.255 120.089 138.763 117.75 139.856 115.738C141.063 113.514 142.219 110.831 143.093 107.945C144.712 102.596 145.934 94.6164 142.26 87.6965L135.194 91.4482L142.26 87.6965C141.058 85.4325 140.806 82.9203 140.489 77.3839C140.188 72.1331 139.791 65.2506 136.994 56.8658C131.083 39.1444 119.212 32.763 110.816 28.4849C100.463 23.2097 87.6848 22.6606 70.4863 27.3382C60.7228 29.9937 52.7592 35.8062 47.4471 40.5853C44.7414 43.0196 42.5981 45.2999 41.1182 46.9871C40.3759 47.8334 39.7942 48.5378 39.3857 49.047C39.2525 49.2132 39.1374 49.3589 39.041 49.4822C38.9648 49.5626 38.8796 49.6532 38.7861 49.7539C38.414 50.1547 37.908 50.717 37.3077 51.4283C36.1106 52.8466 34.518 54.8811 32.8561 57.4301C29.5746 62.4633 25.7912 69.8576 24.5427 78.7132C23.3643 87.0726 24.062 94.4201 25.0449 99.674C25.5383 102.311 26.1098 104.455 26.5729 105.977C26.8049 106.74 27.0106 107.35 27.1675 107.792Z" fill="white" stroke="white" stroke-width="16"/>
+<path d="M31.1144 106.938C31.1418 107.026 31.181 107.152 31.2313 107.31C31.3336 107.632 31.4822 108.091 31.6716 108.655C32.0495 109.78 32.5938 111.332 33.2599 113.04C34.535 116.31 36.4495 120.67 38.6971 123.5C42.4528 128.23 50.7966 137.335 62.8252 138.468C72.0074 139.333 79.814 137.878 94.1333 135.209C96.9271 134.689 99.9689 134.122 103.317 133.517C114.185 131.554 120.869 128.581 125.329 125.524C127.556 123.998 129.148 122.505 130.37 121.236C130.818 120.771 131.236 120.315 131.581 119.937C131.687 119.822 131.786 119.713 131.877 119.615C132.305 119.151 132.57 118.88 132.778 118.697C134.078 117.555 135.316 115.716 136.34 113.83C137.422 111.837 138.471 109.406 139.264 106.786C140.786 101.759 141.648 95.0734 138.727 89.5724C137.042 86.3993 136.802 82.9637 136.496 77.6128C136.197 72.4047 135.817 65.9777 133.2 58.1315C127.807 41.9633 117.163 36.2081 109 32.0489C99.8589 27.3911 88.2004 26.6657 71.5361 31.198C62.6218 33.6225 55.2052 38.9862 50.1224 43.559C47.5563 45.8677 45.5233 48.031 44.1254 49.6247C43.4252 50.423 42.8812 51.082 42.5061 51.5497C42.3208 51.7808 42.1764 51.9654 42.0746 52.0975C41.9821 52.1935 41.862 52.3199 41.7173 52.4757C41.3845 52.8341 40.9208 53.3492 40.3645 54.0083C39.2537 55.3243 37.7637 57.2268 36.2068 59.6147C33.1144 64.358 29.6423 71.1942 28.5036 79.2716C27.3998 87.1008 28.0526 93.9993 28.9767 98.9385C29.4397 101.413 29.9739 103.413 30.3998 104.813C30.613 105.514 30.7995 106.066 30.9373 106.455C31.0062 106.649 31.063 106.802 31.1049 106.913C31.1082 106.922 31.1113 106.93 31.1144 106.938Z" fill="white" stroke="#363016" stroke-width="8"/>
+<ellipse cx="8.59874" cy="20.7814" rx="8.59874" ry="20.7814" transform="matrix(0.975065 -0.221919 0.16002 0.987114 34.8319 75.0587)" fill="#3A3000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M79.2563 55.1454C70.889 56.4624 63.4929 68.8016 63.2351 81.8749C62.8188 102.954 86.7941 109.095 95.0138 90.015C98.4153 82.12 97.6753 68.6329 93.4928 62.2734C90.3345 57.4721 84.1488 54.3752 79.2563 55.1454ZM86.2016 63.5277C92.0024 69.1489 93.7735 81.5879 89.7703 88.5844C85.0649 96.8076 72.6879 97.3917 68.3234 89.5958L67.3846 87.919L68.4668 89.0386C72.2706 92.9739 77.5447 92.7211 82.4689 88.3676C88.4604 83.0704 89.62 73.2076 85.2736 64.5115C83.7162 61.3962 83.8529 61.251 86.2016 63.5277ZM79.6012 66.273C81.0355 67.9332 81.0867 71.4002 79.7195 74.3066C76.8233 80.4651 70.3974 78.7661 71.6269 72.1667C72.6488 66.6808 77.1066 63.3857 79.6012 66.273ZM121.66 89.5724C116.343 90.3067 113.319 94.6173 113.938 100.579C114.3 104.067 116.041 108.232 117.942 110.16C119.198 111.432 119.185 111.505 117.54 112.606C110.095 117.588 100.952 115.794 94.6196 108.108C93.0524 106.206 92.8903 106.245 93.614 108.352C97.4398 119.501 112.121 123.417 120.424 115.504C123.123 112.931 123.862 112.258 126.146 110.292C134.919 102.738 131.766 88.1769 121.66 89.5724Z" fill="#3A3000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.547 82.0027C129.835 80.3863 129.545 72.574 126.922 63.4184C124.298 54.2627 118.893 47.7545 114.605 49.3709C110.317 50.9873 108.621 58.9637 111.089 68.5456C113.712 77.7013 120.851 84.1549 125.547 82.0027ZM123.231 78.2983C127.708 76.9352 127.556 68.4485 122.896 59.5299C122.322 58.4328 121.749 57.5253 121.62 57.5133C121.492 57.5014 121.775 58.3817 122.249 59.4695C125.259 66.3782 125.254 73.1231 122.237 76.9408C121.144 78.3246 121.508 78.8222 123.231 78.2983ZM115.5 67C117.5 67 119 62.5166 117.5 59.5299C116.476 58.0166 113.851 58.0625 113.5 61.5C113.201 64.4271 113.855 66.8465 115.5 67Z" fill="#3A3000"/>
+</svg>

searx/static/themes/simple/package.json

@@ -1,41 +1,39 @@
 {
   "devDependencies": {
-    "ejs": "^3.1.10",
+    "eslint": "^9.0.0",
-    "eslint": "^9.18.0",
+    "grunt": "~1.6.1",
-    "grunt": "^1.6.1",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-cssmin": "^5.0.0",
-    "grunt-contrib-less": "^3.0.0",
+    "grunt-contrib-less": "~3.0.0",
-    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-uglify": "~5.2.1",
-    "grunt-contrib-watch": "^1.1.0",
+    "grunt-xmlmin": "~0.1.8",
-    "grunt-eslint": "^25.0.0",
+    "grunt-contrib-watch": "~1.1.0",
+    "grunt-eslint": "^24.0.0",
+    "grunt-stylelint": "^0.16.0",
     "grunt-image": "^6.4.0",
-    "grunt-stylelint": "^0.20.1",
+    "ionicons": "^7.1.0",
-    "grunt-xmlmin": "^0.1.8",
+    "less": "^4.1.3",
-    "ionicons": "^7.4.0",
+    "less-plugin-clean-css": "^1.5.1",
-    "less": "^4.2.2",
+    "sharp": "^0.33.0",
-    "sharp": "^0.33.5",
+    "stylelint": "^13.13.1",
-    "stylelint": "^16.12.0",
+    "stylelint-config-standard": "^22.0.0",
-    "stylelint-config-standard": "^37.0.0",
+    "ejs": "^3.1.8",
-    "stylelint-config-standard-less": "^3.0.1",
+    "svgo": "^3.0.0"
-    "svgo": "^3.3.2"
   },
   "dependencies": {
-    "autocomplete-js": "^2.7.1",
+    "autocomplete-js": "2.7.1",
-    "leaflet": "^1.9.4",
+    "leaflet": "^1.8.0",
-    "normalize.css": "^8.0.1",
+    "normalize.css": "^8.0.1"
-    "swiped-events": "^1.2.0"
   },
   "scripts": {
     "all": "npm install && grunt",
     "build": "grunt",
-    "clean": "rm -Rf node_modules",
+    "test": "grunt test",
     "eslint": "grunt eslint",
     "eslint-fix": "grunt eslint --fix",
-    "fix": "grunt test --fix",
+    "watch": "grunt watch",
+    "clean": "rm -Rf node_modules package-lock.json",
     "stylelint": "grunt stylelint",
-    "stylelint-fix": "grunt stylelint --fix",
+    "stylelint-fix": "grunt stylelint --fix"
-    "test": "grunt test",
-    "watch": "grunt watch --fix"
   }
 }

searx/static/themes/simple/src/js/main/results.js

@@ -52,118 +52,81 @@
       this.innerText = this.dataset.copiedText;
     });
 
-    // searxng.selectImage (gallery)
+    searxng.selectImage = function (resultElement) {
-    // -----------------------------
+      /* eslint no-unused-vars: 0 */
-
+      if (resultElement) {
-    // setTimeout() ID, needed to cancel *last* loadImage
+        // load full size image in background
-    let imgTimeoutID;
+        const imgElement = resultElement.querySelector('.result-images-source img');
-
+        const thumbnailElement = resultElement.querySelector('.image_thumbnail');
-    // progress spinner, while an image is loading
+        const detailElement = resultElement.querySelector('.detail');
-    const imgLoaderSpinner = d.createElement('div');
+        if (imgElement) {
-    imgLoaderSpinner.classList.add('loader');
+          const imgSrc = imgElement.getAttribute('data-src');
-
+          if (imgSrc) {
-    // singleton image object, which is used for all loading processes of a
+            const loader = d.createElement('div');
-    // detailed image
             const imgLoader = new Image();
 
-    const loadImage = (imgSrc, onSuccess) => {
+            loader.classList.add('loader');
-      // if defered image load exists, stop defered task.
+            detailElement.appendChild(loader);
-      if (imgTimeoutID) clearTimeout(imgTimeoutID);
 
-      // defer load of the detail image for 1 sec
+            imgLoader.onload = e => {
-      imgTimeoutID = setTimeout(() => {
+              imgElement.src = imgSrc;
+              loader.remove();
+            };
+            imgLoader.onerror = e => {
+              loader.remove();
+            };
             imgLoader.src = imgSrc;
-      }, 1000);
+            imgElement.src = thumbnailElement.src;
-
+            imgElement.removeAttribute('data-src');
-      // 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
+    searxng.closeDetail = function (e) {
-      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.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
+    const searchHeader = d.getElementById('search');
-    window.addEventListener('hashchange', () => {
+    const searchFilters = d.querySelector('.search_filters')
-      if (window.location.hash != '#image-viewer') searxng.closeDetail();
+    const searchHeaderTopHide = 155
-    });
+    let lastScrollY = 0;
-
-    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 () {
+      const currentScrollY = w.scrollY;
+      if (w.scrollY <= 0) {
+        searchFilters.classList.remove('search_filters_hide')
+      }
+      if (currentScrollY > lastScrollY || (currentScrollY > lastScrollY && currentScrollY < 300 && searchHeader.style.top !== '0px')) {
+        // searchHeader.style.top = `-${searchHeaderTopHide}px`;
+        searchHeader.className = 'search_hide'
+        if (w.scrollY <= 0) {
+          searchFilters.classList.remove('search_filters_hide')
+          // searchFilters.style.height = '35px'
+        } else {
+          searchFilters.classList.add('search_filters_hide')
+          // searchFilters.style.height = '0'
+        }
+      } else {
+        searchHeader.className = 'search_show'
+        // searchHeader.style.top = '-53px';
+      }
+      lastScrollY = currentScrollY;
+
       var e = d.getElementById('backToTop'),
         scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
         results = d.getElementById('results');

searx/static/themes/simple/src/less/autocomplete.less

@@ -53,7 +53,7 @@
     color: var(--color-autocomplete-font);
     max-height: 32rem;
     overflow-y: auto;
-    z-index: 5000;
+    z-index: 100;
     margin-top: 3.5rem;
     border-radius: 0.8rem;
 

searx/static/themes/simple/src/less/definitions.less

@@ -4,194 +4,99 @@
  * To change the colors of the site, simple edit this variables
  */
 
+/* inter-regular - cyrillic_latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/inter-v18-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-500 - cyrillic_latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/inter-v18-cyrillic_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-600 - cyrillic_latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/inter-v18-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+
 /// Light Theme
 :root {
   /// Base Colors
-  --color-base-font: #444;
+  --color-base-font: var(--md-sys-color-on-surface);
-  --color-base-font-rgb: 68, 68, 68;
+  --color-base-font-rgb: 29, 27, 32;
-  --color-base-background: #fff;
+  --color-base-background: var(--md-sys-color-surface-container-low);
-  --color-base-background-mobile: #f2f5f8;
+  --color-base-background-mobile: var(--md-sys-color-surface);
-  --color-url-font: #334999;
+  --color-url-font: var(--md-extended-color-custom-blue-color);
-  --color-url-visited-font: #9822c3;
+  --color-url-visited-font: var(--md-extended-color-custom-violet-color);
   /// Header Colors
-  --color-header-background: #fdfbff;
+  --color-header-background: var(--md-sys-color-surface-container-low);
-  --color-header-border: #ddd;
+  --color-header-border: transparent;
   /// Footer Colors
-  --color-footer-background: #fdfbff;
+  --color-footer-background: var(--md-sys-color-surface-container-low);
-  --color-footer-border: #ddd;
+  --color-footer-border: transparent;
   /// Sidebar Colors
-  --color-sidebar-border: #ddd;
+  --color-sidebar-border: transparent;
-  --color-sidebar-font: #000;
+  --color-sidebar-font: var(--md-sys-color-on-surface);
-  --color-sidebar-background: #fff;
+  --color-sidebar-background: var(--md-sys-color-surface-container-low);
   /// BackToTop Colors
-  --color-backtotop-font: #444;
+  --color-backtotop-font: var(--md-sys-color-on-tertiary);
-  --color-backtotop-border: #ddd;
+  --color-backtotop-border: transparent;
-  --color-backtotop-background: #fff;
+  --color-backtotop-background: var(--md-sys-color-tertiary);
   /// Button Colors
-  --color-btn-background: #3050ff;
+  --color-btn-background: var(--md-sys-color-primary);
-  --color-btn-font: #fff;
+  --color-btn-font: var(--md-sys-color-on-primary);
-  --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-border: var(--md-sys-color-outline);
-  --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-search-shadow: none;
-  --color-search-background: #2b2e36;
+  --color-search-background: var(--md-sys-color-surface-container-high);
-  --color-search-font: #fff;
+  --color-search-font: var(--md-sys-color-on-surface);
-  --color-search-background-hover: #58f;
+  --color-search-background-hover: var(--md-sys-color-primary);
   /// Modal Colors
-  --color-error: #f55b5b;
+  --color-error: var(--md-sys-color-on-error-container);
-  --color-error-background: darken(#db3434, 40%);
+  --color-error-background: var(--md-sys-color-error-container);
   --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-selected-font: var(--md-sys-color-primary);
-  --color-categories-item-border-selected: #58f;
+  --color-categories-item-border-selected: var(--md-sys-color-primary);
   /// Autocomplete Colors
-  --color-autocomplete-font: #fff;
+  --color-autocomplete-font: var(--md-sys-color-on-surface);
-  --color-autocomplete-border: #555;
+  --color-autocomplete-border: var(--md-sys-color-outline);
-  --color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-autocomplete-shadow: 0 2px 8px var(--md-sys-color-shadow);
-  --color-autocomplete-background: #2b2e36;
+  --color-autocomplete-background: var(--md-sys-color-surface-container-high);
-  --color-autocomplete-background-hover: #1e1e22;
+  --color-autocomplete-background-hover: var(--md-sys-color-surface-container-highest);
   /// Answer Colors
-  --color-answer-font: #bbb; // same as --color-base-font
+  --color-answer-font: var(--md-sys-color-on-tertiary-container); // same as --color-base-font
-  --color-answer-background: #26292f;
+  --color-answer-background: var(--md-sys-color-tertiary-container);
   /// Results Colors
-  --color-result-background: #26292f;
+  --color-result-background: var(--md-sys-color-surface-container-low);
-  --color-result-border: #333;
+  --color-result-border: var(--md-sys-color-outline);
-  --color-result-url-font: #fff;
+  --color-result-url-font: var(--md-sys-color-on-surface);
-  --color-result-vim-selected: #1f1f23cc;
+  --color-result-vim-selected: var(--md-sys-color-surface-container-lowest);
-  --color-result-vim-arrow: #8af;
+  --color-result-vim-arrow: transparent;
   --color-result-description-highlight-font: #fff;
-  --color-result-link-font: #8af;
+  --color-result-link-font: var(--md-extended-color-custom-blue-color);
-  --color-result-link-font-highlight: #8af;
+  --color-result-link-font-highlight: var(--md-extended-color-custom-blue-color);
-  --color-result-link-visited-font: #c09cd9;
+  --color-result-link-visited-font: var(--md-extended-color-custom-violet-color);
   --color-result-publishdate-font: #888;
-  --color-result-engines-font: #a4a4a4;
+  --color-result-engines-font: var(--md-sys-color-on-surface-variant);
   --color-result-search-url-border: #555;
   --color-result-search-url-font: #fff;
   /// Detail modal : same as the light version
@@ -200,8 +105,8 @@
   --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-border: rgba(255, 255, 255, 0.2);
-  --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
+  --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
   // Images Colors
   --color-result-image-span-font: #bbb;
   --color-result-image-span-font-selected: #222;
@@ -234,13 +139,243 @@
   --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-border: rgba(255, 255, 255, 0.2);
-  --color-toolkit-loader-borderleft: rgb(0 0 0 / 0%);
+  --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
   --color-doc-code: #ddd;
   --color-doc-code-background: #4d5a6f;
   // Favicons Colors
-  --color-favicon-background-color: #ddd;
+  --color-favicon-background-color: var(--md-sys-color-surface-container-low);
-  --color-favicon-border-color: #ccc;
+  --color-favicon-border-color: transparent;
+  // Images Colors
+  --color-image-resolution-background: var(--md-sys-color-surface-container);
+  --color-image-resolution-font: var(--md-sys-color-on-surface);
+  // Material Colors
+  --md-sys-color-primary: rgb(109 94 15);
+  --md-sys-color-surface-tint: rgb(109 94 15);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(248 226 135);
+  --md-sys-color-on-primary-container: rgb(34 27 0);
+  --md-sys-color-secondary: rgb(102 94 64);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(238 226 188);
+  --md-sys-color-on-secondary-container: rgb(33 27 4);
+  --md-sys-color-tertiary: rgb(67 102 78);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(197 236 206);
+  --md-sys-color-on-tertiary-container: rgb(0 33 15);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(65 0 2);
+  --md-sys-color-background: rgb(255 249 238);
+  --md-sys-color-on-background: rgb(30 27 19);
+  --md-sys-color-surface: rgb(255 249 238);
+  --md-sys-color-on-surface: rgb(30 27 19);
+  --md-sys-color-surface-variant: rgb(234 226 208);
+  --md-sys-color-on-surface-variant: rgb(75 71 57);
+  --md-sys-color-outline: rgb(124 119 103);
+  --md-sys-color-outline-variant: rgb(205 198 180);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(51 48 39);
+  --md-sys-color-inverse-on-surface: rgb(247 240 226);
+  --md-sys-color-inverse-primary: rgb(219 198 110);
+  --md-sys-color-primary-fixed: rgb(248 226 135);
+  --md-sys-color-on-primary-fixed: rgb(34 27 0);
+  --md-sys-color-primary-fixed-dim: rgb(219 198 110);
+  --md-sys-color-on-primary-fixed-variant: rgb(83 70 0);
+  --md-sys-color-secondary-fixed: rgb(238 226 188);
+  --md-sys-color-on-secondary-fixed: rgb(33 27 4);
+  --md-sys-color-secondary-fixed-dim: rgb(209 198 161);
+  --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42);
+  --md-sys-color-tertiary-fixed: rgb(197 236 206);
+  --md-sys-color-on-tertiary-fixed: rgb(0 33 15);
+  --md-sys-color-tertiary-fixed-dim: rgb(169 208 179);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56);
+  --md-sys-color-surface-dim: rgb(224 217 204);
+  --md-sys-color-surface-bright: rgb(255 249 238);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(250 243 229);
+  --md-sys-color-surface-container: rgb(244 237 223);
+  --md-sys-color-surface-container-high: rgb(238 232 218);
+  --md-sys-color-surface-container-highest: rgb(232 226 212);
+//   --md-sys-color-primary: rgb(103 85 142);
+//   --md-sys-color-surface-tint: rgb(103 85 142);
+//   --md-sys-color-on-primary: rgb(255 255 255);
+//   --md-sys-color-primary-container: rgb(234 221 255);
+//   --md-sys-color-on-primary-container: rgb(34 15 70);
+//   --md-sys-color-secondary: rgb(98 91 112);
+//   --md-sys-color-on-secondary: rgb(255 255 255);
+//   --md-sys-color-secondary-container: rgb(233 222 248);
+//   --md-sys-color-on-secondary-container: rgb(30 25 43);
+//   --md-sys-color-tertiary: rgb(109 94 15);
+//   --md-sys-color-on-tertiary: rgb(255 255 255);
+//   --md-sys-color-tertiary-container: rgb(248 226 135);
+//   --md-sys-color-on-tertiary-container: rgb(34 27 0);
+//   --md-sys-color-error: rgb(186 26 26);
+//   --md-sys-color-on-error: rgb(255 255 255);
+//   --md-sys-color-error-container: rgb(255 218 214);
+//   --md-sys-color-on-error-container: rgb(65 0 2);
+//   --md-sys-color-background: rgb(254 247 255);
+//   --md-sys-color-on-background: rgb(29 27 32);
+//   --md-sys-color-surface: rgb(254 247 255);
+//   --md-sys-color-on-surface: rgb(29 27 32);
+//   --md-sys-color-surface-variant: rgb(231 224 235);
+//   --md-sys-color-on-surface-variant: rgb(73 69 78);
+//   --md-sys-color-outline: rgb(122 117 127);
+//   --md-sys-color-outline-variant: rgb(203 196 207);
+//   --md-sys-color-shadow: rgb(0 0 0);
+//   --md-sys-color-scrim: rgb(0 0 0);
+//   --md-sys-color-inverse-surface: rgb(50 47 53);
+//   --md-sys-color-inverse-on-surface: rgb(245 239 247);
+//   --md-sys-color-inverse-primary: rgb(209 188 253);
+//   --md-sys-color-primary-fixed: rgb(234 221 255);
+//   --md-sys-color-on-primary-fixed: rgb(34 15 70);
+//   --md-sys-color-primary-fixed-dim: rgb(209 188 253);
+//   --md-sys-color-on-primary-fixed-variant: rgb(78 61 117);
+//   --md-sys-color-secondary-fixed: rgb(233 222 248);
+//   --md-sys-color-on-secondary-fixed: rgb(30 25 43);
+//   --md-sys-color-secondary-fixed-dim: rgb(204 194 219);
+//   --md-sys-color-on-secondary-fixed-variant: rgb(74 67 88);
+//   --md-sys-color-tertiary-fixed: rgb(248 226 135);
+//   --md-sys-color-on-tertiary-fixed: rgb(34 27 0);
+//   --md-sys-color-tertiary-fixed-dim: rgb(219 198 111);
+//   --md-sys-color-on-tertiary-fixed-variant: rgb(83 70 0);
+//   --md-sys-color-surface-dim: rgb(222 216 224);
+//   --md-sys-color-surface-bright: rgb(254 247 255);
+//   --md-sys-color-surface-container-lowest: rgb(255 255 255);
+//   --md-sys-color-surface-container-low: rgb(248 241 250);
+//   --md-sys-color-surface-container: rgb(242 236 244);
+//   --md-sys-color-surface-container-high: rgb(236 230 238);
+//   --md-sys-color-surface-container-highest: rgb(231 224 232);
+  --md-extended-color-custom-blue-color: rgb(69 94 145);
+  --md-extended-color-custom-blue-on-color: rgb(255 255 255);
+  --md-extended-color-custom-blue-color-container: rgb(216 226 255);
+  --md-extended-color-custom-blue-on-color-container: rgb(0 26 66);
+  --md-extended-color-custom-violet-color: rgb(103 85 142);
+  --md-extended-color-custom-violet-on-color: rgb(255 255 255);
+  --md-extended-color-custom-violet-color-container: rgb(234 221 255);
+  --md-extended-color-custom-violet-on-color-container: rgb(34 15 70);
+}
+
+.dark-themes() {
+  // Base Colors
+  --color-base-font-rgb: 231, 224, 232;
+  // Favicons Colors
+  --color-favicon-background-color: #fff;
+  --color-favicon-border-color: transparent;
+  // Material Colors
+
+//   --md-sys-color-primary: rgb(209 188 253);
+//   --md-sys-color-surface-tint: rgb(209 188 253);
+//   --md-sys-color-on-primary: rgb(55 38 92);
+//   --md-sys-color-primary-container: rgb(78 61 117);
+//   --md-sys-color-on-primary-container: rgb(234 221 255);
+//   --md-sys-color-secondary: rgb(204 194 219);
+//   --md-sys-color-on-secondary: rgb(52 45 65);
+//   --md-sys-color-secondary-container: rgb(74 67 88);
+//   --md-sys-color-on-secondary-container: rgb(233 222 248);
+//   --md-sys-color-tertiary: rgb(219 198 111);
+//   --md-sys-color-on-tertiary: rgb(57 48 0);
+//   --md-sys-color-tertiary-container: rgb(83 70 0);
+//   --md-sys-color-on-tertiary-container: rgb(248 226 135);
+//   --md-sys-color-error: rgb(255 180 171);
+//   --md-sys-color-on-error: rgb(105 0 5);
+//   --md-sys-color-error-container: rgb(147 0 10);
+//   --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(20 18 24);
+  --md-sys-color-on-background: rgb(231 224 232);
+  --md-sys-color-surface: rgb(20 18 24);
+  --md-sys-color-on-surface: rgb(231 224 232);
+  --md-sys-color-surface-variant: rgb(73 69 78);
+  --md-sys-color-on-surface-variant: rgb(203 196 207);
+  --md-sys-color-outline: rgb(148 143 153);
+  --md-sys-color-outline-variant: rgb(73 69 78);
+//   --md-sys-color-shadow: rgb(0 0 0);
+//   --md-sys-color-scrim: rgb(0 0 0);
+//   --md-sys-color-inverse-surface: rgb(231 224 232);
+//   --md-sys-color-inverse-on-surface: rgb(50 47 53);
+//   --md-sys-color-inverse-primary: rgb(103 85 142);
+//   --md-sys-color-primary-fixed: rgb(234 221 255);
+//   --md-sys-color-on-primary-fixed: rgb(34 15 70);
+//   --md-sys-color-primary-fixed-dim: rgb(209 188 253);
+//   --md-sys-color-on-primary-fixed-variant: rgb(78 61 117);
+//   --md-sys-color-secondary-fixed: rgb(233 222 248);
+//   --md-sys-color-on-secondary-fixed: rgb(30 25 43);
+//   --md-sys-color-secondary-fixed-dim: rgb(204 194 219);
+//   --md-sys-color-on-secondary-fixed-variant: rgb(74 67 88);
+//   --md-sys-color-tertiary-fixed: rgb(248 226 135);
+//   --md-sys-color-on-tertiary-fixed: rgb(34 27 0);
+//   --md-sys-color-tertiary-fixed-dim: rgb(219 198 111);
+//   --md-sys-color-on-tertiary-fixed-variant: rgb(83 70 0);
+  --md-sys-color-surface-dim: rgb(20 18 24);
+  --md-sys-color-surface-bright: rgb(59 56 62);
+  --md-sys-color-surface-container-lowest: rgb(15 13 19);
+  --md-sys-color-surface-container-low: rgb(29 27 32);
+  --md-sys-color-surface-container: rgb(33 31 36);
+  --md-sys-color-surface-container-high: rgb(43 41 47);
+  --md-sys-color-surface-container-highest: rgb(54 52 58);
+
+
+  --md-sys-color-primary: rgb(219 198 110);
+  --md-sys-color-surface-tint: rgb(219 198 110);
+  --md-sys-color-on-primary: rgb(58 48 0);
+  --md-sys-color-primary-container: rgb(83 70 0);
+  --md-sys-color-on-primary-container: rgb(248 226 135);
+  --md-sys-color-secondary: rgb(209 198 161);
+  --md-sys-color-on-secondary: rgb(54 48 22);
+  --md-sys-color-secondary-container: rgb(78 71 42);
+  --md-sys-color-on-secondary-container: rgb(238 226 188);
+  --md-sys-color-tertiary: rgb(169 208 179);
+  --md-sys-color-on-tertiary: rgb(20 55 35);
+  --md-sys-color-tertiary-container: rgb(44 78 56);
+  --md-sys-color-on-tertiary-container: rgb(197 236 206);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  // --md-sys-color-background: rgb(21 19 11);
+  // --md-sys-color-on-background: rgb(232 226 212);
+  // --md-sys-color-surface: rgb(21 19 11);
+  // --md-sys-color-on-surface: rgb(232 226 212);
+  // --md-sys-color-surface-variant: rgb(75 71 57);
+  // --md-sys-color-on-surface-variant: rgb(205 198 180);
+  // --md-sys-color-outline: rgb(150 144 128);
+  // --md-sys-color-outline-variant: rgb(75 71 57);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(232 226 212);
+  --md-sys-color-inverse-on-surface: rgb(51 48 39);
+  --md-sys-color-inverse-primary: rgb(109 94 15);
+  --md-sys-color-primary-fixed: rgb(248 226 135);
+  --md-sys-color-on-primary-fixed: rgb(34 27 0);
+  --md-sys-color-primary-fixed-dim: rgb(219 198 110);
+  --md-sys-color-on-primary-fixed-variant: rgb(83 70 0);
+  --md-sys-color-secondary-fixed: rgb(238 226 188);
+  --md-sys-color-on-secondary-fixed: rgb(33 27 4);
+  --md-sys-color-secondary-fixed-dim: rgb(209 198 161);
+  --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42);
+  --md-sys-color-tertiary-fixed: rgb(197 236 206);
+  --md-sys-color-on-tertiary-fixed: rgb(0 33 15);
+  --md-sys-color-tertiary-fixed-dim: rgb(169 208 179);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56);
+  // --md-sys-color-surface-dim: rgb(21 19 11);
+  // --md-sys-color-surface-bright: rgb(60 57 48);
+  // --md-sys-color-surface-container-lowest: rgb(16 14 7);
+  // --md-sys-color-surface-container-low: rgb(30 27 19);
+  // --md-sys-color-surface-container: rgb(34 32 23);
+  // --md-sys-color-surface-container-high: rgb(45 42 33);
+  // --md-sys-color-surface-container-highest: rgb(56 53 43);
+  --md-extended-color-custom-blue-color: #7eaaff;
+//   --md-extended-color-custom-blue-color: rgb(174 198 255);
+  --md-extended-color-custom-blue-on-color: rgb(18 47 96);
+  --md-extended-color-custom-blue-color-container: rgb(44 70 120);
+  --md-extended-color-custom-blue-on-color-container: rgb(216 226 255);
+  --md-extended-color-custom-violet-color: #d19efa;
+//   --md-extended-color-custom-violet-color: rgb(209 188 253);
+  --md-extended-color-custom-violet-on-color: rgb(55 38 92);
+  --md-extended-color-custom-violet-color-container: rgb(78 61 117);
+  --md-extended-color-custom-violet-on-color-container: rgb(234 221 255);
 }
 
 .black-themes() {
@@ -271,16 +406,16 @@
 /// General Size
 @results-width: 45rem;
 @results-sidebar-width: 25rem;
-@results-offset: 10rem;
+@results-offset: 13rem;
 @results-tablet-offset: 0.5rem;
 @results-gap: 5rem;
 @results-margin: 0.125rem;
 @result-padding: 1rem;
-@results-image-row-height: 12rem;
+@results-image-row-height: 15rem;
-@results-image-row-height-phone: 10rem;
+@results-image-row-height-phone: 12rem;
 @search-width: 44rem;
 // heigh of #search, see detail.less
-@search-height: 13rem;
+@search-height: 7.6rem;
 
 /// Device Size
 /// @desktop > @tablet

searx/static/themes/simple/src/less/detail.less

@@ -22,7 +22,7 @@ article.result-images .detail {
   bottom: 0;
   background: var(--color-result-detail-background);
   border: 1px solid var(--color-result-detail-background);
-  z-index: 1000;
+  z-index: 10000;
   padding: 4rem 3rem 3rem 3rem;
 
   a.result-images-source {
@@ -93,7 +93,8 @@ article.result-images .detail {
 
     p.result-url {
       white-space: nowrap;
-      overflow: hidden hidden;
+      overflow-x: hidden;
+      overflow-y: hidden;
       text-overflow: ellipsis;
     }
 
@@ -148,7 +149,7 @@ article.result-images .detail {
     height: 1.5rem;
     position: absolute;
     filter: opacity(40%);
-    z-index: 1200;
+    z-index: 2000002;
 
     span {
       display: block;
@@ -231,6 +232,10 @@ article.result-images .detail {
       .ltr-right(1rem);
     }
   }
+
+  #result_count {
+    display: none;
+  }
 }
 
 @media screen and (max-width: @phone) {
@@ -250,4 +255,8 @@ article.result-images .detail {
       .ltr-margin-right(1rem);
     }
   }
+
+  #result_count {
+    display: none;
+  }
 }

searx/static/themes/simple/src/less/index.less

@@ -6,16 +6,22 @@
   text-align: center;
 
   .title {
-    background: url('../img/searxng.png') no-repeat;
+    // min-height: 4rem;
-    min-height: 4rem;
+    margin: 2rem auto;
-    margin: 4rem auto;
+    font-size: 54px;
-    background-position: center;
+
-    background-size: contain;
+    // svg {
+    //   max-width: 550px;
+    //   max-height: 60px;
+    //   width: 100%;
+    // }
   }
 
   h1 {
     font-size: 4em;
     visibility: hidden;
+    margin: 0;
+    line-height: 0;
   }
 
   #search,

searx/static/themes/simple/src/less/preferences.less

@@ -48,14 +48,6 @@ table {
     }
   }
 
-  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;

searx/static/themes/simple/src/less/search.less

@@ -5,18 +5,32 @@
 #search {
   padding: 0;
   margin: 0;
+  position: sticky;
+  -webkit-transition: top 0.2s ease-in-out;
+  -moz-transition: top 0.2s ease-in-out 0.05s;
+  -o-transition: top 0.2s ease-in-out 0.05s;
+  transition: top 0.2s ease-in-out 0.05s;
+  z-index: 100;
+}
+
+.search_show {
+  top: 0;
+}
+
+.search_hide {
+  top: -107px;
 }
 
 #search_header {
-  padding-top: 1.5em;
+  padding-top: 1em;
-  .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);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
   display: grid;
-  gap: 1rem 1.2rem;
+  column-gap: 1rem;
-  grid-template-columns: 3rem 1fr;
+  row-gap: 0;
+  grid-template-columns: @results-offset 1fr;
   grid-template-areas:
     "logo search"
     "spacer categories";
@@ -61,15 +75,17 @@
 
 button.category_button {
   background-color: inherit;
+  font-weight: 500;
   color: var(--color-base-font);
   cursor: pointer;
-  padding: 0.2rem 0;
+  padding: 1rem;
+  margin: 0;
   display: inline-flex;
   align-items: center;
   text-transform: capitalize;
   font-size: 0.9em;
   border: none;
-  border-bottom: 2px solid transparent;
+  transition: color .1s ease-in-out;
 
   svg {
     padding-right: 0.2rem;
@@ -78,7 +94,21 @@ button.category_button {
   &.selected,
   &:active {
     color: var(--color-categories-item-selected-font);
-    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+
+  &.selected::after {
+    opacity: 1;
+    transform: scaleY(1);
+    background-color: var(--color-categories-item-border-selected);
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+    transition: opacity .1s ease-in-out,transform .2s ease-in-out;
+    bottom: 0;
+    content: "";
+    height: 4px;
+    left: 0;
+    position: absolute;
+    right: 0;
   }
 }
 
@@ -96,17 +126,18 @@ button.category_button {
 }
 
 #search_logo {
-  padding: 0.5rem 10px 0 10px;
+//   padding: 0.5rem 10px 0 10px;
   grid-area: logo;
-  display: flex;
+  font-size: 32px;
-  align-items: center;
+  margin: auto;
-  justify-content: center;
+//   position: absolute;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
 
   svg {
     flex: 1;
-    width: 30px;
+    margin: 0.1rem 0 auto 0;
-    height: 30px;
-    margin: 0.5rem 0 auto 0;
   }
 }
 
@@ -129,12 +160,8 @@ button.category_button {
 }
 
 #search_view {
-  padding: 0.5rem 0.3rem 0 0.5rem;
+//   padding: 0.5rem 2.7rem 0 0;
   grid-area: search;
-
-  body.results_endpoint & {
-    padding: 0.5rem 2.8rem 0 0;
-  }
 }
 
 .search_box {
@@ -158,7 +185,7 @@ button.category_button {
   outline: none;
   color: var(--color-search-font);
   font-size: 1.1rem;
-  z-index: 1000;
+  z-index: 10000;
 
   &:hover {
     color: var(--color-search-background-hover);
@@ -183,14 +210,14 @@ html.no-js #clear_search.hide_if_nojs {
   outline: none;
   color: var(--color-search-font);
   font-size: 1.1rem;
-  z-index: 100;
+  z-index: 2;
 }
 
 #q {
   width: 100%;
-  .ltr-padding-left(1rem);
+  .ltr-padding-left(1.3rem);
   .ltr-padding-right(0) !important;
-  .ltr-rounded-left-corners(0.8rem);
+  .ltr-rounded-left-corners(2.8rem);
 }
 
 #q::-ms-clear,
@@ -199,7 +226,7 @@ html.no-js #clear_search.hide_if_nojs {
 }
 
 #send_search {
-  .ltr-rounded-right-corners(0.8rem);
+  .ltr-rounded-right-corners(2.8rem);
 
   &:hover {
     cursor: pointer;
@@ -215,16 +242,21 @@ html.no-js #clear_search.hide_if_nojs {
 }
 
 .search_filters {
-  margin-top: 0.6rem;
+  // margin-top: 0.6rem;
   .ltr-margin-right(0);
   margin-bottom: 0;
-  .ltr-margin-left(@results-offset + 0.6rem);
+  .ltr-padding-left(@results-offset + 0.6rem);
   display: flex;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
+  transition: all .15s ease-in-out;
+  height: 42px;
+  align-items: center;
+  background-color: var(--color-header-background);
 
   select {
     background-color: inherit;
+    font-weight: 500;
 
     &:hover,
     &:focus {
@@ -233,17 +265,19 @@ html.no-js #clear_search.hide_if_nojs {
   }
 }
 
+.search_filters_hide {
+  height: 0px;
+}
+
 @media screen and (max-width: @tablet) {
   #search_header {
-    padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
+    padding: 0.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-padding-left(@results-tablet-offset);
-    .ltr-margin-left(@results-tablet-offset + 3rem);
   }
 
   #categories {
@@ -267,29 +301,49 @@ html.no-js #clear_search.hide_if_nojs {
     #categories {
       width: 100%;
       .ltr-text-align-left();
-      overflow: scroll hidden;
+      overflow-x: scroll;
+      overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
     }
   }
 }
 
 @media screen and (max-width: @phone) {
+  .search_show {
+    top: -53px;
+  }
+  .search_hide {
+    top: -155px;
+  }
+
   #search_header {
     width: 100%;
     margin: 0;
     padding: 0.1rem 0 0 0;
-    gap: 0 0;
+    column-gap: 0;
+    row-gap: 0;
     grid-template-areas:
-      "logo search"
+      "logo logo"
+      "search search"
       "categories categories";
   }
 
+  .search_filters  {
+    background-color: var(--color-base-background-mobile);
+  }
+
   .search_logo {
     padding: 0;
   }
 
+  #search_logo {
+    padding: 0;
+    line-height: 0;
+    margin: 12px 8px;
+  }
+
   .search_box {
-    width: 98%;
+    width: 100%;
     display: flex;
   }
 
@@ -298,11 +352,6 @@ html.no-js #clear_search.hide_if_nojs {
     flex: 1;
   }
 
-  .search_filters {
-    margin: 0 10px;
-    padding: 0.5rem 0;
-  }
-
   .category {
     display: inline-block;
     width: auto;
@@ -325,35 +374,38 @@ html.no-js #clear_search.hide_if_nojs {
     margin: 0 !important;
   }
 
-  #search_view:focus-within {
+  #search_view {
-    display: block;
+    margin: 4px 8px;
-    background-color: var(--color-search-background);
+  }
-    position: absolute;
+//   #search_view:focus-within {
-    top: 0;
+//     display: block;
-    height: 100%;
+//     background-color: var(--color-search-background);
-    width: 100%;
+//     position: absolute;
-    z-index: 2000;
+//     top: 0;
+//     height: 100%;
+//     width: 100%;
+//     z-index: 10000;
+//     padding: 0;
 
-    .search_box {
+//     .search_box {
-      border-bottom: 1px solid var(--color-search-border);
+//       border-bottom: 1px solid var(--color-search-border);
-      width: 100%;
+//       width: 100%;
-      border-radius: 0;
+//       border-radius: 0;
-      box-shadow: none;
+//       box-shadow: none;
 
-      #send_search {
+//       #send_search {
-        .ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
+//         .ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
-      }
+//       }
 
-      * {
+//       * {
-        border: none;
+//         border: none;
-        border-radius: 0;
+//         border-radius: 0;
-        box-shadow: none;
+//         box-shadow: none;
-      }
+//       }
-    }
+//     }
-  }
+//   }
 
   #main_results #q:placeholder-shown ~ #send_search {
-    .ltr-margin-right(2.6rem);
     transition: margin 0.1s;
   }
 }
@@ -381,13 +433,26 @@ html.no-js #clear_search.hide_if_nojs {
 
 #categories_container {
   position: relative;
+  display: flex;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  transition: all .2s ease-in-out;
 }
 
-.favicon img {
+.favicon {
-  height: 1.5rem;
+    width: 28px;
-  width: 1.5rem;
+    min-width: 28px;
-  border-radius: 10%;
+    height: 28px;
-  background-color: var(--color-favicon-background-color);
-  border: 1px solid var(--color-favicon-border-color);
     display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-favicon-background-color);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 100%;
+
+    img {
+        width: 16px;
+        height: 16px;
+        display: flex;
+    }
 }

searx/static/themes/simple/src/less/style-center.less

@@ -14,7 +14,7 @@ on the /search URL and when the "center alignment" preference is enabled.
   }
 }
 
-@media screen and (width >= 62rem) {
+@media screen and (min-width: 62rem) {
   .center-alignment-yes #main_results {
     --center-page-width: 60rem;
   }
@@ -91,7 +91,7 @@ on the /search URL and when the "center alignment" preference is enabled.
         align-self: flex-start;
       }
 
-      &:not(.only_template_images, .image-detail-open) {
+      &:not(.only_template_images):not(.image-detail-open) {
         // the gap is set in style.less
         .ltr-margin-left(1.5rem);
         grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;

searx/static/themes/simple/src/less/style.less

@@ -78,6 +78,10 @@ body {
   flex-direction: column;
   height: 100vh;
   margin: 0;
+  font-family: "Inter", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  line-height: 1.5;
 }
 
 main {
@@ -94,24 +98,57 @@ main {
 footer {
   clear: both;
   min-height: 4rem;
-  padding: 1rem 0;
   width: 100%;
-  text-align: center;
-  background-color: var(--color-footer-background);
   border-top: 1px solid var(--color-footer-border);
   overflow: hidden;
+  background-color: var(--md-sys-color-surface-bright);
+  display: flex;
+  overflow-x: auto;
+  overflow-y: clip;
 
   p {
+    padding: 0 2rem;
     font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    width: max-content;
+
+    a {
+      color: var(--md-sys-color-on-surface) !important;
+      width: max-content;
     }
+  }
+
+  svg {
+    font-size: 38px;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+  }
+}
+
+.index_endpoint footer svg {
+  display: none;
 }
 
 .page_with_header .logo {
   height: 40px;
 }
 
+#pagination button[type="submit"] {
+  padding-left: 15px;
+  padding-right: 15px;
+//   font-size: 16px;
+  height: 40px;
+  font-weight: 500;
+  display: inline-block;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  .rounded-corners(24px);
+  border: 1px solid var(--md-sys-color-outline);
+  cursor: pointer;
+}
+
 input[type="submit"],
-#results button[type="submit"],
 .button {
   padding: 0.7rem;
   display: inline-block;
@@ -136,12 +173,6 @@ a {
   }
 }
 
-article[data-vim-selected] {
-  background: var(--color-result-vim-selected);
-  .ltr-border-left(0.2rem solid var(--color-result-vim-arrow));
-  .ltr-rounded-right-corners(10px);
-}
-
 article.result-images[data-vim-selected] {
   background: var(--color-result-vim-arrow);
   border: none;
@@ -179,11 +210,12 @@ article[data-vim-selected].category-social {
     word-wrap: break-word;
     margin: 0.4rem 0 0.4rem 0;
     padding: 0;
+    line-height: 1.5;
 
     a {
       color: var(--color-result-link-font);
       font-weight: normal;
-      font-size: 1.1em;
+      font-size: 1.15em;
 
       &:visited {
         color: var(--color-result-link-visited-font);
@@ -206,12 +238,12 @@ article[data-vim-selected].category-social {
 
   .content,
   .stat {
-    font-size: 0.9em;
+    font-size: 14px;
     margin: 0;
     padding: 0;
     max-width: 54em;
     word-wrap: break-word;
-    line-height: 1.24;
+    line-height: 1.5;
 
     .highlight {
       color: var(--color-result-description-highlight-font);
@@ -242,10 +274,11 @@ article[data-vim-selected].category-social {
   .url_wrapper {
     display: flex;
     align-items: center;
-    font-size: 1rem;
+    font-size: 12px;
     color: var(--color-result-url-font);
-    flex-flow: row nowrap;
+    flex-wrap: nowrap;
     overflow: hidden;
+    flex-direction: row;
     margin: 0;
     padding: 0;
 
@@ -268,7 +301,9 @@ article[data-vim-selected].category-social {
     .url_o2 {
       overflow: hidden;
       white-space: nowrap;
-      flex: 0 1 content;
+      flex-basis: content;
+      flex-grow: 0;
+      flex-shrink: 1;
       text-align: right;
       padding-bottom: 1px;
 
@@ -295,8 +330,9 @@ article[data-vim-selected].category-social {
 
   img.thumbnail {
     .ltr-float-left();
-    padding-top: 0.6rem;
+    margin-top: 0.6rem;
-    .ltr-padding-right(1rem);
+    margin-right: 1rem;
+    border-radius: 4px;
     width: 7rem;
     height: unset; // remove height value that was needed for lazy loading
   }
@@ -384,6 +420,14 @@ article[data-vim-selected].category-social {
   padding: 0 5px 25px 0 !important;
 }
 
+.links_divider {
+  display: inline-block;
+  height: 14px;
+  margin: auto 8px;
+  background-color: var(--md-sys-color-outline-variant);
+  padding-right: 1px;
+}
+
 .audio-control audio {
   width: 100%;
   padding: 10px 0 0 0;
@@ -428,14 +472,21 @@ article[data-vim-selected].category-social {
   flex-wrap: wrap;
   justify-content: flex-end;
   color: var(--color-result-engines-font);
+  background-color: var(--md-sys-color-surface-container-low);
+  margin-top: 0.6rem;
+  padding: 5px 1rem !important;
+  border-radius: 6px;
 
   span {
     font-size: smaller;
     margin-top: 0;
     margin-bottom: 0;
-    .ltr-margin-right(0.5rem);
     .ltr-margin-left(0);
   }
+
+  span:not(:last-child) {
+    .ltr-margin-right(0.5rem);
+  }
 }
 
 .small_font {
@@ -473,6 +524,7 @@ article[data-vim-selected].category-social {
     object-fit: cover;
     vertical-align: bottom;
     background: var(--color-result-image-background);
+    border-radius: 4px;
   }
 
   .image_resolution {
@@ -538,19 +590,19 @@ article[data-vim-selected].category-social {
 }
 
 #results {
-  margin-top: 1rem;
   .ltr-margin-right(2rem);
   margin-bottom: 0;
   .ltr-margin-left(@results-offset);
   display: grid;
-  grid-template:
+  grid-template-columns: @results-width @results-sidebar-width;
-      "corrections sidebar" min-content
+  grid-template-rows: min-content min-content 1fr min-content;
-      "answers sidebar" min-content
-      "urls sidebar" 1fr
-      "pagination sidebar" min-content
-      / @results-width @results-sidebar-width
-  ;
   gap: 0 @results-gap;
+  grid-template-areas:
+    "corrections sidebar"
+    "answers sidebar"
+    "urls sidebar"
+    "suggestions sidebar"
+    "pagination sidebar";
 }
 
 #results #sidebar *:first-child {
@@ -567,19 +619,45 @@ article[data-vim-selected].category-social {
 }
 
 #suggestions {
-  .wrapper {
+  grid-area: suggestions;
-    display: flex;
+  padding: 0 1rem;
-    flex-flow: column;
-    justify-content: flex-end;
 
-    form {
+  h3 {
-      display: inline-block;
+    margin-top: 0;
-      flex: 1 1 50%;
   }
+
+  .wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 12px;
+    column-gap: 16px;
+  }
+
+  button[type="submit"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    min-height: 48px;
+    text-align: start;
+    background-color: transparent;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 24px;
+    padding: 12px;
+    color: var(--color-result-link-font);
+
+    svg {
+        color: var(--md-sys-color-on-surface);
+    }
+  }
+
+  button[type="submit"]:hover {
+    text-decoration: underline;
+    background-color: var(--md-sys-color-surface-container-high);
   }
 }
 
-#suggestions,
 #infoboxes {
   input {
     padding: 0;
@@ -654,10 +732,9 @@ summary.title {
   grid-area: answers;
   background: var(--color-answer-background);
   padding: @result-padding;
-  margin: 1rem 0;
+  margin: 1rem;
-  margin-top: 0;
   color: var(--color-answer-font);
-  .rounded-corners;
+  .rounded-corners(12px);
 
   h4 {
     display: none;
@@ -673,7 +750,10 @@ summary.title {
   }
 
   .answer-url {
-    margin: 5px 10px 10px auto;
+    margin-left: auto;
+    margin-top: 5px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
 }
 
@@ -690,21 +770,25 @@ summary.title {
 
   .infobox {
     margin: 10px 0 10px;
-    border: 1px solid var(--color-sidebar-border);
+    border: none;
-    padding: 1rem;
+    background-color: var(--color-sidebar-background);
-    font-size: 0.9em;
+    border: 1px solid var(--md-sys-color-outline-variant);
-    .rounded-corners;
+    padding: 1.5rem;
+    font-size: 1em;
+    .rounded-corners(12px);
 
     h2 {
       margin: 0 0 0.5em 0;
     }
 
     img {
-      max-width: 100%;
+      width: 100%;
-      max-height: 12em;
+      height: 12em;
+      object-fit: contain;
       display: block;
-      margin: 0 auto;
       padding: 0;
+      .rounded-corners(16px);
+      margin: 18px 0;
     }
 
     dt {
@@ -744,6 +828,43 @@ summary.title {
     .urls {
       clear: both;
     }
+
+    .urls {
+      margin-top: 18px;
+      overflow: auto;
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 12px;
+        width: max-content;
+
+        .url {
+          border: 1px solid var(--md-sys-color-outline-variant);
+          height: 40px;
+          display: flex;
+          align-items: center;
+          width: fit-content;
+          border-radius: 9999px;
+          padding: 0 10px;
+
+          svg {
+            font-size: 20px;
+            padding-right: 8px;
+          }
+
+          a {
+            font-size: 14px;
+          }
+        }
+
+        .url:hover {
+          background-color: var(--md-sys-color-surface-container-high);
+        }
+      }
+    }
   }
 }
 
@@ -820,6 +941,12 @@ summary.title {
 
 #pagination {
   grid-area: pagination;
+  display: flex;
+  margin: 3rem 0 0 0;
+
+  justify-content: center;
+  gap: 3rem;
+  align-items: center;
 
   br {
     clear: both;
@@ -851,6 +978,7 @@ summary.title {
   margin: 0;
   padding: 0;
   font-size: 1em;
+  line-height: 1;
   background: var(--color-backtotop-background);
   position: fixed;
   bottom: 8rem;
@@ -973,19 +1101,20 @@ summary.title {
     margin: 0 auto;
     justify-content: center;
     display: grid;
-    grid-template:
+    grid-template-columns: @results-width;
-      "corrections" min-content
+    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
-      "answers" min-content
-      "sidebar" min-content
-      "urls" 1fr
-      "pagination" min-content
-      / @results-width
-    ;
     gap: 0;
+    grid-template-areas:
+      "corrections"
+      "sidebar"
+      "answers"
+      "urls"
+      "suggestions"
+      "pagination";
   }
 }
 
-@media screen and (width <= calc(@tablet - 0.5px)) {
+@media screen and (max-width: calc(@tablet - 0.5px)) {
   #links_on_top {
     span {
       display: none;
@@ -993,7 +1122,7 @@ summary.title {
   }
 }
 
-@media screen and (width <= 52rem) {
+@media screen and (max-width: 52rem) {
   body.results_endpoint {
     #links_on_top {
       .link_on_top_about,
@@ -1018,14 +1147,16 @@ summary.title {
 #main_results div#results.only_template_images {
   margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
-  grid-template:
+  grid-template-columns: 100%;
-    "corrections" min-content
+  grid-template-rows: min-content min-content min-content 1fr min-content;
-    "answers" min-content
-    "sidebar" min-content
-    "urls" 1fr
-    "pagination" min-content
-    / 100%;
   gap: 0;
+  grid-template-areas:
+    "corrections"
+    "answers"
+    "sidebar"
+    "urls"
+    "suggestions"
+    "pagination";
 
   #sidebar {
     display: none;
@@ -1096,9 +1227,7 @@ summary.title {
   .result {
     background: var(--color-result-background);
     border: 1px solid var(--color-result-background);
-    margin: 1rem 2%;
+    margin: 8px 0;
-    width: 96%;
-    .rounded-corners;
   }
 
   .result-images {
@@ -1108,11 +1237,6 @@ summary.title {
     width: unset;
   }
 
-  .infobox {
-    border: none !important;
-    background-color: var(--color-sidebar-background);
-  }
-
   .numbered_pagination {
     display: none;
   }
@@ -1139,6 +1263,41 @@ summary.title {
       }
     }
   }
+
+  .engines {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  #answers {
+    margin: 0 0.5rem 0.125rem 0.5rem;
+  }
+
+  #suggestions {
+    background: var(--color-result-background);
+    padding-bottom: 12px;
+
+    h3 {
+      margin-top: 1.3rem;
+    }
+
+    .wrapper {
+      grid-template-columns: 1fr;
+      row-gap: 8px;
+    }
+
+    button[type="submit"] {
+      border: none;
+      border-radius: 0;
+    }
+
+    button[type="submit"]:hover {
+      background-color: transparent;
+    }
+
+    form:not(:last-child) {
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+  }
 }
 
 /*

searx/static/themes/simple/src/less/toolkit.less

@@ -203,7 +203,7 @@ div.selectable_url {
   left: 50%;
   margin: 0 auto;
   transform: translate(-50%, -50%);
-  z-index: 5000;
+  z-index: 10000000;
 
   h3 {
     margin-top: 0;
@@ -217,7 +217,8 @@ div.selectable_url {
 
 //
 .scrollx {
-  overflow: auto hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   display: block;
   padding: 0;
   margin: 0;
@@ -339,7 +340,7 @@ select {
   padding: 0.2rem !important;
   color: var(--color-search-font);
   font-size: 0.9rem;
-  z-index: 100;
+  z-index: 2;
 
   &:hover,
   &:focus {
@@ -413,7 +414,7 @@ input.checkbox-onoff[type="checkbox"] {
     border: 1px solid var(--color-btn-background);
     border-radius: 12px;
     box-shadow: var(--color-btn-background) 0 0 3px;
-    z-index: 1200;
+    z-index: 10000;
     top: -0.55em;
     left: -0.6em;
   }
@@ -504,7 +505,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
   }
 
   // if not checked and possible to checked then display a "light" check mark on hover
-  input.checkbox[type=checkbox]:not(:checked, [disabled], .checkbox-onoff):hover::after {
+  input.checkbox[type=checkbox]:not(:checked):not([disabled]):not(.checkbox-onoff):hover::after {
     opacity: 0.5;
   }
 }
@@ -573,7 +574,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
   background: var(--color-toolkit-engine-tooltip-background);
   font-size: 14px;
   font-weight: normal;
-  z-index: 5000;
+  z-index: 1000000;
   text-align: left;
   .rounded-corners;
 }
@@ -592,7 +593,8 @@ td:hover .engine-tooltip,
   width: -moz-available;
   width: -webkit-fill-available;
   width: fill;
-  flex-flow: row nowrap;
+  flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
   display: inline-flex;
 }

searx/static/themes/simple/src/less/toolkit_loader.less

@@ -14,16 +14,33 @@
   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);
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
   transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
   animation: load8 1.1s infinite linear;
 }
 
-@keyframes load8 {
+@-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);
   }
 }

searx/static/themes/simple/src/svg/select-dark.svg

@@ -1,4 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#e7e0e8" d="M12 14.308L8.192 10.5h7.616z"/></svg>
-<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>

searx/static/themes/simple/src/svg/select-light.svg

@@ -1,4 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="rgb(30 27 19)" d="M12 14.308L8.192 10.5h7.616z"/></svg>
-<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>

searx/templates/simple/base.html

@@ -2,8 +2,8 @@
 <html class="no-js theme-{{ preferences.get_value('simple_style') or 'auto' }} center-alignment-{{ preferences.get_value('center_alignment') and 'yes' or 'no' }}" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
 <head>
   <meta charset="UTF-8">
-  <meta name="description" content="SearXNG — a privacy-respecting, open metasearch engine">
+  <meta name="description" content="MeerkApp Search — a privacy-respecting, open metasearch engine">
-  <meta name="keywords" content="SearXNG, search, search engine, metasearch, meta search">
+  <meta name="keywords" content="MeerkApp Search, SearXNG, search, search engine, metasearch, meta search">
   <meta name="generator" content="searxng/{{ searx_version }}">
   <meta name="referrer" content="no-referrer">
   <meta name="robots" content="noarchive">
@@ -20,6 +20,7 @@
   {% if get_setting('server.limiter') or get_setting('server.public_instance') %}
   <link rel="stylesheet" href="{{ url_for('client_token', token=link_token) }}" type="text/css">
   {% endif %}
+  {% block styles %}{% endblock %}
   <!--[if gte IE 9]>-->
   <script src="{{ url_for('static', filename='js/searxng.head.min.js') }}" client_settings="{{ client_settings }}"></script>
   <!--<![endif]-->
@@ -63,22 +64,22 @@
     {% endblock %}
   </main>
   <footer>
+    <div>{% include 'simple/svg/meerk.svg' without context %}</div>
     <p>
-    {{ _('Powered by') }} <a href="{{ url_for('info', pagename='about') }}">searxng</a> - {{ searx_version }} — {{ _('a privacy-respecting, open metasearch engine') }}<br>
         <a href="{{ searx_git_url }}">{{ _('Source code') }}</a>
-        | <a href="{{ get_setting('brand.issue_url') }}">{{ _('Issue tracker') }}</a>
+        <span class="links_divider"></span><a href="{{ get_setting('brand.issue_url') }}">{{ _('Issue tracker') }}</a>
-        {% if enable_metrics %}| <a href="{{ url_for('stats') }}">{{ _('Engine stats') }}</a>{% endif %}
+        {% if enable_metrics %}<span class="links_divider"></span><a href="{{ url_for('stats') }}">{{ _('Engine stats') }}</a>{% endif %}
         {% if get_setting('brand.public_instances') %}
-        | <a href="{{ get_setting('brand.public_instances') }}">{{ _('Public instances') }}</a>
+        <span class="links_divider"></span><a href="{{ get_setting('brand.public_instances') }}">{{ _('Public instances') }}</a>
         {% endif %}
         {% if get_setting('general.privacypolicy_url') %}
-        | <a href="{{ get_setting('general.privacypolicy_url') }}">{{ _('Privacy policy') }}</a>
+        <span class="links_divider"></span><a href="{{ get_setting('general.privacypolicy_url') }}">{{ _('Privacy policy') }}</a>
         {% endif %}
         {% if get_setting('general.contact_url') %}
-        | <a href="{{ get_setting('general.contact_url') }}">{{ _('Contact instance maintainer') }}</a>
+        <span class="links_divider"></span><a href="{{ get_setting('general.contact_url') }}">{{ _('Contact instance maintainer') }}</a>
         {% endif %}
         {% for title, link in get_setting('brand.custom.links').items() %}
-        | <a href="{{ link }}">{{ _(title) }}</a>
+        <span class="links_divider"></span><a href="{{ link }}">{{ _(title) }}</a>
         {% endfor %}
     </p>
   </footer>

searx/templates/simple/categories.html

@@ -11,7 +11,7 @@
     'files': 'file-tray-full-outline',
     'social media': 'people-outline',
 }  -%}
-<div id="categories" class="search_categories">{{- '' -}}
+<div id="categories" class="search_categories" style="max-width: 44rem; display: flex; justify-content: space-between; align-items: center;">{{- '' -}}
     <div id="categories_container">
         {%- if not search_on_category_select or not display_tooltip -%}
             {%- for category in categories -%}
@@ -27,10 +27,15 @@
         {%- else -%}
             {%- for category in categories -%}{{- '\n' -}}
                 <button type="submit" name="category_{{ category }}" class="category category_button {% if category in selected_categories %}selected{% endif %}">
-                    {{- icon_big(category_icons[category]) if category in category_icons else icon_big('globe-outline') -}}
                     <div class="category_name">{{- _(category) -}}</div>{{- '' -}}
                 </button>{{- '' -}}
             {%- endfor -%}
+            <span class="links_divider"></span>
+            <a href="{{ url_for('preferences') }}">
+                <button type="button" class="category category_button">
+                    <div class="category_name">{{- _('Preferences') -}}</div>{{- '' -}}
+                </button>
+            </a>
             <input name="categories" id="selected-categories" type="hidden" />
             {{- '\n' -}}
         {%- endif -%}

searx/templates/simple/elements/answers.html

@@ -1,8 +1,8 @@
-    <div id="answers" role="complementary" aria-labelledby="answers-title">
+<div id="answers" role="complementary" aria-labelledby="answers-title">
   <h4 class="title" id="answers-title">{{ _('Answers') }} : </h4>
   {%- for answer in answers -%}
     <div class="answer">
       {%- include ("simple/" + (answer.template or "answer/legacy.html")) -%}
     </div>
   {%- endfor -%}
-    </div>
+</div>

searx/templates/simple/elements/corrections.html

@@ -1,4 +1,4 @@
-    <div id="corrections" role="complementary" aria-labelledby="corrections-title">
+<div id="corrections" role="complementary" aria-labelledby="corrections-title">
   <h4 id="corrections-title">{{ _('Try searching for:') }}</h4>
   {% for correction in corrections %}
   <div class="left">
@@ -16,4 +16,4 @@
     </form>
   </div>
   {% endfor %}
-    </div>
+</div>

searx/templates/simple/elements/infobox.html

@@ -2,7 +2,7 @@
   <h2 class="title"><bdi>{{ infobox.infobox }}</bdi></h2>
   {%- if infobox.img_src -%}<img src="{{ image_proxify(infobox.img_src) }}" title="{{ infobox.infobox|striptags }}" alt="{{ infobox.infobox|striptags }}">{%- endif -%}
   <p><bdi>{{ infobox.content | safe }}</bdi></p>
-  {%- if infobox.attributes -%}
+  <!-- {%- if infobox.attributes -%}
     <div class="attributes">
       {%- for attribute in infobox.attributes -%}
         <dl>
@@ -15,12 +15,21 @@
         </dl>
       {%- endfor -%}
     </div>
-  {%- endif -%}
+  {%- endif -%} -->
   {%- if infobox.urls -%}
     <div class="urls">
       <ul>
         {%- for url in infobox.urls -%}
-          <li class="url"><bdi><a href="{{ url.url }}" {%- if results_on_new_tab -%}target="_blank" rel="noopener noreferrer"{%- else -%}rel="noreferrer"{%- endif -%}>{{ url.title }}</a></bdi></li>
+            {%- if 'Wikipedia' == url.title or not 'Wiki' in url.title -%}
+                <li class="url">
+                    {%- if 'Wikipedia' in url.title -%}
+                        {% include 'simple/svg/wikipedia.svg' without context %}
+                    {%- else -%}
+                        {% include 'simple/svg/web.svg' without context %}
+                    {%- endif -%}
+                    <a href="{{ url.url }}" {%- if results_on_new_tab -%}target="_blank" rel="noopener noreferrer"{%- else -%}rel="noreferrer"{%- endif -%}>{{ url.title }}</a>
+                </li>
+            {%- endif -%}
         {%- endfor -%}
       </ul>
     </div>

searx/templates/simple/elements/suggestions.html

@@ -1,6 +1,6 @@
-<div id="suggestions" role="complementary" aria-labelledby="suggestions-title">
+{% from 'simple/icons.html' import icon_big %}
-  <details class="sidebar-collapsible">
+<div id="suggestions">
-    <summary class="title" id="suggestions-title">{{ _('Suggestions') }}</summary>
+    <h3>{{ _('Suggestions') }}</h3>
     <div class="wrapper">
       {%- for suggestion in suggestions -%}
         <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
@@ -15,9 +15,11 @@
           {%- if timeout_limit -%}
             <input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >
           {%- endif -%}
-          <input type="submit" class="suggestion" role="link" value="&bull; {{ suggestion.title }}">
+          <button type="submit" role="link">
+            <span>{{ suggestion.title }}</span>
+            {{ icon_big('search-outline') }}
+          </button>
         </form>
       {%- endfor -%}
     </div>
-  </details>
 </div>

searx/templates/simple/filters/languages.html

@@ -1,7 +1,7 @@
 <select class="language" id="language" name="language" aria-label="{{ _('Search language') }}">{{- '' -}}
   <option value="all"
           {%- if current_language == 'all' %} selected="selected" {%- endif -%}>
-          {{- _('Default language') }} [all] {{- '' -}}
+          {{- _('Default language') }}
   </option>{{- '' -}}
   <option value="auto"
           {%- if current_language == 'auto' %} selected="selected" {%- endif -%}>
@@ -10,9 +10,9 @@
   {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
     <option value="{{ sxng_tag }}"
             {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
-            {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
-            {{- ' ' -}}[{{sxng_tag}}]{{- ' ' -}}
             {%- if flag -%}{{ flag }}{%- endif -%}
+            {{- ' ' -}}
+            {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
     </option>
   {%- endfor -%}
 </select>

searx/templates/simple/index.html

@@ -2,7 +2,10 @@
 {% from 'simple/icons.html' import icon_big %}
 {% block content %}
 <div class="index">
-    <div class="title"><h1>SearXNG</h1></div>
+    <div class="title">
+        {% include 'simple/logo.min.svg' without context %}
+        <h1>MeerkApp Search</h1>
+    </div>
     {% include 'simple/simple_search.html' %}
 </div>
 {% endblock %}

searx/templates/simple/macros.html

@@ -47,7 +47,6 @@
 {%- macro result_sub_footer(result, proxify) -%}
 <div class="engines">
   {% for engine in result.engines %}<span>{{ engine }}</span>{% endfor %}
-  {{ icon_small('ellipsis-vertical-outline') + result_link(cache_url + result.url, _('cached'), "cache_link") }}&lrm; {% if proxify and proxify_results %} {{ result_link(proxify(result.url), _('proxied'), "proxyfied_link") }} {% endif %}
 </div>{{- '' -}}
 <div class="break"></div>{{- '' -}}
 {%- endmacro -%}

searx/templates/simple/page_with_header.html

@@ -1,7 +1,8 @@
 {%- set body_class = "page_with_header" -%}
 {%- extends "simple/base.html" -%}
 {%- block header -%}
-  <a href="{{ url_for('index') }}">{{- '' -}}
+  <a id="search_logo" href="{{ url_for('index') }}" tabindex="0" title="{{ _('Display the front page') }}">
-    <img class="logo" src="{{ url_for('static', filename='img/searxng.png') }}" alt="SearXNG">{{- '' -}}
+    <span hidden>MeerkApp Search</span>
-  </a>{{- '' -}}
+    {% include 'simple/logo.min.svg' without context %}
+  </a>
 {%- endblock -%}

searx/templates/simple/preferences.html

@@ -161,13 +161,13 @@
     {# tab: general #}
 
     {{- tab_header('maintab', 'general', _('General'), True) -}}
-    {%- if 'categories' not in locked_preferences -%}
+    <!-- {%- if 'categories' not in locked_preferences -%}
       <fieldset>
         <legend>{{- _('Default categories') -}}</legend>
         {% set display_tooltip = false %}
         {% include 'simple/categories.html' %}
       </fieldset>
-    {%- endif -%}
+    {%- endif -%} -->
     {%- if 'language' not in locked_preferences -%}
       {%- include 'simple/preferences/language.html' -%}
     {% endif %}

searx/templates/simple/preferences/theme.html

@@ -1,4 +1,4 @@
-<fieldset>{{- '' -}}
+<!-- <fieldset>{{- '' -}}
   <legend id="pref_theme">{{- _('Theme') -}}</legend>{{- '' -}}
   <div class="value">{{- '' -}}
     <select name="theme" aria-labelledby="pref_theme">{{- '' -}}
@@ -13,13 +13,13 @@
   <div class="description">
     {{- _('Change SearXNG layout') -}}
   </div>{{- '' -}}
-</fieldset>{{- '' -}}
+</fieldset>{{- '' -}} -->
 
 <fieldset>{{- '' -}}
   <legend id="pref_simple_style">{{- _('Theme style') -}}</legend>{{- '' -}}
   <div class="value">{{- '' -}}
     <select name="simple_style" aria-labelledby="pref_simple_style">
-      {%- for name in ['auto', 'light', 'dark', 'black'] -%}
+      {%- for name in ['auto', 'light', 'dark'] -%}
         <option value="{{ name }}"
                 {%- if name == preferences.get_value('simple_style') %} selected="selected" {%- endif -%}>
                 {{- _(name) | capitalize -}}

searx/templates/simple/results.html

@@ -8,7 +8,7 @@
     {% endfor %}
 {%- endmacro %}
 {% block title %}{% if query_in_title %}{{- q|e }} - {% endif %}{% endblock %}
-{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q|e }}" href="{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}&amp;pageno={{ pageno }}&amp;time_range={{ time_range }}&amp;language={{ current_language }}&amp;safesearch={{ safesearch }}&amp;format=rss">{% endblock %}
+{% block meta %}<link rel="alternate" type="application/rss+xml" title="MeerkApp Search: {{ q|e }}" href="{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}&amp;pageno={{ pageno }}&amp;time_range={{ time_range }}&amp;language={{ current_language }}&amp;safesearch={{ safesearch }}&amp;format=rss">{% endblock %}
 {% block content %}
 {% include 'simple/search.html' %}
 
@@ -19,32 +19,19 @@
 {% endif %}
 
 <div id="results" class="{{ only_template }}">
-
+    {% if answers and not infoboxes or q == 'ip' -%}
-  {%- if answers -%}
         {%- include 'simple/elements/answers.html' -%}
     {%- endif %}
 
     <div id="sidebar">
-
-        {%- if number_of_results != '0' -%}
-        <p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p>
-        {%- endif -%}
-
         {%- if infoboxes -%}
           <div id="infoboxes">
-            <details open class="sidebar-collapsible">
-              <summary class="title">{{ _('Info') }}</summary>
               {%- for infobox in infoboxes -%}
                 {%- include 'simple/elements/infobox.html' -%}
               {%- endfor -%}
-            </details>
           </div>
         {%- endif -%}
 
-        {%- if suggestions -%}
-          {%- include 'simple/elements/suggestions.html' -%}
-        {%- endif -%}
-
         {%- include 'simple/elements/engines_msg.html' -%}
 
         {%- if method == 'POST' -%}
@@ -59,7 +46,7 @@
     </div>
 
     {%- if corrections -%}
-      {%- include 'simple/elements/corrections.html' -%}
+      {%- include 'simple/elements/corrections' -%}
     {%- endif -%}
 
     <div id="urls" role="main">
@@ -76,6 +63,9 @@
     <div id="backToTop">
       <a href="#" aria-label="{{ _('Back to top') }}">{{ icon_small('chevron-up-outline') }}</a>
     </div>
+    {%- if suggestions -%}
+        {%- include 'simple/elements/suggestions.html' -%}
+    {%- endif -%}
     {% if paging %}
     <nav id="pagination" role="navigation">
         {% if pageno > 1 %}
@@ -96,6 +86,11 @@
                 </div>
             </form>
         {% endif %}
+        {% if pageno > 1 %}
+        <div class="page_count">
+            Page {{ pageno }}
+        </div>
+        {% endif %}
         {%- if results | count > 0 -%}
           <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" class="next_page">
               <div class="{% if rtl %}left{% else %}right{% endif %}">
@@ -120,29 +115,6 @@
             {% set pstart = pageno - 4 %}
             {% set pend = pageno + 6 %}
         {% endif %}
-
-        <div class="numbered_pagination">
-        {% for x in range(pstart, pend) %}
-            <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" class="page_number">
-                <input type="hidden" name="q" value="{{ q|e }}" >
-                {% for category in selected_categories %}
-                <input type="hidden" name="category_{{ category }}" value="1" >
-                {% endfor %}
-                <input type="hidden" name="pageno" value="{{ x }}" >
-                <input type="hidden" name="language" value="{{ current_language }}" >
-                <input type="hidden" name="time_range" value="{{ time_range }}" >
-                <input type="hidden" name="safesearch" value="{{ safesearch }}" >
-                <input type="hidden" name="theme" value="{{ theme }}" >
-                {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
-                {{- engine_data_form(engine_data) -}}
-                {% if pageno == x %}
-                <input role="link" class="page_number_current" type="button" value="{{ x }}">
-                {% else %}
-                <input role="link" class="page_number" type="submit" value="{{ x }}">
-                {% endif %}
-            </form>
-        {% endfor %}
-        </div>
     </nav>
     {% endif %}
 </div>

searx/templates/simple/search.html

@@ -1,8 +1,8 @@
 <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}" role="search">
   <div id="search_header">
     <a id="search_logo" href="{{ url_for('index') }}" tabindex="0" title="{{ _('Display the front page') }}">
-      <span hidden>SearXNG</span>
+      <span hidden>MeerkApp Search</span>
-      {% include 'simple/searxng-wordmark.min.svg' without context %}
+      {% include 'simple/logo.min.svg' without context %}
     </a>
     <div id="search_view">
       <div class="search_box">
@@ -14,11 +14,11 @@
     {% set display_tooltip = true %}
     {% include 'simple/categories.html' %}
   </div>
+  <input type="hidden" name="theme" value="{{ theme }}" >
+  {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
   <div class="search_filters">
     {% include 'simple/filters/languages.html' %}
     {% include 'simple/filters/time_range.html' %}
     {% include 'simple/filters/safesearch.html' %}
   </div>
-  <input type="hidden" name="theme" value="{{ theme }}" >
-  {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
 </form>

searx/templates/simple/searxng-wordmark.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="92mm" height="92mm" viewBox="0 0 92 92"><g transform="translate(-40.921 -17.417)"><circle cx="75.921" cy="53.903" r="30" fill="none" fill-opacity="1" stroke="#3050ff" stroke-width="10" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/><path d="M67.515 37.915a18 18 0 0 1 21.051 3.313 18 18 0 0 1 3.138 21.078" fill="none" fill-opacity="1" stroke="#3050ff" stroke-width="5" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/><rect width="18.846" height="39.963" x="3.706" y="122.09" ry="0" transform="rotate(-46.235)" opacity="1" fill="#3050ff" fill-opacity="1" stroke="none" stroke-width="8" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/></g></svg>

searx/templates/simple/svg/web.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="currentColor"><path fill-rule="evenodd" d="M1.5 10a8.5 8.5 0 1 0 17 0a8.5 8.5 0 0 0-17 0m16 0a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0" clip-rule="evenodd"/><path fill-rule="evenodd" d="M6.5 10c0 4.396 1.442 8 3.5 8s3.5-3.604 3.5-8s-1.442-8-3.5-8s-3.5 3.604-3.5 8m6 0c0 3.889-1.245 7-2.5 7s-2.5-3.111-2.5-7S8.745 3 10 3s2.5 3.111 2.5 7" clip-rule="evenodd"/><path d="m3.735 5.312l.67-.742q.16.144.343.281c1.318.988 3.398 1.59 5.665 1.59c1.933 0 3.737-.437 5.055-1.19a5.6 5.6 0 0 0 .857-.597l.65.76q-.448.383-1.01.704c-1.477.845-3.452 1.323-5.552 1.323c-2.47 0-4.762-.663-6.265-1.79a6 6 0 0 1-.413-.34m0 9.389l.67.74q.16-.145.343-.28c1.318-.988 3.398-1.59 5.665-1.59c1.933 0 3.737.436 5.055 1.19q.482.277.857.596l.65-.76a6.6 6.6 0 0 0-1.01-.704c-1.477-.844-3.452-1.322-5.552-1.322c-2.47 0-4.762.663-6.265 1.789q-.22.165-.413.34M2 10.5v-1h16v1z"/></g></svg>

searx/templates/simple/svg/wikipedia.svg

@@ -0,0 +1 @@
+<svg data-v-95d197fd="" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 98.05 98.05" data-test-id="entity-links-icon-wikipedia" data-v-e0e4a8d6=""><path d="m98.023 17.465-19.584-.056c-.004.711-.006 1.563-.017 2.121 1.664.039 5.922.822 7.257 4.327L66.92 67.155c-.919-2.149-9.643-21.528-10.639-24.02l9.072-18.818c1.873-2.863 5.455-4.709 8.918-4.843l-.01-1.968-18.841-.017c-.045.499.001 1.548-.068 2.069 5.315.144 7.215 1.334 5.941 4.508-2.102 4.776-6.51 13.824-7.372 15.475-2.696-5.635-4.41-9.972-7.345-16.064-1.266-2.823 1.529-3.922 4.485-4.004v-1.981l-21.82-.067c.016.93-.021 1.451-.021 2.131 3.041.046 6.988.371 8.562 3.019 2.087 4.063 9.044 20.194 11.149 24.514-2.685 5.153-9.207 17.341-11.544 21.913-3.348-7.43-15.732-36.689-19.232-44.241-1.304-3.218 3.732-5.077 6.646-5.213l.019-2.148L0 17.398c.005.646.027 1.71.029 2.187 4.025-.037 9.908 6.573 11.588 10.683 7.244 16.811 14.719 33.524 21.928 50.349.002.029 2.256.059 2.281.008 4.717-9.653 10.229-19.797 15.206-29.56L63.588 80.64c.005.004 2.082.016 2.093.007 7.962-18.196 19.892-46.118 23.794-54.933 1.588-3.767 4.245-6.064 8.543-6.194l.032-1.956-.027-.099z"></path></svg>

src/brand/searxng-wordmark.svg

@@ -1,56 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="169" height="169" viewBox="0 0 169 169" fill="none" xmlns="http://www.w3.org/2000/svg">
-<svg
+<rect width="169" height="169" rx="84.5" fill="#DDC66E"/>
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
+<path d="M27.1675 107.792C27.2298 107.968 27.2845 108.117 27.3301 108.239C27.3549 108.319 27.3847 108.413 27.4192 108.522C27.5274 108.862 27.6828 109.342 27.8799 109.929C28.2724 111.097 28.8384 112.711 29.5332 114.493C30.8088 117.764 32.9044 122.638 35.5647 125.988C39.4059 130.825 48.6596 141.152 62.45 142.451C72.2339 143.372 80.6869 141.793 94.9936 139.121C97.7677 138.603 100.762 138.043 104.028 137.453C115.311 135.415 122.559 132.272 127.59 128.824C130.1 127.104 131.898 125.416 133.251 124.011C133.739 123.505 134.207 122.993 134.555 122.613C134.653 122.506 134.742 122.409 134.818 122.326C135.014 122.113 135.153 121.966 135.264 121.853C135.368 121.747 135.414 121.706 135.417 121.703L135.417 121.703C137.255 120.089 138.763 117.75 139.856 115.738C141.063 113.514 142.219 110.831 143.093 107.945C144.712 102.596 145.934 94.6164 142.26 87.6965L135.194 91.4482L142.26 87.6965C141.058 85.4325 140.806 82.9203 140.489 77.3839C140.188 72.1331 139.791 65.2506 136.994 56.8658C131.083 39.1444 119.212 32.763 110.816 28.4849C100.463 23.2097 87.6848 22.6606 70.4863 27.3382C60.7228 29.9937 52.7592 35.8062 47.4471 40.5853C44.7414 43.0196 42.5981 45.2999 41.1182 46.9871C40.3759 47.8334 39.7942 48.5378 39.3857 49.047C39.2525 49.2132 39.1374 49.3589 39.041 49.4822C38.9648 49.5626 38.8796 49.6532 38.7861 49.7539C38.414 50.1547 37.908 50.717 37.3077 51.4283C36.1106 52.8466 34.518 54.8811 32.8561 57.4301C29.5746 62.4633 25.7912 69.8576 24.5427 78.7132C23.3643 87.0726 24.062 94.4201 25.0449 99.674C25.5383 102.311 26.1098 104.455 26.5729 105.977C26.8049 106.74 27.0106 107.35 27.1675 107.792Z" fill="white" stroke="white" stroke-width="16"/>
-   xmlns:cc="http://creativecommons.org/ns#"
+<path d="M31.1144 106.938C31.1418 107.026 31.181 107.152 31.2313 107.31C31.3336 107.632 31.4822 108.091 31.6716 108.655C32.0495 109.78 32.5938 111.332 33.2599 113.04C34.535 116.31 36.4495 120.67 38.6971 123.5C42.4528 128.23 50.7966 137.335 62.8252 138.468C72.0074 139.333 79.814 137.878 94.1333 135.209C96.9271 134.689 99.9689 134.122 103.317 133.517C114.185 131.554 120.869 128.581 125.329 125.524C127.556 123.998 129.148 122.505 130.37 121.236C130.818 120.771 131.236 120.315 131.581 119.937C131.687 119.822 131.786 119.713 131.877 119.615C132.305 119.151 132.57 118.88 132.778 118.697C134.078 117.555 135.316 115.716 136.34 113.83C137.422 111.837 138.471 109.406 139.264 106.786C140.786 101.759 141.648 95.0734 138.727 89.5724C137.042 86.3993 136.802 82.9637 136.496 77.6128C136.197 72.4047 135.817 65.9777 133.2 58.1315C127.807 41.9633 117.163 36.2081 109 32.0489C99.8589 27.3911 88.2004 26.6657 71.5361 31.198C62.6218 33.6225 55.2052 38.9862 50.1224 43.559C47.5563 45.8677 45.5233 48.031 44.1254 49.6247C43.4252 50.423 42.8812 51.082 42.5061 51.5497C42.3208 51.7808 42.1764 51.9654 42.0746 52.0975C41.9821 52.1935 41.862 52.3199 41.7173 52.4757C41.3845 52.8341 40.9208 53.3492 40.3645 54.0083C39.2537 55.3243 37.7637 57.2268 36.2068 59.6147C33.1144 64.358 29.6423 71.1942 28.5036 79.2716C27.3998 87.1008 28.0526 93.9993 28.9767 98.9385C29.4397 101.413 29.9739 103.413 30.3998 104.813C30.613 105.514 30.7995 106.066 30.9373 106.455C31.0062 106.649 31.063 106.802 31.1049 106.913C31.1082 106.922 31.1113 106.93 31.1144 106.938Z" fill="white" stroke="#363016" stroke-width="8"/>
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+<ellipse cx="8.59874" cy="20.7814" rx="8.59874" ry="20.7814" transform="matrix(0.975065 -0.221919 0.16002 0.987114 34.8319 75.0587)" fill="#3A3000"/>
-   xmlns:svg="http://www.w3.org/2000/svg"
+<path fill-rule="evenodd" clip-rule="evenodd" d="M79.2563 55.1454C70.889 56.4624 63.4929 68.8016 63.2351 81.8749C62.8188 102.954 86.7941 109.095 95.0138 90.015C98.4153 82.12 97.6753 68.6329 93.4928 62.2734C90.3345 57.4721 84.1488 54.3752 79.2563 55.1454ZM86.2016 63.5277C92.0024 69.1489 93.7735 81.5879 89.7703 88.5844C85.0649 96.8076 72.6879 97.3917 68.3234 89.5958L67.3846 87.919L68.4668 89.0386C72.2706 92.9739 77.5447 92.7211 82.4689 88.3676C88.4604 83.0704 89.62 73.2076 85.2736 64.5115C83.7162 61.3962 83.8529 61.251 86.2016 63.5277ZM79.6012 66.273C81.0355 67.9332 81.0867 71.4002 79.7195 74.3066C76.8233 80.4651 70.3974 78.7661 71.6269 72.1667C72.6488 66.6808 77.1066 63.3857 79.6012 66.273ZM121.66 89.5724C116.343 90.3067 113.319 94.6173 113.938 100.579C114.3 104.067 116.041 108.232 117.942 110.16C119.198 111.432 119.185 111.505 117.54 112.606C110.095 117.588 100.952 115.794 94.6196 108.108C93.0524 106.206 92.8903 106.245 93.614 108.352C97.4398 119.501 112.121 123.417 120.424 115.504C123.123 112.931 123.862 112.258 126.146 110.292C134.919 102.738 131.766 88.1769 121.66 89.5724Z" fill="#3A3000"/>
-   xmlns="http://www.w3.org/2000/svg"
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.547 82.0027C129.835 80.3863 129.545 72.574 126.922 63.4184C124.298 54.2627 118.893 47.7545 114.605 49.3709C110.317 50.9873 108.621 58.9637 111.089 68.5456C113.712 77.7013 120.851 84.1549 125.547 82.0027ZM123.231 78.2983C127.708 76.9352 127.556 68.4485 122.896 59.5299C122.322 58.4328 121.749 57.5253 121.62 57.5133C121.492 57.5014 121.775 58.3817 122.249 59.4695C125.259 66.3782 125.254 73.1231 122.237 76.9408C121.144 78.3246 121.508 78.8222 123.231 78.2983ZM115.5 67C117.5 67 119 62.5166 117.5 59.5299C116.476 58.0166 113.851 58.0625 113.5 61.5C113.201 64.4271 113.855 66.8465 115.5 67Z" fill="#3A3000"/>
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 92 92"
-   height="92mm"
-   width="92mm">
-  <defs
-     id="defs2" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-40.921303,-17.416526)"
-     id="layer1">
-    <circle
-       r="0"
-       style="fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       cy="92"
-       cx="75"
-       id="path3713" />
-    <circle
-       r="30"
-       cy="53.902557"
-       cx="75.921303"
-       id="path834"
-       style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <path
-       d="m 67.514849,37.91524 a 18,18 0 0 1 21.051475,3.312407 18,18 0 0 1 3.137312,21.078282"
-       id="path852"
-       style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       transform="rotate(-46.234709)"
-       ry="1.8669105e-13"
-       y="122.08995"
-       x="3.7063529"
-       height="39.963303"
-       width="18.846331"
-       id="rect912"
-       style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-  </g>
 </svg>