summaryrefslogtreecommitdiff
path: root/searx/static/themes/simple/src
diff options
context:
space:
mode:
Diffstat (limited to 'searx/static/themes/simple/src')
-rw-r--r--searx/static/themes/simple/src/fonts/magnet.svg1
-rw-r--r--searx/static/themes/simple/src/generated/ion.less181
-rw-r--r--searx/static/themes/simple/src/js/head/00_init.js7
-rw-r--r--searx/static/themes/simple/src/js/main/search.js1
-rw-r--r--searx/static/themes/simple/src/less/animations.less15
-rw-r--r--searx/static/themes/simple/src/less/definitions.less210
-rw-r--r--searx/static/themes/simple/src/less/detail.less2
-rw-r--r--searx/static/themes/simple/src/less/index.less3
-rw-r--r--searx/static/themes/simple/src/less/mixins.less6
-rw-r--r--searx/static/themes/simple/src/less/preferences.less50
-rw-r--r--searx/static/themes/simple/src/less/search.less148
-rw-r--r--searx/static/themes/simple/src/less/style.less85
-rw-r--r--searx/static/themes/simple/src/less/toolkit.less49
13 files changed, 364 insertions, 394 deletions
diff --git a/searx/static/themes/simple/src/fonts/magnet.svg b/searx/static/themes/simple/src/fonts/magnet.svg
deleted file mode 100644
index 1a1defdb8..000000000
--- a/searx/static/themes/simple/src/fonts/magnet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" width="31mm" height="44mm" viewBox="0 0 31 44" version="1.1"><metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/><cc:license rdf:resource="https://www.gnu.org/licenses/agpl-3.0.en.html"/><dc:creator><cc:Agent><dc:title>Alexandre Flament</dc:title></cc:Agent></dc:creator></cc:Work></rdf:RDF></metadata><g fill="#000"><path d="M2.381 28.39H9.79v5.82H2.38z" stroke-width=".049"/><path d="M15.872 10.398c2.381 0 5.82.264 5.82 3.704v12.17c2.47.055 4.94-.001 7.41 0 .02-4.371 0-8.73 0-12.964-.022-3.73-1.158-6.05-3.705-7.937-2.844-2.203-6.144-2.335-9.656-2.347-3.512.012-6.812.144-9.656 2.347-2.547 1.887-3.683 4.207-3.704 7.937 0 4.234-.02 8.593 0 12.965 2.47-.002 4.94.054 7.409 0v-12.17c0-3.44 3.44-3.705 5.82-3.705" stroke="#000" stroke-width=".063" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1"/><path d="M21.696 28.39h7.408v5.82h-7.408z" stroke-width=".049"/></g></svg>
diff --git a/searx/static/themes/simple/src/generated/ion.less b/searx/static/themes/simple/src/generated/ion.less
deleted file mode 100644
index 67158206f..000000000
--- a/searx/static/themes/simple/src/generated/ion.less
+++ /dev/null
@@ -1,181 +0,0 @@
-// Generated by grunt-webfont
-
-
-
-@font-face {
- font-family:"ion";
- src:url("../fonts/ion.eot?31a1b735188db616a2142d17947e8a45");
- src:url("../fonts/ion.eot?31a1b735188db616a2142d17947e8a45#iefix") format("embedded-opentype"),
- url("../fonts/ion.woff2?31a1b735188db616a2142d17947e8a45") format("woff2"),
- url("../fonts/ion.woff?31a1b735188db616a2142d17947e8a45") format("woff"),
- url("../fonts/ion.ttf?31a1b735188db616a2142d17947e8a45") format("truetype"),
- url("../fonts/ion.svg?31a1b735188db616a2142d17947e8a45#ion") format("svg");
- font-weight:normal;
- font-style:normal;
-}
-
-.ion-icon {
- &:before {
- font-family:"ion";
- }
- display:inline-block;
- line-height:1;
- font-weight:normal;
- font-style:normal;
- speak:none;
- text-decoration:inherit;
- text-transform:none;
- text-rendering:auto;
- -webkit-font-smoothing:antialiased;
- -moz-osx-font-smoothing:grayscale;
-}
-
-
-// Icons
-
-.ion-navicon-round {
- &:before {
- content:"\f101";
- }
-}
-
-
-.ion-search {
- &:before {
- content:"\f102";
- }
-}
-
-
-.ion-play {
- &:before {
- content:"\f103";
- }
-}
-
-
-.ion-link {
- &:before {
- content:"\f104";
- }
-}
-
-
-.ion-chevron-up {
- &:before {
- content:"\f105";
- }
-}
-
-
-.ion-chevron-left {
- &:before {
- content:"\f106";
- }
-}
-
-
-.ion-chevron-right {
- &:before {
- content:"\f107";
- }
-}
-
-
-.ion-arrow-down-a {
- &:before {
- content:"\f108";
- }
-}
-
-
-.ion-arrow-up-a {
- &:before {
- content:"\f109";
- }
-}
-
-
-.ion-arrow-swap {
- &:before {
- content:"\f10a";
- }
-}
-
-
-.ion-arrow-dropdown {
- &:before {
- content:"\f10b";
- }
-}
-
-
-.ion-globe {
- &:before {
- content:"\f10c";
- }
-}
-
-
-.ion-time {
- &:before {
- content:"\f10d";
- }
-}
-
-
-.ion-location {
- &:before {
- content:"\f10e";
- }
-}
-
-
-.ion-warning {
- &:before {
- content:"\f10f";
- }
-}
-
-
-.ion-error {
- &:before {
- content:"\f110";
- }
-}
-
-
-.ion-film-outline {
- &:before {
- content:"\f111";
- }
-}
-
-
-.ion-music-note {
- &:before {
- content:"\f112";
- }
-}
-
-
-.ion-more-vertical {
- &:before {
- content:"\f113";
- }
-}
-
-
-.ion-magnet {
- &:before {
- content:"\f114";
- }
-}
-
-
-.ion-close {
- &:before {
- content:"\f115";
- }
-}
-
diff --git a/searx/static/themes/simple/src/js/head/00_init.js b/searx/static/themes/simple/src/js/head/00_init.js
index d359a9174..21b1754bf 100644
--- a/searx/static/themes/simple/src/js/head/00_init.js
+++ b/searx/static/themes/simple/src/js/head/00_init.js
@@ -27,5 +27,10 @@
};
// update the css
- d.getElementsByTagName("html")[0].className = (w.searxng.touch)?"js touch":"js";
+ var hmtlElement = d.getElementsByTagName("html")[0];
+ hmtlElement.classList.remove('no-js');
+ hmtlElement.classList.add('js');
+ if (w.searxng.touch) {
+ hmtlElement.classList.add('touch');
+ }
})(window, document); \ No newline at end of file
diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js
index d3149340a..0244a90ea 100644
--- a/searx/static/themes/simple/src/js/main/search.js
+++ b/searx/static/themes/simple/src/js/main/search.js
@@ -98,6 +98,7 @@
return false;
});
+ searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery);
searxng.on(d.getElementById('time_range'), 'change', submitIfQuery);
searxng.on(d.getElementById('language'), 'change', submitIfQuery);
}
diff --git a/searx/static/themes/simple/src/less/animations.less b/searx/static/themes/simple/src/less/animations.less
new file mode 100644
index 000000000..750b7d255
--- /dev/null
+++ b/searx/static/themes/simple/src/less/animations.less
@@ -0,0 +1,15 @@
+.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);
+ }
+ }
+}
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 33b65a682..95370849d 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -89,8 +89,10 @@
--color-toolkit-dialog-background: #fff;
--color-toolkit-tabs-label-border: #fff;
--color-toolkit-tabs-section-border: #ddd;
+ --color-toolkit-select-background: #f7f7f7;
--color-toolkit-select-border: #ddd;
- --color-toolkit-select-border-hover: #bbb;
+ --color-toolkit-select-background-hover: #bbb;
+ --color-toolkit-input-text-font: #222;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-background: #3050ff;
--color-toolkit-checkbox-onoff-checked-background: #aaa;
@@ -103,107 +105,118 @@
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
}
+.dark-themes() {
+ /// Base Colors
+ --color-base-font: #bbb;
+ --color-base-font-rgb: 187, 187, 187;
+ --color-base-background: #222;
+ --color-url-font: #8af;
+ --color-url-visited-font: #96b;
+ /// Header Colors
+ --color-header-background: #181818;
+ --color-header-border: #333;
+ /// Footer Colors
+ --color-footer-background: #181818;
+ --color-footer-border: #333;
+ /// Sidebar Colors
+ --color-sidebar-border: #555;
+ --color-sidebar-font: #fff;
+ /// BackToTop Colors
+ --color-backtotop-font: #bbb;
+ --color-backtotop-border: #333;
+ --color-backtotop-background: #181818;
+ /// Button Colors
+ --color-btn-background: #58f;
+ --color-btn-font: #222;
+ /// Search Input Colors
+ --color-search-border: #555;
+ --color-search-background: #222;
+ --color-search-font: #fff;
+ --color-search-background-hover: #58f;
+ /// 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-background: #222;
+ --color-autocomplete-background-hover: #181818;
+ /// Answer Colors
+ --color-answer-border: #333; // same as --color-header-border
+ --color-answer-font: #bbb; // same as --color-base-font
+ --color-answer-background: #181818; // same as --color-header-background:
+ /// Results Colors
+ --color-result-border: #333;
+ --color-result-url-font: #fff;
+ --color-result-vim-selected: #181818;
+ --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: #96b;
+ --color-result-publishdate-font: #888;
+ --color-result-engines-font: #888;
+ --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: #000;
+ --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-background-hover: rgba(0, 0, 0, 0.6);
+ --color-result-image-span-font: #fff;
+ --color-result-image-background: #8af;
+ /// Settings Colors
+ --color-settings-tr-hover: #2d2d2d;
+ --color-settings-engine-description-font: darken(#dcdcdc, 30%);
+ /// Toolkit Colors
+ --color-toolkit-badge-font: #fff;
+ --color-toolkit-badge-background: #777;
+ --color-toolkit-kbd-font: #000;
+ --color-toolkit-kbd-background: #fff;
+ --color-toolkit-dialog-border: #555;
+ --color-toolkit-dialog-background: #222;
+ --color-toolkit-tabs-label-border: #222;
+ --color-toolkit-tabs-section-border: #555;
+ --color-toolkit-select-background: #3c3b31;
+ --color-toolkit-select-border: #555;
+ --color-toolkit-select-background-hover: #333;
+ --color-toolkit-input-text-font: #fff;
+ --color-toolkit-checkbox-onoff-background: #3c3b31;
+ --color-toolkit-checkbox-onoff-label-background: #58f;
+ --color-toolkit-checkbox-onoff-checked-background: #ddd;
+ --color-toolkit-checkbox-label-background: #fff;
+ --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);
+}
+
/// Dark Theme (autoswitch based on device pref)
@media (prefers-color-scheme: dark) {
- :root {
- /// Base Colors
- --color-base-font: #bbb;
- --color-base-font-rgb: 187, 187, 187;
- --color-base-background: #222;
- --color-url-font: #8af;
- --color-url-visited-font: #96b;
- /// Header Colors
- --color-header-background: #181818;
- --color-header-border: #333;
- /// Footer Colors
- --color-footer-background: #181818;
- --color-footer-border: #333;
- /// Sidebar Colors
- --color-sidebar-border: #555;
- --color-sidebar-font: #fff;
- /// BackToTop Colors
- --color-backtotop-font: #bbb;
- --color-backtotop-border: #333;
- --color-backtotop-background: #181818;
- /// Button Colors
- --color-btn-background: #58f;
- --color-btn-font: #222;
- /// Search Input Colors
- --color-search-border: #555;
- --color-search-background: #222;
- --color-search-font: #fff;
- --color-search-background-hover: #58f;
- /// 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-background: #222;
- --color-autocomplete-background-hover: #181818;
- /// Answer Colors
- --color-answer-border: #333; // same as --color-header-border
- --color-answer-font: #bbb; // same as --color-base-font
- --color-answer-background: #181818; // same as --color-header-background:
- /// Results Colors
- --color-result-border: #333;
- --color-result-url-font: #fff;
- --color-result-vim-selected: #181818;
- --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: #96b;
- --color-result-publishdate-font: #777;
- --color-result-engines-font: #777;
- --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: #000;
- --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-background-hover: rgba(0, 0, 0, 0.6);
- --color-result-image-span-font: #fff;
- --color-result-image-background: #8af;
- /// Settings Colors
- --color-settings-tr-hover: #2d2d2d;
- --color-settings-engine-description-font: darken(#dcdcdc, 30%);
- /// Toolkit Colors
- --color-toolkit-badge-font: #fff;
- --color-toolkit-badge-background: #777;
- --color-toolkit-kbd-font: #000;
- --color-toolkit-kbd-background: #fff;
- --color-toolkit-dialog-border: #555;
- --color-toolkit-dialog-background: #222;
- --color-toolkit-tabs-label-border: #222;
- --color-toolkit-tabs-section-border: #555;
- --color-toolkit-select-border: #555;
- --color-toolkit-select-border-hover: #777;
- --color-toolkit-checkbox-onoff-background: #3c3b31;
- --color-toolkit-checkbox-onoff-label-background: #58f;
- --color-toolkit-checkbox-onoff-checked-background: #ddd;
- --color-toolkit-checkbox-label-background: #fff;
- --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);
+ :root.theme-auto {
+ .dark-themes();
}
}
+// Dark Theme by preferences
+:root.theme-dark {
+ .dark-themes();
+}
+
/// General Size
@results-width: 45rem;
@results-offset: 10rem;
@@ -213,13 +226,14 @@
@result-padding: 1rem;
@search-width: 40rem;
// heigh of #search, see detail.less
-@search-height: 7.5rem;
+@search-height: 7.75rem;
/// Device Size
/// @desktop > @tablet
@tablet: 80em;
@phone: 50em;
@small-phone: 35em;
+@ultra-small-phone: 20rem;
/// From style.less
@stacked-bar-chart: rgb(0, 0, 0);
diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less
index 452544a34..ab15be1a3 100644
--- a/searx/static/themes/simple/src/less/detail.less
+++ b/searx/static/themes/simple/src/less/detail.less
@@ -1,5 +1,5 @@
#main_results #results.image-detail-open.only_template_images {
- width: 59.25rem !important;
+ width: min(98%, 59.25rem) !important;
}
#main_results #results.only_template_images.image-detail-open #backToTop {
diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less
index b30dad1d2..9a244da00 100644
--- a/searx/static/themes/simple/src/less/index.less
+++ b/searx/static/themes/simple/src/less/index.less
@@ -22,7 +22,8 @@
visibility: hidden;
}
- #search {
+ #search,
+ #search_header {
margin: 0 auto;
background: inherit;
border: inherit;
diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less
index cc4a5bc64..75c6703a1 100644
--- a/searx/static/themes/simple/src/less/mixins.less
+++ b/searx/static/themes/simple/src/less/mixins.less
@@ -11,20 +11,14 @@
}
.rounded-corners (@radius: 10px) {
- -webkit-border-radius: @radius;
- -moz-border-radius: @radius;
border-radius: @radius;
}
.rounded-right-corners (@radius: 0 10px 10px 0) {
- -webkit-border-radius: @radius;
- -moz-border-radius: @radius;
border-radius: @radius;
}
.rounded-corners-tiny (@radius: 5px) {
- -webkit-border-radius: @radius;
- -moz-border-radius: @radius;
border-radius: @radius;
}
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index e0e3dec4b..c6e691b9d 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -27,6 +27,37 @@
padding: 0;
float: left;
width: 15em;
+
+ select,
+ input[type="text"] {
+ font-size: inherit !important;
+ margin: 0 1rem 0 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 {
@@ -38,11 +69,6 @@
font-size: 90%;
}
- select {
- width: 200px;
- font-size: inherit !important;
- }
-
table {
border-collapse: collapse;
}
@@ -79,6 +105,20 @@
}
}
+ .category {
+ 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);
+ }
+
.name,
.shortcut {
text-align: left;
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 794958594..04ee2cea8 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -3,6 +3,11 @@
*/
#search {
+ padding: 0;
+ margin: 0;
+}
+
+#search_header {
padding: 1.5em 2em 0 @results-offset - 3rem;
margin: 0;
background: var(--color-header-background);
@@ -16,25 +21,62 @@
"spacer categories";
}
+.category {
+ display: inline-block;
+ position: relative;
+ 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 {
grid-area: logo;
-}
+ display: flex;
+ align-items: center;
+ justify-content: center;
-.search_logo_img {
- width: 40px;
+ svg {
+ flex: 1;
+ width: 30px;
+ height: 30px;
+ margin: 0.5rem 0 auto 0;
+ }
}
.search_categories {
grid-area: categories;
}
-#search_wrapper {
+.search_box {
+ margin: 0;
padding: 0;
grid-area: search;
-}
-
-.search_box {
- margin: 0 12px 0 0;
display: inline-flex;
flex-direction: row;
white-space: nowrap;
@@ -73,7 +115,7 @@
border-collapse: separate;
box-sizing: border-box;
margin: 0;
- padding: 8px;
+ padding: 10px;
background: none repeat scroll 0 0 var(--color-search-background);
border: 1px solid var(--color-search-border);
border-radius: 0;
@@ -108,21 +150,36 @@
}
}
+.no-js #clear_search,
.no-js #send_search {
width: auto !important;
+ border-left: 1px solid var(--color-search-border);
+ padding: 10px;
}
.search_filters {
- display: inline-block;
- margin: 0.8rem 0 0 0;
+ margin: 0.6rem 0 0 @results-offset + 0.6rem;
+
+ select {
+ background-color: inherit;
+
+ &:hover,
+ &:focus {
+ color: var(--color-base-font);
+ }
+ }
}
@media screen and (max-width: @tablet) {
- #search {
+ #search_header {
padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
column-gap: @results-tablet-offset;
}
+ .search_filters {
+ margin: 0.6rem 0 0 @results-tablet-offset + 3rem;
+ }
+
#categories {
font-size: 90%;
clear: both;
@@ -150,7 +207,6 @@
#categories {
width: 100%;
- margin: 0;
text-align: left;
overflow-x: scroll;
overflow-y: hidden;
@@ -161,10 +217,10 @@
}
@media screen and (max-width: @phone) {
- #search {
+ #search_header {
width: 100%;
margin: 0;
- padding: 0.1em 0 0 0;
+ padding: 0.1rem 0 0 0;
column-gap: 0;
row-gap: 0;
grid-template-areas:
@@ -176,22 +232,15 @@
padding: 0;
}
- #search_wrapper {
- width: 100%;
- padding: 0;
- }
-
.search_box {
- // hack, should bew 100% ?
+ // hack, should be 100% ?
width: 99%;
- margin: 0.1em;
- padding: 0 0.1em 0 0;
display: flex;
flex-direction: row;
}
#q {
- width: auto !important;
+ width: 100%;
flex: 1;
}
@@ -201,8 +250,7 @@
}
.search_filters {
- display: block;
- margin: 0.8em 0;
+ margin: 0;
}
.language,
@@ -213,47 +261,37 @@
.category {
display: block;
width: 100%;
+ margin: 0;
label {
- padding: 10px !important;
+ padding: 0.8rem !important;
+ margin: 0 !important;
+
+ svg {
+ display: none;
+ }
}
}
}
-#categories {
- margin: 0 10px 0 0;
- .disable-user-select;
-
- &::-webkit-scrollbar {
- width: 0;
- height: 0;
+@media screen and (max-width: @ultra-small-phone) {
+ #search_header {
+ grid-template-areas:
+ "search search"
+ "categories categories";
}
-}
-.category {
- display: inline-block;
- position: relative;
- margin: 0 3px;
- padding: 0;
-
- input {
+ #search_logo {
display: none;
}
+}
- label {
- cursor: pointer;
- padding: 0.3rem 0.75rem 0.5rem 0.75rem;
- margin: 0;
- display: block;
- text-transform: capitalize;
- font-size: 0.9em;
- border-bottom: 2px solid transparent;
- .disable-user-select;
- }
+#categories {
+ .disable-user-select;
- input[type="checkbox"]:checked + label {
- color: var(--color-categories-item-selected-font);
- border-bottom: 2px solid var(--color-categories-item-border-selected);
+ &::-webkit-scrollbar {
+ width: 0;
+ height: 0;
}
}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 0d57772e1..5e015579c 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -10,13 +10,13 @@
@import "../../__common__/less/stats.less";
@import "../../__common__/less/result_templates.less";
@import (inline) "../../node_modules/normalize.css/normalize.css";
-@import "../generated/ion.less";
@import "definitions.less";
@import "mixins.less";
@import "code.less";
@import "toolkit.less";
@import "autocomplete.less";
@import "detail.less";
+@import "animations.less";
// for index.html template
@import "index.less";
@@ -28,10 +28,23 @@
@import "search.less";
// ion-icon
-.ion-icon-big {
+.ion-icon {
+ display: inline-block;
+ vertical-align: bottom;
+ line-height: 1;
+ text-decoration: inherit;
+}
+
+.ion-icon-small {
+ width: 1rem;
+ height: 1rem;
.ion-icon;
+}
- font-size: 149%;
+.ion-icon-big {
+ width: 1.5rem;
+ height: 1.5rem;
+ .ion-icon;
}
// Main LESS-Code
@@ -156,7 +169,7 @@ article[data-vim-selected].category-social {
border-left: 0.2rem solid transparent;
h3 {
- font-size: 1.1em;
+ font-size: 1.2rem;
word-wrap: break-word;
margin: 0.4rem 0 0.4rem 0;
padding: 0;
@@ -209,13 +222,39 @@ article[data-vim-selected].category-social {
}
}
- .url {
- font-size: 0.96em;
- margin: 0 0 3px 0;
- padding: 0;
- max-width: 54em;
- word-wrap: break-word;
+ .url_wrapper {
+ display: flex;
+ font-size: 1rem;
color: var(--color-result-url-font);
+ flex-wrap: nowrap;
+ overflow: hidden;
+ flex-direction: row;
+ margin: 0;
+ padding: 0;
+
+ .url_o1 {
+ white-space: nowrap;
+ flex-shrink: 1;
+ }
+
+ .url_o1::after {
+ content: " ";
+ width: 1ch;
+ display: inline-block;
+ }
+
+ .url_o2 {
+ overflow: hidden;
+ white-space: nowrap;
+ flex-basis: content;
+ flex-grow: 0;
+ flex-shrink: 1;
+ text-align: right;
+
+ .url_i2 {
+ float: right;
+ }
+ }
}
.published_date {
@@ -226,17 +265,15 @@ article[data-vim-selected].category-social {
img {
&.thumbnail {
float: left;
- padding: 0 5px 10px 0;
- width: 20em;
- min-width: 20em;
- min-height: 8em;
+ padding: 0.6rem 1rem 0 0;
+ width: 20rem;
}
&.image {
float: left;
- padding: 0 5px 10px 0;
- width: 100px;
- max-height: 100px;
+ padding: 0.6rem 1rem 0 0;
+ width: 7rem;
+ max-height: 7rem;
object-fit: scale-down;
object-position: right top;
}
@@ -288,6 +325,10 @@ article[data-vim-selected].category-social {
background: inherit;
}
+.empty_element {
+ font-style: italic;
+}
+
.result-images {
display: inline-block;
margin: 0;
@@ -355,7 +396,7 @@ article[data-vim-selected].category-social {
}
#results {
- margin: 2rem 2rem 0 @results-offset;
+ margin: 1rem 2rem 0 @results-offset;
display: grid;
grid-template-columns: @results-width 25rem;
grid-template-rows: min-content min-content 1fr min-content;
@@ -445,7 +486,7 @@ article[data-vim-selected].category-social {
border: 1px solid var(--color-answer-border);
background: var(--color-answer-background);
padding: @result-padding;
- margin: 1rem @results-tablet-offset;
+ margin: 1rem 0;
margin-top: 0;
color: var(--color-answer-font);
.rounded-corners;
@@ -530,7 +571,7 @@ article[data-vim-selected].category-social {
#linkto_preferences {
position: absolute;
right: 10px;
- top: 2rem;
+ top: 2.2rem;
padding: 0;
border: 0;
display: block;
@@ -674,7 +715,7 @@ article[data-vim-selected].category-social {
}
#main_results div#results {
- margin: 2rem auto 0 auto;
+ margin: 1rem auto 0 auto;
justify-content: center;
display: grid;
grid-template-columns: @results-width;
@@ -690,7 +731,7 @@ article[data-vim-selected].category-social {
}
#main_results div#results.only_template_images {
- margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
+ margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
display: grid;
grid-template-columns: 100%;
grid-template-rows: min-content min-content 1fr min-content min-content;
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index faed6ea9f..924c81a08 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -121,20 +121,13 @@ div.selectable_url {
// dialog
.dialog() {
position: relative;
- padding: 1em 1em 1em 2.7em;
+ display: flex;
+ padding: 1rem;
margin: 0 0 1em 0;
border: 1px solid var(--color-toolkit-dialog-border);
text-align: left;
.rounded-corners;
- &::before {
- position: absolute;
- top: 0.5em;
- left: 0.5em;
- font-family: "ion"; // stylelint-disable font-family-no-missing-generic-family-keyword
- font-size: 1.5em;
- }
-
.close {
float: right;
position: relative;
@@ -157,7 +150,7 @@ div.selectable_url {
vertical-align: text-top;
&:hover {
- background: transparent;
+ background: transparent !important;
}
}
@@ -177,7 +170,6 @@ div.selectable_url {
color: var(--color-error);
background: var(--color-error-background);
border-color: var(--color-error);
- .ion-error();
}
.dialog-warning {
@@ -186,12 +178,12 @@ div.selectable_url {
color: var(--color-warning);
background: var(--color-warning-background);
border-color: var(--color-warning);
- .ion-warning();
}
.dialog-modal {
.dialog();
+ display: block;
background: var(--color-toolkit-dialog-background);
position: fixed;
top: 50%;
@@ -199,6 +191,10 @@ div.selectable_url {
margin: 0 auto;
transform: translate(-50%, -50%);
z-index: 10000000;
+
+ h3 {
+ margin-top: 0;
+ }
}
// btn-collapse
@@ -267,7 +263,6 @@ div.selectable_url {
border-bottom: 2px solid var(--color-categories-item-border-selected);
background: var(--color-categories-item-selected);
color: var(--color-categories-item-selected-font);
- font-weight: bold;
letter-spacing: -0.1px;
}
@@ -306,11 +301,11 @@ html body .tabs > input:checked {
/* -- select -- */
select {
- height: 28px;
- margin: 0 1em 0 0;
- padding: 2px 8px 2px 0 !important;
+ height: 2.4rem;
+ margin: 0 1rem 0 0;
+ padding: 0.2rem !important;
color: var(--color-search-font);
- font-size: 12px;
+ font-size: 0.9rem;
z-index: 2;
&:hover,
@@ -324,17 +319,20 @@ select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
- border: none;
- border-bottom: 1px solid var(--color-toolkit-select-border);
+ 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: 105%;
- background-size: 2em;
+ 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 {
- border-bottom: 1px solid var(--color-toolkit-select-border-hover);
+ background-color: var(--color-toolkit-select-background-hover);
}
option {
@@ -343,10 +341,15 @@ select {
}
@media (prefers-color-scheme: dark) {
- select {
+ 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 -- */
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-26 10:01:26 +0000