1
0
mirror of https://github.com/searxng/searxng.git synced 2024-11-23 04:27:46 +01:00

Merge pull request #355 from MrPaulBlack/simple-theme-css-vars

[simple theme] dark mode and some css cleanup
This commit is contained in:
Alexandre Flament 2021-10-10 09:41:46 +02:00 committed by GitHub
commit 7f72844ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 978 additions and 670 deletions

View File

@ -819,6 +819,156 @@ template {
* *
* To change the colors of the site, simple edit this variables * To change the colors of the site, simple edit this variables
*/ */
html {
--color-base-font: #444;
--color-base-background: #fff;
--color-url-font: #29314d;
--color-url-visited-font: #80b;
--color-header-background: #f7f7f7;
--color-header-border: #ddd;
--color-footer-background: #f7f7f7;
--color-footer-border: #ddd;
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
--color-btn-background: #3050ff;
--color-btn-font: #fff;
--color-search-border: #bbb;
--color-search-background: #fff;
--color-search-font: #222;
--color-search-background-hover: #3050ff;
--color-error: #db3434;
--color-error-background: #fae1e1;
--color-warning: #dbba34;
--color-warning-background: #faf5e1;
--color-success: #42db34;
--color-success-background: #e3fae1;
--color-categories-item-selected-font: #3050ff;
--color-categories-item-border-selected: #3050ff;
--color-autocomplete-font: #000;
--color-autocomplete-border: #bbb;
--color-autocomplete-background: #fff;
--color-autocomplete-background-hover: #f7f7f7;
--color-answer-border: #ddd;
--color-answer-font: #000;
--color-result-shadow: #ccc;
--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: #80b;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #ddd;
--color-result-search-url-font: #000;
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #000bbb;
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: #909090;
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--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-border: #ddd;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #3050ff;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
--color-toolkit-checkbox-label-background: #fff;
--color-toolkit-checkbox-label-border: #ddd;
--color-toolkit-checkbox-input-border: #3050ff;
--color-toolkit-engine-tooltip-border: #ddd;
--color-toolkit-engine-tooltip-shadow: #ccc;
--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);
}
@media (prefers-color-scheme: dark) {
html {
--color-base-font: #bbb;
--color-base-background: #222;
--color-url-font: #8af;
--color-url-visited-font: #96b;
--color-header-background: #181818;
--color-header-border: #333;
--color-footer-background: #181818;
--color-footer-border: #333;
--color-sidebar-border: #333;
--color-sidebar-font: #fff;
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-shadow: #444;
--color-btn-background: #58f;
--color-btn-font: #fff;
--color-search-border: #444;
--color-search-background: #222;
--color-search-font: #fff;
--color-search-background-hover: #58f;
--color-error: #f55b5b;
--color-error-background: #390a0a;
--color-warning: #f1d561;
--color-warning-background: #39300a;
--color-success: #79f56e;
--color-success-background: #0e390a;
--color-categories-item-selected-font: #58f;
--color-categories-item-border-selected: #58f;
--color-autocomplete-font: #fff;
--color-autocomplete-border: #444;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
--color-answer-border: #ddd;
--color-answer-font: #fff;
--color-result-shadow: #444;
--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: #333;
--color-result-search-url-font: #fff;
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
--color-settings-tr-hover: #333;
--color-settings-engine-description-font: #909090;
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #000;
--color-toolkit-kbd-background: #fff;
--color-toolkit-dialog-border: #333;
--color-toolkit-dialog-background: #222;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #333;
--color-toolkit-select-border: #333;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--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-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
}
}
/* /*
* SearXNG, A privacy-respecting, hackable metasearch engine * SearXNG, A privacy-respecting, hackable metasearch engine
*/ */
@ -1201,18 +1351,18 @@ html.js .show_if_nojs {
margin-bottom: 4px; margin-bottom: 4px;
} }
.danger { .danger {
background-color: #fae1e1; background-color: var(--color-error-background);
} }
.warning { .warning {
background: #faf5e1; background: var(--color-warning-background);
} }
.success { .success {
background: #e3fae1; background: var(--color-success-background);
} }
.badge { .badge {
display: inline-block; display: inline-block;
color: #fff; color: var(--color-toolkit-badge-font);
background-color: #777; background-color: var(--color-toolkit-badge-background);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@ -1224,14 +1374,14 @@ kbd {
padding: 2px 4px; padding: 2px 4px;
margin: 1px; margin: 1px;
font-size: 90%; font-size: 90%;
color: white; color: var(--color-toolkit-kbd-font);
background: black; background: var(--color-toolkit-kbd-background);
} }
table { table {
width: 100%; width: 100%;
} }
table.striped tr { table.striped tr {
border-bottom: 1px solid #ececec; border-bottom: 1px solid var(--color-settings-tr-hover);
} }
th { th {
padding: 0.4em; padding: 0.4em;
@ -1240,13 +1390,13 @@ td {
padding: 0 4px; padding: 0 4px;
} }
tr:hover { tr:hover {
background: #ececec; background: var(--color-settings-tr-hover);
} }
div.selectable_url { div.selectable_url {
display: block; display: block;
border: 1px solid #888; border: 1px solid var(--color-result-search-url-border);
padding: 4px; padding: 4px;
color: #444; color: var(--color-result-search-url-font);
margin: 0.1em; margin: 0.1em;
overflow: hidden; overflow: hidden;
height: 1.2em; height: 1.2em;
@ -1266,12 +1416,14 @@ div.selectable_url pre {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
color: #db3434; -webkit-border-radius: 10px;
background: #fae1e1; -moz-border-radius: 10px;
border-color: #db3434; border-radius: 10px;
color: var(--color-error);
background: var(--color-error-background);
border-color: var(--color-error);
} }
.dialog-error::before { .dialog-error::before {
position: absolute; position: absolute;
@ -1315,12 +1467,14 @@ div.selectable_url pre {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
color: #dbba34; -webkit-border-radius: 10px;
background: #faf5e1; -moz-border-radius: 10px;
border-color: #dbba34; border-radius: 10px;
color: var(--color-warning);
background: var(--color-warning-background);
border-color: var(--color-warning);
} }
.dialog-warning::before { .dialog-warning::before {
position: absolute; position: absolute;
@ -1364,10 +1518,12 @@ div.selectable_url pre {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
background: white; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: var(--color-toolkit-dialog-background);
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -1449,7 +1605,7 @@ div.selectable_url pre {
margin: 0 0.7em; margin: 0 0.7em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
border: solid white; border: solid var(--color-toolkit-tabs-label-border);
border-width: 0 0 2px 0; border-width: 0 0 2px 0;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -1460,19 +1616,19 @@ div.selectable_url pre {
cursor: pointer; cursor: pointer;
} }
.tabs > label:hover { .tabs > label:hover {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
.tabs > section { .tabs > section {
min-width: 100%; min-width: 100%;
padding: 0.7rem 0; padding: 0.7rem 0;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid black; border-top: 1px solid var(--color-toolkit-tabs-section-border);
display: none; display: none;
} }
.tabs > label:last-of-type { .tabs > label:last-of-type {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
background: #3498DB; background: var(--color-categories-item-selected);
color: #FFF; color: var(--color-categories-item-selected-font);
font-weight: bold; font-weight: bold;
letter-spacing: -0.1px; letter-spacing: -0.1px;
} }
@ -1490,12 +1646,12 @@ html body .tabs > input:checked ~ label {
color: inherit; color: inherit;
} }
html body .tabs > input:checked ~ label:hover { html body .tabs > input:checked ~ label:hover {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
html body .tabs > input:checked + label { html body .tabs > input:checked + label {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
background: #3498DB; background: var(--color-categories-item-selected);
color: #FFF; color: var(--color-categories-item-selected-font);
} }
html body .tabs > input:checked + label + section { html body .tabs > input:checked + label + section {
display: block; display: block;
@ -1505,7 +1661,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: #222; color: var(--color-search-font);
font-size: 12px; font-size: 12px;
z-index: 2; z-index: 2;
} }
@ -1519,7 +1675,7 @@ select:focus {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
border: 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: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat;
background-position-x: 105%; background-position-x: 105%;
background-size: 2em; background-size: 2em;
@ -1528,7 +1684,7 @@ select:focus {
} }
select:hover, select:hover,
select:focus { select:focus {
border-bottom: 1px solid #3498DB; border-bottom: 1px solid var(--color-search-border);
} }
} }
/* -- checkbox-onoff -- */ /* -- checkbox-onoff -- */
@ -1537,7 +1693,7 @@ select:focus {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 10px; height: 10px;
background: #dcdcdc; background: var(--color-toolkit-checkbox-onoff-background);
margin: 8px 1rem; margin: 8px 1rem;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;
@ -1550,17 +1706,17 @@ select:focus {
top: -5px; top: -5px;
cursor: pointer; cursor: pointer;
border-radius: 50px; 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; transition: all 0.4s ease;
left: 27px; left: 27px;
background-color: #3498db; background-color: var(--color-toolkit-checkbox-onoff-label-background);
} }
.checkbox-onoff input[type=checkbox] { .checkbox-onoff input[type=checkbox] {
visibility: hidden; visibility: hidden;
} }
.checkbox-onoff input[type=checkbox]:checked + label { .checkbox-onoff input[type=checkbox]:checked + label {
left: -5px; left: -5px;
background: #dcdcdc; background: var(--color-toolkit-checkbox-onoff-checked-background);
} }
} }
/* -- checkbox -- */ /* -- checkbox -- */
@ -1577,9 +1733,10 @@ select:focus {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: white; background: var(--color-toolkit-checkbox-label-background);
border-radius: 4px; -webkit-border-radius: 10px;
box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5); -moz-border-radius: 10px;
border-radius: 10px;
} }
.checkbox label::after { .checkbox label::after {
content: ''; content: '';
@ -1588,7 +1745,7 @@ select:focus {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
border: 3px solid #333; border: 3px solid var(--color-toolkit-checkbox-label-border);
border-top: none; border-top: none;
border-right: none; border-right: none;
background: transparent; background: transparent;
@ -1599,7 +1756,7 @@ select:focus {
visibility: hidden; visibility: hidden;
} }
.checkbox input[type=checkbox]:checked + label::after { .checkbox input[type=checkbox]:checked + label::after {
border-color: #3498db; border-color: var(--color-toolkit-checkbox-input-border);
opacity: 1; opacity: 1;
} }
.checkbox input[disabled] + label { .checkbox input[disabled] + label {
@ -1628,10 +1785,10 @@ select:focus {
font-size: 10px; font-size: 10px;
position: relative; position: relative;
text-indent: -9999em; text-indent: -9999em;
border-top: 0.5em solid rgba(0, 0, 0, 0.2); border-top: 0.5em solid var(--color-toolkit-loader-border);
border-right: 0.5em solid rgba(0, 0, 0, 0.2); border-right: 0.5em solid var(--color-toolkit-loader-border);
border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); border-bottom: 0.5em solid var(--color-toolkit-loader-border);
border-left: 0.5em solid rgba(255, 255, 255, 0); border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
@ -1664,13 +1821,16 @@ select:focus {
position: absolute; position: absolute;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 0 0 2rem; margin: 0 0 0 2rem;
border: 1px solid #ddd; border: 1px solid var(--color-toolkit-engine-tooltip-border);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow);
background: white; background: var(--color-toolkit-engine-tooltip-background);
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
z-index: 1000000; z-index: 1000000;
text-align: left; text-align: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
th:hover .engine-tooltip, th:hover .engine-tooltip,
td:hover .engine-tooltip, td:hover .engine-tooltip,
@ -1746,11 +1906,14 @@ td:hover .engine-tooltip,
max-height: 0; max-height: 0;
overflow-y: hidden; overflow-y: hidden;
text-align: left; text-align: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
.autocomplete:active, .autocomplete:active,
.autocomplete:focus, .autocomplete:focus,
.autocomplete:hover { .autocomplete:hover {
background-color: white; background-color: var(--color-autocomplete-background);
} }
.autocomplete:empty { .autocomplete:empty {
display: none; display: none;
@ -1762,22 +1925,26 @@ td:hover .engine-tooltip,
} }
.autocomplete > ul > li { .autocomplete > ul > li {
cursor: pointer; cursor: pointer;
padding: 5px 0 5px 10px; padding: 8px 0 8px 8px;
} }
.autocomplete > ul > li.active, .autocomplete > ul > li.active,
.autocomplete > ul > li:active, .autocomplete > ul > li:active,
.autocomplete > ul > li:focus { .autocomplete > ul > li:focus,
background-color: #3498DB; .autocomplete > ul > li:hover {
background-color: var(--color-autocomplete-background-hover);
} }
.autocomplete > ul > li.active a:active, .autocomplete > ul > li.active a:active,
.autocomplete > ul > li:active a:active, .autocomplete > ul > li:active a:active,
.autocomplete > ul > li:focus a:active, .autocomplete > ul > li:focus a:active,
.autocomplete > ul > li:hover a:active,
.autocomplete > ul > li.active a:focus, .autocomplete > ul > li.active a:focus,
.autocomplete > ul > li:active a:focus, .autocomplete > ul > li:active a:focus,
.autocomplete > ul > li:focus a:focus, .autocomplete > ul > li:focus a:focus,
.autocomplete > ul > li:hover a:focus,
.autocomplete > ul > li.active a:hover, .autocomplete > ul > li.active a:hover,
.autocomplete > ul > li:active a:hover, .autocomplete > ul > li:active a:hover,
.autocomplete > ul > li:focus a:hover { .autocomplete > ul > li:focus a:hover,
.autocomplete > ul > li:hover a:hover {
text-decoration: none; text-decoration: none;
} }
.autocomplete > ul > li.locked { .autocomplete > ul > li.locked {
@ -1785,8 +1952,9 @@ td:hover .engine-tooltip,
} }
.autocomplete.open { .autocomplete.open {
display: block; display: block;
background-color: white; background-color: var(--color-autocomplete-background);
border: 1px solid #3498DB; color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border);
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;
@ -1799,8 +1967,7 @@ td:hover .engine-tooltip,
bottom: 0; bottom: 0;
} }
.autocomplete > ul > li { .autocomplete > ul > li {
padding: 7px 0 7px 10px; border-bottom: 1px solid var(--color-result-top-border);
border-bottom: 1px solid #E8E7E6;
text-align: left; text-align: left;
} }
} }
@ -1847,9 +2014,6 @@ td:hover .engine-tooltip,
margin-top: 0; margin-top: 0;
} }
} }
.column-reliability .engine-tooltip {
right: 12rem;
}
#tab-contentquery table td, #tab-contentquery table td,
#tab-contentquery table th { #tab-contentquery table th {
text-align: left !important; text-align: left !important;
@ -1880,7 +2044,7 @@ td:hover .engine-tooltip,
padding: 5px 0 0 0; padding: 5px 0 0 0;
float: left; float: left;
width: 50%; width: 50%;
color: #909090; color: var(--color-settings-engine-description-font);
font-size: 90%; font-size: 90%;
} }
#main_preferences select { #main_preferences select {
@ -1907,27 +2071,27 @@ td:hover .engine-tooltip,
} }
#main_preferences table.cookies > tbody > tr:nth-child(even) > th, #main_preferences table.cookies > tbody > tr:nth-child(even) > th,
#main_preferences table.cookies > tbody > tr:nth-child(even) > td { #main_preferences table.cookies > tbody > tr:nth-child(even) > td {
background-color: #ececec; background-color: var(--color-settings-tr-hover);
} }
#main_preferences .name, #main_preferences .name,
#main_preferences .shortcut { #main_preferences .shortcut {
text-align: left; text-align: left;
} }
#main_preferences .preferences_back { #main_preferences .preferences_back {
background: none repeat scroll 0 0 #3498DB; background: none repeat scroll 0 0 var(--color-btn-background);
color: white; color: var(--color-btn-font);
border: 0 none; border: 0 none;
-webkit-border-radius: 4px; -webkit-border-radius: 10px;
-moz-border-radius: 4px; -moz-border-radius: 10px;
border-radius: 4px; border-radius: 10px;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
margin: 2px 4px; margin: 2px 4px;
padding: 0.5em; padding: 0.7em;
} }
#main_preferences .preferences_back a { #main_preferences .preferences_back a {
display: block; display: block;
color: #FFF; color: var(--color-settings-return-font);
} }
#main_preferences .preferences_back a::first-letter { #main_preferences .preferences_back a::first-letter {
text-transform: uppercase; text-transform: uppercase;
@ -1957,11 +2121,11 @@ td:hover .engine-tooltip,
#search { #search {
padding: 0 2em 0 10rem; padding: 0 2em 0 10rem;
margin: 0; margin: 0;
background: #f7f7f7; background: var(--color-header-background);
border-bottom: 1px solid #d7d7d7; border-bottom: 1px solid var(--color-header-border);
} }
#search_wrapper { #search_wrapper {
padding: 10px 0; padding: 20px 0 10px 0;
} }
.search_box { .search_box {
margin: 0 12px 0 0; margin: 0 12px 0 0;
@ -1980,21 +2144,20 @@ td:hover .engine-tooltip,
box-sizing: border-box; box-sizing: border-box;
width: 1.8em; width: 1.8em;
margin: 0; margin: 0;
padding: 2px; padding: 8px 2px;
height: 2.2em; background: none repeat scroll 0 0 var(--color-search-background);
background: none repeat scroll 0 0 #FFF; border-top: 1px solid var(--color-search-border);
border-top: 1px solid #3498DB; border-bottom: 1px solid var(--color-search-border);
border-bottom: 1px solid #3498DB;
border-right: none; border-right: none;
border-left: none; border-left: none;
border-radius: 0; border-radius: 0;
outline: none; outline: none;
color: #222; color: var(--color-search-font);
font-size: 16px; font-size: 16px;
z-index: 10000; z-index: 10000;
} }
#clear_search:hover { #clear_search:hover {
color: #3498DB; color: var(--color-search-background-hover);
} }
#clear_search.empty * { #clear_search.empty * {
display: none; display: none;
@ -2005,22 +2168,22 @@ td:hover .engine-tooltip,
border-collapse: separate; border-collapse: separate;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 2px; padding: 8px;
height: 2.2em; background: none repeat scroll 0 0 var(--color-search-background);
background: none repeat scroll 0 0 #FFF; border: 1px solid var(--color-search-border);
border: 1px solid #3498DB;
border-radius: 0; border-radius: 0;
outline: none; outline: none;
color: #222; color: var(--color-search-font);
font-size: 16px; font-size: 16px;
z-index: 2; z-index: 2;
} }
#q { #q {
outline: medium none; outline: medium none;
padding-left: 8px; padding-left: 12px;
padding-right: 0 !important; padding-right: 0 !important;
border-right: none; border-right: none;
width: 40rem; width: 40rem;
border-radius: 10px 0 0 10px;
} }
#q::-ms-clear, #q::-ms-clear,
#q::-webkit-search-cancel-button { #q::-webkit-search-cancel-button {
@ -2028,12 +2191,12 @@ td:hover .engine-tooltip,
} }
#send_search { #send_search {
border-left: none; border-left: none;
width: 2.2em; border-radius: 0 10px 10px 0;
} }
#send_search:hover { #send_search:hover {
cursor: pointer; cursor: pointer;
background-color: #3498DB; background-color: var(--color-search-background-hover);
color: #ECF0F1; color: var(--color-search-background);
} }
.no-js #send_search { .no-js #send_search {
width: auto !important; width: auto !important;
@ -2132,9 +2295,6 @@ td:hover .engine-tooltip,
position: relative; position: relative;
margin: 0 3px; margin: 0 3px;
padding: 0; padding: 0;
/* label:hover {
border-bottom: 2px solid @color-categories-item-border-unselected-hover;
} */
} }
.category input { .category input {
display: none; display: none;
@ -2155,31 +2315,15 @@ td:hover .engine-tooltip,
user-select: none; user-select: none;
} }
.category input[type="checkbox"]:focus + label { .category input[type="checkbox"]:focus + label {
box-shadow: 0 0 8px #3498db; box-shadow: 0 0 8px var(--color-categories-item-border-selected);
} }
.category input[type="checkbox"]:checked + label { .category input[type="checkbox"]:checked + label {
background: #3498DB; color: var(--color-categories-item-selected-font);
color: #FFF; border-bottom: 2px solid var(--color-categories-item-border-selected);
border-bottom: 2px solid #084999;
} }
#categories_container { #categories_container {
position: relative; position: relative;
} }
#categories_container .help {
position: absolute;
width: 100%;
bottom: -20px;
overflow: hidden;
opacity: 0;
transition: opacity 1s ease;
font-size: 0.8em;
text-align: center;
background: white;
}
#categories_container:hover .help {
opacity: 0.8;
transition: opacity 1s ease;
}
.ion-icon-big { .ion-icon-big {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
@ -2203,7 +2347,8 @@ html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
color: #444; color: var(--color-base-font);
background-color: var(--color-base-background);
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -2235,8 +2380,8 @@ footer {
padding: 1rem 0; padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #f7f7f7; background-color: var(--color-footer-background);
border-top: 1px solid #d7d7d7; border-top: 1px solid var(--color-footer-border);
overflow: hidden; overflow: hidden;
} }
footer p { footer p {
@ -2255,28 +2400,28 @@ footer p {
} }
input[type="submit"], input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.7rem;
display: inline-block; display: inline-block;
background: #3498DB; background: var(--color-btn-background);
color: #FFF; color: var(--color-btn-font);
-webkit-border-radius: 4px; -webkit-border-radius: 10px;
-moz-border-radius: 4px; -moz-border-radius: 10px;
border-radius: 4px; border-radius: 10px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #29314d; color: var(--color-url-font);
} }
a:visited { a:visited {
color: #684898; color: var(--color-url-visited-font);
} }
a:visited .highlight { a:visited .highlight {
color: #684898; color: var(--color-url-visited-font);
} }
article[data-vim-selected] { article[data-vim-selected] {
background: #f7f7f7; background: var(--color-result-vim-selected);
} }
article[data-vim-selected]::before { article[data-vim-selected]::before {
position: absolute; position: absolute;
@ -2284,17 +2429,17 @@ article[data-vim-selected]::before {
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
color: #3498DB; color: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: #3498DB; background: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
} }
.result { .result {
margin: 19px 0 18px 0; margin: 2rem 0;
padding: 0; padding: 0;
} }
.result h3 { .result h3 {
@ -2305,12 +2450,12 @@ article.result-images[data-vim-selected]::before {
margin-bottom: 0; margin-bottom: 0;
} }
.result h3 a { .result h3 a {
color: #084999; color: var(--color-result-link-font);
font-weight: normal; font-weight: normal;
font-size: 1.1em; font-size: 1.1em;
} }
.result h3 a:visited { .result h3 a:visited {
color: #684898; color: var(--color-result-link-visited-font);
} }
.result h3 a:focus, .result h3 a:focus,
.result h3 a:hover { .result h3 a:hover {
@ -2337,7 +2482,7 @@ article.result-images[data-vim-selected]::before {
.result .content .highlight, .result .content .highlight,
.result .stat .highlight, .result .stat .highlight,
.result .altlink .highlight { .result .altlink .highlight {
color: #000000; color: var(--color-result-description-highlight-font);
background: inherit; background: inherit;
font-weight: bold; font-weight: bold;
} }
@ -2352,11 +2497,11 @@ 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: #25a55b; color: var(--color-result-url-font);
} }
.result .published_date { .result .published_date {
font-size: 0.8em; font-size: 0.8em;
color: #888; color: var(--color-result-publishdate-font);
} }
.result img.thumbnail { .result img.thumbnail {
float: left; float: left;
@ -2387,7 +2532,7 @@ article.result-images[data-vim-selected]::before {
} }
.engines { .engines {
float: right; float: right;
color: #888; color: var(--color-result-engines-font);
} }
.engines span { .engines span {
font-size: smaller; font-size: smaller;
@ -2397,9 +2542,8 @@ article.result-images[data-vim-selected]::before {
font-size: 0.8em; font-size: 0.8em;
} }
.highlight { .highlight {
color: #094089; color: var(--color-result-link-font-highlight);
background: inherit; background: inherit;
font-weight: bold;
} }
.result-images { .result-images {
display: inline-block; display: inline-block;
@ -2414,11 +2558,11 @@ article.result-images[data-vim-selected]::before {
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; max-height: 200px;
background: #084999; background: var(--color-result-image-background);
} }
.result-images span a { .result-images span a {
display: none; display: none;
color: #FFF; color: var(--color-result-image-span-font);
} }
.result-images:hover span a { .result-images:hover span a {
display: block; display: block;
@ -2427,7 +2571,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: rgba(0, 0, 0, 0.6); background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em; font-size: 0.7em;
} }
.result-map img.image { .result-map img.image {
@ -2454,23 +2598,6 @@ article.result-images[data-vim-selected]::before {
.hidden { .hidden {
display: none !important; display: none !important;
} }
.torrent_result {
border-left: 10px solid lightgray;
padding-left: 3px;
}
.torrent_result p {
margin: 3px;
font-size: 0.8em;
}
.torrent_result a {
color: #084999;
}
.torrent_result a:hover {
text-decoration: underline;
}
.torrent_result a:visited {
color: #684898;
}
#results { #results {
margin: 2rem 2rem 0 10rem; margin: 2rem 2rem 0 10rem;
display: grid; display: grid;
@ -2506,7 +2633,7 @@ 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: #444; color: var(--color-result-search-url-font);
cursor: pointer; cursor: pointer;
} }
#suggestions input[type="submit"], #suggestions input[type="submit"],
@ -2517,7 +2644,7 @@ article.result-images[data-vim-selected]::before {
#answers .infobox .url a, #answers .infobox .url a,
#infoboxes .infobox .url a, #infoboxes .infobox .url a,
#corrections .infobox .url a { #corrections .infobox .url a {
color: #084999; color: var(--color-result-link-font);
text-decoration: none; text-decoration: none;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -2549,13 +2676,17 @@ 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: #444; color: var(--color-base-font);
} }
#answers { #answers {
grid-area: answers; grid-area: answers;
border: 1px solid #ddd; border: 1px solid var(--color-answer-border);
padding: 0.9em; padding: 0.9em;
box-shadow: 0 0 5px #ccc; margin-bottom: 2rem;
color: var(--color-answer-font);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
#answers h4 { #answers h4 {
display: none; display: none;
@ -2572,13 +2703,16 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
grid-area: sidebar; grid-area: sidebar;
word-wrap: break-word; word-wrap: break-word;
color: var(--color-sidebar-font);
} }
#sidebar .infobox { #sidebar .infobox {
margin: 10px 0 10px; margin: 10px 0 10px;
border: 1px solid #ddd; border: 1px solid var(--color-sidebar-border);
padding: 0.9em; padding: 0.9em;
font-size: 0.9em; font-size: 0.9em;
box-shadow: 0 0 5px #ccc; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
#sidebar .infobox h2 { #sidebar .infobox h2 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
@ -2628,13 +2762,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: #222; color: var(--color-search-font);
} }
#linkto_preferences a:link *, #linkto_preferences a:link *,
#linkto_preferences a:hover *, #linkto_preferences a:hover *,
#linkto_preferences a:visited *, #linkto_preferences a:visited *,
#linkto_preferences a:active * { #linkto_preferences a:active * {
color: #222; color: var(--color-search-font);
} }
#pagination { #pagination {
grid-area: pagination; grid-area: pagination;
@ -2647,22 +2781,25 @@ article.result-images[data-vim-selected]::before {
clear: both; clear: both;
} }
#backToTop { #backToTop {
border: 1px solid #ddd; border: 1px solid var(--color-backtotop-border);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px var(--color-backtotop-shadow);
background: white; background: var(--color-backtotop-background);
position: fixed; position: fixed;
bottom: 8rem; bottom: 8rem;
left: 56.3rem; left: 56.3rem;
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
#backToTop a { #backToTop a {
display: block; display: block;
margin: 0; margin: 0;
padding: 0.6em; padding: 0.7em;
} }
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
#main_preferences, #main_preferences,
@ -2684,6 +2821,7 @@ article.result-images[data-vim-selected]::before {
margin: 0.5em 0.5em 0.5em 0; margin: 0.5em 0.5em 0.5em 0;
} }
#sidebar { #sidebar {
margin-bottom: 2rem;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -2698,12 +2836,6 @@ article.result-images[data-vim-selected]::before {
#search_url { #search_url {
display: none; display: none;
} }
.result {
border-bottom: 1px solid #E8E7E6;
margin: 0;
padding-top: 8px;
padding-bottom: 6px;
}
.result h3 { .result h3 {
margin: 0 0 1px 0; margin: 0 0 1px 0;
} }
@ -2789,9 +2921,13 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
margin: 0 5px 2px 5px; margin: 0 5px 2px 5px;
} }
.infobox {
box-shadow: 0 0 5px var(--color-result-shadow);
}
#corrections, #corrections,
#answers { #answers {
margin: 0 5px 1em 5px; margin: 0 5px 1em 5px;
box-shadow: 0 0 5px var(--color-result-shadow);
} }
#results { #results {
margin: 0; margin: 0;
@ -2802,11 +2938,18 @@ article.result-images[data-vim-selected]::before {
} }
.result { .result {
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;
margin: 0.5rem;
border: 1px solid var(--color-result-border);
box-shadow: 0 0 5px var(--color-result-shadow);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
.result-images { .result-images {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
box-shadow: none;
} }
} }
@media screen and (max-width: 35em) { @media screen and (max-width: 35em) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -819,6 +819,156 @@ template {
* *
* To change the colors of the site, simple edit this variables * To change the colors of the site, simple edit this variables
*/ */
html {
--color-base-font: #444;
--color-base-background: #fff;
--color-url-font: #29314d;
--color-url-visited-font: #80b;
--color-header-background: #f7f7f7;
--color-header-border: #ddd;
--color-footer-background: #f7f7f7;
--color-footer-border: #ddd;
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
--color-btn-background: #3050ff;
--color-btn-font: #fff;
--color-search-border: #bbb;
--color-search-background: #fff;
--color-search-font: #222;
--color-search-background-hover: #3050ff;
--color-error: #db3434;
--color-error-background: #fae1e1;
--color-warning: #dbba34;
--color-warning-background: #faf5e1;
--color-success: #42db34;
--color-success-background: #e3fae1;
--color-categories-item-selected-font: #3050ff;
--color-categories-item-border-selected: #3050ff;
--color-autocomplete-font: #000;
--color-autocomplete-border: #bbb;
--color-autocomplete-background: #fff;
--color-autocomplete-background-hover: #f7f7f7;
--color-answer-border: #ddd;
--color-answer-font: #000;
--color-result-shadow: #ccc;
--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: #80b;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #ddd;
--color-result-search-url-font: #000;
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #000bbb;
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: #909090;
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--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-border: #ddd;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #3050ff;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
--color-toolkit-checkbox-label-background: #fff;
--color-toolkit-checkbox-label-border: #ddd;
--color-toolkit-checkbox-input-border: #3050ff;
--color-toolkit-engine-tooltip-border: #ddd;
--color-toolkit-engine-tooltip-shadow: #ccc;
--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);
}
@media (prefers-color-scheme: dark) {
html {
--color-base-font: #bbb;
--color-base-background: #222;
--color-url-font: #8af;
--color-url-visited-font: #96b;
--color-header-background: #181818;
--color-header-border: #333;
--color-footer-background: #181818;
--color-footer-border: #333;
--color-sidebar-border: #333;
--color-sidebar-font: #fff;
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-shadow: #444;
--color-btn-background: #58f;
--color-btn-font: #fff;
--color-search-border: #444;
--color-search-background: #222;
--color-search-font: #fff;
--color-search-background-hover: #58f;
--color-error: #f55b5b;
--color-error-background: #390a0a;
--color-warning: #f1d561;
--color-warning-background: #39300a;
--color-success: #79f56e;
--color-success-background: #0e390a;
--color-categories-item-selected-font: #58f;
--color-categories-item-border-selected: #58f;
--color-autocomplete-font: #fff;
--color-autocomplete-border: #444;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
--color-answer-border: #ddd;
--color-answer-font: #fff;
--color-result-shadow: #444;
--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: #333;
--color-result-search-url-font: #fff;
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
--color-settings-tr-hover: #333;
--color-settings-engine-description-font: #909090;
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #000;
--color-toolkit-kbd-background: #fff;
--color-toolkit-dialog-border: #333;
--color-toolkit-dialog-background: #222;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #333;
--color-toolkit-select-border: #333;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--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-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
}
}
/* /*
* SearXNG, A privacy-respecting, hackable metasearch engine * SearXNG, A privacy-respecting, hackable metasearch engine
*/ */
@ -1201,18 +1351,18 @@ html.js .show_if_nojs {
margin-bottom: 4px; margin-bottom: 4px;
} }
.danger { .danger {
background-color: #fae1e1; background-color: var(--color-error-background);
} }
.warning { .warning {
background: #faf5e1; background: var(--color-warning-background);
} }
.success { .success {
background: #e3fae1; background: var(--color-success-background);
} }
.badge { .badge {
display: inline-block; display: inline-block;
color: #fff; color: var(--color-toolkit-badge-font);
background-color: #777; background-color: var(--color-toolkit-badge-background);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@ -1224,14 +1374,14 @@ kbd {
padding: 2px 4px; padding: 2px 4px;
margin: 1px; margin: 1px;
font-size: 90%; font-size: 90%;
color: white; color: var(--color-toolkit-kbd-font);
background: black; background: var(--color-toolkit-kbd-background);
} }
table { table {
width: 100%; width: 100%;
} }
table.striped tr { table.striped tr {
border-bottom: 1px solid #ececec; border-bottom: 1px solid var(--color-settings-tr-hover);
} }
th { th {
padding: 0.4em; padding: 0.4em;
@ -1240,13 +1390,13 @@ td {
padding: 0 4px; padding: 0 4px;
} }
tr:hover { tr:hover {
background: #ececec; background: var(--color-settings-tr-hover);
} }
div.selectable_url { div.selectable_url {
display: block; display: block;
border: 1px solid #888; border: 1px solid var(--color-result-search-url-border);
padding: 4px; padding: 4px;
color: #444; color: var(--color-result-search-url-font);
margin: 0.1em; margin: 0.1em;
overflow: hidden; overflow: hidden;
height: 1.2em; height: 1.2em;
@ -1266,12 +1416,14 @@ div.selectable_url pre {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
color: #db3434; -webkit-border-radius: 10px;
background: #fae1e1; -moz-border-radius: 10px;
border-color: #db3434; border-radius: 10px;
color: var(--color-error);
background: var(--color-error-background);
border-color: var(--color-error);
} }
.dialog-error::before { .dialog-error::before {
position: absolute; position: absolute;
@ -1315,12 +1467,14 @@ div.selectable_url pre {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
color: #dbba34; -webkit-border-radius: 10px;
background: #faf5e1; -moz-border-radius: 10px;
border-color: #dbba34; border-radius: 10px;
color: var(--color-warning);
background: var(--color-warning-background);
border-color: var(--color-warning);
} }
.dialog-warning::before { .dialog-warning::before {
position: absolute; position: absolute;
@ -1364,10 +1518,12 @@ div.selectable_url pre {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
background: white; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: var(--color-toolkit-dialog-background);
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -1449,7 +1605,7 @@ div.selectable_url pre {
margin: 0 0.7em; margin: 0 0.7em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
border: solid white; border: solid var(--color-toolkit-tabs-label-border);
border-width: 0 0 2px 0; border-width: 0 0 2px 0;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -1460,19 +1616,19 @@ div.selectable_url pre {
cursor: pointer; cursor: pointer;
} }
.tabs > label:hover { .tabs > label:hover {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
.tabs > section { .tabs > section {
min-width: 100%; min-width: 100%;
padding: 0.7rem 0; padding: 0.7rem 0;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid black; border-top: 1px solid var(--color-toolkit-tabs-section-border);
display: none; display: none;
} }
.tabs > label:last-of-type { .tabs > label:last-of-type {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
background: #3498DB; background: var(--color-categories-item-selected);
color: #FFF; color: var(--color-categories-item-selected-font);
font-weight: bold; font-weight: bold;
letter-spacing: -0.1px; letter-spacing: -0.1px;
} }
@ -1490,12 +1646,12 @@ html body .tabs > input:checked ~ label {
color: inherit; color: inherit;
} }
html body .tabs > input:checked ~ label:hover { html body .tabs > input:checked ~ label:hover {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
} }
html body .tabs > input:checked + label { html body .tabs > input:checked + label {
border-bottom: 2px solid #084999; border-bottom: 2px solid var(--color-categories-item-border-selected);
background: #3498DB; background: var(--color-categories-item-selected);
color: #FFF; color: var(--color-categories-item-selected-font);
} }
html body .tabs > input:checked + label + section { html body .tabs > input:checked + label + section {
display: block; display: block;
@ -1505,7 +1661,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: #222; color: var(--color-search-font);
font-size: 12px; font-size: 12px;
z-index: 2; z-index: 2;
} }
@ -1519,7 +1675,7 @@ select:focus {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
border: 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: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat;
background-position-x: 105%; background-position-x: 105%;
background-size: 2em; background-size: 2em;
@ -1528,7 +1684,7 @@ select:focus {
} }
select:hover, select:hover,
select:focus { select:focus {
border-bottom: 1px solid #3498DB; border-bottom: 1px solid var(--color-search-border);
} }
} }
/* -- checkbox-onoff -- */ /* -- checkbox-onoff -- */
@ -1537,7 +1693,7 @@ select:focus {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 10px; height: 10px;
background: #dcdcdc; background: var(--color-toolkit-checkbox-onoff-background);
margin: 8px 1rem; margin: 8px 1rem;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;
@ -1550,17 +1706,17 @@ select:focus {
top: -5px; top: -5px;
cursor: pointer; cursor: pointer;
border-radius: 50px; 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; transition: all 0.4s ease;
left: 27px; left: 27px;
background-color: #3498db; background-color: var(--color-toolkit-checkbox-onoff-label-background);
} }
.checkbox-onoff input[type=checkbox] { .checkbox-onoff input[type=checkbox] {
visibility: hidden; visibility: hidden;
} }
.checkbox-onoff input[type=checkbox]:checked + label { .checkbox-onoff input[type=checkbox]:checked + label {
left: -5px; left: -5px;
background: #dcdcdc; background: var(--color-toolkit-checkbox-onoff-checked-background);
} }
} }
/* -- checkbox -- */ /* -- checkbox -- */
@ -1577,9 +1733,10 @@ select:focus {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: white; background: var(--color-toolkit-checkbox-label-background);
border-radius: 4px; -webkit-border-radius: 10px;
box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5); -moz-border-radius: 10px;
border-radius: 10px;
} }
.checkbox label::after { .checkbox label::after {
content: ''; content: '';
@ -1588,7 +1745,7 @@ select:focus {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
border: 3px solid #333; border: 3px solid var(--color-toolkit-checkbox-label-border);
border-top: none; border-top: none;
border-right: none; border-right: none;
background: transparent; background: transparent;
@ -1599,7 +1756,7 @@ select:focus {
visibility: hidden; visibility: hidden;
} }
.checkbox input[type=checkbox]:checked + label::after { .checkbox input[type=checkbox]:checked + label::after {
border-color: #3498db; border-color: var(--color-toolkit-checkbox-input-border);
opacity: 1; opacity: 1;
} }
.checkbox input[disabled] + label { .checkbox input[disabled] + label {
@ -1628,10 +1785,10 @@ select:focus {
font-size: 10px; font-size: 10px;
position: relative; position: relative;
text-indent: -9999em; text-indent: -9999em;
border-top: 0.5em solid rgba(0, 0, 0, 0.2); border-top: 0.5em solid var(--color-toolkit-loader-border);
border-right: 0.5em solid rgba(0, 0, 0, 0.2); border-right: 0.5em solid var(--color-toolkit-loader-border);
border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); border-bottom: 0.5em solid var(--color-toolkit-loader-border);
border-left: 0.5em solid rgba(255, 255, 255, 0); border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
@ -1664,13 +1821,16 @@ select:focus {
position: absolute; position: absolute;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 0 0 2rem; margin: 0 0 0 2rem;
border: 1px solid #ddd; border: 1px solid var(--color-toolkit-engine-tooltip-border);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow);
background: white; background: var(--color-toolkit-engine-tooltip-background);
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
z-index: 1000000; z-index: 1000000;
text-align: left; text-align: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
th:hover .engine-tooltip, th:hover .engine-tooltip,
td:hover .engine-tooltip, td:hover .engine-tooltip,
@ -1746,11 +1906,14 @@ td:hover .engine-tooltip,
max-height: 0; max-height: 0;
overflow-y: hidden; overflow-y: hidden;
text-align: left; text-align: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
.autocomplete:active, .autocomplete:active,
.autocomplete:focus, .autocomplete:focus,
.autocomplete:hover { .autocomplete:hover {
background-color: white; background-color: var(--color-autocomplete-background);
} }
.autocomplete:empty { .autocomplete:empty {
display: none; display: none;
@ -1762,22 +1925,26 @@ td:hover .engine-tooltip,
} }
.autocomplete > ul > li { .autocomplete > ul > li {
cursor: pointer; cursor: pointer;
padding: 5px 0 5px 10px; padding: 8px 0 8px 8px;
} }
.autocomplete > ul > li.active, .autocomplete > ul > li.active,
.autocomplete > ul > li:active, .autocomplete > ul > li:active,
.autocomplete > ul > li:focus { .autocomplete > ul > li:focus,
background-color: #3498DB; .autocomplete > ul > li:hover {
background-color: var(--color-autocomplete-background-hover);
} }
.autocomplete > ul > li.active a:active, .autocomplete > ul > li.active a:active,
.autocomplete > ul > li:active a:active, .autocomplete > ul > li:active a:active,
.autocomplete > ul > li:focus a:active, .autocomplete > ul > li:focus a:active,
.autocomplete > ul > li:hover a:active,
.autocomplete > ul > li.active a:focus, .autocomplete > ul > li.active a:focus,
.autocomplete > ul > li:active a:focus, .autocomplete > ul > li:active a:focus,
.autocomplete > ul > li:focus a:focus, .autocomplete > ul > li:focus a:focus,
.autocomplete > ul > li:hover a:focus,
.autocomplete > ul > li.active a:hover, .autocomplete > ul > li.active a:hover,
.autocomplete > ul > li:active a:hover, .autocomplete > ul > li:active a:hover,
.autocomplete > ul > li:focus a:hover { .autocomplete > ul > li:focus a:hover,
.autocomplete > ul > li:hover a:hover {
text-decoration: none; text-decoration: none;
} }
.autocomplete > ul > li.locked { .autocomplete > ul > li.locked {
@ -1785,8 +1952,9 @@ td:hover .engine-tooltip,
} }
.autocomplete.open { .autocomplete.open {
display: block; display: block;
background-color: white; background-color: var(--color-autocomplete-background);
border: 1px solid #3498DB; color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border);
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;
@ -1799,8 +1967,7 @@ td:hover .engine-tooltip,
bottom: 0; bottom: 0;
} }
.autocomplete > ul > li { .autocomplete > ul > li {
padding: 7px 0 7px 10px; border-bottom: 1px solid var(--color-result-top-border);
border-bottom: 1px solid #E8E7E6;
text-align: left; text-align: left;
} }
} }
@ -1847,9 +2014,6 @@ td:hover .engine-tooltip,
margin-top: 0; margin-top: 0;
} }
} }
.column-reliability .engine-tooltip {
right: 12rem;
}
#tab-contentquery table td, #tab-contentquery table td,
#tab-contentquery table th { #tab-contentquery table th {
text-align: left !important; text-align: left !important;
@ -1880,7 +2044,7 @@ td:hover .engine-tooltip,
padding: 5px 0 0 0; padding: 5px 0 0 0;
float: left; float: left;
width: 50%; width: 50%;
color: #909090; color: var(--color-settings-engine-description-font);
font-size: 90%; font-size: 90%;
} }
#main_preferences select { #main_preferences select {
@ -1907,27 +2071,27 @@ td:hover .engine-tooltip,
} }
#main_preferences table.cookies > tbody > tr:nth-child(even) > th, #main_preferences table.cookies > tbody > tr:nth-child(even) > th,
#main_preferences table.cookies > tbody > tr:nth-child(even) > td { #main_preferences table.cookies > tbody > tr:nth-child(even) > td {
background-color: #ececec; background-color: var(--color-settings-tr-hover);
} }
#main_preferences .name, #main_preferences .name,
#main_preferences .shortcut { #main_preferences .shortcut {
text-align: left; text-align: left;
} }
#main_preferences .preferences_back { #main_preferences .preferences_back {
background: none repeat scroll 0 0 #3498DB; background: none repeat scroll 0 0 var(--color-btn-background);
color: white; color: var(--color-btn-font);
border: 0 none; border: 0 none;
-webkit-border-radius: 4px; -webkit-border-radius: 10px;
-moz-border-radius: 4px; -moz-border-radius: 10px;
border-radius: 4px; border-radius: 10px;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
margin: 2px 4px; margin: 2px 4px;
padding: 0.5em; padding: 0.7em;
} }
#main_preferences .preferences_back a { #main_preferences .preferences_back a {
display: block; display: block;
color: #FFF; color: var(--color-settings-return-font);
} }
#main_preferences .preferences_back a::first-letter { #main_preferences .preferences_back a::first-letter {
text-transform: uppercase; text-transform: uppercase;
@ -1957,11 +2121,11 @@ td:hover .engine-tooltip,
#search { #search {
padding: 0 2em 0 10rem; padding: 0 2em 0 10rem;
margin: 0; margin: 0;
background: #f7f7f7; background: var(--color-header-background);
border-bottom: 1px solid #d7d7d7; border-bottom: 1px solid var(--color-header-border);
} }
#search_wrapper { #search_wrapper {
padding: 10px 0; padding: 20px 0 10px 0;
} }
.search_box { .search_box {
margin: 0 12px 0 0; margin: 0 12px 0 0;
@ -1980,21 +2144,20 @@ td:hover .engine-tooltip,
box-sizing: border-box; box-sizing: border-box;
width: 1.8em; width: 1.8em;
margin: 0; margin: 0;
padding: 2px; padding: 8px 2px;
height: 2.2em; background: none repeat scroll 0 0 var(--color-search-background);
background: none repeat scroll 0 0 #FFF; border-top: 1px solid var(--color-search-border);
border-top: 1px solid #3498DB; border-bottom: 1px solid var(--color-search-border);
border-bottom: 1px solid #3498DB;
border-right: none; border-right: none;
border-left: none; border-left: none;
border-radius: 0; border-radius: 0;
outline: none; outline: none;
color: #222; color: var(--color-search-font);
font-size: 16px; font-size: 16px;
z-index: 10000; z-index: 10000;
} }
#clear_search:hover { #clear_search:hover {
color: #3498DB; color: var(--color-search-background-hover);
} }
#clear_search.empty * { #clear_search.empty * {
display: none; display: none;
@ -2005,22 +2168,22 @@ td:hover .engine-tooltip,
border-collapse: separate; border-collapse: separate;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 2px; padding: 8px;
height: 2.2em; background: none repeat scroll 0 0 var(--color-search-background);
background: none repeat scroll 0 0 #FFF; border: 1px solid var(--color-search-border);
border: 1px solid #3498DB;
border-radius: 0; border-radius: 0;
outline: none; outline: none;
color: #222; color: var(--color-search-font);
font-size: 16px; font-size: 16px;
z-index: 2; z-index: 2;
} }
#q { #q {
outline: medium none; outline: medium none;
padding-left: 8px; padding-left: 12px;
padding-right: 0 !important; padding-right: 0 !important;
border-right: none; border-right: none;
width: 40rem; width: 40rem;
border-radius: 10px 0 0 10px;
} }
#q::-ms-clear, #q::-ms-clear,
#q::-webkit-search-cancel-button { #q::-webkit-search-cancel-button {
@ -2028,12 +2191,12 @@ td:hover .engine-tooltip,
} }
#send_search { #send_search {
border-left: none; border-left: none;
width: 2.2em; border-radius: 0 10px 10px 0;
} }
#send_search:hover { #send_search:hover {
cursor: pointer; cursor: pointer;
background-color: #3498DB; background-color: var(--color-search-background-hover);
color: #ECF0F1; color: var(--color-search-background);
} }
.no-js #send_search { .no-js #send_search {
width: auto !important; width: auto !important;
@ -2132,9 +2295,6 @@ td:hover .engine-tooltip,
position: relative; position: relative;
margin: 0 3px; margin: 0 3px;
padding: 0; padding: 0;
/* label:hover {
border-bottom: 2px solid @color-categories-item-border-unselected-hover;
} */
} }
.category input { .category input {
display: none; display: none;
@ -2155,31 +2315,15 @@ td:hover .engine-tooltip,
user-select: none; user-select: none;
} }
.category input[type="checkbox"]:focus + label { .category input[type="checkbox"]:focus + label {
box-shadow: 0 0 8px #3498db; box-shadow: 0 0 8px var(--color-categories-item-border-selected);
} }
.category input[type="checkbox"]:checked + label { .category input[type="checkbox"]:checked + label {
background: #3498DB; color: var(--color-categories-item-selected-font);
color: #FFF; border-bottom: 2px solid var(--color-categories-item-border-selected);
border-bottom: 2px solid #084999;
} }
#categories_container { #categories_container {
position: relative; position: relative;
} }
#categories_container .help {
position: absolute;
width: 100%;
bottom: -20px;
overflow: hidden;
opacity: 0;
transition: opacity 1s ease;
font-size: 0.8em;
text-align: center;
background: white;
}
#categories_container:hover .help {
opacity: 0.8;
transition: opacity 1s ease;
}
.ion-icon-big { .ion-icon-big {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
@ -2203,7 +2347,8 @@ html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
color: #444; color: var(--color-base-font);
background-color: var(--color-base-background);
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -2235,8 +2380,8 @@ footer {
padding: 1rem 0; padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #f7f7f7; background-color: var(--color-footer-background);
border-top: 1px solid #d7d7d7; border-top: 1px solid var(--color-footer-border);
overflow: hidden; overflow: hidden;
} }
footer p { footer p {
@ -2255,28 +2400,28 @@ footer p {
} }
input[type="submit"], input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.7rem;
display: inline-block; display: inline-block;
background: #3498DB; background: var(--color-btn-background);
color: #FFF; color: var(--color-btn-font);
-webkit-border-radius: 4px; -webkit-border-radius: 10px;
-moz-border-radius: 4px; -moz-border-radius: 10px;
border-radius: 4px; border-radius: 10px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #29314d; color: var(--color-url-font);
} }
a:visited { a:visited {
color: #684898; color: var(--color-url-visited-font);
} }
a:visited .highlight { a:visited .highlight {
color: #684898; color: var(--color-url-visited-font);
} }
article[data-vim-selected] { article[data-vim-selected] {
background: #f7f7f7; background: var(--color-result-vim-selected);
} }
article[data-vim-selected]::before { article[data-vim-selected]::before {
position: absolute; position: absolute;
@ -2284,17 +2429,17 @@ article[data-vim-selected]::before {
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
color: #3498DB; color: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: #3498DB; background: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
} }
.result { .result {
margin: 19px 0 18px 0; margin: 2rem 0;
padding: 0; padding: 0;
} }
.result h3 { .result h3 {
@ -2305,12 +2450,12 @@ article.result-images[data-vim-selected]::before {
margin-bottom: 0; margin-bottom: 0;
} }
.result h3 a { .result h3 a {
color: #084999; color: var(--color-result-link-font);
font-weight: normal; font-weight: normal;
font-size: 1.1em; font-size: 1.1em;
} }
.result h3 a:visited { .result h3 a:visited {
color: #684898; color: var(--color-result-link-visited-font);
} }
.result h3 a:focus, .result h3 a:focus,
.result h3 a:hover { .result h3 a:hover {
@ -2337,7 +2482,7 @@ article.result-images[data-vim-selected]::before {
.result .content .highlight, .result .content .highlight,
.result .stat .highlight, .result .stat .highlight,
.result .altlink .highlight { .result .altlink .highlight {
color: #000000; color: var(--color-result-description-highlight-font);
background: inherit; background: inherit;
font-weight: bold; font-weight: bold;
} }
@ -2352,11 +2497,11 @@ 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: #25a55b; color: var(--color-result-url-font);
} }
.result .published_date { .result .published_date {
font-size: 0.8em; font-size: 0.8em;
color: #888; color: var(--color-result-publishdate-font);
} }
.result img.thumbnail { .result img.thumbnail {
float: left; float: left;
@ -2387,7 +2532,7 @@ article.result-images[data-vim-selected]::before {
} }
.engines { .engines {
float: right; float: right;
color: #888; color: var(--color-result-engines-font);
} }
.engines span { .engines span {
font-size: smaller; font-size: smaller;
@ -2397,9 +2542,8 @@ article.result-images[data-vim-selected]::before {
font-size: 0.8em; font-size: 0.8em;
} }
.highlight { .highlight {
color: #094089; color: var(--color-result-link-font-highlight);
background: inherit; background: inherit;
font-weight: bold;
} }
.result-images { .result-images {
display: inline-block; display: inline-block;
@ -2414,11 +2558,11 @@ article.result-images[data-vim-selected]::before {
padding: 0; padding: 0;
border: none; border: none;
max-height: 200px; max-height: 200px;
background: #084999; background: var(--color-result-image-background);
} }
.result-images span a { .result-images span a {
display: none; display: none;
color: #FFF; color: var(--color-result-image-span-font);
} }
.result-images:hover span a { .result-images:hover span a {
display: block; display: block;
@ -2427,7 +2571,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: rgba(0, 0, 0, 0.6); background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em; font-size: 0.7em;
} }
.result-map img.image { .result-map img.image {
@ -2454,23 +2598,6 @@ article.result-images[data-vim-selected]::before {
.hidden { .hidden {
display: none !important; display: none !important;
} }
.torrent_result {
border-left: 10px solid lightgray;
padding-left: 3px;
}
.torrent_result p {
margin: 3px;
font-size: 0.8em;
}
.torrent_result a {
color: #084999;
}
.torrent_result a:hover {
text-decoration: underline;
}
.torrent_result a:visited {
color: #684898;
}
#results { #results {
margin: 2rem 2rem 0 10rem; margin: 2rem 2rem 0 10rem;
display: grid; display: grid;
@ -2506,7 +2633,7 @@ 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: #444; color: var(--color-result-search-url-font);
cursor: pointer; cursor: pointer;
} }
#suggestions input[type="submit"], #suggestions input[type="submit"],
@ -2517,7 +2644,7 @@ article.result-images[data-vim-selected]::before {
#answers .infobox .url a, #answers .infobox .url a,
#infoboxes .infobox .url a, #infoboxes .infobox .url a,
#corrections .infobox .url a { #corrections .infobox .url a {
color: #084999; color: var(--color-result-link-font);
text-decoration: none; text-decoration: none;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -2549,13 +2676,17 @@ 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: #444; color: var(--color-base-font);
} }
#answers { #answers {
grid-area: answers; grid-area: answers;
border: 1px solid #ddd; border: 1px solid var(--color-answer-border);
padding: 0.9em; padding: 0.9em;
box-shadow: 0 0 5px #ccc; margin-bottom: 2rem;
color: var(--color-answer-font);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
#answers h4 { #answers h4 {
display: none; display: none;
@ -2572,13 +2703,16 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
grid-area: sidebar; grid-area: sidebar;
word-wrap: break-word; word-wrap: break-word;
color: var(--color-sidebar-font);
} }
#sidebar .infobox { #sidebar .infobox {
margin: 10px 0 10px; margin: 10px 0 10px;
border: 1px solid #ddd; border: 1px solid var(--color-sidebar-border);
padding: 0.9em; padding: 0.9em;
font-size: 0.9em; font-size: 0.9em;
box-shadow: 0 0 5px #ccc; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
#sidebar .infobox h2 { #sidebar .infobox h2 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
@ -2628,13 +2762,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: #222; color: var(--color-search-font);
} }
#linkto_preferences a:link *, #linkto_preferences a:link *,
#linkto_preferences a:hover *, #linkto_preferences a:hover *,
#linkto_preferences a:visited *, #linkto_preferences a:visited *,
#linkto_preferences a:active * { #linkto_preferences a:active * {
color: #222; color: var(--color-search-font);
} }
#pagination { #pagination {
grid-area: pagination; grid-area: pagination;
@ -2647,22 +2781,25 @@ article.result-images[data-vim-selected]::before {
clear: both; clear: both;
} }
#backToTop { #backToTop {
border: 1px solid #ddd; border: 1px solid var(--color-backtotop-border);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px var(--color-backtotop-shadow);
background: white; background: var(--color-backtotop-background);
position: fixed; position: fixed;
bottom: 8rem; bottom: 8rem;
left: 56.3rem; left: 56.3rem;
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
#backToTop a { #backToTop a {
display: block; display: block;
margin: 0; margin: 0;
padding: 0.6em; padding: 0.7em;
} }
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
#main_preferences, #main_preferences,
@ -2684,6 +2821,7 @@ article.result-images[data-vim-selected]::before {
margin: 0.5em 0.5em 0.5em 0; margin: 0.5em 0.5em 0.5em 0;
} }
#sidebar { #sidebar {
margin-bottom: 2rem;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -2698,12 +2836,6 @@ article.result-images[data-vim-selected]::before {
#search_url { #search_url {
display: none; display: none;
} }
.result {
border-bottom: 1px solid #E8E7E6;
margin: 0;
padding-top: 8px;
padding-bottom: 6px;
}
.result h3 { .result h3 {
margin: 0 0 1px 0; margin: 0 0 1px 0;
} }
@ -2789,9 +2921,13 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
margin: 0 5px 2px 5px; margin: 0 5px 2px 5px;
} }
.infobox {
box-shadow: 0 0 5px var(--color-result-shadow);
}
#corrections, #corrections,
#answers { #answers {
margin: 0 5px 1em 5px; margin: 0 5px 1em 5px;
box-shadow: 0 0 5px var(--color-result-shadow);
} }
#results { #results {
margin: 0; margin: 0;
@ -2802,11 +2938,18 @@ article.result-images[data-vim-selected]::before {
} }
.result { .result {
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;
margin: 0.5rem;
border: 1px solid var(--color-result-border);
box-shadow: 0 0 5px var(--color-result-shadow);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} }
.result-images { .result-images {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
box-shadow: none;
} }
} }
@media screen and (max-width: 35em) { @media screen and (max-width: 35em) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,17 +1,16 @@
/*! 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;
overflow-y: hidden; overflow-y: hidden;
text-align: left; text-align: left;
.rounded-corners;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: @background_color; background-color: var(--color-autocomplete-background);
} }
&:empty { &:empty {
@ -25,12 +24,13 @@
> li { > li {
cursor: pointer; cursor: pointer;
padding: 5px 0 5px 10px; padding: 8px 0 8px 8px;
&.active, &.active,
&:active, &:active,
&:focus { &:focus,
background-color: @color-base; &:hover {
background-color: var(--color-autocomplete-background-hover);
a:active, a:active,
a:focus, a:focus,
@ -47,8 +47,9 @@
&.open { &.open {
display: block; display: block;
background-color: @background_color; background-color: var(--color-autocomplete-background);
border: 1px solid @color-base; color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border);
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;
@ -65,8 +66,7 @@
} }
.autocomplete > ul > li { .autocomplete > ul > li {
padding: 7px 0 7px 10px; border-bottom: 1px solid var(--color-result-top-border);
border-bottom: 1px solid @color-result-top-border;
text-align: left; text-align: left;
} }
} }

View File

@ -4,139 +4,200 @@
* To change the colors of the site, simple edit this variables * To change the colors of the site, simple edit this variables
*/ */
/// Basic Colors /// Light Theme
html {
/// Base Colors
--color-base-font: #444;
--color-base-background: #fff;
--color-url-font: #29314d;
--color-url-visited-font: #80b;
/// Header Colors
--color-header-background: #f7f7f7;
--color-header-border: #ddd;
/// Footer Colors
--color-footer-background: #f7f7f7;
--color-footer-border: #ddd;
/// Sidebar Colors
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
/// BackToTop Colors
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
/// Button Colors
--color-btn-background: #3050ff;
--color-btn-font: #fff;
/// Search Input Colors
--color-search-border: #bbb;
--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-background: #fff;
--color-autocomplete-background-hover: #f7f7f7;
/// Answer Colors
--color-answer-border: #ddd;
--color-answer-font: #000;
/// Results Colors
--color-result-shadow: #ccc;
--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: #80b;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #ddd;
--color-result-search-url-font: #000;
// Images Colors
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #000bbb;
/// Settings Colors
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
/// Toolkit Colors
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--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-border: #ddd;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #3050ff;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
--color-toolkit-checkbox-label-background: #fff;
--color-toolkit-checkbox-label-border: #ddd;
--color-toolkit-checkbox-input-border: #3050ff;
--color-toolkit-engine-tooltip-border: #ddd;
--color-toolkit-engine-tooltip-shadow: #ccc;
--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-base: #3498DB; /// Dark Theme (autoswitch based on device pref)
@color-base-dark: #084999; @media (prefers-color-scheme: dark) {
@color-base-light: #ECF0F1; html {
@color-highlight: #094089; /// Base Colors
@color-black: #000000; --color-base-font: #bbb;
--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: #333;
--color-sidebar-font: #fff;
/// BackToTop Colors
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-shadow: #444;
/// Button Colors
--color-btn-background: #58f;
--color-btn-font: #fff;
/// Search Input Colors
--color-search-border: #444;
--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: #444;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
/// Answer Colors
--color-answer-border: #ddd;
--color-answer-font: #fff;
/// Results Colors
--color-result-shadow: #444;
--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: #333;
--color-result-search-url-font: #fff;
// 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: #333;
--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: #333;
--color-toolkit-dialog-background: #222;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #333;
--color-toolkit-select-border: #333;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--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-shadow: #444;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
}
}
/// /// General Size
@color-error: #db3434;
@color-error-background: lighten(@color-error, 40%);
@color-warning: #dbba34;
@color-warning-background: lighten(@color-warning, 40%);
@color-success: #42db34;
@color-success-background: lighten(@color-success, 40%);
/// General
@color-font: #444;
@color-font-light: #888;
@color-red: #25a55b;
@color-url-font: #29314d;
@color-url-visited-font: #684898;
@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;
@results-margin: 2rem;
@search-width: 40rem; @search-width: 40rem;
// /// From style.less
@color-a-font: @color-base; @stacked-bar-chart: rgb(0, 0, 0);
@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/";

