diff --git a/.gitignore b/.gitignore index e1460851f..572cee9ca 100644 --- a/.gitignore +++ b/.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 + diff --git a/searx/static/themes/smart/css/ltr-style.css b/searx/static/themes/smart/css/ltr-style.css index 5ea548b5a..a2c3a1971 100644 --- a/searx/static/themes/smart/css/ltr-style.css +++ b/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} \ No newline at end of file +*, :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; + } +} diff --git a/searx/static/themes/smart/css/rtl-style.css b/searx/static/themes/smart/css/rtl-style.css index e69de29bb..a2c3a1971 100644 --- a/searx/static/themes/smart/css/rtl-style.css +++ b/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; + } +} diff --git a/searx/static/themes/smart/js/app.js b/searx/static/themes/smart/js/app.js index 02525d0fb..e69de29bb 100644 --- a/searx/static/themes/smart/js/app.js +++ b/searx/static/themes/smart/js/app.js @@ -1 +0,0 @@ -console.log("test"); \ No newline at end of file diff --git a/searx/static/themes/smart/package-lock.json b/searx/static/themes/smart/package-lock.json index bf080bc35..a73d5c44d 100644 --- a/searx/static/themes/smart/package-lock.json +++ b/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/compressor-gzip": "^2.13.0", + "@parcel/transformer-sass": "^2.13.0", "concurrently": "^9.1.0", - "parcel": "^2.13.0", - "typescript": "^5.6.3" + "parcel": "^2.13.0" } }, "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" diff --git a/searx/static/themes/smart/package.json b/searx/static/themes/smart/package.json index 52976fc49..070e2e4ff 100644 --- a/searx/static/themes/smart/package.json +++ b/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" } diff --git a/searx/static/themes/smart/src/scss/_typography.scss b/searx/static/themes/smart/src/scss/_typography.scss new file mode 100644 index 000000000..e69de29bb diff --git a/searx/static/themes/smart/src/scss/definitions.scss b/searx/static/themes/smart/src/scss/definitions.scss new file mode 100644 index 000000000..2bf0aac97 --- /dev/null +++ b/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 - \ No newline at end of file diff --git a/searx/static/themes/smart/src/scss/ltr-style.scss b/searx/static/themes/smart/src/scss/ltr-style.scss index e69de29bb..ae1e0bb42 100644 --- a/searx/static/themes/smart/src/scss/ltr-style.scss +++ b/searx/static/themes/smart/src/scss/ltr-style.scss @@ -0,0 +1,3 @@ +@use './style.scss' with ($dir: 'ltr'); + +// Special LTR styles \ No newline at end of file diff --git a/searx/static/themes/smart/src/scss/mixins.scss b/searx/static/themes/smart/src/scss/mixins.scss new file mode 100644 index 000000000..be765b136 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/searx/static/themes/smart/src/scss/rtl-style.scss b/searx/static/themes/smart/src/scss/rtl-style.scss index e69de29bb..4b3fc21d7 100644 --- a/searx/static/themes/smart/src/scss/rtl-style.scss +++ b/searx/static/themes/smart/src/scss/rtl-style.scss @@ -0,0 +1,3 @@ +@use './style.scss' with ($dir: 'rtl'); + +// Special RTL styles \ No newline at end of file diff --git a/searx/static/themes/smart/src/scss/style.scss b/searx/static/themes/smart/src/scss/style.scss index e69de29bb..754f98c59 100644 --- a/searx/static/themes/smart/src/scss/style.scss +++ b/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; \ No newline at end of file