mirror of
https://github.com/searxng/searxng
synced 2024-01-01 19:24:07 +01:00
o
This commit is contained in:
Joseph Cheung
parent
850304b7b1
commit
10b9c2ee90
64 changed files with 6495 additions and 3 deletions
19
searx/static/themes/magi/src/less/animations.less
Normal file
19
searx/static/themes/magi/src/less/animations.less
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.dialog-modal {
|
||||
animation-name: dialogmodal;
|
||||
animation-duration: 0.13s;
|
||||
|
||||
@keyframes dialogmodal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.checkbox-onoff[type="checkbox"]::before {
|
||||
transition: left 0.25s;
|
||||
}
|
||||
75
searx/static/themes/magi/src/less/autocomplete.less
Normal file
75
searx/static/themes/magi/src/less/autocomplete.less
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
|
||||
|
||||
.autocomplete {
|
||||
position: absolute;
|
||||
width: @search-width;
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
.ltr-text-align-left();
|
||||
|
||||
.rounded-corners;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-autocomplete-background);
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-autocomplete-background-hover);
|
||||
|
||||
a:active,
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.locked {
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
background-color: var(--color-autocomplete-background);
|
||||
color: var(--color-autocomplete-font);
|
||||
max-height: 32rem;
|
||||
overflow-y: auto;
|
||||
z-index: 100;
|
||||
margin-top: 3.5rem;
|
||||
border-radius: 0.8rem;
|
||||
box-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
.autocomplete {
|
||||
width: 100%;
|
||||
|
||||
> ul > li {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
searx/static/themes/magi/src/less/code.less
Normal file
9
searx/static/themes/magi/src/less/code.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.code-highlight pre {
|
||||
overflow: auto;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border: inherit;
|
||||
}
|
||||
|
||||
// stylelint-disable no-invalid-position-at-import-rule
|
||||
@import "../generated/pygments.less";
|
||||
279
searx/static/themes/magi/src/less/definitions.less
Normal file
279
searx/static/themes/magi/src/less/definitions.less
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
/*
|
||||
* SearXNG, A privacy-respecting, hackable metasearch engine
|
||||
*
|
||||
* To change the colors of the site, simple edit this variables
|
||||
*/
|
||||
|
||||
/// Light Theme
|
||||
:root {
|
||||
/// Base Colors
|
||||
--color-base-font: #444;
|
||||
--color-base-font-rgb: 68, 68, 68;
|
||||
--color-base-background: #fff;
|
||||
--color-base-background-mobile: #f2f5f8;
|
||||
--color-url-font: #334999;
|
||||
--color-url-visited-font: #9822c3;
|
||||
/// Header Colors
|
||||
--color-header-background: #fdfbff;
|
||||
--color-header-border: #ddd;
|
||||
/// Footer Colors
|
||||
--color-footer-background: #fdfbff;
|
||||
--color-footer-border: #ddd;
|
||||
/// Sidebar Colors
|
||||
--color-sidebar-border: #ddd;
|
||||
--color-sidebar-font: #000;
|
||||
--color-sidebar-background: #fff;
|
||||
/// BackToTop Colors
|
||||
--color-backtotop-font: #444;
|
||||
--color-backtotop-border: #ddd;
|
||||
--color-backtotop-background: #fff;
|
||||
/// Button Colors
|
||||
--color-btn-background: #3050ff;
|
||||
--color-btn-font: #fff;
|
||||
--color-show-btn-background: #bbb;
|
||||
--color-show-btn-font: #000;
|
||||
/// Search Input Colors
|
||||
--color-search-border: #bbb;
|
||||
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-search-background: #fff;
|
||||
--color-search-font: #222;
|
||||
--color-search-background-hover: #3050ff;
|
||||
/// Modal Colors
|
||||
--color-error: #db3434;
|
||||
--color-error-background: lighten(#db3434, 40%);
|
||||
--color-warning: #dbba34;
|
||||
--color-warning-background: lighten(#dbba34, 40%);
|
||||
--color-success: #42db34;
|
||||
--color-success-background: lighten(#42db34, 40%);
|
||||
/// Categories Colors
|
||||
--color-categories-item-selected-font: #3050ff;
|
||||
--color-categories-item-border-selected: #3050ff;
|
||||
/// Autocomplete Colors
|
||||
--color-autocomplete-font: #000;
|
||||
--color-autocomplete-border: #bbb;
|
||||
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-autocomplete-background: #fff;
|
||||
--color-autocomplete-background-hover: #e3e3e3;
|
||||
/// Answer Colors
|
||||
--color-answer-font: #444; // same as --color-base-font
|
||||
--color-answer-background: #fff;
|
||||
/// Results Colors
|
||||
--color-result-background: #fff;
|
||||
--color-result-border: #ddd;
|
||||
--color-result-url-font: #000;
|
||||
--color-result-vim-selected: #f7f7f7;
|
||||
--color-result-vim-arrow: #000bbb;
|
||||
--color-result-description-highlight-font: #000;
|
||||
--color-result-link-font: #000bbb;
|
||||
--color-result-link-font-highlight: #000bbb;
|
||||
--color-result-link-visited-font: #9822c3;
|
||||
--color-result-publishdate-font: #777;
|
||||
--color-result-engines-font: #545454;
|
||||
--color-result-search-url-border: #ddd;
|
||||
--color-result-search-url-font: #000;
|
||||
// Images Colors
|
||||
--color-result-image-span-font: #444;
|
||||
--color-result-image-span-font-selected: #fff;
|
||||
--color-result-image-background: #fff;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #ebebeb;
|
||||
--color-settings-engine-description-font: #545454;
|
||||
--color-settings-engine-group-background: #0001;
|
||||
/// Detail modal
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #242424;
|
||||
--color-result-detail-hr: #555;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
/// Toolkit Colors
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #545454;
|
||||
--color-toolkit-kbd-font: #fff;
|
||||
--color-toolkit-kbd-background: #000;
|
||||
--color-toolkit-dialog-border: #ddd;
|
||||
--color-toolkit-dialog-background: #fff;
|
||||
--color-toolkit-tabs-label-border: #fff;
|
||||
--color-toolkit-tabs-section-border: #ddd;
|
||||
--color-toolkit-select-background: #e1e1e1;
|
||||
--color-toolkit-select-border: #ddd;
|
||||
--color-toolkit-select-background-hover: #bbb;
|
||||
--color-toolkit-input-text-font: #222;
|
||||
--color-toolkit-checkbox-onoff-off-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-on-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-on-mark-background: #3050ff;
|
||||
--color-toolkit-checkbox-onoff-on-mark-color: #fff;
|
||||
--color-toolkit-checkbox-onoff-off-mark-background: #aaa;
|
||||
--color-toolkit-checkbox-onoff-off-mark-color: #fff;
|
||||
--color-toolkit-checkbox-label-background: #ddd;
|
||||
--color-toolkit-checkbox-label-border: #ddd;
|
||||
--color-toolkit-checkbox-input-border: #3050ff;
|
||||
--color-toolkit-engine-tooltip-border: #ddd;
|
||||
--color-toolkit-engine-tooltip-background: #fff;
|
||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||
--color-doc-code: #300;
|
||||
--color-doc-code-background: #fdd;
|
||||
--invert-logo: invert(0%);
|
||||
}
|
||||
|
||||
.dark-themes() {
|
||||
/// Base Colors
|
||||
--color-base-font: #bbb;
|
||||
--color-base-font-rgb: 187, 187, 187;
|
||||
--color-base-background: #222428;
|
||||
--color-base-background-mobile: #222428;
|
||||
--color-url-font: #8af;
|
||||
--color-url-visited-font: #c09cd9;
|
||||
/// Header Colors
|
||||
--color-header-background: #1e1e22;
|
||||
--color-header-border: #333;
|
||||
/// Footer Colors
|
||||
--color-footer-background: #1e1e22;
|
||||
--color-footer-border: #333;
|
||||
/// Sidebar Colors
|
||||
--color-sidebar-border: #555;
|
||||
--color-sidebar-font: #fff;
|
||||
--color-sidebar-background: #292c34;
|
||||
/// BackToTop Colors
|
||||
--color-backtotop-font: #bbb;
|
||||
--color-backtotop-border: #333;
|
||||
--color-backtotop-background: #2b2e36;
|
||||
/// Button Colors
|
||||
--color-btn-background: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
|
||||
--color-btn-font: #fff;
|
||||
--color-show-btn-background: #555;
|
||||
--color-show-btn-font: #fff;
|
||||
/// Search Input Colors
|
||||
--color-search-border: #555;
|
||||
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-search-background: #2b2e36;
|
||||
--color-search-font: #fff;
|
||||
--color-search-background-hover: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
|
||||
/// Modal Colors
|
||||
--color-error: #f55b5b;
|
||||
--color-error-background: darken(#db3434, 40%);
|
||||
--color-warning: #f1d561;
|
||||
--color-warning-background: darken(#dbba34, 40%);
|
||||
--color-success: #79f56e;
|
||||
--color-success-background: darken(#42db34, 40%);
|
||||
/// Categories Colors
|
||||
--color-categories-item-selected-font: #58f;
|
||||
--color-categories-item-border-selected: #58f;
|
||||
/// Autocomplete Colors
|
||||
--color-autocomplete-font: #fff;
|
||||
--color-autocomplete-border: #555;
|
||||
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
|
||||
--color-autocomplete-background: #2b2e36;
|
||||
--color-autocomplete-background-hover: #1e1e22;
|
||||
/// Answer Colors
|
||||
--color-answer-font: #bbb; // same as --color-base-font
|
||||
--color-answer-background: #26292f;
|
||||
/// Results Colors
|
||||
--color-result-background: #26292f;
|
||||
--color-result-border: #333;
|
||||
--color-result-url-font: #fff;
|
||||
--color-result-vim-selected: #1f1f23cc;
|
||||
--color-result-vim-arrow: #8af;
|
||||
--color-result-description-highlight-font: #fff;
|
||||
--color-result-link-font: #8af;
|
||||
--color-result-link-font-highlight: #8af;
|
||||
--color-result-link-visited-font: #c09cd9;
|
||||
--color-result-publishdate-font: #888;
|
||||
--color-result-engines-font: #a4a4a4;
|
||||
--color-result-search-url-border: #555;
|
||||
--color-result-search-url-font: #fff;
|
||||
/// Detail modal : same as the light version
|
||||
--color-result-detail-font: #fff;
|
||||
--color-result-detail-label-font: lightgray;
|
||||
--color-result-detail-background: #1a1a1c;
|
||||
--color-result-detail-hr: #555;
|
||||
--color-result-detail-link: #8af;
|
||||
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
// Images Colors
|
||||
--color-result-image-span-font: #bbb;
|
||||
--color-result-image-span-font-selected: #222;
|
||||
--color-result-image-background: #222;
|
||||
/// Settings Colors
|
||||
--color-settings-tr-hover: #2c2c32;
|
||||
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
||||
--color-settings-engine-group-background: #1b1b21;
|
||||
/// Toolkit Colors
|
||||
--color-toolkit-badge-font: #fff;
|
||||
--color-toolkit-badge-background: #555;
|
||||
--color-toolkit-kbd-font: #000;
|
||||
--color-toolkit-kbd-background: #fff;
|
||||
--color-toolkit-dialog-border: #555;
|
||||
--color-toolkit-dialog-background: #1e1e22;
|
||||
--color-toolkit-tabs-label-border: #222;
|
||||
--color-toolkit-tabs-section-border: #555;
|
||||
--color-toolkit-select-background: #313338;
|
||||
--color-toolkit-select-border: #555;
|
||||
--color-toolkit-select-background-hover: #373b49;
|
||||
--color-toolkit-input-text-font: #fff;
|
||||
--color-toolkit-checkbox-onoff-off-background: #313338;
|
||||
--color-toolkit-checkbox-onoff-on-background: #313338;
|
||||
--color-toolkit-checkbox-onoff-on-mark-background: #58f;
|
||||
--color-toolkit-checkbox-onoff-on-mark-color: #222;
|
||||
--color-toolkit-checkbox-onoff-off-mark-background: #ddd;
|
||||
--color-toolkit-checkbox-onoff-off-mark-color: #222;
|
||||
--color-toolkit-checkbox-label-background: #222;
|
||||
--color-toolkit-checkbox-label-border: #333;
|
||||
--color-toolkit-checkbox-input-border: #58f;
|
||||
--color-toolkit-engine-tooltip-border: #333;
|
||||
--color-toolkit-engine-tooltip-background: #222;
|
||||
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
|
||||
--color-doc-code: #fdd;
|
||||
--color-doc-code-background: #300;
|
||||
--invert-logo: invert(100%);
|
||||
}
|
||||
|
||||
/// Dark Theme (autoswitch based on device pref)
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root.theme-auto {
|
||||
.dark-themes();
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Theme by preferences
|
||||
:root.theme-dark {
|
||||
.dark-themes();
|
||||
}
|
||||
|
||||
/// General Size
|
||||
@results-width: 45rem;
|
||||
@results-sidebar-width: 25rem;
|
||||
@results-offset: 10rem;
|
||||
@results-tablet-offset: 0.5rem;
|
||||
@results-gap: 5rem;
|
||||
@results-margin: 0.125rem;
|
||||
@result-padding: 1rem;
|
||||
@results-image-row-height: 12rem;
|
||||
@results-image-row-height-phone: 6rem;
|
||||
@search-width: 44rem;
|
||||
// heigh of #search, see detail.less
|
||||
@search-height: 7.6rem;
|
||||
|
||||
/// Device Size
|
||||
/// @desktop > @tablet
|
||||
@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874
|
||||
@phone: 50em;
|
||||
@small-phone: 35em;
|
||||
@ultra-small-phone: 20rem;
|
||||
|
||||
/// From style.less
|
||||
@stacked-bar-chart: rgb(0, 0, 0);
|
||||
|
||||
/// Load fonts from this directory.
|
||||
@icon-font-path: "../../../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
// decoration of the select HTML elements
|
||||
@select-light-svg-path: "../svg/select-light.svg";
|
||||
@select-dark-svg-path: "../svg/select-dark.svg";
|
||||
248
searx/static/themes/magi/src/less/detail.less
Normal file
248
searx/static/themes/magi/src/less/detail.less
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
#main_results #results.image-detail-open.only_template_images {
|
||||
width: min(98%, 59.25rem) !important;
|
||||
}
|
||||
|
||||
#main_results #results.only_template_images.image-detail-open #backToTop {
|
||||
.ltr-left(56.75rem) !important;
|
||||
.ltr-right(inherit);
|
||||
}
|
||||
|
||||
article.result-images .detail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
.ltr-left(60rem);
|
||||
.ltr-right(0);
|
||||
top: @search-height;
|
||||
transition: top 0.064s ease-in 0s;
|
||||
bottom: 0;
|
||||
background: var(--color-result-detail-background);
|
||||
border: 1px solid var(--color-result-detail-background);
|
||||
z-index: 10000;
|
||||
padding: 4rem 3rem 3rem 3rem;
|
||||
|
||||
a.result-images-source {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
object-fit: contain;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: 100%;
|
||||
min-height: inherit;
|
||||
max-height: calc(100vh - 25rem - 7rem);
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.result-images-labels {
|
||||
color: var(--color-result-detail-font);
|
||||
max-height: 16rem;
|
||||
min-height: 16rem;
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--color-result-detail-hr);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-result-detail-label-font);
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
p,
|
||||
a {
|
||||
.ltr-text-align-left();
|
||||
}
|
||||
|
||||
p.result-content {
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.result-url {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.result-content:hover,
|
||||
p.result-url:hover {
|
||||
position: relative;
|
||||
overflow: inherit !important;
|
||||
background: var(--color-result-detail-background);
|
||||
text-overflow: inherit !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: var(--color-result-detail-link);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-close {
|
||||
top: 1rem;
|
||||
.ltr-left(1rem);
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
a.result-detail-previous {
|
||||
top: 1rem;
|
||||
.ltr-right(6rem);
|
||||
// center the icon by moving it slightly on the left
|
||||
padding-top: 0.4rem;
|
||||
.ltr-padding-right(0.5rem);
|
||||
padding-bottom: 0.4rem;
|
||||
.ltr-padding-left(0.3rem);
|
||||
}
|
||||
|
||||
a.result-detail-next {
|
||||
top: 1rem;
|
||||
.ltr-right(2rem);
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
a.result-detail-close,
|
||||
a.result-detail-next,
|
||||
a.result-detail-previous {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
position: absolute;
|
||||
filter: opacity(40%);
|
||||
z-index: 2000002;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-next,
|
||||
a.result-detail-previous {
|
||||
span::before {
|
||||
// vertical center small icons
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-close,
|
||||
a.result-detail-close:visited,
|
||||
a.result-detail-close:hover,
|
||||
a.result-detail-close:active,
|
||||
a.result-detail-previous,
|
||||
a.result-detail-previous:visited,
|
||||
a.result-detail-previous:hover,
|
||||
a.result-detail-previous:active,
|
||||
a.result-detail-next,
|
||||
a.result-detail-next:visited,
|
||||
a.result-detail-next:hover,
|
||||
a.result-detail-next:active {
|
||||
color: var(--color-result-detail-font);
|
||||
background: var(--color-result-detail-background);
|
||||
border: 1px solid var(--color-result-detail-font);
|
||||
}
|
||||
|
||||
a.result-detail-close:focus,
|
||||
a.result-detail-close:hover,
|
||||
a.result-detail-previous:focus,
|
||||
a.result-detail-previous:hover,
|
||||
a.result-detail-next:focus,
|
||||
a.result-detail-next:hover {
|
||||
filter: opacity(80%);
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
.ltr-right(50%);
|
||||
border-top: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-right: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-bottom: 0.5em solid var(--color-result-detail-loader-border);
|
||||
border-left: 0.5em solid var(--color-result-detail-loader-borderleft);
|
||||
}
|
||||
}
|
||||
|
||||
#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
|
||||
a.result-images-source img {
|
||||
max-height: calc(100vh - 25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
.ltr-left(0);
|
||||
|
||||
a.result-images-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 24rem);
|
||||
}
|
||||
}
|
||||
|
||||
a.result-detail-next {
|
||||
.ltr-right(1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail {
|
||||
top: 0;
|
||||
.ltr-left(0);
|
||||
padding: 1rem;
|
||||
|
||||
a.result-images-source img {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 20rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-images-labels p span {
|
||||
width: inherit;
|
||||
.ltr-margin-right(1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
33
searx/static/themes/magi/src/less/embedded.less
Normal file
33
searx/static/themes/magi/src/less/embedded.less
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
iframe[src^="https://w.soundcloud.com"] {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
iframe[src^="https://www.deezer.com"] {
|
||||
// The real size is 92px, but 94px are needed to avoid an inner scrollbar of
|
||||
// the embedded HTML.
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
iframe[src^="https://www.mixcloud.com"] {
|
||||
// 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
|
||||
// request. The alternative text (<img alt='Mixcloud Logo'> then cause an
|
||||
// scrollbar in the inner of the iframe we can't avoid. Another quirk comes
|
||||
// when pressing the play button, somtimes the shown player has an height of
|
||||
// 200px, somtimes 250px.
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
iframe[src^="https://bandcamp.com/EmbeddedPlayer"] {
|
||||
// show playlist
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] {
|
||||
// hide playlist
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
iframe[src^="https://genius.com/songs"] {
|
||||
height: 65px;
|
||||
}
|
||||
52
searx/static/themes/magi/src/less/index.less
Normal file
52
searx/static/themes/magi/src/less/index.less
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
#main_index {
|
||||
margin-top: 26vh;
|
||||
}
|
||||
|
||||
.index {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
background: url('../img/logo.png') no-repeat;
|
||||
filter: var(--invert-logo);
|
||||
min-height: 4rem;
|
||||
margin: 4rem auto;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#search,
|
||||
#search_header {
|
||||
margin: 0 auto;
|
||||
background: inherit;
|
||||
border: inherit;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.category label {
|
||||
padding: 6px 10px;
|
||||
border-bottom: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
div.title {
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#main_index {
|
||||
margin-top: 6em;
|
||||
}
|
||||
}
|
||||
9
searx/static/themes/magi/src/less/info.less
Normal file
9
searx/static/themes/magi/src/less/info.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.info-page {
|
||||
code {
|
||||
font-family: monospace;
|
||||
color: var(--color-doc-code);
|
||||
background-color: var(--color-doc-code-background);
|
||||
padding: 2px 5px;
|
||||
.rounded-corners(5px);
|
||||
}
|
||||
}
|
||||
40
searx/static/themes/magi/src/less/mixins.less
Normal file
40
searx/static/themes/magi/src/less/mixins.less
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
// Mixins
|
||||
.text-size-adjust (@property: 100%) {
|
||||
-webkit-text-size-adjust: @property;
|
||||
-ms-text-size-adjust: @property;
|
||||
-moz-text-size-adjust: @property;
|
||||
text-size-adjust: @property;
|
||||
}
|
||||
|
||||
.rounded-corners (@radius: 10px) {
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
.rounded-right-corners (@radius: 0 10px 10px 0) {
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
.rounded-corners-tiny (@radius: 5px) {
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// disable user selection
|
||||
.disable-user-select () {
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.show-content-button() {
|
||||
padding: 5px 10px;
|
||||
.rounded-corners-tiny;
|
||||
background: var(--color-show-btn-background);
|
||||
color: var(--color-show-btn-font);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-btn-background);
|
||||
color: var(--color-btn-font);
|
||||
}
|
||||
}
|
||||
48
searx/static/themes/magi/src/less/new_issue.less
Normal file
48
searx/static/themes/magi/src/less/new_issue.less
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
.stats_endpoint {
|
||||
.github-issue-button {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
font-family: sans-serif;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
background-color: #238636;
|
||||
border: #2ea043;
|
||||
border-radius: 10px !important;
|
||||
box-shadow: rgba(0, 0, 0, 0) 0 0 0 0;
|
||||
}
|
||||
|
||||
.github-issue-button:hover {
|
||||
background-color: #2ea043;
|
||||
}
|
||||
|
||||
.issue-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=checked] {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 1rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.step_content {
|
||||
margin: 1rem 1rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.step1,
|
||||
.step2 {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.step1_delay {
|
||||
transition: visibility 0s linear 4s;
|
||||
}
|
||||
|
||||
#step1:checked ~ .step1,
|
||||
#step2:checked ~ .step2 {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
196
searx/static/themes/magi/src/less/preferences.less
Normal file
196
searx/static/themes/magi/src/less/preferences.less
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
#tab-content-query table td,
|
||||
#tab-content-query table th {
|
||||
.ltr-text-align-right() !important;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
#main_preferences {
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin: 0;
|
||||
padding: 5px 0 0 0;
|
||||
display: block;
|
||||
.ltr-float-left();
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.ltr-float-left();
|
||||
width: 15em;
|
||||
|
||||
select,
|
||||
input[type="text"] {
|
||||
font-size: inherit !important;
|
||||
margin-top: 0;
|
||||
.ltr-margin-right(1rem);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(0);
|
||||
}
|
||||
|
||||
select {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 13.25rem;
|
||||
color: var(--color-toolkit-input-text-font);
|
||||
border: none;
|
||||
background: none repeat scroll 0 0 var(--color-toolkit-select-background);
|
||||
padding: 0.2rem 0.4rem;
|
||||
height: 2rem;
|
||||
.rounded-corners-tiny;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-toolkit-select-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 1px 1px var(--color-btn-background);
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
padding: 5px 0 0 0;
|
||||
.ltr-float-right();
|
||||
width: 50%;
|
||||
color: var(--color-settings-engine-description-font);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category {
|
||||
.ltr-margin-right(0.5rem);
|
||||
|
||||
label {
|
||||
border: 2px solid transparent;
|
||||
padding: 0.2rem 0.4rem;
|
||||
.rounded-corners-tiny;
|
||||
}
|
||||
}
|
||||
|
||||
.category input[type="checkbox"]:checked + label {
|
||||
border: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
|
||||
table.table_engines {
|
||||
td {
|
||||
height: 3.75rem;
|
||||
}
|
||||
|
||||
th.name {
|
||||
/* stylelint-disable */
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
|
||||
.engine-tooltip {
|
||||
margin-top: 1.8rem;
|
||||
.ltr-left(calc((100% - 85em) / 2 + 10em));
|
||||
max-width: 40rem;
|
||||
|
||||
.engine-description {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.engine-group {
|
||||
.ltr-text-align-left();
|
||||
font-weight: normal;
|
||||
background: var(--color-settings-engine-group-background);
|
||||
}
|
||||
|
||||
.name,
|
||||
.shortcut {
|
||||
.ltr-text-align-left();
|
||||
}
|
||||
}
|
||||
|
||||
table.cookies {
|
||||
width: 100%;
|
||||
direction: ltr;
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
padding: 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
word-break: keep-all;
|
||||
width: 14rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(even) > th,
|
||||
& > tbody > tr:nth-child(even) > td {
|
||||
background-color: var(--color-settings-tr-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.preferences_back {
|
||||
background: none repeat scroll 0 0 var(--color-btn-background);
|
||||
color: var(--color-btn-font);
|
||||
border: 0 none;
|
||||
.rounded-corners;
|
||||
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 2px 4px;
|
||||
padding: 0.7em;
|
||||
|
||||
a {
|
||||
color: var(--color-settings-return-font);
|
||||
}
|
||||
|
||||
a::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
div.selectable_url {
|
||||
pre {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
.preferences_back {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.engine-tooltip {
|
||||
.ltr-left(10em) !important;
|
||||
}
|
||||
}
|
||||
7
searx/static/themes/magi/src/less/result_templates.less
Normal file
7
searx/static/themes/magi/src/less/result_templates.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
.osm-map-box {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
341
searx/static/themes/magi/src/less/search.less
Normal file
341
searx/static/themes/magi/src/less/search.less
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
/*
|
||||
* SearXNG, A privacy-respecting, hackable metasearch engine
|
||||
*/
|
||||
|
||||
#search {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#search_header {
|
||||
padding-top: 1.5em;
|
||||
.ltr-padding-right(2em);
|
||||
.ltr-padding-left(@results-offset - 3rem);
|
||||
margin: 0;
|
||||
background: var(--color-header-background);
|
||||
border-bottom: 1px solid var(--color-header-border);
|
||||
display: grid;
|
||||
column-gap: 1.2rem;
|
||||
row-gap: 1rem;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
grid-template-areas:
|
||||
"logo search"
|
||||
"spacer categories";
|
||||
}
|
||||
|
||||
.category {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.ltr-margin-right(1rem);
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
svg {
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0;
|
||||
display: inline-flex;
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 2px solid transparent;
|
||||
.disable-user-select;
|
||||
|
||||
div.category_name {
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label {
|
||||
color: var(--color-categories-item-selected-font);
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
#search_logo {
|
||||
filter: var(--invert-logo);
|
||||
grid-area: logo;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
flex: 1;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0.5rem 0 auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search_categories {
|
||||
grid-area: categories;
|
||||
|
||||
.help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .help {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: var(--color-base-background);
|
||||
padding: 1rem 0.6rem 0.6rem 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
left: -0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#search_view {
|
||||
grid-area: search;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
border-radius: 0.8rem;
|
||||
width: @search-width;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--color-search-shadow);
|
||||
}
|
||||
|
||||
#clear_search {
|
||||
display: block;
|
||||
border-collapse: separate;
|
||||
box-sizing: border-box;
|
||||
width: 1.8rem;
|
||||
margin: 0;
|
||||
padding: 0.8rem 0.2rem;
|
||||
background: none repeat scroll 0 0 var(--color-search-background);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--color-search-font);
|
||||
font-size: 1.1rem;
|
||||
z-index: 10000;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-search-background-hover);
|
||||
}
|
||||
|
||||
&.empty * {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.no-js #clear_search.hide_if_nojs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#q,
|
||||
#send_search {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.8rem;
|
||||
background: none repeat scroll 0 0 var(--color-search-background);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--color-search-font);
|
||||
font-size: 1.1rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#q {
|
||||
width: 100%;
|
||||
.ltr-padding-left(1rem);
|
||||
.ltr-padding-right(0) !important;
|
||||
.ltr-rounded-left-corners(0.8rem);
|
||||
}
|
||||
|
||||
#q::-ms-clear,
|
||||
#q::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#send_search {
|
||||
.ltr-rounded-right-corners(0.8rem);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--color-search-background-hover);
|
||||
color: var(--color-search-background);
|
||||
}
|
||||
}
|
||||
|
||||
.no-js #clear_search,
|
||||
.no-js #send_search {
|
||||
width: auto !important;
|
||||
.ltr-border-left(1px solid var(--color-search-border));
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
margin-top: 0.6rem;
|
||||
.ltr-margin-right(0);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(@results-offset + 0.6rem);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
|
||||
select {
|
||||
background-color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-base-font);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
#search_header {
|
||||
padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
|
||||
column-gap: @results-tablet-offset;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
margin-top: 0.6rem;
|
||||
.ltr-margin-right(0);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(@results-tablet-offset + 3rem);
|
||||
}
|
||||
|
||||
#categories {
|
||||
font-size: 90%;
|
||||
clear: both;
|
||||
|
||||
.checkbox_container {
|
||||
margin: auto;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @tablet) and (hover: none) {
|
||||
#main_index,
|
||||
#main_results {
|
||||
#categories_container {
|
||||
width: max-content;
|
||||
|
||||
.category {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#categories {
|
||||
width: 100%;
|
||||
.ltr-text-align-left();
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
#search_header {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0.1rem 0 0 0;
|
||||
column-gap: 0;
|
||||
row-gap: 0;
|
||||
grid-template-areas:
|
||||
"logo search"
|
||||
"categories categories";
|
||||
}
|
||||
|
||||
.search_logo {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#q {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
|
||||
label {
|
||||
padding: 1rem !important;
|
||||
margin: 0 !important;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search_view:focus-within {
|
||||
display: block;
|
||||
background-color: var(--color-search-background);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
|
||||
.search_box {
|
||||
border-bottom: 1px solid var(--color-search-border);
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
#send_search {
|
||||
.ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
|
||||
}
|
||||
|
||||
* {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main_results #q:placeholder-shown ~ #send_search {
|
||||
.ltr-margin-right(2.6rem);
|
||||
transition: margin 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @ultra-small-phone) {
|
||||
#search_header {
|
||||
grid-template-areas:
|
||||
"search search"
|
||||
"categories categories";
|
||||
}
|
||||
|
||||
#search_logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#categories {
|
||||
.disable-user-select;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#categories_container {
|
||||
position: relative;
|
||||
}
|
||||
106
searx/static/themes/magi/src/less/stats.less
Normal file
106
searx/static/themes/magi/src/less/stats.less
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
.engine-stats {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr td,
|
||||
tr th {
|
||||
border-bottom: 1px solid var(--color-result-border);
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
table.engine-tooltip {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.engine-name {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.engine-score {
|
||||
width: 7rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.engine-reliability {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
table.engine-error th.engine-error-type,
|
||||
table.engine-error td.engine-error-type,
|
||||
failed-test {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.engine-errors {
|
||||
margin-top: 3rem;
|
||||
|
||||
table.engine-error {
|
||||
max-width: 1280px;
|
||||
margin: 1rem 0 3rem 0;
|
||||
border: 1px solid var(--color-result-border);
|
||||
.ltr-text-align-left();
|
||||
|
||||
tr th,
|
||||
tr td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
& span.log_parameters {
|
||||
border-right: 1px solid solid var(--color-result-border);
|
||||
padding: 0 1rem 0 0;
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-chart-value {
|
||||
width: 3em;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.bar-chart-graph {
|
||||
width: calc(100% - 5rem);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bar-chart-bar {
|
||||
border: 3px solid #5bc0de;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.bar-chart-serie1 {
|
||||
border: 3px solid #5bc0de;
|
||||
margin: 1px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bar-chart-serie2 {
|
||||
border: 3px solid #deb15b;
|
||||
margin: 1px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bar0 {
|
||||
width: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.generate-bar(100);
|
||||
|
||||
.generate-bar(@n, @i: 1) when (@i =< @n) {
|
||||
.bar@{i} {
|
||||
width: (@i * 100% / @n);
|
||||
}
|
||||
.generate-bar(@n, (@i + 1));
|
||||
}
|
||||
118
searx/static/themes/magi/src/less/style-center.less
Normal file
118
searx/static/themes/magi/src/less/style-center.less
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
/*
|
||||
--center-page-width overrides the less variable @results-width when the results are centered
|
||||
see the CSS rules for #results in style.less ( grid-template-columns and gap).
|
||||
|
||||
In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3).
|
||||
|
||||
All rules starts with ".center-aligment-yes #main_results" to be enabled only
|
||||
on the /search URL and when the "center alignment" preference is enabled.
|
||||
*/
|
||||
|
||||
@media screen and (min-width: @phone) {
|
||||
.center-aligment-yes #main_results {
|
||||
--center-page-width: 48rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 62rem) {
|
||||
.center-aligment-yes #main_results {
|
||||
--center-page-width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @tablet) {
|
||||
.center-aligment-yes #main_results {
|
||||
--center-page-width: 73rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @phone) and (max-width: @tablet) {
|
||||
// any change must be reset in @media screen and (min-width: @tablet) { ... }
|
||||
.center-aligment-yes #main_results {
|
||||
#results {
|
||||
grid-template-columns: 60% calc(40% - @results-gap);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#urls {
|
||||
.ltr-margin-left(3rem);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
.ltr-margin-right(1rem);
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
.ltr-left(calc(60% + 1rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @tablet) {
|
||||
.center-aligment-yes #main_results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
#search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#search_header {
|
||||
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";
|
||||
column-gap: 1.2rem; // from search.less
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
.ltr-margin-left(0.5rem);
|
||||
width: var(--center-page-width);
|
||||
}
|
||||
|
||||
#results {
|
||||
// from style.less (when screen width = @tablet, reset layout from tablet)
|
||||
.ltr-margin-right(2rem);
|
||||
.ltr-margin-left(@results-offset);
|
||||
//
|
||||
|
||||
&.only_template_images,
|
||||
&.image-detail-open {
|
||||
// * grid-template-columns and .ltr-margin-left are set in style.less
|
||||
// * With .image-detail-open.only_template_images, the width is set in detail.less
|
||||
// * #results is going to be centered because of the #main_results rules,
|
||||
// align-self aligns the results on the left or right according to the language.
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
&:not(.only_template_images):not(.image-detail-open) {
|
||||
// the gap is set in style.less
|
||||
.ltr-margin-left(1.5rem);
|
||||
grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;
|
||||
|
||||
#backToTop {
|
||||
.ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.result .content {
|
||||
max-width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// from style.less (when screen width = @tablet, reset layout from tablet)
|
||||
#urls {
|
||||
.ltr-margin-left(0);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
.ltr-margin-right(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
85
searx/static/themes/magi/src/less/style-ltr.less
Normal file
85
searx/static/themes/magi/src/less/style-ltr.less
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
.ltr-left(@offset) {
|
||||
left: @offset;
|
||||
}
|
||||
|
||||
.ltr-right(@offset) {
|
||||
right: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-right(@offset) {
|
||||
margin-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-left(@offset) {
|
||||
margin-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right(@offset) {
|
||||
border-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-left(@offset) {
|
||||
border-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-right(@offset) {
|
||||
padding-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-left(@offset) {
|
||||
padding-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-float-left() {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ltr-float-right() {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ltr-text-align-right() {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ltr-rounded-left-corners(@radius) {
|
||||
border-radius: @radius 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-left-corners(@radius) {
|
||||
border-radius: @radius 0 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-left-corners(@radius) {
|
||||
border-radius: 0 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-rounded-right-corners(@radius) {
|
||||
border-radius: 0 @radius @radius 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-right-corners(@radius) {
|
||||
border-radius: 0 @radius 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-right-corners(@radius) {
|
||||
border-radius: 0 0 @radius 0;
|
||||
}
|
||||
|
||||
.ltr-text-align-left() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ltr-border-left-width(@offset) {
|
||||
border-left-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right-width(@offset) {
|
||||
border-right-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-transform() {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@import "style.less";
|
||||
155
searx/static/themes/magi/src/less/style-rtl.less
Normal file
155
searx/static/themes/magi/src/less/style-rtl.less
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
.ltr-left(@offset) {
|
||||
right: @offset;
|
||||
}
|
||||
|
||||
.ltr-right(@offset) {
|
||||
left: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-right(@offset) {
|
||||
margin-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-margin-left(@offset) {
|
||||
margin-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right(@offset) {
|
||||
border-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-left(@offset) {
|
||||
border-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-right(@offset) {
|
||||
padding-left: @offset;
|
||||
}
|
||||
|
||||
.ltr-padding-left(@offset) {
|
||||
padding-right: @offset;
|
||||
}
|
||||
|
||||
.ltr-float-left() {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ltr-float-right() {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ltr-text-align-right() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ltr-rounded-left-corners(@radius) {
|
||||
border-radius: 0 @radius @radius 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-left-corners(@radius) {
|
||||
border-radius: 0 @radius 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-left-corners(@radius) {
|
||||
border-radius: 0 0 @radius 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-right-corners(@radius) {
|
||||
border-radius: @radius 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-rounded-top-right-corners(@radius) {
|
||||
border-radius: @radius 0 0 0;
|
||||
}
|
||||
|
||||
.ltr-rounded-bottom-right-corners(@radius) {
|
||||
border-radius: 0 0 0 @radius;
|
||||
}
|
||||
|
||||
.ltr-text-align-left() {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ltr-border-left-width(@offset) {
|
||||
border-right-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-border-right-width(@offset) {
|
||||
border-left-width: @offset;
|
||||
}
|
||||
|
||||
.ltr-transform() {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
@import "style.less";
|
||||
|
||||
#q,
|
||||
#sidebar .infobox dt bdi {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// URL are displayed LTR but align on the right
|
||||
#urls {
|
||||
direction: initial;
|
||||
text-align: right;
|
||||
|
||||
.result .url_wrapper {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
// Image flexbox
|
||||
#main_results div#results.only_template_images #urls {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// Image detail
|
||||
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
|
||||
direction: rtl;
|
||||
|
||||
&.result-url {
|
||||
// Display URL using the LTR direction
|
||||
direction: ltr;
|
||||
|
||||
span {
|
||||
// And put the label on the right
|
||||
direction: rtl;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select HTML element
|
||||
@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
|
||||
select {
|
||||
border-width: 0 0 0 2rem;
|
||||
background-position-x: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// vim hotkey helps is not translated
|
||||
#vim-hotkeys-help table {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Logo on the right
|
||||
#main_preferences h1,
|
||||
#main_stats h1 {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
|
||||
// patch of stats.less
|
||||
.bar-chart-serie1,
|
||||
.bar-chart-serie2 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.engine-stats .engine-name,
|
||||
.engine-stats .engine-score,
|
||||
.engine-stats .result-count,
|
||||
.engine-stats .response-time,
|
||||
.engine-stats .engine-reliability {
|
||||
text-align: right;
|
||||
}
|
||||
1080
searx/static/themes/magi/src/less/style.less
Normal file
1080
searx/static/themes/magi/src/less/style.less
Normal file
File diff suppressed because it is too large
Load diff
639
searx/static/themes/magi/src/less/toolkit.less
Normal file
639
searx/static/themes/magi/src/less/toolkit.less
Normal file
|
|
@ -0,0 +1,639 @@
|
|||
// other solution : http://stackoverflow.com/questions/1577598/how-to-hide-parts-of-html-when-javascript-is-disabled/13857783#13857783
|
||||
|
||||
// stylelint-disable no-descending-specificity
|
||||
|
||||
html.no-js .hide_if_nojs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.js .show_if_nojs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: var(--color-error-background);
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: var(--color-warning-background);
|
||||
}
|
||||
|
||||
.success {
|
||||
background: var(--color-success-background);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
color: var(--color-toolkit-badge-font);
|
||||
background-color: var(--color-toolkit-badge-background);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
min-width: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
margin: 1px;
|
||||
font-size: 90%;
|
||||
color: var(--color-toolkit-kbd-font);
|
||||
background: var(--color-toolkit-kbd-background);
|
||||
}
|
||||
|
||||
// table
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
&.striped {
|
||||
tr {
|
||||
border-bottom: 1px solid var(--color-settings-tr-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:hover {
|
||||
background: var(--color-settings-tr-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// pre
|
||||
.pre() {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
word-break: break-all;
|
||||
margin: 0.1em;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
div.selectable_url {
|
||||
display: block;
|
||||
border: 1px solid var(--color-result-search-url-border);
|
||||
padding: 4px;
|
||||
color: var(--color-result-search-url-font);
|
||||
margin: 0.1em;
|
||||
overflow: hidden;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
.rounded-corners-tiny;
|
||||
|
||||
pre {
|
||||
.pre();
|
||||
}
|
||||
}
|
||||
|
||||
// dialog
|
||||
.dialog() {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
margin: 0 0 1em 0;
|
||||
border: 1px solid var(--color-toolkit-dialog-border);
|
||||
.ltr-text-align-left();
|
||||
.rounded-corners;
|
||||
|
||||
.close {
|
||||
.ltr-float-right();
|
||||
position: relative;
|
||||
top: -3px;
|
||||
color: inherit;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
p {
|
||||
margin: 1px 0 0 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
tr {
|
||||
vertical-align: text-top;
|
||||
|
||||
&:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 1em 0 0;
|
||||
padding-top: 0;
|
||||
.ltr-padding-right(1rem);
|
||||
padding-bottom: 0;
|
||||
.ltr-padding-left(0);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-error {
|
||||
.dialog();
|
||||
|
||||
color: var(--color-error);
|
||||
background: var(--color-error-background);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.dialog-warning {
|
||||
.dialog();
|
||||
|
||||
color: var(--color-warning);
|
||||
background: var(--color-warning-background);
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.dialog-modal {
|
||||
.dialog();
|
||||
|
||||
display: block;
|
||||
background: var(--color-toolkit-dialog-background);
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0 auto;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10000000;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// btn-collapse
|
||||
.btn-collapse {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//
|
||||
.scrollx {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* -- tabs -- */
|
||||
.tabs .tabs > label {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
border-bottom: 1px solid var(--color-toolkit-tabs-section-border);
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
& > * {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
& > input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > label,
|
||||
& > li > a {
|
||||
order: 1;
|
||||
padding: 0.7em;
|
||||
margin: 0 0.7em;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
border: solid var(--color-toolkit-tabs-label-border);
|
||||
border-width: 0 0 2px 0;
|
||||
color: unset;
|
||||
|
||||
.disable-user-select();
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
}
|
||||
}
|
||||
|
||||
& > label:hover,
|
||||
& > li > a:hover {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
|
||||
& > section {
|
||||
min-width: 100%;
|
||||
padding: 0.7rem 0;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--color-toolkit-tabs-section-border);
|
||||
display: none;
|
||||
}
|
||||
|
||||
// default selection
|
||||
& > label:last-of-type {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
|
||||
& > section:last-of-type {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
html body .tabs > input:checked {
|
||||
~ section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
~ label {
|
||||
position: inherited;
|
||||
background: inherit;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: normal;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
}
|
||||
|
||||
+ label {
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
}
|
||||
|
||||
+ label + section {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- select -- */
|
||||
select {
|
||||
height: 2.4rem;
|
||||
margin-top: 0;
|
||||
.ltr-margin-right(1rem);
|
||||
margin-bottom: 0;
|
||||
.ltr-margin-left(0);
|
||||
padding: 0.2rem !important;
|
||||
color: var(--color-search-font);
|
||||
font-size: 0.9rem;
|
||||
z-index: 2;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border-width: 0 2rem 0 0;
|
||||
border-color: transparent;
|
||||
background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
|
||||
background-position-x: calc(100% + 2rem);
|
||||
background-size: 2rem;
|
||||
background-origin: content-box;
|
||||
background-color: var(--color-toolkit-select-background);
|
||||
outline: medium none;
|
||||
text-overflow: ellipsis;
|
||||
.rounded-corners-tiny;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-toolkit-select-background-hover);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--color-base-background);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.theme-auto select,
|
||||
html.theme-dark select {
|
||||
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
|
||||
}
|
||||
}
|
||||
|
||||
html.theme-dark select {
|
||||
background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
|
||||
}
|
||||
}
|
||||
|
||||
/* -- checkbox-onoff -- */
|
||||
input.checkbox-onoff[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 2.5em;
|
||||
height: 0.7em;
|
||||
box-shadow: none !important;
|
||||
margin: 0 16px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
/* focus & hover */
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 3.5em;
|
||||
height: 1.65em;
|
||||
border: 1px solid var(--color-btn-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--color-btn-background) 0 0 3px;
|
||||
z-index: 10000;
|
||||
top: -0.55em;
|
||||
left: -0.6em;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.75em;
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* check mark
|
||||
reversed-checkbox displays unchecked checkedboxes as checked, and vice versa.
|
||||
see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313
|
||||
*/
|
||||
input.checkbox-onoff[type="checkbox"],
|
||||
.reversed-checkbox input.checkbox-onoff[type="checkbox"]:checked {
|
||||
background: var(--color-toolkit-checkbox-onoff-off-background);
|
||||
|
||||
&::before {
|
||||
left: -0.5em;
|
||||
content: "\2715";
|
||||
color: var(--color-toolkit-checkbox-onoff-off-mark-color);
|
||||
background: var(--color-toolkit-checkbox-onoff-off-mark-background);
|
||||
}
|
||||
}
|
||||
|
||||
input.checkbox-onoff[type="checkbox"]:checked,
|
||||
.reversed-checkbox input.checkbox-onoff[type="checkbox"] {
|
||||
background: var(--color-toolkit-checkbox-onoff-on-background);
|
||||
|
||||
&::before {
|
||||
left: calc(100% - 1.5em);
|
||||
content: "\2713";
|
||||
color: var(--color-toolkit-checkbox-onoff-on-mark-color);
|
||||
background: var(--color-toolkit-checkbox-onoff-on-mark-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* -- checkbox -- */
|
||||
@supports (transform: rotate(-45deg)) {
|
||||
input[type=checkbox]:not(.checkbox-onoff) {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 2px solid var(--color-toolkit-checkbox-input-border);
|
||||
.rounded-corners(0.3em);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
border: 3px solid var(--color-toolkit-checkbox-label-border);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
border-color: var(--color-toolkit-checkbox-input-border);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// disabled : can't be focused, show only the check mark
|
||||
input[type=checkbox][disabled]:not(.checkbox-onoff) {
|
||||
border: inherit;
|
||||
background-color: transparent !important;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
// if not checked and possible to checked then display a "light" check mark on hover
|
||||
input.checkbox[type=checkbox]:not(:checked):not([disabled]):not(.checkbox-onoff):hover::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @phone) {
|
||||
.tabs > label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- loader -- */
|
||||
.loader,
|
||||
.loader::after {
|
||||
border-radius: 50%;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 1em auto;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
border-top: 0.5em solid var(--color-toolkit-loader-border);
|
||||
border-right: 0.5em solid var(--color-toolkit-loader-border);
|
||||
border-bottom: 0.5em solid var(--color-toolkit-loader-border);
|
||||
border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: load8 1.2s infinite linear;
|
||||
animation: load8 1.2s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* -- engine-tooltip -- */
|
||||
.engine-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0 0 2rem;
|
||||
border: 1px solid var(--color-toolkit-engine-tooltip-border);
|
||||
background: var(--color-toolkit-engine-tooltip-background);
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
z-index: 1000000;
|
||||
text-align: left;
|
||||
.rounded-corners;
|
||||
}
|
||||
|
||||
th:hover .engine-tooltip,
|
||||
td:hover .engine-tooltip,
|
||||
.engine-tooltip:hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* -- stacked bar chart -- */
|
||||
.stacked-bar-chart {
|
||||
margin: 0;
|
||||
padding: 0 0.125rem 0 4rem;
|
||||
width: 100%;
|
||||
width: -moz-available;
|
||||
width: -webkit-fill-available;
|
||||
width: fill;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-value {
|
||||
width: 3rem;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 0 0.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-base {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: unset;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-median {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: var(--color-base-font);
|
||||
border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
|
||||
padding: 0.3rem 0;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-rate80 {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: transparent;
|
||||
border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
|
||||
padding: 0.3rem 0;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-rate95 {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: transparent;
|
||||
border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stacked-bar-chart-rate100 {
|
||||
.stacked-bar-chart-base();
|
||||
|
||||
background: transparent;
|
||||
border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
|
||||
padding: 0.4rem 0;
|
||||
width: 1px;
|
||||
}
|
||||
46
searx/static/themes/magi/src/less/toolkit_loader.less
Normal file
46
searx/static/themes/magi/src/less/toolkit_loader.less
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.loader,
|
||||
.loader::after {
|
||||
border-radius: 50%;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 60px auto;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
|
||||
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
|
||||
border-left: 1.1em solid #fff;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: load8 1.1s infinite linear;
|
||||
animation: load8 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue