OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity

[theme] convert less vars to css vars in simple theme

Browse source
This commit is contained in:
MrPaulBlack 2021-09-28 22:41:56 +02:00
parent 878d5d657c
commit 452b266387
6 changed files with 180 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
searx/static/themes/simple/src/less/autocomplete.less
View file

@ -1,7 +1,5 @@
/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */ /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
@background_color: white;
.autocomplete { .autocomplete {
position: absolute; position: absolute;
max-height: 0; max-height: 0;
@ -11,7 +9,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: @background_color; background-color: var(--background_color);
} }
&:empty { &:empty {
@ -30,7 +28,7 @@
&.active, &.active,
&:active, &:active,
&:focus { &:focus {
background-color: @color-base; background-color: var(--color-base);
a:active, a:active,
a:focus, a:focus,
@ -47,8 +45,8 @@
&.open { &.open {
display: block; display: block;
background-color: @background_color; background-color: var(--background_color);
border: 1px solid @color-base; border: 1px solid var(--color-base);
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;
@ -66,7 +64,7 @@
.autocomplete > ul > li { .autocomplete > ul > li {
padding: 7px 0 7px 10px; padding: 7px 0 7px 10px;
border-bottom: 1px solid @color-result-top-border; border-bottom: 1px solid var(--color-result-top-border);
text-align: left; text-align: left;
} }
} }

224
searx/static/themes/simple/src/less/definitions.less
View file

@ -4,140 +4,124 @@
* To change the colors of the site, simple edit this variables * To change the colors of the site, simple edit this variables
*/ */
/// Basic Colors html {
/// Basic Colors
--color-base: #3498db;
--color-base-dark: #084999;
--color-base-light: #ecf0f1;
--color-highlight: #094089;
--color-black: #000;
@color-base: #3498DB; /// From autocomplete.less
@color-base-dark: #084999; --background_color: white;
@color-base-light: #ECF0F1;
@color-highlight: #094089;
@color-black: #000000;
/// /// Modal Colors
@color-error: #db3434; --color-error: #db3434;
@color-error-background: lighten(@color-error, 40%); --color-error-background: lighten(#db3434, 40%);
--color-warning: #dbba34;
--color-warning-background: lighten(#dbba34, 40%);
--color-success: #42db34;
--color-success-background: lighten(#42db34, 40%);
@color-warning: #dbba34; /// General Colors
@color-warning-background: lighten(@color-warning, 40%); --color-font: #444;
--color-font-light: #888;
--color-red: #25a55b;
--color-url-font: #29314d;
--color-url-visited-font: #684898;
@color-success: #42db34; /// Link Colors
@color-success-background: lighten(@color-success, 40%); --color-a-font: var(--color-base);
--color-a-font-hover: var(--color-base);
/// General /// Header
--color-header-background: #f7f7f7;
--color-header-border: #d7d7d7;
@color-font: #444; /// Footer
@color-font-light: #888; --color-footer-background: #f7f7f7;
--color-footer-border: #d7d7d7;
@color-red: #25a55b; /// Search-Input
--color-search-border: var(--color-base);
--color-search-background: #fff;
--color-search-font: #222;
@color-url-font: #29314d; /// Autocompleter
@color-url-visited-font: #684898; --color-autocompleter-choices-background: #fff;
--color-autocompleter-choices-border: var(--color-base);
--color-autocompleter-choices-border-left-right: var(--color-base);
--color-autocompleter-choices-border-bottom: var(--color-base);
--color-autocompleter-choices-font: #444;
/// Answers
--color-answers-border: var(--color-base-dark);
// Selected
--color-autocompleter-selected-background: #444;
--color-autocompleter-selected-font: #fff;
--color-autocompleter-selected-queried-font: #9fcfff;
/// Categories
--color-categories-item-selected: var(--color-base);
--color-categories-item-selected-font: #fff;
--color-categories-item-border-selected: var(--color-base-dark);
--color-categories-item-border-unselected: #e8e7e6;
--color-categories-item-border-unselected-hover: var(--color-base);
/// Results
--color-suggestions-button-background: var(--color-base);
--color-suggestions-button-font: #fff;
--color-download-button-background: var(--color-base);
--color-download-button-font: #fff;
--color-result-search-background: var(--color-base-light);
--color-result-definition-border: gray;
--color-result-torrent-border: lightgray;
--color-result-top-border: #e8e7e6;
// Link to result
--color-result-link-font: var(--color-base-dark);
--color-result-link-visited-font: var(--color-url-visited-font);
// Url to result
--color-result-url-font: var(--color-red);
// Publish Date
--color-result-publishdate-font: var(--color-font-light);
// Images
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
// Search-URL
--color-result-search-url-border: #888;
--color-result-search-url-font: #444;
/// Settings
--color-settings-fieldset: var(--color-base);
--color-settings-table-striped: #dbdbdb;
--color-settings-tr-hover: #ececec;
// Labels
--color-settings-label-allowed-background: #e74c3c;
--color-settings-label-allowed-font: #fff;
--color-settings-label-deny-background: #2eee71;
--color-settings-label-deny-font: var(--color-font);
--color-settings-return-background: var(--color-base);
--color-settings-return-font: #fff;
/// Other
--color-engines-font: var(--color-font-light);
--color-percentage-div-background: #444;
}
/// General Size
@results-width: 45rem; @results-width: 45rem;
@results-offset: 10rem; @results-offset: 10rem;
@results-tablet-offset: 0.5rem; @results-tablet-offset: 0.5rem;
@results-gap: 5rem; @results-gap: 5rem;
@search-width: 40rem; @search-width: 40rem;
//
@color-a-font: @color-base;
@color-a-font-hover: @color-base;
/// Start-Screen
/// Header
@color-header-background: #f7f7f7;
@color-header-border: #d7d7d7;
/// Footer
@color-footer-background: #f7f7f7;
@color-footer-border: #d7d7d7;
/// Search-Input
@color-search-border: @color-base;
@color-search-background: #FFF;
@color-search-font: #222;
/// Autocompleter
@color-autocompleter-choices-background: #FFF;
@color-autocompleter-choices-border: @color-base;
@color-autocompleter-choices-border-left-right: @color-base;
@color-autocompleter-choices-border-bottom: @color-base;
@color-autocompleter-choices-font: #444;
/// Answers
@color-answers-border: @color-base-dark;
// Selected
@color-autocompleter-selected-background: #444;
@color-autocompleter-selected-font: #FFF;
@color-autocompleter-selected-queried-font: #9FCFFF;
/// Categories
@color-categories-item-selected: @color-base;
@color-categories-item-selected-font: #FFF;
@color-categories-item-border-selected: @color-base-dark;
@color-categories-item-border-unselected: #E8E7E6;
@color-categories-item-border-unselected-hover: @color-base;
/// Results
@color-suggestions-button-background: @color-base;
@color-suggestions-button-font: #FFF;
@color-download-button-background: @color-base;
@color-download-button-font: #FFF;
@color-result-search-background: @color-base-light;
@color-result-definition-border: gray;
@color-result-torrent-border: lightgray;
@color-result-top-border: #E8E7E6;
// Link to result
@color-result-link-font: @color-base-dark;
@color-result-link-visited-font: @color-url-visited-font;
// Url to result
@color-result-url-font: @color-red;
// Publish Date
@color-result-publishdate-font: @color-font-light;
// Images
@color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
@color-result-image-span-font: #FFF;
// Search-URL
@color-result-search-url-border: #888;
@color-result-search-url-font: #444;
/// Settings
@color-settings-fieldset: @color-base;
@color-settings-table-striped: #dbdbdb;
@color-settings-tr-hover: #ececec;
// Labels
@color-settings-label-allowed-background: #E74C3C;
@color-settings-label-allowed-font: #FFF;
@color-settings-label-deny-background: #2ECC71;
@color-settings-label-deny-font: @color-font;
@color-settings-return-background: @color-base;
@color-settings-return-font: #FFF;
/// Other
@color-engines-font: @color-font-light;
@color-percentage-div-background: #444;
/// Load fonts from this directory. /// Load fonts from this directory.
@icon-font-path: "../../../fonts/"; @icon-font-path: "../../../fonts/";
//** File name for all font files. //** File name for all font files.

6
searx/static/themes/simple/src/less/preferences.less
View file

@ -73,7 +73,7 @@
& > tbody > tr:nth-child(even) > th, & > tbody > tr:nth-child(even) > th,
& > tbody > tr:nth-child(even) > td { & > tbody > tr:nth-child(even) > td {
background-color: @color-settings-tr-hover; background-color: var(--color-settings-tr-hover);
} }
} }
@ -83,7 +83,7 @@
} }
.preferences_back { .preferences_back {
background: none repeat scroll 0 0 @color-settings-return-background; background: none repeat scroll 0 0 var(--color-settings-return-background);
color: white; color: white;
border: 0 none; border: 0 none;
.rounded-corners; .rounded-corners;
@ -95,7 +95,7 @@
a { a {
display: block; display: block;
color: @color-settings-return-font; color: var(--color-settings-return-font);
} }
a::first-letter { a::first-letter {

30
searx/static/themes/simple/src/less/search.less
View file

@ -5,8 +5,8 @@
#search { #search {
padding: 0 2em 0 @results-offset; padding: 0 2em 0 @results-offset;
margin: 0; margin: 0;
background: @color-header-background; background: var(--color-header-background);
border-bottom: 1px solid @color-header-border; border-bottom: 1px solid var(--color-header-border);
} }
#search_wrapper { #search_wrapper {
@ -34,19 +34,19 @@
margin: 0; margin: 0;
padding: 2px; padding: 2px;
height: 2.2em; height: 2.2em;
background: none repeat scroll 0 0 @color-search-background; background: none repeat scroll 0 0 var(--color-search-background);
border-top: 1px solid @color-search-border; border-top: 1px solid var(--color-search-border);
border-bottom: 1px solid @color-search-border; border-bottom: 1px solid var(--color-search-border);
border-right: none; border-right: none;
border-left: none; border-left: none;
border-radius: 0; border-radius: 0;
outline: none; outline: none;
color: @color-search-font; color: var(--color-search-font);
font-size: 16px; font-size: 16px;
z-index: 10000; z-index: 10000;
&:hover { &:hover {
color: @color-search-border; color: var(--color-search-border);
} }
&.empty * { &.empty * {
@ -62,11 +62,11 @@
margin: 0; margin: 0;
padding: 2px; padding: 2px;
height: 2.2em; height: 2.2em;
background: none repeat scroll 0 0 @color-search-background; background: none repeat scroll 0 0 var(--color-search-background);
border: 1px solid @color-search-border; border: 1px solid var(--color-search-border);
border-radius: 0; border-radius: 0;
outline: none; outline: none;
color: @color-search-font; color: var(--color-search-font);
font-size: 16px; font-size: 16px;
z-index: 2; z-index: 2;
} }
@ -90,8 +90,8 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: @color-search-border; background-color: var(--color-search-border);
color: @color-base-light; color: var(--color-base-light);
} }
} }
@ -233,9 +233,9 @@
} */ } */
input[type="checkbox"]:checked + label { input[type="checkbox"]:checked + label {
background: @color-categories-item-selected; background: var(--color-categories-item-selected);
color: @color-categories-item-selected-font; color: var(--color-categories-item-selected-font);
border-bottom: 2px solid @color-categories-item-border-selected; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
} }

