mirror of
https://github.com/parchlinuxB/Gitee.git
synced 2025-02-22 18:05:44 -05:00
Add preferences page with data backup and restore section
- Create new preferences.html template with comprehensive settings layout - Implement SCSS styling for preferences page with grid-based design - Add data backup and restore section with preferences hash management - Include new database icon for data section - Update footer and icons templates to support new preferences page - Add settings header template for consistent search bar across pages
This commit is contained in:
parent
43ad9c8b97
commit
6bf060df92
9 changed files with 781 additions and 178 deletions
|
|
@ -739,7 +739,192 @@ img, video {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
footer .links a, main:has(.not-found) .button {
|
||||
#preferences {
|
||||
grid-template: "header links" min-content
|
||||
"main main"
|
||||
"footer footer" min-content
|
||||
/ 2fr 1fr;
|
||||
gap: 1rem;
|
||||
max-width: 1800px;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (width >= 90rem) {
|
||||
#preferences {
|
||||
padding: 1rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#preferences .header {
|
||||
grid-area: header !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#preferences .links {
|
||||
grid-area: links;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#preferences footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#preferences #preferences_form {
|
||||
grid-area: main;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-areas: "main backup";
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .madules-container {
|
||||
grid-area: main;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .madules-container select {
|
||||
background-color: var(--secondary-background-color);
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container {
|
||||
grid-area: backup;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box {
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .title {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .description {
|
||||
text-align: justify;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box > .btn {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box input[type="radio"]:checked + .data-page {
|
||||
margin-top: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page {
|
||||
background-color: var(--secondary-background-color);
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page .section {
|
||||
border-bottom: 1px solid var(--secondary-border-color);
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page :last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page h4 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page p {
|
||||
text-indent: 1rem;
|
||||
color: var(--secondary-text-color);
|
||||
text-align: justify;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page input {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: .5rem;
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page .sidebyside {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page .sidebyside input {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#preferences #preferences_form :is(.madules-container, .backup-box) {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
fieldset .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: 0 .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
fieldset .container .name {
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
fieldset .container .name svg {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
fieldset .container select {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: .5rem;
|
||||
max-width: 250px;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
fieldset .description {
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
margin: 1rem 1rem 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
footer .footer-links a, main:has(.not-found) .button {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--filled-text-color);
|
||||
border-radius: 9999px;
|
||||
|
|
@ -895,19 +1080,6 @@ main:has(.not-found) .button {
|
|||
}
|
||||
}
|
||||
|
||||
#results > .links {
|
||||
grid-area: links;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#results > .links :is(.link, .sidebar_btn) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#results footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
|
@ -992,6 +1164,19 @@ main:has(.not-found) .button {
|
|||
grid-template-columns: 2fr 0fr 1fr;
|
||||
}
|
||||
|
||||
.links {
|
||||
grid-area: links;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.links :is(.link, .sidebar_btn) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
body:has(.sidebar_btn[open]) {
|
||||
background-color: var(--background-color);
|
||||
gap: .5rem;
|
||||
|
|
@ -1053,50 +1238,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset {
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: 0 .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container .name {
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container .name svg {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container select {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: .5rem;
|
||||
max-width: 250px;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .description {
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
margin: 1rem 1rem 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
#sidebar > .container .about {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 1rem;
|
||||
|
|
@ -1132,7 +1273,7 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
footer .links {
|
||||
footer .footer-links {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
|
|
@ -685,7 +685,192 @@ img, video {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
footer .links a, main:has(.not-found) .button {
|
||||
#preferences {
|
||||
grid-template: "header links" min-content
|
||||
"main main"
|
||||
"footer footer" min-content
|
||||
/ 2fr 1fr;
|
||||
gap: 1rem;
|
||||
max-width: 1800px;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (width >= 90rem) {
|
||||
#preferences {
|
||||
padding: 1rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#preferences .header {
|
||||
grid-area: header !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#preferences .links {
|
||||
grid-area: links;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#preferences footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#preferences #preferences_form {
|
||||
grid-area: main;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-areas: "main backup";
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .madules-container {
|
||||
grid-area: main;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .madules-container select {
|
||||
background-color: var(--secondary-background-color);
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container {
|
||||
grid-area: backup;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box {
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .title {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .description {
|
||||
text-align: justify;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box > .btn {
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box input[type="radio"]:checked + .data-page {
|
||||
margin-top: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page {
|
||||
background-color: var(--secondary-background-color);
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page .section {
|
||||
border-bottom: 1px solid var(--secondary-border-color);
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page :last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page h4 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page p {
|
||||
text-indent: 1rem;
|
||||
color: var(--secondary-text-color);
|
||||
text-align: justify;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page input {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: .5rem;
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page .sidebyside {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preferences #preferences_form .backup-container .backup-box .data-box .data-page .sidebyside input {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#preferences #preferences_form :is(.madules-container, .backup-box) {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
fieldset .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: 0 .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
fieldset .container .name {
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
fieldset .container .name svg {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
fieldset .container select {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: .5rem;
|
||||
max-width: 250px;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
fieldset .description {
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
margin: 1rem 1rem 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
footer .footer-links a, main:has(.not-found) .button {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--filled-text-color);
|
||||
border-radius: 9999px;
|
||||
|
|
@ -841,19 +1026,6 @@ main:has(.not-found) .button {
|
|||
}
|
||||
}
|
||||
|
||||
#results > .links {
|
||||
grid-area: links;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#results > .links :is(.link, .sidebar_btn) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#results footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
|
@ -938,6 +1110,19 @@ main:has(.not-found) .button {
|
|||
grid-template-columns: 2fr 0fr 1fr;
|
||||
}
|
||||
|
||||
.links {
|
||||
grid-area: links;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.links :is(.link, .sidebar_btn) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
body:has(.sidebar_btn[open]) {
|
||||
background-color: var(--background-color);
|
||||
gap: .5rem;
|
||||
|
|
@ -999,50 +1184,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset {
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: 0 .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container .name {
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container .name:not(#pref_safesearch)[tooltip]:after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container .name svg {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .container select {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: .5rem;
|
||||
max-width: 250px;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
#sidebar > .container fieldset .description {
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
margin: 1rem 1rem 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
#sidebar > .container .about {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 1rem;
|
||||
|
|
@ -1078,7 +1219,7 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
footer .links {
|
||||
footer .footer-links {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ const svgList = {
|
|||
close: "node_modules/remixicon/icons/System/close-line.svg",
|
||||
plugin: "node_modules/remixicon/icons/Development/puzzle-2-fill.svg",
|
||||
info: "node_modules/remixicon/icons/System/information-2-fill.svg",
|
||||
database: "node_modules/remixicon/icons/Device/database-2-fill.svg",
|
||||
};
|
||||
|
||||
const ejs = require("ejs"),
|
||||
|
|
|
|||
189
searx/static/themes/smart/src/scss/preferences.scss
Normal file
189
searx/static/themes/smart/src/scss/preferences.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
@use 'mixins.scss' as mixin;
|
||||
@use 'definitions.scss' as *;
|
||||
|
||||
#preferences {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"header links"
|
||||
"main main"
|
||||
"footer footer";
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
max-width: 1800px;
|
||||
overflow-y: auto;
|
||||
|
||||
@include mixin.screens($screen-xl) {
|
||||
padding: 1rem 4rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.links {
|
||||
grid-area: links;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#preferences_form {
|
||||
display: grid;
|
||||
grid-area: main;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-areas: "main backup";
|
||||
|
||||
.madules-container {
|
||||
grid-area: main;
|
||||
padding: 1rem;
|
||||
|
||||
select {
|
||||
background-color: var(--secondary-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.backup-container {
|
||||
grid-area: backup;
|
||||
|
||||
.backup-box {
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 2rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
&>.btn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.data-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
input[type="radio"]:checked+.data-page {
|
||||
margin-top: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.data-page {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
display: none;
|
||||
@include mixin.rounded();
|
||||
background-color: var(--secondary-background-color);
|
||||
|
||||
.section {
|
||||
padding: .5rem 0;
|
||||
border-bottom: 1px solid var(--secondary-border-color);
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
text-indent: 1rem;
|
||||
font-size: .9rem;
|
||||
color: var(--secondary-text-color);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(sm);
|
||||
padding: .5rem 1rem;
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.sidebyside {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(.madules-container, .backup-box) {
|
||||
background-color: var(--background-color);
|
||||
@include mixin.rounded(lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
padding: 0 .5rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
align-items: center;
|
||||
|
||||
&:not(#pref_safesearch)[tooltip]::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
padding: .5rem 1rem;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(sm);
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 1rem 1rem 0;
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,8 @@ $dir: ltr !default;
|
|||
@forward './results/default';
|
||||
@forward './results/images';
|
||||
|
||||
@forward './preferences';
|
||||
|
||||
@function toRem($value) {
|
||||
@return floor($value / 16) * 1rem;
|
||||
}
|
||||
|
|
@ -202,19 +204,6 @@ main:has(.not-found) {
|
|||
padding: 0 4rem;
|
||||
}
|
||||
|
||||
&>.links {
|
||||
grid-area: links;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
|
||||
:is(.link, .sidebar_btn) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
|
@ -302,6 +291,19 @@ main:has(.not-found) {
|
|||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
grid-area: links;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
|
||||
:is(.link, .sidebar_btn) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
body:has(.sidebar_btn[open]) {
|
||||
padding: .5rem;
|
||||
gap: .5rem;
|
||||
|
|
@ -364,51 +366,6 @@ body:has(.sidebar_btn[open]) {
|
|||
@include mixin.rounded(full);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: .5rem;
|
||||
padding: .5rem 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
padding: 0 .5rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
align-items: center;
|
||||
|
||||
&:not(#pref_safesearch)[tooltip]::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
padding: .5rem 1rem;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(sm);
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 1rem 1rem 0;
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: var(--background-color);
|
||||
overflow: hidden;
|
||||
|
|
@ -444,7 +401,7 @@ footer {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.links {
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{{ _('a privacy-respecting, open metasearch engine') }} - {{
|
||||
searx_version }}
|
||||
</p>
|
||||
<div class="links">
|
||||
<div class="footer-links">
|
||||
{% if enable_metrics %}
|
||||
<a href="{{ url_for('stats') }}">{{ _('Engine stats') }}</a>{% endif %}
|
||||
{% if get_setting('brand.public_instances') %}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
'close':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>',
|
||||
'plugin':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4C14 4.35064 13.9398 4.68722 13.8293 5H20C20.5523 5 21 5.44772 21 6V9.12602C21 9.43517 20.857 9.72694 20.6127 9.91635C20.3683 10.1058 20.0501 10.1715 19.7507 10.0945C19.5119 10.033 19.2605 10 19 10C17.3431 10 16 11.3431 16 13C16 14.6569 17.3431 16 19 16C19.2605 16 19.5119 15.967 19.7507 15.9055C20.0501 15.8285 20.3683 15.8942 20.6127 16.0836C20.857 16.2731 21 16.5648 21 16.874V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H8.17071C8.06015 4.68722 8 4.35064 8 4Z"/></svg>',
|
||||
'info':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 9.5C12.8284 9.5 13.5 8.82843 13.5 8C13.5 7.17157 12.8284 6.5 12 6.5C11.1716 6.5 10.5 7.17157 10.5 8C10.5 8.82843 11.1716 9.5 12 9.5ZM14 15H13V10.5H10V12.5H11V15H10V17H14V15Z"/></svg>',
|
||||
'database':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M21 9.5V12.5C21 14.9853 16.9706 17 12 17C7.02944 17 3 14.9853 3 12.5V9.5C3 11.9853 7.02944 14 12 14C16.9706 14 21 11.9853 21 9.5ZM3 14.5C3 16.9853 7.02944 19 12 19C16.9706 19 21 16.9853 21 14.5V17.5C21 19.9853 16.9706 22 12 22C7.02944 22 3 19.9853 3 17.5V14.5ZM12 12C7.02944 12 3 9.98528 3 7.5C3 5.01472 7.02944 3 12 3C16.9706 3 21 5.01472 21 7.5C21 9.98528 16.9706 12 12 12Z"/></svg>',
|
||||
|
||||
}
|
||||
-%}
|
||||
|
|
|
|||
47
searx/templates/smart/madules/settings_header.html
Normal file
47
searx/templates/smart/madules/settings_header.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
{% from 'smart/icons.html' import icon_small %}
|
||||
|
||||
<form
|
||||
id="search"
|
||||
method="{{ method or 'POST' }}"
|
||||
action="{{ url_for('search') }}"
|
||||
role="search"
|
||||
class="header"
|
||||
>
|
||||
<div class="header">
|
||||
<a class="logo" href="/">
|
||||
<img src="/static/img/logo.svg" alt="{{ instance_name }}" />
|
||||
</a>
|
||||
<div class="search_box">
|
||||
<div class="icon">{{ icon_small('search') }}</div>
|
||||
<input
|
||||
id="q"
|
||||
name="q"
|
||||
type="text"
|
||||
placeholder="{{ _('Search for...') }}"
|
||||
tabindex="1"
|
||||
autocomplete="off"
|
||||
autocapitalize="none"
|
||||
spellcheck="false"
|
||||
autocorrect="off"
|
||||
dir="auto"
|
||||
value="{{ q or '' }}"
|
||||
/>
|
||||
<button
|
||||
id="clear_search"
|
||||
type="reset"
|
||||
aria-label="{{ _('clear') }}"
|
||||
class="hide_if_nojs"
|
||||
>
|
||||
<span class="js-only">{{ icon_small('close') }}</span
|
||||
><span class="js-alt">{{ _('clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="theme" value="{{ theme }}" />
|
||||
{% if timeout_limit %}<input
|
||||
type="hidden"
|
||||
name="timeout_limit"
|
||||
value="{{ timeout_limit|e }}"
|
||||
/>{% endif %}
|
||||
<input type="hidden" name="category_general" />
|
||||
</form>
|
||||
126
searx/templates/smart/preferences.html
Normal file
126
searx/templates/smart/preferences.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
{% from 'smart/icons.html' import icon_small, icon_big %}{% extends
|
||||
"smart/base.html" %} {% block body %} {% include
|
||||
'smart/madules/settings_header.html' %}
|
||||
<div class="links">
|
||||
<a href="" class="link">{{icon_small('donate')}}</a>
|
||||
</div>
|
||||
<form
|
||||
id="preferences_form"
|
||||
method="post"
|
||||
action="{{ url_for('preferences') }}"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="madules-container">
|
||||
{% if 'language' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/language.html' -%} {% endif %} {% if
|
||||
'autocomplete' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/autocomplete.html' -%} {% endif %} {% if
|
||||
'safesearch' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/safe_search.html' -%} {% endif %} {% if
|
||||
'ui_locale' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/interface_lang.html' -%} {% endif %} {% if
|
||||
'results_on_new_tab' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/results_on_new_tab.html' -%} {% endif %} {% if
|
||||
'infinite_scroll' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/infinite_scroll.html' -%} {% endif %} {% if
|
||||
'method' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/http_method.html' -%} {% endif %} {% if
|
||||
'image_proxy' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/image_proxy.html' -%} {% endif %} {% if
|
||||
'query_in_title' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/title_query.html' -%} {% endif %} {% if
|
||||
'hotkeys' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/hotkeys.html' -%} {% endif %} {% if
|
||||
'urlformatting' not in locked_preferences %} {%- include
|
||||
'smart/madules/settings/url_formatting.html' -%} {% endif %}
|
||||
|
||||
<button class="btn primary" type="submit">{{- _('Save') -}}</button>
|
||||
</div>
|
||||
|
||||
<div class="backup-container">
|
||||
<div class="backup-box">
|
||||
<div class="title">
|
||||
{{ icon_big('database') }}<span>{{ _('Your Data')}}</span>
|
||||
</div>
|
||||
<p class="description">
|
||||
{{- _('This is the list of cookies and their values SearXNG is
|
||||
storing on your computer.') }}
|
||||
<br />{{- _('With that list, you can assess SearXNG
|
||||
transparency.') -}}
|
||||
</p>
|
||||
<label class="btn" for="save-cookies">Save to Restore</label>
|
||||
<label class="btn primary" for="restore-cookies">Restore</label>
|
||||
<div class="data-box">
|
||||
<input type="radio" id="save-cookies" name="cookies" hidden />
|
||||
<div class="data-page">
|
||||
<div class="section">
|
||||
<h4>
|
||||
{{- _('URL to restore your preferences in another
|
||||
browser') -}}:
|
||||
</h4>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value="{{- url_for('preferences', _external=True)
|
||||
-}}?preferences={{- preferences_url_params|e -}}"
|
||||
/>
|
||||
<p>
|
||||
{{- _('Specifying custom settings in the preferences
|
||||
URL can be used to sync preferences across
|
||||
devices.') -}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h4>{{- _('Copy preferences hash') -}}:</h4>
|
||||
<div class="sidebyside">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value="{{- preferences_url_params|e }}"
|
||||
/>
|
||||
<button
|
||||
id="copy-hash"
|
||||
class="btn primary"
|
||||
data-hash="{{- preferences_url_params|e -}}"
|
||||
data-copied-text="{{- _('Copied') -}}"
|
||||
>
|
||||
{{- _('Copy') -}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
id="restore-cookies"
|
||||
name="cookies"
|
||||
hidden
|
||||
/>
|
||||
<div class="data-page">
|
||||
<h4>
|
||||
{{- _('Insert copied preferences hash (without URL) to
|
||||
restore') -}}:
|
||||
</h4>
|
||||
<div class="sidebyside">
|
||||
<input
|
||||
type="text"
|
||||
id="pref-hash-input"
|
||||
name="preferences"
|
||||
placeholder="{{- _('Preferences hash') -}}"
|
||||
/>
|
||||
<button
|
||||
id="paste-hash"
|
||||
class="btn secondary"
|
||||
data-copied-text="{{- _('Copied') -}}"
|
||||
>
|
||||
{{- _('Paste') -}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="radio" name="cookies" hidden checked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% include 'smart/footer.html' %} {% endblock %}
|
||||
Loading…
Add table
Reference in a new issue