View File

@ -10,7 +10,7 @@
text-size-adjust: @property; text-size-adjust: @property;
} }
.rounded-corners (@radius: 4px) { .rounded-corners (@radius: 10px) {
-webkit-border-radius: @radius; -webkit-border-radius: @radius;
-moz-border-radius: @radius; -moz-border-radius: @radius;
border-radius: @radius; border-radius: @radius;

View File

@ -1,9 +1,3 @@
.column-reliability {
.engine-tooltip {
right: 12rem;
}
}
#tab-contentquery table td, #tab-contentquery table td,
#tab-contentquery table th { #tab-contentquery table th {
text-align: left !important; text-align: left !important;
@ -40,7 +34,7 @@
padding: 5px 0 0 0; padding: 5px 0 0 0;
float: left; float: left;
width: 50%; width: 50%;
color: darken(#dcdcdc, 30%); color: var(--color-settings-engine-description-font);
font-size: 90%; font-size: 90%;
} }
@ -73,7 +67,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,19 +77,19 @@
} }
.preferences_back { .preferences_back {
background: none repeat scroll 0 0 @color-settings-return-background; background: none repeat scroll 0 0 var(--color-btn-background);
color: white; color: var(--color-btn-font);
border: 0 none; border: 0 none;
.rounded-corners; .rounded-corners;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
margin: 2px 4px; margin: 2px 4px;
padding: 0.5em; padding: 0.7em;
a { a {
display: block; display: block;
color: @color-settings-return-font; color: var(--color-settings-return-font);
} }
a::first-letter { a::first-letter {

View File

@ -5,12 +5,12 @@
#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 {
padding: 10px 0; padding: 20px 0 10px 0;
} }
.search_box { .search_box {
@ -32,21 +32,20 @@
box-sizing: border-box; box-sizing: border-box;
width: 1.8em; width: 1.8em;
margin: 0; margin: 0;
padding: 2px; padding: 8px 2px;
height: 2.2em; background: none repeat scroll 0 0 var(--color-search-background);
background: none repeat scroll 0 0 @color-search-background; border-top: 1px solid var(--color-search-border);
border-top: 1px solid @color-search-border; border-bottom: 1px solid var(--color-search-border);
border-bottom: 1px solid @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-background-hover);
} }
&.empty * { &.empty * {
@ -60,23 +59,23 @@
border-collapse: separate; border-collapse: separate;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 2px; padding: 8px;
height: 2.2em; background: none repeat scroll 0 0 var(--color-search-background);
background: none repeat scroll 0 0 @color-search-background; border: 1px solid var(--color-search-border);
border: 1px solid @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;
} }
#q { #q {
outline: medium none; outline: medium none;
padding-left: 8px; padding-left: 12px;
padding-right: 0 !important; padding-right: 0 !important;
border-right: none; border-right: none;
width: @search-width; width: @search-width;
border-radius: 10px 0 0 10px;
} }
#q::-ms-clear, #q::-ms-clear,
@ -86,12 +85,12 @@
#send_search { #send_search {
border-left: none; border-left: none;
width: 2.2em; border-radius: 0 10px 10px 0;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: @color-search-border; background-color: var(--color-search-background-hover);
color: @color-base-light; color: var(--color-search-background);
} }
} }
@ -225,37 +224,15 @@
} }
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
box-shadow: 0 0 8px #3498db; box-shadow: 0 0 8px var(--color-categories-item-border-selected);
} }
/* label:hover {
border-bottom: 2px solid @color-categories-item-border-unselected-hover;
} */
input[type="checkbox"]:checked + label { input[type="checkbox"]:checked + label {
background: @color-categories-item-selected; color: var(--color-categories-item-selected-font);
color: @color-categories-item-selected-font; border-bottom: 2px solid var(--color-categories-item-border-selected);
border-bottom: 2px solid @color-categories-item-border-selected;
} }
} }
#categories_container { #categories_container {
position: relative; 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: white;
}
&:hover .help {
opacity: 0.8;
transition: opacity 1s ease;
}
} }

