From 0b9600b564a8995c561932edfee44dcab098b930 Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Mon, 5 Apr 2021 10:37:39 -0400 Subject: [PATCH] Expand custom css variables and functionality Squashed commit of the following: commit 37e22d2945b077a94d9997d064f4355ff8819bae Author: Ben Busby Date: Mon Apr 5 10:27:05 2021 -0400 Pass user config to logo template commit 2406fee05c3e221112fbe802fbf2ecca1df99127 Author: Ben Busby Date: Mon Apr 5 10:24:54 2021 -0400 Fix incorrect contrast text in dark theme commit 91dd677e22c2e99819123154e03e9f519f95a9bd Author: Ben Busby Date: Fri Apr 2 17:21:38 2021 -0400 Remove inline onclicks, fix svg sizing commit 91bbf9c0fae36febd6a6a0d8e6a560babe8622d5 Merge: 72637df b1227bd Author: Ben Busby Date: Fri Apr 2 15:35:37 2021 -0400 Merge remote-tracking branch 'origin/develop' into custom-css-tweaks commit 72637df213f4b9e83e4b58fe76973de02f63ec8e Author: Ben Busby Date: Fri Apr 2 11:38:38 2021 -0400 Use svg logo w/ custom styling on results pages commit 666a7ceac4a6e4d3fe1975dcee91e6094b66149e Author: Ben Busby Date: Fri Apr 2 11:10:37 2021 -0400 Split whoogle-accent into whoogle-element-bg and whoogle-logo See discussion on #247 --- app/filter.py | 4 ++-- app/routes.py | 4 ++++ app/static/css/dark-theme.css | 34 ++++++++++++++++---------------- app/static/css/light-theme.css | 36 +++++++++++++++++----------------- app/static/css/logo.css | 17 ++++++++++++++++ app/static/css/main.css | 4 ++++ app/static/css/variables.css | 24 ++++++++++++----------- app/static/js/controller.js | 3 +++ app/templates/header.html | 14 ++++++++----- app/templates/index.html | 32 +++++------------------------- app/templates/logo.html | 25 +++++++++++++++++++++++ 11 files changed, 117 insertions(+), 80 deletions(-) create mode 100644 app/static/css/logo.css create mode 100644 app/templates/logo.html diff --git a/app/filter.py b/app/filter.py index e93c91b..8f457f3 100644 --- a/app/filter.py +++ b/app/filter.py @@ -3,6 +3,7 @@ from app.utils.results import * from bs4 import BeautifulSoup from bs4.element import ResultSet, Tag from cryptography.fernet import Fernet +from flask import render_template import re import urllib.parse as urlparse from urllib.parse import parse_qs @@ -152,8 +153,7 @@ class Filter: if src.startswith(LOGO_URL): # Re-brand with Whoogle logo - element['src'] = 'static/img/logo.png' - element['style'] = 'height:40px;width:162px' + element.replace_with(BeautifulSoup(render_template('logo.html'))) return elif src.startswith(GOOG_IMG) or GOOG_STATIC in src: element['src'] = BLANK_B64 diff --git a/app/routes.py b/app/routes.py index 4fae8eb..3ae805e 100644 --- a/app/routes.py +++ b/app/routes.py @@ -126,6 +126,9 @@ def index(): return render_template('index.html', languages=app.config['LANGUAGES'], countries=app.config['COUNTRIES'], + logo=render_template( + 'logo.html', + config=g.user_config), config=g.user_config, tor_available=int(os.environ.get('TOR_AVAILABLE')), version_number=app.config['VERSION_NUMBER']) @@ -224,6 +227,7 @@ def search(): search_header=(render_template( 'header.html', config=g.user_config, + logo=render_template('logo.html'), query=urlparse.unquote(query), search_type=search_util.search_type, mobile=g.user_request.mobile) diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css index 8fc9455..720f27a 100644 --- a/app/static/css/dark-theme.css +++ b/app/static/css/dark-theme.css @@ -1,9 +1,9 @@ html { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; } body { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; } div { @@ -23,7 +23,7 @@ li { } textarea { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } @@ -44,17 +44,17 @@ div span { } input { - background-color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } select { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } .search-container { - background-color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-page-bg) !important; } .ZINbbc { @@ -66,7 +66,7 @@ select { } #search-bar { - border: 2px solid var(--whoogle-dark-accent) !important; + border: 2px solid var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-text) !important; } @@ -75,9 +75,9 @@ select { } #search-submit { - border: 1px solid var(--whoogle-dark-accent) !important; - background: var(--whoogle-dark-accent) !important; - color: var(--whoogle-dark-background) !important; + border: 1px solid var(--whoogle-dark-element-bg) !important; + background: var(--whoogle-dark-element-bg) !important; + color: var(--whoogle-dark-contrast-text) !important; } .info-text { @@ -86,20 +86,20 @@ select { } .collapsible { - color: var(--whoogle-dark-accent) !important; + color: var(--whoogle-dark-element-bg) !important; } .collapsible:after { - color: var(--whoogle-dark-accent) !important; + color: var(--whoogle-dark-element-bg) !important; } .active { - background-color: var(--whoogle-dark-accent) !important; + background-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-contrast-text) !important; } .content { - background-color: var(--whoogle-dark-accent) !important; + background-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-contrast-text) !important; } @@ -108,7 +108,7 @@ select { } #gh-link { - color: var(--whoogle-dark-accent); + color: var(--whoogle-dark-element-bg); } .autocomplete-items { @@ -126,6 +126,6 @@ select { } .autocomplete-active { - background-color: var(--whoogle-dark-accent) !important; - color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-element-bg) !important; + color: var(--whoogle-dark-contrast-text) !important; } diff --git a/app/static/css/light-theme.css b/app/static/css/light-theme.css index a878c5e..b4da052 100644 --- a/app/static/css/light-theme.css +++ b/app/static/css/light-theme.css @@ -1,9 +1,9 @@ html { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; } body { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; } div { @@ -23,12 +23,12 @@ li { } textarea { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } select { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } @@ -57,27 +57,27 @@ div span { } input { - background-color: var(--whoogle-background) !important; + background-color: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } #search-bar { color: var(--whoogle-text) !important; - background-color: var(--whoogle-background); + background-color: var(--whoogle-page-bg); } .home-search { - border: 3px solid var(--whoogle-accent) !important; + border: 3px solid var(--whoogle-element-bg) !important; } .search-container { - background-color: var(--whoogle-background) !important; + background-color: var(--whoogle-page-bg) !important; } #search-submit { - border: 1px solid var(--whoogle-accent) !important; - background: var(--whoogle-accent) !important; - color: var(--whoogle-background) !important; + border: 1px solid var(--whoogle-element-bg) !important; + background: var(--whoogle-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } .info-text { @@ -86,20 +86,20 @@ input { } .collapsible { - color: var(--whoogle-accent) !important; + color: var(--whoogle-element-bg) !important; } .collapsible:after { - color: var(--whoogle-accent) !important; + color: var(--whoogle-element-bg) !important; } .active { - background-color: var(--whoogle-accent) !important; + background-color: var(--whoogle-element-bg) !important; color: var(--whoogle-contrast-text) !important; } .content { - background-color: var(--whoogle-accent) !important; + background-color: var(--whoogle-element-bg) !important; color: var(--whoogle-contrast-text) !important; } @@ -108,7 +108,7 @@ input { } #gh-link { - color: var(--whoogle-accent); + color: var(--whoogle-element-bg); } .autocomplete-items { @@ -125,6 +125,6 @@ input { } .autocomplete-active { - background-color: var(--whoogle-accent) !important; - color: var(--whoogle-background) !important; + background-color: var(--whoogle-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } diff --git a/app/static/css/logo.css b/app/static/css/logo.css new file mode 100644 index 0000000..6aebfa4 --- /dev/null +++ b/app/static/css/logo.css @@ -0,0 +1,17 @@ +.cls-1 { + fill: transparent; +} + +svg { + height: inherit; +} + +a { + height: inherit; +} + +@media (max-width: 1000px) { + svg { + margin-top: .7em; + } +} diff --git a/app/static/css/main.css b/app/static/css/main.css index 937812a..0a1e9cd 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -9,6 +9,10 @@ body { padding-bottom: 10px; } +.logo-container { + max-height: 500px; +} + .search-container { background: transparent !important; width: 80%; diff --git a/app/static/css/variables.css b/app/static/css/variables.css index efb6d3a..76f94ac 100644 --- a/app/static/css/variables.css +++ b/app/static/css/variables.css @@ -1,23 +1,25 @@ /* Colors */ :root { /* LIGHT THEME COLORS */ - --whoogle-background: #fff; - --whoogle-accent: #685e79; - --whoogle-text: #000; - --whoogle-contrast-text: #fff; + --whoogle-logo: #685e79; + --whoogle-page-bg: #ffffff; + --whoogle-element-bg: #685e79; + --whoogle-text: #000000; + --whoogle-contrast-text: #ffffff; --whoogle-secondary-text: #70757a; - --whoogle-result-bg: #fff; + --whoogle-result-bg: #ffffff; --whoogle-result-title: #1967d2; --whoogle-result-url: #0d652d; --whoogle-result-visited: #4b11a8; /* DARK THEME COLORS */ - --whoogle-dark-background: #222; - --whoogle-dark-accent: #685e79; - --whoogle-dark-text: #fff; - --whoogle-dark-contrast-text: #000; - --whoogle-dark-secondary-text: #bbb; - --whoogle-dark-result-bg: #000; + --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; diff --git a/app/static/js/controller.js b/app/static/js/controller.js index 8399220..9dc88a2 100644 --- a/app/static/js/controller.js +++ b/app/static/js/controller.js @@ -76,6 +76,9 @@ document.addEventListener("DOMContentLoaded", function() { setupSearchLayout(); setupConfigLayout(); + document.getElementById("config-load").addEventListener("click", loadConfig); + document.getElementById("config-save").addEventListener("click", saveConfig); + // Focusing on the search input field requires a delay for elements to finish // loading (seemingly only on FF) setTimeout(function() { document.getElementById("search-bar").focus(); }, 250); diff --git a/app/templates/header.html b/app/templates/header.html index cd07589..5973274 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -4,15 +4,17 @@
@@ -26,7 +28,9 @@
- Whoogle +
+ {{ logo|safe }} +
@@ -37,7 +41,7 @@ spellcheck="false" type="text" value="{{ query }}" style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; - border: {{ '2px solid var(--whoogle-dark-accent)' if config.dark else '' }}; border-radius: 8px;"> + border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;">
diff --git a/app/templates/index.html b/app/templates/index.html index 46a9e48..c49943e 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -36,31 +36,9 @@
- - - - - - - - - - - - - - - - - - +
+ {{ logo|safe }} +
@@ -157,9 +135,9 @@
-   +     - +
diff --git a/app/templates/logo.html b/app/templates/logo.html new file mode 100644 index 0000000..bbd99b6 --- /dev/null +++ b/app/templates/logo.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +