mirror of
https://github.com/searxng/searxng
synced 2024-01-01 18:24:07 +00:00
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
This commit is contained in:
MrPaulBlack
parent
7c2a518d12
commit
740fca00cc
@ -5,11 +5,12 @@
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
text-align: left;
|
||||
.rounded-corners;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-autocompoleter-background);
|
||||
background-color: var(--color-autocomplete-background);
|
||||
}
|
||||
|
||||
&:empty {
|
||||
@ -23,12 +24,13 @@
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
padding: 5px 0 5px 10px;
|
||||
padding: 8px 0 8px 8px;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: var(--color-base);
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--color-autocomplete-background-hover);
|
||||
|
||||
a:active,
|
||||
a:focus,
|
||||
@ -45,8 +47,8 @@
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
background-color: var(--color-autocompleter-background);
|
||||
border: 1px solid var(--color-base);
|
||||
background-color: var(--color-autocomplete-background);
|
||||
border: 1px solid var(--color-base-border);
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
z-index: 100;
|
||||
@ -63,7 +65,6 @@
|
||||
}
|
||||
|
||||
.autocomplete > ul > li {
|
||||
padding: 7px 0 7px 10px;
|
||||
border-bottom: 1px solid var(--color-result-top-border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -5,14 +5,25 @@
|
||||
*/
|
||||
|
||||
html {
|
||||
/// Basic Colors
|
||||
--color-base: #3498db;
|
||||
--color-base-dark: #084999;
|
||||
--color-base-light: #ecf0f1;
|
||||
--color-highlight: #094089;
|
||||
--color-black: #000;
|
||||
--color-base-border: #d7d7d7;
|
||||
/// Base Colors
|
||||
--color-base: #084999;
|
||||
--color-base-font: #444;
|
||||
--color-base-border: #ddd;
|
||||
--color-base-shadow: #ccc;
|
||||
--color-base-background: #fff;
|
||||
--color-url-font: #29314d;
|
||||
--color-url-visited-font: #684898;
|
||||
--color-header-footer-background: #f7f7f7;
|
||||
|
||||
/// Button Colors
|
||||
--color-btn-background: #084999;
|
||||
--color-btn-font: #fff;
|
||||
|
||||
/// Search Input Colors
|
||||
--color-search-border: #ddd;
|
||||
--color-search-background: #fff;
|
||||
--color-search-font: #222;
|
||||
--color-search-background-hover: #084999;
|
||||
|
||||
/// Modal Colors
|
||||
--color-error: #db3434;
|
||||
@ -22,68 +33,46 @@ html {
|
||||
--color-success: #42db34;
|
||||
--color-success-background: lighten(#42db34, 40%);
|
||||
|
||||
/// General Colors
|
||||
--color-font: #444;
|
||||
--color-font-light: #888;
|
||||
--color-url-font: #29314d;
|
||||
--color-url-visited-font: #684898;
|
||||
/// Categories Colors
|
||||
--color-categories-item-selected-font: #084999;
|
||||
--color-categories-item-border-selected: #084999;
|
||||
|
||||
/// Header
|
||||
--color-header-background: #f7f7f7;
|
||||
|
||||
/// Footer
|
||||
--color-footer-background: #f7f7f7;
|
||||
|
||||
/// Search-Input
|
||||
--color-search-border: var(--color-base);
|
||||
--color-search-background: #fff;
|
||||
--color-search-font: #222;
|
||||
--color-search-help: white;
|
||||
|
||||
/// Autocompleter
|
||||
--color-autocompleter-background: white;
|
||||
|
||||
/// 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;
|
||||
/// Autocompleter Colors
|
||||
--color-autocomplete-background: #fff;
|
||||
--color-autocomplete-background-hover: #f7f7f7;
|
||||
|
||||
/// Results
|
||||
--color-download-button-background: var(--color-base);
|
||||
--color-download-button-font: #fff;
|
||||
--color-result-torrent-border: lightgray;
|
||||
--color-result-top-border: #e8e7e6;
|
||||
--color-result-vim-selected: #f7f7f7;
|
||||
--color-result-description-highlight-font: #000;
|
||||
|
||||
// Link to result
|
||||
--color-result-link-font: var(--color-base-dark);
|
||||
--color-result-link-font: #084999;
|
||||
--color-result-link-font-highlight: #084999;
|
||||
--color-result-link-visited-font: var(--color-url-visited-font);
|
||||
|
||||
// Url to result
|
||||
--color-result-url-font: #25a55b;
|
||||
|
||||
// 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;
|
||||
--color-result-url-font: #000;
|
||||
|
||||
// Search-URL
|
||||
--color-result-search-url-border: #888;
|
||||
--color-result-search-url-font: #444;
|
||||
|
||||
// Publish Date
|
||||
--color-result-publishdate-font: #777;
|
||||
|
||||
// Images
|
||||
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
|
||||
--color-result-image-span-font: #fff;
|
||||
--color-result-image-background: #084999;
|
||||
|
||||
/// Settings
|
||||
--color-settings-tr-hover: #ececec;
|
||||
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
||||
|
||||
// Labels
|
||||
--color-settings-return-background: var(--color-base);
|
||||
--color-settings-return-font: #fff;
|
||||
|
||||
/// Other
|
||||
--color-engines-font: var(--color-font-light);
|
||||
--color-engines-font: #888;
|
||||
|
||||
/// From Toolkit
|
||||
--color-toolkit-badge-font: #fff;
|
||||
@ -94,16 +83,16 @@ html {
|
||||
--color-toolkit-dialog-background: #fff;
|
||||
--color-toolkit-tabs-label-border: #fff;
|
||||
--color-toolkit-tabs-section-border: #000;
|
||||
--color-toolkit-select-border: #d7d7d7;
|
||||
--color-toolkit-select-border: #ddd;
|
||||
--color-toolkit-checkbox-onoff-background: #dcdcdc;
|
||||
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
|
||||
--color-toolkit-checkbox-onoff-label-background: #3498db;
|
||||
--color-toolkit-checkbox-onoff-label-background: #084999;
|
||||
--color-toolkit-checkbox-onoff-checked-background: #dcdcdc;
|
||||
--color-toolkit-checkbox-label-background: #fff;
|
||||
--color-toolkit-checkbox-label-shadow1: #fff;
|
||||
--color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5);
|
||||
--color-toolkit-checkbox-label-border: #333;
|
||||
--color-toolkit-checkbox-input-border: #3498db;
|
||||
--color-toolkit-checkbox-input-border: #084999;
|
||||
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
||||
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
||||
--color-toolkit-engine-tooltip-border: #ddd;
|
||||
@ -116,6 +105,7 @@ html {
|
||||
@results-offset: 10rem;
|
||||
@results-tablet-offset: 0.5rem;
|
||||
@results-gap: 5rem;
|
||||
@results-margin: 2rem;
|
||||
@search-width: 40rem;
|
||||
|
||||
/// From style.less
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
text-size-adjust: @property;
|
||||
}
|
||||
|
||||
.rounded-corners (@radius: 4px) {
|
||||
.rounded-corners (@radius: 10px) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
.column-reliability {
|
||||
.engine-tooltip {
|
||||
right: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
#tab-contentquery table td,
|
||||
#tab-contentquery table th {
|
||||
text-align: left !important;
|
||||
@ -83,15 +77,15 @@
|
||||
}
|
||||
|
||||
.preferences_back {
|
||||
background: none repeat scroll 0 0 var(--color-settings-return-background);
|
||||
color: var(--color-settings-return-font);
|
||||
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.5em;
|
||||
padding: 0.7em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
#search {
|
||||
padding: 0 2em 0 @results-offset;
|
||||
margin: 0;
|
||||
background: var(--color-header-background);
|
||||
background: var(--color-header-footer-background);
|
||||
border-bottom: 1px solid var(--color-base-border);
|
||||
}
|
||||
|
||||
#search_wrapper {
|
||||
padding: 10px 0;
|
||||
padding: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
@ -32,8 +32,7 @@
|
||||
box-sizing: border-box;
|
||||
width: 1.8em;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
height: 2.2em;
|
||||
padding: 8px 2px;
|
||||
background: none repeat scroll 0 0 var(--color-search-background);
|
||||
border-top: 1px solid var(--color-search-border);
|
||||
border-bottom: 1px solid var(--color-search-border);
|
||||
@ -46,7 +45,7 @@
|
||||
z-index: 10000;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-search-border);
|
||||
color: var(--color-search-background-hover);
|
||||
}
|
||||
|
||||
&.empty * {
|
||||
@ -60,8 +59,7 @@
|
||||
border-collapse: separate;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
height: 2.2em;
|
||||
padding: 8px;
|
||||
background: none repeat scroll 0 0 var(--color-search-background);
|
||||
border: 1px solid var(--color-search-border);
|
||||
border-radius: 0;
|
||||
@ -73,10 +71,11 @@
|
||||
|
||||
#q {
|
||||
outline: medium none;
|
||||
padding-left: 8px;
|
||||
padding-left: 12px;
|
||||
padding-right: 0 !important;
|
||||
border-right: none;
|
||||
width: @search-width;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
#q::-ms-clear,
|
||||
@ -86,12 +85,12 @@
|
||||
|
||||
#send_search {
|
||||
border-left: none;
|
||||
width: 2.2em;
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-search-border);
|
||||
color: var(--color-base-light);
|
||||
background-color: var(--color-search-background-hover);
|
||||
color: var(--color-search-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -229,7 +228,6 @@
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label {
|
||||
background: var(--color-categories-item-selected);
|
||||
color: var(--color-categories-item-selected-font);
|
||||
border-bottom: 2px solid var(--color-categories-item-border-selected);
|
||||
}
|
||||
@ -237,21 +235,4 @@
|
||||
|
||||
#categories_container {
|
||||
position: relative;
|
||||
|
||||
.help {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: -20px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
background: var(--color-search-help);
|
||||
}
|
||||
|
||||
&:hover .help {
|
||||
opacity: 0.8;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ html {
|
||||
font-size: 0.9em;
|
||||
.text-size-adjust;
|
||||
|
||||
color: var(--color-font);
|
||||
color: var(--color-base-font);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@ -76,7 +76,7 @@ footer {
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--color-footer-background);
|
||||
background-color: var(--color-header-footer-background);
|
||||
border-top: 1px solid var(--color-base-border);
|
||||
overflow: hidden;
|
||||
|
||||
@ -99,10 +99,10 @@ footer {
|
||||
|
||||
input[type="submit"],
|
||||
#results button[type="submit"] {
|
||||
padding: 0.5rem;
|
||||
padding: 0.7rem;
|
||||
display: inline-block;
|
||||
background: var(--color-download-button-background);
|
||||
color: var(--color-download-button-font);
|
||||
background: var(--color-btn-background);
|
||||
color: var(--color-btn-font);
|
||||
.rounded-corners;
|
||||
|
||||
border: 0;
|
||||
@ -145,7 +145,7 @@ article.result-images[data-vim-selected]::before {
|
||||
}
|
||||
|
||||
.result {
|
||||
margin: 19px 0 18px 0;
|
||||
margin: @results-margin 0;
|
||||
padding: 0;
|
||||
|
||||
h3 {
|
||||
@ -191,7 +191,7 @@ article.result-images[data-vim-selected]::before {
|
||||
line-height: 1.24;
|
||||
|
||||
.highlight {
|
||||
color: var(--color-black);
|
||||
color: var(--color-result-description-highlight-font);
|
||||
background: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -226,7 +226,6 @@ article.result-images[data-vim-selected]::before {
|
||||
width: 20em;
|
||||
min-width: 20em;
|
||||
min-height: 8em;
|
||||
// background: var(--color-base-light);
|
||||
}
|
||||
|
||||
&.image {
|
||||
@ -270,9 +269,8 @@ article.result-images[data-vim-selected]::before {
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--color-highlight);
|
||||
color: var(--color-result-link-font-highlight);
|
||||
background: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.result-images {
|
||||
@ -288,7 +286,7 @@ article.result-images[data-vim-selected]::before {
|
||||
padding: 0;
|
||||
border: none;
|
||||
max-height: 200px;
|
||||
background: var(--color-base-dark);
|
||||
background: var(--color-result-image-background);
|
||||
}
|
||||
|
||||
span a {
|
||||
@ -445,14 +443,14 @@ article.result-images[data-vim-selected]::before {
|
||||
#search_url .title,
|
||||
#apis .title {
|
||||
margin: 2em 0 0.5em 0;
|
||||
color: var(--color-font);
|
||||
color: var(--color-base-font);
|
||||
}
|
||||
|
||||
#answers {
|
||||
grid-area: answers;
|
||||
border: 1px solid var(--color-base-border);
|
||||
padding: 0.9em;
|
||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
||||
.rounded-corners;
|
||||
|
||||
h4 {
|
||||
display: none;
|
||||
@ -481,7 +479,7 @@ article.result-images[data-vim-selected]::before {
|
||||
border: 1px solid var(--color-base-border);
|
||||
padding: 0.9em;
|
||||
font-size: 0.9em;
|
||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
||||
.rounded-corners;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.5em 0;
|
||||
@ -574,17 +572,18 @@ article.result-images[data-vim-selected]::before {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
box-shadow: 0 0 5px var(--color-base-shadow);
|
||||
background: white;
|
||||
background: var(--color-base-background);
|
||||
position: fixed;
|
||||
bottom: 8rem;
|
||||
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
||||
transition: opacity 0.5s;
|
||||
opacity: 0;
|
||||
.rounded-corners;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.6em;
|
||||
padding: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user