View File

@ -6,8 +6,6 @@
// stylelint-disable no-descending-specificity // stylelint-disable no-descending-specificity
@stacked-bar-chart: rgb(0, 0, 0);
@import "../../__common__/less/new_issue.less"; @import "../../__common__/less/new_issue.less";
@import "../../__common__/less/stats.less"; @import "../../__common__/less/stats.less";
@import "../../__common__/less/result_templates.less"; @import "../../__common__/less/result_templates.less";
@ -41,7 +39,8 @@ html {
font-size: 0.9em; font-size: 0.9em;
.text-size-adjust; .text-size-adjust;
color: @color-font; color: var(--color-base-font);
background-color: var(--color-base-background);
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -78,8 +77,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 {
@ -101,10 +100,10 @@ footer {
input[type="submit"], input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.7rem;
display: inline-block; display: inline-block;
background: @color-download-button-background; background: var(--color-btn-background);
color: @color-download-button-font; color: var(--color-btn-font);
.rounded-corners; .rounded-corners;
border: 0; border: 0;
@ -113,19 +112,19 @@ 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);
} }
} }
} }
article[data-vim-selected] { article[data-vim-selected] {
background: #f7f7f7; background: var(--color-result-vim-selected);
} }
article[data-vim-selected]::before { article[data-vim-selected]::before {
@ -134,11 +133,11 @@ article[data-vim-selected]::before {
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
color: @color-base; color: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: @color-base; background: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
@ -147,7 +146,7 @@ article.result-images[data-vim-selected]::before {
} }
.result { .result {
margin: 19px 0 18px 0; margin: @results-margin 0;
padding: 0; padding: 0;
h3 { h3 {
@ -158,12 +157,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 +192,7 @@ article.result-images[data-vim-selected]::before {
line-height: 1.24; line-height: 1.24;
.highlight { .highlight {
color: @color-black; color: var(--color-result-description-highlight-font);
background: inherit; background: inherit;
font-weight: bold; font-weight: bold;
} }
@ -213,12 +212,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 +227,6 @@ 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;
} }
&.image { &.image {
@ -259,7 +257,7 @@ article.result-images[data-vim-selected]::before {
.engines { .engines {
float: right; float: right;
color: @color-engines-font; color: var(--color-result-engines-font);
span { span {
font-size: smaller; font-size: smaller;
@ -272,9 +270,8 @@ article.result-images[data-vim-selected]::before {
} }
.highlight { .highlight {
color: @color-highlight; color: var(--color-result-link-font-highlight);
background: inherit; background: inherit;
font-weight: bold;
} }
.result-images { .result-images {
@ -290,12 +287,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-result-image-background);
} }
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 +302,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;
} }
} }
@ -341,28 +338,6 @@ article.result-images[data-vim-selected]::before {
display: none !important; display: none !important;
} }
.torrent_result {
border-left: 10px solid @color-result-torrent-border;
padding-left: 3px;
p {
margin: 3px;
font-size: 0.8em;
}
a {
color: @color-result-link-font;
&:hover {
text-decoration: underline;
}
&:visited {
color: @color-result-link-visited-font;
}
}
}
#results { #results {
margin: 2rem 2rem 0 @results-offset; margin: 2rem 2rem 0 @results-offset;
display: grid; display: grid;
@ -410,13 +385,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,14 +422,16 @@ 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-base-font);
} }
#answers { #answers {
grid-area: answers; grid-area: answers;
border: 1px solid #ddd; border: 1px solid var(--color-answer-border);
padding: 0.9em; padding: 0.9em;
box-shadow: 0 0 5px #ccc; margin-bottom: @results-margin;
color: var(--color-answer-font);
.rounded-corners;
h4 { h4 {
display: none; display: none;
@ -477,13 +454,14 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
grid-area: sidebar; grid-area: sidebar;
word-wrap: break-word; word-wrap: break-word;
color: var(--color-sidebar-font);
.infobox { .infobox {
margin: 10px 0 10px; margin: 10px 0 10px;
border: 1px solid #ddd; border: 1px solid var(--color-sidebar-border);
padding: 0.9em; padding: 0.9em;
font-size: 0.9em; font-size: 0.9em;
box-shadow: 0 0 5px #ccc; .rounded-corners;
h2 { h2 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
@ -547,13 +525,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);
} }
} }
@ -571,22 +549,23 @@ article.result-images[data-vim-selected]::before {
} }
#backToTop { #backToTop {
border: 1px solid #ddd; border: 1px solid var(--color-backtotop-border);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px var(--color-backtotop-shadow);
background: white; background: var(--color-backtotop-background);
position: fixed; position: fixed;
bottom: 8rem; bottom: 8rem;
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
.rounded-corners;
a { a {
display: block; display: block;
margin: 0; margin: 0;
padding: 0.6em; padding: 0.7em;
} }
} }
@ -614,6 +593,7 @@ article.result-images[data-vim-selected]::before {
} }
#sidebar { #sidebar {
margin-bottom: @results-margin;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -633,11 +613,6 @@ article.result-images[data-vim-selected]::before {
} }
.result { .result {
border-bottom: 1px solid @color-result-top-border;
margin: 0;
padding-top: 8px;
padding-bottom: 6px;
h3 { h3 {
margin: 0 0 1px 0; margin: 0 0 1px 0;
} }
@ -756,9 +731,14 @@ article.result-images[data-vim-selected]::before {
margin: 0 5px 2px 5px; margin: 0 5px 2px 5px;
} }
.infobox {
box-shadow: 0 0 5px var(--color-result-shadow);
}
#corrections, #corrections,
#answers { #answers {
margin: 0 5px 1em 5px; margin: 0 5px 1em 5px;
box-shadow: 0 0 5px var(--color-result-shadow);
} }
#results { #results {
@ -772,12 +752,17 @@ article.result-images[data-vim-selected]::before {
.result { .result {
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;
margin: @results-tablet-offset;
border: 1px solid var(--color-result-border);
box-shadow: 0 0 5px var(--color-result-shadow);
.rounded-corners;
} }
.result-images { .result-images {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
box-shadow: none;
} }
} }

