Expand custom css theming support
Also adds new default dark theme designed by @gripped.main
Ben Busby
parent
13abb0ae7f
commit
1030118d0b
|
|
@ -153,7 +153,9 @@ class Filter:
|
|||
|
||||
if src.startswith(LOGO_URL):
|
||||
# Re-brand with Whoogle logo
|
||||
element.replace_with(BeautifulSoup(render_template('logo.html')))
|
||||
element.replace_with(BeautifulSoup(
|
||||
render_template('logo.html', dark=self.dark),
|
||||
features='html.parser'))
|
||||
return
|
||||
elif src.startswith(GOOG_IMG) or GOOG_STATIC in src:
|
||||
element['src'] = BLANK_B64
|
||||
|
|
@ -164,7 +166,6 @@ class Filter:
|
|||
is_element=True) + '&type=' + urlparse.quote(mime)
|
||||
|
||||
def update_styling(self, soup) -> None:
|
||||
""""""
|
||||
# Remove unnecessary button(s)
|
||||
for button in soup.find_all('button'):
|
||||
button.decompose()
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ def index():
|
|||
countries=app.config['COUNTRIES'],
|
||||
logo=render_template(
|
||||
'logo.html',
|
||||
config=g.user_config),
|
||||
dark=g.user_config.dark),
|
||||
config=g.user_config,
|
||||
tor_available=int(os.environ.get('TOR_AVAILABLE')),
|
||||
version_number=app.config['VERSION_NUMBER'])
|
||||
|
|
@ -227,7 +227,7 @@ def search():
|
|||
search_header=(render_template(
|
||||
'header.html',
|
||||
config=g.user_config,
|
||||
logo=render_template('logo.html'),
|
||||
logo=render_template('logo.html', dark=g.user_config.dark),
|
||||
query=urlparse.unquote(query),
|
||||
search_type=search_util.search_type,
|
||||
mobile=g.user_request.mobile)
|
||||
|
|
|
|||
|
|
@ -90,11 +90,11 @@ select {
|
|||
}
|
||||
|
||||
.collapsible {
|
||||
color: var(--whoogle-dark-element-bg) !important;
|
||||
color: var(--whoogle-dark-text);
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
color: var(--whoogle-dark-element-bg) !important;
|
||||
color: var(--whoogle-dark-text);
|
||||
}
|
||||
|
||||
.active {
|
||||
|
|
@ -108,11 +108,11 @@ select {
|
|||
}
|
||||
|
||||
.active:after {
|
||||
color: var(--whoogle-dark-contrast-text);
|
||||
color: var(--whoogle-dark-contrast-text) !important;
|
||||
}
|
||||
|
||||
#gh-link {
|
||||
color: var(--whoogle-dark-element-bg);
|
||||
color: var(--whoogle-dark-contrast-text);
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
|
|
|
|||
|
|
@ -86,11 +86,11 @@ input {
|
|||
}
|
||||
|
||||
.collapsible {
|
||||
color: var(--whoogle-element-bg) !important;
|
||||
color: var(--whoogle-text) !important;
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
color: var(--whoogle-element-bg) !important;
|
||||
color: var(--whoogle-text);
|
||||
}
|
||||
|
||||
.active {
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
--whoogle-result-visited: #4b11a8;
|
||||
|
||||
/* DARK THEME COLORS */
|
||||
--whoogle-dark-logo: #685e79;
|
||||
--whoogle-dark-page-bg: #222222;
|
||||
--whoogle-dark-element-bg: #685e79;
|
||||
--whoogle-dark-text: #ffffff;
|
||||
--whoogle-dark-contrast-text: #000000;
|
||||
--whoogle-dark-secondary-text: #bbbbbb;
|
||||
--whoogle-dark-result-bg: #000000;
|
||||
--whoogle-dark-result-title: #1967d2;
|
||||
--whoogle-dark-result-url: #4b11a8;
|
||||
--whoogle-dark-result-visited: #bbbbff;
|
||||
--whoogle-dark-logo: #888888;
|
||||
--whoogle-dark-page-bg: #080808;
|
||||
--whoogle-dark-element-bg: #111111;
|
||||
--whoogle-dark-text: #dddddd;
|
||||
--whoogle-dark-contrast-text: #aaaaaa;
|
||||
--whoogle-dark-secondary-text: #8a8b8c;
|
||||
--whoogle-dark-result-bg: #111111;
|
||||
--whoogle-dark-result-title: #dddddd;
|
||||
--whoogle-dark-result-url: #eceff4;
|
||||
--whoogle-dark-result-visited: #959595;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
{{ response|safe }}
|
||||
</body>
|
||||
<footer>
|
||||
<p style="color: {{ '#fff' if config.dark else '#000' }};">
|
||||
<p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
|
||||
Whoogle Search v{{ version_number }} ||
|
||||
<a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
|
||||
<a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="static/js/autocomplete.js"></script>
|
||||
|
|
|
|||
|
|
@ -144,10 +144,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p style="color: {{ '#fff' if config.dark else '#000' }};">
|
||||
Whoogle Search v{{ version_number }} ||
|
||||
<a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
|
||||
</p>
|
||||
<p style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};">
|
||||
Whoogle Search v{{ version_number }} ||
|
||||
<a id="gh-link" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<svg id="Layer_1" class="whoogle-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 254">
|
||||
<style>
|
||||
path {
|
||||
fill: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }};
|
||||
fill: {{ 'var(--whoogle-dark-logo)' if dark else 'var(--whoogle-logo)' }};
|
||||
}
|
||||
</style>
|
||||
<defs>
|
||||
|
|
|
|||
Loading…
Reference in New Issue