60
searx/static/themes/simple/src/less/style.less
View file

@ -41,7 +41,7 @@ html {
font-size: 0.9em; font-size: 0.9em;
.text-size-adjust; .text-size-adjust;
color: @color-font; color: var(--color-font);
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -78,8 +78,8 @@ footer {
padding: 1rem 0; padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: @color-footer-background; background-color: var(--color-footer-background);
border-top: 1px solid @color-footer-border; border-top: 1px solid var(--color-footer-border);
overflow: hidden; overflow: hidden;
p { p {
@ -103,8 +103,8 @@ input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.5rem;
display: inline-block; display: inline-block;
background: @color-download-button-background; background: var(--color-download-button-background);
color: @color-download-button-font; color: var(--color-download-button-font);
.rounded-corners; .rounded-corners;
border: 0; border: 0;
@ -113,13 +113,13 @@ input[type="submit"],
a { a {
text-decoration: none; text-decoration: none;
color: @color-url-font; color: var(--color-url-font);
&:visited { &:visited {
color: @color-url-visited-font; color: var(--color-url-visited-font);
.highlight { .highlight {
color: @color-url-visited-font; color: var(--color-url-visited-font);
} }
} }
} }
@ -134,11 +134,11 @@ article[data-vim-selected]::before {
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
color: @color-base; color: var(--color-base);
} }
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: @color-base; background: var(--color-base);
} }
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
@ -158,12 +158,12 @@ article.result-images[data-vim-selected]::before {
margin-bottom: 0; margin-bottom: 0;
a { a {
color: @color-result-link-font; color: var(--color-result-link-font);
font-weight: normal; font-weight: normal;
font-size: 1.1em; font-size: 1.1em;
&:visited { &:visited {
color: @color-result-link-visited-font; color: var(--color-result-link-visited-font);
} }
&:focus, &:focus,
@ -193,7 +193,7 @@ article.result-images[data-vim-selected]::before {
line-height: 1.24; line-height: 1.24;
.highlight { .highlight {
color: @color-black; color: var(--color-black);
background: inherit; background: inherit;
font-weight: bold; font-weight: bold;
} }
@ -213,12 +213,12 @@ article.result-images[data-vim-selected]::before {
padding: 0; padding: 0;
max-width: 54em; max-width: 54em;
word-wrap: break-word; word-wrap: break-word;
color: @color-result-url-font; color: var(--color-result-url-font);
} }
.published_date { .published_date {
font-size: 0.8em; font-size: 0.8em;
color: @color-result-publishdate-font; color: var(--color-result-publishdate-font);
} }
img { img {
@ -228,7 +228,7 @@ article.result-images[data-vim-selected]::before {
width: 20em; width: 20em;
min-width: 20em; min-width: 20em;
min-height: 8em; min-height: 8em;
// background: @color-base-light; // background: var(--color-base-light);
} }
&.image { &.image {
@ -259,7 +259,7 @@ article.result-images[data-vim-selected]::before {
.engines { .engines {
float: right; float: right;
color: @color-engines-font; color: var(--color-engines-font);
span { span {
font-size: smaller; font-size: smaller;
@ -272,7 +272,7 @@ article.result-images[data-vim-selected]::before {
} }
.highlight { .highlight {
color: @color-highlight; color: var(--color-highlight);
background: inherit; background: inherit;
font-weight: bold; font-weight: bold;
} }
@ -290,12 +290,12 @@ article.result-images[data-vim-selected]::before {
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; max-height: 200px;
background: @color-base-dark; background: var(--color-base-dark);
} }
span a { span a {
display: none; display: none;
color: @color-result-image-span-font; color: var(--color-result-image-span-font);
} }
&:hover span a { &:hover span a {
@ -305,7 +305,7 @@ article.result-images[data-vim-selected]::before {
right: 0; right: 0;
padding: 4px; padding: 4px;
margin: 0 0 4px 4px; margin: 0 0 4px 4px;
background-color: @color-result-image-span-background-hover; background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em; font-size: 0.7em;
} }
} }
@ -342,7 +342,7 @@ article.result-images[data-vim-selected]::before {
} }
.torrent_result { .torrent_result {
border-left: 10px solid @color-result-torrent-border; border-left: 10px solid var(--color-result-torrent-border);
padding-left: 3px; padding-left: 3px;
p { p {
@ -351,14 +351,14 @@ article.result-images[data-vim-selected]::before {
} }
a { a {
color: @color-result-link-font; color: var(--color-result-link-font);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
&:visited { &:visited {
color: @color-result-link-visited-font; color: var(--color-result-link-visited-font);
} }
} }
} }
@ -410,13 +410,13 @@ article.result-images[data-vim-selected]::before {
font-size: 0.9em; font-size: 0.9em;
display: inline-block; display: inline-block;
background: transparent; background: transparent;
color: @color-result-search-url-font; color: var(--color-result-search-url-font);
cursor: pointer; cursor: pointer;
} }
input[type="submit"], input[type="submit"],
.infobox .url a { .infobox .url a {
color: @color-result-link-font; color: var(--color-result-link-font);
text-decoration: none; text-decoration: none;
font-size: 0.9rem; font-size: 0.9rem;
@ -447,7 +447,7 @@ article.result-images[data-vim-selected]::before {
#search_url .title, #search_url .title,
#apis .title { #apis .title {
margin: 2em 0 0.5em 0; margin: 2em 0 0.5em 0;
color: @color-font; color: var(--color-font);
} }
#answers { #answers {
@ -547,13 +547,13 @@ article.result-images[data-vim-selected]::before {
border: 0; border: 0;
display: block; display: block;
font-size: 1.2em; font-size: 1.2em;
color: @color-search-font; color: var(--color-search-font);
a:link *, a:link *,
a:hover *, a:hover *,
a:visited *, a:visited *,
a:active * { a:active * {
color: @color-search-font; color: var(--color-search-font);
} }
} }
@ -633,7 +633,7 @@ article.result-images[data-vim-selected]::before {
} }
.result { .result {
border-bottom: 1px solid @color-result-top-border; border-bottom: 1px solid var(--color-result-top-border);
margin: 0; margin: 0;
padding-top: 8px; padding-top: 8px;
padding-bottom: 6px; padding-bottom: 6px;

46
searx/static/themes/simple/src/less/toolkit.less
View file

@ -36,15 +36,15 @@ html.js .show_if_nojs {
} }
.danger { .danger {
background-color: @color-error-background; background-color: var(--color-error-background);
} }
.warning { .warning {
background: @color-warning-background; background: var(--color-warning-background);
} }
.success { .success {
background: @color-success-background; background: var(--color-success-background);
} }
.badge { .badge {
@ -74,7 +74,7 @@ table {
&.striped { &.striped {
tr { tr {
border-bottom: 1px solid @color-settings-tr-hover; border-bottom: 1px solid var(--color-settings-tr-hover);
} }
} }
} }
@ -89,7 +89,7 @@ td {
tr { tr {
&:hover { &:hover {
background: @color-settings-tr-hover; background: var(--color-settings-tr-hover);
} }
} }
@ -104,9 +104,9 @@ tr {
div.selectable_url { div.selectable_url {
display: block; display: block;
border: 1px solid @color-result-search-url-border; border: 1px solid var(--color-result-search-url-border);
padding: 4px; padding: 4px;
color: @color-result-search-url-font; color: var(--color-result-search-url-font);
margin: 0.1em; margin: 0.1em;
overflow: hidden; overflow: hidden;
height: 1.2em; height: 1.2em;
@ -173,18 +173,18 @@ div.selectable_url {
.dialog-error { .dialog-error {
.dialog(); .dialog();
color: @color-error; color: var(--color-error);
background: @color-error-background; background: var(--color-error-background);
border-color: @color-error; border-color: var(--color-error);
.ion-error(); .ion-error();
} }
.dialog-warning { .dialog-warning {
.dialog(); .dialog();
color: @color-warning; color: var(--color-warning);
background: @color-warning-background; background: var(--color-warning-background);
border-color: @color-warning; border-color: var(--color-warning);
.ion-warning(); .ion-warning();
} }
@ -253,7 +253,7 @@ div.selectable_url {
} }
& > label:hover { & > label:hover {
border-bottom: 2px solid @color-categories-item-border-selected; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
& > section { & > section {
@ -266,9 +266,9 @@ div.selectable_url {
// default selection // default selection
& > label:last-of-type { & > label:last-of-type {
border-bottom: 2px solid @color-categories-item-border-selected; border-bottom: 2px solid var(--color-categories-item-border-selected);
background: @color-categories-item-selected; background: var(--color-categories-item-selected);
color: @color-categories-item-selected-font; color: var(--color-categories-item-selected-font);
font-weight: bold; font-weight: bold;
letter-spacing: -0.1px; letter-spacing: -0.1px;
} }
@ -291,14 +291,14 @@ html body .tabs > input:checked {
color: inherit; color: inherit;
&:hover { &:hover {
border-bottom: 2px solid @color-categories-item-border-selected; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
} }
+ label { + label {
border-bottom: 2px solid @color-categories-item-border-selected; border-bottom: 2px solid var(--color-categories-item-border-selected);
background: @color-categories-item-selected; background: var(--color-categories-item-selected);
color: @color-categories-item-selected-font; color: var(--color-categories-item-selected-font);
} }
+ label + section { + label + section {
@ -311,7 +311,7 @@ select {
height: 28px; height: 28px;
margin: 0 1em 0 0; margin: 0 1em 0 0;
padding: 2px 8px 2px 0 !important; padding: 2px 8px 2px 0 !important;
color: @color-search-font; color: var(--color-search-font);
font-size: 12px; font-size: 12px;
z-index: 2; z-index: 2;
@ -336,7 +336,7 @@ select {
&:hover, &:hover,
&:focus { &:focus {
border-bottom: 1px solid @color-search-border; border-bottom: 1px solid var(--color-search-border);
} }
} }
} }