Create files and mixins

.gitignore

@@ -20,6 +20,7 @@ gh-pages/
 /package-lock.json
 **/node_modules
 **/.parcel-cache
+pnpm-lock.yaml
 
 .idea/
 
@@ -27,3 +28,4 @@ searx/version_frozen.py
 .dir-locals.el
 
 .python-version
+

searx/static/themes/smart/css/ltr-style.css

@@ -1 +1,182 @@
-footer{border-top:1px solid var(--border-color);background-color:var(--footer-bg-color);justify-content:space-between;align-items:center;padding:1rem;display:flex}footer p{margin:0}footer a{color:var(--footer-link-color)}footer a:hover{color:var(--footer-link-hover-color)}.search-filters{flex-wrap:wrap;gap:1rem;margin-bottom:1rem;display:flex}.search-filters>*{flex:1}.search-filters>:not(:last-child){margin-right:1rem}.search-filters>:last-child{margin-left:1rem}.search-filters>:first-child{margin-left:0}.search-filters>:last-child{margin-right:0}
+*, :before, :after {
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 0;
+}
+
+body {
+  line-height: inherit;
+  margin: 0;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button, input, optgroup, select, textarea {
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
+  -webkit-appearance: button;
+  background-color: #0000;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol, ul, menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+dialog {
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+button, [role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  vertical-align: middle;
+  display: block;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+@media (width >= 340px) {
+  .foo {
+    color: red;
+  }
+}
+
+@media (width >= 480px) {
+  .foo {
+    color: red;
+  }
+}

searx/static/themes/smart/css/rtl-style.css

@@ -0,0 +1,182 @@
+*, :before, :after {
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 0;
+}
+
+body {
+  line-height: inherit;
+  margin: 0;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button, input, optgroup, select, textarea {
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
+  -webkit-appearance: button;
+  background-color: #0000;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol, ul, menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+dialog {
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+button, [role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  vertical-align: middle;
+  display: block;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+@media (width >= 340px) {
+  .foo {
+    color: red;
+  }
+}
+
+@media (width >= 480px) {
+  .foo {
+    color: red;
+  }
+}

searx/static/themes/smart/js/app.js

@@ -1 +0,0 @@
-console.log("test");

searx/static/themes/smart/package-lock.json

@@ -1,14 +1,13 @@
 {
+    "name": "smart",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "devDependencies": {
-                "@parcel/compressor-brotli": "^2.13.0",
+                "@parcel/transformer-sass": "^2.13.0",
-                "@parcel/compressor-gzip": "^2.13.0",
                 "concurrently": "^9.1.0",
-                "parcel": "^2.13.0",
+                "parcel": "^2.13.0"
-                "typescript": "^5.6.3"
             }
         },
         "node_modules/@babel/code-frame": {
@@ -299,42 +298,6 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
-        "node_modules/@parcel/compressor-brotli": {
-            "version": "2.13.0",
-            "resolved": "https://registry.npmjs.org/@parcel/compressor-brotli/-/compressor-brotli-2.13.0.tgz",
-            "integrity": "sha512-q00c/i+hqZR8eXqgiOLoi8e2ZfPZxMCPw8ExhQzdOuZibDESbQK/xjGpo7kp0FZtvD6DMzFRUt9bnjTrbuYhLA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "@parcel/plugin": "2.13.0"
-            },
-            "engines": {
-                "node": ">= 16.0.0",
-                "parcel": "^2.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/parcel"
-            }
-        },
-        "node_modules/@parcel/compressor-gzip": {
-            "version": "2.13.0",
-            "resolved": "https://registry.npmjs.org/@parcel/compressor-gzip/-/compressor-gzip-2.13.0.tgz",
-            "integrity": "sha512-Q0lhryadm8oxT3nOz/dnu50B9X/hmMfMxp/rD7Bv46TTNGx3h6A+i+c8MVGr5Jv0OpvFXvnizO5E9FLjSO4mIA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "@parcel/plugin": "2.13.0"
-            },
-            "engines": {
-                "node": ">= 16.0.0",
-                "parcel": "^2.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/parcel"
-            }
-        },
         "node_modules/@parcel/compressor-raw": {
             "version": "2.13.0",
             "resolved": "https://registry.npmjs.org/@parcel/compressor-raw/-/compressor-raw-2.13.0.tgz",
@@ -1349,6 +1312,26 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/@parcel/transformer-sass": {
+            "version": "2.13.0",
+            "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.13.0.tgz",
+            "integrity": "sha512-juRKB9HJmQvQTrQ1OgT330b4rvTQtYsiDRjGxvFOX3MPoi3Qjwk+J0FobVWP+OpRsOm0+9HYULcIwMR00EbYdQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@parcel/plugin": "2.13.0",
+                "@parcel/source-map": "^2.1.1",
+                "sass": "^1.38.0"
+            },
+            "engines": {
+                "node": ">= 16.0.0",
+                "parcel": "^2.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
         "node_modules/@parcel/transformer-svg": {
             "version": "2.13.0",
             "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.13.0.tgz",
@@ -2129,6 +2112,22 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
+        "node_modules/chokidar": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+            "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "readdirp": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 14.16.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
         "node_modules/chrome-trace-event": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -2548,6 +2547,13 @@
                 "entities": "^4.5.0"
             }
         },
+        "node_modules/immutable": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+            "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/import-fresh": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3327,6 +3333,20 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/readdirp": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+            "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 14.16.0"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
         "node_modules/regenerator-runtime": {
             "version": "0.14.1",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -3385,6 +3405,27 @@
             ],
             "license": "MIT"
         },
+        "node_modules/sass": {
+            "version": "1.82.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.82.0.tgz",
+            "integrity": "sha512-j4GMCTa8elGyN9A7x7bEglx0VgSpNUG4W4wNedQ33wSMdnkqQCT8HTwOaVSV4e6yQovcu/3Oc4coJP/l0xhL2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chokidar": "^4.0.0",
+                "immutable": "^5.0.2",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "optionalDependencies": {
+                "@parcel/watcher": "^2.4.1"
+            }
+        },
         "node_modules/semver": {
             "version": "7.6.3",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -3408,6 +3449,16 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/source-map-js": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+            "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/srcset": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/srcset/-/srcset-5.0.1.tgz",
@@ -3533,6 +3584,8 @@
             "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
             "dev": true,
             "license": "Apache-2.0",
+            "optional": true,
+            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"

searx/static/themes/smart/package.json

@@ -13,6 +13,7 @@
         "build": "concurrently -n \"STYLE,SCRIPT\" -c \"bgRed.dim,bgBlue.dim\" -p \" {name} \" \"npm:style:build\" \"npm:script:build\""
     },
     "devDependencies": {
+        "@parcel/transformer-sass": "^2.13.0",
         "concurrently": "^9.1.0",
         "parcel": "^2.13.0"
     }

searx/static/themes/smart/src/scss/definitions.scss

@@ -0,0 +1,22 @@
+//  --- Definitions ---
+
+// - Colors -
+// Light theme
+
+// Dark theme
+
+// - Screens -
+
+$screen-xs: 340px;
+$screen-sm: 480px;
+$screen-md: 768px;
+$screen-lg: 992px;
+$screen-xl: 1200px;
+
+// - Rounded corners -
+
+$border-radius: 4px;
+$border-radius-sm: 2px;
+$border-radius-lg: 8px;
+
+// - Transitions -

searx/static/themes/smart/src/scss/ltr-style.scss

@@ -0,0 +1,3 @@
+@use './style.scss' with ($dir: 'ltr');
+
+// Special LTR styles

searx/static/themes/smart/src/scss/mixins.scss

@@ -0,0 +1,74 @@
+// Import all the definitions
+@use './definitions.scss' as *;
+
+$dir: ltr !default;
+
+// Corner radius mixin
+@mixin rounded($radius) {
+    @if $radius =="sm" {
+        border-radius: $border-radius-sm;
+    }
+
+    @else if $radius =="lg" {
+        border-radius: $border-radius-lg;
+    }
+
+    @else {
+        border-radius: $border-radius;
+    }
+}
+
+// Screens mixin
+@mixin screens($screens...) {
+    @each $screen in $screens {
+        @media (min-width: $screen) {
+            @content;
+        }
+    }
+}
+
+@include screens($screen-xs, $screen-sm) {
+    .foo {
+        color: red;
+    }
+}
+
+// -- Direction based mixins --
+
+// Float mixin
+@mixin float($float) {
+    @if $dir =='ltr' {
+        float: $float;
+    }
+
+    @else {
+        @if $float =='left' {
+            float: right;
+        }
+
+        @else if $float =='right' {
+            float: left;
+        }
+    }
+}
+
+// Margin mixin
+@mixin margin-left($margin) {
+    @if $dir =='ltr' {
+        margin-left: $margin;
+    }
+
+    @else {
+        margin-right: $margin;
+    }
+}
+
+@mixin margin-right($margin) {
+    @if $dir =='ltr' {
+        margin-right: $margin;
+    }
+
+    @else {
+        margin-left: $margin;
+    }
+}

searx/static/themes/smart/src/scss/rtl-style.scss

@@ -0,0 +1,3 @@
+@use './style.scss' with ($dir: 'rtl');
+
+// Special RTL styles

searx/static/themes/smart/src/scss/style.scss

@@ -0,0 +1,10 @@
+// In fiist place, Reset all browser default styles
+@forward './reset.scss';
+
+// Then, import all the definitions
+@use './definitions.scss';
+
+// Then, import all the mixins
+$dir: ltr !default;
+@forward './mixins.scss' with ($dir: $dir !default);
+@use './mixins.scss' as mixin;