From 452b26638756e8412566bc320959402f6016565f Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Tue, 28 Sep 2021 22:41:56 +0200 Subject: [theme] convert less vars to css vars in simple theme --- searx/static/themes/simple/src/less/toolkit.less | 46 ++++++++++++------------ 1 file changed, 23 insertions(+), 23 deletions(-) (limited to 'searx/static/themes/simple/src/less/toolkit.less') diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index e9e88e7e0..15f89e1bd 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -36,15 +36,15 @@ html.js .show_if_nojs { } .danger { - background-color: @color-error-background; + background-color: var(--color-error-background); } .warning { - background: @color-warning-background; + background: var(--color-warning-background); } .success { - background: @color-success-background; + background: var(--color-success-background); } .badge { @@ -74,7 +74,7 @@ table { &.striped { tr { - border-bottom: 1px solid @color-settings-tr-hover; + border-bottom: 1px solid var(--color-settings-tr-hover); } } } @@ -89,7 +89,7 @@ td { tr { &:hover { - background: @color-settings-tr-hover; + background: var(--color-settings-tr-hover); } } @@ -104,9 +104,9 @@ tr { div.selectable_url { display: block; - border: 1px solid @color-result-search-url-border; + border: 1px solid var(--color-result-search-url-border); padding: 4px; - color: @color-result-search-url-font; + color: var(--color-result-search-url-font); margin: 0.1em; overflow: hidden; height: 1.2em; @@ -173,18 +173,18 @@ div.selectable_url { .dialog-error { .dialog(); - color: @color-error; - background: @color-error-background; - border-color: @color-error; + color: var(--color-error); + background: var(--color-error-background); + border-color: var(--color-error); .ion-error(); } .dialog-warning { .dialog(); - color: @color-warning; - background: @color-warning-background; - border-color: @color-warning; + color: var(--color-warning); + background: var(--color-warning-background); + border-color: var(--color-warning); .ion-warning(); } @@ -253,7 +253,7 @@ div.selectable_url { } & > label:hover { - border-bottom: 2px solid @color-categories-item-border-selected; + border-bottom: 2px solid var(--color-categories-item-border-selected); } & > section { @@ -266,9 +266,9 @@ div.selectable_url { // default selection & > label:last-of-type { - border-bottom: 2px solid @color-categories-item-border-selected; - background: @color-categories-item-selected; - color: @color-categories-item-selected-font; + 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; } @@ -291,14 +291,14 @@ html body .tabs > input:checked { color: inherit; &:hover { - border-bottom: 2px solid @color-categories-item-border-selected; + border-bottom: 2px solid var(--color-categories-item-border-selected); } } + label { - border-bottom: 2px solid @color-categories-item-border-selected; - background: @color-categories-item-selected; - color: @color-categories-item-selected-font; + 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 { @@ -311,7 +311,7 @@ select { height: 28px; margin: 0 1em 0 0; padding: 2px 8px 2px 0 !important; - color: @color-search-font; + color: var(--color-search-font); font-size: 12px; z-index: 2; @@ -336,7 +336,7 @@ select { &:hover, &:focus { - border-bottom: 1px solid @color-search-border; + border-bottom: 1px solid var(--color-search-border); } } } -- cgit v1.2.3 From 7c2a518d120ec02c4cead76faa1ba5fcec205373 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Thu, 30 Sep 2021 18:12:42 +0200 Subject: [theme] replace all hardcoded colors by css vars and drop ununsed vars --- searx/static/themes/simple/src/less/toolkit.less | 48 ++++++++++++------------ 1 file changed, 24 insertions(+), 24 deletions(-) (limited to 'searx/static/themes/simple/src/less/toolkit.less') diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 15f89e1bd..8c0b42e69 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -49,8 +49,8 @@ html.js .show_if_nojs { .badge { display: inline-block; - color: #fff; - background-color: #777; + color: var(--color-toolkit-badge-font); + background-color: var(--color-toolkit-badge-background); text-align: center; white-space: nowrap; vertical-align: baseline; @@ -64,8 +64,8 @@ kbd { padding: 2px 4px; margin: 1px; font-size: 90%; - color: white; - background: black; + color: var(--color-toolkit-kbd-font); + background: var(--color-toolkit-kbd-background); } // table @@ -122,7 +122,7 @@ div.selectable_url { position: relative; padding: 1em 1em 1em 2.7em; margin: 0 0 1em 0; - border: 1px solid black; + border: 1px solid var(--color-toolkit-dialog-border); border-radius: 4px; text-align: left; @@ -191,7 +191,7 @@ div.selectable_url { .dialog-modal { .dialog(); - background: white; + background: var(--color-toolkit-dialog-background); position: fixed; top: 50%; left: 50%; @@ -244,7 +244,7 @@ div.selectable_url { margin: 0 0.7em; letter-spacing: 0.5px; text-transform: uppercase; - border: solid white; + border: solid var(--color-toolkit-tabs-label-border); border-width: 0 0 2px 0; .disable-user-select(); @@ -260,7 +260,7 @@ div.selectable_url { min-width: 100%; padding: 0.7rem 0; box-sizing: border-box; - border-top: 1px solid black; + border-top: 1px solid var(--color-toolkit-tabs-section-border); display: none; } @@ -327,7 +327,7 @@ select { -webkit-appearance: none; -moz-appearance: none; border: none; - border-bottom: 1px solid #d7d7d7; + border-bottom: 1px solid var(--color-toolkit-select-border); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat; background-position-x: 105%; background-size: 2em; @@ -347,7 +347,7 @@ select { display: inline-block; width: 40px; height: 10px; - background: #dcdcdc; + background: var(--color-toolkit-checkbox-onoff-background); margin: 8px 1rem; position: relative; border-radius: 50px; @@ -360,10 +360,10 @@ select { top: -5px; cursor: pointer; border-radius: 50px; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 5px 0 var(--color-toolkit-checkbox-onoff-label-shadow); transition: all 0.4s ease; left: 27px; - background-color: #3498db; + background-color: var(--color-toolkit-checkbox-onoff-label-background); } input[type=checkbox] { @@ -371,7 +371,7 @@ select { &:checked + label { left: -5px; - background: #dcdcdc; + background: var(--color-toolkit-checkbox-onoff-checked-background); } } } @@ -391,9 +391,9 @@ select { position: absolute; top: 0; left: 0; - background: white; + background: var(--color-toolkit-checkbox-label-background); border-radius: 4px; - box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2); &::after { content: ''; @@ -402,7 +402,7 @@ select { position: absolute; top: 4px; left: 4px; - border: 3px solid #333; + border: 3px solid var(--color-toolkit-checkbox-label-border); border-top: none; border-right: none; background: transparent; @@ -415,7 +415,7 @@ select { visibility: hidden; &:checked + label::after { - border-color: #3498db; + border-color: var(--color-toolkit-checkbox-input-border); opacity: 1; } } @@ -453,10 +453,10 @@ select { font-size: 10px; position: relative; text-indent: -9999em; - border-top: 0.5em solid rgba(0, 0, 0, 0.2); - border-right: 0.5em solid rgba(0, 0, 0, 0.2); - border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); - border-left: 0.5em solid rgba(255, 255, 255, 0); + 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); @@ -494,9 +494,9 @@ select { position: absolute; padding: 0.5rem 1rem; margin: 0 0 0 2rem; - border: 1px solid #ddd; - box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); - background: white; + border: 1px solid var(--color-toolkit-engine-tooltip-border); + box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow); + background: var(--color-toolkit-engine-tooltip-background); font-size: 14px; font-weight: normal; z-index: 1000000; -- cgit v1.2.3 From 740fca00ccabbbccd24e9fd6b17f5a56394cfca1 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Wed, 6 Oct 2021 20:12:51 +0200 Subject: Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect --- searx/static/themes/simple/src/less/toolkit.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'searx/static/themes/simple/src/less/toolkit.less') diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 8c0b42e69..84b5e6a8c 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -123,8 +123,8 @@ div.selectable_url { padding: 1em 1em 1em 2.7em; margin: 0 0 1em 0; border: 1px solid var(--color-toolkit-dialog-border); - border-radius: 4px; text-align: left; + .rounded-corners; &::before { position: absolute; -- cgit v1.2.3 From 3daa024c04d9e6133d456d9c103b5f67fa15f643 Mon Sep 17 00:00:00 2001 From: MrPaulBlack Date: Fri, 8 Oct 2021 16:06:48 +0200 Subject: [simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors --- searx/static/themes/simple/src/less/toolkit.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'searx/static/themes/simple/src/less/toolkit.less') diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 84b5e6a8c..8c92fe488 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -392,8 +392,7 @@ select { top: 0; left: 0; background: var(--color-toolkit-checkbox-label-background); - border-radius: 4px; - box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2); + .rounded-corners; &::after { content: ''; @@ -495,12 +494,13 @@ select { padding: 0.5rem 1rem; margin: 0 0 0 2rem; border: 1px solid var(--color-toolkit-engine-tooltip-border); - box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow); + box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow); 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, -- cgit v1.2.3