View File

@ -36,21 +36,21 @@ 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 {
display: inline-block; display: inline-block;
color: #fff; color: var(--color-toolkit-badge-font);
background-color: #777; background-color: var(--color-toolkit-badge-background);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@ -64,8 +64,8 @@ kbd {
padding: 2px 4px; padding: 2px 4px;
margin: 1px; margin: 1px;
font-size: 90%; font-size: 90%;
color: white; color: var(--color-toolkit-kbd-font);
background: black; background: var(--color-toolkit-kbd-background);
} }
// table // table
@ -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;
@ -122,9 +122,9 @@ div.selectable_url {
position: relative; position: relative;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid var(--color-toolkit-dialog-border);
border-radius: 4px;
text-align: left; text-align: left;
.rounded-corners;
&::before { &::before {
position: absolute; position: absolute;
@ -173,25 +173,25 @@ 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();
} }
.dialog-modal { .dialog-modal {
.dialog(); .dialog();
background: white; background: var(--color-toolkit-dialog-background);
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -244,7 +244,7 @@ div.selectable_url {
margin: 0 0.7em; margin: 0 0.7em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
border: solid white; border: solid var(--color-toolkit-tabs-label-border);
border-width: 0 0 2px 0; border-width: 0 0 2px 0;
.disable-user-select(); .disable-user-select();
@ -253,22 +253,22 @@ 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 {
min-width: 100%; min-width: 100%;
padding: 0.7rem 0; padding: 0.7rem 0;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid black; border-top: 1px solid var(--color-toolkit-tabs-section-border);
display: none; display: none;
} }
// 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;
@ -327,7 +327,7 @@ select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
border: 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: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat;
background-position-x: 105%; background-position-x: 105%;
background-size: 2em; background-size: 2em;
@ -336,7 +336,7 @@ select {
&:hover, &:hover,
&:focus { &:focus {
border-bottom: 1px solid @color-search-border; border-bottom: 1px solid var(--color-search-border);
} }
} }
} }
@ -347,7 +347,7 @@ select {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 10px; height: 10px;
background: #dcdcdc; background: var(--color-toolkit-checkbox-onoff-background);
margin: 8px 1rem; margin: 8px 1rem;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;
@ -360,10 +360,10 @@ select {
top: -5px; top: -5px;
cursor: pointer; cursor: pointer;
border-radius: 50px; 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; transition: all 0.4s ease;
left: 27px; left: 27px;
background-color: #3498db; background-color: var(--color-toolkit-checkbox-onoff-label-background);
} }
input[type=checkbox] { input[type=checkbox] {
@ -371,7 +371,7 @@ select {
&:checked + label { &:checked + label {
left: -5px; left: -5px;
background: #dcdcdc; background: var(--color-toolkit-checkbox-onoff-checked-background);
} }
} }
} }
@ -391,9 +391,8 @@ select {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: white; background: var(--color-toolkit-checkbox-label-background);
border-radius: 4px; .rounded-corners;
box-shadow: inset 0 1px 1px white, 0 1px 4px rgba(0, 0, 0, 0.5);
&::after { &::after {
content: ''; content: '';
@ -402,7 +401,7 @@ select {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
border: 3px solid #333; border: 3px solid var(--color-toolkit-checkbox-label-border);
border-top: none; border-top: none;
border-right: none; border-right: none;
background: transparent; background: transparent;
@ -415,7 +414,7 @@ select {
visibility: hidden; visibility: hidden;
&:checked + label::after { &:checked + label::after {
border-color: #3498db; border-color: var(--color-toolkit-checkbox-input-border);
opacity: 1; opacity: 1;
} }
} }
@ -453,10 +452,10 @@ select {
font-size: 10px; font-size: 10px;
position: relative; position: relative;
text-indent: -9999em; text-indent: -9999em;
border-top: 0.5em solid rgba(0, 0, 0, 0.2); border-top: 0.5em solid var(--color-toolkit-loader-border);
border-right: 0.5em solid rgba(0, 0, 0, 0.2); border-right: 0.5em solid var(--color-toolkit-loader-border);
border-bottom: 0.5em solid rgba(0, 0, 0, 0.2); border-bottom: 0.5em solid var(--color-toolkit-loader-border);
border-left: 0.5em solid rgba(255, 255, 255, 0); border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
@ -494,13 +493,14 @@ select {
position: absolute; position: absolute;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 0 0 2rem; margin: 0 0 0 2rem;
border: 1px solid #ddd; border: 1px solid var(--color-toolkit-engine-tooltip-border);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow);
background: white; background: var(--color-toolkit-engine-tooltip-background);
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
z-index: 1000000; z-index: 1000000;
text-align: left; text-align: left;
.rounded-corners;
} }
th:hover .engine-tooltip, th:hover .engine-tooltip,

View File

@ -27,6 +27,9 @@
<!-- Draw result header --> <!-- Draw result header -->
{% macro result_header(result, favicons, image_proxify) -%} {% macro result_header(result, favicons, image_proxify) -%}
<article class="result {% if result['template'] %}result-{{ result.template|replace('.html', '') }}{% else %}result-default{% endif %} {% if result['category'] %}category-{{ result['category'] }}{% endif %}{% for e in result.engines %} {{ e }}{% endfor %}"> <article class="result {% if result['template'] %}result-{{ result.template|replace('.html', '') }}{% else %}result-default{% endif %} {% if result['category'] %}category-{{ result['category'] }}{% endif %}{% for e in result.engines %} {{ e }}{% endfor %}">
<p class="url">
<span class="url">{{ result.pretty_url }}</span>
</p>{{- '' -}}
{%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="image" />{{ result_close_link() }}{% endif -%} {%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="image" />{{ result_close_link() }}{% endif -%}
{%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}"/>{{ result_close_link() }}{% endif -%} {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}"/>{{ result_close_link() }}{% endif -%}
<h3>{{ result_link(result.url, result.title|safe) }}</h3> <h3>{{ result_link(result.url, result.title|safe) }}</h3>
@ -40,8 +43,10 @@
<!-- Draw result sub footer --> <!-- Draw result sub footer -->
{%- macro result_sub_footer(result, proxify) -%} {%- macro result_sub_footer(result, proxify) -%}
<div class="engines">{% for engine in result.engines %}<span>{{ engine }}</span>{% endfor %}</div>{{- '' -}} <div class="engines">
<p class="url"><span class="url">{{ result.pretty_url }}</span>{{ result_link("https://web.archive.org/web/" + result.url, icon('link') + _('cached'), "cache_link") }}&lrm; {% if proxify and proxify_results %} {{ result_link(proxify(result.url), icon('link') + _('proxied'), "proxyfied_link") }} {% endif %}</p>{{- '' -}} {% for engine in result.engines %}<span>{{ engine }}</span>{% endfor %}
{{ result_link("https://web.archive.org/web/" + result.url, icon('link') + _('cached'), "cache_link") }}&lrm; {% if proxify and proxify_results %} {{ result_link(proxify(result.url), icon('link') + _('proxied'), "proxyfied_link") }} {% endif %}
</div>{{- '' -}}
<div class="break"></div>{{- '' -}} <div class="break"></div>{{- '' -}}
{%- endmacro -%} {%- endmacro -%}