diff --git a/app/static/css/input.css b/app/static/css/input.css new file mode 100644 index 0000000..96cc108 --- /dev/null +++ b/app/static/css/input.css @@ -0,0 +1,14 @@ +#search-bar { + background: transparent !important; + padding-right: 50px; +} + +#search-reset { + all: unset; + margin-left: -50px; + text-align: center; + background-color: transparent !important; + cursor: pointer; + height: 40px; + width: 50px; +} diff --git a/app/static/js/utils.js b/app/static/js/utils.js index 56e052f..3cf4a5d 100644 --- a/app/static/js/utils.js +++ b/app/static/js/utils.js @@ -57,4 +57,12 @@ const checkForTracking = () => { document.addEventListener("DOMContentLoaded", function() { checkForTracking(); + + // Clear input if reset button tapped + const search = document.getElementById("search-bar"); + const resetBtn = document.getElementById("search-reset"); + resetBtn.addEventListener("click", event => { + event.preventDefault(); + search.value = ""; + }); }); diff --git a/app/templates/display.html b/app/templates/display.html index d21bd6b..398e276 100644 --- a/app/templates/display.html +++ b/app/templates/display.html @@ -5,6 +5,7 @@ + diff --git a/app/templates/header.html b/app/templates/header.html index e9ab529..1e0cbd3 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -20,10 +20,11 @@ class="noHIxc" name="q" 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-element-bg)' if config.dark else '' }}; border-radius: 8px;" + color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; + border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;" type="text" value="{{ query }}"> +
@@ -56,8 +57,8 @@ 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-element-bg)' if config.dark else '' }}; border-radius: 8px;"> + color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; + border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;">