mirror of
https://github.com/parchlinuxB/Gitee.git
synced 2025-02-23 02:15:43 -05:00
more work on result layout
This commit is contained in:
parent
1cc62ac0cd
commit
9f18d4a2a1
10 changed files with 638 additions and 350 deletions
|
|
@ -171,23 +171,23 @@ img, video {
|
|||
|
||||
:root {
|
||||
--primary-color: #0290ee;
|
||||
--secondary-color: #ffd30d;
|
||||
--secondary-color: #f8b600;
|
||||
--background-color: #fff;
|
||||
--secondary-background-color: #f8f8f8;
|
||||
--text-color: #000;
|
||||
--filled-text-color: #fff;
|
||||
--border-color: gray;
|
||||
--border-color: #b3b3b3;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #0290ee;
|
||||
--secondary-color: #ffd30d;
|
||||
--secondary-color: #f8b600;
|
||||
--background-color: #fff;
|
||||
--secondary-background-color: #f8f8f8;
|
||||
--text-color: #000;
|
||||
--filled-text-color: #fff;
|
||||
--border-color: gray;
|
||||
--border-color: #b3b3b3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,6 +279,31 @@ body .body-container {
|
|||
grid-area: main;
|
||||
}
|
||||
|
||||
.links {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.links .link {
|
||||
border-radius: 9999px;
|
||||
height: min-content;
|
||||
padding: .5rem;
|
||||
transition: background-color .1s ease-in-out;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.links .link:is(:hover, :focus-within) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.links .link svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.links .link.config {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
|
||||
#index main, #None main {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -324,18 +349,35 @@ main:has(.not-found) .button {
|
|||
}
|
||||
|
||||
#results {
|
||||
grid-template: "search links"
|
||||
"search amount"
|
||||
grid-template: "search links" 5rem
|
||||
"search amount" min-content
|
||||
"results sidebox" 1fr
|
||||
"footer footer"
|
||||
/ 2fr 1fr;
|
||||
gap: 1rem;
|
||||
padding: 0 6rem;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#results .links {
|
||||
@media (width >= 992px) {
|
||||
#results {
|
||||
padding: 0 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#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 {
|
||||
|
|
@ -397,7 +439,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
|
|||
|
||||
#sidebar > .container h1 {
|
||||
text-align: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 9999px;
|
||||
padding: .25rem 0;
|
||||
|
|
@ -452,31 +493,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
|
|||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
.links {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.links .link {
|
||||
border-radius: 9999px;
|
||||
height: min-content;
|
||||
padding: .5rem;
|
||||
transition: background-color .1s ease-in-out;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.links .link:is(:hover, :focus-within) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.links .link svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.links .link.config {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -499,8 +515,86 @@ footer .links {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 9999px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
width: clamp(400px, 50vw, 40rem);
|
||||
padding: .25rem .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
.search_box {
|
||||
border-radius: 1rem;
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
.search_box .icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.search_box input {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
flex: 1;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.search_box input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_box button {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.search_box button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_box #clear_search {
|
||||
color: var(--border-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.search_box #clear_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_box #clear_search:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.search_box #send_search {
|
||||
background-color: var(--secondary-color);
|
||||
padding: .5rem 1.5rem;
|
||||
}
|
||||
|
||||
.search_box #send_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#search.screen #search_categories .categories {
|
||||
flex-flow: wrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -563,80 +657,13 @@ footer .links {
|
|||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#search.screen .search_box {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 9999px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: clamp(400px, 50vw, 40rem);
|
||||
margin-top: 1rem;
|
||||
padding: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
#search.screen .search_box {
|
||||
border-radius: 1rem;
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
#search.screen .search_box input {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
flex: 1;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box button {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box #clear_search {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box #clear_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box #send_search {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--filled-text-color);
|
||||
border-radius: 9999px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box #send_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.header {
|
||||
grid-area: search;
|
||||
padding: 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#search.header .header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -650,30 +677,79 @@ footer .links {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .header .logo img {
|
||||
#search.header .header .logo img, #search.header .header .search_box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search.header .header .search_box {
|
||||
justify-content: center;
|
||||
#search.header .selections {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .header .search_box input {
|
||||
#search.header .selections .categories {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .selections .categories .category {
|
||||
background-color: var(--background-color);
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#search.header .selections .categories .category.selected {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
#search.header .selections .filter-btn {
|
||||
cursor: pointer;
|
||||
color: var(--border-color);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .selections .filter-btn input {
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
#search.header .filters {
|
||||
opacity: 0;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
height: 0;
|
||||
transition: opacity .15s ease-in-out, height .1s ease-in-out;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#search.header .filters .filter {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 1rem;
|
||||
padding: .25rem .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#search.header:has(#filter:checked) .filters {
|
||||
opacity: 1;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"].switch {
|
||||
appearance: none;
|
||||
background-color: var(--secondary-background-color);
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: .5rem;
|
||||
border-radius: 9999px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
|
|
@ -685,7 +761,7 @@ input[type="checkbox"].switch {
|
|||
|
||||
input[type="checkbox"].switch:after {
|
||||
content: "";
|
||||
background-color: var(--text-color);
|
||||
background-color: var(--filled-text-color);
|
||||
border-radius: .5rem;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
|
|||
|
|
@ -171,23 +171,23 @@ img, video {
|
|||
|
||||
:root {
|
||||
--primary-color: #0290ee;
|
||||
--secondary-color: #ffd30d;
|
||||
--secondary-color: #f8b600;
|
||||
--background-color: #fff;
|
||||
--secondary-background-color: #f8f8f8;
|
||||
--text-color: #000;
|
||||
--filled-text-color: #fff;
|
||||
--border-color: gray;
|
||||
--border-color: #b3b3b3;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #0290ee;
|
||||
--secondary-color: #ffd30d;
|
||||
--secondary-color: #f8b600;
|
||||
--background-color: #fff;
|
||||
--secondary-background-color: #f8f8f8;
|
||||
--text-color: #000;
|
||||
--filled-text-color: #fff;
|
||||
--border-color: gray;
|
||||
--border-color: #b3b3b3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,6 +279,31 @@ body .body-container {
|
|||
grid-area: main;
|
||||
}
|
||||
|
||||
.links {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.links .link {
|
||||
border-radius: 9999px;
|
||||
height: min-content;
|
||||
padding: .5rem;
|
||||
transition: background-color .1s ease-in-out;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.links .link:is(:hover, :focus-within) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.links .link svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.links .link.config {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
|
||||
#index main, #None main {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -324,18 +349,35 @@ main:has(.not-found) .button {
|
|||
}
|
||||
|
||||
#results {
|
||||
grid-template: "search links"
|
||||
"search amount"
|
||||
grid-template: "search links" 5rem
|
||||
"search amount" min-content
|
||||
"results sidebox" 1fr
|
||||
"footer footer"
|
||||
/ 2fr 1fr;
|
||||
gap: 1rem;
|
||||
padding: 0 6rem;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#results .links {
|
||||
@media (width >= 992px) {
|
||||
#results {
|
||||
padding: 0 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#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 {
|
||||
|
|
@ -397,7 +439,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
|
|||
|
||||
#sidebar > .container h1 {
|
||||
text-align: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 9999px;
|
||||
padding: .25rem 0;
|
||||
|
|
@ -452,31 +493,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
|
|||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
.links {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.links .link {
|
||||
border-radius: 9999px;
|
||||
height: min-content;
|
||||
padding: .5rem;
|
||||
transition: background-color .1s ease-in-out;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.links .link:is(:hover, :focus-within) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.links .link svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.links .link.config {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -499,8 +515,86 @@ footer .links {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 9999px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
width: clamp(400px, 50vw, 40rem);
|
||||
padding: .25rem .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
.search_box {
|
||||
border-radius: 1rem;
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
.search_box .icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.search_box input {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
flex: 1;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.search_box input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_box button {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.search_box button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_box #clear_search {
|
||||
color: var(--border-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.search_box #clear_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_box #clear_search:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.search_box #send_search {
|
||||
background-color: var(--secondary-color);
|
||||
padding: .5rem 1.5rem;
|
||||
}
|
||||
|
||||
.search_box #send_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#search.screen #search_categories .categories {
|
||||
flex-flow: wrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -563,80 +657,13 @@ footer .links {
|
|||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#search.screen .search_box {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 9999px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: clamp(400px, 50vw, 40rem);
|
||||
margin-top: 1rem;
|
||||
padding: .5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
#search.screen .search_box {
|
||||
border-radius: 1rem;
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
#search.screen .search_box input {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
flex: 1;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box button {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box #clear_search {
|
||||
color: var(--text-color);
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box #clear_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.screen .search_box #send_search {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--filled-text-color);
|
||||
border-radius: 9999px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#search.screen .search_box #send_search:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search.header {
|
||||
grid-area: search;
|
||||
padding: 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#search.header .header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -650,30 +677,79 @@ footer .links {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .header .logo img {
|
||||
#search.header .header .logo img, #search.header .header .search_box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search.header .header .search_box {
|
||||
justify-content: center;
|
||||
#search.header .selections {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .header .search_box input {
|
||||
#search.header .selections .categories {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .selections .categories .category {
|
||||
background-color: var(--background-color);
|
||||
cursor: pointer;
|
||||
border-radius: 9999px;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#search.header .selections .categories .category.selected {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
#search.header .selections .filter-btn {
|
||||
cursor: pointer;
|
||||
color: var(--border-color);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#search.header .selections .filter-btn input {
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
#search.header .filters {
|
||||
opacity: 0;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
height: 0;
|
||||
transition: opacity .15s ease-in-out, height .1s ease-in-out;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#search.header .filters .filter {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 1rem;
|
||||
padding: .25rem .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#search.header:has(#filter:checked) .filters {
|
||||
opacity: 1;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"].switch {
|
||||
appearance: none;
|
||||
background-color: var(--secondary-background-color);
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: .5rem;
|
||||
border-radius: 9999px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
|
|
@ -685,7 +761,7 @@ input[type="checkbox"].switch {
|
|||
|
||||
input[type="checkbox"].switch:after {
|
||||
content: "";
|
||||
background-color: var(--text-color);
|
||||
background-color: var(--filled-text-color);
|
||||
border-radius: .5rem;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ const svgList = {
|
|||
news: "node_modules/remixicon/icons/Document/newspaper-fill.svg",
|
||||
music: "node_modules/remixicon/icons/Media/music-2-fill.svg",
|
||||
search: "node_modules/remixicon/icons/System/search-line.svg",
|
||||
close: "node_modules/remixicon/icons/System/close-line.svg",
|
||||
};
|
||||
|
||||
const ejs = require("ejs"),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
--secondary-background-color: #{$secondary-background-color};
|
||||
--text-color: #{$text-color};
|
||||
--filled-text-color: #{$filled-text-color};
|
||||
--border-color: #{color.mix($text-color, $background-color, 50%)};
|
||||
--border-color: #{color.mix($text-color, $background-color, 30%)};
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -22,6 +22,6 @@
|
|||
--secondary-background-color: #{$secondary-background-color-dark};
|
||||
--text-color: #{$text-color-dark};
|
||||
--filled-text-color: #{$filled-text-color-dark};
|
||||
--border-color: #{color.mix($text-color, $background-color, 50%)};
|
||||
--border-color: #{color.mix($text-color, $background-color, 30%)};
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
// - Colors -
|
||||
// Light theme
|
||||
$primary-color: #0290ee;
|
||||
$secondary-color: #ffd30d;
|
||||
$secondary-color: #f8b600;
|
||||
$background-color: #ffffff;
|
||||
$secondary-background-color: #f8f8f8;
|
||||
$text-color: #000000;
|
||||
|
|
|
|||
|
|
@ -91,6 +91,31 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
|
||||
.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(--background-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
&.config {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#index,
|
||||
#None {
|
||||
main {
|
||||
|
|
@ -149,17 +174,33 @@ main:has(.not-found) {
|
|||
#results {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-rows: 5rem min-content 1fr auto;
|
||||
grid-template-areas:
|
||||
"search links"
|
||||
"search amount"
|
||||
"results sidebox"
|
||||
"footer footer";
|
||||
gap: 1rem;
|
||||
padding: 0 6rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
max-width: 1800px;
|
||||
|
||||
.links {
|
||||
@include mixin.screens($screen-lg) {
|
||||
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 {
|
||||
|
|
@ -224,7 +265,6 @@ body:has(.sidebar_btn[open]) {
|
|||
font-size: 1.5rem;
|
||||
padding: .25rem 0;
|
||||
text-align: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(full);
|
||||
}
|
||||
|
|
@ -280,31 +320,6 @@ body:has(.sidebar_btn[open]) {
|
|||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
|
||||
.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(--background-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
&.config {
|
||||
transition: transform 1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -329,10 +344,87 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
.search_box {
|
||||
background-color: var(--background-color);
|
||||
padding: .25rem .5rem;
|
||||
width: clamp(400px, 50vw, 40rem);
|
||||
@include mixin.rounded(full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
|
||||
@include mixin.max-screens($screen-sm) {
|
||||
width: 70vw;
|
||||
@include mixin.rounded();
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include mixin.margin-left(.5rem);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: .5rem;
|
||||
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: .5rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
#clear_search {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--border-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: .5rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#send_search {
|
||||
background-color: var(--secondary-color);
|
||||
padding: .5rem 1.5rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search.screen {
|
||||
.search_box {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#search_categories .categories {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -394,81 +486,16 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
.search_box {
|
||||
background-color: var(--background-color);
|
||||
padding: .5rem;
|
||||
width: clamp(400px, 50vw, 40rem);
|
||||
@include mixin.rounded(full);
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
@include mixin.max-screens($screen-sm) {
|
||||
width: 70vw;
|
||||
@include mixin.rounded();
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: .5rem;
|
||||
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: .5rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
#clear_search {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: .5rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
#send_search {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--filled-text-color);
|
||||
@include mixin.rounded(full);
|
||||
padding: 0 1rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search.header {
|
||||
position: relative;
|
||||
grid-area: search;
|
||||
padding: 1rem 0;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
|
|
@ -485,26 +512,81 @@ footer {
|
|||
}
|
||||
|
||||
.search_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
.selections {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
.category {
|
||||
display: inline-block;
|
||||
background-color: var(--background-color);
|
||||
padding: .5rem 1rem;
|
||||
cursor: pointer;
|
||||
@include mixin.rounded(full);
|
||||
|
||||
&.selected {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--border-color);
|
||||
|
||||
input {
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
transition: opacity 150ms ease-in-out, height 100ms ease-in-out;
|
||||
|
||||
.filter {
|
||||
display: inline-block;
|
||||
background-color: var(--background-color);
|
||||
padding: .25rem .5rem;
|
||||
@include mixin.rounded();
|
||||
}
|
||||
}
|
||||
|
||||
&:has(#filter:checked) .filters {
|
||||
opacity: 1;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"].switch {
|
||||
appearance: none;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--secondary-background-color);
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
@include mixin.rounded(sm);
|
||||
@include mixin.rounded(full);
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
|
|
@ -522,7 +604,7 @@ input[type="checkbox"].switch {
|
|||
@include mixin.left(2.5px);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: var(--text-color);
|
||||
background-color: var(--filled-text-color);
|
||||
@include mixin.rounded(sm);
|
||||
transition: background-color 200ms ease-in-out,
|
||||
left 200ms ease-in-out,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
'news':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V10H22V19C22 20.6569 20.6569 22 19 22ZM18 12V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V12H18ZM5 6V12H11V6H5ZM5 13V15H15V13H5ZM5 16V18H15V16H5ZM7 8H9V10H7V8Z"/></svg>',
|
||||
'music':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M20 3V17C20 19.2091 18.2091 21 16 21C13.7909 21 12 19.2091 12 17C12 14.7909 13.7909 13 16 13C16.7286 13 17.4117 13.1948 18 13.5351V6H9V17C9 19.2091 7.20914 21 5 21C2.79086 21 1 19.2091 1 17C1 14.7909 2.79086 13 5 13C5.72857 13 6.41165 13.1948 7 13.5351V3H20Z"/></svg>',
|
||||
'search':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg>',
|
||||
'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>',
|
||||
|
||||
}
|
||||
-%}
|
||||
|
|
|
|||
43
searx/templates/smart/madules/filters.html
Normal file
43
searx/templates/smart/madules/filters.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<div class="filters">
|
||||
<select name="language" aria-label="{{ _('Search language') }}" class="filter">
|
||||
<option value="all"
|
||||
{%- if current_language == 'all' %} selected="selected" {%- endif -%}>
|
||||
{{- _('Default language') }} [all]
|
||||
</option>
|
||||
<option value="auto"
|
||||
{%- if current_language == 'auto' %} selected="selected" {%- endif -%}>
|
||||
{{- _('Auto-detect') }} ({{ search_language }})
|
||||
</option>
|
||||
{% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
|
||||
<option value="{{ sxng_tag }}"
|
||||
{%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
|
||||
{{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
|
||||
[{{sxng_tag}}]
|
||||
{%- if flag -%}{{ flag }}{%- endif -%}
|
||||
</option>
|
||||
{%- endfor -%}
|
||||
</select>
|
||||
<select name="time_range" aria-label="{{ _('Time range') }}" class="filter">
|
||||
<option id="time-range-anytime" value="" {{ "selected" if time_range=="" or not time_range else ""}}>
|
||||
{{- _('Anytime') -}}
|
||||
</option>
|
||||
<option id="time-range-day" value="day" {{ "selected" if time_range=="day" else ""}}>
|
||||
{{- _('Last day') -}}
|
||||
</option>
|
||||
<option id="time-range-week" value="week" {{ "selected" if time_range=="week" else ""}}>
|
||||
{{- _('Last week') -}}
|
||||
</option>
|
||||
<option id="time-range-month" value="month" {{ "selected" if time_range=="month" else ""}}>
|
||||
{{- _('Last month') -}}
|
||||
</option>
|
||||
<option id="time-range-year" value="year" {{ "selected" if time_range=="year" else ""}}>
|
||||
{{- _('Last year') -}}
|
||||
</option>
|
||||
</select>
|
||||
<select name="safesearch" aria-label="{{ _('SafeSearch') }}" class="filter">
|
||||
<option value="2" {% if safesearch == '2' %}selected="selected"{% endif %} aria-label="{{ _('Strict') }}">{{ _("SafeSearch") + ": " + _('Strict') }}</option>
|
||||
<option value="1" {% if safesearch == '1' %}selected="selected"{% endif %} aria-label="{{ _('Moderate') }}">{{ _("SafeSearch") + ": " + _('Moderate') }}</option>
|
||||
<option value="0" {% if safesearch == '0' %}selected="selected"{% endif %} aria-label="{{ _('None') }}">{{ _("SafeSearch") + ": " + _('None') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
value="{{ q or '' }}"
|
||||
/>
|
||||
<button id="clear_search" type="reset" aria-label="{{ _('clear') }}">
|
||||
<span class="js-only">Clear</span
|
||||
<span class="js-only">{{ icon_small('close') }}</span
|
||||
><span class="js-alt">{{ _('clear') }}</span>
|
||||
</button>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
{% from 'smart/icons.html' import icon_small %}
|
||||
|
||||
<form
|
||||
id="search"
|
||||
method="{{ method or 'POST' }}"
|
||||
|
|
@ -6,10 +8,11 @@
|
|||
class="header"
|
||||
>
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<a class="logo" href="/">
|
||||
<img src="/static/img/logo.svg" alt="{{ instance_name }}" />
|
||||
</div>
|
||||
</a>
|
||||
<div class="search_box">
|
||||
<div class="icon">{{ icon_small('search') }}</div>
|
||||
<input
|
||||
id="q"
|
||||
name="q"
|
||||
|
|
@ -29,24 +32,30 @@
|
|||
aria-label="{{ _('clear') }}"
|
||||
class="hide_if_nojs"
|
||||
>
|
||||
<span>c</span><span class="js-alt">{{ _('clear') }}</span>
|
||||
<span class="js-only">{{ icon_small('close') }}</span
|
||||
><span class="js-alt">{{ _('clear') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selections">
|
||||
<div class="categories"></div>
|
||||
<label for="filter">
|
||||
<input type="checkbox" id="filter-btn" hidden />
|
||||
<div class="filter-btn">
|
||||
{{ _('Filters') }} {{ icon_small('filter') }}
|
||||
</div>
|
||||
<div class="categories">
|
||||
{% for category in categories_as_tabs %}
|
||||
<button
|
||||
type="submit"
|
||||
name="category_{{ category }}"
|
||||
class="category {% if category in selected_categories %} selected {% endif %}"
|
||||
>
|
||||
{{ category}}
|
||||
</button>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
<label for="filter" class="filter-btn">
|
||||
<input type="checkbox" id="filter" class="switch" />
|
||||
<span> {{ _('Filters') }} </span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="filters">
|
||||
{% include 'simple/filters/languages.html' %} {% include
|
||||
'simple/filters/time_range.html' %} {% include
|
||||
'simple/filters/safesearch.html' %}
|
||||
</div>
|
||||
{% include 'smart/madules/filters.html' %}
|
||||
|
||||
<input type="hidden" name="theme" value="{{ theme }}" />
|
||||
{% if timeout_limit %}<input
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue