diff --git a/searx/static/img/favicon.svg b/searx/static/img/favicon.svg new file mode 100644 index 000000000..262414509 --- /dev/null +++ b/searx/static/img/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/searx/static/img/logo.svg b/searx/static/img/logo.svg new file mode 100644 index 000000000..8b13a027f --- /dev/null +++ b/searx/static/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/searx/static/themes/smart/css/ltr-style.css b/searx/static/themes/smart/css/ltr-style.css index 22c6029fd..a6b75b560 100644 --- a/searx/static/themes/smart/css/ltr-style.css +++ b/searx/static/themes/smart/css/ltr-style.css @@ -170,7 +170,7 @@ img, video { } :root { - --primary-color: #009688; + --primary-color: #0290ee; --secondary-color: #009688; --background-color: #fff; --secondary-background-color: #f5f5f5; @@ -182,35 +182,137 @@ img, video { :root { --primary-color: #0290ee; --secondary-color: #009688; - --background-color: #000; - --secondary-background-color: #0f0f0f; - --text-color: #fff; + --background-color: #fff; + --secondary-background-color: #f5f5f5; + --text-color: #000; --filled-text-color: #fff; } } +body { + gap: 0; + transition: padding .15s ease-in-out, gap .2s ease-in-out; + display: flex; + overflow: hidden; +} + +body .container { + background-color: var(--background-color); + color: var(--text-color); + border-radius: 1rem; + flex: 3; +} + +:focus-visible { + outline: 3px solid var(--primary-color); + outline-offset: .1rem; +} + #index { grid-template: "header" "main" 1fr "footer" / 1fr; height: 100svh; + transition: height .1s ease-in-out; display: grid; overflow: hidden; } #index header { grid-area: header; + justify-content: space-between; + align-items: center; + padding: 2rem; + display: flex; +} + +#index header .logo { + text-align: center; + font-size: 2rem; + display: block; +} + +#index header .logo img { + max-width: clamp(70px, 25vw, 150px); +} + +#index header .links { + display: flex; +} + +#index header .links .link { + border-radius: 9999px; + height: min-content; + padding: .5rem; + transition: background-color .1s ease-in-out; + display: inline-block; +} + +#index header .links .link:is(:hover, :focus-within) { + background-color: var(--secondary-background-color); +} + +#index header .links .link svg { + width: 1.5rem; +} + +#index header .links .link.config { + transition: transform 1s ease-in-out; } #index main { + flex-direction: column; grid-area: main; + justify-content: center; + align-items: center; + display: flex; } #index footer { grid-area: footer; } +body:has(.sidebar_btn[open]) { + background-color: var(--secondary-background-color); + gap: .5rem; + padding: .5rem; +} + +body:has(.sidebar_btn[open]) #sidebar { + flex: 1; + min-width: 340px; + padding: 1rem; +} + +body:has(.sidebar_btn[open]) #index { + height: calc(100svh - 1rem); +} + +body:has(.sidebar_btn[open]) header .links .link.config { + background-color: var(--secondary-background-color); + transform: rotate(60deg); +} + +#sidebar { + background: var(--background-color); + border-radius: 1rem; + flex: 0; + min-width: 0; + transition: flex .3s ease-in-out, min-width .3s ease-in-out, padding .2s ease-in-out; + position: relative; + overflow: hidden; +} + +#sidebar .container { + width: calc(100% - 2rem); + min-width: 308px; + height: calc(100% - 2rem); + transition: width .5s ease-in-out; + position: absolute; + overflow-y: auto; +} + footer { flex-wrap: wrap; justify-content: space-between; @@ -240,3 +342,38 @@ footer .links a { padding: .5rem 1rem; display: inline-block; } + +#search #search_categories .categories { + flex-flow: wrap; + gap: 1rem; + display: flex; +} + +#search #search_categories .categories label { + cursor: pointer; + align-items: center; + gap: .5rem; + display: flex; +} + +#search #search_box { + flex-direction: row; + gap: 1rem; + display: flex; +} + +@media (scripting: none) { + .js-only { + display: none; + } + + .js-alt { + display: inherit; + } +} + +@media (scripting: enabled) { + .js-alt { + display: none; + } +} diff --git a/searx/static/themes/smart/css/rtl-style.css b/searx/static/themes/smart/css/rtl-style.css index 22c6029fd..a6b75b560 100644 --- a/searx/static/themes/smart/css/rtl-style.css +++ b/searx/static/themes/smart/css/rtl-style.css @@ -170,7 +170,7 @@ img, video { } :root { - --primary-color: #009688; + --primary-color: #0290ee; --secondary-color: #009688; --background-color: #fff; --secondary-background-color: #f5f5f5; @@ -182,35 +182,137 @@ img, video { :root { --primary-color: #0290ee; --secondary-color: #009688; - --background-color: #000; - --secondary-background-color: #0f0f0f; - --text-color: #fff; + --background-color: #fff; + --secondary-background-color: #f5f5f5; + --text-color: #000; --filled-text-color: #fff; } } +body { + gap: 0; + transition: padding .15s ease-in-out, gap .2s ease-in-out; + display: flex; + overflow: hidden; +} + +body .container { + background-color: var(--background-color); + color: var(--text-color); + border-radius: 1rem; + flex: 3; +} + +:focus-visible { + outline: 3px solid var(--primary-color); + outline-offset: .1rem; +} + #index { grid-template: "header" "main" 1fr "footer" / 1fr; height: 100svh; + transition: height .1s ease-in-out; display: grid; overflow: hidden; } #index header { grid-area: header; + justify-content: space-between; + align-items: center; + padding: 2rem; + display: flex; +} + +#index header .logo { + text-align: center; + font-size: 2rem; + display: block; +} + +#index header .logo img { + max-width: clamp(70px, 25vw, 150px); +} + +#index header .links { + display: flex; +} + +#index header .links .link { + border-radius: 9999px; + height: min-content; + padding: .5rem; + transition: background-color .1s ease-in-out; + display: inline-block; +} + +#index header .links .link:is(:hover, :focus-within) { + background-color: var(--secondary-background-color); +} + +#index header .links .link svg { + width: 1.5rem; +} + +#index header .links .link.config { + transition: transform 1s ease-in-out; } #index main { + flex-direction: column; grid-area: main; + justify-content: center; + align-items: center; + display: flex; } #index footer { grid-area: footer; } +body:has(.sidebar_btn[open]) { + background-color: var(--secondary-background-color); + gap: .5rem; + padding: .5rem; +} + +body:has(.sidebar_btn[open]) #sidebar { + flex: 1; + min-width: 340px; + padding: 1rem; +} + +body:has(.sidebar_btn[open]) #index { + height: calc(100svh - 1rem); +} + +body:has(.sidebar_btn[open]) header .links .link.config { + background-color: var(--secondary-background-color); + transform: rotate(60deg); +} + +#sidebar { + background: var(--background-color); + border-radius: 1rem; + flex: 0; + min-width: 0; + transition: flex .3s ease-in-out, min-width .3s ease-in-out, padding .2s ease-in-out; + position: relative; + overflow: hidden; +} + +#sidebar .container { + width: calc(100% - 2rem); + min-width: 308px; + height: calc(100% - 2rem); + transition: width .5s ease-in-out; + position: absolute; + overflow-y: auto; +} + footer { flex-wrap: wrap; justify-content: space-between; @@ -240,3 +342,38 @@ footer .links a { padding: .5rem 1rem; display: inline-block; } + +#search #search_categories .categories { + flex-flow: wrap; + gap: 1rem; + display: flex; +} + +#search #search_categories .categories label { + cursor: pointer; + align-items: center; + gap: .5rem; + display: flex; +} + +#search #search_box { + flex-direction: row; + gap: 1rem; + display: flex; +} + +@media (scripting: none) { + .js-only { + display: none; + } + + .js-alt { + display: inherit; + } +} + +@media (scripting: enabled) { + .js-alt { + display: none; + } +} diff --git a/searx/static/themes/smart/scripts/svg2jinja.js b/searx/static/themes/smart/scripts/svg2jinja.js index a8eb5b4ef..4287f5dd7 100644 --- a/searx/static/themes/smart/scripts/svg2jinja.js +++ b/searx/static/themes/smart/scripts/svg2jinja.js @@ -1,5 +1,6 @@ const svgList = { - home: "node_modules/remixicon/icons/Buildings/home-4-fill.svg", + config: "node_modules/remixicon/icons/System/settings-3-fill.svg", + donate: "node_modules/remixicon/icons/Finance/copper-coin-fill.svg", }; const ejs = require("ejs"), diff --git a/searx/static/themes/smart/src/scss/definitions.scss b/searx/static/themes/smart/src/scss/definitions.scss index 01eb55100..bc01f575d 100644 --- a/searx/static/themes/smart/src/scss/definitions.scss +++ b/searx/static/themes/smart/src/scss/definitions.scss @@ -2,7 +2,7 @@ // - Colors - // Light theme -$primary-color: #009688; +$primary-color: #0290ee; $secondary-color: #009688; $background-color: #ffffff; $secondary-background-color: #f5f5f5; @@ -10,12 +10,12 @@ $text-color: #000000; $filled-text-color: #ffffff; // Dark theme -$primary-color-dark: #0290ee; -$secondary-color-dark: #009688; -$background-color-dark: #000000; -$secondary-background-color-dark: #0f0f0f; -$text-color-dark: #ffffff; -$filled-text-color-dark: #ffffff; +$primary-color-dark: $primary-color; +$secondary-color-dark: $secondary-color; +$background-color-dark: $background-color; +$secondary-background-color-dark: $secondary-background-color; +$text-color-dark: $text-color; +$filled-text-color-dark: $filled-text-color; // - Screens - diff --git a/searx/static/themes/smart/src/scss/style.scss b/searx/static/themes/smart/src/scss/style.scss index 62c9c9b0c..d1a33c8d5 100644 --- a/searx/static/themes/smart/src/scss/style.scss +++ b/searx/static/themes/smart/src/scss/style.scss @@ -12,6 +12,31 @@ $dir: ltr !default; // CSS Color varables @use 'colors'; +@function toPx($value) { + @return $value * 16px; +} + +body { + display: flex; + gap: 0; + overflow: hidden; + transition: padding 150ms ease-in-out, + gap 200ms ease-in-out; + + .container { + flex: 3; + background-color: var(--background-color); + color: var(--text-color); + @include mixin.rounded(); + } +} + + +*:focus-visible { + outline: 3px solid var(--primary-color); + outline-offset: .1rem; +} + #index { display: grid; grid-template-rows: auto 1fr auto; @@ -22,16 +47,57 @@ $dir: ltr !default; "footer"; height: 100svh; overflow: hidden; - + transition: height 100ms ease-in-out; header { grid-area: header; + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem; + + .logo { + font-size: 2rem; + display: block; + text-align: center; + + img { + max-width: clamp(70px, 25vw, 150px); + } + } + + .links { + display: flex; + + .link { + display: inline-block; + padding: 0.5rem; + height: min-content; + @include mixin.rounded(full); + transition: background-color 100ms ease-in-out; + + &:is(:hover, :focus-within) { + background-color: var(--secondary-background-color); + } + + svg { + width: 1.5rem; + } + + &.config { + transition: transform 1s ease-in-out; + } + } + } } main { - grid-area: main; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } footer { @@ -39,6 +105,49 @@ $dir: ltr !default; } } +body:has(.sidebar_btn[open]) { + padding: .5rem; + gap: .5rem; + background-color: var(--secondary-background-color); + + #sidebar { + flex: 1; + min-width: $screen-xs; + padding: 1rem; + } + + #index { + height: calc(100svh - 1rem); + } + + header .links .link.config { + background-color: var(--secondary-background-color); + transform: rotate(60deg); + } + +} + +#sidebar { + flex: 0; + min-width: 0; + @include mixin.rounded(); + overflow: hidden; + background: var(--background-color); + transition: flex 300ms ease-in-out, + min-width 300ms ease-in-out, + padding 200ms ease-in-out; + position: relative; + + .container { + width: calc(100% - 2rem); + height: calc(100% - 2rem); + overflow-y: auto; + position: absolute; + min-width: $screen-xs - toPx(2); + transition: width 500ms ease-in-out; + } +} + footer { display: flex; justify-content: space-between; @@ -65,4 +174,43 @@ footer { @include mixin.rounded(full) } } +} + +#search { + #search_categories .categories { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + + label { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + } + } + + #search_box { + display: flex; + flex-direction: row; + gap: 1rem; + } + +} + +@media (scripting: none) { + .js-only { + display: none; + } + + .js-alt { + display: inherit; + } +} + +@media (scripting: enabled) { + .js-alt { + display: none; + } } \ No newline at end of file diff --git a/searx/templates/smart/base.html b/searx/templates/smart/base.html index d39bc89a5..a26fdbfdf 100644 --- a/searx/templates/smart/base.html +++ b/searx/templates/smart/base.html @@ -56,43 +56,66 @@ #} - -
{% block header %} {% endblock %}
-
- {% if errors %} -
- + diff --git a/searx/templates/smart/icons.html b/searx/templates/smart/icons.html index 395717e89..036fdccce 100644 --- a/searx/templates/smart/icons.html +++ b/searx/templates/smart/icons.html @@ -1,6 +1,7 @@ {# this file was generated by svg2jinja.js #} {%- set icons = { - 'home':'', + 'config':'', + 'donate':'', } -%} diff --git a/searx/templates/smart/index.html b/searx/templates/smart/index.html index a37187781..15e18bf9b 100644 --- a/searx/templates/smart/index.html +++ b/searx/templates/smart/index.html @@ -1,16 +1,21 @@ -{% extends "smart/base.html" %} {% block header %} +{% from 'smart/icons.html' import icon_small %} {% extends "smart/base.html" %} +{% block header %} - -
+
+ +
+ {{icon_small('donate')}} + {% include 'smart/sidebar.html' %} +
+
{% endblock %} {% block content %} -
-
-
-

Test

-
-
-
+
{% include 'smart/search_box.html' %}
{% endblock %} diff --git a/searx/templates/smart/search_box.html b/searx/templates/smart/search_box.html new file mode 100644 index 000000000..e1f16bd3b --- /dev/null +++ b/searx/templates/smart/search_box.html @@ -0,0 +1,56 @@ + diff --git a/searx/templates/smart/sidebar.html b/searx/templates/smart/sidebar.html new file mode 100644 index 000000000..88b4e99be --- /dev/null +++ b/searx/templates/smart/sidebar.html @@ -0,0 +1,3 @@ +
+ {{icon_small('config')}} +