mirror of
https://github.com/parchlinuxB/Gitee.git
synced 2025-02-22 18:05:44 -05:00
add header and sidebar basics
This commit is contained in:
parent
cb3f9dba7b
commit
05b4e4a349
12 changed files with 577 additions and 64 deletions
1
searx/static/img/favicon.svg
Normal file
1
searx/static/img/favicon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 726 B |
1
searx/static/img/logo.svg
Normal file
1
searx/static/img/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="853.677" height="146.304" viewBox="0 0 225.869 38.71"><g aria-label="SearXNG" style="line-height:1.25" font-style="normal" font-weight="400" font-size="50.8px" font-family="sans-serif" fill="#487cff" fill-opacity="1" stroke="none" stroke-width=".264583"><path d="M56.494 102.704q-1.168-1.22-3.048-2.032t-4.42-.813q-3.15 0-5.08 1.32-1.93 1.27-1.93 3.455 0 2.337 3.708 3.607l7.671 2.641q3.963 1.321 5.842 3.404 1.88 2.083 1.88 5.13 0 4.065-2.185 7.011-2.184 2.896-5.943 4.42-3.76 1.524-8.484 1.524-5.334 0-9.042-1.778-3.709-1.829-5.537-5.131-.204-.356-.204-.711 0-.356.407-.61l4.013-2.438q.356-.254.762-.254.61 0 1.118.66 1.32 1.626 2.387 2.54 1.118.864 2.693 1.321 1.625.457 4.165.457 3.2 0 5.182-1.168 1.981-1.22 1.981-3.76 0-1.27-.914-2.082-.915-.864-2.947-1.575l-7.417-2.49q-3.657-1.218-5.588-3.555-1.88-2.388-1.88-5.436 0-3.759 2.134-6.655 2.134-2.895 5.69-4.47 3.607-1.575 7.874-1.575 4.369 0 7.67 1.575 3.354 1.524 5.182 3.962.407.508.407.762t-.356.458l-4.52 2.997q-.052.05-.204.05-.305 0-1.067-.761M77.004 132.37q-3.607 0-6.401-1.472-2.794-1.474-4.318-4.115-1.524-2.693-1.524-6.198 0-4.165 1.981-7.874 2.032-3.759 5.537-5.994 3.556-2.286 7.925-2.286 5.334 0 8.484 3.15t3.15 8.686q0 1.473-.204 2.845-.101.406-.355.61-.204.152-.813.152h-17.12q-.813 0-.813 2.184 0 2.388 1.524 3.709 1.575 1.27 4.064 1.27 1.93 0 3.607-.813t3.302-2.54q.254-.254.508-.254.153 0 .66.203l3.353 1.575q.61.203.61.66 0 .254-.254.66-2.946 3.303-5.893 4.573-2.895 1.27-7.01 1.27m6.451-16.56q1.22 0 1.22-1.981 0-1.93-1.169-3.251-1.168-1.372-3.251-1.372-2.54 0-4.521 1.93-1.93 1.88-2.235 4.674zM109.411 129.374q-3.048 2.997-8.331 2.997-3.556 0-5.588-1.829t-2.032-4.775q0-3.607 2.387-5.893 2.388-2.337 5.995-3.353 3.657-1.067 7.569-1.168l1.829-.153q.965 0 1.117-.965l.153-1.067q.05-.254.05-.812 0-3.048-3.505-3.048-4.013 0-5.943 3.15-.254.355-.66.355-.305 0-.458-.051l-4.927-1.168q-.508-.102-.508-.66 0-.509.254-1.017 3.352-5.486 12.649-5.486 5.486 0 8.026 1.93 2.591 1.93 2.591 5.334 0 .457-.102 1.473l-2.54 17.78q-.05.66-.203.813-.152.102-.711.102h-5.232q-.508 0-.66-.305t-.204-1.016l.05-1.32q0-.407-.253-.407-.254 0-.813.559m2.184-9.754v-.305q0-.203-.101-.254-.102-.101-.407-.05l-1.828.152q-2.947.203-5.487 1.473t-2.54 3.912q0 1.219.864 1.98.914.712 2.438.712 1.321 0 2.49-.356 1.168-.406 2.031-1.066 1.88-1.423 2.083-2.896zM123.864 131.863q-.61 0-.915-.356-.254-.355-.152-.914l3.505-24.943q.05-.457.152-.559.153-.152.56-.152h6.044q.915 0 .712 1.067l-.356 2.286v.203q0 .355.203.355.153 0 .457-.304 1.778-1.88 3.963-2.998 2.184-1.117 3.962-1.117 1.067 0 1.575.152.508.153.457.61l-.813 5.69q-.05.558-.203.71-.101.153-.406.102-1.727-.254-3.455-.254-1.32 0-2.794.711-1.473.66-2.54 1.778-1.016 1.067-1.168 2.134l-2.083 14.834q-.101.66-.355.812-.204.153-.966.153zM176.481 130.085q.457.813.457 1.219 0 .305-.254.457-.254.102-.762.102h-7.06q-.61 0-.966-.153-.305-.152-.508-.61l-5.639-11.734q-.254-.508-.508-.508-.152 0-.559.559l-9.042 11.836q-.254.407-.61.508-.304.102-1.066.102h-5.944q-1.016 0-1.016-.66 0-.458.762-1.525l13.005-16.306q.559-.61.559-1.067 0-.356-.102-.559l-8.484-16.56q-.152-.255-.152-.509 0-.508.762-.508h7.417q.66 0 .914.153.254.152.508.66l4.928 10.363q.152.407.355.407.204 0 .508-.407l8.027-10.566q.305-.407.559-.508.304-.102.965-.102h6.553q.61 0 .61.559 0 .406-.305.914l-12.599 15.647q-.508.66-.508.914 0 .203.153.508zM218.113 94.17q.355 0 .457.202.101.153.05.56l-5.13 36.372q-.05.356-.254.457-.153.102-.559.102h-5.182q-.66 0-1.168-.813l-13.106-22.708q-.153-.254-.305-.254-.305 0-.356.56l-3.15 22.402q-.1.508-.304.66-.153.153-.711.153h-5.588q-.813 0-.712-1.118l5.08-35.814q.102-.508.204-.61.152-.152.66-.152h6.147q.508 0 .762.254.305.203.559.711l11.988 21.184q.254.406.508.406.407 0 .458-.61l2.946-21.284q.05-.407.203-.508.203-.153.66-.153zM236.44 132.37q-4.572 0-7.925-1.93t-5.131-5.435q-1.727-3.556-1.727-8.331 0-6.3 2.489-11.532 2.49-5.283 7.061-8.382 4.572-3.099 10.516-3.099 4.064 0 7.163 1.575 3.15 1.575 4.876 4.166 1.728 2.54 1.83 5.435 0 .508-.102.762-.051.203-.254.254l-6.96 1.016h-.05q-.204 0-.356-.254-.102-.254-.254-1.016-.356-2.54-1.93-4.115-1.525-1.574-4.319-1.574-3.607 0-5.994 2.641-2.337 2.642-3.455 6.807-1.117 4.115-1.117 8.586 0 4.368 1.625 6.299 1.677 1.88 4.877 1.88 3.099 0 5.233-1.728t3.15-4.216l.304-1.423q.152-.254.152-.355 0-.305-.61-.305h-6.248q-.304 0-.406-.102-.102-.152-.05-.558l.456-4.166q.051-.559.508-.559l14.53.051q.609 0 .761.203.203.153.102.66l-2.49 17.577q-.05.66-.812.66h-1.524q-.457 0-.711-.152-.204-.152-.356-.61l-.864-3.708q-.05-.254-.355-.254t-.66.407q-1.677 2.083-4.37 3.454-2.692 1.372-6.603 1.372" style="-inkscape-font-specification:"Libre Franklin"" transform="translate(-29.722 -93.661)" font-style="normal" font-variant="normal" font-weight="400" font-stretch="normal" font-size="50.8px" font-family="Libre Franklin" fill="#487cff" fill-opacity="1" stroke-width=".264583"/></g></svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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 -
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,43 +56,66 @@
|
|||
#}
|
||||
<link rel="apple-touch-icon" href="/favicon.ico" />
|
||||
</head>
|
||||
<body id="{{ endpoint }}">
|
||||
<header>{% block header %} {% endblock %}</header>
|
||||
<main>
|
||||
{% if errors %}
|
||||
<div class="dialog-error" role="alert">
|
||||
<a href="#" class="close" aria-label="close" title="close">×</a>
|
||||
<ul>
|
||||
{% for message in errors %}
|
||||
<li>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<body>
|
||||
<div id="{{ endpoint }}" class="container">
|
||||
<div>
|
||||
{% block header %}{% endblock %}
|
||||
<main>
|
||||
{% if errors %}
|
||||
<div class="dialog-error" role="alert">
|
||||
<a
|
||||
href="#"
|
||||
class="close"
|
||||
aria-label="close"
|
||||
title="close"
|
||||
>×</a
|
||||
>
|
||||
<ul>
|
||||
{% for message in errors %}
|
||||
<li>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %} {% block content %} {% endblock %}
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
{{ _('a privacy-respecting, open metasearch engine') }}
|
||||
- {{ searx_version }}
|
||||
</p>
|
||||
<div class="links">
|
||||
{% if enable_metrics %}
|
||||
<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
|
||||
>
|
||||
{% endif %} {% if
|
||||
get_setting('general.privacypolicy_url') %}
|
||||
<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
|
||||
>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{% endif %} {% block content %} {% endblock %}
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
{{ _('a privacy-respecting, open metasearch engine') }} - {{
|
||||
searx_version }}
|
||||
</p>
|
||||
<div class="links">
|
||||
{% if enable_metrics %}
|
||||
<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
|
||||
>
|
||||
{% endif %} {% if get_setting('general.privacypolicy_url') %}
|
||||
<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
|
||||
>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<div class="container">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
inventore repellat totam eius consequatur neque laborum corrupti
|
||||
repellendus optio obcaecati! Et voluptates omnis, adipisci modi
|
||||
officiis aliquid, debitis perferendis illum enim tenetur sequi
|
||||
rerum at error expedita harum dolorum ex assumenda! Voluptatibus
|
||||
velit suscipit, aut voluptas fugit saepe natus eum?
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{# this file was generated by svg2jinja.js #}
|
||||
{%- set icons = {
|
||||
'home':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z"/></svg>',
|
||||
'config':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M9.95401 2.2106C11.2876 1.93144 12.6807 1.92263 14.0449 2.20785C14.2219 3.3674 14.9048 4.43892 15.9997 5.07103C17.0945 5.70313 18.364 5.75884 19.4566 5.3323C20.3858 6.37118 21.0747 7.58203 21.4997 8.87652C20.5852 9.60958 19.9997 10.736 19.9997 11.9992C19.9997 13.2632 20.5859 14.3902 21.5013 15.1232C21.29 15.7636 21.0104 16.3922 20.6599 16.9992C20.3094 17.6063 19.9049 18.1627 19.4559 18.6659C18.3634 18.2396 17.0943 18.2955 15.9997 18.9274C14.9057 19.559 14.223 20.6294 14.0453 21.7879C12.7118 22.067 11.3187 22.0758 9.95443 21.7906C9.77748 20.6311 9.09451 19.5595 7.99967 18.9274C6.90484 18.2953 5.63539 18.2396 4.54272 18.6662C3.61357 17.6273 2.92466 16.4164 2.49964 15.1219C3.41412 14.3889 3.99968 13.2624 3.99968 11.9992C3.99968 10.7353 3.41344 9.60827 2.49805 8.87524C2.70933 8.23482 2.98894 7.60629 3.33942 6.99923C3.68991 6.39217 4.09443 5.83576 4.54341 5.33257C5.63593 5.75881 6.90507 5.703 7.99967 5.07103C9.09364 4.43942 9.7764 3.3691 9.95401 2.2106ZM11.9997 14.9992C13.6565 14.9992 14.9997 13.6561 14.9997 11.9992C14.9997 10.3424 13.6565 8.99923 11.9997 8.99923C10.3428 8.99923 8.99967 10.3424 8.99967 11.9992C8.99967 13.6561 10.3428 14.9992 11.9997 14.9992Z"/></svg>',
|
||||
'donate':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M12.0049 22.0027C6.48204 22.0027 2.00488 17.5256 2.00488 12.0027C2.00488 6.4799 6.48204 2.00275 12.0049 2.00275C17.5277 2.00275 22.0049 6.4799 22.0049 12.0027C22.0049 17.5256 17.5277 22.0027 12.0049 22.0027ZM12.0049 7.76011L7.76224 12.0027L12.0049 16.2454L16.2475 12.0027L12.0049 7.76011Z"/></svg>',
|
||||
|
||||
}
|
||||
-%}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
{% extends "smart/base.html" %} {% block header %}
|
||||
{% from 'smart/icons.html' import icon_small %} {% extends "smart/base.html" %}
|
||||
{% block header %}
|
||||
|
||||
<div class="logo"></div>
|
||||
<div class="links"></div>
|
||||
<header>
|
||||
<a href="/" class="logo">
|
||||
{# - for times there's no logo, use the instance name
|
||||
<span>{{ instance_name }}</span>
|
||||
#}
|
||||
<img src="/static/img/logo.svg" alt="{{ instance_name }}" />
|
||||
</a>
|
||||
<div class="links">
|
||||
<a href="" class="link">{{icon_small('donate')}}</a>
|
||||
{% include 'smart/sidebar.html' %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% endblock %} {% block content %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>Test</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">{% include 'smart/search_box.html' %}</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
56
searx/templates/smart/search_box.html
Normal file
56
searx/templates/smart/search_box.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<form
|
||||
id="search"
|
||||
method="{{ method or 'POST' }}"
|
||||
action="{{ url_for('search') }}"
|
||||
role="search"
|
||||
>
|
||||
<div id="search_categories">
|
||||
<div class="categories">
|
||||
{% for category in selected_categories %}
|
||||
<label for="category_{{ category }}" class="js-only">
|
||||
<input type="checkbox" name="category_{{ category }}" />
|
||||
<span>{{ category }}</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="search_box">
|
||||
<input
|
||||
id="q"
|
||||
name="q"
|
||||
type="text"
|
||||
placeholder="{{ _('Search for...') }}"
|
||||
autocomplete="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
autocorrect="off"
|
||||
dir="auto"
|
||||
value="{{ q or '' }}"
|
||||
/>
|
||||
<button
|
||||
id="clear_search"
|
||||
type="reset"
|
||||
aria-label="{{ _('clear') }}"
|
||||
>
|
||||
<span class="js-only">Clear</span
|
||||
><span class="js-alt">{{ _('clear') }}</span>
|
||||
</button>
|
||||
<button
|
||||
id="send_search"
|
||||
type="submit"
|
||||
aria-label="{{ _('search') }}"
|
||||
>
|
||||
<span class="js-only">Search</span
|
||||
><span class="js-alt">{{ _('search') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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 %}
|
||||
</form>
|
||||
3
searx/templates/smart/sidebar.html
Normal file
3
searx/templates/smart/sidebar.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<details name="sidebar" class="sidebar_btn">
|
||||
<summary class="link config" tabindex="0">{{icon_small('config')}}</summary>
|
||||
</details>
|
||||
Loading…
Add table
Reference in a new issue