mirror of
https://github.com/searxng/searxng.git
synced 2025-03-13 07:52:40 +00:00
[web-client] simple theme: stylelint-prettier LESS source files
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
parent
a8ed79b730
commit
d29ca7d593
10 changed files with 79 additions and 40 deletions
|
@ -203,7 +203,9 @@ article.result-images .detail {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
|
#results.image-detail-open.scrolling
|
||||||
|
article.result-images[data-vim-selected]
|
||||||
|
.detail {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
a.result-images-source img {
|
a.result-images-source img {
|
||||||
|
|
|
@ -1,14 +1,17 @@
|
||||||
iframe[src^="https://w.soundcloud.com"] {
|
iframe[src^="https://w.soundcloud.com"]
|
||||||
|
{
|
||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe[src^="https://www.deezer.com"] {
|
iframe[src^="https://www.deezer.com"]
|
||||||
|
{
|
||||||
// The real size is 92px, but 94px are needed to avoid an inner scrollbar of
|
// The real size is 92px, but 94px are needed to avoid an inner scrollbar of
|
||||||
// the embedded HTML.
|
// the embedded HTML.
|
||||||
height: 94px;
|
height: 94px;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe[src^="https://www.mixcloud.com"] {
|
iframe[src^="https://www.mixcloud.com"]
|
||||||
|
{
|
||||||
// the embedded player from mixcloud has some quirks: initial there is an
|
// the embedded player from mixcloud has some quirks: initial there is an
|
||||||
// issue with an image URL that is blocked since it is an a Cross-Origin
|
// issue with an image URL that is blocked since it is an a Cross-Origin
|
||||||
// request. The alternative text (<img alt='Mixcloud Logo'> then cause an
|
// request. The alternative text (<img alt='Mixcloud Logo'> then cause an
|
||||||
|
@ -18,16 +21,19 @@ iframe[src^="https://www.mixcloud.com"] {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe[src^="https://bandcamp.com/EmbeddedPlayer"] {
|
iframe[src^="https://bandcamp.com/EmbeddedPlayer"]
|
||||||
|
{
|
||||||
// show playlist
|
// show playlist
|
||||||
height: 350px;
|
height: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] {
|
iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"]
|
||||||
|
{
|
||||||
// hide playlist
|
// hide playlist
|
||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe[src^="https://genius.com/songs"] {
|
iframe[src^="https://genius.com/songs"]
|
||||||
|
{
|
||||||
height: 65px;
|
height: 65px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
background: url('../img/searxng.png') no-repeat;
|
background: url("../img/searxng.png") no-repeat;
|
||||||
min-height: 4rem;
|
min-height: 4rem;
|
||||||
margin: 4rem auto;
|
margin: 4rem auto;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checked] {
|
input[type="checked"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -83,7 +83,9 @@ button.category_button {
|
||||||
}
|
}
|
||||||
|
|
||||||
// only used when JavaScript is disabled
|
// only used when JavaScript is disabled
|
||||||
.no-js #categories_container:has(button.category_button:focus-within) button.category_button {
|
.no-js
|
||||||
|
#categories_container:has(button.category_button:focus-within)
|
||||||
|
button.category_button {
|
||||||
&.selected {
|
&.selected {
|
||||||
color: var(--color-base-font);
|
color: var(--color-base-font);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
|
@ -63,7 +63,9 @@ on the /search URL and when the "center alignment" preference is enabled.
|
||||||
}
|
}
|
||||||
|
|
||||||
#search_header {
|
#search_header {
|
||||||
grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width);
|
grid-template-columns:
|
||||||
|
calc(50% - 4.5rem - var(--center-page-width) / 2)
|
||||||
|
3rem var(--center-page-width);
|
||||||
grid-template-areas: "na logo search" "na spacer categories";
|
grid-template-areas: "na logo search" "na spacer categories";
|
||||||
column-gap: 1.2rem; // from search.less
|
column-gap: 1.2rem; // from search.less
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -94,7 +96,9 @@ on the /search URL and when the "center alignment" preference is enabled.
|
||||||
&:not(.only_template_images, .image-detail-open) {
|
&:not(.only_template_images, .image-detail-open) {
|
||||||
// the gap is set in style.less
|
// the gap is set in style.less
|
||||||
.ltr-margin-left(1.5rem);
|
.ltr-margin-left(1.5rem);
|
||||||
grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;
|
grid-template-columns:
|
||||||
|
calc(var(--center-page-width) - @results-gap - @results-sidebar-width)
|
||||||
|
@results-sidebar-width;
|
||||||
|
|
||||||
#backToTop {
|
#backToTop {
|
||||||
.ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
|
.ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
|
||||||
|
|
|
@ -109,7 +109,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Image detail
|
// Image detail
|
||||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
|
#results.image-detail-open
|
||||||
|
article.result-images[data-vim-selected]
|
||||||
|
.detail
|
||||||
|
.result-images-labels
|
||||||
|
p {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
|
||||||
&.result-url {
|
&.result-url {
|
||||||
|
@ -125,7 +129,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// select HTML element
|
// select HTML element
|
||||||
@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
|
@supports (
|
||||||
|
(background-position-x: 100%) and
|
||||||
|
(
|
||||||
|
(appearance: none) or (-webkit-appearance: none) or
|
||||||
|
(-moz-appearance: none)
|
||||||
|
)
|
||||||
|
) {
|
||||||
select {
|
select {
|
||||||
border-width: 0 0 0 2rem;
|
border-width: 0 0 0 2rem;
|
||||||
background-position-x: -2rem;
|
background-position-x: -2rem;
|
||||||
|
|
|
@ -548,8 +548,7 @@ article[data-vim-selected].category-social {
|
||||||
"answers sidebar" min-content
|
"answers sidebar" min-content
|
||||||
"urls sidebar" 1fr
|
"urls sidebar" 1fr
|
||||||
"pagination sidebar" min-content
|
"pagination sidebar" min-content
|
||||||
/ @results-width @results-sidebar-width
|
/ @results-width @results-sidebar-width;
|
||||||
;
|
|
||||||
gap: 0 @results-gap;
|
gap: 0 @results-gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -979,8 +978,7 @@ summary.title {
|
||||||
"sidebar" min-content
|
"sidebar" min-content
|
||||||
"urls" 1fr
|
"urls" 1fr
|
||||||
"pagination" min-content
|
"pagination" min-content
|
||||||
/ @results-width
|
/ @results-width;
|
||||||
;
|
|
||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -249,7 +249,7 @@ ul.tabs {
|
||||||
order: 2;
|
order: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > input[type=radio] {
|
& > input[type="radio"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -347,14 +347,21 @@ select {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
|
@supports (
|
||||||
|
(background-position-x: 100%) and
|
||||||
|
(
|
||||||
|
(appearance: none) or (-webkit-appearance: none) or
|
||||||
|
(-moz-appearance: none)
|
||||||
|
)
|
||||||
|
) {
|
||||||
select {
|
select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
border-width: 0 2rem 0 0;
|
border-width: 0 2rem 0 0;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
|
background: data-uri("image/svg+xml;charset=UTF-8", @select-light-svg-path)
|
||||||
|
no-repeat;
|
||||||
background-position-x: calc(100% + 2rem);
|
background-position-x: calc(100% + 2rem);
|
||||||
background-size: 2rem;
|
background-size: 2rem;
|
||||||
background-origin: content-box;
|
background-origin: content-box;
|
||||||
|
@ -376,12 +383,18 @@ select {
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html.theme-auto select,
|
html.theme-auto select,
|
||||||
html.theme-dark select {
|
html.theme-dark select {
|
||||||
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
|
background-image: data-uri(
|
||||||
|
"image/svg+xml;charset=UTF-8",
|
||||||
|
@select-dark-svg-path
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html.theme-dark select {
|
html.theme-dark select {
|
||||||
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
|
background-image: data-uri(
|
||||||
|
"image/svg+xml;charset=UTF-8",
|
||||||
|
@select-dark-svg-path
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -461,7 +474,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
|
||||||
|
|
||||||
/* -- checkbox -- */
|
/* -- checkbox -- */
|
||||||
@supports (transform: rotate(-45deg)) {
|
@supports (transform: rotate(-45deg)) {
|
||||||
input[type=checkbox]:not(.checkbox-onoff) {
|
input[type="checkbox"]:not(.checkbox-onoff) {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
@ -476,7 +489,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
|
||||||
.rounded-corners(0.3em);
|
.rounded-corners(0.3em);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: "";
|
||||||
width: 9px;
|
width: 9px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -497,14 +510,18 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
// disabled : can't be focused, show only the check mark
|
// disabled : can't be focused, show only the check mark
|
||||||
input[type=checkbox][disabled]:not(.checkbox-onoff) {
|
input[type="checkbox"][disabled]:not(.checkbox-onoff) {
|
||||||
border: inherit;
|
border: inherit;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if not checked and possible to checked then display a "light" check mark on hover
|
// if not checked and possible to checked then display a "light" check mark on hover
|
||||||
input.checkbox[type=checkbox]:not(:checked, [disabled], .checkbox-onoff):hover::after {
|
input.checkbox[type="checkbox"]:not(
|
||||||
|
:checked,
|
||||||
|
[disabled],
|
||||||
|
.checkbox-onoff
|
||||||
|
):hover::after {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue